@morlay/ui-conversation-message-actions 0.0.18 → 0.0.19-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morlay/ui-conversation-message-actions",
-  "version": "0.0.18",
+  "version": "0.0.19-alpha.0",
   "description": "Rewind / retry / fork orchestration (host) plus conversation.chat.node renderer replacement (browser) — message edit / retry actions on user bubbles.",
   "keywords": [
     "conversation-chat-node",
@@ -16,7 +16,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/morlay/better-session.git"
+    "url": "https://github.com/morlay/dsh-plugin.git"
   },
   "files": [
     "dist",
@@ -32,37 +32,43 @@
     "./testing": "./dist/testing.mjs",
     "./package.json": "./package.json",
     "./cordis.patch.yml": "./cordis.patch.yml",
-    "./client": "./dist/client.js"
+    "./client": {
+      "types": "./dist/client.d.cts",
+      "default": "./dist/client.cjs"
+    }
   },
   "dependencies": {
-    "@morlay/session-branch": "^0.0.8"
+    "@morlay/session-branch": "^0.0.9-alpha.0"
   },
   "devDependencies": {
-    "@morlay/session-rdb": "^0.0.20",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "lightningcss": "^1.32.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "@deepseek-ai/dsh-session-stats": "^0.1.6-alpha.2",
+    "@morlay/dsh-client-ui-primitives": "^0.0.2-alpha.0",
+    "@morlay/session-rdb": "^0.0.21-alpha.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-api-session-controller": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-attachment": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-connection": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-store": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-ui-attachment": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-ui-chat": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-invariants": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-llm": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-session": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-session-persistence": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-session-projection": "^0.1.5-rc.2",
-    "@deepseek-ai/dsh-token-meter": "^0.1.5-rc.2"
+    "@deepseek-ai/dsh-api-session-controller": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-attachment": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-connection": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-store": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-attachment": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-chat": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-workspace": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-invariants": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-llm": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-session": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-session-persistence": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-session-projection": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-token-meter": "^0.1.6-alpha.2",
+    "@morlay/dsh-client-ui-conversation": "^0.0.2-alpha.0",
+    "@morlay/dsh-client-ui-primitives": "^0.0.2-alpha.0"
   },
   "dsh": {
     "bundle": {
@@ -73,16 +79,14 @@
       "inject": [
         "@deepseek-ai/dsh-client-connection",
         "@deepseek-ai/dsh-client-store",
-        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-workspace",
+        "@morlay/dsh-client-ui-conversation",
         "@deepseek-ai/dsh-client-ui-chat"
       ]
     }
   },
   "inlinedDependencies": {
     "@standard-schema/spec": "1.1.0",
-    "@vitest/pretty-format": "4.1.11",
-    "@vitest/runner": "4.1.11",
-    "@vitest/utils": "4.1.11",
     "drizzle-orm": "1.0.0-rc.5-ab785fc",
     "fflate": "0.8.3",
     "pg": "8.23.0",
@@ -98,7 +102,6 @@
     "postgres-date": "1.0.7",
     "postgres-interval": "1.2.0",
     "split2": "4.2.0",
-    "tinyrainbow": "3.1.1",
     "xtend": "4.0.2",
     "zod": "4.6.5"
   },

package/src/client/chat-node/MessageIconActions.styles.ts

@@ -0,0 +1,76 @@
+import type { CSSProps } from "@morlay/dsh-client-ui-primitives/client";
+
+export const styles = {
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    height: "28px",
+  },
+  timeStart: {
+    paddingRight: "12px",
+    fontSize: "14px",
+    lineHeight: "24px",
+    color: "var(--dsw-alias-label-tertiary)",
+    whiteSpace: "nowrap",
+  },
+  timeEnd: {
+    paddingLeft: "12px",
+    fontSize: "14px",
+    lineHeight: "24px",
+    color: "var(--dsw-alias-label-tertiary)",
+    whiteSpace: "nowrap",
+    "&)": {
+      "@media (hover: hover)": {
+        opacity: "1",
+      },
+    },
+  },
+  runTimeDot: {
+    margin: "0 10px",
+  },
+  action: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "28px",
+    height: "28px",
+    padding: "6px",
+    border: "none",
+    borderRadius: "28px",
+    background: "transparent",
+    color: "var(--dsw-alias-label-tertiary)",
+    cursor: "pointer",
+    "&:hover": {
+      background: "var(--dsw-alias-interactive-bg-hover)",
+      color: "var(--dsw-alias-label-secondary)",
+    },
+    "&[data-unavailable]": {
+      cursor: "default",
+      opacity: "0.4",
+    },
+    "&[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)",
+    whiteSpace: "nowrap",
+  },
+} satisfies Record<string, CSSProps>;
+
+export const globals = {
+  "[data-time-hover-root] [data-time-label]": {
+    opacity: "0",
+    transition: "opacity 80ms ease",
+  },
+  "[data-time-hover-root]:hover :is(.timeStart, .timeEnd),\n  [data-time-hover-root]:focus-within :is(.timeStart, .timeEnd)":
+    {
+      opacity: "1",
+    },
+} satisfies Record<string, CSSProps>;

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

@@ -1,6 +1,7 @@
 // Shared IconActions chrome for user and assistant messages: copy
 // live, optional branch wiring, and an optional date-aware clock.
 
+import { styling } from "@morlay/dsh-client-ui-primitives/client";
 import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
 import {
   IconBranchOutline16,
@@ -19,7 +20,7 @@ import {
   formatTokensPerSecond,
 } from "./message-chrome.ts";
 import { useCalendarDay } from "./use-calendar-day.ts";
-import css from "./MessageIconActions.module.css";
+import { styles } from "./MessageIconActions.styles.ts";
 
 export interface MessageIconActionsProps {
   text: string;
@@ -101,12 +102,15 @@ export function MessageIconActions({
   // instead of three facts.
   const clockEl =
     time === undefined ? null : (
-      <span className={clock === "start" ? css.timeStart : css.timeEnd}>
+      <span
+        data-time-label=""
+        {...styling.props(clock === "start" ? styles.timeStart : styles.timeEnd)}
+      >
         {formatMessageClock(time, t, day)}
         {runMs !== undefined && (
           <>
             {" "}
-            <span className={css.runTimeDot} aria-hidden>
+            <span {...styling.props(styles.runTimeDot)} aria-hidden>
               ·
             </span>{" "}
             {t("message.ranFor", { duration: formatRunDuration(runMs, t) })}
@@ -115,7 +119,7 @@ export function MessageIconActions({
         {ttftMs !== undefined && (
           <>
             {" "}
-            <span className={css.runTimeDot} aria-hidden>
+            <span {...styling.props(styles.runTimeDot)} aria-hidden>
               ·
             </span>{" "}
             {t("message.turnTime.ttft")}{" "}
@@ -125,7 +129,7 @@ export function MessageIconActions({
         {tokensPerSecond !== undefined && (
           <>
             {" "}
-            <span className={css.runTimeDot} aria-hidden>
+            <span {...styling.props(styles.runTimeDot)} aria-hidden>
               ·
             </span>{" "}
             {t("message.tokensPerSecond", { tps: formatTokensPerSecond(tokensPerSecond) })}
@@ -133,13 +137,18 @@ export function MessageIconActions({
         )}
       </span>
     );
+  // 外部 className 需要拼接：给 actions 一个真实类名（而不是 data-css 属性）。
+  const actionsClass = styling.className(styles.actions);
   return (
-    <div className={className === undefined ? css.actions : `${css.actions} ${className}`}>
+    <div
+      data-time-hover-root=""
+      className={className === undefined ? actionsClass : `${actionsClass} ${className}`}
+    >
       {clock === "start" ? clockEl : null}
       <Tooltip label={copied ? t("copied" as never) : t("copy" as never)} side="bottom">
         <button
           type="button"
-          className={css.action}
+          {...styling.props(styles.action)}
           aria-label={copied ? t("copied" as never) : t("copy" as never)}
           onClick={onCopy}
         >
@@ -149,14 +158,24 @@ export function MessageIconActions({
       {extraActions}
       {onEdit !== undefined && (
         <Tooltip label="编辑" side="bottom">
-          <button type="button" className={css.action} aria-label="编辑" onClick={onEdit}>
+          <button
+            type="button"
+            {...styling.props(styles.action)}
+            aria-label="编辑"
+            onClick={onEdit}
+          >
             <IconEditOutline16 />
           </button>
         </Tooltip>
       )}
       {onRetry !== undefined && (
         <Tooltip label="重试此回合" side="bottom">
-          <button type="button" className={css.action} aria-label="重试此回合" onClick={onRetry}>
+          <button
+            type="button"
+            {...styling.props(styles.action)}
+            aria-label="重试此回合"
+            onClick={onRetry}
+          >
             <IconRefreshOutline16 />
           </button>
         </Tooltip>
@@ -169,7 +188,7 @@ export function MessageIconActions({
           {/* Native disabled buttons do not deliver the hover/focus events Tooltip needs. */}
           <button
             type="button"
-            className={css.action}
+            {...styling.props(styles.action)}
             aria-label={t("message.branch")}
             aria-disabled={branchUnavailable || undefined}
             aria-describedby={branchUnavailable ? reasonId : undefined}
@@ -181,7 +200,7 @@ export function MessageIconActions({
         </Tooltip>
       )}
       {onBranch !== undefined && branchUnavailable && (
-        <span id={reasonId} className={css.visuallyHidden}>
+        <span id={reasonId} {...styling.props(styles.visuallyHidden)}>
           {t("message.branchUnavailable")}
         </span>
       )}

package/src/client/chat-node/MessageItem.styles.ts

@@ -0,0 +1,247 @@
+import type { CSSProps } from "@morlay/dsh-client-ui-primitives/client";
+
+export const styles = {
+  userRow: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: "6px",
+  },
+  userStack: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: "8px",
+    minWidth: "0",
+    maxWidth: "min(525px, 82%)",
+  },
+  bubble: {
+    maxWidth: "100%",
+    background: "var(--dsw-specific-bubble)",
+    borderRadius: "22px",
+    padding: "10px 16px",
+    fontSize: "16px",
+    lineHeight: "24px",
+    color: "var(--dsw-alias-label-primary)",
+  },
+  contextRow: {
+    padding: "2px 0",
+  },
+  compactionRow: {
+    padding: "2px 0",
+  },
+  compactionButton: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "24px",
+    minWidth: "0",
+    padding: "0",
+    border: "none",
+    borderRadius: "6px",
+    background: "none",
+    color: "inherit",
+    font: "inherit",
+    textAlign: "left",
+    "&:not(:disabled)": {
+      cursor: "pointer",
+    },
+    "&:not(:disabled):hover": {
+      background: "var(--dsw-alias-interactive-bg-hover)",
+    },
+    "&:not(:disabled):hover .compactionContextIcon": {
+      opacity: "0",
+    },
+    "&:not(:disabled):focus-visible .compactionContextIcon": {
+      opacity: "0",
+    },
+    "&:not(:disabled):hover .compactionDisclosureIcon": {
+      opacity: "1",
+    },
+    "&:not(:disabled):focus-visible .compactionDisclosureIcon": {
+      opacity: "1",
+    },
+  },
+  compactionLeading: {
+    flex: "none",
+    display: "inline-grid",
+    placeItems: "center",
+    width: "16px",
+    height: "16px",
+    marginRight: "6px",
+    color: "var(--dsw-alias-label-secondary)",
+  },
+  compactionContextIcon: {
+    display: "inline-flex",
+    gridArea: "1 / 1",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  compactionDisclosureIcon: {
+    display: "inline-flex",
+    gridArea: "1 / 1",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: "0",
+  },
+  compactionTitle: {
+    flex: "none",
+    fontSize: "14px",
+    lineHeight: "24px",
+    color: "var(--dsw-alias-label-primary-dimmed)",
+  },
+  compactionSep: {
+    flex: "none",
+    width: "2px",
+    height: "2px",
+    margin: "0 8px",
+    borderRadius: "1px",
+    background: "var(--dsw-alias-label-caption)",
+  },
+  compactionSummary: {
+    flex: "1 1 auto",
+    minWidth: "0",
+    overflow: "hidden",
+    color: "var(--dsw-alias-label-tertiary)",
+    fontSize: "14px",
+    lineHeight: "24px",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  compactionBody: {
+    padding: "4px 0 4px 22px",
+    color: "var(--dsw-alias-label-tertiary)",
+    fontSize: "14px",
+    lineHeight: "24px",
+  },
+  retryRow: {
+    color: "var(--dsw-alias-label-tertiary)",
+    fontSize: "13px",
+    lineHeight: "20px",
+    "&[data-active] .retryText": {
+      background:
+        "linear-gradient(\n    90deg,\n    var(--dsw-alias-label-tertiary) 0%,\n    var(--dsw-alias-label-tertiary) 40%,\n    var(--dsw-alias-label-secondary) 50%,\n    var(--dsw-alias-label-tertiary) 60%,\n    var(--dsw-alias-label-tertiary) 100%\n  )",
+      backgroundPosition: "100% 50%",
+      backgroundSize: "200% 100%",
+      backgroundClip: "text",
+      color: "transparent",
+      animation: "retry-shimmer 1.6s ease-in-out infinite",
+      "@media (prefers-reduced-motion: reduce)": {
+        background: "none",
+        color: "inherit",
+        animation: "none",
+      },
+    },
+    "&[open] .retrySummary::after": {
+      transform: "rotate(45deg)",
+    },
+  },
+  retrySummary: {
+    display: "inline-flex",
+    alignItems: "center",
+    width: "fit-content",
+    padding: "2px 0",
+    gap: "7px",
+    borderRadius: "3px",
+    color: "inherit",
+    cursor: "pointer",
+    listStyle: "none",
+    userSelect: "none",
+    "&::-webkit-details-marker": {
+      display: "none",
+    },
+    "&::after": {
+      width: "6px",
+      height: "6px",
+      borderRight: "1.5px solid currentcolor",
+      borderBottom: "1.5px solid currentcolor",
+      content: '""',
+      opacity: "0.8",
+      transform: "rotate(-45deg)",
+      transition: "transform 120ms ease",
+    },
+    "&:hover": {
+      color: "var(--dsw-alias-label-secondary)",
+    },
+    "&:focus-visible": {
+      outline: "1.5px solid var(--dsw-alias-button-info-fill)",
+      outlineOffset: "2px",
+    },
+  },
+  retryText: {
+    color: "inherit",
+  },
+  retryDetails: {
+    display: "grid",
+    gap: "2px",
+    marginTop: "3px",
+    paddingLeft: "14px",
+    overflowWrap: "anywhere",
+    fontSize: "12px",
+    lineHeight: "18px",
+  },
+  retryDetailLabel: {
+    color: "var(--dsw-alias-label-secondary)",
+  },
+  turnErrorRow: {
+    display: "grid",
+    gridTemplateColumns: "10px minmax(0, 1fr) auto",
+    gap: "8px",
+    alignItems: "start",
+    padding: "2px 0",
+    fontSize: "13px",
+    lineHeight: "20px",
+  },
+  turnErrorDot: {
+    marginTop: "5px",
+  },
+  turnErrorCopy: {
+    minWidth: "0",
+    overflowWrap: "anywhere",
+  },
+  turnErrorTitle: {
+    marginRight: "6px",
+    color: "var(--dsw-alias-state-error-primary)",
+    fontWeight: "600",
+  },
+  turnErrorMessage: {
+    color: "var(--dsw-alias-label-secondary)",
+  },
+  turnErrorCode: {
+    color: "var(--dsw-alias-label-tertiary)",
+    font: "var(--dsw-font-markdown-code-block-small)",
+  },
+  maxTokensTitle: {
+    marginRight: "6px",
+    color: "var(--dsw-alias-state-warn-primary)",
+    fontWeight: "600",
+  },
+  refChip: {
+    display: "inline-block",
+    margin: "0 2px",
+    padding: "0 8px",
+    borderRadius: "6px",
+    background: "rgba(97, 135, 216, 0.22)",
+    color: "var(--dsw-alias-label-primary)",
+    fontSize: "0.85em",
+    lineHeight: "1.6",
+    whiteSpace: "nowrap",
+    verticalAlign: "baseline",
+  },
+  confirmActions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+  },
+} satisfies Record<string, CSSProps>;
+
+export const animations = {
+  "retry-shimmer": {
+    from: {
+      backgroundPosition: "100% 50%",
+    },
+    to: {
+      backgroundPosition: "0 50%",
+    },
+  },
+} satisfies Record<string, Record<string, CSSProps>>;