@electerm/electerm-react 1.70.2 → 1.72.6

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

@@ -35,6 +35,7 @@ class ShortcutControl extends React.PureComponent {
     this.handleSftpKeyboardEvent(e)
     // Then handle extended shortcuts
     this.handleKeyboardEvent(e)
+    this.handleAiChat(e)
   }
 
   getActiveSftp = () => {
@@ -45,6 +46,25 @@ class ShortcutControl extends React.PureComponent {
     return ref
   }
 
+  handleAiChat = (e) => {
+    const { rightPanelTab } = window.store
+    if (rightPanelTab !== 'ai') {
+      return
+    }
+    const elem = document.activeElement
+    if (
+      e.ctrlKey &&
+      e.key === 'Enter' &&
+      !e.shiftKey &&
+      !e.altKey &&
+      !e.metaKey &&
+      elem?.tagName === 'TEXTAREA' &&
+      elem?.classList.contains('ai-chat-textarea')
+    ) {
+      refsStatic.get('AIChat')?.handleSubmit()
+    }
+  }
+
   // SFTP shortcuts handler
   handleSftpKeyboardEvent = (e) => {
     const activeSftp = this.getActiveSftp()

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

@@ -175,7 +175,7 @@ export default class ShortcutEdit extends PureComponent {
       return null
     }
     return (
-      <div>
+      <>
         <CheckOutlined
           onClick={this.handleConfirm}
           className='pointer'
@@ -184,7 +184,7 @@ export default class ShortcutEdit extends PureComponent {
           onClick={this.handleCancel}
           className='pointer mg1l'
         />
-      </div>
+      </>
     )
   }
 

package/client/components/shortcuts/shortcuts.jsx

@@ -140,7 +140,7 @@ export default class Shortcuts extends PureComponent {
       rowKey: 'id'
     }
     return (
-      <div>
+      <>
         <Table
           {...props}
         />
@@ -151,7 +151,7 @@ export default class Shortcuts extends PureComponent {
             {e('resetAllToDefault')}
           </Button>
         </div>
-      </div>
+      </>
     )
   }
 }

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

@@ -119,7 +119,7 @@ export default auto(function InfoModal (props) {
       key: infoTabs.info,
       label: e('about'),
       children: (
-        <div>
+        <>
           <LogoElem />
           <p className='mg2b'>{e('desc')}</p>
           <RunningTime />
@@ -187,7 +187,7 @@ export default auto(function InfoModal (props) {
             </Link>
           </p>
           {renderCheckUpdate()}
-        </div>
+        </>
       )
     },
     {

package/client/components/sidebar/transfer-list-control.jsx

@@ -137,26 +137,24 @@ export default class TransferModalUI extends Component {
       ...groups
     ]
     return (
-      <div>
-        <Select
-          value={this.state.filter}
-          onChange={this.handleFilter}
-          popupMatchSelectWidth={false}
-        >
-          {
-            all.map(item => {
-              return (
-                <Option
-                  key={item.id}
-                  value={item.id}
-                >
-                  {item.title}
-                </Option>
-              )
-            })
-          }
-        </Select>
-      </div>
+      <Select
+        value={this.state.filter}
+        onChange={this.handleFilter}
+        popupMatchSelectWidth={false}
+      >
+        {
+          all.map(item => {
+            return (
+              <Option
+                key={item.id}
+                value={item.id}
+              >
+                {item.title}
+              </Option>
+            )
+          })
+        }
+      </Select>
     )
   }
 

package/client/components/ssh-config/ssh-config-item.jsx

@@ -16,10 +16,8 @@ export default function SshConfigItem (props) {
 
   return (
     <Tooltip title={generateTooltipContent(item)}>
-      <div>
-        <div className='elli pd1y pd2x'>
-          ssh {item.title}
-        </div>
+      <div className='elli pd1y pd2x'>
+        ssh {item.title}
       </div>
     </Tooltip>
   )

package/client/components/ssh-config/ssh-config-load-notify.jsx

@@ -25,7 +25,7 @@ function showNotification () {
     placement: 'bottom',
     key: 'sshConfigNotify',
     description: (
-      <div>
+      <>
         <p>{e('sshConfigNotice')}</p>
         <Button type='primary' onClick={handleLoad} className='mg1r mg1b'>
           {e('import')}
@@ -33,7 +33,7 @@ function showNotification () {
         <Button onClick={handleIgnore} className='mg1r mg1b'>
           {e('ignore')}
         </Button>
-      </div>
+      </>
     )
   })
 }

package/client/components/sys-menu/zoom.jsx

@@ -20,7 +20,7 @@ export default function ZoomMenu (props) {
       max={500}
       addonAfter='%'
       addonBefore={
-        <div>
+        <>
           <PlusCircleOutlined
             onClick={() => store.zoom(0.25, true)}
             className='mg1r pointer font16'
@@ -29,7 +29,7 @@ export default function ZoomMenu (props) {
             onClick={() => store.zoom(-0.25, true)}
             className='pointer font16'
           />
-        </div>
+        </>
       }
     />
   )

package/client/components/tabs/index.jsx

@@ -2,7 +2,7 @@
  * session tabs component
  */
 
-import { Component } from '../common/component'
+import { Component } from 'manate/react/class-components'
 import React from 'react'
 import runIdle from '../../common/run-idle'
 import { throttle } from 'lodash-es'

package/client/components/tabs/tab.jsx

@@ -3,7 +3,7 @@
  */
 
 import { createRef } from 'react'
-import { Component } from '../common/component'
+import { Component } from 'manate/react/class-components'
 import { refs } from '../common/ref'
 import {
   CloseOutlined,
@@ -373,10 +373,10 @@ class Tab extends Component {
       return <div key={tunnel}>{tunnel}</div>
     })
     return (
-      <div>
+      <>
         <div>{title}</div>
         {list}
-      </div>
+      </>
     )
   }
 

package/client/components/terminal/cmd-item.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { CloseCircleOutlined } from '@ant-design/icons'
+
+const SuggestionItem = ({ item, onSelect, onDelete }) => {
+  const handleClick = () => {
+    onSelect(item)
+  }
+
+  const handleDelete = (e) => {
+    e.stopPropagation()
+    onDelete(item)
+  }
+
+  return (
+    <div className='suggestion-item'>
+      <span className='suggestion-command' onClick={handleClick}>
+        {item.command}
+      </span>
+      <span className='suggestion-type'>
+        {item.type}
+      </span>
+      {item.type === 'H' && (
+        <CloseCircleOutlined
+          className='suggestion-delete'
+          onClick={handleDelete}
+        />
+      )}
+    </div>
+  )
+}
+
+export default SuggestionItem

package/client/components/terminal/command-tracker-addon.js

@@ -45,7 +45,9 @@ export class CommandTrackerAddon {
   // This is now our internal handler
   _handleKey = (e) => {
     const { key } = e
-    if (key === 'Enter') {
+    if (e.ctrlKey && key.toLowerCase() === 'c') {
+      this.clearCommand()
+    } else if (key === 'Enter') {
       // Command executed, reset
       this.currentCommand = this.activeCommand
       this.activeCommand = ''

package/client/components/terminal/term-search.jsx

@@ -127,14 +127,14 @@ export default class TermSearch extends PureComponent {
 
   renderAfter = () => {
     return (
-      <div>
+      <>
         {
           this.renderMatchData()
         }
         {
           this.searchActions.map(this.renderSearchAction)
         }
-      </div>
+      </>
     )
   }
 
@@ -174,11 +174,11 @@ export default class TermSearch extends PureComponent {
 
   renderSuffix = () => {
     return (
-      <div>
+      <>
         {
           this.searchControls.map(this.renderSearchControl)
         }
-      </div>
+      </>
     )
   }
 
@@ -191,8 +191,7 @@ export default class TermSearch extends PureComponent {
     if (
       !termSearchOpen ||
       !currentTab ||
-      currentTab.pane === paneMap.fileManager ||
-      currentTab.pane === paneMap.sftp
+      currentTab.pane === paneMap.fileManager
     ) {
       return null
     }

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -0,0 +1,303 @@
+import { Component } from 'manate/react/class-components'
+import { refsStatic, refs } from '../common/ref'
+import SuggestionItem from './cmd-item'
+import { aiSuggestionsCache } from '../../common/cache'
+import uid from '../../common/uid'
+import classnames from 'classnames'
+import {
+  LoadingOutlined
+} from '@ant-design/icons'
+
+export default class TerminalCmdSuggestions extends Component {
+  state = {
+    cursorPosition: {},
+    showSuggestions: false,
+    loadingAiSuggestions: false,
+    aiSuggestions: [],
+    cmdIsDescription: false,
+    reverse: false,
+    cmd: ''
+  }
+
+  componentDidMount () {
+    refsStatic.add('terminal-suggestions', this)
+  }
+
+  componentWillUnmount () {
+    refsStatic.remove('terminal-suggestions')
+  }
+
+  parseAiSuggestions = (aiResponse) => {
+    try {
+      return JSON.parse(aiResponse.response).map(d => {
+        return {
+          command: d,
+          type: 'AI'
+        }
+      })
+    } catch (e) {
+      console.log('parseAiSuggestions error:', e)
+      return []
+    }
+  }
+
+  getAiSuggestions = async (event) => {
+    event.stopPropagation()
+    const { cmd } = this.state
+    if (window.store.aiConfigMissing()) {
+      window.store.toggleAIConfig()
+    }
+    this.setState({
+      loadingAiSuggestions: true
+    })
+    const {
+      config
+    } = window.store
+    const prompt = `give me max 5 command suggestions for user input: "${cmd}", return pure json format result only, no extra words, no markdown format, follow this format: ["command1","command2"...]`
+    const cached = aiSuggestionsCache.get(cmd)
+    if (cached) {
+      this.setState({
+        loadingAiSuggestions: false,
+        aiSuggestions: cached
+      })
+      return
+    }
+
+    const aiResponse = aiSuggestionsCache.get(prompt) || await window.pre.runGlobalAsync(
+      'AIchat',
+      prompt,
+      config.modelAI,
+      config.roleAI,
+      config.baseURLAI,
+      config.apiPathAI,
+      config.apiKeyAI
+    ).catch(
+      window.store.onError
+    )
+    if (cmd !== this.state.cmd) {
+      this.setState({
+        loadingAiSuggestions: false
+      })
+      return
+    }
+    if (aiResponse && aiResponse.error) {
+      this.setState({
+        loadingAiSuggestions: false
+      })
+      return window.store.onError(
+        new Error(aiResponse.error)
+      )
+    }
+    this.setState({
+      loadingAiSuggestions: false,
+      aiSuggestions: this.parseAiSuggestions(aiResponse, cmd)
+    })
+  }
+
+  openSuggestions = (cursorPosition, cmd) => {
+    if (!this.state.showSuggestions) {
+      document.addEventListener('click', this.handleClickOutside)
+      document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    const {
+      left,
+      top,
+      cellHeight
+    } = cursorPosition
+    const w = window.innerWidth
+    const h = window.innerHeight
+
+    const position = {}
+    const reverse = top > h / 2
+
+    // Use right position if close to right edge
+    if (left > w / 2) {
+      position.right = w - left
+    } else {
+      position.left = left
+    }
+
+    // Use bottom position if close to bottom edge
+    if (reverse) {
+      position.bottom = h - top + cellHeight
+    } else {
+      position.top = top
+    }
+    this.setState({
+      showSuggestions: true,
+      cursorPosition: position,
+      cmd,
+      reverse
+    })
+  }
+
+  closeSuggestions = () => {
+    document.removeEventListener('click', this.handleClickOutside)
+    document.removeEventListener('keydown', this.handleKeyDown)
+    const {
+      aiSuggestions
+    } = this.state
+    if (aiSuggestions.length) {
+      aiSuggestionsCache.set(this.state.cmd, aiSuggestions)
+      aiSuggestions.forEach(item => {
+        window.store.addCmdHistory(item.command, 'aiCmdHistory')
+      })
+    }
+    this.setState({
+      showSuggestions: false,
+      aiSuggestions: []
+    })
+  }
+
+  handleClickOutside = (event) => {
+    const suggestionElement = document.querySelector('.terminal-suggestions-wrap')
+    if (suggestionElement && !suggestionElement.contains(event.target)) {
+      this.closeSuggestions()
+    }
+  }
+
+  handleKeyDown = (event) => {
+    if (event.key === 'Escape') {
+      this.closeSuggestions()
+    }
+  }
+
+  handleDelete = (item) => {
+    window.store.terminalCommandHistory.delete(item.command)
+  }
+
+  handleSelect = (item) => {
+    const { activeTabId } = window.store
+    const terminal = refs.get('term-' + activeTabId)
+    if (!terminal) {
+      return
+    }
+
+    // const titleElement = domEvent.target.closest('.ant-menu-title-content')
+    // const command = titleElement?.firstChild?.textContent
+    const { command } = item
+    const { cmd } = this.state
+    let txt = ''
+    if (cmd && command.startsWith(cmd)) {
+      txt = command.slice(cmd.length)
+    } else {
+      const pre = '\b'.repeat(cmd.length)
+      txt = pre + command
+    }
+    terminal.attachAddon._sendData(txt)
+    terminal.term.focus()
+    this.closeSuggestions()
+  }
+
+  processCommands = (commands, type, uniqueCommands, res) => {
+    const { cmd } = this.state
+    commands
+      .filter(command => command.startsWith(cmd))
+      .forEach(command => {
+        if (!uniqueCommands.has(command)) {
+          uniqueCommands.add(command)
+          res.push({
+            id: uid(),
+            command,
+            type
+          })
+        }
+      })
+  }
+
+  getSuggestions = () => {
+    const uniqueCommands = new Set()
+    const {
+      history = [],
+      batch = [],
+      quick = []
+    } = this.props.suggestions
+    const res = []
+    this.state.aiSuggestions
+      .forEach(item => {
+        if (!uniqueCommands.has(item.command)) {
+          uniqueCommands.add(item.command)
+        }
+        res.push({
+          id: uid(),
+          ...item
+        })
+      })
+    this.processCommands(history, 'H', uniqueCommands, res)
+    this.processCommands(batch, 'B', uniqueCommands, res)
+    this.processCommands(quick, 'Q', uniqueCommands, res)
+    return this.state.reverse ? res.reverse() : res
+  }
+
+  renderAIIcon () {
+    const e = window.translate
+    const {
+      loadingAiSuggestions
+    } = this.state
+    if (loadingAiSuggestions) {
+      return (
+        <>
+          <LoadingOutlined /> {e('getAiSuggestions')}
+        </>
+      )
+    }
+    const aiProps = {
+      onClick: this.getAiSuggestions,
+      className: 'pointer'
+    }
+    return (
+      <div {...aiProps}>
+        {e('getAiSuggestions')}
+      </div>
+    )
+  }
+
+  renderSticky (pos) {
+    const {
+      reverse
+    } = this.state
+    if (
+      (pos === 'top' && !reverse) ||
+      (pos === 'bottom' && reverse)
+    ) {
+      return null
+    }
+    return (
+      <div className='terminal-suggestions-sticky'>
+        {this.renderAIIcon()}
+      </div>
+    )
+  }
+
+  render () {
+    const { showSuggestions, cursorPosition, reverse } = this.state
+    if (!showSuggestions) {
+      return null
+    }
+    const suggestions = this.getSuggestions()
+    const cls = classnames('terminal-suggestions-wrap', {
+      reverse
+    })
+    return (
+      <div className={cls} style={cursorPosition}>
+        {this.renderSticky('top')}
+        <div className='terminal-suggestions-list'>
+          {
+            suggestions.map(item => {
+              return (
+                <SuggestionItem
+                  key={item.id}
+                  item={item}
+                  onSelect={this.handleSelect}
+                  onDelete={this.handleDelete}
+                />
+              )
+            })
+          }
+        </div>
+        {this.renderSticky('bottom')}
+      </div>
+    )
+  }
+}