@orbit-work/ui 0.1.0

package/src/components/domain/chat/Message/Message.stories.tsx

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc as Code } from "../../../composite/Icons"
+import { Message } from "./index"
+
+const meta = {
+  title: "Chat/Message",
+  component: Message,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "已废弃：DS2 已并入 InlineMessage（四态 tint 族行内消息）。此件仅为薄兼容导出，请迁移到 Primitives/InlineMessage。",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Message>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Info: Story = {
+  args: {
+    type: "info",
+    title: "Information",
+    children: "This is an informational message.",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    type: "success",
+    title: "Success",
+    children: "Operation completed successfully.",
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    type: "warning",
+    title: "Warning",
+    children: "Please review before proceeding.",
+  },
+}
+
+export const Error: Story = {
+  args: {
+    type: "error",
+    title: "Error",
+    children: "Something went wrong. Please try again.",
+  },
+}
+
+export const TitleOnly: Story = {
+  args: {
+    type: "info",
+    title: "Quick notification without body text",
+  },
+}
+
+export const BodyOnly: Story = {
+  args: {
+    type: "info",
+    children: "Message without a title, just body content.",
+  },
+}
+
+export const Closable: Story = {
+  args: {
+    type: "info",
+    title: "Dismissible Message",
+    children: "You can close this message by clicking the X button.",
+    closable: true,
+    onClose: () => console.log("message closed"),
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    type: "warning",
+    title: "Update Available",
+    children: "A new version is available for download.",
+    action: (
+      <button
+        style={{
+          padding: "4px 12px",
+          fontSize: 13,
+          background: "var(--ow-btn-primary-bg)",
+          color: "var(--ow-btn-primary-fg)",
+          border: "none",
+          borderRadius: 6,
+          cursor: "pointer",
+        }}
+        onClick={() => console.log("action clicked")}
+      >
+        Update Now
+      </button>
+    ),
+  },
+}
+
+export const WithActionAndClose: Story = {
+  args: {
+    type: "info",
+    title: "New Feature Available",
+    children: "Try our latest feature to improve your workflow.",
+    closable: true,
+    onClose: () => console.log("closed"),
+    action: (
+      <button
+        style={{
+          padding: "4px 12px",
+          fontSize: 13,
+          background: "var(--ow-btn-primary-bg)",
+          color: "var(--ow-btn-primary-fg)",
+          border: "none",
+          borderRadius: 6,
+          cursor: "pointer",
+        }}
+        onClick={() => console.log("learn more")}
+      >
+        Learn More
+      </button>
+    ),
+  },
+}
+
+export const CustomIcon: Story = {
+  args: {
+    type: "info",
+    title: "Custom Icon Message",
+    children: "This message uses a custom icon instead of the default.",
+    icon: <Code />,
+  },
+}
+
+export const LongContent: Story = {
+  args: {
+    type: "info",
+    title: "Detailed Information",
+    children:
+      "This is a longer message with multiple sentences. It demonstrates how the component handles longer content that might wrap to multiple lines. The message component should handle this gracefully and maintain proper spacing and alignment.",
+  },
+}
+
+export const MultilineContent: Story = {
+  args: {
+    type: "error",
+    title: "Multiple Errors Found",
+    children: (
+      <div>
+        <p style={{ margin: 0, marginBottom: 8 }}>The following issues were detected:</p>
+        <ul style={{ margin: 0, paddingLeft: 20 }}>
+          <li>Invalid email format</li>
+          <li>Password too short</li>
+          <li>Username already exists</li>
+        </ul>
+      </div>
+    ),
+    closable: true,
+    onClose: () => console.log("closed"),
+  },
+}
+
+export const SuccessWithAction: Story = {
+  args: {
+    type: "success",
+    title: "File Uploaded",
+    children: "Your file has been uploaded successfully.",
+    closable: true,
+    onClose: () => console.log("closed"),
+    action: (
+      <a
+        href="#"
+        style={{ color: "var(--ow-link)", textDecoration: "none", fontSize: 13, fontWeight: 500 }}
+        onClick={(e) => {
+          e.preventDefault()
+          console.log("view file")
+        }}
+      >
+        View File
+      </a>
+    ),
+  },
+}
+
+export const MinimalInfo: Story = {
+  args: {
+    type: "info",
+    children: "Simple message",
+  },
+}
+
+export const MinimalWarning: Story = {
+  args: {
+    type: "warning",
+    children: "Warning",
+  },
+}
+
+export const ChineseContent: Story = {
+  args: {
+    type: "success",
+    title: "操作成功",
+    children: "您的更改已保存。",
+    closable: true,
+    onClose: () => console.log("关闭"),
+  },
+}
+
+export const AllTypes: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 600 }}>
+      <Message type="info" title="Info" closable onClose={() => console.log("info closed")}>
+        This is an informational message.
+      </Message>
+      <Message type="success" title="Success" closable onClose={() => console.log("success closed")}>
+        Operation completed successfully.
+      </Message>
+      <Message type="warning" title="Warning" closable onClose={() => console.log("warning closed")}>
+        Please review before proceeding.
+      </Message>
+      <Message type="error" title="Error" closable onClose={() => console.log("error closed")}>
+        Something went wrong.
+      </Message>
+    </div>
+  ),
+}
+
+export const WithCustomClassName: Story = {
+  args: {
+    type: "info",
+    title: "Custom Styled Message",
+    children: "This message has a custom className applied.",
+    className: "custom-message",
+  },
+}
+
+export const NetworkError: Story = {
+  args: {
+    type: "error",
+    title: "Network Error",
+    children: "Unable to connect to the server. Please check your internet connection.",
+    closable: true,
+    onClose: () => console.log("closed"),
+    action: (
+      <button
+        style={{
+          padding: "4px 12px",
+          fontSize: 13,
+          background: "var(--ow-error)",
+          color: "white",
+          border: "none",
+          borderRadius: 6,
+          cursor: "pointer",
+        }}
+        onClick={() => console.log("retry")}
+      >
+        Retry
+      </button>
+    ),
+  },
+}

package/src/components/domain/chat/Message/index.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+
+export type MessageType = "info" | "success" | "warning" | "error"
+
+export type MessageProps = {
+  type?: MessageType
+  title?: ReactNode
+  children?: ReactNode
+  icon?: ReactNode
+  closable?: boolean
+  onClose?: () => void
+  action?: ReactNode
+  className?: string
+}
+
+/**
+ * @deprecated DS2 已将 Message 并入 InlineMessage（四态 tint 族行内消息），
+ * 请直接使用 `InlineMessage`；此件仅作薄兼容导出，映射旧 props 后委托新件渲染。
+ */
+export function Message({
+  type = "info",
+  title,
+  children,
+  icon,
+  closable = false,
+  onClose,
+  action,
+  className = "",
+}: MessageProps) {
+  return (
+    <InlineMessage
+      variant={type}
+      title={title}
+      icon={icon}
+      closable={closable}
+      onClose={onClose}
+      action={action}
+      className={className}
+    >
+      {children}
+    </InlineMessage>
+  )
+}

package/src/components/domain/chat/MessageActions/MessageActions.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Branch, Copy, Dislike, Doc, Like } from "../../../composite/Icons"
+import { MessageActions } from "./index"
+
+const meta = {
+  title: "Chat/MessageActions",
+  component: MessageActions,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof MessageActions>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 轮次容器：操作行缺省只在 hover / focus 时浮现，所以演示要带 group/turn 语境。 */
+function Turn({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="group/turn"
+      style={{
+        maxWidth: 520,
+        padding: "12px 14px",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-lg)",
+        background: "var(--ow-surface)",
+      }}
+    >
+      <p style={{ margin: "0 0 8px", font: "400 var(--ow-fs-ui)/1.7 var(--ow-font-sans)", color: "var(--ow-text)" }}>
+        已经把第 9 份来源换成行业中位数口径，报告里的三张图跟着重算过了。
+      </p>
+      {children}
+    </div>
+  )
+}
+
+/** 默认：贴地 hover 浮现。把鼠标移到卡片上，操作行淡入（120ms · ease-beacon）。 */
+export const HoverReveal: Story = {
+  args: {
+    actions: ["copy", "regenerate", "like", "dislike", "share"],
+    time: "14:32",
+  },
+  render: (args) => (
+    <Turn>
+      <MessageActions {...args} />
+    </Turn>
+  ),
+}
+
+/** 最新一条：常显（visible），时间读数随之常显并被 spacer 推到行尾（原型 template.dc.html:1393）。 */
+export const LatestVisible: Story = {
+  args: {
+    actions: ["copy", "regenerate", "like", "dislike", "share"],
+    visible: true,
+    time: "14:32",
+  },
+  render: (args) => (
+    <Turn>
+      <MessageActions {...args} />
+    </Turn>
+  ),
+}
+
+/** 选中态：赞已投——aria-pressed ＋ 墨色，颜色只作第二编码（R1）。 */
+export const Voted: Story = {
+  render: () => (
+    <Turn>
+      <MessageActions
+        visible
+        items={[
+          { key: "like", label: "赞", icon: <Like />, active: true, onSelect: () => {} },
+          { key: "dislike", label: "踩", icon: <Dislike />, onSelect: () => {} },
+          { key: "copy", label: "复制", icon: <Copy />, onSelect: () => {} },
+        ]}
+      />
+    </Turn>
+  ),
+}
+
+/** 完成回执：复制成功换成勾＋success 色（形色双编码）。 */
+export const CopyDone: Story = {
+  render: () => (
+    <Turn>
+      <MessageActions
+        visible
+        items={[
+          { key: "copy", label: "复制", doneLabel: "已复制", icon: <Copy />, done: true, onSelect: () => {} },
+          { key: "branch", label: "新建分支", icon: <Branch />, onSelect: () => {} },
+          { key: "preview", label: "查看 Markdown", icon: <Doc />, onSelect: () => {} },
+        ]}
+      />
+    </Turn>
+  ),
+}
+
+/** 禁用态：逐 token 走 Button ghost 的 disabled 配色，不用统一透明度。 */
+export const Disabled: Story = {
+  render: () => (
+    <Turn>
+      <MessageActions
+        visible
+        items={[
+          { key: "copy", label: "复制", icon: <Copy />, onSelect: () => {} },
+          { key: "branch", label: "新建分支（本会话不可分支）", icon: <Branch />, disabled: true },
+        ]}
+      />
+    </Turn>
+  ),
+}
+
+/** 全六件预设（旧 ActionBar 的等价形态，只是改成 hover 浮现）。 */
+export const AllPresets: Story = {
+  args: { visible: true },
+  render: (args) => (
+    <Turn>
+      <MessageActions {...args} />
+    </Turn>
+  ),
+}
+
+/** 原型四枚（复制 / 重试 / 分支 / 引用到输入框）＋ 行尾常显时间——会话与分享两屏的口径。 */
+export const ProtoFour: Story = {
+  args: {
+    actions: ["copy", "regenerate", "branch", "quote"],
+    visible: true,
+    time: "14:33",
+  },
+  render: (args) => (
+    <Turn>
+      <MessageActions {...args} />
+    </Turn>
+  ),
+}

package/src/components/domain/chat/MessageActions/MessageActionsSource.test.mjs

@@ -0,0 +1,79 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const legacy = await readFile(new URL("../../../composite/ActionBar/index.tsx", import.meta.url), "utf8")
+const desktopMessage = await readFile(
+  new URL("../../desktop/DesktopChatMessageView/index.tsx", import.meta.url),
+  "utf8",
+)
+const desktopTurn = await readFile(new URL("../../desktop/DesktopChatTurnView/index.tsx", import.meta.url), "utf8")
+const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("三件归口：ActionBar / ChatActionbar / ChatActionRowView 的动作集合并进预设", () => {
+  for (const kind of ["copy", "regenerate", "speak", "like", "dislike", "share", "branch", "preview", "quote"]) {
+    assert.match(source, new RegExp(`\\| "${kind}"|MessageActionKind =\\s*\\| "${kind}"`))
+  }
+  assert.match(legacy, /@deprecated/)
+  assert.match(legacy, /import \{ MessageActions \} from "\.\.\/\.\.\/domain\/chat\/MessageActions"/)
+})
+
+test("图标钮＝Button ghost·sm（28×28，命中区与焦点环由原语承担），不自造 button", () => {
+  assert.match(source, /<Button\s+variant="ghost"\s+size="sm"/)
+  assert.match(source, /\[&_svg\]:w-4 \[&_svg\]:h-4/)
+  assert.doesNotMatch(source, /variant="unstyled"/)
+})
+
+test("hover / focus 浮现：group/turn 淡入，120ms＋唯一缓动 ease-beacon，禁位移", () => {
+  assert.match(source, /transition-opacity duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.match(source, /group-hover\/turn:opacity-100/)
+  assert.match(source, /group-focus-within\/turn:opacity-100/)
+  assert.doesNotMatch(source, /scale-|translate-/)
+})
+
+test("贴地件：hover/press 走 ghost 族，不引 -pop 档（-pop 只属弹层底上的行）", () => {
+  assert.doesNotMatch(source, /var\(--ow-hover-pop|var\(--ow-press-pop|var\(--ow-popover-bg/)
+})
+
+test("R1 双编码：选中写 aria-pressed，完成回执换勾图标＋success 色", () => {
+  assert.match(source, /aria-pressed=\{item\.active\}/)
+  assert.match(source, /item\.done \? \(item\.doneIcon \?\? <Check \/>\) : item\.icon/)
+  assert.match(source, /item\.done\s*\?\s*"text-\[color:var\(--ow-success\)\]"/)
+})
+
+test("读数：时间 mono＋tabular-nums（§7）", () => {
+  assert.match(source, /data-ow-part="time"[\s\S]*?font-\[family-name:var\(--ow-font-mono\)\] tabular-nums/)
+})
+
+// R2 · L1-1-5 / L2-1-2：时间读数由 spacer 推到行尾，显隐随 visible（原型 template.dc.html:1393-1394）
+test("时间读数：spacer 推到行尾，visible 时常显（不再写死 opacity-0）", () => {
+  assert.match(source, /time != null && "w-full"/)
+  assert.match(source, /data-ow-part="time-spacer"[\s\S]*?flex-1/)
+  assert.match(source, /data-ow-part="time"[\s\S]{0,600}?visible\s*\n?\s*\? "opacity-100"/)
+})
+
+// R2 · L1-1-6：第四枚「引用到输入框」（原型 template.dc.html:1388 / :3826）
+test("预设动作含 quote＝引用到输入框，走 Quote 框角字形", () => {
+  assert.match(source, /quote: <Quote \/>/)
+  assert.match(source, /quote: "引用到输入框"/)
+})
+
+test("R3 中性件：操作行不含信标/荧黄", () => {
+  assert.doesNotMatch(source, /var\(--ow-beacon|var\(--ow-accent-dot|var\(--ow-yellow/)
+})
+
+test("任意值 var() 全部带类型标注（防 tailwind-merge 吞类）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("桌面端两处操作行都归口本件，旧 BEM 样式段随之退役", () => {
+  assert.match(desktopMessage, /import \{ MessageActions \} from "\.\.\/\.\.\/chat\/MessageActions"/)
+  assert.match(desktopMessage, /<MessageActions\s+className=\{`msg-actions/)
+  assert.match(desktopTurn, /<MessageActions\s+className="turn-user-meta"/)
+  assert.doesNotMatch(css, /^\.msg-action \{/m)
+  assert.doesNotMatch(css, /^\.msg-time \{/m)
+  assert.doesNotMatch(css, /\.bubble-wrap:hover \.msg-actions/)
+  assert.doesNotMatch(css, /^\.turn-user-copy/m)
+})