@electerm/electerm-react 1.70.2 → 1.72.6

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
@@ -255,7 +255,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) => {
@@ -822,14 +822,56 @@ 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()
+      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 +879,7 @@ clear\r`
         'exit',
         'logout'
       ]
+      window.store.addCmdHistory(data)
       if (exitCmds.includes(data)) {
         this.userTypeExit = true
         this.timers.userTypeExit = setTimeout(() => {
@@ -1083,6 +1126,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 +1150,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()
   }
 

package/client/store/store.js

@@ -31,9 +31,6 @@ import deepCopy from 'json-deep-copy'
 import getBrand from '../components/ai/get-brand'
 import {
   settingMap,
-  settingSyncId,
-  settingShortcutsId,
-  settingTerminalId,
   terminalSshConfigType,
   paneMap
 } from '../common/constants'
@@ -44,8 +41,6 @@ import {
 } from 'antd'
 import { refs } from '../components/common/ref'
 
-const e = window.translate
-
 class Store {
   constructor () {
     Object.assign(
@@ -123,8 +118,7 @@ class Store {
       return false
     }
     return currentTab.sshSftpSplitView ||
-      currentTab.pane === paneMap.terminal ||
-      currentTab.pane === paneMap.ssh
+      currentTab.pane === paneMap.terminal
   }
 
   get quickCommandTags () {
@@ -161,6 +155,28 @@ class Store {
         ]
   }
 
+  get terminalCommandSuggestions () {
+    const { store } = window
+    const historyCommands = Array.from(store.terminalCommandHistory)
+    const batchInputCommands = store.batchInputs
+    const quickCommands = store.quickCommands.reduce(
+      (p, q) => {
+        return [
+          ...p,
+          ...(q.commands || []).map(c => c.command)
+        ]
+      },
+      []
+    )
+
+    // Return raw commands
+    return {
+      history: historyCommands,
+      batch: batchInputCommands,
+      quick: quickCommands
+    }
+  }
+
   get termSearchOptions () {
     const {
       store
@@ -183,23 +199,6 @@ class Store {
     return window.store.tabs.map(d => d.title).join('#')
   }
 
-  get setting () {
-    return [
-      {
-        id: settingTerminalId,
-        title: e('terminal')
-      },
-      {
-        id: settingShortcutsId,
-        title: e('settingShortcuts')
-      },
-      {
-        id: settingSyncId,
-        title: e('settingSync')
-      }
-    ]
-  }
-
   get onOperation () {
     const {
       store

package/client/store/watch.js

@@ -12,7 +12,8 @@ import {
   resolutionsLsKey,
   localAddrBookmarkLsKey,
   syncServerDataKey,
-  aiChatHistoryKey
+  aiChatHistoryKey,
+  cmdHistoryKey
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 import { debounce, isEmpty } from 'lodash-es'
@@ -138,6 +139,11 @@ export default store => {
     return store.aiChatHistory
   }).start()
 
+  autoRun(() => {
+    ls.setItemJSON(cmdHistoryKey, Array.from(store.terminalCommandHistory))
+    return store.terminalCommandHistory
+  }).start()
+
   autoRun(() => {
     store.updateBatchInputSelectedTabIds()
     const tabs = store.getTabs()

package/package.json

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