[RTE] Storybook update for rich text send box (#4442)

Author: vhuseinova-msft

change/@azure-communication-react-43827df3-34e1-47ec-85d8-ac017671a641.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "RTE",
+  "comment": "Storybook page update for rich text send box",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -2,25 +2,43 @@
 // Licensed under the MIT License.
 
 import { RichTextSendBox as RichTextSendBoxComponent } from '@internal/react-components';
-import { Title, Description, Props, Heading, Canvas } from '@storybook/addon-docs';
+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 { RichTextSendBoxExample } from './snippets/RichTextSendBox.snippet';
 import { RichTextSendBoxAttachmentUploadsExample } from './snippets/RichTextSendBoxAttachmentUploads.snippet';
+import { RichTextSendBoxWithSystemMessageExample } from './snippets/RichTextSendBoxWithSystemMessage.snippet';
 
+const RichTextSendBoxExampleText = require('!!raw-loader!./snippets/RichTextSendBox.snippet.tsx').default;
 const RichTextSendBoxAttachmentUploadsExampleText =
   require('!!raw-loader!./snippets/RichTextSendBoxAttachmentUploads.snippet.tsx').default;
+const RichTextSendBoxWithSystemMessageExampleText =
+  require('!!raw-loader!./snippets/RichTextSendBoxWithSystemMessage.snippet.tsx').default;
+
+const importStatement = `import { RichTextSendBox } from '@azure/communication-react';`;
 
 const getDocs: () => JSX.Element = () => {
   return (
     <>
       <Title>RichTextSendBox</Title>
-      <Description>
-        Component for typing and sending messages. RichTextSendBox has a callback for sending typing notification when
-        user starts entering text. It also supports an optional message below the text input field.
-      </Description>
+      <Description>Component for composing messages with rich text formatting.</Description>
+
+      <Heading>Importing</Heading>
+      <Source code={importStatement} />
+
+      <Heading>Example</Heading>
+      <Canvas mdxSource={RichTextSendBoxExampleText}>
+        <RichTextSendBoxExample />
+      </Canvas>
+
+      <Heading>Add a system message</Heading>
+      <Description>To add a system message, use the systemMessage property like in the example below.</Description>
+      <Canvas mdxSource={RichTextSendBoxWithSystemMessageExampleText}>
+        <RichTextSendBoxWithSystemMessageExample />
+      </Canvas>
 
       <Heading>Display File Uploads</Heading>
       <DetailedBetaBanner />

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

@@ -0,0 +1,14 @@
+import { RichTextSendBox, FluentThemeProvider } from '@azure/communication-react';
+import React from 'react';
+
+export const RichTextSendBoxExample: () => JSX.Element = () => (
+  <FluentThemeProvider>
+    <div style={{ width: '31.25rem' }}>
+      <RichTextSendBox
+        onSendMessage={async () => {
+          return;
+        }}
+      />
+    </div>
+  </FluentThemeProvider>
+);

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

@@ -0,0 +1,15 @@
+import { RichTextSendBox, FluentThemeProvider } from '@azure/communication-react';
+import React from 'react';
+
+export const RichTextSendBoxWithSystemMessageExample: () => JSX.Element = () => (
+  <FluentThemeProvider>
+    <div style={{ width: '31.25rem' }}>
+      <RichTextSendBox
+        onSendMessage={async () => {
+          return;
+        }}
+        systemMessage="Please wait 30 seconds to send new messages"
+      />
+    </div>
+  </FluentThemeProvider>
+);