@melony/react 0.1.31 → 0.1.39

package/dist/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React11 = require('react');
+var melony = require('melony');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
@@ -12,7 +13,6 @@ var classVarianceAuthority = require('class-variance-authority');
 var ICONS = require('@tabler/icons-react');
 var menu = require('@base-ui/react/menu');
 var separator = require('@base-ui/react/separator');
-var client = require('melony/client');
 var nuqs = require('nuqs');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
@@ -43,31 +43,6 @@ var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // 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 = React11.createContext(
   void 0
 );
@@ -86,6 +61,7 @@ var MelonyContextProviderInner = ({
   setContextValue
 }) => {
   const [state, setState] = React11.useState(client.getState());
+  const queryClient = reactQuery.useQueryClient();
   const { data: config } = reactQuery.useQuery({
     queryKey: ["melony-config", client.url],
     queryFn: () => client.getConfig(),
@@ -137,11 +113,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 = React11.useCallback(
     async (event) => {
@@ -157,7 +140,7 @@ var MelonyContextProviderInner = ({
   const value = React11.useMemo(
     () => ({
       ...state,
-      messages: groupEventsToMessages(state.events),
+      messages: melony.convertEventsToMessages(state.events),
       sendEvent,
       reset,
       client,
@@ -794,12 +777,15 @@ var ThreadProvider = ({
   initialThreadId: providedInitialThreadId
 }) => {
   const queryClient = reactQuery.useQueryClient();
-  const defaultInitialThreadId = React11.useMemo(() => client.generateId(), []);
-  const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
   const [activeThreadId, setActiveThreadId] = nuqs.useQueryState(
     "threadId",
-    nuqs.parseAsString.withDefault(initialThreadId)
+    nuqs.parseAsString
   );
+  React11.useEffect(() => {
+    if (!activeThreadId && providedInitialThreadId) {
+      setActiveThreadId(providedInitialThreadId);
+    }
+  }, [activeThreadId, providedInitialThreadId, setActiveThreadId]);
   const {
     data: threads = [],
     isLoading,
@@ -816,12 +802,11 @@ var ThreadProvider = ({
   });
   const createMutation = reactQuery.useMutation({
     mutationFn: async () => {
-      const newId = service.createThread ? await service.createThread() : client.generateId();
-      return newId;
+      return null;
     },
-    onSuccess: async (newId) => {
+    onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["threads"] });
-      await setActiveThreadId(newId);
+      await setActiveThreadId(null);
     }
   });
   const deleteMutation = reactQuery.useMutation({
@@ -2791,49 +2776,49 @@ function UIRenderer({ node }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: event.data?.delta }, index);
+    if (displayEvent.type === "text-delta") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayEvent.data?.delta }, index);
     }
-    if (event.type === "text") {
-      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: event.data?.content || event.data?.text }, index);
+    if (displayEvent.type === "text") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: displayEvent.data?.content || displayEvent.data?.text }, index);
     }
-    if (event.ui) {
-      return /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: event.ui }, index);
+    if (displayEvent.ui) {
+      return /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: displayEvent.ui }, index);
     }
     return null;
   }) });
 }
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", isUser ? "items-end" : "items-start"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MessageContent, { events: message.content })
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { events: message.content })
     }
-  );
+  ) });
 }
 function LoadingIndicator({ status }) {
   const [isExpanded, setIsExpanded] = React11.useState(false);
@@ -2916,17 +2901,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) {
@@ -3054,7 +3037,7 @@ var Dropdown = ({
   ] });
 };
 var ThreadList = ({ className }) => {
-  const { threads, activeThreadId, selectThread, deleteThread, isLoading } = useThreads();
+  const { threads, activeThreadId, deleteThread } = useThreads();
   const sortedThreads = React11__namespace.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
@@ -3530,7 +3513,6 @@ var CreateThreadButton = ({
   className,
   variant = "ghost",
   size = "default",
-  children,
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
@@ -3540,7 +3522,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 {
@@ -3645,7 +3629,7 @@ var CreateThreadNavItem = ({
       onClickAction: {
         type: "client:navigate",
         data: {
-          url: `?threadId=${client.generateId()}`
+          url: "?"
         }
       },
       className: cn(className),
@@ -3703,7 +3687,6 @@ exports.ThreadPopover = ThreadPopover;
 exports.ThreadProvider = ThreadProvider;
 exports.UIRenderer = UIRenderer;
 exports.WelcomeScreen = WelcomeScreen;
-exports.groupEventsToMessages = groupEventsToMessages;
 exports.useAuth = useAuth;
 exports.useMelony = useMelony;
 exports.useScreenSize = useScreenSize;