@mastra/react 0.0.0-unified-sidebar-20251010130811 → 0.0.0-vnext-20251104230439

package/dist/{index.es.js → index.js}

@@ -1,7 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useState, Fragment, useLayoutEffect, useEffect } from 'react';
 import { MastraClient } from '@mastra/client-js';
-import { flushSync } from 'react-dom';
+import { ChevronDownIcon, CheckIcon, CopyIcon } from 'lucide-react';
+import { twMerge } from 'tailwind-merge';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { codeToHast } from 'shiki/bundle/web';
+import { TooltipProvider, Root, TooltipPortal, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1 } from '@radix-ui/react-tooltip';
 
 const MastraClientContext = createContext({});
 const MastraClientProvider = ({ children, baseUrl, headers }) => {
@@ -245,6 +249,7 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
         }
       ];
     }
+    case "tool-error":
     case "tool-result": {
       const lastMessage = result[result.length - 1];
       if (!lastMessage || lastMessage.role !== "assistant") return result;
@@ -255,25 +260,35 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
       if (toolPartIndex !== -1) {
         const toolPart = parts[toolPartIndex];
         if (toolPart.type === "dynamic-tool") {
-          if (chunk.payload.isError) {
+          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,
               state: "output-error",
               input: toolPart.input,
-              errorText: String(chunk.payload.result),
+              errorText: String(error),
               callProviderMetadata: chunk.payload.providerMetadata
             };
           } else {
             const isWorkflow = Boolean(chunk.payload.result?.result?.steps);
+            const isAgent = chunk?.from === "AGENT";
+            let output;
+            if (isWorkflow) {
+              output = chunk.payload.result?.result;
+            } else if (isAgent) {
+              output = parts[toolPartIndex].output ?? chunk.payload.result;
+            } else {
+              output = chunk.payload.result;
+            }
             parts[toolPartIndex] = {
               type: "dynamic-tool",
               toolName: toolPart.toolName,
               toolCallId: toolPart.toolCallId,
               state: "output-available",
               input: toolPart.input,
-              output: isWorkflow ? chunk.payload.result?.result : chunk.payload.result,
+              output,
               callProviderMetadata: chunk.payload.providerMetadata
             };
           }
@@ -307,6 +322,8 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
               ...toolPart,
               output: updatedWorkflowState
             };
+          } else if (chunk.payload.output?.from === "AGENT" || chunk.payload.output?.from === "USER" && chunk.payload.output?.payload?.output?.type?.startsWith("workflow-")) {
+            return toUIMessageFromAgent(chunk.payload.output, conversation);
           } else {
             const currentOutput = toolPart.output || [];
             const existingOutput = Array.isArray(currentOutput) ? currentOutput : [];
@@ -380,15 +397,37 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
         }
       ];
     }
+    case "tool-call-approval": {
+      const lastMessage = result[result.length - 1];
+      if (!lastMessage || lastMessage.role !== "assistant") return result;
+      const lastRequireApprovalMetadata = lastMessage.metadata?.mode === "stream" ? lastMessage.metadata?.requireApprovalMetadata : {};
+      return [
+        ...result.slice(0, -1),
+        {
+          ...lastMessage,
+          metadata: {
+            ...lastMessage.metadata,
+            mode: "stream",
+            requireApprovalMetadata: {
+              ...lastRequireApprovalMetadata,
+              [chunk.payload.toolCallId]: {
+                toolCallId: chunk.payload.toolCallId,
+                toolName: chunk.payload.toolName,
+                args: chunk.payload.args
+              }
+            }
+          }
+        }
+      ];
+    }
     case "finish": {
       const lastMessage = result[result.length - 1];
       if (!lastMessage || lastMessage.role !== "assistant") return result;
       const parts = lastMessage.parts.map((part) => {
-        if (part.type === "text" && part.state === "streaming") {
-          return { ...part, state: "done" };
-        }
-        if (part.type === "reasoning" && part.state === "streaming") {
-          return { ...part, state: "done" };
+        if (typeof part === "object" && part !== null && "type" in part && "state" in part && part.state === "streaming") {
+          if (part.type === "text" || part.type === "reasoning") {
+            return { ...part, state: "done" };
+          }
         }
         return part;
       });
@@ -407,7 +446,7 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
         parts: [
           {
             type: "text",
-            text: chunk.payload.error
+            text: typeof chunk.payload.error === "string" ? chunk.payload.error : JSON.stringify(chunk.payload.error)
           }
         ],
         metadata: {
@@ -422,6 +461,105 @@ const toUIMessage = ({ chunk, conversation, metadata }) => {
       return result;
   }
 };
+const toUIMessageFromAgent = (chunk, conversation, metadata) => {
+  const lastMessage = conversation[conversation.length - 1];
+  if (!lastMessage || lastMessage.role !== "assistant") return conversation;
+  const parts = [...lastMessage.parts];
+  if (chunk.type === "text-delta") {
+    const agentChunk = chunk.payload;
+    const toolPartIndex = parts.findIndex((part) => part.type === "dynamic-tool");
+    if (toolPartIndex === -1) return conversation;
+    const toolPart = parts[toolPartIndex];
+    const childMessages = toolPart?.output?.childMessages || [];
+    const lastChildMessage = childMessages[childMessages.length - 1];
+    const textMessage = { type: "text", content: (lastChildMessage?.content || "") + agentChunk.text };
+    const nextMessages = lastChildMessage?.type === "text" ? [...childMessages.slice(0, -1), textMessage] : [...childMessages, textMessage];
+    parts[toolPartIndex] = {
+      ...toolPart,
+      output: {
+        childMessages: nextMessages
+      }
+    };
+  } else if (chunk.type === "tool-call") {
+    const agentChunk = chunk.payload;
+    const toolPartIndex = parts.findIndex((part) => part.type === "dynamic-tool");
+    if (toolPartIndex === -1) return conversation;
+    const toolPart = parts[toolPartIndex];
+    const childMessages = toolPart?.output?.childMessages || [];
+    parts[toolPartIndex] = {
+      ...toolPart,
+      output: {
+        ...toolPart?.output,
+        childMessages: [
+          ...childMessages,
+          {
+            type: "tool",
+            toolCallId: agentChunk.toolCallId,
+            toolName: agentChunk.toolName,
+            args: agentChunk.args
+          }
+        ]
+      }
+    };
+  } else if (chunk.type === "tool-output") {
+    const agentChunk = chunk.payload;
+    const toolPartIndex = parts.findIndex((part) => part.type === "dynamic-tool");
+    if (toolPartIndex === -1) return conversation;
+    const toolPart = parts[toolPartIndex];
+    if (agentChunk?.output?.type?.startsWith("workflow-")) {
+      const childMessages = toolPart?.output?.childMessages || [];
+      const lastToolIndex = childMessages.length - 1;
+      const currentMessage = childMessages[lastToolIndex];
+      const actualExistingWorkflowState = currentMessage?.toolOutput || {};
+      const updatedWorkflowState = mapWorkflowStreamChunkToWatchResult(actualExistingWorkflowState, agentChunk.output);
+      if (lastToolIndex >= 0 && childMessages[lastToolIndex]?.type === "tool") {
+        parts[toolPartIndex] = {
+          ...toolPart,
+          output: {
+            ...toolPart?.output,
+            childMessages: [
+              ...childMessages.slice(0, -1),
+              {
+                ...currentMessage,
+                toolOutput: { ...updatedWorkflowState, runId: agentChunk.output.runId }
+              }
+            ]
+          }
+        };
+      }
+    }
+  } else if (chunk.type === "tool-result") {
+    const agentChunk = chunk.payload;
+    const toolPartIndex = parts.findIndex((part) => part.type === "dynamic-tool");
+    if (toolPartIndex === -1) return conversation;
+    const toolPart = parts[toolPartIndex];
+    const childMessages = toolPart?.output?.childMessages || [];
+    const lastToolIndex = childMessages.length - 1;
+    const isWorkflow = agentChunk?.toolName?.startsWith("workflow-");
+    if (lastToolIndex >= 0 && childMessages[lastToolIndex]?.type === "tool") {
+      parts[toolPartIndex] = {
+        ...toolPart,
+        output: {
+          ...toolPart?.output,
+          childMessages: [
+            ...childMessages.slice(0, -1),
+            {
+              ...childMessages[lastToolIndex],
+              toolOutput: isWorkflow ? { ...agentChunk.result?.result, runId: agentChunk.result?.runId } : agentChunk.result
+            }
+          ]
+        }
+      };
+    }
+  }
+  return [
+    ...conversation.slice(0, -1),
+    {
+      ...lastMessage,
+      parts
+    }
+  ];
+};
 
 const toAssistantUIMessage = (message) => {
   const extendedMessage = message;
@@ -461,13 +599,23 @@ const toAssistantUIMessage = (message) => {
       };
     }
     if (part.type === "file") {
-      return {
-        type: "file",
-        mimeType: part.mediaType,
-        data: part.url,
-        // Use URL as data source
-        metadata: message.metadata
-      };
+      const type = part.mediaType.includes("image/") ? "image" : "file";
+      if (type === "file") {
+        return {
+          type,
+          mimeType: part.mediaType,
+          data: part.url,
+          // Use URL as data source
+          metadata: message.metadata
+        };
+      }
+      if (type === "image") {
+        return {
+          type,
+          image: part.url,
+          metadata: message.metadata
+        };
+      }
     }
     if (part.type === "dynamic-tool") {
       const baseToolCall = {
@@ -542,9 +690,118 @@ const toAssistantUIMessage = (message) => {
   return threadMessage;
 };
 
+const resolveInitialMessages = (messages) => {
+  return messages.map((message) => {
+    const networkPart = message.parts.find(
+      (part) => typeof part === "object" && part !== null && "type" in part && part.type === "text" && "text" in part && typeof part.text === "string" && part.text.includes('"isNetwork":true')
+    );
+    if (networkPart && networkPart.type === "text") {
+      try {
+        const json = JSON.parse(networkPart.text);
+        if (json.isNetwork === true) {
+          const selectionReason = json.selectionReason || "";
+          const primitiveType = json.primitiveType || "";
+          const primitiveId = json.primitiveId || "";
+          const finalResult = json.finalResult;
+          const toolCalls = finalResult?.toolCalls || [];
+          const childMessages = [];
+          for (const toolCall of toolCalls) {
+            if (toolCall.type === "tool-call" && toolCall.payload) {
+              const toolCallId = toolCall.payload.toolCallId;
+              let toolResult;
+              for (const message2 of finalResult?.messages || []) {
+                for (const part of message2.content || []) {
+                  if (typeof part === "object" && part.type === "tool-result" && part.toolCallId === toolCallId) {
+                    toolResult = part;
+                    break;
+                  }
+                }
+              }
+              const isWorkflow = Boolean(toolResult?.result?.result?.steps);
+              childMessages.push({
+                type: "tool",
+                toolCallId: toolCall.payload.toolCallId,
+                toolName: toolCall.payload.toolName,
+                args: toolCall.payload.args,
+                toolOutput: isWorkflow ? toolResult?.result?.result : toolResult?.result
+              });
+            }
+          }
+          if (finalResult && finalResult.text) {
+            childMessages.push({
+              type: "text",
+              content: finalResult.text
+            });
+          }
+          const result = {
+            childMessages,
+            result: finalResult?.text || ""
+          };
+          console.log("json", json);
+          const nextMessage = {
+            role: "assistant",
+            parts: [
+              {
+                type: "dynamic-tool",
+                toolCallId: primitiveId,
+                toolName: primitiveId,
+                state: "output-available",
+                input: json.input,
+                output: result
+              }
+            ],
+            id: message.id,
+            metadata: {
+              ...message.metadata,
+              mode: "network",
+              selectionReason,
+              agentInput: json.input,
+              from: primitiveType === "agent" ? "AGENT" : "WORKFLOW"
+            }
+          };
+          return nextMessage;
+        }
+      } catch (error) {
+        return message;
+      }
+    }
+    return message;
+  });
+};
+const resolveToChildMessages = (messages) => {
+  const assistantMessage = messages.find((message) => message.role === "assistant");
+  if (!assistantMessage) return [];
+  const parts = assistantMessage.parts;
+  let childMessages = [];
+  for (const part of parts) {
+    const toolPart = part;
+    if (part.type.startsWith("tool-")) {
+      const toolName = part.type.substring("tool-".length);
+      const isWorkflow = toolName.startsWith("workflow-");
+      childMessages.push({
+        type: "tool",
+        toolCallId: toolPart.toolCallId,
+        toolName,
+        args: toolPart.input,
+        toolOutput: isWorkflow ? { ...toolPart.output?.result, runId: toolPart.output?.runId } : toolPart.output
+      });
+    }
+    if (part.type === "text") {
+      childMessages.push({
+        type: "text",
+        content: toolPart.text
+      });
+    }
+  }
+  return childMessages;
+};
+
 class AISdkNetworkTransformer {
   transform({ chunk, conversation, metadata }) {
     const newConversation = [...conversation];
+    if (chunk.type === "routing-agent-text-delta") {
+      return this.handleRoutingAgentConversation(chunk, newConversation);
+    }
     if (chunk.type.startsWith("agent-execution-")) {
       return this.handleAgentConversation(chunk, newConversation, metadata);
     }
@@ -555,22 +812,80 @@ class AISdkNetworkTransformer {
       return this.handleToolConversation(chunk, newConversation, metadata);
     }
     if (chunk.type === "network-execution-event-step-finish") {
-      const newMessage = {
-        id: `network-execution-event-step-finish-${chunk.runId}-${Date.now()}`,
-        role: "assistant",
-        parts: [
+      const lastMessage = newConversation[newConversation.length - 1];
+      if (!lastMessage || lastMessage.role !== "assistant") return newConversation;
+      const agentChunk = chunk.payload;
+      const parts = [...lastMessage.parts];
+      const textPartIndex = parts.findIndex((part) => part.type === "text");
+      if (textPartIndex === -1) {
+        parts.push({
+          type: "text",
+          text: agentChunk.result,
+          state: "done"
+        });
+        return [
+          ...newConversation.slice(0, -1),
           {
-            type: "text",
-            text: chunk.payload?.result || "",
-            state: "done"
+            ...lastMessage,
+            parts
           }
-        ],
-        metadata
-      };
-      return [...newConversation, newMessage];
+        ];
+      }
+      const textPart = parts[textPartIndex];
+      if (textPart.type === "text") {
+        parts[textPartIndex] = {
+          ...textPart,
+          state: "done"
+        };
+        return [
+          ...newConversation.slice(0, -1),
+          {
+            ...lastMessage,
+            parts
+          }
+        ];
+      }
+      return newConversation;
     }
     return newConversation;
   }
+  handleRoutingAgentConversation = (chunk, newConversation) => {
+    const lastMessage = newConversation[newConversation.length - 1];
+    if (!lastMessage || lastMessage.role !== "assistant") return newConversation;
+    const agentChunk = chunk.payload;
+    const parts = [...lastMessage.parts];
+    const textPartIndex = parts.findIndex((part) => part.type === "text");
+    if (textPartIndex === -1) {
+      parts.push({
+        type: "text",
+        text: agentChunk.text,
+        state: "streaming"
+      });
+      return [
+        ...newConversation.slice(0, -1),
+        {
+          ...lastMessage,
+          parts
+        }
+      ];
+    }
+    const textPart = parts[textPartIndex];
+    if (textPart.type === "text") {
+      parts[textPartIndex] = {
+        ...textPart,
+        text: textPart.text + agentChunk.text,
+        state: "streaming"
+      };
+      return [
+        ...newConversation.slice(0, -1),
+        {
+          ...lastMessage,
+          parts
+        }
+      ];
+    }
+    return newConversation;
+  };
   handleAgentConversation = (chunk, newConversation, metadata) => {
     if (chunk.type === "agent-execution-start") {
       const primitiveId = chunk.payload?.args?.primitiveId;
@@ -853,92 +1168,63 @@ class AISdkNetworkTransformer {
   };
 }
 
-const resolveInitialMessages = (messages) => {
-  return messages.map((message) => {
-    const networkPart = message.parts.find((part) => part.type === "text" && part.text.includes('"isNetwork":true'));
-    if (networkPart && networkPart.type === "text") {
-      try {
-        const json = JSON.parse(networkPart.text);
-        if (json.isNetwork === true) {
-          const selectionReason = json.selectionReason || "";
-          const primitiveType = json.primitiveType || "";
-          const primitiveId = json.primitiveId || "";
-          const finalResult = json.finalResult;
-          const toolCalls = finalResult?.toolCalls || [];
-          const childMessages = [];
-          for (const toolCall of toolCalls) {
-            if (toolCall.type === "tool-call" && toolCall.payload) {
-              const toolCallId = toolCall.payload.toolCallId;
-              let toolResult;
-              for (const message2 of finalResult?.messages || []) {
-                for (const part of message2.content || []) {
-                  if (typeof part === "object" && part.type === "tool-result" && part.toolCallId === toolCallId) {
-                    toolResult = part;
-                    break;
-                  }
-                }
-              }
-              const isWorkflow = Boolean(toolResult?.result?.result?.steps);
-              childMessages.push({
-                type: "tool",
-                toolCallId: toolCall.payload.toolCallId,
-                toolName: toolCall.payload.toolName,
-                args: toolCall.payload.args,
-                toolOutput: isWorkflow ? toolResult?.result?.result : toolResult?.result
-              });
-            }
-          }
-          if (finalResult && finalResult.text) {
-            childMessages.push({
-              type: "text",
-              content: finalResult.text
-            });
-          }
-          const result = {
-            childMessages,
-            result: finalResult?.text || ""
-          };
-          console.log("json", json);
-          const nextMessage = {
-            role: "assistant",
-            parts: [
-              {
-                type: "dynamic-tool",
-                toolCallId: primitiveId,
-                toolName: primitiveId,
-                state: "output-available",
-                input: json.input,
-                output: result
-              }
-            ],
-            id: message.id,
-            metadata: {
-              ...message.metadata,
-              mode: "network",
-              selectionReason,
-              agentInput: json.input,
-              from: primitiveType === "agent" ? "AGENT" : "WORKFLOW"
-            }
-          };
-          return nextMessage;
-        }
-      } catch (error) {
-        return message;
+const fromCoreUserMessageToUIMessage = (coreUserMessage) => {
+  const id = `user-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+  const parts = typeof coreUserMessage.content === "string" ? [
+    {
+      type: "text",
+      text: coreUserMessage.content
+    }
+  ] : coreUserMessage.content.map((part) => {
+    switch (part.type) {
+      case "text": {
+        return {
+          type: "text",
+          text: part.text
+        };
+      }
+      case "image": {
+        const url = typeof part.image === "string" ? part.image : part.image instanceof URL ? part.image.toString() : "";
+        return {
+          type: "file",
+          mediaType: part.mimeType ?? "image/*",
+          url
+        };
+      }
+      case "file": {
+        const url = typeof part.data === "string" ? part.data : part.data instanceof URL ? part.data.toString() : "";
+        return {
+          type: "file",
+          mediaType: part.mimeType,
+          url,
+          ...part.filename !== void 0 ? { filename: part.filename } : {}
+        };
+      }
+      default: {
+        const exhaustiveCheck = part;
+        throw new Error(`Unhandled content part type: ${exhaustiveCheck.type}`);
       }
     }
-    return message;
   });
+  return {
+    id,
+    role: "user",
+    parts
+  };
 };
 
 const useChat = ({ agentId, initializeMessages }) => {
+  const _currentRunId = useRef(void 0);
+  const _onChunk = useRef(void 0);
   const [messages, setMessages] = useState(
     () => resolveInitialMessages(initializeMessages?.() || [])
   );
+  const [toolCallApprovals, setToolCallApprovals] = useState({});
   const baseClient = useMastraClient();
   const [isRunning, setIsRunning] = useState(false);
   const generate = async ({
     coreUserMessages,
-    runtimeContext,
+    requestContext,
     threadId,
     modelSettings,
     signal,
@@ -976,7 +1262,7 @@ const useChat = ({ agentId, initializeMessages }) => {
         topP
       },
       instructions,
-      runtimeContext,
+      requestContext,
       ...threadId ? { threadId, resourceId: agentId } : {},
       providerOptions
     });
@@ -992,7 +1278,7 @@ const useChat = ({ agentId, initializeMessages }) => {
       setMessages((prev) => [...prev, ...mastraUIMessages]);
     }
   };
-  const stream = async ({ coreUserMessages, runtimeContext, threadId, onChunk, modelSettings, signal }) => {
+  const stream = async ({ coreUserMessages, requestContext, threadId, onChunk, modelSettings, signal }) => {
     const {
       frequencyPenalty,
       presencePenalty,
@@ -1003,7 +1289,8 @@ const useChat = ({ agentId, initializeMessages }) => {
       topP,
       instructions,
       providerOptions,
-      maxSteps
+      maxSteps,
+      requireToolApproval
     } = modelSettings || {};
     setIsRunning(true);
     const clientWithAbort = new MastraClient({
@@ -1011,9 +1298,10 @@ const useChat = ({ agentId, initializeMessages }) => {
       abortSignal: signal
     });
     const agent = clientWithAbort.getAgent(agentId);
+    const runId = agentId;
     const response = await agent.stream({
       messages: coreUserMessages,
-      runId: agentId,
+      runId,
       maxSteps,
       modelSettings: {
         frequencyPenalty,
@@ -1025,19 +1313,16 @@ const useChat = ({ agentId, initializeMessages }) => {
         topP
       },
       instructions,
-      runtimeContext,
+      requestContext,
       ...threadId ? { threadId, resourceId: agentId } : {},
-      providerOptions
+      providerOptions,
+      requireToolApproval
     });
-    if (!response.body) {
-      setIsRunning(false);
-      throw new Error("[Stream] No response body");
-    }
+    _onChunk.current = onChunk;
+    _currentRunId.current = runId;
     await response.processDataStream({
       onChunk: async (chunk) => {
-        flushSync(() => {
-          setMessages((prev) => toUIMessage({ chunk, conversation: prev, metadata: { mode: "stream" } }));
-        });
+        setMessages((prev) => toUIMessage({ chunk, conversation: prev, metadata: { mode: "stream" } }));
         onChunk?.(chunk);
       }
     });
@@ -1045,7 +1330,7 @@ const useChat = ({ agentId, initializeMessages }) => {
   };
   const network = async ({
     coreUserMessages,
-    runtimeContext,
+    requestContext,
     threadId,
     onNetworkChunk,
     modelSettings,
@@ -1071,30 +1356,399 @@ const useChat = ({ agentId, initializeMessages }) => {
         topP
       },
       runId: agentId,
-      runtimeContext,
+      requestContext,
       ...threadId ? { thread: threadId, resourceId: agentId } : {}
     });
     const transformer = new AISdkNetworkTransformer();
     await response.processDataStream({
       onChunk: async (chunk) => {
-        flushSync(() => {
-          setMessages((prev) => transformer.transform({ chunk, conversation: prev, metadata: { mode: "network" } }));
-        });
+        setMessages((prev) => transformer.transform({ chunk, conversation: prev, metadata: { mode: "network" } }));
         onNetworkChunk?.(chunk);
       }
     });
     setIsRunning(false);
   };
+  const handleCancelRun = () => {
+    setIsRunning(false);
+    _currentRunId.current = void 0;
+    _onChunk.current = void 0;
+  };
+  const approveToolCall = async (toolCallId) => {
+    const onChunk = _onChunk.current;
+    const currentRunId = _currentRunId.current;
+    if (!currentRunId)
+      return console.info("[approveToolCall] approveToolCall can only be called after a stream has started");
+    setIsRunning(true);
+    setToolCallApprovals((prev) => ({ ...prev, [toolCallId]: { status: "approved" } }));
+    const agent = baseClient.getAgent(agentId);
+    const response = await agent.approveToolCall({ runId: currentRunId, toolCallId });
+    await response.processDataStream({
+      onChunk: async (chunk) => {
+        setMessages((prev) => toUIMessage({ chunk, conversation: prev, metadata: { mode: "stream" } }));
+        onChunk?.(chunk);
+      }
+    });
+    setIsRunning(false);
+  };
+  const declineToolCall = async (toolCallId) => {
+    const onChunk = _onChunk.current;
+    const currentRunId = _currentRunId.current;
+    if (!currentRunId)
+      return console.info("[declineToolCall] declineToolCall can only be called after a stream has started");
+    setIsRunning(true);
+    setToolCallApprovals((prev) => ({ ...prev, [toolCallId]: { status: "declined" } }));
+    const agent = baseClient.getAgent(agentId);
+    const response = await agent.declineToolCall({ runId: currentRunId, toolCallId });
+    await response.processDataStream({
+      onChunk: async (chunk) => {
+        setMessages((prev) => toUIMessage({ chunk, conversation: prev, metadata: { mode: "stream" } }));
+        onChunk?.(chunk);
+      }
+    });
+    setIsRunning(false);
+  };
+  const sendMessage = async ({ mode = "stream", ...args }) => {
+    const nextMessage = { role: "user", content: [{ type: "text", text: args.message }] };
+    const coreUserMessages = [nextMessage];
+    if (args.coreUserMessages) {
+      coreUserMessages.push(...args.coreUserMessages);
+    }
+    const uiMessages = coreUserMessages.map(fromCoreUserMessageToUIMessage);
+    setMessages((s) => [...s, ...uiMessages]);
+    if (mode === "generate") {
+      await generate({ ...args, coreUserMessages });
+    } else if (mode === "stream") {
+      await stream({ ...args, coreUserMessages });
+    } else if (mode === "network") {
+      await network({ ...args, coreUserMessages });
+    }
+  };
   return {
-    network,
-    stream,
-    generate,
+    setMessages,
+    sendMessage,
     isRunning,
     messages,
-    setMessages,
-    cancelRun: () => setIsRunning(false)
+    approveToolCall,
+    declineToolCall,
+    cancelRun: handleCancelRun,
+    toolCallApprovals
+  };
+};
+
+const EntityContext = createContext({
+  expanded: false,
+  setExpanded: () => {
+  },
+  variant: "initial",
+  disabled: false
+});
+const EntityProvider = EntityContext.Provider;
+const useEntity = () => useContext(EntityContext);
+
+const IconSizes = {
+  sm: "mastra:[&>svg]:size-3",
+  md: "mastra:[&>svg]:size-4",
+  lg: "mastra:[&>svg]:size-5"
+};
+const Icon = ({ children, className, size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || IconSizes[size], ...props, children });
+};
+
+const Entity = ({
+  className,
+  variant = "initial",
+  initialExpanded = false,
+  disabled = false,
+  ...props
+}) => {
+  const [expanded, setExpanded] = useState(initialExpanded);
+  return /* @__PURE__ */ jsx(EntityProvider, { value: { expanded, setExpanded, variant, disabled }, children: /* @__PURE__ */ jsx("div", { className, ...props }) });
+};
+const EntityTriggerClass = twMerge(
+  "mastra:aria-disabled:cursor-not-allowed mastra:aria-disabled:bg-surface5 mastra:aria-disabled:text-text3",
+  "mastra:aria-expanded:rounded-b-none mastra:aria-expanded:border-b-0",
+  "mastra:bg-surface3 mastra:text-text6 mastra:hover:bg-surface4 mastra:active:bg-surface5",
+  "mastra:rounded-lg mastra:py-2 mastra:px-4 mastra:border mastra:border-border1",
+  "mastra:cursor-pointer mastra:inline-flex mastra:items-center mastra:gap-1 mastra:font-mono"
+);
+const EntityTriggerVariantClasses = {
+  agent: "mastra:[&_svg.mastra-icon]:text-accent1",
+  workflow: "mastra:[&_svg.mastra-icon]:text-accent3",
+  tool: "mastra:[&_svg.mastra-icon]:text-accent6",
+  memory: "mastra:[&_svg.mastra-icon]:text-accent2",
+  initial: "mastra:[&_svg.mastra-icon]:text-text3"
+};
+const EntityTrigger = ({ className, children, ...props }) => {
+  const { expanded, setExpanded, variant, disabled } = useEntity();
+  const handleClick = (e) => {
+    if (disabled) return;
+    setExpanded(!expanded);
+    props?.onClick?.(e);
   };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: className || twMerge(EntityTriggerClass, !disabled && EntityTriggerVariantClasses[variant]),
+      ...props,
+      onClick: handleClick,
+      "aria-expanded": expanded,
+      "aria-disabled": disabled,
+      children
+    }
+  );
+};
+const EntityContentClass = twMerge(
+  "mastra:space-y-4",
+  "mastra:rounded-lg mastra:rounded-tl-none mastra:p-4 mastra:border mastra:border-border1 mastra:-mt-[0.5px]",
+  "mastra:bg-surface3 mastra:text-text6"
+);
+const EntityContent = ({ className, ...props }) => {
+  const { expanded } = useEntity();
+  if (!expanded) return null;
+  return /* @__PURE__ */ jsx("div", { className: className || EntityContentClass, ...props });
+};
+const EntityCaret = ({ className, ...props }) => {
+  const { expanded } = useEntity();
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(
+    ChevronDownIcon,
+    {
+      className: twMerge(
+        `mastra:text-text3 mastra:transition-transform mastra:duration-200 mastra:ease-in-out`,
+        expanded ? "mastra:rotate-0" : "mastra:-rotate-90",
+        className
+      ),
+      ...props
+    }
+  ) });
+};
+
+const ToolApprovalClass = twMerge(
+  "mastra:rounded-lg mastra:border mastra:border-border1 mastra:max-w-1/2 mastra:mt-2",
+  "mastra:bg-surface3 mastra:text-text6"
+);
+const ToolApproval = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || ToolApprovalClass, ...props });
+};
+const ToolApprovalTitleClass = twMerge("mastra:text-text6 mastra:inline-flex mastra:items-center mastra:gap-1");
+const ToolApprovalTitle = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || ToolApprovalTitleClass, ...props });
+};
+const ToolApprovalHeaderClass = twMerge(
+  "mastra:flex mastra:justify-between mastra:items-center mastra:gap-2",
+  "mastra:border-b mastra:border-border1 mastra:px-4 mastra:py-2"
+);
+const ToolApprovalHeader = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || ToolApprovalHeaderClass, ...props });
+};
+const ToolApprovalContentClass = twMerge("mastra:text-text6 mastra:p-4");
+const ToolApprovalContent = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || ToolApprovalContentClass, ...props });
+};
+const ToolApprovalActionsClass = twMerge("mastra:flex mastra:gap-2 mastra:items-center");
+const ToolApprovalActions = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || ToolApprovalActionsClass, ...props });
+};
+
+const EntryClass = "mastra:space-y-2";
+const Entry = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || EntryClass, ...props });
+};
+const EntryTitleClass = "mastra:font-mono mastra:text-sm mastra:text-text3";
+const EntryTitle = ({ className, as: Root = "h3", ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: className || EntryTitleClass, ...props });
+};
+
+async function highlight(code, lang) {
+  const out = await codeToHast(code, {
+    lang,
+    theme: "dracula-soft"
+  });
+  return toJsxRuntime(out, {
+    Fragment,
+    jsx,
+    jsxs
+  });
+}
+
+const Tooltip = ({ children }) => {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Root, { children }) });
+};
+const TooltipContentClass = "mastra:bg-surface4 mastra:text-text6 mastra mastra:rounded-lg mastra:py-1 mastra:px-2 mastra:text-xs mastra:border mastra:border-border1 mastra-tooltip-enter";
+const TooltipContent = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipContent$1, { className: className || TooltipContentClass, ...props, children }) });
+};
+const TooltipTrigger = (props) => {
+  return /* @__PURE__ */ jsx(TooltipTrigger$1, { ...props, asChild: true });
+};
+
+const IconButtonClass = "mastra:text-text3 mastra:hover:text-text6 mastra:active:text-text6 mastra:hover:bg-surface4 mastra:active:bg-surface5 mastra:rounded-md mastra:cursor-pointer";
+const IconButton = ({ children, tooltip, size = "md", className, ...props }) => {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...props,
+        className: className || twMerge(IconButtonClass, size === "md" && "mastra:p-0.5", size === "lg" && "mastra:p-1"),
+        children: /* @__PURE__ */ jsx(Icon, { size, children })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
+};
+
+const CodeBlockClass = "mastra:rounded-lg mastra:[&>pre]:p-4 mastra:overflow-hidden mastra:[&>pre]:!bg-surface4 mastra:[&>pre>code]:leading-5 mastra:relative";
+const CodeBlock = ({ code, language, className, cta }) => {
+  const [nodes, setNodes] = useState(null);
+  useLayoutEffect(() => {
+    void highlight(code, language).then(setNodes);
+  }, [language]);
+  return /* @__PURE__ */ jsxs("div", { className: className || CodeBlockClass, children: [
+    nodes ?? null,
+    cta
+  ] });
+};
+const CodeCopyButton = ({ code }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "mastra:absolute mastra:top-2 mastra:right-2", children: /* @__PURE__ */ jsx(IconButton, { tooltip: "Copy", onClick: handleCopy, children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}) }) });
+};
+
+const AgentIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    className: twMerge("mastra-icon", className),
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M8.5 15C10.3565 15 12.137 14.2625 13.4497 12.9497C14.7625 11.637 15.5 9.85652 15.5 8C15.5 6.14348 14.7625 4.36301 13.4497 3.05025C12.137 1.7375 10.3565 1 8.5 1C6.64348 1 4.86301 1.7375 3.55025 3.05025C2.2375 4.36301 1.5 6.14348 1.5 8C1.5 9.85652 2.2375 11.637 3.55025 12.9497C4.86301 14.2625 6.64348 15 8.5 15ZM5.621 10.879L4.611 11.889C3.84179 11.1198 3.31794 10.1398 3.1057 9.07291C2.89346 8.00601 3.00236 6.90013 3.41864 5.89512C3.83491 4.89012 4.53986 4.03112 5.44434 3.42676C6.34881 2.8224 7.41219 2.49983 8.5 2.49983C9.58781 2.49983 10.6512 2.8224 11.5557 3.42676C12.4601 4.03112 13.1651 4.89012 13.5814 5.89512C13.9976 6.90013 14.1065 8.00601 13.8943 9.07291C13.6821 10.1398 13.1582 11.1198 12.389 11.889L11.379 10.879C11.1004 10.6003 10.7696 10.3792 10.4055 10.2284C10.0414 10.0776 9.6511 9.99995 9.257 10H7.743C7.3489 9.99995 6.95865 10.0776 6.59455 10.2284C6.23045 10.3792 5.89963 10.6003 5.621 10.879Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M8.5 4C7.96957 4 7.46086 4.21071 7.08579 4.58579C6.71071 4.96086 6.5 5.46957 6.5 6V6.5C6.5 7.03043 6.71071 7.53914 7.08579 7.91421C7.46086 8.28929 7.96957 8.5 8.5 8.5C9.03043 8.5 9.53914 8.28929 9.91421 7.91421C10.2893 7.53914 10.5 7.03043 10.5 6.5V6C10.5 5.46957 10.2893 4.96086 9.91421 4.58579C9.53914 4.21071 9.03043 4 8.5 4Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+
+const ToolsIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    className: twMerge("mastra-icon", className),
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7.5605 1.42351C8.0791 0.904904 8.92215 0.906157 9.4395 1.42351L10.6922 2.67617C11.2108 3.19477 11.2095 4.03782 10.6922 4.55517L9.4395 5.80783C8.9209 6.32643 8.07785 6.32518 7.5605 5.80783L6.30784 4.55517C5.78923 4.03656 5.79049 3.19352 6.30784 2.67617L7.5605 1.42351ZM3.17618 5.80783C3.69478 5.28923 4.53782 5.29048 5.05517 5.80783L6.30784 7.0605C6.82644 7.5791 6.82519 8.42214 6.30784 8.93949L5.05517 10.1922C4.53657 10.7108 3.69353 10.7095 3.17618 10.1922L1.92351 8.93949C1.40491 8.42089 1.40616 7.57785 1.92351 7.0605L3.17618 5.80783ZM11.9448 5.80783C12.4634 5.28923 13.3065 5.29048 13.8238 5.80783L15.0765 7.0605C15.5951 7.5791 15.5938 8.42214 15.0765 8.93949L13.8238 10.1922C13.3052 10.7108 12.4622 10.7095 11.9448 10.1922L10.6922 8.93949C10.1736 8.42089 10.1748 7.57785 10.6922 7.0605L11.9448 5.80783ZM7.5605 10.1922C8.0791 9.67355 8.92215 9.67481 9.4395 10.1922L10.6922 11.4448C11.2108 11.9634 11.2095 12.8065 10.6922 13.3238L9.4395 14.5765C8.9209 15.0951 8.07785 15.0938 7.5605 14.5765L6.30784 13.3238C5.78923 12.8052 5.79049 11.9622 6.30784 11.4448L7.5605 10.1922Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+
+const WorkflowIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    className: twMerge("mastra-icon", className),
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6.24388 2.4018C6.24388 2.0394 6.53767 1.74561 6.90008 1.74561H10.0991C10.4614 1.74561 10.7553 2.0394 10.7553 2.4018V4.57546C10.7553 4.93787 10.4614 5.23166 10.0991 5.23166H9.31982V7.35469L10.0033 9.22664C9.90442 9.20146 9.80035 9.1761 9.6915 9.14986L9.62652 9.13422C9.30473 9.05687 8.92256 8.96501 8.61993 8.84491C8.5819 8.82981 8.54147 8.81292 8.49957 8.79391C8.45767 8.81292 8.41724 8.82981 8.3792 8.84491C8.07657 8.96501 7.6944 9.05687 7.37261 9.13422L7.30763 9.14986C7.19879 9.1761 7.09471 9.20146 6.99577 9.22664L7.67932 7.35469V5.23166H6.90008C6.53767 5.23166 6.24388 4.93787 6.24388 4.57546V2.4018ZM6.99577 9.22664C6.99577 9.22664 6.99578 9.22664 6.99577 9.22664L6.43283 10.7683H6.81806C7.18047 10.7683 7.47426 11.0622 7.47426 11.4245V13.5982C7.47426 13.9606 7.18047 14.2544 6.81806 14.2544H3.61909C3.25668 14.2544 2.96289 13.9606 2.96289 13.5982V11.4245C2.96289 11.0622 3.25668 10.7683 3.61909 10.7683H4.26617C4.2921 10.4663 4.32783 10.1494 4.37744 9.85171C4.43762 9.49063 4.52982 9.08135 4.68998 8.76102C4.93975 8.2615 5.44743 8.01751 5.7771 7.88788C6.14684 7.74249 6.57537 7.63889 6.92317 7.55505C7.24707 7.47696 7.49576 7.41679 7.67932 7.35469L6.99577 9.22664ZM6.43283 10.7683L6.99577 9.22664C6.75846 9.28705 6.55067 9.34646 6.37745 9.41458C6.22784 9.47341 6.1623 9.51712 6.14023 9.53254C6.09752 9.63631 6.04409 9.83055 5.99562 10.1214C5.96201 10.3231 5.93498 10.5439 5.91341 10.7683H6.43283ZM10.0033 9.22664L9.31982 7.35469C9.50338 7.41679 9.75206 7.47696 10.076 7.55505C10.4238 7.63889 10.8523 7.74249 11.2221 7.88788C11.5517 8.01751 12.0594 8.2615 12.3091 8.76102C12.4693 9.08135 12.5615 9.49063 12.6217 9.85171C12.6713 10.1494 12.707 10.4663 12.733 10.7683H13.38C13.7424 10.7683 14.0362 11.0622 14.0362 11.4245V13.5982C14.0362 13.9606 13.7424 14.2544 13.38 14.2544H10.1811C9.81867 14.2544 9.52488 13.9606 9.52488 13.5982V11.4245C9.52488 11.0622 9.81867 10.7683 10.1811 10.7683H10.5663L10.0033 9.22664ZM10.0033 9.22664L10.5663 10.7683H11.0857C11.0642 10.5439 11.0372 10.3231 11.0035 10.1214C10.9551 9.83055 10.9016 9.63631 10.8589 9.53254C10.8369 9.51712 10.7713 9.47341 10.6217 9.41458C10.4485 9.34646 10.2407 9.28705 10.0033 9.22664Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+
+const MessageClass = "mastra:flex mastra:flex-col mastra:w-full mastra:py-4 mastra:gap-2 mastra:group";
+const Message = ({ position, className, children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: className || twMerge(
+        MessageClass,
+        position === "left" ? "" : "mastra:items-end mastra:[&_.mastra-message-content]:bg-surface4 mastra:[&_.mastra-message-content]:px-4"
+      ),
+      ...props,
+      children
+    }
+  );
+};
+const MessageContentClass = "mastra:max-w-4/5 mastra:py-2 mastra:text-text6 mastra:rounded-lg mastra-message-content mastra:text-md";
+const MessageContent = ({ children, className, isStreaming, ...props }) => {
+  return /* @__PURE__ */ jsxs("div", { className: className || MessageContentClass, ...props, children: [
+    children,
+    isStreaming && /* @__PURE__ */ jsx(MessageStreaming, {})
+  ] });
+};
+const MessageActionsClass = "mastra:gap-2 mastra:flex mastra:opacity-0 mastra:group-hover:opacity-100 mastra:group-focus-within:opacity-100 mastra:items-center";
+const MessageActions = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || MessageActionsClass, ...props, children });
+};
+const MessageUsagesClass = "mastra:flex mastra:gap-2 mastra:items-center";
+const MessageUsages = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: className || MessageUsagesClass, ...props, children });
+};
+const MessageUsageClass = "mastra:flex mastra:gap-2 mastra:items-center mastra:font-mono mastra:text-xs mastra:bg-surface3 mastra:rounded-lg mastra:px-2 mastra:py-1";
+const MessageUsage = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx("dl", { className: className || MessageUsageClass, ...props, children });
+};
+const MessageUsageEntryClass = "mastra:text-text3 mastra:text-xs mastra:flex mastra:gap-1 mastra:items-center";
+const MessageUsageEntry = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx("dt", { className: className || MessageUsageEntryClass, ...props, children });
+};
+const MessageUsageValueClass = "mastra:text-text6 mastra:text-xs";
+const MessageUsageValue = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx("dd", { className: className || MessageUsageValueClass, ...props, children });
+};
+const MessageListClass = "mastra:overflow-y-auto mastra:h-full mastra-list";
+const MessageList = ({ children, className, ...props }) => {
+  const listRef = useRef(null);
+  useEffect(() => {
+    const scrollToBottom = () => {
+      if (!listRef.current) return;
+      listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
+    };
+    requestAnimationFrame(scrollToBottom);
+  });
+  return /* @__PURE__ */ jsx("div", { className: className || MessageListClass, ...props, ref: listRef, children });
+};
+const MessageStreamingClass = "mastra:inline-block mastra:w-[2px] mastra:h-[1em] mastra:bg-text5 mastra:ml-0.5 mastra:align-text-bottom mastra:animate-pulse";
+const MessageStreaming = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("span", { className: className || MessageStreamingClass, ...props });
 };
 
-export { MastraReactProvider, mapWorkflowStreamChunkToWatchResult, toAssistantUIMessage, toUIMessage, useChat, useMastraClient };
-//# sourceMappingURL=index.es.js.map
+export { AgentIcon, CodeBlock, CodeBlockClass, CodeCopyButton, Entity, EntityCaret, EntityContent, EntityContentClass, EntityTrigger, EntityTriggerClass, EntityTriggerVariantClasses, Entry, EntryClass, EntryTitle, EntryTitleClass, Icon, IconButton, IconButtonClass, IconSizes, MastraReactProvider, Message, MessageActions, MessageActionsClass, MessageClass, MessageContent, MessageContentClass, MessageList, MessageListClass, MessageStreaming, MessageStreamingClass, MessageUsage, MessageUsageClass, MessageUsageEntry, MessageUsageEntryClass, MessageUsageValue, MessageUsageValueClass, MessageUsages, MessageUsagesClass, ToolApproval, ToolApprovalActions, ToolApprovalActionsClass, ToolApprovalClass, ToolApprovalContent, ToolApprovalContentClass, ToolApprovalHeader, ToolApprovalHeaderClass, ToolApprovalTitle, ToolApprovalTitleClass, ToolsIcon, Tooltip, TooltipContent, TooltipContentClass, TooltipTrigger, WorkflowIcon, mapWorkflowStreamChunkToWatchResult, resolveToChildMessages, toAssistantUIMessage, toUIMessage, useChat, useEntity, useMastraClient };
+//# sourceMappingURL=index.js.map