fix(docs-ai): create thread on submit

twilio-labs · Jan 21, 2025 · 2d89d14 · 2d89d14
1 parent 2fb4864
commit 2d89d14
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/paste-website/src/components/assistant/Assistant.tsx b/packages/paste-website/src/components/assistant/Assistant.tsx
@@ -19,14 +19,14 @@ import { AsssistantLayout } from "./AssistantLayout";
 import { AssistantThreads } from "./AssistantThreads";
 import { AssistantHeader } from "./AsststantHeader";
 
-const getMockMessage = ({ message }: { message: string }): Message => {
+const getMockMessage = ({ message, threadId }: { message: string; threadId: string }): Message => {
   const date = new Date();
 
   return {
     id: "",
     object: "thread.message",
     created_at: Math.floor(date.getTime() / 1000),
-    thread_id: "xxxx",
+    thread_id: threadId,
     role: "user",
     content: [
       {
@@ -62,7 +62,7 @@ export const Assistant: React.FC = () => {
 
   const handleMessageCreation = (message: string, threadId: string): void => {
     // add the new user message to the store to optimistically render it whilst we wait for openAI to do its thing
-    addMessage(getMockMessage({ message }));
+    addMessage(getMockMessage({ message, threadId }));
 
     // Create a new "assistant run" on the thread so that openAI processes the new message and updates the thread with a response
     createAssistantRun.mutate(
@@ -109,7 +109,7 @@ export const Assistant: React.FC = () => {
    *
    * @param {string} message
    */
-  const handleCannedThreadCreation = (message: string): void => {
+  const handleThreadCreationWithMessage = (message: string): void => {
     createThreadMutation.mutate(
       {},
       {
@@ -134,11 +134,19 @@ export const Assistant: React.FC = () => {
       </AsssistantLayout.Threads>
       <AsssistantLayout.Canvas>
         {threadsStore.selectedThreadID == null && (
-          <AssistantEmptyState onCannedThreadCreation={handleCannedThreadCreation} />
+          <AssistantEmptyState onCannedThreadCreation={handleThreadCreationWithMessage} />
         )}
         {threadsStore.selectedThreadID != null && <AssistantCanvas selectedThreadID={threadsStore.selectedThreadID} />}
         <AsssistantLayout.Composer>
-          <AssistantComposer onMessageCreation={handleMessageCreation} />
+          <AssistantComposer
+            onMessageCreation={(message, threadId) => {
+              if (!threadId) {
+                handleThreadCreationWithMessage(message);
+              } else {
+                handleMessageCreation(message, threadId);
+              }
+            }}
+          />
         </AsssistantLayout.Composer>
       </AsssistantLayout.Canvas>
     </AsssistantLayout.Window>

diff --git a/packages/paste-website/src/components/assistant/AssistantComposer.tsx b/packages/paste-website/src/components/assistant/AssistantComposer.tsx
@@ -14,7 +14,7 @@ import { useAssistantThreadsStore } from "../../stores/assistantThreadsStore";
 import useStoreWithLocalStorage from "../../stores/useStore";
 import { EnterKeySubmitPlugin } from "./EnterKeySubmitPlugin";
 
-export const AssistantComposer: React.FC<{ onMessageCreation: (message: string, selectedThread: string) => void }> = ({
+export const AssistantComposer: React.FC<{ onMessageCreation: (message: string, selectedThread?: string) => void }> = ({
   onMessageCreation,
 }) => {
   const [message, setMessage] = React.useState("");