@nextclaw/agent-chat-ui 0.1.1

package/dist/index.js

@@ -0,0 +1,1194 @@
+// src/components/chat/ui/chat-input-bar/chat-input-bar-textarea.tsx
+import { jsx } from "react/jsx-runtime";
+function ChatInputBarTextarea(props) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      value: props.value,
+      onChange: (event) => props.onValueChange(event.target.value),
+      disabled: props.disabled,
+      onKeyDown: props.onKeyDown,
+      placeholder: props.placeholder,
+      className: "w-full min-h-[68px] max-h-[220px] resize-y bg-transparent px-4 py-3 text-sm text-gray-800 outline-none placeholder:text-gray-400"
+    }
+  );
+}
+
+// src/components/chat/ui/chat-input-bar/chat-input-bar-selected-items.tsx
+import { X } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ChatInputBarSelectedItems(props) {
+  if (props.items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-2", children: props.items.map((item) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => props.onRemove(item.key),
+      className: "inline-flex max-w-[200px] items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary",
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "truncate", children: item.label }),
+        /* @__PURE__ */ jsx2(X, { className: "h-3 w-3 shrink-0" })
+      ]
+    },
+    item.key
+  )) }) });
+}
+
+// src/components/chat/ui/chat-input-bar/chat-slash-menu.tsx
+import { useMemo, useRef as useRef2 } from "react";
+
+// src/components/chat/hooks/use-active-item-scroll.ts
+import { useEffect } from "react";
+var defaultGetItemSelector = (index) => `[data-item-index="${index}"]`;
+function useActiveItemScroll(params) {
+  const getItemSelector = params.getItemSelector ?? defaultGetItemSelector;
+  useEffect(() => {
+    if (!params.isEnabled || params.itemCount === 0) {
+      return;
+    }
+    const container = params.containerRef.current;
+    if (!container) {
+      return;
+    }
+    const activeItem = container.querySelector(getItemSelector(params.activeIndex));
+    activeItem?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [getItemSelector, params.activeIndex, params.containerRef, params.isEnabled, params.itemCount]);
+}
+
+// src/components/chat/hooks/use-element-width.ts
+import { useEffect as useEffect2, useRef, useState } from "react";
+function useElementWidth() {
+  const elementRef = useRef(null);
+  const [width, setWidth] = useState(null);
+  useEffect2(() => {
+    const element = elementRef.current;
+    if (!element || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const updateWidth = () => {
+      setWidth(element.getBoundingClientRect().width);
+    };
+    updateWidth();
+    const observer = new ResizeObserver(() => updateWidth());
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return {
+    elementRef,
+    width
+  };
+}
+
+// src/components/chat/default-skin/input.tsx
+import * as React from "react";
+
+// src/components/chat/internal/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/chat/default-skin/input.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChatInput = React.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "input",
+  {
+    type,
+    className: cn(
+      "flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm text-gray-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+ChatInput.displayName = "ChatInput";
+
+// src/components/chat/default-skin/popover.tsx
+import * as React2 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChatPopover = PopoverPrimitive.Root;
+var ChatPopoverTrigger = PopoverPrimitive.Trigger;
+var ChatPopoverAnchor = PopoverPrimitive.Anchor;
+var ChatPopoverContent = React2.forwardRef(({ className, sideOffset = 8, align = "start", ...props }, ref) => /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    align,
+    className: cn(
+      "z-[var(--z-popover,50)] w-72 overflow-hidden rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+ChatPopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/chat/default-skin/select.tsx
+import * as React3 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatSelect = SelectPrimitive.Root;
+var ChatSelectValue = SelectPrimitive.Value;
+var ChatSelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-gray-200/80 bg-white px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+ChatSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var ChatSelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.ScrollUpButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx5(ChevronUp, { className: "h-4 w-4" }) }));
+ChatSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var ChatSelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.ScrollDownButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4" }) }));
+ChatSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var ChatSelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx5(ChatSelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx5(
+        SelectPrimitive.Viewport,
+        {
+          className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx5(ChatSelectScrollDownButton, {})
+    ]
+  }
+) }));
+ChatSelectContent.displayName = SelectPrimitive.Content.displayName;
+var ChatSelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx5("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+ChatSelectItem.displayName = SelectPrimitive.Item.displayName;
+
+// src/components/chat/default-skin/tooltip.tsx
+import * as React4 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ChatTooltipProvider = TooltipPrimitive.Provider;
+var ChatTooltip = TooltipPrimitive.Root;
+var ChatTooltipTrigger = TooltipPrimitive.Trigger;
+var ChatTooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-[var(--z-tooltip)] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+ChatTooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/chat/ui/primitives/chat-ui-primitives.tsx
+var ChatUiPrimitives = {
+  Popover: ChatPopover,
+  PopoverAnchor: ChatPopoverAnchor,
+  PopoverContent: ChatPopoverContent,
+  PopoverTrigger: ChatPopoverTrigger,
+  Input: ChatInput,
+  Select: ChatSelect,
+  SelectContent: ChatSelectContent,
+  SelectItem: ChatSelectItem,
+  SelectTrigger: ChatSelectTrigger,
+  SelectValue: ChatSelectValue,
+  Tooltip: ChatTooltip,
+  TooltipContent: ChatTooltipContent,
+  TooltipProvider: ChatTooltipProvider,
+  TooltipTrigger: ChatTooltipTrigger
+};
+
+// src/components/chat/ui/chat-input-bar/chat-slash-menu.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var SLASH_PANEL_MAX_WIDTH = 680;
+var SLASH_PANEL_DESKTOP_SHRINK_RATIO = 0.82;
+var SLASH_PANEL_DESKTOP_MIN_WIDTH = 560;
+function ChatSlashMenu(props) {
+  const { Popover, PopoverAnchor, PopoverContent } = ChatUiPrimitives;
+  const { elementRef: anchorRef, width: panelWidth } = useElementWidth();
+  const listRef = useRef2(null);
+  const {
+    isOpen,
+    isLoading,
+    items,
+    activeIndex,
+    activeItem,
+    texts,
+    onSelectItem,
+    onOpenChange,
+    onSetActiveIndex
+  } = props;
+  const resolvedWidth = useMemo(() => {
+    if (!panelWidth) {
+      return void 0;
+    }
+    return Math.min(
+      panelWidth > SLASH_PANEL_DESKTOP_MIN_WIDTH ? panelWidth * SLASH_PANEL_DESKTOP_SHRINK_RATIO : panelWidth,
+      SLASH_PANEL_MAX_WIDTH
+    );
+  }, [panelWidth]);
+  useActiveItemScroll({
+    containerRef: listRef,
+    activeIndex,
+    itemCount: items.length,
+    isEnabled: isOpen && !isLoading,
+    getItemSelector: (index) => `[data-slash-index="${index}"]`
+  });
+  return /* @__PURE__ */ jsxs3(Popover, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx7(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx7("div", { ref: anchorRef, className: "pointer-events-none absolute bottom-full left-3 right-3 h-0" }) }),
+    /* @__PURE__ */ jsx7(
+      PopoverContent,
+      {
+        side: "top",
+        align: "start",
+        sideOffset: 10,
+        className: "z-[70] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-2xl border border-gray-200 bg-white/95 p-0 shadow-2xl backdrop-blur-md",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        style: resolvedWidth ? { width: `${resolvedWidth}px` } : void 0,
+        children: /* @__PURE__ */ jsxs3("div", { className: "grid min-h-[240px] grid-cols-[minmax(220px,300px)_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsx7(
+            "div",
+            {
+              ref: listRef,
+              role: "listbox",
+              "aria-label": texts.slashSectionLabel,
+              className: "custom-scrollbar max-h-[320px] overflow-y-auto border-r border-gray-200 p-2.5",
+              children: isLoading ? /* @__PURE__ */ jsx7("div", { className: "p-2 text-xs text-gray-500", children: texts.slashLoadingLabel }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                /* @__PURE__ */ jsx7("div", { className: "mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500", children: texts.slashSectionLabel }),
+                items.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "px-2 text-xs text-gray-400", children: texts.slashEmptyLabel }) : /* @__PURE__ */ jsx7("div", { className: "space-y-1", children: items.map((item, index) => {
+                  const isActive = index === activeIndex;
+                  return /* @__PURE__ */ jsxs3(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": isActive,
+                      "data-slash-index": index,
+                      onMouseEnter: () => onSetActiveIndex(index),
+                      onClick: () => onSelectItem(item),
+                      className: `flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"}`,
+                      children: [
+                        /* @__PURE__ */ jsx7("span", { className: "truncate text-xs font-semibold", children: item.title }),
+                        /* @__PURE__ */ jsx7("span", { className: "truncate text-xs text-gray-500", children: item.subtitle })
+                      ]
+                    },
+                    item.key
+                  );
+                }) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx7("div", { className: "max-w-[320px] p-3.5", children: activeItem ? /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx7("span", { className: "inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary", children: activeItem.subtitle }),
+              /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold text-gray-900", children: activeItem.title })
+            ] }),
+            /* @__PURE__ */ jsx7("p", { className: "text-xs leading-5 text-gray-600", children: activeItem.description }),
+            /* @__PURE__ */ jsx7("div", { className: "space-y-1", children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx7("div", { className: "rounded-md bg-gray-50 px-2 py-1 text-[11px] text-gray-600", children: line }, line)) }),
+            /* @__PURE__ */ jsx7("div", { className: "pt-1 text-[11px] text-gray-500", children: texts.slashSkillHintLabel })
+          ] }) : /* @__PURE__ */ jsx7("div", { className: "text-xs text-gray-500", children: texts.slashHintLabel }) })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/chat/ui/chat-input-bar/chat-input-bar-toolbar.tsx
+import { Brain, Paperclip, Sparkles } from "lucide-react";
+
+// src/components/chat/default-skin/button.tsx
+import * as React5 from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-gray-200 bg-white hover:bg-gray-50 hover:text-gray-800 text-gray-600",
+        secondary: "bg-gray-100 text-gray-700 hover:bg-gray-200/80",
+        ghost: "hover:bg-gray-100/80 hover:text-gray-800",
+        link: "text-primary underline-offset-4 hover:underline",
+        primary: "bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm",
+        subtle: "bg-gray-100 text-gray-600 hover:bg-gray-200/80",
+        "primary-outline": "border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-11 px-5 text-[14px]",
+        xl: "h-12 px-6 text-[15px]",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var ChatButton = React5.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx8("button", { className: cn(buttonVariants({ variant, size, className })), ref, ...props })
+);
+ChatButton.displayName = "ChatButton";
+
+// src/components/chat/ui/chat-input-bar/chat-input-bar-actions.tsx
+import { ArrowUp, Square } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChatInputBarActions(props) {
+  const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-end gap-1", children: [
+    props.sendError?.trim() ? /* @__PURE__ */ jsx9("div", { className: "max-w-[420px] text-right text-[11px] text-red-600", children: props.sendError }) : null,
+    /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2", children: props.isSending ? props.canStopGeneration ? /* @__PURE__ */ jsx9(
+      ChatButton,
+      {
+        size: "icon",
+        variant: "outline",
+        className: "h-8 w-8 rounded-full",
+        "aria-label": props.stopButtonLabel,
+        onClick: () => void props.onStop(),
+        disabled: props.stopDisabled,
+        children: /* @__PURE__ */ jsx9(Square, { className: "h-3 w-3 fill-current" })
+      }
+    ) : /* @__PURE__ */ jsx9(TooltipProvider, { children: /* @__PURE__ */ jsxs4(Tooltip, { children: [
+      /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(
+        ChatButton,
+        {
+          size: "icon",
+          variant: "outline",
+          className: "h-8 w-8 rounded-full",
+          "aria-label": props.stopButtonLabel,
+          disabled: true,
+          children: /* @__PURE__ */ jsx9(Square, { className: "h-3 w-3 fill-current" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx9(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx9("p", { className: "text-xs", children: props.stopHint }) })
+    ] }) }) : /* @__PURE__ */ jsx9(
+      ChatButton,
+      {
+        size: "icon",
+        className: "h-8 w-8 rounded-full",
+        "aria-label": props.sendButtonLabel,
+        onClick: () => void props.onSend(),
+        disabled: props.sendDisabled,
+        children: /* @__PURE__ */ jsx9(ArrowUp, { className: "h-5 w-5" })
+      }
+    ) })
+  ] });
+}
+
+// src/components/chat/ui/chat-input-bar/chat-input-bar-skill-picker.tsx
+import { useEffect as useEffect3, useId, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
+import { BrainCircuit, Check as Check2, ExternalLink, Puzzle, Search } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function filterOptions(options, query) {
+  const keyword = query.trim().toLowerCase();
+  if (!keyword) {
+    return options;
+  }
+  return options.filter((option) => {
+    const haystack = [option.label, option.key, option.description].filter((value) => typeof value === "string" && value.trim().length > 0).join(" ").toLowerCase();
+    return haystack.includes(keyword);
+  });
+}
+function ChatInputBarSkillPicker(props) {
+  const { Input, Popover, PopoverContent, PopoverTrigger } = ChatUiPrimitives;
+  const { picker } = props;
+  const listRef = useRef3(null);
+  const listId = useId();
+  const [query, setQuery] = useState2("");
+  const [activeIndex, setActiveIndex] = useState2(0);
+  const selectedSet = useMemo2(() => new Set(picker.selectedKeys), [picker.selectedKeys]);
+  const selectedCount = picker.selectedKeys.length;
+  const filteredOptions = useMemo2(() => filterOptions(picker.options, query), [picker.options, query]);
+  useEffect3(() => {
+    setActiveIndex(0);
+  }, [query]);
+  useEffect3(() => {
+    setActiveIndex((current) => {
+      if (filteredOptions.length === 0) {
+        return 0;
+      }
+      return Math.min(current, filteredOptions.length - 1);
+    });
+  }, [filteredOptions.length]);
+  useActiveItemScroll({
+    containerRef: listRef,
+    activeIndex,
+    itemCount: filteredOptions.length,
+    isEnabled: filteredOptions.length > 0,
+    getItemSelector: (index) => `[data-skill-index="${index}"]`
+  });
+  const onToggleOption = (optionKey) => {
+    if (selectedSet.has(optionKey)) {
+      picker.onSelectedKeysChange(picker.selectedKeys.filter((item) => item !== optionKey));
+      return;
+    }
+    picker.onSelectedKeysChange([...picker.selectedKeys, optionKey]);
+  };
+  const onSearchKeyDown = (event) => {
+    if (filteredOptions.length === 0) {
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((current) => Math.min(current + 1, filteredOptions.length - 1));
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((current) => Math.max(current - 1, 0));
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const activeOption = filteredOptions[activeIndex];
+      if (activeOption) {
+        onToggleOption(activeOption.key);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs5(Popover, { children: [
+    /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "listbox",
+        className: "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900",
+        children: [
+          /* @__PURE__ */ jsx10(BrainCircuit, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx10("span", { children: picker.title }),
+          selectedCount > 0 ? /* @__PURE__ */ jsx10("span", { className: "ml-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary", children: selectedCount }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs5(PopoverContent, { side: "top", align: "start", className: "w-[360px] p-0", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "space-y-2 border-b border-gray-100 px-4 py-3", children: [
+        /* @__PURE__ */ jsx10("div", { className: "text-sm font-semibold text-gray-900", children: picker.title }),
+        /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx10(Search, { className: "pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" }),
+          /* @__PURE__ */ jsx10(
+            Input,
+            {
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              onKeyDown: onSearchKeyDown,
+              placeholder: picker.searchPlaceholder,
+              role: "combobox",
+              "aria-controls": listId,
+              "aria-expanded": "true",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": filteredOptions[activeIndex] ? `${listId}-option-${activeIndex}` : void 0,
+              className: "h-8 rounded-lg pl-8 text-xs"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          ref: listRef,
+          id: listId,
+          role: "listbox",
+          "aria-multiselectable": "true",
+          className: "custom-scrollbar max-h-[320px] overflow-y-auto",
+          children: picker.isLoading ? /* @__PURE__ */ jsx10("div", { className: "p-4 text-xs text-gray-500", children: picker.loadingLabel }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "p-4 text-center text-xs text-gray-500", children: picker.emptyLabel }) : /* @__PURE__ */ jsx10("div", { className: "py-1", children: filteredOptions.map((option, index) => {
+            const isSelected = selectedSet.has(option.key);
+            const isActive = index === activeIndex;
+            return /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                id: `${listId}-option-${index}`,
+                role: "option",
+                "aria-selected": isSelected,
+                "data-skill-index": index,
+                onClick: () => onToggleOption(option.key),
+                onMouseEnter: () => setActiveIndex(index),
+                className: `flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${isActive ? "bg-gray-50" : "hover:bg-gray-50"}`,
+                children: [
+                  /* @__PURE__ */ jsx10("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500", children: /* @__PURE__ */ jsx10(Puzzle, { className: "h-4 w-4" }) }),
+                  /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx10("span", { className: "truncate text-sm text-gray-900", children: option.label }),
+                      option.badgeLabel ? /* @__PURE__ */ jsx10("span", { className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: option.badgeLabel }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx10("div", { className: "mt-0.5 truncate text-xs text-gray-500", children: option.description || option.key })
+                  ] }),
+                  /* @__PURE__ */ jsx10("div", { className: "ml-3 shrink-0", children: /* @__PURE__ */ jsx10(
+                    "span",
+                    {
+                      className: isSelected ? "inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white" : "inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white",
+                      children: isSelected ? /* @__PURE__ */ jsx10(Check2, { className: "h-3 w-3" }) : null
+                    }
+                  ) })
+                ]
+              },
+              option.key
+            );
+          }) })
+        }
+      ),
+      picker.manageHref && picker.manageLabel ? /* @__PURE__ */ jsx10("div", { className: "border-t border-gray-100 px-4 py-2.5", children: /* @__PURE__ */ jsxs5(
+        "a",
+        {
+          href: picker.manageHref,
+          className: "inline-flex items-center gap-1.5 text-xs font-medium text-primary transition-colors hover:text-primary/80",
+          children: [
+            picker.manageLabel,
+            /* @__PURE__ */ jsx10(ExternalLink, { className: "h-3 w-3" })
+          ]
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+
+// src/components/chat/ui/chat-input-bar/chat-input-bar-toolbar.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function ToolbarIcon({ icon }) {
+  if (icon === "sparkles") {
+    return /* @__PURE__ */ jsx11(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" });
+  }
+  if (icon === "brain") {
+    return /* @__PURE__ */ jsx11(Brain, { className: "h-3.5 w-3.5 shrink-0 text-gray-500" });
+  }
+  return null;
+}
+function AccessoryIcon({ icon }) {
+  if (icon === "paperclip") {
+    return /* @__PURE__ */ jsx11(Paperclip, { className: "h-4 w-4" });
+  }
+  return /* @__PURE__ */ jsx11(ToolbarIcon, { icon });
+}
+function resolveTriggerWidth(key) {
+  if (key === "model") {
+    return "min-w-[220px]";
+  }
+  if (key === "session-type") {
+    return "min-w-[140px]";
+  }
+  if (key === "thinking") {
+    return "min-w-[150px]";
+  }
+  return "";
+}
+function resolveContentWidth(key) {
+  if (key === "model") {
+    return "w-[320px]";
+  }
+  if (key === "session-type") {
+    return "w-[220px]";
+  }
+  if (key === "thinking") {
+    return "w-[180px]";
+  }
+  return "";
+}
+function ToolbarSelect({ item }) {
+  const { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } = ChatUiPrimitives;
+  return /* @__PURE__ */ jsxs6(Select, { value: item.value, onValueChange: item.onValueChange, disabled: item.disabled, children: [
+    /* @__PURE__ */ jsx11(
+      SelectTrigger,
+      {
+        className: `h-8 w-auto rounded-lg border-0 bg-transparent px-3 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 ${resolveTriggerWidth(item.key)}`,
+        children: item.selectedLabel ? /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 items-center gap-2 text-left", children: [
+          /* @__PURE__ */ jsx11(ToolbarIcon, { icon: item.icon }),
+          /* @__PURE__ */ jsx11("span", { className: "truncate text-xs font-semibold text-gray-700", children: item.selectedLabel })
+        ] }) : item.loading ? /* @__PURE__ */ jsx11("div", { className: "h-3 w-24 animate-pulse rounded bg-gray-200" }) : /* @__PURE__ */ jsx11(SelectValue, { placeholder: item.placeholder })
+      }
+    ),
+    /* @__PURE__ */ jsxs6(SelectContent, { className: resolveContentWidth(item.key), children: [
+      item.options.length === 0 ? item.loading ? /* @__PURE__ */ jsxs6("div", { className: "space-y-2 px-3 py-2", children: [
+        /* @__PURE__ */ jsx11("div", { className: "h-3 w-36 animate-pulse rounded bg-gray-200" }),
+        /* @__PURE__ */ jsx11("div", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
+        /* @__PURE__ */ jsx11("div", { className: "h-3 w-32 animate-pulse rounded bg-gray-200" })
+      ] }) : item.emptyLabel ? /* @__PURE__ */ jsx11("div", { className: "px-3 py-2 text-xs text-gray-500", children: item.emptyLabel }) : null : null,
+      item.options.map((option) => /* @__PURE__ */ jsx11(SelectItem, { value: option.value, className: "py-2", children: option.description ? /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx11("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }),
+        /* @__PURE__ */ jsx11("span", { className: "truncate text-[11px] text-gray-500", children: option.description })
+      ] }) : /* @__PURE__ */ jsx11("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }) }, option.value))
+    ] })
+  ] });
+}
+function ChatInputBarToolbar(props) {
+  const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-3 pb-3", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+      props.skillPicker ? /* @__PURE__ */ jsx11(ChatInputBarSkillPicker, { picker: props.skillPicker }) : null,
+      props.selects.map((item) => /* @__PURE__ */ jsx11(ToolbarSelect, { item }, item.key)),
+      props.accessories?.map((item) => {
+        const button = /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed disabled:text-gray-400",
+            onClick: item.onClick,
+            disabled: item.disabled,
+            "aria-label": item.label,
+            children: [
+              /* @__PURE__ */ jsx11(AccessoryIcon, { icon: item.icon }),
+              /* @__PURE__ */ jsx11("span", { children: item.label })
+            ]
+          }
+        );
+        if (!item.tooltip) {
+          return /* @__PURE__ */ jsx11("div", { children: button }, item.key);
+        }
+        return /* @__PURE__ */ jsx11(TooltipProvider, { children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
+          /* @__PURE__ */ jsx11(TooltipTrigger, { asChild: true, children: button }),
+          /* @__PURE__ */ jsx11(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx11("p", { className: "text-xs", children: item.tooltip }) })
+        ] }) }, item.key);
+      })
+    ] }),
+    /* @__PURE__ */ jsx11(ChatInputBarActions, { ...props.actions })
+  ] });
+}
+
+// src/components/chat/ui/chat-input-bar/chat-input-bar.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function InputBarHint({ hint }) {
+  if (!hint) {
+    return null;
+  }
+  if (hint.loading) {
+    return /* @__PURE__ */ jsx12("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxs7("div", { className: "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2", children: [
+      /* @__PURE__ */ jsx12("span", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
+      /* @__PURE__ */ jsx12("span", { className: "h-3 w-16 animate-pulse rounded bg-gray-200" })
+    ] }) });
+  }
+  const toneClassName = hint.tone === "warning" ? "border-amber-200 bg-amber-50 text-amber-800" : "border-gray-200 bg-gray-50 text-gray-700";
+  return /* @__PURE__ */ jsx12("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxs7("div", { className: `inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs ${toneClassName}`, children: [
+    hint.text ? /* @__PURE__ */ jsx12("span", { children: hint.text }) : null,
+    hint.actionLabel && hint.onAction ? /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: "button",
+        onClick: hint.onAction,
+        className: "font-semibold underline-offset-2 hover:underline",
+        children: hint.actionLabel
+      }
+    ) : null
+  ] }) });
+}
+function ChatInputBar(props) {
+  return /* @__PURE__ */ jsx12("div", { className: "border-t border-gray-200/80 bg-white p-4", children: /* @__PURE__ */ jsx12("div", { className: "mx-auto w-full max-w-[min(1120px,100%)]", children: /* @__PURE__ */ jsxs7("div", { className: "overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx12(
+        ChatInputBarTextarea,
+        {
+          value: props.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          onValueChange: props.onValueChange,
+          onKeyDown: props.onKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx12(ChatSlashMenu, { ...props.slashMenu })
+    ] }),
+    /* @__PURE__ */ jsx12(InputBarHint, { hint: props.hint }),
+    /* @__PURE__ */ jsx12(ChatInputBarSelectedItems, { items: props.selectedItems.items, onRemove: props.selectedItems.onRemove }),
+    /* @__PURE__ */ jsx12(ChatInputBarToolbar, { ...props.toolbar })
+  ] }) }) });
+}
+
+// src/components/chat/ui/chat-message-list/chat-message-avatar.tsx
+import { Bot, User, Wrench } from "lucide-react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function ChatMessageAvatar({ role }) {
+  if (role === "user") {
+    return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white shadow-sm", children: /* @__PURE__ */ jsx13(User, { className: "h-4 w-4" }) });
+  }
+  if (role === "assistant") {
+    return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-white shadow-sm", children: /* @__PURE__ */ jsx13(Bot, { className: "h-4 w-4" }) });
+  }
+  return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm", children: /* @__PURE__ */ jsx13(Wrench, { className: "h-4 w-4" }) });
+}
+
+// src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
+import { useMemo as useMemo4 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// src/components/chat/ui/chat-message-list/chat-code-block.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/components/chat/hooks/use-copy-feedback.ts
+import { useCallback, useEffect as useEffect4, useState as useState3 } from "react";
+
+// src/components/chat/utils/copy-text.ts
+function canUseClipboardApi() {
+  return typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function";
+}
+function restoreSelection(ranges) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const selection = document.getSelection();
+  if (!selection) {
+    return;
+  }
+  selection.removeAllRanges();
+  ranges.forEach((range) => selection.addRange(range));
+}
+function fallbackCopyText(text) {
+  if (typeof document === "undefined" || !document.body) {
+    return false;
+  }
+  const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const activeInput = activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement ? activeElement : null;
+  const activeSelection = activeInput ? {
+    start: activeInput.selectionStart,
+    end: activeInput.selectionEnd
+  } : null;
+  const selection = document.getSelection();
+  const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index).cloneRange()) : [];
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "-9999px";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+  textarea.style.fontSize = "12pt";
+  document.body.appendChild(textarea);
+  try {
+    textarea.focus({ preventScroll: true });
+  } catch {
+    textarea.focus();
+  }
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+  let copied = false;
+  try {
+    copied = typeof document.execCommand === "function" && document.execCommand("copy");
+  } catch {
+    copied = false;
+  }
+  textarea.remove();
+  if (activeElement) {
+    try {
+      activeElement.focus({ preventScroll: true });
+    } catch {
+      activeElement.focus();
+    }
+  }
+  if (activeInput && activeSelection) {
+    activeInput.setSelectionRange(activeSelection.start, activeSelection.end);
+  } else {
+    restoreSelection(ranges);
+  }
+  return copied;
+}
+async function copyText(text) {
+  if (!text) {
+    return false;
+  }
+  if (canUseClipboardApi()) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      return fallbackCopyText(text);
+    }
+  }
+  return fallbackCopyText(text);
+}
+
+// src/components/chat/hooks/use-copy-feedback.ts
+var DEFAULT_RESET_DELAY_MS = 1300;
+function useCopyFeedback(params) {
+  const [copied, setCopied] = useState3(false);
+  const copy = useCallback(async () => {
+    if (!params.text) {
+      return;
+    }
+    const didCopy = await copyText(params.text);
+    if (didCopy) {
+      setCopied(true);
+    } else {
+      setCopied(false);
+    }
+  }, [params.text]);
+  useEffect4(() => {
+    if (!copied || typeof window === "undefined") {
+      return;
+    }
+    const timer = window.setTimeout(() => setCopied(false), params.resetDelayMs ?? DEFAULT_RESET_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  }, [copied, params.resetDelayMs]);
+  return {
+    copied,
+    copy
+  };
+}
+
+// src/components/chat/ui/chat-message-list/chat-code-block.tsx
+import { Check as Check3, Copy } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
+function flattenNodeText(value) {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(flattenNodeText).join("");
+  }
+  return "";
+}
+function normalizeCodeText(value) {
+  const content = flattenNodeText(value);
+  return content.endsWith("\n") ? content.slice(0, -1) : content;
+}
+function resolveCodeLanguage(className) {
+  const match = className ? CODE_LANGUAGE_REGEX.exec(className) : null;
+  return match?.[1]?.toLowerCase() || "text";
+}
+function ChatCodeBlock(props) {
+  const language = useMemo3(() => resolveCodeLanguage(props.className), [props.className]);
+  const codeText = useMemo3(() => normalizeCodeText(props.children), [props.children]);
+  const { copied, copy } = useCopyFeedback({ text: codeText });
+  return /* @__PURE__ */ jsxs8("div", { className: "chat-codeblock", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "chat-codeblock-toolbar", children: [
+      /* @__PURE__ */ jsx14("span", { className: "chat-codeblock-language", children: language }),
+      /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          type: "button",
+          className: "chat-codeblock-copy",
+          onClick: () => void copy(),
+          "aria-label": copied ? props.texts.copiedCodeLabel : props.texts.copyCodeLabel,
+          children: [
+            copied ? /* @__PURE__ */ jsx14(Check3, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx14(Copy, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx14("span", { children: copied ? props.texts.copiedCodeLabel : props.texts.copyCodeLabel })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx14("pre", { children: /* @__PURE__ */ jsx14("code", { className: props.className, children: codeText }) })
+  ] });
+}
+
+// src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var MARKDOWN_MAX_CHARS = 14e4;
+var SAFE_LINK_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+function trimMarkdown(value) {
+  if (value.length <= MARKDOWN_MAX_CHARS) {
+    return value;
+  }
+  return `${value.slice(0, MARKDOWN_MAX_CHARS)}
+
+...`;
+}
+function resolveSafeHref(href) {
+  if (!href) {
+    return null;
+  }
+  if (href.startsWith("#") || href.startsWith("/") || href.startsWith("./") || href.startsWith("../")) {
+    return href;
+  }
+  try {
+    const url = new URL(href);
+    return SAFE_LINK_PROTOCOLS.has(url.protocol) ? href : null;
+  } catch {
+    return null;
+  }
+}
+function isExternalHref(href) {
+  return /^https?:\/\//i.test(href);
+}
+function ChatMessageMarkdown(props) {
+  const isUser = props.role === "user";
+  const markdownComponents = useMemo4(() => ({
+    a: ({ href, children, ...rest }) => {
+      const safeHref = resolveSafeHref(href);
+      if (!safeHref) {
+        return /* @__PURE__ */ jsx15("span", { className: "chat-link-invalid", children });
+      }
+      const external = isExternalHref(safeHref);
+      return /* @__PURE__ */ jsx15(
+        "a",
+        {
+          ...rest,
+          href: safeHref,
+          target: external ? "_blank" : void 0,
+          rel: external ? "noreferrer noopener" : void 0,
+          children
+        }
+      );
+    },
+    table: ({ children, ...rest }) => /* @__PURE__ */ jsx15("div", { className: "chat-table-wrap", children: /* @__PURE__ */ jsx15("table", { ...rest, children }) }),
+    input: ({ type, checked, ...rest }) => {
+      if (type !== "checkbox") {
+        return /* @__PURE__ */ jsx15("input", { ...rest, type });
+      }
+      return /* @__PURE__ */ jsx15("input", { ...rest, type: "checkbox", checked, readOnly: true, disabled: true, className: "chat-task-checkbox" });
+    },
+    img: ({ src, alt, ...rest }) => {
+      const safeSrc = resolveSafeHref(src);
+      if (!safeSrc) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx15("img", { ...rest, src: safeSrc, alt: alt || "", loading: "lazy", decoding: "async" });
+    },
+    code: ({ className, children, ...rest }) => {
+      const plainText = String(children ?? "");
+      const isInlineCode = !className && !plainText.includes("\n");
+      if (isInlineCode) {
+        return /* @__PURE__ */ jsx15("code", { ...rest, className: cn("chat-inline-code", className), children });
+      }
+      return /* @__PURE__ */ jsx15(ChatCodeBlock, { className, texts: props.texts, children });
+    }
+  }), [props.texts]);
+  return /* @__PURE__ */ jsx15("div", { className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"), children: /* @__PURE__ */ jsx15(ReactMarkdown, { skipHtml: true, remarkPlugins: [remarkGfm], components: markdownComponents, children: trimMarkdown(props.text) }) });
+}
+
+// src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChatReasoningBlock(props) {
+  return /* @__PURE__ */ jsxs9("details", { className: "mt-3", children: [
+    /* @__PURE__ */ jsx16("summary", { className: cn("cursor-pointer text-xs", props.isUser ? "text-primary-100" : "text-gray-500"), children: props.label }),
+    /* @__PURE__ */ jsx16(
+      "pre",
+      {
+        className: cn(
+          "mt-2 whitespace-pre-wrap break-words rounded-lg p-2 text-[11px]",
+          props.isUser ? "bg-primary-700/60" : "bg-gray-100"
+        ),
+        children: props.text
+      }
+    )
+  ] });
+}
+
+// src/components/chat/ui/chat-message-list/chat-tool-card.tsx
+import { Clock3, FileSearch, Globe, Search as Search2, SendHorizontal, Terminal, Wrench as Wrench2 } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var TOOL_OUTPUT_PREVIEW_MAX = 220;
+function renderToolIcon(toolName) {
+  const lowered = toolName.toLowerCase();
+  if (lowered.includes("exec") || lowered.includes("shell") || lowered.includes("command")) {
+    return /* @__PURE__ */ jsx17(Terminal, { className: "h-3.5 w-3.5" });
+  }
+  if (lowered.includes("search")) {
+    return /* @__PURE__ */ jsx17(Search2, { className: "h-3.5 w-3.5" });
+  }
+  if (lowered.includes("fetch") || lowered.includes("http") || lowered.includes("web")) {
+    return /* @__PURE__ */ jsx17(Globe, { className: "h-3.5 w-3.5" });
+  }
+  if (lowered.includes("read") || lowered.includes("file")) {
+    return /* @__PURE__ */ jsx17(FileSearch, { className: "h-3.5 w-3.5" });
+  }
+  if (lowered.includes("message") || lowered.includes("send")) {
+    return /* @__PURE__ */ jsx17(SendHorizontal, { className: "h-3.5 w-3.5" });
+  }
+  if (lowered.includes("cron") || lowered.includes("schedule")) {
+    return /* @__PURE__ */ jsx17(Clock3, { className: "h-3.5 w-3.5" });
+  }
+  return /* @__PURE__ */ jsx17(Wrench2, { className: "h-3.5 w-3.5" });
+}
+function ChatToolCard({ card }) {
+  const output = card.output?.trim() ?? "";
+  const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes("\n");
+  const preview = showDetails ? `${output.slice(0, TOOL_OUTPUT_PREVIEW_MAX)}...` : output;
+  const showOutputSection = card.kind === "result" || card.hasResult;
+  return /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-800", children: [
+      renderToolIcon(card.toolName),
+      /* @__PURE__ */ jsx17("span", { children: card.titleLabel }),
+      /* @__PURE__ */ jsx17("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName })
+    ] }),
+    card.summary ? /* @__PURE__ */ jsx17("div", { className: "mt-1 break-words font-mono text-[11px] text-amber-800/90", children: card.summary }) : null,
+    showOutputSection ? /* @__PURE__ */ jsx17("div", { className: "mt-2", children: !output ? /* @__PURE__ */ jsx17("div", { className: "text-[11px] text-amber-700/80", children: card.emptyLabel }) : showDetails ? /* @__PURE__ */ jsxs10("details", { className: "group", children: [
+      /* @__PURE__ */ jsx17("summary", { className: "cursor-pointer text-[11px] text-amber-700", children: card.outputLabel }),
+      /* @__PURE__ */ jsx17("pre", { className: "mt-2 whitespace-pre-wrap break-words rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] text-amber-900", children: output })
+    ] }) : /* @__PURE__ */ jsx17("pre", { className: "rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] whitespace-pre-wrap break-words text-amber-900", children: preview }) }) : null
+  ] });
+}
+
+// src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function ChatUnknownPart(props) {
+  return /* @__PURE__ */ jsxs11("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "font-semibold text-gray-700", children: [
+      props.label,
+      ": ",
+      props.rawType
+    ] }),
+    props.text ? /* @__PURE__ */ jsx18("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
+  ] });
+}
+
+// src/components/chat/ui/chat-message-list/chat-message.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function ChatMessage(props) {
+  const { message, texts } = props;
+  const { role } = message;
+  const isUser = role === "user";
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: cn(
+        "inline-block w-fit max-w-full rounded-2xl border px-4 py-3 shadow-sm",
+        isUser ? "border-primary bg-primary text-white" : role === "assistant" ? "border-gray-200 bg-white text-gray-900" : "border-orange-200/80 bg-orange-50/70 text-gray-900"
+      ),
+      children: /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: message.parts.map((part, index) => {
+        if (part.type === "markdown") {
+          return /* @__PURE__ */ jsx19(ChatMessageMarkdown, { text: part.text, role, texts }, `markdown-${index}`);
+        }
+        if (part.type === "reasoning") {
+          return /* @__PURE__ */ jsx19(ChatReasoningBlock, { label: part.label, text: part.text, isUser }, `reasoning-${index}`);
+        }
+        if (part.type === "tool-card") {
+          return /* @__PURE__ */ jsx19("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx19(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+        }
+        if (part.type === "unknown") {
+          return /* @__PURE__ */ jsx19(ChatUnknownPart, { label: part.label, rawType: part.rawType, text: part.text }, `unknown-${index}`);
+        }
+        return null;
+      }) })
+    }
+  );
+}
+
+// src/components/chat/ui/chat-message-list/chat-message-meta.tsx
+import { jsxs as jsxs12 } from "react/jsx-runtime";
+function ChatMessageMeta(props) {
+  return /* @__PURE__ */ jsxs12("div", { className: cn("px-1 text-[11px]", props.isUser ? "text-primary-300" : "text-gray-400"), children: [
+    props.roleLabel,
+    " \xB7 ",
+    props.timestampLabel
+  ] });
+}
+
+// src/components/chat/ui/chat-message-list/chat-message-list.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function ChatMessageList(props) {
+  return /* @__PURE__ */ jsxs13("div", { className: cn("space-y-5", props.className), children: [
+    props.messages.map((message) => {
+      const isUser = message.role === "user";
+      return /* @__PURE__ */ jsxs13("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
+        !isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null,
+        /* @__PURE__ */ jsxs13("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsx20(ChatMessage, { message, texts: props.texts }),
+          /* @__PURE__ */ jsx20(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser })
+        ] }),
+        isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null
+      ] }, message.id);
+    }),
+    props.isSending && !props.hasStreamingDraft ? /* @__PURE__ */ jsxs13("div", { className: "flex justify-start gap-3", children: [
+      /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: "assistant" }),
+      /* @__PURE__ */ jsx20("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
+    ] }) : null
+  ] });
+}
+
+// src/components/chat/hooks/use-sticky-bottom-scroll.ts
+import { useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect, useRef as useRef4 } from "react";
+var DEFAULT_STICKY_THRESHOLD_PX = 10;
+function scrollElementToBottom(element) {
+  element.scrollTop = element.scrollHeight;
+}
+function useStickyBottomScroll(params) {
+  const isStickyRef = useRef4(true);
+  const isProgrammaticScrollRef = useRef4(false);
+  const previousResetKeyRef = useRef4(null);
+  const pendingInitialScrollRef = useRef4(false);
+  const onScroll = useCallback2(() => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+    isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
+  }, [params.scrollRef, params.stickyThresholdPx]);
+  useEffect5(() => {
+    if (previousResetKeyRef.current === params.resetKey) {
+      return;
+    }
+    previousResetKeyRef.current = params.resetKey;
+    isStickyRef.current = true;
+    pendingInitialScrollRef.current = true;
+  }, [params.resetKey]);
+  useLayoutEffect(() => {
+    if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) {
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    pendingInitialScrollRef.current = false;
+    isProgrammaticScrollRef.current = true;
+    scrollElementToBottom(element);
+  }, [params.hasContent, params.isLoading, params.scrollRef]);
+  useLayoutEffect(() => {
+    if (!isStickyRef.current || !params.hasContent) {
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    isProgrammaticScrollRef.current = true;
+    scrollElementToBottom(element);
+  }, [params.contentVersion, params.hasContent, params.scrollRef]);
+  return { onScroll };
+}
+export {
+  ChatInputBar,
+  ChatMessageList,
+  copyText,
+  useActiveItemScroll,
+  useCopyFeedback,
+  useElementWidth,
+  useStickyBottomScroll
+};