@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopChatMessageView/DesktopChatMessageView.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopChatMessageView } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopChatMessageView",
+  component: DesktopChatMessageView,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, background: "var(--bg-primary)", maxWidth: 800 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopChatMessageView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleMarkdown = `这是一个示例回复，包含一些 **加粗文本** 和 *斜体文本*。
+
+\`\`\`typescript
+function hello() {
+  console.log("Hello, world!")
+}
+\`\`\`
+
+- 列表项 1
+- 列表项 2
+- 列表项 3`
+
+export const Default: Story = {
+  args: {
+    id: "msg-1",
+    source: sampleMarkdown,
+  },
+}
+
+export const Streaming: Story = {
+  args: {
+    id: "msg-2",
+    source: "正在生成回复…",
+    streaming: true,
+  },
+}
+
+export const Latest: Story = {
+  args: {
+    id: "msg-3",
+    source: sampleMarkdown,
+    latest: true,
+    time: "2 分钟前",
+  },
+}
+
+export const WithTime: Story = {
+  args: {
+    id: "msg-4",
+    source: sampleMarkdown,
+    time: "5 分钟前",
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    id: "msg-5",
+    source: "",
+    error: "生成回复时出错",
+    retryLabel: "重试",
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const WithFeedbackUp: Story = {
+  args: {
+    id: "msg-6",
+    source: sampleMarkdown,
+    feedback: { vote: "up" },
+    onFeedbackChange: (feedback) => console.log("Feedback:", feedback),
+  },
+}
+
+export const WithFeedbackDown: Story = {
+  args: {
+    id: "msg-7",
+    source: sampleMarkdown,
+    feedback: { vote: "down", reasons: ["不准确"], detail: "回复内容有误" },
+    onFeedbackChange: (feedback) => console.log("Feedback:", feedback),
+  },
+}
+
+export const WithCustomContent: Story = {
+  args: {
+    id: "msg-8",
+    content: (
+      <div style={{ padding: 20, background: "var(--bg-secondary)", borderRadius: 8 }}>
+        <h3>自定义内容</h3>
+        <p>这是一个自定义的富文本卡片</p>
+      </div>
+    ),
+  },
+}
+
+export const WithDisclaimer: Story = {
+  args: {
+    id: "msg-9",
+    source: sampleMarkdown,
+    disclaimer: (
+      <div style={{ fontSize: 12, color: "var(--fg-tertiary)", marginTop: 8 }}>⚠️ 此回复由 AI 生成，仅供参考</div>
+    ),
+  },
+}
+
+export const WithAllActions: Story = {
+  args: {
+    id: "msg-10",
+    source: sampleMarkdown,
+    latest: true,
+    time: "刚刚",
+    actions: true,
+    onCopy: (source) => console.log("Copy:", source),
+    onBranch: () => console.log("Branch"),
+    onShare: () => console.log("Share"),
+    onFeedbackChange: (feedback) => console.log("Feedback:", feedback),
+  },
+}
+
+export const NoActions: Story = {
+  args: {
+    id: "msg-11",
+    source: sampleMarkdown,
+    actions: false,
+  },
+}
+
+export const LongContent: Story = {
+  args: {
+    id: "msg-12",
+    source: `# 长内容示例
+
+这是一个较长的回复示例，包含多个段落和代码块。
+
+## 第一部分
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+\`\`\`python
+def calculate_fibonacci(n):
+    if n <= 1:
+        return n
+    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)
+
+# 计算前 10 个斐波那契数
+for i in range(10):
+    print(f"F({i}) = {calculate_fibonacci(i)}")
+\`\`\`
+
+## 第二部分
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+- 要点 1
+- 要点 2
+- 要点 3
+
+## 总结
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.`,
+    time: "10 分钟前",
+  },
+}

package/src/components/domain/desktop/DesktopChatMessageView/DesktopChatMessageViewSource.test.mjs

@@ -0,0 +1,47 @@
+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 css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const icons = await readFile(new URL("../../../composite/Icons/index.tsx", import.meta.url), "utf8")
+
+// DS 2.0 P5：操作行归口 domain/chat/MessageActions（合并 ActionBar / ChatActionbar /
+// ChatActionRowView）。断言随形态同步：动作次序不变，但不再自造 .msg-action 图标钮。
+test("assistant message actions keep their order and route through MessageActions", () => {
+  assert.match(source, /import \{ MessageActions \} from "\.\.\/\.\.\/chat\/MessageActions"/)
+  assert.match(source, /<MessageActions\s+className=\{`msg-actions\$\{latest \? " msg-actions--latest" : ""\}`\}/)
+  assert.match(
+    source,
+    /key: "like"[\s\S]*key: "dislike"[\s\S]*key: "copy"[\s\S]*key: "branch"[\s\S]*key: "share"[\s\S]*key: "preview"/,
+  )
+  assert.match(
+    source,
+    /label: "赞"[\s\S]*label: "踩"[\s\S]*label: "复制"[\s\S]*label: "新建分支"[\s\S]*label: "分享"[\s\S]*label: "查看 Markdown"/,
+  )
+  assert.match(source, /onSelect: \(\) => onBranch\?\.\(\)/)
+  assert.match(source, /onSelect: \(\) => setPreviewOpen\(true\)/)
+  // 最新一条常显，其余 hover 浮现（由 MessageActions 的 visible 承担）
+  assert.match(source, /visible=\{Boolean\(latest\)\}/)
+  // 旧的手搓图标钮与其 BEM 样式段一并退役
+  assert.doesNotMatch(source, /className="msg-action"/)
+  assert.doesNotMatch(css, /^\.msg-action \{/m)
+})
+
+test("assistant message actions have no overflow dropdown", () => {
+  assert.doesNotMatch(source, /menuOpen|msg-actions__more|cpop--msg-more|aria-label="更多"|<More/)
+  assert.doesNotMatch(css, /\.msg-actions__more|\.cpop--msg-more/)
+})
+
+test("message time stays a mono readout owned by MessageActions", () => {
+  assert.match(source, /time=\{time \|\| undefined\}/)
+  assert.doesNotMatch(source, /className="msg-time"/)
+  assert.doesNotMatch(css, /^\.msg-time \{/m)
+})
+
+test("assistant liked messages use the filled like icon from the shared catalog", () => {
+  assert.match(icons, /export const LikeFill = \(p: IconProps\) =>[\s\S]*<svg/)
+  assert.match(icons, /Like,\s*LikeFill,\s*Dislike/)
+  assert.match(source, /import \{[^}]*Like[^}]*LikeFill[^}]*\} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
+  assert.match(source, /vote === "up" \? <LikeFill \/> : <Like \/>/)
+})

package/src/components/domain/desktop/DesktopChatMessageView/index.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import { type ReactNode, useCallback, useState } from "react"
+import { Branch, Copy, Doc, Like, LikeFill, Share, ThumbsDown } from "../../../composite/Icons"
+import { Markdown, type MarkdownProps } from "../../../composite/Markdown"
+import { MarkdownPreviewModalView } from "../../../composite/MarkdownPreviewModalView"
+import { MessageFeedbackDialog, type MessageFeedbackSubmission } from "../../../composite/MessageFeedbackDialog"
+import { Button } from "../../../primitives"
+import { MessageActions } from "../../chat/MessageActions"
+
+export type DesktopChatMessageFeedback = {
+  vote: "up" | "down"
+  reasons?: string[]
+  detail?: string
+}
+
+export interface DesktopChatMessageViewProps extends Omit<MarkdownProps, "source" | "className"> {
+  id: string
+  /** Markdown source rendered by the shared Orbitwork UI Markdown component. */
+  source?: string
+  /** Slot for Desktop-only rich cards such as tasks, permissions and tool output. */
+  content?: ReactNode
+  streaming?: boolean
+  latest?: boolean
+  actions?: boolean
+  error?: ReactNode
+  retryLabel?: ReactNode
+  onRetry?: () => void
+  retryDisabled?: boolean
+  time?: string | null
+  feedback?: DesktopChatMessageFeedback | null
+  onFeedbackChange?: (feedback: DesktopChatMessageFeedback | null) => void
+  onCopy?: (source: string) => void | Promise<void>
+  onBranch?: () => void
+  onShare?: () => void
+  disclaimer?: ReactNode
+}
+
+/**
+ * Desktop 助手消息的完整视图：Markdown、流式状态、重试、反馈、消息操作和
+ * Markdown 预览均由 ow-ui 渲染，宿主只提供数据及业务回调。
+ */
+export function DesktopChatMessageView({
+  source,
+  content,
+  streaming,
+  latest,
+  actions = true,
+  error,
+  retryLabel,
+  onRetry,
+  retryDisabled,
+  time,
+  feedback,
+  onFeedbackChange,
+  onCopy,
+  onBranch,
+  onShare,
+  disclaimer,
+  onLocalPathClick,
+  onLocalFileCardOpen,
+  onRequestLocalFileOpenWithOptions,
+  onLocalFileCardOpenWith,
+  onLocalFileCardOpenWithMenu,
+  onLocalImagePreview,
+  localPathBaseDir,
+  onRunCommand,
+}: DesktopChatMessageViewProps): React.ReactElement {
+  const showActions = actions && !streaming && Boolean(source?.trim())
+  const markdownProps = {
+    onLocalPathClick,
+    onLocalFileCardOpen,
+    onRequestLocalFileOpenWithOptions,
+    onLocalFileCardOpenWith,
+    onLocalFileCardOpenWithMenu,
+    onLocalImagePreview,
+    localPathBaseDir,
+    onRunCommand,
+  }
+
+  return (
+    <div className={`bubble-wrap${latest ? " bubble-wrap--latest" : ""}`}>
+      <div className={`bubble${streaming ? " streaming" : ""}`}>
+        {content ??
+          (source !== undefined ? <Markdown className="stream-text" source={source} {...markdownProps} /> : null)}
+        {error && (
+          <div className="stream-text">
+            {error}
+            {onRetry && (
+              <>
+                {" "}
+                ·{" "}
+                <Button
+                  variant="unstyled"
+                  type="button"
+                  className="chat-retry-link"
+                  onClick={onRetry}
+                  disabled={retryDisabled}
+                >
+                  {retryLabel ?? "重试"}
+                </Button>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+      {showActions && (
+        <DesktopChatMessageActions
+          source={source ?? ""}
+          latest={latest}
+          time={time}
+          feedback={feedback}
+          onFeedbackChange={onFeedbackChange}
+          onCopy={onCopy}
+          onBranch={onBranch}
+          onShare={onShare}
+          markdownProps={markdownProps}
+        />
+      )}
+      {!streaming && disclaimer && <div className="msg-disclaimer">{disclaimer}</div>}
+    </div>
+  )
+}
+
+function DesktopChatMessageActions({
+  source,
+  latest,
+  time,
+  feedback,
+  onFeedbackChange,
+  onCopy,
+  onBranch,
+  onShare,
+  markdownProps,
+}: {
+  source: string
+  latest?: boolean
+  time?: string | null
+  feedback?: DesktopChatMessageFeedback | null
+  onFeedbackChange?: (feedback: DesktopChatMessageFeedback | null) => void
+  onCopy?: (source: string) => void | Promise<void>
+  onBranch?: () => void
+  onShare?: () => void
+  markdownProps: Omit<MarkdownProps, "source" | "className">
+}): React.ReactElement {
+  const [copied, setCopied] = useState(false)
+  const [previewOpen, setPreviewOpen] = useState(false)
+  const [dislikeOpen, setDislikeOpen] = useState(false)
+  const vote = feedback?.vote ?? null
+
+  const copy = useCallback(async () => {
+    try {
+      if (onCopy) await onCopy(source)
+      else await navigator.clipboard.writeText(source)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 2000)
+    } catch {}
+  }, [onCopy, source])
+
+  const submitDislike = (submission: MessageFeedbackSubmission) => {
+    onFeedbackChange?.({
+      vote: "down",
+      reasons: submission.reasons,
+      ...(submission.detail ? { detail: submission.detail } : {}),
+    })
+    setDislikeOpen(false)
+  }
+
+  // DS 2.0 P5：操作行归口 MessageActions（hover 浮现 · ghost 28 图标钮 · 贴地不走 -pop 档）。
+  // 类名 msg-actions 只留作宿主定位钩子，样式全部由 MessageActions 持有。
+  return (
+    <MessageActions
+      className={`msg-actions${latest ? " msg-actions--latest" : ""}`}
+      visible={Boolean(latest)}
+      time={time || undefined}
+      items={[
+        {
+          key: "like",
+          label: "赞",
+          // 研发意图（origin/main）：赞的选中态换实心图标——与 §6「形色双编码」同向，
+          // active 只再管 aria-pressed 与色。
+          icon: vote === "up" ? <LikeFill /> : <Like />,
+          active: vote === "up",
+          onSelect: () => onFeedbackChange?.(vote === "up" ? null : { vote: "up" }),
+        },
+        {
+          key: "dislike",
+          label: "踩",
+          icon: <ThumbsDown />,
+          active: vote === "down",
+          onSelect: () => (vote === "down" ? onFeedbackChange?.(null) : setDislikeOpen(true)),
+        },
+        { key: "copy", label: "复制", icon: <Copy />, done: copied, onSelect: copy },
+        { key: "branch", label: "新建分支", icon: <Branch />, onSelect: () => onBranch?.() },
+        { key: "share", label: "分享", icon: <Share />, onSelect: () => onShare?.() },
+        { key: "preview", label: "查看 Markdown", icon: <Doc />, onSelect: () => setPreviewOpen(true) },
+      ]}
+      trailing={
+        <>
+          {previewOpen && (
+            <MarkdownPreviewModalView
+              source={source}
+              preview={<Markdown className="stream-text" source={source} {...markdownProps} />}
+              onClose={() => setPreviewOpen(false)}
+              onCopy={onCopy}
+            />
+          )}
+          {dislikeOpen && <MessageFeedbackDialog onClose={() => setDislikeOpen(false)} onSubmit={submitDislike} />}
+        </>
+      }
+    />
+  )
+}