@melony/react 0.1.45 → 0.1.46

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React12 = require('react');
 var melony = require('melony');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
@@ -39,7 +39,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
+var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
 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 = React11.useContext(MelonyContext);
+  const context = React12.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 = React11.useRef(void 0);
-  React11.useEffect(() => {
+  const prevInitialEventsRef = React12.useRef(void 0);
+  React12.useEffect(() => {
     const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
     if (currentSerialized !== prevInitialEventsRef.current) {
       if (initialEvents) {
@@ -559,13 +559,13 @@ var Image = ({
   className,
   style
 }) => {
-  const [hasError, setHasError] = React11.useState(false);
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const [open, setOpen] = React11.useState(false);
-  const [currentIndex, setCurrentIndex] = React11.useState(0);
-  const [gallery, setGallery] = React11.useState([]);
-  const triggerRef = React11.useRef(null);
-  React11.useEffect(() => {
+  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(() => {
     if (open && triggerRef.current) {
       let parent = triggerRef.current.parentElement;
       while (parent && parent.parentElement && parent.parentElement.children.length === 1) {
@@ -800,7 +800,7 @@ var Chart = ({
   className,
   style
 }) => {
-  const [tooltip, setTooltip] = React11.useState(null);
+  const [tooltip, setTooltip] = React12.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" });
   }
@@ -1444,6 +1444,9 @@ var Checkbox = ({
     )
   ] });
 };
+var Hidden = ({ name, value }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value });
+};
 var RadioGroup = ({
   name,
   options,
@@ -1603,6 +1606,109 @@ var Button2 = ({
     }
   );
 };
+var Upload = ({
+  label = "Upload",
+  multiple = false,
+  accept,
+  onUploadAction,
+  className,
+  style
+}) => {
+  const { sendEvent, events } = useMelony();
+  const fileInputRef = React12.useRef(null);
+  const [isUploading, setIsUploading] = React12.useState(false);
+  const [status, setStatus] = React12.useState("idle");
+  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__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-block", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        onChange: handleFileChange,
+        multiple,
+        accept,
+        className: "hidden",
+        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
+        ]
+      }
+    )
+  ] });
+};
 var Form = ({
   children,
   onSubmitAction,
@@ -1610,7 +1716,7 @@ var Form = ({
   style
 }) => {
   const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = React11.useState(false);
+  const [isSubmitted, setIsSubmitted] = React12.useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (isSubmitted) return;
@@ -1664,6 +1770,7 @@ function UIRenderer({ node }) {
     heading: Heading,
     badge: Badge2,
     input: Input2,
+    hidden: Hidden,
     textarea: Textarea2,
     select: Select2,
     checkbox: Checkbox,
@@ -1677,7 +1784,8 @@ function UIRenderer({ node }) {
     listItem: ListItem,
     form: Form,
     chart: Chart,
-    label: Label2
+    label: Label2,
+    upload: Upload
   };
   const Component = typeMap[type];
   if (!Component) {
@@ -1691,7 +1799,7 @@ function UIRenderer({ node }) {
   const componentProps = { ...props };
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...componentProps, children: renderedChildren });
 }
-var MelonyContext = React11.createContext(
+var MelonyContext = React12.createContext(
   void 0
 );
 var defaultQueryClient = new reactQuery.QueryClient({
@@ -1708,31 +1816,31 @@ var MelonyContextProviderInner = ({
   initialEvents,
   setContextValue
 }) => {
-  const [state, setState] = React11.useState(client.getState());
+  const [state, setState] = React12.useState(client.getState());
   const queryClient = reactQuery.useQueryClient();
-  const [dialog, setDialog] = React11.useState();
+  const [dialog, setDialog] = React12.useState();
   const { data: config } = reactQuery.useQuery({
     queryKey: ["melony-config", client.url],
     queryFn: () => client.getConfig(),
     staleTime: Infinity
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
   }, [client, initialEvents]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setState(client.getState());
     const unsubscribe = client.subscribe(setState);
     return () => {
       unsubscribe();
     };
   }, [client]);
-  const reset = React11.useCallback(
+  const reset = React12.useCallback(
     (events) => client.reset(events),
     [client]
   );
-  const dispatchClientAction = React11.useCallback(
+  const dispatchClientAction = React12.useCallback(
     async (event) => {
       if (!event.type.startsWith("client:")) return false;
       switch (event.type) {
@@ -1788,7 +1896,7 @@ var MelonyContextProviderInner = ({
     },
     [client, reset, queryClient]
   );
-  const sendEvent = React11.useCallback(
+  const sendEvent = React12.useCallback(
     async (event) => {
       const handled = await dispatchClientAction(event);
       if (handled) return;
@@ -1799,7 +1907,7 @@ var MelonyContextProviderInner = ({
     },
     [client, dispatchClientAction]
   );
-  const value = React11.useMemo(
+  const value = React12.useMemo(
     () => ({
       ...state,
       messages: melony.convertEventsToMessages(state.events),
@@ -1810,7 +1918,7 @@ var MelonyContextProviderInner = ({
     }),
     [state, sendEvent, reset, client, config]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setContextValue(value);
   }, [value, setContextValue]);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.NuqsAdapter, { children: [
@@ -1843,7 +1951,7 @@ var MelonyProvider = ({
   initialEvents,
   queryClient = defaultQueryClient
 }) => {
-  const [contextValue, setContextValue] = React11.useState(void 0);
+  const [contextValue, setContextValue] = React12.useState(void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(
     MelonyContextProviderInner,
     {
@@ -1855,7 +1963,7 @@ var MelonyProvider = ({
   ) }) });
 };
 var useAuth = () => {
-  const context = React11.useContext(AuthContext);
+  const context = React12.useContext(AuthContext);
   if (context === void 0) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
@@ -1984,10 +2092,10 @@ var AccountButton = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React11__namespace.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React11__namespace.useState(false);
-  const [error, setError] = React11__namespace.useState(null);
-  const initials = React11__namespace.useMemo(() => {
+  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 name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -2224,7 +2332,7 @@ function WelcomeScreen({
     }
   );
 }
-var AuthContext = React11.createContext(
+var AuthContext = React12.createContext(
   void 0
 );
 var AuthProvider = ({
@@ -2244,10 +2352,10 @@ var AuthProvider = ({
       queryClient.setQueryData(["auth-user", service], null);
     }
   });
-  const login = React11.useCallback(() => {
+  const login = React12.useCallback(() => {
     service.login();
   }, [service]);
-  const logout = React11.useCallback(async () => {
+  const logout = React12.useCallback(async () => {
     try {
       await logoutMutation.mutateAsync();
     } catch (error) {
@@ -2282,7 +2390,7 @@ var AuthProvider = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children: !value.isAuthenticated && welcomeScreenProps ? /* @__PURE__ */ jsxRuntime.jsx(WelcomeScreen, { ...welcomeScreenProps }) : children });
 };
-var ThreadContext = React11.createContext(
+var ThreadContext = React12.createContext(
   void 0
 );
 var ThreadProvider = ({
@@ -2291,16 +2399,16 @@ var ThreadProvider = ({
   initialThreadId: providedInitialThreadId
 }) => {
   const queryClient = reactQuery.useQueryClient();
-  const melonyContext = React11.useContext(MelonyContext);
+  const melonyContext = React12.useContext(MelonyContext);
   const [activeThreadId, setActiveThreadId] = nuqs.useQueryState(
     "threadId",
     nuqs.parseAsString
   );
-  const prevActiveThreadIdRef = React11.useRef(activeThreadId);
-  React11.useEffect(() => {
+  const prevActiveThreadIdRef = React12.useRef(activeThreadId);
+  React12.useEffect(() => {
     prevActiveThreadIdRef.current = activeThreadId;
   }, [activeThreadId]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!activeThreadId && providedInitialThreadId) {
       setActiveThreadId(providedInitialThreadId);
     }
@@ -2316,7 +2424,7 @@ var ThreadProvider = ({
     queryFn: () => service.getThreads(),
     staleTime: prevActiveThreadIdRef.current === null && activeThreadId !== null ? Infinity : 0
   });
-  const isNewThread = React11.useMemo(() => {
+  const isNewThread = React12.useMemo(() => {
     if (!activeThreadId || !isFetchedThreads) return false;
     return !threads.some((t) => t.id === activeThreadId);
   }, [activeThreadId, threads, isFetchedThreads]);
@@ -2346,22 +2454,22 @@ var ThreadProvider = ({
       }
     }
   });
-  const selectThread = React11.useCallback(
+  const selectThread = React12.useCallback(
     (threadId) => {
       setActiveThreadId(threadId);
     },
     [setActiveThreadId]
   );
-  const createThread = React11.useCallback(async () => {
+  const createThread = React12.useCallback(async () => {
     return createMutation.mutateAsync();
   }, [createMutation]);
-  const deleteThread = React11.useCallback(
+  const deleteThread = React12.useCallback(
     async (threadId) => {
       return deleteMutation.mutateAsync(threadId);
     },
     [deleteMutation]
   );
-  const value = React11.useMemo(
+  const value = React12.useMemo(
     () => ({
       threads,
       activeThreadId,
@@ -2392,7 +2500,7 @@ var ThreadProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
 function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
-  const [screenSize, setScreenSize] = React11.useState(() => {
+  const [screenSize, setScreenSize] = React12.useState(() => {
     if (typeof window === "undefined") {
       return {
         width: 1024,
@@ -2411,7 +2519,7 @@ function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
       isDesktop: width >= tabletBreakpoint
     };
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (typeof window === "undefined") return;
     const updateScreenSize = () => {
       const width = window.innerWidth;
@@ -2432,11 +2540,11 @@ function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
   }, [mobileBreakpoint, tabletBreakpoint]);
   return screenSize;
 }
-var SidebarContext = React11.createContext(
+var SidebarContext = React12.createContext(
   void 0
 );
 function useSidebar() {
-  const context = React11.useContext(SidebarContext);
+  const context = React12.useContext(SidebarContext);
   if (context === void 0) {
     throw new Error("useSidebar must be used within a SidebarProvider");
   }
@@ -2449,33 +2557,33 @@ function SidebarProvider({
 }) {
   const { isMobile, isTablet } = useScreenSize();
   const isSmallScreen = isMobile || isTablet;
-  const [leftCollapsed, setLeftCollapsed] = React11.useState(() => {
+  const [leftCollapsed, setLeftCollapsed] = React12.useState(() => {
     if (defaultLeftCollapsed !== void 0) return defaultLeftCollapsed;
     if (typeof window !== "undefined") {
       return window.innerWidth < 1024;
     }
     return false;
   });
-  const [rightCollapsed, setRightCollapsed] = React11.useState(() => {
+  const [rightCollapsed, setRightCollapsed] = React12.useState(() => {
     if (defaultRightCollapsed !== void 0) return defaultRightCollapsed;
     if (typeof window !== "undefined") {
       return window.innerWidth < 1024;
     }
     return false;
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isSmallScreen) {
       setLeftCollapsed(true);
       setRightCollapsed(true);
     }
   }, [isSmallScreen]);
-  const handleLeftToggle = React11.useCallback((collapsed) => {
+  const handleLeftToggle = React12.useCallback((collapsed) => {
     setLeftCollapsed(collapsed);
   }, []);
-  const handleRightToggle = React11.useCallback((collapsed) => {
+  const handleRightToggle = React12.useCallback((collapsed) => {
     setRightCollapsed(collapsed);
   }, []);
-  const contextValue = React11.useMemo(
+  const contextValue = React12.useMemo(
     () => ({
       leftCollapsed,
       rightCollapsed,
@@ -2488,11 +2596,11 @@ function SidebarProvider({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children });
 }
-var ThemeContext = React11.createContext(void 0);
+var ThemeContext = React12.createContext(void 0);
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = React11.useState("system");
-  const [resolvedTheme, setResolvedTheme] = React11.useState("light");
-  React11.useEffect(() => {
+  const [theme, setThemeState] = React12.useState("system");
+  const [resolvedTheme, setResolvedTheme] = React12.useState("light");
+  React12.useEffect(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("theme");
       if (stored) {
@@ -2500,7 +2608,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (typeof window !== "undefined") {
       if (theme === "system") {
         const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -2515,7 +2623,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, [theme]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (typeof window !== "undefined") {
       const root = document.documentElement;
       if (resolvedTheme === "dark") {
@@ -2534,14 +2642,14 @@ function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
 }
 function useTheme() {
-  const context = React11.useContext(ThemeContext);
+  const context = React12.useContext(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 }
 var useThreads = () => {
-  const context = React11.useContext(ThreadContext);
+  const context = React12.useContext(ThreadContext);
   if (context === void 0) {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
@@ -2563,13 +2671,13 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React11__namespace.default.useState(
+  const [selectedOptions, setSelectedOptions] = React12__namespace.default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React11__namespace.default.useState([]);
-  const [previews, setPreviews] = React11__namespace.default.useState([]);
-  const fileInputRef = React11__namespace.default.useRef(null);
-  React11__namespace.default.useEffect(() => {
+  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 newPreviews = attachedFiles.map((file) => ({
       name: file.name,
       type: file.type,
@@ -2852,7 +2960,7 @@ function StarterPrompts({
   }
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "What can I help with today?" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full", children: prompts.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 w-full", children: prompts.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       Button2,
       {
         label: item.label,
@@ -2915,7 +3023,7 @@ function MessageBubble({ message }) {
   ) });
 }
 function LoadingIndicator({ status }) {
-  const [isExpanded, setIsExpanded] = React11.useState(false);
+  const [isExpanded, setIsExpanded] = React12.useState(false);
   const message = status?.message || "Processing...";
   const details = status?.details;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -2947,7 +3055,7 @@ function MessageList({
   if (messages.length === 0) {
     return null;
   }
-  const isTextStreaming = React11.useMemo(() => {
+  const isTextStreaming = React12.useMemo(() => {
     if (messages.length === 0 || !isLoading) return false;
     const lastMessage = messages[messages.length - 1];
     return lastMessage.content.some((event) => event.type === "text-delta");
@@ -2984,7 +3092,7 @@ function Thread({
   const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
   const options = localOptions ?? config?.options;
   const fileAttachments = config?.fileAttachments;
-  const allDefaultSelectedIds = React11.useMemo(() => {
+  const allDefaultSelectedIds = React12.useMemo(() => {
     const defaultSelectedIdsFromOptions = options?.flatMap((group) => group.defaultSelectedIds ?? []) ?? [];
     return [
       .../* @__PURE__ */ new Set([
@@ -2993,9 +3101,9 @@ function Thread({
       ])
     ];
   }, [options, defaultSelectedIds]);
-  const [input, setInput] = React11.useState("");
-  const messagesEndRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [input, setInput] = React12.useState("");
+  const messagesEndRef = React12.useRef(null);
+  React12.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSubmit = async (state, overrideInput) => {
@@ -3140,7 +3248,7 @@ var Dropdown = ({
 };
 var ThreadList = ({ className }) => {
   const { threads, activeThreadId, deleteThread } = useThreads();
-  const sortedThreads = React11__namespace.useMemo(() => {
+  const sortedThreads = React12__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;
@@ -3195,8 +3303,8 @@ function PopupChat({
   headerProps,
   defaultSelectedIds
 }) {
-  const [isOpen, setIsOpen] = React11.useState(defaultOpen);
-  const [view, setView] = React11.useState("chat");
+  const [isOpen, setIsOpen] = React12.useState(defaultOpen);
+  const [view, setView] = React12.useState("chat");
   const { createThread } = useThreads();
   const handleNewChat = async () => {
     try {
@@ -3301,7 +3409,7 @@ function Sidebar({ side, children, className }) {
         collapsed ? "w-0 border-r-0 border-l-0 min-w-0" : "",
         !collapsed && className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0 flex flex-col", children })
     }
   );
 }
@@ -3368,11 +3476,11 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React11__namespace.createContext(
+var PopoverContext = React12__namespace.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React11__namespace.useContext(PopoverContext);
+  const context = React12__namespace.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -3384,10 +3492,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React11__namespace.useState(defaultOpen);
-  const triggerRef = React11__namespace.useRef(null);
+  const [internalOpen, setInternalOpen] = React12__namespace.useState(defaultOpen);
+  const triggerRef = React12__namespace.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React11__namespace.useCallback(
+  const setOpen = React12__namespace.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -3396,7 +3504,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React11__namespace.useMemo(
+  const value = React12__namespace.useMemo(
     () => ({
       open,
       setOpen,
@@ -3406,15 +3514,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React11__namespace.forwardRef(
+var PopoverTrigger = React12__namespace.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React11__namespace.isValidElement(children)) {
-      return React11__namespace.cloneElement(children, {
+    if (asChild && React12__namespace.isValidElement(children)) {
+      return React12__namespace.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3446,7 +3554,7 @@ var PopoverTrigger = React11__namespace.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React11__namespace.forwardRef(
+var PopoverContent = React12__namespace.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3457,9 +3565,9 @@ var PopoverContent = React11__namespace.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React11__namespace.useState({ top: 0, left: 0 });
-    const contentRef = React11__namespace.useRef(null);
-    React11__namespace.useEffect(() => {
+    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;
@@ -3520,7 +3628,7 @@ var PopoverContent = React11__namespace.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React11__namespace.useEffect(() => {
+    React12__namespace.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3575,7 +3683,7 @@ var ThreadPopover = ({
   buttonSize = "icon",
   emptyState
 }) => {
-  const [isOpen, setIsOpen] = React11__namespace.useState(false);
+  const [isOpen, setIsOpen] = React12__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
     "h",
     (e) => {
@@ -3618,7 +3726,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11__namespace.useState(false);
+  const [isCreating, setIsCreating] = React12__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3700,7 +3808,7 @@ var CreateThreadListItem = ({
   className
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11__namespace.useState(false);
+  const [isCreating, setIsCreating] = React12__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3788,6 +3896,7 @@ exports.ThreadList = ThreadList;
 exports.ThreadPopover = ThreadPopover;
 exports.ThreadProvider = ThreadProvider;
 exports.UIRenderer = UIRenderer;
+exports.Upload = Upload;
 exports.WelcomeScreen = WelcomeScreen;
 exports.useAuth = useAuth;
 exports.useMelony = useMelony;