@yourgpt/copilot-sdk 0.1.0

package/dist/ui/index.js

@@ -0,0 +1,4019 @@
+import { useCopilot } from '../chunk-QUGTRQSS.js';
+import '../chunk-N4OA2J32.js';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { marked } from 'marked';
+import * as React8 from 'react';
+import React8__default, { memo, createContext, useId, useMemo, useState, useEffect, useRef, useLayoutEffect, useCallback, useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import { codeToHtml } from 'shiki';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { useStickToBottomContext, StickToBottom as StickToBottom$1 } from 'use-stick-to-bottom';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function CircularLoader({
+  className,
+  size = "md"
+}) {
+  const sizeClasses = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "border-primary animate-spin rounded-full border-2 border-t-transparent",
+        sizeClasses[size],
+        className
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+    }
+  );
+}
+function ClassicLoader({
+  className,
+  size = "md"
+}) {
+  const sizeClasses = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6"
+  };
+  const barSizes = {
+    sm: { height: "6px", width: "1.5px" },
+    md: { height: "8px", width: "2px" },
+    lg: { height: "10px", width: "2.5px" }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", sizeClasses[size], className), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute h-full w-full", children: [...Array(12)].map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-primary absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full",
+        style: {
+          top: "0",
+          left: "50%",
+          marginLeft: size === "sm" ? "-0.75px" : size === "lg" ? "-1.25px" : "-1px",
+          transformOrigin: `${size === "sm" ? "0.75px" : size === "lg" ? "1.25px" : "1px"} ${size === "sm" ? "10px" : size === "lg" ? "14px" : "12px"}`,
+          transform: `rotate(${i * 30}deg)`,
+          opacity: 0,
+          animationDelay: `${i * 0.1}s`,
+          height: barSizes[size].height,
+          width: barSizes[size].width
+        }
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
+}
+function PulseLoader({
+  className,
+  size = "md"
+}) {
+  const sizeClasses = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", sizeClasses[size], className), children: [
+    /* @__PURE__ */ jsx("div", { className: "border-primary absolute inset-0 animate-[thin-pulse_1.5s_ease-in-out_infinite] rounded-full border-2" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
+}
+function PulseDotLoader({
+  className,
+  size = "md"
+}) {
+  const sizeClasses = {
+    sm: "size-1",
+    md: "size-2",
+    lg: "size-3"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-primary animate-[pulse-dot_1.2s_ease-in-out_infinite] rounded-full",
+        sizeClasses[size],
+        className
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+    }
+  );
+}
+function DotsLoader({
+  className,
+  size = "md"
+}) {
+  const dotSizes = {
+    sm: "h-1.5 w-1.5",
+    md: "h-2 w-2",
+    lg: "h-2.5 w-2.5"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center space-x-1",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-primary animate-[bounce-dots_1.4s_ease-in-out_infinite] rounded-full",
+              dotSizes[size]
+            ),
+            style: {
+              animationDelay: `${i * 160}ms`
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+}
+function TypingLoader({
+  className,
+  size = "md"
+}) {
+  const dotSizes = {
+    sm: "h-1 w-1",
+    md: "h-1.5 w-1.5",
+    lg: "h-2 w-2"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center space-x-1",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-primary animate-[typing_1s_infinite] rounded-full",
+              dotSizes[size]
+            ),
+            style: {
+              animationDelay: `${i * 250}ms`
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+}
+function WaveLoader({
+  className,
+  size = "md"
+}) {
+  const barWidths = {
+    sm: "w-0.5",
+    md: "w-0.5",
+    lg: "w-1"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  const heights = {
+    sm: ["6px", "9px", "12px", "9px", "6px"],
+    md: ["8px", "12px", "16px", "12px", "8px"],
+    lg: ["10px", "15px", "20px", "15px", "10px"]
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-0.5",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-primary animate-[wave_1s_ease-in-out_infinite] rounded-full",
+              barWidths[size]
+            ),
+            style: {
+              animationDelay: `${i * 100}ms`,
+              height: heights[size][i]
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+}
+function BarsLoader({
+  className,
+  size = "md"
+}) {
+  const barWidths = {
+    sm: "w-1",
+    md: "w-1.5",
+    lg: "w-2"
+  };
+  const containerSizes = {
+    sm: "h-4 gap-1",
+    md: "h-5 gap-1.5",
+    lg: "h-6 gap-2"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex", containerSizes[size], className), children: [
+    [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-primary h-full animate-[wave-bars_1.2s_ease-in-out_infinite]",
+          barWidths[size]
+        ),
+        style: {
+          animationDelay: `${i * 0.2}s`
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
+}
+function TerminalLoader({
+  className,
+  size = "md"
+}) {
+  const cursorSizes = {
+    sm: "h-3 w-1.5",
+    md: "h-4 w-2",
+    lg: "h-5 w-2.5"
+  };
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center space-x-1",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-primary animate-[blink_1s_step-end_infinite]",
+              cursorSizes[size]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+}
+function TextBlinkLoader({
+  text = "Thinking",
+  className,
+  size = "md"
+}) {
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "animate-[text-blink_2s_ease-in-out_infinite] font-medium",
+        textSizes[size],
+        className
+      ),
+      children: text
+    }
+  );
+}
+function TextShimmerLoader({
+  text = "Thinking",
+  className,
+  size = "md"
+}) {
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]",
+        "bg-size-[200%_auto] bg-clip-text font-medium text-transparent",
+        "animate-[shimmer_4s_infinite_linear]",
+        textSizes[size],
+        className
+      ),
+      children: text
+    }
+  );
+}
+function TextDotsLoader({
+  className,
+  text = "Thinking",
+  size = "md"
+}) {
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsx("span", { className: cn("text-primary font-medium", textSizes[size]), children: text }),
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-primary animate-[loading-dots_1.4s_infinite_0.2s]", children: "." }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary animate-[loading-dots_1.4s_infinite_0.4s]", children: "." }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary animate-[loading-dots_1.4s_infinite_0.6s]", children: "." })
+    ] })
+  ] });
+}
+function Loader({
+  variant = "circular",
+  size = "md",
+  text,
+  className
+}) {
+  switch (variant) {
+    case "circular":
+      return /* @__PURE__ */ jsx(CircularLoader, { size, className });
+    case "classic":
+      return /* @__PURE__ */ jsx(ClassicLoader, { size, className });
+    case "pulse":
+      return /* @__PURE__ */ jsx(PulseLoader, { size, className });
+    case "pulse-dot":
+      return /* @__PURE__ */ jsx(PulseDotLoader, { size, className });
+    case "dots":
+      return /* @__PURE__ */ jsx(DotsLoader, { size, className });
+    case "typing":
+      return /* @__PURE__ */ jsx(TypingLoader, { size, className });
+    case "wave":
+      return /* @__PURE__ */ jsx(WaveLoader, { size, className });
+    case "bars":
+      return /* @__PURE__ */ jsx(BarsLoader, { size, className });
+    case "terminal":
+      return /* @__PURE__ */ jsx(TerminalLoader, { size, className });
+    case "text-blink":
+      return /* @__PURE__ */ jsx(TextBlinkLoader, { text, size, className });
+    case "text-shimmer":
+      return /* @__PURE__ */ jsx(TextShimmerLoader, { text, size, className });
+    case "loading-dots":
+      return /* @__PURE__ */ jsx(TextDotsLoader, { text, size, className });
+    default:
+      return /* @__PURE__ */ jsx(CircularLoader, { size, className });
+  }
+}
+function CodeBlock({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "not-prose flex w-full flex-col overflow-clip border",
+        "border-border bg-card text-card-foreground rounded-xl",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function CodeBlockCode({
+  code,
+  language = "tsx",
+  theme = "github-light",
+  className,
+  ...props
+}) {
+  const [highlightedHtml, setHighlightedHtml] = useState(null);
+  useEffect(() => {
+    async function highlight() {
+      if (!code) {
+        setHighlightedHtml("<pre><code></code></pre>");
+        return;
+      }
+      const html = await codeToHtml(code, { lang: language, theme });
+      setHighlightedHtml(html);
+    }
+    highlight();
+  }, [code, language, theme]);
+  const classNames = cn(
+    "w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4",
+    className
+  );
+  return highlightedHtml ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames,
+      dangerouslySetInnerHTML: { __html: highlightedHtml },
+      ...props
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: classNames, ...props, children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) });
+}
+function parseMarkdownIntoBlocks(markdown) {
+  const tokens = marked.lexer(markdown);
+  return tokens.map((token) => token.raw);
+}
+function extractLanguage(className) {
+  if (!className) return "plaintext";
+  const match = className.match(/language-(\w+)/);
+  return match ? match[1] : "plaintext";
+}
+var INITIAL_COMPONENTS = {
+  code: function CodeComponent({ className, children, ...props }) {
+    const isInline = !props.node?.position?.start.line || props.node?.position?.start.line === props.node?.position?.end.line;
+    if (isInline) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "bg-primary-foreground rounded-sm px-1 font-mono text-sm",
+            className
+          ),
+          ...props,
+          children
+        }
+      );
+    }
+    const language = extractLanguage(className);
+    return /* @__PURE__ */ jsx(CodeBlock, { className, children: /* @__PURE__ */ jsx(CodeBlockCode, { code: children, language }) });
+  },
+  pre: function PreComponent({ children }) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+};
+var MemoizedMarkdownBlock = memo(
+  function MarkdownBlock({
+    content,
+    components = INITIAL_COMPONENTS
+  }) {
+    return /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm, remarkBreaks],
+        components,
+        children: content
+      }
+    );
+  },
+  function propsAreEqual(prevProps, nextProps) {
+    return prevProps.content === nextProps.content;
+  }
+);
+MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+function MarkdownComponent({
+  children,
+  id,
+  className,
+  components = INITIAL_COMPONENTS
+}) {
+  const generatedId = useId();
+  const blockId = id ?? generatedId;
+  const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children]);
+  return /* @__PURE__ */ jsx("div", { className, children: blocks.map((block, index) => /* @__PURE__ */ jsx(
+    MemoizedMarkdownBlock,
+    {
+      content: block,
+      components
+    },
+    `${blockId}-block-${index}`
+  )) });
+}
+var Markdown = memo(MarkdownComponent);
+Markdown.displayName = "Markdown";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React8.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function ThumbsUpIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M7 10v12" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })
+      ]
+    }
+  );
+}
+function ThumbsDownIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M17 14V2" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })
+      ]
+    }
+  );
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function FeedbackBar({
+  className,
+  title,
+  icon,
+  onHelpful,
+  onNotHelpful,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-background border-border inline-flex rounded-[12px] border text-sm",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-start gap-4 py-3 pl-4", children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: title })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-0.5 px-3 py-0", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors",
+              "aria-label": "Helpful",
+              onClick: onHelpful,
+              children: /* @__PURE__ */ jsx(ThumbsUpIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors",
+              "aria-label": "Not helpful",
+              onClick: onNotHelpful,
+              children: /* @__PURE__ */ jsx(ThumbsDownIcon, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "border-border flex items-center justify-center border-l", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "text-muted-foreground hover:text-foreground flex items-center justify-center rounded-md p-3",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-5" })
+          }
+        ) })
+      ] })
+    }
+  );
+}
+var StickToBottom = StickToBottom$1;
+function useChatContainer() {
+  const context = useStickToBottomContext();
+  return {
+    isAtBottom: context.isAtBottom,
+    scrollToBottom: context.scrollToBottom
+  };
+}
+function ChatContainerRoot({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    StickToBottom,
+    {
+      className: cn("flex overflow-y-auto", className),
+      resize: "smooth",
+      initial: "instant",
+      role: "log",
+      ...props,
+      children
+    }
+  );
+}
+function ChatContainerContent({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    StickToBottom.Content,
+    {
+      className: cn("flex w-full flex-col", className),
+      ...props,
+      children
+    }
+  );
+}
+function ChatContainerScrollAnchor({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-px w-full shrink-0 scroll-mt-4", className),
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+}
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function ScrollButton({
+  className,
+  variant = "outline",
+  size = "sm",
+  ...props
+}) {
+  const { isAtBottom, scrollToBottom } = useChatContainer();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      size,
+      className: cn(
+        "h-10 w-10 rounded-full transition-all duration-150 ease-out",
+        !isAtBottom ? "translate-y-0 scale-100 opacity-100" : "pointer-events-none translate-y-4 scale-95 opacity-0",
+        className
+      ),
+      onClick: () => scrollToBottom(),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-5 w-5" })
+    }
+  );
+}
+function TooltipProvider({
+  children,
+  delayDuration = 300
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delayDuration, children });
+}
+function Tooltip({ children, open, defaultOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children
+    }
+  );
+}
+function TooltipTrigger({
+  children,
+  asChild,
+  disabled,
+  ...props
+}) {
+  if (asChild && React8__default.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, render: children, ...props });
+  }
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, ...props, children });
+}
+function TooltipContent({
+  children,
+  className,
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  showArrow = true
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Popup,
+    {
+      className: cn(
+        "z-50 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-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",
+        className
+      ),
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "fill-primary" })
+      ]
+    }
+  ) }) });
+}
+var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var Message = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", className), ...props, children });
+var MessageAvatar = ({
+  src,
+  alt,
+  fallback,
+  delayMs,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(Avatar, { className: cn("size-7 shrink-0", className), children: [
+    /* @__PURE__ */ jsx(AvatarImage, { src, alt }),
+    fallback && /* @__PURE__ */ jsx(AvatarFallback, { delayMs, children: fallback })
+  ] });
+};
+var proseSizeMap = {
+  sm: "prose-sm",
+  base: "prose-base",
+  lg: "prose-lg"
+};
+var MessageContent = ({
+  children,
+  markdown = false,
+  className,
+  size = "sm",
+  ...props
+}) => {
+  const classNames = cn(
+    "rounded-lg p-2 bg-secondary prose break-words whitespace-normal max-w-none",
+    "text-foreground prose-headings:text-foreground prose-p:text-foreground prose-strong:text-foreground prose-li:text-foreground prose-a:text-foreground prose-ol:text-foreground prose-ul:text-foreground prose-code:text-foreground",
+    proseSizeMap[size],
+    className
+  );
+  return markdown ? /* @__PURE__ */ jsx(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsx("div", { className: classNames, ...props, children });
+};
+var Textarea = React8.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+var PromptInputContext = createContext({
+  isLoading: false,
+  value: "",
+  setValue: () => {
+  },
+  maxHeight: 240,
+  onSubmit: void 0,
+  disabled: false,
+  textareaRef: { current: null }
+});
+function usePromptInput() {
+  return useContext(PromptInputContext);
+}
+function PromptInput({
+  className,
+  isLoading = false,
+  maxHeight = 240,
+  value,
+  onValueChange,
+  onSubmit,
+  children,
+  disabled = false,
+  onClick,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = useState(value || "");
+  const textareaRef = useRef(null);
+  const handleChange = (newValue) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  };
+  const handleClick = (e) => {
+    if (!disabled) textareaRef.current?.focus();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+    PromptInputContext.Provider,
+    {
+      value: {
+        isLoading,
+        value: value ?? internalValue,
+        setValue: onValueChange ?? handleChange,
+        maxHeight,
+        onSubmit,
+        disabled,
+        textareaRef
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: handleClick,
+          className: cn(
+            "border-input bg-background cursor-text rounded-3xl border p-2 shadow-xs",
+            disabled && "cursor-not-allowed opacity-60",
+            className
+          ),
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+}
+function PromptInputTextarea({
+  className,
+  onKeyDown,
+  disableAutosize = false,
+  ...props
+}) {
+  const { value, setValue, maxHeight, onSubmit, disabled, textareaRef } = usePromptInput();
+  const adjustHeight = (el) => {
+    if (!el || disableAutosize) return;
+    el.style.height = "auto";
+    if (typeof maxHeight === "number") {
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    } else {
+      el.style.height = `min(${el.scrollHeight}px, ${maxHeight})`;
+    }
+  };
+  const handleRef = (el) => {
+    textareaRef.current = el;
+    adjustHeight(el);
+  };
+  useLayoutEffect(() => {
+    if (!textareaRef.current || disableAutosize) return;
+    const el = textareaRef.current;
+    el.style.height = "auto";
+    if (typeof maxHeight === "number") {
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    } else {
+      el.style.height = `min(${el.scrollHeight}px, ${maxHeight})`;
+    }
+  }, [value, maxHeight, disableAutosize]);
+  const handleChange = (e) => {
+    adjustHeight(e.target);
+    setValue(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit?.();
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ref: handleRef,
+      value,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "text-foreground min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
+        className
+      ),
+      rows: 1,
+      disabled,
+      ...props
+    }
+  );
+}
+function PromptInputActions({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
+}
+function PromptInputAction({
+  tooltip,
+  children,
+  className,
+  side = "top"
+}) {
+  const { disabled } = usePromptInput();
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(
+      TooltipTrigger,
+      {
+        asChild: true,
+        disabled,
+        onClick: (e) => e.stopPropagation(),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(TooltipContent, { side, className, showArrow: true, children: tooltip })
+  ] });
+}
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+var SourceContext = createContext(null);
+function useSourceContext() {
+  const ctx = useContext(SourceContext);
+  if (!ctx) throw new Error("Source.* must be used inside <Source>");
+  return ctx;
+}
+function Source({ href, children }) {
+  let domain = "";
+  try {
+    domain = new URL(href).hostname;
+  } catch {
+    domain = href.split("/").pop() || href;
+  }
+  return /* @__PURE__ */ jsx(SourceContext.Provider, { value: { href, domain }, children: /* @__PURE__ */ jsx(HoverCard, { openDelay: 150, closeDelay: 0, children }) });
+}
+function SourceTrigger({
+  label,
+  showFavicon = false,
+  className
+}) {
+  const { href, domain } = useSourceContext();
+  const labelToShow = label ?? domain.replace("www.", "");
+  return /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(
+        "bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150",
+        showFavicon ? "pr-2 pl-1" : "px-1",
+        className
+      ),
+      children: [
+        showFavicon && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(
+              href
+            )}`,
+            alt: "favicon",
+            width: 14,
+            height: 14,
+            className: "size-3.5 rounded-full"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate tabular-nums text-center font-normal", children: labelToShow })
+      ]
+    }
+  ) });
+}
+function SourceContent({
+  title,
+  description,
+  className
+}) {
+  const { href, domain } = useSourceContext();
+  return /* @__PURE__ */ jsx(HoverCardContent, { className: cn("w-80 p-0 shadow-xs", className), children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "flex flex-col gap-2 p-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(
+                href
+              )}`,
+              alt: "favicon",
+              className: "size-4 rounded-full",
+              width: 16,
+              height: 16
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-primary truncate text-sm", children: domain.replace("www.", "") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "line-clamp-2 text-sm font-medium", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "text-muted-foreground line-clamp-2 text-sm", children: description })
+      ]
+    }
+  ) });
+}
+var ReasoningContext = React8.createContext(
+  null
+);
+function useReasoningContext() {
+  const context = React8.useContext(ReasoningContext);
+  if (!context) {
+    throw new Error(
+      "Reasoning components must be used within a Reasoning provider"
+    );
+  }
+  return context;
+}
+function Reasoning({
+  children,
+  isStreaming = false,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(defaultOpen);
+  const prevStreamingRef = React8.useRef(isStreaming);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const setIsOpen = React8.useCallback(
+    (open) => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      }
+      if (!isControlled) {
+        setUncontrolledOpen(open);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
+  React8.useEffect(() => {
+    if (isStreaming && !prevStreamingRef.current) {
+      setIsOpen(true);
+    } else if (!isStreaming && prevStreamingRef.current) {
+      setIsOpen(false);
+    }
+    prevStreamingRef.current = isStreaming;
+  }, [isStreaming, setIsOpen]);
+  return /* @__PURE__ */ jsx(ReasoningContext.Provider, { value: { isOpen, setIsOpen, isStreaming }, children: /* @__PURE__ */ jsx("div", { className: cn("reasoning", className), children }) });
+}
+function ReasoningTrigger({
+  children,
+  className
+}) {
+  const { isOpen, setIsOpen, isStreaming } = useReasoningContext();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsOpen(!isOpen),
+      className: cn(
+        "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors",
+        "py-1 px-0 bg-transparent border-none cursor-pointer",
+        className
+      ),
+      "aria-expanded": isOpen,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn(
+              "size-3 transition-transform duration-200",
+              isOpen && "rotate-90"
+            ),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+          }
+        ),
+        isStreaming && /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+          /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function ReasoningContent({
+  children,
+  markdown = false,
+  className
+}) {
+  const { isOpen } = useReasoningContext();
+  const contentRef = React8.useRef(null);
+  const [height, setHeight] = React8.useState(0);
+  React8.useEffect(() => {
+    if (contentRef.current) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setHeight(entry.contentRect.height);
+        }
+      });
+      resizeObserver.observe(contentRef.current);
+      return () => resizeObserver.disconnect();
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden transition-[max-height] duration-200 ease-out",
+        isOpen ? "opacity-100" : "opacity-0"
+      ),
+      style: { maxHeight: isOpen ? height : 0 },
+      "aria-hidden": !isOpen,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: contentRef,
+          className: cn(
+            "mt-1 pl-3 border-l-2 border-muted-foreground/20",
+            "text-xs text-muted-foreground",
+            className
+          ),
+          children: markdown && typeof children === "string" ? /* @__PURE__ */ jsx(Markdown, { className: "prose-xs", children }) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children })
+        }
+      )
+    }
+  );
+}
+function SimpleReasoning({
+  content,
+  isStreaming = false,
+  streamingLabel = "Thinking...",
+  collapsedLabel = "View reasoning",
+  markdown = true,
+  className
+}) {
+  if (!content) return null;
+  return /* @__PURE__ */ jsxs(Reasoning, { isStreaming, className, children: [
+    /* @__PURE__ */ jsx(ReasoningTrigger, { children: isStreaming ? streamingLabel : collapsedLabel }),
+    /* @__PURE__ */ jsx(ReasoningContent, { markdown, children: content })
+  ] });
+}
+var CopilotUIContext = React8.createContext(
+  null
+);
+function useCopilotUI() {
+  const context = React8.useContext(CopilotUIContext);
+  if (!context) {
+    return {
+      debug: false,
+      defaultDebugExpanded: false,
+      isDebug: false
+    };
+  }
+  return context;
+}
+function CopilotUIProvider({
+  children,
+  debug = false,
+  defaultDebugExpanded = false
+}) {
+  const value = React8.useMemo(
+    () => ({
+      debug,
+      defaultDebugExpanded,
+      isDebug: debug
+    }),
+    [debug, defaultDebugExpanded]
+  );
+  return /* @__PURE__ */ jsx(CopilotUIContext.Provider, { value, children });
+}
+function toolNameToTitle(name) {
+  let result = name.replace(/_/g, " ");
+  result = result.replace(/([a-z])([A-Z])/g, "$1 $2");
+  return result.charAt(0).toUpperCase() + result.slice(1).toLowerCase();
+}
+function getDisplayTitle(step) {
+  const fallbackTitle = toolNameToTitle(step.name);
+  switch (step.status) {
+    case "pending":
+      return step.title ?? fallbackTitle;
+    case "executing":
+      if (step.executingTitle) return step.executingTitle;
+      return step.title ? `${step.title}...` : `${fallbackTitle}...`;
+    case "completed":
+      return step.completedTitle ?? step.title ?? fallbackTitle;
+    case "error":
+    case "failed":
+    case "rejected":
+      return step.title ?? fallbackTitle;
+    default:
+      return fallbackTitle;
+  }
+}
+function StatusIndicator({ status, className }) {
+  const baseClasses = "flex-shrink-0";
+  switch (status) {
+    case "pending":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            baseClasses,
+            "size-3 flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-muted-foreground/40" })
+        }
+      );
+    case "executing":
+      return null;
+    case "completed":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            baseClasses,
+            "size-3 flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-3 text-green-500",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 3,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          )
+        }
+      );
+    case "error":
+    case "failed":
+    case "rejected":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            baseClasses,
+            "size-3 flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-3 text-red-500",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 3,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          )
+        }
+      );
+  }
+}
+function formatResult(result) {
+  if (!result) return "";
+  if (result.message) return result.message;
+  if (result.error) return result.error;
+  if (result.data) {
+    const data = result.data;
+    if (data.image && typeof data.image === "string" && data.image.startsWith("data:image")) {
+      return `Image (${data.width || "?"}x${data.height || "?"})`;
+    }
+    return JSON.stringify(result.data);
+  }
+  return result.success ? "Success" : "Failed";
+}
+function getResultImage(result) {
+  if (!result?.data) return null;
+  const data = result.data;
+  if (data.image && typeof data.image === "string" && data.image.startsWith("data:image")) {
+    return data.image;
+  }
+  return null;
+}
+function ToolStep({
+  step,
+  showLine = false,
+  debug: debugProp,
+  defaultExpanded,
+  className
+}) {
+  const { isDebug, defaultDebugExpanded } = useCopilotUI();
+  const debug = debugProp ?? isDebug;
+  const [expanded, setExpanded] = React8.useState(
+    defaultExpanded ?? defaultDebugExpanded ?? false
+  );
+  const displayTitle = getDisplayTitle(step);
+  const hasDebugContent = step.args && Object.keys(step.args).length > 0 || step.result;
+  const isExecuting = step.status === "executing";
+  const isCompleted = step.status === "completed";
+  const isError = step.status === "error" || step.status === "failed" || step.status === "rejected";
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    showLine && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute left-[5px] top-4 bottom-0 w-px bg-border",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      !isExecuting && /* @__PURE__ */ jsx(StatusIndicator, { status: step.status, className: "mt-0.5" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => debug && hasDebugContent && setExpanded(!expanded),
+            disabled: !debug || !hasDebugContent,
+            className: cn(
+              "flex items-center gap-2 text-left min-w-0 w-full",
+              debug && hasDebugContent && "cursor-pointer hover:text-foreground",
+              !debug && "cursor-default"
+            ),
+            children: [
+              isExecuting ? /* @__PURE__ */ jsx(TextShimmerLoader, { text: displayTitle, size: "sm" }) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-sm truncate",
+                    isCompleted && "text-foreground",
+                    isError && "text-red-500",
+                    step.status === "pending" && "text-muted-foreground/60"
+                  ),
+                  children: displayTitle
+                }
+              ),
+              debug && hasDebugContent && /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: cn(
+                    "size-3 text-muted-foreground/40 transition-transform ml-auto flex-shrink-0",
+                    expanded && "rotate-90"
+                  ),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M9 5l7 7-7 7"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        debug && expanded && hasDebugContent && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 space-y-1.5", children: [
+          step.args && Object.keys(step.args).length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-[10px] font-mono bg-muted/50 rounded px-2 py-1 overflow-x-auto", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "args: " }),
+            JSON.stringify(step.args)
+          ] }),
+          step.result && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "text-[10px] font-mono rounded px-2 py-1 overflow-x-auto whitespace-pre-wrap break-all",
+                step.result.success !== false ? "bg-green-500/10 text-green-600 dark:text-green-400" : "bg-red-500/10 text-red-600 dark:text-red-400"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "result: " }),
+                formatResult(step.result),
+                getResultImage(step.result) && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: getResultImage(step.result),
+                    alt: "Screenshot",
+                    className: "mt-1.5 rounded border border-border max-w-full max-h-48 object-contain"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        isError && step.error && !step.result && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] font-mono bg-red-500/10 text-red-600 dark:text-red-400 rounded px-1.5 py-0.5", children: step.error })
+      ] })
+    ] })
+  ] });
+}
+function ToolSteps({
+  steps,
+  debug,
+  defaultExpanded = false,
+  className
+}) {
+  if (steps.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1.5", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(
+    ToolStep,
+    {
+      step,
+      showLine: index < steps.length - 1,
+      debug,
+      defaultExpanded
+    },
+    step.id
+  )) });
+}
+function InlineToolSteps({
+  steps,
+  maxVisible = 5,
+  className
+}) {
+  if (steps.length === 0) return null;
+  const visibleSteps = steps.slice(0, maxVisible);
+  const hiddenCount = steps.length - maxVisible;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), children: [
+    visibleSteps.map((step) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        title: `${step.name}: ${step.status}`,
+        className: "flex items-center",
+        children: /* @__PURE__ */ jsx(StatusIndicator, { status: step.status })
+      },
+      step.id
+    )),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+      "+",
+      hiddenCount
+    ] })
+  ] });
+}
+function SendIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M22 2 11 13" })
+      ]
+    }
+  );
+}
+function StopIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className,
+      children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" })
+    }
+  );
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function ChevronDownIcon2({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function ChevronUpIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+    }
+  );
+}
+function CopyIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+      ]
+    }
+  );
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function ThumbsUpIcon2({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M7 10v12" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })
+      ]
+    }
+  );
+}
+function ThumbsDownIcon2({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M17 14V2" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })
+      ]
+    }
+  );
+}
+function RefreshIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
+      ]
+    }
+  );
+}
+function UserIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+      ]
+    }
+  );
+}
+function BotIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 8V4H8" }),
+        /* @__PURE__ */ jsx("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 14h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 14h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 13v2" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 13v2" })
+      ]
+    }
+  );
+}
+function PlusIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+      ]
+    }
+  );
+}
+function ArrowUpIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 19V5" })
+      ]
+    }
+  );
+}
+function XIcon2({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function AlertTriangleIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
+var ConfirmationContext = React8.createContext(null);
+function useConfirmationContext() {
+  const context = React8.useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error(
+      "Confirmation components must be used within a Confirmation provider"
+    );
+  }
+  return context;
+}
+function Confirmation({
+  children,
+  state = "pending",
+  message,
+  onApprove,
+  onReject,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    ConfirmationContext.Provider,
+    {
+      value: { state, message, onApprove, onReject },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "confirmation rounded-lg border bg-card text-card-foreground",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function ConfirmationPending({
+  children,
+  className
+}) {
+  const { state } = useConfirmationContext();
+  if (state !== "pending") return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("p-4", className), children });
+}
+function ConfirmationApproved({
+  children,
+  className
+}) {
+  const { state } = useConfirmationContext();
+  if (state !== "approved") return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+        children || /* @__PURE__ */ jsx("span", { children: "Approved" })
+      ]
+    }
+  );
+}
+function ConfirmationRejected({
+  children,
+  className
+}) {
+  const { state } = useConfirmationContext();
+  if (state !== "rejected") return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(XIcon2, { className: "h-4 w-4" }),
+        children || /* @__PURE__ */ jsx("span", { children: "Rejected" })
+      ]
+    }
+  );
+}
+function ConfirmationMessage({
+  children,
+  className
+}) {
+  const { message } = useConfirmationContext();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: children || message || "This action requires your approval." })
+  ] });
+}
+function ConfirmationActions({
+  children,
+  className,
+  rejectLabel = "Reject",
+  approveLabel = "Approve"
+}) {
+  const { onApprove, onReject } = useConfirmationContext();
+  if (children) {
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-3 flex justify-end gap-2", className), children });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("mt-3 flex justify-end gap-2", className), children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onReject, children: rejectLabel }),
+    /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", onClick: onApprove, children: approveLabel })
+  ] });
+}
+function SimpleConfirmation({
+  state,
+  message,
+  onApprove,
+  onReject,
+  rejectLabel,
+  approveLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    Confirmation,
+    {
+      state,
+      message,
+      onApprove,
+      onReject,
+      className,
+      children: [
+        /* @__PURE__ */ jsxs(ConfirmationPending, { children: [
+          /* @__PURE__ */ jsx(ConfirmationMessage, {}),
+          /* @__PURE__ */ jsx(
+            ConfirmationActions,
+            {
+              rejectLabel,
+              approveLabel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ConfirmationApproved, {}),
+        /* @__PURE__ */ jsx(ConfirmationRejected, {})
+      ]
+    }
+  );
+}
+var DEFAULT_PERMISSION_OPTIONS = [
+  {
+    value: "ask",
+    label: "Ask every time",
+    description: "Always prompt before this tool runs"
+  },
+  {
+    value: "allow_always",
+    label: "Allow always",
+    description: "Never ask again, always approve"
+  },
+  {
+    value: "session",
+    label: "Allow this session",
+    description: "Allow until you close this page"
+  },
+  {
+    value: "deny_always",
+    label: "Deny always",
+    description: "Never ask again, always deny"
+  }
+];
+function PermissionConfirmation({
+  state,
+  toolName,
+  message,
+  onApprove,
+  onReject,
+  showPermissionOptions = true,
+  permissionOptions = DEFAULT_PERMISSION_OPTIONS,
+  className
+}) {
+  const [selectedPermission, setSelectedPermission] = React8.useState("ask");
+  const [showOptions, setShowOptions] = React8.useState(false);
+  const handleApprove = () => {
+    onApprove?.(selectedPermission);
+  };
+  const handleReject = () => {
+    onReject?.(
+      selectedPermission === "deny_always" ? "deny_always" : void 0
+    );
+  };
+  if (state === "approved") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400 rounded-lg border bg-green-50 dark:bg-green-950/20",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: "Approved" })
+        ]
+      }
+    );
+  }
+  if (state === "rejected") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400 rounded-lg border bg-red-50 dark:bg-red-950/20",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(XIcon2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: "Rejected" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border bg-card text-card-foreground p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
+          /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            toolName && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: toolName }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message || "This tool requires your approval to execute." })
+          ] })
+        ] }),
+        showPermissionOptions && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowOptions(!showOptions),
+              className: "flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: permissionOptions.find((o) => o.value === selectedPermission)?.label }),
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn(
+                      "h-4 w-4 transition-transform",
+                      showOptions && "rotate-180"
+                    ),
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M19 9l-7 7-7-7"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          showOptions && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1 pl-1", children: permissionOptions.map((option) => /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: cn(
+                "flex items-start gap-2 p-2 rounded-md cursor-pointer transition-colors",
+                selectedPermission === option.value ? "bg-primary/10" : "hover:bg-muted/50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "permission",
+                    value: option.value,
+                    checked: selectedPermission === option.value,
+                    onChange: () => setSelectedPermission(option.value),
+                    className: "mt-0.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: option.label }),
+                  option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: option.description })
+                ] })
+              ]
+            },
+            option.value
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleReject, children: "Deny" }),
+          /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", onClick: handleApprove, children: "Allow" })
+        ] })
+      ]
+    }
+  );
+}
+function CompactPermissionConfirmation({
+  state,
+  message,
+  onApprove,
+  onReject,
+  className
+}) {
+  const [rememberChoice, setRememberChoice] = React8.useState(false);
+  const handleApprove = () => {
+    onApprove?.(rememberChoice ? "allow_always" : "ask");
+  };
+  const handleReject = () => {
+    onReject?.(rememberChoice ? "deny_always" : void 0);
+  };
+  if (state === "approved") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: "Approved" })
+        ]
+      }
+    );
+  }
+  if (state === "rejected") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(XIcon2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: "Rejected" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border bg-card text-card-foreground p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
+          /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: message || "This action requires your approval." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-muted-foreground cursor-pointer", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: rememberChoice,
+                onChange: (e) => setRememberChoice(e.target.checked),
+                className: "rounded border-gray-300"
+              }
+            ),
+            "Don't ask again"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleReject, children: "Deny" }),
+            /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", onClick: handleApprove, children: "Allow" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function parseFollowUps(content) {
+  if (!content) {
+    return { cleanContent: content, followUps: [] };
+  }
+  const followUpRegex = /\[FOLLOWUP:\s*([^\]]+)\]/gi;
+  const matches = content.match(followUpRegex);
+  if (!matches || matches.length === 0) {
+    return { cleanContent: content, followUps: [] };
+  }
+  const lastMatch = matches[matches.length - 1];
+  const innerContent = lastMatch.replace(/\[FOLLOWUP:\s*|\]/gi, "");
+  const followUps = innerContent.split("|").map((q) => q.trim()).filter((q) => q.length > 0);
+  const cleanContent = content.replace(followUpRegex, "").trim();
+  return { cleanContent, followUps };
+}
+function FollowUpQuestions({
+  questions,
+  onSelect,
+  className,
+  buttonClassName
+}) {
+  if (!questions || questions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2 mt-2", className), children: questions.map((question, index) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onSelect(question),
+      className: cn(
+        "px-3 py-1.5 text-sm rounded-full",
+        "bg-primary/10 hover:bg-primary/20 text-primary",
+        "border border-primary/20 hover:border-primary/40",
+        "transition-colors duration-150",
+        "text-left whitespace-nowrap",
+        buttonClassName
+      ),
+      children: question
+    },
+    index
+  )) });
+}
+function DevLogger({
+  state,
+  position = "bottom-right",
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("chat");
+  const positionClasses = {
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4"
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(true),
+        className: cn(
+          "fixed z-[9999] flex items-center justify-center",
+          "w-12 h-12 rounded-full shadow-lg",
+          "bg-orange-500 hover:bg-orange-600 text-white",
+          "transition-transform hover:scale-110",
+          positionClasses[position],
+          className
+        ),
+        title: "Open SDK DevLogger",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-6 h-6",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+              }
+            )
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[10000] flex items-center justify-center bg-black/50",
+        onClick: () => setIsOpen(false),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-background border rounded-lg shadow-xl w-[600px] max-h-[80vh] overflow-hidden",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/50", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-orange-500" }),
+                  /* @__PURE__ */ jsx("h2", { className: "font-semibold text-sm", children: "Copilot SDK DevLogger" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setIsOpen(false),
+                    className: "text-muted-foreground hover:text-foreground",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "w-5 h-5",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2,
+                            d: "M6 18L18 6M6 6l12 12"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex border-b", children: ["chat", "tools", "agent", "config"].map((tab) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveTab(tab),
+                  className: cn(
+                    "px-4 py-2 text-sm font-medium capitalize",
+                    activeTab === tab ? "border-b-2 border-primary text-primary" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  children: tab
+                },
+                tab
+              )) }),
+              /* @__PURE__ */ jsxs("div", { className: "p-4 overflow-y-auto max-h-[60vh]", children: [
+                activeTab === "chat" && /* @__PURE__ */ jsx(ChatTab, { state }),
+                activeTab === "tools" && /* @__PURE__ */ jsx(ToolsTab, { state }),
+                activeTab === "agent" && /* @__PURE__ */ jsx(AgentTab, { state }),
+                activeTab === "config" && /* @__PURE__ */ jsx(ConfigTab, { state })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function ChatTab({ state }) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs(Section, { title: "Status", children: [
+    /* @__PURE__ */ jsx(Row, { label: "Loading", value: state.chat.isLoading ? "Yes" : "No" }),
+    /* @__PURE__ */ jsx(Row, { label: "Message Count", value: state.chat.messageCount }),
+    /* @__PURE__ */ jsx(Row, { label: "Thread ID", value: state.chat.threadId, mono: true }),
+    /* @__PURE__ */ jsx(
+      Row,
+      {
+        label: "Error",
+        value: state.chat.error || "None",
+        valueClass: state.chat.error ? "text-red-500" : "text-green-500"
+      }
+    )
+  ] }) });
+}
+function ToolsTab({ state }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs(Section, { title: "Smart Context", children: [
+      /* @__PURE__ */ jsx(Row, { label: "Enabled", value: state.tools.isEnabled ? "Yes" : "No" }),
+      /* @__PURE__ */ jsx(Row, { label: "Capturing", value: state.tools.isCapturing ? "Yes" : "No" }),
+      /* @__PURE__ */ jsx(
+        Row,
+        {
+          label: "Pending Consent",
+          value: state.tools.pendingConsent ? "Yes" : "No"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Section, { title: "Registered Tools", children: state.registered.tools.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No tools registered" }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: state.registered.tools.map((tool) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between text-sm",
+        children: [
+          /* @__PURE__ */ jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: tool.name }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: tool.location })
+        ]
+      },
+      tool.name
+    )) }) }),
+    /* @__PURE__ */ jsxs(Section, { title: "Permissions", children: [
+      /* @__PURE__ */ jsx(Row, { label: "Loaded", value: state.permissions.loaded ? "Yes" : "No" }),
+      state.permissions.stored.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1", children: state.permissions.stored.map((p) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between text-sm",
+          children: [
+            /* @__PURE__ */ jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: p.toolName }),
+            /* @__PURE__ */ jsx(Badge, { level: p.level })
+          ]
+        },
+        p.toolName
+      )) })
+    ] })
+  ] });
+}
+function AgentTab({ state }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs(Section, { title: "Loop State", children: [
+      /* @__PURE__ */ jsx(
+        Row,
+        {
+          label: "Iteration",
+          value: `${state.agentLoop.iteration} / ${state.agentLoop.maxIterations}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Row,
+        {
+          label: "Pending Approvals",
+          value: state.agentLoop.pendingApprovals
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Section, { title: "Tool Executions", children: state.agentLoop.toolExecutions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No executions" }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: state.agentLoop.toolExecutions.map((exec) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "border rounded p-2 text-sm space-y-1",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("code", { className: "font-medium", children: exec.name }),
+            /* @__PURE__ */ jsx(StatusBadge, { status: exec.status })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "ID: ",
+              exec.id.slice(0, 12),
+              "..."
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Approval: ",
+              exec.approvalStatus
+            ] })
+          ] })
+        ]
+      },
+      exec.id
+    )) }) }),
+    /* @__PURE__ */ jsx(Section, { title: "Registered Actions", children: state.registered.actions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No actions registered" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: state.registered.actions.map((action) => /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: "bg-muted px-1.5 py-0.5 rounded text-xs",
+        children: action.name
+      },
+      action.name
+    )) }) }),
+    /* @__PURE__ */ jsx(Section, { title: "Context Tree", children: /* @__PURE__ */ jsx(Row, { label: "Context Items", value: state.registered.contextCount }) })
+  ] });
+}
+function ConfigTab({ state }) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs(Section, { title: "Provider", children: [
+    /* @__PURE__ */ jsx(Row, { label: "Provider", value: state.config.provider || "Not set" }),
+    /* @__PURE__ */ jsx(Row, { label: "Model", value: state.config.model || "Default" }),
+    /* @__PURE__ */ jsx(
+      Row,
+      {
+        label: "Runtime URL",
+        value: state.config.runtimeUrl || "Not set",
+        mono: true
+      }
+    )
+  ] }) });
+}
+function Section({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2", children: title }),
+    children
+  ] });
+}
+function Row({
+  label,
+  value,
+  mono,
+  valueClass
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          mono && "font-mono text-xs bg-muted px-1.5 py-0.5 rounded",
+          valueClass
+        ),
+        children: value
+      }
+    )
+  ] });
+}
+function Badge({ level }) {
+  const colors = {
+    allow_always: "bg-green-100 text-green-800",
+    deny_always: "bg-red-100 text-red-800",
+    session: "bg-blue-100 text-blue-800",
+    ask: "bg-gray-100 text-gray-800"
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "px-1.5 py-0.5 rounded text-xs font-medium",
+        colors[level] || colors.ask
+      ),
+      children: level
+    }
+  );
+}
+function StatusBadge({ status }) {
+  const colors = {
+    pending: "bg-yellow-100 text-yellow-800",
+    executing: "bg-blue-100 text-blue-800",
+    completed: "bg-green-100 text-green-800",
+    error: "bg-red-100 text-red-800"
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "px-1.5 py-0.5 rounded text-xs font-medium",
+        colors[status] || "bg-gray-100 text-gray-800"
+      ),
+      children: status
+    }
+  );
+}
+var icons = {
+  vision: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] }),
+  tools: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) }),
+  thinking: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] }),
+  streaming: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }),
+  pdf: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+    /* @__PURE__ */ jsx("polyline", { points: "10 9 9 9 8 9" })
+  ] }),
+  audio: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+  ] }),
+  video: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("polygon", { points: "23 7 16 12 23 17 23 7" }),
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+  ] }),
+  json: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 6h16" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 12h16" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 18h12" })
+  ] })
+};
+var labels = {
+  vision: "Vision",
+  tools: "Tools",
+  thinking: "Thinking",
+  streaming: "Streaming",
+  pdf: "PDF",
+  audio: "Audio",
+  video: "Video",
+  json: "JSON"
+};
+var descriptions = {
+  vision: "Supports image inputs",
+  tools: "Supports function calling",
+  thinking: "Extended reasoning mode",
+  streaming: "Real-time streaming",
+  pdf: "Can process PDF files",
+  audio: "Supports audio inputs",
+  video: "Supports video inputs",
+  json: "Structured JSON output"
+};
+function CapabilityBadge({
+  type,
+  supported = true,
+  showLabel = false,
+  size = "sm",
+  className
+}) {
+  const sizeClasses = {
+    sm: "h-5 px-1.5 text-[10px]",
+    md: "h-6 px-2 text-xs",
+    lg: "h-7 px-2.5 text-sm"
+  };
+  const iconSizes = {
+    sm: "w-3 h-3",
+    md: "w-3.5 h-3.5",
+    lg: "w-4 h-4"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full font-medium transition-colors",
+        sizeClasses[size],
+        supported ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground opacity-50",
+        className
+      ),
+      title: `${labels[type]}: ${descriptions[type]}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", iconSizes[size]), children: icons[type] }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: labels[type] })
+      ]
+    }
+  );
+}
+function CapabilityList({
+  capabilities,
+  showLabels = false,
+  onlySupported = true,
+  size = "sm",
+  className
+}) {
+  const items = [
+    { type: "vision", supported: capabilities.supportsVision ?? false },
+    { type: "tools", supported: capabilities.supportsTools ?? false },
+    { type: "thinking", supported: capabilities.supportsThinking ?? false },
+    { type: "streaming", supported: capabilities.supportsStreaming ?? false },
+    { type: "pdf", supported: capabilities.supportsPDF ?? false },
+    { type: "audio", supported: capabilities.supportsAudio ?? false },
+    { type: "video", supported: capabilities.supportsVideo ?? false },
+    { type: "json", supported: capabilities.supportsJsonMode ?? false }
+  ];
+  const filteredItems = onlySupported ? items.filter((item) => item.supported) : items;
+  if (filteredItems.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1", className), children: filteredItems.map((item) => /* @__PURE__ */ jsx(
+    CapabilityBadge,
+    {
+      type: item.type,
+      supported: item.supported,
+      showLabel: showLabels,
+      size
+    },
+    item.type
+  )) });
+}
+function ModelSelector({
+  value,
+  onChange,
+  providers,
+  models,
+  currentCapabilities,
+  placeholder = "Select model...",
+  disabled = false,
+  size = "md",
+  showCapabilities = true,
+  className
+}) {
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const containerRef = React8.useRef(null);
+  React8.useEffect(() => {
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedModel = React8.useMemo(() => {
+    if (!value) return null;
+    if (providers) {
+      for (const provider of providers) {
+        const model = provider.models.find((m) => m.id === value);
+        if (model) return { ...model, provider: provider.name };
+      }
+    }
+    if (models) {
+      return models.find((m) => m.id === value) || null;
+    }
+    return null;
+  }, [value, providers, models]);
+  const sizeClasses = {
+    sm: "h-8 text-xs px-2",
+    md: "h-9 text-sm px-3",
+    lg: "h-10 text-base px-4"
+  };
+  const handleSelect = (modelId, provider) => {
+    onChange?.(modelId, provider);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        disabled,
+        className: cn(
+          "flex items-center justify-between gap-2 w-full rounded-md border bg-background",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          sizeClasses[size]
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 min-w-0", children: selectedModel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: selectedModel.name || selectedModel.id }),
+            selectedModel.provider && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[10px] uppercase", children: selectedModel.provider })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: cn(
+                "w-4 h-4 flex-shrink-0 text-muted-foreground transition-transform",
+                isOpen && "rotate-180"
+              ),
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M19 9l-7 7-7-7"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    showCapabilities && currentCapabilities && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
+      CapabilityList,
+      {
+        capabilities: currentCapabilities,
+        size: "sm",
+        onlySupported: true
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "absolute z-50 top-full left-0 right-0 mt-1",
+          "max-h-[300px] overflow-auto",
+          "rounded-md border bg-popover text-popover-foreground shadow-md",
+          "animate-in fade-in-0 zoom-in-95"
+        ),
+        children: [
+          providers?.map((provider) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider bg-muted/50", children: provider.label || provider.name }),
+            provider.models.map((model) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSelect(model.id, provider.name),
+                className: cn(
+                  "flex flex-col gap-0.5 w-full px-3 py-2 text-left",
+                  "hover:bg-accent hover:text-accent-foreground",
+                  "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+                  value === model.id && "bg-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: model.name || model.id }),
+                    value === model.id && /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "w-4 h-4 text-primary",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        strokeWidth: 2,
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M5 13l4 4L19 7"
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  showCapabilities && model.capabilities && /* @__PURE__ */ jsx(
+                    CapabilityList,
+                    {
+                      capabilities: model.capabilities,
+                      size: "sm",
+                      onlySupported: true
+                    }
+                  )
+                ]
+              },
+              model.id
+            ))
+          ] }, provider.name)),
+          models?.map((model) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelect(model.id, model.provider),
+              className: cn(
+                "flex flex-col gap-0.5 w-full px-3 py-2 text-left",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+                value === model.id && "bg-accent"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: model.name || model.id }),
+                  model.provider && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[10px] uppercase", children: model.provider }),
+                  value === model.id && /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-4 h-4 text-primary ml-auto",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          d: "M5 13l4 4L19 7"
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                showCapabilities && model.capabilities && /* @__PURE__ */ jsx(
+                  CapabilityList,
+                  {
+                    capabilities: model.capabilities,
+                    size: "sm",
+                    onlySupported: true
+                  }
+                )
+              ]
+            },
+            model.id
+          )),
+          !providers?.length && !models?.length && /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models available" })
+        ]
+      }
+    )
+  ] });
+}
+function SimpleModelSelector({
+  value,
+  onChange,
+  models,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      value: value || "",
+      onChange: (e) => onChange?.(e.target.value),
+      disabled,
+      className: cn(
+        "h-9 px-3 rounded-md border bg-background text-sm",
+        "focus:outline-none focus:ring-2 focus:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select model..." }),
+        models.map((modelId) => /* @__PURE__ */ jsx("option", { value: modelId, children: modelId }, modelId))
+      ]
+    }
+  );
+}
+function ChatHeader({ title, onClose, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between border-b px-4 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-foreground", children: title || "Chat" }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            "aria-label": "Close chat",
+            children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Suggestions({
+  suggestions,
+  onSuggestionClick,
+  className
+}) {
+  if (!suggestions.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2 px-4 py-2", className), children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSuggestionClick?.(suggestion),
+      className: "inline-flex items-center rounded-full border bg-background px-3 py-1.5 text-sm transition-colors hover:bg-muted",
+      children: suggestion
+    },
+    index
+  )) });
+}
+function DefaultMessage({
+  message,
+  userAvatar,
+  assistantAvatar,
+  showUserAvatar = false,
+  userMessageClassName,
+  assistantMessageClassName,
+  size = "sm",
+  isLastMessage = false,
+  isLoading = false,
+  toolRenderers,
+  onApproveToolExecution,
+  onRejectToolExecution,
+  showFollowUps = true,
+  onFollowUpClick,
+  followUpClassName,
+  followUpButtonClassName
+}) {
+  const isUser = message.role === "user";
+  const isStreaming = isLastMessage && isLoading;
+  const { cleanContent, followUps } = React8.useMemo(() => {
+    if (isUser || !message.content) {
+      return { cleanContent: message.content, followUps: [] };
+    }
+    return parseFollowUps(message.content);
+  }, [message.content, isUser]);
+  const shouldShowFollowUps = showFollowUps && !isUser && isLastMessage && !isLoading && followUps.length > 0 && onFollowUpClick;
+  if (isUser) {
+    const hasAttachments = message.attachments && message.attachments.length > 0;
+    return /* @__PURE__ */ jsxs(
+      Message,
+      {
+        className: cn(
+          "flex gap-2",
+          showUserAvatar ? "justify-end" : "justify-end"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end max-w-[80%]", children: [
+            message.content && /* @__PURE__ */ jsx(
+              MessageContent,
+              {
+                className: cn(
+                  "rounded-lg px-4 py-2 bg-primary text-primary-foreground",
+                  userMessageClassName
+                ),
+                size,
+                children: message.content
+              }
+            ),
+            hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) })
+          ] }),
+          showUserAvatar && /* @__PURE__ */ jsx(
+            MessageAvatar,
+            {
+              src: userAvatar.src || "",
+              alt: "User",
+              fallback: userAvatar.fallback
+            }
+          )
+        ]
+      }
+    );
+  }
+  const pendingApprovalTools = message.toolExecutions?.filter(
+    (exec) => exec.approvalStatus === "required"
+  );
+  const completedTools = message.toolExecutions?.filter(
+    (exec) => exec.approvalStatus !== "required"
+  );
+  const toolsWithCustomRenderer = completedTools?.filter(
+    (exec) => toolRenderers && toolRenderers[exec.name]
+  );
+  const toolsWithoutCustomRenderer = completedTools?.filter(
+    (exec) => !toolRenderers || !toolRenderers[exec.name]
+  );
+  const toolSteps = toolsWithoutCustomRenderer?.map((exec) => ({
+    id: exec.id,
+    name: exec.name,
+    args: exec.args,
+    status: exec.status,
+    result: exec.result,
+    error: exec.error
+  }));
+  return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx(
+      MessageAvatar,
+      {
+        src: assistantAvatar.src || "",
+        alt: "Assistant",
+        fallback: assistantAvatar.fallback,
+        className: "bg-primary text-primary-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 max-w-[80%]", children: [
+      message.thinking && /* @__PURE__ */ jsx(
+        SimpleReasoning,
+        {
+          content: message.thinking,
+          isStreaming,
+          className: "mb-2"
+        }
+      ),
+      cleanContent?.trim() && /* @__PURE__ */ jsx(
+        MessageContent,
+        {
+          className: cn(
+            "rounded-lg px-4 py-2 bg-muted",
+            assistantMessageClassName
+          ),
+          markdown: true,
+          size,
+          children: cleanContent
+        }
+      ),
+      toolsWithCustomRenderer && toolsWithCustomRenderer.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: toolsWithCustomRenderer.map((exec) => {
+        const Renderer = toolRenderers[exec.name];
+        return /* @__PURE__ */ jsx(
+          Renderer,
+          {
+            execution: {
+              id: exec.id,
+              name: exec.name,
+              args: exec.args,
+              status: exec.status,
+              result: exec.result,
+              error: exec.error,
+              approvalStatus: exec.approvalStatus
+            }
+          },
+          exec.id
+        );
+      }) }),
+      toolSteps && toolSteps.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-lg bg-muted/50 px-3 py-2", children: /* @__PURE__ */ jsx(ToolSteps, { steps: toolSteps }) }),
+      pendingApprovalTools && pendingApprovalTools.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: pendingApprovalTools.map((tool) => /* @__PURE__ */ jsx(
+        PermissionConfirmation,
+        {
+          state: "pending",
+          toolName: tool.name,
+          message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
+          onApprove: (permissionLevel) => onApproveToolExecution?.(tool.id, permissionLevel),
+          onReject: (permissionLevel) => onRejectToolExecution?.(tool.id, void 0, permissionLevel)
+        },
+        tool.id
+      )) }),
+      message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
+      shouldShowFollowUps && /* @__PURE__ */ jsx(
+        FollowUpQuestions,
+        {
+          questions: followUps,
+          onSelect: onFollowUpClick,
+          className: followUpClassName,
+          buttonClassName: followUpButtonClassName
+        }
+      )
+    ] })
+  ] });
+}
+function AttachmentPreview({ attachment }) {
+  const [expanded, setExpanded] = React8.useState(false);
+  if (attachment.type !== "image") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attachment.type }),
+      /* @__PURE__ */ jsx("span", { children: attachment.filename || "Attachment" })
+    ] });
+  }
+  let src;
+  if (attachment.url) {
+    src = attachment.url;
+  } else if (attachment.data) {
+    src = attachment.data.startsWith("data:") ? attachment.data : `data:${attachment.mimeType};base64,${attachment.data}`;
+  } else {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(true),
+        className: "relative rounded-lg overflow-hidden border bg-muted/50 hover:opacity-90 transition-opacity",
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: attachment.filename || "Image",
+            className: "max-w-[200px] max-h-[150px] object-cover"
+          }
+        )
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
+        onClick: () => setExpanded(false),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-[90vw] max-h-[90vh]", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: attachment.filename || "Image (expanded)",
+              className: "max-w-full max-h-full object-contain rounded-lg"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "absolute top-2 right-2 bg-white/90 rounded-full p-2 hover:bg-white transition-colors",
+              onClick: (e) => {
+                e.stopPropagation();
+                setExpanded(false);
+              },
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M6 18L18 6M6 6l12 12"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var DEFAULT_MAX_FILE_SIZE = 5 * 1024 * 1024;
+var DEFAULT_ALLOWED_TYPES = ["image/*", "application/pdf"];
+function getAttachmentType(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.startsWith("video/")) return "video";
+  return "file";
+}
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        reject(new Error("Failed to read file"));
+      }
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
+function generateAttachmentId() {
+  return `att_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+function Chat({
+  // Core
+  messages = [],
+  onSendMessage,
+  onStop,
+  isLoading = false,
+  // Labels
+  placeholder = "Type a message...",
+  welcomeMessage,
+  title,
+  // Header
+  showHeader = false,
+  onClose,
+  // Appearance
+  showPoweredBy = true,
+  showUserAvatar = false,
+  userAvatar = { fallback: "U" },
+  assistantAvatar = { fallback: "AI" },
+  loaderVariant = "typing",
+  fontSize = "sm",
+  // Attachments
+  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  allowedFileTypes = DEFAULT_ALLOWED_TYPES,
+  attachmentsEnabled = true,
+  attachmentsDisabledTooltip = "Attachments not supported by this model",
+  processAttachment: processAttachmentProp,
+  // Suggestions
+  suggestions = [],
+  onSuggestionClick,
+  // Tool Executions
+  isProcessing = false,
+  toolRenderers,
+  onApproveToolExecution,
+  onRejectToolExecution,
+  // Follow-up Questions
+  showFollowUps = true,
+  followUpClassName,
+  followUpButtonClassName,
+  // Custom rendering
+  renderMessage,
+  renderInput,
+  renderHeader,
+  // Styling
+  className,
+  classNames = {}
+}) {
+  const [input, setInput] = useState("");
+  const [pendingAttachments, setPendingAttachments] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef(null);
+  const fileInputId = useId();
+  const isFileTypeAllowed = useCallback(
+    (file) => {
+      for (const type of allowedFileTypes) {
+        if (type.endsWith("/*")) {
+          const category = type.slice(0, -2);
+          if (file.type.startsWith(category + "/")) return true;
+        } else if (file.type === type) {
+          return true;
+        }
+      }
+      return false;
+    },
+    [allowedFileTypes]
+  );
+  const handleFileSelect = useCallback(
+    async (files) => {
+      if (!files || !attachmentsEnabled) return;
+      for (const file of Array.from(files)) {
+        if (file.size > maxFileSize) {
+          const sizeMB = (maxFileSize / (1024 * 1024)).toFixed(0);
+          console.warn(`File ${file.name} exceeds ${sizeMB}MB limit`);
+          continue;
+        }
+        if (!isFileTypeAllowed(file)) {
+          console.warn(`File type ${file.type} is not allowed`);
+          continue;
+        }
+        const id = generateAttachmentId();
+        const previewUrl = URL.createObjectURL(file);
+        setPendingAttachments((prev) => [
+          ...prev,
+          {
+            id,
+            file,
+            previewUrl,
+            attachment: {
+              type: getAttachmentType(file.type),
+              data: "",
+              mimeType: file.type,
+              filename: file.name
+            },
+            status: "processing"
+          }
+        ]);
+        try {
+          let attachment;
+          if (processAttachmentProp) {
+            attachment = await processAttachmentProp(file);
+          } else {
+            const data = await fileToBase64(file);
+            attachment = {
+              type: getAttachmentType(file.type),
+              data,
+              mimeType: file.type,
+              filename: file.name
+            };
+          }
+          setPendingAttachments(
+            (prev) => prev.map(
+              (att) => att.id === id ? { ...att, status: "ready", attachment } : att
+            )
+          );
+        } catch (error) {
+          setPendingAttachments(
+            (prev) => prev.map(
+              (att) => att.id === id ? {
+                ...att,
+                status: "error",
+                error: "Failed to process file"
+              } : att
+            )
+          );
+        }
+      }
+    },
+    [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      handleFileSelect(e.target.files);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [handleFileSelect]
+  );
+  const removePendingAttachment = useCallback((id) => {
+    setPendingAttachments((prev) => {
+      const att = prev.find((a) => a.id === id);
+      if (att) {
+        URL.revokeObjectURL(att.previewUrl);
+      }
+      return prev.filter((a) => a.id !== id);
+    });
+  }, []);
+  const handleDragOver = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (attachmentsEnabled) {
+        setIsDragging(true);
+      }
+    },
+    [attachmentsEnabled]
+  );
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      if (attachmentsEnabled) {
+        handleFileSelect(e.dataTransfer.files);
+      }
+    },
+    [attachmentsEnabled, handleFileSelect]
+  );
+  const handleSubmit = useCallback(() => {
+    const hasContent = input.trim();
+    const hasAttachments = pendingAttachments.some(
+      (att) => att.status === "ready"
+    );
+    if (!hasContent && !hasAttachments || isLoading) return;
+    const attachments = pendingAttachments.filter((att) => att.status === "ready").map((att) => att.attachment);
+    onSendMessage?.(input, attachments.length > 0 ? attachments : void 0);
+    pendingAttachments.forEach((att) => URL.revokeObjectURL(att.previewUrl));
+    setPendingAttachments([]);
+    setInput("");
+  }, [input, isLoading, onSendMessage, pendingAttachments]);
+  const handleSuggestionClick = useCallback(
+    (suggestion) => {
+      if (onSuggestionClick) {
+        onSuggestionClick(suggestion);
+      } else {
+        onSendMessage?.(suggestion);
+      }
+    },
+    [onSuggestionClick, onSendMessage]
+  );
+  const acceptString = allowedFileTypes.join(",");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full flex-col bg-background relative",
+        className,
+        classNames.root
+      ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        isDragging && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-primary font-medium text-lg", children: "Drop files here" }) }),
+        showHeader && (renderHeader ? renderHeader() : /* @__PURE__ */ jsx(
+          ChatHeader,
+          {
+            title,
+            onClose,
+            className: classNames.header
+          }
+        )),
+        /* @__PURE__ */ jsxs(
+          ChatContainerRoot,
+          {
+            className: cn("relative flex-1", classNames.container),
+            children: [
+              /* @__PURE__ */ jsxs(
+                ChatContainerContent,
+                {
+                  className: cn("gap-4 p-4", classNames.messageList),
+                  children: [
+                    messages.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-muted-foreground", children: welcomeMessage || "Send a message to start the conversation" }),
+                    messages.map((message, index) => {
+                      const isLastMessage = index === messages.length - 1;
+                      const isEmptyAssistant = message.role === "assistant" && !message.content?.trim();
+                      const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
+                      const hasToolExecutions = message.toolExecutions && message.toolExecutions.length > 0;
+                      const hasPendingApprovals = message.toolExecutions?.some(
+                        (exec) => exec.approvalStatus === "required"
+                      );
+                      if (isEmptyAssistant) {
+                        if (hasToolCalls || hasToolExecutions) ; else if (isLastMessage && hasPendingApprovals) ; else if (isLastMessage && isLoading && !isProcessing) {
+                          return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+                            /* @__PURE__ */ jsx(
+                              MessageAvatar,
+                              {
+                                src: assistantAvatar.src || "",
+                                alt: "Assistant",
+                                fallback: assistantAvatar.fallback,
+                                className: "bg-primary text-primary-foreground"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: loaderVariant, size: "sm" }) })
+                          ] }, message.id);
+                        } else {
+                          return null;
+                        }
+                      }
+                      const savedExecutions = message.metadata?.toolExecutions;
+                      const messageToolExecutions = message.toolExecutions || savedExecutions;
+                      const messageWithExecutions = messageToolExecutions ? { ...message, toolExecutions: messageToolExecutions } : message;
+                      const handleFollowUpClick = (question) => {
+                        if (onSuggestionClick) {
+                          onSuggestionClick(question);
+                        } else {
+                          onSendMessage?.(question);
+                        }
+                      };
+                      return renderMessage ? /* @__PURE__ */ jsx(React8__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
+                        DefaultMessage,
+                        {
+                          message: messageWithExecutions,
+                          userAvatar,
+                          assistantAvatar,
+                          showUserAvatar,
+                          userMessageClassName: classNames.userMessage,
+                          assistantMessageClassName: classNames.assistantMessage,
+                          size: fontSize,
+                          isLastMessage,
+                          isLoading,
+                          toolRenderers,
+                          onApproveToolExecution,
+                          onRejectToolExecution,
+                          showFollowUps,
+                          onFollowUpClick: handleFollowUpClick,
+                          followUpClassName,
+                          followUpButtonClassName
+                        },
+                        message.id
+                      );
+                    }),
+                    isProcessing && /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        MessageAvatar,
+                        {
+                          src: assistantAvatar?.src || "",
+                          alt: "Assistant",
+                          fallback: assistantAvatar?.fallback || "AI",
+                          className: "bg-primary text-primary-foreground"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted px-4 py-2 flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Continuing..." })
+                      ] })
+                    ] }),
+                    isLoading && !isProcessing && (() => {
+                      const lastMessage = messages[messages.length - 1];
+                      if (lastMessage?.role === "user") {
+                        return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+                          /* @__PURE__ */ jsx(
+                            MessageAvatar,
+                            {
+                              src: assistantAvatar?.src || "",
+                              alt: "Assistant",
+                              fallback: assistantAvatar?.fallback || "AI",
+                              className: "bg-primary text-primary-foreground"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: loaderVariant, size: "sm" }) })
+                        ] });
+                      }
+                      return null;
+                    })(),
+                    /* @__PURE__ */ jsx(ChatContainerScrollAnchor, {})
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute right-4 bottom-4", children: /* @__PURE__ */ jsx(ScrollButton, { className: "shadow-sm" }) })
+            ]
+          }
+        ),
+        suggestions.length > 0 && !isLoading && /* @__PURE__ */ jsx(
+          Suggestions,
+          {
+            suggestions,
+            onSuggestionClick: handleSuggestionClick,
+            className: classNames.suggestions
+          }
+        ),
+        renderInput ? renderInput() : /* @__PURE__ */ jsxs("div", { className: cn("p-2", classNames.input), children: [
+          pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+            att.attachment.type === "image" ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: att.previewUrl,
+                alt: att.file.name,
+                className: "w-16 h-16 object-cover rounded-lg border"
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "w-16 h-16 bg-muted rounded-lg border flex flex-col items-center justify-center p-1", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-6 h-6 text-muted-foreground",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 1.5,
+                      d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground truncate w-full text-center mt-1", children: att.file.name.length > 10 ? att.file.name.slice(0, 8) + "..." : att.file.name })
+            ] }),
+            att.status === "processing" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
+            att.status === "error" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => removePendingAttachment(att.id),
+                className: "absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+                type: "button",
+                children: /* @__PURE__ */ jsx(XIcon2, { className: "w-3 h-3" })
+              }
+            )
+          ] }, att.id)) }),
+          /* @__PURE__ */ jsxs(
+            PromptInput,
+            {
+              value: input,
+              onValueChange: setInput,
+              isLoading,
+              onSubmit: handleSubmit,
+              className: "",
+              children: [
+                /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder }),
+                /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex justify-between", children: [
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    PromptInputAction,
+                    {
+                      tooltip: attachmentsEnabled ? "Attach files" : attachmentsDisabledTooltip,
+                      children: /* @__PURE__ */ jsxs(
+                        "label",
+                        {
+                          htmlFor: fileInputId,
+                          className: cn(
+                            "flex h-8 w-8 items-center justify-center rounded-2xl",
+                            attachmentsEnabled ? "hover:bg-secondary-foreground/10 cursor-pointer" : "opacity-50 cursor-not-allowed"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                ref: fileInputRef,
+                                type: "file",
+                                multiple: true,
+                                accept: acceptString,
+                                onChange: handleInputChange,
+                                className: "hidden",
+                                id: fileInputId,
+                                disabled: !attachmentsEnabled
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(PlusIcon, { className: "text-primary size-5" })
+                          ]
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(PromptInputAction, { tooltip: isLoading ? "Stop" : "Send", children: isLoading ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "destructive",
+                      className: "rounded-full size-9",
+                      onClick: onStop,
+                      children: /* @__PURE__ */ jsx(StopIcon, { className: "h-4 w-4" })
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "rounded-full size-9",
+                      onClick: handleSubmit,
+                      disabled: !input.trim() && !pendingAttachments.some((att) => att.status === "ready"),
+                      children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4" })
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ToolExecutionMessage({
+  executions,
+  assistantAvatar = { fallback: "AI" },
+  onApprove,
+  onReject,
+  className
+}) {
+  if (!executions || executions.length === 0) return null;
+  const pendingApprovals = executions.filter(
+    (exec) => exec.approvalStatus === "required"
+  );
+  const otherExecutions = executions.filter(
+    (exec) => exec.approvalStatus !== "required"
+  );
+  const toolSteps = otherExecutions.map((exec) => ({
+    id: exec.id,
+    name: exec.name,
+    args: exec.args,
+    status: exec.status,
+    result: exec.result,
+    error: exec.error
+  }));
+  const hasExecuting = executions.some((exec) => exec.status === "executing");
+  executions.some((exec) => exec.status === "completed");
+  const allCompleted = executions.every(
+    (exec) => exec.status === "completed" || exec.status === "error"
+  );
+  return /* @__PURE__ */ jsxs(Message, { className: cn("flex gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      MessageAvatar,
+      {
+        src: assistantAvatar.src || "",
+        alt: "Assistant",
+        fallback: assistantAvatar.fallback,
+        className: "bg-primary text-primary-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 max-w-[85%]", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        hasExecuting && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-3.5 animate-spin text-primary",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        !hasExecuting && allCompleted && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "size-3.5 text-green-500",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2.5,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M5 13l4 4L19 7"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: hasExecuting ? "Running tools..." : allCompleted ? `${executions.length} tool${executions.length > 1 ? "s" : ""} completed` : "Tools" })
+      ] }) }),
+      pendingApprovals.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 space-y-2", children: pendingApprovals.map((tool) => /* @__PURE__ */ jsx(
+        PermissionConfirmation,
+        {
+          state: "pending",
+          toolName: tool.name,
+          message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
+          onApprove: (permissionLevel) => onApprove?.(tool.id, permissionLevel),
+          onReject: (permissionLevel) => onReject?.(tool.id, void 0, permissionLevel)
+        },
+        tool.id
+      )) }),
+      toolSteps.length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card px-3 py-2.5 shadow-sm", children: /* @__PURE__ */ jsx(ToolSteps, { steps: toolSteps }) })
+    ] })
+  ] });
+}
+function CopilotChat(props) {
+  const {
+    messages,
+    isLoading,
+    sendMessage,
+    stop,
+    toolExecutions: rawToolExecutions,
+    approveToolExecution,
+    rejectToolExecution
+  } = useCopilot();
+  const toolExecutions = rawToolExecutions.map(
+    (exec) => ({
+      id: exec.id,
+      name: exec.name,
+      args: exec.args,
+      status: exec.status,
+      result: exec.result,
+      error: exec.error,
+      timestamp: exec.startedAt ? exec.startedAt.getTime() : Date.now(),
+      approvalStatus: exec.approvalStatus
+    })
+  );
+  const toolResultsMap = /* @__PURE__ */ new Map();
+  messages.filter((m) => m.role === "tool" && m.toolCallId).forEach((m) => {
+    toolResultsMap.set(m.toolCallId, m.content ?? "");
+  });
+  const visibleMessages = messages.filter((m) => m.role !== "tool").map((m) => {
+    let messageToolExecutions;
+    if (m.role === "assistant" && m.toolCalls && m.toolCalls.length > 0) {
+      const toolCallIds = new Set(
+        m.toolCalls.map((tc) => tc.id)
+      );
+      const liveExecutions = toolExecutions.filter(
+        (exec) => toolCallIds.has(exec.id)
+      );
+      if (liveExecutions.length > 0) {
+        messageToolExecutions = liveExecutions.map(
+          (exec) => {
+            if (!exec.result && toolResultsMap.has(exec.id)) {
+              const resultContent = toolResultsMap.get(exec.id);
+              try {
+                return { ...exec, result: JSON.parse(resultContent) };
+              } catch {
+                return {
+                  ...exec,
+                  result: { success: true, message: resultContent }
+                };
+              }
+            }
+            return exec;
+          }
+        );
+      } else {
+        messageToolExecutions = m.toolCalls.map(
+          (tc) => {
+            const resultContent = toolResultsMap.get(tc.id);
+            let result = void 0;
+            if (resultContent) {
+              try {
+                result = JSON.parse(resultContent);
+              } catch {
+                result = { success: true, message: resultContent };
+              }
+            }
+            let args = {};
+            try {
+              args = JSON.parse(tc.function.arguments || "{}");
+            } catch {
+            }
+            return {
+              id: tc.id,
+              name: tc.function.name,
+              args,
+              status: result ? "completed" : "pending",
+              result,
+              timestamp: Date.now()
+              // Historical - use current time
+            };
+          }
+        );
+      }
+    }
+    const savedExecutions = m.metadata?.toolExecutions;
+    if (savedExecutions && savedExecutions.length > 0 && !messageToolExecutions) {
+      messageToolExecutions = savedExecutions;
+    }
+    return {
+      id: m.id,
+      role: m.role,
+      content: m.content ?? "",
+      thinking: m.thinking,
+      // Include attachments (images, files)
+      attachments: m.attachments,
+      // Include tool_calls for assistant messages
+      tool_calls: m.toolCalls,
+      // Attach matched tool executions to assistant messages
+      toolExecutions: messageToolExecutions
+    };
+  });
+  const suggestions = visibleMessages.length === 0 && props.suggestions?.length ? props.suggestions : [];
+  const lastMessage = messages[messages.length - 1];
+  const isInToolFlow = lastMessage?.role === "assistant" && lastMessage.toolCalls?.length;
+  let isProcessingToolResults = false;
+  if (isLoading && isInToolFlow) {
+    const currentToolCallIds = new Set(
+      lastMessage.toolCalls?.map(
+        (tc) => tc.id
+      ) || []
+    );
+    const currentExecutions = toolExecutions.filter(
+      (exec) => currentToolCallIds.has(exec.id)
+    );
+    const hasCompletedTools = currentExecutions.some(
+      (exec) => exec.status === "completed" || exec.status === "error" || exec.status === "failed"
+    );
+    const hasExecutingTools = currentExecutions.some(
+      (exec) => exec.status === "executing" || exec.status === "pending"
+    );
+    isProcessingToolResults = hasCompletedTools && !hasExecutingTools;
+  }
+  return /* @__PURE__ */ jsx(
+    Chat,
+    {
+      ...props,
+      messages: visibleMessages,
+      onSendMessage: sendMessage,
+      onStop: stop,
+      isLoading,
+      showPoweredBy: props.showPoweredBy ?? true,
+      suggestions,
+      isProcessing: isProcessingToolResults,
+      onApproveToolExecution: approveToolExecution,
+      onRejectToolExecution: rejectToolExecution
+    }
+  );
+}
+var ConnectedChat = CopilotChat;
+function YourGPTLogo({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5" })
+      ]
+    }
+  );
+}
+function PoweredBy({ className, showLogo = true }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-1.5 py-2 text-xs text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: "Powered by" }),
+        showLogo && /* @__PURE__ */ jsx(YourGPTLogo, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://yourgpt.ai",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "font-medium text-foreground hover:underline",
+            children: "YourGPT"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, Source, SourceContent, SourceTrigger, StopIcon, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, cn, parseFollowUps, useChatContainer, useCopilotUI };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map