Merge branch 'jrmy/hooks-refactor-drizzle' into live

vercel · Oct 9, 2024 · 5323527 · 5323527
2 parents fbdf1fa + ac5cca1
commit 5323527
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 13 deletions.
diff --git a/app/(chat)/[id]/page.tsx b/app/(chat)/[id]/page.tsx
@@ -1,10 +1,84 @@
-import { Message } from "ai";
+import { CoreMessage, CoreToolMessage, Message, ToolInvocation } from "ai";
 import { notFound } from "next/navigation";
 
 import { auth } from "@/app/(auth)/auth";
 import { Chat as PreviewChat } from "@/components/chat";
 import { getChatById } from "@/db/queries";
 import { Chat } from "@/db/schema";
+import { generateUUID } from "@/utils/functions";
+
+function addToolMessageToChat({
+  toolMessage,
+  messages,
+}: {
+  toolMessage: CoreToolMessage;
+  messages: Array<Message>;
+}): Array<Message> {
+  return messages.map((message) => {
+    if (message.toolInvocations) {
+      return {
+        ...message,
+        toolInvocations: message.toolInvocations.map((toolInvocation) => {
+          const toolResult = toolMessage.content.find(
+            (tool) => tool.toolCallId === toolInvocation.toolCallId,
+          );
+
+          if (toolResult) {
+            return {
+              ...toolInvocation,
+              state: "result",
+              result: toolResult.result,
+            };
+          }
+
+          return toolInvocation;
+        }),
+      };
+    }
+
+    return message;
+  });
+}
+
+function convertToUIMessages(messages: Array<CoreMessage>): Array<Message> {
+  return messages.reduce((chatMessages: Array<Message>, message) => {
+    if (message.role === "tool") {
+      return addToolMessageToChat({
+        toolMessage: message as CoreToolMessage,
+        messages: chatMessages,
+      });
+    }
+
+    let textContent = "";
+    let toolInvocations: Array<ToolInvocation> = [];
+
+    if (typeof message.content === "string") {
+      textContent = message.content;
+    } else if (Array.isArray(message.content)) {
+      for (const content of message.content) {
+        if (content.type === "text") {
+          textContent += content.text;
+        } else if (content.type === "tool-call") {
+          toolInvocations.push({
+            state: "call",
+            toolCallId: content.toolCallId,
+            toolName: content.toolName,
+            args: content.args,
+          });
+        }
+      }
+    }
+
+    chatMessages.push({
+      id: generateUUID(),
+      role: message.role,
+      content: textContent,
+      toolInvocations,
+    });
+
+    return chatMessages;
+  }, []);
+}
 
 export default async function Page({ params }: { params: any }) {
   const { id } = params;
@@ -17,7 +91,7 @@ export default async function Page({ params }: { params: any }) {
   // type casting
   const chat: Chat = {
     ...chatFromDb,
-    messages: chatFromDb.messages as Message[],
+    messages: convertToUIMessages(chatFromDb.messages as Array<CoreMessage>),
   };
 
   const session = await auth();

diff --git a/app/(chat)/api/chat/route.ts b/app/(chat)/api/chat/route.ts
@@ -10,11 +10,13 @@ export async function POST(request: Request) {
 
   const session = await auth();
 
+  const coreMessages = convertToCoreMessages(messages);
+
   const result = await streamText({
     model: customModel,
     system:
       "you are a friendly assistant! keep your responses concise and helpful.",
-    messages: convertToCoreMessages(messages),
+    messages: coreMessages,
     experimental_providerMetadata: {
       files: {
         selection: selectedFilePathnames,
@@ -38,11 +40,11 @@ export async function POST(request: Request) {
         },
       },
     },
-    onFinish: async ({ text }) => {
+    onFinish: async ({ responseMessages }) => {
       if (session && session.user && session.user.id) {
         await saveChat({
           id,
-          messages: [...messages, { role: "assistant", content: text }],
+          messages: [...coreMessages, ...responseMessages],
           userId: session.user.id,
         });
       }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -19,7 +19,7 @@ export default async function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body>
+      <body className="antialiased">
         <KasadaClient />
         <ThemeProvider
           attribute="class"

diff --git a/components/multimodal-input.tsx b/components/multimodal-input.tsx
@@ -215,7 +215,12 @@ export function MultimodalInput({
         onKeyDown={(event) => {
           if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
-            submitForm();
+
+            if (isLoading) {
+              toast.error("Please wait for the model to finish its response!");
+            } else {
+              submitForm();
+            }
           }
         }}
       />

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -18,11 +18,11 @@ export const Navbar = async () => {
 
   return (
     <>
-      <div className="bg-background absolute top-0 left-0 w-dvw border-b py-2 px-3 justify-between flex flex-row items-center z-30">
+      <div className="bg-background absolute top-0 left-0 w-dvw py-2 px-3 justify-between flex flex-row items-center z-30">
         <div className="flex flex-row gap-3 items-center">
           <History user={session?.user} />
           <div className="flex flex-row gap-2 items-center">
-            <div className="text-sm dark:text-zinc-300">Chatbot</div>
+            <div className="text-sm dark:text-zinc-300">Next.js Chatbot</div>
           </div>
         </div>
 

diff --git a/components/overview.tsx b/components/overview.tsx
@@ -18,12 +18,10 @@ export const Overview = () => {
           <VercelIcon />
           <span>+</span>
           <MessageIcon />
-          <span>+</span>
-          <LogoOpenAI />
         </p>
         <p>
-          This is an open source Chatbot template powered by the OpenAI gpt-4o
-          model built with Next.js and the AI SDK by Vercel. It uses the{" "}
+          This is an open source Chatbot template built with Next.js and the AI
+          SDK by Vercel. It uses the{" "}
           <code className="rounded-md bg-muted px-1 py-0.5">streamText</code>{" "}
           function in the server and the{" "}
           <code className="rounded-md bg-muted px-1 py-0.5">useChat</code> hook