theo-agent-dashboard

Composer.tsx (6700B)

---

 import { useState, useRef, useCallback, useEffect, type DragEvent } from "react";
 import { AttachmentPreview } from "./AttachmentPreview";
 import { useDraft } from "../../hooks/useDraft";
 import type { AttachmentResponse } from "../../lib/api";
 
 interface PendingAttachment {
   id: string;
   file: File;
   thumbnailUrl?: string;
   progress?: number;
   error?: string;
 }
 
 interface ComposerProps {
   onSend: (text: string, uploads?: AttachmentResponse[]) => void;
   onUpload?: (files: File[]) => Promise<AttachmentResponse[]>;
   disabled?: boolean;
   sessionId?: string | null;
 }
 
 function generateId(): string {
   return `att-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
 
 function createImagePreview(file: File): string | undefined {
   if (!file.type.startsWith("image/")) return undefined;
   return URL.createObjectURL(file);
 }
 
 function addFilesToList(
   existing: PendingAttachment[],
   files: FileList | File[],
 ): PendingAttachment[] {
   const newAttachments = Array.from(files).map((file) => ({
     id: generateId(),
     file,
     thumbnailUrl: createImagePreview(file),
   }));
   return [...existing, ...newAttachments];
 }
 
 export function Composer({ onSend, onUpload, disabled = false, sessionId }: ComposerProps) {
   const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
   const [text, setText, markSent] = useDraft(sessionId ?? null);
   const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
   const [isDragging, setIsDragging] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const adjustHeight = useCallback(() => {
     const el = textareaRef.current;
     if (el) {
       el.style.height = "auto";
       el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
     }
   }, []);
 
   useEffect(() => {
     adjustHeight();
   }, [text, adjustHeight]);
 
   const removeAttachment = useCallback((id: string) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id));
   }, []);
 
   const handleSend = useCallback(async () => {
     const trimmed = text.trim();
     const hasAttachments = attachments.length > 0;
     if ((!trimmed && !hasAttachments) || disabled) return;
 
     let uploads: AttachmentResponse[] | undefined;
     if (hasAttachments && onUpload) {
       const files = attachments.map((a) => a.file);
       uploads = await onUpload(files);
     }
 
     onSend(trimmed, uploads);
     markSent();
     setText("");
     setAttachments([]);
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
   }, [text, attachments, disabled, onSend, onUpload, markSent]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
         e.preventDefault();
         handleSend();
       }
     },
     [handleSend],
   );
 
   const handleFileChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (e.target.files) {
         setAttachments((prev) => addFilesToList(prev, e.target.files!));
       }
     },
     [],
   );
 
   const handleDrop = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
       e.preventDefault();
       setIsDragging(false);
       if (e.dataTransfer.files.length > 0) {
         setAttachments((prev) => addFilesToList(prev, e.dataTransfer.files));
       }
     },
     [],
   );
 
   const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsDragging(true);
   }, []);
 
   const handleDragLeave = useCallback(() => {
     setIsDragging(false);
   }, []);
 
   const handlePaste = useCallback(
     (e: React.ClipboardEvent) => {
       const items = e.clipboardData?.items;
       if (!items) return;
       const files: File[] = [];
       for (let i = 0; i < items.length; i++) {
         if (items[i].kind === "file") {
           const file = items[i].getAsFile();
           if (file) files.push(file);
         }
       }
       if (files.length > 0) {
         setAttachments((prev) => addFilesToList(prev, files));
       }
     },
     [],
   );
 
   return (
     <div className="w-full border-t border-gray-800 bg-gray-950 p-4">
       <div className="mx-auto max-w-3xl px-2 sm:px-0">
         {attachments.length > 0 && (
           <div className="mb-2 flex flex-wrap gap-2">
             {attachments.map((att) => (
               <AttachmentPreview
                 key={att.id}
                 file={att.file}
                 thumbnailUrl={att.thumbnailUrl}
                 progress={att.progress}
                 error={att.error}
                 onRemove={() => removeAttachment(att.id)}
               />
             ))}
           </div>
         )}
 
         <div
           data-testid="composer-drop-zone"
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
           className={`rounded-xl border border-gray-700 bg-gray-900 p-2 transition-colors ${
             isDragging ? "border-blue-500 bg-gray-800" : ""
           } focus-within:border-gray-500`}
         >
           <div className="flex items-end gap-2">
             <input
               ref={fileInputRef}
               type="file"
               multiple
               onChange={handleFileChange}
               className="hidden"
               id="attachment-input"
               aria-label="Attach file"
             />
             <label
               htmlFor="attachment-input"
               className="cursor-pointer rounded-lg p-1.5 text-gray-500 hover:bg-gray-800 hover:text-gray-300"
             >
               📎
             </label>
             <textarea
               ref={textareaRef}
               value={text}
               onChange={(e) => setText(e.target.value)}
               onKeyDown={handleKeyDown}
               onPaste={handlePaste}
               disabled={disabled}
               placeholder="Type a message..."
               rows={1}
               className="flex-1 resize-none bg-transparent px-2 py-1 text-sm text-gray-100 placeholder-gray-500 focus:outline-none disabled:opacity-50"
             />
             <button
               type="button"
               onClick={handleSend}
               disabled={disabled || (!text.trim() && attachments.length === 0)}
               className="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               Send
             </button>
           </div>
         </div>
         <p className="mt-1 text-xs text-gray-600">
           {isMac ? "⌘" : "Ctrl"}+Enter to send • Paste or drop files to attach
         </p>
       </div>
     </div>
   );
 }