cx-viewer 1.0.3 → 1.0.4

package/src/components/settings/ImStatusChip.jsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Tooltip } from 'antd';
+import { apiUrl } from '../../utils/apiUrl';
+import { imTr as _tr } from '../../utils/imTr';
+import styles from './ImStatusChip.module.css';
+
+/**
+ * Compact, generic IM status chip for the header (one per descriptor). Renders nothing unless the
+ * platform's bridge is enabled; otherwise the connection state is conveyed by the brand icon's
+ * COLOR — the platform's brand color when connected, grey otherwise (incl. error; the tooltip
+ * still spells out the error). Clicking it opens the messaging panel on this platform's tab.
+ * Self-contained: polls the platform's status endpoint every 5s.
+ */
+export default function ImStatusChip({ descriptor, onClick, onStatus }) {
+  const [enabled, setEnabled] = useState(false);
+  const [connection, setConnection] = useState(null);
+  const Icon = descriptor.icon;
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const r = await fetch(apiUrl(descriptor.endpoints.status));
+      // 失败时复位为断连态，绝不保留上一次的「已连接」——状态须以真实为准（否则断连后徽标发霉）。
+      if (!r.ok) { setConnection({ running: false, connected: false }); return; }
+      const d = await r.json();
+      setEnabled(!!d.enabled);
+      setConnection(d.connection || null);
+    } catch { setConnection({ running: false, connected: false }); }
+  }, [descriptor]);
+
+  useEffect(() => {
+    fetchStatus();
+    const id = setInterval(fetchStatus, 5000);
+    return () => clearInterval(id);
+  }, [fetchStatus]);
+
+  // 向上汇报状态（供 Electron tab bar 渲染迁移过去的 IM 图标；web 下不传 onStatus，无副作用）。
+  useEffect(() => {
+    if (!onStatus) return;
+    onStatus(descriptor.id, {
+      enabled,
+      running: !!connection?.running,
+      connected: !!(connection && connection.connected && !connection.lastError),
+    });
+  }, [enabled, connection, onStatus, descriptor.id]);
+
+  if (!enabled) return null;
+
+  // 进程感知五态：每个 IM 现在跑在独立 worker 进程里，主 cxv 经 manager 汇报 {running, connected}。
+  //   error      —— worker 报了 lastError（灰 + 红点）
+  //   connected  —— 进程在 + 适配器已连（品牌色）
+  //   running    —— 进程在但适配器未连（品牌色 + 降透明度，"运行中，连接中…"）
+  //   stopped    —— 进程不在（灰）
+  let state = 'stopped';
+  if (connection?.lastError) state = 'error';
+  else if (connection?.running && connection?.connected) state = 'connected';
+  else if (connection?.running) state = 'running';
+
+  const statusLabel = state === 'connected'
+    ? _tr('ui.im.statusConnected', null, 'Connected')
+    : state === 'running'
+      ? _tr('ui.im.statusRunning', null, 'Running, connecting…')
+      : state === 'error'
+        ? `${_tr('ui.im.statusError', null, 'Error')}: ${connection.lastError}`
+        : _tr('ui.im.statusStopped', null, 'Stopped');
+  const label = _tr(descriptor.labelKey, null, descriptor.fallback);
+  // Brand color when running/connected, grey when stopped/error — driven by the descriptor.
+  const color = (state === 'connected' || state === 'running') ? descriptor.color : 'var(--text-tertiary, #999)';
+  const iconClass = state === 'running' ? `${styles.logo} ${styles.connecting}` : styles.logo;
+
+  return (
+    <Tooltip title={`${label} · ${statusLabel}`}>
+      <span className={styles.chip} onClick={onClick} role="button" tabIndex={0}
+        aria-label={`${label} · ${statusLabel}`}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick?.(); }}>
+        <Icon size={16} className={iconClass} style={{ color }} />
+        {state === 'error' ? <span className={styles.dotError} aria-hidden="true" /> : null}
+      </span>
+    </Tooltip>
+  );
+}

package/src/components/settings/ImStatusChip.module.css

@@ -0,0 +1,36 @@
+/* Bare clickable icon — no pill/border, just the brand SVG. Plain inline (no flex) so it sits on
+ * the same baseline as the ☰ menu / project label and stays vertically centered. The connection
+ * color is applied inline from the platform descriptor (brand color when connected, grey otherwise). */
+.chip {
+  position: relative;
+  line-height: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: opacity 0.15s;
+}
+
+.chip:hover {
+  opacity: 0.75;
+}
+
+.logo {
+  display: block;
+  transition: color 0.15s;
+}
+
+/* 进程在线但适配器尚未连上：品牌色 + 降透明度，表示"运行中，连接中…"。 */
+.connecting {
+  opacity: 0.5;
+}
+
+/* worker 报错时叠加的小红点。 */
+.dotError {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-error, #ff4d4f);
+  pointer-events: none;
+}

package/src/components/settings/MessagingModal.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import { Modal } from 'antd';
+import { MessageOutlined } from '@ant-design/icons';
+import { imTr as _tr } from '../../utils/imTr';
+import ImPlatformSettings from './ImPlatformSettings';
+import { IM_PLATFORMS } from './imPlatforms';
+import { BLUR_MASK_STYLE } from '../../utils/modalMask';
+import styles from './MessagingModal.module.css';
+
+// IM tool tabs derived from the platform registry (imPlatforms.js); the tab strip renders
+// automatically. Add a platform there and it appears here.
+const TOOLS = IM_PLATFORMS.map((p) => ({
+  id: p.id, labelKey: p.labelKey, fallback: p.fallback,
+  Icon: p.icon, color: p.color,
+  render: () => <ImPlatformSettings descriptor={p} />,
+}));
+
+/**
+ * "Messaging" entry from the header menu. Lists available IM tools as a Chrome-style tab
+ * strip on top and renders the selected tool's settings in the panel below. Extensible:
+ * drop another entry into TOOLS. Tab design mirrors the UltraPlan expert tabs.
+ */
+export default function MessagingModal({ open, onClose, initialTool }) {
+  const [selected, setSelected] = useState(initialTool || TOOLS[0].id);
+  // When opened from a specific entry point (e.g. the header status chip), jump to that IM.
+  useEffect(() => { if (open && initialTool) setSelected(initialTool); }, [open, initialTool]);
+  const active = TOOLS.find((x) => x.id === selected) || TOOLS[0];
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={680}
+      destroyOnClose
+      // Modal body 取 --bg-elevated,内部 toolBody 取 --bg-container,二者对比让
+      // active tab "拉出贴合下方面板" 的 Chrome 标签观感在明暗主题都成立(对照 UltraPlan)。
+      // header 同步取 --bg-elevated,否则 light 下标题栏(antd 默认 #FFF)会与 body(#F9F9F9)错色。
+      styles={{ content: { background: 'var(--bg-elevated)' }, header: { background: 'var(--bg-elevated)' }, mask: BLUR_MASK_STYLE }}
+      title={<span><MessageOutlined style={{ marginInlineEnd: 8 }} />{_tr('ui.messaging.title', null, 'Messaging Integrations')}</span>}
+    >
+      <div className={styles.tabRow}>
+        {TOOLS.map((tool) => {
+          const isActive = selected === tool.id;
+          const Icon = tool.Icon;
+          return (
+            <button
+              key={tool.id}
+              type="button"
+              className={`${styles.tabBtn}${isActive ? ` ${styles.tabBtnActive}` : ''}`}
+              onClick={() => setSelected(tool.id)}
+            >
+              {/* Brand color on the active tab (icon + title kept in sync); grey when inactive. */}
+              <Icon size={16} style={{ color: isActive ? tool.color : 'var(--text-tertiary, #999)' }} />
+              <span style={isActive ? { color: tool.color } : undefined}>{_tr(tool.labelKey, null, tool.fallback)}</span>
+            </button>
+          );
+        })}
+      </div>
+      <div className={styles.toolBody}>
+        {active.render()}
+      </div>
+    </Modal>
+  );
+}

package/src/components/settings/MessagingModal.module.css

@@ -0,0 +1,95 @@
+/* Chrome 风格 tab 条 + 内容面板的 IM 工具选择布局,沿用 UltraPlan 专家 tab 设计:
+   未选中工具是胶囊 pill,选中工具变成浏览器头部 tab —— 顶圆角 + 底平,底边同色融进
+   下方面板,margin-bottom:-1px 把面板顶边那 1px 吃掉,形成"拉出贴合"的开口。 */
+.tabRow {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  /* 左右各内缩 8px = .toolBody 顶角圆角半径:最左/最右 tab 的方角正好落在面板顶边
+     直线段起点,不与圆角相撞、不露三角缺口。nowrap + overflow-x:auto 让未来多工具时
+     单行横向滚动(滚动条隐藏);当前仅钉钉一个工具,不触发滚动。
+     不设 position/z-index:让 .tabRow 保持静态,active tab 的 z-index 才能在
+     modal body 同一层叠上下文里压过下方非定位的 .toolBody(对照 UltraPlan)。 */
+  padding: 0 8px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.tabRow::-webkit-scrollbar {
+  display: none;
+}
+
+.tabBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  /* 未选中态不画外框:透明边占位保持与选中态等宽(避免切换时位移),仅选中态显边框。 */
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.18s, border-color 0.18s, background 0.18s;
+  white-space: nowrap;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.tabBtn:hover {
+  color: var(--color-primary);
+}
+
+/* 选中态 = Chrome 头部 tab:顶圆角 + 底平 + bg 取面板同色 (--bg-container),与 modal
+   body (--bg-elevated) 对比。底边盖缝:底边用 2px 同色实边 + margin-bottom:-1px 上移,
+   覆盖范围 [panelTop-1, panelTop+1] 完整盖住面板那 1px 顶边、且向上留 1px 余量 ——
+   2px 盖 1px 不靠边框逐像素对齐,分数 DPI / 缩放下也不会漏出 1px 描边(原 1px 盖 1px 的
+   "黑线"根因)。复合选择器特异度高于 :hover,选中态在 hover 时仍生效。 */
+.tabBtn.tabBtnActive,
+.tabBtn.tabBtnActive:hover {
+  background: var(--bg-container);
+  color: var(--color-primary);
+  border-color: var(--border-primary);
+  border-bottom: 2px solid var(--bg-container);
+  border-radius: 10px 10px 0 0;
+  font-weight: 500;
+  margin-bottom: -1px;
+  position: relative;
+  z-index: 2;
+}
+
+/* 内容面板:四角全圆角(8px,顶角靠 bg 裁切呈现);只描左/右/下三边,不要顶边 ——
+   顶边那条横线在 tab 右侧会露出来(用户不想要),去掉后 tab 直接融进面板表面、两侧无线。
+   面板顶沿改由 bg 与 modal body 的色差(+light 投影)柔和界定。最左 tab 与顶角的对齐
+   由 .tabRow 的 8px 内缩处理。保持非定位(static):active tab 是定位元素,绘制在它之上。 */
+.toolBody {
+  border: 1px solid var(--border-primary);
+  border-top: none;
+  border-radius: 8px;
+  background: var(--bg-container);
+  padding: 18px 20px;
+  min-width: 0;
+}
+
+/* light 主题:面板加柔和下落阴影把 --bg-container(#FFF)从 --bg-elevated(#F9F9F9)上托起;
+   active tab 只走"向上"阴影,和面板"向上"小尾巴一起被 tab 同色 bg 吃掉,衔接处零阴影。
+   暗色主题深底上阴影不可见,不加。 */
+[data-theme="light"] .toolBody {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
+}
+[data-theme="light"] .tabBtnActive {
+  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.06);
+}
+
+/* dark 主题:antd 输入控件默认 bg 取 colorBgContainer(#111),与面板 --bg-container 同色
+   会"消失"成只剩描边;补一层 --bg-elevated 让输入框在面板上浮起。
+   (light 下面板=#FFF、输入=#FFF 本就是描边风,沿用原样不动。) */
+[data-theme="dark"] .toolBody :global(.ant-input),
+[data-theme="dark"] .toolBody :global(.ant-input-affix-wrapper),
+[data-theme="dark"] .toolBody :global(.ant-select-selector) {
+  background-color: var(--bg-elevated);
+}

package/src/components/settings/ModelPromptTabs.jsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { Input, Segmented, Button, Popover } from 'antd';
+import { t } from '../../i18n';
+import ConfirmRemoveButton from '../common/ConfirmRemoveButton';
+import styles from './SystemTextModal.module.css';
+
+// Model tab strip inside the "Edit System Prompt" modal (strictly aligned with
+// UltraPlanModal's Chrome-tab strip): a Default tab + one tab per model entry
+// (scope badge / unsaved dot / hover delete ×) + an "+ Add model" Popover
+// (name + scope, Enter confirms). The "?" help sits next to the modal title
+// (rendered by SystemTextModal).
+// Pure presentational component: selection, entry list, and validation live in
+// the parent (onAdd returns an error message or null).
+export default function ModelPromptTabs({
+  entries,          // [{ name, scope: 'global'|'workspace' }]
+  activeKey,        // 'default' | `${scope}:${name}`
+  dirtyKeys,        // 有未保存修改的 key 列表
+  workspaceEnabled, // 是否有活动工作区(决定 Workspace 作用域可选与否)
+  disabled,         // 加载中等全局禁用
+  onSelect,         // (key) => void
+  onAdd,            // (name, scope) => string|null 错误文案(null=成功,父组件已建tab)
+  onDelete,         // (name, scope) => void
+}) {
+  const [addOpen, setAddOpen] = useState(false);
+  const [addName, setAddName] = useState('');
+  const [addScope, setAddScope] = useState('global');
+  const [addError, setAddError] = useState(null);
+
+  const resetAdd = () => { setAddName(''); setAddError(null); };
+
+  const handleAdd = () => {
+    const err = onAdd(addName.trim(), addScope);
+    if (err) { setAddError(err); return; }
+    resetAdd();
+    setAddOpen(false);
+  };
+
+  const tabKey = (e) => `${e.scope}:${e.name}`;
+
+  const addContent = (
+    <div className={styles.addPopover}>
+      <Input
+        size="small"
+        autoFocus
+        value={addName}
+        onChange={(e) => { setAddName(e.target.value); setAddError(null); }}
+        onPressEnter={handleAdd}
+        placeholder={t('ui.expert.systemText.addModelName')}
+      />
+      <Segmented
+        size="small"
+        value={addScope}
+        onChange={setAddScope}
+        options={[
+          { label: t('ui.expert.systemText.scopeGlobal'), value: 'global' },
+          { label: t('ui.expert.systemText.scopeWorkspace'), value: 'workspace', disabled: !workspaceEnabled },
+        ]}
+      />
+      {addError && <div className={styles.addError}>{addError}</div>}
+      <Button size="small" type="primary" onClick={handleAdd} disabled={!addName.trim()}>
+        {t('ui.expert.systemText.addModelConfirm')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className={styles.tabRow}>
+      <button
+        type="button"
+        className={`${styles.tabBtn} ${activeKey === 'default' ? styles.tabActive : ''}`}
+        onClick={() => onSelect('default')}
+      >
+        {t('ui.expert.systemText.tabDefault')}
+        {dirtyKeys.includes('default') && <span className={styles.dirtyDot} />}
+      </button>
+      {entries.map((e) => {
+        const key = tabKey(e);
+        return (
+          <span key={key} className={styles.tabWrap}>
+            <button
+              type="button"
+              className={`${styles.tabBtn} ${activeKey === key ? styles.tabActive : ''}`}
+              onClick={() => onSelect(key)}
+              title={e.name}
+            >
+              <span className={styles.tabTitle}>{e.name}</span>
+              <span className={styles.scopeBadge}>
+                {t(e.scope === 'global' ? 'ui.expert.systemText.scopeGlobal' : 'ui.expert.systemText.scopeWorkspace')}
+              </span>
+              {dirtyKeys.includes(key) && <span className={styles.dirtyDot} />}
+            </button>
+            <ConfirmRemoveButton
+              tag="span"
+              className={styles.tabDelete}
+              title={t('ui.expert.systemText.deleteTab', { name: e.name })}
+              ariaLabel={t('ui.expert.systemText.deleteTab', { name: e.name })}
+              onConfirm={() => onDelete(e.name, e.scope)}
+              disabled={disabled}
+            >
+              ×
+            </ConfirmRemoveButton>
+          </span>
+        );
+      })}
+      <Popover
+        open={addOpen}
+        onOpenChange={(open) => { setAddOpen(open); if (!open) resetAdd(); }}
+        content={addContent}
+        trigger="click"
+        placement="bottom"
+      >
+        <button type="button" className={styles.addBtn} disabled={disabled}>
+          + {t('ui.expert.systemText.addModel')}
+        </button>
+      </Popover>
+    </div>
+  );
+}