@electerm/electerm-react 3.15.126 → 3.15.128

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

@@ -143,11 +143,14 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     return { label, title }
   }
 
-  function renderApiUrlLabel () {
+  function renderApiKeyLabel () {
     if (baseURLAI === 'https://api.atlascloud.ai/v1') {
-      return <span>API URL (<Link to='https://atlascloud.ai'>AtlasCloud</Link>)</span>
+      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>
     }
-    return 'API URL'
+    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>
+    }
+    return 'API Key'
   }
 
   if (!showAIConfig) {
@@ -184,7 +187,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
             placeholder='e.g. DeepSeek Relay, Local Ollama (optional)'
           />
         </Form.Item>
-        <Form.Item label={renderApiUrlLabel()} required>
+        <Form.Item label='API URL' required>
           <Space.Compact className='width-100'>
             <Form.Item
               label='API URL'
@@ -226,7 +229,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         </Form.Item>
 
         <Form.Item
-          label='API Key'
+          label={renderApiKeyLabel()}
           name='apiKeyAI'
         >
           <Password placeholder='Enter your API key' />

package/client/components/shortcuts/shortcuts-defaults.js

@@ -92,7 +92,7 @@ export default () => {
     },
     {
       name: 'terminal_paste',
-      shortcut: 'ctrl+v,ctrl+shift+v',
+      shortcut: 'ctrl+shift+v',
       shortcutMac: 'meta+v',
       readonly: true
     },

package/client/components/terminal/attach-addon-custom.js

@@ -224,7 +224,12 @@ export default class AttachAddonCustom {
 
     if (typeof data === 'string') {
       term?.parent?.notifyOnData()
-      return term.write(data)
+      term.write(data)
+      // Notify parent that the terminal buffer has been updated (echo received).
+      // This allows the suggestion dropdown to refresh after the buffer reflects
+      // the latest server-side state (e.g., after backspace echo).
+      term?.parent?.onTerminalWrite?.()
+      return
     }
     data = new Uint8Array(data)
     const fileReader = new FileReader()
@@ -238,6 +243,7 @@ export default class AttachAddonCustom {
     term?.parent?.notifyOnData()
     const str = this.decoder.decode(data)
     term?.write(str)
+    term?.parent?.onTerminalWrite?.()
   }
 
   sendToServer = (data) => {

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -2,7 +2,6 @@ import { Component } from 'manate/react/class-components'
 import { refsStatic, refs } from '../common/ref'
 import SuggestionItem from './cmd-item'
 import { aiSuggestionsCache } from '../../common/cache'
-import uid from '../../common/uid'
 import classnames from 'classnames'
 import {
   LoadingOutlined
@@ -130,6 +129,7 @@ export default class TerminalCmdSuggestions extends Component {
     } else {
       position.top = top + cellHeight
     }
+    this._suggestionsCache = null
     this.setState({
       showSuggestions: true,
       cursorPosition: position,
@@ -188,6 +188,7 @@ export default class TerminalCmdSuggestions extends Component {
         window.store.addCmdHistory(item.command, 'aiCmdHistory')
       })
     }
+    this._suggestionsCache = null
     this.setState({
       showSuggestions: false,
       aiSuggestions: [],
@@ -261,7 +262,8 @@ export default class TerminalCmdSuggestions extends Component {
         if (!uniqueCommands.has(command)) {
           uniqueCommands.add(command)
           res.push({
-            id: uid(),
+            // Use stable key to avoid React re-mounting items on every render
+            id: type + ':' + command,
             command,
             type
           })
@@ -277,7 +279,7 @@ export default class TerminalCmdSuggestions extends Component {
       if (b.password && !seen.has(b.password)) {
         seen.add(b.password)
         res.push({
-          id: uid(),
+          id: 'PW:' + b.password,
           command: b.password,
           type: 'PW',
           hint: [b.username, [b.host, b.port].filter(Boolean).join(':')].filter(Boolean).join('@')
@@ -287,28 +289,41 @@ export default class TerminalCmdSuggestions extends Component {
     return this.state.reverse ? res.reverse() : res
   }
 
+  _suggestionsCache = null
+  _suggestionsCacheKey = ''
+
   getSuggestions = () => {
+    // Memoize: only recompute when cmd, reverse, aiSuggestions, or props change
+    const { cmd, reverse, aiSuggestions } = this.state
+    const { suggestions } = this.props
+    const cacheKey = cmd + '|' + reverse + '|' + (aiSuggestions?.length || 0) + '|' + (suggestions?.history?.length || 0) + '|' + (suggestions?.batch?.length || 0) + '|' + (suggestions?.quick?.length || 0)
+    if (this._suggestionsCache && this._suggestionsCacheKey === cacheKey) {
+      return this._suggestionsCache
+    }
     const uniqueCommands = new Set()
     const {
       history = [],
       batch = [],
       quick = []
-    } = this.props.suggestions || {}
+    } = suggestions || {}
     const res = []
-    this.state.aiSuggestions
+    aiSuggestions
       .forEach(item => {
         if (!uniqueCommands.has(item.command)) {
           uniqueCommands.add(item.command)
         }
         res.push({
-          id: uid(),
+          id: 'AI:' + item.command,
           ...item
         })
       })
     this.processCommands(history, 'H', uniqueCommands, res)
     this.processCommands(batch, 'B', uniqueCommands, res)
     this.processCommands(quick, 'Q', uniqueCommands, res)
-    return this.state.reverse ? res.reverse() : res
+    const finalRes = reverse ? res.reverse() : res
+    this._suggestionsCache = finalRes
+    this._suggestionsCacheKey = cacheKey
+    return finalRes
   }
 
   renderAIIcon () {

package/client/components/terminal/terminal.jsx

@@ -1081,18 +1081,45 @@ class Term extends Component {
       return
     }
     if (this.props.config.showCmdSuggestions) {
-      const data = this.getCurrentInput()
-      if (data && d !== '\r' && d !== '\n') {
-        const cursorPos = this.getCursorPosition()
-        this.openSuggestions(cursorPos, data)
-      } else {
+      if (d === '\r' || d === '\n') {
         this.closeSuggestions()
+        return
       }
+      // Debounce the suggestion opening to avoid expensive work
+      // (buffer read + getBoundingClientRect + React re-render) on every keystroke
+      this._debouncedOpenSuggestions()
     } else {
       this.closeSuggestions()
     }
   }
 
+  _debouncedOpenSuggestions = debounce(function () {
+    const data = this.getCurrentInput()
+    if (!data) {
+      this.closeSuggestions()
+      return
+    }
+    const cursorPos = this.getCursorPosition()
+    this.openSuggestions(cursorPos, data)
+  }, 80)
+
+  /**
+   * Called by AttachAddonCustom after data is written to the terminal buffer.
+   * This fires after server echo arrives, so getCurrentInput() reflects the
+   * latest state. We trigger a debounced suggestion refresh so the dropdown
+   * updates correctly after backspace, delete, and other edits that rely on
+   * server-side echo to update the buffer.
+   */
+  onTerminalWrite = () => {
+    if (!this.props.config.showCmdSuggestions) {
+      return
+    }
+    const suggestions = refsStatic.get('terminal-suggestions')
+    if (suggestions?.state?.showSuggestions && !suggestions?.state?.passwordMode) {
+      this._debouncedOpenSuggestions()
+    }
+  }
+
   loadRenderer = async (term, config) => {
     // xterm 6.x: only the built-in DOM renderer and the WebGL addon exist
     // (the canvas renderer addon was removed in 6.x). 'dom' = no addon loaded

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.15.126",
+  "version": "3.15.128",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",