@electerm/electerm-react 2.10.6 → 2.10.27

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

@@ -1,7 +1,7 @@
 /**
  * AI-powered bookmark generation form
  */
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Button, Input, message, Space, Alert } from 'antd'
 import {
   RobotOutlined,
@@ -22,19 +22,28 @@ 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('')
+  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()
@@ -88,6 +97,7 @@ export default function AIBookmarkForm (props) {
         // 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)
@@ -148,7 +158,7 @@ export default function AIBookmarkForm (props) {
       await createBookmark(item)
     }
     setShowConfirm(false)
-    setDescription('')
+    setDescription('') // Clear description only on successful creation
     message.success(e('Done'))
   }
 
@@ -157,7 +167,6 @@ export default function AIBookmarkForm (props) {
   }
 
   const handleCancel = () => {
-    setDescription('')
     if (onCancel) {
       onCancel()
     }
@@ -297,6 +306,11 @@ export default function AIBookmarkForm (props) {
       <div className='pd1b'>
         <TextArea {...textAreaProps} />
       </div>
+      <AiHistory
+        storageKey={STORAGE_KEY_HISTORY}
+        eventName={EVENT_NAME_HISTORY}
+        onSelect={setDescription}
+      />
       <div className='pd1t'>
         <Button {...generateBtnProps}>
           {e('submit')}

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

@@ -120,6 +120,7 @@ const bookmarkSchema = {
     user: 'string - username',
     secure: 'boolean - use secure FTP (FTPS), default is false',
     password: 'string - password',
+    encode: 'string - charset for file names, default is utf-8',
     title: 'string - bookmark title',
     profile: 'string - profile id',
     description: 'string - bookmark description'
@@ -137,6 +138,18 @@ const bookmarkSchema = {
     description: 'string - bookmark description',
     startDirectoryLocal: 'string - local starting directory',
     runScripts: 'array - run scripts after connected ({delay,script})'
+  },
+  spice: {
+    type: 'spice',
+    host: 'string (required) - hostname or IP address',
+    port: 'number (default: 5900) - Spice port',
+    password: 'string - Spice password',
+    title: 'string - bookmark title',
+    viewOnly: 'boolean - view only mode, default is false',
+    scaleViewport: 'boolean - scale viewport to window, default is true',
+    description: 'string - bookmark description',
+    profile: 'string - profile id',
+    proxy: 'string - proxy address (socks5://...)'
   }
 }
 

package/client/components/bookmark-form/config/ftp.js

@@ -15,6 +15,7 @@ const ftpConfig = {
       user: '',
       password: '',
       secure: false,
+      encode: 'utf-8',
       ...getAuthTypeDefault(props)
     })
   },
@@ -32,6 +33,7 @@ const ftpConfig = {
         { type: 'input', name: 'user', label: () => e('username') },
         { type: 'password', name: 'password', label: () => e('password') },
         { type: 'switch', name: 'secure', label: () => e('secure'), valuePropName: 'checked' },
+        commonFields.encode,
         commonFields.type
       ]
     }

package/client/components/bookmark-form/config/spice.js

@@ -2,7 +2,7 @@ import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalSpiceType } from '../../../common/constants.js'
 import { createBaseInitValues, getAuthTypeDefault } from '../common/init-values.js'
 import { isEmpty } from 'lodash-es'
-import { commonFields, connectionHoppingTab } from './common-fields.js'
+import { commonFields } from './common-fields.js'
 
 const e = window.translate
 
@@ -36,8 +36,7 @@ const spiceConfig = {
         commonFields.proxy,
         commonFields.type
       ]
-    },
-    connectionHoppingTab()
+    }
   ]
 }
 

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

@@ -118,7 +118,6 @@ export default class BookmarkIndex2 extends PureComponent {
     }
     return (
       <Button
-        type='primary'
         size='small'
         className='mg2l create-ai-btn'
         icon={<RobotOutlined />}
@@ -162,7 +161,7 @@ export default class BookmarkIndex2 extends PureComponent {
     const keys = Object.keys(sessionConfig)
     return (
       <div className='form-wrap pd1x'>
-        <div className='form-title pd1t pd1x pd2b'>
+        <div className='form-title pd1t pd1x pd2b bold'>
           <BookOutlined className='mg1r' />
           <span>
             {((!isNew ? e('edit') : e('new')) + ' ' + e(settingMap.bookmarks))}

package/client/components/common/notification.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { CloseOutlined } from '@ant-design/icons'
+import { CloseOutlined, CopyOutlined } from '@ant-design/icons'
 import classnames from 'classnames'
 import generateId from '../../common/uid'
 import { messageIcons } from '../../common/icon-helpers.jsx'
+import { copy } from '../../common/clipboard'
 import './notification.styl'
 
 const notifications = []
@@ -69,6 +70,19 @@ export function NotificationContainer () {
   )
 }
 
+function getTextFromReactChildren (children) {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children)
+  }
+  if (React.isValidElement(children)) {
+    return getTextFromReactChildren(children.props.children)
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextFromReactChildren).join('\n')
+  }
+  return ''
+}
+
 function NotificationItem ({ message, description, type, onClose, duration = 18.5 }) {
   const timeoutRef = useRef(null)
 
@@ -97,6 +111,12 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
     }
   }
 
+  const handleCopy = (text, e) => {
+    e.stopPropagation()
+    const textToCopy = getTextFromReactChildren(text)
+    copy(textToCopy)
+  }
+
   const className = classnames('notification', type)
 
   return (
@@ -109,8 +129,20 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
         <div className='notification-message'>
           <div className='notification-icon'>{messageIcons[type]}</div>
           <div className='notification-title' title={message}>{message}</div>
+          <CopyOutlined
+            className='notification-copy-icon'
+            onClick={(e) => handleCopy(message, e)}
+          />
         </div>
-        {description && <div className='notification-description'>{description}</div>}
+        {description && (
+          <div className='notification-description'>
+            {description}
+            <CopyOutlined
+              className='notification-copy-icon'
+              onClick={(e) => handleCopy(description, e)}
+            />
+          </div>
+        )}
       </div>
       <CloseOutlined className='notification-close' onClick={onClose} />
     </div>

package/client/components/common/notification.styl

@@ -33,9 +33,10 @@
   top 10px
 
 .notification-description
-  word-wrap break-all
+  word-wrap break-word
   max-height 200px
   overflow auto
+  padding 10px 0 0 0
 
 .notification-close
   position absolute
@@ -48,4 +49,19 @@
   cursor pointer
   padding 0
   &:hover
-    color var(--text)
+    color var(--text)
+
+.notification-copy-icon
+  cursor pointer
+  font-size 14px
+  position absolute
+  right 10px
+  top 45px
+  margin-left 8px
+  display none
+.notification-message .notification-copy-icon
+  right 38px
+  top 14px
+.notification-message:hover .notification-copy-icon,
+.notification-description:hover .notification-copy-icon
+  display inline-block

package/client/components/main/wrapper.styl

@@ -1,10 +1,3 @@
-.common-err-desc
-  &:hover
-    text-overflow clip
-    overflow-x hidden
-    white-space pre
-    max-height 300px
-    overflow scroll
 
 .error-wrapper
   background var(--main)

package/client/components/rdp/rdp-session.jsx

@@ -6,14 +6,15 @@ import { handleErr } from '../../common/fetch'
 import {
   statusMap
 } from '../../common/constants'
-import {
-  Spin,
-  Select
-} from 'antd'
 import {
   ReloadOutlined,
   EditOutlined
 } from '@ant-design/icons'
+import {
+  Spin,
+  Select,
+  Switch
+} from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import scanCode from './code-scan'
 import resolutions from './resolutions'
@@ -46,10 +47,13 @@ export default class RdpSession extends PureComponent {
   constructor (props) {
     const id = `rdp-reso-${props.tab.host}`
     const resObj = ls.getItemJSON(id, resolutions[1])
+    const scaleViewportId = `rdp-scale-view-${props.tab.host}`
+    const scaleViewport = ls.getItemJSON(scaleViewportId, false)
     super(props)
     this.canvasRef = createRef()
     this.state = {
       loading: false,
+      scaleViewport,
       ...resObj
     }
     this.session = null
@@ -76,7 +80,7 @@ export default class RdpSession extends PureComponent {
     }
   }
 
-  runInitScript = () => {}
+  runInitScript = () => { }
 
   setStatus = status => {
     const id = this.props.tab?.id
@@ -267,7 +271,7 @@ export default class RdpSession extends PureComponent {
         const kind = e.kind ? e.kind() : 'Unknown'
         const bt = e.backtrace ? e.backtrace() : ''
         return `[${kindNames[kind] || kind}] ${bt}`
-      } catch (_) {}
+      } catch (_) { }
     }
     return e?.message || e?.toString() || String(e)
   }
@@ -446,6 +450,14 @@ export default class RdpSession extends PureComponent {
     this.setState(res, this.handleReInit)
   }
 
+  handleScaleViewChange = (v) => {
+    const scaleViewportId = `rdp-scale-view-${this.props.tab.host}`
+    ls.setItemJSON(scaleViewportId, v)
+    this.setState({
+      scaleViewport: v
+    })
+  }
+
   renderHelp = () => {
     return null
   }
@@ -462,7 +474,7 @@ export default class RdpSession extends PureComponent {
       onSendCtrlAltDel: this.handleSendCtrlAltDel,
       screens: [], // RDP doesn't have multi-screen support like VNC
       currentScreen: null,
-      onSelectScreen: () => {}, // No-op for RDP
+      onSelectScreen: () => { }, // No-op for RDP
       fixedPosition,
       showExitFullscreen,
       className
@@ -517,8 +529,17 @@ export default class RdpSession extends PureComponent {
       onChange: this.handleResChange,
       popupMatchSelectWidth: false
     }
+    const scaleProps = {
+      checked: this.state.scaleViewport,
+      onChange: this.handleScaleViewChange,
+      unCheckedChildren: window.translate('scaleViewport'),
+      checkedChildren: window.translate('scaleViewport'),
+      className: 'mg1l'
+    }
     return (
-      <div className='pd1 fix session-v-info'>
+      <div
+        className='pd1 fix session-v-info'
+      >
         <div className='fleft'>
           <ReloadOutlined
             onClick={this.handleReInit}
@@ -547,6 +568,9 @@ export default class RdpSession extends PureComponent {
           />
           {this.renderInfo()}
           {this.renderHelp()}
+          <Switch
+            {...scaleProps}
+          />
         </div>
         <div className='fright'>
           {this.props.fullscreenIcon()}
@@ -582,25 +606,34 @@ export default class RdpSession extends PureComponent {
         height: h + 'px'
       }
     }
-    const { width, height, loading } = this.state
+    const { width, height, loading, scaleViewport } = this.state
     const canvasProps = {
       width,
       height,
       tabIndex: 0
     }
+    if (scaleViewport) {
+      Object.assign(canvasProps, {
+        style: {
+          width: '100%',
+          objectFit: 'contain'
+        }
+      })
+    }
+    const cls = 'rdp-session-wrap session-v-wrap'
     const controlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
           {...rdpProps}
-          className='rdp-session-wrap session-v-wrap'
+          className={cls}
         >
           {this.renderControl()}
-          <RemoteFloatControl {...controlProps} />
           <canvas
             {...canvasProps}
             ref={this.canvasRef}
           />
+          <RemoteFloatControl {...controlProps} />
         </div>
       </Spin>
     )

package/client/components/setting-panel/deep-link-control.jsx

@@ -65,12 +65,13 @@ export default function DeepLinkControl () {
   }
 
   const renderTooltipContent = () => {
-    const protocols = ['ssh', 'telnet']
+    const protocols = ['ssh', 'telnet', 'rdp', 'vnc', 'serial', 'spice', 'electerm']
+    const tip = `Register electerm to handle protocol URLs (${protocols.join('://, ')})`
 
     return (
       <div>
         <div className='pd1b'>
-          Register electerm to handle protocol URLs (ssh://, telnet://)
+          {tip}
         </div>
 
         {registrationStatus && (

package/client/components/shortcuts/shortcut-editor.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react'
+import { PureComponent, createRef } from 'react'
 import {
   Button,
   Input
@@ -19,39 +19,27 @@ export default class ShortcutEdit extends PureComponent {
     data: null
   }
 
+  containerRef = createRef()
+
+  componentWillUnmount () {
+    this.removeEventListener()
+  }
+
   addEventListener = () => {
-    const elem = document.querySelector('.ant-drawer')
-    elem?.addEventListener('click', this.handleClickOuter)
+    document.addEventListener('click', this.handleClickOuter, true)
     document.addEventListener('keydown', this.handleKeyDown)
     document.addEventListener('mousewheel', this.handleKeyDown)
   }
 
   removeEventListener = () => {
-    const elem = document.querySelector('.ant-drawer')
-    elem?.removeEventListener('click', this.handleClickOuter)
+    document.removeEventListener('click', this.handleClickOuter, true)
     document.removeEventListener('keydown', this.handleKeyDown)
     document.removeEventListener('mousewheel', this.handleKeyDown)
   }
 
-  isInsideElement = (event) => {
-    const { target } = event
-    const cls = this.getCls()
-    if (!target || !target.classList) {
-      return false
-    } else if (target.classList.contains(cls)) {
-      return true
-    } else {
-      const parent = target.parentElement
-      if (parent !== null) {
-        return this.isInsideElement({ target: parent })
-      } else {
-        return false
-      }
-    }
-  }
-
   handleClickOuter = (e) => {
-    if (!this.isInsideElement(e)) {
+    const container = this.containerRef.current
+    if (container && !container.contains(e.target)) {
       this.handleCancel()
     }
   }
@@ -78,11 +66,6 @@ export default class ShortcutEdit extends PureComponent {
     this.handleCancel()
   }
 
-  getCls = () => {
-    const { index } = this.props.data
-    return 'shortcut-control-' + index
-  }
-
   warnCtrolKey = throttle(() => {
     message.info(
       'Must have one of Ctrl or Shift or Alt or Meta key',
@@ -131,13 +114,6 @@ export default class ShortcutEdit extends PureComponent {
     })
   }
 
-  handleClickOutside = () => {
-    this.removeEventListener()
-    this.setState({
-      editMode: false
-    })
-  }
-
   renderStatic () {
     const {
       shortcut
@@ -199,7 +175,7 @@ export default class ShortcutEdit extends PureComponent {
       return this.renderStatic()
     }
     return (
-      <div className={this.getCls()}>
+      <div ref={this.containerRef}>
         <Input
           suffix={this.renderAfter()}
           value={shortcut}

package/client/components/spice/spice-session.jsx

@@ -6,13 +6,16 @@ import { handleErr } from '../../common/fetch'
 import {
   statusMap
 } from '../../common/constants'
-import {
-  Spin
-} from 'antd'
 import {
   ReloadOutlined
 } from '@ant-design/icons'
+import {
+  Spin,
+  Switch
+} from 'antd'
+import * as ls from '../../common/safe-local-storage'
 import RemoteFloatControl from '../common/remote-float-control'
+import './spice.styl'
 
 async function loadSpiceModule () {
   if (window.spiceHtml5) return
@@ -25,10 +28,13 @@ async function loadSpiceModule () {
 
 export default class SpiceSession extends PureComponent {
   constructor (props) {
+    const scaleViewportId = `spice-scale-view-${props.tab.host}`
+    const scaleViewport = ls.getItemJSON(scaleViewportId, false)
     super(props)
     this.state = {
       loading: false,
-      connected: false
+      connected: false,
+      scaleViewport
     }
     this.spiceConn = null
     this.screenId = `spice-screen-${props.tab.id}`
@@ -90,6 +96,14 @@ export default class SpiceSession extends PureComponent {
     }
   }
 
+  handleScaleViewChange = (v) => {
+    const scaleViewportId = `spice-scale-view-${this.props.tab.host}`
+    ls.setItemJSON(scaleViewportId, v)
+    this.setState({
+      scaleViewport: v
+    })
+  }
+
   getControlProps = (options = {}) => {
     const {
       fixedPosition = true,
@@ -115,6 +129,13 @@ export default class SpiceSession extends PureComponent {
       showExitFullscreen: false,
       className: 'mg1l'
     })
+    const scaleProps = {
+      checked: this.state.scaleViewport,
+      onChange: this.handleScaleViewChange,
+      unCheckedChildren: window.translate('scaleViewport'),
+      checkedChildren: window.translate('scaleViewport'),
+      className: 'mg1l'
+    }
     return (
       <div className='pd1 fix session-v-info'>
         <div className='fleft'>
@@ -123,6 +144,9 @@ export default class SpiceSession extends PureComponent {
             className='mg2r mg1l pointer'
           />
           {this.renderInfo()}
+          <Switch
+            {...scaleProps}
+          />
         </div>
         <div className='fright'>
           {this.props.fullscreenIcon()}
@@ -236,18 +260,19 @@ export default class SpiceSession extends PureComponent {
 
   render () {
     const { width: w, height: h } = this.props
-    const { loading } = this.state
+    const { loading, scaleViewport } = this.state
     const { width: innerWidth, height: innerHeight } = this.calcCanvasSize()
     const wrapperStyle = {
       width: innerWidth + 'px',
       height: innerHeight + 'px',
-      overflow: 'hidden'
+      overflow: scaleViewport ? 'hidden' : 'auto'
     }
+    const cls = `spice-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
     const contrlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
-          className='rdp-session-wrap session-v-wrap'
+          className={cls}
           style={{
             width: w + 'px',
             height: h + 'px'
@@ -262,11 +287,6 @@ export default class SpiceSession extends PureComponent {
             <div
               ref={this.domRef}
               id={this.screenId}
-              className='spice-session-wrap session-v-wrap'
-              style={{
-                width: '100%',
-                height: '100%'
-              }}
             />
           </div>
         </div>

package/client/components/spice/spice.styl

@@ -0,0 +1,4 @@
+.spice-session-wrap.scale-viewport
+  canvas
+    width: 100% !important
+    object-fit: contain

package/client/components/terminal/terminal-interactive.jsx

@@ -28,6 +28,7 @@ export default function TermInteractive () {
     } else if (
       e &&
       e.data &&
+      typeof e.data === 'string' &&
       e.data.includes('ssh-tunnel-result')
     ) {
       updateTab(JSON.parse(e.data))

package/client/components/vnc/vnc-session.jsx

@@ -82,7 +82,7 @@ export default class VncSession extends PureComponent {
     }
   }
 
-  buildWsUrl = (port, type = 'rdp', extra = '') => {
+  buildWsUrl = (port, type = 'vnc', extra = '') => {
     const { host, tokenElecterm } = this.props.config
     const { id } = this.props.tab
     if (window.et.buildWsUrl) {

package/client/store/load-data.js

@@ -56,7 +56,7 @@ export async function addTabFromCommandLine (store, opts) {
     passphrase: options.passphrase,
     password: options.password,
     // port: options.port ? parseInt(options.port, 10) : 22,
-    type: 'remote',
+    type: 'ssh',
     status: statusMap.processing,
     id: generate(),
     encode: encodes[0],

package/client/store/store.js

@@ -125,7 +125,7 @@ class Store {
     const {
       type
     } = currentTab
-    if (type === 'web' || type === 'rdp' || type === 'vnc') {
+    if (type === 'web' || type === 'rdp' || type === 'vnc' || type === 'spice') {
       return false
     }
     return currentTab.sshSftpSplitView ||

package/package.json

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

package/client/components/common/notification-with-details.jsx

@@ -1,34 +0,0 @@
-import { notification } from './notification'
-import { CopyOutlined } from '@ant-design/icons'
-import { copy } from '../../common/clipboard'
-
-export function showMsg (message, type = 'success', serverInfo = null, duration = 10, description = '') {
-  const handleCopy = () => {
-    if (serverInfo && serverInfo.url) {
-      copy(serverInfo.url)
-    }
-  }
-
-  let desc = description
-  if (serverInfo) {
-    desc = (
-      <div>
-        {description && <div>{description}</div>}
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <span>URL: <b>{serverInfo.url}</b></span>
-          <CopyOutlined
-            className='pointer mg1l'
-            onClick={handleCopy}
-          />
-        </div>
-        <div>Path: <b>{serverInfo.path}</b></div>
-      </div>
-    )
-  }
-
-  notification[type]({
-    message,
-    description: desc,
-    duration
-  })
-}