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

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @mastra/playground-ui
 
+## 6.2.2-alpha.2
+
+### Patch Changes
+
+- dependencies updates: ([#8034](https://github.com/mastra-ai/mastra/pull/8034))
+  - Updated dependency [`zod@^4.1.9` ↗︎](https://www.npmjs.com/package/zod/v/4.1.9) (from `^4.1.8`, in `dependencies`)
+
+- dependencies updates: ([#8050](https://github.com/mastra-ai/mastra/pull/8050))
+  - Updated dependency [`@xyflow/react@^12.8.5` ↗︎](https://www.npmjs.com/package/@xyflow/react/v/12.8.5) (from `^12.8.4`, in `dependencies`)
+
+- Update Peerdeps for packages based on core minor bump ([#8025](https://github.com/mastra-ai/mastra/pull/8025))
+
+- Updated dependencies [[`cf34503`](https://github.com/mastra-ai/mastra/commit/cf345031de4e157f29087946449e60b965e9c8a9), [`6b4b1e4`](https://github.com/mastra-ai/mastra/commit/6b4b1e4235428d39e51cbda9832704c0ba70ab32), [`3469fca`](https://github.com/mastra-ai/mastra/commit/3469fca7bb7e5e19369ff9f7044716a5e4b02585), [`c4a8204`](https://github.com/mastra-ai/mastra/commit/c4a82046bfd241d6044e234bc5917d5a01fe6b55)]:
+  - @mastra/core@0.18.0-alpha.2
+  - @mastra/client-js@0.13.2-alpha.2
+
+## 6.2.2-alpha.1
+
+### Patch Changes
+
+- dependencies updates: ([#8019](https://github.com/mastra-ai/mastra/pull/8019))
+  - Updated dependency [`motion@^12.23.13` ↗︎](https://www.npmjs.com/package/motion/v/12.23.13) (from `^12.23.12`, in `dependencies`)
+
+- show the tool-output stream in the playground for streamVNext ([#7983](https://github.com/mastra-ai/mastra/pull/7983))
+
+- Updated dependencies [[`c45298a`](https://github.com/mastra-ai/mastra/commit/c45298a0a0791db35cf79f1199d77004da0704cb)]:
+  - @mastra/core@0.17.2-alpha.1
+  - @mastra/client-js@0.13.2-alpha.1
+
 ## 6.2.2-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -4321,7 +4321,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__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
@@ -4494,7 +4497,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);
@@ -4502,7 +4505,7 @@ const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
   } catch {
     argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
-  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result });
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
@@ -4520,9 +4523,13 @@ const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
           argSlot
         ] }),
-        result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        resultSlot !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
           resultSlot
+        ] }),
+        toolOutput.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool output" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: toolOutput }) })
         ] })
       ] })
     }
@@ -8762,6 +8769,7 @@ const ToolFallbackInner = ({ toolName, result, args }) => {
       toolName,
       args,
       result,
+      toolOutput: args?.__mastraMetadata?.toolOutput || [],
       networkMetadata: args?.__mastraMetadata?.networkMetadata
     }
   );
@@ -9910,6 +9918,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;
     }