@orbit-work/ui 0.1.0

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

@@ -0,0 +1,490 @@
+"use client"
+
+import { type ReactNode, useCallback, useId, useState } from "react"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { ChevDown, Copy, Folder, Mail, Server, Skill } from "../../../composite/Icons"
+import { CompressionDivider } from "../../../composite/TranscriptDividers"
+import { Button } from "../../../primitives"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+import { AgentTurn } from "../../chat/AgentTurn"
+import { ChatThinking } from "../../chat/ChatThinking"
+import { MessageActions } from "../../chat/MessageActions"
+import { Transcript } from "../../chat/Transcript"
+import { UserTurn } from "../../chat/UserTurn"
+import { FileIcon } from "../../files/FileIcon"
+import { DesktopChatMessageView, type DesktopChatMessageViewProps } from "../DesktopChatMessageView"
+
+export interface DesktopChatAttachmentView {
+  id?: string
+  name: string
+  meta?: string
+  kind?: "image" | "audio" | "file" | "directory"
+  glyph?: ReactNode
+  previewUrl?: string
+  openable?: boolean
+  draggable?: boolean
+  title?: string
+}
+
+export interface DesktopChatContextView {
+  id: string
+  name: string
+  kind: "skill" | "mcp"
+}
+
+export interface DesktopChatUserTurnViewProps {
+  id: string | number
+  text?: string
+  sourceLabel?: string
+  compressed?: boolean
+  error?: string | null
+  time?: string | null
+  attachments?: DesktopChatAttachmentView[]
+  contexts?: DesktopChatContextView[]
+  onAttachmentClick?: (attachment: DesktopChatAttachmentView, index: number) => void
+  onAttachmentDoubleClick?: (attachment: DesktopChatAttachmentView, index: number) => void
+  onAttachmentDragStart?: (
+    event: React.DragEvent<HTMLButtonElement>,
+    attachment: DesktopChatAttachmentView,
+    index: number,
+  ) => void
+  onAttachmentKeyDown?: (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    attachment: DesktopChatAttachmentView,
+    index: number,
+  ) => void
+  onCopy?: (text: string) => void | Promise<void>
+  /** 分享挑选模式：行首长出 16px 勾选框（原型 template.dc.html:1142-1149） */
+  selectable?: boolean
+  /** 已选入分享 */
+  checked?: boolean
+  /** 勾选切换；入参是切换后的状态 */
+  onToggle?: (checked: boolean) => void
+  /** 勾选框读屏名，缺省「选入分享」 */
+  selectLabel?: string
+  trailing?: ReactNode
+}
+
+/**
+ * Desktop 用户消息的完整纯视图；文件解析和 Electron 操作留在宿主 adapter。
+ * DS 2.0 P5：轮次骨架归口 `UserTurn`（domain/chat/UserTurn）——空心环节点＋引用原话
+ * 不加气泡底，照锁定件 TranscriptSpine 的语言；来源 chip、附件区、上下文 chip、
+ * 操作行分别挂 UserTurn 的 leading / attachments / contexts / actions 槽。
+ */
+export function DesktopChatUserTurnView({
+  id,
+  text = "",
+  sourceLabel,
+  compressed,
+  error,
+  time,
+  attachments = [],
+  contexts = [],
+  onAttachmentClick,
+  onAttachmentDoubleClick,
+  onAttachmentDragStart,
+  onAttachmentKeyDown,
+  onCopy,
+  selectable,
+  checked,
+  onToggle,
+  selectLabel,
+  trailing,
+}: DesktopChatUserTurnViewProps) {
+  if (compressed) {
+    return <DesktopChatCompressionDivider id={id} text={text} time={time} onCopy={onCopy} trailing={trailing} />
+  }
+
+  return (
+    <UserTurn
+      className="turn turn--user"
+      anchor={id}
+      /* A7-B2：分享挑选模式的勾选框归口组件库（原来在宿主 ChatCard 的 SharePickRow 里用原生 input） */
+      selectable={selectable}
+      checked={checked}
+      onToggle={onToggle}
+      selectLabel={selectLabel}
+      text={text || undefined}
+      error={error || undefined}
+      trailing={trailing}
+      /* A9-B2：时间读数改挂气泡右侧同一行（原型 template.dc.html:1177），
+         下方操作行只留复制钮。 */
+      time={time || undefined}
+      actions={text ? <DesktopChatUserMeta text={text} onCopy={onCopy} /> : undefined}
+      leading={
+        sourceLabel ? (
+          <div className="turn-source-chip">
+            <Mail /> {sourceLabel}
+          </div>
+        ) : undefined
+      }
+      contexts={
+        contexts.length > 0 ? (
+          <div className="turn-context-chips">
+            {contexts.map((context) => (
+              <span
+                key={`${context.kind}:${context.id}`}
+                className={`turn-context-chip turn-context-chip--${context.kind}`}
+                data-kind={context.kind}
+              >
+                {context.kind === "skill" ? <Skill /> : <Server />}
+                <span>{context.name}</span>
+              </span>
+            ))}
+          </div>
+        ) : undefined
+      }
+      attachments={
+        attachments.length > 0 ? (
+          <div className="atts">
+            {attachments.map((attachment, index) => (
+              <Button
+                variant="unstyled"
+                key={attachment.id ?? `${attachment.name}-${index}`}
+                type="button"
+                className={`att${attachment.openable ? " att--openable" : ""}${attachment.kind === "image" && attachment.previewUrl ? " att--image" : ""}`}
+                title={attachment.title ?? attachment.name}
+                draggable={attachment.draggable}
+                onDragStart={(event) => onAttachmentDragStart?.(event, attachment, index)}
+                onClick={() => onAttachmentClick?.(attachment, index)}
+                onDoubleClick={() => onAttachmentDoubleClick?.(attachment, index)}
+                onKeyDown={(event) => onAttachmentKeyDown?.(event, attachment, index)}
+              >
+                {attachment.kind === "image" && attachment.previewUrl ? (
+                  <img className="att__preview" src={attachment.previewUrl} alt={attachment.name} />
+                ) : (
+                  <>
+                    <span className={`gly ${attachment.kind === "directory" ? "gly--directory" : "gly--file"}`}>
+                      {attachment.kind === "directory" ? (
+                        <Folder aria-hidden="true" />
+                      ) : (
+                        <FileIcon name={attachment.name} kind={attachment.kind} width={16} height={16} />
+                      )}
+                    </span>
+                    <div>
+                      <div>{attachment.name}</div>
+                      {attachment.meta && <div className="m">{attachment.meta}</div>}
+                    </div>
+                  </>
+                )}
+              </Button>
+            ))}
+          </div>
+        ) : undefined
+      }
+    />
+  )
+}
+
+export interface DesktopChatCompressionDividerProps {
+  id: string | number
+  text: string
+  /** Boundary label. Defaults to "上下文已压缩". */
+  label?: ReactNode
+  /** Compressed content stays folded unless explicitly requested otherwise. */
+  defaultExpanded?: boolean
+  time?: string | null
+  onCopy?: (text: string) => void | Promise<void>
+  onExpandedChange?: (expanded: boolean) => void
+  trailing?: ReactNode
+}
+
+/**
+ * Desktop 压缩消息分界线；折叠状态和展开交互由 ow-ui 持有。
+ * DS 2.0 P5：边界行本体改用 `CompressionDivider`（composite/TranscriptDividers），
+ * 本件只保留桌面端外壳（turn 组容器）与详情区卡面（`.compression-divider__details`）。
+ */
+export function DesktopChatCompressionDivider({
+  id,
+  text,
+  label = "上下文已压缩",
+  defaultExpanded = false,
+  time,
+  onCopy,
+  onExpandedChange,
+  trailing,
+}: DesktopChatCompressionDividerProps): React.ReactElement {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const handleExpandedChange = useCallback(
+    (next: boolean) => {
+      setExpanded(next)
+      onExpandedChange?.(next)
+    },
+    [onExpandedChange],
+  )
+
+  return (
+    <div className={`turn turn--compressed-group${expanded ? " is-expanded" : ""}`} data-chat-anchor={id}>
+      <CompressionDivider
+        className={expanded ? "mt-5 mb-3" : "mt-5 mb-6"}
+        label={label}
+        expanded={expanded}
+        onExpandedChange={handleExpandedChange}
+        detailsLabel="已压缩内容"
+        detailsClassName="compression-divider__details"
+      >
+        <span className="compression-divider__text">{text}</span>
+        {text && <DesktopChatUserMeta text={text} time={time} onCopy={onCopy} visible />}
+      </CompressionDivider>
+      {trailing}
+    </div>
+  )
+}
+
+export interface DesktopChatReconnectDividerProps {
+  id: string | number
+  detail?: string
+  /** Error-card title shown after expanding the reconnect divider. */
+  errorTitle?: string
+  /** Human-readable error-card message shown after expanding the divider. */
+  errorMessage?: string
+  /** Optional host version shown by the expanded error card. */
+  errorVersion?: string
+  /** Calm status copy shown while Desktop is reconnecting. */
+  label?: ReactNode
+  /** Error details stay folded unless explicitly requested otherwise. */
+  defaultExpanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+}
+
+/** Desktop transient reconnect boundary; the host removes it after reconnect succeeds. */
+export function DesktopChatReconnectDivider({
+  id,
+  detail = "",
+  errorTitle = "Invalid Request",
+  errorMessage,
+  errorVersion,
+  label = "连接响应异常，正在尝试重新连接",
+  defaultExpanded = false,
+  onExpandedChange,
+}: DesktopChatReconnectDividerProps): React.ReactElement {
+  const detailsId = useId()
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const toggle = useCallback(() => {
+    setExpanded((value) => {
+      const next = !value
+      onExpandedChange?.(next)
+      return next
+    })
+  }, [onExpandedChange])
+  const actionLabel = expanded ? "收起连接错误详情" : "查看连接错误详情"
+
+  return (
+    <div className={`reconnect-status${expanded ? " is-expanded" : ""}`} data-chat-anchor={id}>
+      <div className="reconnect-divider">
+        <span className="reconnect-divider__line" aria-hidden="true" />
+        <Button
+          variant="unstyled"
+          type="button"
+          className="reconnect-divider__trigger"
+          onClick={toggle}
+          aria-expanded={expanded}
+          aria-controls={detailsId}
+          aria-label={actionLabel}
+          title={actionLabel}
+        >
+          {/* §9 旋转圈退役：自转 Loader 图标 → 锁定件 BeaconSpinner（size 15 → <20px
+              小转子环，描边随 .reconnect-divider__spinner 的 error 色）。 */}
+          <BeaconSpinner size={15} className="reconnect-divider__spinner" aria-label="正在重连" />
+          <span className="reconnect-divider__label" role="status" aria-live="polite">
+            {label}
+          </span>
+          <span className="reconnect-divider__action">{expanded ? "收起" : "查看"}</span>
+          <ChevDown className="reconnect-divider__chevron" aria-hidden="true" />
+        </Button>
+        <span className="reconnect-divider__line" aria-hidden="true" />
+      </div>
+      <div
+        id={detailsId}
+        className="reconnect-divider__details"
+        role="region"
+        aria-label="连接错误详情"
+        hidden={!expanded}
+      >
+        <InlineMessage variant="error" title={errorTitle} meta={errorVersion} detail={detail.trim() || undefined}>
+          {errorMessage?.trim() || detail.trim() || "Backend chat stream returned an invalid response."}
+        </InlineMessage>
+      </div>
+    </div>
+  )
+}
+
+function DesktopChatUserMeta({
+  text,
+  time,
+  onCopy,
+  visible,
+}: {
+  text: string
+  /** 压缩详情里仍走操作行读数；轮次里的时间已挂到气泡右侧（A9-B2） */
+  time?: string | null
+  onCopy?: (text: string) => void | Promise<void>
+  /** 无轮次 hover 语境时（压缩详情里）常显 */
+  visible?: boolean
+}) {
+  const [copied, setCopied] = useState(false)
+  const copy = useCallback(async () => {
+    try {
+      if (onCopy) await onCopy(text)
+      else await navigator.clipboard.writeText(text)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1600)
+    } catch {}
+  }, [onCopy, text])
+  // DS 2.0 P5：用户轮的操作行归口 MessageActions（hover 浮现、ghost 28 图标钮、
+  // 复制完成回执＝勾＋success）。类名 turn-user-meta 只留作宿主定位钩子，
+  // 样式全部由 MessageActions 持有。
+  return (
+    <MessageActions
+      className="turn-user-meta"
+      visible={visible}
+      time={time || undefined}
+      items={[{ key: "copy", label: "复制", icon: <Copy />, done: copied, onSelect: copy }]}
+    />
+  )
+}
+
+export interface DesktopChatAgentMessageView extends Omit<DesktopChatMessageViewProps, "latest" | "disclaimer"> {}
+
+export interface DesktopChatAgentTurnViewProps {
+  children?: ReactNode
+  questions?: ReactNode
+  body?: ReactNode
+  messages?: DesktopChatAgentMessageView[]
+  thinking?: ReactNode
+  thinkingLoading?: boolean
+  /** 思考正文初始展开；缺省折叠（R4） */
+  thinkingDefaultExpanded?: boolean
+  /**
+   * R5 定案：信标合到脊线节点上，**缺省开**。转/停由轮内的 ChatThinking / Thinking 行自动上报
+   * （`thinking` 槽的 loading 也算），对象可强制 spinning / toolRunning；`false` 关掉。
+   */
+  nodeBeacon?: boolean | { spinning?: boolean; toolRunning?: boolean; size?: number }
+  execution?: ReactNode
+  actions?: boolean
+  disclaimer?: ReactNode
+  plain?: boolean
+  /** 署名行的 agent 名；给出即显示脊柱署名行（缺省不显，由宿主标题承担身份） */
+  agentName?: ReactNode
+  /** 署名行右侧读数（步数·耗时·模型），mono＋tabular-nums */
+  agentMeta?: ReactNode
+  /** 分享挑选模式：行首长出 16px 勾选框（原型 template.dc.html:1142-1149） */
+  selectable?: boolean
+  /** 已选入分享 */
+  checked?: boolean
+  /** 勾选切换；入参是切换后的状态 */
+  onToggle?: (checked: boolean) => void
+  /** 勾选框读屏名，缺省「选入分享」 */
+  selectLabel?: string
+}
+
+/**
+ * Desktop 助手消息组合视图，覆盖思考、执行摘要、正文、操作区和免责声明。
+ * DS 2.0 P5：轮次骨架归口 `AgentTurn`（domain/chat/AgentTurn）——实心点节点＋
+ * 可选署名行照锁定件 TranscriptSpine 的语言；桌面端的正文栈（`.body`）与
+ * DesktopChatMessageView 仍留在本件。
+ */
+export function DesktopChatAgentTurnView({
+  children,
+  questions,
+  body,
+  messages,
+  thinking,
+  thinkingLoading,
+  thinkingDefaultExpanded,
+  nodeBeacon,
+  execution,
+  actions = true,
+  disclaimer,
+  plain,
+  agentName,
+  agentMeta,
+  selectable,
+  checked,
+  onToggle,
+  selectLabel,
+}: DesktopChatAgentTurnViewProps) {
+  const visibleMessages = messages ?? (children !== undefined ? [{ id: "message", content: children }] : [])
+  return (
+    <AgentTurn
+      className={`turn ${plain ? "turn--plain-agent" : "turn--agent"}`}
+      /* A9-B2：原型的每一轮 agent 都挂实心点、内容都缩进 26px（template.dc.html:1150-1170）。
+         纯文本轮原来 node=false，既没点也不缩进，脊线一到它这儿就断——脊柱贯穿的前提是
+         每一轮都占同一条 12px 脊柱列，所以纯文本轮同样挂节点。 */
+      node
+      /* A7-B2：同用户轮，分享挑选模式的勾选框由 AgentTurn 持有 */
+      selectable={selectable}
+      checked={checked}
+      onToggle={onToggle}
+      selectLabel={selectLabel}
+      beacon={nodeBeacon ?? true}
+      byline={agentName != null}
+      name={agentName}
+      meta={agentMeta}
+      execution={execution}
+      thinking={
+        thinking !== undefined ? (
+          /* R4（2026-09-04）：思考正文缺省折叠（思考是过程不是答案），跟 Thinking inline 的缺省走；
+             要常开由宿主传 thinkingDefaultExpanded（ACCEPTANCE-PENDING R4-3）。 */
+          <ChatThinking loading={thinkingLoading} defaultExpanded={thinkingDefaultExpanded}>
+            {thinking}
+          </ChatThinking>
+        ) : undefined
+      }
+    >
+      <div className="body">
+        {questions}
+        {body}
+        {visibleMessages.map((message, index) => {
+          const latest = index === visibleMessages.length - 1
+          return (
+            <DesktopChatMessageView
+              key={message.id}
+              {...message}
+              actions={message.actions ?? actions}
+              latest={latest}
+              disclaimer={latest ? disclaimer : undefined}
+            />
+          )
+        })}
+      </div>
+    </AgentTurn>
+  )
+}
+
+export interface DesktopConversationGroupView {
+  id: string
+  user?: DesktopChatUserTurnViewProps
+  agent?: DesktopChatAgentTurnViewProps
+  divider?: ReactNode
+}
+
+export interface DesktopConversationViewProps {
+  groups: DesktopConversationGroupView[]
+  /** 脊线贯穿；关掉即退化为平铺列表（分享页等无脊柱语境） */
+  spine?: boolean
+  className?: string
+}
+
+/**
+ * 一个可同时供 Desktop 和文档示例使用的完整会话列表。
+ * DS 2.0 P5：外壳归口 `Transcript`（domain/chat/Transcript）——左侧 1.5px
+ * `--ow-timeline` 脊线贯穿，用户轮空心环 / 助手轮实心点各自挂在线上。
+ */
+export function DesktopConversationView({
+  groups,
+  spine = true,
+  className,
+}: DesktopConversationViewProps): React.ReactElement {
+  return (
+    <Transcript spine={spine} maxWidth="100%" className={className}>
+      {groups.map((group) => (
+        <div data-ow-part="turn-group" key={group.id}>
+          {group.user && <DesktopChatUserTurnView {...group.user} />}
+          {group.agent && <DesktopChatAgentTurnView {...group.agent} />}
+          {group.divider}
+        </div>
+      ))}
+    </Transcript>
+  )
+}

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

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Bolt, Settings as User } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { DesktopComposer, DesktopComposerModelButton } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopComposer",
+  component: DesktopComposer,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, background: "var(--bg-primary)" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopComposer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+  },
+}
+
+export const WithAgent: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "向智能体提问",
+    agent: {
+      label: "Code Expert",
+      description: "代码专家",
+      icon: <Bolt />,
+      onRemove: () => console.log("Remove agent"),
+    },
+  },
+}
+
+export const WithPlan: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "根据计划提问",
+    plan: {
+      label: "实现登录功能",
+      description: "3 个步骤",
+      onRemove: () => console.log("Remove plan"),
+    },
+  },
+}
+
+export const WithAddAction: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    addAction: {
+      onClick: () => console.log("Add"),
+      title: "添加上下文",
+    },
+  },
+}
+
+export const WithModelControl: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    modelControl: <DesktopComposerModelButton label="Claude Opus 5" onClick={() => console.log("Select model")} />,
+  },
+}
+
+export const WithProjectControl: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    projectControl: (
+      <Button variant="text" size="small">
+        项目: orbit-fe
+      </Button>
+    ),
+  },
+}
+
+export const WithContextUsage: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    contextUsage: <div style={{ fontSize: 12, color: "var(--fg-tertiary)" }}>12.5K / 200K tokens</div>,
+  },
+}
+
+export const FullyLoaded: Story = {
+  args: {
+    value: "如何优化这个查询？",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    addAction: {
+      onClick: () => console.log("Add"),
+      title: "添加上下文",
+    },
+    agent: {
+      label: "Database Expert",
+      icon: <Bolt />,
+      onRemove: () => console.log("Remove agent"),
+    },
+    modelControl: <DesktopComposerModelButton label="Claude Opus 5" onClick={() => console.log("Select model")} />,
+    projectControl: (
+      <Button variant="text" size="small">
+        项目: backend
+      </Button>
+    ),
+    contextUsage: <div style={{ fontSize: 12, color: "var(--fg-tertiary)" }}>45K / 200K</div>,
+  },
+}
+
+export const WithPermissionPrompt: Story = {
+  args: {
+    value: "",
+    onChange: () => {},
+    onSubmit: () => {},
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    permissionPrompt: (
+      <div style={{ padding: 40, textAlign: "center", background: "var(--bg-secondary)", borderRadius: 8 }}>
+        <h3>需要权限</h3>
+        <p>此操作需要您的授权</p>
+        <Button variant="primary">授权</Button>
+      </div>
+    ),
+  },
+}
+
+export const CustomNotice: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    notice: "⚠️ 当前处于测试模式",
+  },
+}
+
+/** 缺省态：井脚无免责句（R2·L1-2-2 起免责句归 AgentTurn.disclaimer）。 */
+export const NoNotice: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+  },
+}
+
+/** 显式传 notice 才在井脚补一条（宿主自定义提示用）。 */
+export const WithNotice: Story = {
+  args: {
+    value: "",
+    onChange: (value) => console.log("Value:", value),
+    onSubmit: () => console.log("Submit"),
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    notice: "内容由 AI 生成，请仔细核实回答内容。",
+  },
+}
+
+export const ModelButtonDefault: StoryObj<typeof DesktopComposerModelButton> = {
+  render: () => <DesktopComposerModelButton label="Claude Opus 5" onClick={() => console.log("Click")} />,
+}
+
+export const ModelButtonOpen: StoryObj<typeof DesktopComposerModelButton> = {
+  render: () => <DesktopComposerModelButton label="Claude Sonnet 5" open={true} onClick={() => console.log("Click")} />,
+}
+
+export const ModelButtonWarning: StoryObj<typeof DesktopComposerModelButton> = {
+  render: () => (
+    <DesktopComposerModelButton
+      label="GPT-4"
+      warning={true}
+      title="此模型可能不稳定"
+      onClick={() => console.log("Click")}
+    />
+  ),
+}