@electerm/electerm-react 1.51.21 → 1.60.16

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,
@@ -24,9 +24,8 @@ import {
   TwoRowsRightIcon,
   TwoColumnsBottomIcon
 } from '../icons/split-icons'
-import { Dropdown, Popover, Button } from 'antd'
+import { Dropdown, Popover } from 'antd'
 import Tab from './tab'
-import LogoElem from '../common/logo-elem.jsx'
 import './tabs.styl'
 import {
   tabWidth,
@@ -41,6 +40,7 @@ import findParentBySel from '../../common/find-parent'
 import WindowControl from './window-control'
 import BookmarksList from '../sidebar/bookmark-select'
 import AppDrag from './app-drag'
+import NoSession from './no-session'
 import classNames from 'classnames'
 
 const e = window.translate
@@ -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]
@@ -557,31 +548,13 @@ export default class Tabs extends React.Component {
   }
 
   renderNoSession = () => {
-    const props = {
-      style: {
-        height: this.props.height + 'px'
-      }
-    }
     return (
-      <div className='no-sessions electerm-logo-bg' {...props}>
-        <Button
-          onClick={this.handleNewTab}
-          size='large'
-          className='mg1r mg1b add-new-tab-btn'
-        >
-          {e('newTab')}
-        </Button>
-        <Button
-          onClick={this.handleNewSsh}
-          size='large'
-          className='mg1r mg1b'
-        >
-          {e('newBookmark')}
-        </Button>
-        <div className='pd3'>
-          <LogoElem />
-        </div>
-      </div>
+      <NoSession
+        height={this.props.height}
+        onNewTab={this.handleNewTab}
+        onNewSsh={this.handleNewSsh}
+        batch={this.props.batch}
+      />
     )
   }
 

package/client/components/tabs/no-session.jsx

@@ -0,0 +1,40 @@
+import { Button } from 'antd'
+import LogoElem from '../common/logo-elem.jsx'
+import HistoryPanel from '../sidebar/history'
+
+const e = window.translate
+
+export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
+  const props = {
+    style: {
+      height: height + 'px'
+    }
+  }
+  const handleClick = () => {
+    window.openTabBatch = batch
+  }
+  return (
+    <div className='no-sessions electerm-logo-bg' {...props}>
+      <Button
+        onClick={onNewTab}
+        size='large'
+        className='mg1r mg1b add-new-tab-btn'
+      >
+        {e('newTab')}
+      </Button>
+      <Button
+        onClick={onNewSsh}
+        size='large'
+        className='mg1r mg1b'
+      >
+        {e('newBookmark')}
+      </Button>
+      <div className='pd3'>
+        <LogoElem />
+      </div>
+      <div className='no-session-history' onClick={handleClick}>
+        <HistoryPanel sort />
+      </div>
+    </div>
+  )
+}

package/client/components/tabs/tabs.styl

@@ -229,3 +229,9 @@
   padding 0 4px
   height 20px
   line-height 21px
+.no-session-history
+  position absolute
+  top 280px
+  bottom 80px
+  left 0
+  right 0

package/client/components/terminal/index.jsx

@@ -1306,10 +1306,10 @@ clear\r`
   }
 
   handleShowInfo = () => {
-    const { id, sessionId, logName, tab } = this.props
+    const { sessionId, logName, tab } = this.props
     const infoProps = {
       logName,
-      id,
+      id: tab.id,
       pid: tab.id,
       sessionId,
       isRemote: this.isRemote(),

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

package/client/store/index.js

@@ -2,297 +2,9 @@
  * central state store powered by manate - https://github.com/tylerlong/manate
  */
 
+import { StateStore } from './store'
 import { manage } from 'manate'
-import initState from './init-state'
-import loadDataExtend from './load-data'
-import dbUpgradeExtend from './db-upgrade'
-import eventExtend from './event'
-import syncExtend from './sync'
-import appUpgradeExtend from './app-upgrade'
-import bookmarkGroupExtend from './bookmark-group'
-import bookmarkExtend from './bookmark'
-import commonExtend from './common'
-import contextMenuExtend from './context-menu'
-import itemExtend from './item'
-import quickCommandExtend from './quick-command'
-import sessionExtend from './session'
-import settingExtend from './setting'
-import sidebarExtend from './sidebar'
-import sysMenuExtend from './system-menu'
-import tabExtend from './tab'
-import uiThemeExtend from './ui-theme'
-import terminalThemeExtend from './terminal-theme'
-import transferHistoryExtend from './transfer-history'
-import batchInputHistory from './batch-input-history'
-import transferExtend from './transfer-list'
-import addressBookmarkExtend from './address-bookmark'
-import isColorDark from '../common/is-color-dark'
-import { getReverseColor } from '../common/reverse-color'
-import { uniq } from 'lodash-es'
-import deepCopy from 'json-deep-copy'
-import {
-  settingMap,
-  paneMap,
-  settingSyncId,
-  settingShortcutsId,
-  settingTerminalId,
-  terminalSshConfigType
-} from '../common/constants'
-import getInitItem from '../common/init-setting-item'
-import {
-  theme
-} from 'antd'
 
-const e = window.translate
-
-class Store {
-  constructor () {
-    Object.assign(
-      this,
-      initState()
-    )
-  }
-
-  get width () {
-    return window.store.innerWidth
-  }
-
-  get config () {
-    return deepCopy(window.store._config)
-  }
-
-  get currentQuickCommands () {
-    const { currentTab } = this
-    const { quickCommands } = window.store
-    const currentTabQuickCommands = (
-      currentTab.quickCommands || []
-    ).map((d, i) => {
-      return {
-        ...d,
-        id: 'tab-qm-' + currentTab.id + '#' + i
-      }
-    })
-    return [
-      ...currentTabQuickCommands,
-      ...quickCommands
-    ]
-  }
-
-  get currentTab () {
-    const {
-      activeTabId
-    } = this
-    const { tabs } = window.store
-    const tab = tabs.find(t => t.id === activeTabId)
-    if (!tab) {
-      return false
-    }
-    return tab
-  }
-
-  get inActiveTerminal () {
-    const { store } = window
-    if (store.showModal) {
-      return false
-    }
-    const {
-      currentTab
-    } = store
-    if (!currentTab) {
-      return false
-    }
-    const {
-      type,
-      pane
-    } = currentTab
-    if (type === 'rdp' || type === 'vnc' || type === 'web') {
-      return false
-    }
-    return pane === paneMap.ssh ||
-        pane === paneMap.terminal
-  }
-
-  get quickCommandTags () {
-    const { quickCommands } = window.store
-    return uniq(
-      quickCommands.reduce((p, q) => {
-        return [
-          ...p,
-          ...(q.labels || [])
-        ]
-      }, [])
-    )
-  }
-
-  get isTransporting () {
-    return window.store.tabs.some(t => t.isTransporting)
-  }
-
-  get transferCount () {
-    return window.store.fileTransfers.length
-  }
-
-  get settingSidebarList () {
-    const {
-      settingTab
-    } = this
-    const arr = window.store.getSidebarList(settingTab)
-    const initItem = getInitItem(arr, settingTab)
-    return settingTab === settingMap.history
-      ? arr
-      : [
-          deepCopy(initItem),
-          ...arr
-        ]
-  }
-
-  get termSearchOptions () {
-    const {
-      store
-    } = window
-    const theme = store.getThemeConfig()
-    return {
-      ...window.store._termSearchOptions,
-      decorations: {
-        activeMatchBorder: theme.yellow,
-        activeMatchBackground: theme.selectionBackground,
-        activeMatchColorOverviewRuler: theme.selectionBackground,
-        matchBackground: theme.background,
-        matchOverviewRuler: theme.yellow,
-        matchBorder: getReverseColor(theme.background)
-      }
-    }
-  }
-
-  get tabTitles () {
-    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
-    } = window
-    return store.showModal ||
-      store.showInfoModal ||
-      store.showEditor ||
-      store.showFileModal
-  }
-
-  get uiThemeConfig () {
-    const { store } = window
-    const themeConf = store.getUiThemeConfig()
-    return {
-      token: {
-        borderRadius: 3,
-        colorPrimary: themeConf.primary,
-        colorBgBase: themeConf.main,
-        colorError: themeConf.error,
-        colorInfo: themeConf.info,
-        colorSuccess: themeConf.success,
-        colorWarning: themeConf.warn,
-        colorTextBase: themeConf.text,
-        colorLink: themeConf['text-light']
-      },
-      algorithm: isColorDark(themeConf.main) ? theme.darkAlgorithm : theme.defaultAlgorithm
-    }
-  }
-
-  get bookmarkTree () {
-    const {
-      bookmarks
-    } = window.store
-    return bookmarks.reduce((p, v) => {
-      return {
-        ...p,
-        [v.id]: v
-      }
-    }, {})
-  }
-
-  hasSshConfig () {
-    return !!window.store
-      .bookmarkGroups
-      .find(b => b.id === terminalSshConfigType)
-  }
-
-  get bookmarkGroupTree () {
-    const {
-      bookmarkGroups
-    } = window.store
-    return bookmarkGroups.reduce((p, v) => {
-      return {
-        ...p,
-        [v.id]: v
-      }
-    }, {})
-  }
-
-  get hasOldConnectionHoppingBookmark () {
-    return window.store.bookmarks.some(b => {
-      return b.connectionHoppings?.length && !b.hasHopping
-    })
-  }
-}
-
-const arrGetterProps = [
-  'addressBookmarks',
-  'addressBookmarksLocal',
-  'bookmarks',
-  'bookmarkGroups',
-  'profiles',
-  'quickCommands',
-  'terminalThemes'
-]
-
-for (const prop of arrGetterProps) {
-  Object.defineProperty(Store.prototype, prop, {
-    get: function () {
-      return JSON.parse(window.store[`_${prop}`] || '[]').filter(d => d)
-    }
-  })
-}
-
-loadDataExtend(Store)
-eventExtend(Store)
-dbUpgradeExtend(Store)
-syncExtend(Store)
-appUpgradeExtend(Store)
-bookmarkGroupExtend(Store)
-bookmarkExtend(Store)
-commonExtend(Store)
-contextMenuExtend(Store)
-itemExtend(Store)
-quickCommandExtend(Store)
-sessionExtend(Store)
-settingExtend(Store)
-sidebarExtend(Store)
-sysMenuExtend(Store)
-tabExtend(Store)
-terminalThemeExtend(Store)
-uiThemeExtend(Store)
-transferHistoryExtend(Store)
-batchInputHistory(Store)
-transferExtend(Store)
-addressBookmarkExtend(Store)
-
-export const StateStore = Store
-const store = manage(new Store())
+const store = manage(new StateStore())
 
 export default store

package/client/store/init-state.js

@@ -19,6 +19,7 @@ import {
   dismissDelKeyTipLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
+  aiChatHistoryKey,
   splitMap
 } from '../common/constants'
 import { buildDefaultThemes } from '../common/terminal-theme'
@@ -76,6 +77,11 @@ export default () => {
     selectedSessions: [],
     sessionModalVisible: false,
 
+    // batch input selected tab ids
+    _batchInputSelectedTabIds: new Set(),
+    showAIConfig: false,
+    aiChatHistory: ls.getItemJSON(aiChatHistoryKey, []),
+
     // sftp
     fileOperation: fileOperationsMap.cp, // cp or mv
     pauseAllTransfer: false,
@@ -103,6 +109,7 @@ export default () => {
     activeTabId3: '',
     terminalInfoProps: {},
     rightPanelVisible: false,
+    rightPanelTab: 'info',
     rightPanelPinned: false,
     rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
 
@@ -144,7 +151,6 @@ export default () => {
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey),
     leftSidebarWidth: parseInt(ls.getItem(leftSidebarWidthKey), 10) || 300,
-    rightSidebarWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
     menuOpened: false,
     pinned: ls.getItem(sidebarPinnedKey) === 'true',