@electerm/electerm-react 5.5.9 → 5.5.25

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

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -4,12 +4,16 @@ import {
   Select,
   Input
 } from 'antd'
+import { RobotOutlined } from '@ant-design/icons'
 import message from '../common/message'
 import SwitchLabel from '../common/switch'
 import { useState } from 'react'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
 import renderQm from './quick-commands-list-form'
+import QuickCommandAiEditor from './quick-command-ai-editor'
+import ResponsiveTabs from '../common/responsive-tabs'
+import { isAIDisabled } from '../../common/ai-feature'
 import ShortcutEdit from '../shortcuts/shortcut-editor'
 import { getKeysTakenData } from '../shortcuts/shortcut-utils'
 import deepCopy from 'json-deep-copy'
@@ -18,6 +22,8 @@ import HelpIcon from '../common/help-icon'
 
 const FormItem = Form.Item
 const { Option } = Select
+const manualTab = 'qm-form-manual'
+const aiTab = 'qm-form-ai'
 const e = window.translate
 
 export default function QuickCommandForm (props) {
@@ -25,6 +31,7 @@ export default function QuickCommandForm (props) {
   const { store, formData } = props
   const { quickCommandTags = [] } = store
   const [shortcut, setShortcut] = useState(formData.shortcut || '')
+  const [tab, setTab] = useState(manualTab)
   const uid = formData.id || generate()
   const updateConfig = (name, value) => {
     form.setFieldsValue({
@@ -86,6 +93,22 @@ export default function QuickCommandForm (props) {
     message.success(e('saved'))
     props.onSaved?.()
   }
+
+  // AI generated quick command: write it into the same form (so the user can
+  // review/edit it) and jump back to the manual tab, where the save button is
+  function handleAiGenerated (data) {
+    const update = {
+      name: data.name,
+      commands: data.commands,
+      inputOnly: data.inputOnly
+    }
+    if (data.labels.length) {
+      update.labels = data.labels
+    }
+    form.setFieldsValue(update)
+    setTab(manualTab)
+  }
+
   const initialValues = formData
   if (!initialValues.labels) {
     initialValues.labels = []
@@ -112,6 +135,111 @@ export default function QuickCommandForm (props) {
     return `{{${t}}}`
   }).join(', ')
   const wiki = 'https://github.com/electerm/electerm/wiki/quick-command-templates'
+  const aiDisabled = isAIDisabled()
+  // renderQm() uses hooks internally, so it must run on every render
+  const qmItem = renderQm(form)
+  const manualPane = (
+    <>
+      <FormItem
+        label={e('quickCommandName')}
+        rules={[{
+          max: 60, message: '60 chars max'
+        }, {
+          required: true, message: 'Name required'
+        }]}
+        hasFeedback
+        name='name'
+      >
+        <InputAutoFocus />
+      </FormItem>
+      {qmItem}
+      <FormItem
+        name='labels'
+        label={e('label')}
+      >
+        <Select
+          mode='tags'
+        >
+          {
+            quickCommandTags.map(q => {
+              return (
+                <Option value={q} key={'qmt-' + q}>
+                  {q}
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </FormItem>
+      <FormItem
+        label={e('settingShortcuts')}
+        name='shortcut'
+      >
+        <div>
+          <Input className='hide' />
+          <ShortcutEdit
+            {...editorProps}
+          />
+        </div>
+      </FormItem>
+      <FormItem
+        label={e('inputOnly')}
+        name='inputOnly'
+        valuePropName='checked'
+      >
+        <SwitchLabel />
+      </FormItem>
+      <FormItem>
+        <p>
+          <Button
+            type='primary'
+            htmlType='submit'
+          >{e('save')}
+          </Button>
+        </p>
+      </FormItem>
+      <p>
+        <b className='mg1r'>{e('templates')}:</b>
+        <span className='mg1r'>{templatesStr}</span>
+        <HelpIcon
+          link={wiki}
+        />
+      </p>
+    </>
+  )
+  const tabsProps = {
+    activeKey: tab,
+    onChange: setTab,
+    className: 'qm-form-tabs',
+    size: 'small',
+    items: [
+      {
+        key: manualTab,
+        label: e('quickCommand')
+      },
+      ...(!aiDisabled
+        ? [{
+            key: aiTab,
+            label: (
+              <span className='qm-form-tab-ai'>
+                <RobotOutlined className='mg1r' />
+                AI
+              </span>
+            )
+          }]
+        : [])
+    ]
+  }
+  const aiPane = (
+    <>
+      <ResponsiveTabs {...tabsProps} />
+      {
+        tab === aiTab
+          ? <QuickCommandAiEditor onChange={handleAiGenerated} />
+          : manualPane
+      }
+    </>
+  )
   return (
     <>
       <Form
@@ -121,71 +249,7 @@ export default function QuickCommandForm (props) {
         layout='vertical'
         initialValues={initialValues}
       >
-        <FormItem
-          label={e('quickCommandName')}
-          rules={[{
-            max: 60, message: '60 chars max'
-          }, {
-            required: true, message: 'Name required'
-          }]}
-          hasFeedback
-          name='name'
-        >
-          <InputAutoFocus />
-        </FormItem>
-        {renderQm(form)}
-        <FormItem
-          name='labels'
-          label={e('label')}
-        >
-          <Select
-            mode='tags'
-          >
-            {
-              quickCommandTags.map(q => {
-                return (
-                  <Option value={q} key={'qmt-' + q}>
-                    {q}
-                  </Option>
-                )
-              })
-            }
-          </Select>
-        </FormItem>
-        <FormItem
-          label={e('settingShortcuts')}
-          name='shortcut'
-        >
-          <div>
-            <Input className='hide' />
-            <ShortcutEdit
-              {...editorProps}
-            />
-          </div>
-        </FormItem>
-        <FormItem
-          label={e('inputOnly')}
-          name='inputOnly'
-          valuePropName='checked'
-        >
-          <SwitchLabel />
-        </FormItem>
-        <FormItem>
-          <p>
-            <Button
-              type='primary'
-              htmlType='submit'
-            >{e('save')}
-            </Button>
-          </p>
-        </FormItem>
-        <p>
-          <b className='mg1r'>{e('templates')}:</b>
-          <span className='mg1r'>{templatesStr}</span>
-          <HelpIcon
-            link={wiki}
-          />
-        </p>
+        {aiDisabled ? manualPane : aiPane}
       </Form>
     </>
   )