@mastra/playground-ui 20.0.0-alpha.8 → 20.0.0-alpha.9

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 20.0.0-alpha.9
+
+### Patch Changes
+
+- Improved the default playground tabs so labels size to their content with tighter horizontal padding. ([#14857](https://github.com/mastra-ai/mastra/pull/14857))
+
+- Updated dependencies [[`12c647c`](https://github.com/mastra-ai/mastra/commit/12c647cf3a26826eb72d40b42e3c8356ceae16ed), [`12c647c`](https://github.com/mastra-ai/mastra/commit/12c647cf3a26826eb72d40b42e3c8356ceae16ed), [`819f03c`](https://github.com/mastra-ai/mastra/commit/819f03c25823373b32476413bd76be28a5d8705a), [`819f03c`](https://github.com/mastra-ai/mastra/commit/819f03c25823373b32476413bd76be28a5d8705a)]:
+  - @mastra/client-js@1.11.0-alpha.8
+  - @mastra/react@0.2.18-alpha.8
+  - @mastra/core@1.18.0-alpha.5
+
 ## 20.0.0-alpha.8
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -13216,16 +13216,16 @@ const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { value: currentTab, onValueChange: handleTabChange, className: cn("overflow-y-auto", className), children });
 };
 
-const TabList = ({ children, variant = "default", alignment = "full-width", className }) => {
+const TabList = ({ children, variant = "default", alignment = "left", className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     RadixTabs__namespace.List,
     {
       className: cn(
-        "flex items-center relative",
+        "flex items-center relative w-max min-w-full",
         {
           // variant: default
-          "text-ui-lg": variant === "default",
-          "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "text-ui-lg border-b border-border1": variant === "default",
+          "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:border-b-2 [&>button]:border-transparent": variant === "default",
           "[&>button]:flex-1": variant === "default" && alignment === "full-width",
           [`[&>button]:${transitions.colors} [&>button]:hover:text-neutral4`]: variant === "default",
           "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:border-black/50 [&>button[data-state=active]]:dark:border-white/50": variant === "default",
@@ -13248,7 +13248,7 @@ const Tab = ({ children, value, onClick, onClose, className }) => {
     {
       value,
       className: cn(
-        "text-sm p-3 text-neutral3 whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5",
+        "text-sm py-3 px-2 text-neutral3 whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none",
         transitions.all,
         focusRing.visible,
         "hover:text-neutral4",
@@ -17071,7 +17071,8 @@ function MastraRuntimeProvider({
   refreshThreadList,
   settings,
   requestContext,
-  modelVersion
+  modelVersion,
+  agentVersionId
 }) {
   const { settings: tracingSettings } = useTracingSettings();
   const [isLegacyRunning, setIsLegacyRunning] = React.useState(false);
@@ -17079,6 +17080,12 @@ function MastraRuntimeProvider({
   React.useEffect(() => {
     setLegacyMessages(initializeMessageState(initialLegacyMessages || []));
   }, [initialLegacyMessages]);
+  const chatRequestContext = React.useMemo(() => {
+    if (!agentVersionId) return void 0;
+    const ctx = new di.RequestContext();
+    ctx.set("agentVersionId", agentVersionId);
+    return ctx;
+  }, [agentVersionId]);
   const {
     messages,
     sendMessage,
@@ -17095,7 +17102,8 @@ function MastraRuntimeProvider({
     networkToolCallApprovals
   } = react.useChat({
     agentId,
-    initialMessages
+    initialMessages,
+    requestContext: chatRequestContext
   });
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const abortControllerRef = React.useRef(null);
@@ -17305,6 +17313,9 @@ function MastraRuntimeProvider({
     Object.entries(requestContext ?? {}).forEach(([key, value]) => {
       requestContextInstance.set(key, value);
     });
+    if (agentVersionId) {
+      requestContextInstance.set("agentVersionId", agentVersionId);
+    }
     try {
       if (isSupportedModel) {
         if (chatWithNetwork) {
@@ -17772,6 +17783,7 @@ const AgentChat = ({
   memory,
   refreshThreadList,
   modelVersion,
+  agentVersionId,
   modelList,
   messageId,
   isNewThread,
@@ -17809,6 +17821,7 @@ const AgentChat = ({
       agentId,
       agentName,
       modelVersion,
+      agentVersionId,
       threadId,
       initialMessages: v5Messages,
       initialLegacyMessages: v4Messages,
@@ -32714,7 +32727,13 @@ function AgentPlaygroundConfig({ agentId, selectedVersionId, latestVersionId })
   ] });
 }
 
-function AgentPlaygroundTestChat({ agentId, agentName, modelVersion, hasMemory }) {
+function AgentPlaygroundTestChat({
+  agentId,
+  agentName,
+  modelVersion,
+  agentVersionId,
+  hasMemory
+}) {
   const testThreadId = React.useMemo(() => uuid.v4(), [agentId]);
   const mergedRequestContext = useMergedRequestContext();
   const hasRequestContext = Object.keys(mergedRequestContext).length > 0;
@@ -32731,6 +32750,7 @@ function AgentPlaygroundTestChat({ agentId, agentName, modelVersion, hasMemory }
           agentId,
           agentName,
           modelVersion,
+          agentVersionId,
           threadId: testThreadId,
           memory: hasMemory,
           refreshThreadList: async () => {
@@ -32965,6 +32985,7 @@ function AgentPlaygroundView({
   agentId,
   agentName,
   modelVersion,
+  agentVersionId,
   hasMemory,
   activeVersionId,
   selectedVersionId,
@@ -33007,6 +33028,7 @@ function AgentPlaygroundView({
         agentId,
         agentName,
         modelVersion,
+        agentVersionId,
         hasMemory
       }
     ) }) }) })