Make loading message configurable for @lg-chat/input-bar (#3116)

* Update InputBarFeedback.tsx

* Support custom loading message

* Changeset

* run lint

* CR

* Use ReactNode

* lint

---------

Co-authored-by: Shaneeza <[email protected]>

Author: khelif96

.changeset/sixty-hoops-accept.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/input-bar': minor
+---
+
+Add support for configurable loadingMessage prop to InputBar

chat/input-bar/README.md

@@ -56,20 +56,21 @@ 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 |         |
-| `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 |                                 |
+| `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                            |                                 |
 
 ## TextareaAutosizeProps
 

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

@@ -24,6 +24,7 @@ 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,14 +302,23 @@ describe('packages/input-bar', () => {
   });
 
   describe('status states', () => {
-    test('renders loading state when state is "loading"', () => {
+    test('renders loading state with default message 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',
+      });
+
+      expect(screen.getByText(/Custom loading message/i)).toBeInTheDocument();
+    });
+
     test('renders error state with default message when state is "error" and no message provided', () => {
       renderInputBar({ state: State.Error });
 

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

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

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

@@ -32,6 +32,7 @@ export const InputBarFeedback = forwardRef<
       className,
       darkMode: darkModeProp,
       errorMessage,
+      loadingMessage,
       state,
       ...rest
     },
@@ -51,7 +52,7 @@ export const InputBarFeedback = forwardRef<
           <div className={loadingContainerStyles}>
             <AssistantAvatar darkMode={darkMode} size={20} />
             <Body className={getLoadingTextStyles(theme)}>
-              {messages.loading}
+              {loadingMessage || messages.loading}
             </Body>
           </div>
         )}

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

@@ -19,4 +19,10 @@ 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;
 }