@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.130

package/dist/components/AgentPanel/agent-panel.js

@@ -0,0 +1,670 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { X, ChevronDown, Plus, Square, ArrowUp, Copy, ThumbsUp, ThumbsDown, Pencil, Trash2, MessageSquare } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/button.js";
+import { ButtonDivider } from "../Button/button-group.js";
+import { ChromeHeader } from "../../patterns/header-canonical/chrome-header.js";
+import { SurfaceHeader, COMPACT_HEADER_SLOT, SurfaceFooter } from "../../patterns/overlay-surface/overlay-surface.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../Popover/popover.js";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "../Command/command.js";
+import { MenuItem } from "../Menu/menu-item.js";
+import { ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
+import { CircularProgress } from "../CircularProgress/circular-progress.js";
+import { RadioGroup, RadioGroupItem } from "../RadioGroup/radio-group.js";
+import { Chip } from "../Chip/chip.js";
+import { Tag } from "../Tag/tag.js";
+import { Input } from "../Input/input.js";
+import { Field, FieldLabel } from "../Field/field.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from "../Dialog/dialog.js";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { AgentLogo } from "./agent-logo.js";
+/* empty css */
+const AgentPanel = React.forwardRef(
+  ({ open = true, className, children, ...props }, ref) => {
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "complementary",
+        "aria-label": "智慧代理",
+        className: cn(
+          "relative flex h-full min-h-0 w-[var(--agent-panel-width)] shrink-0 flex-col overflow-hidden",
+          "border-l border-divider bg-surface",
+          "animate-in fade-in-0 slide-in-from-right-4 duration-[var(--motion-duration-surface)] motion-reduce:animate-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AgentPanel.displayName = "AgentPanel";
+function HistoryRow({
+  conversation,
+  selected,
+  onSelect,
+  onRename,
+  onDelete
+}) {
+  const actions = (onRename || onDelete) && /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "hidden items-center group-hover/agent-history:flex group-focus-within/agent-history:flex",
+        "animate-in fade-in-0 duration-[var(--motion-duration-overlay)]"
+      ),
+      children: [
+        onRename && /* @__PURE__ */ jsx(
+          ItemInlineAction,
+          {
+            action: {
+              icon: Pencil,
+              label: "改名",
+              // i18n-allow: DS 預設文案(Dialog「關閉」同前例)
+              onClick: (e) => {
+                e == null ? void 0 : e.stopPropagation();
+                onRename();
+              }
+            }
+          }
+        ),
+        onDelete && /* @__PURE__ */ jsx(
+          ItemInlineAction,
+          {
+            action: {
+              icon: Trash2,
+              label: "刪除",
+              // i18n-allow: DS 預設文案(Dialog「關閉」同前例)
+              onClick: (e) => {
+                e == null ? void 0 : e.stopPropagation();
+                onDelete();
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      value: `${conversation.title}\0${conversation.id}`,
+      onSelect,
+      className: "group/agent-history p-0",
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          selected,
+          startContent: conversation.thinking ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, "aria-label": "回覆中" }) : /* @__PURE__ */ jsx(MessageSquare, { size: 16, "aria-hidden": true, className: "text-fg-muted" }),
+          endContent: actions,
+          children: conversation.title
+        }
+      )
+    }
+  );
+}
+const AgentPanelHeader = React.forwardRef(
+  ({
+    title,
+    logoState = "still",
+    historySearchPlaceholder = "搜尋對話",
+    // i18n-allow: DS 預設文案,prop 可覆寫
+    historyEmptyText = "沒有符合的對話",
+    // i18n-allow: DS 預設文案,prop 可覆寫
+    conversations,
+    activeConversationId,
+    onSelectConversation,
+    onRenameConversation,
+    onDeleteConversation,
+    onNewConversation,
+    onClose,
+    className,
+    ...props
+  }, ref) => {
+    const [historyOpen, setHistoryOpen] = React.useState(false);
+    const [renameTarget, setRenameTarget] = React.useState(null);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const groups = React.useMemo(() => {
+      const order = [];
+      const byGroup = /* @__PURE__ */ new Map();
+      for (const item of conversations ?? []) {
+        const key = item.group ?? "";
+        if (!byGroup.has(key)) {
+          byGroup.set(key, []);
+          order.push(key);
+        }
+        byGroup.get(key).push(item);
+      }
+      return order.map((key) => ({ label: key, items: byGroup.get(key) }));
+    }, [conversations]);
+    return /* @__PURE__ */ jsxs(ChromeHeader, { ref, className: cn("bg-surface", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(AgentLogo, { state: logoState, size: 24 }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-body-lg font-medium", children: title }),
+        conversations && /* @__PURE__ */ jsxs(Popover, { open: historyOpen, onOpenChange: setHistoryOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            ItemInlineAction,
+            {
+              action: { icon: ChevronDown, label: "歷史對話", onClick: () => {
+              } },
+              "aria-haspopup": "menu",
+              "aria-expanded": historyOpen
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              align: "start",
+              sideOffset: 8,
+              className: "w-auto min-w-60 overflow-hidden rounded-lg border-border p-0",
+              style: { boxShadow: "var(--elevation-200)" },
+              children: /* @__PURE__ */ jsxs(Command, { children: [
+                /* @__PURE__ */ jsx(
+                  CommandInput,
+                  {
+                    placeholder: historySearchPlaceholder,
+                    "aria-label": historySearchPlaceholder
+                  }
+                ),
+                /* @__PURE__ */ jsxs(CommandList, { children: [
+                  /* @__PURE__ */ jsx(CommandEmpty, { children: historyEmptyText }),
+                  groups.map(({ label, items }) => /* @__PURE__ */ jsxs(CommandGroup, { className: "p-0 py-2", children: [
+                    " // i18n-allow: DS 預設文案(Dialog「關閉」同前例)",
+                    label && /* @__PURE__ */ jsx(MenuItem, { header: true, children: label }),
+                    items.map((conversation) => /* @__PURE__ */ jsx(
+                      HistoryRow,
+                      {
+                        conversation,
+                        selected: conversation.id === activeConversationId,
+                        onSelect: () => {
+                          onSelectConversation == null ? void 0 : onSelectConversation(conversation.id);
+                          setHistoryOpen(false);
+                        },
+                        onRename: onRenameConversation ? () => setRenameTarget(conversation) : void 0,
+                        onDelete: onDeleteConversation ? () => setDeleteTarget(conversation) : void 0
+                      },
+                      conversation.id
+                    ))
+                  ] }, label || "(未分組)"))
+                ] })
+              ] })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        onNewConversation && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "sm",
+            iconOnly: true,
+            startIcon: Plus,
+            "aria-label": "新對話",
+            onClick: onNewConversation
+          }
+        ),
+        onClose && /* @__PURE__ */ jsxs(Fragment, { children: [
+          onNewConversation && /* @__PURE__ */ jsx(ButtonDivider, {}),
+          /* @__PURE__ */ jsx(Button, { dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉面板", onClick: onClose })
+        ] })
+      ] }),
+      renameTarget && /* @__PURE__ */ jsx(
+        AgentRenameDialog,
+        {
+          conversation: renameTarget,
+          onOpenChange: (next) => !next && setRenameTarget(null),
+          onConfirm: (nextTitle) => {
+            onRenameConversation == null ? void 0 : onRenameConversation(renameTarget.id, nextTitle);
+            setRenameTarget(null);
+          }
+        }
+      ),
+      deleteTarget && /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (next) => !next && setDeleteTarget(null), children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "刪除對話" }),
+          " // i18n-allow: DS 預設文案(Dialog「關閉」同前例)"
+        ] }),
+        /* @__PURE__ */ jsxs(DialogBody, { children: [
+          "確定刪除「",
+          deleteTarget.title,
+          "」?此動作立即生效且不可復原。"
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => setDeleteTarget(null), children: "取消" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              danger: true,
+              onClick: () => {
+                onDeleteConversation == null ? void 0 : onDeleteConversation(deleteTarget.id);
+                setDeleteTarget(null);
+              },
+              children: "刪除"
+            }
+          )
+        ] })
+      ] }) })
+    ] });
+  }
+);
+AgentPanelHeader.displayName = "AgentPanelHeader";
+function AgentRenameDialog({
+  conversation,
+  onOpenChange,
+  onConfirm
+}) {
+  const [value, setValue] = React.useState(conversation.title);
+  const dirty = value !== conversation.title;
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "改名對話" }),
+      " // i18n-allow: DS 預設文案(Dialog「關閉」同前例)"
+    ] }),
+    /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs(Field, { children: [
+      /* @__PURE__ */ jsx(FieldLabel, { children: "名稱" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          value,
+          onChange: (e) => setValue(e.target.value),
+          onFocus: (e) => e.currentTarget.select(),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.currentTarget.blur();
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              setValue(conversation.title);
+            }
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => onOpenChange(false), children: "取消" }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", disabled: !dirty, onClick: () => onConfirm(value), children: "儲存" })
+    ] })
+  ] }) });
+}
+const AgentConversation = React.forwardRef(
+  ({ className, children, ...props }, ref) => (
+    // 捲軸必用 ScrollArea(跨 OS 一致;Dialog body 同法)。
+    /* @__PURE__ */ jsx(ScrollArea, { fillX: true, className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "log",
+        "aria-live": "polite",
+        className: cn(
+          // 輪距 40 = 8 + 24(工具列)+ 8;工具列絕對定位於輪距內,出現不推擠。
+          "flex flex-col gap-10 p-[var(--layout-space-loose)]",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) })
+  )
+);
+AgentConversation.displayName = "AgentConversation";
+const AgentMessage = React.forwardRef(
+  ({ role = "agent", attachments, onAttachmentClick, toolbar, className, children, ...props }, ref) => {
+    const isUser = role === "user";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("group/agent-message relative", isUser && "flex justify-end", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "text-body text-foreground",
+                isUser ? [
+                  "max-w-[85%] rounded-md bg-secondary px-3 py-2",
+                  "animate-in fade-in-0 slide-in-from-bottom-2 duration-[var(--motion-duration-overlay)] motion-reduce:animate-none"
+                ] : "w-full [&_a]:text-primary [&_a:hover]:text-primary-hover [&_a]:underline-offset-2 [&_a:hover]:underline"
+              ),
+              children: [
+                attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-1", children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    variant: "assist",
+                    "aria-label": `附件:${attachment.label}`,
+                    onClick: () => onAttachmentClick == null ? void 0 : onAttachmentClick(attachment),
+                    children: attachment.label
+                  },
+                  attachment.id
+                )) }),
+                children
+              ]
+            }
+          ),
+          toolbar
+        ]
+      }
+    );
+  }
+);
+AgentMessage.displayName = "AgentMessage";
+const AgentThinking = React.forwardRef(
+  ({ thinking = false, steps, currentStep, open, onOpenChange, className, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(thinking);
+    React.useEffect(() => {
+      if (open === void 0) setUncontrolledOpen(thinking);
+    }, [thinking, open]);
+    const resolvedOpen = open ?? uncontrolledOpen;
+    const handleOpenChange = (next) => {
+      setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      CollapsiblePrimitive.Root,
+      {
+        ref,
+        open: resolvedOpen,
+        onOpenChange: handleOpenChange,
+        className: cn("text-body", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            CollapsiblePrimitive.Trigger,
+            {
+              className: cn(
+                "group/agent-thinking flex cursor-pointer items-center gap-1 text-fg-secondary hover:text-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn(thinking && "agent-shimmer"), children: thinking ? "思考中…" : "思考過程" }),
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    size: 16,
+                    "aria-hidden": true,
+                    className: "transition-transform duration-150 motion-reduce:duration-0 group-data-[state=open]/agent-thinking:rotate-180"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CollapsiblePrimitive.Content,
+            {
+              className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
+              children: /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-1 border-l border-divider pl-3 text-fg-muted", children: [
+                steps == null ? void 0 : steps.map((step, index) => /* @__PURE__ */ jsx("div", { children: step }, index)),
+                currentStep != null && /* @__PURE__ */ jsx("div", { className: cn(thinking && "agent-shimmer"), children: currentStep })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AgentThinking.displayName = "AgentThinking";
+const AgentToolbar = React.forwardRef(
+  ({ pinned = false, onCopy, onLike, onDislike, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "absolute left-0 top-full mt-2 flex items-center gap-2",
+        "transition-opacity duration-[var(--motion-duration-overlay)] motion-reduce:transition-none",
+        pinned ? "opacity-100" : "opacity-0 group-hover/agent-message:opacity-100 focus-within:opacity-100",
+        className
+      ),
+      ...props,
+      children: [
+        onCopy && /* @__PURE__ */ jsx(Button, { variant: "text", size: "xs", iconOnly: true, startIcon: Copy, "aria-label": "複製", onClick: onCopy }),
+        onCopy && (onLike || onDislike) && /* @__PURE__ */ jsx(ButtonDivider, {}),
+        onLike && /* @__PURE__ */ jsx(Button, { variant: "text", size: "xs", iconOnly: true, startIcon: ThumbsUp, "aria-label": "讚", onClick: onLike }),
+        onDislike && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "xs",
+            iconOnly: true,
+            startIcon: ThumbsDown,
+            "aria-label": "倒讚",
+            onClick: onDislike
+          }
+        ),
+        children
+      ]
+    }
+  )
+);
+AgentToolbar.displayName = "AgentToolbar";
+const AgentPromptInput = React.forwardRef(
+  ({
+    value,
+    onValueChange,
+    onSubmit,
+    busy = false,
+    onStop,
+    attachments,
+    onRemoveAttachment,
+    onAddAttachment,
+    placeholder = "輸入訊息…",
+    className,
+    ...props
+  }, ref) => {
+    const canSubmit = value.trim().length > 0;
+    const submit = () => {
+      if (busy || !canSubmit) return;
+      onSubmit == null ? void 0 : onSubmit();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "m-[var(--layout-space-loose)] mt-0 shrink-0 rounded-md border border-border bg-surface",
+          "focus-within:border-border-hover transition-colors duration-150",
+          className
+        ),
+        ...props,
+        children: [
+          attachments && attachments.length > 0 && // 附件列:Tag 相互間距 4、距內緣 4(28 高)。
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1 px-1 pt-1", children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+            Tag,
+            {
+              size: "md",
+              onRemove: onRemoveAttachment ? () => onRemoveAttachment(attachment) : void 0,
+              children: attachment.label
+            },
+            attachment.id
+          )) }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value,
+              onChange: (e) => onValueChange(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                  e.preventDefault();
+                  submit();
+                }
+              },
+              rows: 1,
+              placeholder,
+              "aria-label": "訊息",
+              className: cn(
+                // 欄位家族內距:單行 32 等高鐵律((欄高−1lh)/2−1 + --field-px)。
+                "block w-full resize-none bg-transparent outline-none",
+                "px-[var(--field-px)] py-[var(--field-control-py-md)] text-body text-foreground",
+                "placeholder:text-fg-muted",
+                "field-sizing-content max-h-40"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center justify-between px-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: onAddAttachment && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "xs",
+                iconOnly: true,
+                startIcon: Plus,
+                "aria-label": "新增附件",
+                onClick: onAddAttachment
+              }
+            ) }),
+            busy ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                size: "xs",
+                iconOnly: true,
+                startIcon: Square,
+                "aria-label": "停止生成",
+                onClick: onStop,
+                className: "animate-in fade-in-0 duration-[var(--motion-duration-overlay)] [&_svg]:fill-current"
+              }
+            ) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                size: "xs",
+                iconOnly: true,
+                startIcon: ArrowUp,
+                "aria-label": "送出",
+                disabled: !canSubmit,
+                onClick: submit,
+                className: "animate-in fade-in-0 duration-[var(--motion-duration-overlay)]"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+AgentPromptInput.displayName = "AgentPromptInput";
+const OTHER_VALUE = "__agent_decision_other__";
+const AgentDecisionCard = React.forwardRef(
+  ({ title, questions, onSubmit, onSkip, className, ...props }, ref) => {
+    const titleId = React.useId();
+    const [answers, setAnswers] = React.useState(
+      () => Object.fromEntries(
+        questions.filter((q) => q.defaultValue !== void 0).map((q) => [q.id, q.defaultValue])
+      )
+    );
+    const [otherText, setOtherText] = React.useState({});
+    const resolvedAnswers = () => Object.fromEntries(
+      questions.map((q) => {
+        const selected = answers[q.id];
+        if (selected === OTHER_VALUE) return [q.id, otherText[q.id] ?? ""];
+        return [q.id, selected];
+      }).filter(([, v]) => v !== void 0)
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-labelledby": titleId,
+        className: cn(
+          // 繼承 Popover surface:rounded-lg/border/elevation-200;改寫:無下圓角。
+          "absolute inset-x-0 bottom-0 z-10 flex flex-col overflow-hidden",
+          "rounded-t-lg rounded-b-none border border-b-0 border-border bg-surface-raised",
+          "shadow-[var(--elevation-200)]",
+          "animate-in fade-in-0 slide-in-from-bottom-2 duration-[var(--motion-duration-overlay)] motion-reduce:animate-none",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(SurfaceHeader, { className: cn(COMPACT_HEADER_SLOT, "justify-between border-b-0"), children: [
+            /* @__PURE__ */ jsx("span", { id: titleId, className: "truncate text-body font-medium", children: title }),
+            /* @__PURE__ */ jsx(Button, { dismiss: true, size: "sm", startIcon: X, "aria-label": "跳過", onClick: onSkip })
+          ] }),
+          /* @__PURE__ */ jsx(ScrollArea, { fillX: true, className: "min-h-0", children: questions.map((question) => /* @__PURE__ */ jsxs(
+            RadioGroup,
+            {
+              value: answers[question.id] ?? "",
+              onValueChange: (next) => setAnswers((prev) => ({ ...prev, [question.id]: next })),
+              "aria-label": question.label,
+              className: "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",
+              children: [
+                questions.length > 1 && /* @__PURE__ */ jsx("div", { className: "text-body font-medium", children: question.label }),
+                question.options.map((option) => /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    value: option.value,
+                    size: "md",
+                    label: option.label,
+                    description: option.description
+                  },
+                  option.value
+                )),
+                /* @__PURE__ */ jsx(RadioGroupItem, { value: OTHER_VALUE, size: "md", label: "其他" }),
+                answers[question.id] === OTHER_VALUE && // Other 輸入:右/下各 12 對稱。
+                /* @__PURE__ */ jsx("div", { className: "pb-3 pl-6 pr-3", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    autoFocus: true,
+                    value: otherText[question.id] ?? "",
+                    onChange: (e) => setOtherText((prev) => ({ ...prev, [question.id]: e.target.value })),
+                    "aria-label": "其他(自由輸入)"
+                  }
+                ) })
+              ]
+            },
+            question.id
+          )) }),
+          /* @__PURE__ */ jsxs(SurfaceFooter, { className: "border-t-0", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: onSkip, children: "跳過" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                size: "sm",
+                onClick: () => onSubmit == null ? void 0 : onSubmit(resolvedAnswers()),
+                children: "送出"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+AgentDecisionCard.displayName = "AgentDecisionCard";
+const AgentDecisionSummary = React.forwardRef(
+  ({ entries, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col gap-2 rounded-md border border-border px-3 py-2 text-body",
+        className
+      ),
+      ...props,
+      children: entries.map(({ question, answer }, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: question }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: answer })
+      ] }, index))
+    }
+  )
+);
+AgentDecisionSummary.displayName = "AgentDecisionSummary";
+export {
+  AgentConversation,
+  AgentDecisionCard,
+  AgentDecisionSummary,
+  AgentMessage,
+  AgentPanel,
+  AgentPanelHeader,
+  AgentPromptInput,
+  AgentThinking,
+  AgentToolbar
+};
+//# sourceMappingURL=agent-panel.js.map