@melony/react 0.1.38 → 0.1.40

package/dist/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React11 = require('react');
+var melony = require('melony');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
@@ -42,31 +43,6 @@ var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // src/providers/melony-provider.tsx
-
-// src/lib/group-events-to-messages.ts
-function groupEventsToMessages(events) {
-  if (events.length === 0) return [];
-  const messages = [];
-  let currentMessage = null;
-  for (const event of events) {
-    const role = event.role || "assistant";
-    const runId = event.runId;
-    if (!currentMessage || currentMessage.role !== role || runId && currentMessage.runId && runId !== currentMessage.runId) {
-      currentMessage = {
-        role,
-        content: [event],
-        runId
-      };
-      messages.push(currentMessage);
-    } else {
-      currentMessage.content.push(event);
-      if (!currentMessage.runId && runId) {
-        currentMessage.runId = runId;
-      }
-    }
-  }
-  return messages;
-}
 var MelonyContext = React11.createContext(
   void 0
 );
@@ -164,7 +140,7 @@ var MelonyContextProviderInner = ({
   const value = React11.useMemo(
     () => ({
       ...state,
-      messages: groupEventsToMessages(state.events),
+      messages: melony.convertEventsToMessages(state.events),
       sendEvent,
       reset,
       client,
@@ -1779,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",
@@ -1815,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(
@@ -1839,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
+          ] })
         ] })
       }
     )
@@ -2833,25 +2851,16 @@ function MessageContent({ events }) {
 }
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", isUser ? "items-end" : "items-start"), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "flex flex-col",
-        isUser ? "items-end" : "items-start"
+        "flex flex-col items-start max-w-[85%] rounded-2xl px-4 py-2 space-y-4 whitespace-pre-wrap",
+        isUser ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-start max-w-[85%] rounded-2xl px-4 py-2 space-y-4 whitespace-pre-wrap",
-            isUser ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { events: message.content })
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { events: message.content })
     }
-  );
+  ) });
 }
 function LoadingIndicator({ status }) {
   const [isExpanded, setIsExpanded] = React11.useState(false);
@@ -2891,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 }),
@@ -2931,20 +2939,17 @@ 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",
-        role: "user",
-        data: { content: text || "" },
-        state: {
-          ...state,
-          threadId: activeThreadId ?? void 0
-        }
+    await sendEvent({
+      type: "text",
+      role: "user",
+      data: { content: text || "" },
+      state: {
+        ...state,
+        threadId: activeThreadId ?? void 0
       }
-    );
+    });
   };
   const handleStarterPromptClick = (prompt) => {
     if (onStarterPromptClick) {
@@ -3667,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"
@@ -3722,7 +3727,6 @@ exports.ThreadPopover = ThreadPopover;
 exports.ThreadProvider = ThreadProvider;
 exports.UIRenderer = UIRenderer;
 exports.WelcomeScreen = WelcomeScreen;
-exports.groupEventsToMessages = groupEventsToMessages;
 exports.useAuth = useAuth;
 exports.useMelony = useMelony;
 exports.useScreenSize = useScreenSize;