@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,170 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,213 +0,0 @@
-"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} />}
-        </>
-      }
-    />
-  )
-}