Add message actions (#482)

components/custom/message.tsx

@@ -1,42 +1,45 @@
 'use client';
 
-import { Attachment, ToolInvocation } from 'ai';
+import { Message } from 'ai';
 import cx from 'classnames';
 import { motion } from 'framer-motion';
 import { Sparkles } from 'lucide-react';
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
+
+import { Vote } from '@/db/schema';
 
 import { UICanvas } from './canvas';
 import { DocumentToolCall, DocumentToolResult } from './document';
 import { Markdown } from './markdown';
+import { MessageActions } from './message-actions';
 import { PreviewAttachment } from './preview-attachment';
 import { Weather } from './weather';
 
-export const Message = ({
-  role,
-  content,
-  toolInvocations,
-  attachments,
+export const PreviewMessage = ({
+  chatId,
+  message,
   canvas,
   setCanvas,
+  vote,
+  isLoading,
 }: {
-  role: string;
-  content: string | ReactNode;
-  toolInvocations: Array<ToolInvocation> | undefined;
-  attachments?: Array<Attachment>;
+  chatId: string;
+  message: Message;
   canvas: UICanvas;
   setCanvas: Dispatch<SetStateAction<UICanvas>>;
+  vote: Vote | undefined;
+  isLoading: boolean;
 }) => {
   return (
     <motion.div
       className="w-full mx-auto max-w-3xl px-4 group/message "
       initial={{ y: 5, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
-      data-role={role}
+      data-role={message.role}
     >
       <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',
+          'flex gap-4 group-data-[role=user]/message:px-3 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-2 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':
@@ -44,21 +47,22 @@ export const Message = ({
           }
         )}
       >
-        {role === 'assistant' && (
+        {message.role === 'assistant' && (
           <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
             <Sparkles className="size-4" />
           </div>
         )}
+
         <div className="flex flex-col gap-2 w-full">
-          {content && (
+          {message.content && (
             <div className="flex flex-col gap-4">
-              <Markdown>{content as string}</Markdown>
+              <Markdown>{message.content as string}</Markdown>
             </div>
           )}
 
-          {toolInvocations && toolInvocations.length > 0 && (
+          {message.toolInvocations && message.toolInvocations.length > 0 && (
             <div className="flex flex-col gap-4">
-              {toolInvocations.map((toolInvocation) => {
+              {message.toolInvocations.map((toolInvocation) => {
                 const { toolName, toolCallId, state, args } = toolInvocation;
 
                 if (state === 'result') {
@@ -121,9 +125,9 @@ export const Message = ({
             </div>
           )}
 
-          {attachments && (
+          {message.experimental_attachments && (
             <div className="flex flex-row gap-2">
-              {attachments.map((attachment) => (
+              {message.experimental_attachments.map((attachment) => (
                 <PreviewAttachment
                   key={attachment.url}
                   attachment={attachment}
@@ -131,6 +135,14 @@ export const Message = ({
               ))}
             </div>
           )}
+
+          <MessageActions
+            key={`action-${message.id}`}
+            chatId={chatId}
+            message={message}
+            vote={vote}
+            isLoading={isLoading}
+          />
         </div>
       </div>
     </motion.div>