@mastra/playground-ui 7.0.0-beta.13 → 7.0.0-beta.14

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @mastra/playground-ui
 
+## 7.0.0-beta.14
+
+### Patch Changes
+
+- Change searchbar to search on input with debounce instead of on Enter key press ([#11138](https://github.com/mastra-ai/mastra/pull/11138))
+
+- Add support for AI SDK v6 (LanguageModelV3) ([#11191](https://github.com/mastra-ai/mastra/pull/11191))
+
+  Agents can now use `LanguageModelV3` models from AI SDK v6 beta providers like `@ai-sdk/openai@^3.0.0-beta`.
+
+  **New features:**
+  - Usage normalization: V3's nested usage format is normalized to Mastra's flat format with `reasoningTokens`, `cachedInputTokens`, and raw data preserved in a `raw` field
+
+  **Backward compatible:** All existing V1 and V2 models continue to work unchanged.
+
+- Updated dependencies [[`4f94ed8`](https://github.com/mastra-ai/mastra/commit/4f94ed8177abfde3ec536e3574883e075423350c), [`ac3cc23`](https://github.com/mastra-ai/mastra/commit/ac3cc2397d1966bc0fc2736a223abc449d3c7719), [`a86f4df`](https://github.com/mastra-ai/mastra/commit/a86f4df0407311e0d2ea49b9a541f0938810d6a9), [`029540c`](https://github.com/mastra-ai/mastra/commit/029540ca1e582fc2dd8d288ecd4a9b0f31a954ef), [`66741d1`](https://github.com/mastra-ai/mastra/commit/66741d1a99c4f42cf23a16109939e8348ac6852e), [`01b20fe`](https://github.com/mastra-ai/mastra/commit/01b20fefb7c67c2b7d79417598ef4e60256d1225), [`0dbf199`](https://github.com/mastra-ai/mastra/commit/0dbf199110f22192ce5c95b1c8148d4872b4d119), [`b7b0930`](https://github.com/mastra-ai/mastra/commit/b7b0930dbe72eade8d3882992f2f2db53220e4eb), [`a7ce182`](https://github.com/mastra-ai/mastra/commit/a7ce1822a8785ce45d62dd5c911af465e144f7d7)]:
+  - @mastra/core@1.0.0-beta.14
+  - @mastra/ai-sdk@1.0.0-beta.10
+  - @mastra/client-js@1.0.0-beta.14
+  - @mastra/react@0.1.0-beta.14
+
 ## 7.0.0-beta.13
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -9363,18 +9363,17 @@ const columns$4 = [
   }
 ];
 
-const themeClasses = {
-  light: "bg-gray-100 border-gray-300 text-gray-700",
-  dark: "bg-surface4 border-border1 text-icon6"
-};
-const Kbd = ({ children, theme = "dark" }) => {
-  const themeClass = themeClasses[theme];
-  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
-};
-
-const Searchbar = ({ onSearch, label, placeholder }) => {
+const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300 }) => {
   const id = React.useId();
   const inputRef = React.useRef(null);
+  const debouncedSearch = useDebounce.useDebouncedCallback((value) => {
+    onSearch(value);
+  }, debounceMs);
+  React.useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
   React.useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
@@ -9389,37 +9388,27 @@ const Searchbar = ({ onSearch, label, placeholder }) => {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.target);
-    const search = formData.get(id);
-    onSearch(search);
+  const handleChange = (e) => {
+    debouncedSearch(e.target.value);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: "focus-within:outline focus-within:outline-accent1 -outline-offset-2 border-sm border-icon-3 flex h-8 w-full items-center gap-2 overflow-hidden rounded-lg pl-2 pr-1",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "text-icon3 h-4 w-4" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id,
-              type: "text",
-              placeholder,
-              className: "bg-surface2 text-ui-md placeholder:text-icon-3 block h-8 w-full px-2 outline-none",
-              name: id,
-              ref: inputRef
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "↵ Enter" }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "focus-within:outline focus-within:outline-accent1 -outline-offset-2 border-sm border-icon-3 flex h-8 w-full items-center gap-2 overflow-hidden rounded-lg pl-2 pr-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "text-icon3 h-4 w-4" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id,
+          type: "text",
+          placeholder,
+          className: "bg-surface2 text-ui-md placeholder:text-icon-3 block h-8 w-full px-2 outline-none",
+          name: id,
+          ref: inputRef,
+          onChange: handleChange
+        }
+      )
+    ] })
+  ] });
 };
 const SearchbarWrapper = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 border-b-sm border-border1", children });
@@ -12018,12 +12007,12 @@ function MastraRuntimeProvider({
     requireToolApproval
   };
   const baseClient = react$1.useMastraClient();
-  const isVNext = modelVersion === "v2";
+  const isSupportedModel = modelVersion === "v2" || modelVersion === "v3";
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    if (!isVNext) {
+    if (!isSupportedModel) {
       setLegacyMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
     }
     const controller = new AbortController();
@@ -12034,7 +12023,7 @@ function MastraRuntimeProvider({
     });
     const agent = clientWithAbort.getAgent(agentId);
     try {
-      if (isVNext) {
+      if (isSupportedModel) {
         if (chatWithNetwork) {
           await sendMessage({
             message: input,
@@ -12377,7 +12366,7 @@ function MastraRuntimeProvider({
       if (error.name === "AbortError") {
         return;
       }
-      if (isVNext) {
+      if (isSupportedModel) {
         setMessages((currentConversation) => [
           ...currentConversation,
           { role: "assistant", parts: [{ type: "text", text: `${error}` }] }
@@ -12404,7 +12393,7 @@ function MastraRuntimeProvider({
   const vnextmessages = messages.map(react$1.toAssistantUIMessage);
   const runtime = react.useExternalStoreRuntime({
     isRunning: isLegacyRunning || isRunningStream,
-    messages: isVNext ? vnextmessages : legacyMessages,
+    messages: isSupportedModel ? vnextmessages : legacyMessages,
     convertMessage: (x) => x,
     onNew,
     onCancel,
@@ -12854,8 +12843,9 @@ const AgentSettings = ({ agentId }) => {
   const hasMemory = Boolean(memory?.result);
   const hasSubAgents = Boolean(Object.keys(agent.agents || {}).length > 0);
   const modelVersion = agent.modelVersion;
+  const isSupportedModel = modelVersion === "v2" || modelVersion === "v3";
   let radioValue;
-  if (modelVersion === "v2") {
+  if (isSupportedModel) {
     if (settings?.modelSettings?.chatWithNetwork) {
       radioValue = "network";
     } else {
@@ -12882,23 +12872,23 @@ const AgentSettings = ({ agentId }) => {
           }),
           className: "flex flex-row gap-4",
           children: [
-            modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            !isSupportedModel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generateLegacy", id: "generateLegacy", className: "text-icon6" }),
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generateLegacy", children: "Generate (Legacy)" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            isSupportedModel && /* @__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" })
             ] }),
-            modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            !isSupportedModel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "streamLegacy", id: "streamLegacy", className: "text-icon6" }),
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamLegacy", children: "Stream (Legacy)" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            isSupportedModel && /* @__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.jsx(NetworkCheckbox, { hasMemory, hasSubAgents })
+            isSupportedModel && /* @__PURE__ */ jsxRuntime.jsx(NetworkCheckbox, { hasMemory, hasSubAgents })
           ]
         }
       ) }),
@@ -15973,7 +15963,7 @@ const AgentMetadata = ({ agentId }) => {
       AgentMetadataSection,
       {
         title: "Model",
-        hint: agent.modelVersion === "v2" ? void 0 : {
+        hint: agent.modelVersion === "v2" || agent.modelVersion === "v3" ? void 0 : {
           link: "https://mastra.ai/guides/migrations/vnext-to-standard-apis",
           title: "You are using a legacy v1 model",
           icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { fontSize: 14, className: "mb-0.5" })
@@ -20120,6 +20110,15 @@ const PlaygroundQueryClient = ({ children, options }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
 };
 
+const themeClasses = {
+  light: "bg-gray-100 border-gray-300 text-gray-700",
+  dark: "bg-surface4 border-border1 text-icon6"
+};
+const Kbd = ({ children, theme = "dark" }) => {
+  const themeClass = themeClasses[theme];
+  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
+};
+
 const errorFallback = "Something went wrong while fetching the data.";
 const parseError = (error) => {
   try {