Merge branch 'main' into feat-ai-typewriter-animation

.github/workflows/on_pull_request_open.yml

@@ -20,9 +20,6 @@ jobs:
           # List of all teams for dsys
           team: "[Design Systems PD,design-systems,Design Systems Eng,Design Systems Eng Leads]"
 
-      - name: Debug in group
-        run: echo "${{ github.actor }} is team member ${{ steps.teamAffiliation.outputs.isTeamMember }}"
-
       - name: Auto contribution labeler
         if: ${{ steps.teamAffiliation.outputs.isTeamMember == 'false' }}
         uses: actions/labeler@v5

apps/backend/package.json

@@ -9,6 +9,6 @@
     "db:reset": "yarn supabase db reset"
   },
   "devDependencies": {
-    "supabase": "^1.204.3"
+    "supabase": "^2.6.8"
   }
 }

apps/backend/supabase/migrations/20230928013336_initial_schema.sql

@@ -1,4 +1,4 @@
-create extension if not exists "vector" with schema "public" version '0.5.0';
+create extension if not exists "vector" with schema "public";
 
 create sequence "public"."page_id_seq";
 

apps/backend/supabase/schema.gen.ts

@@ -225,6 +225,19 @@ export type Database = {
       [_ in never]: never
     }
     Functions: {
+      binary_quantize:
+        | {
+            Args: {
+              "": string
+            }
+            Returns: unknown
+          }
+        | {
+            Args: {
+              "": unknown
+            }
+            Returns: unknown
+          }
       get_page_parents: {
         Args: {
           page_id: number
@@ -236,18 +249,104 @@ export type Database = {
           meta: Json
         }[]
       }
+      halfvec_avg: {
+        Args: {
+          "": number[]
+        }
+        Returns: unknown
+      }
+      halfvec_out: {
+        Args: {
+          "": unknown
+        }
+        Returns: unknown
+      }
+      halfvec_send: {
+        Args: {
+          "": unknown
+        }
+        Returns: string
+      }
+      halfvec_typmod_in: {
+        Args: {
+          "": unknown[]
+        }
+        Returns: number
+      }
+      hnsw_bit_support: {
+        Args: {
+          "": unknown
+        }
+        Returns: unknown
+      }
+      hnsw_halfvec_support: {
+        Args: {
+          "": unknown
+        }
+        Returns: unknown
+      }
+      hnsw_sparsevec_support: {
+        Args: {
+          "": unknown
+        }
+        Returns: unknown
+      }
       hnswhandler: {
         Args: {
           "": unknown
         }
         Returns: unknown
       }
+      ivfflat_bit_support: {
+        Args: {
+          "": unknown
+        }
+        Returns: unknown
+      }
+      ivfflat_halfvec_support: {
+        Args: {
+          "": unknown
+        }
+        Returns: unknown
+      }
       ivfflathandler: {
         Args: {
           "": unknown
         }
         Returns: unknown
       }
+      l2_norm:
+        | {
+            Args: {
+              "": unknown
+            }
+            Returns: number
+          }
+        | {
+            Args: {
+              "": unknown
+            }
+            Returns: number
+          }
+      l2_normalize:
+        | {
+            Args: {
+              "": string
+            }
+            Returns: string
+          }
+        | {
+            Args: {
+              "": unknown
+            }
+            Returns: unknown
+          }
+        | {
+            Args: {
+              "": unknown
+            }
+            Returns: unknown
+          }
       match_discussions: {
         Args: {
           embedding: string
@@ -320,6 +419,24 @@ export type Database = {
           count: number
         }[]
       }
+      sparsevec_out: {
+        Args: {
+          "": unknown
+        }
+        Returns: unknown
+      }
+      sparsevec_send: {
+        Args: {
+          "": unknown
+        }
+        Returns: string
+      }
+      sparsevec_typmod_in: {
+        Args: {
+          "": unknown[]
+        }
+        Returns: number
+      }
       upsert_story_and_create_story_render: {
         Args: {
           _storybook_id: string
@@ -338,12 +455,19 @@ export type Database = {
         }
         Returns: string
       }
-      vector_dims: {
-        Args: {
-          "": string
-        }
-        Returns: number
-      }
+      vector_dims:
+        | {
+            Args: {
+              "": string
+            }
+            Returns: number
+          }
+        | {
+            Args: {
+              "": unknown
+            }
+            Returns: number
+          }
       vector_norm: {
         Args: {
           "": string

cypress/integration/sitemap-vrt/constants.ts

@@ -138,9 +138,9 @@ export const SITEMAP = [
   "/components/input/",
   "/components/input/api",
   "/components/input/changelog",
-  "components/keyboard-key",
-  "components/keyboard-key/api",
-  "components/keyboard-key/changelog",
+  "/components/keyboard-key",
+  "/components/keyboard-key/api",
+  "/components/keyboard-key/changelog",
   "/components/label/",
   "/components/label/api",
   "/components/label/changelog",

packages/paste-website/package.json

@@ -175,7 +175,7 @@
     "micromark-extension-mdxjs": "^2.0.0",
     "minimist": "^1.2.8",
     "next": "^14.0.0",
-    "openai": "^4.20.1",
+    "openai": "^4.79.1",
     "pretty-format": "^28.1.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.0.0",

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import type { ThreadMessage } from "openai/resources/beta/threads/messages/messages";
+import type { Message } from "openai/resources/beta/threads/messages";
 import * as React from "react";
 
 import {
@@ -19,14 +19,14 @@ import { AsssistantLayout } from "./AssistantLayout";
 import { AssistantThreads } from "./AssistantThreads";
 import { AssistantHeader } from "./AsststantHeader";
 
-const getMockMessage = ({ message }: { message: string }): ThreadMessage => {
+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: [
       {
@@ -37,10 +37,14 @@ const getMockMessage = ({ message }: { message: string }): ThreadMessage => {
         },
       },
     ],
-    file_ids: [],
     assistant_id: null,
     run_id: null,
     metadata: {},
+    attachments: null,
+    completed_at: null,
+    incomplete_at: null,
+    incomplete_details: null,
+    status: "incomplete",
   };
 };
 
@@ -58,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(
@@ -105,7 +109,7 @@ export const Assistant: React.FC = () => {
    *
    * @param {string} message
    */
-  const handleCannedThreadCreation = (message: string): void => {
+  const handleThreadCreationWithMessage = (message: string): void => {
     createThreadMutation.mutate(
       {},
       {
@@ -130,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>

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("");
@@ -31,7 +31,7 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string,
   };
 
   const submitMessage = (): void => {
-    if (message === "" || selectedThread == null) return;
+    if (message === "") return;
     onMessageCreation(message, selectedThread);
   };
 

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

@@ -1,11 +1,11 @@
 import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log";
-import { type ThreadMessage } from "openai/resources/beta/threads/messages";
+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 AssistantMessage: React.FC<{ threadMessage: ThreadMessage }> = ({ threadMessage }) => {
+export const AssistantMessage: React.FC<{ threadMessage: Message }> = ({ threadMessage }) => {
   return (
     <AIChatMessage variant="bot">
       <AIChatMessageAuthor aria-label={`said by paste assistant at ${formatTimestamp(threadMessage.created_at)}`}>

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

@@ -1,12 +1,12 @@
 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 { 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: ThreadMessage }> = ({ threadMessage }) => {
+export const UserMessage: React.FC<{ threadMessage: Message }> = ({ threadMessage }) => {
   return (
     <AIChatMessage variant="user">
       <AIChatMessageAuthor

packages/paste-website/src/pages/api/paste-assistant-message.ts

@@ -29,7 +29,7 @@ const LOG_PREFIX = "[/api/paste-assistant-message]:";
 async function createUserMessage({
   threadId,
   message,
-}: { threadId: string; message: string }): Promise<OpenAI.Beta.Threads.Messages.ThreadMessage> {
+}: { threadId: string; message: string }): Promise<OpenAI.Beta.Threads.Messages.Message> {
   return openai.beta.threads.messages.create(threadId, { role: "user", content: message });
 }
 
@@ -182,7 +182,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   /**
    * perform run on the assistant to process the newly added user message
    */
-  let run = await openai.beta.threads.runs.create(threadId, { assistant_id: assistantID });
+  let run = await openai.beta.threads.runs.create(threadId, { assistant_id: assistantID, model: "gpt-4o" });
 
   /**
    * poll the run to see if it's complete or if the assistant need to call some "Functions" find it's status

packages/paste-website/src/pages/api/paste-assistant-messages/[tid].ts

@@ -22,7 +22,7 @@ const LOG_PREFIX = "[/api/paste-assistant-messages/:tid]:";
 
 async function getThreadMessages({
   threadId,
-}: { threadId: OpenAI.Beta.Thread["id"] }): Promise<OpenAI.Beta.Threads.Messages.ThreadMessagesPage> {
+}: { threadId: OpenAI.Beta.Thread["id"] }): Promise<OpenAI.Beta.Threads.Messages.MessagesPage> {
   return openai.beta.threads.messages.list(threadId, { order: "asc" });
 }
 

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

@@ -1,12 +1,12 @@
-import { type ThreadMessage, type ThreadMessagesPage } from "openai/resources/beta/threads/messages";
+import { type Message, type MessagesPage } from "openai/resources/beta/threads/messages";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
-export type AssistantThreadMessages = ThreadMessagesPage["data"];
+export type AssistantThreadMessages = MessagesPage["data"];
 type State = { messages: AssistantThreadMessages };
 type Actions = {
   setMessages: (newMessages: AssistantThreadMessages) => void;
-  addMessage: (newMessage: ThreadMessage) => void;
+  addMessage: (newMessage: Message) => void;
   resetMessages: () => void;
 };