Share localization string between sendbox and editbox

packages/chat-component-bindings/src/handlers/createHandlers.ts

@@ -57,7 +57,7 @@ export const createDefaultChatHandlers = memoizeOne(
           content,
           senderDisplayName: chatClient.getState().displayName
         };
-        await chatThreadClient.sendMessage(sendMessageRequest, options);
+        await chatThreadClient.sendMessage(sendMessageRequest, { ...options, type: 'html' });
       },
       onUpdateMessage: async (
         messageId: string,

packages/communication-react/review/beta/communication-react.api.md

@@ -2201,6 +2201,8 @@ export interface ComponentStrings {
     participantsButton: ParticipantsButtonStrings;
     raiseHandButton: RaiseHandButtonStrings;
     reactionButton: ReactionButtonStrings;
+    // (undocumented)
+    richText: RichTextStrings;
     richTextSendBox: RichTextSendBoxStrings;
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
@@ -3377,7 +3379,7 @@ export type MessageThreadSelector = (state: ChatClientState, props: ChatBaseSele
 };
 
 // @public
-export interface MessageThreadStrings {
+export interface MessageThreadStrings extends RichTextStrings {
     actionMenuMoreOptions?: string;
     attachmentCardGroupMessage: string;
     blockedWarningLinkText: string;
@@ -3893,7 +3895,13 @@ export interface RichTextSendBoxProps {
 }
 
 // @beta
-export interface RichTextSendBoxStrings extends SendBoxStrings {
+export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
+}
+
+// Warning: (ae-internal-missing-underscore) The name "RichTextStrings" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export interface RichTextStrings {
     boldTooltip: string;
     bulletListTooltip: string;
     decreaseIndentTooltip: string;

packages/communication-react/src/index.ts

@@ -305,7 +305,7 @@ export type {
 /* @conditional-compile-remove(rich-text-editor) */
 export { RichTextSendBox } from '../../react-components/src';
 /* @conditional-compile-remove(rich-text-editor) */
-export type { RichTextSendBoxProps, RichTextSendBoxStrings } from '../../react-components/src';
+export type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from '../../react-components/src';
 /* @conditional-compile-remove(spotlight) */
 export type { Spotlight } from '../../react-components/src';
 export type { ImageOverlayProps, ImageOverlayStrings } from '../../react-components/src';

packages/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx

@@ -151,7 +151,7 @@ export const ChatMessageComponentAsRichTextEditBox = (
   ]);
   const richTextLocaleStrings = useMemo(() => {
     /* @conditional-compile-remove(rich-text-editor) */
-    return locale.richTextSendBox;
+    return strings || locale.richTextSendBox;
     return locale.sendBox;
   }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
 

packages/react-components/src/components/MessageThread.tsx

@@ -47,6 +47,7 @@ import {
 import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
 import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 import { Announcer } from './Announcer';
+import { RichTextStrings } from './RichTextEditor/RichTextSendBox';
 
 const isMessageSame = (first: ChatMessage, second: ChatMessage): boolean => {
   return (
@@ -155,7 +156,7 @@ export interface MessageThreadStyles extends BaseCustomStyles {
  *
  * @public
  */
-export interface MessageThreadStrings {
+export interface MessageThreadStrings extends RichTextStrings {
   /** String for Sunday */
   sunday: string;
   /** String for Monday */
@@ -681,7 +682,7 @@ export const MessageThreadWrapper = (props: MessageThreadProps): JSX.Element =>
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     onRenderAttachmentDownloads,
     /* @conditional-compile-remove(rich-text-editor) */
-    richTextEditor = false
+    richTextEditor = true
   } = props;
   // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
   // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.

packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx

@@ -31,7 +31,13 @@ import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
  *
  * @beta
  */
-export interface RichTextSendBoxStrings extends SendBoxStrings {
+export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}
+
+/**
+ *
+ * @internal
+ */
+export interface RichTextStrings {
   /**
    * Tooltip text for the bold button.
    */

packages/react-components/src/components/index.ts

@@ -27,7 +27,7 @@ export { ChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageCo
 /* @conditional-compile-remove(rich-text-editor) */
 export type { ChatMessageComponentAsRichTextEditBoxProps } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox';
 /* @conditional-compile-remove(rich-text-editor) */
-export type { RichTextSendBoxProps, RichTextSendBoxStrings } from './RichTextEditor/RichTextSendBox';
+export type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from './RichTextEditor/RichTextSendBox';
 
 /* @conditional-compile-remove(mention) */
 export type {

packages/react-components/src/localization/LocalizationProvider.tsx

@@ -47,7 +47,7 @@ import { ImageOverlayStrings } from '../components/ImageOverlay';
 /* @conditional-compile-remove(reaction) */
 import { ReactionButtonStrings } from '../components';
 /* @conditional-compile-remove(rich-text-editor) */
-import { RichTextSendBoxStrings } from '../components/RichTextEditor/RichTextSendBox';
+import { RichTextSendBoxStrings, RichTextStrings } from '../components/RichTextEditor/RichTextSendBox';
 
 /**
  * Locale information for all components exported from this library.
@@ -180,6 +180,7 @@ export interface ComponentStrings {
   /* @conditional-compile-remove(total-participant-count) */
   /** Strings for the participant list component */
   ParticipantList: ParticipantListStrings;
+  richText: RichTextStrings;
 }
 
 /**

packages/react-components/src/localization/locales/en-US/strings.json

@@ -30,6 +30,27 @@
     "uploadCompleted": "Upload completed",
     "attachmentMoreMenu": "More Options"
   },
+  "richText": {
+    "boldTooltip": "Bold",
+    "italicTooltip": "Italic",
+    "underlineTooltip": "Underline",
+    "bulletListTooltip": "Bulleted list",
+    "numberListTooltip": "Numbered list",
+    "increaseIndentTooltip": "Increase indent",
+    "decreaseIndentTooltip": "Decrease indent",
+    "insertTableTooltip": "Insert table",
+    "richTextFormatButtonTooltip": "Format",
+    "insertRowOrColumnMenu": "Insert",
+    "insertTableMenuTitle": "Insert {column} x {row} table",
+    "insertRowAboveMenu": "Insert above",
+    "insertRowBelowMenu": "Insert below",
+    "insertColumnLeftMenu": "Insert left",
+    "insertColumnRightMenu": "Insert right",
+    "deleteRowOrColumnMenu": "Delete",
+    "deleteColumnMenu": "Delete column",
+    "deleteRowMenu": "Delete row",
+    "deleteTableMenu": "Delete table"
+  },
   "richTextSendBox": {
     "placeholderText": "Enter a message",
     "textTooLong": "Your message length is over the maximum limit.",
@@ -199,7 +220,26 @@
     "blockedWarningText": "This message was deleted due to organizational policy.",
     "blockedWarningLinkText": "Details",
     "attachmentCardGroupMessage": "The message has {attachmentCount} attachment",
-    "messageDeletedAnnouncementAriaLabel": "The message is deleted"
+    "messageDeletedAnnouncementAriaLabel": "The message is deleted",
+    "boldTooltip": "Bold",
+    "italicTooltip": "Italic",
+    "underlineTooltip": "Underline",
+    "bulletListTooltip": "Bulleted list",
+    "numberListTooltip": "Numbered list",
+    "increaseIndentTooltip": "Increase indent",
+    "decreaseIndentTooltip": "Decrease indent",
+    "insertTableTooltip": "Insert table",
+    "richTextFormatButtonTooltip": "Format",
+    "insertRowOrColumnMenu": "Insert",
+    "insertTableMenuTitle": "Insert {column} x {row} table",
+    "insertRowAboveMenu": "Insert above",
+    "insertRowBelowMenu": "Insert below",
+    "insertColumnLeftMenu": "Insert left",
+    "insertColumnRightMenu": "Insert right",
+    "deleteRowOrColumnMenu": "Delete",
+    "deleteColumnMenu": "Delete column",
+    "deleteRowMenu": "Delete row",
+    "deleteTableMenu": "Delete table"
   },
   "errorBar": {
     "unableToReachChatService": "You are offline",

packages/react-composites/src/composites/ChatComposite/ChatScreen.tsx

@@ -53,6 +53,7 @@ import { SendBox } from '@internal/react-components';
 import { useSelector } from './hooks/useSelector';
 /* @conditional-compile-remove(attachment-upload) */
 import { attachmentUploadsSelector } from './selectors/attachmentUploadsSelector';
+import { RichTextSendBox } from '@internal/react-components';
 
 /**
  * @private
@@ -395,6 +396,7 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
             inlineImageOptions={inlineImageOptions}
             numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}
             styles={messageThreadStyles}
+            strings={{ sunday: '134', editBoxSubmitButton: '456', boldTooltip: '123' }}
           />
           <Stack className={mergeStyles(sendboxContainerStyles)}>
             <div className={mergeStyles(typingIndicatorContainerStyles)}>
@@ -411,6 +413,7 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
                 </Stack>
               )}
               <Stack grow>
+                <RichTextSendBox {...sendBoxProps} autoFocus={options?.autoFocus} />
                 <SendBox
                   {...sendBoxProps}
                   autoFocus={options?.autoFocus}