@electerm/electerm-react 1.100.30 → 1.100.50

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,

package/client/common/file-drop-utils.js

@@ -0,0 +1,61 @@
+/**
+ * Common utilities for handling file drops
+ */
+
+import { getFolderFromFilePath } from '../components/sftp/file-read'
+import { typeMap } from './constants'
+
+/**
+ * Safely get file path from dropped file
+ * @param {File} file - File object from drop event
+ * @returns {string} - File path
+ */
+export const getFilePath = (file) => {
+  if (file.path) {
+    return file.path
+  }
+  // Try the official Electron 32+ method first if available
+  if (window.api && window.api.getPathForFile) {
+    return window.api.getPathForFile(file)
+  }
+  return file.name
+}
+
+/**
+ * Process dropped files and return file list
+ * @param {DataTransfer} dataTransfer - DataTransfer object from drop event
+ * @returns {Array} - Array of file objects
+ */
+export const getDropFileList = (dataTransfer) => {
+  const fromFile = dataTransfer.getData('fromFile')
+  if (fromFile) {
+    return [JSON.parse(fromFile)]
+  }
+
+  const { files } = dataTransfer
+  const res = []
+  for (let i = 0, len = files.length; i < len; i++) {
+    const item = files[i]
+    if (!item) {
+      continue
+    }
+
+    const filePath = getFilePath(item)
+    const isRemote = false
+    const fileObj = getFolderFromFilePath(filePath, isRemote)
+    res.push({
+      ...fileObj,
+      type: typeMap.local
+    })
+  }
+  return res
+}
+
+/**
+ * Check if filename contains unsafe characters
+ * @param {string} filename - Filename to check
+ * @returns {boolean} - True if unsafe
+ */
+export const isUnsafeFilename = (filename) => {
+  return /["'\n\r]/.test(filename)
+}

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-config.jsx

@@ -27,8 +27,8 @@ const defaultRoles = [
 ]
 
 const proxyOptions = [
-  { value: 'socks5://localhost:1080' },
-  { value: 'http://localhost:8080' },
+  { value: 'socks5://127.0.0.1:1080' },
+  { value: 'http://127.0.0.1:8080' },
   { value: 'https://proxy.example.com:3128' }
 ]
 
@@ -180,7 +180,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         <Form.Item
           label={e('proxy')}
           name='proxyAI'
-          tooltip='Proxy for AI API requests (e.g., socks5://localhost:1080)'
+          tooltip='Proxy for AI API requests (e.g., socks5://127.0.0.1:1080)'
         >
           <AutoComplete
             options={proxyOptions}

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/proxy.jsx

@@ -25,7 +25,7 @@ export default function renderProxy (props) {
           value: d
         }
       }),
-    placeholder: 'socks5://localhost:1080',
+    placeholder: 'socks5://127.0.0.1:1080',
     allowClear: true
   }
   return (

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

@@ -29,9 +29,9 @@ export default function renderSshTunnels (props) {
   const [initialValues] = useState({
     sshTunnel: 'forwardRemoteToLocal',
     sshTunnelLocalPort: 12200,
-    sshTunnelLocalHost: 'localhost',
+    sshTunnelLocalHost: '127.0.0.1',
     sshTunnelRemotePort: 12300,
-    sshTunnelRemoteHost: 'localhost'
+    sshTunnelRemoteHost: '127.0.0.1'
   })
   const [isDynamic, setter] = useState(formData.sshTunnel === 'dynamicForward')
   const [list, setList] = useState(formData.sshTunnels || [])
@@ -85,9 +85,9 @@ export default function renderSshTunnels (props) {
         // sshTunnel is forwardRemoteToLocal or forwardLocalToRemote or dynamicForward
         const {
           sshTunnel,
-          sshTunnelRemoteHost = 'localhost',
+          sshTunnelRemoteHost = '127.0.0.1',
           sshTunnelRemotePort = '',
-          sshTunnelLocalHost = 'localhost',
+          sshTunnelLocalHost = '127.0.0.1',
           sshTunnelLocalPort = '',
           name
         } = item

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

@@ -80,7 +80,11 @@ export default function BookmarkFormUI (props) {
       'terminalBackgroundFilterBlur',
       'terminalBackgroundFilterBrightness',
       'terminalBackgroundFilterGrayscale',
-      'terminalBackgroundFilterContrast'
+      'terminalBackgroundFilterContrast',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ])
   }
   initialValues = defaultsDeep(initialValues, defaultValues)

package/client/components/main/main.jsx

@@ -18,7 +18,7 @@ import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
-import { isMac, isWin } from '../../common/constants'
+import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
 import { ConfigProvider, notification, message } from 'antd'
@@ -117,7 +117,9 @@ export default auto(function Index (props) {
   const ext1 = {
     className: cls
   }
-  const bgTabs = config.terminalBackgroundImagePath === 'index' || config.terminalBackgroundImagePath === 'randomShape'
+  const bgTabs = config.terminalBackgroundImagePath === 'index' ||
+                  config.terminalBackgroundImagePath === 'randomShape' ||
+                  config.terminalBackgroundImagePath === textTerminalBgValue
     ? store.getTabs()
     : store.getTabs().filter(tab =>
       tab.terminalBackground?.terminalBackgroundImagePath

package/client/components/main/term-fullscreen.styl

@@ -14,17 +14,28 @@
     position fixed
     z-index 100
     background rgba(45, 245, 108, 0.8)
-  .term-wrap
-  .session-v-wrap
+  // Hide all sessions first
+  .session-wrap
+    display none
+  // Only show the session that matches the fullscreen tab ID
+  .session-wrap.session-current
+    display block !important
     position fixed
     left 0 !important
     top 0 !important
     height 100% !important
     width 100% !important
-  .term-wrap-1
-    left 10px !important
-    top 10px !important
-    right 10px !important
-    bottom 10px !important
+    .term-wrap
+    .session-v-wrap
+      position fixed
+      left 0 !important
+      top 0 !important
+      height 100% !important
+      width 100% !important
+    .term-wrap-1
+      left 10px !important
+      top 10px !important
+      right 10px !important
+      bottom 10px !important
 .term-fullscreen-control
   display none

package/client/components/session/session.jsx

@@ -465,7 +465,9 @@ export default class SessionWrapper extends Component {
   }
 
   handleFullscreen = () => {
-    window.store.toggleTermFullscreen(true)
+    // Make this tab the active tab before fullscreening
+    window.store.activeTabId = this.props.tab.id
+    window.store.toggleTermFullscreen(true, this.props.tab.id)
   }
 
   toggleBroadcastInput = () => {

package/client/components/setting-panel/setting-common.jsx

@@ -434,7 +434,7 @@ export default class SettingCommon extends Component {
           />
         </div>
         {
-          this.renderText('proxy', 'socks5://localhost:1080')
+          this.renderText('proxy', 'socks5://127.0.0.1:1080')
         }
       </div>
     )

package/client/components/setting-panel/terminal-bg-config.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   AutoComplete,
   Upload,
@@ -6,10 +6,12 @@ import {
   Input
 } from 'antd'
 import {
-  noTerminalBgValue
+  noTerminalBgValue,
+  textTerminalBgValue
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import NumberConfig from './number-config'
+import TextBgModal from './text-bg-modal.jsx'
 
 const e = window.translate
 
@@ -19,6 +21,7 @@ export default function TerminalBackgroundConfig ({
   config,
   isGlobal = false
 }) {
+  const [showTextModal, setShowTextModal] = useState(false)
   const value = config[name]
   const defaultValue = defaultSettings[name]
   const onChange = (v) => onChangeValue(v, name)
@@ -33,6 +36,7 @@ export default function TerminalBackgroundConfig ({
       <span>{e('chooseFile')}</span>
     </Upload>
   )
+
   const dataSource = [
     {
       value: '',
@@ -41,8 +45,34 @@ export default function TerminalBackgroundConfig ({
     {
       value: noTerminalBgValue,
       desc: e('noTerminalBg')
+    },
+    {
+      value: textTerminalBgValue,
+      desc: `📝 ${e('textBackground')}`
     }
   ]
+
+  // Add custom text background option if text is configured
+  if (value === textTerminalBgValue && config.terminalBackgroundText) {
+    const text = config.terminalBackgroundText
+    // Clean up the text for display: remove line breaks, trim whitespace
+    const cleanText = text.replace(/\s+/g, ' ').trim()
+    // Create a more user-friendly truncation
+    const truncatedText = cleanText.length > 25
+      ? cleanText.substring(0, 25) + '...'
+      : cleanText
+    dataSource[2] = {
+      value: textTerminalBgValue,
+      desc: `📝 "${truncatedText}"`
+    }
+  } else if (value === textTerminalBgValue) {
+    // Show helpful text when text background is selected but no text is configured
+    dataSource[2] = {
+      value: textTerminalBgValue,
+      desc: `📝 ${e('clickToConfigureText') || 'Click to configure text'}`
+    }
+  }
+
   if (isGlobal) {
     dataSource.push(
       {
@@ -51,10 +81,45 @@ export default function TerminalBackgroundConfig ({
       },
       {
         value: 'randomShape',
-        desc: e('randomShape')
+        desc: `🎨 ${e('randomShape')}`
       }
     )
   }
+
+  const handleTextBgClick = () => {
+    setShowTextModal(true)
+  }
+
+  const handleTextBgModalOk = (textConfig) => {
+    // Store text configuration in the config
+    onChangeValue(textConfig.text, 'terminalBackgroundText')
+    onChangeValue(textConfig.fontSize, 'terminalBackgroundTextSize')
+    onChangeValue(textConfig.color, 'terminalBackgroundTextColor')
+    onChangeValue(textConfig.fontFamily, 'terminalBackgroundTextFontFamily')
+    onChange(textTerminalBgValue)
+    setShowTextModal(false)
+  }
+
+  const handleTextBgModalCancel = () => {
+    setShowTextModal(false)
+  }
+
+  const handleAutocompleteSelect = (v) => {
+    if (v === textTerminalBgValue) {
+      handleTextBgClick()
+    } else {
+      onChange(v)
+    }
+  }
+
+  const handleAutocompleteChange = (v) => {
+    if (v === textTerminalBgValue) {
+      handleTextBgClick()
+    } else {
+      onChange(v)
+    }
+  }
+
   const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
 
   function renderNumber (name, options, title = '', width = 136) {
@@ -88,7 +153,7 @@ export default function TerminalBackgroundConfig ({
   }
 
   const renderFilter = () => {
-    if (config[name] === noTerminalBgValue || config[name] === 'index') return
+    if (config[name] === noTerminalBgValue || config[name] === 'index' || config[name] === textTerminalBgValue) return
 
     return (
       <div>
@@ -137,6 +202,7 @@ export default function TerminalBackgroundConfig ({
       label: item.desc
     }
   }
+
   return (
     <div className='pd2b'>
       <div className='pd1b'>
@@ -145,7 +211,8 @@ export default function TerminalBackgroundConfig ({
         >
           <AutoComplete
             value={value}
-            onChange={onChange}
+            onChange={handleAutocompleteChange}
+            onSelect={handleAutocompleteSelect}
             placeholder={defaultValue}
             className='width-100'
             options={dataSource.map(renderBgOption)}
@@ -160,6 +227,16 @@ export default function TerminalBackgroundConfig ({
       {
         renderFilter()
       }
+
+      <TextBgModal
+        visible={showTextModal}
+        onOk={handleTextBgModalOk}
+        onCancel={handleTextBgModalCancel}
+        initialText={config.terminalBackgroundText || ''}
+        initialSize={config.terminalBackgroundTextSize || 48}
+        initialColor={config.terminalBackgroundTextColor || '#ffffff'}
+        initialFontFamily={config.terminalBackgroundTextFontFamily || 'monospace'}
+      />
     </div>
   )
 }

package/client/components/setting-panel/text-bg-modal.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import {
+  Modal,
+  Input,
+  InputNumber,
+  Space,
+  Typography,
+  Select
+} from 'antd'
+import { ColorPicker } from '../bookmark-form/color-picker.jsx'
+
+const { TextArea } = Input
+const { Title } = Typography
+const e = window.translate
+
+export default function TextBgModal ({
+  visible,
+  onOk,
+  onCancel,
+  initialText = '',
+  initialSize = 48,
+  initialColor = '#ffffff',
+  initialFontFamily = 'Maple Mono'
+}) {
+  const [text, setText] = useState(initialText)
+  const [fontSize, setFontSize] = useState(initialSize)
+  const [color, setColor] = useState(initialColor)
+  const [fontFamily, setFontFamily] = useState(initialFontFamily)
+
+  const { fonts = [] } = window.et || {}
+
+  const handleOk = () => {
+    onOk({
+      text,
+      fontSize,
+      color,
+      fontFamily
+    })
+  }
+
+  const handleCancel = () => {
+    onCancel()
+    // Reset to initial values
+    setText(initialText)
+    setFontSize(initialSize)
+    setColor(initialColor)
+    setFontFamily(initialFontFamily)
+  }
+
+  return (
+    <Modal
+      title={e('terminalBackgroundText')}
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      width={500}
+      destroyOnClose
+    >
+      <div className='pd1'>
+        <Space direction='vertical' size='large' style={{ width: '100%' }}>
+          <div>
+            <Title level={5}>{e('text')}</Title>
+            <TextArea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder={e('enterTextForBackground')}
+              rows={4}
+              maxLength={500}
+            />
+          </div>
+
+          <div>
+            <Title level={5}>{e('fontSize')}</Title>
+            <InputNumber
+              value={fontSize}
+              onChange={setFontSize}
+              min={12}
+              max={200}
+              style={{ width: '100%' }}
+              placeholder={e('fontSize')}
+            />
+          </div>
+
+          <div>
+            <Title level={5}>{e('textColor')}</Title>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <ColorPicker
+                value={color}
+                onChange={setColor}
+              />
+              <Input
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                placeholder={e('colorValue')}
+                style={{ flex: 1 }}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Title level={5}>{e('fontFamily')}</Title>
+            <Select
+              value={fontFamily}
+              onChange={setFontFamily}
+              style={{ width: '100%' }}
+              placeholder={e('selectFontFamily')}
+              showSearch
+            >
+              {
+                fonts.map(f => {
+                  return (
+                    <Select.Option value={f} key={f}>
+                      <span
+                        className='font-option'
+                        style={{
+                          fontFamily: f
+                        }}
+                      >
+                        {f}
+                      </span>
+                    </Select.Option>
+                  )
+                })
+              }
+            </Select>
+          </div>
+        </Space>
+      </div>
+    </Modal>
+  )
+}

package/client/components/sftp/file-item.jsx

@@ -30,6 +30,7 @@ import findParent from '../../common/find-parent'
 import sorter from '../../common/index-sorter'
 import { getFolderFromFilePath, getLocalFileInfo } from './file-read'
 import { readClipboard, copy as copyToClipboard, hasFileInClipboardText } from '../../common/clipboard'
+import { getDropFileList } from '../../common/file-drop-utils'
 import fs from '../../common/fs'
 import time from '../../common/time'
 import { filesize } from 'filesize'
@@ -228,26 +229,7 @@ export default class FileSection extends React.Component {
   }
 
   getDropFileList = data => {
-    const fromFile = data.getData('fromFile')
-    if (fromFile) {
-      return [JSON.parse(fromFile)]
-    }
-    const { files } = data
-    const res = []
-    for (let i = 0, len = files.length; i < len; i++) {
-      const item = files[i]
-      if (!item) {
-        continue
-      }
-      // let file = item.getAsFile()
-      const isRemote = false
-      const fileObj = getFolderFromFilePath(item.path, isRemote)
-      res.push({
-        ...fileObj,
-        type: typeMap.local
-      })
-    }
-    return res
+    return getDropFileList(data)
   }
 
   onDrop = async e => {
@@ -261,6 +243,7 @@ export default class FileSection extends React.Component {
     if (!fromFiles) {
       return
     }
+
     while (!target.className.includes(fileItemCls)) {
       target = target.parentNode
     }

package/client/components/sftp/sftp-entry.jsx

@@ -1161,12 +1161,12 @@ export default class Sftp extends Component {
             {
               type === typeMap.remote
                 ? (
-                  <div className='pd1t pd1b pd1x alignright'>
+                  <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
                     {e('remote')}: {username}@{host}
                   </div>
                   )
                 : (
-                  <div className='pd1t pd1b pd1x'>
+                  <div className='sftp-panel-title pd1t pd1b pd1x'>
                     {e('local')}
                   </div>
                   )

package/client/components/tabs/tab.jsx

@@ -350,10 +350,10 @@ class Tab extends Component {
     const list = sshTunnelResults.map(({ sshTunnel: obj, error }, i) => {
       const {
         sshTunnelLocalPort,
-        sshTunnelRemoteHost = 'localhost',
+        sshTunnelRemoteHost = '127.0.0.1',
         sshTunnelRemotePort,
         sshTunnel,
-        sshTunnelLocalHost = 'localhost',
+        sshTunnelLocalHost = '127.0.0.1',
         name
       } = obj
       let tunnel

package/client/components/terminal/terminal.jsx

@@ -47,6 +47,7 @@ import { createTerm, resizeTerm } from './terminal-apis.js'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
+import { getFilePath, isUnsafeFilename } from '../../common/file-drop-utils.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
 import AIIcon from '../icons/ai-icon.jsx'
 import { formatBytes } from '../../common/byte-format.js'
@@ -356,12 +357,8 @@ class Term extends Component {
     this.term.focus()
   }
 
-  isUnsafeFilename = (filename) => {
-    return /["'\n\r]/.test(filename)
-  }
-
   cd = (p) => {
-    if (this.isUnsafeFilename(p)) {
+    if (isUnsafeFilename(p)) {
       return message.error('File name contains unsafe characters')
     }
     this.runQuickCommand(`cd "${p}"`)
@@ -377,7 +374,7 @@ class Term extends Component {
       try {
         const fileData = JSON.parse(fromFile)
         const filePath = resolve(fileData.path, fileData.name)
-        if (this.isUnsafeFilename(filePath)) {
+        if (isUnsafeFilename(filePath)) {
           message.error(notSafeMsg)
           return
         }
@@ -392,13 +389,16 @@ class Term extends Component {
     const files = dt.files
     if (files && files.length) {
       const arr = Array.from(files)
+      const filePaths = arr.map(f => getFilePath(f))
+
       // Check each file path individually
-      const hasUnsafeFilename = arr.some(f => this.isUnsafeFilename(f.path))
+      const hasUnsafeFilename = filePaths.some(path => isUnsafeFilename(path))
       if (hasUnsafeFilename) {
         message.error(notSafeMsg)
         return
       }
-      const filesAll = arr.map(f => `"${f.path}"`).join(' ')
+
+      const filesAll = filePaths.map(path => `"${path}"`).join(' ')
       this.attachAddon._sendData(filesAll)
     }
   }

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

@@ -354,7 +354,7 @@ export default class ItemListTree extends Component {
         showNewBookmarkGroupForm: true,
         parentId: item.id,
         bookmarkGroupTitle: '',
-        bookmarkGroupColor: ''
+        bookmarkGroupColor: getRandomDefaultColor()
       }
     })
     window.store.expandedKeys.push(item.id)
@@ -417,7 +417,6 @@ export default class ItemListTree extends Component {
     if (tar) {
       target = tar
     }
-    console.log('tar', target, tar)
     const dataDragged = e.dataTransfer.getData('idDragged')
     const [idDragged, pidDrags, isGroupDragged] = dataDragged.split('@')
     const isGroupDrag = isGroupDragged === 'true'

package/client/store/init-state.js

@@ -28,6 +28,7 @@ import { buildDefaultThemes } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
 import initSettingItem from '../common/init-setting-item'
+import { getRandomDefaultColor } from '../common/rand-hex-color'
 
 const e = window.translate
 
@@ -36,7 +37,8 @@ function getDefaultBookmarkGroups (bookmarks) {
     JSON.stringify({
       title: e(defaultBookmarkGroupId),
       id: defaultBookmarkGroupId,
-      bookmarkIds: bookmarks.map(d => d.id)
+      bookmarkIds: bookmarks.map(d => d.id),
+      color: getRandomDefaultColor()
     })
   ]
 }

package/client/store/sync.js

@@ -515,7 +515,11 @@ export default (Store) => {
       'roleAI',
       'languageAI',
       'proxyAI',
-      'disableDeveloperTool'
+      'disableDeveloperTool',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ]
     return pick(store.config, configSyncKeys)
   }

package/package.json

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