@electerm/electerm-react 5.3.15 → 5.5.6

package/client/components/ai/ai-chat-entry.jsx

@@ -1,11 +1,20 @@
-import { lazy, Suspense } from 'react'
+import { lazy, Suspense, useState } from 'react'
+import LazyBoundary from '../common/lazy-boundary'
 
 const AIChat = lazy(() => import('./ai-chat'))
 
 export default function AIChatEntry (props) {
+  const [activated, setActivated] = useState(false)
+  const active = props.rightPanelTab === 'ai'
+  if (active && !activated) setActivated(true)
+  // Keep drafts and attachments when switching to info after opening chat.
+  if (!active && !activated) return null
+
   return (
-    <Suspense fallback={null}>
-      <AIChat {...props} />
-    </Suspense>
+    <LazyBoundary>
+      <Suspense fallback={null}>
+        <AIChat {...props} />
+      </Suspense>
+    </LazyBoundary>
   )
 }

package/client/components/ai/ai-chat-history-item.jsx

@@ -6,15 +6,18 @@ import { runAgentLoop } from './agent'
 import { appendMandatoryGuardrails } from './ai-guardrails'
 import {
   Alert,
-  Tooltip
+  Tooltip,
+  Tag
 } from 'antd'
 import {
   CopyOutlined,
   CloseOutlined,
   CaretDownOutlined,
-  CaretRightOutlined
+  CaretRightOutlined,
+  PaperClipOutlined
 } from '@ant-design/icons'
 import { copy } from '../../common/clipboard'
+import { formatSize } from './ai-attachments'
 
 export default function AIChatHistoryItem ({ item }) {
   const [showOutput, setShowOutput] = useState(true)
@@ -81,7 +84,12 @@ export default function AIChatHistoryItem ({ item }) {
           content: 'Understood. I will use this context as we continue.'
         })
       } else {
-        messages.push({ role: 'user', content: entry.prompt })
+        messages.push({
+          role: 'user',
+          // promptWithAttachments carries the inlined file blocks;
+          // falls back to the plain prompt for legacy entries
+          content: entry.promptWithAttachments || entry.prompt
+        })
         if (entry.response && entry.id !== item.id) {
           messages.push({ role: 'assistant', content: entry.response })
         }
@@ -271,6 +279,21 @@ export default function AIChatHistoryItem ({ item }) {
     )
   }
 
+  function renderAttachments () {
+    if (!item.attachments || !item.attachments.length) {
+      return null
+    }
+    return (
+      <div className='ai-chat-item-attachments mg1b'>
+        {item.attachments.map(a => (
+          <Tag key={a.name + a.size} title={`${a.name} (${formatSize(a.size)})`}>
+            <PaperClipOutlined /> {a.name}
+          </Tag>
+        ))}
+      </div>
+    )
+  }
+
   function renderToolCalls () {
     if (mode !== 'agent' || !toolCalls || !toolCalls.length) {
       return null
@@ -278,7 +301,7 @@ export default function AIChatHistoryItem ({ item }) {
     return (
       <div className='agent-tool-calls'>
         {toolCalls.map((tc) => (
-          <AgentToolCallCard key={tc.id} toolCall={tc} />
+          <AgentToolCallCard key={tc.id} toolCall={tc} autoCollapse={!isStreaming} />
         ))}
       </div>
     )
@@ -291,6 +314,7 @@ export default function AIChatHistoryItem ({ item }) {
           <Alert {...alertProps} />
         </Tooltip>
       </div>
+      {renderAttachments()}
       {renderToolCalls()}
       {showOutput && <AIOutput item={item} />}
       {renderStopButton()}

package/client/components/ai/ai-chat-history.jsx

@@ -2,6 +2,7 @@
 import { useLayoutEffect, useRef } from 'react'
 import { auto } from 'manate/react'
 import AIChatHistoryItem from './ai-chat-history-item'
+import AiChatEmpty from './ai-chat-empty'
 
 export default auto(function AIChatHistory ({ history }) {
   const historyRef = useRef(null)
@@ -12,7 +13,7 @@ export default auto(function AIChatHistory ({ history }) {
     }
   }, [history])
   if (!history.length) {
-    return <div />
+    return <AiChatEmpty />
   }
   return (
     <div ref={historyRef} className='ai-history-wrap'>

package/client/components/ai/ai-chat.jsx

@@ -1,5 +1,5 @@
-import { useState, useCallback, useEffect } from 'react'
-import { Flex, Input, Segmented, Button } from 'antd'
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { Flex, Input, Segmented, Button, Tag, message } from 'antd'
 import TabSelect from '../footer/tab-select'
 import AiChatHistory from './ai-chat-history'
 import AiChatSessions from './ai-chat-sessions'
@@ -10,7 +10,8 @@ import {
   SendOutlined,
   PlusOutlined,
   HistoryOutlined,
-  CompressOutlined
+  CompressOutlined,
+  PaperClipOutlined
 } from '@ant-design/icons'
 import {
   aiConfigWikiLink,
@@ -19,6 +20,12 @@ import {
 import { getItem, setItem } from '../../common/safe-local-storage.js'
 import HelpIcon from '../common/help-icon'
 import { refsStatic } from '../common/ref'
+import {
+  readTextAttachment,
+  validateAttachmentTotal,
+  buildAttachmentsBlock,
+  formatSize
+} from './ai-attachments'
 import './ai.styl'
 
 const { TextArea } = Input
@@ -27,6 +34,9 @@ const MAX_HISTORY = 500
 export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
   const [compressing, setCompressing] = useState(false)
+  const [attachments, setAttachments] = useState([])
+  const [dragOver, setDragOver] = useState(false)
+  const fileInputRef = useRef(null)
   const [mode, setMode] = useState(() => getItem(aiChatModeLsKey) || 'ask')
   const isAgent = mode === 'agent'
   const submitDisabled = isAgent && props.agentRunning
@@ -53,15 +63,55 @@ export default function AIChat (props) {
     setMode(m)
   }
 
+  const e = window.translate
+
+  async function handleFiles (files) {
+    const notText = []
+    let totalTooLarge = false
+    const next = [...attachments]
+    for (const file of Array.from(files)) {
+      if (next.some(a => a.name === file.name && a.size === file.size)) {
+        continue
+      }
+      if (!validateAttachmentTotal(next, file.size)) {
+        totalTooLarge = true
+        continue
+      }
+      const { attachment, error } = await readTextAttachment(file)
+      if (error === 'notTextFile') {
+        notText.push(file.name)
+        continue
+      }
+      if (attachment) {
+        next.push(attachment)
+      }
+    }
+    setAttachments(next)
+    if (totalTooLarge) {
+      message.error('attachment too big')
+    }
+    if (notText.length) {
+      message.error(`attachment only support text files: ${notText.join(', ')}`)
+    }
+  }
+
   const handleSubmit = useCallback(function () {
     if (window.store.aiConfigMissing()) {
       window.store.toggleAIConfig()
     }
-    if (!prompt.trim()) return
+    if (!prompt.trim() && !attachments.length) return
 
     const chatId = uid()
+    const block = buildAttachmentsBlock(attachments)
+    const promptWithAttachments = block
+      ? (prompt.trim() ? prompt + '\n\n' + block : block)
+      : prompt
     const chatEntry = {
       prompt,
+      promptWithAttachments,
+      attachments: attachments.map(({ name, size, truncated }) => ({
+        name, size, truncated
+      })),
       response: '',
       isStreaming: false,
       pending: true,
@@ -86,11 +136,12 @@ export default function AIChat (props) {
 
     window.store.aiChatHistory.push(chatEntry)
     setPrompt('')
+    setAttachments([])
 
     if (window.store.aiChatHistory.length > MAX_HISTORY) {
       window.store.aiChatHistory.splice(MAX_HISTORY)
     }
-  }, [prompt, mode, currentChatSessionId])
+  }, [prompt, attachments, mode, currentChatSessionId])
 
   function renderHistory () {
     if (props.showChatSessions) {
@@ -168,9 +219,6 @@ export default function AIChat (props) {
       setPrompt,
       handleSubmit
     })
-    if (props.rightPanelTab === 'ai' && window.store.aiConfigMissing()) {
-      window.store.toggleAIConfig()
-    }
     return () => {
       refsStatic.remove('AIChat')
     }
@@ -180,17 +228,32 @@ export default function AIChat (props) {
     return null
   }
 
-  const handleKeyPress = (e) => {
-    if (!e.shiftKey) {
-      e.preventDefault()
+  const handleKeyPress = (evt) => {
+    if (!evt.shiftKey) {
+      evt.preventDefault()
       if (!submitDisabled) {
         handleSubmit()
       }
     }
   }
-  const e = window.translate
   return (
-    <Flex vertical className='ai-chat-container'>
+    <Flex
+      vertical
+      className={'ai-chat-container' + (dragOver ? ' ai-attachment-dragover' : '')}
+      onDragOver={(evt) => {
+        evt.preventDefault()
+        setDragOver(true)
+      }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={(evt) => {
+        setDragOver(false)
+        if (!evt.dataTransfer.files.length) {
+          return
+        }
+        evt.preventDefault()
+        handleFiles(evt.dataTransfer.files)
+      }}
+    >
       <Flex className='ai-chat-history' flex='auto'>
         {renderHistory()}
       </Flex>
@@ -225,6 +288,20 @@ export default function AIChat (props) {
             {e('history')}
           </Button>
         </Flex>
+        {attachments.length > 0 && (
+          <Flex wrap='wrap' gap={4} className='ai-chat-attachments mg1b'>
+            {attachments.map(a => (
+              <Tag
+                key={a.id}
+                closable
+                onClose={() => setAttachments(arr => arr.filter(x => x.id !== a.id))}
+                title={`${a.name} (${formatSize(a.size)})`}
+              >
+                <PaperClipOutlined /> {a.name}
+              </Tag>
+            ))}
+          </Flex>
+        )}
         <TextArea
           value={prompt}
           onChange={handlePromptChange}
@@ -233,6 +310,16 @@ export default function AIChat (props) {
           autoSize={{ minRows: 3, maxRows: 10 }}
           className='ai-chat-textarea'
         />
+        <input
+          type='file'
+          multiple
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          onChange={(evt) => {
+            handleFiles(evt.target.files)
+            evt.target.value = ''
+          }}
+        />
         <Flex className='ai-chat-terminals' justify='space-between' align='center'>
           <Flex align='center'>
             <Segmented
@@ -242,6 +329,10 @@ export default function AIChat (props) {
               size='small'
             />
             {renderTabSelect()}
+            <PaperClipOutlined
+              onClick={() => fileInputRef.current?.click()}
+              className='mg1l pointer icon-hover toggle-ai-attach-icon'
+            />
             <SettingOutlined
               onClick={toggleConfig}
               className='mg1l pointer icon-hover toggle-ai-setting-icon'

package/client/components/ai/ai-config-props.js

@@ -10,133 +10,7 @@ export const aiConfigsArr = [
   'proxyAI'
 ]
 
-export const defaultAIPresets = [
-  {
-    id: 'atlascloud',
-    nameAI: 'AtlasCloud',
-    baseURLAI: 'https://api.atlascloud.ai/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'deepseek-ai/deepseek-v4-flash',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'ApiSmart',
-    nameAI: 'ApiSmart',
-    baseURLAI: 'https://api.apismart.ai/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'DEEPSEEK_V4_FLASH',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'apimart',
-    nameAI: 'ApiMart',
-    baseURLAI: 'https://api.apimart.ai/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'deepseek-v4-flash',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'deepseek',
-    nameAI: 'DeepSeek',
-    baseURLAI: 'https://api.deepseek.com/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'deepseek-chat',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'openai',
-    nameAI: 'OpenAI',
-    baseURLAI: 'https://api.openai.com/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'gpt-4o',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'openrouter',
-    nameAI: 'OpenRouter',
-    baseURLAI: 'https://openrouter.ai/api/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'openai/gpt-4o-mini',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'orcarouter',
-    nameAI: 'OrcaRouter',
-    baseURLAI: 'https://api.orcarouter.ai/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'deepseek/deepseek-v4-flash',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'google',
-    nameAI: 'Google Gemini',
-    baseURLAI: 'https://generativelanguage.googleapis.com/v1beta/openai',
-    apiPathAI: '/chat/completions',
-    modelAI: 'gemini-2.0-flash',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'groq',
-    nameAI: 'Groq',
-    baseURLAI: 'https://api.groq.com/openai/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'llama-3.3-70b-versatile',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'together',
-    nameAI: 'Together AI',
-    baseURLAI: 'https://api.together.xyz/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'meta-llama/Llama-3.3-70B-Instruct-Turbo',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'mistral',
-    nameAI: 'Mistral AI',
-    baseURLAI: 'https://api.mistral.ai/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'mistral-large-latest',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'xai',
-    nameAI: 'xAI (Grok)',
-    baseURLAI: 'https://api.x.ai/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'grok-3-mini',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'perplexity',
-    nameAI: 'Perplexity',
-    baseURLAI: 'https://api.perplexity.ai',
-    apiPathAI: '/chat/completions',
-    modelAI: 'sonar',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'moonshot',
-    nameAI: 'Moonshot (Kimi)',
-    baseURLAI: 'https://api.moonshot.cn/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'moonshot-v1-8k',
-    authHeaderNameAI: 'Authorization: Bearer'
-  },
-  {
-    id: 'siliconflow',
-    nameAI: 'SiliconFlow',
-    baseURLAI: 'https://api.siliconflow.cn/v1',
-    apiPathAI: '/chat/completions',
-    modelAI: 'deepseek-ai/DeepSeek-V3',
-    authHeaderNameAI: 'Authorization: Bearer'
-  }
-]
-
-export function getAIPresets () {
-  const presets = [...defaultAIPresets]
-  if (window.et?.defaultAIPreset) {
-    presets.unshift(window.et.defaultAIPreset)
-  }
-  return presets
-}
+export {
+  defaultAIPresets,
+  getAIPresets
+} from './ai-presets'

package/client/components/ai/ai-config.jsx

@@ -7,8 +7,8 @@ import {
   Space,
   Dropdown
 } from 'antd'
-import { useEffect, useState } from 'react'
-import { DownOutlined } from '@ant-design/icons'
+import { useEffect, useMemo, useState } from 'react'
+import { DownOutlined, ReloadOutlined } from '@ant-design/icons'
 import Link from '../common/external-link'
 import AiCache from './ai-cache'
 import {
@@ -17,11 +17,50 @@ import {
 import Password from '../common/password'
 import AiHistory, { addHistoryItem } from './ai-history'
 import message from '../common/message'
-import { getAIPresets } from './ai-config-props'
+import { getAIPresets } from './ai-presets'
 import { appendMandatoryGuardrails } from './ai-guardrails'
 
 const STORAGE_KEY_CONFIG = 'ai_config_history'
 const EVENT_NAME_CONFIG = 'ai-config-history-update'
+const STORAGE_KEY_MODELS = 'ai_models_cache'
+
+// Model lists fetched from `<baseURL>/models`, cached per API URL
+function normalizeBaseURL (url) {
+  return (url || '').trim().replace(/\/+$/, '')
+}
+
+function readModelsCache () {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY_MODELS)
+    const parsed = raw ? JSON.parse(raw) : null
+    return parsed && typeof parsed === 'object' ? parsed : {}
+  } catch (e) {
+    return {}
+  }
+}
+
+function getCachedModels (baseURL) {
+  const key = normalizeBaseURL(baseURL)
+  if (!key) {
+    return []
+  }
+  const models = readModelsCache()[key]
+  return Array.isArray(models) ? models : []
+}
+
+function saveModelsToCache (baseURL, models) {
+  const key = normalizeBaseURL(baseURL)
+  if (!key) {
+    return
+  }
+  try {
+    const cache = readModelsCache()
+    cache[key] = models
+    window.localStorage.setItem(STORAGE_KEY_MODELS, JSON.stringify(cache))
+  } catch (e) {
+    // storage full or disabled, keep it in memory only
+  }
+}
 
 const e = window.translate
 const defaultRoles = [
@@ -39,6 +78,15 @@ const proxyOptions = [
   { value: 'https://proxy.example.com:3128' }
 ]
 
+// The wire protocol is detected from the path:
+// /chat/completions -> OpenAI compatible, /responses -> OpenAI Responses API,
+// /messages -> Anthropic Claude Messages API
+const apiPathOptions = [
+  { value: '/chat/completions', label: '/chat/completions (OpenAI)' },
+  { value: '/responses', label: '/responses (OpenAI Responses)' },
+  { value: '/messages', label: '/messages (Anthropic)' }
+]
+
 const authHeaderOptions = [
   { value: 'Authorization: Bearer' },
   { value: 'x-api-key' },
@@ -50,7 +98,11 @@ const authHeaderOptions = [
 export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig }) {
   const [form] = Form.useForm()
   const [testing, setTesting] = useState(false)
+  const [loadingModels, setLoadingModels] = useState(false)
+  const [cachedModels, setCachedModels] = useState([])
   const baseURLAI = Form.useWatch('baseURLAI', form)
+  const presets = useMemo(() => getAIPresets(), [])
+  const currentPreset = presets.find(p => p.baseURLAI === baseURLAI)
 
   useEffect(() => {
     if (initialValues) {
@@ -58,6 +110,11 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     }
   }, [initialValues])
 
+  // Restore the model list previously fetched for this API URL
+  useEffect(() => {
+    setCachedModels(getCachedModels(baseURLAI))
+  }, [baseURLAI])
+
   function filter () {
     return true
   }
@@ -105,8 +162,45 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     }
   }
 
+  async function handleLoadModels () {
+    const values = form.getFieldsValue()
+    const baseURL = normalizeBaseURL(values.baseURLAI)
+    if (!baseURL) {
+      message.error('Please input API URL first')
+      return
+    }
+    setLoadingModels(true)
+    try {
+      const res = await window.pre.runGlobalAsync(
+        'AIlistModels',
+        baseURL,
+        values.apiKeyAI,
+        values.authHeaderNameAI,
+        values.proxyAI
+      )
+      if (res && res.error) {
+        message.error(res.error)
+      } else if (res && res.models && res.models.length) {
+        setCachedModels(res.models)
+        saveModelsToCache(baseURL, res.models)
+        message.success(`Got ${res.models.length} models`)
+        if (!values.modelAI) {
+          form.setFieldsValue({ modelAI: res.models[0] })
+        }
+      } else {
+        message.error('No models found in response')
+      }
+    } catch (e) {
+      if (e.message) {
+        message.error(e.message)
+      }
+    } finally {
+      setLoadingModels(false)
+    }
+  }
+
   function handleSelectPreset (preset) {
-    const fields = ['nameAI', 'baseURLAI', 'apiPathAI', 'modelAI', 'authHeaderNameAI', 'modelAI', 'apiKeyAI']
+    const fields = ['nameAI', 'baseURLAI', 'apiPathAI', 'modelAI', 'authHeaderNameAI', 'apiKeyAI']
     const values = {}
     fields.forEach(f => {
       if (preset[f] !== undefined) {
@@ -117,7 +211,6 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
   }
 
   function renderPresetMenu () {
-    const presets = getAIPresets()
     const items = presets.map(p => ({
       key: p.id,
       label: p.nameAI,
@@ -126,7 +219,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     return (
       <Dropdown menu={{ items }} trigger={['click']}>
         <Button>
-          {e('presets') || 'Presets'} <DownOutlined />
+          {e('presets')} <DownOutlined />
         </Button>
       </Dropdown>
     )
@@ -145,15 +238,41 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
   }
 
   function renderApiKeyLabel () {
-    if (baseURLAI === 'https://api.atlascloud.ai/v1') {
-      return <span className='bold'>API Key (<Link to='https://www.atlascloud.ai/?utm_source=electerm_app&utm_medium=link&utm_campaign=electerm'>get API key from atlascloud</Link>)</span>
-    }
-    if (baseURLAI === 'https://ai.electerm.org/api/ai') {
-      return <span className='bold'>API Key (<Link to='https://ai.electerm.org?utm=electerm'>get API key from ai.electerm.org(free)</Link>)</span>
+    const siteUrl = currentPreset?.siteUrl
+    if (siteUrl) {
+      const name = currentPreset?.nameAI || baseURLAI
+      return <span className='bold'>API Key (<Link to={siteUrl}>get API key from {name}</Link>)</span>
     }
     return 'API Key'
   }
 
+  function renderModelInput () {
+    const presetModels = (currentPreset?.modelAIs || [])
+      .map(o => (typeof o === 'string' ? o : o.value))
+    const values = [...presetModels, ...cachedModels].filter(Boolean)
+    const options = [...new Set(values)].map(value => ({ value }))
+    const title = 'Fetch model list from API URL'
+    return (
+      <AutoComplete
+        options={options}
+        filterOption={filter}
+      >
+        <Input
+          placeholder='Enter or select AI model'
+          suffix={
+            <ReloadOutlined
+              spin={loadingModels}
+              className='pointer ai-model-reload'
+              title={title}
+              onMouseDown={e => e.preventDefault()}
+              onClick={handleLoadModels}
+            />
+          }
+        />
+      </AutoComplete>
+    )
+  }
+
   if (!showAIConfig) {
     return null
   }
@@ -219,8 +338,11 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
               ]}
               noStyle
             >
-              <Input
+              <AutoComplete
+                options={apiPathOptions}
+                filterOption={filter}
                 placeholder='/chat/completions'
+                popupMatchSelectWidth={false}
                 style={{ width: '25%' }}
               />
             </Form.Item>
@@ -231,9 +353,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           name='modelAI'
           rules={[{ required: true, message: 'Please input or select a model!' }]}
         >
-          <Input
-            placeholder='Enter or select AI model'
-          />
+          {renderModelInput()}
         </Form.Item>
 
         <Form.Item