@melony/react 0.1.21 → 0.1.22

package/dist/index.cjs

@@ -1,8 +1,11 @@
 'use strict';
 
 var React10 = require('react');
+var react = require('nuqs/adapters/react');
+var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
 var client = require('melony/client');
+var nuqs = require('nuqs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var button = require('@base-ui/react/button');
@@ -69,12 +72,28 @@ function groupEventsToMessages(events) {
 var MelonyContext = React10.createContext(
   void 0
 );
-var MelonyClientProvider = ({
+var defaultQueryClient = new reactQuery.QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+var MelonyContextProviderInner = ({
   children,
   client,
-  initialEvents
+  initialEvents,
+  configApi,
+  setContextValue
 }) => {
   const [state, setState] = React10.useState(client.getState());
+  const { data: config } = reactQuery.useQuery({
+    queryKey: ["melony-config", configApi],
+    queryFn: () => client.getConfig(configApi),
+    enabled: !!configApi,
+    staleTime: Infinity
+  });
   React10.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
@@ -105,11 +124,34 @@ var MelonyClientProvider = ({
       messages: groupEventsToMessages(state.events),
       sendEvent,
       reset,
-      client
+      client,
+      config
     }),
-    [state, sendEvent, reset, client]
+    [state, sendEvent, reset, client, config]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value, children });
+  React10.useEffect(() => {
+    setContextValue(value);
+  }, [value, setContextValue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.NuqsAdapter, { children });
+};
+var MelonyClientProvider = ({
+  children,
+  client,
+  initialEvents,
+  queryClient = defaultQueryClient,
+  configApi
+}) => {
+  const [contextValue, setContextValue] = React10.useState(void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MelonyContextProviderInner,
+    {
+      client,
+      initialEvents,
+      configApi,
+      setContextValue,
+      children
+    }
+  ) }) });
 };
 var AuthContext = React10.createContext(
   void 0
@@ -182,111 +224,75 @@ var ThreadProvider = ({
   service,
   initialThreadId: providedInitialThreadId
 }) => {
+  const queryClient = reactQuery.useQueryClient();
   const defaultInitialThreadId = React10.useMemo(() => client.generateId(), []);
   const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
-  const [threads, setThreads] = React10.useState([]);
-  const [activeThreadId, setActiveThreadId] = React10.useState(
-    initialThreadId
+  const [activeThreadId, setActiveThreadId] = nuqs.useQueryState(
+    "threadId",
+    nuqs.parseAsString.withDefault(initialThreadId)
   );
-  const [isLoading, setIsLoading] = React10.useState(true);
-  const [error, setError] = React10.useState(null);
-  const [threadEvents, setThreadEvents] = React10.useState([]);
-  const [isLoadingEvents, setIsLoadingEvents] = React10.useState(false);
-  const fetchThreads = React10.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
+  } = reactQuery.useQuery({
+    queryKey: ["threads"],
+    queryFn: () => service.getThreads()
+  });
+  const { data: threadEvents = [], isLoading: isLoadingEvents } = reactQuery.useQuery({
+    queryKey: ["threads", activeThreadId, "events"],
+    queryFn: () => service.getEvents(activeThreadId),
+    enabled: !!activeThreadId
+  });
+  const createMutation = reactQuery.useMutation({
+    mutationFn: async () => {
+      const newId = service.createThread ? await service.createThread() : client.generateId();
+      return newId;
+    },
+    onSuccess: async (newId) => {
+      await queryClient.invalidateQueries({ queryKey: ["threads"] });
+      await setActiveThreadId(newId);
     }
-  }, [service]);
-  React10.useEffect(() => {
-    fetchThreads();
-  }, [fetchThreads]);
-  const selectThread = React10.useCallback((threadId) => {
-    setActiveThreadId(threadId);
-  }, []);
+  });
+  const deleteMutation = reactQuery.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 = React10.useCallback(
+    (threadId) => {
+      setActiveThreadId(threadId);
+    },
+    [setActiveThreadId]
+  );
   const createThread = React10.useCallback(async () => {
-    const newId = service.createThread ? await service.createThread() : client.generateId();
-    const newThread = {
-      id: newId,
-      updatedAt: /* @__PURE__ */ new Date()
-    };
-    setThreads((prev) => [newThread, ...prev]);
-    setActiveThreadId(newId);
-    return newId;
-  }, [service]);
+    return createMutation.mutateAsync();
+  }, [createMutation]);
   const deleteThread = React10.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 = React10.useCallback(async () => {
-    await fetchThreads();
-  }, [fetchThreads]);
-  React10.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 = React10.useMemo(
     () => ({
       threads,
       activeThreadId,
       isLoading,
-      error,
+      error: threadsError || null,
       selectThread,
       createThread,
       deleteThread,
-      refreshThreads,
+      refreshThreads: async () => {
+        await refreshThreads();
+      },
       threadEvents,
       isLoadingEvents
     }),
@@ -294,7 +300,7 @@ var ThreadProvider = ({
       threads,
       activeThreadId,
       isLoading,
-      error,
+      threadsError,
       selectThread,
       createThread,
       deleteThread,
@@ -364,9 +370,16 @@ var useMelony = (options) => {
   }
   const { client, reset } = context;
   const { initialEvents } = options || {};
+  const prevInitialEventsRef = React10.useRef(void 0);
   React10.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;
@@ -2337,13 +2350,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] = React10.useState("");
   const messagesEndRef = React10.useRef(null);
   React10.useEffect(() => {
@@ -2359,7 +2377,7 @@ function Thread({
         role: "user",
         data: { content: text }
       },
-      { state }
+      { state: { ...state, threadId: activeThreadId ?? void 0 } }
     );
   };
   const handleStarterPromptClick = (prompt) => {
@@ -2369,21 +2387,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__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn("relative flex flex-col h-full bg-background", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { status: { message: "Loading messages..." } }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 showStarterPrompts && /* @__PURE__ */ jsxRuntime.jsx(
                   StarterPrompts,
                   {
@@ -2400,7 +2418,7 @@ function Thread({
                     loadingStatus
                   }
                 )
-              ]
+              ] })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
@@ -2443,7 +2461,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);
@@ -2494,7 +2519,7 @@ var ThreadList = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconMessage, { className: "size-8 mx-auto opacity-50" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No threads yet" }),
       /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })