@mastra/playground-ui 2.0.2 → 2.0.3

package/dist/components/assistant-ui/assistant-message.d.ts

@@ -1,3 +1,6 @@
+import { ToolCallContentPartComponent } from '@assistant-ui/react';
 import { FC } from '../../../node_modules/@types/react';
 
-export declare const AssistantMessage: FC;
+export declare const AssistantMessage: FC<{
+    ToolFallback?: ToolCallContentPartComponent;
+}>;

package/dist/components/assistant-ui/thread.d.ts

@@ -1,5 +1,7 @@
+import { ToolCallContentPartComponent } from '@assistant-ui/react';
 import { FC } from '../../../node_modules/@types/react';
 
 export declare const Thread: FC<{
     memory?: boolean;
+    ToolFallback?: ToolCallContentPartComponent;
 }>;

package/dist/components/ui/markdown-renderer.d.ts

@@ -0,0 +1,5 @@
+interface MarkdownRendererProps {
+    children: string;
+}
+export declare function MarkdownRenderer({ children }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element;
+export default MarkdownRenderer;

package/dist/components/ui/syntax-highlighter.d.ts

@@ -2,3 +2,4 @@ export declare const useCodemirrorTheme: () => import('@uiw/react-codemirror').E
 export declare const SyntaxHighlighter: ({ data }: {
     data: Record<string, unknown>;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare function highlight(code: string, language: string): Promise<import('shiki').ThemedToken[][] | null>;

package/dist/components/ui/text.d.ts

@@ -3,7 +3,7 @@ import { default as React } from '../../../node_modules/@types/react';
 
 declare const textVariants: (props?: ({
     variant?: "secondary" | "primary" | null | undefined;
-    size?: "default" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | "xl" | "2xl" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement | HTMLSpanElement | HTMLDivElement>, VariantProps<typeof textVariants> {

package/dist/domains/networks/index.d.ts

@@ -0,0 +1 @@
+export * from './network-chat';

package/dist/domains/networks/network-chat.d.ts

@@ -0,0 +1,3 @@
+import { ChatProps } from '../../types';
+
+export declare const NetworkChat: ({ agentId, memory }: ChatProps) => import("react/jsx-runtime").JSX.Element;

package/dist/domains/networks/tool-fallback.d.ts

@@ -0,0 +1,3 @@
+import { ToolCallContentPartComponent } from '@assistant-ui/react';
+
+export declare const ToolFallback: ToolCallContentPartComponent;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 
 export * from './domains/agents/index';
+export * from './domains/networks/index';
 export * from './domains/workflows/index';
 export * from './domains/resizable-panel';

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Footprints, CircleCheck, CircleX, AlertCircleIcon, X, Plus, CalendarIcon, Check, Loader2 } from 'lucide-react';
+import { CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Check, LoaderCircle, ChevronUpIcon, ChevronDownIcon, ExternalLinkIcon, Footprints, CircleCheck, CircleX, AlertCircleIcon, X, Plus, CalendarIcon, Loader2 } from 'lucide-react';
 import * as React from 'react';
-import React__default, { forwardRef, memo, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, memo, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -22,6 +22,8 @@ import { tags } from '@lezer/highlight';
 import { githubDarkInit } from '@uiw/codemirror-theme-github';
 import CodeMirror from '@uiw/react-codemirror';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { processDataStream } from '@ai-sdk/ui-utils';
+import Markdown from 'react-markdown';
 import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
@@ -41,7 +43,7 @@ import { DayPicker } from 'react-day-picker';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { v4 } from '@lukeed/uuid';
-import { CodeBlock } from 'react-code-block';
+import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 
 import './index.css';function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -3117,9 +3119,9 @@ const defaultComponents = unstable_memoizeMarkdownComponents({
   SyntaxHighlighter: SyntaxHighlighter$1
 });
 
-const AssistantMessage = () => {
+const AssistantMessage = ({ ToolFallback }) => {
   return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "grid group grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] max-w-[var(--thread-max-width)] relative w-full py-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-foreground max-w-[calc(var(--thread-max-width)*0.8)] sm:max-w-[70%] break-words leading-7 col-span-2 py-2 col-start-2 row-start-1 my-1.5", children: /* @__PURE__ */ jsx(MessagePrimitive.Content, { components: { Text: MarkdownText } }) }),
+    /* @__PURE__ */ jsx("div", { className: "text-foreground max-w-[calc(var(--thread-max-width)*0.8)] sm:max-w-[70%] break-words leading-7 col-span-2 py-2 col-start-2 row-start-1 my-1.5", children: /* @__PURE__ */ jsx(MessagePrimitive.Content, { components: { Text: MarkdownText, tools: { Fallback: ToolFallback } } }) }),
     /* @__PURE__ */ jsx(AssistantActionBar, {}),
     /* @__PURE__ */ jsx(BranchPicker, { className: "col-start-2 row-start-2 -ml-2 mr-2" })
   ] });
@@ -3182,7 +3184,13 @@ const UserMessage = () => {
 };
 
 const suggestions = ["What capabilities do you have?", "How can you help me?", "Tell me about yourself"];
-const Thread = ({ memory }) => {
+const Thread = ({
+  memory,
+  ToolFallback
+}) => {
+  function WrappedAssistantMessage(props) {
+    return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
+  }
   return /* @__PURE__ */ jsxs(
     ThreadPrimitive.Root,
     {
@@ -3214,7 +3222,7 @@ const Thread = ({ memory }) => {
                     components: {
                       UserMessage,
                       EditComposer,
-                      AssistantMessage
+                      AssistantMessage: WrappedAssistantMessage
                     }
                   }
                 )
@@ -3406,7 +3414,7 @@ const CircleStopIcon = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
-const convertMessage = (message) => {
+const convertMessage$1 = (message) => {
   return message;
 };
 function MastraRuntimeProvider({
@@ -3511,7 +3519,7 @@ function MastraRuntimeProvider({
   const runtime = useExternalStoreRuntime({
     isRunning,
     messages,
-    convertMessage,
+    convertMessage: convertMessage$1,
     onNew
   });
   return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
@@ -5098,6 +5106,434 @@ const AgentsTable = ({
   );
 };
 
+const convertMessage = (message) => {
+  return message;
+};
+function MastraNetworkRuntimeProvider({
+  children,
+  agentId,
+  initialMessages,
+  memory,
+  threadId,
+  baseUrl,
+  refreshThreadList
+}) {
+  const [isRunning, setIsRunning] = useState(false);
+  const [messages, setMessages] = useState(initialMessages || []);
+  const [currentThreadId, setCurrentThreadId] = useState(threadId);
+  useEffect(() => {
+    if (messages.length === 0 || currentThreadId !== threadId) {
+      if (initialMessages && threadId && memory) {
+        setMessages(initialMessages);
+        setCurrentThreadId(threadId);
+      }
+    }
+  }, [initialMessages, threadId, memory, messages]);
+  const mastra = new MastraClient({
+    baseUrl: baseUrl || ""
+  });
+  console.log("MastraClient initialized");
+  console.log(messages, "###");
+  const network = mastra.getNetwork(agentId);
+  const onNew = async (message) => {
+    if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
+    const input = message.content[0].text;
+    setMessages((currentConversation) => [...currentConversation, { role: "user", content: input }]);
+    setIsRunning(true);
+    try {
+      let updater = function() {
+        setMessages((currentConversation) => {
+          const message2 = {
+            role: "assistant",
+            content: [{ type: "text", text: content }]
+          };
+          if (!assistantMessageAdded) {
+            assistantMessageAdded = true;
+            return [...currentConversation, message2];
+          }
+          return [...currentConversation.slice(0, -1), message2];
+        });
+      };
+      const response = await network.stream({
+        messages: [
+          {
+            role: "user",
+            content: input
+          }
+        ],
+        runId: agentId,
+        ...memory ? { threadId, resourceId: agentId } : {}
+      });
+      if (!response.body) {
+        throw new Error("No response body");
+      }
+      const parts = [];
+      let content = "";
+      let currentTextPart = null;
+      let assistantMessageAdded = false;
+      await processDataStream({
+        stream: response.body,
+        onTextPart(value) {
+          if (currentTextPart == null) {
+            currentTextPart = {
+              type: "text",
+              text: value
+            };
+            parts.push(currentTextPart);
+          } else {
+            currentTextPart.text += value;
+          }
+          content += value;
+          updater();
+        },
+        async onToolCallPart(value) {
+          console.log("Tool call received:", value);
+          setMessages((currentConversation) => {
+            const lastMessage = currentConversation[currentConversation.length - 1];
+            if (lastMessage && lastMessage.role === "assistant") {
+              const updatedMessage = {
+                ...lastMessage,
+                content: Array.isArray(lastMessage.content) ? [
+                  ...lastMessage.content,
+                  {
+                    type: "tool-call",
+                    toolCallId: value.toolCallId,
+                    toolName: value.toolName,
+                    args: value.args
+                  }
+                ] : [
+                  ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
+                  {
+                    type: "tool-call",
+                    toolCallId: value.toolCallId,
+                    toolName: value.toolName,
+                    args: value.args
+                  }
+                ]
+              };
+              return [...currentConversation.slice(0, -1), updatedMessage];
+            }
+            const newMessage = {
+              role: "assistant",
+              content: [
+                { type: "text", text: content },
+                {
+                  type: "tool-call",
+                  toolCallId: value.toolCallId,
+                  toolName: value.toolName,
+                  args: value.args
+                }
+              ]
+            };
+            return [...currentConversation, newMessage];
+          });
+        },
+        async onToolResultPart(value) {
+          console.log("Tool call result received:", value);
+          setMessages((currentConversation) => {
+            const lastMessage = currentConversation[currentConversation.length - 1];
+            if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+              const updatedContent = lastMessage.content.map((part) => {
+                if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === value.toolCallId) {
+                  return {
+                    ...part,
+                    result: value.result
+                  };
+                }
+                return part;
+              });
+              const updatedMessage = {
+                ...lastMessage,
+                content: updatedContent
+              };
+              return [...currentConversation.slice(0, -1), updatedMessage];
+            }
+            return currentConversation;
+          });
+        },
+        onErrorPart(error) {
+          throw new Error(error);
+        }
+      });
+      console.log(messages);
+      setIsRunning(false);
+    } catch (error) {
+      console.error("Error occured in MastraRuntimeProvider", error);
+      setIsRunning(false);
+    }
+  };
+  const runtime = useExternalStoreRuntime({
+    isRunning,
+    messages,
+    convertMessage,
+    onNew
+  });
+  return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
+    " ",
+    children,
+    " "
+  ] });
+}
+
+function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      toast.success(copyMessage);
+      setIsCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    }).catch(() => {
+      toast.error("Failed to copy to clipboard.");
+    });
+  }, [text, copyMessage]);
+  return { isCopied, handleCopy };
+}
+
+function CopyButton({ content, copyMessage, classname }) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: content,
+    copyMessage
+  });
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("relative h-6 w-6", classname),
+      "aria-label": "Copy to clipboard",
+      onClick: handleCopy,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
+        /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
+      ]
+    }
+  );
+}
+
+async function highlight(code, language) {
+  const { codeToTokens, bundledLanguages } = await import('shiki');
+  if (!(language in bundledLanguages)) return null;
+  const { tokens } = await codeToTokens(code, {
+    lang: language,
+    defaultColor: false,
+    themes: {
+      light: "github-light",
+      dark: "github-dark"
+    }
+  });
+  return tokens;
+}
+
+function MarkdownRenderer({ children }) {
+  const processedText = children.replace(/\\n/g, "\n");
+  return /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText });
+}
+const HighlightedPre = React__default.memo(({ children, language, ...props }) => {
+  const [tokens, setTokens] = useState([]);
+  useEffect(() => {
+    highlight(children, language).then((tokens2) => {
+      if (tokens2) setTokens(tokens2);
+    });
+  }, [children, language]);
+  if (!tokens.length) {
+    return /* @__PURE__ */ jsx("pre", { ...props, children });
+  }
+  return /* @__PURE__ */ jsx("pre", { ...props, children: /* @__PURE__ */ jsx("code", { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: line.map((token, tokenIndex) => {
+      const style = typeof token.htmlStyle === "string" ? void 0 : token.htmlStyle;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
+          style,
+          children: token.content
+        },
+        tokenIndex
+      );
+    }) }, lineIndex),
+    lineIndex !== tokens.length - 1 && "\n"
+  ] })) }) });
+});
+HighlightedPre.displayName = "HighlightedCode";
+const CodeBlock = ({ children, className, language, ...restProps }) => {
+  const code = typeof children === "string" ? children : childrenTakeAllStringContents(children);
+  const preClass = cn(
+    "overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "group/code relative mb-4", children: [
+    /* @__PURE__ */ jsx(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsx("pre", { className: preClass, ...restProps, children }),
+        children: /* @__PURE__ */ jsx(HighlightedPre, { language, className: preClass, children: code })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ jsx(CopyButton, { content: code, copyMessage: "Copied code to clipboard" }) })
+  ] });
+};
+function childrenTakeAllStringContents(element) {
+  if (typeof element === "string") {
+    return element;
+  }
+  if (element?.props?.children) {
+    let children = element.props.children;
+    if (Array.isArray(children)) {
+      return children.map((child) => childrenTakeAllStringContents(child)).join("");
+    } else {
+      return childrenTakeAllStringContents(children);
+    }
+  }
+  return "";
+}
+const COMPONENTS = {
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "font-semibold text-xl", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", ...props, children }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", { className: "font-semibold text-base", ...props, children }),
+  h5: ({ children, ...props }) => /* @__PURE__ */ jsx("h5", { className: "font-medium", ...props, children }),
+  strong: ({ children, ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", ...props, children }),
+  a: ({ children, ...props }) => /* @__PURE__ */ jsx("a", { className: "underline underline-offset-2", ...props, children }),
+  blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-primary pl-4", ...props, children }),
+  code: ({ children, className, ...rest }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    return match ? /* @__PURE__ */ jsx(CodeBlock, { className, language: match[1], ...rest, children }) : /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: cn(
+          "font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
+        ),
+        ...rest,
+        children
+      }
+    );
+  },
+  pre: ({ children }) => children,
+  ol: ({ children, ...props }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal space-y-2 pl-6", ...props, children }),
+  ul: ({ children, ...props }) => /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-2 pl-6", ...props, children }),
+  li: ({ children, ...props }) => /* @__PURE__ */ jsx("li", { className: "my-1.5", ...props, children }),
+  table: ({ children, ...props }) => /* @__PURE__ */ jsx("table", { className: "w-full border-collapse overflow-y-auto rounded-md border border-foreground/20", ...props, children }),
+  th: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: "border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+      ...props,
+      children
+    }
+  ),
+  td: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: "border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+      ...props,
+      children
+    }
+  ),
+  tr: ({ children, ...props }) => /* @__PURE__ */ jsx("tr", { className: "m-0 border-t p-0 even:bg-muted", ...props, children }),
+  p: ({ children, ...props }) => /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap leading-relaxed", ...props, children }),
+  hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "border-foreground/20", ...props })
+};
+
+const purpleClasses = {
+  bg: "bg-[rgba(124,80,175,0.25)]",
+  text: "text-[rgb(180,140,230)]",
+  hover: "hover:text-[rgb(200,160,250)]"};
+const ToolFallback = (props) => {
+  const { toolCallId, toolName, args, argsText, result, status } = props;
+  const [expandedAgents, setExpandedAgents] = useState({});
+  const actions = args?.actions || [];
+  if (actions.length === 0) {
+    return null;
+  }
+  const toggleAgent = (agentId) => {
+    setExpandedAgents((prev) => ({
+      ...prev,
+      [agentId]: !prev[agentId]
+    }));
+  };
+  const extractUrls = (text) => {
+    if (typeof text !== "string") return [];
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    return text.match(urlRegex) || [];
+  };
+  return /* @__PURE__ */ jsx("div", { className: "mb-4 w-full rounded-lg border border-gray-700 overflow-hidden shadow-md", children: actions.map((action, index) => {
+    const agentId = `${toolCallId || "tool"}-${action.agent}-${index}`;
+    const isExpanded = expandedAgents[agentId] || false;
+    const urls = result ? extractUrls(result) : [];
+    return /* @__PURE__ */ jsxs("div", { className: `border-b border-gray-700 ${index === actions.length - 1 ? "border-b-0" : ""}`, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between px-4 py-3 bg-gray-900 hover:bg-gray-800 cursor-pointer",
+          onClick: () => toggleAgent(agentId),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: cn("flex h-6 w-6 items-center justify-center rounded-full", purpleClasses.bg), children: status?.type === "running" ? /* @__PURE__ */ jsx(LoaderCircle, { className: cn("h-4 w-4 animate-spin", purpleClasses.text) }) : /* @__PURE__ */ jsx(CheckIcon, { className: cn("h-4 w-4", purpleClasses.text) }) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-gray-100", children: action.agent?.replaceAll("_", " ") }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("text-xs px-2 py-1 rounded-full", purpleClasses.bg, purpleClasses.text), children: status?.type === "running" ? "Processing..." : "Complete" }),
+              isExpanded ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-4 w-4 text-gray-300" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-300" })
+            ] })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-[#111]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-300 mb-1", children: "Query:" }),
+          /* @__PURE__ */ jsx("div", { className: "p-2 bg-gray-900 rounded border border-gray-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-200 whitespace-pre-wrap", children: action.input }) })
+        ] }),
+        result && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-300 mb-1", children: "Result:" }),
+          /* @__PURE__ */ jsx("div", { className: "p-2 bg-gray-900 rounded border border-gray-700 max-h-60 overflow-auto", children: typeof result === "string" ? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-200", children: /* @__PURE__ */ jsx(MarkdownRenderer, { children: result }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-200 whitespace-pre-wrap", children: JSON.stringify(result, null, 2) }) }),
+          urls.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-300 mb-1", children: "Sources:" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              urls.slice(0, 3).map((url, i) => /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: cn(
+                    "inline-flex items-center gap-1 text-xs hover:underline",
+                    purpleClasses.text,
+                    purpleClasses.hover
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Source ",
+                      i + 1
+                    ] }),
+                    /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "h-3 w-3" })
+                  ]
+                },
+                i
+              )),
+              urls.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-400", children: [
+                "+",
+                urls.length - 3,
+                " more"
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }, agentId);
+  }) });
+};
+
+const NetworkChat = ({ agentId, memory }) => {
+  return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, children: /* @__PURE__ */ jsx(Thread, { memory, ToolFallback }) });
+};
+
 function WorkflowTraces({
   workflowName,
   baseUrl,
@@ -7184,63 +7620,21 @@ function CodeBlockDemo({
   filename,
   className
 }) {
-  return /* @__PURE__ */ jsxs(CodeBlock, { code, language, theme: themes.oneDark, children: [
+  return /* @__PURE__ */ jsxs(CodeBlock$1, { code, language, theme: themes.oneDark, children: [
     filename ? /* @__PURE__ */ jsx("div", { className: "absolute w-full px-6 py-2 pl-4 text-sm rounded bg-mastra-bg-2 text-mastra-el-6/50", children: filename }) : null,
     /* @__PURE__ */ jsx(
-      CodeBlock.Code,
+      CodeBlock$1.Code,
       {
         className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
         children: /* @__PURE__ */ jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx(CodeBlock.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
-          /* @__PURE__ */ jsx(CodeBlock.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock.Token, { className: "font-mono text-sm mastra-token" }) })
+          /* @__PURE__ */ jsx(CodeBlock$1.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
+          /* @__PURE__ */ jsx(CodeBlock$1.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock$1.Token, { className: "font-mono text-sm mastra-token" }) })
         ] }) })
       }
     )
   ] });
 }
 
-function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef(null);
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(text).then(() => {
-      toast.success(copyMessage);
-      setIsCopied(true);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-      timeoutRef.current = setTimeout(() => {
-        setIsCopied(false);
-      }, 2e3);
-    }).catch(() => {
-      toast.error("Failed to copy to clipboard.");
-    });
-  }, [text, copyMessage]);
-  return { isCopied, handleCopy };
-}
-
-function CopyButton({ content, copyMessage, classname }) {
-  const { isCopied, handleCopy } = useCopyToClipboard({
-    text: content,
-    copyMessage
-  });
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant: "ghost",
-      size: "icon",
-      className: cn("relative h-6 w-6", classname),
-      "aria-label": "Copy to clipboard",
-      onClick: handleCopy,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
-        /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
-      ]
-    }
-  );
-}
-
 const WorkflowRunContext = createContext({});
 function WorkflowRunProvider({ children }) {
   const [result, setResult] = useState(null);
@@ -7451,5 +7845,5 @@ function WorkflowTrigger({
   ] }) });
 }
 
-export { AgentChat, AgentEvals, AgentTraces, AgentsTable, MastraResizablePanel, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
+export { AgentChat, AgentEvals, AgentTraces, AgentsTable, MastraResizablePanel, NetworkChat, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
 //# sourceMappingURL=index.es.js.map