@electerm/electerm-react 1.51.21 → 1.60.16

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
@@ -98,7 +99,9 @@ export default auto(function Index (props) {
     uiThemeConfig,
     transferHistory,
     transferToConfirm,
-    openResolutionEdit
+    openResolutionEdit,
+    rightPanelTitle,
+    rightPanelTab
   } = store
   const upgradeInfo = deepCopy(store.upgradeInfo)
   const cls = classnames({
@@ -190,7 +193,9 @@ export default auto(function Index (props) {
   const rightPanelProps = {
     rightPanelVisible: store.rightPanelVisible,
     rightPanelPinned: store.rightPanelPinned,
-    rightPanelWidth: store.rightPanelWidth
+    rightPanelWidth: store.rightPanelWidth,
+    title: rightPanelTitle,
+    rightPanelTab
   }
   const terminalInfoProps = {
     ...deepCopy(store.terminalInfoProps),
@@ -213,6 +218,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 = rightPanelTab === 'ai'
+    ? <AIChat {...aiChatProps} />
+    : <TerminalInfo {...terminalInfoProps} />
   return (
     <ConfigProvider
       theme={uiThemeConfig}
@@ -269,7 +285,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/side-panel-r/right-side-panel.styl

@@ -3,29 +3,28 @@
 .right-side-panel
   position absolute
   right 0
-  top 0
+  top 36px
   bottom 0
   z-index 200
   background main
   color text-light
   border-left 1px solid darken(main, 30%)
+  &.right-side-panel-pinned
+    top 0
 
   .drag-handle
     left 0
     right auto
     display block
-
+.right-panel-title
+  border-bottom 1px solid darken(main, 30%)
 .right-side-panel-controls
-  position absolute
-  left 10px
-  top 10px
   color text-dark
   font-size 16px
   &:hover
     color text
     cursor pointer
   &.right-side-panel-pin
-    left 30px
     &.pinned
       color success
 .right-side-panel-content
@@ -33,7 +32,7 @@
   overflow-y scroll
   position absolute
   left 0
-  top 30px
+  top 55px
   right 0
   bottom 0
 .animate-fast

package/client/components/side-panel-r/side-panel-r.jsx

@@ -3,20 +3,31 @@ import DragHandle from '../common/drag-handle'
 import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
-  PushpinOutlined
+  PushpinOutlined,
+  InfoCircleOutlined
 } from '@ant-design/icons'
+import {
+  Typography,
+  Flex,
+  Tag
+} from 'antd'
 
 export default memo(function RightSidePanel (
   {
     rightPanelVisible,
     rightPanelPinned,
     rightPanelWidth,
-    children
+    children,
+    title,
+    rightPanelTab
   }
 ) {
   if (!rightPanelVisible) {
     return null
   }
+  const tag = rightPanelTab === 'ai'
+    ? <Tag className='mg1r'>AI</Tag>
+    : <InfoCircleOutlined className='mg1r' />
 
   function onDragEnd (nw) {
     window.store.setRightSidePanelWidth(nw)
@@ -36,7 +47,7 @@ export default memo(function RightSidePanel (
   }
 
   const panelProps = {
-    className: 'right-side-panel animate-fast',
+    className: 'right-side-panel animate-fast' + (rightPanelPinned ? ' right-side-panel-pinned' : ''),
     id: 'right-side-panel',
     style: {
       width: `${rightPanelWidth}px`
@@ -60,13 +71,24 @@ export default memo(function RightSidePanel (
       {...panelProps}
     >
       <DragHandle {...dragProps} />
-      <CloseCircleOutlined
-        className='right-side-panel-close right-side-panel-controls'
-        onClick={onClose}
-      />
-      <PushpinOutlined
-        {...pinProps}
-      />
+      <Flex
+        className='right-panel-title pd2'
+        justify='space-between'
+        align='center'
+      >
+        <Typography.Text level={4} ellipsis style={{ margin: 0, flex: 1 }}>
+          {tag} {title}
+        </Typography.Text>
+        <Flex>
+          <PushpinOutlined
+            {...pinProps}
+          />
+          <CloseCircleOutlined
+            className='right-side-panel-close right-side-panel-controls mg1l'
+            onClick={onClose}
+          />
+        </Flex>
+      </Flex>
       <div className='right-side-panel-content'>
         {children}
       </div>

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/history-item.jsx

@@ -1,3 +1,4 @@
+import React, { useCallback, useEffect, useRef } from 'react'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
 import { DeleteOutlined } from '@ant-design/icons'
 
@@ -7,9 +8,25 @@ export default function HistoryItem (props) {
     item,
     index
   } = props
-  function handleClick () {
-    store.onSelectHistory(item.tab)
-  }
+  const timeoutRef = useRef(null)
+
+  const handleClick = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    timeoutRef.current = setTimeout(() => {
+      store.onSelectHistory(item.tab)
+    }, 10)
+  }, [item.tab])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
   function handleDelete (e) {
     e.stopPropagation()
     store.history.splice(index, 1)

package/client/components/sidebar/history.jsx

@@ -10,13 +10,16 @@ export default auto(function HistoryPanel (props) {
   const {
     history
   } = store
+  const arr = props.sort
+    ? [...history].sort((a, b) => { return b.count - a.count })
+    : history
   return (
     <div
       className='sidebar-panel-history'
     >
       <div className='pd2x'>
         {
-          history.map((item, i) => {
+          arr.map((item, i) => {
             return (
               <HistoryItem
                 key={item.id}

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)
     }