@electerm/electerm-react 5.3.26 → 5.5.6

package/client/components/triggers/trigger-editor.jsx

@@ -0,0 +1,246 @@
+/**
+ * Reusable declarative-trigger editor.
+ * Controlled component: props { value, onChange }.
+ * Used by bookmark form tab, footer session modal and anywhere else.
+ * Supports UI editing, JSON editing and built-in presets.
+ */
+import { useState } from 'react'
+import {
+  Button,
+  Switch,
+  Modal,
+  Form,
+  Input,
+  Dropdown,
+  Popconfirm,
+  Empty,
+  Tag,
+  Tooltip,
+  message
+} from 'antd'
+import {
+  PlusOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  CodeOutlined,
+  ThunderboltOutlined
+} from '@ant-design/icons'
+import TriggerForm, { buildTriggerFromFormValues } from './trigger-form.jsx'
+import {
+  triggerPresets,
+  buildTriggerFromPreset,
+  buildEmptyTrigger
+} from '../terminal/automation/trigger-presets.js'
+import { validateTriggers } from '../terminal/automation/trigger-engine.js'
+import uid from '../../common/uid'
+
+const e = window.translate
+
+export function matchSummary (t) {
+  const type = t.match?.type === 'regex' ? 're' : 'text'
+  const v = t.match?.value || ''
+  const short = v.length > 42 ? v.slice(0, 42) + '…' : v
+  return `[${type}] ${short}`
+}
+
+export function actionSummary (t) {
+  if (t.action?.type === 'notify') {
+    return 'notify'
+  }
+  const v = t.action?.value || ''
+  const short = v.length > 24 ? v.slice(0, 24) + '…' : JSON.stringify(v)
+  return `send ${short}${t.sendEnter === false ? '' : ' +⏎'}`
+}
+
+export default function TriggerEditor ({ value, onChange }) {
+  const list = Array.isArray(value) ? value : []
+  const [editing, setEditing] = useState(null)
+  const [jsonOpen, setJsonOpen] = useState(false)
+  const [jsonText, setJsonText] = useState('')
+  const [form] = Form.useForm()
+
+  const emit = (next) => {
+    onChange?.(next)
+  }
+
+  const handleToggle = (id, enabled) => {
+    emit(list.map(t => t.id === id ? { ...t, enabled } : t))
+  }
+
+  const handleDel = (id) => {
+    emit(list.filter(t => t.id !== id))
+  }
+
+  const handleDuplicate = (item) => {
+    const copy = { ...JSON.parse(JSON.stringify(item)), id: uid(), name: (item.name || '') + ' (copy)' }
+    emit([...list, copy])
+  }
+
+  const openAdd = () => {
+    setEditing(buildEmptyTrigger(uid))
+  }
+
+  const openEdit = (item) => {
+    setEditing(JSON.parse(JSON.stringify(item)))
+  }
+
+  const handlePreset = ({ key }) => {
+    const preset = triggerPresets[Number(key)]
+    if (!preset) {
+      return
+    }
+    emit([...list, buildTriggerFromPreset(preset, uid)])
+    message.success('OK')
+  }
+
+  const handleSaveEdit = async () => {
+    try {
+      const v = await form.validateFields()
+      const next = buildTriggerFromFormValues(editing, v)
+      const errors = validateTriggers([next])
+      if (errors.length) {
+        message.error(errors[0])
+        return
+      }
+      const exists = list.some(t => t.id === next.id)
+      emit(exists ? list.map(t => t.id === next.id ? next : t) : [...list, next])
+      setEditing(null)
+    } catch (err) {
+      // validation failed, keep modal open
+    }
+  }
+
+  const openJson = () => {
+    setJsonText(JSON.stringify(list, null, 2))
+    setJsonOpen(true)
+  }
+
+  const applyJson = () => {
+    let parsed
+    try {
+      parsed = JSON.parse(jsonText)
+    } catch (err) {
+      message.error('Invalid JSON: ' + err.message)
+      return
+    }
+    if (!Array.isArray(parsed)) {
+      message.error('JSON must be an array')
+      return
+    }
+    const normalized = parsed.map(t => ({
+      ...t,
+      id: t.id || uid()
+    }))
+    const errors = validateTriggers(normalized)
+    if (errors.length) {
+      message.error(errors[0])
+      return
+    }
+    emit(normalized)
+    setJsonOpen(false)
+    message.success('OK')
+  }
+
+  const presetMenu = {
+    items: triggerPresets.map((p, i) => ({
+      key: String(i),
+      label: p.name
+    })),
+    onClick: handlePreset
+  }
+
+  return (
+    <div className='trigger-editor'>
+      <div className='pd1b' style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <Button
+          size='small'
+          type='primary'
+          icon={<PlusOutlined />}
+          onClick={openAdd}
+        >
+          {e('new')}
+        </Button>
+        <Dropdown menu={presetMenu} trigger={['click']}>
+          <Button size='small' icon={<ThunderboltOutlined />}>
+            {e('presets')}
+          </Button>
+        </Dropdown>
+        <Button
+          size='small'
+          icon={<CodeOutlined />}
+          onClick={openJson}
+        >
+          JSON
+        </Button>
+      </div>
+      {
+        !list.length
+          ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='No triggers yet — add one or pick a preset' />
+          : list.map(t => (
+            <div
+              key={t.id}
+              className='trigger-item pd1x pd1y mg1b'
+              style={{ border: '1px solid var(--border, #333)', borderRadius: 4 }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <Switch
+                  size='small'
+                  checked={t.enabled !== false}
+                  onChange={(v) => handleToggle(t.id, v)}
+                />
+                <b className='elli' style={{ flex: 1 }} title={t.name}>
+                  {t.name || 'Unnamed'}
+                </b>
+                <Tag>{t.mode || 'cooldown'}</Tag>
+                <Tooltip title={e('edit')}>
+                  <EditOutlined className='pointer' onClick={() => openEdit(t)} />
+                </Tooltip>
+                <Tooltip title={e('duplicate')}>
+                  <CopyOutlined className='pointer' onClick={() => handleDuplicate(t)} />
+                </Tooltip>
+                <Popconfirm
+                  title={e('del')}
+                  onConfirm={() => handleDel(t.id)}
+                >
+                  <DeleteOutlined className='pointer' />
+                </Popconfirm>
+              </div>
+              <div className='mg1t small muted elli' title={matchSummary(t) + ' → ' + actionSummary(t)}>
+                {matchSummary(t)} → {actionSummary(t)}
+              </div>
+            </div>
+          ))
+      }
+      <Modal
+        open={!!editing}
+        title={(editing?.name ? e('edit') : e('new')) + ' ' + e('triggers')}
+        onCancel={() => setEditing(null)}
+        onOk={handleSaveEdit}
+        destroyOnHidden
+        width={640}
+      >
+        {editing ? <TriggerForm form={form} initial={editing} /> : null}
+      </Modal>
+      <Modal
+        open={jsonOpen}
+        title='JSON'
+        onCancel={() => setJsonOpen(false)}
+        onOk={applyJson}
+        destroyOnHidden
+        width={640}
+      >
+        <Input.TextArea
+          rows={14}
+          value={jsonText}
+          onChange={(ev) => setJsonText(ev.target.value)}
+          spellCheck={false}
+          style={{ fontFamily: 'monospace' }}
+        />
+        <div className='mg1t small muted'>
+          JSON array of trigger rules. Invalid regex or missing match will be rejected.
+        </div>
+      </Modal>
+    </div>
+  )
+}

package/client/components/triggers/trigger-form.jsx

@@ -0,0 +1,200 @@
+/**
+ * Single trigger rule form (used inside a Modal by TriggerEditor).
+ * Controlled via antd Form, initialValues = editing rule.
+ */
+import { useEffect } from 'react'
+import {
+  Button,
+  Dropdown,
+  Form,
+  Input,
+  Switch,
+  Select,
+  InputNumber,
+  Radio
+} from 'antd'
+import { CaretDownOutlined } from '@ant-design/icons'
+import {
+  triggerActionTypes,
+  triggerMatchTypes,
+  triggerModes,
+  triggerPresets
+} from '../terminal/automation/trigger-presets.js'
+import uid from '../../common/uid'
+
+const e = window.translate
+
+// Build a full trigger rule from form values. `editing` is the rule being
+// edited (or a {id:''} placeholder for a new one).
+export function buildTriggerFromFormValues (editing = {}, v) {
+  return {
+    ...(editing.id ? editing : {}),
+    id: editing.id || uid(),
+    name: v.name,
+    enabled: v.enabled !== false,
+    match: {
+      type: v.matchType,
+      value: v.matchValue,
+      caseSensitive: !!v.caseSensitive
+    },
+    action: {
+      type: v.actionType,
+      value: v.actionType === 'notify' ? '' : (v.actionValue || '')
+    },
+    sendEnter: v.sendEnter !== false,
+    mode: v.mode,
+    // Keep the value while another mode is selected so switching back to
+    // cooldown does not silently replace the user's interval.
+    cooldownMs: v.cooldownMs == null ? 500 : v.cooldownMs
+  }
+}
+
+export default function TriggerForm ({ form, initial }) {
+  const actionType = Form.useWatch('actionType', form)
+  const mode = Form.useWatch('mode', form)
+
+  useEffect(() => {
+    form.resetFields()
+    form.setFieldsValue({
+      name: initial.name || '',
+      enabled: initial.enabled !== false,
+      matchType: initial.match?.type || 'text',
+      matchValue: initial.match?.value || '',
+      caseSensitive: !!initial.match?.caseSensitive,
+      actionType: initial.action?.type || 'send',
+      actionValue: initial.action?.value || '',
+      sendEnter: initial.sendEnter !== false,
+      mode: initial.mode || 'cooldown',
+      cooldownMs: initial.cooldownMs == null ? 500 : initial.cooldownMs
+    })
+  }, [form, initial])
+
+  const presetMenu = {
+    items: triggerPresets.map((p, i) => ({
+      key: String(i),
+      label: p.name
+    })),
+    onClick: ({ key }) => {
+      const p = triggerPresets[Number(key)]
+      if (!p) {
+        return
+      }
+      form.setFieldsValue({
+        name: p.name,
+        enabled: true,
+        matchType: p.match.type,
+        matchValue: p.match.value,
+        caseSensitive: !!p.match.caseSensitive,
+        actionType: p.action.type,
+        actionValue: p.action.value,
+        sendEnter: p.sendEnter !== false,
+        mode: p.mode || 'cooldown',
+        cooldownMs: p.cooldownMs == null ? 500 : p.cooldownMs
+      })
+    }
+  }
+
+  return (
+    <Form
+      form={form}
+      layout='vertical'
+    >
+      <div className='pd1b alignright'>
+        <Dropdown menu={presetMenu} trigger={['click']}>
+          <Button icon={<CaretDownOutlined />}>
+            {e('presets')}
+          </Button>
+        </Dropdown>
+      </div>
+      <Form.Item
+        name='name'
+        label={e('title')}
+        rules={[{ required: true, message: e('title') + ' required' }]}
+      >
+        <Input placeholder='Cisco --More-- auto pager' />
+      </Form.Item>
+      <Form.Item
+        name='enabled'
+        label={e('enabled')}
+        valuePropName='checked'
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item label='Match'>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Form.Item name='matchType' noStyle>
+            <Radio.Group
+              options={triggerMatchTypes.map(t => ({ label: t.label, value: t.value }))}
+              optionType='button'
+              buttonStyle='solid'
+              size='small'
+            />
+          </Form.Item>
+          <Form.Item
+            name='matchValue'
+            noStyle
+            rules={[{ required: true, message: 'match required' }]}
+          >
+            <Input
+              placeholder='--More-- or press any key.*'
+              style={{ flex: 1 }}
+            />
+          </Form.Item>
+        </div>
+      </Form.Item>
+      <Form.Item
+        name='caseSensitive'
+        label='Case sensitive'
+        valuePropName='checked'
+      >
+        <Switch size='small' />
+      </Form.Item>
+      <Form.Item label='Action'>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Form.Item name='actionType' noStyle>
+            <Select
+              style={{ width: 130 }}
+              options={triggerActionTypes.map(t => ({ label: t.label, value: t.value }))}
+            />
+          </Form.Item>
+          <Form.Item name='actionValue' noStyle>
+            <Input
+              placeholder={actionType === 'notify' ? 'Notify only (no send)' : 'space, y, \\r, \\x03, ^M'}
+              style={{ flex: 1 }}
+              disabled={actionType === 'notify'}
+            />
+          </Form.Item>
+        </div>
+      </Form.Item>
+      <div style={{ display: 'flex', gap: 24 }}>
+        <Form.Item
+          name='sendEnter'
+          label='Send Enter'
+          valuePropName='checked'
+        >
+          <Switch size='small' disabled={actionType === 'notify'} />
+        </Form.Item>
+        <Form.Item
+          name='mode'
+          label={e('mode')}
+        >
+          <Select
+            style={{ width: 190 }}
+            options={triggerModes.map(t => ({ label: t.label, value: t.value }))}
+          />
+        </Form.Item>
+        <Form.Item
+          name='cooldownMs'
+          label='Cooldown (ms)'
+        >
+          <InputNumber
+            min={0}
+            max={600000}
+            step={100}
+            disabled={mode !== 'cooldown'}
+          />
+        </Form.Item>
+      </div>
+    </Form>
+  )
+}

package/client/components/triggers/trigger-session-modal.jsx

@@ -0,0 +1,199 @@
+/**
+ * Trigger popup opened from the footer icon.
+ * Global tab: all predefined triggers, switches change the global on/off
+ * default (persisted in db, synced).
+ * This-session tab: ALL triggers (predefined + session temp/bookmark rules)
+ * with session-only switches (memory, per tab), plus a temp rule editor.
+ * Predefined trigger management (create/edit) lives in the settings panel.
+ */
+import { auto } from 'manate/react'
+import { Modal, Tabs, Alert, Switch, Button, Empty, Tag } from 'antd'
+import { SettingOutlined } from '@ant-design/icons'
+import TriggerEditor, { matchSummary, actionSummary } from './trigger-editor.jsx'
+import message from '../common/message'
+
+const e = window.translate
+
+function renderItemWrap (children) {
+  return (
+    <div
+      className='trigger-item pd1x pd1y mg1b'
+      style={{ border: '1px solid var(--border, #333)', borderRadius: 4 }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function renderMeta (t) {
+  return (
+    <div className='mg1t small muted elli' title={matchSummary(t) + ' → ' + actionSummary(t)}>
+      {matchSummary(t)} → {actionSummary(t)}
+    </div>
+  )
+}
+
+export default auto(function TriggerSessionModal (props) {
+  const { store } = props
+  const open = !!store.triggerSessionOpen
+  if (!open) {
+    return null
+  }
+  const tab = store.currentTab
+  const tabId = tab?.id || store.activeTabId
+  const sessionTriggers = (tab && tab.triggers) || []
+  const predefined = store.triggers || []
+  const overrides = (tab && tab.triggerOverrides) || {}
+
+  const handleSessionChange = (next) => {
+    const errors = store.setSessionTriggers(tabId, next)
+    if (errors && errors.length) {
+      message.error(errors[0])
+    }
+  }
+
+  const handleClose = () => {
+    store.toggleTriggerSessionModal(false)
+  }
+
+  const openManage = () => {
+    store.toggleTriggerSessionModal(false)
+    store.openTriggers()
+  }
+
+  // global tab: switch = global on/off default (persisted)
+  const renderGlobalRow = (t) => {
+    return renderItemWrap(
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Switch
+            size='small'
+            checked={t.enabled !== false}
+            onChange={v => store.editTrigger(t.id, { enabled: v })}
+          />
+          <b className='elli' style={{ flex: 1 }} title={t.name}>
+            {t.name || 'Unnamed'}
+          </b>
+          <Tag>{t.mode || 'cooldown'}</Tag>
+        </div>
+        {renderMeta(t)}
+      </div>
+    )
+  }
+
+  // session tab: switch = on/off for this session only (memory)
+  const renderSessionRow = (t) => {
+    const globalOn = t.enabled !== false
+    const overridden = t.id in overrides
+    const checked = overridden ? overrides[t.id] : globalOn
+    return renderItemWrap(
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Switch
+            size='small'
+            checked={checked}
+            onChange={v => store.togglePredefinedTrigger(tabId, t.id, v)}
+          />
+          <b className='elli' style={{ flex: 1 }} title={t.name}>
+            {t.name || 'Unnamed'}
+          </b>
+          {
+            overridden && overrides[t.id] !== globalOn
+              ? (
+                <span className='small muted'>
+                  {globalOn ? 'global: on' : 'global: off'}
+                </span>
+                )
+              : null
+          }
+          <Tag>{t.mode || 'cooldown'}</Tag>
+        </div>
+        {renderMeta(t)}
+      </div>
+    )
+  }
+
+  const renderGlobalList = () => {
+    return (
+      <div>
+        <Alert
+          type='info'
+          showIcon
+          className='mg1b'
+          message='All predefined triggers. Switches change the global on/off default.'
+        />
+        {
+          !predefined.length
+            ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='No triggers yet — add one in Manage' />
+            : predefined.map(renderGlobalRow)
+        }
+        <div className='pd1t' style={{ textAlign: 'right' }}>
+          <Button
+            size='small'
+            icon={<SettingOutlined />}
+            onClick={openManage}
+          >
+            {e('edit')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  const renderSessionList = () => {
+    return (
+      <div>
+        {
+          !predefined.length
+            ? null
+            : (
+              <div className='mg1b'>
+                <b>Predefined</b>
+                <span className='small muted mg1l'>Switches apply to this session only.</span>
+                <div className='pd1t'>
+                  {predefined.map(renderSessionRow)}
+                </div>
+              </div>
+              )
+        }
+        <div className='mg1b'>
+          <b>This session</b>
+          <span className='small muted mg1l'>Temporary rules are not saved to the triggers database.</span>
+        </div>
+        <TriggerEditor
+          value={sessionTriggers}
+          onChange={handleSessionChange}
+        />
+      </div>
+    )
+  }
+
+  const activeCount = tab
+    ? store.getEffectiveTriggers(tab).length
+    : predefined.filter(t => t.enabled !== false).length
+
+  const items = [
+    {
+      key: 'predefined',
+      label: `${e('global')} (${predefined.length})`,
+      children: renderGlobalList()
+    },
+    {
+      key: 'session',
+      label: `This session (${activeCount})`,
+      children: renderSessionList()
+    }
+  ]
+
+  return (
+    <Modal
+      open={open}
+      title={e('triggers')}
+      onCancel={handleClose}
+      footer={null}
+      width={680}
+    >
+      <Tabs items={items} />
+    </Modal>
+  )
+})