@melony/react 0.1.45 → 0.1.47

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React11 from 'react';
-import React11__default, { createContext, useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import * as React3 from 'react';
+import React3__default, { createContext, useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { convertEventsToMessages } from 'melony';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
@@ -8,17 +8,17 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ICONS from '@tabler/icons-react';
-import { IconX, IconChevronLeft, IconChevronRight, IconUser, IconLogout, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconSelector, IconCheck, IconChevronUp } from '@tabler/icons-react';
+import { IconX, IconChevronLeft, IconChevronRight, IconLoader2, IconCheck, IconUpload, IconUser, IconLogout, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconArrowUp, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconSelector, IconChevronUp } from '@tabler/icons-react';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Select as Select$1 } from '@base-ui/react/select';
+import { createPortal } from 'react-dom';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { Menu } from '@base-ui/react/menu';
 import { useQueryState, parseAsString } from 'nuqs';
-import { createPortal } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 // src/providers/melony-provider.tsx
@@ -534,7 +534,6 @@ var Image = ({
   src,
   alt,
   size = "sm",
-  groupId,
   className,
   style
 }) => {
@@ -1423,6 +1422,324 @@ var Checkbox = ({
     )
   ] });
 };
+var Hidden = ({ name, value }) => {
+  return /* @__PURE__ */ jsx("input", { type: "hidden", name, value });
+};
+var PopoverContext = React3.createContext(
+  void 0
+);
+function usePopoverContext() {
+  const context = React3.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within a Popover");
+  }
+  return context;
+}
+function Popover({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [internalOpen, setInternalOpen] = React3.useState(defaultOpen);
+  const triggerRef = React3.useRef(null);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = React3.useCallback(
+    (newOpen) => {
+      if (controlledOpen === void 0) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const value = React3.useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef
+    }),
+    [open, setOpen]
+  );
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
+}
+var PopoverTrigger = React3.forwardRef(
+  ({ asChild, className, children, ...props }, ref) => {
+    const { setOpen, triggerRef } = usePopoverContext();
+    const handleClick = (e) => {
+      setOpen(true);
+      props.onClick?.(e);
+    };
+    if (asChild && React3.isValidElement(children)) {
+      return React3.cloneElement(children, {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof children.ref === "function") {
+            children.ref(node);
+          } else if (children.ref) {
+            children.ref.current = node;
+          }
+        },
+        onClick: handleClick
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className,
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverContent = React3.forwardRef(
+  ({
+    className,
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    alignOffset = 0,
+    children,
+    ...props
+  }, ref) => {
+    const { open, setOpen, triggerRef } = usePopoverContext();
+    const [position, setPosition] = React3.useState({ top: 0, left: 0 });
+    const contentRef = React3.useRef(null);
+    React3.useEffect(() => {
+      if (!open || !triggerRef.current) return;
+      const updatePosition = () => {
+        if (!triggerRef.current || !contentRef.current) return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        let top = 0;
+        let left = 0;
+        switch (side) {
+          case "bottom":
+            top = triggerRect.bottom + sideOffset + scrollY;
+            break;
+          case "top":
+            top = triggerRect.top - contentRect.height - sideOffset + scrollY;
+            break;
+          case "right":
+            top = triggerRect.top + scrollY;
+            left = triggerRect.right + sideOffset + scrollX;
+            break;
+          case "left":
+            top = triggerRect.top + scrollY;
+            left = triggerRect.left - contentRect.width - sideOffset + scrollX;
+            break;
+        }
+        switch (align) {
+          case "start":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + scrollX + alignOffset;
+            } else {
+              top += alignOffset;
+            }
+            break;
+          case "center":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2 + scrollX + alignOffset;
+            } else {
+              top += triggerRect.height / 2 - contentRect.height / 2 + alignOffset;
+            }
+            break;
+          case "end":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + triggerRect.width - contentRect.width + scrollX + alignOffset;
+            } else {
+              top += triggerRect.height - contentRect.height + alignOffset;
+            }
+            break;
+        }
+        setPosition({ top, left });
+      };
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+      window.addEventListener("resize", updatePosition);
+      window.addEventListener("scroll", updatePosition, true);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [open, side, align, sideOffset, alignOffset, triggerRef]);
+    React3.useEffect(() => {
+      if (!open) return;
+      const handleClickOutside = (event) => {
+        if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+          setOpen(false);
+        }
+      };
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [open, setOpen, triggerRef]);
+    if (!open) return null;
+    const content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          contentRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className: cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 rounded-2xl shadow-2xl ring-1 z-50 min-w-48 max-h-96 overflow-hidden",
+          className
+        ),
+        style: {
+          position: "absolute",
+          top: `${position.top}px`,
+          left: `${position.left}px`
+        },
+        ...props,
+        children
+      }
+    );
+    return createPortal(content, document.body);
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var PRESET_COLORS = [
+  "#000000",
+  "#ffffff",
+  "#f44336",
+  "#e91e63",
+  "#9c27b0",
+  "#673ab7",
+  "#3f51b5",
+  "#2196f3",
+  "#03a9f4",
+  "#00bcd4",
+  "#009688",
+  "#4caf50",
+  "#8bc34a",
+  "#cddc39",
+  "#ffeb3b",
+  "#ffc107",
+  "#ff9800",
+  "#ff5722",
+  "#795548",
+  "#9e9e9e",
+  "#607d8b"
+];
+var ColorPicker = ({
+  name,
+  label,
+  defaultValue = "#000000",
+  value: controlledValue,
+  onChangeAction,
+  disabled,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const [color, setColor] = useState(controlledValue || defaultValue);
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      setColor(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleColorChange = (newColor) => {
+    setColor(newColor);
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name: name || "",
+          value: newColor
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
+    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: cn(
+              "w-10 h-10 rounded-lg border border-border shadow-sm transition-transform hover:scale-105 active:scale-95 disabled:opacity-50 disabled:hover:scale-100",
+              "flex items-center justify-center p-1"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-full h-full rounded-md",
+                style: { backgroundColor: color }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "p-3 w-64", side: "bottom", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: PRESET_COLORS.map((preset) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "w-6 h-6 rounded-md border border-border transition-transform hover:scale-110 active:scale-90",
+                color === preset && "ring-2 ring-primary ring-offset-1"
+              ),
+              style: { backgroundColor: preset },
+              onClick: () => handleColorChange(preset)
+            },
+            preset
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: color,
+                onChange: (e) => handleColorChange(e.target.value),
+                className: "w-8 h-8 rounded border-none p-0 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: color,
+                onChange: (e) => handleColorChange(e.target.value),
+                className: "flex-1 h-8 px-2 text-xs font-mono border border-border rounded uppercase focus:outline-none focus:ring-1 focus:ring-primary"
+              }
+            )
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-mono uppercase text-muted-foreground", children: color })
+    ] }),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name, value: color })
+  ] });
+};
 var RadioGroup = ({
   name,
   options,
@@ -1582,6 +1899,119 @@ var Button2 = ({
     }
   );
 };
+var Upload = ({
+  label = "Upload",
+  multiple = false,
+  accept,
+  onUploadAction,
+  className,
+  style,
+  initialFiles,
+  mode = "append"
+}) => {
+  const { sendEvent, events } = useMelony();
+  const fileInputRef = useRef(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [status, setStatus] = useState("idle");
+  const uploadedFilesEvents = events.filter(
+    (event) => event.type === "uploaded-files"
+  );
+  const displayEvents = mode === "replace" && uploadedFilesEvents.length > 0 ? [uploadedFilesEvents[uploadedFilesEvents.length - 1]] : uploadedFilesEvents;
+  const showInitialFiles = mode === "replace" ? displayEvents.length === 0 : true;
+  const handleFileChange = async (e) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+    setIsUploading(true);
+    setStatus("idle");
+    try {
+      const filePromises = files.map((file) => {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => {
+            try {
+              const base64 = reader.result;
+              if (!base64) {
+                reject(new Error("FileReader returned empty result"));
+                return;
+              }
+              resolve({
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                data: base64
+              });
+            } catch (error) {
+              reject(error);
+            }
+          };
+          reader.onerror = (error) => {
+            reject(new Error(`Failed to read file ${file.name}: ${error}`));
+          };
+          reader.readAsDataURL(file);
+        });
+      });
+      const convertedFiles = await Promise.all(filePromises);
+      if (onUploadAction) {
+        if (typeof onUploadAction === "function") {
+          await sendEvent(onUploadAction({ files: convertedFiles }));
+        } else {
+          await sendEvent({
+            ...onUploadAction,
+            data: {
+              ...onUploadAction.data,
+              files: convertedFiles
+            }
+          });
+        }
+      }
+      setStatus("success");
+      setTimeout(() => setStatus("idle"), 3e3);
+    } catch (error) {
+      console.error("Upload failed:", error);
+      setStatus("error");
+      setTimeout(() => setStatus("idle"), 3e3);
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", className), style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        onChange: handleFileChange,
+        multiple,
+        accept,
+        className: "hidden",
+        disabled: isUploading
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 mb-2 items-center", children: [
+      showInitialFiles && initialFiles?.map((file, index) => /* @__PURE__ */ jsx(Image, { src: file.url, alt: file.name, size: "md" }, index)),
+      displayEvents.map(
+        (event, index) => event.ui ? /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, index) : null
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          disabled: isUploading,
+          onClick: () => fileInputRef.current?.click(),
+          className: "gap-2",
+          variant: status === "error" ? "destructive" : status === "success" ? "outline" : "default",
+          children: [
+            isUploading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 animate-spin" }) : status === "success" ? /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4 text-green-500" }) : status === "error" ? /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4" }),
+            status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 var Form = ({
   children,
   onSubmitAction,
@@ -1643,10 +2073,12 @@ function UIRenderer({ node }) {
     heading: Heading,
     badge: Badge2,
     input: Input2,
+    hidden: Hidden,
     textarea: Textarea2,
     select: Select2,
     checkbox: Checkbox,
     radioGroup: RadioGroup,
+    colorPicker: ColorPicker,
     spacer: Spacer,
     divider: Divider,
     box: Box,
@@ -1656,7 +2088,8 @@ function UIRenderer({ node }) {
     listItem: ListItem,
     form: Form,
     chart: Chart,
-    label: Label2
+    label: Label2,
+    upload: Upload
   };
   const Component = typeMap[type];
   if (!Component) {
@@ -1963,10 +2396,10 @@ var AccountButton = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React11.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React11.useState(false);
-  const [error, setError] = React11.useState(null);
-  const initials = React11.useMemo(() => {
+  const [open, setOpen] = React3.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const initials = React3.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -2542,13 +2975,13 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React11__default.useState(
+  const [selectedOptions, setSelectedOptions] = React3__default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React11__default.useState([]);
-  const [previews, setPreviews] = React11__default.useState([]);
-  const fileInputRef = React11__default.useRef(null);
-  React11__default.useEffect(() => {
+  const [attachedFiles, setAttachedFiles] = React3__default.useState([]);
+  const [previews, setPreviews] = React3__default.useState([]);
+  const fileInputRef = React3__default.useRef(null);
+  React3__default.useEffect(() => {
     const newPreviews = attachedFiles.map((file) => ({
       name: file.name,
       type: file.type,
@@ -2831,7 +3264,7 @@ function StarterPrompts({
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500 mt-auto max-w-2xl", children: [
     /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "What can I help with today?" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 w-full", children: prompts.map((item, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-full", children: prompts.map((item, index) => /* @__PURE__ */ jsx(
       Button2,
       {
         label: item.label,
@@ -3119,7 +3552,7 @@ var Dropdown = ({
 };
 var ThreadList = ({ className }) => {
   const { threads, activeThreadId, deleteThread } = useThreads();
-  const sortedThreads = React11.useMemo(() => {
+  const sortedThreads = React3.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
       const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
@@ -3280,7 +3713,7 @@ function Sidebar({ side, children, className }) {
         collapsed ? "w-0 border-r-0 border-l-0 min-w-0" : "",
         !collapsed && className
       ),
-      children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children })
+      children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0 flex flex-col", children })
     }
   );
 }
@@ -3347,206 +3780,6 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React11.createContext(
-  void 0
-);
-function usePopoverContext() {
-  const context = React11.useContext(PopoverContext);
-  if (!context) {
-    throw new Error("Popover components must be used within a Popover");
-  }
-  return context;
-}
-function Popover({
-  children,
-  defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange
-}) {
-  const [internalOpen, setInternalOpen] = React11.useState(defaultOpen);
-  const triggerRef = React11.useRef(null);
-  const open = controlledOpen ?? internalOpen;
-  const setOpen = React11.useCallback(
-    (newOpen) => {
-      if (controlledOpen === void 0) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [controlledOpen, onOpenChange]
-  );
-  const value = React11.useMemo(
-    () => ({
-      open,
-      setOpen,
-      triggerRef
-    }),
-    [open, setOpen]
-  );
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
-}
-var PopoverTrigger = React11.forwardRef(
-  ({ asChild, className, children, ...props }, ref) => {
-    const { setOpen, triggerRef } = usePopoverContext();
-    const handleClick = (e) => {
-      setOpen(true);
-      props.onClick?.(e);
-    };
-    if (asChild && React11.isValidElement(children)) {
-      return React11.cloneElement(children, {
-        ref: (node) => {
-          triggerRef.current = node;
-          if (typeof children.ref === "function") {
-            children.ref(node);
-          } else if (children.ref) {
-            children.ref.current = node;
-          }
-        },
-        onClick: handleClick
-      });
-    }
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref: (node) => {
-          triggerRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
-        className,
-        onClick: handleClick,
-        ...props,
-        children
-      }
-    );
-  }
-);
-PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React11.forwardRef(
-  ({
-    className,
-    side = "bottom",
-    align = "start",
-    sideOffset = 4,
-    alignOffset = 0,
-    children,
-    ...props
-  }, ref) => {
-    const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React11.useState({ top: 0, left: 0 });
-    const contentRef = React11.useRef(null);
-    React11.useEffect(() => {
-      if (!open || !triggerRef.current) return;
-      const updatePosition = () => {
-        if (!triggerRef.current || !contentRef.current) return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const contentRect = contentRef.current.getBoundingClientRect();
-        const scrollX = window.scrollX;
-        const scrollY = window.scrollY;
-        let top = 0;
-        let left = 0;
-        switch (side) {
-          case "bottom":
-            top = triggerRect.bottom + sideOffset + scrollY;
-            break;
-          case "top":
-            top = triggerRect.top - contentRect.height - sideOffset + scrollY;
-            break;
-          case "right":
-            top = triggerRect.top + scrollY;
-            left = triggerRect.right + sideOffset + scrollX;
-            break;
-          case "left":
-            top = triggerRect.top + scrollY;
-            left = triggerRect.left - contentRect.width - sideOffset + scrollX;
-            break;
-        }
-        switch (align) {
-          case "start":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + scrollX + alignOffset;
-            } else {
-              top += alignOffset;
-            }
-            break;
-          case "center":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2 + scrollX + alignOffset;
-            } else {
-              top += triggerRect.height / 2 - contentRect.height / 2 + alignOffset;
-            }
-            break;
-          case "end":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + triggerRect.width - contentRect.width + scrollX + alignOffset;
-            } else {
-              top += triggerRect.height - contentRect.height + alignOffset;
-            }
-            break;
-        }
-        setPosition({ top, left });
-      };
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-      window.addEventListener("resize", updatePosition);
-      window.addEventListener("scroll", updatePosition, true);
-      return () => {
-        window.removeEventListener("resize", updatePosition);
-        window.removeEventListener("scroll", updatePosition, true);
-      };
-    }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React11.useEffect(() => {
-      if (!open) return;
-      const handleClickOutside = (event) => {
-        if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
-          setOpen(false);
-        }
-      };
-      const handleEscape = (event) => {
-        if (event.key === "Escape") {
-          setOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-        document.removeEventListener("keydown", handleEscape);
-      };
-    }, [open, setOpen, triggerRef]);
-    if (!open) return null;
-    const content = /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: (node) => {
-          contentRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
-        className: cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 rounded-2xl shadow-2xl ring-1 z-50 min-w-48 max-h-96 overflow-hidden",
-          className
-        ),
-        style: {
-          position: "absolute",
-          top: `${position.top}px`,
-          left: `${position.left}px`
-        },
-        ...props,
-        children
-      }
-    );
-    return createPortal(content, document.body);
-  }
-);
-PopoverContent.displayName = "PopoverContent";
 var ThreadPopover = ({
   className,
   buttonClassName,
@@ -3554,7 +3787,7 @@ var ThreadPopover = ({
   buttonSize = "icon",
   emptyState
 }) => {
-  const [isOpen, setIsOpen] = React11.useState(false);
+  const [isOpen, setIsOpen] = React3.useState(false);
   useHotkeys(
     "h",
     (e) => {
@@ -3597,7 +3830,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11.useState(false);
+  const [isCreating, setIsCreating] = React3.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3679,7 +3912,7 @@ var CreateThreadListItem = ({
   className
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11.useState(false);
+  const [isCreating, setIsCreating] = React3.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3722,6 +3955,6 @@ var CreateThreadListItem = ({
   );
 };
 
-export { AccountButton, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, Composer, CreateThreadButton, CreateThreadListItem, Divider, Dropdown, Form, FullChat, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, WelcomeScreen, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, Composer, CreateThreadButton, CreateThreadListItem, Divider, Dropdown, Form, FullChat, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, Upload, WelcomeScreen, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map