@electerm/electerm-react 3.10.0 → 3.11.0

package/client/components/ai/agent.js

@@ -0,0 +1,159 @@
+import { agentTools, executeToolCall } from './agent-tools'
+
+const MAX_ITERATIONS = 15
+
+function buildAgentSystemPrompt (config) {
+  const lang = config.languageAI || window.store.getLangName()
+  const baseRole = config.roleAI || 'You are a helpful assistant.'
+  return `${baseRole}
+
+You are operating inside electerm, a terminal/SSH client. You have access to tools that let you:
+- Run commands in terminal tabs and read their output
+- Open new terminal tabs (local or SSH)
+- Manage bookmarks (create, list, open connections)
+- Switch between tabs
+
+When the user asks you to perform terminal operations, use the available tools.
+Always explain what you are doing before executing commands.
+If a command produces errors, analyze the output and try to fix the issue.
+Prefer using the active terminal unless the user specifies otherwise.
+For SSH connections, create a bookmark and open it rather than running ssh directly.
+
+Reply in ${lang} language.`
+}
+
+function updateChatEntry (chatEntry, updates) {
+  const index = window.store.aiChatHistory.findIndex(i => i.id === chatEntry.id)
+  if (index !== -1) {
+    Object.assign(window.store.aiChatHistory[index], updates)
+    window.store.aiChatHistory = [...window.store.aiChatHistory]
+  }
+}
+
+async function callBackendAIchatWithTools (messages, config) {
+  return window.pre.runGlobalAsync(
+    'AIchatWithTools',
+    messages,
+    config.modelAI,
+    config.baseURLAI,
+    config.apiPathAI,
+    config.apiKeyAI,
+    config.proxyAI,
+    agentTools
+  )
+}
+
+export async function runAgentLoop (chatEntry, config, abortRef) {
+  const messages = [
+    { role: 'system', content: buildAgentSystemPrompt(config) },
+    { role: 'user', content: chatEntry.prompt }
+  ]
+  const toolCallsLog = []
+  let accumulatedContent = ''
+
+  updateChatEntry(chatEntry, {
+    isStreaming: true,
+    toolCalls: [],
+    response: ''
+  })
+
+  for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+    if (abortRef && abortRef.current) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent + '\n\n*(Agent stopped by user)*'
+      })
+      return
+    }
+
+    const result = await callBackendAIchatWithTools(messages, config)
+
+    if (result.error) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent + `\n\n**Error:** ${result.error}`
+      })
+      return
+    }
+
+    const assistantMessage = result.message
+    if (!assistantMessage) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent || 'No response from AI.'
+      })
+      return
+    }
+
+    messages.push(assistantMessage)
+
+    if (assistantMessage.content) {
+      accumulatedContent += (accumulatedContent ? '\n\n' : '') + assistantMessage.content
+      updateChatEntry(chatEntry, {
+        response: accumulatedContent
+      })
+    }
+
+    if (!assistantMessage.tool_calls || assistantMessage.tool_calls.length === 0) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent
+      })
+      return
+    }
+
+    for (const toolCall of assistantMessage.tool_calls) {
+      if (abortRef && abortRef.current) {
+        updateChatEntry(chatEntry, {
+          isStreaming: false,
+          response: accumulatedContent + '\n\n*(Agent stopped by user)*'
+        })
+        return
+      }
+
+      let args
+      try {
+        args = JSON.parse(toolCall.function.arguments)
+      } catch {
+        args = {}
+      }
+
+      const toolEntry = {
+        id: toolCall.id,
+        name: toolCall.function.name,
+        args,
+        status: 'running',
+        result: null
+      }
+      toolCallsLog.push(toolEntry)
+      updateChatEntry(chatEntry, {
+        toolCalls: [...toolCallsLog]
+      })
+
+      let toolResult
+      try {
+        toolResult = await executeToolCall(toolCall.function.name, args)
+        toolEntry.status = 'completed'
+        toolEntry.result = toolResult
+      } catch (err) {
+        toolEntry.status = 'error'
+        toolEntry.result = err.message
+      }
+
+      updateChatEntry(chatEntry, {
+        toolCalls: [...toolCallsLog]
+      })
+
+      messages.push({
+        role: 'tool',
+        tool_call_id: toolCall.id,
+        content: toolEntry.result
+      })
+    }
+  }
+
+  updateChatEntry(chatEntry, {
+    isStreaming: false,
+    response: accumulatedContent + '\n\n*(Agent reached maximum iterations)*'
+  })
+}

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

@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const AIChat = lazy(() => import('./ai-chat'))
+
+export default function AIChatEntry (props) {
+  return (
+    <Suspense fallback={null}>
+      <AIChat {...props} />
+    </Suspense>
+  )
+}

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

@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import AIOutput from './ai-output'
 import AIStopIcon from './ai-stop-icon'
+import AgentToolCallCard from './agent-tool-call-card'
+import { runAgentLoop } from './agent'
 import {
   Alert,
   Tooltip
@@ -17,6 +19,7 @@ import { copy } from '../../common/clipboard'
 export default function AIChatHistoryItem ({ item }) {
   const [showOutput, setShowOutput] = useState(true)
   const startedRef = useRef(false)
+  const abortRef = useRef(false)
   const {
     prompt,
     isStreaming,
@@ -28,7 +31,9 @@ export default function AIChatHistoryItem ({ item }) {
     apiPathAI,
     apiKeyAI,
     proxyAI,
-    languageAI
+    languageAI,
+    mode,
+    toolCalls
   } = item
 
   function toggleOutput () {
@@ -108,15 +113,42 @@ export default function AIChatHistoryItem ({ item }) {
     }
   }, [prompt, modelAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, item.id, pollStreamContent])
 
+  const startAgentRequest = useCallback(async () => {
+    abortRef.current = false
+    const config = {
+      modelAI,
+      roleAI,
+      baseURLAI,
+      apiPathAI,
+      apiKeyAI,
+      proxyAI,
+      languageAI
+    }
+    await runAgentLoop(item, config, abortRef)
+  }, [modelAI, roleAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, languageAI, item.id])
+
   useEffect(() => {
     if (!response && !startedRef.current) {
       startedRef.current = true
-      startRequest()
+      if (mode === 'agent') {
+        startAgentRequest()
+      } else {
+        startRequest()
+      }
     }
   }, [])
 
   async function handleStop (e) {
     e.stopPropagation()
+    if (mode === 'agent') {
+      abortRef.current = true
+      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+      if (index !== -1) {
+        window.store.aiChatHistory[index].isStreaming = false
+        window.store.aiChatHistory = [...window.store.aiChatHistory]
+      }
+      return
+    }
     if (!sessionId) return
 
     try {
@@ -194,6 +226,19 @@ export default function AIChatHistoryItem ({ item }) {
     )
   }
 
+  function renderToolCalls () {
+    if (mode !== 'agent' || !toolCalls || !toolCalls.length) {
+      return null
+    }
+    return (
+      <div className='agent-tool-calls'>
+        {toolCalls.map((tc) => (
+          <AgentToolCallCard key={tc.id} toolCall={tc} />
+        ))}
+      </div>
+    )
+  }
+
   return (
     <div className='chat-history-item'>
       <div className='mg1y'>
@@ -201,6 +246,7 @@ export default function AIChatHistoryItem ({ item }) {
           <Alert {...alertProps} />
         </Tooltip>
       </div>
+      {renderToolCalls()}
       {showOutput && <AIOutput item={item} />}
     </div>
   )

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react'
-import { Flex, Input } from 'antd'
+import { Flex, Input, Segmented } from 'antd'
 import TabSelect from '../footer/tab-select'
 import AiChatHistory from './ai-chat-history'
 import uid from '../../common/uid'
@@ -21,6 +21,8 @@ const MAX_HISTORY = 100
 
 export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
+  const [mode, setMode] = useState('ask')
+  const isAgent = mode === 'agent'
 
   function handlePromptChange (e) {
     setPrompt(e.target.value)
@@ -38,6 +40,8 @@ export default function AIChat (props) {
       response: '',
       isStreaming: false,
       sessionId: null,
+      mode,
+      toolCalls: [],
       ...pick(props.config, [
         'modelAI',
         'roleAI',
@@ -57,7 +61,7 @@ export default function AIChat (props) {
     if (window.store.aiChatHistory.length > MAX_HISTORY) {
       window.store.aiChatHistory.splice(MAX_HISTORY)
     }
-  }, [prompt])
+  }, [prompt, mode])
 
   function renderHistory () {
     return (
@@ -75,6 +79,19 @@ export default function AIChat (props) {
     window.store.aiChatHistory = []
   }
 
+  function renderTabSelect () {
+    if (isAgent) {
+      return null
+    }
+    return (
+      <TabSelect
+        selectedTabIds={props.selectedTabIds}
+        tabs={props.tabs}
+        activeTabId={props.activeTabId}
+      />
+    )
+  }
+
   function renderSendIcon () {
     return (
       <SendOutlined
@@ -126,11 +143,13 @@ export default function AIChat (props) {
         />
         <Flex className='ai-chat-terminals' justify='space-between' align='center'>
           <Flex align='center'>
-            <TabSelect
-              selectedTabIds={props.selectedTabIds}
-              tabs={props.tabs}
-              activeTabId={props.activeTabId}
+            <Segmented
+              options={['Ask', 'Agent']}
+              value={mode === 'ask' ? 'Ask' : 'Agent'}
+              onChange={(val) => setMode(val === 'Ask' ? 'ask' : 'agent')}
+              size='small'
             />
+            {renderTabSelect()}
             <SettingOutlined
               onClick={toggleConfig}
               className='mg1l pointer icon-hover toggle-ai-setting-icon'

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

@@ -6,7 +6,7 @@ import {
   Alert,
   Space
 } from 'antd'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import Link from '../common/external-link'
 import AiCache from './ai-cache'
 import {
@@ -14,6 +14,7 @@ import {
 } from '../../common/constants'
 import Password from '../common/password'
 import AiHistory, { addHistoryItem } from './ai-history'
+import message from '../common/message'
 
 const STORAGE_KEY_CONFIG = 'ai_config_history'
 const EVENT_NAME_CONFIG = 'ai-config-history-update'
@@ -36,6 +37,7 @@ const proxyOptions = [
 
 export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig }) {
   const [form] = Form.useForm()
+  const [testing, setTesting] = useState(false)
   const baseURLAI = Form.useWatch('baseURLAI', form)
 
   useEffect(() => {
@@ -53,6 +55,37 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     addHistoryItem(STORAGE_KEY_CONFIG, values, EVENT_NAME_CONFIG)
   }
 
+  const handleTest = async () => {
+    try {
+      const values = await form.validateFields()
+      setTesting(true)
+      const res = await window.pre.runGlobalAsync(
+        'AIchat',
+        'Hi',
+        values.modelAI,
+        values.roleAI,
+        values.baseURLAI,
+        values.apiPathAI,
+        values.apiKeyAI,
+        values.proxyAI,
+        false
+      )
+      if (res && res.error) {
+        message.error(res.error)
+      } else if (res && res.response) {
+        message.success('AI config works!')
+      } else {
+        message.error('Unexpected response from AI API')
+      }
+    } catch (e) {
+      if (e.message) {
+        message.error(e.message)
+      }
+    } finally {
+      setTesting(false)
+    }
+  }
+
   function handleSelectHistory (item) {
     if (item && typeof item === 'object') {
       form.setFieldsValue(item)
@@ -186,9 +219,17 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         </Form.Item>
 
         <Form.Item>
-          <Button type='primary' htmlType='submit'>
-            {e('save')}
-          </Button>
+          <Space>
+            <Button type='primary' htmlType='submit'>
+              {e('save')}
+            </Button>
+            <Button
+              loading={testing}
+              onClick={handleTest}
+            >
+              {e('testConnection')}
+            </Button>
+          </Space>
         </Form.Item>
       </Form>
       <AiHistory

package/client/components/ai/ai.styl

@@ -77,3 +77,76 @@
   align-items center
   .ai-stop-icon-square
     margin-left auto
+
+.agent-tool-calls
+  margin 8px 0
+
+.agent-tool-call-card
+  border 1px solid var(--main-darker)
+  border-radius 4px
+  margin-bottom 6px
+  font-size 13px
+
+.agent-tool-header
+  display flex
+  align-items center
+  padding 6px 8px
+  gap 6px
+
+.agent-tool-name
+  font-weight 500
+
+.agent-tool-tag
+  margin-left auto
+
+.agent-tool-status-running
+  color #1890ff
+  animation spin 1s linear infinite
+
+.agent-tool-status-completed
+  color #52c41a
+
+.agent-tool-status-error
+  color #ff4d4f
+
+.agent-tool-detail
+  padding 0 8px 8px
+  border-top 1px solid var(--main-darker)
+
+.agent-tool-args
+  margin-top 6px
+
+.agent-tool-result
+  margin-top 6px
+
+.agent-tool-label
+  font-weight 500
+  margin-bottom 4px
+  font-size 12px
+  color var(--text-color-2)
+
+.agent-tool-pre
+  background var(--main-dark)
+  padding 6px 8px
+  border-radius 3px
+  font-size 12px
+  max-height 200px
+  overflow-y auto
+  white-space pre-wrap
+  word-break break-all
+  margin-bottom 0
+
+.agent-tool-running
+  border-color #1890ff
+
+.agent-tool-completed
+  border-color #52c41a
+
+.agent-tool-error
+  border-color #ff4d4f
+
+@keyframes spin
+  from
+    transform rotate(0deg)
+  to
+    transform rotate(360deg)

package/client/components/main/main.jsx

@@ -4,7 +4,7 @@ import Layout from '../layout/layout'
 import FileInfoModal from '../sftp/file-info-modal'
 import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
-import TextEditor from '../text-editor/text-editor'
+import TextEditor from '../text-editor/text-editor-entry'
 import Sidebar from '../sidebar'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
@@ -19,7 +19,6 @@ import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
-import TerminalInfo from '../terminal-info/terminal-info'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
 import InfoModal from '../sidebar/info-modal.jsx'
@@ -27,7 +26,7 @@ import RightSidePanel from '../side-panel-r/side-panel-r'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
-import AIChat from '../ai/ai-chat'
+import AIChat from '../ai/ai-chat-entry'
 import AIConfigModal from '../ai/ai-config-modal'
 import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
@@ -40,6 +39,7 @@ import UnixTimestampTooltip from '../terminal/unix-timestamp-tooltip'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
+import TerminalInfo from '../terminal-info/terminal-info-entry'
 import './term-fullscreen.styl'
 
 export default auto(function Index (props) {

package/client/components/rdp/file-transfer.js

@@ -273,6 +273,9 @@ export class FileTransferManager {
       })
 
       this.log(`Downloaded ${fileInfo.name} (${filesize(fileInfo._totalSize)}) to ${fullPath}`, 'success')
+      this.hasRemoteFiles = false
+      this.pendingDownloads.clear()
+      this.notifyStateChange()
       if (this.onDownloadComplete) {
         this.onDownloadComplete(fullPath, fileInfo.name, fileInfo._totalSize)
       }

package/client/components/terminal/terminal-error-handle.jsx

@@ -33,7 +33,7 @@ export default memo(function TerminalErrorHandle ({
   return (
     <Alert
       className='terminal-error-handle'
-      message={errorMessage}
+      title={errorMessage}
       type='error'
       showIcon
       banner