@melony/react 0.1.31 → 0.1.39

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;
@@ -111,7 +105,7 @@ interface ThreadContextValue {
     isLoading: boolean;
     error: Error | null;
     selectThread: (threadId: string) => void;
-    createThread: () => Promise<string>;
+    createThread: () => Promise<string | null>;
     deleteThread: (threadId: string) => Promise<void>;
     refreshThreads: () => Promise<void>;
     threadEvents: Event[];
@@ -484,6 +478,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;
@@ -111,7 +105,7 @@ interface ThreadContextValue {
     isLoading: boolean;
     error: Error | null;
     selectThread: (threadId: string) => void;
-    createThread: () => Promise<string>;
+    createThread: () => Promise<string | null>;
     deleteThread: (threadId: string) => Promise<void>;
     refreshThreads: () => Promise<void>;
     threadEvents: Event[];
@@ -484,6 +478,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, useMemo, useEffect, useRef } 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';
@@ -12,7 +13,6 @@ 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 { Menu } from '@base-ui/react/menu';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
-import { generateId } from 'melony/client';
 import { useQueryState, parseAsString } from 'nuqs';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
@@ -22,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
 );
@@ -65,6 +40,7 @@ var MelonyContextProviderInner = ({
   setContextValue
 }) => {
   const [state, setState] = useState(client.getState());
+  const queryClient = useQueryClient();
   const { data: config } = useQuery({
     queryKey: ["melony-config", client.url],
     queryFn: () => client.getConfig(),
@@ -116,11 +92,18 @@ var MelonyContextProviderInner = ({
           reset([]);
           return true;
         }
+        case "client:invalidate-query": {
+          const { queryKey } = event.data || {};
+          if (queryKey) {
+            await queryClient.invalidateQueries({ queryKey });
+          }
+          return true;
+        }
         default:
           return false;
       }
     },
-    [client, reset]
+    [client, reset, queryClient]
   );
   const sendEvent = useCallback(
     async (event) => {
@@ -136,7 +119,7 @@ var MelonyContextProviderInner = ({
   const value = useMemo(
     () => ({
       ...state,
-      messages: groupEventsToMessages(state.events),
+      messages: convertEventsToMessages(state.events),
       sendEvent,
       reset,
       client,
@@ -773,12 +756,15 @@ var ThreadProvider = ({
   initialThreadId: providedInitialThreadId
 }) => {
   const queryClient = useQueryClient();
-  const defaultInitialThreadId = useMemo(() => generateId(), []);
-  const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
   const [activeThreadId, setActiveThreadId] = useQueryState(
     "threadId",
-    parseAsString.withDefault(initialThreadId)
+    parseAsString
   );
+  useEffect(() => {
+    if (!activeThreadId && providedInitialThreadId) {
+      setActiveThreadId(providedInitialThreadId);
+    }
+  }, [activeThreadId, providedInitialThreadId, setActiveThreadId]);
   const {
     data: threads = [],
     isLoading,
@@ -795,12 +781,11 @@ var ThreadProvider = ({
   });
   const createMutation = useMutation({
     mutationFn: async () => {
-      const newId = service.createThread ? await service.createThread() : generateId();
-      return newId;
+      return null;
     },
-    onSuccess: async (newId) => {
+    onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["threads"] });
-      await setActiveThreadId(newId);
+      await setActiveThreadId(null);
     }
   });
   const deleteMutation = useMutation({
@@ -2770,49 +2755,49 @@ function UIRenderer({ node }) {
   return /* @__PURE__ */ jsx(Component, { ...componentProps, children: renderedChildren });
 }
 function MessageContent({ events }) {
+  const firstSlotIndexes = /* @__PURE__ */ new Map();
   const latestSlotIndexes = /* @__PURE__ */ new Map();
   events.forEach((event, index) => {
     if (event.slot) {
+      if (!firstSlotIndexes.has(event.slot)) {
+        firstSlotIndexes.set(event.slot, index);
+      }
       latestSlotIndexes.set(event.slot, index);
     }
   });
   return /* @__PURE__ */ jsx(Fragment, { children: events.map((event, index) => {
-    if (event.slot && latestSlotIndexes.get(event.slot) !== index) {
-      return null;
+    let displayEvent = event;
+    if (event.slot) {
+      if (firstSlotIndexes.get(event.slot) !== index) {
+        return null;
+      }
+      const latestIndex = latestSlotIndexes.get(event.slot);
+      displayEvent = events[latestIndex];
     }
-    if (event.type === "text-delta") {
-      return /* @__PURE__ */ jsx("span", { children: event.data?.delta }, index);
+    if (displayEvent.type === "text-delta") {
+      return /* @__PURE__ */ jsx("span", { children: displayEvent.data?.delta }, index);
     }
-    if (event.type === "text") {
-      return /* @__PURE__ */ jsx("p", { children: event.data?.content || event.data?.text }, index);
+    if (displayEvent.type === "text") {
+      return /* @__PURE__ */ jsx("p", { children: displayEvent.data?.content || displayEvent.data?.text }, index);
     }
-    if (event.ui) {
-      return /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, index);
+    if (displayEvent.ui) {
+      return /* @__PURE__ */ jsx(UIRenderer, { node: displayEvent.ui }, index);
     }
     return null;
   }) });
 }
 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);
@@ -2895,17 +2880,15 @@ function Thread({
     const hasOptions = state && Object.keys(state).filter((k) => k !== "threadId").length > 0;
     if (!text && !hasFiles && !hasOptions || 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) {
@@ -3033,7 +3016,7 @@ var Dropdown = ({
   ] });
 };
 var ThreadList = ({ className }) => {
-  const { threads, activeThreadId, selectThread, deleteThread, isLoading } = useThreads();
+  const { threads, activeThreadId, deleteThread } = useThreads();
   const sortedThreads = React11.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
@@ -3509,7 +3492,6 @@ var CreateThreadButton = ({
   className,
   variant = "ghost",
   size = "default",
-  children,
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
@@ -3519,7 +3501,9 @@ var CreateThreadButton = ({
     try {
       setIsCreating(true);
       const threadId = await createThread();
-      onThreadCreated?.(threadId);
+      if (threadId) {
+        onThreadCreated?.(threadId);
+      }
     } catch (error) {
       console.error("Failed to create thread:", error);
     } finally {
@@ -3624,7 +3608,7 @@ var CreateThreadNavItem = ({
       onClickAction: {
         type: "client:navigate",
         data: {
-          url: `?threadId=${generateId()}`
+          url: "?"
         }
       },
       className: cn(className),
@@ -3636,6 +3620,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