@electerm/electerm-react 5.5.15 → 5.5.25

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

@@ -24,7 +24,7 @@ const {
 
 export default auto(function FooterEntry (props) {
   function handleInfoPanel () {
-    window.store.openInfoPanel()
+    window.store.toggleInfoPanel()
   }
 
   function batchInput (cmd, selectedTabIds) {
@@ -106,11 +106,19 @@ export default auto(function FooterEntry (props) {
     )
   }
 
+  function handleAIPanel () {
+    window.store.toggleAIPanel()
+  }
+
   function renderAIIcon () {
+    const { rightPanelVisible, rightPanelTab } = props.store
+    // same contract as the info icon: lit while its panel is open
+    const active = rightPanelVisible && rightPanelTab === 'ai'
     return (
       <div className='terminal-footer-unit terminal-footer-ai'>
         <AIIcon
-          onClick={window.store.handleOpenAIPanel}
+          onClick={handleAIPanel}
+          className={active ? 'active' : ''}
         />
       </div>
     )
@@ -176,11 +184,15 @@ export default auto(function FooterEntry (props) {
     if (loading) {
       return null
     }
+    const { rightPanelVisible, rightPanelTab } = props.store
+    // keep the icon lit while its panel is open so it reads as "click to close"
+    const active = rightPanelVisible && rightPanelTab === 'info'
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
         <BarChartOutlined
           onClick={handleInfoPanel}
-          className='pointer font14 terminal-info-icon'
+          className={'pointer font14 terminal-info-icon' + (active ? ' active' : '')}
+          title={e('info')}
         />
       </div>
     )
@@ -202,7 +214,11 @@ export default auto(function FooterEntry (props) {
     leftSidePanelWidth,
     leftSideBarWidth,
     openedSideBar,
-    inActiveTerminal
+    inActiveTerminal,
+    rightPanelVisible,
+    rightPanelPinned,
+    rightPanelWidth,
+    isMobile
   } = props.store
   const w = leftSideBarWidth + leftSidePanelWidth
   // icon bar hidden: show a control on the left of the footer to bring the
@@ -217,16 +233,25 @@ export default auto(function FooterEntry (props) {
       </div>
       )
     : null
-  const sideProps = openedSideBar
-    ? {
-        className: 'main-footer',
-        style: {
-          left: `${w}px`
-        }
-      }
-    : {
-        className: 'main-footer'
-      }
+  // The footer mirrors the space layout.jsx reserves on both sides.
+  // Left: reserve while the panel is open OR pinned. A pinned left panel is
+  // always open, so this is a superset of the pin state — and it is what keeps
+  // the footer from painting over the panel, which spans bottom 0 in both
+  // states. Right: reserve only for a pinned panel, because the unpinned right
+  // panel is an overlay that stops above the footer and so never needs the
+  // space. Mobile reserves nothing on either side, matching layout.jsx, and the
+  // right panel has no pin control there at all.
+  const footerStyle = {}
+  if (openedSideBar && !isMobile) {
+    footerStyle.left = `${w}px`
+  }
+  if (rightPanelVisible && rightPanelPinned && !isMobile) {
+    footerStyle.right = `${rightPanelWidth}px`
+  }
+  const sideProps = {
+    className: 'main-footer',
+    style: footerStyle
+  }
   if (
     !inActiveTerminal
   ) {

package/client/components/icons/ai-icon.styl

@@ -1,3 +1,6 @@
 .ai-icon
   display inline-block
-  cursor pointer
+  cursor pointer
+  // panel open: same "on" colour the info icon and the panel pin button use
+  &.active
+    color var(--success)

package/client/components/layout/layout.jsx

@@ -151,7 +151,13 @@ export default auto(function Layout (props) {
     'leftSidePanelWidth',
     'leftSideBarWidth',
     'openedSideBar',
-    'currentQuickCommands'
+    'currentQuickCommands',
+    // the quick-command popup mirrors the footer's horizontal extent, so it
+    // needs the same right-panel state the footer uses
+    'rightPanelVisible',
+    'rightPanelPinned',
+    'rightPanelWidth',
+    'isMobile'
   ])
   const sessionsProps = {
     styles: styles.wrapStyles,

package/client/components/main/main.jsx

@@ -148,7 +148,12 @@ export default auto(function Index (props) {
     'is-mac': isMac,
     'not-mac': !isMac,
     'is-win': isWin,
-    pinned,
+    // The left sidebar dock is desktop-only (see sidebar/index.jsx). This
+    // class drives the docked-layout CSS — the footer's left offset and the
+    // sidebar panel's top padding — so it has to follow the same gate as the
+    // layout maths in layout.jsx, or a pin persisted from a desktop session
+    // would restyle the mobile layout.
+    pinned: pinned && !store.isMobile,
     'not-win': !isWin,
     'qm-pinned': pinnedQuickCommandBar,
     fullscreen,
@@ -226,6 +231,7 @@ export default auto(function Index (props) {
     transferHistory: copiedHistory,
     upgradeInfo,
     pinned,
+    isMobile: store.isMobile,
     leftSideBarIcons: config.leftSideBarIcons,
     widgetInstancesLength: widgetInstances.length
   }
@@ -253,7 +259,8 @@ export default auto(function Index (props) {
     rightPanelPinned: store.rightPanelPinned,
     rightPanelWidth: store.rightPanelWidth,
     title: rightPanelTitle,
-    rightPanelTab
+    rightPanelTab,
+    isMobile: store.isMobile
   }
   const sshConfigProps = {
     ...pick(store, [

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

@@ -37,6 +37,13 @@
       right 10px !important
       bottom 10px !important
 
+// RDP/VNC/Spice fullscreen has no footer (it is in the hide list above), so
+// the right panel has nothing to clear and may use the full height. When the
+// footer IS kept, see .fullscreen.fs-with-footer below.
+.fullscreen:not(.fs-with-footer)
+  .right-side-panel
+    bottom 0
+
 // Terminal fullscreen keeps the footer (and the quick-command popup above it)
 // visible; the session shrinks to sit on top of the footer. RDP/VNC/Spice
 // fullscreen stays footer-less — inActiveTerminal is false for those tabs, so

package/client/components/quick-commands/quick-command-ai-editor.jsx

@@ -0,0 +1,255 @@
+/**
+ * AI-powered quick command generator.
+ *
+ * This is the "create with AI" tab of the quick command form: describe the
+ * quick command in natural language, the configured AI provider returns the
+ * quick command (name + sub commands in JSON), and the result is written back
+ * into the very same form through `onChange`, so the user reviews/edits it in
+ * the manual tab before saving.
+ */
+import { useState, useEffect } from 'react'
+import { Button, Input, Space, Alert } from 'antd'
+import {
+  RobotOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
+import message from '../common/message'
+import { appendMandatoryGuardrails } from '../ai/ai-guardrails'
+import AiHistory, { addHistoryItem } from '../ai/ai-history.jsx'
+import HelpIcon from '../common/help-icon'
+import { getItem, setItem } from '../../common/safe-local-storage'
+import templates from './templates'
+import './quick-command-ai-editor.styl'
+
+const STORAGE_KEY_DESC = 'ai_quick_command_description'
+const STORAGE_KEY_HISTORY = 'ai_quick_command_history'
+const EVENT_NAME_HISTORY = 'ai-quick-command-history-update'
+const defaultDelay = 100
+const maxDelay = 65535
+const maxNameLength = 60
+const { TextArea } = Input
+const e = window.translate
+
+const wiki = 'https://github.com/electerm/electerm/wiki/Create-quick-command-by-AI'
+
+/**
+ * build the prompt that asks the AI for one quick command definition
+ * @param {string} description
+ * @return {string}
+ */
+export function buildPrompt (description) {
+  const lang = window.store.config.languageAI || window.store.getLangName()
+  const templateList = templates.map(t => `{{${t}}}`).join(', ')
+  return `You are an electerm quick command generator. Based on the user's natural language description, generate ONE quick command definition in JSON format.
+
+The quick command JSON shape:
+{
+  "name": "string (required) - short name of the quick command",
+  "commands": [
+    {
+      "name": "string - short name of this step",
+      "command": "string (required) - the exact shell command to send to the terminal",
+      "delay": "number - milliseconds to wait before sending this step, 1-${maxDelay}, default ${defaultDelay}"
+    }
+  ],
+  "inputOnly": "boolean - true means only type the command into the terminal without pressing enter, default false",
+  "labels": "array of strings - optional tags used to group quick commands"
+}
+
+Important rules:
+1. Respond with ONE quick command object, never an array of quick commands
+2. Split a multi step operation into several "commands" items, one shell command per item, and give a later step a longer "delay" when the step before it takes time
+3. "command" must be a plain shell command, no markdown, no code fence, no trailing newline
+4. Keep "name" short (max ${maxNameLength} chars) and write it in ${lang} language, labels included
+5. You may use the built in templates ${templateList} inside a command when the user asks for clipboard content, current time or current date
+6. Never invent hosts, paths, ports or credentials the user did not mention
+7. Respond ONLY with valid JSON, no markdown formatting and no extra explanation
+
+User description: ${description}
+
+Generate the quick command JSON:`
+}
+
+function stripFence (str) {
+  let s = str.trim()
+  if (s.startsWith('```json')) {
+    s = s.slice(7)
+  } else if (s.startsWith('```')) {
+    s = s.slice(3)
+  }
+  if (s.endsWith('```')) {
+    s = s.slice(0, -3)
+  }
+  return s.trim()
+}
+
+/**
+ * Normalize whatever the model returned into a quick command definition the
+ * quick command form can consume. Tolerates markdown fences, prose around the
+ * JSON, an array payload and string commands.
+ * @param {string|object} raw
+ * @return {object|null} {name, commands, inputOnly, labels}
+ */
+export function normalizeQuickCommand (raw) {
+  if (!raw) {
+    return null
+  }
+  let data = raw
+  if (typeof data === 'string') {
+    const txt = stripFence(data)
+    try {
+      data = JSON.parse(txt)
+    } catch (err) {
+      // the model sometimes wraps the JSON in explanation text
+      const match = txt.match(/[{[][\s\S]*[}\]]/)
+      if (!match) {
+        return null
+      }
+      try {
+        data = JSON.parse(match[0])
+      } catch (err2) {
+        return null
+      }
+    }
+  }
+  if (Array.isArray(data)) {
+    data = data[0]
+  }
+  if (!data || typeof data !== 'object') {
+    return null
+  }
+  const rawCommands = Array.isArray(data.commands)
+    ? data.commands
+    : (data.command ? [data] : [])
+  const commands = rawCommands.map(c => {
+    if (typeof c === 'string') {
+      return {
+        name: '',
+        command: c,
+        delay: defaultDelay
+      }
+    }
+    const delay = Number(c.delay)
+    return {
+      name: (c.name || '').toString(),
+      command: (c.command || c.cmd || '').toString(),
+      delay: delay >= 1 ? Math.min(Math.round(delay), maxDelay) : defaultDelay
+    }
+  }).filter(c => c.command.trim())
+  if (!commands.length) {
+    return null
+  }
+  const name = (data.name || data.title || '').toString().trim()
+  return {
+    name: name || commands[0].command.slice(0, maxNameLength),
+    commands,
+    inputOnly: !!data.inputOnly,
+    labels: Array.isArray(data.labels)
+      ? data.labels.map(l => l.toString()).filter(Boolean)
+      : []
+  }
+}
+
+export default function QuickCommandAiEditor (props) {
+  const { onChange } = props
+  const [description, setDescription] = useState(() => getItem(STORAGE_KEY_DESC) || '')
+  const [loading, setLoading] = useState(false)
+  const [preview, setPreview] = useState('')
+
+  useEffect(() => {
+    setItem(STORAGE_KEY_DESC, description)
+  }, [description])
+
+  async function handleGenerate () {
+    if (window.store.aiConfigMissing()) {
+      window.store.toggleAIConfig()
+      return
+    }
+    if (!description.trim()) {
+      return message.warning(e('description') + ' ' + e('required'))
+    }
+    setLoading(true)
+    try {
+      const config = window.store.config
+      const aiResponse = await window.pre.runGlobalAsync(
+        'AIchat',
+        buildPrompt(description),
+        config.modelAI,
+        appendMandatoryGuardrails('You are a helpful assistant that generates electerm quick commands.'),
+        config.baseURLAI,
+        config.apiPathAI,
+        config.apiKeyAI,
+        config.proxyAI,
+        false, // disable streaming, we need the whole JSON at once
+        config.authHeaderNameAI
+      )
+      if (aiResponse && aiResponse.error) {
+        throw new Error(aiResponse.error)
+      }
+      const data = normalizeQuickCommand(aiResponse && aiResponse.response)
+      if (!data) {
+        throw new Error('no quick command found in AI response')
+      }
+      setPreview(JSON.stringify(data, null, 2))
+      addHistoryItem(STORAGE_KEY_HISTORY, description, EVENT_NAME_HISTORY)
+      onChange(data)
+      message.success(e('Done'))
+    } catch (err) {
+      console.error('AI quick command generation error:', err)
+      message.error('Can not generate quick command from AI response: ' + err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const textAreaProps = {
+    value: description,
+    onChange: ev => setDescription(ev.target.value),
+    placeholder: e('description'),
+    autoSize: { minRows: 4, maxRows: 8 },
+    disabled: loading
+  }
+
+  const generateBtnProps = {
+    type: 'primary',
+    onClick: handleGenerate,
+    disabled: !description.trim(),
+    icon: loading ? <LoadingOutlined /> : <RobotOutlined />,
+    loading
+  }
+
+  return (
+    <div className='qm-ai-editor'>
+      <div className='pd1b'>
+        <Alert
+          type='info'
+          showIcon
+          title={e('aiSecurityNotice')}
+        />
+      </div>
+      <div className='pd1b'>
+        <TextArea {...textAreaProps} />
+      </div>
+      <AiHistory
+        storageKey={STORAGE_KEY_HISTORY}
+        eventName={EVENT_NAME_HISTORY}
+        onSelect={setDescription}
+      />
+      <div className='pd1t'>
+        <Space>
+          <Button {...generateBtnProps}>
+            {e('submit')}
+          </Button>
+          <HelpIcon link={wiki} />
+        </Space>
+      </div>
+      {
+        !!preview && (
+          <div className='pd1t'>
+            <pre className='qm-ai-preview'>{preview}</pre>
+          </div>
+        )
+      }
+    </div>
+  )
+}

package/client/components/quick-commands/quick-command-ai-editor.styl

@@ -0,0 +1,13 @@
+// "create with AI" tab of the quick command form
+.qm-ai-editor
+  // the generated quick command, kept visible for reference after it has been
+  // written back into the form
+  .qm-ai-preview
+    padding 12px
+    margin 0
+    max-height 300px
+    overflow auto
+    font-size 12px
+    font-family monospace
+    white-space pre-wrap
+    word-break break-word

package/client/components/quick-commands/quick-commands-box.jsx

@@ -163,7 +163,11 @@ export default function QuickCommandsFooterBox (props) {
     inActiveTerminal,
     leftSidePanelWidth,
     leftSideBarWidth,
-    openedSideBar
+    openedSideBar,
+    rightPanelVisible,
+    rightPanelPinned,
+    rightPanelWidth,
+    isMobile
   } = props
   if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
     return null
@@ -189,12 +193,26 @@ export default function QuickCommandsFooterBox (props) {
     : 'text'
   const cls = classNames('qm-list-wrap')
   const type = qmSortByFrequency ? 'primary' : 'default'
-  const w = openedSideBar ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
+  // Mirrors the footer's left offset. Mobile reserves nothing for the side
+  // panel — it is a full-screen drawer there (store.leftSidePanelWidth returns
+  // the viewport width), so adding it would push the popup off-screen.
+  const w = openedSideBar && !isMobile
+    ? leftSideBarWidth + leftSidePanelWidth
+    : leftSideBarWidth
+  // Keep the popup's horizontal extent in step with the footer (same `w`
+  // expression above). A pinned right panel is a dock that reserves its width
+  // in layout.jsx, so give that width up here too — otherwise the popup's right
+  // end slides under the dock. Unpinned is an overlay and reserves nothing, and
+  // mobile is excluded to match layout.jsx.
+  const qmStyle = {
+    left: w
+  }
+  if (rightPanelVisible && rightPanelPinned && !isMobile) {
+    qmStyle.right = rightPanelWidth
+  }
   const qmProps = {
     className: 'qm-wrap-tooltip',
-    style: {
-      left: w
-    }
+    style: qmStyle
   }
   return (
     <div