@mastra/playground-ui 6.2.2-alpha.0 → 6.2.2-alpha.2

package/dist/index.es.js

@@ -4287,7 +4287,10 @@ const useCodemirrorTheme$2 = () => {
     []
   );
 };
-const SyntaxHighlighter$2 = ({ data, className }) => {
+const SyntaxHighlighter$2 = ({
+  data,
+  className
+}) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
@@ -4460,7 +4463,7 @@ const NetworkChoiceMetadataDialogTrigger = ({
   ] });
 };
 
-const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
+const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
@@ -4468,7 +4471,7 @@ const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
-  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result });
   return /* @__PURE__ */ jsx(
     BadgeWrapper,
     {
@@ -4486,9 +4489,13 @@ const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
           argSlot
         ] }),
-        result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        resultSlot !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
           resultSlot
+        ] }),
+        toolOutput.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool output" }),
+          /* @__PURE__ */ jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: toolOutput }) })
         ] })
       ] })
     }
@@ -8728,6 +8735,7 @@ const ToolFallbackInner = ({ toolName, result, args }) => {
       toolName,
       args,
       result,
+      toolOutput: args?.__mastraMetadata?.toolOutput || [],
       networkMetadata: args?.__mastraMetadata?.networkMetadata
     }
   );
@@ -9876,6 +9884,34 @@ const handleStreamChunk = async ({
     case "tool-output": {
       if (chunk.payload.output?.type.startsWith("workflow-")) {
         handleWorkflowChunk({ workflowChunk: chunk.payload.output, setMessages, entityName: chunk.payload.toolName });
+      } else {
+        setMessages((currentConversation) => {
+          const lastMessage = currentConversation[currentConversation.length - 1];
+          if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+            const updatedContent = lastMessage.content.map((part) => {
+              if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
+                const existingToolOutput = part.args?.__mastraMetadata?.toolOutput || [];
+                return {
+                  ...part,
+                  args: {
+                    ...part.args,
+                    __mastraMetadata: {
+                      ...part.args?.__mastraMetadata,
+                      toolOutput: [...existingToolOutput, chunk?.payload?.output]
+                    }
+                  }
+                };
+              }
+              return part;
+            });
+            const updatedMessage = {
+              ...lastMessage,
+              content: updatedContent
+            };
+            return [...currentConversation.slice(0, -1), updatedMessage];
+          }
+          return currentConversation;
+        });
       }
       break;
     }