@mastra/playground-ui 5.1.11 → 5.1.12-alpha.0

package/dist/index.cjs.js

@@ -4848,7 +4848,7 @@ const ComposerAttachments = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
 };
 
-const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
+const Thread = ({ ToolFallback, agentName, hasMemory }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
@@ -4869,7 +4869,7 @@ const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory, showFileSupport })
+    /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory })
   ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
@@ -4891,7 +4891,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer$1 = ({ hasMemory, showFileSupport }) => {
+const Composer$1 = ({ hasMemory }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
@@ -4908,7 +4908,7 @@ const Composer$1 = ({ hasMemory, showFileSupport }) => {
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(SpeechInput$1, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ComposerAction$1, { showFileSupport })
+          /* @__PURE__ */ jsxRuntime.jsx(ComposerAction$1, {})
         ] })
       ] })
     ] }),
@@ -4937,9 +4937,9 @@ const SpeechInput$1 = () => {
     }
   );
 };
-const ComposerAction$1 = ({ showFileSupport }) => {
+const ComposerAction$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    showFileSupport && /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipIconButton,
       {
@@ -5067,18 +5067,27 @@ function MastraRuntimeProvider({
   children,
   agentId,
   initialMessages,
-  agentName,
   memory,
   threadId,
   refreshThreadList,
-  modelSettings = {},
-  chatWithGenerate,
+  settings,
   runtimeContext
 }) {
   const [isRunning, setIsRunning] = React.useState(false);
   const [messages, setMessages] = React.useState([]);
   const [currentThreadId, setCurrentThreadId] = React.useState(threadId);
-  const { frequencyPenalty, presencePenalty, maxRetries, maxSteps, maxTokens, temperature, topK, topP, instructions } = modelSettings;
+  const {
+    frequencyPenalty,
+    presencePenalty,
+    maxRetries,
+    maxSteps,
+    maxTokens,
+    temperature,
+    topK,
+    topP,
+    instructions,
+    chatWithGenerate
+  } = settings?.modelSettings ?? {};
   const runtimeContextInstance = new di.RuntimeContext();
   Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
     runtimeContextInstance.set(key, value);
@@ -5384,82 +5393,56 @@ function MastraRuntimeProvider({
   ] });
 }
 
-const defaultModelSettings$1 = {
-  maxRetries: 2,
-  maxSteps: 5,
-  temperature: 0.5,
-  topP: 1
+const defaultSettings = {
+  modelSettings: {
+    maxRetries: 2,
+    maxSteps: 5,
+    temperature: 0.5,
+    topP: 1,
+    chatWithGenerate: false
+  }
 };
-function useAgentModelSettingsState({ agentId }) {
-  const [modelSettings, setModelSettingsState] = React.useState(void 0);
-  const [chatWithGenerate, setChatWithGenerateState] = React.useState(false);
+function useAgentSettingsState({ agentId }) {
+  const [settings, setSettingsState] = React.useState(void 0);
   const LOCAL_STORAGE_KEY = `mastra-agent-store-${agentId}`;
   React.useEffect(() => {
     try {
       const stored = localStorage.getItem(LOCAL_STORAGE_KEY);
       if (stored) {
         const parsed = JSON.parse(stored);
-        setModelSettingsState(parsed.modelSettings ?? void 0);
-        setChatWithGenerateState(parsed.chatWithGenerate ?? false);
+        setSettingsState(parsed ?? void 0);
       }
     } catch (e) {
       console.error(e);
     }
   }, [LOCAL_STORAGE_KEY]);
-  const setModelSettings = (modelSettingsValue) => {
-    setModelSettingsState((prev) => ({ ...prev, ...modelSettingsValue }));
-    localStorage.setItem(
-      LOCAL_STORAGE_KEY,
-      JSON.stringify({ modelSettings: modelSettingsValue, chatWithGenerate, agentId })
-    );
-  };
-  const setChatWithGenerate = (chatWithGenerateValue) => {
-    setChatWithGenerateState(chatWithGenerateValue);
-    localStorage.setItem(
-      LOCAL_STORAGE_KEY,
-      JSON.stringify({ modelSettings, chatWithGenerate: chatWithGenerateValue, agentId })
-    );
+  const setSettings = (settingsValue) => {
+    setSettingsState((prev) => ({ ...prev, ...settingsValue }));
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({ ...settingsValue, agentId }));
   };
   const resetAll = () => {
-    setModelSettingsState(defaultModelSettings$1);
-    setChatWithGenerate(false);
-    localStorage.setItem(
-      LOCAL_STORAGE_KEY,
-      JSON.stringify({ modelSettings: defaultModelSettings$1, chatWithGenerate: false, agentId })
-    );
+    setSettingsState(defaultSettings);
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(defaultSettings));
   };
   return {
-    modelSettings,
-    chatWithGenerate,
-    setModelSettings,
-    setChatWithGenerate,
+    settings,
+    setSettings,
     resetAll
   };
 }
 
 const AgentSettingsContext = React.createContext({});
 function AgentSettingsProvider({ children, agentId }) {
-  const { modelSettings, setModelSettings, chatWithGenerate, setChatWithGenerate, resetAll } = useAgentModelSettingsState({
+  const { settings, setSettings, resetAll } = useAgentSettingsState({
     agentId
   });
-  const onChangeModelSettings = (modelSettings2) => {
-    setModelSettings(modelSettings2);
-  };
-  const onChangeChatWithGenerate = (chatWithGenerate2) => {
-    setChatWithGenerate(chatWithGenerate2);
-  };
-  const onReset = () => {
-    resetAll();
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     AgentSettingsContext.Provider,
     {
       value: {
-        modelSettings: modelSettings ?? defaultModelSettings$1,
-        setModelSettings: onChangeModelSettings,
-        resetModelSettings: onReset,
-        chatWithGenerate: chatWithGenerate ?? false,
-        setChatWithGenerate: onChangeChatWithGenerate
+        settings,
+        setSettings,
+        resetAll
       },
       children
     }
@@ -5481,16 +5464,8 @@ const usePlaygroundStore = zustand.create()(
   )
 );
 
-const AgentChat = ({
-  agentId,
-  agentName,
-  threadId,
-  initialMessages,
-  memory,
-  refreshThreadList,
-  showFileSupport
-}) => {
-  const { modelSettings, chatWithGenerate } = useAgentSettings();
+const AgentChat = ({ agentId, agentName, threadId, initialMessages, memory, refreshThreadList }) => {
+  const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
   return /* @__PURE__ */ jsxRuntime.jsx(
     MastraRuntimeProvider,
@@ -5501,10 +5476,9 @@ const AgentChat = ({
       initialMessages,
       memory,
       refreshThreadList,
-      modelSettings,
-      chatWithGenerate,
+      settings,
       runtimeContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, showFileSupport })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory })
     }
   );
 };
@@ -6736,7 +6710,7 @@ const CollapsibleTrigger = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
 
 const AgentAdvancedSettings = () => {
-  const { modelSettings, setModelSettings } = useAgentSettings();
+  const { settings, setSettings } = useAgentSettings();
   const [isOpen, setIsOpen] = React.useState(false);
   const collapsibleClassName = "rounded-lg border-sm border-border1 bg-surface3 overflow-clip";
   const collapsibleTriggerClassName = "text-icon3 text-ui-lg font-medium flex items-center gap-2 w-full p-[10px] justify-between";
@@ -6754,8 +6728,14 @@ const AgentAdvancedSettings = () => {
           {
             id: "top-k",
             type: "number",
-            value: modelSettings?.topK || "",
-            onChange: (e) => setModelSettings({ ...modelSettings, topK: e.target.value ? Number(e.target.value) : void 0 })
+            value: settings?.modelSettings?.topK || "",
+            onChange: (e) => setSettings({
+              ...settings,
+              modelSettings: {
+                ...settings?.modelSettings,
+                topK: e.target.value ? Number(e.target.value) : void 0
+              }
+            })
           }
         )
       ] }),
@@ -6766,10 +6746,13 @@ const AgentAdvancedSettings = () => {
           {
             id: "frequency-penalty",
             type: "number",
-            value: modelSettings?.frequencyPenalty || "",
-            onChange: (e) => setModelSettings({
-              ...modelSettings,
-              frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
+            value: settings?.modelSettings?.frequencyPenalty || "",
+            onChange: (e) => setSettings({
+              ...settings,
+              modelSettings: {
+                ...settings?.modelSettings,
+                frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
+              }
             })
           }
         )
@@ -6781,10 +6764,13 @@ const AgentAdvancedSettings = () => {
           {
             id: "presence-penalty",
             type: "number",
-            value: modelSettings?.presencePenalty || "",
-            onChange: (e) => setModelSettings({
-              ...modelSettings,
-              presencePenalty: e.target.value ? Number(e.target.value) : void 0
+            value: settings?.modelSettings?.presencePenalty || "",
+            onChange: (e) => setSettings({
+              ...settings,
+              modelSettings: {
+                ...settings?.modelSettings,
+                presencePenalty: e.target.value ? Number(e.target.value) : void 0
+              }
             })
           }
         )
@@ -6796,10 +6782,13 @@ const AgentAdvancedSettings = () => {
           {
             id: "max-tokens",
             type: "number",
-            value: modelSettings?.maxTokens || "",
-            onChange: (e) => setModelSettings({
-              ...modelSettings,
-              maxTokens: e.target.value ? Number(e.target.value) : void 0
+            value: settings?.modelSettings?.maxTokens || "",
+            onChange: (e) => setSettings({
+              ...settings,
+              modelSettings: {
+                ...settings?.modelSettings,
+                maxTokens: e.target.value ? Number(e.target.value) : void 0
+              }
             })
           }
         )
@@ -6811,10 +6800,13 @@ const AgentAdvancedSettings = () => {
           {
             id: "max-steps",
             type: "number",
-            value: modelSettings?.maxSteps || "",
-            onChange: (e) => setModelSettings({
-              ...modelSettings,
-              maxSteps: e.target.value ? Number(e.target.value) : void 0
+            value: settings?.modelSettings?.maxSteps || "",
+            onChange: (e) => setSettings({
+              ...settings,
+              modelSettings: {
+                ...settings?.modelSettings,
+                maxSteps: e.target.value ? Number(e.target.value) : void 0
+              }
             })
           }
         )
@@ -6826,10 +6818,13 @@ const AgentAdvancedSettings = () => {
           {
             id: "max-retries",
             type: "number",
-            value: modelSettings?.maxRetries || "",
-            onChange: (e) => setModelSettings({
-              ...modelSettings,
-              maxRetries: e.target.value ? Number(e.target.value) : void 0
+            value: settings?.modelSettings?.maxRetries || "",
+            onChange: (e) => setSettings({
+              ...settings,
+              modelSettings: {
+                ...settings?.modelSettings,
+                maxRetries: e.target.value ? Number(e.target.value) : void 0
+              }
             })
           }
         )
@@ -6838,16 +6833,19 @@ const AgentAdvancedSettings = () => {
   ] });
 };
 
-function AgentModelSettings() {
-  const { modelSettings, setModelSettings, chatWithGenerate, setChatWithGenerate, resetModelSettings } = useAgentSettings();
+const AgentSettings = () => {
+  const { settings, setSettings, resetAll } = useAgentSettings();
   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: chatWithGenerate ? "generate" : "stream",
-          onValueChange: (value) => setChatWithGenerate(value === "generate"),
+          value: settings?.modelSettings?.chatWithGenerate ? "generate" : "stream",
+          onValueChange: (value) => setSettings({
+            ...settings,
+            modelSettings: { ...settings?.modelSettings, chatWithGenerate: value === "generate" }
+          }),
           className: "flex flex-row gap-4",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -6866,37 +6864,43 @@ function AgentModelSettings() {
           /* @__PURE__ */ jsxRuntime.jsx(
             Slider,
             {
-              value: [modelSettings?.temperature ?? -0.1],
+              value: [settings?.modelSettings?.temperature ?? -0.1],
               max: 1,
               min: -0.1,
               step: 0.1,
-              onValueChange: (value) => setModelSettings({ ...modelSettings, temperature: value[0] < 0 ? void 0 : value[0] })
+              onValueChange: (value) => setSettings({
+                ...settings,
+                modelSettings: { ...settings?.modelSettings, temperature: value[0] < 0 ? void 0 : value[0] }
+              })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: modelSettings?.temperature ?? "n/a" })
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: settings?.modelSettings?.temperature ?? "n/a" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Top P", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Slider,
             {
-              onValueChange: (value) => setModelSettings({ ...modelSettings, topP: value[0] < 0 ? void 0 : value[0] }),
-              value: [modelSettings?.topP ?? -0.1],
+              onValueChange: (value) => setSettings({
+                ...settings,
+                modelSettings: { ...settings?.modelSettings, topP: value[0] < 0 ? void 0 : value[0] }
+              }),
+              value: [settings?.modelSettings?.topP ?? -0.1],
               max: 1,
               min: -0.1,
               step: 0.1
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: modelSettings?.topP ?? "n/a" })
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: settings?.modelSettings?.topP ?? "n/a" })
         ] }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-7", children: /* @__PURE__ */ jsxRuntime.jsx(AgentAdvancedSettings, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => resetModelSettings(), variant: "light", className: "w-full", size: "lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => resetAll(), variant: "light", className: "w-full", size: "lg", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}) }),
       "Reset"
     ] })
   ] });
-}
+};
 
 const convertMessage$1 = (message) => {
   return message;
@@ -6907,8 +6911,7 @@ function MastraNetworkRuntimeProvider({
   initialMessages,
   memory,
   threadId,
-  refreshThreadList,
-  modelSettings = {}
+  modelSettings
 }) {
   const [isRunning, setIsRunning] = React.useState(false);
   const [messages, setMessages] = React.useState(initialMessages || []);
@@ -9388,7 +9391,7 @@ const AssistantActionBar = () => {
   );
 };
 
-const NetworkThread = ({ ToolFallback, networkName, hasMemory, showFileSupport }) => {
+const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
@@ -9411,7 +9414,7 @@ const NetworkThread = ({ ToolFallback, networkName, hasMemory, showFileSupport }
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory, showFileSupport })
+    /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory })
   ] });
 };
 const ThreadWrapper = ({ children }) => {
@@ -9443,7 +9446,7 @@ const ThreadWelcome = ({ networkName }) => {
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer = ({ hasMemory, showFileSupport }) => {
+const Composer = ({ hasMemory }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}),
@@ -9460,7 +9463,7 @@ const Composer = ({ hasMemory, showFileSupport }) => {
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(SpeechInput, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, { showFileSupport })
+          /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, {})
         ] })
       ] })
     ] }),
@@ -9489,9 +9492,9 @@ const SpeechInput = () => {
     }
   );
 };
-const ComposerAction = ({ showFileSupport }) => {
+const ComposerAction = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    showFileSupport && /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipIconButton,
       {
@@ -11962,8 +11965,8 @@ exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentEvals = AgentEvals;
 exports.AgentIcon = AgentIcon;
-exports.AgentModelSettings = AgentModelSettings;
 exports.AgentNetworkCoinIcon = AgentNetworkCoinIcon;
+exports.AgentSettings = AgentSettings;
 exports.AgentSettingsContext = AgentSettingsContext;
 exports.AgentSettingsProvider = AgentSettingsProvider;
 exports.AgentTraces = AgentTraces;