@melony/react 0.1.52 → 0.1.53

package/dist/index.d.cts

@@ -384,15 +384,14 @@ declare const Image: React__default.FC<UIContract["image"]>;
 
 declare const Label: React__default.FC<UIContract["label"]>;
 
+interface DropdownItem {
+    label: string;
+    icon?: string;
+    onClickAction?: Event;
+}
 interface DropdownProps {
-    className?: string;
-    trigger?: React$1.ReactNode;
-    triggerClassName?: string;
-    items: {
-        label: string;
-        icon: React$1.ReactNode;
-        onClick: () => void;
-    }[];
+    items?: DropdownItem[];
+    children?: React$1.ReactNode;
 }
 declare const Dropdown: React$1.FC<DropdownProps>;
 
@@ -441,4 +440,4 @@ declare const Hidden: React__default.FC<UIContract["hidden"]>;
 
 declare const ColorPicker: React__default.FC<UIContract["colorPicker"]>;
 
-export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, ColorPicker, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownProps, Float, Form, FullChat, type FullChatProps, Heading, Hidden, 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, Surface, type SurfaceProps, 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 UseSurfaceOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useSurface, useTheme, useThreads };
+export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, ColorPicker, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownItem, type DropdownProps, Float, Form, FullChat, type FullChatProps, Heading, Hidden, 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, Surface, type SurfaceProps, 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 UseSurfaceOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useSurface, useTheme, useThreads };

package/dist/index.d.ts

@@ -384,15 +384,14 @@ declare const Image: React__default.FC<UIContract["image"]>;
 
 declare const Label: React__default.FC<UIContract["label"]>;
 
+interface DropdownItem {
+    label: string;
+    icon?: string;
+    onClickAction?: Event;
+}
 interface DropdownProps {
-    className?: string;
-    trigger?: React$1.ReactNode;
-    triggerClassName?: string;
-    items: {
-        label: string;
-        icon: React$1.ReactNode;
-        onClick: () => void;
-    }[];
+    items?: DropdownItem[];
+    children?: React$1.ReactNode;
 }
 declare const Dropdown: React$1.FC<DropdownProps>;
 
@@ -441,4 +440,4 @@ declare const Hidden: React__default.FC<UIContract["hidden"]>;
 
 declare const ColorPicker: React__default.FC<UIContract["colorPicker"]>;
 
-export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, ColorPicker, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownProps, Float, Form, FullChat, type FullChatProps, Heading, Hidden, 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, Surface, type SurfaceProps, 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 UseSurfaceOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useSurface, useTheme, useThreads };
+export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, ColorPicker, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadListItem, type CreateThreadListItemProps, Divider, Dropdown, type DropdownItem, type DropdownProps, Float, Form, FullChat, type FullChatProps, Heading, Hidden, 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, Surface, type SurfaceProps, 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 UseSurfaceOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useSurface, useTheme, useThreads };

package/dist/index.js

@@ -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, 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 { IconX, IconChevronLeft, IconChevronRight, IconLoader2, IconCheck, IconUpload, IconDotsVertical, IconUser, IconLogout, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconArrowUp, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconSelector, IconChevronUp } from '@tabler/icons-react';
 export * from '@tabler/icons-react';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { mergeProps } from '@base-ui/react/merge-props';
@@ -2117,6 +2117,165 @@ var Form = ({
     }
   );
 };
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        Menu.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn("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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none",
+            "data-slot": "dropdown-menu-checkbox-item-indicator",
+            children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(
+              IconCheck,
+              {}
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+var Dropdown = ({
+  items = [],
+  children
+}) => {
+  const { sendEvent } = useMelony();
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            ...props,
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onClick?.(e);
+            },
+            children: children || /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn("w-32"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          if (item.onClickAction) {
+            sendEvent(item.onClickAction);
+          }
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
+          /* @__PURE__ */ jsx("span", { className: item.icon ? "ml-2" : "", children: item.label })
+        ]
+      },
+      `${item.label}-${i}`
+    )) })
+  ] });
+};
 function UIRenderer({ node }) {
   const { type, props, children } = node;
   const typeMap = {
@@ -2146,7 +2305,8 @@ function UIRenderer({ node }) {
     form: Form,
     chart: Chart,
     label: Label2,
-    upload: Upload
+    upload: Upload,
+    dropdown: Dropdown
   };
   const Component = typeMap[type];
   if (!Component) {
@@ -2329,123 +2489,6 @@ var useAuth = () => {
   }
   return context;
 };
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-    Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsx(
-        Menu.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          className: cn("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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function DropdownMenuGroup({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Menu.GroupLabel,
-    {
-      "data-slot": "dropdown-menu-label",
-      "data-inset": inset,
-      className: cn("text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8", className),
-      ...props
-    }
-  );
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Menu.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    Menu.CheckboxItem,
-    {
-      "data-slot": "dropdown-menu-checkbox-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      checked,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none",
-            "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(
-              IconCheck,
-              {}
-            ) })
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Menu.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
-      ...props
-    }
-  );
-}
 var AccountButton = ({
   className,
   variant = "outline",
@@ -3561,40 +3604,8 @@ function ChatHeader({
     }
   );
 }
-var Dropdown = ({
-  className,
-  trigger,
-  triggerClassName,
-  items
-}) => {
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(
-      DropdownMenuTrigger,
-      {
-        className: triggerClassName,
-        render: (props) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon-xs",
-            ...props,
-            onClick: (e) => {
-              e.stopPropagation();
-              props.onClick?.(e);
-            },
-            children: trigger || /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn("w-32", className), children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: item.onClick, children: [
-      item.icon,
-      /* @__PURE__ */ jsx("span", { children: item.label })
-    ] }, item.label)) })
-  ] });
-};
 var ThreadList = ({ padding, background, gap, radius = "md" }) => {
-  const { threads, activeThreadId, deleteThread } = useThreads();
+  const { threads, activeThreadId } = useThreads();
   const sortedThreads = React3.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
@@ -3602,13 +3613,6 @@ var ThreadList = ({ padding, background, gap, radius = "md" }) => {
       return dateB - dateA;
     });
   }, [threads]);
-  const handleDelete = async (threadId) => {
-    try {
-      await deleteThread(threadId);
-    } catch (error) {
-      console.error("Failed to delete thread:", error);
-    }
-  };
   return /* @__PURE__ */ jsx(List, { padding, gap, flex: "1", overflow: "scroll", children: sortedThreads.map((thread) => {
     thread.id === activeThreadId;
     return /* @__PURE__ */ jsxs(
@@ -3632,8 +3636,14 @@ var ThreadList = ({ padding, background, gap, radius = "md" }) => {
               items: [
                 {
                   label: "Delete",
-                  icon: /* @__PURE__ */ jsx(IconTrash, { className: "size-4" }),
-                  onClick: () => handleDelete(thread.id)
+                  icon: "trash",
+                  onClickAction: {
+                    role: "system",
+                    type: "delete-thread",
+                    data: {
+                      threadId: thread.id
+                    }
+                  }
                 }
               ]
             }