@electerm/electerm-react 3.7.9 → 3.7.16

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

@@ -2,7 +2,7 @@
  * AI-powered bookmark generation form
  */
 import { useState, useEffect } from 'react'
-import { Button, Input, Space, Alert } from 'antd'
+import { Button, Input, Space, Alert, Progress } from 'antd'
 import message from '../common/message'
 import {
   RobotOutlined,
@@ -33,6 +33,16 @@ const EVENT_NAME_HISTORY = 'ai-bookmark-history-update'
 const { TextArea } = Input
 const e = window.translate
 
+function yieldToUI () {
+  return new Promise(resolve => {
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => resolve())
+      return
+    }
+    setTimeout(resolve, 0)
+  })
+}
+
 export default function AIBookmarkForm (props) {
   const { onCancel } = props
   const [description, setDescription] = useState(() => getItem(STORAGE_KEY_DESC) || '')
@@ -41,6 +51,7 @@ export default function AIBookmarkForm (props) {
   const [editMode, setEditMode] = useState(false)
   const [editorText, setEditorText] = useState('')
   const [selectedCategory, setSelectedCategory] = useState('default')
+  const [confirmProgress, setConfirmProgress] = useState(null)
 
   useEffect(() => {
     setItem(STORAGE_KEY_DESC, description)
@@ -132,7 +143,7 @@ export default function AIBookmarkForm (props) {
     return arr.map(d => fixBookmarkData(d))
   }
 
-  const createBookmark = async (bm) => {
+  const createBookmark = (bm) => {
     const { store } = window
     const { addItem } = store
     const fixedBm = fixBookmarkData(bm)
@@ -163,19 +174,35 @@ export default function AIBookmarkForm (props) {
 
   const handleConfirm = async () => {
     const parsed = getGeneratedData()
-    if (!parsed.length) {
+    if (!parsed.length || confirmProgress) {
       return
     }
-    for (const item of parsed) {
-      // set defaults like mcpAddBookmark would
-      await createBookmark(item)
+
+    setConfirmProgress({ current: 0, total: parsed.length })
+
+    try {
+      for (let i = 0; i < parsed.length; i++) {
+        // Yield between synchronous store mutations so large imports stay responsive.
+        await yieldToUI()
+        createBookmark(parsed[i])
+        setConfirmProgress({ current: i + 1, total: parsed.length })
+      }
+
+      setShowConfirm(false)
+      setDescription('') // Clear description only on successful creation
+      message.success(e('Done'))
+    } catch (error) {
+      console.error('AI bookmark creation error:', error)
+      message.error('Can not create bookmarks from AI response: ' + error.message)
+    } finally {
+      setConfirmProgress(null)
     }
-    setShowConfirm(false)
-    setDescription('') // Clear description only on successful creation
-    message.success(e('Done'))
   }
 
   const handleCancelConfirm = () => {
+    if (confirmProgress) {
+      return
+    }
     setShowConfirm(false)
   }
 
@@ -209,6 +236,9 @@ export default function AIBookmarkForm (props) {
   }
 
   const handleToggleEdit = () => {
+    if (confirmProgress) {
+      return
+    }
     setEditMode(!editMode)
   }
 
@@ -219,10 +249,16 @@ export default function AIBookmarkForm (props) {
   }
 
   const handleCopy = () => {
+    if (confirmProgress) {
+      return
+    }
     copy(editorText)
   }
 
   const handleSaveToFile = async () => {
+    if (confirmProgress) {
+      return
+    }
     const parsed = getGeneratedData()
     if (!parsed.length) {
       return
@@ -261,11 +297,29 @@ export default function AIBookmarkForm (props) {
       <AICategorySelect
         bookmarkGroups={window.store.bookmarkGroups}
         value={selectedCategory}
+        disabled={!!confirmProgress}
         onChange={setSelectedCategory}
       />
     )
   }
 
+  const renderConfirmProgress = () => {
+    if (!confirmProgress) {
+      return null
+    }
+    const { current, total } = confirmProgress
+    const percent = Math.floor(current * 100 / (total || 1))
+    return (
+      <div className='pd1y'>
+        <Progress
+          percent={percent}
+          status='active'
+          format={() => `${current}/${total}`}
+        />
+      </div>
+    )
+  }
+
   const textAreaProps = {
     value: description,
     onChange: e => setDescription(e.target.value),
@@ -284,7 +338,7 @@ export default function AIBookmarkForm (props) {
 
   function renderQuickConnectBtn () {
     const parsed = getGeneratedData()
-    if (!parsed.length || !parsed[0] || parsed.length > 1) {
+    if (!parsed.length || !parsed[0] || parsed.length > 1 || confirmProgress) {
       return null
     }
     return (
@@ -295,7 +349,7 @@ export default function AIBookmarkForm (props) {
   }
 
   const modalProps = {
-    title: e('confirmBookmarkData') || 'Confirm Bookmark Data',
+    title: e('bookmarks') + ' ' + e('preview'),
     open: showConfirm,
     onCancel: handleCancelConfirm,
     footer: (
@@ -304,7 +358,12 @@ export default function AIBookmarkForm (props) {
           <CloseOutlined /> {e('cancel')}
         </Button>
         {renderQuickConnectBtn()}
-        <Button type='primary' onClick={handleConfirm}>
+        <Button
+          type='primary'
+          onClick={handleConfirm}
+          loading={!!confirmProgress}
+          disabled={!!confirmProgress}
+        >
           <CheckOutlined /> {e('confirm')}
         </Button>
       </div>
@@ -315,19 +374,22 @@ export default function AIBookmarkForm (props) {
   const editBtnProps = {
     icon: editMode ? <EyeOutlined /> : <EditOutlined />,
     title: editMode ? e('preview') : e('edit'),
-    onClick: handleToggleEdit
+    onClick: handleToggleEdit,
+    disabled: !!confirmProgress
   }
 
   const copyBtnProps = {
     icon: <CopyOutlined />,
     title: e('copy'),
-    onClick: handleCopy
+    onClick: handleCopy,
+    disabled: !!confirmProgress
   }
 
   const downloadBtnProps = {
     icon: <DownloadOutlined />,
     title: e('download'),
-    onClick: handleSaveToFile
+    onClick: handleSaveToFile,
+    disabled: !!confirmProgress
   }
 
   const cancelProps = {
@@ -378,6 +440,7 @@ export default function AIBookmarkForm (props) {
             <Button {...downloadBtnProps} />
           </Space.Compact>
         </div>
+        {renderConfirmProgress()}
         <div className='pd1y'>
           {renderCategorySelect()}
         </div>

package/client/components/bookmark-form/bookmark-schema.js

@@ -6,9 +6,9 @@ const bookmarkSchema = {
     username: 'string (required) - SSH username',
     password: 'string - password for authentication',
     privateKey: 'string - private key content or path for key-based auth',
-    passphrase: 'string - passphrase for private key/cetificate',
+    passphrase: 'string - passphrase for private key/certificate',
     certificate: 'string - certificate content',
-    authType: 'string - auth type (password|privateKey|profiles)',
+    authType: 'string - auth type (password|privateKey|profiles), when have profile, should be profiles',
     profile: 'string - profile id to reuse saved auth',
     title: 'string - bookmark title',
     description: 'string - bookmark description',

package/client/components/bookmark-form/common/ai-category-select.jsx

@@ -6,7 +6,8 @@ const e = window.translate
 export default function AICategorySelect ({
   bookmarkGroups = [],
   value,
-  onChange
+  onChange,
+  disabled = false
 }) {
   const tree = formatBookmarkGroups(bookmarkGroups)
 
@@ -24,6 +25,7 @@ export default function AICategorySelect ({
         treeData={tree}
         treeDefaultExpandAll
         showSearch
+        disabled={disabled}
         onChange={handleChange}
         style={{ minWidth: 200 }}
       />

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

@@ -57,6 +57,7 @@ export default class BookmarkIndex2 extends PureComponent {
 
   componentWillUnmount () {
     clearTimeout(this.timer)
+    clearTimeout(this.timer1)
   }
 
   getInitAiModeState () {
@@ -64,7 +65,10 @@ export default class BookmarkIndex2 extends PureComponent {
     if (v !== true) {
       return false
     }
-    delete window.et.openBookmarkWithAIMode
+    this.timer1 = setTimeout(() => {
+      delete window.et.openBookmarkWithAIMode
+    }, 1000)
+
     return true
   }
 

package/client/components/terminal/shell.js

@@ -143,11 +143,9 @@ export function getShellIntegrationCommand (shellType = 'bash') {
   return wrapSilent(cmd, shellType)
 }
 export async function detectRemoteShell (pid) {
-  // 1. We try the version variables first.
-  // 2. We try your verified fish check: fish --version ...
-  // 3. We use ps -p $$ to check the process name (highly reliable in Linux/Docker).
-  // This syntax is safe for Bash, Zsh, and Fish.
-  const cmd = 'fish --version 2>/dev/null | grep -q fish && echo fish || { env | grep -q ZSH_VERSION && echo zsh || { env | grep -q BASH_VERSION && echo bash || { ps -p $$ -o comm= 2>/dev/null || echo sh; }; }; }'
+  // SSH exec runs under the account shell, so prefer the configured shell path
+  // instead of probing for any shell binary installed on the host.
+  const cmd = 'printf "%s\n" "$SHELL"'
 
   const r = await runCmd(pid, cmd)
     .catch((err) => {
@@ -157,8 +155,9 @@ export async function detectRemoteShell (pid) {
 
   const shell = r.trim().toLowerCase()
 
-  if (shell.includes('fish')) return 'fish'
-  if (shell.includes('zsh')) return 'zsh'
-  if (shell.includes('bash')) return 'bash'
-  return 'sh' // Fallback for sh/ash/dash
+  if (!shell) {
+    return 'sh'
+  }
+
+  return detectShellType(shell)
 }

package/client/components/terminal/terminal.jsx

@@ -953,6 +953,7 @@ class Term extends Component {
     this.term = term
     term.onSelectionChange(this.onSelectionChange)
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
+    this.fitAddon.fit()
     await this.remoteInit(term)
   }
 

package/client/components/tree-list/tree-expander.jsx

@@ -1,9 +1,29 @@
+import { memo } from 'react'
+
 import {
   CaretDownOutlined,
   CaretRightOutlined
 } from '@ant-design/icons'
 
-export default function TreeExpander (props) {
+function hasChildren (group) {
+  return Boolean(
+    group?.bookmarkIds?.length ||
+    group?.bookmarkGroupIds?.length
+  )
+}
+
+function isOpen (props) {
+  return Boolean(props.keyword) || props.expandedKeys.includes(props.group.id)
+}
+
+function areEqual (prevProps, nextProps) {
+  return prevProps.group?.id === nextProps.group?.id &&
+    hasChildren(prevProps.group) === hasChildren(nextProps.group) &&
+    Boolean(prevProps.keyword) === Boolean(nextProps.keyword) &&
+    isOpen(prevProps) === isOpen(nextProps)
+}
+
+function TreeExpander (props) {
   function onExpand (e) {
     e.stopPropagation()
     props.onExpand(group)
@@ -35,3 +55,5 @@ export default function TreeExpander (props) {
     </div>
   )
 }
+
+export default memo(TreeExpander, areEqual)

package/client/components/tree-list/tree-list-item.jsx

@@ -2,6 +2,8 @@
  * tree list for bookmarks
  */
 
+import { memo, useState } from 'react'
+
 import {
   CloseOutlined,
   CopyOutlined,
@@ -24,7 +26,31 @@ import uid from '../../common/uid'
 
 const e = window.translate
 
-export default function TreeListItem (props) {
+function getItemLabel (item, isGroup) {
+  return isGroup
+    ? item?.title || ''
+    : createName(item)
+}
+
+function areEqual (prevProps, nextProps) {
+  const prevSelected = prevProps.selectedItemId === prevProps.item.id
+  const nextSelected = nextProps.selectedItemId === nextProps.item.id
+
+  return prevProps.isGroup === nextProps.isGroup &&
+    prevProps.parentId === nextProps.parentId &&
+    prevProps.staticList === nextProps.staticList &&
+    prevProps.keyword === nextProps.keyword &&
+    prevSelected === nextSelected &&
+    prevProps.item.id === nextProps.item.id &&
+    prevProps.item.level === nextProps.item.level &&
+    prevProps.item.color === nextProps.item.color &&
+    prevProps.item.description === nextProps.item.description &&
+    getItemLabel(prevProps.item, prevProps.isGroup) === getItemLabel(nextProps.item, nextProps.isGroup)
+}
+
+function TreeListItem (props) {
+  const [hovered, setHovered] = useState(false)
+
   const handleDel = (e) => {
     props.del(props.item, e)
   }
@@ -225,6 +251,8 @@ export default function TreeListItem (props) {
     'data-item-id': item.id,
     'data-parent-id': props.parentId,
     'data-is-group': isGroup ? 'true' : 'false',
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
     onDragOver,
     onDragStart,
     onDragEnter,
@@ -250,18 +278,20 @@ export default function TreeListItem (props) {
         {colorTag}{tag}{titleHighlight}
       </div>
       {
-        isGroup
+        hovered && isGroup
           ? renderGroupBtns()
           : null
       }
       {
-        !isGroup
+        hovered && !isGroup
           ? renderDuplicateBtn()
           : null
       }
-      {renderOperationBtn()}
-      {renderDelBtn()}
-      {renderEditBtn()}
+      {hovered ? renderOperationBtn() : null}
+      {hovered ? renderDelBtn() : null}
+      {hovered ? renderEditBtn() : null}
     </div>
   )
 }
+
+export default memo(TreeListItem, areEqual)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.7.9",
+  "version": "3.7.16",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",