From aa41bae044f5aa4f370841c5edd13bdb472cdac0 Mon Sep 17 00:00:00 2001
From: CJACK <tetr20071102@gmail.com>
Date: Mon, 13 Apr 2026 00:04:38 +0800
Subject: [PATCH] feat: add file attachment support to chat interface and API
 requests

---
 .../features/apiTester/ApiTesterContainer.jsx |   6 ++
 webui/src/features/apiTester/ChatPanel.jsx    | 102 +++++++++++++++++-
 .../features/apiTester/useApiTesterState.js   |   4 +-
 .../features/apiTester/useChatStreamClient.js |  18 +++-
 4 files changed, 119 insertions(+), 11 deletions(-)

diff --git a/webui/src/features/apiTester/ApiTesterContainer.jsx b/webui/src/features/apiTester/ApiTesterContainer.jsx
index f3485c3..0752231 100644
--- a/webui/src/features/apiTester/ApiTesterContainer.jsx
+++ b/webui/src/features/apiTester/ApiTesterContainer.jsx
@@ -70,6 +70,7 @@ export default function ApiTesterContainer({ config, onMessage, authFetch }) {
         effectiveKey,
         selectedAccount,
         streamingMode,
+        attachedFiles,
         abortControllerRef,
         setLoading,
         setIsStreaming,
@@ -104,6 +105,11 @@ export default function ApiTesterContainer({ config, onMessage, authFetch }) {
                 t={t}
                 message={message}
                 setMessage={setMessage}
+                attachedFiles={attachedFiles}
+                setAttachedFiles={setAttachedFiles}
+                effectiveKey={effectiveKey}
+                selectedAccount={selectedAccount}
+                onMessage={onMessage}
                 response={response}
                 isStreaming={isStreaming}
                 loading={loading}
diff --git a/webui/src/features/apiTester/ChatPanel.jsx b/webui/src/features/apiTester/ChatPanel.jsx
index 3fade56..4633e37 100644
--- a/webui/src/features/apiTester/ChatPanel.jsx
+++ b/webui/src/features/apiTester/ChatPanel.jsx
@@ -1,10 +1,16 @@
-import { Bot, Loader2, Send, Square, User, Zap } from 'lucide-react'
+import { Bot, Loader2, Send, Square, User, Zap, Paperclip, X, FileIcon } from 'lucide-react'
 import clsx from 'clsx'
+import { useRef, useState } from 'react'
 
 export default function ChatPanel({
     t,
     message,
     setMessage,
+    attachedFiles = [],
+    setAttachedFiles,
+    effectiveKey,
+    selectedAccount,
+    onMessage,
     response,
     isStreaming,
     loading,
@@ -13,6 +19,57 @@ export default function ChatPanel({
     onRunTest,
     onStopGeneration,
 }) {
+    const fileInputRef = useRef(null)
+    const [uploadingFiles, setUploadingFiles] = useState(false)
+
+    const handleFileSelect = async (e) => {
+        const files = Array.from(e.target.files)
+        if (files.length === 0) return
+
+        if (!effectiveKey) {
+            onMessage('error', t('apiTester.missingApiKey') || 'Missing API Key')
+            return
+        }
+
+        setUploadingFiles(true)
+        for (const file of files) {
+            const formData = new FormData()
+            formData.append('file', file)
+            formData.append('purpose', 'assistants')
+
+            const headers = {
+                'Authorization': `Bearer ${effectiveKey}`,
+            }
+            if (selectedAccount) {
+                headers['X-Ds2-Target-Account'] = selectedAccount
+            }
+
+            try {
+                const res = await fetch('/v1/files', {
+                    method: 'POST',
+                    headers,
+                    body: formData
+                })
+                if (!res.ok) {
+                    const err = await res.text()
+                    onMessage('error', err || 'File upload failed')
+                    continue
+                }
+                const data = await res.json()
+                setAttachedFiles(prev => [...prev, data])
+            } catch (error) {
+                onMessage('error', error.message || 'Network error during upload')
+            }
+        }
+        setUploadingFiles(false)
+        if (fileInputRef.current) {
+            fileInputRef.current.value = ''
+        }
+    }
+
+    const removeFile = (id) => {
+        setAttachedFiles(prev => prev.filter(f => f.id !== id))
+    }
     return (
         <div className="lg:col-span-9 flex flex-col bg-card border border-border rounded-xl shadow-sm overflow-hidden min-h-0 flex-1 relative">
             <div className="flex-1 overflow-y-auto p-4 lg:p-6 space-y-8 custom-scrollbar scroll-smooth">
@@ -70,9 +127,42 @@ export default function ChatPanel({
             </div>
 
             <div className="p-4 lg:p-6 border-t border-border bg-card">
+                {attachedFiles.length > 0 && (
+                    <div className="max-w-4xl mx-auto flex flex-wrap gap-2 mb-3">
+                        {attachedFiles.map(file => (
+                            <div key={file.id} className="flex items-center gap-2 bg-secondary/50 border border-border rounded-md px-2 py-1 text-xs text-secondary-foreground">
+                                <FileIcon className="w-3 h-3 text-muted-foreground" />
+                                <span className="truncate max-w-[150px]">{file.filename || file.id}</span>
+                                <button
+                                    onClick={() => removeFile(file.id)}
+                                    className="text-muted-foreground hover:text-destructive transition-colors ml-1"
+                                >
+                                    <X className="w-3 h-3" />
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                )}
                 <div className="max-w-4xl mx-auto relative group">
+                    <input
+                        type="file"
+                        className="hidden"
+                        ref={fileInputRef}
+                        multiple
+                        onChange={handleFileSelect}
+                    />
+                    <div className="absolute left-2 bottom-2 z-10">
+                        <button
+                            onClick={() => fileInputRef.current?.click()}
+                            disabled={uploadingFiles || isStreaming}
+                            className="p-2 text-muted-foreground hover:text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            title="Attach files"
+                        >
+                            {uploadingFiles ? <Loader2 className="w-4 h-4 animate-spin" /> : <Paperclip className="w-4 h-4" />}
+                        </button>
+                    </div>
                     <textarea
-                        className="w-full bg-[#09090b] border border-border rounded-xl pl-4 pr-12 py-3 text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all resize-none custom-scrollbar placeholder:text-muted-foreground/50 text-foreground shadow-inner"
+                        className="w-full bg-[#09090b] border border-border rounded-xl pl-12 pr-12 py-3 text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all resize-none custom-scrollbar placeholder:text-muted-foreground/50 text-foreground shadow-inner"
                         placeholder={t('apiTester.enterMessage')}
                         rows={1}
                         style={{ minHeight: '52px' }}
@@ -81,11 +171,13 @@ export default function ChatPanel({
                         onKeyDown={e => {
                             if (e.key === 'Enter' && !e.shiftKey) {
                                 e.preventDefault()
-                                onRunTest()
+                                if (!loading && !uploadingFiles && (message.trim() || attachedFiles.length > 0)) {
+                                    onRunTest()
+                                }
                             }
                         }}
                     />
-                    <div className="absolute right-2 bottom-2">
+                    <div className="absolute right-2 bottom-2 z-10">
                         {loading && isStreaming ? (
                             <button onClick={onStopGeneration} className="p-2 text-muted-foreground hover:text-destructive transition-colors">
                                 <Square className="w-4 h-4 fill-current" />
@@ -93,7 +185,7 @@ export default function ChatPanel({
                         ) : (
                             <button
                                 onClick={onRunTest}
-                                disabled={loading || !message.trim()}
+                                disabled={loading || uploadingFiles || (!message.trim() && attachedFiles.length === 0)}
                                 className="p-2 text-primary hover:text-primary/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                             >
                                 {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
diff --git a/webui/src/features/apiTester/useApiTesterState.js b/webui/src/features/apiTester/useApiTesterState.js
index 266f6d6..1f5c744 100644
--- a/webui/src/features/apiTester/useApiTesterState.js
+++ b/webui/src/features/apiTester/useApiTesterState.js
@@ -12,7 +12,7 @@ export function useApiTesterState({ t }) {
     const [streamingThinking, setStreamingThinking] = useState('')
     const [isStreaming, setIsStreaming] = useState(false)
     const [streamingMode, setStreamingMode] = useState(true)
-    const [configExpanded, setConfigExpanded] = useState(false)
+    const [attachedFiles, setAttachedFiles] = useState([])
 
     const abortControllerRef = useRef(null)
     const defaultMessageRef = useRef(defaultMessage)
@@ -27,6 +27,8 @@ export function useApiTesterState({ t }) {
         setModel,
         message,
         setMessage,
+        attachedFiles,
+        setAttachedFiles,
         apiKey,
         setApiKey,
         selectedAccount,
diff --git a/webui/src/features/apiTester/useChatStreamClient.js b/webui/src/features/apiTester/useChatStreamClient.js
index 814b8b1..8448967 100644
--- a/webui/src/features/apiTester/useChatStreamClient.js
+++ b/webui/src/features/apiTester/useChatStreamClient.js
@@ -8,6 +8,7 @@ export function useChatStreamClient({
     effectiveKey,
     selectedAccount,
     streamingMode,
+    attachedFiles,
     abortControllerRef,
     setLoading,
     setIsStreaming,
@@ -70,15 +71,21 @@ export function useChatStreamClient({
                 headers['X-Ds2-Target-Account'] = selectedAccount
             }
 
+            const body = {
+                model,
+                messages: [{ role: 'user', content: message }],
+                stream: streamingMode,
+            }
+            
+            if (attachedFiles && attachedFiles.length > 0) {
+                body.file_ids = attachedFiles.map(f => f.id)
+            }
+
             const endpoint = streamingMode ? '/v1/chat/completions' : '/v1/chat/completions?__go=1'
             const res = await fetch(endpoint, {
                 method: 'POST',
                 headers,
-                body: JSON.stringify({
-                    model,
-                    messages: [{ role: 'user', content: message }],
-                    stream: streamingMode,
-                }),
+                body: JSON.stringify(body),
                 signal: abortControllerRef.current.signal,
             })
 
@@ -150,6 +157,7 @@ export function useChatStreamClient({
         }
     }, [
         abortControllerRef,
+        attachedFiles,
         effectiveKey,
         extractErrorMessage,
         message,