@morlay/ui-conversation-message-actions 0.0.11 → 0.0.12

package/src/client/chat-node/MessageItem.tsx

@@ -0,0 +1,198 @@
+// MessageItem: the user / admitted-steering chat node renderer.
+// 新版 `dsh-client-ui-chat` 已内置全部 chat-node 渲染器；本项目仅**替换**
+// `user`/`steering` 两个 key（keyed slot reuse 即替换），在消息动作行上提供
+// edit / retry（新版无此能力）。其余 key 由新版内置渲染器处理。
+
+import { memo, useState } from "react";
+import type { ReactNode } from "react";
+import type { InjectFace } from "@deepseek-ai/dsh-client-ui-slots";
+import { Button, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import type { UserMessageNode } from "@deepseek-ai/dsh-client-ui-chat/client";
+import { JsonBlock, MessageText } from "@deepseek-ai/dsh-client-ui-primitives";
+import type { ChatNodeViewProps, ChatViewSlotProps } from "@deepseek-ai/dsh-client-ui-chat/client";
+import type { RenderMessageImages } from "@deepseek-ai/dsh-client-ui-conversation/client";
+import { MessageIconActions } from "./MessageIconActions.tsx";
+import { MessageEditDialog } from "./MessageEditDialog.tsx";
+import css from "./MessageItem.module.css";
+import type { EditableMessageBlock } from "../../shared.ts";
+import type { SessionEditorFace } from "../controller.ts";
+
+type UserImage = Extract<UserMessageNode["content"][number], { type: "image" }>;
+
+function contentParts(content: readonly unknown[]): {
+  text: string;
+  images: { attachment: UserImage["attachment"] }[];
+  rest: unknown[];
+} {
+  const texts: string[] = [];
+  const images: { attachment: UserImage["attachment"] }[] = [];
+  const rest: unknown[] = [];
+  for (const block of content) {
+    const b = block as { type?: string; text?: string; attachment?: unknown };
+    if (b.type === "text" && typeof b.text === "string") texts.push(b.text);
+    else if (b.type === "image" && b.attachment !== undefined) {
+      images.push({ attachment: (b as UserImage).attachment });
+    } else rest.push(block);
+  }
+  return { text: texts.join(""), images, rest };
+}
+
+function projectUserText(text: string): ReactNode {
+  const re = /(^|\s)([/@][\w-]+)(?=\s|$)/g;
+  const parts: ReactNode[] = [];
+  let cursor = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(text)) !== null) {
+    const tokenStart = m.index + (m[1]?.length ?? 0);
+    const label = m[2] ?? "";
+    if (tokenStart > cursor)
+      parts.push(<MessageText key={cursor} text={text.slice(cursor, tokenStart)} />);
+    parts.push(
+      <span
+        key={tokenStart}
+        className={css.refChip}
+        data-ref-chip={label.startsWith("@") ? "subagent" : "skill"}
+      >
+        {label}
+      </span>,
+    );
+    cursor = tokenStart + label.length;
+  }
+  if (parts.length === 0) return <MessageText text={text} />;
+  if (cursor < text.length) parts.push(<MessageText key={cursor} text={text.slice(cursor)} />);
+  return <>{parts}</>;
+}
+
+function UserStyleBubble({
+  content,
+  renderMessageImages,
+  actions,
+  t,
+}: {
+  content: readonly unknown[];
+  renderMessageImages: RenderMessageImages;
+
+  actions?: (text: string) => ReactNode;
+  t: ChatViewSlotProps["t"];
+}): ReactNode {
+  const { text, images, rest } = contentParts(content);
+  const truncated = (total: number): string => t("json.truncated", { total });
+  const showBubble = text !== "" || rest.length > 0;
+  return (
+    <div className={css.userRow} data-time-hover-root>
+      <div className={css.userStack}>
+        {renderMessageImages({ images, align: "end" })}
+        {showBubble && (
+          <div className={css.bubble}>
+            {projectUserText(text)}
+            {rest.map((block, i) => (
+              <JsonBlock
+                key={i}
+                label={t("message.extraBlock")}
+                payload={block}
+                truncatedLabel={truncated}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      {actions?.(text)}
+    </div>
+  );
+}
+
+export const UserMessageNodeView = memo(function UserMessageNodeView({
+  node,
+  renderMessageImages,
+  t,
+  edit,
+  retry,
+}: ChatNodeViewProps<"user" | "steering"> & InjectFace<SessionEditorFace>) {
+  const data = node.data;
+  const [editing, setEditing] = useState<EditableMessageBlock | null>(null);
+  const [confirmingRetry, setConfirmingRetry] = useState(false);
+  const turnLocation =
+    node.location.kind === "turn" || node.location.kind === "step" ? node.location.turn : undefined;
+  const turn = turnLocation?.turn;
+  // 重试只对已闭合轮次开放（未闭合/无闭合边界的轮次服务端无法重放）。
+  const retryable = turnLocation?.status === "closed";
+  // 编辑目标：第一个文本块（与 Timeline 编辑面的 blockIndex 对齐）。
+  const textBlockIndex = data.content.findIndex(
+    (block) => (block as { type?: string }).type === "text",
+  );
+  const textBlock =
+    textBlockIndex === -1 ? undefined : (data.content[textBlockIndex] as { text?: string });
+  const onEdit =
+    textBlock === undefined || turn === undefined
+      ? undefined
+      : () => {
+          setEditing({
+            key: `${node.anchorSeq}:${String(textBlockIndex)}`,
+            turn,
+            eventSeq: node.anchorSeq,
+            blockIndex: textBlockIndex,
+            kind: "user",
+            text: textBlock.text ?? "",
+            time: data.time,
+          });
+        };
+  // 重试先弹确认（就地编辑会抛弃该回合及其后的内容）。
+  const onRetry =
+    retryable && turn !== undefined
+      ? () => {
+          setConfirmingRetry(true);
+        }
+      : undefined;
+  return (
+    <>
+      {editing !== null && (
+        <MessageEditDialog
+          block={editing}
+          onSave={(text) => edit(editing, text, "truncate")}
+          onClose={() => setEditing(null)}
+        />
+      )}
+      {confirmingRetry && turn !== undefined && (
+        <Modal
+          open
+          onClose={() => setConfirmingRetry(false)}
+          title="重试回合"
+          closeLabel="关闭"
+          description={`将重新生成第 ${turn} 轮的回复，并抛弃该回合之后的内容。`}
+          footer={
+            <div className={css.confirmActions}>
+              <Button variant="outline" onClick={() => setConfirmingRetry(false)}>
+                取消
+              </Button>
+              <Button
+                variant="primary"
+                onClick={() => {
+                  setConfirmingRetry(false);
+                  void retry(turn, "truncate");
+                }}
+              >
+                确认重试
+              </Button>
+            </div>
+          }
+        />
+      )}
+      <UserStyleBubble
+        content={data.content}
+        renderMessageImages={renderMessageImages}
+        t={t}
+        actions={(text) => (
+          <MessageIconActions
+            text={text}
+            time={data.time}
+            clock="start"
+            className={css.actions}
+            t={t}
+            onEdit={onEdit}
+            onRetry={onRetry}
+          />
+        )}
+      />
+    </>
+  );
+});

package/src/client/chat-node/message-chrome.ts

@@ -0,0 +1,61 @@
+// Shared time-label helpers for user/assistant IconActions rows.
+
+import type { Translate } from "@deepseek-ai/dsh-client-ui-slots";
+
+export type ClockTranslate = Translate<"clock.md" | "clock.ymd">;
+
+export type RunDurationTranslate = Translate<"duration.seconds" | "duration.minutes">;
+function pad2(n: number): string {
+  return String(n).padStart(2, "0");
+}
+
+export function startOfLocalDay(ms: number): number {
+  const d = new Date(ms);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime();
+}
+
+export function msUntilNextLocalMidnight(ms: number): number {
+  const next = new Date(ms);
+  next.setHours(24, 0, 0, 0);
+  return Math.max(next.getTime() - ms, 1);
+}
+
+export function formatRunDuration(ms: number, t: RunDurationTranslate): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(total / 60);
+  const seconds = total % 60;
+  return minutes > 0
+    ? t("duration.minutes", { minutes, seconds: String(seconds).padStart(2, "0") })
+    : t("duration.seconds", { seconds });
+}
+
+export function formatLatencySeconds(ms: number): string {
+  const s = Math.max(0, ms) / 1000;
+  return s < 10 ? String(Math.round(s * 10) / 10) : String(Math.round(s));
+}
+
+export function formatTokensPerSecond(tps: number): string {
+  const clamped = Math.max(0, tps);
+  return clamped >= 10 ? String(Math.round(clamped)) : String(Math.round(clamped * 10) / 10);
+}
+
+export function formatMessageClock(
+  time: number,
+  t: ClockTranslate,
+  now: number = Date.now(),
+): string {
+  const d = new Date(time);
+  const n = new Date(now);
+  const clock = `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+  if (
+    d.getFullYear() === n.getFullYear() &&
+    d.getMonth() === n.getMonth() &&
+    d.getDate() === n.getDate()
+  ) {
+    return clock;
+  }
+  const params = { y: d.getFullYear(), m: d.getMonth() + 1, d: d.getDate() };
+  const md = d.getFullYear() === n.getFullYear() ? t("clock.md", params) : t("clock.ymd", params);
+  return `${md} ${clock}`;
+}

package/src/client/chat-node/register.ts

@@ -0,0 +1,33 @@
+import type { Context } from "@deepseek-ai/cordis";
+import type { SessionId } from "@deepseek-ai/dsh-session";
+import "@deepseek-ai/dsh-client-ui-conversation/client";
+import "@deepseek-ai/dsh-client-ui-chat/client";
+import type {} from "@deepseek-ai/dsh-client-ui-renderer/client";
+import { UserMessageNodeView } from "./MessageItem.tsx";
+import type { SessionEditorController } from "../controller.ts";
+
+const NS = "conversation";
+
+export function registerChatNodeRenderers(
+  ctx: Context,
+  controllerFor: (sessionId: SessionId) => SessionEditorController,
+): void {
+  const injectFace = (sessionId: SessionId) => controllerFor(sessionId).face;
+
+  for (const key of ["user", "steering"] as const) {
+    ctx.slots.inject("conversation.chat.node", () =>
+      ctx.slots.register(
+        {
+          name: "conversation.chat.node",
+          key,
+          locale: NS,
+          // keyed slot 同 key 同 priority 会抛错；priority -1 让本项目
+          // 渲染器以最低优先级渲染，shadow 上游默认（priority 0）注册。
+          priority: -1,
+          inject: injectFace,
+        } as never,
+        UserMessageNodeView as never,
+      ),
+    );
+  }
+}

package/src/client/chat-node/use-calendar-day.ts

@@ -0,0 +1,23 @@
+// Component-local calendar-day tick: memoized message rows keep stable props
+// across midnight, so the IconActions clock needs a local day seat that
+// re-fires at the next local midnight without reaching for framework hooks.
+
+import { useEffect, useState } from "react";
+import { msUntilNextLocalMidnight, startOfLocalDay } from "./message-chrome.ts";
+
+export function useCalendarDay(): number {
+  const [day, setDay] = useState(() => startOfLocalDay(Date.now()));
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    const arm = (): void => {
+      const now = Date.now();
+      setDay(startOfLocalDay(now));
+      timer = setTimeout(arm, msUntilNextLocalMidnight(now));
+    };
+    timer = setTimeout(arm, msUntilNextLocalMidnight(Date.now()));
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  return day;
+}

package/src/client/controller.ts

@@ -0,0 +1,327 @@
+import type { Context as ClientContext } from "@deepseek-ai/cordis";
+import type {
+  ISessions,
+  SessionFace,
+  SessionSnapshot,
+} from "@deepseek-ai/dsh-api-session-controller/client";
+import type { ObservableSnapshot, SnapshotStore } from "@deepseek-ai/dsh-client-store";
+import { createSnapshotStore } from "@deepseek-ai/dsh-client-store";
+import type { SessionId } from "@deepseek-ai/dsh-session";
+import {
+  SESSION_EDITOR_PATH,
+  type EditableMessageBlock,
+  type SessionEditorOperation,
+  type SessionEditorOperationResult,
+  type SessionEditorTimeline,
+  type VersionOperation,
+} from "../shared.ts";
+
+export interface SessionEditorState {
+  status: "idle" | "loading" | "ready" | "error";
+  error: string | null;
+  pending: VersionOperation | "import" | null;
+  timeline: SessionEditorTimeline | null;
+}
+
+export interface SessionEditorFace {
+  hooks: { sessionEditor: ObservableSnapshot<SessionEditorState> };
+  acquire(): () => void;
+  load(): void;
+  edit(
+    message: EditableMessageBlock,
+    text: string,
+    cascade: "truncate" | "preserve",
+  ): Promise<boolean>;
+  retry(turn: number, cascade: "truncate" | "preserve"): Promise<boolean>;
+  reroll(): Promise<boolean>;
+  rewind(toBoundary: number): Promise<boolean>;
+
+  importSession(file: File): Promise<boolean>;
+  openVersion(sessionId: string): Promise<void>;
+}
+
+function messageOf(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function conversationRevision(snapshot: SessionSnapshot): string {
+  // 新版 SessionSnapshot 已无 turnEnds（会话级事件窗口不再暴露轮次边界）；
+  // 用生命周期字段作为会话变化指纹即可。
+  return [snapshot.openState, snapshot.removed, snapshot.hasMore].join("|");
+}
+
+export class SessionEditorController {
+  readonly store: SnapshotStore<SessionEditorState> = createSnapshotStore<SessionEditorState>({
+    status: "idle",
+    error: null,
+    pending: null,
+    timeline: null,
+  });
+
+  readonly face: SessionEditorFace;
+  private readonly ctx: ClientContext;
+  private readonly sessions: ISessions;
+  private sessionSource: SessionFace | undefined;
+  private sessionSourceDispose: (() => void) | undefined;
+  private sessionRevision: string | undefined;
+  private disposed = false;
+  private users = 0;
+  private readonly navigationWaits = new Set<() => void>();
+
+  constructor(
+    ctx: ClientContext,
+    private readonly sessionId: SessionId,
+  ) {
+    this.ctx = ctx;
+    this.sessions = ctx.get("sessions") as unknown as ISessions;
+    this.face = {
+      hooks: { sessionEditor: this.store },
+      acquire: () => {
+        this.users += 1;
+        if (this.users === 1 && this.disposed) this.revive();
+        return () => this.release();
+      },
+      load: () => {
+        void this.load();
+      },
+      edit: (message, text, cascade) =>
+        this.mutate({
+          action: "edit",
+          sessionId: this.sessionId,
+          eventSeq: message.eventSeq,
+          blockIndex: message.blockIndex,
+          text,
+          cascade,
+        }),
+      retry: (turn, cascade) =>
+        this.mutate({ action: "retry", sessionId: this.sessionId, turn, cascade }),
+      reroll: () => this.mutate({ action: "reroll", sessionId: this.sessionId }),
+      rewind: (toBoundary) =>
+        this.mutate({ action: "rewind", sessionId: this.sessionId, toBoundary }),
+      importSession: (file) => this.importSession(file),
+      openVersion: (sessionId) => this.openWhenListed(sessionId as SessionId),
+    };
+    this.observe();
+  }
+
+  private observe(): void {
+    this.sessionSource = undefined;
+    this.sessionSourceDispose?.();
+    this.bindSessionSource();
+    this.sessions.list.subscribe(() => this.invalidate());
+  }
+
+  private bindSessionSource(): void {
+    const source = this.sessions.binding(this.sessionId)?.session;
+    if (source === this.sessionSource) return;
+    this.sessionSourceDispose?.();
+    this.sessionSource = source;
+    this.sessionRevision =
+      source === undefined ? undefined : conversationRevision(source.getSnapshot());
+    this.sessionSourceDispose = source?.subscribe(() => {
+      this.invalidate();
+    });
+  }
+
+  private invalidate(): void {
+    if (this.disposed || this.store.getSnapshot().status === "idle") return;
+    // 会话状态变化 → 刷新投影（debounce 由调用方按需）。
+    void this.load();
+  }
+
+  private release(): void {
+    this.users -= 1;
+    if (this.users <= 0) this.dispose();
+  }
+
+  private dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.sessionSourceDispose?.();
+    this.sessionSourceDispose = undefined;
+    this.sessionSource = undefined;
+    this.sessionRevision = undefined;
+  }
+
+  private revive(): void {
+    this.disposed = false;
+    this.observe();
+    void this.load();
+  }
+
+  async load(): Promise<void> {
+    if (this.disposed) return;
+    this.store.update((state) => {
+      state.status = "loading";
+      state.error = null;
+    });
+    try {
+      const response = await fetch(
+        `${SESSION_EDITOR_PATH}?sessionId=${encodeURIComponent(this.sessionId)}`,
+        {
+          method: "GET",
+          headers: { accept: "application/json" },
+          cache: "no-store",
+        },
+      );
+      const value = (await response.json()) as unknown;
+      if (this.disposed) return;
+      if (response.ok) {
+        this.store.update((state) => {
+          state.status = "ready";
+          state.error = null;
+          state.timeline = value as SessionEditorTimeline;
+        });
+      } else {
+        const error = (value as { error?: unknown })["error"];
+        this.store.update((state) => {
+          state.status = "error";
+          state.error =
+            typeof error === "string" ? error : `请求失败：HTTP ${String(response.status)}`;
+        });
+      }
+    } catch (error) {
+      if (this.disposed) return;
+      this.store.update((state) => {
+        state.status = "error";
+        state.error = messageOf(error);
+      });
+    }
+  }
+
+  private async mutate(operation: SessionEditorOperation): Promise<boolean> {
+    // 只拦截并发操作；不要求 status === "ready"——编辑/重试的数据来自客户端
+    // conversation 节点，与 timeline 加载无关，status 为 idle 时也可发起请求。
+    const current = this.store.getSnapshot();
+    if (current.pending !== null) return false;
+    this.store.update((state) => {
+      state.pending = operation.action;
+      state.error = null;
+    });
+    try {
+      const response = await fetch(SESSION_EDITOR_PATH, {
+        method: "POST",
+        headers: { accept: "application/json", "content-type": "application/json" },
+        body: JSON.stringify(operation),
+      });
+      const value = (await response.json()) as unknown;
+      if (this.disposed) return true;
+      if (!response.ok) {
+        const error = (value as { error?: unknown })["error"];
+        throw new Error(
+          typeof error === "string" ? error : `请求失败：HTTP ${String(response.status)}`,
+        );
+      }
+      this.store.update((state) => {
+        state.pending = null;
+      });
+      const result = value as SessionEditorOperationResult;
+      // 仅 fork 产生新 id 时需要等列表发布并打开新版本；就地编辑不改 id。
+      if (String(result.sessionId) !== String(this.sessionId)) {
+        await this.openWhenListed(result.sessionId as SessionId);
+        return true;
+      }
+      // 就地编辑：rewind 删除事件，append-only 事件流无法表达删除——seq
+      // 回退只做增量，被剪掉的旧节点残留。优先会话级刷新（resync 重置窗口
+      // 并重新拉取历史）；不可用时回退整页重载。
+      const face = this.sessions.binding(this.sessionId)?.session;
+      const resync = (face as unknown as { resync?: () => Promise<void> }).resync;
+      if (resync !== undefined) {
+        try {
+          await resync.call(face);
+          void this.load();
+          return true;
+        } catch {
+          // fall through to full reload
+        }
+      }
+      location.reload();
+      return true;
+    } catch (error) {
+      if (this.disposed) return false;
+      this.store.update((state) => {
+        state.pending = null;
+        state.error = messageOf(error);
+      });
+      return false;
+    }
+  }
+
+  private async importSession(file: File): Promise<boolean> {
+    const current = this.store.getSnapshot();
+    if (current.pending !== null) return false;
+    this.store.update((state) => {
+      state.pending = "import";
+      state.error = null;
+    });
+    try {
+      const zip = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const dataUrl = typeof reader.result === "string" ? reader.result : "";
+          const comma = dataUrl.indexOf(",");
+          resolve(comma < 0 ? dataUrl : dataUrl.slice(comma + 1));
+        };
+        reader.onerror = () =>
+          reject(reader.error ?? new Error("failed to read the selected file"));
+        reader.readAsDataURL(file);
+      });
+      const response = await fetch("/api/session.import", {
+        method: "POST",
+        headers: { accept: "application/json", "content-type": "application/json" },
+        body: JSON.stringify({ zip, sessionId: this.sessionId }),
+      });
+      const value = (await response.json()) as unknown;
+      if (this.disposed) return true;
+      if (!response.ok) {
+        const error = (value as { error?: unknown })["error"];
+        throw new Error(
+          typeof error === "string" ? error : `请求失败：HTTP ${String(response.status)}`,
+        );
+      }
+      this.store.update((state) => {
+        state.pending = null;
+      });
+      // 覆盖成功但**不能**走 resync：resync 重开事件流时 observeSession 仍
+      // 优先读 live session（rewind 已截断其内存 log，append 只写 DB），会
+      // 再读到空/截断数据。整页重载让会话从 live 卸载，冷读 DB 完整数据。
+      location.reload();
+      return true;
+    } catch (error) {
+      if (this.disposed) return false;
+      this.store.update((state) => {
+        state.pending = null;
+        state.error = messageOf(error);
+      });
+      return false;
+    }
+  }
+
+  private openWhenListed(sessionId: SessionId): Promise<void> {
+    if (this.sessions.list.getSnapshot().byId[sessionId] !== undefined) {
+      this.sessions.open(sessionId);
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      let settled = false;
+      let dispose = (): void => {};
+      const finish = (open: boolean): void => {
+        if (settled) return;
+        settled = true;
+        dispose();
+        this.navigationWaits.delete(cancel);
+        if (open) this.sessions.open(sessionId);
+        resolve();
+      };
+      const cancel = (): void => {
+        finish(false);
+      };
+      this.navigationWaits.add(cancel);
+      dispose = this.sessions.list.subscribe(() => {
+        if (this.sessions.list.getSnapshot().byId[sessionId] === undefined) return;
+        finish(true);
+      });
+      if (this.sessions.list.getSnapshot().byId[sessionId] !== undefined) finish(true);
+    });
+  }
+}

package/src/client/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+  export default classes;
+}