@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.20

package/src/Message/Message.tsx

@@ -3,7 +3,7 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import Markdown from 'react-markdown';
+import Markdown, { Options } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
   AlertProps,
@@ -49,6 +49,9 @@ import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
+import ToolResponse, { ToolResponseProps } from '../ToolResponse';
+import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
+import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -161,6 +164,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
   /** Additional rehype plugins passed from the consumer */
   additionalRehypePlugins?: PluggableList;
+  /** Additional remark plugins passed from the consumer */
+  additionalRemarkPlugins?: PluggableList;
   /** Whether to open links in message in new tab. */
   openLinkInNewTab?: boolean;
   /** Optional inline error message that can be displayed in the message */
@@ -185,6 +190,16 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   editFormProps?: FormProps;
   /** Sets message to compact styling. */
   isCompact?: boolean;
+  /** Disables markdown parsing for message, allowing only text input */
+  isMarkdownDisabled?: boolean;
+  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+  reactMarkdownProps?: Options;
+  /** Props for tool response card */
+  toolResponse?: ToolResponseProps;
+  /** Props for deep thinking card */
+  deepThinking?: DeepThinkingProps;
+  /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+  remarkGfmProps?: Options;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -213,6 +228,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   tableProps,
   openLinkInNewTab = true,
   additionalRehypePlugins = [],
+  additionalRemarkPlugins = [],
   linkProps,
   error,
   isEditable,
@@ -224,6 +240,11 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   inputRef,
   editFormProps,
   isCompact,
+  isMarkdownDisabled,
+  reactMarkdownProps,
+  toolResponse,
+  deepThinking,
+  remarkGfmProps,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -250,6 +271,152 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
+  const handleMarkdown = () => {
+    if (isMarkdownDisabled) {
+      return (
+        <TextMessage component={ContentVariants.p} {...props}>
+          {messageText}
+        </TextMessage>
+      );
+    }
+    return (
+      <Markdown
+        components={{
+          section: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <section {...rest} className={`pf-chatbot__message-text ${rest?.className}`} />;
+          },
+          p: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.p} {...rest} />;
+          },
+          code: ({ children, ...props }) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...codeProps } = props;
+            return (
+              <CodeBlockMessage {...codeProps} {...codeBlockProps}>
+                {children}
+              </CodeBlockMessage>
+            );
+          },
+          h1: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h1} {...rest} />;
+          },
+          h2: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h2} {...rest} />;
+          },
+          h3: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h3} {...rest} />;
+          },
+          h4: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h4} {...rest} />;
+          },
+          h5: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h5} {...rest} />;
+          },
+          h6: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h6} {...rest} />;
+          },
+          blockquote: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.blockquote} {...rest} />;
+          },
+          ul: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <UnorderedListMessage {...rest} />;
+          },
+          ol: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <OrderedListMessage {...rest} />;
+          },
+          li: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <ListItemMessage {...rest} />;
+          },
+          // table requires node attribute for calculating headers for mobile breakpoint
+          table: (props) => <TableMessage {...props} {...tableProps} />,
+          tbody: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TbodyMessage {...rest} />;
+          },
+          thead: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TheadMessage {...rest} />;
+          },
+          tr: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TrMessage {...rest} />;
+          },
+          td: (props) => {
+            // Conflicts with Td type
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, width, ...rest } = props;
+            return <TdMessage {...rest} />;
+          },
+          th: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <ThMessage {...rest} />;
+          },
+          img: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <ImageMessage {...rest} />;
+          },
+          a: (props) => {
+            // node is just the details of the document structure - not needed
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return (
+              // some a types conflict with ButtonProps, but it's ok because we are using an a tag
+              // there are too many to handle manually
+              <LinkMessage {...(rest as any)} {...linkProps}>
+                {props.children}
+              </LinkMessage>
+            );
+          },
+          // used for footnotes
+          sup: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <SuperscriptMessage {...rest} />;
+          }
+        }}
+        remarkPlugins={[[remarkGfm, { ...remarkGfmProps }], ...additionalRemarkPlugins]}
+        rehypePlugins={rehypePlugins}
+        {...reactMarkdownProps}
+        remarkRehypeOptions={{
+          // removes sr-only class from footnote labels applied by default
+          footnoteLabelProperties: { className: [''] },
+          ...reactMarkdownProps?.remarkRehypeOptions
+        }}
+      >
+        {messageText}
+      </Markdown>
+    );
+  };
+
   const renderMessage = () => {
     if (isLoading) {
       return <MessageLoading loadingWord={loadingWord} />;
@@ -277,51 +444,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
     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>
-        )}
+        {error ? <ErrorMessage {...error} /> : handleMarkdown()}
       </>
     );
   };
@@ -360,6 +483,8 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           <div className="pf-chatbot__message-and-actions">
             {renderMessage()}
             {afterMainContent && <>{afterMainContent}</>}
+            {toolResponse && <ToolResponse {...toolResponse} />}
+            {deepThinking && <DeepThinking {...deepThinking} />}
             {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile

package/src/Message/SuperscriptMessage/SuperscriptMessage.scss

@@ -0,0 +1,8 @@
+.pf-chatbot__message-superscript {
+  font-size: smaller;
+  vertical-align: super;
+  .pf-v6-c-button.pf-m-link.pf-m-inline {
+    font-size: inherit;
+    vertical-align: inherit;
+  }
+}

package/src/Message/SuperscriptMessage/SuperscriptMessage.tsx

@@ -0,0 +1,13 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Superscript (like for footnotes)
+// ============================================================================
+
+import { ExtraProps } from 'react-markdown';
+
+const SuperscriptMessage = ({ children }: JSX.IntrinsicElements['sup'] & ExtraProps) => (
+  <span className="pf-chatbot__message-superscript">
+    <sup>{children}</sup>
+  </span>
+);
+
+export default SuperscriptMessage;

package/src/Message/TextMessage/TextMessage.scss

@@ -17,9 +17,10 @@
   width: fit-content;
   padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
   border-radius: var(--pf-t--global--border--radius--small);
+  --pf-chatbot-message-text-font-size: var(--pf-t--global--font--size--md);
 
   .pf-v6-c-button.pf-m-link {
-    font-size: var(--pf-t--global--font--size--md);
+    font-size: var(--pf-chatbot-message-text-font-size);
   }
 
   .pf-v6-c-content,
@@ -27,15 +28,49 @@
   .pf-v6-c-content--blockquote,
   p,
   a {
-    --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
+    --pf-v6-c-content--FontSize: var(--pf-chatbot-message-text-font-size);
   }
 
   code {
     background-color: var(--pf-t--global--background--color--tertiary--default);
-    font-size: var(--pf-t--global--font--size--body--default);
+    font-size: var(--pf-chatbot-message-text-inline-code-font-size);
+  }
+
+  // Hide message text that contains sr-only content
+  // https://css-tricks.com/inclusively-hidden/
+  &:has(.sr-only) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
 }
 
+// ============================================================================
+// Footnote spacing styles
+// ============================================================================
+
+// Add spacing to paragraphs in multi-paragraph footnotes
+// Only target p tags that are direct children of message-text spans (not inside blockquotes, etc.)
+li[id*='user-content-fn-']:has(> span > .pf-chatbot__message-text + .pf-chatbot__message-text)
+  > span
+  > .pf-chatbot__message-text
+  > p {
+  margin-block-end: var(--pf-t--global--spacer--md);
+}
+
+// Handle user message footnotes which may have extra span wrappers
+li[id*='user-content-fn-']:has(> span > span > .pf-chatbot__message-text + .pf-chatbot__message-text)
+  > span
+  > span
+  > .pf-chatbot__message-text
+  > p {
+  margin-block-end: var(--pf-t--global--spacer--md);
+}
+
 .pf-chatbot__message--user {
   .pf-chatbot__message-text {
     background-color: var(--pf-t--global--color--brand--default);
@@ -54,6 +89,11 @@
       color: var(--pf-t--global--text--color--on-brand--default);
     }
   }
+
+  .pf-chatbot__message-text > .pf-chatbot__message-text {
+    background-color: initial;
+    padding: initial;
+  }
 }
 
 // ============================================================================
@@ -62,8 +102,9 @@
 .pf-chatbot.pf-m-compact {
   // Need to inline shorter text
   .pf-chatbot__message-text {
+    --pf-chatbot-message-text-font-size: var(--pf-t--global--font--size--sm);
     .pf-v6-c-button.pf-m-link {
-      font-size: var(--pf-t--global--font--size--sm);
+      font-size: var(--pf-chatbot-message-text-font-size);
     }
 
     .pf-v6-c-content,
@@ -71,7 +112,7 @@
     .pf-v6-c-content--blockquote,
     p,
     a {
-      --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
+      --pf-v6-c-content--FontSize: var(--pf-chatbot-message-text-font-size);
     }
 
     .pf-v6-c-content--blockquote {

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

@@ -245,4 +245,111 @@ describe('UserFeedback', () => {
     );
     expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
   });
+  it('should pass buttonProps to submit button', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        submitButtonProps={{ variant: 'secondary', isDisabled: true }}
+      />
+    );
+    const submitButton = screen.getByRole('button', { name: /Submit/i });
+    expect(submitButton).toHaveClass('pf-v6-c-button pf-m-secondary');
+    expect(submitButton).toBeDisabled();
+  });
+  it('should pass cardHeaderProps to card header', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardHeaderProps={{ 'data-testid': 'card-header', className: 'custom-header' } as any}
+      />
+    );
+    const cardHeader = screen.getByTestId('card-header');
+    expect(cardHeader).toHaveClass('custom-header');
+  });
+  it('should pass cardBodyProps to card body', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardBodyProps={{ 'data-testid': 'card-body', className: 'custom-body' } as any}
+      />
+    );
+    const cardBody = screen.getByTestId('card-body');
+    expect(cardBody).toHaveClass('custom-body');
+  });
+  it('should pass headingLevelProps to title heading', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        headingLevelProps={{ className: 'custom-heading', id: 'feedback-title' }}
+      />
+    );
+    const heading = screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i });
+    expect(heading).toHaveClass('custom-heading');
+    expect(heading).toHaveAttribute('id', 'feedback-title');
+  });
+
+  it('should pass formProps to form', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        formProps={{ 'data-testid': 'feedback-form', className: 'custom-form' } as any}
+      />
+    );
+    const form = screen.getByTestId('feedback-form');
+    expect(form).toHaveClass('custom-form');
+  });
+  it('should pass textAreaProps to text area when hasTextArea is true', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaProps={{ 'data-testid': 'custom-textarea', rows: 5 } as any}
+      />
+    );
+    const textArea = screen.getByTestId('custom-textarea');
+    expect(textArea).toHaveAttribute('rows', '5');
+    expect(textArea).toHaveAttribute('data-testid', 'custom-textarea');
+  });
+  it('should pass actionGroupProps to action group', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        actionGroupProps={{ 'data-testid': 'action-group', className: 'custom-actions' } as any}
+      />
+    );
+    const actionGroup = screen.getByTestId('action-group');
+    expect(actionGroup).toHaveClass('custom-actions');
+  });
+  it('should render children', () => {
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES}>
+        <div data-testid="custom-content">Custom feedback content</div>
+        <p>Additional paragraph</p>
+      </UserFeedback>
+    );
+    expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+    expect(screen.getByText('Custom feedback content')).toBeInTheDocument();
+    expect(screen.getByText('Additional paragraph')).toBeInTheDocument();
+  });
 });

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -8,15 +8,21 @@ import { useState, useRef, useEffect } from 'react';
 // Import PatternFly components
 import {
   ActionGroup,
+  ActionGroupProps,
   Button,
+  ButtonProps,
   Card,
   CardBody,
+  CardBodyProps,
   CardHeader,
+  CardHeaderProps,
   CardProps,
   Form,
+  FormProps,
   LabelGroupProps,
   OUIAProps,
-  TextArea
+  TextArea,
+  TextAreaProps
 } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './CloseButton';
@@ -54,6 +60,20 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   focusOnLoad?: boolean;
   /** Timestamp passed in by Message for more context in aria announcements */
   timestamp?: string;
+  /** Additional props passed to submit button */
+  submitButtonProps?: ButtonProps;
+  /** Additional props passed to card header */
+  cardHeaderProps?: CardHeaderProps;
+  /** Additional props passed to card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to title heading */
+  headingLevelProps?: React.HTMLAttributes<HTMLHeadingElement>;
+  /** Additional props passed to form */
+  formProps?: FormProps;
+  /** Additional props passed to text area */
+  textAreaProps?: TextAreaProps;
+  /** Additional props passed to action group */
+  actionGroupProps?: ActionGroupProps;
 }
 
 const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
@@ -74,6 +94,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   headingLevel: HeadingLevel = 'h1',
   focusOnLoad = true,
   isCompact,
+  children,
+  cardHeaderProps,
+  cardBodyProps,
+  headingLevelProps,
+  formProps,
+  textAreaProps,
+  actionGroupProps,
+  submitButtonProps,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = useState<string>();
@@ -94,11 +122,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
           actions={{
             actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
           }}
+          {...cardHeaderProps}
         >
-          <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
+          <HeadingLevel className="pf-chatbot__feedback-card-title" {...headingLevelProps}>
+            {title}
+          </HeadingLevel>
         </CardHeader>
-        <CardBody>
-          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
+        <CardBody {...cardBodyProps}>
+          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`} {...formProps}>
             {quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
@@ -117,10 +148,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
                 placeholder={textAreaPlaceholder}
                 aria-label={textAreaAriaLabel}
                 resizeOrientation="vertical"
+                {...textAreaProps}
               />
             )}
-            <ActionGroup>
-              <Button onClick={() => onSubmit(selectedResponse, value)}>{submitWord}</Button>
+            {children}
+            <ActionGroup {...actionGroupProps}>
+              <Button onClick={() => onSubmit(selectedResponse, value)} {...submitButtonProps}>
+                {submitWord}
+              </Button>
             </ActionGroup>
           </Form>
         </CardBody>

package/src/MessageBar/MessageBar.tsx

@@ -141,6 +141,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [message, setMessage] = useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -285,21 +286,38 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
   const handleKeyDown = useCallback(
     (event: ReactKeyboardEvent) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
+      // Japanese and other languages may use IME for character input.
+      // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+      // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+      // Chrome, Edge, and Firefox seem to work well with just the compose event.
+      // Safari is a little bit special. We need to handle 229 as well in this case.
+      const nativeEvent = event.nativeEvent as KeyboardEvent;
+      const isCompositionKey = nativeEvent.which === 229;
+      const isCurrentlyComposing = isComposing || isCompositionKey;
+
+      if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
         event.preventDefault();
         if (!isSendButtonDisabled && !hasStopButton) {
           handleSend(message);
         }
       }
-      if (event.key === 'Enter' && event.shiftKey) {
+      if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
         if (textareaRef.current) {
           handleNewLine(textareaRef.current);
         }
       }
     },
-    [isSendButtonDisabled, hasStopButton, handleSend, message]
+    [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]
   );
 
+  const handleCompositionStart = useCallback(() => {
+    setIsComposing(true);
+  }, []);
+
+  const handleCompositionEnd = useCallback(() => {
+    setIsComposing(false);
+  }, []);
+
   const handleAttachMenuToggle = () => {
     attachMenuProps?.setIsAttachMenuOpen && attachMenuProps?.setIsAttachMenuOpen(!attachMenuProps?.isAttachMenuOpen);
     attachMenuProps?.onAttachMenuToggleClick();
@@ -402,6 +420,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
           {...props}
         />
       </div>