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

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

@@ -0,0 +1,24 @@
+.input {
+  /* composer-card 同款视觉（ui-conversation InputBar.module.css 的 .card）：
+     圆角胶囊 + 输入 surface token + 阴影，编辑弹窗与主输入框观感一致。 */
+  width: 100%;
+  min-height: 96px;
+  box-sizing: border-box;
+  font: inherit;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 10px 16px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 22px;
+  background: var(--dsw-specific-input-major);
+  box-shadow: var(--dsw-shadow-lv2);
+  color: var(--dsw-text, inherit);
+  resize: none;
+  overflow-y: auto;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}

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

@@ -0,0 +1,71 @@
+import { useRef, useState } from "react";
+import { Button, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import type { EditableMessageBlock } from "../../shared.ts";
+import css from "./MessageEditDialog.module.css";
+
+const BLOCK_TITLE: Record<EditableMessageBlock["kind"], string> = {
+  user: "编辑用户消息",
+  "assistant.reasoning": "编辑助手思考",
+  "assistant.response": "编辑助手回复",
+};
+
+export function MessageEditDialog({
+  block,
+  onSave,
+  onClose,
+}: {
+  block: EditableMessageBlock;
+  onSave: (text: string) => Promise<boolean>;
+  onClose: () => void;
+}) {
+  const [text, setText] = useState(block.text);
+  const [saving, setSaving] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const autosize = (): void => {
+    const el = inputRef.current;
+    if (el === null) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  };
+
+  const save = (): void => {
+    if (saving) return;
+    setSaving(true);
+    void onSave(text).then((applied) => {
+      if (applied) onClose();
+      else setSaving(false);
+    });
+  };
+
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      title={BLOCK_TITLE[block.kind]}
+      closeLabel="关闭"
+      footer={
+        <div className={css.actions}>
+          <Button variant="outline" onClick={onClose} disabled={saving}>
+            取消
+          </Button>
+          <Button variant="primary" onClick={save} disabled={saving}>
+            {saving ? "保存中…" : "保存"}
+          </Button>
+        </div>
+      }
+    >
+      <textarea
+        ref={inputRef}
+        className={css.input}
+        value={text}
+        onChange={(event) => {
+          setText(event.target.value);
+          autosize();
+        }}
+        autoFocus
+        rows={4}
+      />
+    </Modal>
+  );
+}

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

@@ -0,0 +1,86 @@
+/* Shared message IconActions row (user + assistant). Parent modules own
+   layout offsets via the composed className. Icons stay visible when mounted;
+   the time label is hover-revealed inside a data-time-hover-root scope. */
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 28px;
+}
+
+/* Clock before icons (user figma 388:20051) / after (assistant 43:32997). */
+.timeStart {
+  padding-right: 12px;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+.timeEnd {
+  padding-left: 12px;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+/* Separator between the clock and the run-time label (time · Ran for 15s). */
+.runTimeDot {
+  margin: 0 10px;
+}
+
+/* Message containers opt in with data-time-hover-root: the time label fades
+   in on message hover (or keyboard focus within). Opacity keeps the layout
+   stable, and devices without hover keep the label always visible. */
+@media (hover: hover) {
+  [data-time-hover-root] :is(.timeStart, .timeEnd) {
+    opacity: 0;
+    transition: opacity 80ms ease;
+  }
+
+  [data-time-hover-root]:hover :is(.timeStart, .timeEnd),
+  [data-time-hover-root]:focus-within :is(.timeStart, .timeEnd) {
+    opacity: 1;
+  }
+}
+
+.action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 6px;
+  border: none;
+  border-radius: 28px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.action:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* Unavailable stays focusable and hoverable so Tooltip can explain why. */
+.action[data-unavailable] {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.action[data-unavailable]:hover {
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}

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

@@ -0,0 +1,189 @@
+// Shared IconActions chrome for user and assistant messages: copy
+// live, optional branch wiring, and an optional date-aware clock.
+
+import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
+import {
+  IconBranchOutline16,
+  IconCheckOutline16,
+  IconCopyOutline16,
+  IconEditOutline16,
+  IconRefreshOutline16,
+  Tooltip,
+  writeClipboard,
+} from "@deepseek-ai/dsh-client-ui-primitives";
+import type { ChatViewSlotProps } from "@deepseek-ai/dsh-client-ui-chat/client";
+import {
+  formatLatencySeconds,
+  formatMessageClock,
+  formatRunDuration,
+  formatTokensPerSecond,
+} from "./message-chrome.ts";
+import { useCalendarDay } from "./use-calendar-day.ts";
+import css from "./MessageIconActions.module.css";
+
+export interface MessageIconActionsProps {
+  text: string;
+
+  time?: number | undefined;
+
+  runMs?: number | undefined;
+
+  ttftMs?: number | undefined;
+
+  tokensPerSecond?: number | undefined;
+
+  clock: "start" | "end";
+
+  onBranch?: (() => void) | undefined;
+
+  branchUnavailable?: boolean | undefined;
+
+  className?: string | undefined;
+
+  extraActions?: ReactNode;
+
+  onEdit?: (() => void) | undefined;
+
+  onRetry?: (() => void) | undefined;
+
+  t: ChatViewSlotProps["t"];
+}
+
+export function MessageIconActions({
+  text,
+  time,
+  runMs,
+  ttftMs,
+  tokensPerSecond,
+  clock,
+  onBranch,
+  branchUnavailable = false,
+  className,
+  extraActions,
+  onEdit,
+  onRetry,
+  t,
+}: MessageIconActionsProps) {
+  const day = useCalendarDay();
+  const reasonId = useId();
+  // Same success chrome as CodeBlock: a short check swap after the write,
+  // gated so re-clicks during the window neither re-copy nor stack timers.
+  const [copied, setCopied] = useState(false);
+  const copyPending = useRef(false);
+  const copyTimer = useRef<number | null>(null);
+  const copyEpoch = useRef(0);
+  useEffect(
+    () => () => {
+      copyEpoch.current += 1;
+      copyPending.current = false;
+      if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+    },
+    [],
+  );
+  const onCopy = useCallback(() => {
+    if (copied || copyPending.current) return;
+    const epoch = copyEpoch.current;
+    copyPending.current = true;
+    void writeClipboard(text).then((ok) => {
+      if (epoch !== copyEpoch.current) return;
+      copyPending.current = false;
+      if (!ok) return;
+      setCopied(true);
+      copyTimer.current = window.setTimeout(() => {
+        copyTimer.current = null;
+        setCopied(false);
+      }, 1000);
+    });
+  }, [copied, text]);
+  // The dot is decorative and stays hidden, but its margins separate the
+  // readings only on screen: without the flanking spaces a reader hears one
+  // run-on string ("Ran for 13sTTFT 0.2s12 tok/s") instead of three facts.
+  const clockEl =
+    time === undefined ? null : (
+      <span className={clock === "start" ? css.timeStart : css.timeEnd}>
+        {formatMessageClock(time, t, day)}
+        {runMs !== undefined && (
+          <>
+            {" "}
+            <span className={css.runTimeDot} aria-hidden>
+              ·
+            </span>{" "}
+            {t("message.ranFor", { duration: formatRunDuration(runMs, t) })}
+          </>
+        )}
+        {ttftMs !== undefined && (
+          <>
+            {" "}
+            <span className={css.runTimeDot} aria-hidden>
+              ·
+            </span>{" "}
+            {t("stats.ttftAverage", { duration: formatLatencySeconds(ttftMs) })}
+          </>
+        )}
+        {tokensPerSecond !== undefined && (
+          <>
+            {" "}
+            <span className={css.runTimeDot} aria-hidden>
+              ·
+            </span>{" "}
+            {t("message.tokensPerSecond", { tps: formatTokensPerSecond(tokensPerSecond) })}
+          </>
+        )}
+      </span>
+    );
+  return (
+    <div className={className === undefined ? css.actions : `${css.actions} ${className}`}>
+      {clock === "start" ? clockEl : null}
+      <Tooltip label={copied ? t("copied" as never) : t("copy" as never)} side="bottom">
+        <button
+          type="button"
+          className={css.action}
+          aria-label={copied ? t("copied" as never) : t("copy" as never)}
+          onClick={onCopy}
+        >
+          {copied ? <IconCheckOutline16 /> : <IconCopyOutline16 />}
+        </button>
+      </Tooltip>
+      {extraActions}
+      {onEdit !== undefined && (
+        <Tooltip label="编辑" side="bottom">
+          <button type="button" className={css.action} aria-label="编辑" onClick={onEdit}>
+            <IconEditOutline16 />
+          </button>
+        </Tooltip>
+      )}
+      {onRetry !== undefined && (
+        <Tooltip label="重试此回合" side="bottom">
+          <button type="button" className={css.action} aria-label="重试此回合" onClick={onRetry}>
+            <IconRefreshOutline16 />
+          </button>
+        </Tooltip>
+      )}
+      {onBranch !== undefined && (
+        <Tooltip
+          label={branchUnavailable ? t("message.branchUnavailable") : t("message.branch")}
+          side="bottom"
+        >
+          {/* Native disabled buttons do not deliver the hover/focus events Tooltip needs. */}
+          <button
+            type="button"
+            className={css.action}
+            aria-label={t("message.branch")}
+            aria-disabled={branchUnavailable || undefined}
+            aria-describedby={branchUnavailable ? reasonId : undefined}
+            data-unavailable={branchUnavailable || undefined}
+            onClick={branchUnavailable ? undefined : onBranch}
+          >
+            <IconBranchOutline16 />
+          </button>
+        </Tooltip>
+      )}
+      {onBranch !== undefined && branchUnavailable && (
+        <span id={reasonId} className={css.visuallyHidden}>
+          {t("message.branchUnavailable")}
+        </span>
+      )}
+      {clock === "end" ? clockEl : null}
+    </div>
+  );
+}

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