@sidleo3/dsh-chat 0.0.4

package/client/chat-ui.js

@@ -0,0 +1,134 @@
+/**
+ * hub 提供给各渠道插件的共享 UI 组件。
+ *
+ * 渠道页只需要自己的协议相关内容与渠道卡片，工作区/模型/预设/**上下文增强**等
+ * 渠道无关面板直接复用这里的组件（实现只在 hub 一份）。
+ *
+ * @module dsh-chat/client/chat-ui
+ */
+
+import * as React from 'react';
+
+import { CONTRACT_VERSION } from '../shared/contract.mjs';
+import { useBotSettings, useConversations } from './bot-settings.js';
+import {
+  AccessPolicyEditor, ModelEditor, OwnerEditor, PanelSectionsEditor, PresetEditor, WorkspaceEditor,
+} from './bot-shared-settings.js';
+import { ContextEnhancementEditor } from './context-enhancement.js';
+import { DeliveryTargetsEditor } from './delivery-targets.js';
+import { callChatRpc, callControlRpc, unwrapRpc } from './rpc.js';
+import { ScopedModeEditor } from './scoped-mode-editor.js';
+import { installChatStyles } from './styles.js';
+
+const h = React.createElement;
+
+/**
+ * 通用卡片。
+ *
+ * @param props - { title, description, actions, children }。
+ * @returns React 元素。
+ */
+export function Panel({ title, description, actions, children }) {
+  return h('section', { className: 'dchat-card' },
+    title || description || actions
+      ? h('div', { className: 'dchat-cardHeader' },
+        h('div', { className: 'dchat-cardHeading' },
+          title ? h('h3', { className: 'dchat-cardTitle' }, title) : null,
+          description ? h('p', { className: 'dchat-cardDescription' }, description) : null),
+        actions ? h('div', { className: 'dchat-actions' }, actions) : null)
+      : null,
+    children);
+}
+
+/**
+ * 空态提示。
+ *
+ * @param props - { title, description, children }。
+ * @returns React 元素。
+ */
+export function EmptyState({ title, description, children }) {
+  return h('div', { className: 'dchat-empty' },
+    h('span', { className: 'dchat-emptyTitle' }, title),
+    description ? h('span', null, description) : null,
+    children);
+}
+
+const TONES = Object.freeze({
+  starting: 'warning',
+  running: 'success',
+  failed: 'error',
+  stopped: '',
+});
+
+/**
+ * 渠道/机器人状态点。
+ *
+ * @param props - { status, label }。
+ * @returns React 元素。
+ */
+export function StatusPill({ status, label }) {
+  return h('span', {
+    className: 'dchat-status',
+    'data-tone': TONES[status] ?? '',
+    'data-status': status,
+  }, label ?? status);
+}
+
+/**
+ * 创建 hub UI 套件（作为 client 服务 `chatUi` 发布）。
+ *
+ * @param options - { ctx, translate }。
+ * @returns 冻结的 UI 套件。
+ */
+export function createChatUi({ ctx, translate } = {}) {
+  const t = typeof translate === 'function' ? translate : (key) => key;
+  return Object.freeze({
+    version: CONTRACT_VERSION,
+    components: Object.freeze({
+      Panel,
+      EmptyState,
+      StatusPill,
+      /** 上下文增强（群聊/私聊全局 + 指定用户/指定群 + 是否叠加全局提示词）。 */
+      ContextEnhancementEditor,
+      /** 通用"两作用域 × 多选项"设置块（如飞书任务过程展示）。 */
+      ScopedModeEditor,
+      /** 机器人跑在哪个目录（只对新建会话生效）。 */
+      WorkspaceEditor,
+      /** 用哪套 Agent 预设（只对新建会话生效）。 */
+      PresetEditor,
+      /** 机器人默认模型（还没有会话时用它，只对新建会话生效）。 */
+      ModelEditor,
+      /** 谁能跟机器人说话、谁能执行命令（立即生效）。 */
+      AccessPolicyEditor,
+      /** 控制面板卡片显示哪些项（私聊/群聊分开）。 */
+      PanelSectionsEditor,
+      /** 属主：绕过所有策略的人（改完渠道会重连一次）。 */
+      OwnerEditor,
+      /** 主动投递目标：清单、候选收编、测试发送（数据经 hub 控制端点）。 */
+      DeliveryTargetsEditor,
+    }),
+    hooks: Object.freeze({
+      /** 读取/保存 hub 持有的每机器人共享设置。 */
+      useBotSettings,
+      /** 该机器人聊过的会话（带名字），给"指定用户/指定群"这类选择器用。 */
+      useConversations,
+    }),
+    installStyles: () => installChatStyles(),
+    /** 调用本渠道自己的 RPC。 */
+    callChannelRpc: (connection, channelId, method, payload, signal) => (
+      callChatRpc(connection, channelId, method, payload, signal)
+    ),
+    /** 调用 hub 控制端点（渠道无关设置，如上下文增强）。 */
+    callControlRpc: (connection, method, payload, signal) => (
+      callControlRpc(connection, method, payload, signal)
+    ),
+    unwrapRpc,
+    translate: t,
+    /** 供渠道页复用的 React 运行时（渠道包只 external react/react-dom，无需各写一份）。 */
+    react: React,
+    createElement: h,
+    /** hub 当前提供的契约版本，渠道页可据此显示兼容信息。 */
+    contractVersion: CONTRACT_VERSION,
+    context: Object.freeze({ has: () => typeof ctx === 'object' }),
+  });
+}

package/client/context-enhancement.js

@@ -0,0 +1,435 @@
+/**
+ * 上下文增强编辑器（渠道页共用的共享组件）。
+ *
+ * 两级设置：
+ * - 全局：私聊 / 群聊 各自的启用开关、来源字段、增强提示词；
+ * - 指定设置：指定用户（只在私聊命中）/ 指定群（只在群聊命中），
+ *   各自可独立填提示词并选择"叠加全局提示词"或"只用自己的提示词"。
+ *
+ * @module dsh-chat/client/context-enhancement
+ */
+
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+import {
+  CONTEXT_FIELDS,
+  DIRECT_GUIDANCE_EXAMPLE,
+  GROUP_GUIDANCE_EXAMPLE,
+  GUIDANCE_MAX_LENGTH,
+  TARGET_ID_MAX_LENGTH,
+  TARGET_LABEL_MAX_LENGTH,
+  TARGET_LIMIT,
+  contextStatusLabel,
+  normalizeContextConfig,
+  validateContextConfig,
+} from '../shared/context-enhancement.mjs';
+
+const h = React.createElement;
+
+const FIELD_LABELS = Object.freeze({
+  channel: '渠道',
+  conversationType: '会话类型',
+  senderId: '发送者标识',
+  senderName: '发送者昵称',
+  conversationTitle: '会话标题',
+  chatId: '会话标识',
+  threadId: '话题标识',
+  botId: '机器人标识',
+});
+
+const FIELD_HELP = Object.freeze({
+  senderName: '不是每个渠道都能提供；当前消息没有发送者昵称时会省略该字段。',
+  conversationTitle: '不是每个渠道都能提供；当前消息没有会话标题时会省略该字段。',
+  chatId: '用于区分不同群组或私聊；当前消息没有会话标识时会省略该字段。',
+  threadId: '飞书话题群的消息会带上话题标识，用于区分同一群组内的不同话题。',
+});
+
+const SCOPE_TEXT = Object.freeze({
+  direct: Object.freeze({
+    title: '私聊',
+    targetTitle: '指定用户',
+    targetHint: '只在该用户与机器人的私聊中生效（按发送者标识匹配）。',
+    idPlaceholder: 'ou_xxx（发送者标识）',
+    idLabel: '用户标识',
+  }),
+  group: Object.freeze({
+    title: '群聊',
+    targetTitle: '指定群',
+    targetHint: '只在该群中生效（按会话标识匹配）。',
+    idPlaceholder: 'oc_xxx（会话标识）',
+    idLabel: '群标识',
+  }),
+});
+
+function t_of(translate) {
+  return typeof translate === 'function' ? translate : (key) => key;
+}
+
+function FieldPicker({ scopeKey, scope, disabled, onChange, t }) {
+  return h('div', { className: 'dchat-contextFields' }, CONTEXT_FIELDS.map((field) => {
+    const inputId = `dchat-field-${scopeKey}-${field}`;
+    return h('div', { key: field, className: 'dchat-contextField' },
+      h('input', {
+        id: inputId,
+        type: 'checkbox',
+        checked: scope.fields.includes(field),
+        disabled,
+        onChange: (event) => onChange(event.target.checked
+          ? [...scope.fields, field]
+          : scope.fields.filter((value) => value !== field)),
+      }),
+      h('label', { htmlFor: inputId, title: FIELD_HELP[field] ? t(FIELD_HELP[field]) : '' },
+        h('span', null, t(FIELD_LABELS[field])),
+        h('code', null, field)));
+  }));
+}
+
+function GuidanceEditor({ idPrefix, value, example, disabled, onChange, t }) {
+  const id = `${idPrefix}-guidance`;
+  return h('div', { className: 'dchat-contextGuidance' },
+    h('div', { className: 'dchat-contextGuidanceHeader' },
+      h('label', { htmlFor: id, className: 'dchat-contextLegend' }, t('增强提示词')),
+      h('div', { className: 'dchat-actions' },
+        h('button', {
+          type: 'button', className: 'dchat-button', disabled,
+          onClick: () => onChange(example),
+        }, t('填入示例')),
+        h('button', {
+          type: 'button', className: 'dchat-button', disabled,
+          onClick: () => onChange(''),
+        }, t('清空')))),
+    h('p', { className: 'dchat-cardDescription' },
+      t('告诉模型如何使用来源字段。只填正文，插件会自动包成来源增强块。')),
+    h('textarea', {
+      id,
+      className: 'dchat-textarea',
+      rows: 4,
+      value,
+      placeholder: example,
+      maxLength: GUIDANCE_MAX_LENGTH,
+      disabled,
+      onChange: (event) => onChange(event.target.value),
+    }));
+}
+
+function GlobalScopePanel({ kind, scope, disabled, onChange, t }) {
+  const text = SCOPE_TEXT[kind];
+  const example = kind === 'group' ? GROUP_GUIDANCE_EXAMPLE : DIRECT_GUIDANCE_EXAMPLE;
+  const switchId = `dchat-enable-${kind}`;
+  return h('div', { className: 'dchat-contextGlobal' },
+    h('div', { className: 'dchat-contextSwitchRow' },
+      h('label', { htmlFor: switchId, className: 'dchat-contextSwitchLabel' },
+        `启用${text.title}全局增强`),
+      h('input', {
+        id: switchId,
+        type: 'checkbox',
+        role: 'switch',
+        checked: scope.enabled,
+        disabled,
+        onChange: (event) => onChange({ ...scope, enabled: event.target.checked }),
+      })),
+    h('div', { className: 'dchat-contextLegendRow' }, t('来源字段')),
+    h(FieldPicker, {
+      scopeKey: `${kind}-global`,
+      scope,
+      disabled,
+      onChange: (fields) => onChange({ ...scope, fields }),
+      t,
+    }),
+    h(GuidanceEditor, {
+      idPrefix: `dchat-${kind}-global`,
+      value: scope.guidance,
+      example,
+      disabled,
+      onChange: (guidance) => onChange({ ...scope, guidance }),
+      t,
+    }));
+}
+
+/** 作用域 → 指定设置的命中类型：私聊按发送者，群聊按会话。 */
+function targetKindOf(scope) {
+  return scope === 'direct' ? 'user' : 'group';
+}
+
+function TargetRow({ scope, target, index, disabled, onChange, onRemove, t, conversations }) {
+  const text = SCOPE_TEXT[scope];
+  const prefix = `dchat-target-${scope}-${index}`;
+  return h('li', { className: 'dchat-targetRow' },
+    h('div', { className: 'dchat-targetHead' },
+      h('label', { className: 'dchat-targetEnable' },
+        h('input', {
+          type: 'checkbox',
+          checked: target.enabled,
+          disabled,
+          'aria-label': `启用第 ${index + 1} 条${text.targetTitle}`,
+          onChange: (event) => onChange({ ...target, enabled: event.target.checked }),
+        }),
+        t('启用')),
+      h('button', {
+        type: 'button',
+        className: 'dchat-button',
+        disabled,
+        'aria-label': `删除第 ${index + 1} 条${text.targetTitle}`,
+        onClick: onRemove,
+      }, t('删除'))),
+    h('div', { className: 'dchat-targetGrid' },
+      h('label', { className: 'dchat-targetField' },
+        h('span', null, text.idLabel),
+        // 能选就别让人填 id：下拉里是这台机器人聊过的会话（带群名/人名），
+        // 手填输入框仍然保留，兼容还没聊过的会话与直接粘贴 id 的场合。
+        (conversations ?? []).length > 0
+          ? h('select', {
+            className: 'dchat-select',
+            value: (conversations ?? []).some((item) => item.id === target.id) ? target.id : '',
+            disabled,
+            'aria-label': text.idLabel,
+            onChange: (event) => {
+              if (event.target.value) onChange({ ...target, id: event.target.value });
+            },
+          },
+          h('option', { value: '' }, t('从会话里选…')),
+          (conversations ?? []).map((item) => h('option', { key: item.id, value: item.id }, item.name)))
+          : null,
+        h('input', {
+          type: 'text',
+          value: target.id,
+          maxLength: TARGET_ID_MAX_LENGTH,
+          placeholder: text.idPlaceholder,
+          disabled,
+          onChange: (event) => onChange({ ...target, id: event.target.value }),
+        })),
+      h('label', { className: 'dchat-targetField' },
+        h('span', null, t('备注名（可选）')),
+        h('input', {
+          type: 'text',
+          value: target.label,
+          maxLength: TARGET_LABEL_MAX_LENGTH,
+          placeholder: t('张三'),
+          disabled,
+          onChange: (event) => onChange({ ...target, label: event.target.value }),
+        }))),
+    h('div', { className: 'dchat-contextLegendRow' }, t('来源字段')),
+    h(FieldPicker, {
+      scopeKey: `${prefix}`,
+      scope: target,
+      disabled,
+      onChange: (fields) => onChange({ ...target, fields }),
+      t,
+    }),
+    h(GuidanceEditor, {
+      idPrefix: prefix,
+      value: target.guidance,
+      example: scope === 'group' ? GROUP_GUIDANCE_EXAMPLE : DIRECT_GUIDANCE_EXAMPLE,
+      disabled,
+      onChange: (guidance) => onChange({ ...target, guidance }),
+      t,
+    }),
+    h('label', { className: 'dchat-targetMerge' },
+      h('input', {
+        type: 'checkbox',
+        checked: target.merge === 'append',
+        disabled,
+        onChange: (event) => onChange({
+          ...target,
+          merge: event.target.checked ? 'append' : 'replace',
+        }),
+      }),
+      t('叠加全局提示词（不勾选则只使用上面的专属提示词）')));
+}
+
+function TargetPanel({ scope, targets, disabled, onChange, t, conversations }) {
+  const kind = targetKindOf(scope);
+  const text = SCOPE_TEXT[scope];
+  const rows = targets
+    .map((target, index) => ({ target, index }))
+    .filter((entry) => entry.target.kind === kind);
+
+  const add = () => onChange([...targets, {
+    kind,
+    id: '',
+    label: '',
+    enabled: true,
+    fields: ['senderId'],
+    guidance: '',
+    merge: 'append',
+  }]);
+
+  const replace = (index, next) => onChange(targets.map((item, at) => (at === index ? next : item)));
+  const remove = (index) => onChange(targets.filter((_, at) => at !== index));
+
+  return h('div', { className: 'dchat-contextTargets' },
+    h('div', { className: 'dchat-cardHeader' },
+      h('div', null,
+        h('h4', { className: 'dchat-cardTitle' }, text.targetTitle),
+        h('p', { className: 'dchat-cardDescription' }, text.targetHint)),
+      h('button', {
+        type: 'button',
+        className: 'dchat-button',
+        disabled: disabled || targets.length >= TARGET_LIMIT,
+        onClick: add,
+      }, t('新增'))),
+    rows.length === 0
+      ? h('p', { className: 'dchat-cardDescription' }, t('还没有指定设置。'))
+      : h('ul', { className: 'dchat-targetList' }, rows.map(({ target, index }) => h(TargetRow, {
+        key: index,
+        scope,
+        target,
+        index,
+        disabled,
+        onChange: (next) => replace(index, next),
+        onRemove: () => remove(index),
+        t,
+        // 只给这一类作用域挑：私聊给"人"，群聊给"群"。
+        conversations: (conversations ?? []).filter((item) => (
+          kind === 'group' ? item.kind === 'group' : item.kind === 'direct')),
+      }))));;
+}
+
+function ContextEnhancementDialog({ config, disabled, translate, onSave, onClose, conversations }) {
+  const t = t_of(translate);
+  const [draft, setDraft] = React.useState(() => normalizeContextConfig(config));
+  const [activeScope, setActiveScope] = React.useState('direct');
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const dialogRef = React.useRef(null);
+  const titleId = React.useId();
+
+  React.useEffect(() => {
+    dialogRef.current?.focus?.();
+  }, []);
+
+  const busy = disabled || saving;
+
+  const save = async () => {
+    if (busy) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const next = validateContextConfig(draft);
+      await onSave(next);
+      onClose();
+    } catch (cause) {
+      setError(cause?.message ?? t('保存失败，请重试。'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const content = h('div', {
+    className: 'dchat-backdrop',
+    onMouseDown: (event) => {
+      if (event.target === event.currentTarget && !saving) onClose();
+    },
+  }, h('section', {
+    ref: dialogRef,
+    className: 'dchat-dialog',
+    role: 'dialog',
+    'aria-modal': 'true',
+    'aria-labelledby': titleId,
+    tabIndex: -1,
+    onKeyDown: (event) => {
+      if (event.key === 'Escape' && !saving) {
+        event.preventDefault();
+        onClose();
+      }
+    },
+  },
+  h('header', { className: 'dchat-dialogHeader' },
+    h('h3', { id: titleId, className: 'dchat-cardTitle' }, t('上下文增强')),
+    h('button', {
+      type: 'button',
+      className: 'dchat-button',
+      disabled: saving,
+      'aria-label': t('关闭'),
+      onClick: onClose,
+    }, t('关闭'))),
+  h('p', { className: 'dchat-cardDescription' },
+    t('来源字段只在当前消息已提供时才会发送，不会额外查询平台接口。')),
+  h('div', { className: 'dchat-tabs', role: 'tablist', 'aria-label': t('上下文增强范围') },
+    ['direct', 'group'].map((kind) => h('button', {
+      key: kind,
+      type: 'button',
+      role: 'tab',
+      className: 'dchat-tab',
+      'aria-selected': activeScope === kind,
+      'data-scope': kind,
+      onClick: () => setActiveScope(kind),
+    }, t(SCOPE_TEXT[kind].title)))),
+  ['direct', 'group'].map((kind) => h('div', {
+    key: kind,
+    role: 'tabpanel',
+    className: 'dchat-tabPanel',
+    hidden: activeScope !== kind,
+    'data-scope': kind,
+  },
+  h(GlobalScopePanel, {
+    kind,
+    scope: draft[kind],
+    disabled: busy,
+    t,
+    onChange: (scope) => setDraft((current) => ({ ...current, [kind]: scope })),
+  }),
+  h(TargetPanel, {
+    scope: kind,
+    targets: draft.targets,
+    disabled: busy,
+    t,
+    conversations,
+    onChange: (targets) => setDraft((current) => ({ ...current, targets })),
+  }))),
+  error ? h('p', { className: 'dchat-error', role: 'alert' }, error) : null,
+  h('footer', { className: 'dchat-dialogFooter' },
+    h('button', {
+      type: 'button', className: 'dchat-button', disabled: saving, onClick: onClose,
+    }, t('取消')),
+    h('button', {
+      type: 'button',
+      className: 'dchat-button dchat-buttonPrimary',
+      disabled: busy,
+      onClick: () => {
+        void save();
+      },
+    }, saving ? t('保存中…') : t('保存')))));
+
+  return globalThis.document?.body ? createPortal(content, globalThis.document.body) : content;
+}
+
+/**
+ * 上下文增强入口 + 弹窗。
+ *
+ * @param props - { config, disabled, translate, onSave }。
+ * @returns React 元素。
+ */
+export function ContextEnhancementEditor({
+  config, disabled = false, translate, onSave, conversations = [],
+}) {
+  const t = t_of(translate);
+  const [open, setOpen] = React.useState(false);
+  const status = contextStatusLabel(config);
+  /**
+   * 「指定用户/指定群」的 id 必须是**平台 id**（`ou_…` / `oc_…`），因为它是拿消息里的
+   * `senderId` / `chatId` 去匹配的。**由渠道**把会话映射成平台 id 后传进来
+   * （`route` 的字段名是平台概念，hub 不认识）；没传就只留手填输入框。
+   */
+  return h(React.Fragment, null,
+    h('button', {
+      type: 'button',
+      className: 'dchat-entry',
+      disabled,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': open,
+      onClick: () => setOpen(true),
+    },
+    h('span', { className: 'dchat-entryLabel' }, t('上下文增强')),
+    h('span', { className: 'dchat-entryStatus', 'data-active': status !== '未开启' }, t(status)),
+    h('span', { className: 'dchat-entryArrow', 'aria-hidden': 'true' }, '›')),
+    open ? h(ContextEnhancementDialog, {
+      config,
+      disabled,
+      translate: t,
+      onSave,
+      conversations,
+      onClose: () => setOpen(false),
+    }) : null);
+}