Add message actions (#482)

components/custom/canvas.tsx

@@ -17,15 +17,14 @@ import {
   useWindowSize,
 } from 'usehooks-ts';
 
-import { Document, Suggestion } from '@/db/schema';
+import { Document, Suggestion, Vote } from '@/db/schema';
 import { fetcher } from '@/lib/utils';
 
 import { DiffView } from './diffview';
 import { DocumentSkeleton } from './document-skeleton';
 import { Editor } from './editor';
 import { CopyIcon, CrossIcon, DeltaIcon, RedoIcon, UndoIcon } from './icons';
-import { Markdown } from './markdown';
-import { Message as PreviewMessage } from './message';
+import { PreviewMessage } from './message';
 import { MultimodalInput } from './multimodal-input';
 import { Toolbar } from './toolbar';
 import { useScrollToBottom } from './use-scroll-to-bottom';
@@ -46,6 +45,7 @@ export interface UICanvas {
 }
 
 export function Canvas({
+  chatId,
   input,
   setInput,
   handleSubmit,
@@ -58,7 +58,9 @@ export function Canvas({
   setCanvas,
   messages,
   setMessages,
+  votes,
 }: {
+  chatId: string;
   input: string;
   setInput: (input: string) => void;
   isLoading: boolean;
@@ -69,6 +71,7 @@ export function Canvas({
   setCanvas: Dispatch<SetStateAction<UICanvas>>;
   messages: Array<Message>;
   setMessages: Dispatch<SetStateAction<Array<Message>>>;
+  votes: Array<Vote> | undefined;
   append: (
     message: Message | CreateMessage,
     chatRequestOptions?: ChatRequestOptions
@@ -286,15 +289,19 @@ export function Canvas({
               ref={messagesContainerRef}
               className="flex flex-col gap-4 h-full items-center overflow-y-scroll px-4 pt-20"
             >
-              {messages.map((message) => (
+              {messages.map((message, index) => (
                 <PreviewMessage
+                  chatId={chatId}
                   key={message.id}
-                  role={message.role}
-                  content={message.content}
-                  attachments={message.experimental_attachments}
-                  toolInvocations={message.toolInvocations}
+                  message={message}
                   canvas={canvas}
                   setCanvas={setCanvas}
+                  isLoading={isLoading && index === messages.length - 1}
+                  vote={
+                    votes
+                      ? votes.find((vote) => vote.messageId === message.id)
+                      : undefined
+                  }
                 />
               ))}
 
@@ -306,6 +313,7 @@ export function Canvas({
 
             <form className="flex flex-row gap-2 relative items-end w-full px-4 pb-4">
               <MultimodalInput
+                chatId={chatId}
                 input={input}
                 setInput={setInput}
                 handleSubmit={handleSubmit}