@melony/react 0.1.38 → 0.1.40

package/dist/index.d.cts

@@ -1,10 +1,26 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode, CSSProperties } from 'react';
 import { ClientState, MelonyClient } from 'melony/client';
-import { Role, Event, Config, UINode, UIContract } from 'melony';
+import { Message, Event, Config, UINode, UIContract } from 'melony';
 import { QueryClient } from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+interface MelonyContextValue extends ClientState {
+    messages: Message[];
+    sendEvent: (event: Event) => Promise<void>;
+    reset: (events?: Event[]) => void;
+    client: MelonyClient;
+    config?: Config;
+}
+declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
+interface MelonyProviderProps {
+    children: ReactNode;
+    client: MelonyClient;
+    initialEvents?: Event[];
+    queryClient?: QueryClient;
+}
+declare const MelonyProvider: React__default.FC<MelonyProviderProps>;
+
 interface User {
     id?: string;
     uid: string;
@@ -16,12 +32,6 @@ interface User {
     lastSignIn?: string | null;
     emailVerified?: boolean;
 }
-interface Message {
-    role: Role;
-    content: Event[];
-    runId?: string;
-    threadId?: string;
-}
 interface ThreadData {
     id: string;
     title?: string;
@@ -57,22 +67,6 @@ interface ThreadService {
     getEvents: (threadId: string) => Promise<Event[]>;
 }
 
-interface MelonyContextValue extends ClientState {
-    messages: Message[];
-    sendEvent: (event: Event) => Promise<void>;
-    reset: (events?: Event[]) => void;
-    client: MelonyClient;
-    config?: Config;
-}
-declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
-interface MelonyProviderProps {
-    children: ReactNode;
-    client: MelonyClient;
-    initialEvents?: Event[];
-    queryClient?: QueryClient;
-}
-declare const MelonyProvider: React__default.FC<MelonyProviderProps>;
-
 interface WelcomeScreenProps {
     title?: string;
     description?: string;
@@ -400,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;
@@ -484,6 +479,4 @@ declare const Text: React__default.FC<TextProps>;
 
 declare const Badge: React__default.FC<BadgeProps>;
 
-declare function groupEventsToMessages(events: Event[]): Message[];
-
-export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadNavItem, type CreateThreadNavItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, Image, Input, Label, List, ListItem, MelonyContext, type MelonyContextValue, MelonyProvider, type MelonyProviderProps, type Message, PopupChat, type PopupChatProps, RadioGroup, Row, type ScreenSize, Select, Sidebar, SidebarContext, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, groupEventsToMessages, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadNavItem, type CreateThreadNavItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, 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, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };

package/dist/index.d.ts

@@ -1,10 +1,26 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode, CSSProperties } from 'react';
 import { ClientState, MelonyClient } from 'melony/client';
-import { Role, Event, Config, UINode, UIContract } from 'melony';
+import { Message, Event, Config, UINode, UIContract } from 'melony';
 import { QueryClient } from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+interface MelonyContextValue extends ClientState {
+    messages: Message[];
+    sendEvent: (event: Event) => Promise<void>;
+    reset: (events?: Event[]) => void;
+    client: MelonyClient;
+    config?: Config;
+}
+declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
+interface MelonyProviderProps {
+    children: ReactNode;
+    client: MelonyClient;
+    initialEvents?: Event[];
+    queryClient?: QueryClient;
+}
+declare const MelonyProvider: React__default.FC<MelonyProviderProps>;
+
 interface User {
     id?: string;
     uid: string;
@@ -16,12 +32,6 @@ interface User {
     lastSignIn?: string | null;
     emailVerified?: boolean;
 }
-interface Message {
-    role: Role;
-    content: Event[];
-    runId?: string;
-    threadId?: string;
-}
 interface ThreadData {
     id: string;
     title?: string;
@@ -57,22 +67,6 @@ interface ThreadService {
     getEvents: (threadId: string) => Promise<Event[]>;
 }
 
-interface MelonyContextValue extends ClientState {
-    messages: Message[];
-    sendEvent: (event: Event) => Promise<void>;
-    reset: (events?: Event[]) => void;
-    client: MelonyClient;
-    config?: Config;
-}
-declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
-interface MelonyProviderProps {
-    children: ReactNode;
-    client: MelonyClient;
-    initialEvents?: Event[];
-    queryClient?: QueryClient;
-}
-declare const MelonyProvider: React__default.FC<MelonyProviderProps>;
-
 interface WelcomeScreenProps {
     title?: string;
     description?: string;
@@ -400,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;
@@ -484,6 +479,4 @@ declare const Text: React__default.FC<TextProps>;
 
 declare const Badge: React__default.FC<BadgeProps>;
 
-declare function groupEventsToMessages(events: Event[]): Message[];
-
-export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadNavItem, type CreateThreadNavItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, Image, Input, Label, List, ListItem, MelonyContext, type MelonyContextValue, MelonyProvider, type MelonyProviderProps, type Message, PopupChat, type PopupChatProps, RadioGroup, Row, type ScreenSize, Select, Sidebar, SidebarContext, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, groupEventsToMessages, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, type AccountButtonProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatHeader, type ChatHeaderProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, CreateThreadNavItem, type CreateThreadNavItemProps, Divider, Dropdown, type DropdownProps, Form, FullChat, type FullChatProps, Heading, 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, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };

package/dist/index.js

@@ -1,5 +1,6 @@
 import * as React11 from 'react';
 import React11__default, { createContext, useState, useContext, useCallback, useEffect, useMemo, useRef } from 'react';
+import { convertEventsToMessages } from 'melony';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -9,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';
@@ -21,31 +22,6 @@ import { createPortal } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 // 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 = createContext(
   void 0
 );
@@ -143,7 +119,7 @@ var MelonyContextProviderInner = ({
   const value = useMemo(
     () => ({
       ...state,
-      messages: groupEventsToMessages(state.events),
+      messages: convertEventsToMessages(state.events),
       sendEvent,
       reset,
       client,
@@ -1758,12 +1734,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",
@@ -1794,7 +1797,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(
@@ -1818,36 +1825,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
+          ] })
         ] })
       }
     )
@@ -2812,25 +2830,16 @@ function MessageContent({ events }) {
 }
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isUser ? "items-end" : "items-start"), children: /* @__PURE__ */ 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__ */ 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__ */ jsx(MessageContent, { events: message.content })
-        }
-      )
+      children: /* @__PURE__ */ jsx(MessageContent, { events: message.content })
     }
-  );
+  ) });
 }
 function LoadingIndicator({ status }) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -2870,7 +2879,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 }),
@@ -2910,20 +2918,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) {
@@ -3646,7 +3651,7 @@ var CreateThreadNavItem = ({
           url: "?"
         }
       },
-      className: cn(className),
+      className: cn(className, "border roudned-lg"),
       children: [
         /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
         "New chat"
@@ -3655,6 +3660,6 @@ var CreateThreadNavItem = ({
   );
 };
 
-export { AccountButton, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, Composer, CreateThreadButton, CreateThreadNavItem, Divider, Dropdown, Form, FullChat, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, WelcomeScreen, groupEventsToMessages, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, Composer, CreateThreadButton, CreateThreadNavItem, Divider, Dropdown, Form, FullChat, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, WelcomeScreen, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map