@electerm/electerm-react 2.10.27 → 2.11.16

package/client/components/sidebar/index.jsx

@@ -8,12 +8,13 @@ import {
   UpCircleOutlined,
   BarsOutlined,
   AppstoreOutlined,
-  RobotOutlined
+  ThunderboltOutlined
 } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import { Tooltip, Popover } from 'antd'
 import SideBarPanel from './sidebar-panel'
 import TransferList from './transfer-list'
 import MenuBtn from '../sys-menu/menu-btn'
+import QuickConnect from '../tabs/quick-connect'
 import {
   sidebarWidth,
   settingMap,
@@ -87,7 +88,6 @@ export default function Sidebar (props) {
 
   const {
     onNewSsh,
-    onNewSshAI,
     openSetting,
     openAbout,
     openSettingSync,
@@ -144,14 +144,17 @@ export default function Sidebar (props) {
             onClick={onNewSsh}
           />
         </SideIcon>
-        <SideIcon
-          title={e('createBookmarkByAI')}
+        <Popover
+          content={<QuickConnect inputOnly />}
+          trigger='click'
+          placement='right'
         >
-          <RobotOutlined
-            className='font20 iblock control-icon'
-            onClick={onNewSshAI}
-          />
-        </SideIcon>
+          <div className='control-icon-wrap' title={e('quickConnect')}>
+            <ThunderboltOutlined
+              className='font20 iblock control-icon'
+            />
+          </div>
+        </Popover>
         <SideIcon
           title={e(settingMap.bookmarks)}
           active={bookmarksActive}

package/client/components/spice/spice.styl

@@ -2,3 +2,10 @@
   canvas
     width: 100% !important
     object-fit: contain
+  .spice-scroll-wrapper
+    display block
+.spice-scroll-wrapper
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center

package/client/components/tabs/add-btn-menu.jsx

@@ -10,6 +10,7 @@ import {
 } from '@ant-design/icons'
 import BookmarksList from '../sidebar/bookmark-select'
 import DragHandle from '../common/drag-handle'
+import QuickConnect from './quick-connect'
 
 const e = window.translate
 
@@ -87,6 +88,7 @@ export default function AddBtnMenu ({
         >
           <RobotOutlined /> {e('createBookmarkByAI')}
         </div>
+        <QuickConnect batch={batch} inputOnly />
       </div>
       <div className='add-menu-list'>
         <BookmarksList

package/client/components/tabs/no-session.jsx

@@ -1,6 +1,9 @@
 import { Button } from 'antd'
+import { RobotOutlined } from '@ant-design/icons'
 import LogoElem from '../common/logo-elem.jsx'
 import HistoryPanel from '../sidebar/history'
+import QuickConnect from './quick-connect'
+import './no-session.styl'
 
 const e = window.translate
 
@@ -13,11 +16,15 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
   const handleClick = () => {
     window.openTabBatch = batch
   }
+
+  const handleCreateAIBookmark = () => {
+    window.store.onNewSshAI()
+  }
+
   const newTabDom = window.store.hasNodePty
     ? (
       <Button
         onClick={onNewTab}
-        size='large'
         className='mg1r mg1b add-new-tab-btn'
       >
         {e('newTab')}
@@ -26,14 +33,23 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
     : null
   return (
     <div className='no-sessions electerm-logo-bg' {...props}>
-      {newTabDom}
-      <Button
-        onClick={onNewSsh}
-        size='large'
-        className='mg1r mg1b'
-      >
-        {e('newBookmark')}
-      </Button>
+      <div className='pd1b'>
+        {newTabDom}
+        <Button
+          onClick={onNewSsh}
+          className='mg1r mg1b'
+        >
+          {e('newBookmark')}
+        </Button>
+        <Button
+          onClick={handleCreateAIBookmark}
+          className='mg1r mg1b'
+          icon={<RobotOutlined />}
+        >
+          {e('createBookmarkByAI')}
+        </Button>
+        <QuickConnect batch={batch} />
+      </div>
       <div className='pd3'>
         <LogoElem />
       </div>

package/client/components/tabs/no-session.styl

@@ -0,0 +1,21 @@
+.no-sessions
+  background var(--main)
+  text-align center
+  padding 50px 0
+  position absolute
+  top 36px
+  left 0
+  right 0
+  bottom 0
+  z-index 11
+.no-session-history
+  position absolute
+  top 320px
+  bottom 80px
+  left 0
+  right 0
+  .sidebar-panel-history
+    overflow-y auto
+    .pd2x
+      width 400px
+      margin 0 auto

package/client/components/tabs/quick-connect.jsx

@@ -0,0 +1,127 @@
+import { useState, useRef, useEffect } from 'react'
+import { Button, Space } from 'antd'
+import { ArrowRightOutlined, ThunderboltOutlined } from '@ant-design/icons'
+import message from '../common/message'
+import InputAutoFocus from '../common/input-auto-focus'
+import HelpIcon from '../common/help-icon'
+
+const e = window.translate
+
+/**
+ * Connect using parsed options
+ * @param {object} opts - Connection options
+ * @param {number} batch - Batch number
+ */
+function connectWithOptions (opts, batch) {
+  const { store } = window
+  const tabOptions = {
+    ...opts,
+    from: 'quickConnect',
+    batch
+  }
+
+  delete window.openTabBatch
+  store.addTab(tabOptions)
+}
+
+export default function QuickConnect ({ batch, inputOnly }) {
+  const [showInput, setShowInput] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (showInput && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [showInput])
+
+  // When inputOnly is true, always show the input
+  useEffect(() => {
+    if (inputOnly) {
+      setShowInput(true)
+    }
+  }, [inputOnly])
+
+  const handleToggle = () => {
+    setShowInput(!showInput)
+    if (showInput) {
+      setInputValue('')
+    }
+  }
+
+  function handleChange (e) {
+    setInputValue(e.target.value)
+  }
+
+  const handleConnect = () => {
+    if (!inputValue.trim()) {
+      return
+    }
+
+    const opts = window.store.parseQuickConnect(inputValue)
+    if (!opts) {
+      return message.error('Format error, please check the input', 10)
+    }
+
+    connectWithOptions(opts, batch)
+    setInputValue('')
+    setShowInput(false)
+  }
+
+  function renderInput () {
+    if (!showInput && !inputOnly) {
+      return null
+    }
+    const inputProps = {
+      ref: inputRef,
+      value: inputValue,
+      onChange: handleChange,
+      className: 'width-100 quick-connect-input',
+      onPressEnter: handleConnect,
+      placeholder: 'ssh|rdp|vnc|spice|serial|http|https://[username]:[password]@host:port?opts={...}',
+      prefix: inputOnly ? <HelpIcon link={wiki} /> : undefined
+    }
+    const iconProps = {
+      onClick: handleConnect,
+      title: e('connect'),
+      icon: <ArrowRightOutlined />
+    }
+    const iconsProps1 = {
+      icon: <ThunderboltOutlined />
+    }
+    return (
+      <Space.Compact className='pd1y pd2x width-100'>
+        <Button
+          {...iconsProps1}
+        />
+        <InputAutoFocus {...inputProps} />
+        <Button
+          {...iconProps}
+        />
+      </Space.Compact>
+    )
+  }
+  const wiki = 'https://github.com/electerm/electerm/wiki/quick-connect'
+
+  // If inputOnly is true, don't show the button, just render input directly
+  if (inputOnly) {
+    return renderInput()
+  }
+
+  const btnProps = {
+    onClick: handleToggle,
+    icon: <ThunderboltOutlined />,
+    title: e('quickConnect')
+  }
+  return (
+    <>
+      <Button
+        {...btnProps}
+      >
+        <span className='mg1r'>{e('quickConnect')}</span>
+        <HelpIcon link={wiki} />
+      </Button>
+      {renderInput()}
+    </>
+  )
+}

package/client/components/tabs/tabs.styl

@@ -218,30 +218,12 @@
 .tab-title-tag
   margin-right 5px
   font-size 14px
-.no-sessions
-  background var(--main)
-  text-align center
-  padding 50px 0
-  position absolute
-  top 36px
-  left 0
-  right 0
-  bottom 0
-  z-index 11
+
 .tab-count
   border-radius 10px 2px 2px 10px
   padding 0 4px
   height 20px
   line-height 21px
-.no-session-history
-  position absolute
-  top 280px
-  bottom 80px
-  left 0
-  right 0
-  .sidebar-panel-history .pd2x
-    width 400px
-    margin 0 auto
 
 .ssh-tunnel-list-wrapper
   max-height 300px

package/client/components/terminal/highlight-addon.js

@@ -36,6 +36,11 @@ export class KeywordHighlighterAddon {
     return colorMap[color] || colorMap.red
   }
 
+  containsDcsSequence = (text) => {
+    const ESC = String.fromCharCode(27)
+    return text.includes(ESC + 'P')
+  }
+
   escape = str => {
     return str.replace(/\\x1B/g, '\\x1B')
       .replace(/\033/g, '\\033')
@@ -96,6 +101,12 @@ export class KeywordHighlighterAddon {
     this.originalWrite = terminal.write.bind(terminal)
     const self = this
     terminal.write = function (data) {
+      if (typeof data !== 'string') {
+        return self.originalWrite(data)
+      }
+      if (self.containsDcsSequence(data)) {
+        return self.originalWrite(data)
+      }
       self.originalWrite(
         terminal.displayRaw ? self.escape(data) : self.highlightKeywords(data)
       )

package/client/components/terminal/terminal.jsx

@@ -57,7 +57,8 @@ import {
   loadWebglAddon,
   loadSearchAddon,
   loadLigaturesAddon,
-  loadUnicode11Addon
+  loadUnicode11Addon,
+  loadImageAddon
 } from './xterm-loader.js'
 
 const e = window.translate
@@ -164,6 +165,7 @@ class Term extends Component {
     this.searchAddon = null
     this.fitAddon = null
     this.cmdAddon = null
+    this.imageAddon = null
     // Clear the notification if it exists
     if (this.socketCloseWarning) {
       notification.destroy(this.socketCloseWarning.key)
@@ -816,6 +818,19 @@ class Term extends Component {
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
     const Unicode11Addon = await loadUnicode11Addon()
     const unicode11Addon = new Unicode11Addon()
+    if (config.enableSixel !== false) {
+      try {
+        const ImageAddon = await loadImageAddon()
+        this.imageAddon = new ImageAddon({
+          enableSizeReports: false,
+          sixelSupport: true,
+          iipSupport: false
+        })
+        term.loadAddon(this.imageAddon)
+      } catch (err) {
+        console.error('load sixel addon failed', err)
+      }
+    }
     term.loadAddon(unicode11Addon)
     term.loadAddon(ligtureAddon)
     term.unicode.activeVersion = '11'

package/client/components/terminal/trzsz-client.js

@@ -44,6 +44,12 @@ export class TrzszClient extends TransferClientBase {
   handleServerEvent (msg) {
     const { event } = msg
 
+    // Ignore events that arrive after the session has already ended
+    // (e.g. async error from cancelled transfer)
+    if (!this.isActive && event !== 'receive-start' && event !== 'send-start') {
+      return
+    }
+
     switch (event) {
       case 'receive-start':
         this.onReceiveStart()

package/client/components/terminal/xterm-loader.js

@@ -72,6 +72,13 @@ export async function loadUnicode11Addon () {
   return window.xtermAddons.Unicode11Addon
 }
 
+export async function loadImageAddon () {
+  if (window.xtermAddons.ImageAddon) return window.xtermAddons.ImageAddon
+  const mod = await import('@xterm/addon-image')
+  window.xtermAddons.ImageAddon = mod.ImageAddon
+  return window.xtermAddons.ImageAddon
+}
+
 export function getTerminal () {
   return window.xtermAddons.Terminal
 }
@@ -107,3 +114,7 @@ export function getLigaturesAddon () {
 export function getUnicode11Addon () {
   return window.xtermAddons.Unicode11Addon
 }
+
+export function getImageAddon () {
+  return window.xtermAddons.ImageAddon
+}

package/client/components/terminal-info/run-cmd.jsx

@@ -167,6 +167,7 @@ function InfoGetter (props) {
     formatter,
     delay
   } = props.options
+  const { pid } = props
   const cms = cmds || [cmd]
   useEffect(() => {
     const run = async () => {
@@ -180,7 +181,7 @@ function InfoGetter (props) {
     return () => {
       clearInterval(ref)
     }
-  }, [])
+  }, [pid])
   return null
 }
 

package/client/store/load-data.js

@@ -13,6 +13,7 @@ import { initWsCommon } from '../common/fetch-from-server'
 import safeParse from '../common/parse-json-safe'
 import initWatch from './watch'
 import { refsStatic } from '../components/common/ref'
+import { parseQuickConnect } from '../common/parse-quick-connect'
 
 function getHost (argv, opts) {
   const arr = argv
@@ -219,7 +220,10 @@ export default (Store) => {
   Store.prototype.checkPendingDeepLink = async function () {
     const pending = await window.pre.runGlobalAsync('getPendingDeepLink')
     if (pending) {
-      addTabFromCommandLine(window.store, pending)
+      window.store.addTab(pending)
     }
   }
+  Store.prototype.parseQuickConnect = function (url) {
+    return parseQuickConnect(url)
+  }
 }

package/client/store/sync.js

@@ -488,6 +488,7 @@ export default (Store) => {
       'hotkey',
       'sshReadyTimeout',
       'scrollback',
+      'enableSixel',
       'fontSize',
       'execWindows',
       'execMac',

package/client/store/tab.js

@@ -341,6 +341,15 @@ export default Store => {
     const { tabs } = store
     newTab.tabCount = store.nextTabCount()
     newTab.batch = batch ?? newTab.batch ?? window.openTabBatch ?? window.store.currentLayoutBatch
+    if (!newTab.id) {
+      newTab.id = generate()
+    }
+    if (!newTab.status) {
+      newTab.status = statusMap.processing
+    }
+    if (!newTab.pane) {
+      newTab.pane = paneMap.terminal
+    }
     if (typeof index === 'number' && index >= 0 && index <= tabs.length) {
       tabs.splice(index, 0, newTab)
     } else {

package/package.json

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