@melony/react 0.1.18 → 0.1.22

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import { ClientState, MelonyClient } from 'melony/client';
 import { Role, Event, UINode } from 'melony';
+import { QueryClient } from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface User {
@@ -63,12 +64,18 @@ interface MelonyContextValue extends ClientState {
     }) => Promise<void>;
     reset: (events?: Event[]) => void;
     client: MelonyClient;
+    config?: {
+        starterPrompts: any[];
+        options: any[];
+    };
 }
 declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
 interface MelonyClientProviderProps {
     children: ReactNode;
     client: MelonyClient;
     initialEvents?: Event[];
+    queryClient?: QueryClient;
+    configApi?: string;
 }
 declare const MelonyClientProvider: React__default.FC<MelonyClientProviderProps>;
 
@@ -136,7 +143,7 @@ interface ThreadProps {
     autoFocus?: boolean;
     defaultSelectedIds?: string[];
 }
-declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, options, autoFocus, defaultSelectedIds, }: ThreadProps): react_jsx_runtime.JSX.Element;
+declare function Thread({ className, placeholder, starterPrompts: localStarterPrompts, onStarterPromptClick, options: localOptions, autoFocus, defaultSelectedIds, }: ThreadProps): react_jsx_runtime.JSX.Element;
 
 interface ComposerProps {
     value: string;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import { ClientState, MelonyClient } from 'melony/client';
 import { Role, Event, UINode } from 'melony';
+import { QueryClient } from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface User {
@@ -63,12 +64,18 @@ interface MelonyContextValue extends ClientState {
     }) => Promise<void>;
     reset: (events?: Event[]) => void;
     client: MelonyClient;
+    config?: {
+        starterPrompts: any[];
+        options: any[];
+    };
 }
 declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
 interface MelonyClientProviderProps {
     children: ReactNode;
     client: MelonyClient;
     initialEvents?: Event[];
+    queryClient?: QueryClient;
+    configApi?: string;
 }
 declare const MelonyClientProvider: React__default.FC<MelonyClientProviderProps>;
 
@@ -136,7 +143,7 @@ interface ThreadProps {
     autoFocus?: boolean;
     defaultSelectedIds?: string[];
 }
-declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, options, autoFocus, defaultSelectedIds, }: ThreadProps): react_jsx_runtime.JSX.Element;
+declare function Thread({ className, placeholder, starterPrompts: localStarterPrompts, onStarterPromptClick, options: localOptions, autoFocus, defaultSelectedIds, }: ThreadProps): react_jsx_runtime.JSX.Element;
 
 interface ComposerProps {
     value: string;

package/dist/index.js

@@ -1,13 +1,16 @@
 import * as React10 from 'react';
-import React10__default, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+import React10__default, { createContext, useState, useCallback, useEffect, useMemo, useContext, 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';
 import { generateId } from 'melony/client';
+import { useQueryState, parseAsString } from 'nuqs';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
 import * as ICONS from '@tabler/icons-react';
-import { IconChevronDown, IconLoader2, IconArrowUp, IconPlus, IconMessage, IconTrash, IconHistory, IconX, IconArrowLeft, IconChevronLeft, IconChevronRight, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
+import { IconChevronDown, IconLoader2, IconArrowUp, IconPlus, IconMessage, IconTrash, IconHistory, IconX, IconArrowLeft, IconChevronLeft, IconChevronRight, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconChevronUp, IconSelector } from '@tabler/icons-react';
 import { Menu } from '@base-ui/react/menu';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
@@ -48,12 +51,28 @@ function groupEventsToMessages(events) {
 var MelonyContext = createContext(
   void 0
 );
-var MelonyClientProvider = ({
+var defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+var MelonyContextProviderInner = ({
   children,
   client,
-  initialEvents
+  initialEvents,
+  configApi,
+  setContextValue
 }) => {
   const [state, setState] = useState(client.getState());
+  const { data: config } = useQuery({
+    queryKey: ["melony-config", configApi],
+    queryFn: () => client.getConfig(configApi),
+    enabled: !!configApi,
+    staleTime: Infinity
+  });
   useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
@@ -84,11 +103,34 @@ var MelonyClientProvider = ({
       messages: groupEventsToMessages(state.events),
       sendEvent,
       reset,
-      client
+      client,
+      config
     }),
-    [state, sendEvent, reset, client]
+    [state, sendEvent, reset, client, config]
   );
-  return /* @__PURE__ */ jsx(MelonyContext.Provider, { value, children });
+  useEffect(() => {
+    setContextValue(value);
+  }, [value, setContextValue]);
+  return /* @__PURE__ */ jsx(NuqsAdapter, { children });
+};
+var MelonyClientProvider = ({
+  children,
+  client,
+  initialEvents,
+  queryClient = defaultQueryClient,
+  configApi
+}) => {
+  const [contextValue, setContextValue] = useState(void 0);
+  return /* @__PURE__ */ jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(
+    MelonyContextProviderInner,
+    {
+      client,
+      initialEvents,
+      configApi,
+      setContextValue,
+      children
+    }
+  ) }) });
 };
 var AuthContext = createContext(
   void 0
@@ -161,111 +203,75 @@ var ThreadProvider = ({
   service,
   initialThreadId: providedInitialThreadId
 }) => {
+  const queryClient = useQueryClient();
   const defaultInitialThreadId = useMemo(() => generateId(), []);
   const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
-  const [threads, setThreads] = useState([]);
-  const [activeThreadId, setActiveThreadId] = useState(
-    initialThreadId
+  const [activeThreadId, setActiveThreadId] = useQueryState(
+    "threadId",
+    parseAsString.withDefault(initialThreadId)
   );
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [threadEvents, setThreadEvents] = useState([]);
-  const [isLoadingEvents, setIsLoadingEvents] = useState(false);
-  const fetchThreads = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const processedThreads = await service.getThreads();
-      setThreads(processedThreads);
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Failed to fetch threads");
-      setError(error2);
-      console.error("Failed to fetch threads:", error2);
-    } finally {
-      setIsLoading(false);
+  const {
+    data: threads = [],
+    isLoading,
+    error: threadsError,
+    refetch: refreshThreads
+  } = useQuery({
+    queryKey: ["threads"],
+    queryFn: () => service.getThreads()
+  });
+  const { data: threadEvents = [], isLoading: isLoadingEvents } = useQuery({
+    queryKey: ["threads", activeThreadId, "events"],
+    queryFn: () => service.getEvents(activeThreadId),
+    enabled: !!activeThreadId
+  });
+  const createMutation = useMutation({
+    mutationFn: async () => {
+      const newId = service.createThread ? await service.createThread() : generateId();
+      return newId;
+    },
+    onSuccess: async (newId) => {
+      await queryClient.invalidateQueries({ queryKey: ["threads"] });
+      await setActiveThreadId(newId);
     }
-  }, [service]);
-  useEffect(() => {
-    fetchThreads();
-  }, [fetchThreads]);
-  const selectThread = useCallback((threadId) => {
-    setActiveThreadId(threadId);
-  }, []);
+  });
+  const deleteMutation = useMutation({
+    mutationFn: (threadId) => service.deleteThread(threadId),
+    onSuccess: async (_, threadId) => {
+      await queryClient.invalidateQueries({ queryKey: ["threads"] });
+      if (activeThreadId === threadId) {
+        const remainingThreads = threads.filter((t) => t.id !== threadId);
+        const nextId = remainingThreads.length > 0 ? remainingThreads[0].id : null;
+        await setActiveThreadId(nextId);
+      }
+    }
+  });
+  const selectThread = useCallback(
+    (threadId) => {
+      setActiveThreadId(threadId);
+    },
+    [setActiveThreadId]
+  );
   const createThread = useCallback(async () => {
-    const newId = service.createThread ? await service.createThread() : generateId();
-    const newThread = {
-      id: newId,
-      updatedAt: /* @__PURE__ */ new Date()
-    };
-    setThreads((prev) => [newThread, ...prev]);
-    setActiveThreadId(newId);
-    return newId;
-  }, [service]);
+    return createMutation.mutateAsync();
+  }, [createMutation]);
   const deleteThread = useCallback(
     async (threadId) => {
-      try {
-        await service.deleteThread(threadId);
-        setThreads((prev) => {
-          const remainingThreads = prev.filter((t) => t.id !== threadId);
-          setActiveThreadId((current) => {
-            if (current === threadId) {
-              return remainingThreads.length > 0 ? remainingThreads[0].id : null;
-            }
-            return current;
-          });
-          return remainingThreads;
-        });
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to delete thread");
-        setError(error2);
-        throw error2;
-      }
+      return deleteMutation.mutateAsync(threadId);
     },
-    [service]
+    [deleteMutation]
   );
-  const refreshThreads = useCallback(async () => {
-    await fetchThreads();
-  }, [fetchThreads]);
-  useEffect(() => {
-    if (!activeThreadId) {
-      setThreadEvents([]);
-      setIsLoadingEvents(false);
-      return;
-    }
-    let cancelled = false;
-    const fetchEvents = async () => {
-      setIsLoadingEvents(true);
-      try {
-        const events = await service.getEvents(activeThreadId);
-        if (!cancelled) {
-          setThreadEvents(events);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          console.error("Failed to fetch events:", err);
-          setThreadEvents([]);
-        }
-      } finally {
-        if (!cancelled) {
-          setIsLoadingEvents(false);
-        }
-      }
-    };
-    fetchEvents();
-    return () => {
-      cancelled = true;
-    };
-  }, [activeThreadId, service]);
   const value = useMemo(
     () => ({
       threads,
       activeThreadId,
       isLoading,
-      error,
+      error: threadsError || null,
       selectThread,
       createThread,
       deleteThread,
-      refreshThreads,
+      refreshThreads: async () => {
+        await refreshThreads();
+      },
       threadEvents,
       isLoadingEvents
     }),
@@ -273,7 +279,7 @@ var ThreadProvider = ({
       threads,
       activeThreadId,
       isLoading,
-      error,
+      threadsError,
       selectThread,
       createThread,
       deleteThread,
@@ -343,9 +349,16 @@ var useMelony = (options) => {
   }
   const { client, reset } = context;
   const { initialEvents } = options || {};
+  const prevInitialEventsRef = useRef(void 0);
   useEffect(() => {
-    if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
-      reset(initialEvents);
+    const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
+    if (currentSerialized !== prevInitialEventsRef.current) {
+      if (initialEvents) {
+        reset(initialEvents);
+      } else {
+        reset([]);
+      }
+      prevInitialEventsRef.current = currentSerialized;
     }
   }, [client, initialEvents, reset]);
   return context;
@@ -2316,13 +2329,18 @@ function MessageList({
 function Thread({
   className,
   placeholder = "Type a message...",
-  starterPrompts,
+  starterPrompts: localStarterPrompts,
   onStarterPromptClick,
-  options,
+  options: localOptions,
   autoFocus = false,
   defaultSelectedIds
 }) {
-  const { messages, isLoading, error, sendEvent, loadingStatus } = useMelony();
+  const { activeThreadId, threadEvents, isLoadingEvents } = useThreads();
+  const { messages, isLoading, error, sendEvent, loadingStatus, config } = useMelony({
+    initialEvents: threadEvents
+  });
+  const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
+  const options = localOptions ?? config?.options;
   const [input, setInput] = useState("");
   const messagesEndRef = useRef(null);
   useEffect(() => {
@@ -2338,7 +2356,7 @@ function Thread({
         role: "user",
         data: { content: text }
       },
-      { state }
+      { state: { ...state, threadId: activeThreadId ?? void 0 } }
     );
   };
   const handleStarterPromptClick = (prompt) => {
@@ -2348,21 +2366,21 @@ function Thread({
       handleSubmit(void 0, prompt);
     }
   };
-  const showStarterPrompts = messages.length === 0 && starterPrompts && starterPrompts.length > 0;
+  const showStarterPrompts = messages.length === 0 && starterPrompts && starterPrompts.length > 0 && !isLoadingEvents;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn("relative flex flex-col h-full bg-background", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
                 "max-w-4xl mx-auto w-full p-4",
                 showStarterPrompts && "min-h-full flex flex-col"
               ),
-              children: [
+              children: isLoadingEvents && messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx(LoadingIndicator, { status: { message: "Loading messages..." } }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 showStarterPrompts && /* @__PURE__ */ jsx(
                   StarterPrompts,
                   {
@@ -2379,7 +2397,7 @@ function Thread({
                     loadingStatus
                   }
                 )
-              ]
+              ] })
             }
           ),
           /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
@@ -2422,7 +2440,14 @@ var ThreadList = ({
   emptyState,
   onThreadSelect
 }) => {
-  const { threads, activeThreadId, selectThread, createThread, deleteThread } = useThreads();
+  const {
+    threads,
+    activeThreadId,
+    selectThread,
+    createThread,
+    deleteThread,
+    isLoading
+  } = useThreads();
   const handleThreadClick = (threadId) => {
     if (threadId !== activeThreadId) {
       selectThread(threadId);
@@ -2473,7 +2498,7 @@ var ThreadList = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" }),
       /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })