@mastra/playground-ui 5.1.21-alpha.1 → 5.1.21-alpha.3

package/dist/index.cjs.js

@@ -5412,6 +5412,8 @@ function MastraRuntimeProvider({
     topP,
     instructions,
     chatWithGenerate,
+    chatWithGenerateVNext,
+    chatWithStreamVNext,
     providerOptions
   } = settings?.modelSettings ?? {};
   const toolCallIdToName = React.useRef({});
@@ -5489,6 +5491,306 @@ function MastraRuntimeProvider({
     });
     const agent = clientWithAbort.getAgent(agentId);
     try {
+      let handleGenerateResponse = function(generatedResponse) {
+        if (generatedResponse.response && "messages" in generatedResponse.response) {
+          const latestMessage = generatedResponse.response.messages.reduce(
+            (acc, message2) => {
+              const _content = Array.isArray(acc.content) ? acc.content : [];
+              if (typeof message2.content === "string") {
+                return {
+                  ...acc,
+                  content: [
+                    ..._content,
+                    ...generatedResponse.reasoning ? [{ type: "reasoning", text: generatedResponse.reasoning }] : [],
+                    {
+                      type: "text",
+                      text: message2.content
+                    }
+                  ]
+                };
+              }
+              if (message2.role === "assistant") {
+                const toolCallContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-call") : void 0;
+                const reasoningContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "reasoning") : void 0;
+                if (toolCallContent) {
+                  const newContent = message2.content.map((c) => {
+                    if (c.type === "tool-call" && c.toolCallId === toolCallContent?.toolCallId) {
+                      return {
+                        ...c,
+                        toolCallId: toolCallContent.toolCallId,
+                        toolName: toolCallContent.toolName,
+                        args: toolCallContent.input
+                      };
+                    }
+                    return c;
+                  });
+                  const containsToolCall = newContent.some((c) => c.type === "tool-call");
+                  return {
+                    ...acc,
+                    content: containsToolCall ? [...reasoningContent ? [reasoningContent] : [], ...newContent] : [..._content, ...reasoningContent ? [reasoningContent] : [], toolCallContent]
+                  };
+                }
+                const textContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "text" && content.text) : void 0;
+                if (textContent) {
+                  return {
+                    ...acc,
+                    content: [..._content, ...reasoningContent ? [reasoningContent] : [], textContent]
+                  };
+                }
+              }
+              if (message2.role === "tool") {
+                const toolResult = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-result") : void 0;
+                if (toolResult) {
+                  const newContent = _content.map((c) => {
+                    if (c.type === "tool-call" && c.toolCallId === toolResult?.toolCallId) {
+                      return { ...c, result: toolResult.output?.value };
+                    }
+                    return c;
+                  });
+                  const containsToolCall = newContent.some((c) => c.type === "tool-call");
+                  return {
+                    ...acc,
+                    content: containsToolCall ? newContent : [
+                      ..._content,
+                      { type: "tool-result", toolCallId: toolResult.toolCallId, result: toolResult.output?.value }
+                    ]
+                  };
+                }
+                return {
+                  ...acc,
+                  content: [..._content, toolResult]
+                };
+              }
+              return acc;
+            },
+            { role: "assistant", content: [] }
+          );
+          setMessages((currentConversation) => [...currentConversation, latestMessage]);
+          if (generatedResponse.finishReason) {
+            handleFinishReason(generatedResponse.finishReason);
+          }
+        }
+      };
+      if (chatWithGenerateVNext) {
+        const response = await agent.generateVNext({
+          messages: [
+            {
+              role: "user",
+              content: input
+            },
+            ...attachments
+          ],
+          runId: agentId,
+          modelSettings: {
+            frequencyPenalty,
+            presencePenalty,
+            maxRetries,
+            temperature,
+            topK,
+            topP,
+            maxOutputTokens: maxTokens
+          },
+          providerOptions,
+          instructions,
+          runtimeContext: runtimeContextInstance,
+          ...memory ? { threadId, resourceId: agentId } : {}
+        });
+        handleGenerateResponse(response);
+        setIsRunning(false);
+        return;
+      }
+      if (chatWithStreamVNext) {
+        let updater = function() {
+          setMessages((currentConversation) => {
+            const message2 = {
+              role: "assistant",
+              content: [{ type: "text", text: content }]
+            };
+            if (!assistantMessageAdded) {
+              assistantMessageAdded = true;
+              if (assistantToolCallAddedForUpdater) {
+                assistantToolCallAddedForUpdater = false;
+              }
+              return [...currentConversation, message2];
+            }
+            if (assistantToolCallAddedForUpdater) {
+              assistantToolCallAddedForUpdater = false;
+              return [...currentConversation, message2];
+            }
+            return [...currentConversation.slice(0, -1), message2];
+          });
+        };
+        const response = await agent.streamVNext({
+          messages: [
+            {
+              role: "user",
+              content: input
+            },
+            ...attachments
+          ],
+          runId: agentId,
+          modelSettings: {
+            frequencyPenalty,
+            presencePenalty,
+            maxRetries,
+            maxOutputTokens: maxTokens,
+            temperature,
+            topK,
+            topP
+          },
+          instructions,
+          runtimeContext: runtimeContextInstance,
+          ...memory ? { threadId, resourceId: agentId } : {},
+          providerOptions
+        });
+        if (!response.body) {
+          throw new Error("No response body");
+        }
+        let content = "";
+        let assistantMessageAdded = false;
+        let assistantToolCallAddedForUpdater = false;
+        let assistantToolCallAddedForContent = false;
+        await response.processDataStream({
+          onChunk: async (chunk) => {
+            switch (chunk.type) {
+              case "text-delta": {
+                if (assistantToolCallAddedForContent) {
+                  assistantToolCallAddedForContent = false;
+                  content = chunk.payload.text;
+                } else {
+                  content += chunk.payload.text;
+                }
+                console.log(chunk.payload.text, "VALUE");
+                updater();
+                break;
+              }
+              case "tool-call": {
+                setMessages((currentConversation) => {
+                  const lastMessage = currentConversation[currentConversation.length - 1];
+                  if (lastMessage && lastMessage.role === "assistant") {
+                    const updatedMessage = {
+                      ...lastMessage,
+                      content: Array.isArray(lastMessage.content) ? [
+                        ...lastMessage.content,
+                        {
+                          type: "tool-call",
+                          toolCallId: chunk.payload.toolCallId,
+                          toolName: chunk.payload.toolName,
+                          args: chunk.payload.args
+                        }
+                      ] : [
+                        ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
+                        {
+                          type: "tool-call",
+                          toolCallId: chunk.payload.toolCallId,
+                          toolName: chunk.payload.toolName,
+                          args: chunk.payload.args
+                        }
+                      ]
+                    };
+                    assistantToolCallAddedForUpdater = true;
+                    assistantToolCallAddedForContent = true;
+                    return [...currentConversation.slice(0, -1), updatedMessage];
+                  }
+                  const newMessage = {
+                    role: "assistant",
+                    content: [
+                      { type: "text", text: content },
+                      {
+                        type: "tool-call",
+                        toolCallId: chunk.payload.toolCallId,
+                        toolName: chunk.payload.toolName,
+                        args: chunk.payload.args
+                      }
+                    ]
+                  };
+                  assistantToolCallAddedForUpdater = true;
+                  assistantToolCallAddedForContent = true;
+                  return [...currentConversation, newMessage];
+                });
+                toolCallIdToName.current[chunk.payload.toolCallId] = chunk.payload.toolName;
+                break;
+              }
+              case "tool-result": {
+                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) {
+                        return {
+                          ...part,
+                          result: chunk.payload.result
+                        };
+                      }
+                      return part;
+                    });
+                    const updatedMessage = {
+                      ...lastMessage,
+                      content: updatedContent
+                    };
+                    return [...currentConversation.slice(0, -1), updatedMessage];
+                  }
+                  return currentConversation;
+                });
+                try {
+                  const toolName = toolCallIdToName.current[chunk.payload.toolCallId];
+                  if (toolName === "updateWorkingMemory" && chunk.payload.result?.success) {
+                    await refreshWorkingMemory?.();
+                  }
+                } finally {
+                  delete toolCallIdToName.current[chunk.payload.toolCallId];
+                }
+                break;
+              }
+              case "error": {
+                if (typeof chunk.payload.error === "string") {
+                  throw new Error(chunk.payload.error);
+                }
+                break;
+              }
+              case "finish": {
+                handleFinishReason(chunk.payload.finishReason);
+                break;
+              }
+              case "reasoning-delta": {
+                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 === "reasoning") {
+                        return {
+                          ...part,
+                          text: part.text + chunk.payload.text
+                        };
+                      }
+                      return part;
+                    });
+                    const updatedMessage = {
+                      ...lastMessage,
+                      content: updatedContent
+                    };
+                    return [...currentConversation.slice(0, -1), updatedMessage];
+                  }
+                  const newMessage = {
+                    role: "assistant",
+                    content: [
+                      {
+                        type: "reasoning",
+                        text: chunk.payload.text
+                      },
+                      { type: "text", text: content }
+                    ]
+                  };
+                  return [...currentConversation, newMessage];
+                });
+                break;
+              }
+            }
+          }
+        });
+        setIsRunning(false);
+        return;
+      }
       if (chatWithGenerate) {
         const generateResponse = await agent.generate({
           messages: [
@@ -6655,28 +6957,47 @@ const AgentAdvancedSettings = () => {
   ] }) });
 };
 
-const AgentSettings = () => {
+const AgentSettings = ({ modelVersion }) => {
   const { settings, setSettings, resetAll } = useAgentSettings();
+  let radioValue;
+  if (modelVersion === "v2") {
+    radioValue = settings?.modelSettings?.chatWithGenerateVNext ? "generateVNext" : "streamVNext";
+  } else {
+    radioValue = settings?.modelSettings?.chatWithGenerate ? "generate" : "stream";
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 text-xs py-2 pb-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Chat Method", children: /* @__PURE__ */ jsxRuntime.jsxs(
         RadioGroup,
         {
           orientation: "horizontal",
-          value: settings?.modelSettings?.chatWithGenerate ? "generate" : "stream",
+          value: radioValue,
           onValueChange: (value) => setSettings({
             ...settings,
-            modelSettings: { ...settings?.modelSettings, chatWithGenerate: value === "generate" }
+            modelSettings: {
+              ...settings?.modelSettings,
+              chatWithGenerate: value === "generate",
+              chatWithGenerateVNext: value === "generateVNext",
+              chatWithStreamVNext: value === "streamVNext"
+            }
           }),
           className: "flex flex-row gap-4",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generateVNext", id: "generateVNext", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generateVNext", children: "Generate vNext" })
+            ] }),
+            modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
+            ] }),
+            modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "streamVNext", id: "streamVNext", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamVNext", children: "Stream vNext" })
             ] })
           ]
         }
@@ -8046,8 +8367,8 @@ const Models = {
     icon: "openai.chat"
   },
   anthropic: {
-    models: anthropicModels?.map((model) => ({ provider: "anthropic", model, icon: "anthropic.chat" })),
-    icon: "anthropic.chat"
+    models: anthropicModels?.map((model) => ({ provider: "anthropic", model, icon: "anthropic.messages" })),
+    icon: "anthropic.messages"
   },
   google: {
     models: googleModels?.map((model) => ({ provider: "google", model, icon: "GOOGLE" })),