@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/src/Message/Message.tsx

@@ -10,7 +10,9 @@ import {
   AlertProps,
   Avatar,
   AvatarProps,
+  ButtonProps,
   ContentVariants,
+  FormProps,
   Label,
   LabelGroupProps,
   Timestamp,
@@ -44,6 +46,7 @@ import rehypeSanitize from 'rehype-sanitize';
 import { PluggableList } from 'react-markdown/lib';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
+import MessageInput from './MessageInput';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -145,6 +148,24 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   openLinkInNewTab?: boolean;
   /** Optional inline error message that can be displayed in the message */
   error?: AlertProps;
+  /** Props for links */
+  linkProps?: ButtonProps;
+  /** Whether message is in edit mode */
+  isEditable?: boolean;
+  /** Placeholder for edit input */
+  editPlaceholder?: string;
+  /** Label for the English word "Update" used in edit mode. */
+  updateWord?: string;
+  /** Label for the English word "Cancel" used in edit mode. */
+  cancelWord?: string;
+  /** Callback function for when edit mode update button is clicked */
+  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Callback functionf or when edit cancel update button is clicked */
+  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Props for edit form */
+  editFormProps?: FormProps;
+  /** Sets message to compact styling. */
+  isCompact?: boolean;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -173,9 +194,24 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   tableProps,
   openLinkInNewTab = true,
   additionalRehypePlugins = [],
+  linkProps,
   error,
+  isEditable,
+  editPlaceholder = 'Edit prompt message...',
+  updateWord = 'Update',
+  cancelWord = 'Cancel',
+  onEditUpdate,
+  onEditCancel,
+  editFormProps,
+  isCompact,
   ...props
 }: MessageProps) => {
+  const [messageText, setMessageText] = React.useState(content);
+
+  React.useEffect(() => {
+    setMessageText(content);
+  }, [content]);
+
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
   let rehypePlugins: PluggableList = [rehypeUnwrapImages];
   if (openLinkInNewTab) {
@@ -193,6 +229,82 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+  const renderMessage = () => {
+    if (isLoading) {
+      return <MessageLoading loadingWord={loadingWord} />;
+    }
+    if (isEditable) {
+      return (
+        <>
+          {beforeMainContent && <>{beforeMainContent}</>}
+          <MessageInput
+            content={content}
+            editPlaceholder={editPlaceholder}
+            updateWord={updateWord}
+            cancelWord={cancelWord}
+            onEditUpdate={(event, text) => {
+              onEditUpdate && onEditUpdate(event);
+              setMessageText(text);
+            }}
+            onEditCancel={onEditCancel}
+            {...editFormProps}
+          />
+        </>
+      );
+    }
+    return (
+      <>
+        {beforeMainContent && <>{beforeMainContent}</>}
+        {error ? (
+          <ErrorMessage {...error} />
+        ) : (
+          <Markdown
+            components={{
+              p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+              code: ({ children, ...props }) => (
+                <CodeBlockMessage {...props} {...codeBlockProps}>
+                  {children}
+                </CodeBlockMessage>
+              ),
+              h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+              h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+              h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+              h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+              h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+              h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+              blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+              ul: (props) => <UnorderedListMessage {...props} />,
+              ol: (props) => <OrderedListMessage {...props} />,
+              li: (props) => <ListItemMessage {...props} />,
+              table: (props) => <TableMessage {...props} {...tableProps} />,
+              tbody: (props) => <TbodyMessage {...props} />,
+              thead: (props) => <TheadMessage {...props} />,
+              tr: (props) => <TrMessage {...props} />,
+              td: (props) => {
+                // Conflicts with Td type
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { width, ...rest } = props;
+                return <TdMessage {...rest} />;
+              },
+              th: (props) => <ThMessage {...props} />,
+              img: (props) => <ImageMessage {...props} />,
+              a: (props) => (
+                <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
+                  {props.children}
+                </LinkMessage>
+              )
+            }}
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={rehypePlugins}
+          >
+            {messageText}
+          </Markdown>
+        )}
+      </>
+    );
+  };
+
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -225,60 +337,9 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
         </div>
         <div className="pf-chatbot__message-response">
           <div className="pf-chatbot__message-and-actions">
-            {isLoading ? (
-              <MessageLoading loadingWord={loadingWord} />
-            ) : (
-              <>
-                {beforeMainContent && <>{beforeMainContent}</>}
-                {error ? (
-                  <ErrorMessage {...error} />
-                ) : (
-                  <Markdown
-                    components={{
-                      p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
-                      code: ({ children, ...props }) => (
-                        <CodeBlockMessage {...props} {...codeBlockProps}>
-                          {children}
-                        </CodeBlockMessage>
-                      ),
-                      h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
-                      h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
-                      h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
-                      h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
-                      h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
-                      h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-                      blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
-                      ul: (props) => <UnorderedListMessage {...props} />,
-                      ol: (props) => <OrderedListMessage {...props} />,
-                      li: (props) => <ListItemMessage {...props} />,
-                      table: (props) => <TableMessage {...props} {...tableProps} />,
-                      tbody: (props) => <TbodyMessage {...props} />,
-                      thead: (props) => <TheadMessage {...props} />,
-                      tr: (props) => <TrMessage {...props} />,
-                      td: (props) => {
-                        // Conflicts with Td type
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        const { width, ...rest } = props;
-                        return <TdMessage {...rest} />;
-                      },
-                      th: (props) => <ThMessage {...props} />,
-                      img: (props) => <ImageMessage {...props} />,
-                      a: (props) => (
-                        <LinkMessage href={props.href} rel={props.rel} target={props.target}>
-                          {props.children}
-                        </LinkMessage>
-                      )
-                    }}
-                    remarkPlugins={[remarkGfm]}
-                    rehypePlugins={rehypePlugins}
-                  >
-                    {content}
-                  </Markdown>
-                )}
-                {afterMainContent && <>{afterMainContent}</>}
-              </>
-            )}
-            {!isLoading && sources && <SourcesCard {...sources} />}
+            {renderMessage()}
+            {afterMainContent && <>{afterMainContent}</>}
+            {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile
                 quickStart={quickStarts.quickStart}
@@ -288,15 +349,19 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                 prerequisiteWord={quickStarts.prerequisiteWord}
                 prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
                 quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                isCompact={isCompact}
               />
             )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
-            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
-            {userFeedbackComplete && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
+            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
+            {userFeedbackComplete && (
+              <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
+            )}
             {!isLoading && quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
                 quickResponseContainerProps={quickResponseContainerProps}
+                isCompact={isCompact}
               />
             )}
           </div>

package/src/Message/MessageInput.tsx

@@ -0,0 +1,59 @@
+// ============================================================================
+// Chatbot Main - Message Input
+// ============================================================================
+
+import React from 'react';
+import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
+
+export interface MessageInputProps extends FormProps {
+  /** Placeholder for edit input */
+  editPlaceholder?: string;
+  /** Label for the English word "Update" used in edit mode. */
+  updateWord?: string;
+  /** Label for the English word "Cancel" used in edit mode. */
+  cancelWord?: string;
+  /** Callback function for when edit mode update button is clicked */
+  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+  /** Callback functionf or when edit cancel update button is clicked */
+  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Message text */
+  content?: string;
+}
+
+const MessageInput: React.FunctionComponent<MessageInputProps> = ({
+  editPlaceholder = 'Edit prompt message...',
+  updateWord = 'Update',
+  cancelWord = 'Cancel',
+  onEditUpdate,
+  onEditCancel,
+  content,
+  ...props
+}: MessageInputProps) => {
+  const [messageText, setMessageText] = React.useState(content ?? '');
+
+  const onChange = (event: React.FormEvent<HTMLTextAreaElement>, value: string) => {
+    setMessageText(value);
+  };
+
+  return (
+    <Form {...props}>
+      <TextArea
+        placeholder={editPlaceholder}
+        value={messageText}
+        onChange={onChange}
+        aria-label={editPlaceholder}
+        autoResize
+      />
+      <ActionGroup className="pf-chatbot__message-edit-buttons">
+        <Button variant="primary" onClick={(event) => onEditUpdate && onEditUpdate(event, messageText)}>
+          {updateWord}
+        </Button>
+        <Button variant="secondary" onClick={onEditCancel}>
+          {cancelWord}
+        </Button>
+      </ActionGroup>
+    </Form>
+  );
+};
+
+export default MessageInput;

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -15,12 +15,15 @@ export interface QuickResponseProps {
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
   /** Callback when a response is clicked; used in feedback cards */
   onSelect?: (id: string) => void;
+  /** Sets the quick responses to compact styling */
+  isCompact?: boolean;
 }
 
 export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
   quickResponses,
   quickResponseContainerProps = { numLabels: 5 },
-  onSelect
+  onSelect,
+  isCompact
 }: QuickResponseProps) => {
   const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
 
@@ -42,6 +45,7 @@ export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
           key={id}
           onClick={() => handleQuickResponseClick(id, onClick)}
           className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
+          isCompact={isCompact}
           {...props}
         >
           {content}

package/src/Message/QuickStarts/QuickStartTile.tsx

@@ -49,6 +49,8 @@ export interface QuickStartTileProps {
   prerequisiteWordPlural?: string;
   /** Aria-label for the quick start description button */
   quickStartButtonAriaLabel?: string;
+  /** Sets the tile to compact styling */
+  isCompact?: boolean;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
@@ -61,7 +63,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   prerequisiteWord,
   prerequisiteWordPlural,
   quickStartButtonAriaLabel,
-  action
+  action,
+  isCompact
 }) => {
   const {
     metadata: { name: id },
@@ -105,6 +108,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
       id={`${id}-chatbot-qs-tile`}
       style={{ height: '100%' }}
       data-testid={`chatbot-qs-card-${camelize(displayName)}`}
+      isCompact={isCompact}
     >
       <CardHeader
         {...(action && {

package/src/Message/TextMessage/TextMessage.scss

@@ -58,3 +58,28 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  // Need to inline shorter text
+  .pf-chatbot__message-text {
+    .pf-v6-c-button.pf-m-link {
+      font-size: var(--pf-t--global--font--size--sm);
+    }
+
+    .pf-v6-c-content,
+    .pf-v6-c-content--small,
+    .pf-v6-c-content--blockquote,
+    p,
+    a {
+      --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
+    }
+
+    .pf-v6-c-content--blockquote {
+      --pf-v6-c-content--blockquote--PaddingBlockStart: 0;
+      --pf-v6-c-content--blockquote--PaddingBlockEnd: 0;
+    }
+  }
+}

package/src/Message/UserFeedback/UserFeedback.scss

@@ -11,6 +11,7 @@
   flex-direction: column;
   gap: var(--pf-t--global--spacer--lg);
   align-items: center;
+  text-align: center;
 }
 .pf-chatbot__feedback-complete-text {
   display: flex;
@@ -26,9 +27,6 @@
   align-items: center;
   justify-content: center;
 }
-.pf-chatbot__feedback-complete-body {
-  text-align: center;
-}
 .pf-chatbot__feedback-complete-title {
   font-family: var(--pf-t--global--font--family--heading);
   font-size: var(--pf-t--global--font--size--lg);
@@ -51,3 +49,26 @@
 .pf-chatbot__feedback-card-optional {
   font-weight: initial;
 }
+
+// Compact styles
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
+  .pf-chatbot__feedback-card-form.pf-m-compact {
+    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
+  }
+}
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete {
+  div.pf-chatbot__feedback-complete-body {
+    gap: var(--pf-t--global--spacer--sm);
+  }
+
+  .pf-chatbot__feedback-complete-image {
+    width: 40px;
+  }
+
+  .pf-chatbot__feedback-card-complete-empty-header {
+    .pf-v6-c-card__header:first-child {
+      --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+    }
+  }
+}

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -233,4 +233,17 @@ describe('UserFeedback', () => {
     );
     expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
   });
+  it('should handle isCompact', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+        isCompact
+      />
+    );
+    expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -71,6 +71,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   id,
   headingLevel: HeadingLevel = 'h1',
   focusOnLoad = true,
+  isCompact,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = React.useState<string>();
@@ -86,7 +87,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   return (
     /* card does not have ref forwarding; hence wrapper div */
     <div ref={divRef} id={id} tabIndex={0} aria-label={title}>
-      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+      <Card isCompact={isCompact} className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
         <CardHeader
           actions={{
             actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
@@ -95,12 +96,13 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
           <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
         </CardHeader>
         <CardBody>
-          <Form className="pf-chatbot__feedback-card-form">
+          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
             {quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
                 quickResponseContainerProps={quickResponseContainerProps}
                 onSelect={(id) => setSelectedResponse(id)}
+                isCompact={isCompact}
               />
             )}
             {hasTextArea && (

package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx

@@ -252,4 +252,8 @@ describe('UserFeedbackComplete', () => {
     render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" focusOnLoad={false} />);
     expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
   });
+  it('should handle isCompact', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" isCompact />);
+    expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Message/UserFeedback/UserFeedbackComplete.tsx

@@ -63,6 +63,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
   isLiveRegion,
   id,
   focusOnLoad = true,
+  isCompact,
   ...props
 }: UserFeedbackCompleteProps) => {
   const [timedOut, setTimedOut] = React.useState(false);
@@ -143,8 +144,15 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
       aria-label={title}
       {...ouiaProps}
     >
-      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+      <Card
+        isCompact={isCompact}
+        className={`pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}`}
+        {...props}
+      >
         <CardHeader
+          className={
+            onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header'
+          }
           actions={
             /* eslint-disable indent */
             onClose
@@ -200,7 +208,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
           </div>
           <div className="pf-chatbot__feedback-complete-text">
             <CardTitle className="pf-chatbot__feedback-complete-title">{title}</CardTitle>
-            <CardBody className={`pf-chatbot__feedback-complete-body`}>{body}</CardBody>
+            <CardBody className={`pf-chatbot__feedback-complete-card-body`}>{body}</CardBody>
           </div>
         </div>
       </Card>

package/src/MessageBar/AttachButton.scss

@@ -34,3 +34,13 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}

package/src/MessageBar/AttachButton.test.tsx

@@ -50,4 +50,8 @@ describe('Attach button', () => {
     expect(input.files).toHaveLength(1);
     expect(spy).toHaveBeenCalledTimes(1);
   });
+  it('should handle isCompact', () => {
+    render(<AttachButton isCompact data-testid="button" />);
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/MessageBar/AttachButton.tsx

@@ -25,6 +25,7 @@ export interface AttachButtonProps extends ButtonProps {
   tooltipContent?: string;
   /** Test id applied to input */
   inputTestId?: string;
+  isCompact?: boolean;
 }
 
 const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
@@ -36,6 +37,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   innerRef,
   tooltipContent = 'Attach',
   inputTestId,
+  isCompact,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
@@ -62,15 +64,16 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
         <Button
           variant="plain"
           ref={innerRef}
-          className={`pf-chatbot__button--attach ${className ?? ''}`}
+          className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
           aria-label={props['aria-label'] || 'Attach button'}
           isDisabled={isDisabled}
           onClick={onClick ?? open}
           icon={
-            <Icon iconSize="xl" isInline>
+            <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
               <PaperclipIcon />
             </Icon>
           }
+          size={isCompact ? 'sm' : undefined}
           {...props}
         />
       </Tooltip>

package/src/MessageBar/MessageBar.scss

@@ -110,3 +110,20 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot__message-bar-input.pf-m-compact {
+  padding-block-start: 0;
+  padding-block-end: 0;
+
+  .pf-chatbot__message-textarea {
+    font-size: var(--pf-t--global--font--size--sm) !important;
+  }
+
+  .pf-chatbot__message-bar-actions {
+    padding-block-start: var(--pf-t--global--spacer--md);
+    padding-block-end: var(--pf-t--global--spacer--md);
+  }
+}

package/src/MessageBar/MessageBar.test.tsx

@@ -96,6 +96,12 @@ describe('Message bar', () => {
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
   });
+  it('can use specified placeholder text', async () => {
+    render(<MessageBar onSendMessage={jest.fn} placeholder="test placeholder" />);
+    const input = screen.getByRole('textbox', { name: /test placeholder/i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+  });
 
   // Send button
   // --------------------------------------------------------------------------
@@ -304,6 +310,13 @@ describe('Message bar', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
     expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
   });
+  it('can customize the listening placeholder', async () => {
+    mockSpeechRecognition();
+    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    const input = screen.getByRole('textbox', { name: /I am listening/i });
+    expect(input).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for microphone', async () => {
     mockSpeechRecognition();
     render(