chore: 3

Author: nkrantz

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>

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>

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>

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 */