@tinkrapp/widget 1.0.0

package/dist/react.cjs

@@ -0,0 +1,4857 @@
+'use strict';
+
+var React = require('react');
+var react = require('@assistant-ui/react');
+var reactAiSdk = require('@assistant-ui/react-ai-sdk');
+var react$2 = require('@emotion/react');
+var assistantStream = require('assistant-stream');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var styled = require('@emotion/styled');
+var react$1 = require('motion/react');
+var shallow = require('zustand/shallow');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var AvatarPrimitive = require('@radix-ui/react-avatar');
+require('@assistant-ui/react-markdown/styles/dot.css');
+var reactMarkdown = require('@assistant-ui/react-markdown');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
+var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+
+// src/react/provider.tsx
+
+// src/core/events.ts
+var TypedEventEmitter = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(handler);
+    return () => this.off(event, handler);
+  }
+  off(event, handler) {
+    this.listeners.get(event)?.delete(handler);
+  }
+  emit(event, payload) {
+    this.listeners.get(event)?.forEach((handler) => {
+      try {
+        handler(payload);
+      } catch (error) {
+        console.error(`Error in ${String(event)} handler:`, error);
+      }
+    });
+  }
+  clear() {
+    this.listeners.clear();
+  }
+  removeAllListeners(event) {
+    if (event) {
+      this.listeners.delete(event);
+    } else {
+      this.listeners.clear();
+    }
+  }
+};
+
+// src/core/api.ts
+var WidgetAPI = class {
+  constructor(config) {
+    this.config = {
+      baseUrl: "http://localhost:3000",
+      userId: "",
+      debug: false,
+      assistantId: config.apiKey,
+      // Default to apiKey for backwards compatibility
+      ...config
+    };
+  }
+  async createSession() {
+    const response = await this.request("/sessions", {
+      method: "POST",
+      body: JSON.stringify({
+        // apiKey IS the assistantId
+        assistantId: this.config.apiKey,
+        userId: this.config.userId
+      })
+    });
+    return response;
+  }
+  async sendMessage(sessionId, content) {
+    const response = await this.request(`/sessions/${sessionId}/messages`, {
+      method: "POST",
+      body: JSON.stringify({ content })
+    });
+    return response;
+  }
+  async getHistory(sessionId) {
+    return this.request(`/sessions/${sessionId}/messages`);
+  }
+  async getSessions() {
+    return this.request("/sessions");
+  }
+  async getArtifacts() {
+    return this.request("/artifacts");
+  }
+  async getArtifact(id) {
+    return this.request(`/artifacts/${id}`);
+  }
+  async createArtifact(artifact) {
+    return this.request("/artifacts", {
+      method: "POST",
+      body: JSON.stringify(artifact)
+    });
+  }
+  async request(endpoint, options = {}) {
+    const url = `${this.config.baseUrl}${endpoint}`;
+    this.log("Request:", url, options);
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${this.config.apiKey}`,
+        ...options.headers
+      }
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.message || `HTTP ${response.status}`);
+    }
+    return response.json();
+  }
+  log(...args) {
+    if (this.config.debug) {
+      console.log("[CourseAI]", ...args);
+    }
+  }
+};
+
+// src/core/client.ts
+var WidgetClient = class {
+  constructor(config) {
+    this.state = { status: "idle" };
+    this.events = new TypedEventEmitter();
+    this.config = config;
+    this.api = new WidgetAPI(config);
+  }
+  /**
+   * Initialize the widget and create a chat session
+   */
+  async initialize() {
+    if (this.state.status !== "idle") {
+      throw new Error("Widget already initialized");
+    }
+    this.setState({ status: "initializing" });
+    try {
+      const session = await this.api.createSession();
+      this.setState({ status: "ready", session });
+      this.events.emit("session:created", { session });
+    } catch (error) {
+      const widgetError = {
+        code: "INIT_FAILED",
+        message: error instanceof Error ? error.message : "Unknown error",
+        details: error
+      };
+      this.setState({ status: "error", error: widgetError });
+      this.events.emit("error", { error: widgetError });
+      throw error;
+    }
+  }
+  /**
+   * Send a message to the AI assistant
+   */
+  async sendMessage(content) {
+    if (this.state.status !== "ready") {
+      throw new Error("Widget not ready. Call initialize() first.");
+    }
+    const userMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content,
+      timestamp: Date.now()
+    };
+    const session = {
+      ...this.state.session,
+      messages: [...this.state.session.messages, userMessage]
+    };
+    this.setState({ status: "ready", session });
+    this.events.emit("message:sent", { message: userMessage });
+    this.setState({ status: "loading" });
+    try {
+      const assistantMessage = await this.api.sendMessage(
+        session.id,
+        content
+      );
+      const updatedSession = {
+        ...session,
+        messages: [...session.messages, assistantMessage]
+      };
+      this.setState({ status: "ready", session: updatedSession });
+      this.events.emit("message:received", { message: assistantMessage });
+      return assistantMessage;
+    } catch (error) {
+      const widgetError = {
+        code: "SEND_MESSAGE_FAILED",
+        message: error instanceof Error ? error.message : "Failed to send message",
+        details: error
+      };
+      this.setState({ status: "ready", session });
+      this.events.emit("error", { error: widgetError });
+      throw error;
+    }
+  }
+  /**
+   * Get current state
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * Get the API instance for direct calls
+   */
+  getAPI() {
+    return this.api;
+  }
+  /**
+   * Get the widget configuration
+   */
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Subscribe to events
+   */
+  on(event, handler) {
+    return this.events.on(event, handler);
+  }
+  /**
+   * Unsubscribe from events
+   */
+  off(event, handler) {
+    this.events.off(event, handler);
+  }
+  /**
+   * Clean up resources
+   */
+  destroy() {
+    this.events.clear();
+    this.setState({ status: "idle" });
+  }
+  setState(newState) {
+    const previous = this.state;
+    this.state = newState;
+    this.events.emit("state:change", { previous, current: newState });
+  }
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipPrimitive__namespace.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    TooltipPrimitive__namespace.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+var TooltipIconButton = React.forwardRef(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "icon-sm", ...rest, ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aui-sr-only sr-only", children: tooltip })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side, children: tooltip })
+  ] });
+});
+TooltipIconButton.displayName = "TooltipIconButton";
+var ToolCard = ({
+  title,
+  subtitle,
+  isStreaming,
+  isError = false,
+  icon,
+  persistentContent,
+  children,
+  footer
+}) => {
+  const [manualExpanded, setManualExpanded] = React.useState(null);
+  const prevStreamingRef = React.useRef(isStreaming);
+  const contentRef = React.useRef(null);
+  const isExpanded = manualExpanded ?? isStreaming;
+  React.useEffect(() => {
+    if (isStreaming && !prevStreamingRef.current) {
+      setManualExpanded(null);
+    }
+    prevStreamingRef.current = isStreaming;
+  }, [isStreaming]);
+  React.useEffect(() => {
+    if (isStreaming && contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    }
+  });
+  const renderIcon = () => {
+    if (icon) return icon;
+    const iconClass = cn("h-4 w-4", isStreaming && "animate-spin");
+    if (isStreaming) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: iconClass });
+    }
+    if (isError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircleIcon, { className: "h-4 w-4 text-red-400" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-4 w-4" });
+  };
+  const handleToggle = () => {
+    if (!isStreaming) {
+      setManualExpanded((prev2) => prev2 === null ? true : !prev2);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 overflow-hidden rounded-xl border border-border shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 p-2 cursor-pointer transition-colors text-white bg-primary-foreground",
+          !isStreaming && "hover:opacity-90"
+        ),
+        onClick: handleToggle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: renderIcon() }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium opacity-80 leading-tight text-xs text-muted-foreground", children: subtitle }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "truncate font-semibold leading-tight text-sm text-muted-foreground", children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "p-1 rounded hover:bg-white/20 transition-colors",
+              "aria-label": isExpanded ? "Collapse" : "Expand",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleToggle();
+              },
+              children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    ),
+    persistentContent,
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: "p-2 max-h-[400px] overflow-y-auto bg-secondary",
+        children
+      }
+    ),
+    isExpanded && footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2 border-t border-white/10 p-2 bg-primary-foreground/80", children: footer })
+  ] });
+};
+var useCopyToClipboard = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const copyToClipboard = (value) => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+  return { isCopied, copyToClipboard };
+};
+var MarkdownContent = React.memo(({ content }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-md max-w-none text-white", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown__default.default,
+    {
+      remarkPlugins: [remarkGfm__default.default],
+      components: {
+        h1: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-2 font-extrabold tracking-tight last:mb-0 text-white",
+              className
+            ),
+            style: { fontSize: "12px" },
+            ...props
+          }
+        ),
+        h2: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: cn(
+              "mt-3 mb-1.5 font-semibold tracking-tight first:mt-0 last:mb-0 text-white",
+              className
+            ),
+            style: { fontSize: "10px" },
+            ...props
+          }
+        ),
+        h3: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
+          {
+            className: cn(
+              "mt-2 mb-1 font-semibold tracking-tight first:mt-0 last:mb-0 text-white",
+              className
+            ),
+            style: { fontSize: "9px" },
+            ...props
+          }
+        ),
+        p: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mt-1.5 mb-1.5 leading-relaxed first:mt-0 last:mb-0 text-white/90",
+              className
+            ),
+            ...props
+          }
+        ),
+        ul: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "ul",
+          {
+            className: cn(
+              "my-1.5 ml-3 list-disc [&>li]:mt-0.5 text-white/90",
+              className
+            ),
+            ...props
+          }
+        ),
+        ol: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "ol",
+          {
+            className: cn(
+              "my-1.5 ml-3 list-decimal [&>li]:mt-0.5 text-white/90",
+              className
+            ),
+            ...props
+          }
+        ),
+        blockquote: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "blockquote",
+          {
+            className: cn(
+              "border-l-2 border-white/30 pl-2 italic text-white/70",
+              className
+            ),
+            ...props
+          }
+        ),
+        pre: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            className: cn(
+              "overflow-x-auto rounded bg-black/30 p-1.5 text-white/90 my-1.5",
+              className
+            ),
+            ...props
+          }
+        ),
+        code: ({ className, ...props }) => {
+          const isInline = !className?.includes("language-");
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "code",
+            {
+              className: cn(
+                isInline && "rounded bg-black/30 px-0.5 py-0.5 font-mono text-white/90",
+                className
+              ),
+              ...props
+            }
+          );
+        },
+        a: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            className: cn(
+              "font-medium text-blue-300 underline underline-offset-2",
+              className
+            ),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            ...props
+          }
+        ),
+        hr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "hr",
+          {
+            className: cn("my-2 border-b border-white/20", className),
+            ...props
+          }
+        )
+      },
+      children: content
+    }
+  ) });
+});
+MarkdownContent.displayName = "MarkdownContent";
+var DetailedAnswerToolUI = react.makeAssistantToolUI({
+  toolName: "generateDetailedAnswer",
+  render: function DetailedAnswerUI({ args, result, status }) {
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+    const isStreaming = status.type === "running";
+    const isError = status.type === "incomplete";
+    const title = result?.title || args.title || "Generating...";
+    const content = result?.content || args.content || "";
+    const summary = result?.summary || args.summary || "";
+    const handleCopy = () => {
+      if (content) {
+        copyToClipboard(content);
+      }
+    };
+    const handleOpenFullScreen = () => {
+      const newWindow = window.open("", "_blank");
+      if (newWindow) {
+        newWindow.document.write(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>${title}</title>
+              <meta charset="utf-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1">
+              <style>
+                body {
+                  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                  max-width: 800px;
+                  margin: 0 auto;
+                  padding: 2rem;
+                  line-height: 1.6;
+                  color: #1a1a1a;
+                }
+                h1 { border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
+                pre { background: #f5f5f5; padding: 1rem; overflow-x: auto; border-radius: 4px; }
+                code { background: #f5f5f5; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; }
+                pre code { background: none; padding: 0; }
+                blockquote { border-left: 4px solid #ddd; margin: 0; padding-left: 1rem; color: #666; }
+              </style>
+            </head>
+            <body>
+              <h1>${title}</h1>
+              <div id="content">${content.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
+              <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+              <script>
+                document.getElementById('content').innerHTML = marked.parse(${JSON.stringify(
+          content
+        )});
+              </script>
+            </body>
+          </html>
+        `);
+        newWindow.document.close();
+      }
+    };
+    const persistentSummary = summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-white/80 border-b border-white/10 bg-primary-foreground text-xs", children: summary }) : void 0;
+    const footerActions = content ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: isCopied ? "Copied!" : "Copy markdown",
+          onClick: handleCopy,
+          className: "flex items-center justify-center rounded-md p-1.5 text-white/70 hover:bg-white/10 transition-colors",
+          children: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "Open in new window",
+          onClick: handleOpenFullScreen,
+          className: "flex items-center justify-center rounded-md p-1.5 text-white/70 hover:bg-white/10 transition-colors",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToolCard,
+      {
+        title,
+        isStreaming,
+        isError,
+        icon: !isStreaming && !isError ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileTextIcon, { className: "h-4 w-4" }) : void 0,
+        persistentContent: persistentSummary,
+        footer: footerActions,
+        children: content ? /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground italic", children: "Generating content..." })
+      }
+    );
+  }
+});
+var MessageContext = React.createContext(null);
+function MessageContextProvider({ children }) {
+  const [selectedContext, setSelectedContext] = React.useState([]);
+  const addContextItem = React.useCallback((item) => {
+    console.log("[MessageContext] Adding context item:", item.id, item.title);
+    setSelectedContext((prev2) => {
+      if (prev2.some((i) => i.id === item.id)) {
+        console.log("[MessageContext] Item already exists, skipping");
+        return prev2;
+      }
+      console.log("[MessageContext] Context items count:", prev2.length + 1);
+      return [...prev2, item];
+    });
+  }, []);
+  const removeContextItem = React.useCallback((id) => {
+    setSelectedContext((prev2) => prev2.filter((item) => item.id !== id));
+  }, []);
+  const clearContext = React.useCallback(() => {
+    console.log("[MessageContext] Clearing context");
+    setSelectedContext([]);
+  }, []);
+  const setContext = React.useCallback((items) => {
+    setSelectedContext(items);
+  }, []);
+  const consumeContext = React.useCallback(() => {
+    const context = selectedContext;
+    console.log("[MessageContext] Consuming context:", context.length, "items");
+    return context;
+  }, [selectedContext]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MessageContext.Provider,
+    {
+      value: {
+        selectedContext,
+        addContextItem,
+        removeContextItem,
+        clearContext,
+        setContext,
+        consumeContext
+      },
+      children
+    }
+  );
+}
+function useMessageContext() {
+  const context = React.useContext(MessageContext);
+  if (!context) {
+    throw new Error(
+      "useMessageContext must be used within a MessageContextProvider"
+    );
+  }
+  return context;
+}
+
+// src/react/styles/theme.ts
+var theme = {
+  colors: {
+    background: {
+      primary: "#1a1a1a",
+      secondary: "#2a2a2a",
+      tertiary: "#3a3a3a"
+    },
+    accent: {
+      primary: "#c9a227",
+      hover: "#d4af37",
+      muted: "rgba(201, 162, 39, 0.4)"
+    },
+    text: {
+      primary: "#ffffff",
+      secondary: "#888888",
+      tertiary: "#cccccc",
+      inverse: "#1a1a1a"
+    },
+    border: "#2a2a2a",
+    shadow: "rgba(0, 0, 0, 0.4)"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem"
+  },
+  radii: {
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem",
+    full: "50%"
+  },
+  typography: {
+    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem"
+    },
+    fontWeight: {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    lineHeight: {
+      tight: 1.25,
+      normal: 1.5,
+      relaxed: 1.7
+    }
+  },
+  zIndex: {
+    widget: 9999,
+    overlay: 9998
+  },
+  shadows: {
+    sm: "0 2px 8px rgba(0, 0, 0, 0.2)",
+    md: "0 4px 16px rgba(0, 0, 0, 0.3)",
+    lg: "0 8px 32px rgba(0, 0, 0, 0.4)",
+    accent: "0 4px 16px rgba(201, 162, 39, 0.4)",
+    accentHover: "0 6px 20px rgba(201, 162, 39, 0.5)"
+  },
+  transitions: {
+    fast: "0.15s ease",
+    normal: "0.2s ease",
+    slow: "0.3s ease"
+  }
+};
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    return tag.sheet;
+  }
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      return document.styleSheets[i];
+    }
+  }
+  return void 0;
+}
+function createStyleElement(options) {
+  var tag = document.createElement("style");
+  tag.setAttribute("data-emotion", options.key);
+  if (options.nonce !== void 0) {
+    tag.setAttribute("nonce", options.nonce);
+  }
+  tag.appendChild(document.createTextNode(""));
+  tag.setAttribute("data-s", "");
+  return tag;
+}
+var StyleSheet = /* @__PURE__ */ (function() {
+  function StyleSheet2(options) {
+    var _this = this;
+    this._insertTag = function(tag) {
+      var before;
+      if (_this.tags.length === 0) {
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
+      } else {
+        before = _this.tags[_this.tags.length - 1].nextSibling;
+      }
+      _this.container.insertBefore(tag, before);
+      _this.tags.push(tag);
+    };
+    this.isSpeedy = options.speedy === void 0 ? true : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce;
+    this.key = options.key;
+    this.container = options.container;
+    this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
+    this.before = null;
+  }
+  var _proto = StyleSheet2.prototype;
+  _proto.hydrate = function hydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+  _proto.insert = function insert(rule) {
+    if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) {
+      this._insertTag(createStyleElement(this));
+    }
+    var tag = this.tags[this.tags.length - 1];
+    if (this.isSpeedy) {
+      var sheet = sheetForTag(tag);
+      try {
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } catch (e) {
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+    this.ctr++;
+  };
+  _proto.flush = function flush() {
+    this.tags.forEach(function(tag) {
+      var _tag$parentNode;
+      return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+  return StyleSheet2;
+})();
+
+// ../../node_modules/stylis/src/Enum.js
+var MS = "-ms-";
+var MOZ = "-moz-";
+var WEBKIT = "-webkit-";
+var COMMENT = "comm";
+var RULESET = "rule";
+var DECLARATION = "decl";
+var IMPORT = "@import";
+var KEYFRAMES = "@keyframes";
+var LAYER = "@layer";
+
+// ../../node_modules/stylis/src/Utility.js
+var abs = Math.abs;
+var from = String.fromCharCode;
+var assign = Object.assign;
+function hash(value, length2) {
+  return charat(value, 0) ^ 45 ? (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
+}
+function trim(value) {
+  return value.trim();
+}
+function match(value, pattern) {
+  return (value = pattern.exec(value)) ? value[0] : value;
+}
+function replace(value, pattern, replacement) {
+  return value.replace(pattern, replacement);
+}
+function indexof(value, search) {
+  return value.indexOf(search);
+}
+function charat(value, index) {
+  return value.charCodeAt(index) | 0;
+}
+function substr(value, begin, end) {
+  return value.slice(begin, end);
+}
+function strlen(value) {
+  return value.length;
+}
+function sizeof(value) {
+  return value.length;
+}
+function append(value, array) {
+  return array.push(value), value;
+}
+function combine(array, callback) {
+  return array.map(callback).join("");
+}
+
+// ../../node_modules/stylis/src/Tokenizer.js
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = "";
+function node(value, root, parent, type, props, children, length2) {
+  return { value, root, parent, type, props, children, line, column, length: length2, return: "" };
+}
+function copy(root, props) {
+  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props);
+}
+function char() {
+  return character;
+}
+function prev() {
+  character = position > 0 ? charat(characters, --position) : 0;
+  if (column--, character === 10)
+    column = 1, line--;
+  return character;
+}
+function next() {
+  character = position < length ? charat(characters, position++) : 0;
+  if (column++, character === 10)
+    column = 1, line++;
+  return character;
+}
+function peek() {
+  return charat(characters, position);
+}
+function caret() {
+  return position;
+}
+function slice(begin, end) {
+  return substr(characters, begin, end);
+}
+function token(type) {
+  switch (type) {
+    // \0 \t \n \r \s whitespace token
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    // ! + , / > @ ~ isolate token
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    // ; { } breakpoint token
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    // : accompanied token
+    case 58:
+      return 3;
+    // " ' ( [ opening delimit token
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    // ) ] closing delimit token
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function alloc(value) {
+  return line = column = 1, length = strlen(characters = value), position = 0, [];
+}
+function dealloc(value) {
+  return characters = "", value;
+}
+function delimit(type) {
+  return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
+}
+function whitespace(type) {
+  while (character = peek())
+    if (character < 33)
+      next();
+    else
+      break;
+  return token(type) > 2 || token(character) > 3 ? "" : " ";
+}
+function escaping(index, count) {
+  while (--count && next())
+    if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97)
+      break;
+  return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
+}
+function delimiter(type) {
+  while (next())
+    switch (character) {
+      // ] ) " '
+      case type:
+        return position;
+      // " '
+      case 34:
+      case 39:
+        if (type !== 34 && type !== 39)
+          delimiter(character);
+        break;
+      // (
+      case 40:
+        if (type === 41)
+          delimiter(type);
+        break;
+      // \
+      case 92:
+        next();
+        break;
+    }
+  return position;
+}
+function commenter(type, index) {
+  while (next())
+    if (type + character === 47 + 10)
+      break;
+    else if (type + character === 42 + 42 && peek() === 47)
+      break;
+  return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
+}
+function identifier(index) {
+  while (!token(peek()))
+    next();
+  return slice(index, position);
+}
+
+// ../../node_modules/stylis/src/Parser.js
+function compile(value) {
+  return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
+}
+function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
+  var index = 0;
+  var offset = 0;
+  var length2 = pseudo;
+  var atrule = 0;
+  var property = 0;
+  var previous = 0;
+  var variable = 1;
+  var scanning = 1;
+  var ampersand = 1;
+  var character2 = 0;
+  var type = "";
+  var props = rules;
+  var children = rulesets;
+  var reference = rule;
+  var characters2 = type;
+  while (scanning)
+    switch (previous = character2, character2 = next()) {
+      // (
+      case 40:
+        if (previous != 108 && charat(characters2, length2 - 1) == 58) {
+          if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f") != -1)
+            ampersand = -1;
+          break;
+        }
+      // " ' [
+      case 34:
+      case 39:
+      case 91:
+        characters2 += delimit(character2);
+        break;
+      // \t \n \r \s
+      case 9:
+      case 10:
+      case 13:
+      case 32:
+        characters2 += whitespace(previous);
+        break;
+      // \
+      case 92:
+        characters2 += escaping(caret() - 1, 7);
+        continue;
+      // /
+      case 47:
+        switch (peek()) {
+          case 42:
+          case 47:
+            append(comment(commenter(next(), caret()), root, parent), declarations);
+            break;
+          default:
+            characters2 += "/";
+        }
+        break;
+      // {
+      case 123 * variable:
+        points[index++] = strlen(characters2) * ampersand;
+      // } ; \0
+      case 125 * variable:
+      case 59:
+      case 0:
+        switch (character2) {
+          // \0 }
+          case 0:
+          case 125:
+            scanning = 0;
+          // ;
+          case 59 + offset:
+            if (ampersand == -1) characters2 = replace(characters2, /\f/g, "");
+            if (property > 0 && strlen(characters2) - length2)
+              append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2), declarations);
+            break;
+          // @ ;
+          case 59:
+            characters2 += ";";
+          // { rule/at-rule
+          default:
+            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2), rulesets);
+            if (character2 === 123)
+              if (offset === 0)
+                parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
+              else
+                switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
+                  // d l m s
+                  case 100:
+                  case 108:
+                  case 109:
+                  case 115:
+                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2), children), rules, children, length2, points, rule ? props : children);
+                    break;
+                  default:
+                    parse(characters2, reference, reference, reference, [""], children, 0, points, children);
+                }
+        }
+        index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
+        break;
+      // :
+      case 58:
+        length2 = 1 + strlen(characters2), property = previous;
+      default:
+        if (variable < 1) {
+          if (character2 == 123)
+            --variable;
+          else if (character2 == 125 && variable++ == 0 && prev() == 125)
+            continue;
+        }
+        switch (characters2 += from(character2), character2 * variable) {
+          // &
+          case 38:
+            ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
+            break;
+          // ,
+          case 44:
+            points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
+            break;
+          // @
+          case 64:
+            if (peek() === 45)
+              characters2 += delimit(next());
+            atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
+            break;
+          // -
+          case 45:
+            if (previous === 45 && strlen(characters2) == 2)
+              variable = 0;
+        }
+    }
+  return rulesets;
+}
+function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length2) {
+  var post = offset - 1;
+  var rule = offset === 0 ? rules : [""];
+  var size = sizeof(rule);
+  for (var i = 0, j = 0, k = 0; i < index; ++i)
+    for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
+      if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x])))
+        props[k++] = z;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length2);
+}
+function comment(value, root, parent) {
+  return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
+}
+function declaration(value, root, parent, length2) {
+  return node(value, root, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2);
+}
+
+// ../../node_modules/stylis/src/Serializer.js
+function serialize(children, callback) {
+  var output = "";
+  var length2 = sizeof(children);
+  for (var i = 0; i < length2; i++)
+    output += callback(children[i], i, children, callback) || "";
+  return output;
+}
+function stringify(element, index, children, callback) {
+  switch (element.type) {
+    case LAYER:
+      if (element.children.length) break;
+    case IMPORT:
+    case DECLARATION:
+      return element.return = element.return || element.value;
+    case COMMENT:
+      return "";
+    case KEYFRAMES:
+      return element.return = element.value + "{" + serialize(element.children, callback) + "}";
+    case RULESET:
+      element.value = element.props.join(",");
+  }
+  return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
+}
+
+// ../../node_modules/stylis/src/Middleware.js
+function middleware(collection) {
+  var length2 = sizeof(collection);
+  return function(element, index, children, callback) {
+    var output = "";
+    for (var i = 0; i < length2; i++)
+      output += collection[i](element, index, children, callback) || "";
+    return output;
+  };
+}
+function rulesheet(callback) {
+  return function(element) {
+    if (!element.root) {
+      if (element = element.return)
+        callback(element);
+    }
+  };
+}
+
+// ../../node_modules/@emotion/weak-memoize/dist/emotion-weak-memoize.esm.js
+var weakMemoize = function weakMemoize2(func) {
+  var cache = /* @__PURE__ */ new WeakMap();
+  return function(arg) {
+    if (cache.has(arg)) {
+      return cache.get(arg);
+    }
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
+// ../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+// ../../node_modules/@emotion/cache/dist/emotion-cache.esm.js
+var isBrowser = typeof document !== "undefined";
+var identifierWithPointTracking = function identifierWithPointTracking2(begin, points, index) {
+  var previous = 0;
+  var character2 = 0;
+  while (true) {
+    previous = character2;
+    character2 = peek();
+    if (previous === 38 && character2 === 12) {
+      points[index] = 1;
+    }
+    if (token(character2)) {
+      break;
+    }
+    next();
+  }
+  return slice(begin, position);
+};
+var toRules = function toRules2(parsed, points) {
+  var index = -1;
+  var character2 = 44;
+  do {
+    switch (token(character2)) {
+      case 0:
+        if (character2 === 38 && peek() === 12) {
+          points[index] = 1;
+        }
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
+        break;
+      case 2:
+        parsed[index] += delimit(character2);
+        break;
+      case 4:
+        if (character2 === 44) {
+          parsed[++index] = peek() === 58 ? "&\f" : "";
+          points[index] = parsed[index].length;
+          break;
+        }
+      // fallthrough
+      default:
+        parsed[index] += from(character2);
+    }
+  } while (character2 = next());
+  return parsed;
+};
+var getRules = function getRules2(value, points) {
+  return dealloc(toRules(alloc(value), points));
+};
+var fixedElements = /* @__PURE__ */ new WeakMap();
+var compat = function compat2(element) {
+  if (element.type !== "rule" || !element.parent || // positive .length indicates that this rule contains pseudo
+  // negative .length indicates that this rule has been already prefixed
+  element.length < 1) {
+    return;
+  }
+  var value = element.value;
+  var parent = element.parent;
+  var isImplicitRule = element.column === parent.column && element.line === parent.line;
+  while (parent.type !== "rule") {
+    parent = parent.parent;
+    if (!parent) return;
+  }
+  if (element.props.length === 1 && value.charCodeAt(0) !== 58 && !fixedElements.get(parent)) {
+    return;
+  }
+  if (isImplicitRule) {
+    return;
+  }
+  fixedElements.set(element, true);
+  var points = [];
+  var rules = getRules(value, points);
+  var parentRules = parent.props;
+  for (var i = 0, k = 0; i < rules.length; i++) {
+    for (var j = 0; j < parentRules.length; j++, k++) {
+      element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
+    }
+  }
+};
+var removeLabel = function removeLabel2(element) {
+  if (element.type === "decl") {
+    var value = element.value;
+    if (
+      // charcode for l
+      value.charCodeAt(0) === 108 && // charcode for b
+      value.charCodeAt(2) === 98
+    ) {
+      element["return"] = "";
+      element.value = "";
+    }
+  }
+};
+function prefix(value, length2) {
+  switch (hash(value, length2)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + "print-" + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    // flex, flex-direction
+    case 6828:
+    case 4268:
+      return WEBKIT + value + MS + value + value;
+    // order
+    case 6165:
+      return WEBKIT + value + MS + "flex-" + value + value;
+    // align-items
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
+    // align-self
+    case 5443:
+      return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/, "") + value;
+    // align-content
+    case 4675:
+      return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/, "") + value;
+    // flex-shrink
+    case 5548:
+      return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
+    // flex-basis
+    case 5292:
+      return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
+    // flex-grow
+    case 6060:
+      return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
+    // transition
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
+    // cursor
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
+    // background, background-image
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
+    // justify-content
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
+    // (margin|padding)-inline-(start|end)
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      if (strlen(value) - 1 - length2 > 6) switch (charat(value, length2 + 1)) {
+        // (m)ax-content, (m)in-content
+        case 109:
+          if (charat(value, length2 + 4) !== 45) break;
+        // (f)ill-available, (f)it-content
+        case 102:
+          return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
+        // (s)tretch
+        case 115:
+          return ~indexof(value, "stretch") ? prefix(replace(value, "stretch", "fill-available"), length2) + value : value;
+      }
+      break;
+    // position: sticky
+    case 4949:
+      if (charat(value, length2 + 1) !== 115) break;
+    // display: (flex|inline-flex)
+    case 6444:
+      switch (charat(value, strlen(value) - 3 - (~indexof(value, "!important") && 10))) {
+        // stic(k)y
+        case 107:
+          return replace(value, ":", ":" + WEBKIT) + value;
+        // (inline-)?fl(e)x
+        case 101:
+          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
+      }
+      break;
+    // writing-mode
+    case 5936:
+      switch (charat(value, length2 + 11)) {
+        // vertical-l(r)
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
+        // vertical-r(l)
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
+        // horizontal(-)tb
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
+      }
+      return WEBKIT + value + MS + value + value;
+  }
+  return value;
+}
+var prefixer = function prefixer2(element, index, children, callback) {
+  if (element.length > -1) {
+    if (!element["return"]) switch (element.type) {
+      case DECLARATION:
+        element["return"] = prefix(element.value, element.length);
+        break;
+      case KEYFRAMES:
+        return serialize([copy(element, {
+          value: replace(element.value, "@", "@" + WEBKIT)
+        })], callback);
+      case RULESET:
+        if (element.length) return combine(element.props, function(value) {
+          switch (match(value, /(::plac\w+|:read-\w+)/)) {
+            // :read-(only|write)
+            case ":read-only":
+            case ":read-write":
+              return serialize([copy(element, {
+                props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")]
+              })], callback);
+            // :placeholder
+            case "::placeholder":
+              return serialize([copy(element, {
+                props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")]
+              }), copy(element, {
+                props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")]
+              }), copy(element, {
+                props: [replace(value, /:(plac\w+)/, MS + "input-$1")]
+              })], callback);
+          }
+          return "";
+        });
+    }
+  }
+};
+var getServerStylisCache = isBrowser ? void 0 : weakMemoize(function() {
+  return memoize(function() {
+    return {};
+  });
+});
+var defaultStylisPlugins = [prefixer];
+var createCache = function createCache2(options) {
+  var key = options.key;
+  if (isBrowser && key === "css") {
+    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
+    Array.prototype.forEach.call(ssrStyles, function(node2) {
+      var dataEmotionAttribute = node2.getAttribute("data-emotion");
+      if (dataEmotionAttribute.indexOf(" ") === -1) {
+        return;
+      }
+      document.head.appendChild(node2);
+      node2.setAttribute("data-s", "");
+    });
+  }
+  var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
+  var inserted = {};
+  var container;
+  var nodesToHydrate = [];
+  if (isBrowser) {
+    container = options.container || document.head;
+    Array.prototype.forEach.call(
+      // this means we will ignore elements which don't have a space in them which
+      // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
+      document.querySelectorAll('style[data-emotion^="' + key + ' "]'),
+      function(node2) {
+        var attrib = node2.getAttribute("data-emotion").split(" ");
+        for (var i = 1; i < attrib.length; i++) {
+          inserted[attrib[i]] = true;
+        }
+        nodesToHydrate.push(node2);
+      }
+    );
+  }
+  var _insert;
+  var omnipresentPlugins = [compat, removeLabel];
+  if (!getServerStylisCache) {
+    var currentSheet;
+    var finalizingPlugins = [stringify, rulesheet(function(rule) {
+      currentSheet.insert(rule);
+    })];
+    var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+    var stylis = function stylis2(styles) {
+      return serialize(compile(styles), serializer);
+    };
+    _insert = function insert(selector, serialized, sheet, shouldCache) {
+      currentSheet = sheet;
+      stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+      if (shouldCache) {
+        cache.inserted[serialized.name] = true;
+      }
+    };
+  } else {
+    var _finalizingPlugins = [stringify];
+    var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+    var _stylis = function _stylis2(styles) {
+      return serialize(compile(styles), _serializer);
+    };
+    var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+    var getRules3 = function getRules4(selector, serialized) {
+      var name = serialized.name;
+      if (serverStylisCache[name] === void 0) {
+        serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+      }
+      return serverStylisCache[name];
+    };
+    _insert = function _insert2(selector, serialized, sheet, shouldCache) {
+      var name = serialized.name;
+      var rules = getRules3(selector, serialized);
+      if (cache.compat === void 0) {
+        if (shouldCache) {
+          cache.inserted[name] = true;
+        }
+        return rules;
+      } else {
+        if (shouldCache) {
+          cache.inserted[name] = rules;
+        } else {
+          return rules;
+        }
+      }
+    };
+  }
+  var cache = {
+    key,
+    sheet: new StyleSheet({
+      key,
+      container,
+      nonce: options.nonce,
+      speedy: options.speedy,
+      prepend: options.prepend,
+      insertionPoint: options.insertionPoint
+    }),
+    nonce: options.nonce,
+    inserted,
+    registered: {},
+    insert: _insert
+  };
+  cache.sheet.hydrate(nodesToHydrate);
+  return cache;
+};
+
+// src/react/styles/cache.ts
+var createWidgetCache = (container) => {
+  return createCache({
+    key: "la-widget",
+    container,
+    prepend: true
+  });
+};
+var widgetCache = createCache({
+  key: "la-widget",
+  prepend: true
+});
+styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.primary};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+`;
+styled__default.default.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${({ theme: theme2 }) => theme2.spacing.md};
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme: theme2 }) => theme2.colors.background.tertiary};
+    border-radius: ${({ theme: theme2 }) => theme2.radii.full};
+  }
+`;
+var Flex = styled__default.default.div`
+  display: flex;
+  flex-direction: ${({ direction = "row" }) => direction};
+  align-items: ${({ align = "stretch" }) => align};
+  justify-content: ${({ justify = "flex-start" }) => justify};
+  gap: ${({ theme: theme2, gap }) => gap ? theme2.spacing[gap] : 0};
+  flex-wrap: ${({ wrap }) => wrap ? "wrap" : "nowrap"};
+`;
+styled__default.default.div`
+  display: grid;
+  grid-template-columns: ${({ columns = 1 }) => typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns};
+  gap: ${({ theme: theme2, gap = "md" }) => theme2.spacing[gap]};
+`;
+styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme: theme2 }) => theme2.spacing.md};
+  border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.primary};
+`;
+styled__default.default.h2`
+  margin: 0;
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.md};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.medium};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+`;
+styled__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing.sm};
+  padding: ${({ theme: theme2, size = "md" }) => {
+  const sizes = {
+    sm: `${theme2.spacing.sm} ${theme2.spacing.md}`,
+    md: `${theme2.spacing.md} ${theme2.spacing.lg}`,
+    lg: `${theme2.spacing.lg} ${theme2.spacing.xl}`
+  };
+  return sizes[size];
+}};
+  width: ${({ fullWidth }) => fullWidth ? "100%" : "auto"};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.sm};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.medium};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  border: none;
+  cursor: pointer;
+  transition: all ${({ theme: theme2 }) => theme2.transitions.fast};
+
+  ${({ theme: theme2, variant = "primary" }) => {
+  switch (variant) {
+    case "primary":
+      return `
+          background-color: ${theme2.colors.accent.primary};
+          color: ${theme2.colors.text.inverse};
+          &:hover:not(:disabled) {
+            background-color: ${theme2.colors.accent.hover};
+          }
+        `;
+    case "secondary":
+      return `
+          background-color: ${theme2.colors.background.secondary};
+          color: ${theme2.colors.text.primary};
+          &:hover:not(:disabled) {
+            background-color: ${theme2.colors.background.tertiary};
+          }
+        `;
+    case "ghost":
+      return `
+          background: none;
+          color: ${theme2.colors.text.secondary};
+          &:hover:not(:disabled) {
+            color: ${theme2.colors.text.primary};
+            background-color: ${theme2.colors.background.secondary};
+          }
+        `;
+  }
+}}
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var IconButton = styled__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme: theme2 }) => theme2.spacing.xs};
+  background: none;
+  border: none;
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  font-size: ${({ size = "md" }) => {
+  const sizes = { sm: "1rem", md: "1.25rem", lg: "1.5rem" };
+  return sizes[size];
+}};
+  cursor: pointer;
+  transition: color ${({ theme: theme2 }) => theme2.transitions.fast};
+  line-height: 1;
+
+  &:hover {
+    color: ${({ theme: theme2 }) => theme2.colors.text.secondary};
+  }
+`;
+var FAB = styled__default.default(react$1.motion.button)`
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.primary};
+  border: none;
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.sm};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  color: white;
+  transition: box-shadow ${({ theme: theme2 }) => theme2.transitions.fast};
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: ${({ theme: theme2 }) => theme2.shadows.md};
+  }
+`;
+styled__default.default.input`
+  width: 100%;
+  padding: ${({ theme: theme2 }) => `${theme2.spacing.md} ${theme2.spacing.md}`};
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.secondary};
+  border: none;
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.sm};
+  outline: none;
+  transition: background-color ${({ theme: theme2 }) => theme2.transitions.fast};
+
+  &::placeholder {
+    color: ${({ theme: theme2 }) => theme2.colors.text.secondary};
+  }
+
+  &:focus {
+    background-color: ${({ theme: theme2 }) => theme2.colors.background.tertiary};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+styled__default.default.textarea`
+  width: 100%;
+  min-height: 150px;
+  padding: ${({ theme: theme2 }) => theme2.spacing.md};
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.secondary};
+  border: none;
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.sm};
+  line-height: ${({ theme: theme2 }) => theme2.typography.lineHeight.normal};
+  resize: vertical;
+  outline: none;
+
+  &::placeholder {
+    color: ${({ theme: theme2 }) => theme2.colors.text.secondary};
+  }
+
+  &:focus {
+    background-color: ${({ theme: theme2 }) => theme2.colors.background.tertiary};
+  }
+`;
+styled__default.default.button`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing.md};
+  width: 100%;
+  padding: ${({ theme: theme2 }) => theme2.spacing.md};
+  background-color: ${({ theme: theme2, selected }) => selected ? theme2.colors.background.tertiary : theme2.colors.background.secondary};
+  border: 2px solid
+    ${({ theme: theme2, selected }) => selected ? theme2.colors.accent.primary : "transparent"};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  text-align: left;
+  cursor: ${({ interactive = true }) => interactive ? "pointer" : "default"};
+  transition: all ${({ theme: theme2 }) => theme2.transitions.fast};
+
+  &:hover {
+    background-color: ${({ theme: theme2, interactive = true }) => interactive ? theme2.colors.background.tertiary : theme2.colors.background.secondary};
+  }
+`;
+styled__default.default.div`
+  flex: 1;
+  min-width: 0;
+`;
+styled__default.default.div`
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.medium};
+  margin-bottom: ${({ theme: theme2 }) => theme2.spacing.xs};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+styled__default.default.div`
+  color: ${({ theme: theme2 }) => theme2.colors.text.secondary};
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.xs};
+`;
+styled__default.default.button`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme: theme2 }) => theme2.spacing.md};
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.secondary};
+  border: none;
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.xs};
+  gap: ${({ theme: theme2 }) => theme2.spacing.xs};
+  cursor: pointer;
+  transition: background-color ${({ theme: theme2 }) => theme2.transitions.fast};
+
+  &:hover {
+    background-color: ${({ theme: theme2 }) => theme2.colors.background.tertiary};
+  }
+`;
+styled__default.default.span`
+  font-size: 1.25rem;
+`;
+styled__default.default.div`
+  width: ${({ size = "md" }) => {
+  const sizes = { sm: "40px", md: "64px", lg: "80px" };
+  return sizes[size];
+}};
+  height: ${({ size = "md" }) => {
+  const sizes = { sm: "40px", md: "64px", lg: "80px" };
+  return sizes[size];
+}};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.full};
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.secondary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${({ size = "md" }) => {
+  const sizes = { sm: "1rem", md: "1.5rem", lg: "2rem" };
+  return sizes[size];
+}};
+`;
+styled__default.default.h1`
+  margin: 0;
+  font-size: ${({ theme: theme2, size = "md" }) => {
+  const sizes = {
+    sm: theme2.typography.fontSize.lg,
+    md: theme2.typography.fontSize.xl,
+    lg: theme2.typography.fontSize["2xl"]
+  };
+  return sizes[size];
+}};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.medium};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+`;
+var Text = styled__default.default.p`
+  margin: 0;
+  font-size: ${({ theme: theme2, size = "md" }) => theme2.typography.fontSize[size]};
+  color: ${({ theme: theme2, color = "primary" }) => {
+  if (color === "accent") return theme2.colors.accent.primary;
+  return theme2.colors.text[color];
+}};
+  line-height: ${({ theme: theme2 }) => theme2.typography.lineHeight.normal};
+`;
+styled__default.default.button`
+  background: none;
+  border: none;
+  color: ${({ theme: theme2 }) => theme2.colors.text.secondary};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.sm};
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  }
+`;
+styled__default.default.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({ theme: theme2 }) => theme2.colors.border};
+`;
+styled__default.default.button`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: ${({ theme: theme2 }) => theme2.spacing.md};
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
+  color: ${({ theme: theme2 }) => theme2.colors.text.primary};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  text-align: left;
+  cursor: pointer;
+  transition: background-color ${({ theme: theme2 }) => theme2.transitions.fast};
+
+  &:hover {
+    background-color: ${({ theme: theme2 }) => theme2.colors.background.secondary};
+  }
+`;
+var WidgetRoot = styled__default.default.div`
+  position: fixed;
+  bottom: 20px;
+  ${({ position: position2 }) => position2 === "bottom-right" ? "right: 20px;" : "left: 20px;"}
+  z-index: ${({ theme: theme2 }) => theme2.zIndex.widget};
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+`;
+var WidgetPanel = styled__default.default(react$1.motion.div)`
+  width: 400px;
+  height: 700px;
+  border-radius: ${({ theme: theme2 }) => theme2.radii.xl};
+  overflow: hidden;
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.lg};
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.primary};
+  display: flex;
+  flex-direction: column;
+`;
+var WidgetHeader = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme: theme2 }) => `${theme2.spacing.sm} ${theme2.spacing.md}`};
+  background-color: ${({ theme: theme2 }) => theme2.colors.background.primary};
+  border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
+  flex-shrink: 0;
+  min-width: 0;
+  gap: ${({ theme: theme2 }) => theme2.spacing.sm};
+`;
+var WidgetContent = styled__default.default.div`
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`;
+styled__default.default.div`
+  max-width: 80%;
+  padding: ${({ theme: theme2 }) => `${theme2.spacing.md} ${theme2.spacing.md}`};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.md};
+  background-color: ${({ theme: theme2, isUser }) => isUser ? theme2.colors.accent.primary : theme2.colors.background.secondary};
+  color: ${({ theme: theme2, isUser }) => isUser ? theme2.colors.text.inverse : theme2.colors.text.primary};
+`;
+styled__default.default.span`
+  font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.xs};
+  color: ${({ theme: theme2 }) => theme2.colors.text.secondary};
+  margin-top: ${({ theme: theme2 }) => theme2.spacing.xs};
+`;
+styled__default.default.form`
+  display: flex;
+  gap: ${({ theme: theme2 }) => theme2.spacing.sm};
+  padding: ${({ theme: theme2 }) => theme2.spacing.md};
+  border-top: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
+`;
+styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: ${({ theme: theme2 }) => theme2.colors.text.secondary};
+  text-align: center;
+  padding: ${({ theme: theme2 }) => theme2.spacing.xl};
+`;
+var WidgetContext = React.createContext(null);
+function generateUserId() {
+  return crypto.randomUUID();
+}
+function createApiHeaders(userId, assistantId) {
+  return {
+    "Content-Type": "application/json",
+    "X-User-Id": userId,
+    "X-Assistant-Id": assistantId
+  };
+}
+function createThreadListAdapter(baseUrl, userId, assistantId) {
+  const headers = createApiHeaders(userId, assistantId);
+  return {
+    // List all threads for this user
+    async list() {
+      try {
+        const response = await fetch(`${baseUrl}/api/widget/threads`, {
+          headers
+        });
+        if (!response.ok) {
+          console.error("[Threads] List failed:", response.status);
+          return { threads: [] };
+        }
+        const data = await response.json();
+        return { threads: data.threads || [] };
+      } catch (error) {
+        console.error("[Threads] List error:", error);
+        return { threads: [] };
+      }
+    },
+    // Fetch a single thread's details
+    async fetch(remoteId) {
+      const response = await fetch(
+        `${baseUrl}/api/widget/threads/${remoteId}`,
+        {
+          headers
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to fetch thread: ${response.status}`);
+      }
+      const data = await response.json();
+      return {
+        remoteId: data.remoteId,
+        status: data.status,
+        title: data.title
+      };
+    },
+    // Initialize a new thread
+    async initialize(localId) {
+      try {
+        const response = await fetch(`${baseUrl}/api/widget/threads`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ localId })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to create thread: ${response.status}`);
+        }
+        const data = await response.json();
+        return { remoteId: data.remoteId, externalId: data.externalId };
+      } catch (error) {
+        console.error("[Threads] Initialize error:", error);
+        throw error;
+      }
+    },
+    // Rename a thread
+    async rename(remoteId, newTitle) {
+      try {
+        await fetch(`${baseUrl}/api/widget/threads/${remoteId}`, {
+          method: "PATCH",
+          headers,
+          body: JSON.stringify({ title: newTitle })
+        });
+      } catch (error) {
+        console.error("[Threads] Rename error:", error);
+      }
+    },
+    // Archive a thread
+    async archive(remoteId) {
+      try {
+        await fetch(`${baseUrl}/api/widget/threads/${remoteId}/archive`, {
+          method: "POST",
+          headers
+        });
+      } catch (error) {
+        console.error("[Threads] Archive error:", error);
+      }
+    },
+    // Unarchive a thread
+    async unarchive(remoteId) {
+      try {
+        await fetch(`${baseUrl}/api/widget/threads/${remoteId}/unarchive`, {
+          method: "POST",
+          headers
+        });
+      } catch (error) {
+        console.error("[Threads] Unarchive error:", error);
+      }
+    },
+    // Delete a thread
+    async delete(remoteId) {
+      try {
+        await fetch(`${baseUrl}/api/widget/threads/${remoteId}`, {
+          method: "DELETE",
+          headers
+        });
+      } catch (error) {
+        console.error("[Threads] Delete error:", error);
+      }
+    },
+    // Generate a title from messages
+    async generateTitle(remoteId, messages) {
+      return assistantStream.createAssistantStream(async (controller) => {
+        try {
+          const response = await fetch(
+            `${baseUrl}/api/widget/threads/${remoteId}/title`,
+            {
+              method: "POST",
+              headers,
+              body: JSON.stringify({ messages })
+            }
+          );
+          if (!response.ok) {
+            throw new Error(`Title generation failed: ${response.status}`);
+          }
+          const data = await response.json();
+          controller.appendText(data.title);
+          controller.close();
+        } catch (error) {
+          console.error("[Threads] Title generation error:", error);
+          controller.appendText("New Chat");
+          controller.close();
+        }
+      });
+    }
+  };
+}
+async function saveMessages(baseUrl, userId, assistantId, threadId, messages) {
+  try {
+    const response = await fetch(
+      `${baseUrl}/api/widget/threads/${threadId}/messages/sync`,
+      {
+        method: "POST",
+        headers: createApiHeaders(userId, assistantId),
+        body: JSON.stringify({ messages })
+      }
+    );
+    if (!response.ok) {
+      console.error("[Messages] Sync failed:", response.status);
+    }
+  } catch (error) {
+    console.error("[Messages] Sync error:", error);
+  }
+}
+function createHistoryAdapter(baseUrl, userId, assistantId, remoteId) {
+  const headers = createApiHeaders(userId, assistantId);
+  return {
+    async load() {
+      console.log("[History] load() called, remoteId:", remoteId);
+      if (!remoteId) return { headId: null, messages: [] };
+      try {
+        const response = await fetch(
+          `${baseUrl}/api/widget/threads/${remoteId}/messages`,
+          { headers }
+        );
+        if (!response.ok) {
+          console.error("[History] Failed to load messages:", response.status);
+          return { headId: null, messages: [] };
+        }
+        const { messages } = await response.json();
+        console.log("[History] Loaded messages:", messages.length);
+        const formattedMessages = messages.map(
+          (m, index) => ({
+            parentId: index > 0 ? messages[index - 1].id : null,
+            message: {
+              id: m.id,
+              role: m.role,
+              parts: m.content,
+              metadata: m.metadata,
+              createdAt: new Date(m.createdAt)
+            }
+          })
+        );
+        console.log("[History] Formatted messages:", formattedMessages.length);
+        return {
+          headId: messages.length > 0 ? messages[messages.length - 1].id : null,
+          messages: formattedMessages
+        };
+      } catch (error) {
+        console.error("[History] Load error:", error);
+        return { headId: null, messages: [] };
+      }
+    },
+    async append(message) {
+      console.log("[History] append() called");
+    },
+    // Required by useExternalHistory in @assistant-ui/react-ai-sdk
+    withFormat(_formatAdapter) {
+      console.log("[History.withFormat] called, remoteId:", remoteId);
+      return {
+        async load() {
+          if (!remoteId) return { headId: null, messages: [] };
+          try {
+            const response = await fetch(
+              `${baseUrl}/api/widget/threads/${remoteId}/messages`,
+              { headers }
+            );
+            if (!response.ok) {
+              console.error("[History.withFormat] Failed:", response.status);
+              return { headId: null, messages: [] };
+            }
+            const { messages } = await response.json();
+            console.log("[History.withFormat] Loaded:", messages.length);
+            const formattedMessages = messages.map(
+              (m, index) => ({
+                parentId: index > 0 ? messages[index - 1].id : null,
+                message: {
+                  id: m.id,
+                  role: m.role,
+                  parts: m.content,
+                  metadata: m.metadata,
+                  createdAt: new Date(m.createdAt)
+                }
+              })
+            );
+            return {
+              headId: messages.length > 0 ? messages[messages.length - 1].id : null,
+              messages: formattedMessages
+            };
+          } catch (error) {
+            console.error("[History.withFormat] Error:", error);
+            return { headId: null, messages: [] };
+          }
+        },
+        async append(_item) {
+        }
+      };
+    }
+  };
+}
+function AssistantRuntimeWrapper({
+  config,
+  userId,
+  children
+}) {
+  const baseUrl = config.baseUrl || "http://localhost:3000";
+  const assistantId = config.apiKey;
+  const { consumeContext, clearContext } = useMessageContext();
+  const contextRef = React.useRef(consumeContext);
+  contextRef.current = consumeContext;
+  const clearContextRef = React.useRef(clearContext);
+  clearContextRef.current = clearContext;
+  const threadListAdapter = React.useMemo(
+    () => createThreadListAdapter(baseUrl, userId, assistantId),
+    [baseUrl, userId, assistantId]
+  );
+  const runtime = react.unstable_useRemoteThreadListRuntime({
+    runtimeHook: function useChatThreadRuntime() {
+      const threadId = react.useAssistantState(
+        ({ threadListItem }) => threadListItem?.remoteId ?? void 0
+      );
+      const threadIdRef = React.useRef(threadId);
+      threadIdRef.current = threadId;
+      const history = React.useMemo(
+        () => createHistoryAdapter(baseUrl, userId, assistantId, threadId),
+        [threadId]
+      );
+      const transport = React.useMemo(() => {
+        console.log("[Widget] Creating transport for threadId:", threadId);
+        return new reactAiSdk.AssistantChatTransport({
+          api: `${baseUrl}/api/widget/chat`,
+          headers: {
+            "X-User-Id": userId,
+            "X-Assistant-Id": assistantId
+          },
+          // Use body as a function to dynamically include context
+          body: () => {
+            const currentContext = contextRef.current();
+            const contextIds = currentContext.map((item) => item.id);
+            const contextMetadata = currentContext.map((item) => ({
+              id: item.id,
+              type: item.type,
+              title: item.title
+            }));
+            console.log("[Widget] Transport body - contextIds:", contextIds.length, "threadId:", threadId);
+            if (contextIds.length > 0) {
+              setTimeout(() => clearContextRef.current(), 0);
+            }
+            return {
+              assistantId,
+              threadId,
+              ...contextIds.length > 0 && { contextIds, contextMetadata }
+            };
+          }
+        });
+      }, [threadId]);
+      const runtime2 = reactAiSdk.useChatRuntime({
+        transport,
+        adapters: { history },
+        onFinish: ({ message, messages }) => {
+          const currentThreadId = threadIdRef.current;
+          console.log(
+            "[Widget] onFinish - threadId:",
+            currentThreadId,
+            "messages:",
+            messages.length
+          );
+          if (currentThreadId && messages.length > 0) {
+            saveMessages(
+              baseUrl,
+              userId,
+              assistantId,
+              currentThreadId,
+              messages
+            );
+          }
+        }
+      });
+      return runtime2;
+    },
+    adapter: threadListAdapter
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.AssistantRuntimeProvider, { runtime, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DetailedAnswerToolUI, {}),
+    children
+  ] });
+}
+function WidgetProvider({
+  config,
+  children,
+  autoInitialize = true
+}) {
+  const [userId] = React.useState(() => config.userId || generateUserId());
+  const [client] = React.useState(() => new WidgetClient(config));
+  const [state, setState] = React.useState(client.getState());
+  React.useEffect(() => {
+    const unsubscribe = client.on("state:change", ({ current }) => {
+      setState(current);
+    });
+    if (autoInitialize && state.status === "idle") {
+      client.initialize().catch(console.error);
+    }
+    return () => {
+      unsubscribe();
+      client.destroy();
+    };
+  }, [client, autoInitialize, state.status]);
+  const contextValue = React.useMemo(
+    () => ({ client, state, userId }),
+    [client, state, userId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(react$2.CacheProvider, { value: widgetCache, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(WidgetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(MessageContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(AssistantRuntimeWrapper, { config, userId, children }) }) }) }) });
+}
+function useWidget() {
+  const context = React.useContext(WidgetContext);
+  if (!context) {
+    throw new Error("useWidget must be used within a WidgetProvider");
+  }
+  const { client, state } = context;
+  const initialize = React.useCallback(async () => {
+    if (state.status === "idle") {
+      await client.initialize();
+    }
+  }, [client, state.status]);
+  const sendMessage = React.useCallback(
+    async (content) => {
+      return client.sendMessage(content);
+    },
+    [client]
+  );
+  return {
+    state,
+    client,
+    isIdle: state.status === "idle",
+    isInitializing: state.status === "initializing",
+    isReady: state.status === "ready",
+    isLoading: state.status === "loading",
+    isError: state.status === "error",
+    messages: state.status === "ready" ? state.session.messages : [],
+    error: state.status === "error" ? state.error : null,
+    initialize,
+    sendMessage
+  };
+}
+function useChat() {
+  const { sendMessage, messages, isLoading, isReady } = useWidget();
+  const [input, setInput] = React.useState("");
+  const handleSubmit = React.useCallback(
+    async (e) => {
+      e?.preventDefault();
+      if (!input.trim() || !isReady || isLoading) {
+        return;
+      }
+      const message = input.trim();
+      setInput("");
+      try {
+        await sendMessage(message);
+      } catch (error) {
+        console.error("Failed to send message:", error);
+        setInput(message);
+      }
+    },
+    [input, isReady, isLoading, sendMessage]
+  );
+  return {
+    input,
+    setInput,
+    handleSubmit,
+    messages,
+    isLoading,
+    canSubmit: isReady && !isLoading && input.trim().length > 0
+  };
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function Avatar2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AvatarPrimitive__namespace.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AvatarPrimitive__namespace.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AvatarPrimitive__namespace.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var useFileSrc = (file) => {
+  const [src, setSrc] = React.useState(void 0);
+  React.useEffect(() => {
+    if (!file) {
+      setSrc(void 0);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+var useAttachmentSrc = () => {
+  const { file, src } = react.useAssistantState(
+    shallow.useShallow(({ attachment }) => {
+      if (attachment.type !== "image") return {};
+      if (attachment.file) return { file: attachment.file };
+      const src2 = attachment.content?.filter((c) => c.type === "image")[0]?.image;
+      if (!src2) return {};
+      return { src: src2 };
+    })
+  );
+  return useFileSrc(file) ?? src;
+};
+var AttachmentPreview = ({ src }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt: "Image Preview",
+      className: "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
+    }
+  );
+};
+var AttachmentPreviewDialog = ({ children }) => {
+  const src = useAttachmentSrc();
+  if (!src) return children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogTrigger,
+      {
+        className: "aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50",
+        asChild: true,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "aui-sr-only sr-only", children: "Image Attachment Preview" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { src }) })
+    ] })
+  ] });
+};
+var AttachmentThumb = () => {
+  const isImage = react.useAssistantState(
+    ({ attachment }) => attachment.type === "image"
+  );
+  const src = useAttachmentSrc();
+  return /* @__PURE__ */ jsxRuntime.jsxs(Avatar2, { className: "aui-attachment-tile-avatar h-full w-full rounded-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AvatarImage,
+      {
+        src,
+        alt: "Attachment preview",
+        className: "aui-attachment-tile-image object-cover"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { delayMs: isImage ? 200 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "aui-attachment-tile-fallback-icon size-8 text-muted-foreground" }) })
+  ] });
+};
+var AttachmentUI = () => {
+  const api = react.useAssistantApi();
+  const isComposer = api.attachment.source === "composer";
+  const isImage = react.useAssistantState(
+    ({ attachment }) => attachment.type === "image"
+  );
+  const typeLabel = react.useAssistantState(({ attachment }) => {
+    const type = attachment.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        return "File";
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      react.AttachmentPrimitive.Root,
+      {
+        className: cn(
+          "aui-attachment-root relative",
+          isImage && "aui-attachment-root-composer only:[&>#attachment-tile]:size-24"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[14px] border bg-muted transition-opacity hover:opacity-75",
+                isComposer && "aui-attachment-tile-composer border-foreground/20"
+              ),
+              role: "button",
+              id: "attachment-tile",
+              "aria-label": `${typeLabel} attachment`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentThumb, {})
+            }
+          ) }) }),
+          isComposer && /* @__PURE__ */ jsxRuntime.jsx(AttachmentRemove, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}) })
+  ] });
+};
+var AttachmentRemove = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipIconButton,
+    {
+      tooltip: "Remove file",
+      className: "aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black hover:[&_svg]:text-destructive",
+      side: "top",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" })
+    }
+  ) });
+};
+var UserMessageAttachments = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Attachments, { components: { Attachment: AttachmentUI } }) });
+};
+var ComposerAttachments = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.ComposerPrimitive.Attachments,
+    {
+      components: { Attachment: AttachmentUI }
+    }
+  ) });
+};
+var ComposerAddAttachment = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipIconButton,
+    {
+      tooltip: "Add Attachment",
+      side: "bottom",
+      variant: "ghost",
+      size: "icon",
+      className: "aui-composer-add-attachment size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30",
+      "aria-label": "Add Attachment",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaperclipIcon, { className: "aui-attachment-add-icon size-5 stroke-[1.5px]" })
+    }
+  ) });
+};
+var MarkdownTextImpl = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactMarkdown.MarkdownTextPrimitive,
+    {
+      remarkPlugins: [remarkGfm__default.default],
+      className: "aui-md",
+      components: defaultComponents
+    }
+  );
+};
+var MarkdownText = React.memo(MarkdownTextImpl);
+var CodeHeader = ({ language, code }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard2();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 font-semibold text-foreground text-sm dark:bg-muted-foreground/20", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aui-code-header-language lowercase [&>span]:text-xs", children: language }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", onClick: onCopy, children: [
+      !isCopied && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}),
+      isCopied && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {})
+    ] })
+  ] });
+};
+var useCopyToClipboard2 = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const copyToClipboard = (value) => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+  return { isCopied, copyToClipboard };
+};
+var defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h1",
+    {
+      className: cn(
+        "aui-md-h1 mb-8 scroll-m-20 font-extrabold text-4xl tracking-tight last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h2",
+    {
+      className: cn(
+        "aui-md-h2 mt-8 mb-4 scroll-m-20 font-semibold text-3xl tracking-tight first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      className: cn(
+        "aui-md-h3 mt-6 mb-4 scroll-m-20 font-semibold text-2xl tracking-tight first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h4",
+    {
+      className: cn(
+        "aui-md-h4 mt-6 mb-4 scroll-m-20 font-semibold text-xl tracking-tight first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h5: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h5",
+    {
+      className: cn(
+        "aui-md-h5 my-4 font-semibold text-lg first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h6: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h6",
+    {
+      className: cn(
+        "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  p: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: cn(
+        "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  a: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      className: cn(
+        "aui-md-a font-medium text-primary underline underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  ),
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "blockquote",
+    {
+      className: cn("aui-md-blockquote border-l-2 pl-6 italic", className),
+      ...props
+    }
+  ),
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className),
+      ...props
+    }
+  ),
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      className: cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className),
+      ...props
+    }
+  ),
+  hr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: cn("aui-md-hr my-5 border-b", className), ...props }),
+  table: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      className: cn(
+        "aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  ),
+  th: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      className: cn(
+        "aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right",
+        className
+      ),
+      ...props
+    }
+  ),
+  td: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: cn(
+        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
+        className
+      ),
+      ...props
+    }
+  ),
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: cn(
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        className
+      ),
+      ...props
+    }
+  ),
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "sup",
+    {
+      className: cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className),
+      ...props
+    }
+  ),
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "pre",
+    {
+      className: cn(
+        "aui-md-pre overflow-x-auto rounded-t-none! rounded-b-lg bg-black p-4 text-white",
+        className
+      ),
+      ...props
+    }
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = reactMarkdown.useIsMarkdownCodeBlock();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
+      {
+        className: cn(
+          !isCodeBlock && "aui-md-inline-code rounded border bg-muted font-semibold",
+          className
+        ),
+        ...props
+      }
+    );
+  },
+  CodeHeader
+});
+var ToolFallback = ({
+  toolName,
+  argsText,
+  result,
+  status
+}) => {
+  const isStreaming = status?.type === "running";
+  const isError = status?.type === "incomplete";
+  const isCancelled = status?.type === "incomplete" && status.reason === "cancelled";
+  const cancelledReason = isCancelled && status.error ? typeof status.error === "string" ? status.error : JSON.stringify(status.error) : null;
+  const titlePrefix = isCancelled ? "Cancelled: " : isStreaming ? "Running: " : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolCard,
+    {
+      title: `${titlePrefix}${toolName}`,
+      isStreaming,
+      isError,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-white", children: [
+        cancelledReason && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Cancelled reason:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/60", children: cancelledReason })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(isCancelled && "opacity-60"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Arguments:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-black/20 p-1.5 rounded text-white/80", children: argsText })
+        ] }),
+        !isCancelled && result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/10 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Result:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-black/20 p-1.5 rounded text-white/80", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
+        ] })
+      ] })
+    }
+  );
+};
+var ContextPill = ({
+  label,
+  onRemove,
+  readonly = false,
+  className
+}) => {
+  const showRemoveButton = !readonly && onRemove;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex items-center gap-1 rounded-md border border-muted-foreground py-1 px-1.5 text-xs",
+          "max-w-[200px] cursor-default",
+          className
+        ),
+        children: [
+          showRemoveButton && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onRemove,
+              "aria-label": `Remove ${label}`,
+              className: "shrink-0 hover:text-destructive transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", sideOffset: 4, children: label })
+  ] });
+};
+function Popover({
+  modal = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { modal, ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { ...props });
+}
+function PopoverContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverPrimitive__namespace.Content,
+    {
+      align,
+      sideOffset,
+      className: cn(
+        "z-[10000] w-72 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",
+        className
+      ),
+      style: {
+        zIndex: 1e4,
+        borderColor: theme.colors.border,
+        ...props.style
+      },
+      ...props
+    }
+  ) });
+}
+var TYPE_ICONS = {
+  attachment: lucideReact.FileIcon,
+  description: lucideReact.FileTextIcon,
+  caption: lucideReact.VideoIcon,
+  link: lucideReact.LinkIcon
+};
+var ContextMentionPopover = ({
+  isOpen,
+  onOpenChange,
+  categories,
+  isLoading,
+  activeIndex,
+  flattenedItems,
+  onSelectItem,
+  onActiveIndexChange,
+  getCategoryLabel,
+  trigger,
+  searchTerm
+}) => {
+  const activeItemRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isOpen && activeItemRef.current) {
+      activeItemRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [activeIndex, isOpen]);
+  const getFlattenedIndex = (categoryIndex, itemIndex) => {
+    let index = 0;
+    for (let i = 0; i < categoryIndex; i++) {
+      index += categories[i].items.length;
+    }
+    return index + itemIndex;
+  };
+  const hasNoResults = !isLoading && flattenedItems.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        className: "w-72 max-h-80 overflow-y-auto p-0",
+        align: "start",
+        side: "top",
+        sideOffset: 8,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: searchTerm ? `Searching for "${searchTerm}"` : "Select context to focus on" }) }),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderIcon, { className: "size-5 animate-spin text-muted-foreground" }) }),
+          hasNoResults && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: [
+            "No context items found",
+            searchTerm && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs mt-1", children: "Try a different search term" })
+          ] }),
+          !isLoading && categories.map((category, categoryIndex) => {
+            if (category.items.length === 0) return null;
+            const Icon = TYPE_ICONS[category.type] || lucideReact.FileIcon;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: getCategoryLabel(category.type) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground/60", children: [
+                  "(",
+                  category.items.length,
+                  ")"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: category.items.map((item, itemIndex) => {
+                const flatIndex = getFlattenedIndex(
+                  categoryIndex,
+                  itemIndex
+                );
+                const isActive = flatIndex === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    ref: isActive ? activeItemRef : null,
+                    type: "button",
+                    className: cn(
+                      "flex flex-col items-start px-3 py-2 text-left text-sm transition-colors",
+                      "hover:bg-accent/10",
+                      isActive && "bg-accent/20"
+                    ),
+                    onClick: () => onSelectItem(item),
+                    onMouseEnter: () => onActiveIndexChange(flatIndex),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate w-full font-medium text-foreground", children: item.title }),
+                      (item.lessonTitle || item.chapterTitle) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate w-full text-xs text-muted-foreground", children: item.chapterTitle && item.lessonTitle ? `${item.chapterTitle} > ${item.lessonTitle}` : item.lessonTitle || item.chapterTitle })
+                    ]
+                  },
+                  item.id
+                );
+              }) })
+            ] }, category.type);
+          })
+        ] })
+      }
+    )
+  ] });
+};
+var TYPE_ICON_SVGS = {
+  attachment: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>',
+  description: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>',
+  caption: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>',
+  link: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>'
+};
+function getTypeIconSvg(type) {
+  return TYPE_ICON_SVGS[type] || TYPE_ICON_SVGS.attachment;
+}
+var ZERO_WIDTH_SPACE = "\u200B";
+var MentionComposerInput = React.forwardRef(
+  ({
+    placeholder = "Ask, search, or make anything...",
+    className,
+    autoFocus = false,
+    onInput,
+    onKeyDown,
+    onMentionRemove,
+    onTriggerDetected,
+    onTriggerDismissed,
+    onSubmit
+  }, ref) => {
+    const editorRef = React.useRef(null);
+    const composerRuntime = react.useComposerRuntime();
+    const [isEmpty, setIsEmpty] = React.useState(true);
+    const [inlineMentions, setInlineMentions] = React.useState([]);
+    const triggerPositionRef = React.useRef(null);
+    const getPlainText = React.useCallback(() => {
+      const editor = editorRef.current;
+      if (!editor) return "";
+      let text = "";
+      const walkNodes = (node2) => {
+        if (node2.nodeType === Node.TEXT_NODE) {
+          const nodeText = node2.textContent || "";
+          text += nodeText.replace(/\u200B/g, "");
+        } else if (node2.nodeType === Node.ELEMENT_NODE) {
+          const element = node2;
+          if (element.dataset.mentionId) {
+            const title = element.dataset.mentionTitle || "";
+            text += `[${title}]`;
+          } else if (element.tagName === "BR") {
+            text += "\n";
+          } else {
+            node2.childNodes.forEach(walkNodes);
+          }
+        }
+      };
+      editor.childNodes.forEach(walkNodes);
+      return text.trim();
+    }, []);
+    const getCursorPosition = React.useCallback(() => {
+      const selection = window.getSelection();
+      if (!selection || !selection.rangeCount) return 0;
+      const range = selection.getRangeAt(0);
+      const preCaretRange = range.cloneRange();
+      preCaretRange.selectNodeContents(editorRef.current);
+      preCaretRange.setEnd(range.endContainer, range.endOffset);
+      let position2 = 0;
+      const walkNodes = (node2) => {
+        if (node2 === range.endContainer) {
+          if (node2.nodeType === Node.TEXT_NODE) {
+            position2 += range.endOffset;
+          }
+          return true;
+        }
+        if (node2.nodeType === Node.TEXT_NODE) {
+          const text = (node2.textContent || "").replace(/\u200B/g, "");
+          position2 += text.length;
+        } else if (node2.nodeType === Node.ELEMENT_NODE) {
+          const element = node2;
+          if (element.dataset.mentionId) {
+            const title = element.dataset.mentionTitle || "";
+            position2 += title.length + 2;
+          } else if (element.tagName === "BR") {
+            position2 += 1;
+          } else {
+            for (const child of Array.from(node2.childNodes)) {
+              if (walkNodes(child)) return true;
+            }
+          }
+        }
+        return false;
+      };
+      if (editorRef.current) {
+        for (const child of Array.from(editorRef.current.childNodes)) {
+          if (walkNodes(child)) break;
+        }
+      }
+      return position2;
+    }, []);
+    const syncToRuntime = React.useCallback(() => {
+      const text = getPlainText();
+      composerRuntime.setText(text);
+      setIsEmpty(text.length === 0);
+    }, [composerRuntime, getPlainText]);
+    const handleInput = React.useCallback(() => {
+      syncToRuntime();
+      const text = getPlainText();
+      const cursorPos = getCursorPosition();
+      onInput?.({ text, cursorPosition: cursorPos });
+      const editor = editorRef.current;
+      if (!editor) return;
+      const selection = window.getSelection();
+      if (!selection || !selection.rangeCount) return;
+      const range = selection.getRangeAt(0);
+      let textBeforeCursor = "";
+      let charCount = 0;
+      const walkForText = (node2) => {
+        if (node2 === range.endContainer) {
+          if (node2.nodeType === Node.TEXT_NODE) {
+            textBeforeCursor += (node2.textContent || "").slice(0, range.endOffset);
+          }
+          return true;
+        }
+        if (node2.nodeType === Node.TEXT_NODE) {
+          textBeforeCursor += node2.textContent || "";
+          charCount += (node2.textContent || "").length;
+        } else if (node2.nodeType === Node.ELEMENT_NODE) {
+          const element = node2;
+          if (element.dataset.mentionId) {
+            textBeforeCursor += " ";
+            charCount += 1;
+          } else {
+            for (const child of Array.from(node2.childNodes)) {
+              if (walkForText(child)) return true;
+            }
+          }
+        }
+        return false;
+      };
+      for (const child of Array.from(editor.childNodes)) {
+        if (walkForText(child)) break;
+      }
+      const lastAtIndex = textBeforeCursor.lastIndexOf("@");
+      if (lastAtIndex !== -1) {
+        const charBeforeAt = lastAtIndex > 0 ? textBeforeCursor[lastAtIndex - 1] : " ";
+        if (charBeforeAt === " " || charBeforeAt === "\n" || charBeforeAt === ZERO_WIDTH_SPACE || lastAtIndex === 0) {
+          const searchText = textBeforeCursor.slice(lastAtIndex + 1);
+          if (!searchText.includes(" ")) {
+            triggerPositionRef.current = lastAtIndex;
+            onTriggerDetected?.(searchText, lastAtIndex);
+            return;
+          }
+        }
+      }
+      if (triggerPositionRef.current !== null) {
+        triggerPositionRef.current = null;
+        onTriggerDismissed?.();
+      }
+    }, [syncToRuntime, getPlainText, getCursorPosition, onInput, onTriggerDetected, onTriggerDismissed]);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          if (onKeyDown) {
+            onKeyDown(e);
+            if (e.defaultPrevented) {
+              return;
+            }
+          }
+          e.preventDefault();
+          const text = getPlainText();
+          if (text.trim()) {
+            onSubmit?.();
+          }
+          return;
+        }
+        if (e.key === "Backspace") {
+          const selection = window.getSelection();
+          if (!selection || !selection.rangeCount) return;
+          const range = selection.getRangeAt(0);
+          if (range.collapsed) {
+            const container = range.startContainer;
+            const offset = range.startOffset;
+            if (container.nodeType === Node.TEXT_NODE && offset === 0) {
+              let prevSibling = container.previousSibling;
+              if (!prevSibling && container.parentElement !== editorRef.current) {
+                prevSibling = container.parentElement?.previousSibling || null;
+              }
+              if (prevSibling && prevSibling.dataset?.mentionId) {
+                e.preventDefault();
+                const mentionId = prevSibling.dataset.mentionId;
+                prevSibling.parentNode?.removeChild(prevSibling);
+                setInlineMentions((prev2) => prev2.filter((m) => m.id !== mentionId));
+                onMentionRemove?.(mentionId);
+                syncToRuntime();
+                return;
+              }
+            }
+            if (container.nodeType === Node.ELEMENT_NODE) {
+              const element = container;
+              const childAtOffset = element.childNodes[offset - 1];
+              if (childAtOffset && childAtOffset.dataset?.mentionId) {
+                e.preventDefault();
+                const mentionId = childAtOffset.dataset.mentionId;
+                childAtOffset.parentNode?.removeChild(childAtOffset);
+                setInlineMentions((prev2) => prev2.filter((m) => m.id !== mentionId));
+                onMentionRemove?.(mentionId);
+                syncToRuntime();
+                return;
+              }
+            }
+          }
+        }
+        onKeyDown?.(e);
+      },
+      [onKeyDown, onMentionRemove, syncToRuntime, onSubmit, getPlainText]
+    );
+    const insertMention = React.useCallback(
+      (mention) => {
+        const editor = editorRef.current;
+        if (!editor) return;
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount) return;
+        const range = selection.getRangeAt(0);
+        if (triggerPositionRef.current !== null) {
+          let currentPos = 0;
+          let foundNode = null;
+          let foundOffset = 0;
+          const findAtPosition = (node2) => {
+            if (node2.nodeType === Node.TEXT_NODE) {
+              const text = node2.textContent || "";
+              const targetPosInNode = triggerPositionRef.current - currentPos;
+              if (targetPosInNode >= 0 && targetPosInNode < text.length) {
+                foundNode = node2;
+                foundOffset = targetPosInNode;
+                return true;
+              }
+              currentPos += text.length;
+            } else if (node2.nodeType === Node.ELEMENT_NODE) {
+              const element = node2;
+              if (element.dataset.mentionId) {
+                currentPos += 1;
+              } else {
+                for (const child of Array.from(node2.childNodes)) {
+                  if (findAtPosition(child)) return true;
+                }
+              }
+            }
+            return false;
+          };
+          for (const child of Array.from(editor.childNodes)) {
+            if (findAtPosition(child)) break;
+          }
+          if (foundNode) {
+            const deleteRange = document.createRange();
+            deleteRange.setStart(foundNode, foundOffset);
+            deleteRange.setEnd(range.endContainer, range.endOffset);
+            deleteRange.deleteContents();
+          }
+        }
+        const mentionEl = document.createElement("span");
+        mentionEl.className = "inline-flex items-center gap-1 rounded-md border border-muted-foreground py-0.5 px-1.5 text-xs mx-0.5 cursor-default select-none bg-muted/50 max-w-[350px]";
+        mentionEl.contentEditable = "false";
+        mentionEl.dataset.mentionId = mention.id;
+        mentionEl.dataset.mentionTitle = mention.title;
+        if (mention.icon) {
+          const iconImg = document.createElement("img");
+          iconImg.src = mention.icon;
+          iconImg.className = "size-3.5 rounded-sm shrink-0";
+          iconImg.alt = "";
+          mentionEl.appendChild(iconImg);
+        } else if (mention.type) {
+          const iconSpan = document.createElement("span");
+          iconSpan.className = "size-3.5 shrink-0 flex items-center justify-center";
+          iconSpan.innerHTML = getTypeIconSvg(mention.type);
+          mentionEl.appendChild(iconSpan);
+        }
+        const titleSpan = document.createElement("span");
+        titleSpan.className = "truncate";
+        titleSpan.textContent = mention.title;
+        mentionEl.appendChild(titleSpan);
+        const insertRange = selection.getRangeAt(0);
+        insertRange.insertNode(mentionEl);
+        const spaceNode = document.createTextNode(" ");
+        mentionEl.after(spaceNode);
+        const newRange = document.createRange();
+        newRange.setStartAfter(spaceNode);
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+        setInlineMentions((prev2) => [...prev2, mention]);
+        triggerPositionRef.current = null;
+        syncToRuntime();
+        setTimeout(() => {
+          editorRef.current?.focus();
+        }, 10);
+      },
+      [syncToRuntime]
+    );
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => editorRef.current?.focus(),
+        getValue: getPlainText,
+        insertMention,
+        getInlineMentions: () => inlineMentions
+      }),
+      [getPlainText, insertMention, inlineMentions]
+    );
+    React.useEffect(() => {
+      if (autoFocus) {
+        editorRef.current?.focus();
+      }
+    }, [autoFocus]);
+    React.useEffect(() => {
+      const unsubscribe = composerRuntime.subscribe(() => {
+        const composerState = composerRuntime.getState();
+        if (composerState.text === "" && editorRef.current) {
+          editorRef.current.innerHTML = "";
+          setInlineMentions([]);
+          setIsEmpty(true);
+        }
+      });
+      return unsubscribe;
+    }, [composerRuntime]);
+    const handlePaste = React.useCallback((e) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      document.execCommand("insertText", false, text);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: editorRef,
+        contentEditable: true,
+        role: "textbox",
+        "aria-label": "Message input",
+        "data-placeholder": placeholder,
+        className: cn(
+          "aui-composer-input mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none",
+          "overflow-y-auto whitespace-pre-wrap wrap-break-word",
+          "focus:outline-none focus-visible:ring-0",
+          // Placeholder styling using data attribute
+          "empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none",
+          className
+        ),
+        onInput: handleInput,
+        onKeyDown: handleKeyDown,
+        onPaste: handlePaste,
+        suppressContentEditableWarning: true
+      }
+    ) });
+  }
+);
+MentionComposerInput.displayName = "MentionComposerInput";
+var TYPE_ICONS2 = {
+  attachment: lucideReact.FileIcon,
+  description: lucideReact.FileTextIcon,
+  caption: lucideReact.VideoIcon,
+  link: lucideReact.LinkIcon
+};
+var InlineContextPill = ({
+  title,
+  type = "attachment",
+  className
+}) => {
+  const Icon = TYPE_ICONS2[type] || lucideReact.FileIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-md border border-muted-foreground/50 py-0.5 px-1.5 text-xs mx-0.5",
+          "max-w-[350px] cursor-default bg-muted/30 align-middle",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3 shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: title })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", sideOffset: 4, children: title })
+  ] });
+};
+function parseMessageContent(text) {
+  const parts = [];
+  const regex = /\[([^\]]+)\]/g;
+  let lastIndex = 0;
+  let match2;
+  while ((match2 = regex.exec(text)) !== null) {
+    if (match2.index > lastIndex) {
+      parts.push({
+        type: "text",
+        content: text.slice(lastIndex, match2.index)
+      });
+    }
+    parts.push({
+      type: "context",
+      content: match2[1]
+      // The title inside brackets
+    });
+    lastIndex = match2.index + match2[0].length;
+  }
+  if (lastIndex < text.length) {
+    parts.push({
+      type: "text",
+      content: text.slice(lastIndex)
+    });
+  }
+  return parts;
+}
+var UserMessageContent = () => {
+  const message = react.useMessage();
+  const renderedContent = React.useMemo(() => {
+    const textParts = message.content?.filter(
+      (part) => part.type === "text"
+    );
+    if (!textParts || textParts.length === 0) {
+      return null;
+    }
+    const fullText = textParts.map((part) => part.text).join("");
+    const parsed = parseMessageContent(fullText);
+    return parsed.map((part, index) => {
+      if (part.type === "context") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          InlineContextPill,
+          {
+            title: part.content
+          },
+          `context-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: part.content }, `text-${index}`);
+    });
+  }, [message.content]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedContent });
+};
+var CATEGORY_LABELS = {
+  attachment: "Attachments",
+  description: "Description",
+  caption: "Video",
+  link: "Links"
+};
+function useContextMention(options = {}) {
+  const { onInsertMention } = options;
+  const widgetContext = React.useContext(WidgetContext);
+  if (!widgetContext) {
+    throw new Error("useContextMention must be used within a WidgetProvider");
+  }
+  const { client } = widgetContext;
+  const { selectedContext: selectedItems, addContextItem, removeContextItem, clearContext } = useMessageContext();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [categories, setCategories] = React.useState([]);
+  const [hasMore, setHasMore] = React.useState(false);
+  const config = client.getConfig();
+  const baseUrl = config.baseUrl || "http://localhost:3000";
+  const assistantId = config.apiKey;
+  const fetchContextItems = React.useCallback(
+    async (search = "", limit = 10) => {
+      setIsLoading(true);
+      try {
+        const params = new URLSearchParams({
+          limit: limit.toString()
+        });
+        if (search) {
+          params.set("search", search);
+        }
+        const response = await fetch(
+          `${baseUrl}/api/widget/context?${params.toString()}`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Assistant-Id": assistantId
+            }
+          }
+        );
+        if (!response.ok) {
+          console.error("[ContextMention] Failed to fetch context:", response.status);
+          return;
+        }
+        const data = await response.json();
+        setCategories(data.categories);
+        setHasMore(data.hasMore);
+      } catch (error) {
+        console.error("[ContextMention] Error fetching context:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [baseUrl, assistantId]
+  );
+  const openPopover = React.useCallback(() => {
+    setIsOpen(true);
+    setSearchTerm("");
+    setActiveIndex(0);
+    fetchContextItems();
+  }, [fetchContextItems]);
+  const closePopover = React.useCallback(() => {
+    setIsOpen(false);
+    setSearchTerm("");
+    setActiveIndex(0);
+  }, []);
+  const updateSearch = React.useCallback(
+    (term) => {
+      setSearchTerm(term);
+      setActiveIndex(0);
+      fetchContextItems(term);
+    },
+    [fetchContextItems]
+  );
+  const flattenedItems = React.useMemo(() => {
+    return categories.flatMap((category) => category.items);
+  }, [categories]);
+  const navigateDown = React.useCallback(() => {
+    setActiveIndex(
+      (prev2) => prev2 < flattenedItems.length - 1 ? prev2 + 1 : prev2
+    );
+  }, [flattenedItems.length]);
+  const navigateUp = React.useCallback(() => {
+    setActiveIndex((prev2) => prev2 > 0 ? prev2 - 1 : 0);
+  }, []);
+  const selectActiveItem = React.useCallback(() => {
+    const item = flattenedItems[activeIndex];
+    if (item) {
+      addContextItem(item);
+      closePopover();
+      onInsertMention?.(item);
+    }
+  }, [flattenedItems, activeIndex, addContextItem, closePopover, onInsertMention]);
+  const selectItem = React.useCallback(
+    (item) => {
+      addContextItem(item);
+      closePopover();
+      onInsertMention?.(item);
+    },
+    [addContextItem, closePopover, onInsertMention]
+  );
+  const removeItem = React.useCallback((itemId) => {
+    removeContextItem(itemId);
+  }, [removeContextItem]);
+  const clearAll = React.useCallback(() => {
+    clearContext();
+  }, [clearContext]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!isOpen) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          navigateDown();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          navigateUp();
+          break;
+        case "Enter":
+          event.preventDefault();
+          selectActiveItem();
+          break;
+        case "Escape":
+          event.preventDefault();
+          closePopover();
+          break;
+      }
+    },
+    [isOpen, navigateDown, navigateUp, selectActiveItem, closePopover]
+  );
+  const getCategoryLabel = React.useCallback((type) => {
+    return CATEGORY_LABELS[type] || type;
+  }, []);
+  return {
+    // Selected items
+    selectedItems,
+    selectItem,
+    removeItem,
+    clearAll,
+    // Popover state
+    isOpen,
+    openPopover,
+    closePopover,
+    // Search
+    searchTerm,
+    updateSearch,
+    // Navigation
+    activeIndex,
+    setActiveIndex,
+    navigateUp,
+    navigateDown,
+    selectActiveItem,
+    handleKeyDown,
+    // Data
+    categories,
+    flattenedItems,
+    isLoading,
+    hasMore,
+    // Utilities
+    getCategoryLabel
+  };
+}
+var Thread = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.ThreadPrimitive.Root,
+    {
+      className: "aui-thread-root @container flex h-full flex-col bg-background",
+      style: {
+        ["--thread-max-width"]: "44rem"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.ThreadPrimitive.Viewport,
+        {
+          className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.AssistantIf, { condition: ({ thread }) => thread.isEmpty, children: /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.ThreadPrimitive.Messages,
+              {
+                components: {
+                  UserMessage,
+                  EditComposer,
+                  AssistantMessage
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ThreadScrollToBottom, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(Composer, {})
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var ThreadScrollToBottom = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipIconButton,
+    {
+      tooltip: "Scroll to bottom",
+      variant: "outline",
+      className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {})
+    }
+  ) });
+};
+var getGreeting = () => {
+  const hour = (/* @__PURE__ */ new Date()).getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 18) return "Good afternoon";
+  return "Good evening";
+};
+var STATIC_SUGGESTIONS = [
+  {
+    label: "Explain this concept in detail",
+    icon: lucideReact.MessageSquareTextIcon,
+    prompt: "Explain this concept to me by drawing comparisons"
+  },
+  {
+    label: "Generate a podcast",
+    icon: lucideReact.PodcastIcon,
+    prompt: "/audio"
+  },
+  {
+    label: "Quiz me",
+    icon: lucideReact.BadgeQuestionMarkIcon,
+    prompt: "/quiz"
+  },
+  {
+    label: "Generate flashcards",
+    icon: lucideReact.WalletCardsIcon,
+    prompt: "/flashcards"
+  }
+];
+var ThreadWelcome = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-thread-welcome-root mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in font-semibold text-2xl duration-200",
+          style: {
+            color: "var(--color-primary)"
+          },
+          children: getGreeting()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in text-muted-foreground text-xl delay-75 duration-200", children: "How may I be of service?" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ThreadSuggestions, {})
+  ] });
+};
+var ThreadSuggestions = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-thread-welcome-suggestions flex w-full flex-col gap-2", children: STATIC_SUGGESTIONS.map((suggestion, index) => {
+    const Icon = suggestion.icon;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200",
+        style: { animationDelay: `${200 + index * 50}ms` },
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.Suggestion, { prompt: suggestion.prompt, send: true, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            className: "aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-2xl border text-left text-sm transition-colors hover:bg-muted hover:text-primary",
+            "aria-label": suggestion.label,
+            style: {
+              borderWidth: 0,
+              padding: 8
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: suggestion.label })
+            ] })
+          }
+        ) })
+      },
+      suggestion.prompt
+    );
+  }) });
+};
+var Composer = () => {
+  const inputRef = React.useRef(null);
+  const composerRuntime = react.useComposerRuntime();
+  const handleSubmit = React.useCallback(() => {
+    composerRuntime.send();
+  }, [composerRuntime]);
+  const handleInsertMention = React.useCallback((item) => {
+    inputRef.current?.insertMention({
+      id: item.id,
+      title: item.title,
+      icon: item.icon,
+      type: item.type
+    });
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, []);
+  const {
+    isOpen,
+    openPopover,
+    closePopover,
+    categories,
+    isLoading,
+    activeIndex,
+    flattenedItems,
+    selectItem,
+    setActiveIndex,
+    handleKeyDown,
+    getCategoryLabel,
+    searchTerm,
+    updateSearch
+  } = useContextMention({ onInsertMention: handleInsertMention });
+  const { selectedContext, removeContextItem } = useMessageContext();
+  const handleTriggerDetected = React.useCallback(
+    (searchText) => {
+      if (!isOpen) {
+        openPopover();
+      }
+      updateSearch(searchText);
+    },
+    [isOpen, openPopover, updateSearch]
+  );
+  const handleTriggerDismissed = React.useCallback(() => {
+    if (isOpen) {
+      closePopover();
+    }
+  }, [isOpen, closePopover]);
+  const handleComposerKeyDown = React.useCallback(
+    (e) => {
+      if (isOpen) {
+        if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
+          e.preventDefault();
+          handleKeyDown(e);
+          if (e.key === "Escape") {
+            setTimeout(() => {
+              inputRef.current?.focus();
+            }, 0);
+          }
+        }
+      }
+    },
+    [isOpen, handleKeyDown]
+  );
+  const handleMentionRemove = React.useCallback(
+    (mentionId) => {
+      removeContextItem(mentionId);
+    },
+    [removeContextItem]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Root, { className: "aui-composer-root relative flex w-full flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.AttachmentDropzone, { className: "aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[[contenteditable]:focus-visible]:border-ring has-[[contenteditable]:focus-visible]:ring-2 has-[[contenteditable]:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerContextUI,
+      {
+        isOpen,
+        onOpenChange: (open) => open ? openPopover() : closePopover(),
+        categories,
+        isLoading,
+        activeIndex,
+        flattenedItems,
+        onSelectItem: selectItem,
+        onActiveIndexChange: setActiveIndex,
+        getCategoryLabel,
+        searchTerm,
+        selectedItems: selectedContext,
+        onRemoveItem: removeContextItem
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MentionComposerInput,
+      {
+        ref: inputRef,
+        placeholder: "Ask, search, or make anything...",
+        autoFocus: true,
+        onTriggerDetected: handleTriggerDetected,
+        onTriggerDismissed: handleTriggerDismissed,
+        onKeyDown: handleComposerKeyDown,
+        onMentionRemove: handleMentionRemove,
+        onSubmit: handleSubmit
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, {})
+  ] }) });
+};
+var ComposerContextUI = ({
+  isOpen,
+  onOpenChange,
+  categories,
+  isLoading,
+  activeIndex,
+  flattenedItems,
+  onSelectItem,
+  onActiveIndexChange,
+  getCategoryLabel,
+  searchTerm,
+  selectedItems,
+  onRemoveItem
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-composer-context mb-2 flex items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ContextMentionPopover,
+      {
+        isOpen,
+        onOpenChange,
+        categories,
+        isLoading,
+        activeIndex,
+        flattenedItems,
+        onSelectItem,
+        onActiveIndexChange,
+        getCategoryLabel,
+        searchTerm,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipIconButton,
+          {
+            tooltip: "Add context (@)",
+            side: "bottom",
+            variant: "ghost",
+            size: "icon",
+            className: "aui-composer-add-context size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30",
+            "aria-label": "Add context (@)",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AtSignIcon, { className: "size-5 stroke-[1.5px]" })
+          }
+        )
+      }
+    ),
+    selectedItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 overflow-x-auto", children: selectedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      ContextPill,
+      {
+        label: item.title,
+        onRemove: () => onRemoveItem(item.id)
+      },
+      item.id
+    )) })
+  ] });
+};
+var ComposerAction = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-composer-action-wrapper relative mx-2 mb-2 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ComposerAddAttachment, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "All sources",
+          side: "bottom",
+          variant: "ghost",
+          size: "icon",
+          className: "aui-composer-all-sources size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30",
+          "aria-label": "All sources",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GlobeIcon, { className: "size-5 stroke-[1.5px]" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.AssistantIf, { condition: ({ thread }) => !thread.isRunning, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TooltipIconButton,
+      {
+        tooltip: "Send message",
+        side: "bottom",
+        type: "submit",
+        variant: "default",
+        className: "aui-composer-send size-8 rounded-full",
+        "aria-label": "Send message",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.AssistantIf, { condition: ({ thread }) => thread.isRunning, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "default",
+        size: "icon",
+        className: "aui-composer-cancel size-8 rounded-full",
+        "aria-label": "Stop generating",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+      }
+    ) }) })
+  ] });
+};
+var MessageError = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Error, { children: /* @__PURE__ */ jsxRuntime.jsx(react.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: /* @__PURE__ */ jsxRuntime.jsx(react.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+};
+var AssistantMessage = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.MessagePrimitive.Root,
+    {
+      className: "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150",
+      "data-role": "assistant",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.MessagePrimitive.Parts,
+            {
+              components: {
+                Text: MarkdownText,
+                tools: { Fallback: ToolFallback }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(MessageError, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-assistant-message-footer mt-1 ml-2 flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BranchPicker, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar, {})
+        ] })
+      ]
+    }
+  );
+};
+var AssistantActionBar = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.ActionBarPrimitive.Root,
+    {
+      hideWhenRunning: true,
+      autohide: "not-last",
+      autohideFloat: "single-branch",
+      className: "aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.AssistantIf, { condition: ({ message }) => message.isCopied, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.AssistantIf, { condition: ({ message }) => !message.isCopied, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Export as Markdown", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Refresh", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCwIcon, {}) }) })
+      ]
+    }
+  );
+};
+var MessageContextIndicator = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const contextItems = react.useMessage((state) => {
+    console.log("[MessageContextIndicator] Message state:", state);
+    const metadata = state.metadata;
+    const context = metadata?.context || metadata?.custom?.context;
+    console.log("[MessageContextIndicator] Context:", context);
+    return context;
+  });
+  if (!contextItems || contextItems.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-start-2 mb-1 flex flex-col items-end", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            contextItems.length,
+            " Context"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDownIcon,
+            {
+              className: cn(
+                "size-3.5 transition-transform duration-200",
+                isExpanded && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-wrap gap-1 justify-end", children: contextItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground",
+        children: item.title
+      },
+      item.id
+    )) })
+  ] });
+};
+var UserMessage = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.MessagePrimitive.Root,
+    {
+      className: "aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2",
+      "data-role": "user",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MessageContextIndicator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(UserMessageAttachments, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(UserMessageContent, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(UserActionBar, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(BranchPicker, { className: "aui-user-branch-picker col-span-full col-start-1 row-start-3 -mr-1 justify-end" })
+      ]
+    }
+  );
+};
+var UserActionBar = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.ActionBarPrimitive.Root,
+    {
+      hideWhenRunning: true,
+      autohide: "not-last",
+      className: "aui-user-action-bar-root flex flex-col items-end",
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit p-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PencilIcon, {}) }) })
+    }
+  );
+};
+var EditComposer = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.ComposerPrimitive.Input,
+      {
+        className: "aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none",
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", children: "Update" }) })
+    ] })
+  ] }) });
+};
+var BranchPicker = ({
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.BranchPickerPrimitive.Root,
+    {
+      hideWhenSingleBranch: true,
+      className: cn(
+        "aui-branch-picker-root mr-2 -ml-2 inline-flex items-center text-muted-foreground text-xs",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.BranchPickerPrimitive.Previous, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Previous", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aui-branch-picker-state font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.BranchPickerPrimitive.Number, {}),
+          " / ",
+          /* @__PURE__ */ jsxRuntime.jsx(react.BranchPickerPrimitive.Count, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.BranchPickerPrimitive.Next, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Next", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {}) }) })
+      ]
+    }
+  );
+};
+var ThreadList = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadListPrimitive.Root, { className: "aui-thread-list-root flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "Chats" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListPrimitive.New, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "New chat",
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-4 w-4" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.ThreadListPrimitive.Items,
+        {
+          components: {
+            ThreadListItem
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Archived" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.ThreadListPrimitive.Items,
+        {
+          archived: true,
+          components: {
+            ThreadListItem: ArchivedThreadListItem
+          }
+        }
+      )
+    ] })
+  ] });
+};
+var ThreadListItem = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadListItemPrimitive.Root, { className: "aui-thread-list-item group relative flex items-center gap-2 px-3 py-2 hover:bg-muted/50 data-[active]:bg-muted cursor-pointer transition-colors", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadListItemPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Title, { fallback: "New Chat" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Archive, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "Archive",
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArchiveIcon, { className: "h-3.5 w-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Delete, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "Delete",
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6 text-destructive hover:text-destructive",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: "h-3.5 w-3.5" })
+        }
+      ) })
+    ] })
+  ] });
+};
+var ArchivedThreadListItem = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadListItemPrimitive.Root, { className: "aui-thread-list-item-archived group relative flex items-center gap-2 px-3 py-2 hover:bg-muted/50 data-[active]:bg-muted cursor-pointer transition-colors opacity-70", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadListItemPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArchiveIcon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Title, { fallback: "Archived Chat" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Unarchive, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "Unarchive",
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArchiveRestoreIcon, { className: "h-3.5 w-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Delete, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "Delete",
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6 text-destructive hover:text-destructive",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: "h-3.5 w-3.5" })
+        }
+      ) })
+    ] })
+  ] });
+};
+var categoryIcons = {
+  audio: lucideReact.HeadphonesIcon,
+  "audio-overview": lucideReact.HeadphonesIcon,
+  "video-overview": lucideReact.VideoIcon,
+  "mind-map": lucideReact.NetworkIcon,
+  reports: lucideReact.FileTextIcon,
+  flashcards: lucideReact.LayersIcon,
+  quiz: lucideReact.HelpCircleIcon,
+  "slide-deck": lucideReact.PresentationIcon,
+  infographic: lucideReact.BarChart3Icon
+};
+var categoryColors = {
+  audio: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
+  "audio-overview": "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
+  "video-overview": "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
+  "mind-map": "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
+  reports: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
+  flashcards: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300",
+  quiz: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
+  "slide-deck": "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
+  infographic: "bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300"
+};
+var categoryLabels = {
+  audio: "Audio",
+  "audio-overview": "Audio Overview",
+  "video-overview": "Video Overview",
+  "mind-map": "Mind Map",
+  reports: "Report",
+  flashcards: "Flashcards",
+  quiz: "Quiz",
+  "slide-deck": "Slide Deck",
+  infographic: "Infographic"
+};
+var ArtifactCard = ({
+  category,
+  title,
+  content,
+  isLoading,
+  children
+}) => {
+  const Icon = categoryIcons[category];
+  const colorClass = categoryColors[category];
+  const label = categoryLabels[category];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3 px-4 py-3", colorClass), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-white/50 dark:bg-black/20", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium opacity-80", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "truncate font-semibold text-sm", children: title })
+      ] })
+    ] }),
+    content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line-clamp-4 whitespace-pre-wrap", children: content }) }),
+    children,
+    !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border px-4 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "h-3 w-3" }),
+        "Export"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "h-3 w-3" }),
+        "Open"
+      ] })
+    ] })
+  ] });
+};
+function createArtifactToolUI(category) {
+  return react.makeAssistantToolUI({
+    toolName: `create_${category.replace(/-/g, "_")}`,
+    render: ({ args, result, status }) => {
+      const isLoading = status.type === "running";
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ArtifactCard,
+        {
+          category,
+          title: args.title || "Generating...",
+          content: result?.content || args.content,
+          isLoading
+        }
+      );
+    }
+  });
+}
+var AudioOverviewToolUI = createArtifactToolUI("audio-overview");
+var VideoOverviewToolUI = createArtifactToolUI("video-overview");
+var MindMapToolUI = createArtifactToolUI("mind-map");
+var ReportsToolUI = createArtifactToolUI("reports");
+var FlashcardsToolUI = createArtifactToolUI("flashcards");
+var QuizToolUI = createArtifactToolUI("quiz");
+var SlideDeckToolUI = createArtifactToolUI("slide-deck");
+var InfographicToolUI = createArtifactToolUI("infographic");
+var ArtifactToolUIs = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AudioOverviewToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(VideoOverviewToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(MindMapToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ReportsToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(FlashcardsToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(QuizToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(SlideDeckToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(InfographicToolUI, {})
+  ] });
+};
+var ChatWidget = ({
+  sidebarOpen = false,
+  onSidebarClose
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 h-full w-full overflow-hidden bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ArtifactToolUIs, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(Thread, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: sidebarOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          className: "absolute inset-0 bg-black/50 z-40",
+          onClick: onSidebarClose
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.motion.div,
+        {
+          initial: { x: -256 },
+          animate: { x: 0 },
+          exit: { x: -256 },
+          transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+          className: cn(
+            "absolute left-0 top-0 bottom-0 w-64 bg-background z-50 overflow-hidden shadow-lg"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ThreadList, {})
+        }
+      )
+    ] }) })
+  ] });
+};
+var ThreadListItem2 = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Root, { className: "group relative flex items-center gap-2 px-2 py-1.5 hover:bg-muted/50 data-[active]:bg-muted cursor-pointer transition-colors rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListItemPrimitive.Title, { fallback: "New Chat" }) }) }) });
+};
+var ChatHistoryPopover = ({
+  onSelectThread
+}) => {
+  const handleThreadSelect = () => {
+    onSelectThread?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", onClick: handleThreadSelect, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", style: { color: "hsl(var(--muted-foreground))" }, children: "Previous 7 days" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.ThreadListPrimitive.Items,
+      {
+        components: {
+          ThreadListItem: ThreadListItem2
+        }
+      }
+    ) })
+  ] });
+};
+var layoutOptions = [
+  {
+    value: "sidebar",
+    label: "Sidebar",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, { className: "h-4 w-4" })
+  },
+  {
+    value: "floating",
+    label: "Floating",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareIcon, { className: "h-4 w-4" })
+  },
+  {
+    value: "fullscreen",
+    label: "Full Screen",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2Icon, { className: "h-4 w-4" })
+  }
+];
+var LayoutPopover = ({
+  currentLayout,
+  onLayoutChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: layoutOptions.map((option) => {
+    const isSelected = currentLayout === option.value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => onLayoutChange(option.value),
+        className: cn(
+          "flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted/50 transition-colors cursor-pointer w-full text-left",
+          isSelected && "bg-muted/30"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-4 h-4", children: option.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", style: { flex: 1 }, children: option.label }),
+          isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-4 w-4 text-foreground" })
+        ]
+      },
+      option.value
+    );
+  }) });
+};
+var LAYOUT_STORAGE_KEY = "learn-alchemy-widget-layout";
+function WidgetContainer({
+  defaultOpen = false,
+  position: position2 = "bottom-right"
+}) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const [sidebarOpen, setSidebarOpen] = React.useState(false);
+  const [chatHistoryOpen, setChatHistoryOpen] = React.useState(false);
+  const [layoutOpen, setLayoutOpen] = React.useState(false);
+  const [layout, setLayout] = React.useState("floating");
+  React.useEffect(() => {
+    const savedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY);
+    if (savedLayout && ["floating", "fullscreen", "sidebar"].includes(savedLayout)) {
+      setLayout(savedLayout);
+    }
+  }, []);
+  const handleLayoutChange = (newLayout) => {
+    setLayout(newLayout);
+    localStorage.setItem(LAYOUT_STORAGE_KEY, newLayout);
+    setLayoutOpen(false);
+  };
+  const threadTitle = react.useAssistantState(
+    ({ threadListItem }) => threadListItem?.title ?? "New AI chat"
+  );
+  const handleMinimize = () => {
+    setIsOpen(false);
+  };
+  const handleChatHistorySelect = () => {
+    setChatHistoryOpen(false);
+  };
+  const getWidgetStyles = () => {
+    const baseStyle = {
+      transformOrigin: position2 === "bottom-right" ? "bottom right" : "bottom left"
+    };
+    switch (layout) {
+      case "fullscreen":
+        return {
+          ...baseStyle,
+          position: "fixed",
+          width: "100vw",
+          height: "100vh",
+          maxWidth: "100vw",
+          maxHeight: "100vh",
+          borderRadius: 0,
+          bottom: 0,
+          right: 0,
+          left: 0,
+          top: 0,
+          margin: 0
+        };
+      case "sidebar":
+        return {
+          ...baseStyle,
+          position: "fixed",
+          width: "400px",
+          height: "100vh",
+          maxHeight: "100vh",
+          bottom: 0,
+          top: 0,
+          right: position2 === "bottom-right" ? 0 : "auto",
+          left: position2 === "bottom-left" ? 0 : "auto",
+          borderRadius: 0,
+          margin: 0
+        };
+      case "floating":
+      default:
+        return baseStyle;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(WidgetRoot, { position: position2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      WidgetPanel,
+      {
+        initial: { opacity: 0, scale: 0, y: 0 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0, y: 0 },
+        transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+        style: getWidgetStyles(),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(WidgetHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: chatHistoryOpen, onOpenChange: setChatHistoryOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  style: {
+                    cursor: "pointer",
+                    background: "none",
+                    border: "none",
+                    padding: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    minWidth: 0,
+                    flex: 1
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    Flex,
+                    {
+                      align: "center",
+                      gap: "xs",
+                      style: { minWidth: 0, flex: 1 },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          Text,
+                          {
+                            size: "sm",
+                            style: {
+                              fontWeight: 500,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                              minWidth: 0
+                            },
+                            children: threadTitle
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { size: 16, style: { flexShrink: 0 } })
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PopoverContent,
+                {
+                  align: "start",
+                  side: "bottom",
+                  sideOffset: 8,
+                  className: "w-64 p-0",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ChatHistoryPopover,
+                    {
+                      onSelectThread: handleChatHistorySelect
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: "xs", style: { flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.ThreadListPrimitive.New, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { "aria-label": "New chat", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EditIcon, { size: 18 }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: layoutOpen, onOpenChange: setLayoutOpen, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  IconButton,
+                  {
+                    "aria-label": "Layout options",
+                    style: {
+                      backgroundColor: layoutOpen ? "hsl(var(--muted))" : "transparent"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutIcon, { size: 18 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  PopoverContent,
+                  {
+                    align: "end",
+                    side: "bottom",
+                    sideOffset: 8,
+                    className: "w-48 p-2",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      LayoutPopover,
+                      {
+                        currentLayout: layout,
+                        onLayoutChange: handleLayoutChange
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  onClick: handleMinimize,
+                  "aria-label": "Minimize widget",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2Icon, { size: 18 })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(WidgetContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            ChatWidget,
+            {
+              sidebarOpen,
+              onSidebarClose: () => setSidebarOpen(false)
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: !isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      Flex,
+      {
+        justify: position2 === "bottom-right" ? "flex-end" : "flex-start",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          FAB,
+          {
+            onClick: () => setIsOpen(true),
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 20 },
+            transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+            whileHover: { scale: 1.1 },
+            whileTap: { scale: 0.9 },
+            "aria-label": "Open chat",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BotIcon, { size: 24, strokeWidth: 2 })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+var ReadOnlyThread = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.ThreadPrimitive.Root,
+    {
+      className: "aui-thread-root @container flex h-full flex-col bg-background",
+      style: {
+        ["--thread-max-width"]: "44rem"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.ThreadPrimitive.Viewport,
+        {
+          turnAnchor: "top",
+          className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4 pb-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.ThreadPrimitive.Messages,
+              {
+                components: {
+                  UserMessage: ReadOnlyUserMessage,
+                  EditComposer: ReadOnlyUserMessage,
+                  // Disable edit mode
+                  AssistantMessage: ReadOnlyAssistantMessage
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center text-muted-foreground", children: "No messages in this conversation." }) })
+          ]
+        }
+      )
+    }
+  );
+};
+var ReadOnlyAssistantMessage = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.MessagePrimitive.Root,
+    {
+      className: "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150",
+      "data-role": "assistant",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.MessagePrimitive.Parts,
+          {
+            components: {
+              Text: MarkdownText,
+              tools: { Fallback: ToolFallback }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Error, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Error, {}) }) })
+      ] })
+    }
+  );
+};
+var ReadOnlyUserMessage = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.MessagePrimitive.Root,
+    {
+      className: "aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2",
+      "data-role": "user",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UserMessageAttachments, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(UserMessageContent, {}) }) })
+      ]
+    }
+  );
+};
+
+exports.ArtifactToolUIs = ArtifactToolUIs;
+exports.ChatWidget = ChatWidget;
+exports.ReadOnlyThread = ReadOnlyThread;
+exports.Thread = Thread;
+exports.ThreadList = ThreadList;
+exports.WidgetContainer = WidgetContainer;
+exports.WidgetContext = WidgetContext;
+exports.WidgetProvider = WidgetProvider;
+exports.createWidgetCache = createWidgetCache;
+exports.theme = theme;
+exports.useChat = useChat;
+exports.useWidget = useWidget;
+exports.widgetCache = widgetCache;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map