@electerm/electerm-react 2.8.16 → 2.10.26

package/client/common/constants.js

@@ -67,7 +67,8 @@ export const connectionMap = buildConst([
   'web',
   'rdp',
   'vnc',
-  'ftp'
+  'ftp',
+  'spice'
 ])
 
 export const authTypeMap = buildConst([
@@ -143,6 +144,7 @@ export const terminalSerialType = 'serial'
 export const terminalTelnetType = 'telnet'
 export const terminalLocalType = 'local'
 export const terminalFtpType = 'ftp'
+export const terminalSpiceType = 'spice'
 export const openedSidebarKey = 'opened-sidebar'
 export const sidebarPinnedKey = 'sidebar-pinned'
 export const pinnedQuickCommandBarKey = 'pinned-quick-command-bar'
@@ -242,8 +244,6 @@ export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-fo
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
 export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const aiConfigWikiLink = 'https://github.com/electerm/electerm/wiki/AI-model-config-guide'
-export const rdpWikiLink = 'https://github.com/electerm/electerm/wiki/RDP-limitation'
-export const vncWikiLink = 'https://github.com/electerm/electerm/wiki/VNC-session-known-issues'
 export const modals = {
   hide: 0,
   setting: 1,

package/client/common/pre.js

@@ -12,32 +12,6 @@ const props = runSync('getConstants')
 props.env = JSON.parse(props.env)
 props.versions = JSON.parse(props.versions)
 
-// Encoding function
-function encodeUint8Array (uint8Array) {
-  let str = ''
-  const len = uint8Array.byteLength
-
-  for (let i = 0; i < len; i++) {
-    str += String.fromCharCode(uint8Array[i])
-  }
-
-  return btoa(str)
-}
-
-// Decoding function
-function decodeBase64String (base64String) {
-  const str = atob(base64String)
-  const len = str.length
-
-  const uint8Array = new Uint8Array(len)
-
-  for (let i = 0; i < len; i++) {
-    uint8Array[i] = str.charCodeAt(i)
-  }
-
-  return uint8Array
-}
-
 window.pre = {
   requireAuth: runSync('shouldAuth'),
   readClipboard: () => {
@@ -71,101 +45,8 @@ const path = {
   basename: window.pre.basename
 }
 
-const fs = {
-  stat: (path, cb) => {
-    window.fs.statCustom(path)
-      .catch(err => cb(err))
-      .then(obj => {
-        obj.isDirectory = () => obj.isD
-        obj.isFile = () => obj.isF
-        cb(undefined, obj)
-      })
-  },
-  access: (...args) => {
-    const cb = args.pop()
-    window.fs.access(...args)
-      .then((data) => cb(undefined, data))
-      .catch((err) => cb(err))
-  },
-  open: (...args) => {
-    const cb = args.pop()
-    if (window.et.isWebApp) {
-      window.fs.openCustom(...args)
-        .then((data) => cb(undefined, data))
-        .catch((err) => cb(err))
-      return
-    }
-    runGlobalAsync('fsOpen', ...args)
-      .then((data) => cb(undefined, data))
-      .catch((err) => cb(err))
-  },
-  read: (p1, arr, ...args) => {
-    const cb = args.pop()
-    if (window.et.isWebApp) {
-      window.fs.readCustom(
-        p1,
-        arr.length,
-        ...args
-      )
-        .then((data) => {
-          const { n, newArr } = data
-          const newArr1 = decodeBase64String(newArr)
-          cb(undefined, n, newArr1)
-        })
-        .catch(err => cb(err))
-      return
-    }
-    runGlobalAsync('fsRead', p1, arr.length, ...args)
-      .then((data) => {
-        const { n, buffer } = data
-        cb(undefined, n, buffer)
-      })
-      .catch(err => cb(err))
-  },
-  close: (fd, cb) => {
-    if (window.et.isWebApp) {
-      window.fs.closeCustom(fd)
-        .then((data) => cb(undefined, data))
-        .catch((err) => cb(err))
-      return
-    }
-    runGlobalAsync('fsClose', fd)
-      .then((data) => cb(undefined, data))
-      .catch((err) => cb(err))
-  },
-  readdir: (p, cb) => {
-    window.fs.readdir(p)
-      .then((data) => cb(undefined, data))
-      .catch((err) => cb(err))
-  },
-  mkdir: (...args) => {
-    const cb = args.pop()
-    window.fs.mkdir(...args)
-      .then((data) => cb(undefined, data))
-      .catch((err) => cb(err))
-  },
-  write: (p1, buf, cb) => {
-    if (window.et.isWebApp) {
-      window.fs.writeCustom(p1, encodeUint8Array(buf))
-        .then((data) => cb(undefined, data))
-        .catch((err) => cb(err))
-      return
-    }
-    runGlobalAsync('fsWrite', p1, buf)
-      .then((data) => cb(undefined, data))
-      .catch((err) => cb(err))
-  },
-  realpath: (p, cb) => {
-    window.fs.realpath(p)
-      .then((data) => cb(undefined, data))
-      .catch((err) => cb(err))
-  },
-  constants: runSync('getFsContants')
-}
-
 window.reqs = {
-  path,
-  fs
+  path
 }
 
 function require (name) {

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

@@ -13,10 +13,14 @@ import {
   aiConfigWikiLink
 } from '../../common/constants'
 import Password from '../common/password'
+import AiHistory, { addHistoryItem } from './ai-history'
 
 // Comprehensive API provider configurations
 import providers from './providers'
 
+const STORAGE_KEY_CONFIG = 'ai_config_history'
+const EVENT_NAME_CONFIG = 'ai-config-history-update'
+
 const e = window.translate
 const defaultRoles = [
   {
@@ -66,14 +70,27 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
 
   const handleSubmit = async (values) => {
     onSubmit(values)
+    addHistoryItem(STORAGE_KEY_CONFIG, values, EVENT_NAME_CONFIG)
+  }
+
+  function handleSelectHistory (item) {
+    if (item && typeof item === 'object') {
+      form.setFieldsValue(item)
+    }
+  }
+
+  function renderHistoryItem (item) {
+    if (!item || typeof item !== 'object') return { label: 'Unknown', title: 'Unknown' }
+    const model = item.modelAI || 'Default Model'
+    const rolePrefix = item.roleAI ? item.roleAI.substring(0, 15) + '...' : ''
+    const label = `[${model}] ${rolePrefix}`
+    const title = `Model: ${item.modelAI}\nRole: ${item.roleAI}\nURL: ${item.baseURLAI}`
+    return { label, title }
   }
 
   function handleChange (v) {
     const options = getModelOptions(v)
     setModelOptions(options)
-    form.setFieldsValue({
-      modelAI: options[0]?.value || ''
-    })
   }
 
   if (!showAIConfig) {
@@ -199,6 +216,12 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           </Button>
         </Form.Item>
       </Form>
+      <AiHistory
+        storageKey={STORAGE_KEY_CONFIG}
+        eventName={EVENT_NAME_CONFIG}
+        onSelect={handleSelectHistory}
+        renderItem={renderHistoryItem}
+      />
       <AiCache />
     </>
   )

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

@@ -0,0 +1,46 @@
+import { Tag, Tooltip } from 'antd'
+
+export default function AiHistoryItem (props) {
+  const {
+    item,
+    onSelect,
+    onDelete,
+    renderItem
+  } = props
+
+  // If a custom render function is provided, use it to get the display string and title
+  // otherwise assume it's a string
+  let displayItem = ''
+  let fullItem = ''
+
+  if (renderItem) {
+    const renderedInfo = renderItem(item)
+    displayItem = renderedInfo.label
+    fullItem = renderedInfo.title || renderedInfo.label
+  } else {
+    fullItem = item
+    displayItem = item.length > 50 ? `${item.slice(0, 50)}...` : item
+  }
+
+  const isLong = fullItem.length > 50
+  const tagElem = (
+    <Tag
+      closable
+      onClose={(event) => onDelete(item, event)}
+      onClick={() => onSelect(item)}
+      className='pointer'
+    >
+      {displayItem}
+    </Tag>
+  )
+
+  return isLong
+    ? (
+      <Tooltip title={fullItem}>
+        {tagElem}
+      </Tooltip>
+      )
+    : (
+        tagElem
+      )
+}

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

@@ -0,0 +1,104 @@
+/**
+ * Generic AI history component
+ */
+import { useState, useEffect } from 'react'
+import { Space } from 'antd'
+import { HistoryOutlined } from '@ant-design/icons'
+import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
+import AiHistoryItem from './ai-history-item'
+
+const MAX_HISTORY = 20
+const e = window.translate
+
+export function getHistory (storageKey) {
+  return getItemJSON(storageKey, [])
+}
+
+export function addHistoryItem (storageKey, itemData, eventName) {
+  if (!itemData) return
+
+  // Standardize the check: if itemData is an object, we serialize it
+  // But wait, the comparison should be stable. We can rely on a unique identifier
+  // or a stringified version to avoid duplicates.
+  let history = getHistory(storageKey)
+  const itemStr = typeof itemData === 'string' ? itemData.trim() : JSON.stringify(itemData)
+
+  if (!itemStr) return
+
+  history = history.filter(h => {
+    const hStr = typeof h === 'string' ? h.trim() : JSON.stringify(h)
+    return hStr !== itemStr
+  })
+
+  // use original data structure to save
+  const dataToSave = typeof itemData === 'string' ? itemData.trim() : itemData
+
+  history.unshift(dataToSave)
+  if (history.length > MAX_HISTORY) {
+    history = history.slice(0, MAX_HISTORY)
+  }
+  setItemJSON(storageKey, history)
+
+  // Custom event to trigger update
+  if (eventName) {
+    window.dispatchEvent(new Event(eventName))
+  }
+}
+
+export default function AiHistory (props) {
+  const { onSelect, storageKey, eventName, renderItem } = props
+  const [history, setHistory] = useState([])
+
+  const loadHistory = () => {
+    setHistory(getHistory(storageKey))
+  }
+
+  useEffect(() => {
+    loadHistory()
+    if (eventName) {
+      window.addEventListener(eventName, loadHistory)
+      return () => {
+        window.removeEventListener(eventName, loadHistory)
+      }
+    }
+  }, [storageKey, eventName])
+
+  const handleDelete = (item, event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    const itemStr = typeof item === 'string' ? item : JSON.stringify(item)
+    const newHistory = history.filter(h => {
+      const hStr = typeof h === 'string' ? h : JSON.stringify(h)
+      return hStr !== itemStr
+    })
+    setHistory(newHistory)
+    setItemJSON(storageKey, newHistory)
+  }
+
+  if (!history.length) {
+    return null
+  }
+
+  return (
+    <div className='ai-bookmark-history pd1b'>
+      <div className='pd1b text-muted'>
+        <HistoryOutlined className='mg1r' />
+        <span className='mg1r'>{e('history') || 'History'}:</span>
+      </div>
+      <Space size={[8, 8]} wrap>
+        {history.map((item, index) => {
+          const keyStr = typeof item === 'string' ? item : JSON.stringify(item)
+          return (
+            <AiHistoryItem
+              key={keyStr + index}
+              item={item}
+              onSelect={onSelect}
+              onDelete={handleDelete}
+              renderItem={renderItem}
+            />
+          )
+        })}
+      </Space>
+    </div>
+  )
+}

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

@@ -0,0 +1,338 @@
+/**
+ * AI-powered bookmark generation form
+ */
+import { useState, useEffect } from 'react'
+import { Button, Input, message, Space, Alert } from 'antd'
+import {
+  RobotOutlined,
+  LoadingOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  EditOutlined,
+  CopyOutlined,
+  DownloadOutlined,
+  EyeOutlined
+} from '@ant-design/icons'
+import SimpleEditor from '../text-editor/simple-editor'
+import { copy } from '../../common/clipboard'
+import download from '../../common/download'
+import AICategorySelect from './common/ai-category-select.jsx'
+import HelpIcon from '../common/help-icon'
+import Modal from '../common/modal.jsx'
+import { buildPrompt } from './bookmark-schema.js'
+import { fixBookmarkData } from './fix-bookmark-default.js'
+import generate from '../../common/id-with-stamp'
+import AiHistory, { addHistoryItem } from '../ai/ai-history.jsx'
+import { getItem, setItem } from '../../common/safe-local-storage'
+
+const STORAGE_KEY_DESC = 'ai_bookmark_description'
+const STORAGE_KEY_HISTORY = 'ai_bookmark_history'
+const EVENT_NAME_HISTORY = 'ai-bookmark-history-update'
+const { TextArea } = Input
+const e = window.translate
+
+export default function AIBookmarkForm (props) {
+  const { onCancel } = props
+  const [description, setDescription] = useState(() => getItem(STORAGE_KEY_DESC) || '')
+  const [loading, setLoading] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [editMode, setEditMode] = useState(false)
+  const [editorText, setEditorText] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('default')
+
+  useEffect(() => {
+    setItem(STORAGE_KEY_DESC, description)
+  }, [description])
+
+  const handleGenerate = async () => {
+    if (window.store.aiConfigMissing()) {
+      window.store.toggleAIConfig()
+      return
+    }
+
+    if (!description.trim()) {
+      return message.warning(e('description') + ' required')
+    }
+
+    setLoading(true)
+
+    try {
+      const config = window.store.config
+      const prompt = buildPrompt(description)
+
+      const aiResponse = await window.pre.runGlobalAsync(
+        'AIchat',
+        prompt,
+        config.modelAI,
+        'You are a helpful assistant that generates bookmark configurations in JSON format.',
+        config.baseURLAI,
+        config.apiPathAI,
+        config.apiKeyAI,
+        config.proxyAI,
+        false // Disable streaming for structured response
+      )
+
+      if (aiResponse && aiResponse.error) {
+        throw new Error(aiResponse.error)
+      }
+
+      let bookmarkData
+      if (aiResponse && aiResponse.response) {
+        // Parse the JSON response
+        let jsonStr = aiResponse.response.trim()
+        // Remove markdown code blocks if present
+        if (jsonStr.startsWith('```json')) {
+          jsonStr = jsonStr.slice(7)
+        } else if (jsonStr.startsWith('```')) {
+          jsonStr = jsonStr.slice(3)
+        }
+        if (jsonStr.endsWith('```')) {
+          jsonStr = jsonStr.slice(0, -3)
+        }
+        jsonStr = jsonStr.trim()
+
+        bookmarkData = JSON.parse(jsonStr)
+        const pretty = JSON.stringify(bookmarkData, null, 2)
+        setEditorText(pretty)
+        // set default category when preview opens
+        setSelectedCategory('default')
+        setShowConfirm(true)
+        addHistoryItem(STORAGE_KEY_HISTORY, description, EVENT_NAME_HISTORY)
+      }
+    } catch (error) {
+      console.error('AI bookmark generation error:', error)
+      message.error(e('aiGenerateError') || 'AI generation failed: ' + error.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function getGeneratedData () {
+    if (!editorText) return message.warning(e('noData') || 'No data')
+    let parsed = null
+    try {
+      parsed = fixBookmarkData(JSON.parse(editorText))
+    } catch (err) {
+      return message.error(e('invalidJson') || 'Invalid JSON')
+    }
+    if (!parsed) return []
+    return Array.isArray(parsed) ? parsed : [parsed]
+  }
+
+  const createBookmark = async (bm) => {
+    const { store } = window
+    const { addItem } = store
+    const fixedBm = fixBookmarkData(bm)
+    if (!fixedBm.id) {
+      fixedBm.id = generate()
+    }
+    if (fixedBm.connectionHoppings?.length) {
+      fixedBm.hasHopping = true
+    }
+
+    // Add bookmark
+    addItem(fixedBm, 'bookmarks')
+
+    // Ensure the bookmark id is registered in its group
+    try {
+      const groupId = fixedBm.category || selectedCategory || 'default'
+      const group = window.store.bookmarkGroups.find(g => g.id === groupId)
+      if (group) {
+        group.bookmarkIds = [
+          ...new Set([...(group.bookmarkIds || []), fixedBm.id])
+        ]
+        fixedBm.color = group.color
+      }
+    } catch (err) {
+      console.error('Failed to update bookmark group:', err)
+    }
+  }
+
+  const handleConfirm = async () => {
+    const parsed = getGeneratedData()
+    if (!parsed.length) {
+      return
+    }
+    for (const item of parsed) {
+      // set defaults like mcpAddBookmark would
+      await createBookmark(item)
+    }
+    setShowConfirm(false)
+    setDescription('') // Clear description only on successful creation
+    message.success(e('Done'))
+  }
+
+  const handleCancelConfirm = () => {
+    setShowConfirm(false)
+  }
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel()
+    }
+  }
+
+  const handleToggleEdit = () => {
+    setEditMode(!editMode)
+  }
+
+  const handleEditorChange = (e) => {
+    // SimpleEditor passes event-like or value via onChange
+    const val = e && e.target ? e.target.value : e
+    setEditorText(val)
+  }
+
+  const handleCopy = () => {
+    copy(editorText)
+  }
+
+  const handleSaveToFile = async () => {
+    const parsed = getGeneratedData()
+    if (!parsed.length) {
+      return
+    }
+    const date = new Date().toISOString().slice(0, 10)
+    const fileName = `bookmarks-${date}.json`
+    await download(fileName, editorText)
+  }
+
+  const renderEditor = () => {
+    const editorProps = {
+      value: editorText,
+      onChange: handleEditorChange
+    }
+    return (
+      <SimpleEditor
+        {...editorProps}
+      />
+    )
+  }
+
+  const renderPreview = () => {
+    if (editMode) {
+      return renderEditor()
+    }
+    return (
+      <pre className='ai-bookmark-json-preview'>
+        {editorText}
+      </pre>
+    )
+  }
+
+  const renderCategorySelect = () => {
+    return (
+      <AICategorySelect
+        bookmarkGroups={window.store.bookmarkGroups}
+        value={selectedCategory}
+        onChange={setSelectedCategory}
+      />
+    )
+  }
+
+  const textAreaProps = {
+    value: description,
+    onChange: e => setDescription(e.target.value),
+    placeholder: e('createBookmarkByAI'),
+    autoSize: { minRows: 4, maxRows: 8 },
+    disabled: loading
+  }
+
+  const generateBtnProps = {
+    type: 'primary',
+    onClick: handleGenerate,
+    disabled: !description.trim(),
+    icon: loading ? <LoadingOutlined /> : <RobotOutlined />,
+    loading
+  }
+
+  const modalProps = {
+    title: e('confirmBookmarkData') || 'Confirm Bookmark Data',
+    open: showConfirm,
+    onCancel: handleCancelConfirm,
+    footer: (
+      <div className='custom-modal-footer-buttons'>
+        <Button onClick={handleCancelConfirm}>
+          <CloseOutlined /> {e('cancel')}
+        </Button>
+        <Button type='primary' onClick={handleConfirm}>
+          <CheckOutlined /> {e('confirm')}
+        </Button>
+      </div>
+    ),
+    width: '80%'
+  }
+
+  const editBtnProps = {
+    icon: editMode ? <EyeOutlined /> : <EditOutlined />,
+    title: editMode ? e('preview') : e('edit'),
+    onClick: handleToggleEdit
+  }
+
+  const copyBtnProps = {
+    icon: <CopyOutlined />,
+    title: e('copy'),
+    onClick: handleCopy
+  }
+
+  const downloadBtnProps = {
+    icon: <DownloadOutlined />,
+    title: e('download'),
+    onClick: handleSaveToFile
+  }
+
+  const cancelProps = {
+    onClick: handleCancel,
+    title: e('cancel'),
+    icon: <CloseOutlined />,
+    className: 'mg1l'
+  }
+
+  return (
+    <div className='ai-bookmark-form pd2'>
+      <div className='pd1b ai-bookmark-header'>
+        <span className='ai-title'>
+          <RobotOutlined className='mg1r' />
+          {e('createBookmarkByAI')}
+        </span>
+        <HelpIcon link='https://github.com/electerm/electerm/wiki/Create-bookmark-by-AI' />
+      </div>
+      <div className='pd1b'>
+        <Alert
+          type='info'
+          showIcon
+          title={e('aiSecurityNotice')}
+        />
+      </div>
+      <div className='pd1b'>
+        <TextArea {...textAreaProps} />
+      </div>
+      <AiHistory
+        storageKey={STORAGE_KEY_HISTORY}
+        eventName={EVENT_NAME_HISTORY}
+        onSelect={setDescription}
+      />
+      <div className='pd1t'>
+        <Button {...generateBtnProps}>
+          {e('submit')}
+        </Button>
+        <Button {...cancelProps}>
+          {e('cancel')}
+        </Button>
+      </div>
+
+      <Modal {...modalProps}>
+        <div className='pd1y'>
+          <Space.Compact className='ai-action-buttons'>
+            <Button {...editBtnProps} />
+            <Button {...copyBtnProps} />
+            <Button {...downloadBtnProps} />
+          </Space.Compact>
+        </div>
+        <div className='pd1y'>
+          {renderCategorySelect()}
+        </div>
+        {renderPreview()}
+      </Modal>
+    </div>
+  )
+}