feat: implement cross-account validation and improved error handling for file attachments in API tester

webui/src/features/apiTester/ChatPanel.jsx

@@ -2,12 +2,15 @@ import { Bot, Loader2, Send, Square, User, Zap, Paperclip, X, FileIcon } from 'l
 import clsx from 'clsx'
 import { useRef, useState } from 'react'
 
+import { getAttachedFileAccountIds } from './fileAccountBinding'
+
 export default function ChatPanel({
     t,
     message,
     setMessage,
     attachedFiles = [],
     setAttachedFiles,
+    setSelectedAccount,
     effectiveKey,
     selectedAccount,
     onMessage,
@@ -32,6 +35,8 @@ export default function ChatPanel({
         }
 
         setUploadingFiles(true)
+        const initialSelectedAccount = String(selectedAccount || '').trim()
+        let boundAccount = initialSelectedAccount
         for (const file of files) {
             const formData = new FormData()
             formData.append('file', file)
@@ -40,8 +45,8 @@ export default function ChatPanel({
             const headers = {
                 'Authorization': `Bearer ${effectiveKey}`,
             }
-            if (selectedAccount) {
-                headers['X-Ds2-Target-Account'] = selectedAccount
+            if (boundAccount) {
+                headers['X-Ds2-Target-Account'] = boundAccount
             }
 
             try {
@@ -57,11 +62,18 @@ export default function ChatPanel({
                 }
                 const data = await res.json()
                 setAttachedFiles(prev => [...prev, data])
+                const uploadedAccount = String(data?.account_id || '').trim()
+                if (!boundAccount && uploadedAccount) {
+                    boundAccount = uploadedAccount
+                }
             } catch (error) {
                 onMessage('error', error.message || 'Network error during upload')
             }
         }
         setUploadingFiles(false)
+        if (!initialSelectedAccount && boundAccount && setSelectedAccount) {
+            setSelectedAccount(boundAccount)
+        }
         if (fileInputRef.current) {
             fileInputRef.current.value = ''
         }
@@ -70,6 +82,9 @@ export default function ChatPanel({
     const removeFile = (id) => {
         setAttachedFiles(prev => prev.filter(f => f.id !== id))
     }
+
+    const attachmentAccountIds = getAttachedFileAccountIds(attachedFiles)
+    const attachmentAccountId = attachmentAccountIds.length === 1 ? attachmentAccountIds[0] : ''
     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">
@@ -143,6 +158,16 @@ export default function ChatPanel({
                         ))}
                     </div>
                 )}
+                {attachmentAccountIds.length > 1 && (
+                    <div className="max-w-4xl mx-auto mb-3 text-[11px] text-amber-600">
+                        {t('apiTester.fileAccountConflict')}
+                    </div>
+                )}
+                {attachmentAccountId && (
+                    <div className="max-w-4xl mx-auto mb-3 text-[11px] text-muted-foreground">
+                        {t('apiTester.attachmentAccountHint', { account: attachmentAccountId })}
+                    </div>
+                )}
                 <div className="max-w-4xl mx-auto relative group">
                     <input
                         type="file"