@mordn/chat-widget 0.1.0

package/dist/index.js

@@ -0,0 +1,2663 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button,
+  ChatWidget: () => ChatWidget,
+  Dialog: () => Dialog,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogHeader: () => DialogHeader,
+  DialogTitle: () => DialogTitle,
+  Input: () => Input,
+  default: () => ChatWidget_default,
+  fontOptions: () => fontOptions,
+  useChatTheme: () => useChatTheme
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/ChatWidget.tsx
+var import_react11 = require("react");
+
+// src/ui/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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 shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs 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 shadow-xs 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"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/conversation.tsx
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_use_stick_to_bottom = require("use-stick-to-bottom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Conversation = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_use_stick_to_bottom.StickToBottom,
+  {
+    className: cn("relative flex-1 overflow-y-auto", className),
+    initial: "smooth",
+    resize: "smooth",
+    role: "log",
+    ...props
+  }
+);
+var ConversationContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_use_stick_to_bottom.StickToBottom.Content, { className: cn("p-4", className), ...props });
+var ConversationScrollButton = ({
+  className,
+  ...props
+}) => {
+  const { isAtBottom, scrollToBottom } = (0, import_use_stick_to_bottom.useStickToBottomContext)();
+  const handleScrollToBottom = (0, import_react.useCallback)(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+  return !isAtBottom && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Button,
+    {
+      className: cn(
+        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
+        className
+      ),
+      onClick: handleScrollToBottom,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ArrowDownIcon, { className: "size-4" })
+    }
+  );
+};
+
+// src/ui/avatar.tsx
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/components/message.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Message = ({ className, from, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "div",
+  {
+    className: cn(
+      "group flex w-full items-end justify-end gap-2",
+      from === "user" ? "is-user" : "is-assistant flex-row-reverse justify-end",
+      className
+    ),
+    ...props
+  }
+);
+var messageContentVariants = (0, import_class_variance_authority2.cva)(
+  "flex flex-col gap-2 overflow-hidden leading-relaxed chat-message-content",
+  {
+    variants: {
+      variant: {
+        contained: [
+          // User messages: compact bubbles on the right (max 85% width)
+          "group-[.is-user]:max-w-[85%] group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-lg group-[.is-user]:shadow-sm group-[.is-user]:px-4 group-[.is-user]:py-3",
+          // Assistant messages: no bubble, just text on background (max 100% width)
+          "group-[.is-assistant]:max-w-full"
+        ],
+        flat: [
+          // User messages: compact on the right
+          "group-[.is-user]:max-w-[85%] group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-lg",
+          // Assistant messages: full width
+          "group-[.is-assistant]:max-w-full"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "contained"
+    }
+  }
+);
+var MessageContent = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "div",
+  {
+    className: cn(messageContentVariants({ variant, className })),
+    ...props,
+    children
+  }
+);
+
+// src/ui/dropdown-menu.tsx
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/ui/select.tsx
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// src/ui/textarea.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/prompt-input.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_nanoid = require("nanoid");
+var import_react2 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AttachmentsContext = (0, import_react2.createContext)(null);
+var usePromptInputAttachments = () => {
+  const context = (0, import_react2.useContext)(AttachmentsContext);
+  if (!context) {
+    throw new Error(
+      "usePromptInputAttachments must be used within a PromptInput"
+    );
+  }
+  return context;
+};
+function PromptInputAttachment({
+  data,
+  className,
+  ...props
+}) {
+  const attachments = usePromptInputAttachments();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn("group relative h-14 w-14 rounded-lg border", className),
+      ...props,
+      children: [
+        data.mediaType?.startsWith("image/") && data.url ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "img",
+          {
+            alt: data.filename || "attachment",
+            className: "size-full rounded-lg object-cover",
+            height: 56,
+            src: data.url,
+            width: 56
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex size-full items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.PaperclipIcon, { className: "size-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Button,
+          {
+            "aria-label": "Remove attachment",
+            className: "-right-1 -top-1 absolute h-4 w-4 rounded-full opacity-0 group-hover:opacity-100 p-0 [&_svg]:h-2 [&_svg]:w-2",
+            onClick: () => attachments.remove(data.id),
+            size: "icon",
+            type: "button",
+            variant: "outline",
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.XIcon, { className: "h-2 w-2 shrink-0" })
+          }
+        )
+      ]
+    },
+    data.id
+  );
+}
+function PromptInputAttachments({
+  className,
+  children,
+  ...props
+}) {
+  const attachments = usePromptInputAttachments();
+  const [height, setHeight] = (0, import_react2.useState)(0);
+  const contentRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useLayoutEffect)(() => {
+    const el = contentRef.current;
+    if (!el) {
+      return;
+    }
+    const ro = new ResizeObserver(() => {
+      setHeight(el.getBoundingClientRect().height);
+    });
+    ro.observe(el);
+    setHeight(el.getBoundingClientRect().height);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(
+        "overflow-hidden transition-[height] duration-200 ease-out",
+        className
+      ),
+      style: { height: attachments.files.length ? height : 0 },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-wrap gap-2 p-3 pt-3", ref: contentRef, children: attachments.files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react2.Fragment, { children: children(file) }, file.id)) })
+    }
+  );
+}
+var PromptInput = ({
+  className,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  ...props
+}) => {
+  const [items, setItems] = (0, import_react2.useState)([]);
+  const inputRef = (0, import_react2.useRef)(null);
+  const anchorRef = (0, import_react2.useRef)(null);
+  const formRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const root = anchorRef.current?.closest("form");
+    if (root instanceof HTMLFormElement) {
+      formRef.current = root;
+    }
+  }, []);
+  const openFileDialog = (0, import_react2.useCallback)(() => {
+    inputRef.current?.click();
+  }, []);
+  const matchesAccept = (0, import_react2.useCallback)(
+    (f) => {
+      if (!accept || accept.trim() === "") {
+        return true;
+      }
+      if (accept.includes("image/*")) {
+        return f.type.startsWith("image/");
+      }
+      return true;
+    },
+    [accept]
+  );
+  const add = (0, import_react2.useCallback)(
+    (files) => {
+      const incoming = Array.from(files);
+      const accepted = incoming.filter((f) => matchesAccept(f));
+      if (accepted.length === 0) {
+        onError?.({
+          code: "accept",
+          message: "No files match the accepted types."
+        });
+        return;
+      }
+      const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+      const sized = accepted.filter(withinSize);
+      if (sized.length === 0 && accepted.length > 0) {
+        onError?.({
+          code: "max_file_size",
+          message: "All files exceed the maximum size."
+        });
+        return;
+      }
+      setItems((prev) => {
+        const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : void 0;
+        const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+        if (typeof capacity === "number" && sized.length > capacity) {
+          onError?.({
+            code: "max_files",
+            message: "Too many files. Some were not added."
+          });
+        }
+        const next = [];
+        for (const file of capped) {
+          next.push({
+            id: (0, import_nanoid.nanoid)(),
+            type: "file",
+            url: URL.createObjectURL(file),
+            mediaType: file.type,
+            filename: file.name
+          });
+        }
+        return prev.concat(next);
+      });
+    },
+    [matchesAccept, maxFiles, maxFileSize, onError]
+  );
+  const remove = (0, import_react2.useCallback)((id) => {
+    setItems((prev) => {
+      const found = prev.find((file) => file.id === id);
+      if (found?.url) {
+        URL.revokeObjectURL(found.url);
+      }
+      return prev.filter((file) => file.id !== id);
+    });
+  }, []);
+  const clear = (0, import_react2.useCallback)(() => {
+    setItems((prev) => {
+      for (const file of prev) {
+        if (file.url) {
+          URL.revokeObjectURL(file.url);
+        }
+      }
+      return [];
+    });
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (syncHiddenInput && inputRef.current) {
+      if (items.length === 0) {
+        inputRef.current.value = "";
+      }
+    }
+  }, [items, syncHiddenInput]);
+  (0, import_react2.useEffect)(() => {
+    const form = formRef.current;
+    if (!form) {
+      return;
+    }
+    const onDragOver = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+    };
+    const onDrop = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        add(e.dataTransfer.files);
+      }
+    };
+    form.addEventListener("dragover", onDragOver);
+    form.addEventListener("drop", onDrop);
+    return () => {
+      form.removeEventListener("dragover", onDragOver);
+      form.removeEventListener("drop", onDrop);
+    };
+  }, [add]);
+  (0, import_react2.useEffect)(() => {
+    if (!globalDrop) {
+      return;
+    }
+    const onDragOver = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+    };
+    const onDrop = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        add(e.dataTransfer.files);
+      }
+    };
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  const handleChange = (event) => {
+    if (event.currentTarget.files) {
+      add(event.currentTarget.files);
+    }
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const files = items.map(({ ...item }) => ({
+      ...item
+    }));
+    onSubmit({ text: event.currentTarget.message.value, files }, event);
+    clear();
+  };
+  const ctx = (0, import_react2.useMemo)(
+    () => ({
+      files: items.map((item) => ({ ...item, id: item.id })),
+      add,
+      remove,
+      clear,
+      openFileDialog,
+      fileInputRef: inputRef
+    }),
+    [items, add, remove, clear, openFileDialog]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(AttachmentsContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "hidden", ref: anchorRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        accept,
+        className: "hidden",
+        multiple,
+        onChange: handleChange,
+        ref: inputRef,
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "form",
+      {
+        className: cn(
+          "w-full divide-y overflow-hidden rounded-xl border bg-background focus-within:border-ring transition-colors",
+          "[&:focus-within]:shadow-none [&:focus]:shadow-none shadow-none",
+          className
+        ),
+        onSubmit: handleSubmit,
+        style: { boxShadow: "none" },
+        ...props
+      }
+    )
+  ] });
+};
+var PromptInputBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(className, "flex flex-col"), ...props });
+var PromptInputTextarea = ({
+  onChange,
+  className,
+  placeholder = "What would you like to know?",
+  ...props
+}) => {
+  const attachments = usePromptInputAttachments();
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (e.nativeEvent.isComposing) {
+        return;
+      }
+      if (e.shiftKey) {
+        return;
+      }
+      e.preventDefault();
+      const form = e.currentTarget.form;
+      if (form) {
+        form.requestSubmit();
+      }
+    }
+  };
+  const handlePaste = (event) => {
+    const items = event.clipboardData?.items;
+    if (!items) {
+      return;
+    }
+    const files = [];
+    for (const item of items) {
+      if (item.kind === "file") {
+        const file = item.getAsFile();
+        if (file) {
+          files.push(file);
+        }
+      }
+    }
+    if (files.length > 0) {
+      event.preventDefault();
+      attachments.add(files);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Textarea,
+    {
+      className: cn(
+        "w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0",
+        "field-sizing-content",
+        "max-h-48 min-h-16",
+        "focus-visible:ring-0 focus-visible:border-red-500 focus-visible:shadow-none focus:ring-0 focus:shadow-none",
+        className
+      ),
+      name: "message",
+      onChange: (e) => {
+        onChange?.(e);
+      },
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      placeholder,
+      ...props
+    }
+  );
+};
+var PromptInputToolbar = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "div",
+  {
+    className: cn("flex items-center justify-between p-1", className),
+    ...props
+  }
+);
+var PromptInputTools = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-1",
+      "[&_button:first-child]:rounded-bl-xl",
+      className
+    ),
+    ...props
+  }
+);
+var PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  ...props
+}) => {
+  const newSize = size ?? import_react2.Children.count(props.children) > 1 ? "default" : "icon";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Button,
+    {
+      className: cn(
+        "shrink-0 gap-1.5 rounded-lg",
+        variant === "ghost" && "text-muted-foreground",
+        newSize === "default" && "px-3",
+        className
+      ),
+      size: newSize,
+      type: "button",
+      variant,
+      ...props
+    }
+  );
+};
+var PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon",
+  status,
+  children,
+  ...props
+}) => {
+  let Icon2 = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.SendIcon, { className: "size-4" });
+  if (status === "submitted") {
+    Icon2 = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Loader2Icon, { className: "size-4 animate-spin" });
+  } else if (status === "streaming") {
+    Icon2 = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.SquareIcon, { className: "size-4" });
+  } else if (status === "error") {
+    Icon2 = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.XIcon, { className: "size-4" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Button,
+    {
+      className: cn("gap-1.5 rounded-lg", className),
+      size,
+      type: "submit",
+      variant,
+      ...props,
+      children: children ?? Icon2
+    }
+  );
+};
+
+// src/components/message-attachments.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function MessageAttachments({ attachments, className }) {
+  if (!attachments || attachments.length === 0) {
+    return null;
+  }
+  const handleAttachmentClick = (attachment) => {
+    if (attachment.url.startsWith("data:")) {
+      const newWindow = window.open("", "_blank");
+      if (newWindow) {
+        newWindow.document.write(`
+          <html>
+            <head><title>${attachment.filename}</title></head>
+            <body style="margin:0; padding:20px; background:#f5f5f5; display:flex; justify-content:center; align-items:center; min-height:100vh;">
+              <img src="${attachment.url}" alt="${attachment.filename}" style="max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15);" />
+            </body>
+          </html>
+        `);
+        newWindow.document.close();
+      }
+    } else if (attachment.url.startsWith("blob:")) {
+      window.open(attachment.url, "_blank");
+    } else if (attachment.url.startsWith("http")) {
+      window.open(attachment.url, "_blank");
+    } else {
+      window.open(attachment.url, "_blank");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("flex flex-wrap gap-2", className), children: attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: "group relative h-14 w-14 rounded-lg",
+      children: attachment.mediaType.startsWith("image/") ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "img",
+        {
+          src: attachment.url,
+          alt: attachment.filename,
+          className: "size-full rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity",
+          onClick: () => handleAttachmentClick(attachment)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          className: "flex size-full items-center justify-center text-muted-foreground cursor-pointer hover:bg-secondary/50 rounded-lg transition-colors",
+          onClick: () => handleAttachmentClick(attachment),
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.PaperclipIcon, { className: "size-4" })
+        }
+      )
+    },
+    index
+  )) });
+}
+
+// src/components/interface.tsx
+var import_react8 = require("react");
+var import_lucide_react10 = require("lucide-react");
+var import_react9 = require("react");
+var import_react10 = require("@ai-sdk/react");
+var import_ai = require("ai");
+
+// src/components/response.tsx
+var import_react4 = require("react");
+var import_streamdown = require("streamdown");
+
+// src/hooks/use-code-scroll.ts
+var import_react3 = require("react");
+function useCodeBlockAutoScroll(isStreaming) {
+  const observerRef = (0, import_react3.useRef)(null);
+  const containerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (!isStreaming || !containerRef.current) {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      return;
+    }
+    observerRef.current = new MutationObserver(() => {
+      if (!containerRef.current) return;
+      const codeBlocks = containerRef.current.querySelectorAll("pre");
+      codeBlocks.forEach((pre) => {
+        pre.scrollTop = pre.scrollHeight;
+      });
+    });
+    observerRef.current.observe(containerRef.current, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [isStreaming]);
+  return containerRef;
+}
+
+// src/components/response.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Response = (0, import_react4.memo)(
+  ({ className, isStreaming = false, ...props }) => {
+    const containerRef = useCodeBlockAutoScroll(isStreaming);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_streamdown.Streamdown,
+      {
+        className: cn(
+          "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+          className
+        ),
+        ...props
+      }
+    ) });
+  },
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+Response.displayName = "Response";
+
+// src/ui/collapsible.tsx
+var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Collapsible({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      ...props
+    }
+  );
+}
+function CollapsibleContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      ...props
+    }
+  );
+}
+
+// src/components/sources.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Sources = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  Collapsible,
+  {
+    className: cn("not-prose mb-4 text-primary text-xs", className),
+    ...props
+  }
+);
+var SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  CollapsibleTrigger2,
+  {
+    className: cn("flex items-center gap-2", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "font-medium", children: [
+        "Used ",
+        count,
+        " sources"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ChevronDownIcon, { className: "h-4 w-4" })
+    ] })
+  }
+);
+var SourcesContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  CollapsibleContent2,
+  {
+    className: cn(
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "a",
+  {
+    className: "flex items-center gap-2",
+    href,
+    rel: "noreferrer",
+    target: "_blank",
+    ...props,
+    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.BookIcon, { className: "h-4 w-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block font-medium", children: title })
+    ] })
+  }
+);
+
+// src/components/reasoning.tsx
+var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+var import_lucide_react7 = require("lucide-react");
+var import_react5 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ReasoningContext = (0, import_react5.createContext)(null);
+var useReasoning = () => {
+  const context = (0, import_react5.useContext)(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+var AUTO_CLOSE_DELAY = 1e3;
+var MS_IN_S = 1e3;
+var Reasoning = (0, import_react5.memo)(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = (0, import_react_use_controllable_state.useControllableState)({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const [duration, setDuration] = (0, import_react_use_controllable_state.useControllableState)({
+      prop: durationProp,
+      defaultProp: void 0
+    });
+    const [hasAutoClosed, setHasAutoClosed] = (0, import_react5.useState)(false);
+    const [startTime, setStartTime] = (0, import_react5.useState)(null);
+    (0, import_react5.useEffect)(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          setStartTime(Date.now());
+        }
+      } else if (startTime !== null) {
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setStartTime(null);
+      }
+    }, [isStreaming, startTime, setDuration]);
+    (0, import_react5.useEffect)(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed && durationProp !== void 0) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed, durationProp]);
+    const handleOpenChange = (newOpen) => {
+      setIsOpen(newOpen);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ReasoningContext.Provider,
+      {
+        value: { isStreaming, isOpen, setIsOpen, duration },
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Collapsible,
+          {
+            className: cn("not-prose", className),
+            onOpenChange: handleOpenChange,
+            open: isOpen,
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var getThinkingMessage = (isStreaming, duration) => {
+  if (isStreaming) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Thinking..." });
+  }
+  if (duration === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Thought process" });
+  }
+  if (duration === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Thought process" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    "Thought for ",
+    duration,
+    " seconds"
+  ] });
+};
+var ReasoningTrigger = (0, import_react5.memo)(
+  ({ className, children, ...props }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      CollapsibleTrigger2,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.BrainIcon, { className: "size-4 flex-shrink-0" }),
+          getThinkingMessage(isStreaming, duration),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_lucide_react7.ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 flex-shrink-0 transition-transform ml-1",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var ReasoningContent = (0, import_react5.memo)(
+  ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    CollapsibleContent2,
+    {
+      className: cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Response, { className: "grid gap-2", children })
+    }
+  )
+);
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+
+// src/components/loader.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  "svg",
+  {
+    height: size,
+    strokeLinejoin: "round",
+    style: { color: "currentcolor" },
+    viewBox: "0 0 16 16",
+    width: size,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("title", { children: "Loader" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M8 16V12",
+            opacity: "0.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M3.29773 1.52783L5.64887 4.7639",
+            opacity: "0.9",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M12.7023 1.52783L10.3511 4.7639",
+            opacity: "0.1",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M12.7023 14.472L10.3511 11.236",
+            opacity: "0.4",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M3.29773 14.472L5.64887 11.236",
+            opacity: "0.6",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M15.6085 5.52783L11.8043 6.7639",
+            opacity: "0.2",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M0.391602 10.472L4.19583 9.23598",
+            opacity: "0.7",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M15.6085 10.4722L11.8043 9.2361",
+            opacity: "0.3",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M0.391602 5.52783L4.19583 6.7639",
+            opacity: "0.8",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { fill: "white", height: "16", width: "16" }) }) })
+    ]
+  }
+);
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  "div",
+  {
+    className: cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoaderIcon, { size })
+  }
+);
+
+// src/ui/badge.tsx
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot2.Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/tool.tsx
+var import_lucide_react9 = require("lucide-react");
+var import_react7 = require("react");
+
+// src/components/code-block.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_react6 = require("react");
+var import_react_syntax_highlighter = require("react-syntax-highlighter");
+var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CodeBlockContext = (0, import_react6.createContext)({
+  code: ""
+});
+var CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  "div",
+  {
+    className: cn(
+      "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative max-h-96 overflow-y-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_react_syntax_highlighter.Prism,
+        {
+          className: "overflow-hidden dark:hidden",
+          codeTagProps: {
+            className: "font-mono text-sm"
+          },
+          customStyle: {
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            background: "hsl(var(--background))",
+            color: "hsl(var(--foreground))"
+          },
+          language,
+          lineNumberStyle: {
+            color: "hsl(var(--muted-foreground))",
+            paddingRight: "1rem",
+            minWidth: "2.5rem"
+          },
+          showLineNumbers,
+          style: import_prism.oneLight,
+          children: code
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_react_syntax_highlighter.Prism,
+        {
+          className: "hidden overflow-hidden dark:block",
+          codeTagProps: {
+            className: "font-mono text-sm"
+          },
+          customStyle: {
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            background: "hsl(var(--background))",
+            color: "hsl(var(--foreground))"
+          },
+          language,
+          lineNumberStyle: {
+            color: "hsl(var(--muted-foreground))",
+            paddingRight: "1rem",
+            minWidth: "2.5rem"
+          },
+          showLineNumbers,
+          style: import_prism.oneDark,
+          children: code
+        }
+      ),
+      children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
+    ] })
+  }
+) });
+
+// src/components/tool.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Tool = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  Collapsible,
+  {
+    className: cn("not-prose w-full rounded-md border", className),
+    ...props
+  }
+);
+var getStatusBadge = (status) => {
+  const labels = {
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    "output-available": "Completed",
+    "output-error": "Error"
+  };
+  const icons = {
+    "input-streaming": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.CircleIcon, { className: "size-4" }),
+    "input-available": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ClockIcon, { className: "size-4 animate-pulse" }),
+    "output-available": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.CheckCircleIcon, { className: "size-4 text-green-600" }),
+    "output-error": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.XCircleIcon, { className: "size-4 text-red-600" })
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+    icons[status],
+    labels[status]
+  ] });
+};
+var ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  CollapsibleTrigger2,
+  {
+    className: cn(
+      "flex w-full items-center justify-between gap-4 p-2",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.WrenchIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-medium text-sm", children: title ?? type.split("-").slice(1).join("-") }),
+        getStatusBadge(state)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+    ]
+  }
+);
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  CollapsibleContent2,
+  {
+    className: cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+] });
+var ToolOutput = ({
+  className,
+  output,
+  errorText,
+  ...props
+}) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: output });
+  if (typeof output === "object" && !(0, import_react7.isValidElement)(output)) {
+    Output = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlock, { code: output, language: "json" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("space-y-2 p-2", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        className: cn(
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
+        ),
+        children: [
+          errorText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: errorText }),
+          Output
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/interface.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ChatInterface({ id, initialMessages, config, onClose } = {}) {
+  const themeMode = config?.theme?.mode || "light";
+  const [input, setInput] = (0, import_react8.useState)("");
+  const [showHistory, setShowHistory] = (0, import_react8.useState)(false);
+  const [conversations, setConversations] = (0, import_react8.useState)([]);
+  const [loadingHistory, setLoadingHistory] = (0, import_react8.useState)(false);
+  const [historyLoaded, setHistoryLoaded] = (0, import_react8.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react8.useState)("");
+  const [uploadError, setUploadError] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    if (uploadError) {
+      const timeoutId = setTimeout(() => setUploadError(null), 5e3);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [uploadError]);
+  const [tabs, setTabs] = (0, import_react8.useState)([]);
+  const [activeTabId, setActiveTabId] = (0, import_react8.useState)("");
+  const [initialTabCreated, setInitialTabCreated] = (0, import_react8.useState)(false);
+  const [isInitializing, setIsInitializing] = (0, import_react8.useState)(true);
+  const [componentWidth, setComponentWidth] = (0, import_react8.useState)(768);
+  const [isResizing, setIsResizing] = (0, import_react8.useState)(false);
+  const lastSyncedTabId = (0, import_react8.useRef)("");
+  const hasInitialized = (0, import_react8.useRef)(false);
+  const { messages, sendMessage, status, setMessages } = (0, import_react10.useChat)({
+    id: activeTabId || "temp-id",
+    transport: new import_ai.DefaultChatTransport({
+      api: "/api/chat",
+      headers: {
+        "X-User-Id": config?.userId || ""
+      }
+    }),
+    // Throttle UI updates to 200ms to prevent hanging during streaming
+    experimental_throttle: 200
+  });
+  const handleSubmit = async (message) => {
+    const hasText = Boolean(message.text);
+    const hasAttachments = Boolean(message.files?.length);
+    if (!(hasText || hasAttachments)) {
+      return;
+    }
+    let uploadedFiles = [];
+    if (message.files && message.files.length > 0) {
+      try {
+        const uploadPromises = message.files.map(async (file) => {
+          try {
+            const response = await fetch(file.url);
+            const blob = await response.blob();
+            const fileObj = new File([blob], file.filename || "unknown", { type: file.mediaType });
+            const formData = new FormData();
+            formData.append("file", fileObj);
+            formData.append("conversationId", activeTabId || "default");
+            formData.append("userId", config?.userId || "demo-user");
+            const uploadResponse = await fetch("/api/chat/upload", {
+              method: "POST",
+              body: formData
+            });
+            if (!uploadResponse.ok) {
+              const errorText = await uploadResponse.text();
+              console.error(`Upload failed for ${file.filename}:`, errorText);
+              return null;
+            }
+            const uploadResult = await uploadResponse.json();
+            return {
+              id: file.id || "unknown",
+              type: "file",
+              url: uploadResult.url,
+              filename: uploadResult.filename,
+              mediaType: uploadResult.mediaType,
+              size: uploadResult.size
+            };
+          } catch (error) {
+            console.error(`Error uploading ${file.filename}:`, error);
+            return null;
+          }
+        });
+        const results = await Promise.all(uploadPromises);
+        uploadedFiles = results.filter((result) => result !== null);
+        if (uploadedFiles.length === 0) {
+          const errorMsg = "All file uploads failed. Please try again.";
+          setUploadError(errorMsg);
+          console.error(errorMsg);
+          return;
+        }
+        if (uploadedFiles.length < message.files.length) {
+          const warnMsg = `Warning: Only ${uploadedFiles.length} of ${message.files.length} files uploaded successfully.`;
+          setUploadError(warnMsg);
+          console.warn(warnMsg);
+        }
+      } catch (error) {
+        const errorMsg = "Error uploading files. Please try again.";
+        setUploadError(errorMsg);
+        console.error("Error in file upload process:", error);
+        return;
+      }
+    }
+    sendMessage({
+      text: message.text || "Sent with attachments",
+      files: uploadedFiles
+    });
+    const activeTab = tabs.find((tab) => tab.id === activeTabId);
+    if (activeTab && activeTab.title === "New Chat" && message.text) {
+      const newTitle = message.text.slice(0, 100);
+      setTabs(
+        (prevTabs) => prevTabs.map(
+          (tab) => tab.id === activeTabId ? { ...tab, title: newTitle } : tab
+        )
+      );
+    }
+    setInput("");
+  };
+  const AttachButton = () => {
+    const attachments = usePromptInputAttachments();
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      PromptInputButton,
+      {
+        variant: "ghost",
+        onClick: () => attachments.openFileDialog(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.PlusIcon, { className: "size-4" })
+      }
+    );
+  };
+  const loadConversation = async (conversationId) => {
+    if (!config?.userId) {
+      console.log("Cannot load conversation - no userId");
+      return;
+    }
+    try {
+      const response = await fetch(`/api/chat/history/${conversationId}?userId=${config.userId}`);
+      if (response.ok) {
+        const data = await response.json();
+        const loadedMessages = data.messages || [];
+        setTimeout(() => {
+          setMessages(loadedMessages);
+        }, 0);
+      } else if (response.status === 404) {
+        console.log("Conversation not found in database yet (new chat)");
+        setMessages([]);
+      } else {
+        console.error("Error loading messages:", response.status, response.statusText);
+      }
+    } catch (error) {
+      console.error("Error loading conversation:", error);
+    }
+  };
+  const generateUniqueTabId = () => {
+    let newTabId;
+    let attempts = 0;
+    do {
+      newTabId = `chat-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      attempts++;
+    } while (tabs.find((tab) => tab.id === newTabId) && attempts < 10);
+    if (attempts >= 10) {
+      throw new Error("Unable to generate unique tab ID");
+    }
+    return newTabId;
+  };
+  const createNewTab = (0, import_react8.useCallback)(() => {
+    if (!initialTabCreated) {
+      console.warn("Cannot create new tab while initializing");
+      return;
+    }
+    const newTabId = generateUniqueTabId();
+    setTabs((prevTabs) => {
+      const existingTab = prevTabs.find((tab) => tab.id === newTabId);
+      if (existingTab) {
+        console.warn("Tab with ID already exists:", newTabId);
+        return prevTabs;
+      }
+      const newTab = {
+        id: newTabId,
+        title: "New Chat",
+        isActive: true
+      };
+      const updatedTabs = prevTabs.map((tab) => ({
+        ...tab,
+        isActive: false
+      }));
+      return [...updatedTabs, newTab];
+    });
+    setActiveTabId(newTabId);
+    setMessages([]);
+    setInput("");
+  }, [initialTabCreated]);
+  const startNewConversation = (0, import_react8.useCallback)(() => {
+    createNewTab();
+  }, [createNewTab]);
+  (0, import_react8.useEffect)(() => {
+    return () => {
+    };
+  }, []);
+  const switchToTab = async (tabId) => {
+    const targetTab = tabs.find((tab) => tab.id === tabId);
+    if (!targetTab) return;
+    setTabs(
+      (prevTabs) => prevTabs.map((tab) => ({
+        ...tab,
+        isActive: tab.id === tabId
+      }))
+    );
+    setActiveTabId(tabId);
+    await loadConversation(tabId);
+  };
+  const closeTab = (tabId) => {
+    if (tabs.length <= 1) return;
+    const filteredTabs = tabs.filter((tab) => tab.id !== tabId);
+    if (tabId === activeTabId && filteredTabs.length > 0) {
+      const newActiveTab = filteredTabs[0];
+      setTabs(filteredTabs.map((tab) => ({
+        ...tab,
+        isActive: tab.id === newActiveTab.id
+      })));
+      switchToTab(newActiveTab.id);
+    } else {
+      setTabs(filteredTabs);
+    }
+    if (filteredTabs.length > 0) {
+      localStorage.setItem("chat-tabs", JSON.stringify(filteredTabs));
+      if (tabId === activeTabId) {
+        const newActiveTab = filteredTabs[0];
+        localStorage.setItem("active-tab-id", newActiveTab.id);
+      }
+    }
+  };
+  const fetchConversations = async () => {
+    if (historyLoaded) return;
+    if (!config?.userId) {
+      return;
+    }
+    setLoadingHistory(true);
+    try {
+      const response = await fetch(`/api/chat/history?userId=${config.userId}`);
+      if (response.ok) {
+        const data = await response.json();
+        setConversations(data.conversations || []);
+        setHistoryLoaded(true);
+      } else {
+        console.error("[ChatInterface] Failed to fetch chat history, status:", response.status);
+        const errorText = await response.text();
+        console.error("[ChatInterface] Error response:", errorText);
+      }
+    } catch (error) {
+      console.error("[ChatInterface] Error fetching chat history:", error);
+    } finally {
+      setLoadingHistory(false);
+    }
+  };
+  (0, import_react8.useEffect)(() => {
+    if (showHistory && !historyLoaded && config?.userId) {
+      fetchConversations();
+    }
+  }, [showHistory, historyLoaded, config?.userId]);
+  (0, import_react8.useEffect)(() => {
+    if (!historyLoaded && config?.userId) {
+      fetchConversations();
+    }
+  }, [historyLoaded, config?.userId]);
+  (0, import_react8.useEffect)(() => {
+    if (tabs.length > 0) {
+      const timeoutId = setTimeout(() => {
+        localStorage.setItem("chat-tabs", JSON.stringify(tabs));
+        localStorage.setItem("active-tab-id", activeTabId);
+      }, 500);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [tabs, activeTabId]);
+  (0, import_react8.useEffect)(() => {
+    if (hasInitialized.current) return;
+    const loadInitialTabs = () => {
+      try {
+        const savedTabs = localStorage.getItem("chat-tabs");
+        const savedActiveTabId = localStorage.getItem("active-tab-id");
+        if (savedTabs && savedTabs !== "[]") {
+          const parsedTabs = JSON.parse(savedTabs);
+          setTabs(parsedTabs);
+          const activeId = savedActiveTabId || parsedTabs[0]?.id;
+          setActiveTabId(activeId);
+          setInitialTabCreated(true);
+        } else if (!initialTabCreated && tabs.length === 0) {
+          const initialTabId = `chat-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+          const currentTab = {
+            id: initialTabId,
+            title: "New Chat",
+            isActive: true
+          };
+          setTabs([currentTab]);
+          setActiveTabId(initialTabId);
+          setInitialTabCreated(true);
+        }
+      } finally {
+        setIsInitializing(false);
+      }
+    };
+    loadInitialTabs();
+    hasInitialized.current = true;
+  }, []);
+  const hasLoadedInitialMessages = (0, import_react8.useRef)(false);
+  (0, import_react8.useEffect)(() => {
+    if (hasLoadedInitialMessages.current) return;
+    if (!config?.userId) return;
+    if (!activeTabId) return;
+    if (isInitializing) return;
+    loadConversation(activeTabId);
+    hasLoadedInitialMessages.current = true;
+  }, [config?.userId, activeTabId, isInitializing]);
+  (0, import_react8.useEffect)(() => {
+    if (isInitializing) return;
+    if (activeTabId && tabs.length > 0 && activeTabId !== lastSyncedTabId.current) {
+      lastSyncedTabId.current = activeTabId;
+      setInput("");
+    }
+  }, [activeTabId, isInitializing, tabs.length]);
+  const groupedConversations = (0, import_react8.useMemo)(() => {
+    const filtered = conversations.filter(
+      (conv) => searchQuery === "" || conv.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    const groups = {};
+    const now = /* @__PURE__ */ new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    filtered.forEach((conv) => {
+      const convDate = new Date(conv.updated_at);
+      const diffTime = now.getTime() - convDate.getTime();
+      const diffDays = Math.floor(diffTime / (1e3 * 60 * 60 * 24));
+      const diffWeeks = Math.floor(diffDays / 7);
+      const diffMonths = Math.floor(diffDays / 30);
+      let groupKey;
+      if (convDate >= today) {
+        groupKey = "Today";
+      } else if (convDate >= yesterday) {
+        groupKey = "Yesterday";
+      } else if (diffDays <= 7) {
+        groupKey = `${diffDays}d ago`;
+      } else if (diffWeeks <= 4) {
+        groupKey = `${diffWeeks}w ago`;
+      } else if (diffMonths <= 12) {
+        groupKey = `${diffMonths}mo ago`;
+      } else {
+        const diffYears = Math.floor(diffMonths / 12);
+        groupKey = `${diffYears}y ago`;
+      }
+      if (!groups[groupKey]) {
+        groups[groupKey] = [];
+      }
+      groups[groupKey].push(conv);
+    });
+    const sortedGroups = Object.entries(groups).sort((a, b) => {
+      const order = ["Today", "Yesterday"];
+      const aIndex = order.indexOf(a[0]);
+      const bIndex = order.indexOf(b[0]);
+      if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+      if (aIndex !== -1) return -1;
+      if (bIndex !== -1) return 1;
+      const aMatch = a[0].match(/(\d+)([dw]|mo|y)/);
+      const bMatch = b[0].match(/(\d+)([dw]|mo|y)/);
+      if (aMatch && bMatch) {
+        const aNum = parseInt(aMatch[1]);
+        const bNum = parseInt(bMatch[1]);
+        const aUnit = aMatch[2];
+        const bUnit = bMatch[2];
+        const unitToDays = { "d": 1, "w": 7, "mo": 30, "y": 365 };
+        const aDays = aNum * unitToDays[aUnit];
+        const bDays = bNum * unitToDays[bUnit];
+        return aDays - bDays;
+      }
+      return 0;
+    });
+    return sortedGroups;
+  }, [conversations, searchQuery]);
+  const renderMessages = () => messages.map((message, index) => {
+    const sourceParts = message.parts?.filter((part) => part.type === "source-url") || [];
+    const fileParts = message.parts?.filter((part) => part.type === "file") || [];
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: index > 0 ? "mt-6" : "", children: [
+      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Sources, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SourcesTrigger, { count: sourceParts.length }),
+        sourceParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SourcesContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Source,
+          {
+            href: part.url,
+            title: part.url
+          },
+          `${message.id}-${i}`
+        ) }, `${message.id}-${i}`))
+      ] }),
+      fileParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(
+        "flex mb-1",
+        message.role === "user" ? "justify-end" : "justify-start"
+      ), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        MessageAttachments,
+        {
+          attachments: fileParts.map((part) => ({
+            filename: part.filename || "unknown",
+            mediaType: part.mediaType,
+            url: part.url,
+            size: part.size || 0
+          }))
+        }
+      ) }),
+      message.parts ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "space-y-2", children: message.parts.map((part, i) => {
+        switch (part.type) {
+          case "text":
+            const isTextStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
+          case "reasoning":
+            const isCurrentlyStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              Reasoning,
+              {
+                className: "w-full",
+                isStreaming: isCurrentlyStreaming,
+                defaultOpen: false,
+                open: isCurrentlyStreaming ? true : void 0,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReasoningTrigger, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReasoningContent, { children: part.text })
+                ]
+              },
+              `${message.id}-${i}`
+            );
+          default:
+            if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
+              const toolPart = part;
+              return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tool, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolHeader, { type: part.type, state: toolPart.state }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ToolContent, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolInput, { input: toolPart.input }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
+                ] })
+              ] }, `${message.id}-${i}`);
+            }
+            return null;
+        }
+      }) }) : (
+        /* Handle standard AI SDK messages with content or text property */
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+      )
+    ] }, message.id);
+  });
+  const handleSelectConversation = async (selectedConversationId, conversationTitle) => {
+    if (!config?.userId) return;
+    try {
+      const existingTab = tabs.find((tab) => tab.id === selectedConversationId);
+      if (existingTab) {
+        switchToTab(selectedConversationId);
+        setShowHistory(false);
+        return;
+      }
+      const newTab = {
+        id: selectedConversationId,
+        title: conversationTitle,
+        isActive: true
+      };
+      setTabs((prevTabs) => {
+        const updatedTabs = prevTabs.map((tab) => ({
+          ...tab,
+          isActive: false
+        }));
+        return [...updatedTabs, newTab];
+      });
+      setActiveTabId(selectedConversationId);
+      await loadConversation(selectedConversationId);
+      setShowHistory(false);
+    } catch (error) {
+      console.error("Error loading conversation:", error);
+    }
+  };
+  const dropdownRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setShowHistory(false);
+      }
+    };
+    if (showHistory) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showHistory]);
+  (0, import_react8.useEffect)(() => {
+    if (!isResizing) return;
+    const handleMouseMove = (e) => {
+      const newWidth = window.innerWidth - e.clientX;
+      const minWidth = 300;
+      const maxWidth = window.innerWidth * 0.8;
+      setComponentWidth(Math.max(minWidth, Math.min(maxWidth, newWidth)));
+    };
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("w-full h-full flex flex-col bg-white dark:bg-gray-900 overflow-hidden ring-1 ring-black/[0.02] dark:ring-white/[0.03]", themeMode === "dark" && "dark"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full w-full overflow-hidden relative chat-widget-container",
+        themeMode === "dark" && "dark"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
+          borderColor: themeMode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
+          backgroundColor: themeMode === "dark" ? "rgba(37,37,37,0.8)" : "rgba(255,255,255,0.8)"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            "div",
+            {
+              className: "relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg cursor-pointer transition-all duration-150 group flex-shrink-0 min-w-0",
+              style: {
+                backgroundColor: tab.isActive ? themeMode === "dark" ? "#444444" : "#f5f5f5" : "transparent",
+                color: tab.isActive ? themeMode === "dark" ? "#e5e5e5" : "#171717" : themeMode === "dark" ? "#999999" : "#737373"
+              },
+              onMouseEnter: (e) => {
+                if (!tab.isActive) {
+                  e.currentTarget.style.backgroundColor = themeMode === "dark" ? "rgba(68,68,68,0.5)" : "rgba(245,245,245,0.5)";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (!tab.isActive) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                switchToTab(tab.id);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
+                tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      closeTab(tab.id);
+                    },
+                    className: "rounded-lg p-1 transition-all duration-150 flex-shrink-0 -mr-1",
+                    style: {
+                      opacity: tab.isActive ? 0.6 : 0
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.opacity = "1";
+                      e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#555555" : "#e5e5e5";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.opacity = tab.isActive ? "0.6" : "0";
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.XIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
+                  }
+                )
+              ]
+            },
+            tab.id
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                onClick: createNewTab,
+                className: "flex items-center justify-center w-7 h-7 rounded-lg transition-all duration-150",
+                style: {
+                  color: themeMode === "dark" ? "#999999" : "#737373"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.color = themeMode === "dark" ? "#e5e5e5" : "#171717";
+                  e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#444444" : "#f5f5f5";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.color = themeMode === "dark" ? "#999999" : "#737373";
+                  e.currentTarget.style.backgroundColor = "transparent";
+                },
+                title: "New Chat",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.PlusIcon, { className: "h-4 w-4", strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "button",
+                {
+                  onClick: () => setShowHistory(!showHistory),
+                  className: "flex items-center justify-center w-7 h-7 rounded-lg transition-all duration-150",
+                  style: {
+                    color: showHistory ? themeMode === "dark" ? "#e5e5e5" : "#171717" : themeMode === "dark" ? "#999999" : "#737373",
+                    backgroundColor: showHistory ? themeMode === "dark" ? "#444444" : "#f5f5f5" : "transparent"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!showHistory) {
+                      e.currentTarget.style.color = themeMode === "dark" ? "#e5e5e5" : "#171717";
+                      e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#444444" : "#f5f5f5";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (!showHistory) {
+                      e.currentTarget.style.color = themeMode === "dark" ? "#999999" : "#737373";
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    }
+                  },
+                  title: "Chat History",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                }
+              ),
+              showHistory && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
+                backgroundColor: themeMode === "dark" ? "#252525" : "#ffffff",
+                border: `1px solid ${themeMode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`
+              }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-2.5 border-b", style: {
+                  borderColor: themeMode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
+                  backgroundColor: themeMode === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5", style: {
+                    color: themeMode === "dark" ? "#666666" : "#999999"
+                  }, strokeWidth: 2 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    "input",
+                    {
+                      type: "text",
+                      placeholder: "Search",
+                      value: searchQuery,
+                      onChange: (e) => setSearchQuery(e.target.value),
+                      className: "w-full h-7 pl-8 pr-2.5 text-[13px] rounded-lg focus:outline-none transition-all",
+                      style: {
+                        backgroundColor: themeMode === "dark" ? "#1a1a1a" : "#ffffff",
+                        border: `1px solid ${themeMode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`,
+                        color: themeMode === "dark" ? "#e5e5e5" : "#171717"
+                      }
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-[13px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                    backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.MessageSquareIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Conversations" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Start a new chat to begin" })
+                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                    backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.SearchIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Results" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Try a different search" })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mb-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
+                    backgroundColor: themeMode === "dark" ? "rgba(37,37,37,0.95)" : "rgba(255,255,255,0.95)"
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: groupName }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
+                    const isActiveConversation = activeTabId === conversation.id;
+                    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
+                        style: {
+                          backgroundColor: isActiveConversation ? themeMode === "dark" ? "#333333" : "#f5f5f5" : "transparent"
+                        },
+                        onMouseEnter: (e) => {
+                          if (!isActiveConversation) {
+                            e.currentTarget.style.backgroundColor = themeMode === "dark" ? "rgba(51,51,51,0.5)" : "rgba(245,245,245,0.5)";
+                          }
+                        },
+                        onMouseLeave: (e) => {
+                          if (!isActiveConversation) {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                          }
+                        },
+                        onClick: () => handleSelectConversation(conversation.id, conversation.title),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
+                            fontWeight: isActiveConversation ? 500 : 400,
+                            color: isActiveConversation ? themeMode === "dark" ? "#e5e5e5" : "#171717" : themeMode === "dark" ? "#cccccc" : "#404040"
+                          }, children: conversation.title }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            import_lucide_react10.ChevronRightIcon,
+                            {
+                              className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
+                              style: {
+                                color: themeMode === "dark" ? "#666666" : "#a3a3a3",
+                                opacity: isActiveConversation ? 1 : 0
+                              },
+                              strokeWidth: 2
+                            }
+                          )
+                        ] })
+                      },
+                      conversation.id
+                    );
+                  }) })
+                ] }, groupName)) }) })
+              ] })
+            ] }),
+            onClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex items-center justify-center w-7 h-7 rounded-lg transition-all duration-150",
+                style: {
+                  color: themeMode === "dark" ? "#999999" : "#737373"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.color = themeMode === "dark" ? "#e5e5e5" : "#171717";
+                  e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#444444" : "#f5f5f5";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.color = themeMode === "dark" ? "#999999" : "#737373";
+                  e.currentTarget.style.backgroundColor = "transparent";
+                },
+                title: "Close Chat",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.XIcon, { className: "h-4 w-4", strokeWidth: 2 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
+            renderMessages(),
+            status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { from: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loader, { size: 16 }) }) }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ConversationScrollButton, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "px-5 pb-5", children: [
+          uploadError && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-3 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200/60 dark:border-red-800/60 rounded-2xl text-sm text-red-700 dark:text-red-400 shadow-sm", children: uploadError }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PromptInputBody, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputAttachment, { data: attachment }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                PromptInputTextarea,
+                {
+                  onChange: (e) => setInput(e.target.value),
+                  value: input
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PromptInputToolbar, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputTools, { children: config?.features?.fileUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AttachButton, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputSubmit, { disabled: !input, status })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/ChatWidget.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ChatWidget({
+  userId,
+  conversationId,
+  initialMessages,
+  className,
+  model,
+  systemPrompt,
+  temperature,
+  theme,
+  features,
+  display
+}) {
+  const initialWidth = display?.width || "30vw";
+  const showToggleButton = display?.showToggleButton !== false;
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(display?.defaultOpen || false);
+  const [width, setWidth] = (0, import_react11.useState)(() => {
+    const value = parseInt(initialWidth);
+    if (initialWidth.includes("vw")) {
+      return value / 100 * window.innerWidth;
+    }
+    return value || window.innerWidth * 0.3;
+  });
+  const isResizing = (0, import_react11.useRef)(false);
+  const handleMouseDown = (0, import_react11.useCallback)((e) => {
+    e.preventDefault();
+    isResizing.current = true;
+    document.body.style.cursor = "ew-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    const getConstraints = () => ({
+      minWidth: window.innerWidth * 0.2,
+      maxWidth: window.innerWidth * 0.6
+    });
+    const handleMouseMove = (e) => {
+      if (!isResizing.current) return;
+      const { minWidth, maxWidth } = getConstraints();
+      const newWidth = window.innerWidth - e.clientX;
+      setWidth(Math.min(maxWidth, Math.max(minWidth, newWidth)));
+    };
+    const handleMouseUp = () => {
+      if (isResizing.current) {
+        isResizing.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+    };
+    const handleWindowResize = () => {
+      const { minWidth, maxWidth } = getConstraints();
+      setWidth((prev) => Math.min(maxWidth, Math.max(minWidth, prev)));
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  const config = (0, import_react11.useMemo)(() => ({
+    userId,
+    model,
+    systemPrompt,
+    temperature,
+    theme,
+    features
+  }), [userId, model, systemPrompt, temperature, theme, features]);
+  const togglePosition = display?.toggleButtonPosition || { bottom: "24px", right: "24px" };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        onClick: () => setIsOpen(true),
+        className: "fixed z-50 rounded-full bg-primary text-primary-foreground shadow-lg hover:opacity-90 transition-all p-4",
+        style: togglePosition,
+        "aria-label": "Open chat",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.MessageCircle, { className: "h-6 w-6" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "div",
+      {
+        className: `fixed top-0 right-0 h-screen z-50 border-l border-gray-200 dark:border-gray-800 ${className || ""}`,
+        style: {
+          animation: "chat-slide-in-right 0.3s ease-out forwards",
+          width: `${width}px`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "div",
+            {
+              onMouseDown: handleMouseDown,
+              className: "absolute left-0 top-0 h-full w-1 cursor-ew-resize hover:bg-primary/20 active:bg-primary/30 transition-colors z-10"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            ChatInterface,
+            {
+              id: conversationId,
+              initialMessages,
+              config,
+              onClose: () => setIsOpen(false)
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+var ChatWidget_default = ChatWidget;
+
+// src/hooks/use-chat-theme.ts
+var import_react12 = require("react");
+
+// src/utils/models.ts
+var MODELS = [
+  {
+    name: "GPT-5 Nano",
+    value: "openai/gpt-5-nano"
+  },
+  // Anthropic models
+  {
+    name: "Claude Sonnet 4.5",
+    value: "anthropic/claude-sonnet-4-5"
+  },
+  {
+    name: "Claude Sonnet 4",
+    value: "anthropic/claude-sonnet-4-0"
+  },
+  {
+    name: "Claude Haiku 3.5",
+    value: "anthropic/claude-3-5-haiku-latest"
+  },
+  // OpenAI models
+  {
+    name: "GPT-5",
+    value: "openai/gpt-5"
+  },
+  {
+    name: "GPT-OSS-120B",
+    value: "openai/gpt-oss-120b"
+  },
+  {
+    name: "GPT 4o",
+    value: "openai/gpt-4o"
+  },
+  // Google models
+  {
+    name: "Gemini 2.5 Flash Lite",
+    value: "google/gemini-2.5-flash-lite"
+  },
+  {
+    name: "Gemini 2.5 Flash",
+    value: "google/gemini-2.5-flash"
+  },
+  {
+    name: "Gemini 2.5 Pro",
+    value: "google/gemini-2.5-pro"
+  }
+];
+var DEFAULT_MODEL = MODELS[0].value;
+
+// src/hooks/use-chat-theme.ts
+function hexToHSL(hex) {
+  hex = hex.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+var defaultTheme = {
+  // Light mode
+  lightPrimary: "#3b82f6",
+  // Blue
+  lightSecondary: "#f5f5f5",
+  // Light gray
+  lightText: "#0a0a0a",
+  // Near black
+  // Dark mode
+  darkPrimary: "#3b82f6",
+  // Blue (same as light)
+  darkSecondary: "#262626",
+  // Dark gray
+  darkText: "#ffffff",
+  // White
+  // Typography
+  fontFamily: "system-ui",
+  fontSize: 14
+};
+var fontOptions = [
+  { value: "system-ui", label: "System Default" },
+  { value: "Inter, sans-serif", label: "Inter" },
+  { value: "Roboto, sans-serif", label: "Roboto" },
+  { value: "Open Sans, sans-serif", label: "Open Sans" },
+  { value: "Lato, sans-serif", label: "Lato" },
+  { value: "Poppins, sans-serif", label: "Poppins" },
+  { value: "Montserrat, sans-serif", label: "Montserrat" },
+  { value: "Georgia, serif", label: "Georgia" },
+  { value: "ui-monospace, monospace", label: "Monospace" }
+];
+var defaultConversationStarters = [
+  { text: "How can I help you today?", enabled: true },
+  { text: "What features does this product offer?", enabled: true },
+  { text: "Tell me about your capabilities", enabled: true }
+];
+var defaultModel = DEFAULT_MODEL;
+var defaultSystemPrompt = "You are a helpful AI assistant.";
+var defaultTemperature = 0.7;
+var defaultThemeMode = "light";
+function useChatTheme() {
+  const [theme, setTheme] = (0, import_react12.useState)(defaultTheme);
+  const [conversationStarters, setConversationStarters] = (0, import_react12.useState)(defaultConversationStarters);
+  const [model, setModel] = (0, import_react12.useState)(defaultModel);
+  const [systemPrompt, setSystemPrompt] = (0, import_react12.useState)(defaultSystemPrompt);
+  const [temperature, setTemperature] = (0, import_react12.useState)(defaultTemperature);
+  const [themeMode, setThemeMode] = (0, import_react12.useState)(defaultThemeMode);
+  (0, import_react12.useEffect)(() => {
+    const savedTheme = localStorage.getItem("chat-theme");
+    if (savedTheme) {
+      try {
+        setTheme(JSON.parse(savedTheme));
+      } catch (error) {
+        console.error("Error loading theme:", error);
+      }
+    }
+    const savedStarters = localStorage.getItem("chat-conversation-starters");
+    if (savedStarters) {
+      try {
+        setConversationStarters(JSON.parse(savedStarters));
+      } catch (error) {
+        console.error("Error loading conversation starters:", error);
+      }
+    }
+    const savedModel = localStorage.getItem("chat-model");
+    if (savedModel) {
+      try {
+        setModel(savedModel);
+      } catch (error) {
+        console.error("Error loading model:", error);
+      }
+    }
+    const savedSystemPrompt = localStorage.getItem("chat-system-prompt");
+    if (savedSystemPrompt) {
+      try {
+        setSystemPrompt(savedSystemPrompt);
+      } catch (error) {
+        console.error("Error loading system prompt:", error);
+      }
+    }
+    const savedTemperature = localStorage.getItem("chat-temperature");
+    if (savedTemperature) {
+      try {
+        setTemperature(parseFloat(savedTemperature));
+      } catch (error) {
+        console.error("Error loading temperature:", error);
+      }
+    }
+    const savedThemeMode = localStorage.getItem("chat-theme-mode");
+    if (savedThemeMode) {
+      try {
+        setThemeMode(savedThemeMode);
+      } catch (error) {
+        console.error("Error loading theme mode:", error);
+      }
+    }
+    const handleThemeChange = (e) => {
+      const customEvent = e;
+      setTheme(customEvent.detail);
+    };
+    const handleStartersChange = (e) => {
+      const customEvent = e;
+      setConversationStarters(customEvent.detail);
+    };
+    const handleSystemPromptChange = (e) => {
+      const customEvent = e;
+      setSystemPrompt(customEvent.detail);
+    };
+    const handleModelChange = (e) => {
+      const customEvent = e;
+      setModel(customEvent.detail);
+    };
+    const handleTemperatureChange = (e) => {
+      const customEvent = e;
+      setTemperature(customEvent.detail);
+    };
+    const handleThemeModeChange = (e) => {
+      const customEvent = e;
+      setThemeMode(customEvent.detail);
+    };
+    window.addEventListener("chat-theme-change", handleThemeChange);
+    window.addEventListener("chat-starters-change", handleStartersChange);
+    window.addEventListener("chat-model-change", handleModelChange);
+    window.addEventListener("chat-system-prompt-change", handleSystemPromptChange);
+    window.addEventListener("chat-temperature-change", handleTemperatureChange);
+    window.addEventListener("chat-theme-mode-change", handleThemeModeChange);
+    return () => {
+      window.removeEventListener("chat-theme-change", handleThemeChange);
+      window.removeEventListener("chat-starters-change", handleStartersChange);
+      window.removeEventListener("chat-model-change", handleModelChange);
+      window.removeEventListener("chat-system-prompt-change", handleSystemPromptChange);
+      window.removeEventListener("chat-temperature-change", handleTemperatureChange);
+      window.removeEventListener("chat-theme-mode-change", handleThemeModeChange);
+    };
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    localStorage.setItem("chat-theme", JSON.stringify(theme));
+    const root = document.documentElement;
+    if (themeMode === "light") {
+      root.style.setProperty("--chat-primary", hexToHSL(theme.lightPrimary));
+      root.style.setProperty("--chat-secondary", hexToHSL(theme.lightSecondary));
+      root.style.setProperty("--chat-text", hexToHSL(theme.lightText));
+    } else {
+      root.style.setProperty("--chat-primary", hexToHSL(theme.darkPrimary));
+      root.style.setProperty("--chat-secondary", hexToHSL(theme.darkSecondary));
+      root.style.setProperty("--chat-text", hexToHSL(theme.darkText));
+    }
+    root.style.setProperty("--chat-font-family", theme.fontFamily);
+    root.style.setProperty("--chat-font-size", `${theme.fontSize}px`);
+    window.dispatchEvent(new CustomEvent("chat-theme-change", { detail: theme }));
+  }, [theme, themeMode]);
+  (0, import_react12.useEffect)(() => {
+    localStorage.setItem("chat-conversation-starters", JSON.stringify(conversationStarters));
+    window.dispatchEvent(new CustomEvent("chat-starters-change", { detail: conversationStarters }));
+  }, [conversationStarters]);
+  (0, import_react12.useEffect)(() => {
+    localStorage.setItem("chat-model", model);
+    window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
+  }, [model]);
+  (0, import_react12.useEffect)(() => {
+    localStorage.setItem("chat-system-prompt", systemPrompt);
+    window.dispatchEvent(new CustomEvent("chat-system-prompt-change", { detail: systemPrompt }));
+  }, [systemPrompt]);
+  (0, import_react12.useEffect)(() => {
+    localStorage.setItem("chat-temperature", temperature.toString());
+    window.dispatchEvent(new CustomEvent("chat-temperature-change", { detail: temperature }));
+  }, [temperature]);
+  (0, import_react12.useEffect)(() => {
+    localStorage.setItem("chat-theme-mode", themeMode);
+    window.dispatchEvent(new CustomEvent("chat-theme-mode-change", { detail: themeMode }));
+  }, [themeMode]);
+  const updateColor = (key, value) => {
+    setTheme((prev) => ({ ...prev, [key]: value }));
+  };
+  const updateLightColors = (colors) => {
+    setTheme((prev) => ({
+      ...prev,
+      ...colors.primary && { lightPrimary: colors.primary },
+      ...colors.secondary && { lightSecondary: colors.secondary },
+      ...colors.text && { lightText: colors.text }
+    }));
+  };
+  const updateDarkColors = (colors) => {
+    setTheme((prev) => ({
+      ...prev,
+      ...colors.primary && { darkPrimary: colors.primary },
+      ...colors.secondary && { darkSecondary: colors.secondary },
+      ...colors.text && { darkText: colors.text }
+    }));
+  };
+  const resetTheme = () => {
+    setTheme(defaultTheme);
+  };
+  const updateFontSize = (size) => {
+    setTheme((prev) => ({ ...prev, fontSize: size }));
+  };
+  const updateFontFamily = (family) => {
+    setTheme((prev) => ({ ...prev, fontFamily: family }));
+  };
+  const updateConversationStarters = (starters) => {
+    setConversationStarters(starters);
+  };
+  const updateSystemPrompt = (prompt) => {
+    setSystemPrompt(prompt);
+  };
+  const updateModel = (selectedModel) => {
+    setModel(selectedModel);
+  };
+  const updateTemperature = (temp) => {
+    setTemperature(temp);
+  };
+  const updateThemeMode = (mode) => {
+    setThemeMode(mode);
+  };
+  return {
+    theme,
+    updateColor,
+    updateLightColors,
+    updateDarkColors,
+    resetTheme,
+    updateFontSize,
+    updateFontFamily,
+    conversationStarters,
+    updateConversationStarters,
+    model,
+    updateModel,
+    systemPrompt,
+    updateSystemPrompt,
+    temperature,
+    updateTemperature,
+    themeMode,
+    updateThemeMode
+  };
+}
+
+// src/ui/input.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/ui/dialog.tsx
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    DialogPrimitive.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__ */ (0, import_jsx_runtime21.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      DialogPrimitive.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 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            DialogPrimitive.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__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ChatWidget,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  fontOptions,
+  useChatTheme
+});
+//# sourceMappingURL=index.js.map