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

package/src/client/chat-node/MessageItem.module.css

@@ -0,0 +1,290 @@
+/* User bubble: right-aligned column (bubble + IconActions). Figma
+   User_Bubble/message_container 659:38813 — r22 fill, actions gap 6 below. */
+
+.userRow {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.userStack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  min-width: 0;
+  max-width: min(525px, 82%);
+}
+.bubble {
+  /* 525px cap inside the 736 column; percentage keeps narrow windows sane. */
+  max-width: 100%;
+  background: var(--dsw-specific-bubble);
+  border-radius: 22px;
+  /* 44px single-line bubble: 24 line + 10 vertical padding each side. */
+  padding: 10px 16px;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.contextRow {
+  padding: 2px 0;
+}
+
+/* Compaction marker: one dim 24px row with a context icon at rest and a
+   hover/focus disclosure for the summary body. Dimmed title (not
+   label-primary) — the row is a boundary notice, not conversation content. */
+.compactionRow {
+  padding: 2px 0;
+}
+
+.compactionButton {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 24px;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.compactionButton:not(:disabled) {
+  cursor: pointer;
+}
+
+.compactionButton:not(:disabled):hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.compactionLeading {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.compactionContextIcon,
+.compactionDisclosureIcon {
+  display: inline-flex;
+  grid-area: 1 / 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.compactionDisclosureIcon {
+  opacity: 0;
+}
+
+.compactionButton:not(:disabled):hover .compactionContextIcon,
+.compactionButton:not(:disabled):focus-visible .compactionContextIcon {
+  opacity: 0;
+}
+
+.compactionButton:not(:disabled):hover .compactionDisclosureIcon,
+.compactionButton:not(:disabled):focus-visible .compactionDisclosureIcon {
+  opacity: 1;
+}
+
+.compactionTitle {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-primary-dimmed);
+}
+
+.compactionSep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.compactionSummary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.compactionBody {
+  padding: 4px 0 4px 22px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.retryRow {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.retrySummary {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 2px 0;
+  gap: 7px;
+  border-radius: 3px;
+  color: inherit;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.retrySummary::-webkit-details-marker {
+  display: none;
+}
+
+.retrySummary::after {
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
+  content: "";
+  opacity: 0.8;
+  transform: rotate(-45deg);
+  transition: transform 120ms ease;
+}
+
+.retrySummary:hover {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.retrySummary:focus-visible {
+  outline: 1.5px solid var(--dsw-alias-button-info-fill);
+  outline-offset: 2px;
+}
+
+.retryText {
+  color: inherit;
+}
+
+.retryRow[data-active] .retryText {
+  background: linear-gradient(
+    90deg,
+    var(--dsw-alias-label-tertiary) 0%,
+    var(--dsw-alias-label-tertiary) 40%,
+    var(--dsw-alias-label-secondary) 50%,
+    var(--dsw-alias-label-tertiary) 60%,
+    var(--dsw-alias-label-tertiary) 100%
+  );
+  background-position: 100% 50%;
+  background-size: 200% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: retry-shimmer 1.6s ease-in-out infinite;
+}
+
+.retryRow[open] .retrySummary::after {
+  transform: rotate(45deg);
+}
+
+.retryDetails {
+  display: grid;
+  gap: 2px;
+  margin-top: 3px;
+  padding-left: 14px;
+  overflow-wrap: anywhere;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.retryDetailLabel {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.turnErrorRow {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: start;
+  padding: 2px 0;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.turnErrorDot {
+  margin-top: 5px;
+}
+
+.turnErrorCopy {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.turnErrorTitle {
+  margin-right: 6px;
+  color: var(--dsw-alias-state-error-primary);
+  font-weight: 600;
+}
+
+.turnErrorMessage {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.turnErrorCode {
+  color: var(--dsw-alias-label-tertiary);
+  font: var(--dsw-font-markdown-code-block-small);
+}
+
+.maxTokensTitle {
+  margin-right: 6px;
+  color: var(--dsw-alias-state-warn-primary);
+  font-weight: 600;
+}
+
+@keyframes retry-shimmer {
+  from {
+    background-position: 100% 50%;
+  }
+
+  to {
+    background-position: 0 50%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .retryRow[data-active] .retryText {
+    background: none;
+    color: inherit;
+    animation: none;
+  }
+}
+
+/* Reference chip projection inside a user bubble (`<skill>name</skill>` model
+   spans render as chips; free geometry — no textarea pairing here). */
+.refChip {
+  display: inline-block;
+  margin: 0 2px;
+  padding: 0 8px;
+  border-radius: 6px;
+  background: rgba(97, 135, 216, 0.22);
+  color: var(--dsw-alias-label-primary);
+  font-size: 0.85em;
+  line-height: 1.6;
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+/* Retry-confirmation modal action row. */
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}

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;
+}