@melony/react 0.1.39 → 0.1.41

package/dist/index.d.cts

@@ -394,6 +394,7 @@ type ListItemProps = BaseComponentProps & UIContract["listItem"] & {
 type ImageProps = BaseComponentProps & UIContract["image"] & {
     fallbackText?: string;
     showFallbackIcon?: boolean;
+    groupId?: string;
 };
 type ChartProps = BaseComponentProps & UIContract["chart"] & {
     size?: Size;

package/dist/index.d.ts

@@ -394,6 +394,7 @@ type ListItemProps = BaseComponentProps & UIContract["listItem"] & {
 type ImageProps = BaseComponentProps & UIContract["image"] & {
     fallbackText?: string;
     showFallbackIcon?: boolean;
+    groupId?: string;
 };
 type ChartProps = BaseComponentProps & UIContract["chart"] & {
     size?: Size;

package/dist/index.js

@@ -10,7 +10,7 @@ import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
 import * as ICONS from '@tabler/icons-react';
-import { IconUser, IconLogout, IconX, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
+import { IconUser, IconLogout, IconX, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconChevronLeft, IconChevronRight, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
 import { Menu } from '@base-ui/react/menu';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { useQueryState, parseAsString } from 'nuqs';
@@ -784,7 +784,6 @@ var ThreadProvider = ({
       return null;
     },
     onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["threads"] });
       await setActiveThreadId(null);
     }
   });
@@ -1734,12 +1733,39 @@ var Image = ({
   src,
   alt,
   size = "sm",
+  groupId,
   className,
   style
 }) => {
   const [hasError, setHasError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [open, setOpen] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [gallery, setGallery] = useState([]);
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (open && triggerRef.current) {
+      let parent = triggerRef.current.parentElement;
+      while (parent && parent.parentElement && parent.parentElement.children.length === 1) {
+        parent = parent.parentElement;
+      }
+      const container = parent?.parentElement;
+      if (container) {
+        const foundImgs = Array.from(container.querySelectorAll("img")).map((img) => ({
+          src: img.getAttribute("src") || "",
+          alt: img.getAttribute("alt") || ""
+        })).filter((v, i, a) => a.findIndex((t) => t.src === v.src) === i);
+        setGallery(foundImgs);
+        const idx = foundImgs.findIndex((img) => img.src === src);
+        setCurrentIndex(idx >= 0 ? idx : 0);
+      }
+    }
+  }, [open, src]);
+  const navigate = (dir) => {
+    setCurrentIndex((prev) => (prev + dir + gallery.length) % gallery.length);
+  };
+  const currentImage = gallery[currentIndex] || { src, alt };
+  const hasMultiple = gallery.length > 1;
   const sizes = {
     sm: "h-11",
     md: "h-22",
@@ -1770,7 +1796,11 @@ var Image = ({
     /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("relative overflow-hidden rounded-md border cursor-pointer", className),
+        ref: triggerRef,
+        className: cn(
+          "relative overflow-hidden rounded-md border cursor-pointer",
+          className
+        ),
         style,
         children: [
           /* @__PURE__ */ jsx(
@@ -1794,36 +1824,47 @@ var Image = ({
     /* @__PURE__ */ jsx(
       DialogContent,
       {
-        className: "max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none shadow-none",
+        className: "max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none shadow-none outline-none",
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
-          /* @__PURE__ */ jsx(DialogClose, { className: "absolute -top-10 right-0 text-white hover:text-gray-300 transition-colors z-10 bg-black/50 rounded-full p-2", children: /* @__PURE__ */ jsx(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "h-5 w-5",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M6 18L18 6M6 6l12 12"
-                }
-              )
-            }
-          ) }),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center group/lightbox", children: [
+          /* @__PURE__ */ jsx(DialogClose, { className: "absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors z-50 bg-black/50 rounded-full p-2", children: /* @__PURE__ */ jsx(IconX, { size: 20 }) }),
+          hasMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  navigate(-1);
+                },
+                className: "absolute left-4 z-50 p-3 bg-black/40 hover:bg-black/60 text-white rounded-full transition-all opacity-0 group-hover/lightbox:opacity-100",
+                children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 28 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  navigate(1);
+                },
+                className: "absolute right-4 z-50 p-3 bg-black/40 hover:bg-black/60 text-white rounded-full transition-all opacity-0 group-hover/lightbox:opacity-100",
+                children: /* @__PURE__ */ jsx(IconChevronRight, { size: 28 })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
             "img",
             {
-              src,
-              alt: alt || "Enlarged image",
-              className: "max-w-full max-h-[90vh] object-contain rounded-lg"
+              src: currentImage.src,
+              alt: currentImage.alt || alt || "Enlarged image",
+              className: "max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
             }
-          )
+          ),
+          hasMultiple && /* @__PURE__ */ jsxs("div", { className: "absolute -bottom-10 left-1/2 -translate-x-1/2 text-white bg-black/50 px-3 py-1 rounded-full text-sm font-medium", children: [
+            currentIndex + 1,
+            " / ",
+            gallery.length
+          ] })
         ] })
       }
     )
@@ -2837,7 +2878,6 @@ function MessageList({
     const lastMessage = messages[messages.length - 1];
     return lastMessage.content.some((event) => event.type === "text-delta");
   }, [messages, isLoading]);
-  console.log("MESSAGES", messages);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
     messages.map((message, index) => /* @__PURE__ */ jsx(MessageBubble, { message }, index)),
     isLoading && !isTextStreaming && /* @__PURE__ */ jsx(LoadingIndicator, { status: loadingStatus }),
@@ -2877,8 +2917,7 @@ function Thread({
   const handleSubmit = async (state, overrideInput) => {
     const text = (overrideInput ?? input).trim();
     const hasFiles = state?.files && Array.isArray(state.files) && state.files.length > 0;
-    const hasOptions = state && Object.keys(state).filter((k) => k !== "threadId").length > 0;
-    if (!text && !hasFiles && !hasOptions || isLoading) return;
+    if (!text && !hasFiles || isLoading) return;
     if (!overrideInput) setInput("");
     await sendEvent({
       type: "text",
@@ -3611,7 +3650,7 @@ var CreateThreadNavItem = ({
           url: "?"
         }
       },
-      className: cn(className),
+      className: cn(className, "border roudned-lg"),
       children: [
         /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
         "New chat"