@electerm/electerm-react 1.70.6 → 1.72.16

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

@@ -0,0 +1,303 @@
+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
+} from '@ant-design/icons'
+
+export default class TerminalCmdSuggestions extends Component {
+  state = {
+    cursorPosition: {},
+    showSuggestions: false,
+    loadingAiSuggestions: false,
+    aiSuggestions: [],
+    cmdIsDescription: false,
+    reverse: false,
+    cmd: ''
+  }
+
+  componentDidMount () {
+    refsStatic.add('terminal-suggestions', this)
+  }
+
+  componentWillUnmount () {
+    refsStatic.remove('terminal-suggestions')
+  }
+
+  parseAiSuggestions = (aiResponse) => {
+    try {
+      return JSON.parse(aiResponse.response).map(d => {
+        return {
+          command: d,
+          type: 'AI'
+        }
+      })
+    } catch (e) {
+      console.log('parseAiSuggestions error:', e)
+      return []
+    }
+  }
+
+  getAiSuggestions = async (event) => {
+    event.stopPropagation()
+    const { cmd } = this.state
+    if (window.store.aiConfigMissing()) {
+      window.store.toggleAIConfig()
+    }
+    this.setState({
+      loadingAiSuggestions: true
+    })
+    const {
+      config
+    } = window.store
+    const prompt = `give me max 5 command suggestions for user input: "${cmd}", return pure json format result only, no extra words, no markdown format, follow this format: ["command1","command2"...]`
+    const cached = aiSuggestionsCache.get(cmd)
+    if (cached) {
+      this.setState({
+        loadingAiSuggestions: false,
+        aiSuggestions: cached
+      })
+      return
+    }
+
+    const aiResponse = aiSuggestionsCache.get(prompt) || await window.pre.runGlobalAsync(
+      'AIchat',
+      prompt,
+      config.modelAI,
+      config.roleAI,
+      config.baseURLAI,
+      config.apiPathAI,
+      config.apiKeyAI
+    ).catch(
+      window.store.onError
+    )
+    if (cmd !== this.state.cmd) {
+      this.setState({
+        loadingAiSuggestions: false
+      })
+      return
+    }
+    if (aiResponse && aiResponse.error) {
+      this.setState({
+        loadingAiSuggestions: false
+      })
+      return window.store.onError(
+        new Error(aiResponse.error)
+      )
+    }
+    this.setState({
+      loadingAiSuggestions: false,
+      aiSuggestions: this.parseAiSuggestions(aiResponse, cmd)
+    })
+  }
+
+  openSuggestions = (cursorPosition, cmd) => {
+    if (!this.state.showSuggestions) {
+      document.addEventListener('click', this.handleClickOutside)
+      document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    const {
+      left,
+      top,
+      cellHeight
+    } = cursorPosition
+    const w = window.innerWidth
+    const h = window.innerHeight
+
+    const position = {}
+    const reverse = top > h / 2
+
+    // Use right position if close to right edge
+    if (left > w / 2) {
+      position.right = w - left
+    } else {
+      position.left = left
+    }
+
+    // Use bottom position if close to bottom edge
+    if (reverse) {
+      position.bottom = h - top + cellHeight
+    } else {
+      position.top = top
+    }
+    this.setState({
+      showSuggestions: true,
+      cursorPosition: position,
+      cmd,
+      reverse
+    })
+  }
+
+  closeSuggestions = () => {
+    document.removeEventListener('click', this.handleClickOutside)
+    document.removeEventListener('keydown', this.handleKeyDown)
+    const {
+      aiSuggestions
+    } = this.state
+    if (aiSuggestions.length) {
+      aiSuggestionsCache.set(this.state.cmd, aiSuggestions)
+      aiSuggestions.forEach(item => {
+        window.store.addCmdHistory(item.command, 'aiCmdHistory')
+      })
+    }
+    this.setState({
+      showSuggestions: false,
+      aiSuggestions: []
+    })
+  }
+
+  handleClickOutside = (event) => {
+    const suggestionElement = document.querySelector('.terminal-suggestions-wrap')
+    if (suggestionElement && !suggestionElement.contains(event.target)) {
+      this.closeSuggestions()
+    }
+  }
+
+  handleKeyDown = (event) => {
+    if (event.key === 'Escape') {
+      this.closeSuggestions()
+    }
+  }
+
+  handleDelete = (item) => {
+    window.store.terminalCommandHistory.delete(item.command)
+  }
+
+  handleSelect = (item) => {
+    const { activeTabId } = window.store
+    const terminal = refs.get('term-' + activeTabId)
+    if (!terminal) {
+      return
+    }
+
+    // const titleElement = domEvent.target.closest('.ant-menu-title-content')
+    // const command = titleElement?.firstChild?.textContent
+    const { command } = item
+    const { cmd } = this.state
+    let txt = ''
+    if (cmd && command.startsWith(cmd)) {
+      txt = command.slice(cmd.length)
+    } else {
+      const pre = '\b'.repeat(cmd.length)
+      txt = pre + command
+    }
+    terminal.attachAddon._sendData(txt)
+    terminal.term.focus()
+    this.closeSuggestions()
+  }
+
+  processCommands = (commands = [], type, uniqueCommands, res) => {
+    const { cmd } = this.state
+    commands
+      .filter(command => command && command.startsWith(cmd))
+      .forEach(command => {
+        if (!uniqueCommands.has(command)) {
+          uniqueCommands.add(command)
+          res.push({
+            id: uid(),
+            command,
+            type
+          })
+        }
+      })
+  }
+
+  getSuggestions = () => {
+    const uniqueCommands = new Set()
+    const {
+      history = [],
+      batch = [],
+      quick = []
+    } = this.props.suggestions
+    const res = []
+    this.state.aiSuggestions
+      .forEach(item => {
+        if (!uniqueCommands.has(item.command)) {
+          uniqueCommands.add(item.command)
+        }
+        res.push({
+          id: uid(),
+          ...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
+  }
+
+  renderAIIcon () {
+    const e = window.translate
+    const {
+      loadingAiSuggestions
+    } = this.state
+    if (loadingAiSuggestions) {
+      return (
+        <>
+          <LoadingOutlined /> {e('getAiSuggestions')}
+        </>
+      )
+    }
+    const aiProps = {
+      onClick: this.getAiSuggestions,
+      className: 'pointer'
+    }
+    return (
+      <div {...aiProps}>
+        {e('getAiSuggestions')}
+      </div>
+    )
+  }
+
+  renderSticky (pos) {
+    const {
+      reverse
+    } = this.state
+    if (
+      (pos === 'top' && !reverse) ||
+      (pos === 'bottom' && reverse)
+    ) {
+      return null
+    }
+    return (
+      <div className='terminal-suggestions-sticky'>
+        {this.renderAIIcon()}
+      </div>
+    )
+  }
+
+  render () {
+    const { showSuggestions, cursorPosition, reverse } = this.state
+    if (!showSuggestions) {
+      return null
+    }
+    const suggestions = this.getSuggestions()
+    const cls = classnames('terminal-suggestions-wrap', {
+      reverse
+    })
+    return (
+      <div className={cls} style={cursorPosition}>
+        {this.renderSticky('top')}
+        <div className='terminal-suggestions-list'>
+          {
+            suggestions.map(item => {
+              return (
+                <SuggestionItem
+                  key={item.id}
+                  item={item}
+                  onSelect={this.handleSelect}
+                  onDelete={this.handleDelete}
+                />
+              )
+            })
+          }
+        </div>
+        {this.renderSticky('bottom')}
+      </div>
+    )
+  }
+}

package/client/components/terminal/terminal.jsx

@@ -50,7 +50,7 @@ import AIIcon from '../icons/ai-icon.jsx'
 import { formatBytes } from '../../common/byte-format.js'
 import * as fs from './fs.js'
 import iconsMap from '../sys-menu/icons-map.jsx'
-import { refs } from '../common/ref.js'
+import { refs, refsStatic } from '../common/ref.js'
 import createDefaultLogPath from '../../common/default-log-path.js'
 
 const e = window.translate
@@ -75,10 +75,7 @@ class Term extends Component {
   componentDidMount () {
     this.initTerminal()
     if (this.props.tab.enableSsh === false) {
-      ;(
-        document.querySelector('.session-current .term-sftp-tabs .type-tab.sftp') ||
-        document.querySelector('.session-current .term-sftp-tabs .type-tab.fileManager')
-      ).click()
+      this.props.tab.pane = paneMap.fileManager
     }
   }
 
@@ -255,7 +252,7 @@ clear\r`
 
   isActiveTerminal = () => {
     return this.props.tab.id === this.props.activeTabId &&
-    this.props.pane === paneMap.terminal
+    this.props.tab.pane === paneMap.terminal
   }
 
   clearShortcut = (e) => {
@@ -560,7 +557,7 @@ clear\r`
     }
     const r = []
     for (const filePath of files) {
-      const stat = await getLocalFileInfo(filePath)
+      const stat = await getLocalFileInfo(filePath).catch(console.log)
       r.push({ ...stat, filePath })
     }
     return r
@@ -822,14 +819,58 @@ clear\r`
     this.props.setCwd(cwd, this.state.id)
   }
 
+  getCursorPosition = () => {
+    if (!this.term) return null
+
+    // Get the active buffer and cursor position
+    const buffer = this.term.buffer.active
+    const cursorRow = buffer.cursorY
+    const cursorCol = buffer.cursorX
+
+    // Get dimensions from term element
+    const termElement = this.term.element
+    if (!termElement) return null
+
+    // Get the exact position of the terminal element
+    const termRect = termElement.getBoundingClientRect()
+
+    // Calculate cell dimensions
+    const cellWidth = termRect.width / this.term.cols
+    const cellHeight = termRect.height / this.term.rows
+
+    // Calculate absolute position relative to terminal element
+    const left = Math.floor(termRect.left + (cursorCol * cellWidth))
+    const top = Math.floor(termRect.top + ((cursorRow + 1) * cellHeight))
+
+    return {
+      cellWidth,
+      cellHeight,
+      left,
+      top
+    }
+  }
+
+  closeSuggestions = () => {
+    refsStatic
+      .get('terminal-suggestions')
+      ?.closeSuggestions()
+  }
+
   onData = (d) => {
     if (this.cmdAddon) {
       this.cmdAddon.handleData(d)
     }
+    const data = this.getCmd().trim()
     if (!d.includes('\r')) {
       delete this.userTypeExit
+      const cursorPos = this.getCursorPosition()
+      if (this.props.config.showCmdSuggestions && data.length > 1) {
+        refsStatic
+          .get('terminal-suggestions')
+          ?.openSuggestions(cursorPos, data)
+      }
     } else {
-      const data = this.getCmd().trim()
+      this.closeSuggestions()
       if (this.term.buffer.active.type !== 'alternate') {
         this.timers.getCwd = setTimeout(this.getCwd, 200)
       }
@@ -837,6 +878,7 @@ clear\r`
         'exit',
         'logout'
       ]
+      window.store.addCmdHistory(data)
       if (exitCmds.includes(data)) {
         this.userTypeExit = true
         this.timers.userTypeExit = setTimeout(() => {
@@ -1083,6 +1125,7 @@ clear\r`
     socket.onclose = this.oncloseSocket
     socket.onerror = this.onerrorSocket
     this.socket = socket
+    this.initSocketEvents()
     this.term = term
     socket.onopen = () => {
       this.initAttachAddon()
@@ -1106,6 +1149,43 @@ clear\r`
     )
   }
 
+  initSocketEvents = () => {
+    const originalSend = this.socket.send
+    this.socket.send = (data) => {
+      // Call original send first
+      originalSend.call(this.socket, data)
+
+      // Broadcast to other terminals
+      this.broadcastSocketData(data)
+    }
+  }
+
+  canReceiveBroadcast = (termRef) => {
+    const tabId = termRef.props?.tab?.id
+    const isActiveInBatch = termRef.props.currentBatchTabId === tabId
+    return (
+      isActiveInBatch &&
+      termRef.socket &&
+      termRef.props?.tab.pane === paneMap.terminal
+    )
+  }
+
+  broadcastSocketData = (data) => {
+    if (!this.isActiveTerminal() || !this.props.broadcastInput) {
+      return
+    }
+
+    window.refs.forEach((termRef, refId) => {
+      if (
+        refId !== this.id &&
+        refId.startsWith('term-') &&
+        this.canReceiveBroadcast(termRef)
+      ) {
+        termRef.socket.send(data)
+      }
+    })
+  }
+
   onResize = throttle(() => {
     const cid = this.props.currentBatchTabId
     const tid = this.props.tab?.id

package/client/components/terminal/terminal.styl

@@ -77,3 +77,61 @@
   background main-light
 .batch-input-wrap
   width calc(100% - 80px)
+
+.terminal-suggestions-wrap
+  position absolute
+  z-index 100
+  color text
+  max-height 300px
+  max-width 300px
+  min-width 200px
+  box-shadow 0px 0px 3px 3px main-light
+  display flex
+  flex-direction column
+  background main
+  border-radius 4px
+  &.reverse .terminal-suggestions-list
+    border-top 1px solid main-light
+    border-bottom none
+
+.terminal-suggestions-list
+  flex 1
+  overflow-x hidden
+  overflow-y auto
+  max-height 268px
+  max-width 300px
+  border-bottom 1px solid main-light
+
+.terminal-suggestions-sticky
+  flex-shrink 0
+  height 32px
+  padding 0 10px
+  line-height 32px
+
+.suggestion-item
+  display flex
+  align-items center
+  padding 5px 10px
+  cursor pointer
+  color text
+  &:hover
+    background-color main-light
+    .suggestion-delete
+      visibility visible
+
+.suggestion-command
+  flex-grow 1
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
+
+.suggestion-type
+  margin-left 5px
+  font-size 0.8em
+  opacity .8
+  &:hover
+    opacity 1
+
+.suggestion-delete
+  margin-left 5px
+  visibility hidden

package/client/components/terminal-info/terminal-info.jsx

@@ -43,7 +43,7 @@ export default class TerminalInfoContent extends PureComponent {
       return null
     }
     return (
-      <div>
+      <>
         <TerminalInfoBase {...props} {...state} />
         <TerminalInfoUp {...props} {...state} />
         <TerminalInfoResource
@@ -57,7 +57,7 @@ export default class TerminalInfoContent extends PureComponent {
         <TerminalInfoNetwork {...props} {...state} />
         <TerminalInfoDisk {...props} {...state} />
         <RunCmd {...props} setState={this.setStateRef} />
-      </div>
+      </>
     )
   }
 }

package/client/components/tree-list/tree-list.jsx

@@ -2,7 +2,7 @@
  * tree list for bookmarks
  */
 
-import { Component } from '../common/component'
+import { Component } from 'manate/react/class-components'
 import {
   CheckOutlined,
   CloseOutlined,

package/client/components/web/address-bar.jsx

@@ -17,10 +17,10 @@ export default function AddressBar (props) {
     description
   } = props
   const content = (
-    <div>
+    <>
       <h1>{title}</h1>
       <p>{description}</p>
-    </div>
+    </>
   )
   function handleClick () {
     copy(url)

package/client/store/common.js

@@ -10,12 +10,16 @@ import {
   leftSidebarWidthKey,
   rightSidebarWidthKey,
   dismissDelKeyTipLsKey,
-  connectionMap
+  connectionMap,
+  settingMap,
+  settingAiId
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 import { refs, refsStatic } from '../components/common/ref'
 import { action } from 'manate'
 import deepCopy from 'json-deep-copy'
+import { aiConfigsArr } from '../components/ai/ai-config-props'
+import settingList from '../common/setting-list'
 
 const e = window.translate
 const { assign } = Object
@@ -49,7 +53,12 @@ export default Store => {
   }
 
   Store.prototype.toggleAIConfig = function () {
-    window.store.showAIConfig = !window.store.showAIConfig
+    const { store } = window
+    store.storeAssign({
+      settingTab: settingMap.setting
+    })
+    store.setSettingItem(settingList().find(d => d.id === settingAiId))
+    store.openSettingModal()
   }
 
   Store.prototype.onResize = debounce(async function () {
@@ -303,4 +312,20 @@ export default Store => {
       profiles.splice(i, 1, np)
     }
   }
+
+  Store.prototype.aiConfigMissing = function () {
+    return aiConfigsArr.some(k => !window.store.config[k])
+  }
+
+  Store.prototype.addCmdHistory = action(function (cmd) {
+    const { terminalCommandHistory } = window.store
+    terminalCommandHistory.add(cmd)
+    if (terminalCommandHistory.size > 100) {
+      // Delete oldest 20 items when history exceeds 100
+      const values = Array.from(terminalCommandHistory.values())
+      for (let i = 0; i < 20 && i < values.length; i++) {
+        terminalCommandHistory.delete(values[i])
+      }
+    }
+  })
 }

package/client/store/init-state.js

@@ -21,7 +21,8 @@ import {
   resolutionsLsKey,
   aiChatHistoryKey,
   syncServerDataKey,
-  splitMap
+  splitMap,
+  cmdHistoryKey
 } from '../common/constants'
 import { buildDefaultThemes } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
@@ -72,6 +73,7 @@ export default () => {
     addressBookmarksLocal: ls.getItemJSON(localAddrBookmarkLsKey, []),
     openResolutionEdit: false,
     resolutions: ls.getItemJSON(resolutionsLsKey, []),
+    terminalCommandHistory: new Set(ls.getItemJSON(cmdHistoryKey, [])),
 
     // init session control
     selectedSessions: [],
@@ -79,7 +81,6 @@ export default () => {
 
     // batch input selected tab ids
     _batchInputSelectedTabIds: new Set(),
-    showAIConfig: false,
     aiChatHistory: ls.getItemJSON(aiChatHistoryKey, []),
 
     // sftp
@@ -114,7 +115,6 @@ export default () => {
     rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
 
     // for settings related
-    _setting: '',
     settingItem: initSettingItem([], settingMap.bookmarks),
     settingTab: settingMap.bookmarks, // setting tab
     bookmarkId: undefined,

package/client/store/item.js

@@ -6,6 +6,7 @@ import deepCopy from 'json-deep-copy'
 import {
   settingMap
 } from '../common/constants'
+import settingList from '../common/setting-list'
 import getInitItem from '../common/init-setting-item'
 
 export default Store => {
@@ -72,7 +73,7 @@ export default Store => {
 
   Store.prototype.getItems = function (type) {
     if (type === 'setting') {
-      return window.store.setting
+      return settingList()
     }
     return window.store[type]
   }

package/client/store/setting.js

@@ -15,6 +15,7 @@ import {
 import { buildNewTheme } from '../common/terminal-theme'
 import getInitItem from '../common/init-setting-item'
 import newTerm from '../common/new-terminal'
+import settingList from '../common/setting-list'
 
 const e = window.translate
 
@@ -101,7 +102,7 @@ export default Store => {
     const { store } = window
     if (
       store.settingTab === settingMap.setting &&
-      store.settingItem.id === store.setting[0].id &&
+      store.settingItem.id === settingList()[0].id &&
       store.showModal === modals.setting
     ) {
       return store.hideSettingModal()
@@ -109,7 +110,7 @@ export default Store => {
     store.storeAssign({
       settingTab: settingMap.setting
     })
-    store.setSettingItem(copy(store.setting.find(d => d.id === settingSyncId)))
+    store.setSettingItem(settingList().find(d => d.id === settingSyncId))
     store.openSettingModal()
   }