Add canvas interface (#461)

components/custom/message.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import { Attachment, ToolInvocation } from 'ai';
+import cx from 'classnames';
 import { motion } from 'framer-motion';
 import { Sparkles } from 'lucide-react';
-import { ReactNode } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 
+import { UICanvas } from './canvas';
+import { DocumentToolCall, DocumentToolResult } from './document';
 import { Markdown } from './markdown';
 import { PreviewAttachment } from './preview-attachment';
 import { Weather } from './weather';
@@ -14,11 +17,15 @@ export const Message = ({
   content,
   toolInvocations,
   attachments,
+  canvas,
+  setCanvas,
 }: {
   role: string;
   content: string | ReactNode;
   toolInvocations: Array<ToolInvocation> | undefined;
   attachments?: Array<Attachment>;
+  canvas: UICanvas | null;
+  setCanvas: Dispatch<SetStateAction<UICanvas | null>>;
 }) => {
   return (
     <motion.div
@@ -27,7 +34,16 @@ export const Message = ({
       animate={{ y: 0, opacity: 1 }}
       data-role={role}
     >
-      <div className="flex gap-4 group-data-[role=user]/message:px-5 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-3.5 group-data-[role=user]/message:bg-muted rounded-xl">
+      <div
+        className={cx(
+          'flex gap-4 group-data-[role=user]/message:px-5 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-3.5 rounded-xl',
+          {
+            'group-data-[role=user]/message:bg-muted': !canvas,
+            'group-data-[role=user]/message:bg-zinc-300 dark:group-data-[role=user]/message:bg-zinc-800':
+              canvas,
+          }
+        )}
+      >
         {role === 'assistant' && (
           <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
             <Sparkles className="size-4" />
@@ -40,10 +56,10 @@ export const Message = ({
             </div>
           )}
 
-          {toolInvocations && toolInvocations.length > 0 ? (
+          {toolInvocations && toolInvocations.length > 0 && (
             <div className="flex flex-col gap-4">
               {toolInvocations.map((toolInvocation) => {
-                const { toolName, toolCallId, state } = toolInvocation;
+                const { toolName, toolCallId, state, args } = toolInvocation;
 
                 if (state === 'result') {
                   const { result } = toolInvocation;
@@ -52,19 +68,58 @@ export const Message = ({
                     <div key={toolCallId}>
                       {toolName === 'getWeather' ? (
                         <Weather weatherAtLocation={result} />
-                      ) : null}
+                      ) : toolName === 'createDocument' ? (
+                        <DocumentToolResult
+                          type="create"
+                          result={result}
+                          canvas={canvas}
+                          setCanvas={setCanvas}
+                        />
+                      ) : toolName === 'updateDocument' ? (
+                        <DocumentToolResult
+                          type="update"
+                          result={result}
+                          canvas={canvas}
+                          setCanvas={setCanvas}
+                        />
+                      ) : toolName === 'requestSuggestions' ? (
+                        <DocumentToolResult
+                          type="request-suggestions"
+                          result={result}
+                          canvas={canvas}
+                          setCanvas={setCanvas}
+                        />
+                      ) : (
+                        <pre>{JSON.stringify(result, null, 2)}</pre>
+                      )}
                     </div>
                   );
                 } else {
                   return (
-                    <div key={toolCallId} className="skeleton">
-                      {toolName === 'getWeather' ? <Weather /> : null}
+                    <div
+                      key={toolCallId}
+                      className={cx({
+                        skeleton: ['getWeather'].includes(toolName),
+                      })}
+                    >
+                      {toolName === 'getWeather' ? (
+                        <Weather />
+                      ) : toolName === 'createDocument' ? (
+                        <DocumentToolCall type="create" args={args} />
+                      ) : toolName === 'updateDocument' ? (
+                        <DocumentToolCall type="update" args={args} />
+                      ) : toolName === 'requestSuggestions' ? (
+                        <DocumentToolCall
+                          type="request-suggestions"
+                          args={args}
+                        />
+                      ) : null}
                     </div>
                   );
                 }
               })}
             </div>
-          ) : null}
+          )}
 
           {attachments && (
             <div className="flex flex-row gap-2">