@electerm/electerm-react 1.70.2 → 1.72.6

package/client/common/cache.js

@@ -0,0 +1,56 @@
+// cache class that can set(key, value), get(key), init with limit, so we only
+// keep limit items in cache
+// we persist cache to local storage, so we can keep cache after restart
+
+class MapCache {
+  constructor (limit, key) {
+    this.limit = limit
+    this.key = key
+    this.cache = new Map()
+    this.load()
+  }
+
+  load () {
+    const data = window.localStorage.getItem(this.key)
+    if (data) {
+      const arr = JSON.parse(data)
+      for (const item of arr) {
+        this.cache.set(item.key, item.value)
+      }
+    }
+  }
+
+  save () {
+    const arr = []
+    for (const [key, value] of this.cache) {
+      arr.push({
+        key,
+        value
+      })
+    }
+    window.localStorage.setItem(this.key, JSON.stringify(arr))
+  }
+
+  set (key, value) {
+    this.cache.set(key, value)
+    if (this.cache.size > this.limit) {
+      // Delete oldest 20 items when cache exceeds limit
+      const values = Array.from(this.cache.values())
+      for (let i = 0; i < 20 && i < values.length; i++) {
+        this.cache.delete(values[i])
+      }
+    }
+    this.save()
+  }
+
+  get (key) {
+    return this.cache.get(key)
+  }
+
+  clear () {
+    this.cache.clear()
+    this.save()
+  }
+}
+
+export const aiSuggestionsCache = new MapCache(100, 'ai-cmd-suggestion-cache')

package/client/common/constants.js

@@ -218,6 +218,7 @@ export const syncTokenCreateUrls = {
 export const settingSyncId = 'setting-sync'
 export const settingTerminalId = 'setting-terminal'
 export const settingShortcutsId = 'setting-shortcuts'
+export const settingAiId = 'setting-ai'
 export const settingCommonId = 'setting-common'
 export const defaultEnvLang = 'en_US.UTF-8'
 const defaultThemeLightConf = _get(
@@ -373,3 +374,4 @@ export const sshConfigKey = 'ignore-ssh-config'
 export const connectionHoppingWarnKey = 'connectionHoppingWarnned'
 export const aiChatHistoryKey = 'ai-chat-history'
 export const syncServerDataKey = 'sync-server-data'
+export const cmdHistoryKey = 'cmd-history'

package/client/common/download.jsx

@@ -19,13 +19,11 @@ export default async function download (filename, text) {
   notification.success({
     message: '',
     description: (
-      <div>
-        <ShowItem
-          to={filePath}
-        >
-          {filePath}
-        </ShowItem>
-      </div>
+      <ShowItem
+        to={filePath}
+      >
+        {filePath}
+      </ShowItem>
     )
   })
 }

package/client/common/setting-list.js

@@ -0,0 +1,27 @@
+import {
+  settingSyncId,
+  settingShortcutsId,
+  settingTerminalId,
+  settingAiId
+} from '../common/constants'
+
+const e = window.translate
+
+export default () => ([
+  {
+    id: settingTerminalId,
+    title: e('terminal')
+  },
+  {
+    id: settingShortcutsId,
+    title: e('settingShortcuts')
+  },
+  {
+    id: settingSyncId,
+    title: e('settingSync')
+  },
+  {
+    id: settingAiId,
+    title: 'AI'
+  }
+])

package/client/components/ai/ai-cache.jsx

@@ -0,0 +1,36 @@
+import { aiSuggestionsCache } from '../../common/cache'
+import { useEffect, useState } from 'react'
+import {
+  Button,
+  Alert
+} from 'antd'
+
+const e = window.translate
+
+export default function AiCache () {
+  const [count, setCount] = useState(0)
+
+  function handleClick () {
+    aiSuggestionsCache.clear()
+    setCount(0)
+  }
+
+  useEffect(() => {
+    setCount(aiSuggestionsCache.cache.size)
+  }, [])
+
+  const msg = (
+    <>
+      <span className='mg3r'>{e('aiSuggestionsCache')}: <b>{count}</b></span>
+      <Button
+        onClick={handleClick}
+        size='small'
+      >
+        {e('clear')}
+      </Button>
+    </>
+  )
+  return (
+    <Alert message={msg} type='info' className='mg2y' />
+  )
+}

package/client/components/ai/ai-chat-history-item.jsx

@@ -17,7 +17,7 @@ export default function AIChatHistoryItem ({ item }) {
   } = item
   const alertProps = {
     message: (
-      <div><UserOutlined />: {prompt}</div>
+      <><UserOutlined />: {prompt}</>
     ),
     type: 'info'
   }

package/client/components/ai/ai-chat.jsx

@@ -1,6 +1,5 @@
 import { useState, useCallback, useEffect } from 'react'
-import { Flex, Input, message } from 'antd'
-import AIConfigForm from './ai-config'
+import { Flex, Input } from 'antd'
 import TabSelect from '../footer/tab-select'
 import AiChatHistory from './ai-chat-history'
 import uid from '../../common/uid'
@@ -20,13 +19,6 @@ import './ai.styl'
 
 const { TextArea } = Input
 const MAX_HISTORY = 100
-const aiConfigsArr = [
-  'baseURLAI',
-  'modelAI',
-  'roleAI',
-  'apiKeyAI',
-  'apiPathAI'
-]
 
 export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
@@ -42,7 +34,7 @@ export default function AIChat (props) {
   }
 
   const handleSubmit = useCallback(async function () {
-    if (aiConfigMissing()) {
+    if (window.store.aiConfigMissing()) {
       window.store.toggleAIConfig()
     }
     if (!prompt.trim() || isLoading) return
@@ -82,30 +74,6 @@ export default function AIChat (props) {
     setIsLoading(false)
   }, [prompt, isLoading, props.config])
 
-  function handleConfigSubmit (values) {
-    window.store.updateConfig(values)
-    message.success('Saved')
-  }
-
-  function getInitialValues () {
-    const res = pick(props.config, aiConfigsArr)
-    if (!res.languageAI) {
-      res.languageAI = window.store.getLangName()
-    }
-    return res
-  }
-
-  const renderConfig = useCallback(() => {
-    if (!props.showAIConfig) return null
-    return (
-      <AIConfigForm
-        initialValues={getInitialValues()}
-        onSubmit={handleConfigSubmit}
-        showAIConfig={props.showAIConfig}
-      />
-    )
-  }, [props.showAIConfig, props.config])
-
   function renderHistory () {
     return (
       <AiChatHistory
@@ -122,10 +90,6 @@ export default function AIChat (props) {
     window.store.aiChatHistory = []
   }
 
-  function aiConfigMissing () {
-    return aiConfigsArr.some(k => !props.config[k])
-  }
-
   function renderSendIcon () {
     if (isLoading) {
       return <LoadingOutlined />
@@ -134,6 +98,7 @@ export default function AIChat (props) {
       <SendOutlined
         onClick={handleSubmit}
         className='mg1l pointer icon-hover'
+        title='Ctrl+Enter'
       />
     )
   }
@@ -143,7 +108,7 @@ export default function AIChat (props) {
       setPrompt,
       handleSubmit
     })
-    if (aiConfigMissing()) {
+    if (window.store.aiConfigMissing()) {
       window.store.toggleAIConfig()
     }
     return () => {
@@ -168,6 +133,7 @@ export default function AIChat (props) {
           placeholder='Enter your prompt here'
           autoSize={{ minRows: 3, maxRows: 10 }}
           disabled={isLoading}
+          className='ai-chat-textarea'
         />
         <Flex className='ai-chat-terminals' justify='space-between' align='center'>
           <Flex align='center'>
@@ -188,7 +154,6 @@ export default function AIChat (props) {
             <HelpIcon
               link={aiConfigWikiLink}
             />
-            {renderConfig()}
           </Flex>
           {renderSendIcon()}
         </Flex>

package/client/components/ai/ai-config-props.js

@@ -0,0 +1,7 @@
+export const aiConfigsArr = [
+  'baseURLAI',
+  'modelAI',
+  'roleAI',
+  'apiKeyAI',
+  'apiPathAI'
+]

package/client/components/ai/ai-config.jsx

@@ -3,12 +3,12 @@ import {
   Input,
   Button,
   AutoComplete,
-  Modal,
   Alert,
   Space
 } from 'antd'
 import { useEffect, useState } from 'react'
 import Link from '../common/external-link'
+import AiCache from './ai-cache'
 import {
   aiConfigWikiLink
 } from '../../common/constants'
@@ -61,10 +61,6 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     onSubmit(values)
   }
 
-  function handleCancel () {
-    window.store.toggleAIConfig()
-  }
-
   function handleChange (v) {
     const options = getModelOptions(v)
     setModelOptions(options)
@@ -76,16 +72,9 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
   if (!showAIConfig) {
     return null
   }
-  const title = 'AI ' + e('setting')
   const defaultLangs = window.store.getLangNames().map(l => ({ value: l }))
   return (
-    <Modal
-      title={title}
-      open
-      onCancel={handleCancel}
-      footer={null}
-      width='90%'
-    >
+    <>
       <Alert
         message={
           <Link to={aiConfigWikiLink}>WIKI: {aiConfigWikiLink}</Link>
@@ -98,6 +87,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         onFinish={handleSubmit}
         initialValues={initialValues}
         layout='vertical'
+        className='ai-config-form'
       >
         <Form.Item label='API URL' required>
           <Space.Compact block>
@@ -181,6 +171,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           </Button>
         </Form.Item>
       </Form>
-    </Modal>
+      <AiCache />
+    </>
   )
 }

package/client/components/ai/ai.styl

@@ -15,10 +15,6 @@
   overflow-y auto
   overflow-x hidden
 
-.ai-config-form
-  height 200px
-  overflow-y auto
-
 .chat-history-item
   .code-block
     border 1px dashed text

package/client/components/ai/providers.js

@@ -3,12 +3,12 @@ export default [
     label: 'OpenAI',
     baseURL: 'https://api.openai.com/v1',
     homepage: 'https://openai.com',
-    models: ['gpt-4', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k']
+    models: ['gpt-4', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4.5']
   },
   {
     label: 'DeepSeek',
     baseURL: 'https://api.deepseek.com/v1',
     homepage: 'https://deepseek.com',
-    models: ['deepseek-chat', 'deepseek-coder']
+    models: ['deepseek-chat', 'deepseek-coder', 'deepseek-reasoner']
   }
 ]

package/client/components/batch-op/batch-op-entry.jsx

@@ -6,7 +6,7 @@ export const BatchOp = lazy(() => import('./batch-op'))
 // Wrap BatchOp with Suspense
 export default function BatchOpEntry (props) {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<>Loading...</>}>
       <BatchOp {...props} />
     </Suspense>
   )

package/client/components/batch-op/batch-op.jsx

@@ -479,7 +479,7 @@ export default class BatchOp extends PureComponent {
     }
 
     return (
-      <div>
+      <>
         <div className='pd1y'>
           <h2>
             {e('batchOperation')}
@@ -555,7 +555,7 @@ export default class BatchOp extends PureComponent {
         <div className='pd1y'>
           {this.renderTables()}
         </div>
-      </div>
+      </>
     )
   }
 

package/client/components/bookmark-form/form-ssh-common.jsx

@@ -61,7 +61,7 @@ export default function renderCommon (props) {
     })
   }
   return (
-    <div>
+    <>
       <FormItem
         {...formItemLayout}
         label={e('host')}
@@ -84,7 +84,6 @@ export default function renderCommon (props) {
         }
         <FormItem noStyle name='host'>
           <InputAutoFocus
-            selectall='yes'
             name='host'
             onBlur={props.onBlur}
             onPaste={e => props.onPaste(e, form)}
@@ -223,6 +222,6 @@ export default function renderCommon (props) {
           }
         </Select>
       </FormItem>
-    </div>
+    </>
   )
 }

package/client/components/bookmark-form/form-tabs.jsx

@@ -30,12 +30,12 @@ export default function renderTabs (props) {
       label: e('settings'),
       forceRender: true,
       children: (
-        <div>
+        <>
           {props.renderEnableSftp()}
           {props.uis}
           {props.renderProxy(props)}
           {props.renderX11()}
-        </div>
+        </>
       )
     },
     {

package/client/components/bookmark-form/render-connection-hopping.jsx

@@ -169,7 +169,7 @@ export default function renderConnectionHopping (props) {
     onSelect: handleFinish
   }
   return (
-    <div>
+    <>
       <FormItem
         name='connectionHoppings'
         className='hide'
@@ -269,6 +269,6 @@ export default function renderConnectionHopping (props) {
           </Button>
         </FormItem>
       </Form>
-    </div>
+    </>
   )
 }

package/client/components/bookmark-form/render-delayed-scripts.jsx

@@ -15,7 +15,7 @@ const e = window.translate
 export default function renderRunScripts () {
   function renderItem (field, i, add, remove) {
     return (
-      <div>
+      <>
         <Space
           align='center'
           key={field.key}
@@ -51,7 +51,7 @@ export default function renderRunScripts () {
             className='mg24b'
           />
         </Space>
-      </div>
+      </>
     )
   }
 
@@ -63,7 +63,7 @@ export default function renderRunScripts () {
         {
           (fields, { add, remove }, { errors }) => {
             return (
-              <div>
+              <>
                 {
                   fields.map((field, i) => {
                     return renderItem(field, i, add, remove)
@@ -79,7 +79,7 @@ export default function renderRunScripts () {
                     {e('loginScript')}
                   </Button>
                 </FormItem>
-              </div>
+              </>
             )
           }
         }

package/client/components/bookmark-form/render-ssh-tunnel.jsx

@@ -197,7 +197,7 @@ export default function renderSshTunnels (props) {
   }
 
   return (
-    <div>
+    <>
       <FormItem
         name='sshTunnels'
         className='hide'
@@ -291,6 +291,6 @@ export default function renderSshTunnels (props) {
           </Button>
         </FormItem>
       </Form>
-    </div>
+    </>
   )
 }

package/client/components/bookmark-form/use-quick-commands.jsx

@@ -57,7 +57,7 @@ export default function useQuickCmds (form, formData) {
       {
         (fields, { add, remove }, { errors }) => {
           return (
-            <div>
+            <>
               {
                 fields.map((field, i) => {
                   return renderItem(field, i, add, remove)
@@ -73,7 +73,7 @@ export default function useQuickCmds (form, formData) {
                   {e('newQuickCommand')}
                 </Button>
               </FormItem>
-            </div>
+            </>
           )
         }
       }

package/client/components/common/input-auto-focus.jsx

@@ -4,22 +4,14 @@ import {
 } from 'antd'
 
 export default function InputAutoFocus (props) {
-  const { type, selectall = false, ...rest } = props
+  const { type, ...rest } = props
   const inputRef = useRef(null)
-  const isFirstRender = useRef(true)
 
   useEffect(() => {
     if (inputRef.current) {
-      const { value } = props
-      if (value && selectall && isFirstRender.current) {
-        inputRef.current.focus()
-        inputRef.current.setSelectionRange(0, value.length)
-        isFirstRender.current = false
-      } else {
-        inputRef.current.focus()
-      }
+      inputRef.current.focus()
     }
-  }, [props.value, props.selectall])
+  }, [props.value])
 
   let InputComponent
   switch (type) {

package/client/components/main/main.jsx

@@ -14,6 +14,7 @@ import Resolutions from '../rdp/resolution-edit'
 import TerminalInteractive from '../terminal/terminal-interactive'
 import ConfirmModalStore from '../sftp/confirm-modal-store.jsx'
 import TransferConflictStore from '../sftp/transfer-conflict-store.jsx'
+import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../sftp/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
@@ -221,6 +222,9 @@ export default auto(function Index (props) {
     showAIConfig: store.showAIConfig,
     rightPanelTab
   }
+  const cmdSuggestionsProps = {
+    suggestions: store.terminalCommandSuggestions
+  }
   return (
     <ConfigProvider
       theme={uiThemeConfig}
@@ -281,6 +285,7 @@ export default auto(function Index (props) {
           sshConfigs={store.sshConfigs}
         />
         <ConnectionHoppingWarning {...warningProps} />
+        <TerminalCmdSuggestions {...cmdSuggestionsProps} />
       </div>
     </ConfigProvider>
   )

package/client/components/profile/profile-form-elem.jsx

@@ -71,9 +71,7 @@ export default function ProfileFormElem (props) {
         hasFeedback
         name='name'
       >
-        <InputAutoFocus
-          selectall='yes'
-        />
+        <InputAutoFocus />
       </FormItem>
       <ProfileTabs {...tabsProps} />
       <FormItem>

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -148,9 +148,7 @@ export default function QuickCommandForm (props) {
         hasFeedback
         name='name'
       >
-        <InputAutoFocus
-          selectall='yes'
-        />
+        <InputAutoFocus />
       </FormItem>
       {renderQm()}
       <FormItem

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -113,7 +113,7 @@ export default function renderQm () {
         {
           (fields, { add, remove }, { errors }) => {
             return (
-              <div>
+              <>
                 {
                   fields.map((field, i) => {
                     return renderItem(field, i, add, remove)
@@ -129,7 +129,7 @@ export default function renderQm () {
                     {e('quickCommand')}
                   </Button>
                 </FormItem>
-              </div>
+              </>
             )
           }
         }