@sidleo3/dsh-chat 0.0.4

package/client/delivery-targets.js

@@ -0,0 +1,334 @@
+/**
+ * 主动投递目标编辑器（hub 提供的共享组件）。
+ *
+ * 渠道页把它挂在每个机器人卡片下：目标清单、候选收编、以及"发一条测试消息"。
+ * 数据一律经 hub 控制端点（`delivery.list/save/remove/send`），渠道不必实现任何
+ * 投递 UI，也不需要知道目标长什么样。
+ *
+ * 文案走 hub 自己的命名空间（默认用 `chatUi.translate`），渠道页因此不必再抄一份字符串。
+ *
+ * @module dsh-chat/client/delivery-targets
+ */
+
+import * as React from 'react';
+
+const h = React.createElement;
+
+/** 候选默认展示条数：再多了就折叠，避免一屏全是候选。 */
+const CANDIDATE_PREVIEW = 5;
+/** 超过这个条数才出现过滤框。 */
+const FILTER_THRESHOLD = 6;
+
+function translatorOf(translate, chatUi) {
+  if (typeof translate === 'function') return translate;
+  if (typeof chatUi?.translate === 'function') return chatUi.translate;
+  return (key) => key;
+}
+
+/** 一个目标的一行：名称、类型、路由与操作（候选可保存，已保存可改名/删除）。 */
+function TargetRow({
+  target, busy, confirming, renaming, renameDraft, translate,
+  onSave, onAskRemove, onCancel, onRemove, onStartRename, onRenameDraft, onSubmitRename, onCancelRename,
+}) {
+  const t = translate;
+  const route = Object.entries(target.route ?? {})
+    .map(([key, value]) => `${key}=${value}`).join(' · ');
+  const kindLabel = target.kind === 'group' ? t('群聊') : t('私聊');
+
+  // 改名态：目标名字来自平台（微信没有昵称、飞书缺权限时只有掩码 id），
+  // 一排认不出的 id 里挑不出要发给谁，所以允许自己起名（留空 = 回到自动名字）。
+  if (renaming) {
+    return h('div', { className: 'dchat-listItem dchat-deliveryRow' },
+      h('div', { className: 'dchat-deliveryMeta' },
+        h('input', {
+          className: 'dchat-input',
+          value: renameDraft,
+          placeholder: t('留空则用自动识别的名字'),
+          autoComplete: 'off',
+          spellCheck: false,
+          'aria-label': t('自定义名称'),
+          onChange: (event) => onRenameDraft(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') onSubmitRename();
+            if (event.key === 'Escape') onCancelRename();
+          },
+        }),
+        h('small', null, `${kindLabel} · ${route}`)),
+      h('div', { className: 'dchat-actions' },
+        h('button', {
+          key: 'submit',
+          type: 'button',
+          className: 'dchat-button dchat-buttonPrimary',
+          disabled: busy,
+          onClick: onSubmitRename,
+        }, busy ? t('保存中…') : t('保存')),
+        h('button', {
+          key: 'cancel',
+          type: 'button',
+          className: 'dchat-button',
+          disabled: busy,
+          onClick: onCancelRename,
+        }, t('取消'))));
+  }
+
+  const actions = target.discovered
+    ? [h('button', {
+      key: 'save',
+      type: 'button',
+      className: 'dchat-button',
+      disabled: busy,
+      onClick: () => onSave(target),
+    }, t('保存为投递目标'))]
+    : (confirming
+      ? [
+        h('button', {
+          key: 'confirm',
+          type: 'button',
+          className: 'dchat-button dchat-buttonDangerSolid',
+          disabled: busy,
+          onClick: () => onRemove(target),
+        }, t('确认删除')),
+        h('button', {
+          key: 'cancel',
+          type: 'button',
+          className: 'dchat-button',
+          disabled: busy,
+          onClick: onCancel,
+        }, t('取消')),
+      ]
+      : [
+        h('button', {
+          key: 'rename',
+          type: 'button',
+          className: 'dchat-button',
+          disabled: busy,
+          onClick: () => onStartRename(target),
+        }, t('重命名')),
+        h('button', {
+          key: 'remove',
+          type: 'button',
+          className: 'dchat-button dchat-buttonDanger',
+          disabled: busy,
+          onClick: onAskRemove,
+        }, t('删除')),
+      ]);
+
+  return h('div', { className: 'dchat-listItem dchat-deliveryRow' },
+    h('div', { className: 'dchat-deliveryMeta' },
+      h('strong', null, target.name || target.id),
+      // 只留一行身份：`route` 里已经带了 openId/chatId，再挂一个 `p2p_…` 原始 id
+      // 就是同一个东西的第二种写法，只会让人怀疑"这是两个不同的目标"。
+      h('small', null, `${kindLabel} · ${route}`)),
+    h('div', { className: 'dchat-actions' },
+      target.discovered ? h('span', { className: 'dchat-status' }, t('候选')) : null,
+      ...actions));
+}
+
+/**
+ * 投递目标编辑器。
+ *
+ * @param props - { chatUi, connection, channelId, botId, translate? }。
+ * @returns React 元素。
+ */
+export function DeliveryTargetsEditor({ chatUi, connection, channelId, botId, translate }) {
+  const t = translatorOf(translate, chatUi);
+  const { Panel } = chatUi.components;
+  const [state, setState] = React.useState({ phase: 'loading', targets: [], canSend: false });
+  const [error, setError] = React.useState(null);
+  const [notice, setNotice] = React.useState(null);
+  const [busyId, setBusyId] = React.useState(null);
+  const [confirmingId, setConfirmingId] = React.useState(null);
+  /** 正在改名的目标 id 与草稿（空草稿 = 取消自定义，回到自动名字）。 */
+  const [renamingId, setRenamingId] = React.useState(null);
+  const [renameDraft, setRenameDraft] = React.useState('');
+  const [draft, setDraft] = React.useState('');
+  const [sendTo, setSendTo] = React.useState('');
+  /** 目标一多就要有过滤与折叠，否则 8 个群排下来既找不到也没法扫。 */
+  const [filter, setFilter] = React.useState('');
+  const [showAllCandidates, setShowAllCandidates] = React.useState(false);
+
+  const call = React.useCallback(async (method, payload) => {
+    const result = await chatUi.callControlRpc(connection, method, payload);
+    return chatUi.unwrapRpc(result);
+  }, [chatUi, connection]);
+
+  const load = React.useCallback(async () => {
+    try {
+      const value = await call('delivery.list', { channelId, botId });
+      const targets = value.targets ?? [];
+      setState({ phase: 'ready', targets, canSend: value.canSend === true });
+      setSendTo((current) => {
+        const savedIds = targets.filter((target) => !target.discovered).map((target) => target.id);
+        return savedIds.includes(current) ? current : (savedIds[0] ?? '');
+      });
+    } catch (cause) {
+      setState((current) => ({ ...current, phase: 'error' }));
+      setError(cause.message);
+    }
+  }, [call, channelId, botId]);
+
+  React.useEffect(() => { void load(); }, [load]);
+
+  /** 统一处理"忙 → 调用 → 刷新 → 提示/报错"，失败必须留在界面上而不是静默。 */
+  const run = React.useCallback(async (key, method, payload, message) => {
+    setBusyId(key);
+    setError(null);
+    setNotice(null);
+    try {
+      const value = await call(method, payload);
+      await load();
+      setNotice(typeof message === 'function' ? message(value) : message);
+      return value;
+    } catch (cause) {
+      setError(cause.message);
+      return null;
+    } finally {
+      setBusyId(null);
+    }
+  }, [call, load]);
+
+  const saved = state.targets.filter((target) => !target.discovered);
+  const candidates = state.targets.filter((target) => target.discovered);
+  const ready = state.phase === 'ready' && state.canSend === true;
+  const query = filter.trim().toLowerCase();
+  const matches = (target) => !query
+    || `${target.name ?? ''} ${target.id} ${JSON.stringify(target.route ?? {})}`.toLowerCase().includes(query);
+  const savedShown = saved.filter(matches);
+  const candidatesShown = candidates.filter(matches);
+  const visibleCandidates = showAllCandidates
+    ? candidatesShown
+    : candidatesShown.slice(0, CANDIDATE_PREVIEW);
+
+  /** 一行目标；已保存与候选共用。 */
+  const renderRow = (target) => h(TargetRow, {
+    key: target.id,
+    target,
+    busy: busyId === target.id,
+    confirming: confirmingId === target.id,
+    renaming: renamingId === target.id,
+    renameDraft: renamingId === target.id ? renameDraft : '',
+    translate: t,
+    onSave: (item) => {
+      void run(item.id, 'delivery.save', {
+        channelId,
+        botId,
+        target: { id: item.id, name: item.name, kind: item.kind, route: item.route },
+      }, () => t('已保存，现在可以主动发消息了。'));
+    },
+    onStartRename: (item) => {
+      setConfirmingId(null);
+      setRenamingId(item.id);
+      // 预填当前名字，便于微调；用户想恢复自动名字就把内容清空后保存。
+      setRenameDraft(item.renamed ? item.name : '');
+    },
+    onRenameDraft: setRenameDraft,
+    onCancelRename: () => setRenamingId(null),
+    onSubmitRename: () => {
+      const id = renamingId;
+      setRenamingId(null);
+      void run(id, 'delivery.target.rename', {
+        channelId, botId, targetId: id, name: renameDraft.trim(),
+      }, () => (renameDraft.trim() ? t('已改名。') : t('已恢复自动名字。')));
+    },
+    onAskRemove: () => setConfirmingId(target.id),
+    onCancel: () => setConfirmingId(null),
+    onRemove: (item) => {
+      setConfirmingId(null);
+      void run(item.id, 'delivery.remove', { channelId, botId, targetId: item.id },
+        () => t('已删除。'));
+    },
+  });
+  const groupTitle = (text) => h('p', { className: 'dchat-groupTitle' }, text);
+
+
+  return h(Panel, {
+    title: t('主动投递'),
+    description: t('让定时任务或 agent 把结果直接发到指定会话。'),
+  },
+  error ? h('p', { className: 'dchat-error', role: 'alert' }, error) : null,
+  notice ? h('p', { className: 'dchat-notice', role: 'status' }, notice) : null,
+  state.phase === 'loading' ? h('p', { className: 'dchat-cardDescription' }, t('读取中…')) : null,
+  state.phase === 'ready' && state.canSend === false
+    ? h('p', { className: 'dchat-cardDescription' }, t('当前渠道不支持主动投递。'))
+    : null,
+  // 目标多到需要找的时候才出现过滤框，平时不占地方。
+  state.targets.length > FILTER_THRESHOLD
+    ? h('div', { className: 'dchat-actions' },
+      h('input', {
+        className: 'dchat-input',
+        value: filter,
+        placeholder: t('按名字或 id 过滤'),
+        autoComplete: 'off',
+        spellCheck: false,
+        onChange: (event) => setFilter(event.target.value),
+      }))
+    : null,
+  savedShown.length > 0
+    ? h(React.Fragment, null,
+      groupTitle(t('已保存')),
+      h('div', { className: 'dchat-list' }, savedShown.map(renderRow)))
+    : null,
+  candidatesShown.length > 0
+    ? h(React.Fragment, null,
+      groupTitle(`${t('可添加的候选')}（${candidatesShown.length}）`),
+      h('div', { className: 'dchat-list' }, visibleCandidates.map(renderRow)),
+      candidatesShown.length > CANDIDATE_PREVIEW
+        ? h('button', {
+          type: 'button',
+          className: 'dchat-button dchat-buttonLink',
+          onClick: () => setShowAllCandidates((value) => !value),
+        }, showAllCandidates
+          ? t('收起')
+          : `${t('展开全部')}（${candidatesShown.length}）`)
+        : null)
+    : null,
+  state.targets.length > 0 && savedShown.length === 0 && candidatesShown.length === 0
+    ? h('p', { className: 'dchat-cardDescription' }, t('没有匹配的目标。'))
+    : null,
+  /**
+   * 「怎么添加」常驻说明：**只要没有候选就显示**。
+   * 之前只在"一个目标都没有"时显示，于是有 1 个已保存目标、又没有候选时，
+   * 整张卡既看不到可添加项、也看不到为什么——用户只能说"没有添加入口"。
+   */
+  ready && candidates.length === 0
+    ? h('p', { className: 'dchat-cardDescription' },
+      saved.length === 0
+        ? t('还没有可添加的会话：在群里 @ 一次机器人，或与它私聊一次，会话就会出现在这里，保存后即可主动投递。')
+        : t('没有可添加的会话：在群里 @ 一次机器人，或与它私聊一次，该会话就会出现在这里。'))
+    : null,
+  candidates.length > 0
+    ? h('p', { className: 'dchat-cardDescription' },
+      t('上面标「候选」的会话还不能主动投递，点「保存为投递目标」后才行。'))
+    : null,
+  saved.length > 0
+    ? h('div', { className: 'dchat-deliverySend' },
+      h('label', { className: 'dchat-scopeLabel', htmlFor: `dchat-delivery-${botId}` },
+        t('发一条测试消息')),
+      h('div', { className: 'dchat-actions' },
+        h('select', {
+          className: 'dchat-select',
+          value: sendTo,
+          'aria-label': t('选择目标'),
+          onChange: (event) => setSendTo(event.target.value),
+        }, saved.map((target) => h('option', {
+          key: target.id, value: target.id,
+        }, `${target.name || target.id}（${target.kind === 'group' ? t('群聊') : t('私聊')}）`))),
+        h('button', {
+          type: 'button',
+          className: 'dchat-button dchat-buttonPrimary',
+          disabled: busyId === 'send' || !draft.trim() || !sendTo,
+          onClick: () => {
+            void run('send', 'delivery.send', { channelId, botId, targetId: sendTo, text: draft })
+              .then((value) => { if (value !== null) setDraft(''); });
+          },
+        }, busyId === 'send' ? t('发送中…') : t('发送'))),
+      h('textarea', {
+        id: `dchat-delivery-${botId}`,
+        className: 'dchat-textarea',
+        rows: 2,
+        placeholder: t('测试消息内容'),
+        value: draft,
+        onChange: (event) => setDraft(event.target.value),
+      }))
+    : null);
+}

package/client/diagnostics.js

@@ -0,0 +1,160 @@
+/**
+ * 「诊断」面板：出故障时的自助现场。
+ *
+ * 为什么要有它：这个项目的排查一直在"用户描述现象 → 我去读日志"之间来回，而日志就在
+ * `~/.dsh/integrations/dsh-chat/logs/`。把**每台机器人的连接状态、最近错误、日志尾部**
+ * 直接摆进设置页，用户自己就能看明白"是没连上、还是缺权限、还是呈现层发不出去"。
+ *
+ * 数据全部来自 hub 控制端点的 `diagnostics.read`（host 侧读文件；浏览器不猜路径、不碰文件系统）。
+ *
+ * @module dsh-chat/client/diagnostics
+ */
+
+import * as React from 'react';
+
+const h = React.createElement;
+
+const STATE_TEXT = Object.freeze({
+  running: '运行中',
+  starting: '启动中',
+  stopped: '已停止',
+  failed: '启动失败',
+});
+
+function formatSize(bytes) {
+  if (typeof bytes !== 'number' || bytes <= 0) return '0 B';
+  if (bytes < 1024) return `${bytes} B`;
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+function formatTime(iso) {
+  if (typeof iso !== 'string' || !iso) return '—';
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  const pad = (value) => String(value).padStart(2, '0');
+  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+/**
+ * 诊断面板。
+ *
+ * @param props - { connection, chatUi, translate, t }。
+ * @returns React 元素。
+ */
+export function DiagnosticsPanel(props) {
+  const { connection, chatUi, translate, t: frameworkT } = props;
+  const t = typeof translate === 'function' ? translate
+    : (typeof frameworkT === 'function' ? frameworkT : (key) => key);
+  const [state, setState] = React.useState({ loading: true, error: null, info: null });
+  /** 展开的日志文件路径（一次只看一个，免得面板被日志压满）。 */
+  const [openLog, setOpenLog] = React.useState(null);
+
+  const load = React.useCallback(() => {
+    setState((current) => ({ ...current, loading: true, error: null }));
+    chatUi.callControlRpc(connection, 'diagnostics.read', {})
+      .then((result) => {
+        setState({ loading: false, error: null, info: chatUi.unwrapRpc(result) });
+      })
+      .catch((error) => {
+        setState({ loading: false, error: error?.message ?? String(error), info: null });
+      });
+  }, [chatUi, connection]);
+
+  React.useEffect(() => {
+    load();
+  }, [load]);
+
+  const Panel = chatUi.components.Panel;
+  const StatusPill = chatUi.components.StatusPill;
+  const info = state.info;
+
+  const statusLabel = (channel) => {
+    if (channel.status === 'running') return t('渠道已就绪');
+    if (channel.status === 'failed') return t('渠道启动失败');
+    if (channel.status === 'stopped') return t('渠道已停止');
+    return t('渠道正在启动');
+  };
+
+  const botRow = (bot) => h('li', { key: bot.id, className: 'dchat-diagBot' },
+    // 一行放不下就整块换行：id 会省略号收缩，右侧元信息不拆字。
+    h('div', { className: 'dchat-listItem dchat-diagRow' },
+      h('span', { className: 'dchat-code' }, bot.id),
+      h('span', { className: 'dchat-diagMeta' },
+        `${STATE_TEXT[bot.state] ? t(STATE_TEXT[bot.state]) : (bot.state ?? '—')}`
+        + ` · ${bot.connected ? t('已连接') : t('未连接')}`
+        + ` · ${t('已处理')} ${bot.handled ?? 0}`
+        + (bot.lastHandledAt ? ` · ${formatTime(bot.lastHandledAt)}` : ''))),
+    // 失败必须可见：连接错误、最近一次处理错误、名字拿不到（多为缺权限，带开通链接）。
+    bot.errorMessage
+      ? h('p', { className: 'dchat-error', role: 'alert' }, bot.errorMessage)
+      : null,
+    bot.lastError
+      ? h('p', { className: 'dchat-error', role: 'alert' }, `${t('最近一次错误')}：${bot.lastError}`)
+      : null,
+    bot.nameHint
+      ? h('p', { className: 'dchat-cardDescription' },
+        `${bot.nameHint.message} `,
+        bot.nameHint.url
+          ? h('a', { href: bot.nameHint.url, target: '_blank', rel: 'noreferrer' }, t('去开通权限'))
+          : null)
+      : null);
+
+  return h(Panel, {
+    title: t('诊断'),
+    description: t('出故障时先看这里：连接状态、最近错误、日志尾部。'),
+    actions: h('button', {
+      type: 'button',
+      className: 'dchat-button',
+      onClick: load,
+      disabled: state.loading,
+    }, state.loading ? t('读取中…') : t('重新读取')),
+  },
+  state.error
+    ? h('p', { className: 'dchat-error' }, `${t('读取失败')}：${state.error}`)
+    : null,
+  ...(info?.channels ?? []).map((channel) => h('div', {
+    key: channel.id, className: 'dchat-diagSection',
+  },
+  h('div', { className: 'dchat-diagHead' },
+    h('span', { className: 'dchat-groupTitle' }, `${channel.label} · ${channel.version ?? '—'}`),
+    h(StatusPill, { status: channel.status, label: statusLabel(channel) })),
+  channel.statusError
+    ? h('p', { className: 'dchat-error', role: 'alert' }, channel.statusError)
+    : null,
+  channel.bots.length === 0
+    ? h('p', { className: 'dchat-cardDescription' }, t('这台渠道下还没有机器人。'))
+    : h('ul', { className: 'dchat-list' }, ...channel.bots.map(botRow)))),
+  info
+    ? h('ul', { className: 'dchat-list' },
+      h('li', { className: 'dchat-listItem' },
+        h('span', null, t('数据目录')),
+        h('code', { className: 'dchat-code' }, info.dataDir ?? '—')),
+      h('li', { className: 'dchat-listItem' },
+        h('span', null, t('日志目录')),
+        h('code', { className: 'dchat-code' }, info.logDir ?? '—')))
+    : null,
+  ...(info?.logs ?? []).map((log) => {
+    const name = String(log.path ?? '').split('/').pop();
+    const open = openLog === log.path;
+    return h('div', { key: log.path, className: 'dchat-diagSection' },
+      // 与机器人行同构：文件名 + 大小时间一行，展开按钮单独一行（窄栏下挤不下）。
+      h('div', { className: 'dchat-diagBot' },
+        h('div', { className: 'dchat-listItem dchat-diagRow' },
+          h('span', { className: 'dchat-code' }, name),
+          h('span', { className: 'dchat-diagMeta' },
+            log.exists
+              ? `${formatSize(log.size)} · ${formatTime(log.modifiedAt)}`
+              : t('还没有日志'))),
+        h('div', { className: 'dchat-actions' },
+          h('button', {
+            type: 'button',
+            className: 'dchat-button dchat-buttonLink',
+            disabled: !log.exists,
+            'aria-expanded': open,
+            onClick: () => setOpenLog(open ? null : log.path),
+          }, open ? t('收起') : t('看最后 40 行')))),
+      open
+        ? h('pre', { className: 'dchat-code dchat-codeBlock dchat-logTail' }, log.lines.join('\n'))
+        : null);
+  }));
+}