@spzxg/cli-ui 0.0.0-stage → 0.1.0

package/src/msglist/CliMsgList.tsx

@@ -0,0 +1,248 @@
+// cli-msglist：消息对话列表。界面取自 Operator 的任务栏（TasksColumn 的列表视图，不做看板），
+// 一张卡片是 center 里的一个对话任务（mode=conversation）。
+import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import type { CliEvent, JobEntry } from "../core/store.js";
+import type { ConversationCallback } from "../core/types.js";
+import type { CliStoreOptions, CliStore } from "../core/store.js";
+import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider } from "../core/provider.js";
+import { TERMINAL_JOB } from "../core/conversation.js";
+import { Icon } from "../ui/icons.js";
+import { agentLabel, relTime, toMs } from "../ui/format.js";
+import { AgentBadge, ErrNote, Skel, StatusDot, type DotCls } from "../ui/shared.js";
+import { resolveMsgListConfig, type CliMsgListConfig, type ResolvedMsgListConfig } from "../core/config.js";
+
+export interface CliMsgListProps extends CliStoreOptions {
+  /** 列表显示哪些对话（center 的 job_id）。不给就用本地记住的 + （discover 时）从 center 发现的。 */
+  jobIds?: string[];
+  /** 没给 jobIds 时，挂载后从 center 发现本产品线的对话。缺省 true。 */
+  discover?: boolean;
+  /** 受控的选中项；不给就用共享仓库里的选中（和 cli-chat 联动）。 */
+  selectedId?: string | null;
+  onSelect?: (jobId: string) => void;
+  /** 点「新对话」：缺省清空选中，cli-chat 会显示空白的新对话。 */
+  onNew?: () => void;
+  /** 顶部名称与色块（如业务 / 项目名）。 */
+  title?: string;
+  color?: string;
+  /** 顶部的说明文字（对应 Operator 的项目上下文）。 */
+  context?: string;
+  onEditContext?: () => void;
+  onCollapse?: () => void;
+  /** 刷新列表的间隔，缺省 10 秒；0 = 不轮询（正在看的对话仍然实时）。 */
+  pollMs?: number;
+  theme?: "light" | "dark";
+  className?: string;
+  style?: CSSProperties;
+  width?: number | string;
+  /** 界面配置：顶部栏、搜索、卡片内容、分组标题与空状态文案，见 core/config.ts。 */
+  config?: CliMsgListConfig;
+  onEvent?: (event: CliEvent) => void;
+  /** 前端回调：载荷与 center 回调 conversation_turn / conversation_closed 的请求体同名同义。 */
+  onCallback?: (payload: ConversationCallback) => void;
+  store?: CliStore;
+}
+
+export function CliMsgList(props: CliMsgListProps) {
+  const ctx = useCliStoreContext();
+  return withOwnProvider(props, <MsgListInner {...props} inProvider={!!ctx} />, !!ctx);
+}
+
+const SEARCH_MIN = 6;
+
+interface CardView {
+  id: string;
+  title: string;
+  desc: string;
+  cls: DotCls;
+  label: string;
+  running: boolean;
+  awaiting: boolean;
+  group: "needs" | "active" | "done" | "cancelled";
+  activity: string;
+  agent: string | null;
+  turns: number;
+  updatedAt: number;
+  loading: boolean;
+  error: string | null;
+}
+
+export function cardView(id: string, entry: JobEntry | undefined): CardView {
+  const job = entry?.job;
+  const conv = job?.conversation;
+  const updatedAt = toMs(conv?.last_activity_at) ?? 0;
+  const base = { id, title: job?.title ?? id, desc: entry?.firstInput ?? "", agent: job?.tasks?.[0]?.agent ?? conv?.last_turn?.agent ?? null, turns: conv?.turns ?? 0, updatedAt, loading: !job && !entry?.error, error: entry?.error ?? null };
+  const status = job?.status ?? "queued";
+  if (TERMINAL_JOB.has(status)) {
+    const cancelled = status === "cancelled";
+    const failed = status === "failed";
+    const label = cancelled ? "已取消" : failed ? "已失败" : "已完成";
+    return { ...base, cls: cancelled || failed ? "x" : "g", label, running: false, awaiting: false, group: cancelled ? "cancelled" : "done", activity: updatedAt ? `${label} · ${relTime(updatedAt)}` : label };
+  }
+  const running = !!conv?.running_turn;
+  // 上一轮以提问结束、后面没有新消息：等你回答。
+  const awaiting = !running && !conv?.queued_turns && !!conv?.last_turn?.asked;
+  if (awaiting) return { ...base, cls: "a", label: "需要你处理", running, awaiting, group: "needs", activity: updatedAt ? `等你处理 · ${relTime(updatedAt)}` : "等你处理" };
+  if (running) return { ...base, cls: "a", label: "进行中", running, awaiting, group: "active", activity: "运行中 · 工作中" };
+  const waiting = conv?.queued_turns ? `${conv.queued_turns} 条排队中` : status === "queued" ? "等待执行节点" : updatedAt ? relTime(updatedAt) : "未开始";
+  return { ...base, cls: "a", label: "进行中", running, awaiting, group: "active", activity: waiting };
+}
+
+function MsgCard({ v, selected, onSelect, show }: { v: CardView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"] }) {
+  if (v.loading) return <CardSkeleton i={v.id.length} />;
+  const foot = show.activity || (show.turns && v.turns > 0);
+  return (
+    <button className={`task ${selected ? "sel" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect} title={v.error ?? undefined}>
+      <div className="task-top">
+        {show.status && <StatusDot cls={v.cls} running={v.running} awaiting={v.awaiting} title={v.label} />}
+        <span className="ttitle">{v.title}</span>
+        {show.status && <span className={`slabel ${v.awaiting ? "await" : ""}`}>{v.label}</span>}
+        {show.agent && v.agent && <AgentBadge label={agentLabel(v.agent)} />}
+      </div>
+      {show.description && v.desc && <div className="tdesc">{v.desc}</div>}
+      {v.error && <div className="blocked-chip">{Icon.x()} {v.error}</div>}
+      {foot && <div className="task-foot">
+        {show.activity && <span className="activity">{v.awaiting ? <span style={{ color: "var(--blue)" }}>●</span> : v.running ? <span style={{ color: "var(--amber)" }}>●</span> : null}{v.activity}</span>}
+        <span className="spacer" />
+        {show.turns && v.turns > 0 && <span className="activity">{v.turns} 轮对话</span>}
+      </div>}
+    </button>
+  );
+}
+
+function CardSkeleton({ i = 0 }: { i?: number }) {
+  const widths = [58, 42, 66, 38];
+  return (
+    <div className="task" style={{ cursor: "default" }} aria-hidden>
+      <div className="task-top"><Skel w={9} h={9} r="50%" /><Skel w={`${widths[i % widths.length]}%`} h={12} /><span style={{ flex: 1 }} /><Skel w={34} h={10} /></div>
+      <div className="task-foot"><Skel w={120} h={9} /></div>
+    </div>
+  );
+}
+
+function Group({ label, cards, selected, onSelect, show, accent, collapsible, collapsed, onToggle }: { label: string | false; cards: CardView[]; selected: string | null; onSelect: (id: string) => void; show: ResolvedMsgListConfig["card"]; accent?: boolean; collapsible?: boolean; collapsed?: boolean; onToggle?: () => void }) {
+  if (!cards.length || label === false) return null;
+  const list = cards.map((v) => <MsgCard key={v.id} v={v} selected={v.id === selected} onSelect={() => onSelect(v.id)} show={show} />);
+  if (collapsible) {
+    return (
+      <>
+        <button className={`task-group-h tgh-btn ${collapsed ? "is-collapsed" : ""}`} onClick={onToggle} title={`${collapsed ? "展开" : "折叠"}「${label}」`}>
+          {Icon.chevDown({ className: "tgh-chev" })}
+          {label} <span className="gcount">{cards.length}</span><span className="gline" />
+        </button>
+        {!collapsed && list}
+      </>
+    );
+  }
+  return (
+    <>
+      <div className={`task-group-h ${accent ? "needs-you" : ""}`}>{label} <span className="gcount">{cards.length}</span><span className="gline" /></div>
+      {list}
+    </>
+  );
+}
+
+function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, title = "对话", color = "#b8613f", context, onEditContext, onCollapse, pollMs = 10_000, config, theme = "light", className, style, width, onEvent, onCallback, inProvider }: CliMsgListProps & { inProvider: boolean }) {
+  useComponentEvents(onEvent, onCallback, inProvider);
+  const configKey = JSON.stringify(config ?? {});
+  const cfg = useMemo(() => resolveMsgListConfig(config), [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  const h = cfg.header;
+  const store = useCliStore();
+  const ids = useCliState((s) => s.jobIds);
+  const jobs = useCliState((s) => s.jobs);
+  const shared = useCliState((s) => s.selected);
+  const listLoading = useCliState((s) => s.listLoading);
+  const listError = useCliState((s) => s.listError);
+  const selected = selectedId !== undefined ? selectedId : shared;
+  const [query, setQuery] = useState("");
+  const [doneCollapsed, setDoneCollapsed] = useState(false);
+  const [cancelledCollapsed, setCancelledCollapsed] = useState(true);
+  const [discovered, setDiscovered] = useState(false);
+
+  const idsKey = jobIds?.join("\n");
+  useEffect(() => { if (jobIds) store.setJobIds(jobIds); }, [store, idsKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  // 宿主选中了列表里还没有的对话（例如旁边独立的 cli-chat 刚新建出来的）：加进列表，不用两个组件共享任何东西。
+  // 放在 setJobIds 之后，宿主的 jobIds 更新后也会再补一次。
+  useEffect(() => { if (selected && !ids.includes(selected)) store.addJob(selected); }, [selected, ids, store]);
+
+  // 首次：刷新已知的；没给 jobIds 时再去 center 发现。
+  useEffect(() => {
+    void store.refreshAll({ all: true }).then(() => {
+      if (!jobIds && discover) return store.discover().finally(() => setDiscovered(true));
+      setDiscovered(true);
+    });
+  }, [store]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (!pollMs) return;
+    const timer = setInterval(() => { if (document.visibilityState !== "hidden") void store.refreshAll(); }, pollMs);
+    return () => clearInterval(timer);
+  }, [store, pollMs]);
+
+  // 新加进来的对话（别的组件新建的 / 接续出来的）还没数据：补拉一次。
+  useEffect(() => { for (const id of ids) if (!jobs[id]) void store.refreshJob(id); }, [ids, jobs, store]);
+
+  const cards = useMemo(() => ids.map((id) => cardView(id, jobs[id])), [ids, jobs]);
+  const q = query.trim().toLowerCase();
+  const shown = q ? cards.filter((c) => c.title.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)) : cards;
+  const byRecent = (a: CardView, b: CardView) => b.updatedAt - a.updatedAt;
+  const groups = {
+    needs: shown.filter((c) => c.group === "needs").sort(byRecent),
+    active: shown.filter((c) => c.group === "active").sort(byRecent),
+    done: shown.filter((c) => c.group === "done").sort(byRecent),
+    cancelled: shown.filter((c) => c.group === "cancelled").sort(byRecent),
+  };
+  const select = (id: string) => { if (selectedId === undefined) store.select(id); onSelect?.(id); };
+  const startNew = () => { if (onNew) onNew(); else store.select(null); };
+  const firstLoad = !discovered && !cards.length;
+  const showRow = h.show && (h.title || h.newButton || h.refresh || !!onCollapse);
+  const showContext = h.show && h.context && (context !== undefined || !!onEditContext);
+  const showBanner = showRow || showContext;
+
+  return (
+    <div className={`cli-ui cli-msglist ${className ?? ""}`} data-theme={theme} style={{ ...style, ...(width !== undefined ? { width } : null) }}>
+      <div className="col col-tasks">
+        {showBanner && <div className="proj-banner">
+          {showRow && <div className="pb-row">
+            {h.title ? (
+              <span className="pb-home" style={{ cursor: "default" }}>
+                <span className="pb-pic" style={{ background: color }}>{title[0]}</span>
+                <span className="pb-name">{title}</span>
+              </span>
+            ) : <span style={{ flex: 1 }} />}
+            {h.newButton && <button className="btn btn-line btn-sm" onClick={startNew}>{Icon.plus()} {h.newButtonText}</button>}
+            {h.refresh && <button className="icon-btn" onClick={() => void store.refreshAll({ all: true })} title="刷新列表" aria-label="刷新列表" disabled={listLoading}>{Icon.restore()}</button>}
+            {onCollapse && <button className="icon-btn" onClick={onCollapse} title="隐藏对话列表">{Icon.chevRight({ style: { transform: "rotate(180deg)" } })}</button>}
+          </div>}
+          {showContext && (
+            <button className="pb-ctx" onClick={onEditContext} style={onEditContext ? undefined : { cursor: "default" }}>
+              <div className={`ctx-txt ${context ? "" : "empty-ctx"}`}>{context || "添加上下文 —— 简介、背景与规范，会附加到每个对话前。"}</div>
+              {onEditContext && <div className="ctx-edit">{Icon.edit()} 上下文</div>}
+            </button>
+          )}
+        </div>}
+        {(cfg.search === true || (cfg.search === "auto" && cards.length >= SEARCH_MIN)) && (
+          <div className="search-bar">
+            <span className="search-ic">{Icon.search()}</span>
+            <input className="search-input" value={query}  placeholder={cfg.searchPlaceholder} spellCheck={false} onChange={(e) => setQuery(e.target.value)} onKeyDown={(e) => { if (e.key === "Escape") setQuery(""); }} />
+            {query && <button className="search-clear" title="清除搜索" onClick={() => setQuery("")}>{Icon.x()}</button>}
+          </div>
+        )}
+        <div className="scroll">
+          <div className="task-scroll">
+            {listError && <ErrNote onRetry={() => void store.refreshAll({ all: true })}>{listError}</ErrNote>}
+            {firstLoad ? [0, 1, 2].map((i) => <CardSkeleton key={i} i={i} />) : (
+              <>
+                {cards.length === 0 && <div className="empty" style={{ padding: "30px 16px" }}><div className="e-t">{cfg.emptyTitle}</div>{cfg.emptyDescription && <div className="e-s">{cfg.emptyDescription}</div>}</div>}
+                {q && shown.length === 0 && <div className="search-empty">没有匹配“{query.trim()}”的对话。</div>}
+                <Group label={cfg.groups.needs} cards={groups.needs} selected={selected} onSelect={select} show={cfg.card} accent />
+                <Group label={cfg.groups.active} cards={groups.active} selected={selected} onSelect={select} show={cfg.card} />
+                <Group label={cfg.groups.done} cards={groups.done} selected={selected} onSelect={select} show={cfg.card} collapsible collapsed={doneCollapsed && !q} onToggle={() => setDoneCollapsed((c) => !c)} />
+                <Group label={cfg.groups.cancelled} cards={groups.cancelled} selected={selected} onSelect={select} show={cfg.card} collapsible collapsed={cancelledCollapsed && !q} onToggle={() => setCancelledCollapsed((c) => !c)} />
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}