@agno-hq/chat-react 0.3.1 → 0.3.3

package/dist/{chunk-BZC2674Z.js → chunk-E4CFQ457.js}

@@ -1,8 +1,8 @@
 import { AgnoClient, activityLabel, isSubRunEvent, applySubRunEvent, isStepEvent, applyStepEvent, isStartedEvent, isToolEvent, toolsFromEvent, mergeTool, isContentEvent, applyContentEvent, isReasoningStepEvent, isReasoningCompletedEvent, isFollowupsCompletedEvent, isPausedEvent, isCompletedEvent, isCancelledEvent, isErrorEvent, sessionRunsToMessages, isToolCompletedEvent } from './chunk-6V2YIPHF.js';
-import React7, { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext, useId, isValidElement, cloneElement, useLayoutEffect, useReducer } from 'react';
+import React8, { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext, useId, isValidElement, cloneElement, useLayoutEffect, useReducer } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { Square, ChevronDown as ChevronDown$1, ArrowUp as ArrowUp$1, Paperclip as Paperclip$1, File, FileType2, FileAudio as FileAudio$1, FileVideo as FileVideo$1, Wrench as Wrench$1, BookOpen as BookOpen$1, Globe as Globe$1, Link, Brain as Brain$1, Box as Box$1, Plus as Plus$1, Check as Check$1, Copy as Copy$1, X, MemoryStick, RefreshCcw, Activity, Trash2, MessageSquare, LoaderCircle } from 'lucide-react';
+import { ChevronDown as ChevronDown$1, ArrowUp as ArrowUp$1, Paperclip as Paperclip$1, File, FileType2, FileAudio as FileAudio$1, FileVideo as FileVideo$1, Wrench as Wrench$1, BookOpen as BookOpen$1, Globe as Globe$1, Link, Brain as Brain$1, Box as Box$1, Plus as Plus$1, Check as Check$1, Copy as Copy$1, X, MemoryStick, RefreshCcw, Activity, Trash2, MessageSquare, LoaderCircle, Square } from 'lucide-react';
 import { Streamdown } from 'streamdown';
 
 var messageCounter = 0;
@@ -656,9 +656,7 @@ var Pulse = icon(Activity);
 var Trash = icon(Trash2);
 var ChatBubble = icon(MessageSquare);
 var Spinner = icon(LoaderCircle, 12);
-function Stop({ size = 16, className }) {
-  return /* @__PURE__ */ jsx(Square, { size, className, fill: "currentColor", strokeWidth: 0 });
-}
+var Stop = icon(Square, 10.67);
 function AgnoMark({ size = 24, className }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -1094,15 +1092,18 @@ function ChatInput({
       }
     )
   ] });
-  const primary = isBusy && stop ? /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: cx("agno-btn", "agno-btn--destructive", "agno-btn--icon", cn.stopButton),
-      onClick: stop,
-      "aria-label": "Stop",
-      children: /* @__PURE__ */ jsx(Stop, { size: iconSize })
-    }
+  const primary = isBusy && stop ? (
+    // The same button the arrow sends from, with AgentOS's square-stop in it.
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cx("agno-btn", "agno-btn--icon", cn.stopButton),
+        onClick: stop,
+        "aria-label": "Stop",
+        children: /* @__PURE__ */ jsx(Stop, {})
+      }
+    )
   ) : /* @__PURE__ */ jsx(
     "button",
     {
@@ -1392,11 +1393,14 @@ function sourceHost(url) {
   }
 }
 function faviconUrl(url) {
-  if (!url) return void 0;
+  return faviconFallbacks(url)[0];
+}
+function faviconFallbacks(url) {
+  if (!url) return [];
   try {
-    return new URL("/favicon.ico", url).href;
+    return ["/favicon.ico", "/favicon.svg"].map((path) => new URL(path, url).href);
   } catch {
-    return void 0;
+    return [];
   }
 }
 function displayUrl(url) {
@@ -1648,10 +1652,11 @@ function Favicon({
   size = 14,
   className
 }) {
-  const src = faviconUrl(url);
-  const [failed, setFailed] = useState(false);
-  useEffect(() => setFailed(false), [src]);
-  if (kind === "document" || !src || failed) {
+  const candidates = useMemo(() => faviconFallbacks(url), [url]);
+  const [attempt, setAttempt] = useState(0);
+  const src = candidates[attempt];
+  useEffect(() => setAttempt(0), [url]);
+  if (kind === "document" || !src) {
     const Glyph2 = kind === "document" ? BookOpen : Globe;
     return /* @__PURE__ */ jsx("span", { className: cx("agno-favicon", "agno-favicon--glyph", className), "aria-hidden": true, children: /* @__PURE__ */ jsx(Glyph2, { size }) });
   }
@@ -1665,7 +1670,7 @@ function Favicon({
       height: size,
       loading: "lazy",
       decoding: "async",
-      onError: () => setFailed(true),
+      onError: () => setAttempt((n) => n + 1),
       "aria-hidden": true
     }
   );
@@ -1796,45 +1801,6 @@ function HoverPreview({
     }
   );
 }
-function el(tag, className) {
-  return function Element({ node: _node, className: _theirs, ...rest }) {
-    return React7.createElement(tag, { className, ...rest });
-  };
-}
-function sourceForUrl(url, sources) {
-  return url ? sources.find((s) => s.url === url) : void 0;
-}
-function citationForLink(label2, href, ctx) {
-  if (!/^\d+$/.test(label2.trim())) return void 0;
-  return sourceForUrl(href, ctx.sources) ?? ctx.sources.find((s) => s.index === Number(label2.trim()));
-}
-function labelOf(children) {
-  if (typeof children === "string") return children;
-  if (Array.isArray(children) && children.length === 1 && typeof children[0] === "string") {
-    return children[0];
-  }
-  return "";
-}
-function CitationMarker({
-  source,
-  className,
-  Link
-}) {
-  const props = {
-    className: cx("agno-cite", className),
-    href: source.url ?? `#${source.anchorId}`,
-    "aria-label": `Source ${source.index}: ${source.title}`
-  };
-  return /* @__PURE__ */ jsx(HoverPreview, { source, className: "agno-cite__wrap", children: Link && source.url ? /* @__PURE__ */ jsx(Link, { ...props, children: source.index }) : /* @__PURE__ */ jsx(
-    "a",
-    {
-      ...props,
-      target: source.url ? "_blank" : void 0,
-      rel: source.url ? "noreferrer noopener" : void 0,
-      children: source.index
-    }
-  ) });
-}
 var COPIED_FOR = 1600;
 var CLIPBOARD_TIMEOUT = 400;
 async function writeClipboard(text) {
@@ -1860,7 +1826,7 @@ async function writeClipboard(text) {
     return false;
   }
 }
-function CopyButton({ text, className }) {
+function CopyButton({ text, label: label2 = "Copy", size = 14, className }) {
   const [copied, setCopied] = useState(false);
   useEffect(() => {
     if (!copied) return;
@@ -1868,30 +1834,70 @@ function CopyButton({ text, className }) {
     return () => clearTimeout(timer);
   }, [copied]);
   const copy = async () => {
-    if (await writeClipboard(text())) setCopied(true);
+    if (await writeClipboard(typeof text === "function" ? text() : text)) setCopied(true);
   };
+  const name = copied ? "Copied" : label2;
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      className: cx("agno-md-copy", copied && "is-copied", className),
+      className: cx("agno-copy", copied && "is-copied", className),
       onClick: copy,
-      "aria-label": copied ? "Copied" : "Copy code",
-      title: copied ? "Copied" : "Copy code",
-      children: copied ? /* @__PURE__ */ jsx(Check, { size: 13 }) : /* @__PURE__ */ jsx(Copy, { size: 13 })
+      "aria-label": name,
+      title: name,
+      children: copied ? /* @__PURE__ */ jsx(Check, { size }) : /* @__PURE__ */ jsx(Copy, { size })
     }
   );
 }
+function el(tag, className) {
+  return function Element({ node: _node, className: _theirs, ...rest }) {
+    return React8.createElement(tag, { className, ...rest });
+  };
+}
+function sourceForUrl(url, sources) {
+  return url ? sources.find((s) => s.url === url) : void 0;
+}
+function citationForLink(label2, href, ctx) {
+  if (!/^\d+$/.test(label2.trim())) return void 0;
+  return sourceForUrl(href, ctx.sources) ?? ctx.sources.find((s) => s.index === Number(label2.trim()));
+}
+function labelOf(children) {
+  if (typeof children === "string") return children;
+  if (Array.isArray(children) && children.length === 1 && typeof children[0] === "string") {
+    return children[0];
+  }
+  return "";
+}
+function CitationMarker({
+  source,
+  className,
+  Link
+}) {
+  const props = {
+    className: cx("agno-cite", className),
+    href: source.url ?? `#${source.anchorId}`,
+    "aria-label": `Source ${source.index}: ${source.title}`
+  };
+  return /* @__PURE__ */ jsx(HoverPreview, { source, className: "agno-cite__wrap", children: Link && source.url ? /* @__PURE__ */ jsx(Link, { ...props, children: source.index }) : /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      target: source.url ? "_blank" : void 0,
+      rel: source.url ? "noreferrer noopener" : void 0,
+      children: source.index
+    }
+  ) });
+}
 function textOf(children) {
   if (typeof children === "string") return children;
   if (typeof children === "number") return String(children);
   if (Array.isArray(children)) return children.map(textOf).join("");
-  if (React7.isValidElement(children)) return textOf(children.props.children);
+  if (React8.isValidElement(children)) return textOf(children.props.children);
   return "";
 }
 function fencedCode(children) {
   const child = Array.isArray(children) ? children[0] : children;
-  if (!React7.isValidElement(child)) {
+  if (!React8.isValidElement(child)) {
     return { code: textOf(children) };
   }
   const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? "")?.[1];
@@ -1912,9 +1918,9 @@ function CodeBlock({
   return /* @__PURE__ */ jsxs("div", { className: "agno-md-code-block", "data-language": label2, children: [
     /* @__PURE__ */ jsxs("div", { className: "agno-md-code-head", children: [
       /* @__PURE__ */ jsx("span", { className: "agno-md-code-lang", children: label2 }),
-      codeCopy && /* @__PURE__ */ jsx(CopyButton, { className: copyClass, text: () => code })
+      codeCopy && /* @__PURE__ */ jsx(CopyButton, { className: cx("agno-md-copy", copyClass), text: () => code, label: "Copy code", size: 13 })
     ] }),
-    /* @__PURE__ */ jsx("pre", { className: "agno-md-pre", style: { "--agno-code-gutter": `${String(lines.length).length}ch` }, children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: lines.map((tokens, i) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+    /* @__PURE__ */ jsx("pre", { className: "agno-md-pre", style: { "--agno-code-gutter": `${String(lines.length).length}ch` }, children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: lines.map((tokens, i) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "agno-md-line", children: tokens.map((token, j) => /* @__PURE__ */ jsx("span", { style: token.htmlStyle, children: token.content }, j)) }),
       i < lines.length - 1 && "\n"
     ] }, i)) }) })
@@ -2574,6 +2580,20 @@ function Citations({
     ] })
   ] });
 }
+function MessageActions({
+  message,
+  hideCopy,
+  children,
+  className,
+  classNames
+}) {
+  const cn = useResolvedClassNames(classNames);
+  if (hideCopy && !children) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cx("agno-msg__actions", cn.messageActions, className), role: "toolbar", "aria-label": "Message actions", children: [
+    !hideCopy && /* @__PURE__ */ jsx(CopyButton, { className: cx("agno-msg__action", cn.messageCopyButton), text: message.content, label: "Copy message" }),
+    children
+  ] });
+}
 function audioSrc(a) {
   if (a.url) return a.url;
   if (a.base64_audio) return `data:${a.mime_type ?? "audio/mpeg"};base64,${a.base64_audio}`;
@@ -2614,6 +2634,8 @@ function Message({
   hideReasoning,
   hideTools,
   hideSources,
+  hideActions,
+  actions,
   onFollowup
 }) {
   const cn = useResolvedClassNames(classNames);
@@ -2624,10 +2646,11 @@ function Message({
   }, [message.references, message.citations, message.content, uid]);
   const isUser = message.role === "user";
   const isAgent = message.role === "agent";
-  const showSources = isAgent && !hideSources && sources.length > 0;
+  const hasSources = isAgent && !hideSources && sources.length > 0;
+  const showSources = hasSources && !message.streaming;
   const content = useMemo(
-    () => showSources && message.content ? withoutSourcesLine(message.content) : message.content,
-    [message.content, showSources]
+    () => hasSources && message.content ? withoutSourcesLine(message.content) : message.content,
+    [message.content, hasSources]
   );
   const hasActivity = !message.content && !hasBehindTheScenes(message, { hideReasoning, hideTools });
   const kind = isUser ? "user" : isAgent ? entityType : "system";
@@ -2679,7 +2702,8 @@ function Message({
           showSources && /* @__PURE__ */ jsx(Citations, { sources, classNames: cn }),
           isAgent && onFollowup && !message.streaming && /* @__PURE__ */ jsx(Followups, { items: message.followups, onSelect: onFollowup, classNames: cn }),
           message.error && /* @__PURE__ */ jsx("div", { className: "agno-msg__error", children: message.error }),
-          children
+          children,
+          isAgent && !hideActions && !message.streaming && message.content && /* @__PURE__ */ jsx(MessageActions, { message, classNames: cn, children: actions })
         ] }) })
       ]
     }
@@ -2739,7 +2763,7 @@ function MessageList({
         items.length === 0 ? /* @__PURE__ */ jsx("div", { className: cx("agno-list__empty", cn.empty), children: emptyState ?? "Start the conversation." }) : /* @__PURE__ */ jsxs("div", { className: "agno-list__inner", children: [
           items.map((m) => {
             const live = m.streaming && runStatus === "streaming" ? runActivity : void 0;
-            return renderMessage ? /* @__PURE__ */ jsx(React7.Fragment, { children: renderMessage(m, live) }, m.id) : /* @__PURE__ */ jsx(
+            return renderMessage ? /* @__PURE__ */ jsx(React8.Fragment, { children: renderMessage(m, live) }, m.id) : /* @__PURE__ */ jsx(
               Message,
               {
                 message: m,
@@ -3496,6 +3520,6 @@ function EventLog({
   ] });
 }
 
-export { AgnoChat, AgnoMark, ArrowUp, BehindTheScenes, BookOpen, Box, Brain, ChatBubble, ChatInput, ChatLauncher, ChatProvider, ChatWindow, Check, ChevronDown, Citations, Close, Copy, EntityBadge, EntitySelector, EventLog, Favicon, FileAudio, FileIcon, FilePreview, FileType, FileVideo, Followups, Globe, GridLoader, HoverPreview, HumanInput, LinkIcon, LinkPreviewCard, Markdown, MemberResponses, Memory, Message, MessageList, Multimedia, Paperclip, Plus, Pulse, QuickPrompts, Reasoning, Rerun, SessionList, SourceCard, SourcesProvider, Spinner, StatusIndicator, Stop, TeamGlyph, ToolCalls, Trash, WorkflowSteps, Wrench, admitFiles, behindTheScenesItems, behindTheScenesLabel, collectSources, cx, displayUrl, faviconUrl, fileAccepted, getProviderIcon, hasBehindTheScenes, linkCitations, normalizeFollowups, quickPromptLabel, quickPromptText, sourceHost, sourcesFromMarkdown, useAgnoChat, useChatContext, useLinkComponent, useLinkPreview, useOptionalChatContext, useResolvedChat, useResolvedClassNames, useSources, withoutSourcesLine, writeClipboard };
-//# sourceMappingURL=chunk-BZC2674Z.js.map
-//# sourceMappingURL=chunk-BZC2674Z.js.map
+export { AgnoChat, AgnoMark, ArrowUp, BehindTheScenes, BookOpen, Box, Brain, ChatBubble, ChatInput, ChatLauncher, ChatProvider, ChatWindow, Check, ChevronDown, Citations, Close, Copy, CopyButton, EntityBadge, EntitySelector, EventLog, Favicon, FileAudio, FileIcon, FilePreview, FileType, FileVideo, Followups, Globe, GridLoader, HoverPreview, HumanInput, LinkIcon, LinkPreviewCard, Markdown, MemberResponses, Memory, Message, MessageActions, MessageList, Multimedia, Paperclip, Plus, Pulse, QuickPrompts, Reasoning, Rerun, SessionList, SourceCard, SourcesProvider, Spinner, StatusIndicator, Stop, TeamGlyph, ToolCalls, Trash, WorkflowSteps, Wrench, admitFiles, behindTheScenesItems, behindTheScenesLabel, collectSources, cx, displayUrl, faviconFallbacks, faviconUrl, fileAccepted, getProviderIcon, hasBehindTheScenes, linkCitations, normalizeFollowups, quickPromptLabel, quickPromptText, sourceHost, sourcesFromMarkdown, useAgnoChat, useChatContext, useLinkComponent, useLinkPreview, useOptionalChatContext, useResolvedChat, useResolvedClassNames, useSources, withoutSourcesLine, writeClipboard };
+//# sourceMappingURL=chunk-E4CFQ457.js.map
+//# sourceMappingURL=chunk-E4CFQ457.js.map