@mastra/playground-ui 16.1.2 → 16.2.0-alpha.1

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useAssistantState, useAuiState, useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, useAttachment, ComposerPrimitive, AttachmentPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ShieldAlert, ChevronDown, ChevronRight, RefreshCw, Tag, Wand2, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, CheckCircleIcon, X, CircleCheck, CircleX, CircleAlert, Info, Share2, Check, TerminalSquare, FolderTree, HardDrive, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, Repeat, Repeat1, Network, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, Braces, ChevronDownIcon, Brackets, PlusIcon, TrashIcon, Plus, Loader2, Circle, EyeOffIcon, EyeIcon, PauseIcon, HourglassIcon, CircleDashed, Footprints, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, ShieldX, SearchIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, Brain, Unplug, XCircle, CloudCog, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, DatabaseIcon, Save, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, Database, Code2, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Trash, ExternalLink, MoveRight, Copy, BookOpen, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronRightIcon, CalculatorIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, RotateCcw, GripVertical, Folder, CopyPlus, RefreshCcwIcon, AlignLeft, Trash2Icon, FileTextIcon, PenLine, Plug, LaptopMinimal, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Pencil, Eye, Wrench, Play, CheckCircle, MessageSquare, FormInput, FlaskConical, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, ChevronsUpIcon, ChevronsDownIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ArrowRightToLineIcon, CoinsIcon, AlertTriangleIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, CheckCircle2, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ClockIcon, BanIcon, Upload, MoveRightIcon, History, AmpersandIcon, GitCompareIcon, Download, FolderOutput, ChevronLeftIcon, EllipsisVerticalIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, TagIcon, GitCompare, MoreVertical, AlertTriangle, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, KeyboardIcon, CircleSlash, Cloud, Zap, Sparkles, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ShieldAlert, ChevronDown, ChevronRight, RefreshCw, Tag, Wand2, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, CheckCircleIcon, X, CircleCheck, CircleX, CircleAlert, Info, Share2, Check, TerminalSquare, FolderTree, HardDrive, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, Repeat, Repeat1, Network, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, Braces, ChevronDownIcon, Brackets, PlusIcon, TrashIcon, Plus, Loader2, Circle, EyeOffIcon, EyeIcon, PauseIcon, HourglassIcon, CircleDashed, Footprints, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, ShieldX, SearchIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, Brain, Unplug, XCircle, CloudCog, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, DatabaseIcon, Save, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, Database, Code2, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Trash, ExternalLink, MoveRight, Copy, BookOpen, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronRightIcon, CalculatorIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, RotateCcw, GripVertical, Folder, Pencil, CopyPlus, Link2, RefreshCcwIcon, AlignLeft, Trash2Icon, FileTextIcon, PenLine, Plug, LaptopMinimal, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Eye, Wrench, Play, CheckCircle, MessageSquare, FormInput, FlaskConical, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, ChevronsUpIcon, ChevronsDownIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ArrowRightToLineIcon, CoinsIcon, AlertTriangleIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, CheckCircle2, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ClockIcon, BanIcon, Upload, MoveRightIcon, History, AmpersandIcon, GitCompareIcon, Download, FolderOutput, ChevronLeftIcon, EllipsisVerticalIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, TagIcon, GitCompare, MoreVertical, AlertTriangle, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, KeyboardIcon, CircleSlash, Cloud, Zap, Sparkles, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
 import * as React from 'react';
 import React__default, { useState, memo, useEffect, useRef, useCallback, forwardRef, useMemo, createContext, useContext, Fragment as Fragment$1, useId, Suspense, useEffectEvent, useLayoutEffect } from 'react';
 import { S as Shadows, G as Glows, B as BorderColors, C as Colors, a as Sizes, F as FontSizes, L as LineHeights, b as BorderRadius, c as Spacings } from './spacings-Be0ECz0K.js';
@@ -15438,7 +15438,7 @@ function getStateColor(state) {
   }
 }
 
-const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
+const Thread = ({ agentName, agentId, hasMemory, hasModelList, hideModelSwitcher }) => {
   const areaRef = useRef(null);
   const messagesContainerRef = useRef(null);
   useAutoscroll(areaRef, { enabled: true });
@@ -15466,7 +15466,15 @@ const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
         /* @__PURE__ */ jsx("div", {})
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Composer, { hasMemory, agentId, hasModelList })
+    /* @__PURE__ */ jsx(
+      Composer,
+      {
+        hasMemory,
+        agentId,
+        hasModelList,
+        hideModelSwitcher
+      }
+    )
   ] });
 };
 const ThreadWrapper = ({ children }) => {
@@ -15478,7 +15486,7 @@ const ThreadWelcome = ({ agentName }) => {
     /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer = ({ hasMemory, agentId, hasModelList }) => {
+const Composer = ({ hasMemory, agentId, hasModelList, hideModelSwitcher }) => {
   const { setThreadInput } = useThreadInput();
   const textareaRef = useRef(null);
   const { canExecute } = usePermissions();
@@ -15490,7 +15498,7 @@ const Composer = ({ hasMemory, agentId, hasModelList }) => {
         "textarea",
         {
           ref: textareaRef,
-          autoFocus: document.activeElement === document.body,
+          autoFocus: false,
           className: "text-ui-lg leading-ui-lg placeholder:text-neutral3 text-neutral6 bg-transparent focus:outline-none resize-none outline-none disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: canExecuteAgent ? "Enter your message..." : "You don't have permission to execute agents",
           name: "",
@@ -15500,7 +15508,7 @@ const Composer = ({ hasMemory, agentId, hasModelList }) => {
         }
       ) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-        agentId && !hasModelList && /* @__PURE__ */ jsx(ComposerModelSwitcher, { agentId }),
+        agentId && !hasModelList && !hideModelSwitcher && /* @__PURE__ */ jsx(ComposerModelSwitcher, { agentId }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [
           canExecuteAgent && /* @__PURE__ */ jsx(SpeechInput, { agentId }),
           /* @__PURE__ */ jsx(ComposerAction, { canExecute: canExecuteAgent })
@@ -17105,7 +17113,8 @@ const AgentChat = ({
   modelVersion,
   modelList,
   messageId,
-  isNewThread
+  isNewThread,
+  hideModelSwitcher
 }) => {
   const { settings } = useAgentSettings();
   const requestContext = useMergedRequestContext();
@@ -17146,7 +17155,16 @@ const AgentChat = ({
       refreshThreadList,
       settings,
       requestContext,
-      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, agentId, hasModelList: Boolean(modelList) })
+      children: /* @__PURE__ */ jsx(
+        Thread,
+        {
+          agentName: agentName ?? "",
+          hasMemory: memory,
+          agentId,
+          hasModelList: Boolean(modelList),
+          hideModelSwitcher
+        }
+      )
     }
   );
 };
@@ -21952,6 +21970,11 @@ function AuthRequired({ children, loginUrl = "/login", signupUrl = "/signup" })
 const AgentEntityHeader = ({ agentId }) => {
   const { data: agent, isLoading } = useAgent(agentId);
   const { handleCopy } = useCopyToClipboard({ text: agentId });
+  const sessionUrl = `${window.location.origin}/agents/${agentId}/session`;
+  const { handleCopy: handleShareLink, isCopied: isShareCopied } = useCopyToClipboard({
+    text: sessionUrl,
+    copyMessage: "Session URL copied to clipboard!"
+  });
   const { isCmsAvailable } = useIsCmsAvailable();
   const { navigate } = useLinkComponent();
   const { cloneAgent, isCloning } = useCloneAgent();
@@ -21966,22 +21989,30 @@ const AgentEntityHeader = ({ agentId }) => {
       navigate(`/agents/${clonedAgent.id}/chat`);
     }
   };
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
     EntityHeader,
     {
       icon: isCmsAvailable ? /* @__PURE__ */ jsx(AgentSourceIcon, { source: agent?.source }) : /* @__PURE__ */ jsx(AgentIcon, {}),
       title: agentName,
       isLoading,
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-3", children: [
         /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(CopyIcon, {}), variant: "default", children: showStoredAgentBadge ? /* @__PURE__ */ jsx(Truncate, { untilChar: "-", withTooltip: false, children: agentId }) : agentId }) }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
         ] }),
         canWriteAgents && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleClone, disabled: isCloning, className: "h-badge-default shrink-0 ml-2", children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(CopyPlus, {}), variant: "default", children: isCloning ? "Cloning..." : "Clone" }) }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: () => navigate(`/cms/agents/${agentId}/edit`), className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(Pencil, {}), variant: "default", children: "Edit" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: isStoredAgent ? "Edit agent configuration" : "Edit agent overrides" })
+        ] }),
+        canWriteAgents && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleClone, disabled: isCloning, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(CopyPlus, {}), variant: "default", children: isCloning ? "Cloning..." : "Clone" }) }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: "Clone agent to a new stored agent" })
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleShareLink, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge, { icon: isShareCopied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Link2, {}), variant: "default", children: "Share" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Copy session URL to share with your team" })
         ] })
-      ]
+      ] })
     }
   ) });
 };
@@ -36299,8 +36330,9 @@ function TemplateSuccess({ name, installedEntities, linkComponent }) {
 }
 
 function TemplateFailure({ errorMsg, validationErrors }) {
-  const isSchemaError = errorMsg?.includes("Invalid schema for function");
-  const isValidationError = errorMsg?.includes("validation issue") || validationErrors && validationErrors.length > 0;
+  const errorString = typeof errorMsg === "string" ? errorMsg : errorMsg != null ? String(errorMsg) : void 0;
+  const isSchemaError = errorString?.includes("Invalid schema for function");
+  const isValidationError = errorString?.includes("validation issue") || validationErrors && validationErrors.length > 0;
   const getUserFriendlyMessage = () => {
     if (isValidationError) {
       return "Template installation completed but some validation issues remain. The template may still be functional, but you should review and fix these issues.";
@@ -36342,9 +36374,9 @@ function TemplateFailure({ errorMsg, validationErrors }) {
         /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-gray-700 dark:text-gray-300 mt-1 whitespace-pre-wrap break-words", children: error.message })
       ] }, index)) })
     ] }),
-    errorMsg && !isValidationError && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
+    errorString && !isValidationError && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
       /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-neutral3 hover:text-neutral4 select-none text-center", children: "Show Details" }),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono overflow-auto max-h-60 text-left", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: errorMsg }) })
+      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono overflow-auto max-h-60 text-left", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: errorString }) })
     ] })
   ] });
 }