@melony/react 0.1.45 → 0.1.46

package/dist/index.d.cts

@@ -420,6 +420,7 @@ type LabelProps = BaseComponentProps & UIContract["label"] & {
     size?: FontSize;
     weight?: FontWeight;
 };
+type UploadProps = BaseComponentProps & UIContract["upload"];
 type TextareaProps = BaseComponentProps & UIContract["textarea"] & {
     value?: string;
     disabled?: boolean;
@@ -452,6 +453,8 @@ declare const RadioGroup: React__default.FC<RadioGroupProps>;
 
 declare const Form: React__default.FC<FormProps>;
 
+declare const Upload: React__default.FC<UploadProps>;
+
 declare const Heading: React__default.FC<HeadingProps>;
 
 declare const Image: React__default.FC<ImageProps>;
@@ -480,4 +483,4 @@ declare const Text: React__default.FC<TextProps>;
 
 declare const Badge: React__default.FC<BadgeProps>;
 
-export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, Image, Input, Label, List, ListItem, MelonyContext, type MelonyContextValue, MelonyProvider, type MelonyProviderProps, PopupChat, type PopupChatProps, RadioGroup, Row, type ScreenSize, Select, Sidebar, SidebarContext, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, Image, Input, Label, List, ListItem, MelonyContext, type MelonyContextValue, MelonyProvider, type MelonyProviderProps, PopupChat, type PopupChatProps, RadioGroup, Row, type ScreenSize, Select, Sidebar, SidebarContext, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, Upload, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };

package/dist/index.d.ts

@@ -420,6 +420,7 @@ type LabelProps = BaseComponentProps & UIContract["label"] & {
     size?: FontSize;
     weight?: FontWeight;
 };
+type UploadProps = BaseComponentProps & UIContract["upload"];
 type TextareaProps = BaseComponentProps & UIContract["textarea"] & {
     value?: string;
     disabled?: boolean;
@@ -452,6 +453,8 @@ declare const RadioGroup: React__default.FC<RadioGroupProps>;
 
 declare const Form: React__default.FC<FormProps>;
 
+declare const Upload: React__default.FC<UploadProps>;
+
 declare const Heading: React__default.FC<HeadingProps>;
 
 declare const Image: React__default.FC<ImageProps>;
@@ -480,4 +483,4 @@ declare const Text: React__default.FC<TextProps>;
 
 declare const Badge: React__default.FC<BadgeProps>;
 
-export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, Image, Input, Label, List, ListItem, MelonyContext, type MelonyContextValue, MelonyProvider, type MelonyProviderProps, PopupChat, type PopupChatProps, RadioGroup, Row, type ScreenSize, Select, Sidebar, SidebarContext, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, Image, Input, Label, List, ListItem, MelonyContext, type MelonyContextValue, MelonyProvider, type MelonyProviderProps, PopupChat, type PopupChatProps, RadioGroup, Row, type ScreenSize, Select, Sidebar, SidebarContext, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, Upload, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };

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 React12 from 'react';
+import React12__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,7 +8,7 @@ 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';
@@ -1423,6 +1423,9 @@ var Checkbox = ({
     )
   ] });
 };
+var Hidden = ({ name, value }) => {
+  return /* @__PURE__ */ jsx("input", { type: "hidden", name, value });
+};
 var RadioGroup = ({
   name,
   options,
@@ -1582,6 +1585,109 @@ var Button2 = ({
     }
   );
 };
+var Upload = ({
+  label = "Upload",
+  multiple = false,
+  accept,
+  onUploadAction,
+  className,
+  style
+}) => {
+  const { sendEvent, events } = useMelony();
+  const fileInputRef = useRef(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [status, setStatus] = 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__ */ 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
+      }
+    ),
+    events.filter((event) => event.type === "files-uploaded" && !!event.ui).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,6 +1749,7 @@ function UIRenderer({ node }) {
     heading: Heading,
     badge: Badge2,
     input: Input2,
+    hidden: Hidden,
     textarea: Textarea2,
     select: Select2,
     checkbox: Checkbox,
@@ -1656,7 +1763,8 @@ function UIRenderer({ node }) {
     listItem: ListItem,
     form: Form,
     chart: Chart,
-    label: Label2
+    label: Label2,
+    upload: Upload
   };
   const Component = typeMap[type];
   if (!Component) {
@@ -1963,10 +2071,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] = React12.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React12.useState(false);
+  const [error, setError] = React12.useState(null);
+  const initials = React12.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -2542,13 +2650,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] = React12__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] = React12__default.useState([]);
+  const [previews, setPreviews] = React12__default.useState([]);
+  const fileInputRef = React12__default.useRef(null);
+  React12__default.useEffect(() => {
     const newPreviews = attachedFiles.map((file) => ({
       name: file.name,
       type: file.type,
@@ -2831,7 +2939,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 +3227,7 @@ var Dropdown = ({
 };
 var ThreadList = ({ className }) => {
   const { threads, activeThreadId, deleteThread } = useThreads();
-  const sortedThreads = React11.useMemo(() => {
+  const sortedThreads = React12.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 +3388,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,11 +3455,11 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React11.createContext(
+var PopoverContext = React12.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React11.useContext(PopoverContext);
+  const context = React12.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -3363,10 +3471,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React11.useState(defaultOpen);
-  const triggerRef = React11.useRef(null);
+  const [internalOpen, setInternalOpen] = React12.useState(defaultOpen);
+  const triggerRef = React12.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React11.useCallback(
+  const setOpen = React12.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -3375,7 +3483,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React11.useMemo(
+  const value = React12.useMemo(
     () => ({
       open,
       setOpen,
@@ -3385,15 +3493,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React11.forwardRef(
+var PopoverTrigger = React12.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, {
+    if (asChild && React12.isValidElement(children)) {
+      return React12.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3425,7 +3533,7 @@ var PopoverTrigger = React11.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React11.forwardRef(
+var PopoverContent = React12.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3436,9 +3544,9 @@ var PopoverContent = React11.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React11.useState({ top: 0, left: 0 });
-    const contentRef = React11.useRef(null);
-    React11.useEffect(() => {
+    const [position, setPosition] = React12.useState({ top: 0, left: 0 });
+    const contentRef = React12.useRef(null);
+    React12.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -3499,7 +3607,7 @@ var PopoverContent = React11.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3554,7 +3662,7 @@ var ThreadPopover = ({
   buttonSize = "icon",
   emptyState
 }) => {
-  const [isOpen, setIsOpen] = React11.useState(false);
+  const [isOpen, setIsOpen] = React12.useState(false);
   useHotkeys(
     "h",
     (e) => {
@@ -3597,7 +3705,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11.useState(false);
+  const [isCreating, setIsCreating] = React12.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3679,7 +3787,7 @@ var CreateThreadListItem = ({
   className
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11.useState(false);
+  const [isCreating, setIsCreating] = React12.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3722,6 +3830,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