@electerm/electerm-react 1.60.18 → 1.60.29

package/client/components/terminal/{index.jsx → terminal.jsx}

@@ -1,9 +1,8 @@
-import { Component } from 'react'
-import { handleErr } from '../../common/fetch'
-import generate from '../../common/uid'
+import { Component, createRef } from 'react'
+import { handleErr } from '../../common/fetch.jsx'
+import generate from '../../common/uid.js'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
-import postMessage from '../../common/post-msg'
-import clone from '../../common/to-simple-obj'
+import clone from '../../common/to-simple-obj.js'
 // import runIdle from '../../common/run-idle'
 import {
   ReloadOutlined
@@ -11,7 +10,8 @@ import {
 import {
   notification,
   Spin,
-  Button
+  Button,
+  Dropdown
 } from 'antd'
 import classnames from 'classnames'
 import './terminal.styl'
@@ -21,50 +21,45 @@ import {
   typeMap,
   isWin,
   transferTypeMap,
-  terminalActions,
-  commonActions,
   rendererTypes,
   cwdId,
   isMac,
   zmodemTransferPackSize
-} from '../../common/constants'
+} from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
-import { readClipboardAsync, copy } from '../../common/clipboard'
+import { readClipboardAsync, copy } from '../../common/clipboard.js'
 import { FitAddon } from '@xterm/addon-fit'
-import AttachAddon from './attach-addon-custom'
+import AttachAddon from './attach-addon-custom.js'
 import { SearchAddon } from '@xterm/addon-search'
 import { WebLinksAddon } from '@xterm/addon-web-links'
 import { CanvasAddon } from '@xterm/addon-canvas'
 import { WebglAddon } from '@xterm/addon-webgl'
 import { LigaturesAddon } from '@xterm/addon-ligatures'
-import getProxy from '../../common/get-proxy'
-import { AddonZmodem } from './xterm-zmodem'
+import getProxy from '../../common/get-proxy.js'
+import { AddonZmodem } from './xterm-zmodem.js'
 import { Unicode11Addon } from '@xterm/addon-unicode11'
-import keyControlPressed from '../../common/key-control-pressed'
+import keyControlPressed from '../../common/key-control-pressed.js'
 import { Terminal } from '@xterm/xterm'
-import NormalBuffer from './normal-buffer'
-import { createTerm, resizeTerm } from './terminal-apis'
+import NormalBuffer from './normal-buffer.jsx'
+import { createTerm, resizeTerm } from './terminal-apis.js'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
+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'
 
 const e = window.translate
 
-const computePos = (e) => {
-  return {
-    left: e.clientX,
-    top: e.clientY
-  }
-}
-
 class Term extends Component {
   constructor (props) {
     super(props)
     this.state = {
       loading: false,
+      hasSelection: false,
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
       passType: 'password',
@@ -72,9 +67,12 @@ class Term extends Component {
     }
   }
 
+  domRef = createRef()
+
   componentDidMount () {
+    this.id = `term-${this.props.tab.id}`
+    refs.add(this.id, this)
     this.initTerminal()
-    this.initEvt()
     if (this.props.tab.enableSsh === false) {
       ;(
         document.querySelector('.session-current .term-sftp-tabs .type-tab.sftp') ||
@@ -155,6 +153,7 @@ clear\r`
   }
 
   componentWillUnmount () {
+    refs.remove(this.id)
     if (this.zsession) {
       this.onZmodemEnd()
     }
@@ -177,10 +176,6 @@ clear\r`
       'resize',
       this.onResize
     )
-    window.removeEventListener('message', this.handleEvent)
-    this.dom.removeEventListener('contextmenu', this.onContextMenu)
-    window.removeEventListener('message', this.onContextAction)
-    this.dom = null
     this.attachAddon = null
     this.fitAddon = null
     this.zmodemAddon = null
@@ -249,17 +244,6 @@ clear\r`
     return `term-${this.props.tab.id}`
   }
 
-  initEvt = () => {
-    const dom = document.getElementById(this.getDomId())
-    this.dom = dom
-    dom.addEventListener('contextmenu', this.onContextMenu)
-    window.addEventListener(
-      'resize',
-      this.onResize
-    )
-    window.addEventListener('message', this.handleEvent)
-  }
-
   zoom = (v) => {
     const { term } = this
     if (!term) {
@@ -321,120 +305,12 @@ clear\r`
     this.openNormalBuffer()
   }
 
-  handleEvent = (e) => {
-    const {
-      keyword,
-      options,
-      action,
-      encode,
-      saveTerminalLogToFile,
-      addTimeStampToTermLog,
-      type,
-      cmd,
-      selectedTabIds = [],
-      activeTabId,
-      pid,
-      inputOnly,
-      zoomValue
-    } = e?.data || {}
-
-    const { id: activeTabIdProp } = this.props.tab
-    const tabIdMatch = selectedTabIds.includes(activeTabIdProp) || activeTabId === activeTabIdProp
-    if (
-      action === terminalActions.zoom &&
-      tabIdMatch
-    ) {
-      this.zoom(zoomValue)
-    } else if (
-      action === terminalActions.changeEncode &&
-      tabIdMatch
-    ) {
-      this.switchEncoding(encode)
-    } else if (
-      action === terminalActions.batchInput && tabIdMatch
-    ) {
-      this.batchInput(cmd)
-    } else if (
-      action === terminalActions.showInfoPanel &&
-      tabIdMatch
-    ) {
-      this.handleShowInfo()
-    } else if (
-      action === terminalActions.quickCommand &&
-      (
-        tabIdMatch
-      )
-    ) {
-      e.stopPropagation()
-      this.term && this.attachAddon._sendData(
-        cmd +
-        (inputOnly ? '' : '\r')
-      )
-      this.term.focus()
-    } else if (
-      action === terminalActions.openTerminalSearch &&
-      (
-        tabIdMatch
-      )
-    ) {
-      this.toggleSearch()
-    } else if (
-      action === terminalActions.doSearchNext &&
-      (
-        tabIdMatch
-      )
-    ) {
-      this.searchNext(keyword, options)
-    } else if (
-      action === terminalActions.doSearchPrev &&
-      (
-        tabIdMatch
-      )
-    ) {
-      this.searchPrev(keyword, options)
-    } else if (
-      action === terminalActions.clearSearch &&
-      (
-        tabIdMatch
-      )
-    ) {
-      this.searchAddon.clearDecorations()
-    } else if (
-      action === commonActions.getTermLogState &&
-      pid === activeTabIdProp
-    ) {
-      postMessage({
-        action: commonActions.returnTermLogState,
-        state: {
-          saveTerminalLogToFile: this.state.saveTerminalLogToFile,
-          addTimeStampToTermLog: this.state.addTimeStampToTermLog
-        },
-        pid: activeTabIdProp
-      })
-    } else if (
-      action === commonActions.setTermLogState &&
-      pid === activeTabIdProp
-    ) {
-      this.setState({
-        addTimeStampToTermLog,
-        saveTerminalLogToFile
-      })
-    }
-    const isActiveTerminal = this.isActiveTerminal()
-    if (
-      type === 'focus' &&
-      isActiveTerminal
-    ) {
-      e.stopPropagation()
-      return this.term && this.term.focus()
-    }
-    if (
-      type === 'blur' &&
-      isActiveTerminal
-    ) {
-      e.stopPropagation()
-      return this.term && this.term.blur()
-    }
+  runQuickCommand = (cmd, inputOnly = false) => {
+    this.term && this.attachAddon._sendData(
+      cmd +
+      (inputOnly ? '' : '\r')
+    )
+    this.term.focus()
   }
 
   onDrop = e => {
@@ -760,29 +636,7 @@ clear\r`
     }
   }
 
-  onContextAction = e => {
-    const {
-      action,
-      id,
-      args = [],
-      func
-    } = e.data || {}
-    if (action === commonActions.closeContextMenuAfter) {
-      window.removeEventListener('message', this.onContextAction)
-      return false
-    }
-    if (
-      action !== commonActions.clickContextMenu ||
-      id !== this.uid ||
-      !this[func]
-    ) {
-      return false
-    }
-    window.removeEventListener('message', this.onContextAction)
-    this[func](...args)
-  }
-
-  onContextMenu = e => {
+  onContextMenuInner = e => {
     e.preventDefault()
     if (this.state.loading) {
       return
@@ -790,14 +644,6 @@ clear\r`
     if (this.props.config.pasteWhenContextMenu) {
       return this.onPaste()
     }
-    const items = this.renderContext()
-    this.uid = generate()
-    window.store.openContextMenu({
-      id: this.uid,
-      items,
-      pos: computePos(e)
-    })
-    window.addEventListener('message', this.onContextAction)
   }
 
   onCopy = () => {
@@ -858,61 +704,68 @@ clear\r`
     )
   }
 
-  renderContext = () => {
-    const hasSlected = this.term.hasSelection()
+  explainWithAi = () => {
+    window.store.explainWithAi(
+      this.term.getSelection()
+    )
+  }
+
+  renderContextMenu = () => {
+    const { hasSelection } = this.state
     const copyed = true
     const copyShortcut = this.getShortcut('terminal_copy')
     const pasteShortcut = this.getShortcut('terminal_paste')
     const clearShortcut = this.getShortcut('terminal_clear')
-    // const selectAllShortcut = this.getShortcut('terminal_selectAll')
     const searchShortcut = this.getShortcut('terminal_search')
+
     return [
       {
-        func: 'onCopy',
-        icon: 'CopyOutlined',
-        text: e('copy'),
-        disabled: !hasSlected,
-        subText: copyShortcut
+        key: 'onCopy',
+        icon: <iconsMap.CopyOutlined />,
+        label: e('copy'),
+        disabled: !hasSelection,
+        extra: copyShortcut
       },
       {
-        func: 'onPaste',
-        icon: 'SwitcherOutlined',
-        text: e('paste'),
+        key: 'onPaste',
+        icon: <iconsMap.SwitcherOutlined />,
+        label: e('paste'),
         disabled: !copyed,
-        subText: pasteShortcut
+        extra: pasteShortcut
       },
       {
-        func: 'onPasteSelected',
-        icon: 'SwitcherOutlined',
-        text: e('pasteSelected'),
-        disabled: !hasSlected
+        key: 'onPasteSelected',
+        icon: <iconsMap.SwitcherOutlined />,
+        label: e('pasteSelected'),
+        disabled: !hasSelection
       },
       {
-        func: 'onClear',
-        icon: 'ReloadOutlined',
-        text: e('clear'),
-        subText: clearShortcut
+        key: 'explainWithAi',
+        icon: <AIIcon />,
+        label: e('explainWithAi'),
+        disabled: !hasSelection
       },
-      // {
-      //   func: 'onSelectAll',
-      //   icon: 'SelectOutlined',
-      //   text: e('selectAll'),
-      //   subText: selectAllShortcut
-      // },
       {
-        func: 'toggleSearch',
-        icon: 'SearchOutlined',
-        text: e('search'),
-        subText: searchShortcut
+        key: 'onClear',
+        icon: <iconsMap.ReloadOutlined />,
+        label: e('clear'),
+        extra: clearShortcut
+      },
+      {
+        key: 'toggleSearch',
+        icon: <iconsMap.SearchOutlined />,
+        label: e('search'),
+        extra: searchShortcut
       }
     ]
   }
 
+  onContextMenu = ({ key }) => {
+    this[key]()
+  }
+
   notifyOnData = debounce(() => {
-    postMessage({
-      action: 'terminal-receive-data',
-      tabId: this.props.tab.id
-    })
+    window.store.notifyTabOnData(this.props.tab.id)
   }, 1000)
 
   parse (rawText) {
@@ -1015,9 +868,9 @@ clear\r`
     // term.onTitleChange(this.onTitleChange)
     term.parent = this
     term.onSelectionChange(this.onSelection)
-    term.open(document.getElementById(this.getDomId()), true)
+    term.open(this.domRef.current, true)
     this.loadRenderer(term, config)
-    term.textarea.addEventListener('click', this.setActive)
+    // term.textarea.addEventListener('click', this.setActive)
     // term.onKey(this.onKey)
     // term.textarea.addEventListener('blur', this.onBlur)
 
@@ -1037,19 +890,26 @@ clear\r`
     term.loadAddon(this.cmdAddon)
     term.onData(this.onData)
     this.term = term
+    term.onSelectionChange(this.onSelectionChange)
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
     await this.remoteInit(term)
   }
 
-  setActive = () => {
-    const name = `activeTabId${this.props.batch}`
-    const tabId = this.props.tab.id
-    window.store.storeAssign({
-      activeTabId: tabId,
-      [name]: tabId
+  onSelectionChange = () => {
+    this.setState({
+      hasSelection: this.term.hasSelection()
     })
   }
 
+  // setActive = () => {
+  //   const name = `activeTabId${this.props.batch}`
+  //   const tabId = this.props.tab.id
+  //   window.store.storeAssign({
+  //     activeTabId: tabId,
+  //     [name]: tabId
+  //   })
+  // }
+
   runInitScript = () => {
     window.store.triggerResize()
     const {
@@ -1122,8 +982,7 @@ clear\r`
         this.props.sessionId
       )
     }
-    const wsUrl = `ws://${host}:${port}/terminals/${id}?sessionId=${this.props.sessionId}&token=${tokenElecterm}`
-    return wsUrl
+    return `ws://${host}:${port}/terminals/${id}?sessionId=${this.props.sessionId}&token=${tokenElecterm}`
   }
 
   remoteInit = async (term = this.term) => {
@@ -1366,7 +1225,8 @@ clear\r`
         top,
         zIndex: 10
       },
-      onDrop: this.onDrop
+      onDrop: this.onDrop,
+      onContextMenu: this.onContextMenuInner
     }
     // const fileProps = {
     //   type: 'file',
@@ -1376,6 +1236,7 @@ clear\r`
     // }
     const prps3 = {
       id: this.getDomId(),
+      ref: this.domRef,
       className: 'absolute term-wrap-2',
       style: {
         left: '10px',
@@ -1384,19 +1245,28 @@ clear\r`
         bottom: 0
       }
     }
+    const dropdownProps = {
+      menu: {
+        items: this.renderContextMenu(),
+        onClick: this.onContextMenu
+      },
+      trigger: ['contextMenu']
+    }
     return (
-      <div
-        {...prps1}
-      >
+      <Dropdown {...dropdownProps}>
         <div
-          {...prps3}
-        />
-        <NormalBuffer
-          lines={this.state.lines}
-          close={this.closeNormalBuffer}
-        />
-        <Spin className='loading-wrapper' spinning={loading} />
-      </div>
+          {...prps1}
+        >
+          <div
+            {...prps3}
+          />
+          <NormalBuffer
+            lines={this.state.lines}
+            close={this.closeNormalBuffer}
+          />
+          <Spin className='loading-wrapper' spinning={loading} />
+        </div>
+      </Dropdown>
     )
   }
 }

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

@@ -3,9 +3,6 @@
  */
 import { Component } from 'react'
 import { osResolve } from '../../common/resolve'
-import {
-  commonActions
-} from '../../common/constants'
 import {
   Switch,
   Space,
@@ -13,9 +10,16 @@ import {
 } from 'antd'
 import ShowItem from '../common/show-item'
 import defaults from '../../common/default-setting'
-import postMsg from '../../common/post-msg'
 import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
-import { ClockCircleOutlined, BorderlessTableOutlined, DatabaseOutlined, BarsOutlined, ApiOutlined, PartitionOutlined } from '@ant-design/icons'
+import {
+  ClockCircleOutlined,
+  BorderlessTableOutlined,
+  DatabaseOutlined,
+  BarsOutlined,
+  ApiOutlined,
+  PartitionOutlined
+} from '@ant-design/icons'
+import { refs } from '../common/ref'
 
 const e = window.translate
 
@@ -36,11 +40,6 @@ export default class TerminalInfoBase extends Component {
 
   componentDidMount () {
     this.getState()
-    window.addEventListener('message', this.onEvent)
-  }
-
-  componentWillUnmount () {
-    this.exit()
   }
 
   handleToggleTimestamp = () => {
@@ -57,12 +56,9 @@ export default class TerminalInfoBase extends Component {
     this.setState({
       addTimeStampToTermLog: nv
     })
-    postMsg({
-      action: commonActions.setTermLogState,
-      pid,
+    refs.get('term-' + pid)?.setState({
       addTimeStampToTermLog: nv,
-      saveTerminalLogToFile,
-      sessionId
+      saveTerminalLogToFile
     })
   }
 
@@ -90,44 +86,23 @@ export default class TerminalInfoBase extends Component {
     this.setState({
       saveTerminalLogToFile: nv
     })
-    postMsg({
-      action: commonActions.setTermLogState,
-      pid,
+    refs.get('term-' + pid)?.setState({
       saveTerminalLogToFile: nv,
-      addTimeStampToTermLog,
-      sessionId
+      addTimeStampToTermLog
     })
   }
 
-  onEvent = (e) => {
-    const {
-      action,
-      state,
-      pid: ppid
-    } = e.data || {}
-    if (
-      action === commonActions.returnTermLogState &&
-      this.props.pid === ppid
-    ) {
-      this.setState(state)
-      window.removeEventListener('message', this.onEvent)
-    }
-  }
-
   getState = () => {
     const {
-      pid,
-      sessionId
+      pid
     } = this.props
-    postMsg({
-      action: commonActions.getTermLogState,
-      pid,
-      sessionId
-    })
-  }
-
-  exit = () => {
-    window.removeEventListener('message', this.onEvent)
+    const term = refs.get('term-' + pid)
+    if (term) {
+      this.setState({
+        saveTerminalLogToFile: term.state.saveTerminalLogToFile,
+        addTimeStampToTermLog: term.state.addTimeStampToTermLog
+      })
+    }
   }
 
   renderTimestamp () {

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

@@ -39,6 +39,9 @@ export default class TerminalInfoContent extends PureComponent {
 
   render () {
     const { props, state } = this
+    if (props.rightPanelTab === 'ai') {
+      return null
+    }
     return (
       <div>
         <TerminalInfoBase {...props} {...state} />