@melony/react 0.1.52 → 0.1.53

package/dist/index.cjs

@@ -2137,6 +2137,165 @@ var Form = ({
     }
   );
 };
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.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__ */ jsxRuntime.jsx(menu.Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.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__ */ jsxRuntime.jsx(
+    menu.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__ */ jsxRuntime.jsxs(
+    menu.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ICONS.IconCheck,
+              {}
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.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__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            ...props,
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onClick?.(e);
+            },
+            children: children || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconDotsVertical, { className: "size-3.5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: cn("w-32"), children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuItem,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          if (item.onClickAction) {
+            sendEvent(item.onClickAction);
+          }
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: item.icon ? "ml-2" : "", children: item.label })
+        ]
+      },
+      `${item.label}-${i}`
+    )) })
+  ] });
+};
 function UIRenderer({ node }) {
   const { type, props, children } = node;
   const typeMap = {
@@ -2166,7 +2325,8 @@ function UIRenderer({ node }) {
     form: Form,
     chart: Chart,
     label: Label2,
-    upload: Upload
+    upload: Upload,
+    dropdown: Dropdown
   };
   const Component = typeMap[type];
   if (!Component) {
@@ -2349,123 +2509,6 @@ var useAuth = () => {
   }
   return context;
 };
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        menu.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__ */ jsxRuntime.jsx(menu.Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.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__ */ jsxRuntime.jsx(
-    menu.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__ */ jsxRuntime.jsxs(
-    menu.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              ICONS.IconCheck,
-              {}
-            ) })
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.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",
@@ -3581,40 +3624,8 @@ function ChatHeader({
     }
   );
 }
-var Dropdown = ({
-  className,
-  trigger,
-  triggerClassName,
-  items
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenuTrigger,
-      {
-        className: triggerClassName,
-        render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon-xs",
-            ...props,
-            onClick: (e) => {
-              e.stopPropagation();
-              props.onClick?.(e);
-            },
-            children: trigger || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconDotsVertical, { className: "size-3.5" })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: cn("w-32", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: item.onClick, children: [
-      item.icon,
-      /* @__PURE__ */ jsxRuntime.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__namespace.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
@@ -3622,13 +3633,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__ */ jsxRuntime.jsx(List, { padding, gap, flex: "1", overflow: "scroll", children: sortedThreads.map((thread) => {
     thread.id === activeThreadId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3652,8 +3656,14 @@ var ThreadList = ({ padding, background, gap, radius = "md" }) => {
               items: [
                 {
                   label: "Delete",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconTrash, { className: "size-4" }),
-                  onClick: () => handleDelete(thread.id)
+                  icon: "trash",
+                  onClickAction: {
+                    role: "system",
+                    type: "delete-thread",
+                    data: {
+                      threadId: thread.id
+                    }
+                  }
                 }
               ]
             }