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

package/dist/index.es.js

@@ -9329,18 +9329,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__ */ 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 = useId();
   const inputRef = useRef(null);
+  const debouncedSearch = useDebouncedCallback((value) => {
+    onSearch(value);
+  }, debounceMs);
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
   useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
@@ -9355,37 +9354,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__ */ 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__ */ jsx(SearchIcon, { className: "text-icon3 h-4 w-4" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
-          /* @__PURE__ */ 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__ */ jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsx(Kbd, { children: "↵ Enter" }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ 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__ */ jsx(SearchIcon, { className: "text-icon3 h-4 w-4" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "px-4 py-2 border-b-sm border-border1", children });
@@ -11984,12 +11973,12 @@ function MastraRuntimeProvider({
     requireToolApproval
   };
   const baseClient = 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();
@@ -12000,7 +11989,7 @@ function MastraRuntimeProvider({
     });
     const agent = clientWithAbort.getAgent(agentId);
     try {
-      if (isVNext) {
+      if (isSupportedModel) {
         if (chatWithNetwork) {
           await sendMessage({
             message: input,
@@ -12343,7 +12332,7 @@ function MastraRuntimeProvider({
       if (error.name === "AbortError") {
         return;
       }
-      if (isVNext) {
+      if (isSupportedModel) {
         setMessages((currentConversation) => [
           ...currentConversation,
           { role: "assistant", parts: [{ type: "text", text: `${error}` }] }
@@ -12370,7 +12359,7 @@ function MastraRuntimeProvider({
   const vnextmessages = messages.map(toAssistantUIMessage);
   const runtime = useExternalStoreRuntime({
     isRunning: isLegacyRunning || isRunningStream,
-    messages: isVNext ? vnextmessages : legacyMessages,
+    messages: isSupportedModel ? vnextmessages : legacyMessages,
     convertMessage: (x) => x,
     onNew,
     onCancel,
@@ -12820,8 +12809,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 {
@@ -12848,23 +12838,23 @@ const AgentSettings = ({ agentId }) => {
           }),
           className: "flex flex-row gap-4",
           children: [
-            modelVersion !== "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            !isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "generateLegacy", id: "generateLegacy", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generateLegacy", children: "Generate (Legacy)" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
             ] }),
-            modelVersion !== "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            !isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "streamLegacy", id: "streamLegacy", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamLegacy", children: "Stream (Legacy)" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsx(NetworkCheckbox, { hasMemory, hasSubAgents })
+            isSupportedModel && /* @__PURE__ */ jsx(NetworkCheckbox, { hasMemory, hasSubAgents })
           ]
         }
       ) }),
@@ -15939,7 +15929,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__ */ jsx(AlertTriangleIcon, { fontSize: 14, className: "mb-0.5" })
@@ -20086,6 +20076,15 @@ const PlaygroundQueryClient = ({ children, options }) => {
   return /* @__PURE__ */ jsx(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__ */ 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 {