@mastra/playground-ui 22.1.1 → 22.1.2-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @mastra/playground-ui
 
+## 22.1.2-alpha.0
+
+### Patch Changes
+
+- dependencies updates: ([#15085](https://github.com/mastra-ai/mastra/pull/15085))
+  - Updated dependency [`@assistant-ui/react@^0.12.22` ↗︎](https://www.npmjs.com/package/@assistant-ui/react/v/0.12.22) (from `^0.12.21`, in `dependencies`)
+  - Updated dependency [`@assistant-ui/react-markdown@^0.12.8` ↗︎](https://www.npmjs.com/package/@assistant-ui/react-markdown/v/0.12.8) (from `^0.12.7`, in `dependencies`)
+  - Updated dependency [`@assistant-ui/react-syntax-highlighter@^0.12.8` ↗︎](https://www.npmjs.com/package/@assistant-ui/react-syntax-highlighter/v/0.12.8) (from `^0.12.7`, in `dependencies`)
+
+- Added ValueLink, ValueWithTooltip, and ValueWithCopyBtn variants to DataKeysAndValues component ([#15208](https://github.com/mastra-ai/mastra/pull/15208))
+
+- Updated dependencies [[`87df955`](https://github.com/mastra-ai/mastra/commit/87df955c028660c075873fd5d74af28233ce32eb), [`30a189b`](https://github.com/mastra-ai/mastra/commit/30a189bdd92c4f875a2a6e5d8498ee7fa547bde6), [`075e91a`](https://github.com/mastra-ai/mastra/commit/075e91a4549baf46ad7a42a6a8ac8dfa78cc09e6)]:
+  - @mastra/core@1.24.2-alpha.0
+  - @mastra/ai-sdk@1.3.4-alpha.0
+  - @mastra/client-js@1.13.4-alpha.0
+  - @mastra/react@0.2.26-alpha.0
+
 ## 22.1.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -46855,13 +46855,83 @@ function DataKeysAndValuesRoot({ className, children, numOfCol = 1 }) {
   );
 }
 
+const dataKeysAndValuesValueStyles = "text-ui-smd text-neutral3 min-w-0 py-0.5";
+
 function DataKeysAndValuesValue({ className, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn("text-ui-smd text-neutral3 truncate min-w-0 py-0.5", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn(dataKeysAndValuesValueStyles, "truncate", className), children });
+}
+
+function isExternalUrl(href) {
+  return /^https?:\/\//.test(href);
+}
+function DataKeysAndValuesValueLink({ className, children, href }) {
+  const { Link } = useLinkComponent();
+  const isExternal = isExternalUrl(href);
+  const linkClassName = cn(
+    "truncate flex items-center gap-2 hover:text-neutral4 transition-colors",
+    "[&>svg]:w-4 [&>svg]:h-4 [&>svg]:shrink-0 [&>svg]:opacity-70 [&:hover>svg]:opacity-100"
+  );
+  if (isExternal) {
+    return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", className: linkClassName, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Link, { href, className: linkClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2Icon, {})
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithCopyBtn({
+  className,
+  children,
+  copyValue,
+  copyTooltip = "Copy to clipboard"
+}) {
+  const { isCopied, handleCopy } = useCopyToClipboard$1({
+    text: copyValue,
+    copyMessage: "Copied!"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { open: isCopied || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: handleCopy,
+        type: "button",
+        className: cn(
+          "flex gap-2 items-center",
+          "[&>svg]:w-3 [&>svg]:h-3 [&>svg]:shrink-0 [&>svg]:opacity-70 [&:hover>svg]:opacity-100",
+          { "[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-accent1": isCopied }
+        ),
+        "aria-label": isCopied ? "Copied!" : copyTooltip,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          isCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: isCopied ? "Copied!" : copyTooltip })
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithTooltip({
+  className,
+  children,
+  tooltip
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: 0, className: "truncate cursor-help hover:text-neutral4 inline", children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
+  ] }) });
 }
 
 const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {
   Key: DataKeysAndValuesKey,
   Value: DataKeysAndValuesValue,
+  ValueLink: DataKeysAndValuesValueLink,
+  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,
+  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,
   Header: DataKeysAndValuesHeader
 });