feat(assistant): use animations and composer disabled states

Author: krisantrobus

packages/paste-website/src/components/assistant/AssistantCanvas.tsx

@@ -18,9 +18,12 @@ type AssistantCanvasProps = {
 
 export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThreadID }) => {
   const [mounted, setMounted] = React.useState(false);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const [userInterctedScroll, setUserInteractedScroll] = React.useState(false);
+
   const messages = useAssistantMessagesStore(useShallow((state) => state.messages));
   const setMessages = useAssistantMessagesStore(useShallow((state) => state.setMessages));
-  const activeRun = useAssistantRunStore(useShallow((state) => state.activeRun));
+  const { activeRun, lastActiveRun, clearLastActiveRun} = useAssistantRunStore(useShallow((state) => state));
   const isCreatingAResponse = useIsMutating({ mutationKey: ["create-assistant-run"] });
 
   const memoedMessages = React.useMemo(() => messages, [messages]);
@@ -50,14 +53,46 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
     setMounted(true);
   }, []);
 
+  const scrollToChatEnd = (): void => {
+    const scrollPosition: any = scrollerRef.current;
+    const scrollHeight: any = loggerRef.current;
+    scrollPosition?.scrollTo({ top: scrollHeight.scrollHeight, behavior: "smooth" });
+  };
+
   // scroll to bottom of chat log when new messages are added
   React.useEffect(() => {
     if (!mounted || !loggerRef.current) return;
-    scrollerRef.current?.scrollTo({ top: loggerRef.current.scrollHeight, behavior: "smooth" });
+    scrollToChatEnd();
   }, [memoedMessages, mounted]);
 
+  const onAnimationEnd = (): void => {
+    setIsAnimating(false);
+    setUserInteractedScroll(false);
+    // avoid reanimating the same message
+    clearLastActiveRun();
+  };
+
+  const onAnimationStart = (): void => {
+    setUserInteractedScroll(false);
+    setIsAnimating(true);
+  };
+
+  const userScrolled = (): void => setUserInteractedScroll(true);
+
+  React.useEffect(() => {
+    scrollerRef.current?.addEventListener("wheel", userScrolled);
+    scrollerRef.current?.addEventListener("touchmove", userScrolled);
+
+    const interval = setInterval(() => isAnimating && !userInterctedScroll && scrollToChatEnd(), 5);
+    return () => {
+      if (interval) clearInterval(interval);
+      scrollerRef.current?.removeEventListener("wheel", userScrolled);
+      scrollerRef.current?.removeEventListener("touchmove", userScrolled);
+    };
+  }, [isAnimating, userInterctedScroll]);
+
   return (
-    <Box ref={scrollerRef} tabIndex={0} overflowY="auto">
+    <Box ref={scrollerRef} tabIndex={0} overflowY="auto" paddingX="space60">
       <Box maxWidth="1000px" marginX="auto">
         {activeRun != null && <AssistantMessagePoller />}
         <AIChatLog ref={loggerRef}>
@@ -94,11 +129,21 @@ export const AssistantCanvas: React.FC<AssistantCanvasProps> = ({ selectedThread
               Your conversations are not used to train OpenAI&apos;s models, but are stored by OpenAI.
             </Text>
           </Box>
-          {messages?.map((threadMessage): React.ReactNode => {
+          {messages?.map((threadMessage, index): React.ReactNode => {
             if (threadMessage.role === "assistant") {
-              return <AssistantMessage key={threadMessage.id} threadMessage={threadMessage} />;
+              return (
+                <AssistantMessage
+                  key={threadMessage.id}
+                  threadMessage={threadMessage}
+                  // Only animate the last message recieved from AI and must be most recent run to avoid reanimating 
+                  animated={index === messages.length - 1 && lastActiveRun?.id === threadMessage.run_id }
+                  size="fullScreen"
+                  onAnimationEnd={onAnimationEnd}
+                  onAnimationStart={onAnimationStart}
+                />
+              );
             }
-            return <UserMessage key={threadMessage.id} threadMessage={threadMessage} />;
+            return <UserMessage key={threadMessage.id} threadMessage={threadMessage} size="fullScreen" />;
           })}
           {(isCreatingAResponse || activeRun != null) && <LoadingMessage />}
         </AIChatLog>

packages/paste-website/src/components/assistant/AssistantComposer.tsx

@@ -13,16 +13,22 @@ import * as React from "react";
 import { useAssistantThreadsStore } from "../../stores/assistantThreadsStore";
 import useStoreWithLocalStorage from "../../stores/useStore";
 import { EnterKeySubmitPlugin } from "./EnterKeySubmitPlugin";
+import { useAssistantRunStore } from "../../stores/assistantRunStore";
+import { useShallow } from "zustand/react/shallow";
+import { useIsMutating } from "@tanstack/react-query";
 
 export const AssistantComposer: React.FC<{ onMessageCreation: (message: string, selectedThread?: string) => void }> = ({
   onMessageCreation,
 }) => {
   const [message, setMessage] = React.useState("");
   const threadsStore = useStoreWithLocalStorage(useAssistantThreadsStore, (state) => state);
   const selectedThread = threadsStore?.selectedThreadID;
-
+  const { activeRun } = useAssistantRunStore(useShallow((state) => state));
+  const isCreatingAResponse = useIsMutating({ mutationKey: ["create-assistant-run"] });
   const editorInstanceRef = React.useRef<LexicalEditor>(null);
 
+  const isLoading = !!(isCreatingAResponse || activeRun != null);
+
   const handleComposerChange = (editorState: EditorState): void => {
     editorState.read(() => {
       const text = $getRoot().getTextContent();
@@ -49,21 +55,25 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
             throw error;
           },
         }}
+        disabled={isLoading}
         ariaLabel="Message"
         placeholder="Type here..."
         onChange={handleComposerChange}
         editorInstanceRef={editorInstanceRef}
       >
         <ClearEditorPlugin />
-        <EnterKeySubmitPlugin onKeyDown={submitMessage} />
+        <EnterKeySubmitPlugin onKeyDown={() => !isLoading && submitMessage()} />
       </ChatComposer>
       <ChatComposerActionGroup>
         <Button
           variant="primary_icon"
           size="reset"
+          disabled={isLoading}
           onClick={() => {
-            submitMessage();
-            editorInstanceRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+            if (!isLoading) {
+              submitMessage();
+              editorInstanceRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+            }
           }}
         >
           <SendIcon decorative={false} title="Send" />

packages/paste-website/src/components/assistant/AssistantLayout.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const Window: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <Box display="grid" gridTemplateColumns="400px 1fr" height="100svh" width="100%">
+    <Box display="grid" gridTemplateColumns="300px 1fr" height="100svh" width="100%">
       {children}
     </Box>
   );

packages/paste-website/src/components/assistant/AssistantMarkdown.tsx

@@ -1,3 +1,4 @@
+import { AIChatMessageBody } from "@twilio-paste/ai-chat-log";
 import { Anchor } from "@twilio-paste/anchor";
 import { Box } from "@twilio-paste/box";
 import { CodeBlock, CodeBlockHeader, type CodeBlockProps, CodeBlockWrapper } from "@twilio-paste/code-block";
@@ -6,7 +7,7 @@ import { InlineCode } from "@twilio-paste/inline-code";
 import { ListItem, OrderedList, UnorderedList } from "@twilio-paste/list";
 import { Separator } from "@twilio-paste/separator";
 import { TBody, THead, Table, Td, Th, Tr } from "@twilio-paste/table";
-import Markdown from "markdown-to-jsx";
+import Markdown, { MarkdownToJSX } from "markdown-to-jsx";
 import * as React from "react";
 
 export const AssistantHeading: React.FC<React.PropsWithChildren> = ({ children }) => {
@@ -43,11 +44,8 @@ export const AssistantTable: React.FC<React.PropsWithChildren> = ({ children })
   );
 };
 
-export const AssistantMarkdown: React.FC<{ children: string }> = ({ children }) => {
-  return (
-    <Markdown
-      options={{
-        renderRule(next, node) {
+export const assistantMarkdownOptions = {
+        renderRule(next: () => React.ReactChild, node: MarkdownToJSX.ParserResult) {
           if (node.type === "3") {
             return (
               <Box marginBottom="space50">
@@ -118,7 +116,13 @@ export const AssistantMarkdown: React.FC<{ children: string }> = ({ children })
             component: Th,
           },
         },
-      }}
+      
+}
+
+export const AssistantMarkdown: React.FC<{ children: string }> = ({ children }) => {
+  return (
+    <Markdown
+      options={assistantMarkdownOptions}
     >
       {children}
     </Markdown>

packages/paste-website/src/components/assistant/AssistantMessage.tsx

@@ -1,20 +1,30 @@
-import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log";
+import {
+  AIChatMessage,
+  AIChatMessageAuthor,
+  AIChatMessageBody,
+  AIChatMessageBodyProps,
+} from "@twilio-paste/ai-chat-log";
 import { type Message } from "openai/resources/beta/threads/messages";
 import * as React from "react";
+import { compiler } from "markdown-to-jsx";
 
 import { formatTimestamp } from "../../utils/formatTimestamp";
-import { AssistantMarkdown } from "./AssistantMarkdown";
+import { assistantMarkdownOptions } from "./AssistantMarkdown";
 
-export const AssistantMessage: React.FC<{ threadMessage: Message }> = ({ threadMessage }) => {
+interface AssistantMessageProps extends AIChatMessageBodyProps {
+  threadMessage: Message;
+}
+
+export const AssistantMessage: React.FC<AssistantMessageProps> = ({ threadMessage, ...props }) => {
   return (
     <AIChatMessage variant="bot">
       <AIChatMessageAuthor aria-label={`said by paste assistant at ${formatTimestamp(threadMessage.created_at)}`}>
         PasteBot
       </AIChatMessageAuthor>
-      <AIChatMessageBody>
-        {threadMessage.content.length > 0 && threadMessage.content[0]?.type === "text" && (
-          <AssistantMarkdown key={threadMessage.id}>{threadMessage.content[0].text.value}</AssistantMarkdown>
-        )}
+      <AIChatMessageBody {...props}>
+        {threadMessage.content.length > 0 &&
+          threadMessage.content[0]?.type === "text" &&
+          compiler(threadMessage.content[0].text.value, assistantMarkdownOptions)}
       </AIChatMessageBody>
     </AIChatMessage>
   );

packages/paste-website/src/components/assistant/UserMessage.tsx

@@ -1,12 +1,16 @@
-import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log";
+import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody, AIChatMessageBodyProps } from "@twilio-paste/ai-chat-log";
 import { UserIcon } from "@twilio-paste/icons/esm/UserIcon";
 import { type Message } from "openai/resources/beta/threads/messages";
 import * as React from "react";
 
 import { formatTimestamp } from "../../utils/formatTimestamp";
 import { AssistantMarkdown } from "./AssistantMarkdown";
 
-export const UserMessage: React.FC<{ threadMessage: Message }> = ({ threadMessage }) => {
+interface UserMessageProps extends AIChatMessageBodyProps {
+  threadMessage: Message
+}
+
+export const UserMessage: React.FC<UserMessageProps> = ({ threadMessage, ...props }) => {
   return (
     <AIChatMessage variant="user">
       <AIChatMessageAuthor
@@ -15,7 +19,7 @@ export const UserMessage: React.FC<{ threadMessage: Message }> = ({ threadMessag
       >
         You
       </AIChatMessageAuthor>
-      <AIChatMessageBody>
+      <AIChatMessageBody {...props}>
         {threadMessage.content[0].type === "text" && (
           <AssistantMarkdown key={threadMessage.id}>{threadMessage.content[0].text.value}</AssistantMarkdown>
         )}

packages/paste-website/src/pages/assistant.tsx

@@ -24,7 +24,7 @@ const Assistant: NextPage = () => {
         />
       </Head>
       <AssistantPage />
-      <ReactQueryDevtools initialIsOpen={false} />
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
     </QueryClientProvider>
   );
 };

packages/paste-website/src/stores/assistantRunStore.ts

@@ -2,14 +2,22 @@ import { type Run } from "openai/resources/beta/threads/runs";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
-type State = { activeRun: Run | undefined };
-type Actions = { setActiveRun: (newRun: Run | undefined) => void };
+type State = { activeRun: Run | undefined; lastActiveRun: Run | undefined };
+type Actions = { setActiveRun: (newRun: Run | undefined) => void; clearLastActiveRun: () => void };
 
 export const useAssistantRunStore = create<State & Actions>()(
   devtools((set) => ({
     activeRun: undefined,
+    lastActiveRun: undefined,
     setActiveRun: (newRun) => {
-      set(() => ({ activeRun: newRun }));
+      set((prevState) => ({
+        ...prevState,
+        activeRun: newRun,
+        lastActiveRun: !newRun ? prevState.lastActiveRun : newRun,
+      }));
     },
-  })),
+    clearLastActiveRun: () => {
+      set((prevState) => ({ ...prevState, lastActiveRun: undefined }));
+    },
+  }))
 );