From 72678e7f264e07bd116a5e15bf26aee723d81122 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Mon, 23 Mar 2026 13:28:19 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20rich=20input=20for=20assistant=20chat?=
 =?UTF-8?q?=20=E2=80=94=20paste,=20drag-drop,=20attach,=20logs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Upgraded AssistantChatPage input from basic textarea to ChatGPT-style:
- Paste images (Ctrl+V) with thumbnail previews
- Drag-and-drop files with drop zone overlay
- Attach button for images, logs, docs, PDFs
- Expandable "Paste Logs" section for raw error output
- Conclude session button moved into toolbar row
- Auto-growing textarea
- Replaced all glass-border dividers with border-border/border-default

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/assistant/ChatSidebar.tsx  |   6 +-
 frontend/src/pages/AssistantChatPage.tsx      | 216 +++++++++++++++---
 2 files changed, 189 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index 1d66a93c..d474e5e9 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/frontend/src/components/assistant/ChatSidebar.tsx
@@ -49,10 +49,10 @@ export function ChatSidebar({
           'transition-transform duration-200',
           mobileOpen ? 'translate-x-0' : '-translate-x-full sm:translate-x-0',
         )}
-        style={{ borderColor: 'var(--glass-border)', background: 'var(--color-bg-sidebar)' }}
+        style={{ background: 'var(--color-bg-sidebar)' }}
       >
       {/* Header */}
-      <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--color-border-default)' }}>
         <button
           onClick={handleNewChat}
           className="w-full flex items-center justify-center gap-2 bg-primary text-white font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
@@ -83,7 +83,7 @@ export function ChatSidebar({
         ))}
 
         {pinnedChats.length > 0 && unpinnedChats.length > 0 && (
-          <div className="mx-3 my-2 border-b" style={{ borderColor: 'var(--glass-border)' }} />
+          <div className="mx-3 my-2 border-b" style={{ borderColor: 'var(--color-border-default)' }} />
         )}
 
         {unpinnedChats.map(chat => (
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index 39590de2..157ebab2 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -1,6 +1,9 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Sparkles, Send, Loader2, Flag, MessageSquare } from 'lucide-react'
+import { Sparkles, Send, Loader2, Flag, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { uploadsApi } from '@/api/uploads'
+import type { PendingUpload } from '@/types/upload'
 import { PageMeta } from '@/components/common/PageMeta'
 import { assistantChatApi } from '@/api/assistantChat'
 import { analytics } from '@/lib/analytics'
@@ -25,8 +28,14 @@ export default function AssistantChatPage() {
   const [loading, setLoading] = useState(false)
   const [showConclude, setShowConclude] = useState(false)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
+  const [showLogs, setShowLogs] = useState(false)
+  const [logContent, setLogContent] = useState('')
+  const [pendingUploads, setPendingUploads] = useState<PendingUpload[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const dragCounterRef = useRef(0)
   const prefillHandledRef = useRef(false)
 
   // Load chat list
@@ -229,6 +238,74 @@ export default function AssistantChatPage() {
     }
   }
 
+  // Auto-grow textarea
+  useEffect(() => {
+    const el = inputRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 150)}px`
+  }, [input])
+
+  // ── File handling ──────────────────────────────
+  const ACCEPTED_FILE_TYPES = 'image/png,image/jpeg,image/gif,image/webp,.txt,.log,.csv,.pdf,.docx'
+
+  const processFiles = useCallback((files: File[]) => {
+    if (files.length === 0) return
+    const newUploads: PendingUpload[] = files.map((file) => ({
+      id: crypto.randomUUID(),
+      file,
+      preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : '',
+      status: 'uploading' as const,
+    }))
+    setPendingUploads((prev) => [...prev, ...newUploads])
+    newUploads.forEach((upload) => {
+      uploadsApi.upload(upload.file)
+        .then((result) => {
+          setPendingUploads((prev) => prev.map((u) => u.id === upload.id ? { ...u, status: 'done' as const, result } : u))
+        })
+        .catch((err) => {
+          const errorMsg = err?.response?.status === 503 ? 'File uploads not available' : err?.message || 'Upload failed'
+          setPendingUploads((prev) => prev.map((u) => u.id === upload.id ? { ...u, status: 'error' as const, error: errorMsg } : u))
+        })
+    })
+  }, [])
+
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const items = e.clipboardData?.items
+    if (!items) return
+    const imageFiles: File[] = []
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith('image/')) {
+        const file = items[i].getAsFile()
+        if (file) imageFiles.push(file)
+      }
+    }
+    if (imageFiles.length > 0) {
+      e.preventDefault()
+      processFiles(imageFiles)
+    }
+  }, [processFiles])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy' }, [])
+  const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault(); dragCounterRef.current++; if (dragCounterRef.current === 1) setIsDragOver(true) }, [])
+  const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault(); dragCounterRef.current--; if (dragCounterRef.current === 0) setIsDragOver(false) }, [])
+  const handleDrop = useCallback((e: React.DragEvent) => { e.preventDefault(); dragCounterRef.current = 0; setIsDragOver(false); processFiles(Array.from(e.dataTransfer.files)) }, [processFiles])
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { if (e.target.files) { processFiles(Array.from(e.target.files)); e.target.value = '' } }, [processFiles])
+  const handleRemoveUpload = useCallback((uploadId: string) => {
+    setPendingUploads((prev) => { const toRemove = prev.find((u) => u.id === uploadId); if (toRemove?.preview) URL.revokeObjectURL(toRemove.preview); return prev.filter((u) => u.id !== uploadId) })
+  }, [])
+  const retryUpload = useCallback((uploadId: string) => {
+    const upload = pendingUploads.find((u) => u.id === uploadId)
+    if (!upload) return
+    setPendingUploads((prev) => prev.map((u) => u.id === uploadId ? { ...u, status: 'uploading' as const, error: undefined } : u))
+    uploadsApi.upload(upload.file)
+      .then((result) => { setPendingUploads((prev) => prev.map((u) => u.id === uploadId ? { ...u, status: 'done' as const, result } : u)) })
+      .catch((err) => { setPendingUploads((prev) => prev.map((u) => u.id === uploadId ? { ...u, status: 'error' as const, error: err?.message || 'Upload failed' } : u)) })
+  }, [pendingUploads])
+
+  // Cleanup blob URLs on unmount
+  useEffect(() => { return () => { pendingUploads.forEach((u) => { if (u.preview) URL.revokeObjectURL(u.preview) }) } }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <>
     <PageMeta title="AI Assistant" />
@@ -260,7 +337,7 @@ export default function AssistantChatPage() {
       {/* Main chat area */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Mobile header with chat history toggle */}
-        <div className="sm:hidden flex items-center gap-2 px-3 py-2 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+        <div className="sm:hidden flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
           <button
             onClick={() => setMobileSidebarOpen(true)}
             className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
@@ -316,44 +393,123 @@ export default function AssistantChatPage() {
               <div ref={messagesEndRef} />
             </div>
 
-            {/* Input */}
-            <div className="px-3 sm:px-6 py-3 sm:py-4 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
-              <div className="max-w-3xl mx-auto">
-                <div className="flex items-end gap-3">
+            {/* Rich Input */}
+            <div className="px-3 sm:px-6 py-3 shrink-0 border-t border-border">
+              <div
+                className="max-w-3xl mx-auto"
+                onDragOver={handleDragOver}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                <div className={cn(
+                  'relative rounded-xl border transition-all',
+                  loading ? 'border-border/50 opacity-50' :
+                  isDragOver ? 'border-primary/50 bg-primary/5' :
+                  'border-border focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
+                )} style={{ background: 'var(--color-bg-card)' }}>
+                  {/* Drag overlay */}
+                  {isDragOver && (
+                    <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
+                      <div className="flex items-center gap-2 text-sm text-primary">
+                        <ImagePlus size={18} />
+                        Drop files to attach
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Textarea */}
                   <textarea
                     ref={inputRef}
                     value={input}
                     onChange={e => setInput(e.target.value)}
                     onKeyDown={handleKeyDown}
-                    placeholder="Ask about IT, networking, troubleshooting..."
-                    rows={3}
-                    className="flex-1 resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
-                    style={{ borderColor: 'var(--glass-border)' }}
+                    onPaste={handlePaste}
+                    placeholder={loading ? 'AI is thinking...' : 'Type a message, paste a screenshot, or drag a file...'}
                     disabled={loading}
+                    rows={1}
+                    className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+                    style={{ minHeight: '40px', maxHeight: '150px' }}
                   />
-                  <div className="flex flex-col gap-2">
-                    <button
-                      onClick={handleSend}
-                      disabled={!input.trim() || loading}
-                      className="bg-primary text-white p-3 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
-                      title="Send message"
-                    >
-                      <Send size={18} />
-                    </button>
-                    {messages.length >= 2 && (
-                      <button
-                        onClick={() => setShowConclude(true)}
-                        disabled={loading}
-                        className="p-3 rounded-xl border text-muted-foreground hover:text-amber-400 hover:border-amber-400/30 hover:bg-amber-400/10 transition-all disabled:opacity-40"
-                        style={{ borderColor: 'var(--glass-border)' }}
-                        title="Conclude session"
-                      >
-                        <Flag size={18} />
+
+                  {/* Thumbnail strip */}
+                  {pendingUploads.length > 0 && (
+                    <div className="flex gap-2 flex-wrap px-4 pb-1">
+                      {pendingUploads.map((upload) => (
+                        <div key={upload.id} className="relative w-12 h-12 rounded-lg overflow-hidden border border-border bg-background">
+                          {upload.preview ? (
+                            <img src={upload.preview} alt="" className="w-full h-full object-cover" />
+                          ) : (
+                            <div className="w-full h-full flex items-center justify-center text-[0.5rem] text-muted-foreground px-1 text-center">
+                              {upload.file.name.split('.').pop()?.toUpperCase()}
+                            </div>
+                          )}
+                          {upload.status === 'uploading' && (
+                            <div className="absolute inset-0 bg-background/60 flex items-center justify-center">
+                              <Loader2 size={12} className="animate-spin text-primary" />
+                            </div>
+                          )}
+                          {upload.status === 'done' && (
+                            <button type="button" onClick={() => handleRemoveUpload(upload.id)} className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors">
+                              <X size={8} className="text-muted-foreground" />
+                            </button>
+                          )}
+                          {upload.status === 'error' && (
+                            <div className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer" onClick={() => retryUpload(upload.id)}>
+                              <RotateCcw size={10} className="text-rose-500" />
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Logs textarea */}
+                  {showLogs && (
+                    <div className="px-4 pb-1">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-[0.625rem] uppercase tracking-wide text-muted-foreground font-sans">Paste logs or error output</span>
+                        <button type="button" onClick={() => { setShowLogs(false); setLogContent('') }} className="text-muted-foreground hover:text-foreground"><X size={14} /></button>
+                      </div>
+                      <textarea
+                        value={logContent}
+                        onChange={(e) => setLogContent(e.target.value)}
+                        placeholder="Paste event viewer logs, error messages, PowerShell output..."
+                        rows={3}
+                        className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+                      />
+                    </div>
+                  )}
+
+                  {/* Bottom toolbar */}
+                  <div className="flex items-center justify-between px-3 py-1.5 border-t border-border/50">
+                    <div className="flex items-center gap-0.5">
+                      <input ref={fileInputRef} type="file" multiple accept={ACCEPTED_FILE_TYPES} onChange={handleFileSelect} className="hidden" />
+                      <button type="button" onClick={() => fileInputRef.current?.click()} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40" title="Attach files">
+                        <Paperclip size={14} />
+                        <span className="hidden sm:inline">Attach</span>
                       </button>
-                    )}
+                      {!showLogs && (
+                        <button type="button" onClick={() => setShowLogs(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40" title="Paste logs">
+                          <Terminal size={14} />
+                          <span className="hidden sm:inline">Paste Logs</span>
+                        </button>
+                      )}
+                      {messages.length >= 2 && (
+                        <button type="button" onClick={() => setShowConclude(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors disabled:opacity-40" title="Conclude session">
+                          <Flag size={14} />
+                          <span className="hidden sm:inline">Conclude</span>
+                        </button>
+                      )}
+                    </div>
+                    <button type="button" onClick={handleSend} disabled={!input.trim() || loading} className={cn(
+                      'flex h-8 w-8 items-center justify-center rounded-lg transition-all',
+                      input.trim() && !loading ? 'bg-primary text-white hover:brightness-110 active:scale-95' : 'bg-secondary text-muted-foreground cursor-not-allowed'
+                    )} title="Send message">
+                      <Send size={15} />
+                    </button>
                   </div>
                 </div>
-                <p className="text-[0.625rem] text-muted-foreground mt-1.5 px-1">Shift + Enter for a new line</p>
               </div>
             </div>
           </>