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

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

@@ -0,0 +1,900 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { X, ChevronDown, Plus, ArrowUp, Copy, ThumbsUp, ThumbsDown, Pencil, Trash2, MessageSquare, createLucideIcon } 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, CommandSeparator, CommandGroup, CommandItem } from "../Command/command.js";
+import { MenuItem } from "../Menu/menu-item.js";
+import { ItemSuffix, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
+import { ResizeHandle } from "../../patterns/resize-handle/resize-handle.js";
+import "../../patterns/horizontal-overflow/horizontal-overflow.js";
+import { OverflowIndicator } from "../OverflowIndicator/overflow-indicator.js";
+import { CircularProgress } from "../CircularProgress/circular-progress.js";
+import { RadioGroup, RadioGroupItem } from "../RadioGroup/radio-group.js";
+import { Checkbox } from "../Checkbox/checkbox.js";
+import { CheckboxGroup } from "../Checkbox/checkbox-group.js";
+import { Chip } from "../Chip/chip.js";
+import { Tag } from "../Tag/tag.js";
+import { Input } from "../Input/input.js";
+import { Empty } from "../Empty/empty.js";
+import { Field, FieldLabel, FieldError } 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 */
+import { useOverflowIndices } from "../../hooks/use-overflow-items.js";
+const StopFilled = createLucideIcon("StopFilled", [
+  ["rect", { x: "6", y: "6", width: "12", height: "12", rx: "1.5", fill: "currentColor", stroke: "none", key: "stop" }]
+]);
+const PANEL_WIDTH_DEFAULT = 400;
+const PANEL_WIDTH_MIN = 360;
+const PANEL_WIDTH_MAX = 640;
+const PANEL_RESIZE_KEY_STEP = 16;
+function clampPanelWidth(width) {
+  const viewportCap = typeof window === "undefined" ? PANEL_WIDTH_MAX : Math.floor(window.innerWidth / 2);
+  return Math.min(Math.max(width, PANEL_WIDTH_MIN), Math.min(PANEL_WIDTH_MAX, Math.max(viewportCap, PANEL_WIDTH_MIN)));
+}
+const AgentPanel = React.forwardRef(
+  ({
+    open = true,
+    width,
+    defaultWidth = PANEL_WIDTH_DEFAULT,
+    onWidthChange,
+    resizable = true,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const [uncontrolledWidth, setUncontrolledWidth] = React.useState(() => clampPanelWidth(defaultWidth));
+    const resolvedWidth = clampPanelWidth(width ?? uncontrolledWidth);
+    const dragRef = React.useRef(null);
+    const [dragging, setDragging] = React.useState(false);
+    const applyWidth = React.useCallback(
+      (next, commit) => {
+        const clamped = clampPanelWidth(next);
+        if (width === void 0) setUncontrolledWidth(clamped);
+        if (commit) onWidthChange == null ? void 0 : onWidthChange(clamped);
+      },
+      [width, onWidthChange]
+    );
+    const onHandlePointerDown = (e) => {
+      e.preventDefault();
+      dragRef.current = { startX: e.clientX, startWidth: resolvedWidth };
+      setDragging(true);
+      const onMove = (ev) => {
+        const drag = dragRef.current;
+        if (!drag) return;
+        applyWidth(drag.startWidth + (drag.startX - ev.clientX), false);
+      };
+      const onUp = (ev) => {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        setDragging(false);
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        if (drag) applyWidth(drag.startWidth + (drag.startX - ev.clientX), true);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    };
+    if (!open) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "complementary",
+        "aria-label": "智慧代理",
+        className: cn(
+          "relative flex h-full min-h-0 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
+        ),
+        style: { width: resolvedWidth, ...style },
+        ...props,
+        children: [
+          resizable && // 視覺/滑鼠=ResizeHandle(固定 aria-hidden);鍵盤等價=WAI-ARIA window-splitter(DataTable 欄寬同慣例)。
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": "調整面板寬度",
+              "aria-valuenow": resolvedWidth,
+              "aria-valuemin": PANEL_WIDTH_MIN,
+              "aria-valuemax": PANEL_WIDTH_MAX,
+              "aria-valuetext": `${resolvedWidth}px`,
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                let next = null;
+                if (e.key === "ArrowLeft") next = resolvedWidth + PANEL_RESIZE_KEY_STEP;
+                else if (e.key === "ArrowRight") next = resolvedWidth - PANEL_RESIZE_KEY_STEP;
+                else if (e.key === "Home") next = PANEL_WIDTH_MIN;
+                else if (e.key === "End") next = PANEL_WIDTH_MAX;
+                if (next == null) return;
+                e.preventDefault();
+                applyWidth(next, true);
+              },
+              className: "absolute inset-y-0 left-0 z-10 w-0 focus-visible:outline-none",
+              children: /* @__PURE__ */ jsx(
+                ResizeHandle,
+                {
+                  direction: "horizontal",
+                  position: "start",
+                  isResizing: dragging,
+                  onPointerDown: onHandlePointerDown
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+AgentPanel.displayName = "AgentPanel";
+function HistoryRow({
+  conversation,
+  selected,
+  onSelect,
+  onRename,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      value: conversation.id,
+      keywords: [conversation.title],
+      onSelect,
+      className: cn(
+        "group/menu-item p-0 rounded-none",
+        // 選中 × 鍵盤游標疊加(select-menu.tsx 2026-08-11 拍板:滑鼠釘住、鍵盤反白深一階)。
+        selected && "bg-neutral-selected data-[selected=true]:bg-neutral-selected data-[selected=true]:not-hover:bg-neutral-selected-focus"
+      ),
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          role: "presentation",
+          selected,
+          className: "!bg-transparent hover:!bg-transparent",
+          startContent: conversation.thinking ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, "aria-label": "回覆中" }) : /* @__PURE__ */ jsx(MessageSquare, { size: 16, "aria-hidden": true, className: "text-fg-muted" }),
+          endContent: (
+            // 行內動作恆在 DOM(鍵盤 Tab 可達);懸停/focus-visible 淡入=ItemSuffix hoverReveal SSOT。
+            /* @__PURE__ */ jsxs(ItemSuffix, { hoverReveal: true, hoverGroup: "menu-item", children: [
+              /* @__PURE__ */ jsx(
+                ItemInlineAction,
+                {
+                  action: {
+                    icon: Pencil,
+                    label: "改名",
+                    // i18n-allow: DS 預設文案(Dialog「關閉」同前例)
+                    onClick: (e) => {
+                      e == null ? void 0 : e.stopPropagation();
+                      onRename();
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ItemInlineAction,
+                {
+                  action: {
+                    icon: Trash2,
+                    label: "刪除",
+                    // i18n-allow: DS 預設文案(Dialog「關閉」同前例)
+                    onClick: (e) => {
+                      e == null ? void 0 : e.stopPropagation();
+                      onDelete();
+                    }
+                  }
+                }
+              )
+            ] })
+          ),
+          children: conversation.title
+        }
+      )
+    }
+  );
+}
+const AgentPanelHeader = React.forwardRef(
+  ({
+    title,
+    logoState = "still",
+    historySearchPlaceholder = "搜尋對話",
+    // i18n-allow: DS 預設文案,prop 可覆寫
+    historyEmptyText = "沒有符合的對話",
+    // i18n-allow: DS 預設文案,prop 可覆寫
+    conversations = [],
+    activeConversationId,
+    conversationEmpty = false,
+    defaultHistoryOpen = false,
+    onSelectConversation,
+    onRenameConversation,
+    onDeleteConversation,
+    onNewConversation,
+    onClose,
+    className,
+    ...props
+  }, ref) => {
+    const [historyOpen, setHistoryOpen] = React.useState(defaultHistoryOpen);
+    const [renameTarget, setRenameTarget] = React.useState(null);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const triggerRef = React.useRef(null);
+    const returnFocus = () => {
+      var _a;
+      return (_a = triggerRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+    };
+    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__ */ jsxs(Popover, { open: historyOpen, onOpenChange: setHistoryOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: triggerRef,
+              variant: "text",
+              size: "sm",
+              endIcon: ChevronDown,
+              "aria-haspopup": "dialog",
+              "aria-expanded": historyOpen,
+              className: "min-w-0 max-w-full px-1 text-body-lg font-medium",
+              children: /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              align: "start",
+              "aria-label": "歷史對話",
+              className: "w-auto min-w-60 overflow-hidden p-0",
+              children: /* @__PURE__ */ jsxs(Command, { label: "歷史對話", className: "[&_[cmdk-input-wrapper]]:py-1", children: [
+                /* @__PURE__ */ jsx(
+                  CommandInput,
+                  {
+                    placeholder: historySearchPlaceholder,
+                    "aria-label": historySearchPlaceholder,
+                    className: "h-8 py-0"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(CommandList, { "aria-label": "對話", children: [
+                  /* @__PURE__ */ jsx(CommandEmpty, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Empty, { description: historyEmptyText, className: "py-6" }) }),
+                  groups.map(({ label, items }, gi) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                    gi > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
+                    /* @__PURE__ */ jsx(
+                      CommandGroup,
+                      {
+                        className: "p-0 py-2 [&_[cmdk-group-heading]]:p-0",
+                        heading: label ? /* @__PURE__ */ jsx(MenuItem, { header: true, children: label }) : void 0,
+                        children: items.map((conversation) => /* @__PURE__ */ jsx(
+                          HistoryRow,
+                          {
+                            conversation,
+                            selected: conversation.id === activeConversationId,
+                            onSelect: () => {
+                              onSelectConversation == null ? void 0 : onSelectConversation(conversation.id);
+                              setHistoryOpen(false);
+                            },
+                            onRename: () => setRenameTarget(conversation),
+                            onDelete: () => setDeleteTarget(conversation)
+                          },
+                          conversation.id
+                        ))
+                      }
+                    )
+                  ] }, label || "(ungrouped)"))
+                ] })
+              ] })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "sm",
+            iconOnly: true,
+            startIcon: Plus,
+            "aria-label": "新對話",
+            disabled: conversationEmpty,
+            onClick: 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) => {
+            if (!next) {
+              setRenameTarget(null);
+              returnFocus();
+            }
+          },
+          onConfirm: (nextTitle) => {
+            onRenameConversation == null ? void 0 : onRenameConversation(renameTarget.id, nextTitle);
+            setRenameTarget(null);
+            returnFocus();
+          }
+        }
+      ),
+      deleteTarget && /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          open: true,
+          onOpenChange: (next) => {
+            if (!next) {
+              setDeleteTarget(null);
+              returnFocus();
+            }
+          },
+          children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+            /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "刪除對話" }) }),
+            /* @__PURE__ */ jsxs(DialogBody, { children: [
+              "確定刪除「",
+              deleteTarget.title,
+              "」?此動作立即生效且不可復原。"
+            ] }),
+            /* @__PURE__ */ jsxs(DialogFooter, { children: [
+              /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => {
+                setDeleteTarget(null);
+                returnFocus();
+              }, children: "取消" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  danger: true,
+                  onClick: () => {
+                    onDeleteConversation == null ? void 0 : onDeleteConversation(deleteTarget.id);
+                    setDeleteTarget(null);
+                    returnFocus();
+                  },
+                  children: "刪除"
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+AgentPanelHeader.displayName = "AgentPanelHeader";
+function AgentRenameDialog({
+  conversation,
+  onOpenChange,
+  onConfirm
+}) {
+  const [value, setValue] = React.useState(conversation.title);
+  const [touched, setTouched] = React.useState(false);
+  const trimmed = value.trim();
+  const dirty = trimmed !== conversation.title;
+  const empty = trimmed.length === 0;
+  const showError = touched && empty;
+  const commit = () => {
+    setTouched(true);
+    if (empty || !dirty) return;
+    onConfirm(trimmed);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "改名對話" }) }),
+    /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs(Field, { required: true, invalid: showError, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { children: "名稱" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value,
+          error: showError,
+          onChange: (e) => setValue(e.target.value),
+          onFocus: (e) => e.currentTarget.select(),
+          onBlur: () => setTouched(true),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commit();
+            }
+          }
+        }
+      ),
+      showError && /* @__PURE__ */ jsx(FieldError, { children: "名稱不可空白" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => onOpenChange(false), children: "取消" }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", disabled: !dirty, onClick: commit, 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 && // chip 相互垂直/水平 4(=Combobox 內 Tag 區間距;2026-09-02 拍板)。
+                /* @__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: "shrink-0 text-fg-muted transition-transform duration-[var(--motion-duration-overlay)] 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-secondary", 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: [
+        /* @__PURE__ */ jsx(Button, { variant: "text", size: "xs", iconOnly: true, startIcon: Copy, "aria-label": "複製", onClick: () => onCopy == null ? void 0 : onCopy() }),
+        /* @__PURE__ */ jsx(ButtonDivider, {}),
+        /* @__PURE__ */ jsx(Button, { variant: "text", size: "xs", iconOnly: true, startIcon: ThumbsUp, "aria-label": "讚", onClick: () => onLike == null ? void 0 : onLike() }),
+        /* @__PURE__ */ jsx(Button, { variant: "text", size: "xs", iconOnly: true, startIcon: ThumbsDown, "aria-label": "倒讚", onClick: () => onDislike == null ? void 0 : onDislike() }),
+        children
+      ]
+    }
+  )
+);
+AgentToolbar.displayName = "AgentToolbar";
+function PromptAttachmentRow({
+  attachments,
+  onRemove
+}) {
+  const { containerRef, registerItem, overflowIndices } = useOverflowIndices({
+    reserveTriggerWidth: 48
+  });
+  const hidden = new Set(overflowIndices);
+  const hiddenItems = attachments.filter((_, i) => hidden.has(i));
+  return (
+    // 附件列 28:Tag 相互間距 4、距內緣 4;單列不換行,溢出以 +N 收納。
+    // 被藏的 Tag 留在 flow 內、排到 +N 之後(order-last)並隱形:useOverflowIndices 每次重量都拿得到
+    // 真實位置(抽離 flow 會在放寬時被誤判「可見」而失去 +N,2026-09-02 實測)。
+    /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex items-center gap-1 overflow-hidden px-1 pt-1", children: [
+      attachments.map((attachment, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: registerItem(index),
+          className: cn("shrink-0", hidden.has(index) && "invisible order-last"),
+          children: /* @__PURE__ */ jsx(Tag, { size: "md", onRemove: () => onRemove(attachment), children: attachment.label })
+        },
+        attachment.id
+      )),
+      hiddenItems.length > 0 && /* @__PURE__ */ jsx(OverflowIndicator, { count: hiddenItems.length, shape: "tag", size: "md", children: hiddenItems.map((attachment) => /* @__PURE__ */ jsx(Tag, { size: "md", onRemove: () => onRemove(attachment), children: attachment.label }, attachment.id)) })
+    ] })
+  );
+}
+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();
+    };
+    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-[var(--motion-duration-overlay)]",
+          className
+        ),
+        ...props,
+        children: [
+          attachments.length > 0 && /* @__PURE__ */ jsx(PromptAttachmentRow, { attachments, onRemove: onRemoveAttachment }),
+          /* @__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(
+              Button,
+              {
+                variant: "text",
+                size: "xs",
+                iconOnly: true,
+                startIcon: Plus,
+                "aria-label": "新增附件",
+                onClick: onAddAttachment
+              }
+            ),
+            busy ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                size: "xs",
+                iconOnly: true,
+                startIcon: StopFilled,
+                "aria-label": "停止生成",
+                onClick: () => onStop == null ? void 0 : onStop(),
+                className: "animate-in fade-in-0 duration-[var(--motion-duration-overlay)]"
+              }
+            ) : /* @__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 OTHER_LABEL = "其他";
+const RECOMMENDED_SUFFIX = "(建議)";
+const MULTI_JOIN = "\n";
+function initialAnswer(q) {
+  var _a;
+  if (q.multiSelect || q.noDefault) return "";
+  return q.defaultValue ?? ((_a = q.options[0]) == null ? void 0 : _a.value) ?? "";
+}
+const splitMulti = (v) => v ? v.split(MULTI_JOIN).filter(Boolean) : [];
+const AgentDecisionCard = React.forwardRef(
+  ({ questions, onSubmit, onSkip, className, ...props }, ref) => {
+    var _a;
+    const titleId = React.useId();
+    const otherInputId = React.useId();
+    const [step, setStep] = React.useState(0);
+    const [answers, setAnswers] = React.useState(
+      () => Object.fromEntries(questions.map((q) => [q.id, initialAnswer(q)]))
+    );
+    const [otherText, setOtherText] = React.useState({});
+    const resolveOne = (q) => {
+      const other = (otherText[q.id] ?? "").trim();
+      if (q.multiSelect) {
+        return splitMulti(answers[q.id]).map((v) => v === OTHER_VALUE ? other : v).filter(Boolean).join(MULTI_JOIN);
+      }
+      return answers[q.id] === OTHER_VALUE ? other : answers[q.id] ?? "";
+    };
+    const resolvedAnswers = () => Object.fromEntries(questions.map((q) => [q.id, resolveOne(q)]));
+    const total = questions.length;
+    const question = questions[Math.min(step, total - 1)];
+    const isLast = step >= total - 1;
+    const select = (value) => setAnswers((prev) => ({ ...prev, [question.id]: value }));
+    const toggle = (value, checked) => setAnswers((prev) => {
+      const set = new Set(splitMulti(prev[question.id]));
+      if (checked) set.add(value);
+      else set.delete(value);
+      return { ...prev, [question.id]: [...set].join(MULTI_JOIN) };
+    });
+    const skip = () => onSkip == null ? void 0 : onSkip(resolvedAnswers());
+    if (!question) return null;
+    const multi = Boolean(question.multiSelect);
+    const selectedSet = new Set(multi ? splitMulti(answers[question.id]) : [answers[question.id]]);
+    const otherSelected = selectedSet.has(OTHER_VALUE);
+    const canAdvance = (!otherSelected || (otherText[question.id] ?? "").trim() !== "") && (!multi || selectedSet.size > 0);
+    const recommendedValue = !multi && !question.noDefault ? question.defaultValue ?? ((_a = question.options[0]) == null ? void 0 : _a.value) : void 0;
+    const optionLabel = (option) => option.value === recommendedValue ? `${option.label}${RECOMMENDED_SUFFIX}` : option.label;
+    const allOptions = [...question.options, { value: OTHER_VALUE, label: OTHER_LABEL }];
+    const renderOtherInput = () => (
+      // 「其他」卡:常駐 32 高輸入格;距卡右/下各 12(卡 px 12;卡 py 8 + mb 4)。
+      /* @__PURE__ */ jsx("div", { className: "mb-1 mt-1.5 pl-6", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: otherInputId,
+          value: otherText[question.id] ?? "",
+          placeholder: "輸入其他選項",
+          "aria-label": "其他(自由輸入)",
+          onFocus: () => multi ? toggle(OTHER_VALUE, true) : select(OTHER_VALUE),
+          onChange: (e) => setOtherText((prev) => ({ ...prev, [question.id]: e.target.value })),
+          onClick: (e) => e.stopPropagation()
+        }
+      ) })
+    );
+    const cardClass = "cursor-pointer rounded-md bg-secondary px-3 py-2";
+    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, "items-start justify-between border-b-0"), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+              total > 1 && /* @__PURE__ */ jsxs("span", { className: "text-caption font-medium text-fg-secondary", children: [
+                step + 1,
+                " / ",
+                total
+              ] }),
+              /* @__PURE__ */ jsx("span", { id: titleId, className: "text-body font-medium text-foreground", children: question.label })
+            ] }),
+            /* @__PURE__ */ jsx(Button, { dismiss: true, size: "sm", startIcon: X, "aria-label": "跳過", onClick: skip })
+          ] }),
+          /* @__PURE__ */ jsx(ScrollArea, { fillX: true, className: "min-h-0", children: multi ? /* @__PURE__ */ jsx(
+            CheckboxGroup,
+            {
+              "aria-labelledby": titleId,
+              className: "flex flex-col gap-2 px-[var(--layout-space-loose)]",
+              children: allOptions.map((option) => {
+                const isOther = option.value === OTHER_VALUE;
+                const checked = selectedSet.has(option.value);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-state": checked ? "checked" : "unchecked",
+                    className: cardClass,
+                    onClick: () => toggle(option.value, !checked),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          size: "md",
+                          checked,
+                          onCheckedChange: (next) => toggle(option.value, next === true),
+                          onClick: (e) => e.stopPropagation(),
+                          label: optionLabel(option),
+                          description: isOther ? void 0 : option.description
+                        }
+                      ),
+                      isOther && renderOtherInput()
+                    ]
+                  },
+                  option.value
+                );
+              })
+            },
+            question.id
+          ) : /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              value: answers[question.id] ?? "",
+              onValueChange: select,
+              "aria-labelledby": titleId,
+              className: "flex flex-col gap-2 px-[var(--layout-space-loose)]",
+              children: allOptions.map((option) => {
+                const isOther = option.value === OTHER_VALUE;
+                const checked = selectedSet.has(option.value);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-state": checked ? "checked" : "unchecked",
+                    className: cardClass,
+                    onClick: () => select(option.value),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        RadioGroupItem,
+                        {
+                          value: option.value,
+                          size: "md",
+                          label: optionLabel(option),
+                          description: isOther ? void 0 : option.description
+                        }
+                      ),
+                      isOther && renderOtherInput()
+                    ]
+                  },
+                  option.value
+                );
+              })
+            },
+            question.id
+          ) }),
+          /* @__PURE__ */ jsxs(SurfaceFooter, { className: "border-t-0", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: skip, children: "跳過" }),
+            isLast ? /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", disabled: !canAdvance, onClick: () => onSubmit == null ? void 0 : onSubmit(resolvedAnswers()), children: "送出" }) : /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", disabled: !canAdvance, onClick: () => setStep((s) => s + 1), 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 {
+  PANEL_WIDTH_DEFAULT as AGENT_PANEL_WIDTH_DEFAULT,
+  PANEL_WIDTH_MAX as AGENT_PANEL_WIDTH_MAX,
+  PANEL_WIDTH_MIN as AGENT_PANEL_WIDTH_MIN,
+  AgentConversation,
+  AgentDecisionCard,
+  AgentDecisionSummary,
+  AgentMessage,
+  AgentPanel,
+  AgentPanelHeader,
+  AgentPromptInput,
+  AgentThinking,
+  AgentToolbar
+};
+//# sourceMappingURL=agent-panel.js.map