@electerm/electerm-react 2.15.8 → 2.16.6

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

@@ -6,7 +6,6 @@ import uid from '../../common/uid'
 import { pick } from 'lodash-es'
 import {
   SettingOutlined,
-  LoadingOutlined,
   SendOutlined,
   UnorderedListOutlined
 } from '@ant-design/icons'
@@ -15,6 +14,7 @@ import {
 } from '../../common/constants'
 import HelpIcon from '../common/help-icon'
 import { refsStatic } from '../common/ref'
+import AIStopIcon from './ai-stop-icon'
 import './ai.styl'
 
 const { TextArea } = Input
@@ -23,6 +23,7 @@ const MAX_HISTORY = 100
 export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
   const [isLoading, setIsLoading] = useState(false)
+  const [currentSessionId, setCurrentSessionId] = useState(null)
 
   function handlePromptChange (e) {
     setPrompt(e.target.value)
@@ -91,6 +92,8 @@ export default function AIChat (props) {
           window.store.aiChatHistory[index].sessionId = aiResponse.sessionId
           window.store.aiChatHistory[index].response = aiResponse.content || ''
         }
+        // Store current session ID for stop functionality
+        setCurrentSessionId(aiResponse.sessionId)
 
         // Start polling for updates
         pollStreamContent(aiResponse.sessionId, chatId)
@@ -125,6 +128,12 @@ export default function AIChat (props) {
       const streamResponse = await window.pre.runGlobalAsync('getStreamContent', sessionId)
 
       if (streamResponse && streamResponse.error) {
+        // Session not found or error - stop polling
+        if (streamResponse.error === 'Session not found') {
+          setCurrentSessionId(null)
+          setIsLoading(false)
+          return
+        }
         // Remove the entry and show error
         const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
         if (index !== -1) {
@@ -147,6 +156,7 @@ export default function AIChat (props) {
         if (streamResponse.hasMore) {
           setTimeout(() => pollStreamContent(sessionId, chatId), 200) // Poll every 200ms
         } else {
+          setCurrentSessionId(null)
           setIsLoading(false)
         }
       }
@@ -156,6 +166,7 @@ export default function AIChat (props) {
       if (index !== -1) {
         window.store.aiChatHistory.splice(index, 1)
       }
+      setCurrentSessionId(null)
       setIsLoading(false)
       window.store.onError(error)
     }
@@ -177,9 +188,40 @@ export default function AIChat (props) {
     window.store.aiChatHistory = []
   }
 
+  const handleStop = useCallback(async function () {
+    if (!currentSessionId || !isLoading) return
+
+    try {
+      // Call server to stop the stream
+      await window.pre.runGlobalAsync('stopStream', currentSessionId)
+
+      // Reset state
+      setCurrentSessionId(null)
+      setIsLoading(false)
+
+      // Update the chat entry to mark as stopped
+      const chatEntries = window.store.aiChatHistory
+      for (let i = chatEntries.length - 1; i >= 0; i--) {
+        if (chatEntries[i].isStreaming) {
+          chatEntries[i].isStreaming = false
+          break
+        }
+      }
+      window.store.aiChatHistory = [...chatEntries]
+    } catch (error) {
+      console.error('Error stopping stream:', error)
+      setCurrentSessionId(null)
+      setIsLoading(false)
+    }
+  }, [currentSessionId, isLoading])
+
   function renderSendIcon () {
     if (isLoading) {
-      return <LoadingOutlined />
+      return (
+        <AIStopIcon
+          onClick={handleStop}
+        />
+      )
     }
     return (
       <SendOutlined

package/client/components/ai/ai-stop-icon.jsx

@@ -0,0 +1,13 @@
+import { LoadingOutlined } from '@ant-design/icons'
+
+export default function AIStopIcon (props) {
+  return (
+    <div
+      className='ai-stop-icon-square mg1l pointer'
+      onClick={props.onClick}
+      title={props.title || 'Stop AI request'}
+    >
+      <LoadingOutlined spin />
+    </div>
+  )
+}

package/client/components/ai/ai.styl

@@ -62,3 +62,13 @@
     top 8px
     right -4px
     font-weight bold
+
+.ai-stop-icon-square
+  width 20px
+  height 20px
+  background var(--error)
+  border-radius 2px
+  display flex
+  align-items center
+  justify-content center
+  font-size 10px

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

@@ -1,100 +1,46 @@
 /**
 * btns
 */
-import { Component } from 'react'
+import { useEffect, useRef } from 'react'
 import fs from '../../common/fs'
 import { noTerminalBgValue, textTerminalBgValue } from '../../common/constants'
 import { generateMosaicBackground } from './shapes'
 
-export default class CssOverwrite extends Component {
-  static styleTag = null
+const themeDomId = 'css-overwrite-terminal-backgrounds'
 
-  shouldComponentUpdate (nextProps) {
-    if (!this.props.wsInited && nextProps.wsInited) {
-      return true
-    }
-
-    const bgProps = [
-      'terminalBackgroundImagePath',
-      'terminalBackgroundFilterBlur',
-      'terminalBackgroundFilterOpacity',
-      'terminalBackgroundFilterBrightness',
-      'terminalBackgroundFilterContrast',
-      'terminalBackgroundFilterGrayscale',
-      'terminalBackgroundText',
-      'terminalBackgroundTextSize',
-      'terminalBackgroundTextColor',
-      'terminalBackgroundTextFontFamily'
-    ]
-    const globalChanged = bgProps.some(prop => this.props[prop] !== nextProps[prop])
-    if (globalChanged) {
-      return true
-    }
-
-    const currentTabs = this.props.tabs || []
-    const nextTabs = nextProps.tabs || []
-    if (currentTabs.length !== nextTabs.length) {
-      return true
-    }
-
-    // If no tabs in both cases
-    if (!currentTabs.length && !nextTabs.length) {
-      return false
-    }
-
-    // Since tab bg settings never change, we only need to compare tab IDs
-    const currentIds = new Set(currentTabs.map(t => t.id))
-    const nextIds = new Set(nextTabs.map(t => t.id))
-
-    // Check if all current IDs exist in next IDs
-    for (const id of currentIds) {
-      if (!nextIds.has(id)) return true
-    }
-
-    return false
+function createBackgroundStyle (imagePath) {
+  if (!imagePath || imagePath === '') {
+    return ''
   }
 
-  componentDidUpdate (prevProps) {
-    if (!prevProps.wsInited && this.props.wsInited) {
-      setTimeout(this.writeCss, 1500)
-      return
-    }
-    setTimeout(this.updateCss, 1000)
-  }
-
-  // Common function to handle background image style creation
-  createBackgroundStyle = async (imagePath, textBgProps = null) => {
-    if (!imagePath || imagePath === '') {
-      return ''
-    }
-
-    let content = ''
-    let st = ''
-    const isWebImg = /^https?:\/\//.test(imagePath)
-    if (imagePath === 'randomShape') {
-      st = `url(${generateMosaicBackground()})`
-    } else if (imagePath === 'index') {
-      st = 'index'
-    } else if (noTerminalBgValue === imagePath) {
-      st = 'none'
-    } else if (textTerminalBgValue === imagePath) {
-      st = 'text'
-    } else if (imagePath && !isWebImg) {
-      content = await fs.readFileAsBase64(imagePath)
-        .catch(console.error)
-      if (content) {
-        st = `url(data:image;base64,${content})`
-      }
-    } else if (imagePath && isWebImg) {
-      st = `url(${imagePath})`
-    }
-    return st
+  let st = ''
+  const isWebImg = /^https?:\/\//.test(imagePath)
+  if (imagePath === 'randomShape') {
+    st = `url(${generateMosaicBackground()})`
+  } else if (imagePath === 'index') {
+    st = 'index'
+  } else if (noTerminalBgValue === imagePath) {
+    st = 'none'
+  } else if (textTerminalBgValue === imagePath) {
+    st = 'text'
+  } else if (imagePath && !isWebImg) {
+    return fs.readFileAsBase64(imagePath)
+      .then(content => {
+        if (content) {
+          return `url(data:image;base64,${content})`
+        }
+        return ''
+      })
+      .catch(() => '')
+  } else if (imagePath && isWebImg) {
+    st = `url(${imagePath})`
   }
+  return st
+}
 
-  // Common function to create filter styles
-  createFilterStyle = (props, tabProps = null) => {
-    return `blur(${
-      (tabProps?.terminalBackgroundFilterBlur || props.terminalBackgroundFilterBlur)
+function createFilterStyle (props, tabProps = null) {
+  return `blur(${
+    (tabProps?.terminalBackgroundFilterBlur || props.terminalBackgroundFilterBlur)
   }px) opacity(${
     +(tabProps?.terminalBackgroundFilterOpacity || props.terminalBackgroundFilterOpacity)
   }) brightness(${
@@ -104,128 +50,153 @@ export default class CssOverwrite extends Component {
   }) grayscale(${
     +(tabProps?.terminalBackgroundFilterGrayscale || props.terminalBackgroundFilterGrayscale)
   })`
-  }
+}
 
-  createStyleForTab = async (tab) => {
-    const bg = tab.terminalBackground || {}
-    const img = bg.terminalBackgroundImagePath || this.props.terminalBackgroundImagePath
-    const st = await this.createBackgroundStyle(img)
+async function createStyleForTab (tab, props) {
+  const bg = tab.terminalBackground || {}
+  const img = bg.terminalBackgroundImagePath || props.terminalBackgroundImagePath
+  const st = await createBackgroundStyle(img)
 
-    if (!st) {
-      return ''
-    }
+  if (!st) {
+    return ''
+  }
 
-    const selector = `#container .sessions .session-${tab.id} .xterm-screen::before`
-    const styles = []
-    if (st === 'index') {
-      styles.push(
-        `content: '${tab.tabCount}'`,
-        'background-image: none',
-        'opacity: 0.1'
-      )
-    } 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') {
+  const selector = `#container .sessions .session-${tab.id} .xterm-screen::before`
+  const styles = []
+  if (st === 'index') {
+    styles.push(
+      `content: '${tab.tabCount}'`,
+      'background-image: none',
+      'opacity: 0.1'
+    )
+  } else if (st === 'text') {
+    const text = bg.terminalBackgroundText || props.terminalBackgroundText || ''
+    const size = bg.terminalBackgroundTextSize || props.terminalBackgroundTextSize || 48
+    const color = bg.terminalBackgroundTextColor || props.terminalBackgroundTextColor || '#ffffff'
+    const fontFamily = bg.terminalBackgroundTextFontFamily || props.terminalBackgroundTextFontFamily || 'monospace'
+    if (text) {
       styles.push(
-        `background-image: ${st}`,
-        'background-position: center',
-        `filter: ${this.createFilterStyle(this.props, tab)}`
+        `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'
       )
     }
-    return `${selector} {
+  } else if (st !== 'none') {
+    styles.push(
+      `background-image: ${st}`,
+      'background-position: center',
+      `filter: ${createFilterStyle(props, tab)}`
+    )
+  }
+  return `${selector} {
     ${styles.join(';')};
   }`
+}
+
+async function createGlobalStyle (props) {
+  const st = await createBackgroundStyle(props.terminalBackgroundImagePath)
+  if (!st) {
+    return '#container .session-batch-active .xterm-screen::before {' +
+    'background-image: url("./images/electerm-watermark.png");' +
+    '}'
   }
 
-  createGlobalStyle = async () => {
-    const st = await this.createBackgroundStyle(this.props.terminalBackgroundImagePath)
-    if (!st) {
-      return '#container .session-batch-active .xterm-screen::before {' +
-      'background-image: url("./images/electerm-watermark.png");' +
-      '}'
-    }
+  const styles = []
 
-    const styles = []
-
-    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') {
+  if (st === 'text') {
+    const text = props.terminalBackgroundText || ''
+    const size = props.terminalBackgroundTextSize || 48
+    const color = props.terminalBackgroundTextColor || '#ffffff'
+    const fontFamily = props.terminalBackgroundTextFontFamily || 'monospace'
+    if (text) {
       styles.push(
-        `background-image: ${st}`,
-        'background-position: center',
-        `filter: ${this.createFilterStyle(this.props)}`
+        `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'
       )
     }
+  } else if (st !== 'none' && st !== 'index') {
+    styles.push(
+      `background-image: ${st}`,
+      'background-position: center',
+      `filter: ${createFilterStyle(props)}`
+    )
+  }
 
-    return `#container .session-batch-active .xterm-screen::before {
+  return `#container .session-batch-active .xterm-screen::before {
     ${styles.join(';')};
   }`
-  }
+}
+
+async function writeCss (props, styleTag) {
+  const { tabs = [] } = props
+  const tabStyles = await Promise.all(
+    tabs
+      .map(tab => createStyleForTab(tab, props))
+  )
+  const globalStyle = await createGlobalStyle(props)
+  const allStyles = [
+    globalStyle,
+    ...tabStyles
+  ].filter(Boolean).join('\n')
+  styleTag.innerHTML = allStyles
+}
 
-  writeCss = async () => {
-    if (!CssOverwrite.styleTag) {
-      CssOverwrite.styleTag = document.createElement('style')
-      CssOverwrite.styleTag.type = 'text/css'
-      CssOverwrite.styleTag.id = 'css-overwrite-terminal-backgrounds'
-      document.getElementsByTagName('head')[0].appendChild(CssOverwrite.styleTag)
+export default function CssOverwrite (props) {
+  const { configLoaded } = props
+  const styleTagRef = useRef(null)
+
+  useEffect(() => {
+    if (!configLoaded) {
+      return
     }
 
-    const { tabs = [] } = this.props
-    const tabStyles = await Promise.all(
-      tabs
-        .map(tab => this.createStyleForTab(tab))
-    )
-    const globalStyle = await this.createGlobalStyle()
-    const allStyles = [
-      globalStyle,
-      ...tabStyles
-    ].filter(Boolean).join('\n')
-    CssOverwrite.styleTag.innerHTML = allStyles
-  }
+    if (!styleTagRef.current) {
+      styleTagRef.current = document.createElement('style')
+      styleTagRef.current.type = 'text/css'
+      styleTagRef.current.id = themeDomId
+      document.getElementsByTagName('head')[0].appendChild(styleTagRef.current)
+    }
 
-  updateCss = async () => {
-    await this.writeCss()
-  }
+    const timeoutId = setTimeout(() => {
+      writeCss(props, styleTagRef.current)
+    }, 100)
 
-  render () {
-    return null
-  }
+    return () => {
+      clearTimeout(timeoutId)
+    }
+  }, [
+    configLoaded,
+    props.terminalBackgroundImagePath,
+    props.terminalBackgroundFilterBlur,
+    props.terminalBackgroundFilterOpacity,
+    props.terminalBackgroundFilterBrightness,
+    props.terminalBackgroundFilterContrast,
+    props.terminalBackgroundFilterGrayscale,
+    props.terminalBackgroundText,
+    props.terminalBackgroundTextSize,
+    props.terminalBackgroundTextColor,
+    props.terminalBackgroundTextFontFamily,
+    props.tabs
+  ])
+
+  return null
 }

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

@@ -2,30 +2,21 @@
  * ui theme
  */
 
-import { useEffect, useRef } from 'react'
-import eq from 'fast-deep-equal'
+import { useEffect } from 'react'
 
 const themeDomId = 'custom-css'
 
 export default function CustomCss (props) {
-  const { customCss } = props
-  const prevRef = useRef(null)
-
-  async function applyTheme () {
-    const style = document.getElementById(themeDomId)
-    style.innerHTML = customCss
-  }
-
-  useEffect(() => {
-    applyTheme()
-  }, [])
+  const { customCss, configLoaded } = props
 
   useEffect(() => {
-    if (prevRef.current && !eq(prevRef.current, customCss)) {
-      applyTheme()
+    if (configLoaded) {
+      const style = document.getElementById(themeDomId)
+      if (style) {
+        style.innerHTML = customCss || ''
+      }
     }
-    prevRef.current = customCss
-  }, [customCss])
+  }, [customCss, configLoaded])
 
   return null
 }

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

@@ -137,7 +137,13 @@ const bookmarkSchema = {
     title: 'string - bookmark title',
     description: 'string - bookmark description',
     startDirectoryLocal: 'string - local starting directory',
-    runScripts: 'array - run scripts after connected ({delay,script})'
+    runScripts: 'array - run scripts after connected ({delay,script})',
+    execWindows: 'string - Windows exec path (overrides global setting)',
+    execMac: 'string - Mac exec path (overrides global setting)',
+    execLinux: 'string - Linux exec path (overrides global setting)',
+    execWindowsArgs: 'array - Windows exec arguments',
+    execMacArgs: 'array - Mac exec arguments',
+    execLinuxArgs: 'array - Linux exec arguments'
   },
   spice: {
     type: 'spice',

package/client/components/bookmark-form/common/color-picker.jsx

@@ -4,8 +4,7 @@ import { defaultColors, getRandomHexColor } from '../../../common/rand-hex-color
 import { HexInput } from './hex-input.jsx'
 import './color-picker.styl'
 
-export const ColorPicker = React.forwardRef((props, ref) => {
-  const { value, onChange } = props
+export function ColorPicker ({ value, onChange, ref, disabled, isRgba }) {
   const [visible, setVisible] = useState(false)
 
   const handleChange = (color) => {
@@ -18,7 +17,7 @@ export const ColorPicker = React.forwardRef((props, ref) => {
   }
 
   function onColorChange (color) {
-    handleChange(props.isRgba ? color.toRgbString() : color.toHexString())
+    handleChange(isRgba ? color.toRgbString() : color.toHexString())
   }
 
   function renderContent () {
@@ -59,7 +58,7 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     <div ref={ref} className='color-picker-choose' style={{ backgroundColor: value }} />
   )
 
-  if (props.disabled) return inner
+  if (disabled) return inner
 
   return (
     <Popover
@@ -72,7 +71,4 @@ export const ColorPicker = React.forwardRef((props, ref) => {
       {inner}
     </Popover>
   )
-})
-
-ColorPicker.displayName = 'ColorPicker'
-ColorPicker.static = true
+}

package/client/components/bookmark-form/common/exec-settings-field.jsx

@@ -0,0 +1,44 @@
+/**
+ * bookmark form - exec settings field
+ * Renders exec path and arguments fields for Windows/Mac/Linux
+ */
+import React from 'react'
+import { Form, Input, Select, Space } from 'antd'
+import { formItemLayout } from '../../../common/form-layout'
+
+const FormItem = Form.Item
+
+export default function ExecSettingsField () {
+  const platforms = ['linux', 'mac', 'windows']
+  return platforms.map((platform) => {
+    const platformCapitalized = platform.charAt(0).toUpperCase() + platform.slice(1)
+    const label = `exec${platformCapitalized}`
+    return (
+      <React.Fragment key={platform}>
+        <FormItem
+          {...formItemLayout}
+          label={label}
+        >
+          <Space.Compact className='width-100'>
+            <FormItem noStyle name={label}>
+              <Input
+                placeholder={`${platformCapitalized} exec path`}
+                maxLength={500}
+              />
+            </FormItem>
+            <FormItem
+              noStyle
+              name={`exec${platformCapitalized}Args`}
+            >
+              <Select
+                mode='tags'
+                placeholder={`${platformCapitalized} exec arguments`}
+                tokenSeparators={['\n']}
+              />
+            </FormItem>
+          </Space.Compact>
+        </FormItem>
+      </React.Fragment>
+    )
+  })
+}

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

@@ -13,6 +13,7 @@ import SshTunnels from './ssh-tunnels.jsx'
 import SshAgent from './ssh-agent.jsx'
 import ConnectionHopping from './connection-hopping.jsx'
 import TerminalBackgroundField from './terminal-background.jsx'
+import ExecSettingsField from './exec-settings-field.jsx'
 import useQuickCmds from './quick-commands.jsx'
 import ProfileItem from './profile-item.jsx'
 import renderRunScripts from './run-scripts.jsx'
@@ -150,6 +151,8 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
       )
     case 'terminalBackground':
       return <TerminalBackgroundField key={name} />
+    case 'execSettings':
+      return <ExecSettingsField key={name} />
     case 'profileItem':
       return <ProfileItem key={name} store={ctxProps.store} profileFilter={item.profileFilter} />
     case 'quickCommands':