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

package/dist/index.css

@@ -8747,6 +8747,10 @@
     height: var(--spacing-3_5);
   }
 
+  .\[\&\>svg\]\:h-3 > svg {
+    height: var(--spacing-3);
+  }
+
   .\[\&\>svg\]\:h-4 > svg {
     height: var(--spacing-4);
   }
@@ -8815,6 +8819,10 @@
     height: var(--height-icon-sm);
   }
 
+  .\[\&\>svg\]\:w-3 > svg {
+    width: var(--spacing-3);
+  }
+
   .\[\&\>svg\]\:w-4 > svg {
     width: var(--spacing-4);
   }
@@ -8892,6 +8900,10 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .\[\&\>svg\]\:text-accent1 > svg {
+    color: var(--color-accent1);
+  }
+
   .\[\&\>svg\]\:text-neutral3 > svg {
     color: var(--color-neutral3);
   }

package/dist/index.es.js

@@ -8,7 +8,7 @@ import { useMastraClient, resolveToChildMessages, useCreateWorkflowRun, useStrea
 import { useQuery, useQueryClient, useMutation, useInfiniteQuery, useQueries, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { useComposer, useComposerRuntime, useAttachment, ComposerPrimitive, AttachmentPrimitive, useAuiState, useAssistantState, useMessage, MessagePrimitive, ActionBarPrimitive, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { X, Wand2, Link, CloudUpload, FileText, CircleXIcon, ChevronUpIcon, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, Share2, Check, FolderTree, HardDrive, Loader2, Brain, ChevronDown, ChevronRight, Unplug, XCircle, CloudCog, TerminalSquare, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Footprints, Circle, TrashIcon, Brackets, PlusIcon, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, Braces, ChevronDownIcon, Plus, EyeOffIcon, EyeIcon, ShieldAlert, PauseIcon, HourglassIcon, CircleDashed, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, Tag, ShieldX, SearchIcon, ExternalLinkIcon, CircleSlashIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, CheckCircleIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, DatabaseIcon, Save, Mic, ArrowUp, SaveIcon, BookOpen, ExternalLink, RotateCcw, GripVertical, Trash, MoveRight, Copy, ArrowLeftIcon, ArrowRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, CalculatorIcon, ChevronRightIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Globe, Folder, Pencil, Link2, Maximize2, Minimize2, RefreshCcwIcon, Monitor, ChevronUp, PanelRight, AlignLeft, Trash2Icon, FileTextIcon, BookmarkPlus, PenLine, LaptopMinimal, Plug, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Eye, Wrench, MessageSquare, AlertTriangleIcon, BracesIcon, ArrowRightToLineIcon, CoinsIcon, CircleGaugeIcon, PanelTopIcon, ChevronsUpIcon, ChevronsDownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, Award, ClipboardCheck, CheckCircle, FormInput, Sparkles, Play, CheckCircle2, ChevronLeftIcon, Paperclip, FlaskConical, Database, ThumbsUp, ThumbsDown, FilterIcon, Loader2Icon, FileInput, FileOutput, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, TrendingUpIcon, TrendingDownIcon, ExpandIcon, ChevronsUpDownIcon, ChevronsDownUpIcon, Upload, MoveRightIcon, GitCompare, RouteIcon, TagIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, History, EllipsisVerticalIcon, AmpersandIcon, GitCompareIcon, Download, FolderOutput, ClockIcon, BanIcon, AlertTriangle, MoreVertical, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, LogIn, KeyboardIcon, CircleSlash, Cloud, Zap, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
+import { X, Wand2, Link, CloudUpload, FileText, CircleXIcon, ChevronUpIcon, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, Share2, Check, FolderTree, HardDrive, Loader2, Brain, ChevronDown, ChevronRight, Unplug, XCircle, CloudCog, TerminalSquare, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Footprints, Circle, TrashIcon, Brackets, PlusIcon, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, Braces, ChevronDownIcon, Plus, EyeOffIcon, EyeIcon, ShieldAlert, PauseIcon, HourglassIcon, CircleDashed, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, Tag, ShieldX, SearchIcon, ExternalLinkIcon, CircleSlashIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, CheckCircleIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, DatabaseIcon, Save, Mic, ArrowUp, SaveIcon, BookOpen, ExternalLink, RotateCcw, GripVertical, Trash, MoveRight, Copy, ArrowLeftIcon, ArrowRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, CalculatorIcon, ChevronRightIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Globe, Folder, Pencil, Link2, Maximize2, Minimize2, RefreshCcwIcon, Monitor, ChevronUp, PanelRight, AlignLeft, Trash2Icon, FileTextIcon, BookmarkPlus, PenLine, LaptopMinimal, Plug, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Eye, Wrench, MessageSquare, AlertTriangleIcon, BracesIcon, ArrowRightToLineIcon, CoinsIcon, CircleGaugeIcon, PanelTopIcon, ChevronsUpIcon, ChevronsDownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, Award, ClipboardCheck, CheckCircle, FormInput, Sparkles, Play, CheckCircle2, ChevronLeftIcon, Paperclip, FlaskConical, Database, ThumbsUp, ThumbsDown, FilterIcon, Loader2Icon, FileInput, FileOutput, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, TrendingUpIcon, TrendingDownIcon, Link2Icon, ExpandIcon, ChevronsUpDownIcon, ChevronsDownUpIcon, Upload, MoveRightIcon, GitCompare, RouteIcon, TagIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, History, EllipsisVerticalIcon, AmpersandIcon, GitCompareIcon, Download, FolderOutput, ClockIcon, BanIcon, AlertTriangle, MoreVertical, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, LogIn, KeyboardIcon, CircleSlash, Cloud, Zap, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
 import { S as Shadows, G as Glows, B as BorderColors, C as Colors, b as Sizes, F as FontSizes, L as LineHeights, a as BorderRadius, c as Spacings } from './spacings-CKfS0_hW.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -46823,13 +46823,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__ */ jsx("dd", { className: cn("text-ui-smd text-neutral3 truncate min-w-0 py-0.5", className), children });
+  return /* @__PURE__ */ 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__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", className: linkClassName, children: [
+      /* @__PURE__ */ jsx("span", { children }),
+      /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Link, { href, className: linkClassName, children: [
+    /* @__PURE__ */ jsx("span", { children }),
+    /* @__PURE__ */ jsx(Link2Icon, {})
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithCopyBtn({
+  className,
+  children,
+  copyValue,
+  copyTooltip = "Copy to clipboard"
+}) {
+  const { isCopied, handleCopy } = useCopyToClipboard$1({
+    text: copyValue,
+    copyMessage: "Copied!"
+  });
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Tooltip, { open: isCopied || void 0, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx("span", { children }),
+          isCopied ? /* @__PURE__ */ jsx(CheckIcon$1, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: isCopied ? "Copied!" : copyTooltip })
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithTooltip({
+  className,
+  children,
+  tooltip
+}) {
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { tabIndex: 0, className: "truncate cursor-help hover:text-neutral4 inline", children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] }) });
 }
 
 const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {
   Key: DataKeysAndValuesKey,
   Value: DataKeysAndValuesValue,
+  ValueLink: DataKeysAndValuesValueLink,
+  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,
+  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,
   Header: DataKeysAndValuesHeader
 });