@melony/react 0.1.46 → 0.1.47

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React12 = require('react');
+var React3 = require('react');
 var melony = require('melony');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
@@ -15,10 +15,10 @@ var useRender = require('@base-ui/react/use-render');
 var classVarianceAuthority = require('class-variance-authority');
 var input = require('@base-ui/react/input');
 var select = require('@base-ui/react/select');
+var reactDom = require('react-dom');
 var button = require('@base-ui/react/button');
 var menu = require('@base-ui/react/menu');
 var nuqs = require('nuqs');
-var reactDom = require('react-dom');
 var reactHotkeysHook = require('react-hotkeys-hook');
 
 function _interopNamespace(e) {
@@ -39,7 +39,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // src/providers/melony-provider.tsx
@@ -462,14 +462,14 @@ var List = ({ children, width, className, style }) => {
   );
 };
 var useMelony = (options) => {
-  const context = React12.useContext(MelonyContext);
+  const context = React3.useContext(MelonyContext);
   if (context === void 0) {
     throw new Error("useMelony must be used within a MelonyClientProvider");
   }
   const { client, reset } = context;
   const { initialEvents } = options || {};
-  const prevInitialEventsRef = React12.useRef(void 0);
-  React12.useEffect(() => {
+  const prevInitialEventsRef = React3.useRef(void 0);
+  React3.useEffect(() => {
     const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
     if (currentSerialized !== prevInitialEventsRef.current) {
       if (initialEvents) {
@@ -555,17 +555,16 @@ var Image = ({
   src,
   alt,
   size = "sm",
-  groupId,
   className,
   style
 }) => {
-  const [hasError, setHasError] = React12.useState(false);
-  const [isLoading, setIsLoading] = React12.useState(true);
-  const [open, setOpen] = React12.useState(false);
-  const [currentIndex, setCurrentIndex] = React12.useState(0);
-  const [gallery, setGallery] = React12.useState([]);
-  const triggerRef = React12.useRef(null);
-  React12.useEffect(() => {
+  const [hasError, setHasError] = React3.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(true);
+  const [open, setOpen] = React3.useState(false);
+  const [currentIndex, setCurrentIndex] = React3.useState(0);
+  const [gallery, setGallery] = React3.useState([]);
+  const triggerRef = React3.useRef(null);
+  React3.useEffect(() => {
     if (open && triggerRef.current) {
       let parent = triggerRef.current.parentElement;
       while (parent && parent.parentElement && parent.parentElement.children.length === 1) {
@@ -800,7 +799,7 @@ var Chart = ({
   className,
   style
 }) => {
-  const [tooltip, setTooltip] = React12.useState(null);
+  const [tooltip, setTooltip] = React3.useState(null);
   if (!Array.isArray(data)) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5", children: "Error: Chart data must be an array" });
   }
@@ -1447,6 +1446,321 @@ var Checkbox = ({
 var Hidden = ({ name, value }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value });
 };
+var PopoverContext = React3__namespace.createContext(
+  void 0
+);
+function usePopoverContext() {
+  const context = React3__namespace.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__namespace.useState(defaultOpen);
+  const triggerRef = React3__namespace.useRef(null);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = React3__namespace.useCallback(
+    (newOpen) => {
+      if (controlledOpen === void 0) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const value = React3__namespace.useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef
+    }),
+    [open, setOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
+}
+var PopoverTrigger = React3__namespace.forwardRef(
+  ({ asChild, className, children, ...props }, ref) => {
+    const { setOpen, triggerRef } = usePopoverContext();
+    const handleClick = (e) => {
+      setOpen(true);
+      props.onClick?.(e);
+    };
+    if (asChild && React3__namespace.isValidElement(children)) {
+      return React3__namespace.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__ */ jsxRuntime.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__namespace.forwardRef(
+  ({
+    className,
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    alignOffset = 0,
+    children,
+    ...props
+  }, ref) => {
+    const { open, setOpen, triggerRef } = usePopoverContext();
+    const [position, setPosition] = React3__namespace.useState({ top: 0, left: 0 });
+    const contentRef = React3__namespace.useRef(null);
+    React3__namespace.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__namespace.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__ */ jsxRuntime.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 reactDom.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] = React3.useState(controlledValue || defaultValue);
+  React3.useEffect(() => {
+    if (controlledValue !== void 0) {
+      setColor(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleColorChange = (newColor) => {
+    setColor(newColor);
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name: name || "",
+          value: newColor
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn("w-full", className), style, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(FieldTitle, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "w-full h-full rounded-md",
+                style: { backgroundColor: color }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-3 w-64", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: PRESET_COLORS.map((preset) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-sm font-mono uppercase text-muted-foreground", children: color })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: color })
+  ] });
+};
 var RadioGroup = ({
   name,
   options,
@@ -1612,12 +1926,19 @@ var Upload = ({
   accept,
   onUploadAction,
   className,
-  style
+  style,
+  initialFiles,
+  mode = "append"
 }) => {
   const { sendEvent, events } = useMelony();
-  const fileInputRef = React12.useRef(null);
-  const [isUploading, setIsUploading] = React12.useState(false);
-  const [status, setStatus] = React12.useState("idle");
+  const fileInputRef = React3.useRef(null);
+  const [isUploading, setIsUploading] = React3.useState(false);
+  const [status, setStatus] = React3.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;
@@ -1690,23 +2011,26 @@ var Upload = ({
         disabled: isUploading
       }
     ),
-    events.filter((event) => event.type === "files-uploaded" && !!event.ui).map(
-      (event, index) => event.ui ? /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: event.ui }, index) : null
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        type: "button",
-        disabled: isUploading,
-        onClick: () => fileInputRef.current?.click(),
-        className: "gap-2",
-        variant: status === "error" ? "destructive" : status === "success" ? "outline" : "default",
-        children: [
-          isUploading ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "h-4 w-4 animate-spin" }) : status === "success" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconCheck, { className: "h-4 w-4 text-green-500" }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUpload, { className: "h-4 w-4" }),
-          status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 mb-2 items-center", children: [
+      showInitialFiles && initialFiles?.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Image, { src: file.url, alt: file.name, size: "md" }, index)),
+      displayEvents.map(
+        (event, index) => event.ui ? /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: event.ui }, index) : null
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          disabled: isUploading,
+          onClick: () => fileInputRef.current?.click(),
+          className: "gap-2",
+          variant: status === "error" ? "destructive" : status === "success" ? "outline" : "default",
+          children: [
+            isUploading ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "h-4 w-4 animate-spin" }) : status === "success" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconCheck, { className: "h-4 w-4 text-green-500" }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUpload, { className: "h-4 w-4" }),
+            status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
+          ]
+        }
+      )
+    ] })
   ] });
 };
 var Form = ({
@@ -1716,7 +2040,7 @@ var Form = ({
   style
 }) => {
   const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = React12.useState(false);
+  const [isSubmitted, setIsSubmitted] = React3.useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (isSubmitted) return;
@@ -1775,6 +2099,7 @@ function UIRenderer({ node }) {
     select: Select2,
     checkbox: Checkbox,
     radioGroup: RadioGroup,
+    colorPicker: ColorPicker,
     spacer: Spacer,
     divider: Divider,
     box: Box,
@@ -1799,7 +2124,7 @@ function UIRenderer({ node }) {
   const componentProps = { ...props };
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...componentProps, children: renderedChildren });
 }
-var MelonyContext = React12.createContext(
+var MelonyContext = React3.createContext(
   void 0
 );
 var defaultQueryClient = new reactQuery.QueryClient({
@@ -1816,31 +2141,31 @@ var MelonyContextProviderInner = ({
   initialEvents,
   setContextValue
 }) => {
-  const [state, setState] = React12.useState(client.getState());
+  const [state, setState] = React3.useState(client.getState());
   const queryClient = reactQuery.useQueryClient();
-  const [dialog, setDialog] = React12.useState();
+  const [dialog, setDialog] = React3.useState();
   const { data: config } = reactQuery.useQuery({
     queryKey: ["melony-config", client.url],
     queryFn: () => client.getConfig(),
     staleTime: Infinity
   });
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
   }, [client, initialEvents]);
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     setState(client.getState());
     const unsubscribe = client.subscribe(setState);
     return () => {
       unsubscribe();
     };
   }, [client]);
-  const reset = React12.useCallback(
+  const reset = React3.useCallback(
     (events) => client.reset(events),
     [client]
   );
-  const dispatchClientAction = React12.useCallback(
+  const dispatchClientAction = React3.useCallback(
     async (event) => {
       if (!event.type.startsWith("client:")) return false;
       switch (event.type) {
@@ -1896,7 +2221,7 @@ var MelonyContextProviderInner = ({
     },
     [client, reset, queryClient]
   );
-  const sendEvent = React12.useCallback(
+  const sendEvent = React3.useCallback(
     async (event) => {
       const handled = await dispatchClientAction(event);
       if (handled) return;
@@ -1907,7 +2232,7 @@ var MelonyContextProviderInner = ({
     },
     [client, dispatchClientAction]
   );
-  const value = React12.useMemo(
+  const value = React3.useMemo(
     () => ({
       ...state,
       messages: melony.convertEventsToMessages(state.events),
@@ -1918,7 +2243,7 @@ var MelonyContextProviderInner = ({
     }),
     [state, sendEvent, reset, client, config]
   );
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     setContextValue(value);
   }, [value, setContextValue]);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.NuqsAdapter, { children: [
@@ -1951,7 +2276,7 @@ var MelonyProvider = ({
   initialEvents,
   queryClient = defaultQueryClient
 }) => {
-  const [contextValue, setContextValue] = React12.useState(void 0);
+  const [contextValue, setContextValue] = React3.useState(void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(
     MelonyContextProviderInner,
     {
@@ -1963,7 +2288,7 @@ var MelonyProvider = ({
   ) }) });
 };
 var useAuth = () => {
-  const context = React12.useContext(AuthContext);
+  const context = React3.useContext(AuthContext);
   if (context === void 0) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
@@ -2092,10 +2417,10 @@ var AccountButton = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React12__namespace.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React12__namespace.useState(false);
-  const [error, setError] = React12__namespace.useState(null);
-  const initials = React12__namespace.useMemo(() => {
+  const [open, setOpen] = React3__namespace.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React3__namespace.useState(false);
+  const [error, setError] = React3__namespace.useState(null);
+  const initials = React3__namespace.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -2332,7 +2657,7 @@ function WelcomeScreen({
     }
   );
 }
-var AuthContext = React12.createContext(
+var AuthContext = React3.createContext(
   void 0
 );
 var AuthProvider = ({
@@ -2352,10 +2677,10 @@ var AuthProvider = ({
       queryClient.setQueryData(["auth-user", service], null);
     }
   });
-  const login = React12.useCallback(() => {
+  const login = React3.useCallback(() => {
     service.login();
   }, [service]);
-  const logout = React12.useCallback(async () => {
+  const logout = React3.useCallback(async () => {
     try {
       await logoutMutation.mutateAsync();
     } catch (error) {
@@ -2390,7 +2715,7 @@ var AuthProvider = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children: !value.isAuthenticated && welcomeScreenProps ? /* @__PURE__ */ jsxRuntime.jsx(WelcomeScreen, { ...welcomeScreenProps }) : children });
 };
-var ThreadContext = React12.createContext(
+var ThreadContext = React3.createContext(
   void 0
 );
 var ThreadProvider = ({
@@ -2399,16 +2724,16 @@ var ThreadProvider = ({
   initialThreadId: providedInitialThreadId
 }) => {
   const queryClient = reactQuery.useQueryClient();
-  const melonyContext = React12.useContext(MelonyContext);
+  const melonyContext = React3.useContext(MelonyContext);
   const [activeThreadId, setActiveThreadId] = nuqs.useQueryState(
     "threadId",
     nuqs.parseAsString
   );
-  const prevActiveThreadIdRef = React12.useRef(activeThreadId);
-  React12.useEffect(() => {
+  const prevActiveThreadIdRef = React3.useRef(activeThreadId);
+  React3.useEffect(() => {
     prevActiveThreadIdRef.current = activeThreadId;
   }, [activeThreadId]);
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     if (!activeThreadId && providedInitialThreadId) {
       setActiveThreadId(providedInitialThreadId);
     }
@@ -2424,7 +2749,7 @@ var ThreadProvider = ({
     queryFn: () => service.getThreads(),
     staleTime: prevActiveThreadIdRef.current === null && activeThreadId !== null ? Infinity : 0
   });
-  const isNewThread = React12.useMemo(() => {
+  const isNewThread = React3.useMemo(() => {
     if (!activeThreadId || !isFetchedThreads) return false;
     return !threads.some((t) => t.id === activeThreadId);
   }, [activeThreadId, threads, isFetchedThreads]);
@@ -2454,22 +2779,22 @@ var ThreadProvider = ({
       }
     }
   });
-  const selectThread = React12.useCallback(
+  const selectThread = React3.useCallback(
     (threadId) => {
       setActiveThreadId(threadId);
     },
     [setActiveThreadId]
   );
-  const createThread = React12.useCallback(async () => {
+  const createThread = React3.useCallback(async () => {
     return createMutation.mutateAsync();
   }, [createMutation]);
-  const deleteThread = React12.useCallback(
+  const deleteThread = React3.useCallback(
     async (threadId) => {
       return deleteMutation.mutateAsync(threadId);
     },
     [deleteMutation]
   );
-  const value = React12.useMemo(
+  const value = React3.useMemo(
     () => ({
       threads,
       activeThreadId,
@@ -2500,7 +2825,7 @@ var ThreadProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
 function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
-  const [screenSize, setScreenSize] = React12.useState(() => {
+  const [screenSize, setScreenSize] = React3.useState(() => {
     if (typeof window === "undefined") {
       return {
         width: 1024,
@@ -2519,7 +2844,7 @@ function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
       isDesktop: width >= tabletBreakpoint
     };
   });
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     if (typeof window === "undefined") return;
     const updateScreenSize = () => {
       const width = window.innerWidth;
@@ -2540,11 +2865,11 @@ function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
   }, [mobileBreakpoint, tabletBreakpoint]);
   return screenSize;
 }
-var SidebarContext = React12.createContext(
+var SidebarContext = React3.createContext(
   void 0
 );
 function useSidebar() {
-  const context = React12.useContext(SidebarContext);
+  const context = React3.useContext(SidebarContext);
   if (context === void 0) {
     throw new Error("useSidebar must be used within a SidebarProvider");
   }
@@ -2557,33 +2882,33 @@ function SidebarProvider({
 }) {
   const { isMobile, isTablet } = useScreenSize();
   const isSmallScreen = isMobile || isTablet;
-  const [leftCollapsed, setLeftCollapsed] = React12.useState(() => {
+  const [leftCollapsed, setLeftCollapsed] = React3.useState(() => {
     if (defaultLeftCollapsed !== void 0) return defaultLeftCollapsed;
     if (typeof window !== "undefined") {
       return window.innerWidth < 1024;
     }
     return false;
   });
-  const [rightCollapsed, setRightCollapsed] = React12.useState(() => {
+  const [rightCollapsed, setRightCollapsed] = React3.useState(() => {
     if (defaultRightCollapsed !== void 0) return defaultRightCollapsed;
     if (typeof window !== "undefined") {
       return window.innerWidth < 1024;
     }
     return false;
   });
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     if (isSmallScreen) {
       setLeftCollapsed(true);
       setRightCollapsed(true);
     }
   }, [isSmallScreen]);
-  const handleLeftToggle = React12.useCallback((collapsed) => {
+  const handleLeftToggle = React3.useCallback((collapsed) => {
     setLeftCollapsed(collapsed);
   }, []);
-  const handleRightToggle = React12.useCallback((collapsed) => {
+  const handleRightToggle = React3.useCallback((collapsed) => {
     setRightCollapsed(collapsed);
   }, []);
-  const contextValue = React12.useMemo(
+  const contextValue = React3.useMemo(
     () => ({
       leftCollapsed,
       rightCollapsed,
@@ -2596,11 +2921,11 @@ function SidebarProvider({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children });
 }
-var ThemeContext = React12.createContext(void 0);
+var ThemeContext = React3.createContext(void 0);
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = React12.useState("system");
-  const [resolvedTheme, setResolvedTheme] = React12.useState("light");
-  React12.useEffect(() => {
+  const [theme, setThemeState] = React3.useState("system");
+  const [resolvedTheme, setResolvedTheme] = React3.useState("light");
+  React3.useEffect(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("theme");
       if (stored) {
@@ -2608,7 +2933,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     if (typeof window !== "undefined") {
       if (theme === "system") {
         const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -2623,7 +2948,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, [theme]);
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     if (typeof window !== "undefined") {
       const root = document.documentElement;
       if (resolvedTheme === "dark") {
@@ -2642,14 +2967,14 @@ function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
 }
 function useTheme() {
-  const context = React12.useContext(ThemeContext);
+  const context = React3.useContext(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 }
 var useThreads = () => {
-  const context = React12.useContext(ThreadContext);
+  const context = React3.useContext(ThreadContext);
   if (context === void 0) {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
@@ -2671,13 +2996,13 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React12__namespace.default.useState(
+  const [selectedOptions, setSelectedOptions] = React3__namespace.default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React12__namespace.default.useState([]);
-  const [previews, setPreviews] = React12__namespace.default.useState([]);
-  const fileInputRef = React12__namespace.default.useRef(null);
-  React12__namespace.default.useEffect(() => {
+  const [attachedFiles, setAttachedFiles] = React3__namespace.default.useState([]);
+  const [previews, setPreviews] = React3__namespace.default.useState([]);
+  const fileInputRef = React3__namespace.default.useRef(null);
+  React3__namespace.default.useEffect(() => {
     const newPreviews = attachedFiles.map((file) => ({
       name: file.name,
       type: file.type,
@@ -3023,7 +3348,7 @@ function MessageBubble({ message }) {
   ) });
 }
 function LoadingIndicator({ status }) {
-  const [isExpanded, setIsExpanded] = React12.useState(false);
+  const [isExpanded, setIsExpanded] = React3.useState(false);
   const message = status?.message || "Processing...";
   const details = status?.details;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -3055,7 +3380,7 @@ function MessageList({
   if (messages.length === 0) {
     return null;
   }
-  const isTextStreaming = React12.useMemo(() => {
+  const isTextStreaming = React3.useMemo(() => {
     if (messages.length === 0 || !isLoading) return false;
     const lastMessage = messages[messages.length - 1];
     return lastMessage.content.some((event) => event.type === "text-delta");
@@ -3092,7 +3417,7 @@ function Thread({
   const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
   const options = localOptions ?? config?.options;
   const fileAttachments = config?.fileAttachments;
-  const allDefaultSelectedIds = React12.useMemo(() => {
+  const allDefaultSelectedIds = React3.useMemo(() => {
     const defaultSelectedIdsFromOptions = options?.flatMap((group) => group.defaultSelectedIds ?? []) ?? [];
     return [
       .../* @__PURE__ */ new Set([
@@ -3101,9 +3426,9 @@ function Thread({
       ])
     ];
   }, [options, defaultSelectedIds]);
-  const [input, setInput] = React12.useState("");
-  const messagesEndRef = React12.useRef(null);
-  React12.useEffect(() => {
+  const [input, setInput] = React3.useState("");
+  const messagesEndRef = React3.useRef(null);
+  React3.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSubmit = async (state, overrideInput) => {
@@ -3248,7 +3573,7 @@ var Dropdown = ({
 };
 var ThreadList = ({ className }) => {
   const { threads, activeThreadId, deleteThread } = useThreads();
-  const sortedThreads = React12__namespace.useMemo(() => {
+  const sortedThreads = React3__namespace.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;
@@ -3303,8 +3628,8 @@ function PopupChat({
   headerProps,
   defaultSelectedIds
 }) {
-  const [isOpen, setIsOpen] = React12.useState(defaultOpen);
-  const [view, setView] = React12.useState("chat");
+  const [isOpen, setIsOpen] = React3.useState(defaultOpen);
+  const [view, setView] = React3.useState("chat");
   const { createThread } = useThreads();
   const handleNewChat = async () => {
     try {
@@ -3476,206 +3801,6 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React12__namespace.createContext(
-  void 0
-);
-function usePopoverContext() {
-  const context = React12__namespace.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] = React12__namespace.useState(defaultOpen);
-  const triggerRef = React12__namespace.useRef(null);
-  const open = controlledOpen ?? internalOpen;
-  const setOpen = React12__namespace.useCallback(
-    (newOpen) => {
-      if (controlledOpen === void 0) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [controlledOpen, onOpenChange]
-  );
-  const value = React12__namespace.useMemo(
-    () => ({
-      open,
-      setOpen,
-      triggerRef
-    }),
-    [open, setOpen]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
-}
-var PopoverTrigger = React12__namespace.forwardRef(
-  ({ asChild, className, children, ...props }, ref) => {
-    const { setOpen, triggerRef } = usePopoverContext();
-    const handleClick = (e) => {
-      setOpen(true);
-      props.onClick?.(e);
-    };
-    if (asChild && React12__namespace.isValidElement(children)) {
-      return React12__namespace.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__ */ jsxRuntime.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 = React12__namespace.forwardRef(
-  ({
-    className,
-    side = "bottom",
-    align = "start",
-    sideOffset = 4,
-    alignOffset = 0,
-    children,
-    ...props
-  }, ref) => {
-    const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React12__namespace.useState({ top: 0, left: 0 });
-    const contentRef = React12__namespace.useRef(null);
-    React12__namespace.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]);
-    React12__namespace.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__ */ jsxRuntime.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 reactDom.createPortal(content, document.body);
-  }
-);
-PopoverContent.displayName = "PopoverContent";
 var ThreadPopover = ({
   className,
   buttonClassName,
@@ -3683,7 +3808,7 @@ var ThreadPopover = ({
   buttonSize = "icon",
   emptyState
 }) => {
-  const [isOpen, setIsOpen] = React12__namespace.useState(false);
+  const [isOpen, setIsOpen] = React3__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
     "h",
     (e) => {
@@ -3726,7 +3851,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React12__namespace.useState(false);
+  const [isCreating, setIsCreating] = React3__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3808,7 +3933,7 @@ var CreateThreadListItem = ({
   className
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React12__namespace.useState(false);
+  const [isCreating, setIsCreating] = React3__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {