[RTE] Storybook update for rich text edit box (#4441)

Author: vhuseinova-msft

change/@azure-communication-react-9fe5a6f8-6d78-41cb-9efb-d85013b805c1.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "RTE",
+  "comment": "Add rich text editor examples for MessageThread",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/storybook/stories/INTERNAL/RTE/RichTextEditBox.stories.tsx

@@ -59,6 +59,7 @@ import { MessageWithCustomMentionRenderer } from './snippets/MessageWithCustomMe
 import { MessageThreadWithSystemMessagesExample } from './snippets/SystemMessages.snippet';
 import { MessageThreadWithInlineImageExample } from './snippets/WithInlineImageMessage.snippet';
 import { MessageThreadWithMessageDateExample } from './snippets/WithMessageDate.snippet';
+import { MessageThreadWithRichTextEditorExample } from './snippets/WithRichTextEditor.snippet';
 
 const MessageThreadWithBlockedMessagesExampleText =
   require('!!raw-loader!./snippets/BlockedMessages.snippet.tsx').default;
@@ -89,6 +90,7 @@ const MessageThreadWithSystemMessagesExampleText =
 const MessageThreadWithInlineImageExampleText =
   require('!!raw-loader!./snippets/WithInlineImageMessage.snippet.tsx').default;
 const MessageThreadWithMessageDateExampleText = require('!!raw-loader!./snippets/WithMessageDate.snippet.tsx').default;
+const MessageThreadWithRichTextEditorText = require('!!raw-loader!./snippets/WithRichTextEditor.snippet.tsx').default;
 
 const importStatement = `
 import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
@@ -115,6 +117,7 @@ const Docs: () => JSX.Element = () => {
   const refDisplayInlineImages = useRef(null);
   const refDisplayAttachments = useRef(null);
   const refMentionOfUsers = useRef(null);
+  const refRichTextEditor = useRef(null);
   const refProps = useRef(null);
 
   const scrollToRef = (ref): void => {
@@ -159,6 +162,8 @@ const Docs: () => JSX.Element = () => {
       scrollToRef(refDisplayAttachments);
     } else if (url.includes('mention-of-users-with-a-custom-renderer-within-messages') && refMentionOfUsers.current) {
       scrollToRef(refMentionOfUsers);
+    } else if (url.includes('rich-text-editor-support-for-editing-messages') && refRichTextEditor.current) {
+      scrollToRef(refRichTextEditor);
     } else if (url.includes('props') && refProps.current) {
       scrollToRef(refProps);
     }
@@ -192,6 +197,12 @@ const Docs: () => JSX.Element = () => {
         checkout the details about these components
         [here](https://microsoft.github.io/fluentui-contrib/react-chat/?path=/story/chat--default).
       </Description>
+      <Description>
+        The MessageThread component supports lazy loading for the rich text editor used for editing messages. This means
+        that the rich text editor and its dependencies can be excluded from the bundle if they're not required,
+        utilizing tree-shaking techniques such as [the sideEffects
+        option](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) in webpack.
+      </Description>
 
       <Heading>Importing</Heading>
       <Source code={importStatement} />
@@ -368,6 +379,18 @@ const Docs: () => JSX.Element = () => {
         </Canvas>
       </div>
 
+      <div ref={refRichTextEditor}>
+        <Heading>Rich Text Editor Support for Editing Messages</Heading>
+        <DetailedBetaBanner />
+        <Description>
+          The following example shows how to enable rich text editor for message editing by providing the
+          `richTextEditor`` property.
+        </Description>
+        <Canvas mdxSource={MessageThreadWithRichTextEditorText}>
+          <MessageThreadWithRichTextEditorExample />
+        </Canvas>
+      </div>
+
       <div ref={refProps}>
         <Heading>Props</Heading>
         <Props of={MessageThreadComponent} />
@@ -452,6 +475,9 @@ const MessageThreadStory = (args): JSX.Element => {
     if (message.messageType === 'chat') {
       message.content = content;
       message.editedOn = new Date(Date.now());
+      if (args.richTextEditor === true) {
+        message.contentType = 'html';
+      }
     }
     updatedChatMessages[msgIdx] = message;
     setChatMessages(updatedChatMessages);
@@ -553,6 +579,7 @@ const MessageThreadStory = (args): JSX.Element => {
         onRenderMessage={onRenderMessage}
         inlineImageOptions={inlineImageOptions}
         onUpdateMessage={onUpdateMessageCallback}
+        richTextEditor={args.richTextEditor}
         onRenderAvatar={(userId?: string) => {
           return (
             <Persona
@@ -608,6 +635,7 @@ export default {
     showMessageDate: controlsToAdd.showMessageDate,
     showMessageStatus: controlsToAdd.showMessageStatus,
     enableJumpToNewMessageButton: controlsToAdd.enableJumpToNewMessageButton,
+    richTextEditor: controlsToAdd.richTextEditor,
     // Hiding auto-generated controls
     styles: hiddenControl,
     strings: hiddenControl,
@@ -623,8 +651,7 @@ export default {
     onRenderMessage: hiddenControl,
     onUpdateMessage: hiddenControl,
     onDeleteMessage: hiddenControl,
-    disableEditing: hiddenControl,
-    richTextEditor: hiddenControl
+    disableEditing: hiddenControl
   },
   parameters: {
     docs: {

packages/storybook/stories/INTERNAL/RTE/snippets/RichTextEditBoxAttachmentUploads.snippet.tsx

@@ -0,0 +1,30 @@
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
+import React, { useCallback, useState } from 'react';
+import { GetHistoryHTMLChatMessages } from './placeholdermessages';
+
+export const MessageThreadWithRichTextEditorExample: () => JSX.Element = () => {
+  const [messages, setMessages] = useState(GetHistoryHTMLChatMessages());
+  const onUpdateMessage = useCallback(
+    (messageId: string, content: string): Promise<void> => {
+      const updatedMessages = messages;
+      const index = updatedMessages.findIndex((m) => m.messageId === messageId);
+      if (index === -1) {
+        return Promise.reject('Message not found');
+      }
+      const message = updatedMessages[index];
+      message.content = content;
+      message.editedOn = new Date(Date.now());
+      updatedMessages[index] = message;
+      setMessages(updatedMessages);
+
+      return Promise.resolve();
+    },
+    [messages]
+  );
+
+  return (
+    <FluentThemeProvider>
+      <MessageThread userId={'1'} richTextEditor={true} messages={messages} onUpdateMessage={onUpdateMessage} />
+    </FluentThemeProvider>
+  );
+};

packages/storybook/stories/MessageThread/MessageThread.stories.tsx

@@ -57,6 +57,15 @@ export const GetHistoryChatMessages = (): ChatMessage[] => {
   ];
 };
 
+export const GetHistoryHTMLChatMessages = (): ChatMessage[] => {
+  return GetHistoryChatMessages().map((message) => {
+    return {
+      ...message,
+      contentType: 'html'
+    };
+  });
+};
+
 export const GetHistoryWithSystemMessages = (): (SystemMessage | ChatMessage)[] => {
   return [
     ...GetHistoryChatMessages(),

packages/storybook/stories/MessageThread/snippets/WithRichTextEditor.snippet.tsx

@@ -1,13 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { RichTextSendBox as RichTextSendBoxComponent } from '@internal/react-components';
+import { RichTextSendBox as RichTextSendBoxComponent } from '@azure/communication-react';
 import { Title, Description, Props, Heading, Canvas, Source } from '@storybook/addon-docs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { DetailedBetaBanner } from '../../BetaBanners/DetailedBetaBanner';
-import { COMPONENT_FOLDER_PREFIX } from '../../constants';
-import { hiddenControl } from '../../controlsUtils';
+import { DetailedBetaBanner } from '../BetaBanners/DetailedBetaBanner';
+import { SingleLineBetaBanner } from '../BetaBanners/SingleLineBetaBanner';
+import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { hiddenControl, controlsToAdd } from '../controlsUtils';
 import { RichTextSendBoxExample } from './snippets/RichTextSendBox.snippet';
 import { RichTextSendBoxAttachmentUploadsExample } from './snippets/RichTextSendBoxAttachmentUploads.snippet';
 import { RichTextSendBoxWithSystemMessageExample } from './snippets/RichTextSendBoxWithSystemMessage.snippet';
@@ -23,8 +24,12 @@ const importStatement = `import { RichTextSendBox } from '@azure/communication-r
 const getDocs: () => JSX.Element = () => {
   return (
     <>
+      <SingleLineBetaBanner topOfPage={true} />
       <Title>RichTextSendBox</Title>
-      <Description>Component for composing messages with rich text formatting.</Description>
+      <Description>
+        Component for composing messages with rich text formatting. RichTextSendBox has a callback for sending typing
+        notification when user starts entering text. It also supports an optional message above the rich text editor.
+      </Description>
 
       <Heading>Importing</Heading>
       <Source code={importStatement} />
@@ -65,12 +70,16 @@ const RichTextSendBoxStory = (args): JSX.Element => {
     <div style={{ width: '31.25rem', maxWidth: '90%' }}>
       <RichTextSendBoxComponent
         disabled={args.disabled}
-        systemMessage={args.isSendBoxWithWarning ? args.systemMessage : undefined}
+        systemMessage={args.hasWarning ? args.warningMessage : undefined}
         onSendMessage={async (message) => {
           timeoutRef.current = setTimeout(() => {
             alert(`sent message: ${message} `);
           }, delayForSendButton);
         }}
+        onTyping={(): Promise<void> => {
+          console.log(`sending typing notifications`);
+          return Promise.resolve();
+        }}
       />
     </div>
   );
@@ -81,13 +90,13 @@ const RichTextSendBoxStory = (args): JSX.Element => {
 export const RichTextSendBox = RichTextSendBoxStory.bind({});
 
 export default {
-  id: `${COMPONENT_FOLDER_PREFIX}-internal-richtextsendbox`,
-  title: `${COMPONENT_FOLDER_PREFIX}/Internal/RichTextSendBox`,
+  id: `${COMPONENT_FOLDER_PREFIX}-richtextsendbox`,
+  title: `${COMPONENT_FOLDER_PREFIX}/Send Box/Rich Text Send Box`,
   component: RichTextSendBoxComponent,
   argTypes: {
-    disabled: { control: 'boolean', defaultValue: false },
-    systemMessage: { control: 'text', defaultValue: undefined },
-    isSendBoxWithWarning: { control: 'boolean', defaultValue: false, name: 'Has warning/information message' },
+    disabled: controlsToAdd.disabled,
+    hasWarning: controlsToAdd.isSendBoxWithWarning,
+    warningMessage: controlsToAdd.sendBoxWarningMessage,
     strings: hiddenControl,
     onRenderAttachmentUploads: hiddenControl,
     attachmentsWithProgress: hiddenControl,

packages/storybook/stories/MessageThread/snippets/placeholdermessages.ts

@@ -132,7 +132,7 @@ export const SendBox = SendBoxStory.bind({});
 
 export default {
   id: `${COMPONENT_FOLDER_PREFIX}-sendbox`,
-  title: `${COMPONENT_FOLDER_PREFIX}/Send Box`,
+  title: `${COMPONENT_FOLDER_PREFIX}/Send Box/Send Box`,
   component: SendBoxComponent,
   argTypes: {
     disabled: controlsToAdd.disabled,