chore(docs/chat-composer): Update the documentation for the new Chat Composer elements

.changeset/quick-yaks-poke.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/core": patch
+---
+
+[ChatComposer] removed internal unused imports

packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx

@@ -130,11 +130,7 @@ export const AIChatLogComposer = (): React.ReactNode => {
       content: (
         <AIChatMessage variant="user">
           <AIChatMessageAuthor aria-label="you said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
-          <AIChatMessageBody>
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus eligendi
-            iure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit nesciunt
-            impedit repellat assumenda.
-          </AIChatMessageBody>
+          <AIChatMessageBody>Hi, I am getting errors codes when sending an SMS.</AIChatMessageBody>
         </AIChatMessage>
       ),
     },
@@ -144,9 +140,7 @@ export const AIChatLogComposer = (): React.ReactNode => {
         <AIChatMessage variant="bot">
           <AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
           <AIChatMessageBody>
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus
-            eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit
-            nesciunt impedit repellat assumenda.
+            Error codes can be returned from various parts of the process. What error codes are you encountering?
             <Box marginTop="space50">
               <ButtonGroup>
                 <Button variant="secondary" onClick={() => {}} size="rounded_small">

packages/paste-core/components/chat-composer/stories/logs.stories.tsx

@@ -290,11 +290,7 @@ export const AIChatLogComposer = (): React.ReactNode => {
       content: (
         <AIChatMessage variant="user">
           <AIChatMessageAuthor aria-label="you said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
-          <AIChatMessageBody>
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus eligendi
-            iure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit nesciunt
-            impedit repellat assumenda.
-          </AIChatMessageBody>
+          <AIChatMessageBody>Hi, I am getting errors codes when sending an SMS.</AIChatMessageBody>
         </AIChatMessage>
       ),
     },
@@ -304,9 +300,7 @@ export const AIChatLogComposer = (): React.ReactNode => {
         <AIChatMessage variant="bot">
           <AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
           <AIChatMessageBody>
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus
-            eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit
-            nesciunt impedit repellat assumenda.
+            Error codes can be returned from various parts of the process. What error codes are you encountering?
             <Box marginTop="space50">
               <ButtonGroup>
                 <Button variant="secondary" onClick={() => {}} size="rounded_small">

packages/paste-website/src/component-examples/ChatComposerExamples.tsx

@@ -1,8 +1,5 @@
-import { Box } from "@twilio-paste/box";
-import { Button } from "@twilio-paste/button";
 import { ChatBubble, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log";
 import type { Chat } from "@twilio-paste/chat-log";
-import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
 import {
   CLEAR_EDITOR_COMMAND,
   COMMAND_PRIORITY_HIGH,
@@ -94,23 +91,6 @@ export const createNewMessage = (message: string): Omit<Chat, "id"> => {
   };
 };
 
-export const SendButtonPlugin = ({ onClick }: { onClick: () => void }): JSX.Element => {
-  const [editor] = useLexicalComposerContext();
-
-  const handleSend = (): void => {
-    onClick();
-    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-  };
-
-  return (
-    <Box position="absolute" top="space30" right="space30">
-      <Button variant="primary_icon" size="reset" onClick={handleSend}>
-        <SendIcon decorative={false} title="Send message" />
-      </Button>
-    </Box>
-  );
-};
-
 export const EnterKeySubmitPlugin = ({ onKeyDown }: { onKeyDown: () => void }): null => {
   const [editor] = useLexicalComposerContext();
 
@@ -134,7 +114,7 @@ export const EnterKeySubmitPlugin = ({ onKeyDown }: { onKeyDown: () => void }):
 };
 
 export const ChatDialogExample = `const ChatDialog = () => {
-  const {chats, push} = useChatLogger(
+  const { chats, push } = useChatLogger(
     {
       content: (
         <ChatBookend>
@@ -146,7 +126,7 @@ export const ChatDialogExample = `const ChatDialog = () => {
       ),
     },
     {
-      variant: 'inbound',
+      variant: "inbound",
       content: (
         <ChatMessage variant="inbound">
           <ChatBubble>Quisque ullamcorper ipsum vitae lorem euismod sodales.</ChatBubble>
@@ -170,7 +150,7 @@ export const ChatDialogExample = `const ChatDialog = () => {
       ),
     },
     {
-      variant: 'inbound',
+      variant: "inbound",
       content: (
         <ChatMessage variant="inbound">
           <ChatBubble>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ChatBubble>
@@ -182,9 +162,9 @@ export const ChatDialogExample = `const ChatDialog = () => {
           </ChatMessageMeta>
         </ChatMessage>
       ),
-    }
+    },
   );
-  const [message, setMessage] = React.useState('');
+  const [message, setMessage] = React.useState("");
 
   const [mounted, setMounted] = React.useState(false);
   const loggerRef = React.useRef(null);
@@ -196,7 +176,7 @@ export const ChatDialogExample = `const ChatDialog = () => {
 
   React.useEffect(() => {
     if (!mounted || !loggerRef.current) return;
-    scrollerRef.current?.scrollTo({top: loggerRef.current.scrollHeight, behavior: 'smooth'});
+    scrollerRef.current?.scrollTo({ top: loggerRef.current.scrollHeight, behavior: "smooth" });
   }, [chats, mounted]);
 
   const handleComposerChange = (editorState) => {
@@ -207,10 +187,12 @@ export const ChatDialogExample = `const ChatDialog = () => {
   };
 
   const submitMessage = () => {
-    if (message === '') return;
+    if (message === "") return;
     push(createNewMessage(message));
   };
 
+  const editorInstanceRef = React.useRef<LexicalEditor>(null);
+
   return (
     <Box>
       <Box ref={scrollerRef} overflowX="hidden" overflowY="auto" maxHeight="size50" tabIndex={0}>
@@ -221,31 +203,121 @@ export const ChatDialogExample = `const ChatDialog = () => {
         borderWidth="borderWidth0"
         borderTopWidth="borderWidth10"
         borderColor="colorBorderWeak"
-        display="flex"
-        flexDirection="row"
         columnGap="space30"
         paddingX="space70"
         paddingTop="space50"
       >
-        <ChatComposer
-          maxHeight="size10"
-          config={{
-            namespace: 'foo',
-            onError: (error) => {
-              throw error;
-            },
-          }}
-          ariaLabel="Message"
-          placeholder="Type here..."
-          onChange={handleComposerChange}
-        >
-          <ClearEditorPlugin />
-          <SendButtonPlugin onClick={submitMessage} />
-          <EnterKeySubmitPlugin onKeyDown={submitMessage} />
-        </ChatComposer>
+        <ChatComposerContainer>
+          <ChatComposer
+            maxHeight="size10"
+            config={{
+              namespace: "foo",
+              onError: (error) => {
+                throw error;
+              },
+            }}
+            ariaLabel="Message"
+            placeholder="Type here..."
+            onChange={handleComposerChange}
+            editorInstanceRef={editorInstanceRef}
+          >
+            <ClearEditorPlugin />
+            <EnterKeySubmitPlugin onKeyDown={submitMessage} />
+          </ChatComposer>
+          <ChatComposerActionGroup>
+            <Button variant="secondary_icon" size="reset">
+              <AttachIcon decorative={false} title="attach files to the message" />
+            </Button>
+            <Button
+              variant="primary_icon"
+              size="reset"
+              onClick={() => {
+                submitMessage();
+                editorInstanceRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+              }}
+            >
+              <SendIcon decorative={false} title="Send" />
+            </Button>
+          </ChatComposerActionGroup>
+        </ChatComposerContainer>
       </Box>
     </Box>
   );
 };
 
 render(<ChatDialog />)`.trim();
+
+export const ResponsiveContainedAttachmentsExample = `const ResponsiveContainedAttachmentsExample = () => {
+  const ExampleAttachment = () => (
+    <ChatComposerAttachmentCard onDismiss={() => {}} attachmentIcon={<DownloadIcon decorative />}>
+      <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+      <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+    </ChatComposerAttachmentCard>
+  )
+
+  return (
+    <ChatComposerContainer>
+      <ChatComposer
+        ariaLabel="A chat with attachments"
+        initialValue="This is my initial value"
+        config={{
+          namespace: "customer-chat",
+          onError: (e) => {
+            throw e;
+          },
+        }}
+      />
+      <ChatComposerActionGroup>
+        <Button variant="secondary_icon" size="reset">
+          <AttachIcon decorative={false} title="attach files to the message" />
+        </Button>
+        <Button variant="primary_icon" size="reset">
+          <SendIcon decorative={false} title="Send" />
+        </Button>
+      </ChatComposerActionGroup>
+      <ChatComposerAttachmentGroup columns={[1, 1, 2, 3]}>
+        {Array.from({ length: 6 }).map((_, index) => (
+          <ExampleAttachment key={index} />
+        ))}
+      </ChatComposerAttachmentGroup>
+    </ChatComposerContainer>
+  )
+}
+
+render(<ResponsiveContainedAttachmentsExample />)`.trim();
+
+export const ContainedDisabledExample = `const ContainedDisabledExample = () => {
+  const [isDisabled, setIsDisabled] = React.useState(true);
+  return (
+    <>
+      <Box marginBottom="space50">
+        <Checkbox checked={isDisabled} onClick={() => setIsDisabled((disabled) => !disabled)}>
+          Disable Input
+        </Checkbox>
+      </Box>
+      <ChatComposerContainer variant="contained">
+        <ChatComposer
+          ariaLabel="A chat that is disabled"
+          initialValue="This is my initial value"
+          config={{
+            namespace: "customer-chat",
+            onError: (e) => {
+              throw e;
+            },
+          }}
+          disabled={isDisabled}
+        />
+        <ChatComposerActionGroup>
+          <Button variant="secondary_icon" size="reset" aria-disabled={isDisabled} disabled={isDisabled}>
+            <AttachIcon decorative={false} title="attach files to the message" />
+          </Button>
+          <Button variant="primary_icon" size="reset" aria-disabled={isDisabled} disabled={isDisabled}>
+            <SendIcon decorative={false} title="Send" />
+          </Button>
+        </ChatComposerActionGroup>
+      </ChatComposerContainer>
+    </>
+  );
+}
+
+render(<ContainedDisabledExample />)`.trim();

packages/paste-website/src/pages/components/ai-chat-log/api.mdx

@@ -24,14 +24,15 @@ export const getStaticProps = async () => {
       data: {
         ...packageJson,
         ...feature,
+        nameOverride: 'AI Chat Log',
       },
       componentApi,
       mdxHeadings: [...mdxHeadings, ...componentApiTocData],
       navigationData,
       pageHeaderData: {
         categoryRoute: SidebarCategoryRoutes.COMPONENTS,
         githubUrl: "https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/ai-chat-log",
-        storybookUrl: "/?path=/story/components-chatlog--example-chat-log",
+        storybookUrl: "/?path=/story/components-ai-chat-log--example-ai-chat-log",
       },
     },
   };

packages/paste-website/src/pages/components/ai-chat-log/changelog.mdx

@@ -23,13 +23,14 @@ export const getStaticProps = async () => {
       data: {
         ...packageJson,
         ...feature,
+        nameOverride: 'AI Chat Log',
       },
       navigationData,
       mdxHeadings,
       pageHeaderData: {
         categoryRoute: SidebarCategoryRoutes.COMPONENTS,
         githubUrl: "https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/ai-chat-log",
-        storybookUrl: "/?path=/story/components-chatlog--example-chat-log",
+        storybookUrl: "/?path=/story/components-ai-chat-log--example-ai-chat-log",
       },
     },
   };

packages/paste-website/src/pages/components/ai-chat-log/index.mdx

@@ -58,13 +58,14 @@ export const getStaticProps = async () => {
       data: {
         ...packageJson,
         ...feature,
+        nameOverride: 'AI Chat Log',
       },
       navigationData,
       mdxHeadings,
       pageHeaderData: {
         categoryRoute: SidebarCategoryRoutes.COMPONENTS,
         githubUrl: "https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/ai-chat-log",
-        storybookUrl: "/?path=/story/components-chatlog--example-chat-log",
+        storybookUrl: "/?path=/story/components-ai-chat-log--example-ai-chat-log",
       },
     },
   };