@melony/react 0.1.29 → 0.1.38

package/dist/index.d.cts

@@ -59,10 +59,7 @@ interface ThreadService {
 
 interface MelonyContextValue extends ClientState {
     messages: Message[];
-    sendEvent: (event: Event, options?: {
-        runId?: string;
-        state?: Record<string, any>;
-    }) => Promise<void>;
+    sendEvent: (event: Event) => Promise<void>;
     reset: (events?: Event[]) => void;
     client: MelonyClient;
     config?: Config;
@@ -114,7 +111,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[];

package/dist/index.d.ts

@@ -59,10 +59,7 @@ interface ThreadService {
 
 interface MelonyContextValue extends ClientState {
     messages: Message[];
-    sendEvent: (event: Event, options?: {
-        runId?: string;
-        state?: Record<string, any>;
-    }) => Promise<void>;
+    sendEvent: (event: Event) => Promise<void>;
     reset: (events?: Event[]) => void;
     client: MelonyClient;
     config?: Config;
@@ -114,7 +111,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[];

package/dist/index.js

@@ -1,5 +1,5 @@
 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 { 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 +12,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';
@@ -65,6 +64,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,17 +116,24 @@ 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, options) => {
+    async (event) => {
       const handled = await dispatchClientAction(event);
       if (handled) return;
-      const generator = client.sendEvent(event, options);
+      const generator = client.sendEvent(event);
       for await (const incomingEvent of generator) {
         await dispatchClientAction(incomingEvent);
       }
@@ -773,12 +780,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 +805,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,24 +2779,33 @@ 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;
   }) });
@@ -2899,9 +2917,7 @@ function Thread({
       {
         type: "text",
         role: "user",
-        data: { content: text || "" }
-      },
-      {
+        data: { content: text || "" },
         state: {
           ...state,
           threadId: activeThreadId ?? void 0
@@ -3035,7 +3051,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;
@@ -3511,7 +3527,6 @@ var CreateThreadButton = ({
   className,
   variant = "ghost",
   size = "default",
-  children,
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
@@ -3521,7 +3536,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 {
@@ -3626,7 +3643,7 @@ var CreateThreadNavItem = ({
       onClickAction: {
         type: "client:navigate",
         data: {
-          url: `?threadId=${generateId()}`
+          url: "?"
         }
       },
       className: cn(className),