@agno-hq/chat-react 0.3.0 → 0.3.2

package/dist/{chunk-MUOMZG4V.js → chunk-XTP3TMEZ.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-62IEW2HM.js';
+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 { 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, FileAudio as FileAudio$1, FileVideo as FileVideo$1, Wrench as Wrench$1, BookOpen as BookOpen$1, Globe as Globe$1, 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;
@@ -577,6 +577,7 @@ function ChatProvider({
   renderMarkdown,
   resolveLinkPreview,
   codeCopy,
+  linkComponent,
   chat: externalChat,
   as,
   className,
@@ -587,8 +588,8 @@ function ChatProvider({
   const internal = useAgnoChat(externalChat ? { entity: null } : options);
   const chat = externalChat ?? internal;
   const value = useMemo(
-    () => ({ chat, classNames: classNames ?? {}, renderMarkdown, resolveLinkPreview, codeCopy }),
-    [chat, classNames, renderMarkdown, resolveLinkPreview, codeCopy]
+    () => ({ chat, classNames: classNames ?? {}, renderMarkdown, resolveLinkPreview, codeCopy, linkComponent }),
+    [chat, classNames, renderMarkdown, resolveLinkPreview, codeCopy, linkComponent]
   );
   const Wrapper = as === false ? null : as ?? "div";
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children: Wrapper ? /* @__PURE__ */ jsx(
@@ -621,6 +622,9 @@ function useResolvedChat(explicit) {
 function useCodeCopy() {
   return useOptionalChatContext()?.codeCopy;
 }
+function useLinkComponent() {
+  return useOptionalChatContext()?.linkComponent;
+}
 function useResolvedClassNames(explicit) {
   const ctx = useOptionalChatContext();
   return useMemo(() => ({ ...ctx?.classNames, ...explicit }), [ctx?.classNames, explicit]);
@@ -633,11 +637,13 @@ var ChevronDown = icon(ChevronDown$1);
 var ArrowUp = icon(ArrowUp$1);
 var Paperclip = icon(Paperclip$1);
 var FileIcon = icon(File);
+var FileType = icon(FileType2);
 var FileAudio = icon(FileAudio$1);
 var FileVideo = icon(FileVideo$1);
 var Wrench = icon(Wrench$1);
 var BookOpen = icon(BookOpen$1);
 var Globe = icon(Globe$1);
+var LinkIcon = icon(Link);
 var Brain = icon(Brain$1);
 var Box = icon(Box$1);
 var Plus = icon(Plus$1);
@@ -650,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",
@@ -840,7 +844,16 @@ function ChatLauncher({
 function markFor(type) {
   if (type.startsWith("audio/")) return FileAudio;
   if (type.startsWith("video/")) return FileVideo;
-  return FileIcon;
+  return FileType;
+}
+function formatSize(bytes) {
+  return bytes >= 1024 * 1024 ? `${Math.round(bytes / (1024 * 1024) * 10) / 10}MB` : `${Math.max(1, Math.round(bytes / 1024))}KB`;
+}
+function kindOf(file) {
+  const dot = file.name.lastIndexOf(".");
+  if (dot > 0 && dot < file.name.length - 1) return file.name.slice(dot + 1);
+  const subtype = file.type.split("/")[1];
+  return subtype || "file";
 }
 function Item({ file, onRemove }) {
   const isImage = file.type.startsWith("image/");
@@ -855,15 +868,19 @@ function Item({ file, onRemove }) {
     };
   }, [file, isImage]);
   const Mark = markFor(file.type);
-  return /* @__PURE__ */ jsxs("div", { className: "agno-file", children: [
-    /* @__PURE__ */ jsx("button", { type: "button", className: "agno-file__remove", onClick: onRemove, "aria-label": `Remove ${file.name}`, children: /* @__PURE__ */ jsx(Close, { size: 12 }) }),
-    isImage && url ? /* @__PURE__ */ jsx("img", { className: "agno-file__thumb", src: url, alt: file.name }) : /* @__PURE__ */ jsxs("div", { className: "agno-file__card", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx("agno-file", isImage && url ? "agno-file--image" : "agno-file--card"), children: [
+    isImage && url ? /* @__PURE__ */ jsx("img", { className: "agno-file__thumb", src: url, alt: file.name }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "agno-file__mark", "aria-hidden": true, children: /* @__PURE__ */ jsx(Mark, { size: 16 }) }),
       /* @__PURE__ */ jsxs("span", { className: "agno-file__meta", children: [
         /* @__PURE__ */ jsx("span", { className: "agno-file__name", title: file.name, children: file.name }),
-        /* @__PURE__ */ jsx("span", { className: "agno-file__type", children: file.type || "file" })
+        /* @__PURE__ */ jsxs("span", { className: "agno-file__type", children: [
+          kindOf(file),
+          " \u2022 ",
+          formatSize(file.size)
+        ] })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "agno-file__remove", onClick: onRemove, "aria-label": `Remove ${file.name}`, children: /* @__PURE__ */ jsx(Close, { size: 12 }) })
   ] });
 }
 function FilePreview({ files, onRemove, onClear, className }) {
@@ -873,20 +890,51 @@ function FilePreview({ files, onRemove, onClear, className }) {
       /* @__PURE__ */ jsxs("span", { className: "agno-files__count", children: [
         files.length,
         " ",
-        files.length > 1 ? "files" : "file",
-        " attached"
+        files.length > 1 ? "attachments" : "attachment"
       ] }),
       onClear && /* @__PURE__ */ jsxs("button", { type: "button", className: "agno-files__clear", onClick: onClear, children: [
-        /* @__PURE__ */ jsx(Close, { size: 12 }),
-        "clear ",
-        files.length > 1 ? "all" : ""
+        /* @__PURE__ */ jsx(Close, { size: 14 }),
+        "clear all"
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "agno-files__row", children: files.map((file, i) => /* @__PURE__ */ jsx(Item, { file, onRemove: () => onRemove(i) }, `${file.name}-${file.lastModified}-${i}`)) })
+    /* @__PURE__ */ jsx("div", { className: "agno-files__strip", children: /* @__PURE__ */ jsx("div", { className: "agno-files__row", children: files.map((file, i) => /* @__PURE__ */ jsx(Item, { file, onRemove: () => onRemove(i) }, `${file.name}-${file.lastModified}-${i}`)) }) })
   ] });
 }
-var MIN_HEIGHT = 31;
-var MAX_HEIGHT = 213;
+var BOUNDS = {
+  dock: { min: 31, max: 213 },
+  compact: { min: 24, max: 120 }
+};
+function fileAccepted(file, accept) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean).some((rule) => {
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+    return type === rule;
+  });
+}
+function admitFiles(current, incoming, limits) {
+  const { accept, maxFiles, maxFileSize, maxTotalSize } = limits;
+  const files = [...current];
+  let total = current.reduce((sum, f) => sum + f.size, 0);
+  let error = null;
+  const refuse = (reason) => {
+    error ?? (error = reason);
+  };
+  for (const file of incoming) {
+    if (!fileAccepted(file, accept)) refuse("Cannot add this file type");
+    else if (maxFileSize != null && file.size > maxFileSize) refuse(`Cannot add files over ${formatSize(maxFileSize)}`);
+    else if (maxFiles != null && files.length >= maxFiles) refuse(`Cannot add more than ${maxFiles} attachments`);
+    else if (maxTotalSize != null && total + file.size > maxTotalSize) refuse("Cannot add more files");
+    else {
+      files.push(file);
+      total += file.size;
+    }
+  }
+  return { files, error };
+}
+var hasFiles = (e) => Array.from(e.dataTransfer.types).includes("Files");
 function ChatInput({
   onSend,
   onStop,
@@ -894,6 +942,19 @@ function ChatInput({
   busy,
   placeholder,
   allowFiles = false,
+  compact = false,
+  accept,
+  maxFiles,
+  maxFileSize,
+  maxTotalSize,
+  value: controlled,
+  onValueChange,
+  textareaRef: externalRef,
+  textareaProps,
+  renderTextarea,
+  above,
+  below,
+  dropLabel = "Drop files to attach",
   leading,
   trailing,
   className,
@@ -901,109 +962,216 @@ function ChatInput({
 }) {
   const ctx = useOptionalChatContext();
   const cn = useResolvedClassNames(classNames);
-  const [value, setValue] = useState("");
-  const [files, setFiles] = useState([]);
+  const [internal, setInternal] = useState("");
+  const value = controlled ?? internal;
+  const setValue = (next) => {
+    if (controlled === void 0) setInternal(next);
+    onValueChange?.(next);
+  };
+  const [files, setFilesState] = useState([]);
+  const filesRef = useRef([]);
+  const setFiles = (next) => {
+    filesRef.current = next;
+    setFilesState(next);
+  };
+  const [fileError, setFileError] = useState(null);
+  const [dragging, setDragging] = useState(false);
+  const dragDepth = useRef(0);
   const fileRef = useRef(null);
   const textareaRef = useRef(null);
+  const setTextareaRef = useCallback(
+    (el2) => {
+      textareaRef.current = el2;
+      if (typeof externalRef === "function") externalRef(el2);
+      else if (externalRef) externalRef.current = el2;
+    },
+    [externalRef]
+  );
   const adjustHeight = useCallback(() => {
     const el2 = textareaRef.current;
-    if (!el2) return;
-    el2.style.height = `${MIN_HEIGHT}px`;
-    el2.style.height = `${Math.min(Math.max(el2.scrollHeight, MIN_HEIGHT), MAX_HEIGHT)}px`;
-  }, []);
+    if (!el2 || renderTextarea) return;
+    const { min, max } = compact ? BOUNDS.compact : BOUNDS.dock;
+    el2.style.height = `${min}px`;
+    el2.style.height = `${Math.min(Math.max(el2.scrollHeight, min), max)}px`;
+  }, [renderTextarea, compact]);
   useEffect(adjustHeight, [value, adjustHeight]);
   const send = onSend ?? ((message, attached) => void ctx?.chat.sendMessage(message, attached ? { files: attached } : void 0));
   const stop = onStop ?? (ctx ? () => void ctx.chat.cancel() : void 0);
   const isBusy = busy ?? ctx?.chat.isStreaming ?? false;
   const isDisabled = disabled ?? ctx?.chat.isPaused ?? false;
-  const submit = () => {
+  const limits = { accept, maxFiles, maxFileSize, maxTotalSize };
+  const addFiles = (incoming) => {
+    if (!incoming.length) return;
+    const next = admitFiles(filesRef.current, incoming, limits);
+    setFiles(next.files);
+    setFileError(next.error);
+    if (fileRef.current) fileRef.current.value = "";
+  };
+  const submit = async () => {
     const text = value.trim();
     if (!text && files.length === 0) return;
-    send(text, files.length ? files : void 0);
+    const sent = files.length ? files : void 0;
+    const result = await send(text, sent);
+    if (result === false) return;
     setValue("");
     setFiles([]);
+    setFileError(null);
   };
   const canSend = !isDisabled && !isBusy && (Boolean(value.trim()) || files.length > 0);
-  return /* @__PURE__ */ jsx("div", { className: cx("agno-input", cn.input, className), children: /* @__PURE__ */ jsxs("div", { className: "agno-input__dock", children: [
+  const onKeyDown = (e) => {
+    textareaProps?.onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.shiftKey) {
+      e.preventDefault();
+      if (canSend) void submit();
+    }
+  };
+  const onDragEnter = (e) => {
+    if (!allowFiles || !hasFiles(e)) return;
+    e.preventDefault();
+    dragDepth.current += 1;
+    setDragging(true);
+  };
+  const onDragOver = (e) => {
+    if (!allowFiles || !hasFiles(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+  const onDragLeave = (e) => {
+    if (!allowFiles || dragDepth.current === 0) return;
+    e.preventDefault();
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragging(false);
+  };
+  const onDrop = (e) => {
+    if (!allowFiles || !hasFiles(e)) return;
+    e.preventDefault();
+    dragDepth.current = 0;
+    setDragging(false);
+    addFiles(Array.from(e.dataTransfer.files));
+    textareaRef.current?.focus();
+  };
+  const fieldProps = {
+    rows: 1,
+    ...textareaProps,
+    ref: setTextareaRef,
+    className: cx("agno-input__textarea", cn.textarea, textareaProps?.className),
+    value,
+    placeholder: placeholder ?? (isBusy ? "Running..." : "Ask anything..."),
+    disabled: isDisabled,
+    onChange: (e) => {
+      setValue(e.target.value);
+      textareaProps?.onChange?.(e);
+    },
+    onKeyDown
+  };
+  const iconSize = compact ? 14 : 16;
+  const field = /* @__PURE__ */ jsx("div", { className: "agno-input__field", children: renderTextarea ? renderTextarea(fieldProps) : /* @__PURE__ */ jsx("textarea", { ...fieldProps }) });
+  const attach = allowFiles && /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      FilePreview,
+      "button",
       {
-        files,
-        onRemove: (i) => setFiles((prev) => prev.filter((_, j) => j !== i)),
-        onClear: () => setFiles([]),
-        className: cn.files
+        type: "button",
+        className: cx("agno-btn", compact ? "agno-btn--ghost" : "agno-btn--outline", "agno-btn--icon", cn.attachButton),
+        onClick: () => fileRef.current?.click(),
+        disabled: isDisabled,
+        "aria-label": files.length ? `Attach files; ${files.length} attached` : "Attach files",
+        title: files.length ? files.map((f) => f.name).join(", ") : void 0,
+        children: /* @__PURE__ */ jsx(Paperclip, { size: iconSize })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "agno-input__field", children: /* @__PURE__ */ jsx(
-      "textarea",
+    /* @__PURE__ */ jsx(
+      "input",
       {
-        ref: textareaRef,
-        className: cx("agno-input__textarea", cn.textarea),
-        value,
-        placeholder: placeholder ?? (isBusy ? "Running..." : "Ask anything..."),
-        disabled: isDisabled,
-        rows: 1,
-        onChange: (e) => setValue(e.target.value),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.shiftKey) {
-            e.preventDefault();
-            if (canSend) submit();
-          }
-        }
+        ref: fileRef,
+        type: "file",
+        multiple: true,
+        hidden: true,
+        accept,
+        onChange: (e) => addFiles(Array.from(e.target.files ?? []))
       }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: cx("agno-input__row", cn.inputRow), children: [
-      /* @__PURE__ */ jsxs("div", { className: "agno-input__actions", children: [
-        leading,
-        allowFiles && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: cx("agno-btn", "agno-btn--outline", "agno-btn--icon", cn.attachButton),
-              onClick: () => fileRef.current?.click(),
-              disabled: isDisabled,
-              "aria-label": "Attach files",
-              children: /* @__PURE__ */ jsx(Paperclip, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: fileRef,
-              type: "file",
-              multiple: true,
-              hidden: true,
-              onChange: (e) => setFiles((prev) => [...prev, ...Array.from(e.target.files ?? [])])
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "agno-input__actions", children: [
-        trailing,
-        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: 16 })
-          }
-        ) : /* @__PURE__ */ jsx(
-          "button",
+    )
+  ] });
+  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",
+    {
+      type: "button",
+      className: cx("agno-btn", "agno-btn--icon", cn.sendButton),
+      onClick: () => void submit(),
+      disabled: !canSend,
+      "aria-label": "Send",
+      children: /* @__PURE__ */ jsx(ArrowUp, { size: iconSize })
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("agno-input", compact && "agno-input--compact", cn.input, className),
+      "data-dragging": dragging ? "true" : void 0,
+      onDragEnter,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      children: /* @__PURE__ */ jsxs("div", { className: "agno-input__dock", children: [
+        dragging && /* @__PURE__ */ jsxs("div", { className: cx("agno-input__drop", cn.dropOverlay), "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx(Paperclip, { size: 16 }),
+          /* @__PURE__ */ jsx("span", { children: dropLabel })
+        ] }),
+        above,
+        /* @__PURE__ */ jsx(
+          FilePreview,
           {
-            type: "button",
-            className: cx("agno-btn", "agno-btn--icon", cn.sendButton),
-            onClick: submit,
-            disabled: !canSend,
-            "aria-label": "Send",
-            children: /* @__PURE__ */ jsx(ArrowUp, { size: 16 })
+            files,
+            onRemove: (i) => {
+              setFiles(filesRef.current.filter((_, j) => j !== i));
+              setFileError(null);
+            },
+            onClear: () => {
+              setFiles([]);
+              setFileError(null);
+            },
+            className: cn.files
           }
-        )
+        ),
+        fileError && /* @__PURE__ */ jsx("p", { className: cx("agno-input__error", cn.fileError), role: "alert", children: fileError }),
+        compact ? (
+          // One line: the field, then every control beside it.
+          /* @__PURE__ */ jsxs("div", { className: cx("agno-input__row", cn.inputRow), children: [
+            leading,
+            field,
+            /* @__PURE__ */ jsxs("div", { className: "agno-input__actions", children: [
+              attach,
+              trailing,
+              primary
+            ] })
+          ] })
+        ) : field,
+        below,
+        !compact && /* @__PURE__ */ jsxs("div", { className: cx("agno-input__row", cn.inputRow), children: [
+          /* @__PURE__ */ jsxs("div", { className: "agno-input__actions", children: [
+            leading,
+            attach
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "agno-input__actions", children: [
+            trailing,
+            primary
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 function normalizeFollowups(items) {
   if (!items?.length) return [];
@@ -1526,20 +1694,15 @@ var PREVIEW_WIDTH = 320;
 var GAP = 8;
 var OPEN_DELAY = 140;
 var CLOSE_DELAY = 120;
-function usePlacement(anchor, open) {
+function usePlacement(anchor, open, { width = PREVIEW_WIDTH, align = "center" } = {}) {
   const [placement, setPlacement] = useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!open || !anchor) return;
     const place = () => {
       const rect = anchor.getBoundingClientRect();
       const side = rect.top > 220 ? "top" : "bottom";
-      const left = Math.max(
-        GAP,
-        Math.min(
-          rect.left + rect.width / 2 - PREVIEW_WIDTH / 2,
-          window.innerWidth - PREVIEW_WIDTH - GAP
-        )
-      );
+      const wanted = align === "center" ? rect.left + rect.width / 2 - width / 2 : rect.left;
+      const left = Math.max(GAP, Math.min(wanted, window.innerWidth - width - GAP));
       setPlacement({
         top: side === "top" ? rect.top - GAP : rect.bottom + GAP,
         left,
@@ -1553,7 +1716,7 @@ function usePlacement(anchor, open) {
       window.removeEventListener("scroll", place, true);
       window.removeEventListener("resize", place);
     };
-  }, [anchor, open]);
+  }, [anchor, open, width, align]);
   return placement;
 }
 function HoverPreview({
@@ -1655,16 +1818,20 @@ function labelOf(children) {
 }
 function CitationMarker({
   source,
-  className
+  className,
+  Link
 }) {
-  return /* @__PURE__ */ jsx(HoverPreview, { source, className: "agno-cite__wrap", children: /* @__PURE__ */ jsx(
+  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",
     {
-      className: cx("agno-cite", className),
-      href: source.url ?? `#${source.anchorId}`,
+      ...props,
       target: source.url ? "_blank" : void 0,
       rel: source.url ? "noreferrer noopener" : void 0,
-      "aria-label": `Source ${source.index}: ${source.title}`,
       children: source.index
     }
   ) });
@@ -1763,8 +1930,8 @@ function elementsFor(ctx) {
     ...rest
   }) {
     const cited = citationForLink(labelOf(children), href, ctx);
-    if (cited) return /* @__PURE__ */ jsx(CitationMarker, { source: cited, className: ctx.markerClass });
-    const link = /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer noopener", ...rest, children });
+    if (cited) return /* @__PURE__ */ jsx(CitationMarker, { source: cited, className: ctx.markerClass, Link: ctx.Link });
+    const link = ctx.Link && href ? /* @__PURE__ */ jsx(ctx.Link, { href, ...rest, children }) : /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer noopener", ...rest, children });
     const source = sourceForUrl(href, ctx.sources);
     if (!href || !/^https?:\/\//i.test(href) || !source && !ctx.canResolve) return link;
     return /* @__PURE__ */ jsx(
@@ -1830,23 +1997,27 @@ function Markdown({
   sources,
   streaming,
   codeCopy,
+  linkComponent,
   options
 }) {
   const fromMessage = useSources();
   const cn = useResolvedClassNames();
   const canResolve = Boolean(useLinkPreviewResolver());
   const fromProvider = useCodeCopy();
+  const providerLink = useLinkComponent();
   const cited = sources ?? fromMessage;
   const copy = codeCopy ?? fromProvider ?? true;
+  const Link = linkComponent ?? providerLink;
   const components = useMemo(
     () => elementsFor({
       sources: cited,
       canResolve,
       markerClass: cn.citationMarker,
       copyClass: cn.copyButton,
-      codeCopy: copy
+      codeCopy: copy,
+      Link
     }),
-    [cited, canResolve, cn.citationMarker, cn.copyButton, copy]
+    [cited, canResolve, cn.citationMarker, cn.copyButton, copy, Link]
   );
   const text = useMemo(() => linkCitations(content, cited), [content, cited]);
   return /* @__PURE__ */ jsx(
@@ -2257,12 +2428,25 @@ function SourceCard({
   className
 }) {
   const cn = useResolvedClassNames();
+  const Link = useLinkComponent();
   const { preview } = useLinkPreview(source.url, false);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Favicon, { url: preview?.favicon ?? source.url, kind: source.kind }),
-    /* @__PURE__ */ jsx("span", { className: "agno-source__title", children: preview?.title ?? source.title })
+    /* @__PURE__ */ jsx(
+      Favicon,
+      {
+        className: "agno-source__icon",
+        url: preview?.favicon ?? source.url,
+        kind: source.kind,
+        size: 24
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "agno-source__title", children: preview?.title ?? source.title }),
+    source.url && /* @__PURE__ */ jsx(LinkIcon, { className: "agno-source__link" })
   ] });
   const classes = cx("agno-source", `agno-source--${source.kind}`, cn.sourceCard, className);
+  if (source.url && Link) {
+    return /* @__PURE__ */ jsx(Link, { id: source.anchorId, className: classes, href: source.url, title: source.url, children: body });
+  }
   return source.url ? /* @__PURE__ */ jsx(
     "a",
     {
@@ -2276,33 +2460,118 @@ function SourceCard({
     }
   ) : /* @__PURE__ */ jsx("div", { id: source.anchorId, className: classes, children: body });
 }
+var LIST_WIDTH = 240;
+function SourcesOverflow({ sources }) {
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  const timer = useRef(null);
+  const id = useId();
+  const placement = usePlacement(anchor, open, { width: LIST_WIDTH, align: "start" });
+  const schedule = useCallback((next) => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(next), next ? OPEN_DELAY : CLOSE_DELAY);
+  }, []);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const light = anchor?.closest(".agno-light") ? "agno-light" : void 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "agno-sources__overflow",
+      ref: setAnchor,
+      onMouseEnter: () => schedule(true),
+      onMouseLeave: () => schedule(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "agno-sources__more",
+            "aria-label": `${sources.length} more sources`,
+            "aria-expanded": open,
+            "aria-controls": open ? id : void 0,
+            onClick: () => setOpen((v) => !v),
+            onFocus: () => setOpen(true),
+            onBlur: () => schedule(false),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "agno-sources__stack", "aria-hidden": true, children: sources.slice(0, 3).map((source) => /* @__PURE__ */ jsx(
+                Favicon,
+                {
+                  className: "agno-sources__stack-icon",
+                  url: source.url,
+                  kind: source.kind,
+                  size: 24
+                },
+                source.anchorId
+              )) }),
+              /* @__PURE__ */ jsxs("span", { className: "agno-sources__more-label", children: [
+                "+",
+                sources.length,
+                " more"
+              ] })
+            ]
+          }
+        ),
+        mounted && open && placement && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id,
+              role: "group",
+              "aria-label": "More sources",
+              className: cx("agno-sources__list", `agno-sources__list--${placement.side}`, light),
+              style: { top: placement.top, left: placement.left, width: LIST_WIDTH },
+              onMouseEnter: () => schedule(true),
+              onMouseLeave: () => schedule(false),
+              onFocus: () => schedule(true),
+              onBlur: () => schedule(false),
+              children: sources.map((source) => /* @__PURE__ */ jsx(SourceCard, { source, className: "agno-source--row" }, source.anchorId))
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
 function Citations({
   references,
   citations,
   sources: given,
-  title = "Sources",
-  max = 4,
+  title = "Sources used",
+  max = 3,
   className,
   classNames
 }) {
   const cn = useResolvedClassNames(classNames);
   const uid = useId();
-  const [expanded, setExpanded] = useState(false);
   const sources = useMemo(
     () => given ?? collectSources(references, citations, uid),
     [given, references, citations, uid]
   );
   if (sources.length === 0) return null;
-  const limit = max > 0 && !expanded ? max : sources.length;
+  const limit = max > 0 ? max : sources.length;
   const visible = sources.slice(0, limit);
-  const hidden = sources.length - visible.length;
+  const hidden = sources.slice(limit);
   return /* @__PURE__ */ jsxs("section", { className: cx("agno-sources", cn.citations, className), "aria-label": title, children: [
     /* @__PURE__ */ jsx("div", { className: "agno-sources__head", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "agno-sources__grid", children: visible.map((source) => /* @__PURE__ */ jsx(SourceCard, { source }, source.anchorId)) }),
-    hidden > 0 && /* @__PURE__ */ jsxs("button", { type: "button", className: "agno-sources__more", onClick: () => setExpanded(true), children: [
-      "Show ",
-      hidden,
-      " more"
+    /* @__PURE__ */ jsxs("div", { className: "agno-sources__grid", children: [
+      visible.map((source) => /* @__PURE__ */ jsx(SourceCard, { source }, source.anchorId)),
+      hidden.length > 0 && /* @__PURE__ */ jsx(SourcesOverflow, { sources: hidden })
     ] })
   ] });
 }
@@ -2356,10 +2625,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";
@@ -2518,6 +2788,7 @@ function ChatWindow({
   userInitials,
   emptyState,
   allowFiles,
+  compactInput,
   disabled,
   renderMarkdown,
   showErrors,
@@ -2526,6 +2797,7 @@ function ChatWindow({
   hideFollowups,
   onFollowup,
   followupsTitle,
+  renderMessage,
   header,
   composer,
   className,
@@ -2552,6 +2824,7 @@ function ChatWindow({
         renderMarkdown: markdown,
         classNames: cn,
         emptyState,
+        renderMessage,
         footer: pausedMessage ? /* @__PURE__ */ jsx(
           HumanInput,
           {
@@ -2594,6 +2867,7 @@ function ChatWindow({
         disabled: disabled || chat.isPaused,
         placeholder,
         allowFiles,
+        compact: compactInput,
         classNames: cn
       }
     )
@@ -2982,6 +3256,7 @@ function AgnoChat(props) {
               chat,
               placeholder: props.placeholder,
               allowFiles: props.allowFiles ?? true,
+              compactInput: props.compactInput,
               disabled: !entity,
               renderMarkdown: props.renderMarkdown,
               showErrors: props.showErrors,
@@ -2999,6 +3274,7 @@ function AgnoChat(props) {
                   disabled: !entity || chat.isPaused,
                   placeholder: props.placeholder,
                   allowFiles: props.allowFiles ?? true,
+                  compact: props.compactInput,
                   classNames: cn,
                   trailing: showPicker ? /* @__PURE__ */ jsx(
                     EntitySelector,
@@ -3027,6 +3303,7 @@ function AgnoChat(props) {
       renderMarkdown: props.renderMarkdown,
       resolveLinkPreview: props.resolveLinkPreview,
       codeCopy: props.codeCopy,
+      linkComponent: props.linkComponent,
       as: false,
       children: root
     }
@@ -3221,6 +3498,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, FileVideo, Followups, Globe, GridLoader, HoverPreview, HumanInput, LinkPreviewCard, Markdown, MemberResponses, Memory, Message, MessageList, Multimedia, Paperclip, Plus, Pulse, QuickPrompts, Reasoning, Rerun, SessionList, SourceCard, SourcesProvider, Spinner, StatusIndicator, Stop, TeamGlyph, ToolCalls, Trash, WorkflowSteps, Wrench, behindTheScenesItems, behindTheScenesLabel, collectSources, cx, displayUrl, faviconUrl, getProviderIcon, hasBehindTheScenes, linkCitations, normalizeFollowups, quickPromptLabel, quickPromptText, sourceHost, sourcesFromMarkdown, useAgnoChat, useChatContext, useLinkPreview, useOptionalChatContext, useResolvedChat, useResolvedClassNames, useSources, withoutSourcesLine, writeClipboard };
-//# sourceMappingURL=chunk-MUOMZG4V.js.map
-//# sourceMappingURL=chunk-MUOMZG4V.js.map
+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-XTP3TMEZ.js.map
+//# sourceMappingURL=chunk-XTP3TMEZ.js.map