sparkecoder 0.1.21 → 0.1.22

package/web/.next/standalone/web/src/components/chat-interface.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
+import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -73,7 +74,16 @@ import {
   PromptInputTextarea,
   PromptInputFooter,
   PromptInputSubmit,
+  PromptInputHeader,
+  usePromptInputAttachments,
 } from '@/components/ai-elements/prompt-input';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentRemove,
+  AttachmentInfo,
+} from '@/components/ai-elements/attachments';
 import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion';
 import {
   runAgent,
@@ -98,6 +108,7 @@ import {
   type TodosResponse,
   type SessionConfig,
   type Checkpoint,
+  type RunAgentAttachment,
 } from '@/lib/api';
 import { TodoPanel } from '@/components/ai-elements/todo-panel';
 import { getConfig, type AppConfig } from '@/lib/config';
@@ -109,7 +120,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { MessageSquare, Copy, RefreshCw, AlertTriangle, Terminal as TerminalIcon, FileCode, Radio, Pencil, Check, Settings, RotateCcw, FolderOpen, PanelLeft } from 'lucide-react';
+import { MessageSquare, Copy, RefreshCw, AlertTriangle, Terminal as TerminalIcon, FileCode, Radio, Pencil, Check, Settings, RotateCcw, FolderOpen, PanelLeft, FileIcon } from 'lucide-react';
 import { useSidebar } from '@/components/ui/sidebar';
 import {
   Dialog,
@@ -127,6 +138,7 @@ import { BashTool, type BashInput, type BashOutput } from '@/components/ai-eleme
 import { TodoTool, type TodoInput, type TodoOutput } from '@/components/ai-elements/todo-tool';
 import { LoadSkillTool, type LoadSkillInput, type LoadSkillOutput } from '@/components/ai-elements/load-skill-tool';
 import { LinterTool, type LinterInput, type LinterOutput } from '@/components/ai-elements/linter-tool';
+import { SpeechInput } from '@/components/ai-elements/speech-input';
 
 interface ToolCallOutput {
   status?: string;
@@ -154,6 +166,14 @@ interface ToolCallInfo {
   liveOutput?: string;
 }
 
+/** Attachment stored with user messages */
+interface UserAttachment {
+  type: 'image' | 'file';
+  data: string; // base64 data URL
+  mediaType?: string;
+  filename?: string;
+}
+
 interface ChatItem {
   id: string;
   type: 'user-message' | 'assistant-text' | 'tool-call' | 'tool-result' | 'reasoning';
@@ -161,6 +181,8 @@ interface ChatItem {
   toolCall?: ToolCallInfo;
   /** For user messages: the message sequence number (used for revert) */
   messageSequence?: number;
+  /** For user messages: any attached files/images */
+  attachments?: UserAttachment[];
 }
 
 interface ChatInterfaceProps {
@@ -204,9 +226,58 @@ function SidebarToggle() {
   );
 }
 
+// Component to display attachments in the prompt input
+function PromptInputAttachmentsDisplay() {
+  const attachments = usePromptInputAttachments();
+  
+  if (attachments.files.length === 0) {
+    return null;
+  }
+  
+  return (
+    <Attachments variant="inline">
+      {attachments.files.map((attachment) => (
+        <Attachment
+          data={attachment}
+          key={attachment.id}
+          onRemove={() => attachments.remove(attachment.id)}
+        >
+          <AttachmentPreview />
+          <AttachmentInfo />
+          <AttachmentRemove />
+        </Attachment>
+      ))}
+    </Attachments>
+  );
+}
+
+// Custom submit button that checks both text input and attachments
+function ChatSubmitButton({ 
+  input, 
+  isRunning, 
+  onStop 
+}: { 
+  input: string; 
+  isRunning: boolean; 
+  onStop: () => void;
+}) {
+  const attachments = usePromptInputAttachments();
+  const hasContent = input.trim() || attachments.files.length > 0;
+  
+  return (
+    <PromptInputSubmit
+      disabled={!isRunning && !hasContent}
+      status={isRunning ? 'streaming' : 'ready'}
+      onStop={onStop}
+      className="bg-primary hover:bg-primary/90 transition-colors"
+    />
+  );
+}
+
 export function ChatInterface({ session }: ChatInterfaceProps) {
   const [chatItems, setChatItems] = useState<ChatItem[]>([]);
   const [input, setInput] = useState('');
+  const [interimTranscript, setInterimTranscript] = useState('');
   const [isRunning, setIsRunning] = useState(false);
   const [isWatching, setIsWatching] = useState(false); // True when watching another client's stream
   const [currentStreamId, setCurrentStreamId] = useState<string | null>(null);
@@ -317,11 +388,40 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     let messageSequence = 0;
     for (const msg of apiMessages) {
       if (msg.role === 'user') {
+        // Extract text and attachments from user message
+        let textContent = '';
+        const attachments: UserAttachment[] = [];
+        
+        if (typeof msg.content === 'string') {
+          textContent = msg.content;
+        } else if (Array.isArray(msg.content)) {
+          for (const part of msg.content) {
+            if (part.type === 'text' && 'text' in part) {
+              textContent += (part as { type: 'text'; text: string }).text;
+            } else if (part.type === 'image' && 'image' in part) {
+              const imagePart = part as { type: 'image'; image: string; mediaType?: string };
+              attachments.push({
+                type: 'image',
+                data: imagePart.image,
+                mediaType: imagePart.mediaType,
+              });
+            } else if (part.type === 'file' && 'data' in part) {
+              const filePart = part as { type: 'file'; data: string; mediaType?: string };
+              attachments.push({
+                type: 'file',
+                data: filePart.data,
+                mediaType: filePart.mediaType,
+              });
+            }
+          }
+        }
+        
         items.push({
           id: msg.id,
           type: 'user-message',
-          content: typeof msg.content === 'string' ? msg.content : '',
+          content: textContent,
           messageSequence, // Track sequence for revert
+          attachments: attachments.length > 0 ? attachments : undefined,
         });
       } else if (msg.role === 'assistant') {
         if (typeof msg.content === 'string') {
@@ -529,10 +629,36 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
         // Skip if this client initiated the stream (we already added the message in handleSubmit)
         if (event.data?.content && !isStreamInitiatorRef.current) {
           setChatItems((prev) => {
+            // Parse content - can be string or array with text/image/file parts
+            let textContent = '';
+            const attachments: UserAttachment[] = [];
+            
+            const rawContent = event.data.content;
+            if (typeof rawContent === 'string') {
+              textContent = rawContent;
+            } else if (Array.isArray(rawContent)) {
+              for (const part of rawContent as Array<{ type: string; text?: string; image?: string; data?: string; mediaType?: string }>) {
+                if (part.type === 'text' && part.text) {
+                  textContent += part.text;
+                } else if (part.type === 'image' && part.image) {
+                  attachments.push({
+                    type: 'image',
+                    data: part.image,
+                    mediaType: part.mediaType,
+                  });
+                } else if (part.type === 'file' && part.data) {
+                  attachments.push({
+                    type: 'file',
+                    data: part.data,
+                    mediaType: part.mediaType,
+                  });
+                }
+              }
+            }
+            
             // Check if we already have a user message with this content
-            // (handles ID mismatches between API-loaded messages and SSE events)
             const contentExists = prev.some(
-              (item) => item.type === 'user-message' && item.content === event.data.content
+              (item) => item.type === 'user-message' && item.content === textContent
             );
             if (contentExists) return prev;
             
@@ -540,7 +666,8 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
             return [...prev, {
               id: messageId,
               type: 'user-message',
-              content: event.data.content,
+              content: textContent,
+              attachments: attachments.length > 0 ? attachments : undefined,
             }];
           });
         }
@@ -818,6 +945,9 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
 
   // Load messages and check for active streams when session changes
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    
     const loadMessagesAndCheckStream = async () => {
       setIsLoadingHistory(true);
       setChatItems([]);
@@ -838,6 +968,10 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           getSessionMessages(session.id),
           getSessionCheckpoints(session.id).catch(() => ({ checkpoints: [] })),
         ]);
+        
+        // Don't update state if session changed during async work
+        if (isStale) return;
+        
         const sorted = [...apiMessages].sort((a, b) => 
           new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
         );
@@ -847,6 +981,10 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
 
         // Check if there's an active stream to watch
         const streamInfo = await getActiveStream(session.id);
+        
+        // Check again after await
+        if (isStale) return;
+        
         if (streamInfo.hasActiveStream && streamInfo.stream) {
           console.log('Found active stream, connecting...', streamInfo.stream.streamId);
           isStreamInitiatorRef.current = false; // We're watching, not initiating
@@ -862,9 +1000,13 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           cancelRef.current = cancel;
         }
       } catch (err) {
-        console.error('Failed to load messages:', err);
+        if (!isStale) {
+          console.error('Failed to load messages:', err);
+        }
       } finally {
-        setIsLoadingHistory(false);
+        if (!isStale) {
+          setIsLoadingHistory(false);
+        }
       }
     };
     
@@ -875,6 +1017,7 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     
     // Cleanup on unmount or session change
     return () => {
+      isStale = true; // Mark as stale so async work doesn't update state
       if (cancelRef.current) {
         cancelRef.current();
         cancelRef.current = null;
@@ -887,9 +1030,15 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
 
   // Check for pending approvals - API is source of truth
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    const currentSessionId = session.id;
+    
     const checkApprovals = async () => {
       try {
-        const approvals = await getPendingApprovals(session.id);
+        const approvals = await getPendingApprovals(currentSessionId);
+        // Don't update state if session changed during async work
+        if (isStale) return;
         // Use API response as source of truth - this correctly filters out
         // already-handled approvals that might have come from SSE replay
         setPendingApprovals(approvals);
@@ -900,14 +1049,23 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     // Initial check
     checkApprovals();
     const interval = setInterval(checkApprovals, 2000);
-    return () => clearInterval(interval);
+    return () => {
+      isStale = true;
+      clearInterval(interval);
+    };
   }, [session.id]);
 
   // Poll for todos - more frequently when running
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    const currentSessionId = session.id;
+    
     const checkTodos = async () => {
       try {
-        const data = await getSessionTodos(session.id);
+        const data = await getSessionTodos(currentSessionId);
+        // Don't update state if session changed during async work
+        if (isStale) return;
         setTodosData(data);
       } catch {
         // Ignore errors
@@ -918,12 +1076,20 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     // Poll every 2 seconds when running, 5 seconds otherwise
     const pollInterval = isRunning ? 1000 : 5000;
     const interval = setInterval(checkTodos, pollInterval);
-    return () => clearInterval(interval);
+    return () => {
+      isStale = true;
+      clearInterval(interval);
+    };
   }, [session.id, isRunning]);
 
   // Poll for new active streams when not currently streaming
   // This allows auto-attaching to streams started from CLI or other tabs
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    // Capture session.id for async closure
+    const currentSessionId = session.id;
+    
     const checkForNewStream = async () => {
       // Skip if we're already running, watching, or connecting
       if (isRunning || isConnectingRef.current) {
@@ -931,7 +1097,10 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
       }
       
       try {
-        const streamInfo = await getActiveStream(session.id);
+        const streamInfo = await getActiveStream(currentSessionId);
+        
+        // Don't process if session changed
+        if (isStale) return;
         
         if (streamInfo.hasActiveStream && streamInfo.stream) {
           const newStreamId = streamInfo.stream.streamId;
@@ -948,7 +1117,14 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
             // Refresh messages from server to get the user message that triggered this stream
             // This ensures we see the user message even if we missed the SSE event
             try {
-              const apiMessages = await getSessionMessages(session.id);
+              const apiMessages = await getSessionMessages(currentSessionId);
+              
+              // Check again after await
+              if (isStale) {
+                isConnectingRef.current = false;
+                return;
+              }
+              
               const sorted = [...apiMessages].sort((a, b) => 
                 new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
               );
@@ -958,13 +1134,19 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
               console.error('Failed to refresh messages:', err);
             }
             
+            // Final stale check before setting up stream
+            if (isStale) {
+              isConnectingRef.current = false;
+              return;
+            }
+            
             setIsWatching(true);
             setIsRunning(true);
             setCurrentStreamId(newStreamId);
             lastKnownStreamIdRef.current = newStreamId;
             
             // Start watching the stream
-            const cancel = watchStream(session.id, handleSSEEvent, {
+            const cancel = watchStream(currentSessionId, handleSSEEvent, {
               streamId: newStreamId,
               onStreamId: (id) => {
                 setCurrentStreamId(id);
@@ -985,17 +1167,28 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     const interval = setInterval(checkForNewStream, 1000);
     
     return () => {
+      isStale = true; // Mark as stale so async work doesn't update state
       clearInterval(interval);
     };
   }, [session.id, isRunning]);
 
-  const handleSubmit = () => {
-    if (!input.trim() || isRunning) return;
+  const handleSubmit = (promptText: string, attachments?: RunAgentAttachment[]) => {
+    if (!promptText.trim() && (!attachments || attachments.length === 0)) return;
+    if (isRunning) return;
+
+    // Convert RunAgentAttachment to UserAttachment for display
+    const userAttachments: UserAttachment[] | undefined = attachments?.map((a) => ({
+      type: a.type,
+      data: a.data,
+      mediaType: a.mediaType,
+      filename: a.filename,
+    }));
 
     const userItem: ChatItem = {
       id: `user-${Date.now()}`,
       type: 'user-message',
-      content: input,
+      content: promptText || '',
+      attachments: userAttachments,
     };
 
     setChatItems((prev) => [...prev, userItem]);
@@ -1011,14 +1204,60 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     currentReasoningRef.current = '';
     toolCallsRef.current = [];
 
-    const cancel = runAgent(session.id, input, handleSSEEvent, {
+    const cancel = runAgent(session.id, promptText || 'Please analyze the attached files.', handleSSEEvent, {
       onStreamId: (id) => setCurrentStreamId(id),
+      attachments,
     });
     
     // Store the cancel function so we can call it from the stop button
     cancelRef.current = cancel;
   };
 
+  // Handler for PromptInput that handles file attachments
+  const handlePromptSubmit = async (message: { text: string; files: Array<{ url?: string; filename?: string; mediaType?: string }> }) => {
+    if (isRunning) return;
+    
+    const hasText = Boolean(message.text?.trim());
+    const hasFiles = Boolean(message.files?.length);
+    
+    if (!hasText && !hasFiles) return;
+    
+    // Convert files to attachments for the API
+    const attachments: RunAgentAttachment[] = [];
+    
+    if (hasFiles && message.files.length > 0) {
+      for (const file of message.files) {
+        if (!file.url) continue;
+        
+        try {
+          // Fetch the blob and convert to base64
+          const response = await fetch(file.url);
+          const blob = await response.blob();
+          const base64 = await new Promise<string>((resolve) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result as string);
+            reader.readAsDataURL(blob);
+          });
+          
+          // Determine if it's an image or file
+          const mediaType = file.mediaType || blob.type || 'application/octet-stream';
+          const isImage = mediaType.startsWith('image/');
+          
+          attachments.push({
+            type: isImage ? 'image' : 'file',
+            data: base64,
+            mediaType,
+            filename: file.filename,
+          });
+        } catch (err) {
+          console.error('Failed to process attachment:', err);
+        }
+      }
+    }
+    
+    handleSubmit(message.text || '', attachments.length > 0 ? attachments : undefined);
+  };
+
   const handleStop = async () => {
     // Send abort request to server - this stops the agent properly
     // The agent will send an abort event back through the stream
@@ -1070,29 +1309,34 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
   };
 
   const handleApprove = async (approval: PendingApproval) => {
+    // Always remove from UI immediately - if it's stale, it shouldn't be shown anyway
+    setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     try {
       await approveExecution(session.id, approval.toolCallId);
-      setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     } catch (err) {
       console.error('Failed to approve:', err);
+      // Don't add back - the API poll will restore it if it's still valid
     }
   };
 
   const handleReject = async (approval: PendingApproval) => {
+    // Always remove from UI immediately - if it's stale, it shouldn't be shown anyway
+    setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     try {
       await rejectExecution(session.id, approval.toolCallId, 'User rejected');
-      setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     } catch (err) {
       console.error('Failed to reject:', err);
+      // Don't add back - the API poll will restore it if it's still valid
     }
   };
 
   // Handle "Don't show again" - approve and disable approval for this tool
   const handleApproveAndDisable = async (approval: PendingApproval) => {
+    // Always remove from UI immediately - if it's stale, it shouldn't be shown anyway
+    setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     try {
       // First approve this execution
       await approveExecution(session.id, approval.toolCallId);
-      setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
       
       // Then disable approval for this tool in session config
       const updatedSession = await updateToolApproval(
@@ -1106,6 +1350,7 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
       setSessionConfig(updatedSession.config || {});
     } catch (err) {
       console.error('Failed to approve and disable:', err);
+      // Don't add back - the API poll will restore it if it's still valid
     }
   };
 
@@ -1717,7 +1962,35 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
               return (
                 <Message key={item.id} from="user">
                   <MessageContent>
-                    <p className="whitespace-pre-wrap">{item.content}</p>
+                    {/* Display attachments if any */}
+                    {item.attachments && item.attachments.length > 0 && (
+                      <div className="flex flex-wrap gap-2 mb-2">
+                        {item.attachments.map((attachment, idx) => (
+                          <div key={idx} className="relative">
+                            {attachment.type === 'image' ? (
+                              <div className="relative rounded-lg overflow-hidden border border-border/50 max-w-[200px]">
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img
+                                  src={attachment.data.startsWith('data:') ? attachment.data : `data:${attachment.mediaType || 'image/png'};base64,${attachment.data}`}
+                                  alt={attachment.filename || 'Image attachment'}
+                                  className="max-w-full h-auto max-h-[150px] object-contain"
+                                />
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50 border border-border/50">
+                                <FileIcon className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm text-muted-foreground truncate max-w-[150px]">
+                                  {attachment.filename || 'File'}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    {item.content && (
+                      <p className="whitespace-pre-wrap">{item.content}</p>
+                    )}
                   </MessageContent>
                   {hasCheckpoint && !isRunning && (
                     <MessageActions className="justify-end mt-1">
@@ -2065,27 +2338,70 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           )}
           
           <PromptInput
-            onSubmit={handleSubmit}
+            onSubmit={handlePromptSubmit}
             className="shadow-sm"
+            globalDrop
+            multiple
           >
+            <PromptInputHeader>
+              <PromptInputAttachmentsDisplay />
+            </PromptInputHeader>
             <PromptInputBody>
-              <PromptInputTextarea
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                placeholder="Ask SparkECoder to help..."
-                disabled={isRunning}
-                autoFocus
-                className="min-h-[80px] focus:ring-2 focus:ring-primary/20 transition-all"
-              />
+              <div className="relative w-full">
+                <PromptInputTextarea
+                  value={input + (interimTranscript ? (input && !input.endsWith(' ') && !input.endsWith('\n') ? ' ' : '') + interimTranscript : '')}
+                  onChange={(e) => {
+                    // Only update if not currently showing interim transcript
+                    if (!interimTranscript) {
+                      setInput(e.target.value);
+                    } else {
+                      // If user types while interim is showing, clear interim and use their input
+                      setInterimTranscript('');
+                      setInput(e.target.value);
+                    }
+                  }}
+                  placeholder="Ask SparkECoder to help... (drag & drop files/images here)"
+                  disabled={isRunning}
+                  autoFocus
+                  className={cn(
+                    "min-h-[80px] focus:ring-2 focus:ring-primary/20 transition-all",
+                    interimTranscript && "caret-red-500"
+                  )}
+                />
+                {/* Live transcription indicator */}
+                {interimTranscript && (
+                  <div className="absolute bottom-2 right-2 flex items-center gap-1.5 text-xs text-red-500 bg-background/80 backdrop-blur-sm px-2 py-1 rounded-full">
+                    <span className="size-2 bg-red-500 rounded-full animate-pulse" />
+                    Listening...
+                  </div>
+                )}
+              </div>
             </PromptInputBody>
             <PromptInputFooter>
               <div className="flex-1" />
-              <PromptInputSubmit
-                disabled={!isRunning && !input.trim()}
-                status={isRunning ? 'streaming' : 'ready'}
-                onStop={handleStop}
-                className="bg-primary hover:bg-primary/90 transition-colors"
-              />
+              <div className="flex items-center gap-2">
+                <SpeechInput
+                  size="icon"
+                  className="size-9"
+                  onTranscriptionChange={(text) => {
+                    // Add finalized transcript to input
+                    setInput((prev) => {
+                      const needsSpace = prev && !prev.endsWith(' ') && !prev.endsWith('\n');
+                      return prev + (needsSpace ? ' ' : '') + text;
+                    });
+                  }}
+                  onInterimTranscription={(text) => {
+                    // Show live preview of what's being spoken
+                    setInterimTranscript(text);
+                  }}
+                  disabled={isRunning}
+                />
+                <ChatSubmitButton 
+                  input={input + interimTranscript} 
+                  isRunning={isRunning} 
+                  onStop={handleStop} 
+                />
+              </div>
             </PromptInputFooter>
           </PromptInput>
         </div>