@mastra/react 0.0.20 → 0.0.21

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @mastra/react-hooks
 
+## 0.0.21
+
+### Patch Changes
+
+- Configurable resourceId in react useChat ([#10561](https://github.com/mastra-ai/mastra/pull/10561))
+
+- fix(agent): persist messages before tool suspension ([#10542](https://github.com/mastra-ai/mastra/pull/10542))
+
+  Fixes issues where thread and messages were not saved before suspension when tools require approval or call suspend() during execution. This caused conversation history to be lost if users refreshed during tool approval or suspension.
+
+  **Backend changes (@mastra/core):**
+  - Add assistant messages to messageList immediately after LLM execution
+  - Flush messages synchronously before suspension to persist state
+  - Create thread if it doesn't exist before flushing
+  - Add metadata helpers to persist and remove tool approval state
+  - Pass saveQueueManager and memory context through workflow for immediate persistence
+
+  **Frontend changes (@mastra/react):**
+  - Extract runId from pending approvals to enable resumption after refresh
+  - Convert `pendingToolApprovals` (DB format) to `requireApprovalMetadata` (runtime format)
+  - Handle both `dynamic-tool` and `tool-{NAME}` part types for approval state
+  - Change runId from hardcoded `agentId` to unique `uuid()`
+
+  **UI changes (@mastra/playground-ui):**
+  - Handle tool calls awaiting approval in message initialization
+  - Convert approval metadata format when loading initial messages
+
+  Fixes #9745, #9906
+
+- Updated dependencies []:
+  - @mastra/client-js@0.16.15
+
+## 0.0.21-alpha.0
+
+### Patch Changes
+
+- Configurable resourceId in react useChat ([#10561](https://github.com/mastra-ai/mastra/pull/10561))
+
+- fix(agent): persist messages before tool suspension ([#10542](https://github.com/mastra-ai/mastra/pull/10542))
+
+  Fixes issues where thread and messages were not saved before suspension when tools require approval or call suspend() during execution. This caused conversation history to be lost if users refreshed during tool approval or suspension.
+
+  **Backend changes (@mastra/core):**
+  - Add assistant messages to messageList immediately after LLM execution
+  - Flush messages synchronously before suspension to persist state
+  - Create thread if it doesn't exist before flushing
+  - Add metadata helpers to persist and remove tool approval state
+  - Pass saveQueueManager and memory context through workflow for immediate persistence
+
+  **Frontend changes (@mastra/react):**
+  - Extract runId from pending approvals to enable resumption after refresh
+  - Convert `pendingToolApprovals` (DB format) to `requireApprovalMetadata` (runtime format)
+  - Handle both `dynamic-tool` and `tool-{NAME}` part types for approval state
+  - Change runId from hardcoded `agentId` to unique `uuid()`
+
+  **UI changes (@mastra/playground-ui):**
+  - Handle tool calls awaiting approval in message initialization
+  - Convert approval metadata format when loading initial messages
+
+  Fixes #9745, #9906
+
+- Updated dependencies []:
+  - @mastra/client-js@0.16.15-alpha.0
+
 ## 0.0.20
 
 ### Patch Changes

package/dist/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const clientJs = require('@mastra/client-js');
+const uuid = require('@lukeed/uuid');
 const lucideReact = require('lucide-react');
 const tailwindMerge = require('tailwind-merge');
 const hastUtilToJsxRuntime = require('hast-util-to-jsx-runtime');
@@ -259,17 +260,19 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
       if (!lastMessage || lastMessage.role !== "assistant") return result;
       const parts = [...lastMessage.parts];
       const toolPartIndex = parts.findIndex(
-        (part) => part.type === "dynamic-tool" && "toolCallId" in part && part.toolCallId === chunk.payload.toolCallId
+        (part) => (part.type === "dynamic-tool" || typeof part.type === "string" && part.type.startsWith("tool-")) && "toolCallId" in part && part.toolCallId === chunk.payload.toolCallId
       );
       if (toolPartIndex !== -1) {
         const toolPart = parts[toolPartIndex];
-        if (toolPart.type === "dynamic-tool") {
+        if (toolPart.type === "dynamic-tool" || typeof toolPart.type === "string" && toolPart.type.startsWith("tool-")) {
+          const toolName = "toolName" in toolPart && typeof toolPart.toolName === "string" ? toolPart.toolName : toolPart.type.startsWith("tool-") ? toolPart.type.substring(5) : "";
+          const toolCallId = toolPart.toolCallId;
           if (chunk.type === "tool-result" && chunk.payload.isError || chunk.type === "tool-error") {
             const error = chunk.type === "tool-error" ? chunk.payload.error : chunk.payload.result;
             parts[toolPartIndex] = {
               type: "dynamic-tool",
-              toolName: toolPart.toolName,
-              toolCallId: toolPart.toolCallId,
+              toolName,
+              toolCallId,
               state: "output-error",
               input: toolPart.input,
               errorText: String(error),
@@ -288,8 +291,8 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
             }
             parts[toolPartIndex] = {
               type: "dynamic-tool",
-              toolName: toolPart.toolName,
-              toolCallId: toolPart.toolCallId,
+              toolName,
+              toolCallId,
               state: "output-available",
               input: toolPart.input,
               output,
@@ -311,11 +314,14 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
       if (!lastMessage || lastMessage.role !== "assistant") return result;
       const parts = [...lastMessage.parts];
       const toolPartIndex = parts.findIndex(
-        (part) => part.type === "dynamic-tool" && "toolCallId" in part && part.toolCallId === chunk.payload.toolCallId
+        (part) => (part.type === "dynamic-tool" || typeof part.type === "string" && part.type.startsWith("tool-")) && "toolCallId" in part && part.toolCallId === chunk.payload.toolCallId
       );
       if (toolPartIndex !== -1) {
         const toolPart = parts[toolPartIndex];
-        if (toolPart.type === "dynamic-tool") {
+        if (toolPart.type === "dynamic-tool" || typeof toolPart.type === "string" && toolPart.type.startsWith("tool-")) {
+          const toolName = "toolName" in toolPart && typeof toolPart.toolName === "string" ? toolPart.toolName : typeof toolPart.type === "string" && toolPart.type.startsWith("tool-") ? toolPart.type.substring(5) : "";
+          const toolCallId = toolPart.toolCallId;
+          const input = toolPart.input;
           if (chunk.payload.output?.type?.startsWith("workflow-")) {
             const existingWorkflowState = toolPart.output || {};
             const updatedWorkflowState = mapWorkflowStreamChunkToWatchResult(
@@ -323,7 +329,11 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
               chunk.payload.output
             );
             parts[toolPartIndex] = {
-              ...toolPart,
+              type: "dynamic-tool",
+              toolName,
+              toolCallId,
+              state: "input-streaming",
+              input,
               output: updatedWorkflowState
             };
           } else if (chunk.payload.output?.from === "AGENT" || chunk.payload.output?.from === "USER" && chunk.payload.output?.payload?.output?.type?.startsWith("workflow-")) {
@@ -332,7 +342,11 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
             const currentOutput = toolPart.output || [];
             const existingOutput = Array.isArray(currentOutput) ? currentOutput : [];
             parts[toolPartIndex] = {
-              ...toolPart,
+              type: "dynamic-tool",
+              toolName,
+              toolCallId,
+              state: "input-streaming",
+              input,
               output: [...existingOutput, chunk.payload.output]
             };
           }
@@ -646,6 +660,20 @@ const toAssistantUIMessage = (message) => {
       }
       return baseToolCall;
     }
+    const requireApprovalMetadata = extendedMessage.metadata?.requireApprovalMetadata;
+    const partToolCallId = "toolCallId" in part && typeof part.toolCallId === "string" ? part.toolCallId : void 0;
+    const suspensionData = partToolCallId ? requireApprovalMetadata?.[partToolCallId] : void 0;
+    if (suspensionData) {
+      const toolName = "toolName" in part && typeof part.toolName === "string" ? part.toolName : part.type.startsWith("tool-") ? part.type.substring(5) : "";
+      return {
+        type: "tool-call",
+        toolCallId: partToolCallId,
+        toolName,
+        argsText: "input" in part ? JSON.stringify(part.input) : "{}",
+        args: "input" in part ? part.input : {},
+        metadata: extendedMessage.metadata
+      };
+    }
     return {
       type: "text",
       text: "",
@@ -730,7 +758,6 @@ const resolveInitialMessages = (messages) => {
             childMessages,
             result: finalResult?.text || ""
           };
-          console.log("json", json);
           const nextMessage = {
             role: "assistant",
             parts: [
@@ -758,6 +785,18 @@ const resolveInitialMessages = (messages) => {
         return message;
       }
     }
+    const extendedMessage = message;
+    const pendingToolApprovals = extendedMessage.metadata?.pendingToolApprovals;
+    if (pendingToolApprovals && typeof pendingToolApprovals === "object") {
+      return {
+        ...message,
+        metadata: {
+          ...message.metadata,
+          mode: "stream",
+          requireApprovalMetadata: pendingToolApprovals
+        }
+      };
+    }
     return message;
   });
 };
@@ -1161,12 +1200,24 @@ class AISdkNetworkTransformer {
   };
 }
 
-const useChat = ({ agentId, initializeMessages }) => {
-  const _currentRunId = react.useRef(void 0);
+const useChat = ({ agentId, resourceId, initializeMessages }) => {
+  const extractRunIdFromMessages = (messages2) => {
+    for (const message of messages2) {
+      const pendingToolApprovals = message.metadata?.pendingToolApprovals;
+      if (pendingToolApprovals && typeof pendingToolApprovals === "object") {
+        const suspensionData = Object.values(pendingToolApprovals)[0];
+        if (suspensionData?.runId) {
+          return suspensionData.runId;
+        }
+      }
+    }
+    return void 0;
+  };
+  const initialMessages = initializeMessages?.() || [];
+  const initialRunId = extractRunIdFromMessages(initialMessages);
+  const _currentRunId = react.useRef(initialRunId);
   const _onChunk = react.useRef(void 0);
-  const [messages, setMessages] = react.useState(
-    () => resolveInitialMessages(initializeMessages?.() || [])
-  );
+  const [messages, setMessages] = react.useState(() => resolveInitialMessages(initialMessages));
   const [toolCallApprovals, setToolCallApprovals] = react.useState({});
   const baseClient = useMastraClient();
   const [isRunning, setIsRunning] = react.useState(false);
@@ -1198,7 +1249,7 @@ const useChat = ({ agentId, initializeMessages }) => {
     const agent = clientWithAbort.getAgent(agentId);
     const response = await agent.generate({
       messages: coreUserMessages,
-      runId: agentId,
+      runId: uuid.v4(),
       maxSteps,
       modelSettings: {
         frequencyPenalty,
@@ -1211,7 +1262,7 @@ const useChat = ({ agentId, initializeMessages }) => {
       },
       instructions,
       runtimeContext,
-      ...threadId ? { threadId, resourceId: agentId } : {},
+      ...threadId ? { threadId, resourceId: resourceId || agentId } : {},
       providerOptions
     });
     setIsRunning(false);
@@ -1246,7 +1297,7 @@ const useChat = ({ agentId, initializeMessages }) => {
       abortSignal: signal
     });
     const agent = clientWithAbort.getAgent(agentId);
-    const runId = agentId;
+    const runId = uuid.v4();
     const response = await agent.stream({
       messages: coreUserMessages,
       runId,
@@ -1262,7 +1313,7 @@ const useChat = ({ agentId, initializeMessages }) => {
       },
       instructions,
       runtimeContext,
-      ...threadId ? { threadId, resourceId: agentId } : {},
+      ...threadId ? { threadId, resourceId: resourceId || agentId } : {},
       providerOptions,
       requireToolApproval
     });
@@ -1291,6 +1342,7 @@ const useChat = ({ agentId, initializeMessages }) => {
       abortSignal: signal
     });
     const agent = clientWithAbort.getAgent(agentId);
+    const runId = uuid.v4();
     const response = await agent.network({
       messages: coreUserMessages,
       maxSteps,
@@ -1303,9 +1355,9 @@ const useChat = ({ agentId, initializeMessages }) => {
         topK,
         topP
       },
-      runId: agentId,
+      runId,
       runtimeContext,
-      ...threadId ? { thread: threadId, resourceId: agentId } : {}
+      ...threadId ? { thread: threadId, resourceId: resourceId || agentId } : {}
     });
     const transformer = new AISdkNetworkTransformer();
     await response.processDataStream({