refactor(input-bar): use assistantName from LeafyGreenChatContext for loading message (#3148)

* refactor(input-bar): revert loadingMessage prop addition and use assistantName context value

* test(input-bar): custom assistantName value

Author: stephl3

.changeset/sixty-hoops-accept.md

@@ -1,5 +1,5 @@
 ---
-'@lg-chat/input-bar': minor
+'@lg-chat/input-bar': patch
 ---
 
-Add support for configurable loadingMessage prop to InputBar
+Use `assistantName` value from `LeafyGreenChatContext` for loading message

chat/input-bar/README.md

@@ -56,21 +56,20 @@ return (
 
 ## Properties
 
-| Prop                          | Type                                           | Description                                                 | Default                         |
-| ----------------------------- | ---------------------------------------------- | ----------------------------------------------------------- | ------------------------------- |
-| `badgeText`                   | `string`                                       | Determines the text inside the rendered Badge               |                                 |
-| `darkMode`                    | `boolean`                                      | Determines if the component will render in dark mode        | `false`                         |
-| `disabled`                    | `boolean`                                      | Determines whether the user can interact with the InputBar  | `false`                         |
-| `disableSend`                 | `boolean`                                      | When defined as `true`, disables the send action and button |                                 |
-| `loadingMessage`              | `ReactNode`                                    | Custom loading message to display when `state='loading'`    | `MongoDB Assistant is thinking` |
-| `errorMessage`                | `ReactNode`                                    | Custom error message to display when `state='error'`        |                                 |
-| `onMessageSend`               | `(messageBody: string, e?: FormEvent) => void` | Submit event handler.                                       |                                 |
-| `shouldRenderGradient`        | `boolean`                                      | Toggles the gradient animation around the input             | `true`                          |
-| `shouldRenderHotkeyIndicator` | `boolean`                                      | Toggles the hotkey indicator on the right side of the input | `false`                         |
-| `textareaProps`               | `TextareaAutosizeProps`                        | Props passed to the TextareaAutosize component.             |                                 |
-| `textareaRef`                 | `RefObject<HTMLTextAreaElement>`               | Ref object to access the textarea element directly          |                                 |
-| `state`                       | `'unset' \| 'error' \| 'loading'`              | The current state of the InputBar.                          |                                 |
-| `...`                         | `HTMLElementProps<'form'>`                     | Props spread on the root element                            |                                 |
+| Prop                          | Type                                           | Description                                                 | Default |
+| ----------------------------- | ---------------------------------------------- | ----------------------------------------------------------- | ------- |
+| `badgeText`                   | `string`                                       | Determines the text inside the rendered Badge               |         |
+| `darkMode`                    | `boolean`                                      | Determines if the component will render in dark mode        | `false` |
+| `disabled`                    | `boolean`                                      | Determines whether the user can interact with the InputBar  | `false` |
+| `disableSend`                 | `boolean`                                      | When defined as `true`, disables the send action and button |         |
+| `errorMessage`                | `ReactNode`                                    | Custom error message to display when `state='error'`        |         |
+| `onMessageSend`               | `(messageBody: string, e?: FormEvent) => void` | Submit event handler.                                       |         |
+| `shouldRenderGradient`        | `boolean`                                      | Toggles the gradient animation around the input             | `true`  |
+| `shouldRenderHotkeyIndicator` | `boolean`                                      | Toggles the hotkey indicator on the right side of the input | `false` |
+| `textareaProps`               | `TextareaAutosizeProps`                        | Props passed to the TextareaAutosize component.             |         |
+| `textareaRef`                 | `RefObject<HTMLTextAreaElement>`               | Ref object to access the textarea element directly          |         |
+| `state`                       | `'unset' \| 'error' \| 'loading'`              | The current state of the InputBar.                          |         |
+| `...`                         | `HTMLElementProps<'form'>`                     | Props spread on the root element                            |         |
 
 ## TextareaAutosizeProps
 

chat/input-bar/src/InputBar.stories.tsx

@@ -24,7 +24,6 @@ const meta: StoryMetaType<typeof InputBar> = {
         darkMode: [false, true],
         disabled: [false, true],
         disableSend: [false, true],
-        loadingMessage: [undefined, 'Custom loading message'],
         state: Object.values(State),
         textareaProps: [
           { value: '' },

chat/input-bar/src/InputBar/InputBar.spec.tsx

@@ -302,21 +302,27 @@ describe('packages/input-bar', () => {
   });
 
   describe('status states', () => {
-    test('renders loading state with default message when state is "loading"', () => {
+    test('renders loading state with default assistantName when state is "loading"', () => {
       renderInputBar({ state: State.Loading });
 
       expect(
         screen.getByText(/MongoDB Assistant is thinking/i),
       ).toBeInTheDocument();
     });
 
-    test('renders loading state with custom message when state is "loading" and loadingMessage provided', () => {
-      renderInputBar({
-        state: State.Loading,
-        loadingMessage: 'Custom loading message',
-      });
+    test('renders loading state with custom assistantName when state is "loading"', () => {
+      render(
+        <LeafyGreenChatProvider
+          variant={Variant.Compact}
+          assistantName="Custom Assistant"
+        >
+          <InputBar state={State.Loading} />
+        </LeafyGreenChatProvider>,
+      );
 
-      expect(screen.getByText(/Custom loading message/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(/Custom Assistant is thinking/i),
+      ).toBeInTheDocument();
     });
 
     test('renders error state with default message when state is "error" and no message provided', () => {

chat/input-bar/src/InputBar/InputBar.tsx

@@ -74,7 +74,6 @@ export const InputBar = forwardRef<HTMLFormElement, InputBarProps>(
       dropdownFooterSlot,
       dropdownProps,
       errorMessage,
-      loadingMessage,
       onMessageSend,
       onSubmit,
       shouldRenderGradient: shouldRenderGradientProp = true,
@@ -434,11 +433,7 @@ export const InputBar = forwardRef<HTMLFormElement, InputBarProps>(
           {...rest}
         >
           {isCompact && (
-            <InputBarFeedback
-              errorMessage={errorMessage}
-              loadingMessage={loadingMessage}
-              state={state}
-            />
+            <InputBarFeedback errorMessage={errorMessage} state={state} />
           )}
           <div className={outerFocusContainerStyles}>
             <div

chat/input-bar/src/InputBar/InputBarFeedback.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { useLeafyGreenChatContext } from '@lg-chat/leafygreen-chat-provider';
 
 import { AssistantAvatar } from '@leafygreen-ui/avatar';
 import Banner from '@leafygreen-ui/banner';
@@ -18,7 +19,6 @@ import { State } from './shared.types';
 
 const messages = {
   defaultError: 'Oops... Something went wrong.',
-  loading: 'MongoDB Assistant is thinking',
   retryButton: 'Retry',
 } as const;
 
@@ -32,13 +32,13 @@ export const InputBarFeedback = forwardRef<
       className,
       darkMode: darkModeProp,
       errorMessage,
-      loadingMessage,
       state,
       ...rest
     },
     fwdRef,
   ) => {
     const { darkMode, theme } = useDarkMode(darkModeProp);
+    const { assistantName } = useLeafyGreenChatContext();
 
     return (
       <div
@@ -52,7 +52,7 @@ export const InputBarFeedback = forwardRef<
           <div className={loadingContainerStyles}>
             <AssistantAvatar darkMode={darkMode} size={20} />
             <Body className={getLoadingTextStyles(theme)}>
-              {loadingMessage || messages.loading}
+              {`${assistantName} is thinking`}
             </Body>
           </div>
         )}

chat/input-bar/src/InputBar/shared.types.ts

@@ -19,10 +19,4 @@ export interface SharedInputBarProps {
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="compact"`.
    */
   state?: State;
-
-  /**
-   * Custom loading message to display when `state='loading'`
-   * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="compact"`.
-   */
-  loadingMessage?: ReactNode;
 }