From 629854ae953b10ea4a879127eda69b3b190aaf03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Thu, 17 Oct 2024 12:58:40 -0400
Subject: [PATCH 1/9] chore: 1

---
 .../components/assistant/AssistantCanvas.tsx  | 55 +++++++++++++------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
index ccd4124d08..b29bbb751b 100644
--- a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
@@ -1,6 +1,7 @@
 import { useIsMutating, useQuery } from "@tanstack/react-query";
+import { AIChatLog } from "@twilio-paste/ai-chat-log";
 import { Box } from "@twilio-paste/box";
-import { ChatBookend, ChatBookendItem, ChatLog } from "@twilio-paste/chat-log";
+import { Text } from "@twilio-paste/text";
 import * as React from "react";
 import { useShallow } from "zustand/react/shallow";
 
@@ -62,21 +63,41 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
     <Box ref={scrollerRef} tabIndex={0} overflowY="auto">
       <Box maxWidth="1000px" marginX="auto">
         {activeRun != null && <AssistantMessagePoller />}
-        <ChatLog ref={loggerRef}>
-          <ChatBookend>
-            <ChatBookendItem>
-              Welcome to the Paste Design System Assistant! We&apos;re excited to have you here.
-            </ChatBookendItem>
-          </ChatBookend>
-          <ChatBookend>
-            <ChatBookendItem>
-              Keep in mind that this is an experimental tool and so the information provided{" "}
-              <strong>may not be entirely accurate</strong>.
-            </ChatBookendItem>
-            <ChatBookendItem>
-              Your conversations are not used to train OpenAI&apos;s models, but are stored by OpenAI.
-            </ChatBookendItem>
-          </ChatBookend>
+        <AIChatLog ref={loggerRef}>
+          <Text
+            as="div"
+            color="colorTextWeak"
+            fontSize="fontSize20"
+            lineHeight="lineHeight20"
+            fontWeight="fontWeightMedium"
+            textAlign="center"
+          >
+            Welcome to the Paste Design System Assistant! We&apos;re excited to have you here.
+          </Text>
+          <Text
+            as="div"
+            color="colorTextWeak"
+            fontSize="fontSize20"
+            lineHeight="lineHeight20"
+            fontWeight="fontWeightMedium"
+            textAlign="center"
+          >
+            Keep in mind that this is an experimental tool and so the information provided{" "}
+            <Text as="div" fontWeight="fontWeightBold">
+              may not be entirely accurate
+            </Text>
+            .
+          </Text>
+          <Text
+            as="div"
+            color="colorTextWeak"
+            fontSize="fontSize20"
+            lineHeight="lineHeight20"
+            fontWeight="fontWeightMedium"
+            textAlign="center"
+          >
+            Your conversations are not used to train OpenAI&apos;s models, but are stored by OpenAI.
+          </Text>
           {messages?.map((threadMessage): React.ReactNode => {
             if (threadMessage.role === "assistant") {
               return <AssistantMessage key={threadMessage.id} threadMessage={threadMessage} />;
@@ -84,7 +105,7 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
             return <UserMessage key={threadMessage.id} threadMessage={threadMessage} />;
           })}
           {(isCreatingAResponse || activeRun != null) && <LoadingMessage maxWidth={logWidth} />}
-        </ChatLog>
+        </AIChatLog>
       </Box>
     </Box>
   );

From ce3047e424b3e28f7a1eb8289b74b170481b0ade Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Tue, 22 Oct 2024 13:48:09 -0400
Subject: [PATCH 2/9] chore: 2

---
 .../components/assistant/AssistantCanvas.tsx  | 68 ++++++++++---------
 .../components/assistant/AssistantMessage.tsx | 23 +++----
 .../src/components/assistant/UserMessage.tsx  | 20 +++---
 .../src/pages/components/ai-chat-log/api.mdx  |  4 +-
 4 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
index b29bbb751b..920a33c81a 100644
--- a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
@@ -64,40 +64,42 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
       <Box maxWidth="1000px" marginX="auto">
         {activeRun != null && <AssistantMessagePoller />}
         <AIChatLog ref={loggerRef}>
-          <Text
-            as="div"
-            color="colorTextWeak"
-            fontSize="fontSize20"
-            lineHeight="lineHeight20"
-            fontWeight="fontWeightMedium"
-            textAlign="center"
-          >
-            Welcome to the Paste Design System Assistant! We&apos;re excited to have you here.
-          </Text>
-          <Text
-            as="div"
-            color="colorTextWeak"
-            fontSize="fontSize20"
-            lineHeight="lineHeight20"
-            fontWeight="fontWeightMedium"
-            textAlign="center"
-          >
-            Keep in mind that this is an experimental tool and so the information provided{" "}
-            <Text as="div" fontWeight="fontWeightBold">
-              may not be entirely accurate
+          <Box display="flex" flexDirection="column" rowGap="space40">
+            <Text
+              as="span"
+              color="colorTextWeak"
+              fontSize="fontSize20"
+              lineHeight="lineHeight20"
+              fontWeight="fontWeightMedium"
+              textAlign="center"
+            >
+              Welcome to the Paste Design System Assistant! We&apos;re excited to have you here.
             </Text>
-            .
-          </Text>
-          <Text
-            as="div"
-            color="colorTextWeak"
-            fontSize="fontSize20"
-            lineHeight="lineHeight20"
-            fontWeight="fontWeightMedium"
-            textAlign="center"
-          >
-            Your conversations are not used to train OpenAI&apos;s models, but are stored by OpenAI.
-          </Text>
+            <Text
+              as="span"
+              color="colorTextWeak"
+              fontSize="fontSize20"
+              lineHeight="lineHeight20"
+              fontWeight="fontWeightMedium"
+              textAlign="center"
+            >
+              Keep in mind that this is an experimental tool and so the information provided{" "}
+              <Text as="span" fontWeight="fontWeightBold">
+                may not be entirely accurate
+              </Text>
+              .
+            </Text>
+            <Text
+              as="span"
+              color="colorTextWeak"
+              fontSize="fontSize20"
+              lineHeight="lineHeight20"
+              fontWeight="fontWeightMedium"
+              textAlign="center"
+            >
+              Your conversations are not used to train OpenAI&apos;s models, but are stored by OpenAI.
+            </Text>
+          </Box>
           {messages?.map((threadMessage): React.ReactNode => {
             if (threadMessage.role === "assistant") {
               return <AssistantMessage key={threadMessage.id} threadMessage={threadMessage} />;
diff --git a/packages/paste-website/src/components/assistant/AssistantMessage.tsx b/packages/paste-website/src/components/assistant/AssistantMessage.tsx
index 9653e5151c..75736bc7d9 100644
--- a/packages/paste-website/src/components/assistant/AssistantMessage.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantMessage.tsx
@@ -1,25 +1,24 @@
-import { ChatBubble, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log";
+import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log";
 import { type ThreadMessage } from "openai/resources/beta/threads/messages";
 import * as React from "react";
 
-import { Logo } from "../../assets/Logo";
 import { formatTimestamp } from "../../utils/formatTimestamp";
 import { AssistantMarkdown } from "./AssistantMarkdown";
 
 export const AssistantMessage: React.FC<{ threadMessage: ThreadMessage }> = ({ threadMessage }) => {
   return (
-    <ChatMessage variant="inbound">
-      <ChatBubble>
+    <AIChatMessage variant="bot">
+      <AIChatMessageAuthor
+        aria-label={`said by paste assistant at ${formatTimestamp(threadMessage.created_at)}`}
+        avatarSrc="../../assets/Logo"
+      >
+        PasteBot
+      </AIChatMessageAuthor>
+      <AIChatMessageBody>
         {threadMessage.content[0].type === "text" && (
           <AssistantMarkdown key={threadMessage.id}>{threadMessage.content[0].text.value}</AssistantMarkdown>
         )}
-      </ChatBubble>
-      <ChatMessageMeta aria-label={`said by the assistant at ${formatTimestamp(threadMessage.created_at)}`}>
-        <ChatMessageMetaItem>
-          <Logo size={20} />
-          PasteBot ・ {formatTimestamp(threadMessage.created_at)}
-        </ChatMessageMetaItem>
-      </ChatMessageMeta>
-    </ChatMessage>
+      </AIChatMessageBody>
+    </AIChatMessage>
   );
 };
diff --git a/packages/paste-website/src/components/assistant/UserMessage.tsx b/packages/paste-website/src/components/assistant/UserMessage.tsx
index b8feb9eaff..21477ca2d4 100644
--- a/packages/paste-website/src/components/assistant/UserMessage.tsx
+++ b/packages/paste-website/src/components/assistant/UserMessage.tsx
@@ -1,4 +1,5 @@
-import { ChatBubble, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log";
+import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log";
+import { UserIcon } from "@twilio-paste/icons/esm/UserIcon";
 import { type ThreadMessage } from "openai/resources/beta/threads/messages";
 import * as React from "react";
 
@@ -7,15 +8,18 @@ import { AssistantMarkdown } from "./AssistantMarkdown";
 
 export const UserMessage: React.FC<{ threadMessage: ThreadMessage }> = ({ threadMessage }) => {
   return (
-    <ChatMessage variant="outbound">
-      <ChatBubble>
+    <AIChatMessage variant="user">
+      <AIChatMessageAuthor
+        aria-label={`said by you at ${formatTimestamp(threadMessage.created_at)}`}
+        avatarIcon={UserIcon}
+      >
+        You
+      </AIChatMessageAuthor>
+      <AIChatMessageBody>
         {threadMessage.content[0].type === "text" && (
           <AssistantMarkdown key={threadMessage.id}>{threadMessage.content[0].text.value}</AssistantMarkdown>
         )}
-      </ChatBubble>
-      <ChatMessageMeta aria-label={`said by you at ${formatTimestamp(threadMessage.created_at)}`}>
-        <ChatMessageMetaItem>You ・ {formatTimestamp(threadMessage.created_at)}</ChatMessageMetaItem>
-      </ChatMessageMeta>
-    </ChatMessage>
+      </AIChatMessageBody>
+    </AIChatMessage>
   );
 };
diff --git a/packages/paste-website/src/pages/components/ai-chat-log/api.mdx b/packages/paste-website/src/pages/components/ai-chat-log/api.mdx
index 5045614559..0fc36b82e6 100644
--- a/packages/paste-website/src/pages/components/ai-chat-log/api.mdx
+++ b/packages/paste-website/src/pages/components/ai-chat-log/api.mdx
@@ -52,9 +52,9 @@ import {
   AIChatMessage,
   AIChatMessageAuthor,
   AIChatMessageBody,
-  AIChatMessageFeedback,
   AIChatMessageLoading,
-  AIChatMessageMeta,
+  AIChatMessageActionGroup,
+  AIChatMessageActionCard,
 } from "@twilio-paste/ai-chat-log";
 
 export const Basic = () => {

From 360cf9dc81c530241b1d8012dee07a41e5c481ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Wed, 23 Oct 2024 14:07:40 -0400
Subject: [PATCH 3/9] chore: 3

---
 .../component-examples/AIChatLogExamples.ts   |  4 +-
 .../components/assistant/AssistantCanvas.tsx  |  5 +-
 .../components/assistant/AssistantMessage.tsx |  5 +-
 .../components/assistant/LoadingMessage.tsx   | 55 ++++---------------
 4 files changed, 14 insertions(+), 55 deletions(-)

diff --git a/packages/paste-website/src/component-examples/AIChatLogExamples.ts b/packages/paste-website/src/component-examples/AIChatLogExamples.ts
index a1622bae7b..ff9e831a7e 100644
--- a/packages/paste-website/src/component-examples/AIChatLogExamples.ts
+++ b/packages/paste-website/src/component-examples/AIChatLogExamples.ts
@@ -101,7 +101,7 @@ const MessageWithLoadingAndStop = () => {
   return (
     <AIChatLog>
         <AIChatMessage variant="bot">
-          <AIChatMessageAuthor aria-label="AI said" bot>
+          <AIChatMessageAuthor aria-label="AI said">
             Good Bot
           </AIChatMessageAuthor>
           <AIChatMessageBody>
@@ -120,7 +120,7 @@ const MessageWithLoading = () => {
   return (
     <AIChatLog>
         <AIChatMessage variant="bot">
-          <AIChatMessageAuthor aria-label="AI said" bot>
+          <AIChatMessageAuthor aria-label="AI said">
             Good Bot
           </AIChatMessageAuthor>
           <AIChatMessageBody>
diff --git a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
index 920a33c81a..b60348fa5e 100644
--- a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
@@ -18,7 +18,6 @@ type AssistantCanvasProps = {
 
 export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThreadID }) => {
   const [mounted, setMounted] = React.useState(false);
-  const [logWidth, setLogWidth] = React.useState(0);
   const messages = useAssistantMessagesStore(useShallow((state) => state.messages));
   const setMessages = useAssistantMessagesStore(useShallow((state) => state.setMessages));
   const activeRun = useAssistantRunStore(useShallow((state) => state.activeRun));
@@ -49,8 +48,6 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
 
   React.useEffect(() => {
     setMounted(true);
-    // whats the width of the log? You'll need it to render the skeleton loader
-    setLogWidth(loggerRef.current?.offsetWidth ?? 0);
   }, []);
 
   // scroll to bottom of chat log when new messages are added
@@ -106,7 +103,7 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
             }
             return <UserMessage key={threadMessage.id} threadMessage={threadMessage} />;
           })}
-          {(isCreatingAResponse || activeRun != null) && <LoadingMessage maxWidth={logWidth} />}
+          {(isCreatingAResponse || activeRun != null) && <LoadingMessage />}
         </AIChatLog>
       </Box>
     </Box>
diff --git a/packages/paste-website/src/components/assistant/AssistantMessage.tsx b/packages/paste-website/src/components/assistant/AssistantMessage.tsx
index 75736bc7d9..5b22f59a9e 100644
--- a/packages/paste-website/src/components/assistant/AssistantMessage.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantMessage.tsx
@@ -8,10 +8,7 @@ import { AssistantMarkdown } from "./AssistantMarkdown";
 export const AssistantMessage: React.FC<{ threadMessage: ThreadMessage }> = ({ threadMessage }) => {
   return (
     <AIChatMessage variant="bot">
-      <AIChatMessageAuthor
-        aria-label={`said by paste assistant at ${formatTimestamp(threadMessage.created_at)}`}
-        avatarSrc="../../assets/Logo"
-      >
+      <AIChatMessageAuthor aria-label={`said by paste assistant at ${formatTimestamp(threadMessage.created_at)}`}>
         PasteBot
       </AIChatMessageAuthor>
       <AIChatMessageBody>
diff --git a/packages/paste-website/src/components/assistant/LoadingMessage.tsx b/packages/paste-website/src/components/assistant/LoadingMessage.tsx
index 2c92a38a75..d6d63a394f 100644
--- a/packages/paste-website/src/components/assistant/LoadingMessage.tsx
+++ b/packages/paste-website/src/components/assistant/LoadingMessage.tsx
@@ -1,55 +1,20 @@
-/* eslint-disable camelcase */
-import { Box } from "@twilio-paste/box";
-import { ChatBubble, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log";
-import { SkeletonLoader } from "@twilio-paste/skeleton-loader";
-import { useUID } from "@twilio-paste/uid-library";
+import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody, AIChatMessageLoading } from "@twilio-paste/ai-chat-log";
 import * as React from "react";
 
-import { Logo } from "../../assets/Logo";
-import { useAssistantRunStore } from "../../stores/assistantRunStore";
 import { formatTimestamp } from "../../utils/formatTimestamp";
 
-const getRandomNumber = (max: number): number => {
-  return Math.floor(Math.random() * max);
-};
-
-const STATUS_MAP = {
-  queued: "Queued...",
-  in_progress: "Researching...",
-  requires_action: "Researching...",
-  cancelling: "Concelling...",
-  cancelled: "Cancelled.",
-  failed: "Failed.",
-  completed: "Finished.",
-  expired: "Expired.",
-};
-
-export const LoadingMessage: React.FC<{ maxWidth: number }> = ({ maxWidth }) => {
-  const activeRun = useAssistantRunStore((state) => state.activeRun);
-
+export const LoadingMessage: React.FC = () => {
   const newDateTime = new Date();
   const timestamp = Math.floor(newDateTime.getTime() / 1000);
 
-  const randomWidths = React.useMemo(() => {
-    return Array.from({ length: 3 }, () => getRandomNumber(maxWidth));
-  }, [maxWidth]);
-
   return (
-    <ChatMessage variant="inbound">
-      <ChatBubble>
-        <Box display="grid" rowGap="space30">
-          {randomWidths.map((width) => (
-            <SkeletonLoader key={useUID()} height="20px" width={`${width}px`} />
-          ))}
-        </Box>
-      </ChatBubble>
-      <ChatMessageMeta aria-label={`said by the assistant at ${formatTimestamp(timestamp)}`}>
-        <ChatMessageMetaItem>
-          <Logo size={20} />
-          PasteBot ・ {activeRun?.status ? STATUS_MAP[activeRun?.status] : "Thinking..."}
-        </ChatMessageMetaItem>
-      </ChatMessageMeta>
-    </ChatMessage>
+    <AIChatMessage variant="bot">
+      <AIChatMessageAuthor aria-label={`said by paste assistant at ${formatTimestamp(timestamp)}`}>
+        PasteBot
+      </AIChatMessageAuthor>
+      <AIChatMessageBody>
+        <AIChatMessageLoading />
+      </AIChatMessageBody>
+    </AIChatMessage>
   );
 };
-/* eslint-enable camelcase */

From aea8d3367c922a7f10909c0a66e7cabfd8c8068c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Mon, 28 Oct 2024 14:43:16 -0400
Subject: [PATCH 4/9] chore: 4

---
 .../assistant/AssistantComposer.tsx           | 40 ++++++++++---------
 .../components/assistant/AssistantLayout.tsx  |  7 ----
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/paste-website/src/components/assistant/AssistantComposer.tsx b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
index a44aef1d55..4edae4c597 100644
--- a/packages/paste-website/src/components/assistant/AssistantComposer.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
@@ -1,4 +1,4 @@
-import { ChatComposer } from "@twilio-paste/chat-composer";
+import { ChatComposer, ChatComposerContainer } from "@twilio-paste/chat-composer";
 import { $getRoot, ClearEditorPlugin, type EditorState } from "@twilio-paste/lexical-library";
 import * as React from "react";
 
@@ -30,23 +30,25 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
   };
 
   return (
-    <ChatComposer
-      maxHeight="size10"
-      config={{
-        namespace: "foo",
-        onError: (error: Error) => {
-          throw error;
-        },
-      }}
-      ariaLabel="Message"
-      placeholder="Type here..."
-      onChange={handleComposerChange}
-      ref={editorRef}
-    >
-      <ClearEditorPlugin />
-      <SendButtonPlugin onClick={submitMessage} disabled={selectedThread == null} />
-      <EnterKeySubmitPlugin onKeyDown={submitMessage} />
-      <FocusComposerPlugin selectedThread={selectedThread} />
-    </ChatComposer>
+    <ChatComposerContainer variant="contained">
+      <ChatComposer
+        maxHeight="size10"
+        config={{
+          namespace: "foo",
+          onError: (error: Error) => {
+            throw error;
+          },
+        }}
+        ariaLabel="Message"
+        placeholder="Type here..."
+        onChange={handleComposerChange}
+        ref={editorRef}
+      >
+        <ClearEditorPlugin />
+        <SendButtonPlugin onClick={submitMessage} disabled={selectedThread == null} />
+        <EnterKeySubmitPlugin onKeyDown={submitMessage} />
+        <FocusComposerPlugin selectedThread={selectedThread} />
+      </ChatComposer>
+    </ChatComposerContainer>
   );
 };
diff --git a/packages/paste-website/src/components/assistant/AssistantLayout.tsx b/packages/paste-website/src/components/assistant/AssistantLayout.tsx
index 7351a704b7..d7086681b8 100644
--- a/packages/paste-website/src/components/assistant/AssistantLayout.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantLayout.tsx
@@ -57,14 +57,7 @@ const ThreadsHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
 export const Composer: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <Box
-      borderStyle="solid"
-      borderWidth="borderWidth0"
-      borderTopWidth="borderWidth10"
-      borderColor="colorBorderWeak"
       backgroundColor="colorBackgroundBody"
-      display="flex"
-      flexDirection="row"
-      columnGap="space30"
       paddingX="space70"
       paddingY="space50"
       position="sticky"

From c882f4cf2825e5353b70d0251f92504f17a72f2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Tue, 29 Oct 2024 11:23:17 -0400
Subject: [PATCH 5/9] chore: 5

---
 .../src/components/assistant/AssistantComposer.tsx   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/paste-website/src/components/assistant/AssistantComposer.tsx b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
index 4edae4c597..ba9c9ba282 100644
--- a/packages/paste-website/src/components/assistant/AssistantComposer.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
@@ -1,4 +1,4 @@
-import { ChatComposer, ChatComposerContainer } from "@twilio-paste/chat-composer";
+import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer";
 import { $getRoot, ClearEditorPlugin, type EditorState } from "@twilio-paste/lexical-library";
 import * as React from "react";
 
@@ -44,10 +44,12 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
         onChange={handleComposerChange}
         ref={editorRef}
       >
-        <ClearEditorPlugin />
-        <SendButtonPlugin onClick={submitMessage} disabled={selectedThread == null} />
-        <EnterKeySubmitPlugin onKeyDown={submitMessage} />
-        <FocusComposerPlugin selectedThread={selectedThread} />
+        <ChatComposerActionGroup>
+          <ClearEditorPlugin />
+          <SendButtonPlugin onClick={submitMessage} disabled={selectedThread == null} />
+          <EnterKeySubmitPlugin onKeyDown={submitMessage} />
+          <FocusComposerPlugin selectedThread={selectedThread} />
+        </ChatComposerActionGroup>
       </ChatComposer>
     </ChatComposerContainer>
   );

From 383b21e36c486f2f8ca8dfad0e7c5658590f6f5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Tue, 29 Oct 2024 16:27:55 -0400
Subject: [PATCH 6/9] chore: 6

---
 .../components/assistant/AssistantComposer.tsx    | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/paste-website/src/components/assistant/AssistantComposer.tsx b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
index ba9c9ba282..ee64bc2dd6 100644
--- a/packages/paste-website/src/components/assistant/AssistantComposer.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
@@ -43,14 +43,13 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
         placeholder="Type here..."
         onChange={handleComposerChange}
         ref={editorRef}
-      >
-        <ChatComposerActionGroup>
-          <ClearEditorPlugin />
-          <SendButtonPlugin onClick={submitMessage} disabled={selectedThread == null} />
-          <EnterKeySubmitPlugin onKeyDown={submitMessage} />
-          <FocusComposerPlugin selectedThread={selectedThread} />
-        </ChatComposerActionGroup>
-      </ChatComposer>
+      />
+      <ChatComposerActionGroup>
+        <ClearEditorPlugin />
+        <SendButtonPlugin onClick={submitMessage} disabled={selectedThread == null} />
+        <EnterKeySubmitPlugin onKeyDown={submitMessage} />
+        <FocusComposerPlugin selectedThread={selectedThread} />
+      </ChatComposerActionGroup>
     </ChatComposerContainer>
   );
 };

From aec9b4d3062cc802e984aa9e29708888dd273125 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Wed, 30 Oct 2024 14:46:21 -0400
Subject: [PATCH 7/9] chore: 7

---
 .../assistant/AssistantComposer.tsx           | 37 ++++++++++++++-----
 .../assistant/FocusComposerPlugin.tsx         | 11 ------
 .../components/assistant/SendButtonPlugin.tsx | 21 -----------
 3 files changed, 28 insertions(+), 41 deletions(-)
 delete mode 100644 packages/paste-website/src/components/assistant/FocusComposerPlugin.tsx
 delete mode 100644 packages/paste-website/src/components/assistant/SendButtonPlugin.tsx

diff --git a/packages/paste-website/src/components/assistant/AssistantComposer.tsx b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
index ee64bc2dd6..767fb2046d 100644
--- a/packages/paste-website/src/components/assistant/AssistantComposer.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
@@ -1,12 +1,18 @@
+import { Button } from "@twilio-paste/button";
 import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer";
-import { $getRoot, ClearEditorPlugin, type EditorState } from "@twilio-paste/lexical-library";
+import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
+import {
+  $getRoot,
+  CLEAR_EDITOR_COMMAND,
+  ClearEditorPlugin,
+  type EditorState,
+  type LexicalEditor,
+} from "@twilio-paste/lexical-library";
 import * as React from "react";
 
 import { useAssistantThreadsStore } from "../../stores/assistantThreadsStore";
 import useStoreWithLocalStorage from "../../stores/useStore";
 import { EnterKeySubmitPlugin } from "./EnterKeySubmitPlugin";
-import { FocusComposerPlugin } from "./FocusComposerPlugin";
-import { SendButtonPlugin } from "./SendButtonPlugin";
 
 export const AssistantComposer: React.FC<{ onMessageCreation: (message: string, selectedThread: string) => void }> = ({
   onMessageCreation,
@@ -15,7 +21,7 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
   const threadsStore = useStoreWithLocalStorage(useAssistantThreadsStore, (state) => state);
   const selectedThread = threadsStore?.selectedThreadID;
 
-  const editorRef = React.useRef(null);
+  const editorInstanceRef = React.useRef<LexicalEditor>(null);
 
   const handleComposerChange = (editorState: EditorState): void => {
     editorState.read(() => {
@@ -29,6 +35,10 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
     onMessageCreation(message, selectedThread);
   };
 
+  React.useEffect(() => {
+    editorInstanceRef.current?.focus();
+  }, [editorInstanceRef, selectedThread]);
+
   return (
     <ChatComposerContainer variant="contained">
       <ChatComposer
@@ -42,13 +52,22 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
         ariaLabel="Message"
         placeholder="Type here..."
         onChange={handleComposerChange}
-        ref={editorRef}
-      />
-      <ChatComposerActionGroup>
+        editorInstanceRef={editorInstanceRef}
+      >
         <ClearEditorPlugin />
-        <SendButtonPlugin onClick={submitMessage} disabled={selectedThread == null} />
         <EnterKeySubmitPlugin onKeyDown={submitMessage} />
-        <FocusComposerPlugin selectedThread={selectedThread} />
+      </ChatComposer>
+      <ChatComposerActionGroup>
+        <Button
+          variant="primary_icon"
+          size="reset"
+          onClick={() => {
+            submitMessage();
+            editorInstanceRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+          }}
+        >
+          <SendIcon decorative={false} title="Send" />
+        </Button>
       </ChatComposerActionGroup>
     </ChatComposerContainer>
   );
diff --git a/packages/paste-website/src/components/assistant/FocusComposerPlugin.tsx b/packages/paste-website/src/components/assistant/FocusComposerPlugin.tsx
deleted file mode 100644
index f45cdda77d..0000000000
--- a/packages/paste-website/src/components/assistant/FocusComposerPlugin.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useLexicalComposerContext } from "@twilio-paste/lexical-library";
-import * as React from "react";
-
-export const FocusComposerPlugin = ({ selectedThread }: { selectedThread?: string }): null => {
-  const [editor] = useLexicalComposerContext();
-
-  React.useEffect(() => {
-    editor.focus();
-  }, [editor, selectedThread]);
-  return null;
-};
diff --git a/packages/paste-website/src/components/assistant/SendButtonPlugin.tsx b/packages/paste-website/src/components/assistant/SendButtonPlugin.tsx
deleted file mode 100644
index 6b0271b64c..0000000000
--- a/packages/paste-website/src/components/assistant/SendButtonPlugin.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Box } from "@twilio-paste/box";
-import { Button } from "@twilio-paste/button";
-import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
-import { CLEAR_EDITOR_COMMAND, useLexicalComposerContext } from "@twilio-paste/lexical-library";
-
-export const SendButtonPlugin = ({ onClick, disabled }: { onClick: () => void; disabled: boolean }): 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} disabled={disabled}>
-        <SendIcon decorative={false} title="Send message" />
-      </Button>
-    </Box>
-  );
-};

From b6fd6fae89d9aabfd0bf79bbc149863d9b33f575 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Wed, 30 Oct 2024 16:05:50 -0400
Subject: [PATCH 8/9] chore: 8

---
 .../src/components/assistant/AssistantEmptyState.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-website/src/components/assistant/AssistantEmptyState.tsx b/packages/paste-website/src/components/assistant/AssistantEmptyState.tsx
index b0e570b3b7..b915d90398 100644
--- a/packages/paste-website/src/components/assistant/AssistantEmptyState.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantEmptyState.tsx
@@ -20,8 +20,8 @@ export const AssistantEmptyState: React.FC<{ onCannedThreadCreation: (message: s
 }) => {
   return (
     <Box display="flex" justifyContent="center" alignItems="center" height="100vh">
-      <Box maxWidth="900px" display="flex" flexDirection="column" rowGap="space190" paddingX="space120">
-        <Box display="flex" columnGap="space190" alignItems="center">
+      <Box maxWidth="900px" display="flex" flexDirection="column" rowGap="space150" paddingX="space120">
+        <Box display="flex" columnGap="space150" alignItems="center">
           <Box>
             <Heading as="h1" variant="heading20">
               Welcome to the Paste Design System Assistant
@@ -39,7 +39,7 @@ export const AssistantEmptyState: React.FC<{ onCannedThreadCreation: (message: s
               <Link href="https://github.com/twilio-labs/paste/discussions/new/choose">Github Discussions</Link>.
             </Paragraph>
           </Box>
-          <Image src={EmptyDoSomething} width={400} aria-hidden="true" alt="" priority />
+          <Image src={EmptyDoSomething} width={300} aria-hidden="true" alt="" priority />
         </Box>
         <Box>
           <Heading as="h2" variant="heading30">

From 0ba3a34da306489b9843b467a6bd1ce62639cbfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Fri, 1 Nov 2024 13:12:13 -0400
Subject: [PATCH 9/9] chore: 9

---
 .../src/components/assistant/AssistantCanvas.tsx           | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
index b60348fa5e..725c9fae0e 100644
--- a/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
+++ b/packages/paste-website/src/components/assistant/AssistantCanvas.tsx
@@ -80,11 +80,8 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
               fontWeight="fontWeightMedium"
               textAlign="center"
             >
-              Keep in mind that this is an experimental tool and so the information provided{" "}
-              <Text as="span" fontWeight="fontWeightBold">
-                may not be entirely accurate
-              </Text>
-              .
+              Keep in mind that this is an experimental tool and so the information provided may not be entirely
+              accurate.
             </Text>
             <Text
               as="span"