@benzsiangco/jarvis 1.0.2 → 1.1.0

package/src/web/ui/src/components/Modules/Chat/ChatStage.tsx

@@ -0,0 +1,620 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Bot, Paperclip, ArrowUp, RefreshCw, Zap, Layout, Search, Code, Activity, ChevronDown, ChevronUp, Square, X as XIcon } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { MessageItem } from './MessageItem';
+import type { Message } from '../../../types';
+import { useAgentStore } from '../../../store/agentStore';
+
+const JarvisLogo = () => (
+  <div className="relative group cursor-pointer flex items-center justify-center -mb-4">
+    <div className="absolute inset-0 bg-cyan-500/10 rounded-full blur-[80px] group-hover:bg-cyan-500/20 transition-all duration-1000" />
+    
+    {/* Outer Rings */}
+    <div className="relative w-24 h-24 md:w-32 md:h-32 rounded-full border border-cyan-900/30 flex items-center justify-center animate-[spin_12s_linear_infinite]">
+       <div className="absolute top-0 w-1 h-1 bg-cyan-500 shadow-[0_0_15px_#06b6d4] rounded-full" />
+       <div className="absolute bottom-0 w-1 h-1 bg-cyan-500 shadow-[0_0_15px_#06b6d4] rounded-full" />
+    </div>
+    <div className="absolute w-18 h-18 md:w-24 md:h-24 rounded-full border border-dashed border-cyan-800/40 animate-[spin_20s_linear_infinite_reverse]" />
+
+    {/* Inner Core */}
+    <div className="absolute w-12 h-12 md:w-16 md:h-16 rounded-full bg-black/40 border-2 border-cyan-500/30 flex items-center justify-center shadow-[0_0_50px_rgba(6,182,212,0.2)] backdrop-blur-sm group-hover:scale-105 transition-transform duration-500">
+       <Bot size={20} className="md:w-8 md:h-8 text-cyan-400 drop-shadow-[0_0_15px_rgba(34,211,238,0.8)]" />
+    </div>
+  </div>
+);
+
+interface ChatStageProps {
+  sessionId: string | null;
+  onSessionCreated?: (id: string) => void;
+}
+
+const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');
+
+export function ChatStage({ sessionId, onSessionCreated }: ChatStageProps) {
+  const { selectedModelId, selectedAgentId, variant, setVariant } = useAgentStore();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [streamingText, setStreamingText] = useState('');
+  const [streamingThinking, setStreamingThinking] = useState('');
+  const [streamingToolCalls, setStreamingToolCalls] = useState<any[]>([]);
+  const [attachments, setAttachments] = useState<any[]>([]);
+  const [activeReader, setActiveReader] = useState<ReadableStreamDefaultReader<Uint8Array> | null>(null);
+  const [promptHistory, setPromptHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const newAttachments: any[] = [];
+      Array.from(e.target.files).forEach(file => {
+        newAttachments.push({
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          file: file // Store actual file object for potential upload logic if needed, or read content
+        });
+      });
+      setAttachments(prev => [...prev, ...newAttachments]);
+    }
+    // Reset input so same file can be selected again
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    
+    const files: File[] = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item && item.kind === 'file') {
+        const file = item.getAsFile();
+        if (file) files.push(file);
+      }
+    }
+    
+    if (files.length > 0) {
+      const newAttachments = files.map(file => ({
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        file: file
+      }));
+      setAttachments(prev => [...prev, ...newAttachments]);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Enter without shift sends message
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+      return;
+    }
+    
+    // Up arrow - navigate to previous prompt
+    if (e.key === 'ArrowUp' && !e.shiftKey && inputValue === '' && promptHistory.length > 0) {
+      e.preventDefault();
+      const newIndex = historyIndex === -1 ? promptHistory.length - 1 : Math.max(0, historyIndex - 1);
+      setHistoryIndex(newIndex);
+      setInputValue(promptHistory[newIndex] || '');
+    }
+    
+    // Down arrow - navigate to next prompt
+    if (e.key === 'ArrowDown' && !e.shiftKey && historyIndex !== -1) {
+      e.preventDefault();
+      const newIndex = historyIndex + 1;
+      if (newIndex >= promptHistory.length) {
+        setHistoryIndex(-1);
+        setInputValue('');
+      } else {
+        setHistoryIndex(newIndex);
+        setInputValue(promptHistory[newIndex] || '');
+      }
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const newAttachments: any[] = [];
+      Array.from(e.dataTransfer.files).forEach(file => {
+        newAttachments.push({
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          file: file
+        });
+      });
+      setAttachments(prev => [...prev, ...newAttachments]);
+    }
+  };
+
+  const removeAttachment = (index: number) => {
+    setAttachments(prev => prev.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    if (sessionId) {
+      fetch(`/api/sessions/${sessionId}`).then(r => r.json()).then(data => {
+        setMessages(data.messages || []);
+      });
+    } else {
+      setMessages([]);
+    }
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, streamingText, streamingThinking, streamingToolCalls]);
+
+  const handleCancel = async () => {
+    if (!sessionId) return;
+    try {
+      await fetch('/api/chat/cancel', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId })
+      });
+      if (activeReader) {
+        await activeReader.cancel();
+        setActiveReader(null);
+      }
+      setIsLoading(false);
+    } catch (e) {
+      console.error('Failed to cancel:', e);
+    }
+  };
+
+  const handleSendMessage = async (text: string = inputValue) => {
+    if ((!text.trim() && attachments.length === 0) || isLoading) return;
+
+    // Add to history
+    if (text.trim()) {
+      setPromptHistory(prev => [...prev, text.trim()]);
+      setHistoryIndex(-1);
+    }
+
+    let activeSessionId = sessionId;
+
+    // Create session if none exists
+    if (!activeSessionId) {
+       try {
+         const res = await fetch('/api/sessions', { 
+           method: 'POST',
+           headers: { 'Content-Type': 'application/json' },
+           body: JSON.stringify({ agentId: 'build' })
+         });
+         const data = await res.json();
+         activeSessionId = data.id;
+         // Notify parent to update URL/State, but continue locally
+         if (onSessionCreated) onSessionCreated(data.id);
+       } catch (e) {
+         console.error('Failed to create session', e);
+         return;
+       }
+    }
+
+    // Process attachments to send as Base64
+    const processedAttachments = await Promise.all(attachments.map(async (a) => {
+      if (!a.file) return a;
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve({
+            name: a.name,
+            type: a.type,
+            size: a.size,
+            content: reader.result // This will be the data URL (Base64)
+          });
+        };
+        reader.readAsDataURL(a.file);
+      });
+    }));
+
+    const userMsg: Message = { 
+      id: 'msg-' + Date.now(), 
+      role: 'user', 
+      content: text, 
+      timestamp: new Date() as any,
+      attachments: attachments // Keep original for local UI display
+    };
+    
+    setMessages(prev => [...prev, userMsg]);
+    setInputValue('');
+    setAttachments([]); // Clear attachments after sending
+    if (textareaRef.current) textareaRef.current.style.height = 'auto';
+    
+    setIsLoading(true); 
+    setStreamingText(''); 
+    setStreamingThinking(''); 
+    setStreamingToolCalls([]);
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          sessionId: activeSessionId, 
+          message: text,
+          agentId: selectedAgentId,
+          modelId: selectedModelId,
+          variant,
+          attachments: processedAttachments // Send Base64 attachments to backend
+        })
+      });
+
+      const reader = response.body?.getReader();
+      if (reader) setActiveReader(reader);
+      const decoder = new TextDecoder();
+      
+      let accumulatedContent = '';
+      let accumulatedThinking = '';
+      let accumulatedToolCalls: any[] = [];
+      let buffer = '';
+
+      if (reader) {
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+
+          const tagRegex = /<<<(THOUGHT|END_THOUGHT|TOOL_START|TOOL_END):?([\s\S]*?)?>>>/g;
+          let match;
+          let currentToolCalls: any[] = [];
+
+          while ((match = tagRegex.exec(buffer)) !== null) {
+            const tagType = match[1];
+            const tagValue = match[2] || '';
+
+            if (tagType === 'TOOL_START') {
+              try {
+                const toolData = JSON.parse(tagValue);
+                currentToolCalls.push({ name: toolData.name, args: toolData.args, status: 'running' });
+              } catch (e) {}
+            } else if (tagType === 'TOOL_END') {
+              try {
+                const toolData = JSON.parse(tagValue);
+                const idx = currentToolCalls.findIndex(t => t.name === toolData.name && t.status === 'running');
+                if (idx !== -1) {
+                  currentToolCalls[idx] = { ...currentToolCalls[idx], result: toolData.result, status: 'completed' };
+                } else {
+                  currentToolCalls.push({ name: toolData.name, result: toolData.result, status: 'completed' });
+                }
+              } catch (e) {}
+            }
+          }
+          
+          // Thinking extraction
+          let currentThinking = '';
+          const thinkingRegex = /<<<THOUGHT>>>([\s\S]*?)(?:<<<END_THOUGHT>>>|$)/g;
+          let tMatch;
+          while ((tMatch = thinkingRegex.exec(buffer)) !== null) {
+            currentThinking += tMatch[1];
+          }
+
+          // Clean content removal
+          // 1. Remove thinking blocks entirely
+          let cleanContent = buffer.replace(/<<<THOUGHT>>>[\s\S]*?(?:<<<END_THOUGHT>>>|$)/g, '');
+          // 2. Remove all other tags
+          cleanContent = cleanContent.replace(/<<<(?:THOUGHT|END_THOUGHT|TOOL_START|TOOL_END):?[\s\S]*?>>>/g, '');
+          // 3. Remove partial tags at the end of the buffer to prevent them from flashing
+          cleanContent = cleanContent.replace(/<<<[A-Z_]*:?[\s\S]*?$/g, '');
+
+          accumulatedContent = cleanContent;
+          accumulatedThinking = currentThinking;
+          accumulatedToolCalls = currentToolCalls;
+
+          setStreamingText(accumulatedContent);
+          setStreamingThinking(accumulatedThinking);
+          setStreamingToolCalls(accumulatedToolCalls);
+        }
+      }
+
+      setMessages(prev => [...prev, {
+        id: 'msg-' + Date.now(),
+        role: 'assistant',
+        content: accumulatedContent,
+        thinking: accumulatedThinking,
+        toolCalls: accumulatedToolCalls as any,
+        timestamp: new Date() as any
+      }]);
+      setStreamingText(''); setStreamingThinking(''); setStreamingToolCalls([]);
+      setActiveReader(null);
+    } catch (e) { 
+      console.error(e); 
+    } finally { 
+      setIsLoading(false); 
+      setActiveReader(null);
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 relative h-full">
+      <div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar px-4 pt-10">
+        {messages.length === 0 && !streamingText ? (
+          <div className="h-full flex flex-col items-center justify-center space-y-4 md:space-y-6 pt-10 pb-20 max-w-5xl mx-auto px-6">
+            <JarvisLogo />
+            
+            <div className="text-center space-y-1 relative w-full">
+               <div className="absolute -inset-10 bg-cyan-500/5 blur-3xl rounded-full pointer-events-none" />
+               <h1 className="text-3xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-cyan-200 tracking-widest uppercase italic drop-shadow-[0_0_25px_rgba(6,182,212,0.6)] font-mono break-words">
+                 J.A.R.V.I.S.
+               </h1>
+               <div className="flex items-center justify-center gap-3 text-cyan-500/80">
+                 <div className="h-px w-6 md:w-8 bg-cyan-800" />
+                 <p className="text-[7px] md:text-[8px] font-bold uppercase tracking-[0.2em] md:tracking-[0.3em] text-cyan-400 text-center">Just A Rather Very Intelligent System</p>
+                 <div className="h-px w-6 md:w-8 bg-cyan-800" />
+               </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3 md:gap-4 w-full md:px-4 max-w-md md:max-w-none">
+               {[
+                 { t: 'Software Architecture', d: 'Design a system with Docker & Redis', i: Layout, color: 'text-cyan-400', border: 'hover:border-cyan-500/50', glow: 'group-hover:shadow-[0_0_20px_rgba(34,211,238,0.2)]' },
+                 { t: 'Code Review', d: 'Optimize this React component', i: Search, color: 'text-emerald-400', border: 'hover:border-emerald-500/50', glow: 'group-hover:shadow-[0_0_20px_rgba(52,211,153,0.2)]' },
+                 { t: 'Data Structures', d: 'Explain B-Trees vs Red-Black Trees', i: Code, color: 'text-amber-400', border: 'hover:border-amber-500/50', glow: 'group-hover:shadow-[0_0_20px_rgba(251,191,36,0.2)]' },
+                 { t: 'DevOps Flow', d: 'Setup CI/CD for my Node project', i: Activity, color: 'text-indigo-400', border: 'hover:border-indigo-500/50', glow: 'group-hover:shadow-[0_0_20px_rgba(129,140,248,0.2)]' }
+               ].map(q => (
+                 <button 
+                   key={q.t} 
+                   onClick={() => handleSendMessage(q.d)} 
+                   className={cn(
+                     "p-4 md:p-5 bg-zinc-950/40 border border-zinc-800/60 rounded-lg text-left transition-all duration-300 group relative overflow-hidden backdrop-blur-sm",
+                     q.border,
+                     q.glow
+                   )}
+                 >
+                   <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                   <div className="relative z-10 flex xl:flex-col items-center xl:items-start gap-4 xl:gap-3">
+                      <div className={cn("p-2.5 rounded-lg bg-zinc-900/80 border border-zinc-800 group-hover:scale-110 transition-transform duration-300 shadow-inner shrink-0", q.color)}>
+                        <q.i size={20} />
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-xs md:text-sm font-black text-zinc-100 uppercase tracking-wide group-hover:text-white transition-colors truncate">{q.t}</p>
+                        <p className="text-[10px] md:text-xs text-zinc-500 mt-0.5 font-medium opacity-60 group-hover:opacity-100 transition-opacity truncate xl:whitespace-normal xl:line-clamp-2">{q.d}</p>
+                      </div>
+                   </div>
+                 </button>
+               ))}
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col pb-64">
+            {messages.map(m => <MessageItem key={m.id} message={m} />)}
+            
+            <AnimatePresence>
+              {/* Streaming thinking is now shown inline with the message */}
+            </AnimatePresence>
+
+            {streamingText || streamingToolCalls.length > 0 || streamingThinking ? (
+              <div className="w-full py-6 border-b border-zinc-900/30 bg-zinc-900/5">
+                 <div className="max-w-4xl mx-auto flex gap-6 px-6 md:px-12">
+                    <div className="w-8 h-8 rounded shrink-0 flex items-center justify-center shadow-lg bg-cyan-900/20 text-cyan-500">
+                      <Bot size={16} />
+                    </div>
+                    <div className="flex-1 min-w-0 space-y-4">
+                      {streamingThinking && (
+                        <div className="mb-4">
+                          <div className="text-xs font-medium text-zinc-500 mb-2 flex items-center gap-2">
+                            <span>Thinking</span>
+                            <div className="w-1 h-1 rounded-full bg-zinc-500 animate-pulse"></div>
+                          </div>
+                          <div className="pl-3 border-l-2 border-amber-500/20 text-sm text-zinc-500 font-mono leading-relaxed">
+                            {streamingThinking}
+                          </div>
+                        </div>
+                      )}
+                      
+                      {streamingToolCalls.length > 0 && (
+                        <div className="space-y-3">
+                          {streamingToolCalls.map((t, i) => {
+                            const isEdit = t.name === 'edit';
+                            const isBash = t.name === 'bash';
+                            
+                            return (
+                              <div key={i} className="border border-zinc-800 rounded-xl bg-zinc-900/50 overflow-hidden shadow-lg">
+                                {/* Tool Header */}
+                                <div className="flex items-center justify-between px-4 py-3 bg-zinc-900/80 border-b border-zinc-800">
+                                  <div className="flex items-center gap-3">
+                                    <div className="p-2 rounded-lg bg-zinc-950 text-cyan-500">
+                                      <Activity size={14} />
+                                    </div>
+                                    <div className="text-left">
+                                      <p className="text-[10px] font-black uppercase tracking-widest text-zinc-500">Running</p>
+                                      <p className="text-sm font-bold text-zinc-100">{t.name === 'bash' ? 'Shell' : t.name}</p>
+                                    </div>
+                                  </div>
+                                  <span className="text-[9px] font-black uppercase tracking-widest text-cyan-500 animate-pulse flex items-center gap-2">
+                                    <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-ping"></div>
+                                    Live
+                                  </span>
+                                </div>
+                                
+                                {/* Tool Content */}
+                                <div className="p-4 space-y-3">
+                                  {isEdit && t.args?.filePath && (
+                                    <>
+                                      <div className="space-y-1">
+                                        <div className="text-[10px] font-black uppercase text-zinc-600 tracking-wider">File</div>
+                                        <div className="font-mono text-xs text-zinc-400 bg-zinc-950 p-2 rounded-lg border border-zinc-800">
+                                          {t.args.filePath}
+                                        </div>
+                                      </div>
+                                      
+                                      {t.args.oldString && (
+                                        <div className="space-y-1">
+                                          <div className="text-[10px] font-black uppercase text-red-400 tracking-wider flex items-center gap-2">
+                                            <span>Removing</span>
+                                            <span className="font-mono text-[9px]">{t.args.oldString.split('\n').length} lines</span>
+                                          </div>
+                                          <div className="font-mono text-xs text-red-400 bg-red-950/20 p-3 rounded-lg border border-red-900/30 max-h-40 overflow-y-auto">
+                                            {t.args.oldString}
+                                          </div>
+                                        </div>
+                                      )}
+                                      
+                                      {t.args.newString && (
+                                        <div className="space-y-1">
+                                          <div className="text-[10px] font-black uppercase text-emerald-400 tracking-wider flex items-center gap-2">
+                                            <span>Adding</span>
+                                            <span className="font-mono text-[9px]">{t.args.newString.split('\n').length} lines</span>
+                                          </div>
+                                          <div className="font-mono text-xs text-emerald-400 bg-emerald-950/20 p-3 rounded-lg border border-emerald-900/30 max-h-40 overflow-y-auto">
+                                            {t.args.newString}
+                                          </div>
+                                        </div>
+                                      )}
+                                    </>
+                                  )}
+                                  
+                                  {isBash && t.args?.command && (
+                                    <div className="space-y-1">
+                                      <div className="text-[10px] font-black uppercase text-zinc-600 tracking-wider">Command</div>
+                                      <div className="font-mono text-xs text-emerald-400 bg-zinc-950 p-3 rounded-lg border border-zinc-800">
+                                        {t.args.command}
+                                      </div>
+                                    </div>
+                                  )}
+                                  
+                                  {!isEdit && !isBash && (
+                                    <div className="space-y-1">
+                                      <div className="text-[10px] font-black uppercase text-zinc-600 tracking-wider">Details</div>
+                                      <div className="font-mono text-xs text-zinc-400 bg-zinc-950 p-3 rounded-lg border border-zinc-800">
+                                        {JSON.stringify(t.args, null, 2)}
+                                      </div>
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+
+                      {streamingText && (
+                        <div className="prose prose-invert prose-zinc max-w-none text-base leading-relaxed prose-headings:font-bold prose-p:text-zinc-300 prose-pre:bg-transparent prose-pre:p-0 prose-pre:m-0">
+                          <ReactMarkdown remarkPlugins={[remarkGfm]}>{streamingText}</ReactMarkdown>
+                        </div>
+                      )}
+                    </div>
+                 </div>
+              </div>
+            ) : null}
+          </div>
+        )}
+      </div>
+
+      {/* Input Stage */}
+      <div className="absolute bottom-0 left-0 right-0 p-4 md:p-10 bg-gradient-to-t from-zinc-950 via-zinc-950/90 to-transparent pointer-events-none z-30">
+        <div className="max-w-4xl mx-auto relative pointer-events-auto">
+          {/* Variant Selector */}
+          <div className="flex justify-center mb-4 gap-2">
+            {[
+              { id: 'standard', label: 'Standard', color: 'text-zinc-400', active: 'bg-zinc-800 text-zinc-100 ring-1 ring-white/10' },
+              { id: 'creative', label: 'Creative', color: 'text-purple-400', active: 'bg-purple-900/20 text-purple-400 ring-1 ring-purple-500/30' },
+              { id: 'precise', label: 'Precise', color: 'text-emerald-400', active: 'bg-emerald-900/20 text-emerald-400 ring-1 ring-emerald-500/30' }
+            ].map(v => (
+              <button
+                key={v.id}
+                onClick={() => setVariant(v.id as any)}
+                className={cn(
+                  "px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-all",
+                  variant === v.id ? v.active : cn("text-zinc-600 hover:text-zinc-400", v.color.replace('text-', 'hover:text-'))
+                )}
+              >
+                {v.label}
+              </button>
+            ))}
+          </div>
+
+          {attachments.length > 0 && (
+            <div className="flex flex-wrap gap-2 mb-3 px-1">
+              {attachments.map((file, i) => (
+                <div key={i} className="relative group">
+                  <div className="flex items-center gap-2 bg-zinc-900/50 border border-zinc-800 rounded-lg px-2 py-1.5 pr-7">
+                    <div className="w-6 h-6 rounded bg-zinc-800/50 flex items-center justify-center text-zinc-500 shrink-0">
+                      <Paperclip size={12} />
+                    </div>
+                    <span className="text-xs font-medium text-zinc-400 truncate max-w-[100px]">{file.name}</span>
+                  </div>
+                  <button 
+                    onClick={() => removeAttachment(i)}
+                    className="absolute -top-1 -right-1 p-0.5 bg-zinc-900 border border-zinc-800 rounded-full text-zinc-500 hover:text-red-400 hover:border-red-800 transition-colors opacity-0 group-hover:opacity-100"
+                  >
+                    <XIcon size={10} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <form 
+            onSubmit={(e) => { e.preventDefault(); handleSendMessage(); }} 
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={handleDrop}
+            className="relative bg-zinc-900/90 backdrop-blur-3xl border border-zinc-800 rounded-xl md:rounded-[2rem] p-2 md:p-3 shadow-[0_20px_50px_rgba(0,0,0,0.6)] focus-within:border-zinc-700 transition-all ring-1 ring-white/5"
+          >
+            <div className="flex items-end gap-2 md:gap-3 px-1 md:px-2">
+              <input 
+                type="file" 
+                multiple 
+                ref={fileInputRef} 
+                className="hidden" 
+                onChange={handleFileSelect} 
+              />
+              <button 
+                type="button" 
+                onClick={() => fileInputRef.current?.click()}
+                className="p-3 md:p-4 text-zinc-500 hover:text-cyan-500 transition-all active:scale-90 bg-zinc-950 rounded-lg md:rounded-2xl"
+              >
+                <Paperclip size={18} className="md:w-[22px] md:h-[22px]" />
+              </button>
+              
+              <textarea 
+                ref={textareaRef}
+                rows={1}
+                autoFocus
+                value={inputValue}
+                onChange={(e) => {
+                  setInputValue(e.target.value);
+                  e.target.style.height = 'auto';
+                  e.target.style.height = `${Math.min(e.target.scrollHeight, 250)}px`;
+                }}
+                onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
+                placeholder="Message JARVIS..."
+                className="flex-1 bg-transparent border-none py-3 md:py-4 px-2 text-zinc-100 focus:outline-none focus:ring-0 text-base md:text-[18px] resize-none max-h-40 md:max-h-60 placeholder-zinc-700 leading-normal custom-scrollbar font-medium"
+              />
+
+              <button 
+                type={isLoading ? "button" : "submit"}
+                onClick={isLoading ? handleCancel : undefined}
+                disabled={!isLoading && (!inputValue.trim() && attachments.length === 0)}
+                className={cn(
+                  "p-3 md:p-4 rounded-lg md:rounded-2xl transition-all active:scale-90 flex items-center justify-center min-w-[48px] md:min-w-[64px]",
+                  (inputValue.trim() || attachments.length > 0 || isLoading) ? "bg-white text-black shadow-xl" : "bg-zinc-800 text-zinc-600"
+                )}
+              >
+                {isLoading ? <Square size={18} fill="currentColor" className="md:w-6 md:h-6" /> : <ArrowUp size={18} strokeWidth={3} className="md:w-6 md:h-6" />}
+              </button>
+            </div>
+          </form>
+          
+          <div className="hidden flex justify-center gap-4 md:gap-8 mt-4 text-[8px] md:text-[9px] font-black uppercase tracking-[0.2em] md:tracking-[0.4em] text-zinc-700 italic opacity-50 md:opacity-100">
+            <span className="hidden md:inline">Secure Link Active</span>
+            <span>OS 1.0.3-B</span>
+            <span className="hidden md:inline">Workspace: Synchronized</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}