@electerm/electerm-react 1.100.20 → 1.100.46

package/client/common/constants.js

@@ -24,7 +24,8 @@ export const maxEditFileSize = 1024 * 3000
 export const defaultBookmarkGroupId = 'default'
 export const newBookmarkIdPrefix = 'new-bookmark'
 export const unexpectedPacketErrorDesc = 'Unexpected packet'
-export const noTerminalBgValue = 'no-termimal-bg'
+export const noTerminalBgValue = '[🚫]'
+export const textTerminalBgValue = '[📝]'
 export const sftpRetryInterval = 3000
 export const maxBookmarkGroupTitleLength = 33
 export const termControlHeight = 32

package/client/common/default-setting.js

@@ -24,6 +24,10 @@ export default {
   terminalBackgroundFilterBrightness: 1,
   terminalBackgroundFilterGrayscale: 0,
   terminalBackgroundFilterContrast: 1,
+  terminalBackgroundText: '',
+  terminalBackgroundTextSize: 48,
+  terminalBackgroundTextColor: '#ffffff',
+  terminalBackgroundTextFontFamily: 'Maple Mono',
   rendererType: 'canvas',
   terminalType: 'xterm-256color',
   keepaliveCountMax: 10,
@@ -68,5 +72,6 @@ export default {
   sshSftpSplitView: false,
   showCmdSuggestions: false,
   startDirectoryLocal: '',
-  allowMultiInstance: false
+  allowMultiInstance: false,
+  disableDeveloperTool: false
 }

package/client/common/get-category-color.js

@@ -0,0 +1,19 @@
+/**
+ * Get default color from current category or random color
+ */
+
+import { getRandomDefaultColor } from './rand-hex-color.js'
+
+export function getColorFromCategory (bookmarkGroups, currentBookmarkGroupId) {
+  if (!currentBookmarkGroupId || !bookmarkGroups) {
+    return getRandomDefaultColor()
+  }
+
+  const currentGroup = bookmarkGroups.find(group => group.id === currentBookmarkGroupId)
+
+  if (currentGroup && currentGroup.color) {
+    return currentGroup.color
+  }
+
+  return getRandomDefaultColor()
+}

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

@@ -10,7 +10,7 @@ export default auto(function AIChatHistory ({ history }) {
     if (historyRef.current) {
       historyRef.current.scrollTop = historyRef.current.scrollHeight
     }
-  }, [history.length])
+  }, [history])
   if (!history.length) {
     return <div />
   }

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

@@ -39,42 +39,128 @@ export default function AIChat (props) {
     }
     if (!prompt.trim() || isLoading) return
     setIsLoading(true)
-    const aiResponse = await window.pre.runGlobalAsync(
-      'AIchat',
-      prompt,
-      props.config.modelAI,
-      buildRole(),
-      props.config.baseURLAI,
-      props.config.apiPathAI,
-      props.config.apiKeyAI,
-      props.config.proxyAI
-    ).catch(
-      window.store.onError
-    )
-    if (aiResponse && aiResponse.error) {
-      return window.store.onError(
-        new Error(aiResponse.error)
-      )
-    }
-    window.store.aiChatHistory.push({
+
+    // Create a placeholder entry for the streaming response
+    const chatId = uid()
+    const chatEntry = {
       prompt,
-      response: aiResponse.response,
+      response: '', // Will be updated as stream arrives
+      isStreaming: false,
+      sessionId: null,
       ...pick(props.config, [
         'modelAI',
         'roleAI',
         'baseURLAI'
       ]),
       timestamp: Date.now(),
-      id: uid()
-    })
+      id: chatId
+    }
+
+    window.store.aiChatHistory.push(chatEntry)
+
+    try {
+      const aiResponse = await window.pre.runGlobalAsync(
+        'AIchat',
+        prompt,
+        props.config.modelAI,
+        buildRole(),
+        props.config.baseURLAI,
+        props.config.apiPathAI,
+        props.config.apiKeyAI,
+        props.config.proxyAI,
+        true // Enable streaming for chat
+      )
+
+      if (aiResponse && aiResponse.error) {
+        // Remove the placeholder entry and show error
+        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
+        if (index !== -1) {
+          window.store.aiChatHistory.splice(index, 1)
+        }
+        setIsLoading(false)
+        return window.store.onError(
+          new Error(aiResponse.error)
+        )
+      }
+
+      if (aiResponse && aiResponse.isStream && aiResponse.sessionId) {
+        // Handle streaming response with polling
+        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
+        if (index !== -1) {
+          window.store.aiChatHistory[index].isStreaming = true
+          window.store.aiChatHistory[index].sessionId = aiResponse.sessionId
+          window.store.aiChatHistory[index].response = aiResponse.content || ''
+        }
+
+        // Start polling for updates
+        pollStreamContent(aiResponse.sessionId, chatId)
+      } else if (aiResponse && aiResponse.response) {
+        // Handle non-streaming response (fallback)
+        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
+        if (index !== -1) {
+          window.store.aiChatHistory[index].response = aiResponse.response
+          window.store.aiChatHistory[index].isStreaming = false
+        }
+        setIsLoading(false)
+      }
+    } catch (error) {
+      // Remove the placeholder entry and show error
+      const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
+      if (index !== -1) {
+        window.store.aiChatHistory.splice(index, 1)
+      }
+      setIsLoading(false)
+      window.store.onError(error)
+    }
 
     if (window.store.aiChatHistory.length > MAX_HISTORY) {
       window.store.aiChatHistory.splice(MAX_HISTORY)
     }
     setPrompt('')
-    setIsLoading(false)
   }, [prompt, isLoading])
 
+  // Function to poll for streaming content updates
+  const pollStreamContent = async (sessionId, chatId) => {
+    try {
+      const streamResponse = await window.pre.runGlobalAsync('getStreamContent', sessionId)
+
+      if (streamResponse && streamResponse.error) {
+        // Remove the entry and show error
+        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
+        if (index !== -1) {
+          window.store.aiChatHistory.splice(index, 1)
+        }
+        setIsLoading(false)
+        return window.store.onError(new Error(streamResponse.error))
+      }
+
+      // Update the chat entry with new content
+      const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
+      if (index !== -1) {
+        window.store.aiChatHistory[index].response = streamResponse.content || ''
+        window.store.aiChatHistory[index].isStreaming = streamResponse.hasMore
+
+        // Force re-render by updating the array reference
+        window.store.aiChatHistory = [...window.store.aiChatHistory]
+
+        // Continue polling if there's more content
+        if (streamResponse.hasMore) {
+          setTimeout(() => pollStreamContent(sessionId, chatId), 200) // Poll every 200ms
+        } else {
+          setIsLoading(false)
+        }
+      }
+    } catch (error) {
+      // Remove the entry and show error
+      const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
+      if (index !== -1) {
+        window.store.aiChatHistory.splice(index, 1)
+      }
+      setIsLoading(false)
+      window.store.onError(error)
+    }
+  }
+
   function renderHistory () {
     return (
       <AiChatHistory

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

@@ -40,22 +40,22 @@ export default function AIOutput ({ item }) {
 
     return (
       <div className='code-block'>
-        <pre>
-          <code className={className} {...rest}>
-            {children}
-          </code>
-        </pre>
-        <div className='code-block-actions'>
+        <div className='code-block-actions alignright'>
           <CopyOutlined
-            className='code-action-icon pointer'
+            className='code-action-icon pointer iblock'
             onClick={copyToClipboard}
             title={e('copy')}
           />
           <PlayCircleOutlined
-            className='code-action-icon pointer mg1l'
+            className='code-action-icon pointer mg1l iblock'
             onClick={runInTerminal}
           />
         </div>
+        <pre>
+          <code className={className} {...rest}>
+            {children}
+          </code>
+        </pre>
       </div>
     )
   }

package/client/components/ai/ai.styl

@@ -22,11 +22,11 @@
     border-radius 3px
     pre
       margin-bottom 0
-    .code-block-actions
-      display none
-    &:hover
-      .code-block-actions
-        display block
+    // .code-block-actions
+    //   display block
+    // &:hover
+    //   .code-block-actions
+    //     display block
 
 .ai-chat-input
   position relative
@@ -63,4 +63,4 @@
     font-size 12px
     top 8px
     right -4px
-    font-weight bold
+    font-weight bold

package/client/components/bg/css-overwrite.jsx

@@ -3,7 +3,7 @@
 */
 import { Component } from 'react'
 import fs from '../../common/fs'
-import { noTerminalBgValue } from '../../common/constants'
+import { noTerminalBgValue, textTerminalBgValue } from '../../common/constants'
 import { generateMosaicBackground } from './shapes'
 
 export default class CssOverwrite extends Component {
@@ -20,7 +20,11 @@ export default class CssOverwrite extends Component {
       'terminalBackgroundFilterOpacity',
       'terminalBackgroundFilterBrightness',
       'terminalBackgroundFilterContrast',
-      'terminalBackgroundFilterGrayscale'
+      'terminalBackgroundFilterGrayscale',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ]
     const globalChanged = bgProps.some(prop => this.props[prop] !== nextProps[prop])
     if (globalChanged) {
@@ -59,7 +63,7 @@ export default class CssOverwrite extends Component {
   }
 
   // Common function to handle background image style creation
-  createBackgroundStyle = async (imagePath) => {
+  createBackgroundStyle = async (imagePath, textBgProps = null) => {
     if (!imagePath || imagePath === '') {
       return ''
     }
@@ -73,6 +77,8 @@ export default class CssOverwrite extends Component {
       st = 'index'
     } else if (noTerminalBgValue === imagePath) {
       st = 'none'
+    } else if (textTerminalBgValue === imagePath) {
+      st = 'text'
     } else if (imagePath && !isWebImg) {
       content = await fs.readFileAsBase64(imagePath)
         .catch(log.error)
@@ -113,6 +119,27 @@ export default class CssOverwrite extends Component {
     const styles = []
     if (st === 'index') {
       styles.push(`content: '${tab.tabCount}'`)
+    } else if (st === 'text') {
+      const text = bg.terminalBackgroundText || this.props.terminalBackgroundText || ''
+      const size = bg.terminalBackgroundTextSize || this.props.terminalBackgroundTextSize || 48
+      const color = bg.terminalBackgroundTextColor || this.props.terminalBackgroundTextColor || '#ffffff'
+      const fontFamily = bg.terminalBackgroundTextFontFamily || this.props.terminalBackgroundTextFontFamily || 'monospace'
+      if (text) {
+        styles.push(
+          `content: '${text.replace(/'/g, "\\'").replace(/\n/g, '\\A ')}'`,
+          `font-size: ${size}px`,
+          `color: ${color}`,
+          'white-space: pre-wrap',
+          'word-wrap: break-word',
+          'text-align: center',
+          'display: flex',
+          'align-items: center',
+          'justify-content: center',
+          `font-family: ${fontFamily}`,
+          'opacity: 0.3',
+          'background-image: none' // Override default background when text is set
+        )
+      }
     } else if (st !== 'none') {
       styles.push(
         `background-image: ${st}`,
@@ -135,7 +162,28 @@ export default class CssOverwrite extends Component {
 
     const styles = []
 
-    if (st !== 'none' && st !== 'index') {
+    if (st === 'text') {
+      const text = this.props.terminalBackgroundText || ''
+      const size = this.props.terminalBackgroundTextSize || 48
+      const color = this.props.terminalBackgroundTextColor || '#ffffff'
+      const fontFamily = this.props.terminalBackgroundTextFontFamily || 'monospace'
+      if (text) {
+        styles.push(
+          `content: '${text.replace(/'/g, "\\'").replace(/\n/g, '\\A ')}'`,
+          `font-size: ${size}px`,
+          `color: ${color}`,
+          'white-space: pre-wrap',
+          'word-wrap: break-word',
+          'text-align: center',
+          'display: flex',
+          'align-items: center',
+          'justify-content: center',
+          `font-family: ${fontFamily}`,
+          'opacity: 0.3',
+          'background-image: none' // Override default background when text is set
+        )
+      }
+    } else if (st !== 'none' && st !== 'index') {
       styles.push(
         `background-image: ${st}`,
         'background-position: center',

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

@@ -0,0 +1,80 @@
+/**
+ * Common bookmark category select component that automatically updates color when category changes
+ */
+
+import { useEffect } from 'react'
+import { TreeSelect, Form } from 'antd'
+import formatBookmarkGroups from './bookmark-group-tree-format'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function BookmarkCategorySelect ({
+  bookmarkGroups = [],
+  form,
+  formItemLayout,
+  name = 'category',
+  onChange
+}) {
+  const tree = formatBookmarkGroups(bookmarkGroups)
+
+  // Watch for category field changes using Form.useWatch
+  const categoryId = Form.useWatch(name, form)
+
+  // Find the selected category
+  const findCategory = (groups, id) => {
+    for (const group of groups) {
+      if (group.id === id) {
+        return group
+      }
+      if (group.bookmarkGroupTree && group.bookmarkGroupTree.length > 0) {
+        const found = findCategory(group.bookmarkGroupTree, id)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  // Watch for category field changes and update color accordingly
+  useEffect(() => {
+    if (categoryId) {
+      const category = findCategory(bookmarkGroups, categoryId)
+      if (category && category.color) {
+        form.setFieldsValue({
+          color: category.color
+        })
+      }
+    }
+  }, [categoryId, bookmarkGroups, form])
+
+  const handleCategoryChange = (categoryId) => {
+    const category = findCategory(bookmarkGroups, categoryId)
+
+    // Only update the color field if the category has a color
+    if (category && category.color) {
+      form.setFieldsValue({
+        color: category.color
+      })
+    }
+
+    // Call the original onChange if provided
+    if (onChange) {
+      onChange(categoryId)
+    }
+  }
+
+  return (
+    <FormItem
+      {...formItemLayout}
+      label={e('bookmarkCategory')}
+      name={name}
+    >
+      <TreeSelect
+        treeData={tree}
+        treeDefaultExpandAll
+        showSearch
+        onChange={handleCategoryChange}
+      />
+    </FormItem>
+  )
+}

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

@@ -5,7 +5,6 @@ import {
   Input,
   InputNumber,
   Radio,
-  TreeSelect,
   Select,
   Form
 } from 'antd'
@@ -15,9 +14,9 @@ import {
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 import InputAutoFocus from '../common/input-auto-focus'
 import encodes from './encodes'
-import formatBookmarkGroups from './bookmark-group-tree-format'
 import renderRunScripts from './render-delayed-scripts.jsx'
 import { ColorPickerItem } from './color-picker-item.jsx'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 import './bookmark-form.styl'
 
@@ -38,7 +37,6 @@ export default function renderCommon (props) {
     onChangeAuthType,
     filterAuthType = a => a
   } = props
-  const tree = formatBookmarkGroups(bookmarkGroups)
   const authTypesFiltered = authTypes.filter(filterAuthType)
 
   // ips is ipaddress string[]
@@ -140,17 +138,11 @@ export default function renderCommon (props) {
           step={1}
         />
       </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={e('bookmarkCategory')}
-        name='category'
-      >
-        <TreeSelect
-          treeData={tree}
-          treeDefaultExpandAll
-          showSearch
-        />
-      </FormItem>
+      <BookmarkCategorySelect
+        bookmarkGroups={bookmarkGroups}
+        form={form}
+        formItemLayout={formItemLayout}
+      />
       <FormItem
         {...formItemLayout}
         label={e('title')}

package/client/components/bookmark-form/ftp-form-ui.jsx

@@ -7,7 +7,6 @@ import {
   Input,
   Form,
   InputNumber,
-  TreeSelect,
   Switch
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -19,10 +18,10 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import ProfileItem from './profile-form-item'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -55,7 +54,7 @@ export default function FtpFormUi (props) {
     type: terminalFtpType,
     port: 21,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     user: '',
     password: '',
     secure: false
@@ -66,7 +65,6 @@ export default function FtpFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -131,17 +129,10 @@ export default function FtpFormUi (props) {
         >
           <Switch />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label='type'

package/client/components/bookmark-form/local-form-ui.jsx

@@ -6,7 +6,6 @@ import { useEffect } from 'react'
 import {
   Tabs,
   Input,
-  TreeSelect,
   Form
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -14,7 +13,6 @@ import {
   newBookmarkIdPrefix,
   terminalLocalType
 } from '../../common/constants'
-import formatBookmarkGroups from './bookmark-group-tree-format'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import useSubmit from './use-submit'
 import useUI from './use-ui'
@@ -24,7 +22,8 @@ import renderTermBg from './render-bg'
 import { defaults } from 'lodash-es'
 import renderRunScripts from './render-delayed-scripts.jsx'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -60,7 +59,7 @@ export default function LocalFormUi (props) {
     term: props.store.config.terminalType,
     displayRaw: false,
     type: terminalLocalType,
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     runScripts: [{}],
     enableSsh: true
   }
@@ -69,7 +68,6 @@ export default function LocalFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         {renderRunScripts()}
@@ -90,17 +88,10 @@ export default function LocalFormUi (props) {
         >
           <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label='type'

package/client/components/bookmark-form/rdp-form-ui.jsx

@@ -7,7 +7,6 @@ import {
   Input,
   Form,
   InputNumber,
-  TreeSelect,
   Alert
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -20,11 +19,11 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import ProfileItem from './profile-form-item'
 import Link from '../common/external-link'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -57,7 +56,7 @@ export default function RdpFormUi (props) {
     type: terminalRdpType,
     port: 3389,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor()
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId)
 
   }
   initialValues = defaults(initialValues, defaultValues)
@@ -65,7 +64,6 @@ export default function RdpFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     const alertProps = {
       message: (
         <Link to={rdpWikiLink}>WIKI: {rdpWikiLink}</Link>
@@ -150,17 +148,10 @@ export default function RdpFormUi (props) {
         >
           <Input />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label='type'