theo-agent-dashboard

Message.tsx (5524B)

---

 import { useState, useCallback } from "react";
 import type { Message as MessageType } from "../../store/chat";
 import { MarkdownRenderer } from "./MarkdownRenderer";
 import { ToolCall } from "../ToolCall/ToolCall";
 
 interface MessageProps {
   message: MessageType;
   onEdit?: (id: string, newContent: string) => void;
   onRegenerate?: (id: string) => void;
   showForkButton?: boolean;
   onFork?: () => void;
 }
 
 export function Message({ message, onEdit, onRegenerate }: MessageProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [editContent, setEditContent] = useState(message.content);
 
   const isUser = message.role === "user";
   const showActions = (isUser || !isUser) && (onEdit || onRegenerate);
 
   const handleSave = useCallback(() => {
     if (editContent.trim() && onEdit) {
       onEdit(message.id, editContent.trim());
     }
     setIsEditing(false);
   }, [editContent, message.id, onEdit]);
 
   const handleCancel = useCallback(() => {
     setEditContent(message.content);
     setIsEditing(false);
   }, [message.content]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === "Escape") handleCancel();
       if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleSave();
     },
     [handleCancel, handleSave],
   );
 
   return (
     <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
       <div
         className={`group relative max-w-[80%] rounded-2xl px-4 py-3 ${
           isUser ? "bg-gray-800 text-gray-100" : "bg-gray-900 text-gray-100"
         }`}
       >
         {showActions && (
           <div className="absolute -top-8 left-0 hidden gap-1 group-hover:flex">
             {isUser && onEdit && (
               <button
                 type="button"
                 aria-label="Edit message"
                 onClick={() => setIsEditing(true)}
                 className="rounded bg-gray-700 px-2 py-1 text-xs text-gray-300 hover:bg-gray-600"
               >
                 ✏️
               </button>
             )}
             {!isUser && onRegenerate && (
               <button
                 type="button"
                 aria-label="Regenerate response"
                 onClick={() => onRegenerate(message.id)}
                 className="rounded bg-gray-700 px-2 py-1 text-xs text-gray-300 hover:bg-gray-600"
               >
                 🔄
               </button>
             )}
           </div>
         )}
 
         {message.toolCalls.length > 0 && (
           <div className="mb-3 space-y-1">
             {message.toolCalls.map((tc) => (
               <ToolCall key={tc.id} toolCall={tc} />
             ))}
           </div>
         )}
 
         {isEditing ? (
           <div className="space-y-2">
             <textarea
               value={editContent}
               onChange={(e) => setEditContent(e.target.value)}
               onKeyDown={handleKeyDown}
               className="w-full resize-none rounded border border-gray-600 bg-gray-950 px-2 py-1 text-sm text-gray-100 focus:border-gray-400 focus:outline-none"
               rows={3}
             />
             <div className="flex gap-2">
               <button
                 type="button"
                 aria-label="Save edit"
                 onClick={handleSave}
                 className="rounded bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-500"
               >
                 Save
               </button>
               <button
                 type="button"
                 onClick={handleCancel}
                 className="rounded bg-gray-700 px-2 py-1 text-xs text-gray-300 hover:bg-gray-600"
               >
                 Cancel
               </button>
             </div>
           </div>
         ) : (
           <>
             {isUser &&
               message.attachments &&
               message.attachments.filter((a) => a.content_type.startsWith("image/"))
                 .length > 0 && (
                 <div className="mb-2 flex flex-wrap gap-2">
                   {message.attachments
                     .filter((a) => a.content_type.startsWith("image/"))
                     .map((att) => (
                       <a
                         key={att.id}
                         href={`/api/attachments/${att.id}`}
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <img
                           src={`/api/attachments/${att.id}`}
                           alt={att.filename}
                           className="max-h-[200px] w-auto rounded object-cover"
                         />
                       </a>
                     ))}
                 </div>
               )}
 
             {message.content && (
               <div className="text-sm leading-relaxed">
                 {isUser ? (
                   <p className="whitespace-pre-wrap">{message.content}</p>
                 ) : (
                   <MarkdownRenderer content={message.content} />
                 )}
               </div>
             )}
           </>
         )}
 
         {message.model && (
           <div className="mt-2 text-xs text-gray-500">{message.model}</div>
         )}
 
         {message.forkId && message.originalContent && (
           <div className="mt-2 text-xs">
             <button
               type="button"
               onClick={() => alert(message.originalContent)}
               className="text-blue-400 hover:text-blue-300"
             >
               View original
             </button>
           </div>
         )}
       </div>
     </div>
   );
 }