@electerm/electerm-react 1.51.21 → 1.60.6

package/client/components/footer/batch-input.jsx

@@ -26,37 +26,23 @@ export default class BatchInput extends Component {
     super(props)
     this.state = {
       cmd: '',
-      selectedTabIds: [props.activeTabId],
       open: false,
       enter: false
     }
   }
 
-  componentDidUpdate (prevProps) {
-    if (prevProps.activeTabId !== this.props.activeTabId) {
-      this.setState(prevState => {
-        const newSelectedTabIds = prevState.selectedTabIds.filter(
-          id => id !== this.props.activeTabId
-        )
-        newSelectedTabIds.unshift(this.props.activeTabId)
-        return {
-          selectedTabIds: newSelectedTabIds
-        }
-      })
-    }
-  }
-
   componentWillUnmount () {
     clearTimeout(this.timer)
   }
 
   handleEnter = (e) => {
-    const { cmd, selectedTabIds } = this.state
+    const { batchInputSelectedTabIds } = window.store
+    const { cmd } = this.state
     if (!cmd.trim()) {
       return
     }
     window.store.addBatchInput(cmd)
-    this.props.input(cmd, selectedTabIds)
+    this.props.input(cmd, Array.from(batchInputSelectedTabIds))
     this.setState({
       cmd: '',
       open: false
@@ -64,43 +50,6 @@ export default class BatchInput extends Component {
     e.stopPropagation()
   }
 
-  onSelectAll = () => {
-    this.setState({
-      selectedTabIds: this.getTabs().map(tab => tab.id)
-    })
-  }
-
-  onSelectNone = () => {
-    this.setState({
-      selectedTabIds: [this.props.activeTabId]
-    })
-  }
-
-  filterValidTabIds = (tabIds) => {
-    return tabIds.filter(id => {
-      return this.props.tabs.some(tab => tab.id === id)
-    })
-  }
-
-  onSelect = (id) => {
-    this.setState(prevState => {
-      const selectedTabIds = prevState.selectedTabIds.includes(id)
-        ? prevState.selectedTabIds.filter(tabId => tabId !== id)
-        : [...prevState.selectedTabIds, id]
-
-      // Ensure at least the current tab is selected
-      if (selectedTabIds.length === 0) {
-        return {
-          selectedTabIds: [this.props.activeTabId]
-        }
-      }
-
-      return {
-        selectedTabIds
-      }
-    })
-  }
-
   handleChange = (v = '') => {
     let vv = v.replace(/^\d+:/, '').replace(/\n$/, '')
     if (vv === batchInputLsKey) {
@@ -118,15 +67,9 @@ export default class BatchInput extends Component {
 
   handleClick = () => {
     this.setState({
-      open: true,
-      selectedTabIds: this.filterValidTabIds(this.state.selectedTabIds)
-    })
-  }
-
-  handleChangeAll = toAll => {
-    this.setState({
-      toAll
+      open: true
     })
+    window.store.filterBatchInputSelectedTabIds()
   }
 
   handleBlur = () => {
@@ -192,7 +135,10 @@ export default class BatchInput extends Component {
   }
 
   render () {
-    const { cmd, open, selectedTabIds, enter } = this.state
+    const { cmd, open, enter } = this.state
+    const {
+      batchInputSelectedTabIds
+    } = this.props
     const opts = {
       options: this.buildOptions(),
       placeholder: e('batchInput'),
@@ -217,10 +163,10 @@ export default class BatchInput extends Component {
     const tabSelectProps = {
       activeTabId: this.props.activeTabId,
       tabs: this.getTabs(),
-      selectedTabIds,
-      onSelectAll: this.onSelectAll,
-      onSelectNone: this.onSelectNone,
-      onSelect: this.onSelect
+      selectedTabIds: batchInputSelectedTabIds,
+      onSelectAll: window.store.selectAllBatchInputTabs,
+      onSelectNone: window.store.selectNoneBatchInputTabs,
+      onSelect: window.store.onSelectBatchInputSelectedTabId
     }
     return (
       <span

package/client/components/footer/footer-entry.jsx

@@ -49,11 +49,13 @@ export default auto(function FooterEntry (props) {
   }
 
   function renderBatchInputs () {
+    const { store } = props
     const batchProps = {
       input: batchInput,
-      batchInputs: props.store.batchInputs,
-      tabs: props.store.tabs,
-      activeTabId: props.store.activeTabId
+      tabs: store.tabs,
+      batchInputs: store.batchInputs,
+      batchInputSelectedTabIds: store.batchInputSelectedTabIds,
+      activeTabId: store.activeTabId
     }
     return (
       <div className='terminal-footer-unit terminal-footer-center'>
@@ -72,6 +74,19 @@ export default auto(function FooterEntry (props) {
     )
   }
 
+  function renderAIIcon () {
+    return (
+      <div className='terminal-footer-unit terminal-footer-ai'>
+        <span
+          className='ai-icon'
+          onClick={window.store.handleOpenAIPanel}
+        >
+          AI
+        </span>
+      </div>
+    )
+  }
+
   function renderEncodingInfo () {
     const selectProps = {
       style: {
@@ -148,6 +163,7 @@ export default auto(function FooterEntry (props) {
   return (
     <div {...sideProps}>
       <div className='terminal-footer-flex'>
+        {renderAIIcon()}
         {renderQuickCommands()}
         {renderBatchInputs()}
         {renderEncodingInfo()}

package/client/components/footer/footer.styl

@@ -14,6 +14,10 @@
   .qm-wrap-tooltip
     left 343px
 
+.ai-icon
+  display inline-block
+  padding 0 6px
+  cursor pointer
 
 .terminal-footer-flex
   display flex

package/client/components/footer/tab-select.jsx

@@ -14,7 +14,7 @@ export default function TabSelect (props) {
       const itemProps = {
         tab,
         selected,
-        onSelect: props.onSelect,
+        onSelect: window.store.onSelectBatchInputSelectedTabId,
         id: tab.id,
         isCurrent: tab.id === activeTabId
       }
@@ -26,18 +26,24 @@ export default function TabSelect (props) {
       )
     })
   }
+  function onSelectAll () {
+    window.store.selectAllBatchInputTabs()
+  }
+  function onSelectNone () {
+    window.store.selectNoneBatchInputTabs()
+  }
   function renderBtns () {
     return (
       <div className='pd1t pd2b font12'>
         <span
           className='mg1r pointer'
-          onClick={props.onSelectAll}
+          onClick={onSelectAll}
         >
           All
         </span>
         <span
           className='pointer'
-          onClick={props.onSelectNone}
+          onClick={onSelectNone}
         >
           None
         </span>

package/client/components/layout/layout.jsx

@@ -61,12 +61,13 @@ export default auto(function Layout (props) {
       width,
       pinnedQuickCommandBar,
       leftSidebarWidth,
-      infoPanelPinned,
-      pinned,
-      rightSidebarWidth
+      rightPanelVisible,
+      rightPanelPinned,
+      rightPanelWidth,
+      pinned
     } = props.store
     const l = pinned ? leftSidebarWidth : 0
-    const r = infoPanelPinned ? rightSidebarWidth : 0
+    const r = rightPanelPinned && rightPanelVisible ? rightPanelWidth : 0
     const w = width - l - r - 42
     const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0)
     return layoutAlg(layout, w, h)

package/client/components/main/main.jsx

@@ -29,6 +29,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 { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -81,7 +82,7 @@ export default auto(function Index (props) {
     store.isSecondInstance = window.pre.runSync('isSecondInstance')
     store.initData()
     store.checkForDbUpgrade()
-    window.pre.runGlobalAsync('registerDeepLink')
+    // window.pre.runGlobalAsync('registerDeepLink')
   }, [])
 
   const { store } = props
@@ -213,6 +214,17 @@ export default auto(function Index (props) {
     hasOldConnectionHoppingBookmark: store.hasOldConnectionHoppingBookmark,
     configLoaded
   }
+  const aiChatProps = {
+    aiChatHistory: store.aiChatHistory,
+    config,
+    selectedTabIds: store.batchInputSelectedTabIds,
+    tabs: store.getTabs(),
+    activeTabId: store.activeTabId,
+    showAIConfig: store.showAIConfig
+  }
+  const rightPanelContent = store.rightPanelTab === 'ai'
+    ? <AIChat {...aiChatProps} />
+    : <TerminalInfo {...terminalInfoProps} />
   return (
     <ConfigProvider
       theme={uiThemeConfig}
@@ -269,7 +281,7 @@ export default auto(function Index (props) {
         <Resolutions {...resProps} />
         <InfoModal {...infoModalProps} />
         <RightSidePanel {...rightPanelProps}>
-          <TerminalInfo {...terminalInfoProps} />
+          {rightPanelContent}
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs

package/client/components/shortcuts/shortcut-control.jsx

@@ -9,8 +9,10 @@ import { throttle } from 'lodash-es'
 
 class ShortcutControl extends React.PureComponent {
   componentDidMount () {
-    window.addEventListener('keydown', this.handleKeyboardEvent.bind(this))
-    window.addEventListener('mousewheel', this.handleKeyboardEvent.bind(this))
+    const onEvent = this.handleKeyboardEvent.bind(this)
+    window.addEventListener('keydown', onEvent)
+    window.addEventListener('mousedown', onEvent)
+    window.addEventListener('mousewheel', onEvent)
   }
 
   closeCurrentTabShortcut = throttle((e) => {
@@ -21,6 +23,19 @@ class ShortcutControl extends React.PureComponent {
     }
   }, 500)
 
+  mouseWheelDownCloseTabShortcut = throttle((e) => {
+    e.stopPropagation()
+
+    // Check if the event target is within a .tab element
+    const tabElement = e.target.closest('.tab')
+    if (tabElement) {
+      const tabId = tabElement.getAttribute('data-id')
+      if (tabId) {
+        window.store.delTab(tabId)
+      }
+    }
+  }, 500)
+
   reloadCurrentTabShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.reloadTab()

package/client/components/shortcuts/shortcut-handler.js

@@ -53,12 +53,14 @@ export function shortcutExtend (Cls) {
       metaKey,
       altKey,
       wheelDeltaY,
+      button,
       type,
       key
     } = event
     if (this.cmdAddon) {
       this.cmdAddon.handleKey(event)
     }
+
     if (
       this.term &&
       key === 'Backspace' &&
@@ -66,6 +68,7 @@ export function shortcutExtend (Cls) {
       !altKey &&
       !ctrlKey
     ) {
+      console.log('handleKeyboardEvent: Handling Backspace key')
       this.props.onDelKeyPressed()
       const delKey = this.props.config.backspaceMode === '^?' ? 8 : 127
       const altDelDelKey = delKey === 8 ? 127 : 8
@@ -78,6 +81,7 @@ export function shortcutExtend (Cls) {
     ) {
       return true
     }
+
     if (
       this.term &&
       key === 'c' &&
@@ -89,31 +93,42 @@ export function shortcutExtend (Cls) {
     ) {
       this.onZmodemEnd()
     }
-    const codeName = event instanceof window.WheelEvent
-      ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
-      : code
+
+    let codeName
+    if (type === 'mousedown' && button === 1) {
+      codeName = 'mouseWheel'
+    } else {
+      codeName = event instanceof window.WheelEvent
+        ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
+        : code
+    }
+
     const codeK = getKeyCharacter(codeName)
-    const noControlKey = !ctrlKey && !shiftKey && !metaKey && !altKey
+
+    const noControlKey = type !== 'mousedown' && !ctrlKey && !shiftKey && !metaKey && !altKey
     if (noControlKey) {
       return
     }
-    const r = (ctrlKey ? 'ctrl+' : '') +
+    const r = codeName === 'mouseWheel'
+      ? 'mouseWheel'
+      : (ctrlKey ? 'ctrl+' : '') +
       (metaKey ? 'meta+' : '') +
       (shiftKey ? 'shift+' : '') +
       (altKey ? 'alt+' : '') +
       codeK.toLowerCase()
+
     const shortcutsConfig = buildConfig(this.props.config, d => !d.hidden)
     const keys = Object.keys(shortcutsConfig)
     const len = keys.length
+
     if (this.term) {
       const qmMatch = window.store.quickCommands.find(d => d.shortcut === r)
       if (qmMatch) {
-        window.store.runQuickCommandItem(
-          qmMatch.id
-        )
+        window.store.runQuickCommandItem(qmMatch.id)
         return false
       }
     }
+
     for (let i = 0; i < len; i++) {
       const k = keys[i]
       const conf = shortcutsConfig[k]
@@ -128,6 +143,7 @@ export function shortcutExtend (Cls) {
         }
       }
     }
+
     return !!this.term
   }
   return Cls

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

@@ -5,6 +5,12 @@ export default () => {
       shortcut: 'alt+w',
       shortcutMac: 'alt+w'
     },
+    {
+      name: 'app_mouseWheelDownCloseTab',
+      shortcut: 'mouseWheel',
+      shortcutMac: 'mouseWheel',
+      readonly: true
+    },
     {
       name: 'app_reloadCurrentTab',
       shortcut: 'alt+r',

package/client/components/sidebar/app-running-time.jsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react'
+import {
+  ClockCircleOutlined
+} from '@ant-design/icons'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+
+dayjs.extend(duration)
+
+const e = window.translate
+
+export default function RunningTime () {
+  const [runningTime, setRunningTime] = useState(0)
+
+  useEffect(() => {
+    const startTime = window.pre.runSync('getInitTime')
+
+    const timer = setInterval(() => {
+      const currentTime = Date.now()
+      const diff = Math.floor((currentTime - startTime) / 1000)
+      setRunningTime(diff)
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+  const formatRunningTime = (seconds) => {
+    return dayjs.duration(seconds, 'seconds').format('HH:mm:ss')
+  }
+  return (
+    <p className='mg2b'>
+      <ClockCircleOutlined /> <b>{e('runningTime')} ➾</b>
+      <span className='mg1l'>{formatRunningTime(runningTime)}</span>
+    </p>
+  )
+}

package/client/components/sidebar/info-modal.jsx

@@ -15,6 +15,7 @@ import {
 import { Modal, Tabs, Button } from 'antd'
 import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
+import RunningTime from './app-running-time'
 
 import {
   packInfo,
@@ -121,6 +122,7 @@ export default memo(function InfoModal (props) {
         <div>
           <LogoElem />
           <p className='mg2b'>{e('desc')}</p>
+          <RunningTime />
           <p className='mg1b'>
             <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
             <Link to={authorUrl} className='mg1l'>

package/client/components/tabs/app-drag.jsx

@@ -18,7 +18,7 @@ export default function AppDrag (props) {
   }
 
   function onMouseDown (e) {
-    e.stopPropagation()
+    // e.stopPropagation()
     if (canOperate(e)) {
       window.pre.runSync('windowMove', true)
     }

package/client/components/tabs/index.jsx

@@ -4,7 +4,7 @@
 
 import React from 'react'
 import runIdle from '../../common/run-idle'
-import { debounce } from 'lodash-es'
+import { throttle } from 'lodash-es'
 import TabTitle from './tab-title'
 import {
   CodeFilled,
@@ -49,6 +49,7 @@ export default class Tabs extends React.Component {
   constructor (props) {
     super(props)
     this.tabsRef = React.createRef()
+    this.domRef = React.createRef()
     this.state = {
       overflow: false,
       receiveDataTabId: '',
@@ -60,13 +61,13 @@ export default class Tabs extends React.Component {
   }
 
   componentDidMount () {
-    this.domRef = React.createRef()
     const {
       tabsRef
     } = this
     window.addEventListener('message', this.onEvent)
-    tabsRef.current.addEventListener('mousedown', this.handleClickEvent)
-    tabsRef.current.addEventListener('mousewheel', this.handleWheelEvent)
+    tabsRef.current.addEventListener('wheel', this.handleWheelEvent, {
+      passive: false
+    })
   }
 
   componentDidUpdate (prevProps) {
@@ -198,16 +199,6 @@ export default class Tabs extends React.Component {
     return inner ? inner.clientWidth : 0
   }
 
-  handleClickEvent = (e) => {
-    if (e.button === 1) {
-      const p = findParentBySel(e.target, '.tab')
-      if (p) {
-        const id = p.dataset.id
-        this.props.delTab(id)
-      }
-    }
-  }
-
   handleAdd = e => {
     if (!e.target.className.includes('tabs-wrapper')) {
       return
@@ -230,7 +221,7 @@ export default class Tabs extends React.Component {
     const index = tabs.findIndex(t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll(`.v${batch + 1} .tab`)
-    ).slice(0, index + 1).reduce((prev, c) => {
+    ).slice(0, index + 2).reduce((prev, c) => {
       return prev + c.clientWidth
     }, 0)
     const w = (index + 1) * tabMargin + tabsDomWith
@@ -262,7 +253,7 @@ export default class Tabs extends React.Component {
     this.domRef.current.scrollTo({ left: scrollLeft, behavior: 'smooth' })
   }
 
-  handleWheelEvent = debounce((e) => {
+  handleWheelEvent = throttle((e) => {
     if (this.isOverflow()) {
       if (e.deltaY < 0) {
         this.handleScrollLeft()
@@ -270,7 +261,7 @@ export default class Tabs extends React.Component {
         this.handleScrollRight()
       }
     }
-  }, 100)
+  }, 100, { leading: true, trailing: true })
 
   handleClickMenu = ({ key }) => {
     const id = key.split('##')[1]

package/client/store/common.js

@@ -16,12 +16,14 @@ import {
   terminalActions
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
+import { action } from 'manate'
 
 const e = window.translate
+const { assign } = Object
 
 export default Store => {
   Store.prototype.storeAssign = function (updates) {
-    Object.assign(this, updates)
+    assign(window.store, updates)
   }
 
   Store.prototype.onError = function (e) {
@@ -47,13 +49,23 @@ export default Store => {
     })
   }
 
-  Store.prototype.openInfoPanel = function () {
+  Store.prototype.openInfoPanel = action(function () {
     const { store } = window
     store.rightPanelVisible = true
+    store.rightPanelTab = 'info'
+    store.openInfoPanelAction()
+  })
+
+  Store.prototype.openInfoPanelAction = action(function () {
+    const { store } = window
     postMessage({
       action: terminalActions.showInfoPanel,
       activeTabId: store.activeTabId
     })
+  })
+
+  Store.prototype.toggleAIConfig = function () {
+    window.store.showAIConfig = !window.store.showAIConfig
   }
 
   Store.prototype.onResize = debounce(async function () {
@@ -262,4 +274,27 @@ export default Store => {
     }
     return window.store.applyProfile(tab)
   }
+
+  Store.prototype.handleOpenAIPanel = function () {
+    const { store } = window
+    store.rightPanelVisible = true
+    store.rightPanelTab = 'ai'
+  }
+
+  Store.prototype.runCommandInTerminal = function (cmd) {
+    postMessage({
+      action: terminalActions.quickCommand,
+      cmd,
+      selectedTabIds: window.store.batchInputSelectedTabIds
+    })
+  }
+
+  Store.prototype.removeAiHistory = function (id) {
+    const { store } = window
+    const index = store.aiChatHistory.findIndex(d => d.id === id)
+    if (index === -1) {
+      return
+    }
+    window.store.aiChatHistory.splice(index, 1)
+  }
 }