@melony/react 0.1.39 → 0.1.40

package/dist/index.cjs

@@ -1755,12 +1755,39 @@ var Image = ({
   src,
   alt,
   size = "sm",
+  groupId,
   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(() => {
+    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",
@@ -1791,7 +1818,11 @@ var Image = ({
     /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -1815,36 +1846,47 @@ var Image = ({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M6 18L18 6M6 6l12 12"
-                }
-              )
-            }
-          ) }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center group/lightbox", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ICONS.IconX, { size: 20 }) }),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ICONS.IconChevronLeft, { size: 28 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ICONS.IconChevronRight, { size: 28 })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
+          ] })
         ] })
       }
     )
@@ -2858,7 +2900,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__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
     messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { message }, index)),
     isLoading && !isTextStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { status: loadingStatus }),
@@ -2898,8 +2939,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",
@@ -3632,7 +3672,7 @@ var CreateThreadNavItem = ({
           url: "?"
         }
       },
-      className: cn(className),
+      className: cn(className, "border roudned-lg"),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" }),
         "New chat"