@rodrigocoliveira/agno-react 1.3.1 → 2.0.0

package/dist/index.mjs

@@ -1,3 +1,11 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/context/AgnoContext.tsx
 import { createContext, useContext, useMemo, useEffect } from "react";
 import { AgnoClient } from "@rodrigocoliveira/agno-client";
@@ -1065,14 +1073,1666 @@ function useAgnoActions() {
     error
   };
 }
+// src/ui/composed/agno-chat/render-tool.ts
+function byToolName(map, fallback) {
+  return (tool, args) => {
+    if (!Object.prototype.hasOwnProperty.call(map, tool.tool_name)) {
+      return fallback ? fallback(tool, args) : args.defaultRender();
+    }
+    const entry = map[tool.tool_name];
+    if (entry === false)
+      return null;
+    return entry(tool, args);
+  };
+}
+// src/ui/primitives/badge.tsx
+import { cva } from "class-variance-authority";
+
+// src/ui/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/primitives/badge.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+      outline: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx4("div", {
+    className: cn(badgeVariants({ variant }), className),
+    ...props
+  });
+}
+
+// src/ui/primitives/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+// src/ui/components/tool.tsx
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon
+} from "lucide-react";
+import { isValidElement } from "react";
+
+// src/ui/primitives/button.tsx
+import * as React4 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var buttonVariants = cva2("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+      destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+      outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2",
+      sm: "h-8 rounded-md px-3 text-xs",
+      lg: "h-10 rounded-md px-8",
+      icon: "h-9 w-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React4.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx5(Comp, {
+    className: cn(buttonVariants({ variant, size, className })),
+    ref,
+    ...props
+  });
+});
+Button.displayName = "Button";
+
+// src/ui/components/code-block.tsx
+import { CheckIcon, CopyIcon } from "lucide-react";
+import {
+  createContext as createContext3,
+  useContext as useContext3,
+  useEffect as useEffect5,
+  useRef,
+  useState as useState6
+} from "react";
+import { jsx as jsx6, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+var CodeBlockContext = createContext3({
+  code: ""
+});
+async function highlightCode(code, language, showLineNumbers = false) {
+  try {
+    const shiki = await import("shiki");
+    const lineNumberTransformer = showLineNumbers ? [
+      {
+        name: "line-numbers",
+        line(node, line) {
+          node.children.unshift({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["inline-block", "min-w-10", "mr-4", "text-right", "select-none", "text-muted-foreground"]
+            },
+            children: [{ type: "text", value: String(line) }]
+          });
+        }
+      }
+    ] : [];
+    const [light, dark] = await Promise.all([
+      shiki.codeToHtml(code, { lang: language, theme: "one-light", transformers: lineNumberTransformer }),
+      shiki.codeToHtml(code, { lang: language, theme: "one-dark-pro", transformers: lineNumberTransformer })
+    ]);
+    return [light, dark];
+  } catch {
+    return ["", ""];
+  }
+}
+var CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}) => {
+  const [html, setHtml] = useState6("");
+  const [darkHtml, setDarkHtml] = useState6("");
+  const effectIdRef = useRef(0);
+  useEffect5(() => {
+    const id = ++effectIdRef.current;
+    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+      if (id === effectIdRef.current) {
+        setHtml(light);
+        setDarkHtml(dark);
+      }
+    });
+  }, [code, language, showLineNumbers]);
+  const useFallback = !html && !darkHtml;
+  return /* @__PURE__ */ jsx6(CodeBlockContext.Provider, {
+    value: { code },
+    children: /* @__PURE__ */ jsx6("div", {
+      className: cn("group relative w-full overflow-hidden rounded-md border bg-background text-foreground", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs2("div", {
+        className: "relative",
+        children: [
+          useFallback ? /* @__PURE__ */ jsx6("pre", {
+            className: "m-0 overflow-auto bg-background p-4 text-foreground text-sm",
+            children: /* @__PURE__ */ jsx6("code", {
+              className: "font-mono text-sm",
+              children: code
+            })
+          }) : /* @__PURE__ */ jsxs2(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx6("div", {
+                className: "overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm",
+                dangerouslySetInnerHTML: { __html: html }
+              }),
+              /* @__PURE__ */ jsx6("div", {
+                className: "hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm",
+                dangerouslySetInnerHTML: { __html: darkHtml }
+              })
+            ]
+          }),
+          children && /* @__PURE__ */ jsx6("div", {
+            className: "absolute top-2 right-2 flex items-center gap-2",
+            children
+          })
+        ]
+      })
+    })
+  });
+};
+
+// src/ui/components/tool.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx7(Collapsible, {
+  className: cn("not-prose mb-4 w-full rounded-md border", className),
+  ...props
+});
+var getStatusBadge = (status) => {
+  const labels = {
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    "approval-requested": "Awaiting Approval",
+    "approval-responded": "Responded",
+    "output-available": "Completed",
+    "output-error": "Error",
+    "output-denied": "Denied"
+  };
+  const icons = {
+    "input-streaming": /* @__PURE__ */ jsx7(CircleIcon, {
+      className: "size-4"
+    }),
+    "input-available": /* @__PURE__ */ jsx7(ClockIcon, {
+      className: "size-4 animate-pulse"
+    }),
+    "approval-requested": /* @__PURE__ */ jsx7(ClockIcon, {
+      className: "size-4 text-yellow-600"
+    }),
+    "approval-responded": /* @__PURE__ */ jsx7(CheckCircleIcon, {
+      className: "size-4 text-blue-600"
+    }),
+    "output-available": /* @__PURE__ */ jsx7(CheckCircleIcon, {
+      className: "size-4 text-green-600"
+    }),
+    "output-error": /* @__PURE__ */ jsx7(XCircleIcon, {
+      className: "size-4 text-red-600"
+    }),
+    "output-denied": /* @__PURE__ */ jsx7(XCircleIcon, {
+      className: "size-4 text-orange-600"
+    })
+  };
+  return /* @__PURE__ */ jsxs3(Badge, {
+    className: "gap-1.5 rounded-full text-xs",
+    variant: "secondary",
+    children: [
+      icons[status],
+      labels[status]
+    ]
+  });
+};
+var ToolHeader = ({ className, title, type, state, ...props }) => /* @__PURE__ */ jsxs3(CollapsibleTrigger2, {
+  className: cn("group flex w-full items-center justify-between gap-4 p-3", className),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxs3("div", {
+      className: "flex items-center gap-2",
+      children: [
+        /* @__PURE__ */ jsx7(WrenchIcon, {
+          className: "size-4 text-muted-foreground"
+        }),
+        /* @__PURE__ */ jsx7("span", {
+          className: "font-medium text-sm",
+          children: title ?? type?.split("-").slice(1).join("-") ?? "Tool"
+        }),
+        getStatusBadge(state)
+      ]
+    }),
+    /* @__PURE__ */ jsx7(ChevronDownIcon, {
+      className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+    })
+  ]
+});
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx7(CollapsibleContent2, {
+  className: cn("data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in", className),
+  ...props
+});
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs3("div", {
+  className: cn("space-y-2 overflow-hidden p-4", className),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx7("h4", {
+      className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+      children: "Parameters"
+    }),
+    /* @__PURE__ */ jsx7("div", {
+      className: "rounded-md bg-muted/50",
+      children: /* @__PURE__ */ jsx7(CodeBlock, {
+        code: JSON.stringify(input, null, 2),
+        language: "json"
+      })
+    })
+  ]
+});
+var ToolOutput = ({ className, output, errorText, ...props }) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ jsx7("div", {
+    children: output
+  });
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = /* @__PURE__ */ jsx7(CodeBlock, {
+      code: JSON.stringify(output, null, 2),
+      language: "json"
+    });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ jsx7(CodeBlock, {
+      code: output,
+      language: "json"
+    });
+  }
+  return /* @__PURE__ */ jsxs3("div", {
+    className: cn("space-y-2 p-4", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx7("h4", {
+        className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+        children: errorText ? "Error" : "Result"
+      }),
+      /* @__PURE__ */ jsxs3("div", {
+        className: cn("overflow-x-auto rounded-md text-xs [&_table]:w-full", errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"),
+        children: [
+          errorText && /* @__PURE__ */ jsx7("div", {
+            children: errorText
+          }),
+          Output
+        ]
+      })
+    ]
+  });
+};
+
+// src/ui/primitives/tooltip.tsx
+import * as React5 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx8(TooltipPrimitive.Portal, {
+  children: /* @__PURE__ */ jsx8(TooltipPrimitive.Content, {
+    ref,
+    sideOffset,
+    className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]", className),
+    ...props
+  })
+}));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/ui/components/artifact.tsx
+import { XIcon } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsx9("div", {
+  className: cn("flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm", className),
+  ...props
+});
+
+// src/ui/composed/agno-chat/tool-building-blocks.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var getToolState = (tool) => tool.tool_call_error ? "output-error" : "output-available";
+function ToolDebugCard({ tool, defaultOpen }) {
+  const output = tool.result ?? tool.content;
+  return /* @__PURE__ */ jsxs5(Tool, {
+    defaultOpen,
+    children: [
+      /* @__PURE__ */ jsx10(ToolHeader, {
+        title: tool.tool_name,
+        type: "tool-use",
+        state: getToolState(tool)
+      }),
+      /* @__PURE__ */ jsxs5(ToolContent, {
+        children: [
+          /* @__PURE__ */ jsx10(ToolInput, {
+            input: tool.tool_args
+          }),
+          output ? /* @__PURE__ */ jsx10(ToolOutput, {
+            output,
+            errorText: tool.tool_call_error ? "Tool execution failed" : undefined
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+function ToolGenerativeUI({ tool }) {
+  const uiComponent = tool.ui_component;
+  if (!uiComponent)
+    return null;
+  return uiComponent.layout === "artifact" ? /* @__PURE__ */ jsx10(Artifact, {
+    children: /* @__PURE__ */ jsx10(GenerativeUIRenderer, {
+      spec: uiComponent,
+      className: "w-full p-2"
+    })
+  }) : /* @__PURE__ */ jsx10(GenerativeUIRenderer, {
+    spec: uiComponent,
+    className: "w-full"
+  });
+}
+// src/ui/composed/agno-message/message.tsx
+import { useMemo as useMemo3, useState as useState8 } from "react";
+import { AlertCircle as AlertCircle2, FileIcon as FileIcon4, Music as Music2 } from "lucide-react";
+
+// src/ui/lib/format-timestamp.ts
+function formatSmartTimestamp(date) {
+  const now = new Date;
+  const isToday = date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate();
+  if (isToday) {
+    return new Intl.DateTimeFormat(undefined, {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true
+    }).format(date);
+  }
+  const isSameYear = date.getFullYear() === now.getFullYear();
+  if (isSameYear) {
+    return new Intl.DateTimeFormat(undefined, {
+      month: "short",
+      day: "numeric"
+    }).format(date);
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(date);
+}
+function formatFullTimestamp(date) {
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  }).format(date);
+}
+
+// src/ui/components/smart-timestamp.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function SmartTimestamp({ date, formatShort, className }) {
+  const shortText = formatShort ? formatShort(date) : formatSmartTimestamp(date);
+  const fullText = formatFullTimestamp(date);
+  return /* @__PURE__ */ jsx11(TooltipProvider, {
+    children: /* @__PURE__ */ jsxs6(Tooltip, {
+      children: [
+        /* @__PURE__ */ jsx11(TooltipTrigger, {
+          asChild: true,
+          children: /* @__PURE__ */ jsx11("span", {
+            className,
+            children: shortText
+          })
+        }),
+        /* @__PURE__ */ jsx11(TooltipContent, {
+          children: /* @__PURE__ */ jsx11("p", {
+            children: fullText
+          })
+        })
+      ]
+    })
+  });
+}
+
+// src/ui/lib/file-utils.ts
+function getFilePreviewType(mimeType) {
+  if (!mimeType)
+    return "none";
+  if (mimeType.startsWith("image/"))
+    return "image";
+  if (mimeType === "application/pdf")
+    return "pdf";
+  if (mimeType.startsWith("text/"))
+    return "text";
+  if (mimeType.startsWith("video/"))
+    return "video";
+  if (mimeType.startsWith("audio/"))
+    return "audio";
+  return "none";
+}
+function formatFileSize(bytes) {
+  if (bytes === 0)
+    return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const value = bytes / Math.pow(k, i);
+  return `${value % 1 === 0 ? value : value.toFixed(1)} ${units[i]}`;
+}
+function getFileExtension(filename, mimeType) {
+  const lastDot = filename.lastIndexOf(".");
+  if (lastDot !== -1 && lastDot !== 0) {
+    return filename.slice(lastDot + 1).toLowerCase();
+  }
+  if (mimeType) {
+    return extensionFromMime(mimeType);
+  }
+  return "";
+}
+var mimeToExt = {
+  "application/pdf": "pdf",
+  "application/zip": "zip",
+  "application/x-rar-compressed": "rar",
+  "application/json": "json",
+  "application/xml": "xml",
+  "application/msword": "doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+  "application/vnd.ms-excel": "xls",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+  "application/vnd.ms-powerpoint": "ppt",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx",
+  "text/csv": "csv",
+  "text/plain": "txt",
+  "text/html": "html",
+  "text/css": "css",
+  "text/javascript": "js"
+};
+function extensionFromMime(mimeType) {
+  if (mimeToExt[mimeType])
+    return mimeToExt[mimeType];
+  const subtype = mimeType.split("/")[1];
+  if (subtype && !subtype.includes(".") && !subtype.includes("+")) {
+    return subtype.toLowerCase();
+  }
+  return "";
+}
+function isPreviewable(mimeType) {
+  const type = getFilePreviewType(mimeType);
+  return type === "image" || type === "pdf";
+}
+
+// src/ui/components/file-preview-card.tsx
+import { FileIcon, Search } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function ExtBadge({ ext }) {
+  if (!ext)
+    return null;
+  return /* @__PURE__ */ jsx12("span", {
+    className: "absolute bottom-1.5 left-1.5 rounded px-1 py-0.5 text-[9px] font-semibold uppercase leading-none bg-background/80 text-muted-foreground border border-border/50 backdrop-blur-sm",
+    children: ext
+  });
+}
+function FilePreviewCard({ file, onClick, className }) {
+  const previewType = getFilePreviewType(file.type);
+  const isClickable = !!onClick;
+  const ext = getFileExtension(file.name, file.type);
+  const cardBase = cn("group relative flex flex-col overflow-hidden rounded-xl border border-border bg-muted/20 w-28 h-28", isClickable && "cursor-pointer hover:border-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors", className);
+  if (previewType === "image" && file.url) {
+    return /* @__PURE__ */ jsxs7("button", {
+      type: "button",
+      onClick,
+      disabled: !isClickable,
+      className: cardBase,
+      children: [
+        /* @__PURE__ */ jsx12("img", {
+          src: file.url,
+          alt: file.name,
+          className: "w-full h-full object-cover"
+        }),
+        /* @__PURE__ */ jsx12(ExtBadge, {
+          ext
+        }),
+        isClickable && /* @__PURE__ */ jsx12("div", {
+          className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors",
+          children: /* @__PURE__ */ jsx12(Search, {
+            className: "h-5 w-5 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+          })
+        })
+      ]
+    });
+  }
+  if (previewType === "pdf" && file.url) {
+    return /* @__PURE__ */ jsxs7("button", {
+      type: "button",
+      onClick,
+      disabled: !isClickable,
+      className: cardBase,
+      children: [
+        /* @__PURE__ */ jsx12("div", {
+          className: "w-full h-full overflow-hidden pointer-events-none",
+          children: /* @__PURE__ */ jsx12("object", {
+            data: `${file.url}#page=1&view=FitH`,
+            type: "application/pdf",
+            className: "w-[200%] h-[200%] origin-top-left scale-50",
+            "aria-label": file.name,
+            children: /* @__PURE__ */ jsx12("div", {
+              className: "flex items-center justify-center w-full h-full",
+              children: /* @__PURE__ */ jsx12(FileIcon, {
+                className: "h-8 w-8 text-muted-foreground/40"
+              })
+            })
+          })
+        }),
+        /* @__PURE__ */ jsx12(ExtBadge, {
+          ext
+        }),
+        isClickable && /* @__PURE__ */ jsx12("div", {
+          className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/10 transition-colors",
+          children: /* @__PURE__ */ jsx12(Search, {
+            className: "h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+          })
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsxs7("button", {
+    type: "button",
+    onClick,
+    disabled: !isClickable,
+    className: cardBase,
+    children: [
+      /* @__PURE__ */ jsx12("div", {
+        className: "flex-1 flex items-center justify-center",
+        children: /* @__PURE__ */ jsx12(FileIcon, {
+          className: "h-8 w-8 text-muted-foreground/40"
+        })
+      }),
+      /* @__PURE__ */ jsxs7("div", {
+        className: "w-full text-center min-w-0 px-2 pb-2 space-y-0.5",
+        children: [
+          /* @__PURE__ */ jsx12("p", {
+            className: "text-[10px] text-foreground truncate leading-tight",
+            title: file.name,
+            children: file.name
+          }),
+          file.size != null && file.size > 0 && /* @__PURE__ */ jsx12("p", {
+            className: "text-[9px] text-muted-foreground leading-tight",
+            children: formatFileSize(file.size)
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx12(ExtBadge, {
+        ext
+      })
+    ]
+  });
+}
+
+// src/ui/primitives/dialog.tsx
+import * as React6 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva as cva3 } from "class-variance-authority";
+import { X } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(DialogPrimitive.Overlay, {
+  ref,
+  className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+  ...props
+}));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var dialogContentVariants = cva3("fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", {
+  variants: {
+    variant: {
+      default: "w-full max-w-lg bg-background p-6",
+      lightbox: "max-w-[90vw] max-h-[90vh] bg-background/95 backdrop-blur-sm p-2"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var DialogContent = React6.forwardRef(({ className, variant, children, ...props }, ref) => /* @__PURE__ */ jsxs8(DialogPortal, {
+  children: [
+    /* @__PURE__ */ jsx13(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs8(DialogPrimitive.Content, {
+      ref,
+      className: cn(dialogContentVariants({ variant }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs8(DialogPrimitive.Close, {
+          className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsx13(X, {
+              className: "h-4 w-4"
+            }),
+            /* @__PURE__ */ jsx13("span", {
+              className: "sr-only",
+              children: "Close"
+            })
+          ]
+        })
+      ]
+    })
+  ]
+}));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx13("div", {
+  className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+  ...props
+});
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx13("div", {
+  className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+  ...props
+});
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(DialogPrimitive.Title, {
+  ref,
+  className: cn("text-lg font-semibold leading-none tracking-tight", className),
+  ...props
+}));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(DialogPrimitive.Description, {
+  ref,
+  className: cn("text-sm text-muted-foreground", className),
+  ...props
+}));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/ui/components/file-preview-modal.tsx
+import { Download, FileIcon as FileIcon2 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function FilePreviewModal({ open, onOpenChange, file }) {
+  if (!file)
+    return null;
+  const previewType = getFilePreviewType(file.type);
+  const canPreview = isPreviewable(file.type) && !!file.url;
+  return /* @__PURE__ */ jsx14(Dialog, {
+    open,
+    onOpenChange,
+    children: previewType === "image" && file.url ? /* @__PURE__ */ jsxs9(DialogContent, {
+      variant: "lightbox",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx14(DialogTitle, {
+          className: "sr-only",
+          children: file.name
+        }),
+        /* @__PURE__ */ jsx14("img", {
+          src: file.url,
+          alt: file.name,
+          className: "max-h-[85vh] max-w-full object-contain rounded-md"
+        })
+      ]
+    }) : previewType === "pdf" && file.url ? /* @__PURE__ */ jsxs9(DialogContent, {
+      variant: "lightbox",
+      className: "w-[80vw] h-[85vh]",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx14(DialogTitle, {
+          className: "sr-only",
+          children: file.name
+        }),
+        /* @__PURE__ */ jsx14("object", {
+          data: file.url,
+          type: "application/pdf",
+          className: "w-full h-full rounded-md",
+          children: /* @__PURE__ */ jsxs9("div", {
+            className: "flex flex-col items-center justify-center h-full gap-3 text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx14("p", {
+                className: "text-sm",
+                children: "Unable to display PDF"
+              }),
+              /* @__PURE__ */ jsxs9("a", {
+                href: file.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline",
+                children: [
+                  /* @__PURE__ */ jsx14(Download, {
+                    className: "h-4 w-4"
+                  }),
+                  "Download ",
+                  file.name
+                ]
+              })
+            ]
+          })
+        })
+      ]
+    }) : /* @__PURE__ */ jsxs9(DialogContent, {
+      children: [
+        /* @__PURE__ */ jsxs9(DialogHeader, {
+          children: [
+            /* @__PURE__ */ jsxs9(DialogTitle, {
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx14(FileIcon2, {
+                  className: "h-5 w-5 text-muted-foreground"
+                }),
+                file.name
+              ]
+            }),
+            /* @__PURE__ */ jsxs9(DialogDescription, {
+              children: [
+                file.size != null && file.size > 0 && /* @__PURE__ */ jsx14("span", {
+                  children: formatFileSize(file.size)
+                }),
+                !canPreview && /* @__PURE__ */ jsx14("span", {
+                  children: " · Preview not available for this file type"
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs9("div", {
+          className: "flex flex-col items-center justify-center py-8 text-muted-foreground gap-3",
+          children: [
+            /* @__PURE__ */ jsx14(FileIcon2, {
+              className: "h-12 w-12"
+            }),
+            /* @__PURE__ */ jsx14("p", {
+              className: "text-sm",
+              children: "Preview not available"
+            }),
+            file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsxs9("a", {
+              href: file.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline",
+              children: [
+                /* @__PURE__ */ jsx14(Download, {
+                  className: "h-4 w-4"
+                }),
+                "Download file"
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+// src/ui/components/image-lightbox.tsx
+import { useState as useState7, useEffect as useEffect6, useCallback as useCallback6 } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs10, Fragment as Fragment2 } from "react/jsx-runtime";
+function ImageLightbox({ open, onOpenChange, images, initialIndex = 0 }) {
+  const [currentIndex, setCurrentIndex] = useState7(initialIndex);
+  const hasMultiple = images.length > 1;
+  useEffect6(() => {
+    if (open)
+      setCurrentIndex(initialIndex);
+  }, [open, initialIndex]);
+  const goNext = useCallback6(() => {
+    setCurrentIndex((i) => (i + 1) % images.length);
+  }, [images.length]);
+  const goPrev = useCallback6(() => {
+    setCurrentIndex((i) => (i - 1 + images.length) % images.length);
+  }, [images.length]);
+  useEffect6(() => {
+    if (!open || !hasMultiple)
+      return;
+    const handler = (e) => {
+      if (e.key === "ArrowRight")
+        goNext();
+      if (e.key === "ArrowLeft")
+        goPrev();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, hasMultiple, goNext, goPrev]);
+  if (images.length === 0)
+    return null;
+  const current = images[currentIndex];
+  if (!current)
+    return null;
+  return /* @__PURE__ */ jsx15(Dialog, {
+    open,
+    onOpenChange,
+    children: /* @__PURE__ */ jsxs10(DialogContent, {
+      variant: "lightbox",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx15(DialogTitle, {
+          className: "sr-only",
+          children: current.alt || `Image ${currentIndex + 1} of ${images.length}`
+        }),
+        /* @__PURE__ */ jsxs10("div", {
+          className: "relative flex items-center justify-center",
+          children: [
+            /* @__PURE__ */ jsx15("img", {
+              src: current.url,
+              alt: current.alt || "Image preview",
+              className: "max-h-[85vh] max-w-full object-contain rounded-md"
+            }),
+            hasMultiple && /* @__PURE__ */ jsxs10(Fragment2, {
+              children: [
+                /* @__PURE__ */ jsxs10("button", {
+                  type: "button",
+                  onClick: goPrev,
+                  className: cn("absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white", "hover:bg-black/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"),
+                  children: [
+                    /* @__PURE__ */ jsx15(ChevronLeft, {
+                      className: "h-5 w-5"
+                    }),
+                    /* @__PURE__ */ jsx15("span", {
+                      className: "sr-only",
+                      children: "Previous image"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs10("button", {
+                  type: "button",
+                  onClick: goNext,
+                  className: cn("absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white", "hover:bg-black/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"),
+                  children: [
+                    /* @__PURE__ */ jsx15(ChevronRight, {
+                      className: "h-5 w-5"
+                    }),
+                    /* @__PURE__ */ jsx15("span", {
+                      className: "sr-only",
+                      children: "Next image"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs10("div", {
+                  className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white",
+                  children: [
+                    currentIndex + 1,
+                    " / ",
+                    images.length
+                  ]
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+// src/ui/composed/agno-message/context.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var AgnoMessageContext = createContext4(null);
+function useAgnoMessageContext() {
+  const ctx = useContext4(AgnoMessageContext);
+  if (!ctx) {
+    throw new Error("useAgnoMessageContext must be used within an <AgnoMessage> provider. " + "Wrap your slots with <AgnoMessage message={...}>.");
+  }
+  return ctx;
+}
+
+// src/ui/composed/agno-message/reasoning.tsx
+import { Lightbulb } from "lucide-react";
+
+// src/ui/primitives/accordion.tsx
+import * as React7 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(AccordionPrimitive.Item, {
+  ref,
+  className: cn("border-b", className),
+  ...props
+}));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16(AccordionPrimitive.Header, {
+  className: "flex",
+  children: /* @__PURE__ */ jsxs11(AccordionPrimitive.Trigger, {
+    ref,
+    className: cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180", className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx16(ChevronDown, {
+        className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      })
+    ]
+  })
+}));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16(AccordionPrimitive.Content, {
+  ref,
+  className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+  ...props,
+  children: /* @__PURE__ */ jsx16("div", {
+    className: cn("pb-4 pt-0", className),
+    children
+  })
+}));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/ui/composed/agno-message/reasoning.tsx
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function AgnoMessageReasoning() {
+  const { message, classNames } = useAgnoMessageContext();
+  const steps = message.extra_data?.reasoning_steps;
+  if (!steps || steps.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs12("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.reasoning),
+    children: [
+      /* @__PURE__ */ jsxs12("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx17(Lightbulb, {
+            className: "h-3.5 w-3.5"
+          }),
+          "Reasoning (",
+          steps.length,
+          " steps)"
+        ]
+      }),
+      /* @__PURE__ */ jsx17(Accordion, {
+        type: "multiple",
+        className: "w-full",
+        children: steps.map((step, idx) => /* @__PURE__ */ jsxs12(AccordionItem, {
+          value: `reasoning-${idx}`,
+          className: "border-muted",
+          children: [
+            /* @__PURE__ */ jsx17(AccordionTrigger, {
+              className: "text-xs py-1.5 hover:no-underline",
+              children: step.title || `Step ${idx + 1}`
+            }),
+            /* @__PURE__ */ jsxs12(AccordionContent, {
+              className: "space-y-1.5 text-xs text-muted-foreground",
+              children: [
+                step.action && /* @__PURE__ */ jsxs12("div", {
+                  children: [
+                    /* @__PURE__ */ jsx17("span", {
+                      className: "font-medium text-foreground",
+                      children: "Action:"
+                    }),
+                    " ",
+                    step.action
+                  ]
+                }),
+                step.reasoning && /* @__PURE__ */ jsxs12("div", {
+                  children: [
+                    /* @__PURE__ */ jsx17("span", {
+                      className: "font-medium text-foreground",
+                      children: "Reasoning:"
+                    }),
+                    " ",
+                    step.reasoning
+                  ]
+                }),
+                step.result && /* @__PURE__ */ jsxs12("div", {
+                  children: [
+                    /* @__PURE__ */ jsx17("span", {
+                      className: "font-medium text-foreground",
+                      children: "Result:"
+                    }),
+                    " ",
+                    step.result
+                  ]
+                }),
+                step.confidence !== undefined && /* @__PURE__ */ jsxs12("div", {
+                  children: [
+                    /* @__PURE__ */ jsx17("span", {
+                      className: "font-medium text-foreground",
+                      children: "Confidence:"
+                    }),
+                    " ",
+                    (step.confidence * 100).toFixed(1),
+                    "%"
+                  ]
+                })
+              ]
+            })
+          ]
+        }, idx))
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-message/media.tsx
+import { FileIcon as FileIcon3, Image as ImageIcon, Music, Paperclip, Video } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs13, Fragment as Fragment3 } from "react/jsx-runtime";
+function AgnoMessageMedia() {
+  const {
+    message,
+    classNames,
+    showImageLightbox,
+    showFilePreview,
+    openImageLightbox,
+    openFilePreview
+  } = useAgnoMessageContext();
+  const mediaClassName = classNames?.assistant?.media;
+  const hasImages = !!message.images && message.images.length > 0;
+  const hasVideos = !!message.videos && message.videos.length > 0;
+  const hasAudio = !!message.audio && message.audio.length > 0;
+  const hasFiles = !!message.files && message.files.length > 0;
+  const hasResponseAudio = !!message.response_audio;
+  if (!hasImages && !hasVideos && !hasAudio && !hasFiles && !hasResponseAudio)
+    return null;
+  return /* @__PURE__ */ jsxs13(Fragment3, {
+    children: [
+      hasImages && /* @__PURE__ */ jsxs13("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs13("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx18(ImageIcon, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Images (",
+              message.images.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx18("div", {
+            className: "grid grid-cols-2 gap-2",
+            children: message.images.map((img, idx) => /* @__PURE__ */ jsxs13("div", {
+              className: "space-y-1",
+              children: [
+                showImageLightbox ? /* @__PURE__ */ jsx18("button", {
+                  type: "button",
+                  onClick: () => openImageLightbox(message.images.map((i) => ({ url: i.url, alt: i.revised_prompt })), idx),
+                  className: "group relative w-full overflow-hidden rounded-lg border border-border cursor-pointer hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors",
+                  children: /* @__PURE__ */ jsx18("img", {
+                    src: img.url,
+                    alt: img.revised_prompt || "Generated image",
+                    className: "w-full rounded-lg"
+                  })
+                }) : /* @__PURE__ */ jsx18("img", {
+                  src: img.url,
+                  alt: img.revised_prompt || "Generated image",
+                  className: "w-full rounded-lg border border-border"
+                }),
+                img.revised_prompt && /* @__PURE__ */ jsx18("p", {
+                  className: "text-[11px] text-muted-foreground italic px-0.5",
+                  children: img.revised_prompt
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasVideos && /* @__PURE__ */ jsxs13("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs13("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx18(Video, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Videos (",
+              message.videos.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx18("div", {
+            className: "space-y-2",
+            children: message.videos.map((video, idx) => /* @__PURE__ */ jsx18("div", {
+              children: video.url ? /* @__PURE__ */ jsx18("video", {
+                src: video.url,
+                controls: true,
+                className: "w-full rounded-lg border border-border"
+              }) : /* @__PURE__ */ jsxs13("div", {
+                className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
+                children: [
+                  "Video ID: ",
+                  video.id,
+                  " (ETA: ",
+                  video.eta,
+                  "s)"
+                ]
+              })
+            }, idx))
+          })
+        ]
+      }),
+      hasAudio && /* @__PURE__ */ jsxs13("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs13("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx18(Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Audio (",
+              message.audio.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx18("div", {
+            className: "space-y-2",
+            children: message.audio.map((audio, idx) => /* @__PURE__ */ jsx18("div", {
+              children: audio.url ? /* @__PURE__ */ jsx18("audio", {
+                src: audio.url,
+                controls: true,
+                className: "w-full"
+              }) : audio.base64_audio ? /* @__PURE__ */ jsx18("audio", {
+                src: `data:${audio.mime_type || "audio/wav"};base64,${audio.base64_audio}`,
+                controls: true,
+                className: "w-full"
+              }) : /* @__PURE__ */ jsx18("div", {
+                className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
+                children: "Audio data unavailable"
+              })
+            }, idx))
+          })
+        ]
+      }),
+      hasFiles && /* @__PURE__ */ jsxs13("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs13("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx18(Paperclip, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Files (",
+              message.files.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx18("div", {
+            className: "flex flex-wrap gap-2",
+            children: message.files.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx18(FilePreviewCard, {
+              file: { name: file.name, type: file.type, url: file.url, size: file.size },
+              onClick: () => openFilePreview({ name: file.name, type: file.type, url: file.url, size: file.size })
+            }, idx) : /* @__PURE__ */ jsxs13("div", {
+              className: "flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs bg-muted/30 hover:bg-muted/50 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx18(FileIcon3, {
+                  className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                }),
+                /* @__PURE__ */ jsx18("span", {
+                  className: "truncate max-w-[180px]",
+                  children: file.name
+                }),
+                file.size && /* @__PURE__ */ jsxs13("span", {
+                  className: "text-muted-foreground/70",
+                  children: [
+                    "(",
+                    (file.size / 1024).toFixed(1),
+                    "KB)"
+                  ]
+                }),
+                file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsx18("a", {
+                  href: file.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-primary hover:underline font-medium",
+                  children: "View"
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasResponseAudio && message.response_audio && /* @__PURE__ */ jsxs13("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs13("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx18(Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Response Audio"
+            ]
+          }),
+          message.response_audio.transcript && /* @__PURE__ */ jsxs13("div", {
+            className: "text-xs italic bg-muted/50 border border-border p-2.5 rounded-lg text-muted-foreground",
+            children: [
+              '"',
+              message.response_audio.transcript,
+              '"'
+            ]
+          }),
+          message.response_audio.content && /* @__PURE__ */ jsx18("audio", {
+            src: `data:audio/wav;base64,${message.response_audio.content}`,
+            controls: true,
+            className: "w-full"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-chat/context.ts
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var AgnoChatContext = createContext5(null);
+function useAgnoChatContext() {
+  const ctx = useContext5(AgnoChatContext);
+  if (!ctx) {
+    throw new Error("useAgnoChatContext must be used within an <AgnoChat> provider. " + "Wrap your component tree with <AgnoChat>.");
+  }
+  return ctx;
+}
+
+// src/ui/composed/agno-message/tools.tsx
+import { jsx as jsx19, jsxs as jsxs14, Fragment as Fragment4 } from "react/jsx-runtime";
+function AgnoMessageTools({ renderTool: renderToolProp } = {}) {
+  const { message, classNames, renderTool: ctxMsgRenderTool } = useAgnoMessageContext();
+  const { renderTool: ctxChatRenderTool, isDebug } = useAgnoChatContext();
+  const renderTool = renderToolProp ?? ctxMsgRenderTool ?? ctxChatRenderTool;
+  if (!message.tool_calls || message.tool_calls.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx19("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.toolCalls),
+    children: message.tool_calls.map((tool, idx) => {
+      const defaultRender = () => /* @__PURE__ */ jsxs14(Fragment4, {
+        children: [
+          /* @__PURE__ */ jsx19(ToolGenerativeUI, {
+            tool
+          }),
+          isDebug ? /* @__PURE__ */ jsx19(ToolDebugCard, {
+            tool,
+            defaultOpen: idx === 0
+          }) : null
+        ]
+      });
+      const node = renderTool ? renderTool(tool, { index: idx, isDebug, defaultRender }) : defaultRender();
+      if (node === null || node === undefined)
+        return null;
+      return /* @__PURE__ */ jsx19("div", {
+        children: node
+      }, tool.tool_call_id || idx);
+    })
+  });
+}
+
+// src/ui/components/response.tsx
+import { memo } from "react";
+import { Streamdown } from "streamdown";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Response = memo(({ className, ...props }) => /* @__PURE__ */ jsx20(Streamdown, {
+  className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+  ...props
+}), (prevProps, nextProps) => prevProps.children === nextProps.children);
+Response.displayName = "Response";
+
+// src/ui/composed/agno-message/content.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function AgnoMessageContent() {
+  const { message } = useAgnoMessageContext();
+  if (!message.content)
+    return null;
+  return /* @__PURE__ */ jsx21("div", {
+    className: "prose prose-sm dark:prose-invert max-w-none prose-p:leading-relaxed prose-pre:bg-muted prose-pre:border prose-pre:border-border",
+    children: /* @__PURE__ */ jsx21(Response, {
+      children: message.content
+    })
+  });
+}
+
+// src/ui/composed/agno-message/references.tsx
+import { FileText } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+function AgnoMessageReferences() {
+  const { message, classNames } = useAgnoMessageContext();
+  const references = message.extra_data?.references;
+  if (!references || references.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs15("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.references),
+    children: [
+      /* @__PURE__ */ jsxs15("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx22(FileText, {
+            className: "h-3.5 w-3.5"
+          }),
+          "References (",
+          references.length,
+          ")"
+        ]
+      }),
+      /* @__PURE__ */ jsx22("div", {
+        className: "space-y-2",
+        children: references.map((refData, idx) => /* @__PURE__ */ jsxs15("div", {
+          className: "text-xs space-y-1.5",
+          children: [
+            refData.query && /* @__PURE__ */ jsxs15("div", {
+              className: "font-medium text-foreground",
+              children: [
+                "Query: ",
+                refData.query
+              ]
+            }),
+            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsxs15("div", {
+              className: "bg-muted/50 border border-border p-2.5 rounded-lg",
+              children: [
+                /* @__PURE__ */ jsxs15("div", {
+                  className: "italic text-muted-foreground mb-1",
+                  children: [
+                    '"',
+                    ref.content,
+                    '"'
+                  ]
+                }),
+                /* @__PURE__ */ jsxs15("div", {
+                  className: "text-muted-foreground/70",
+                  children: [
+                    "Source: ",
+                    ref.name,
+                    " (chunk ",
+                    ref.meta_data.chunk,
+                    "/",
+                    ref.meta_data.chunk_size,
+                    ")"
+                  ]
+                })
+              ]
+            }, refIdx))
+          ]
+        }, idx))
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-message/footer.tsx
+import { AlertCircle } from "lucide-react";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+function AgnoMessageFooter({ showTimestamp = true } = {}) {
+  const { message, classNames, actions, isLastAssistantMessage, formatTimestamp } = useAgnoMessageContext();
+  const hasError = message.streamingError;
+  const isCustomTimestamp = !!formatTimestamp;
+  const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
+  if (!actions?.assistant && !showTimestamp && !hasError)
+    return null;
+  return /* @__PURE__ */ jsxs16("div", {
+    className: "flex items-center gap-2 pt-1",
+    children: [
+      actions?.assistant && (() => {
+        const visibility = actions.visibility ?? "visible";
+        if (visibility === "last-assistant" && !isLastAssistantMessage)
+          return null;
+        const useHover = visibility === "hover" || visibility === "hover-last-visible" && !isLastAssistantMessage;
+        return /* @__PURE__ */ jsx23("div", {
+          className: cn("flex items-center gap-1 transition-opacity", useHover && "opacity-0 group-hover/message:opacity-100", classNames?.assistant?.actions),
+          children: actions.assistant(message)
+        });
+      })(),
+      hasError && /* @__PURE__ */ jsxs16("span", {
+        className: "flex items-center gap-1 text-[11px] text-destructive",
+        children: [
+          /* @__PURE__ */ jsx23(AlertCircle, {
+            className: "h-3 w-3"
+          }),
+          "Error"
+        ]
+      }),
+      showTimestamp && /* @__PURE__ */ jsx23(SmartTimestamp, {
+        date: new Date(message.created_at * 1000),
+        formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
+        className: "text-[11px] text-muted-foreground"
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-message/message.tsx
+import { jsx as jsx24, jsxs as jsxs17, Fragment as Fragment5 } from "react/jsx-runtime";
+function DefaultAssistantComposition({ showTimestamp }) {
+  return /* @__PURE__ */ jsxs17(Fragment5, {
+    children: [
+      /* @__PURE__ */ jsx24(AgnoMessageReasoning, {}),
+      /* @__PURE__ */ jsx24(AgnoMessageMedia, {}),
+      /* @__PURE__ */ jsx24(AgnoMessageTools, {}),
+      /* @__PURE__ */ jsx24(AgnoMessageContent, {}),
+      /* @__PURE__ */ jsx24(AgnoMessageReferences, {}),
+      /* @__PURE__ */ jsx24(AgnoMessageFooter, {
+        showTimestamp
+      })
+    ]
+  });
+}
+function AgnoMessage({
+  message,
+  className,
+  classNames,
+  avatars,
+  actions,
+  isLastAssistantMessage = false,
+  showFilePreview = true,
+  showImageLightbox = true,
+  showTimestamp = true,
+  formatTimestamp,
+  renderTool,
+  children
+}) {
+  const isUser = message.role === "user";
+  const hasError = message.streamingError;
+  const [preview, setPreview] = useState8(null);
+  const isCustomTimestamp = !!formatTimestamp;
+  const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
+  const ctx = useMemo3(() => ({
+    message,
+    isLastAssistantMessage,
+    classNames,
+    actions,
+    avatars,
+    formatTimestamp,
+    showFilePreview,
+    showImageLightbox,
+    openImageLightbox: (images, index) => {
+      if (!showImageLightbox)
+        return;
+      setPreview({ type: "image", images, initialIndex: index });
+    },
+    openFilePreview: (file) => {
+      if (!showFilePreview)
+        return;
+      setPreview({ type: "file", file });
+    },
+    renderTool
+  }), [
+    message,
+    isLastAssistantMessage,
+    classNames,
+    actions,
+    avatars,
+    formatTimestamp,
+    showFilePreview,
+    showImageLightbox,
+    renderTool
+  ]);
+  const closePreview = () => setPreview(null);
+  return /* @__PURE__ */ jsx24(AgnoMessageContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsxs17("div", {
+      className: cn("py-5 first:pt-2", isUser ? "flex justify-end" : "", classNames?.root, className),
+      children: [
+        isUser ? /* @__PURE__ */ jsx24(UserMessageLayout, {
+          message,
+          classNames,
+          avatars,
+          actions,
+          isCustomTimestamp,
+          resolvedFormatTimestamp,
+          showTimestamp,
+          showImageLightbox,
+          showFilePreview,
+          openImageLightbox: ctx.openImageLightbox,
+          openFilePreview: ctx.openFilePreview,
+          hasError
+        }) : /* @__PURE__ */ jsxs17("div", {
+          className: "flex items-start gap-3 group/message",
+          children: [
+            avatars?.assistant,
+            /* @__PURE__ */ jsx24("div", {
+              className: cn("flex-1 min-w-0 space-y-3", classNames?.assistant?.container),
+              children: children ?? /* @__PURE__ */ jsx24(DefaultAssistantComposition, {
+                showTimestamp
+              })
+            })
+          ]
+        }),
+        preview?.type === "image" && /* @__PURE__ */ jsx24(ImageLightbox, {
+          open: true,
+          onOpenChange: (open) => {
+            if (!open)
+              closePreview();
+          },
+          images: preview.images,
+          initialIndex: preview.initialIndex
+        }),
+        preview?.type === "file" && /* @__PURE__ */ jsx24(FilePreviewModal, {
+          open: true,
+          onOpenChange: (open) => {
+            if (!open)
+              closePreview();
+          },
+          file: preview.file
+        })
+      ]
+    })
+  });
+}
+AgnoMessage.Reasoning = AgnoMessageReasoning;
+AgnoMessage.Media = AgnoMessageMedia;
+AgnoMessage.Tools = AgnoMessageTools;
+AgnoMessage.Content = AgnoMessageContent;
+AgnoMessage.References = AgnoMessageReferences;
+AgnoMessage.Footer = AgnoMessageFooter;
+function UserMessageLayout({
+  message,
+  classNames,
+  avatars,
+  actions,
+  isCustomTimestamp,
+  resolvedFormatTimestamp,
+  showTimestamp,
+  showImageLightbox,
+  showFilePreview,
+  openImageLightbox,
+  openFilePreview,
+  hasError
+}) {
+  return /* @__PURE__ */ jsxs17("div", {
+    className: "flex items-start gap-2.5 max-w-[80%] flex-row-reverse",
+    children: [
+      avatars?.user,
+      /* @__PURE__ */ jsxs17("div", {
+        className: "space-y-1.5 flex flex-col items-end min-w-0",
+        children: [
+          (message.images && message.images.length > 0 || message.audio && message.audio.length > 0 || message.files && message.files.length > 0) && /* @__PURE__ */ jsxs17("div", {
+            className: "flex flex-wrap gap-2 justify-end",
+            children: [
+              message.images?.map((img, idx) => /* @__PURE__ */ jsx24(FilePreviewCard, {
+                file: { name: img.revised_prompt || `Image ${idx + 1}`, type: "image/png", url: img.url },
+                onClick: showImageLightbox ? () => openImageLightbox(message.images.map((i) => ({ url: i.url, alt: i.revised_prompt })), idx) : undefined
+              }, `img-${idx}`)),
+              message.audio?.map((audio, idx) => /* @__PURE__ */ jsxs17("div", {
+                className: "flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-2.5 py-1.5 text-xs text-foreground self-end",
+                children: [
+                  /* @__PURE__ */ jsx24(Music2, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
+                  }),
+                  /* @__PURE__ */ jsx24("span", {
+                    className: "truncate max-w-[150px]",
+                    children: audio.id || `Audio ${idx + 1}`
+                  })
+                ]
+              }, `audio-${idx}`)),
+              message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx24(FilePreviewCard, {
+                file: { name: file.name, type: file.type, url: file.url, size: file.size },
+                onClick: () => openFilePreview({ name: file.name, type: file.type, url: file.url, size: file.size })
+              }, `file-${idx}`) : /* @__PURE__ */ jsxs17("div", {
+                className: "flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-2.5 py-1.5 text-xs text-foreground self-end",
+                children: [
+                  /* @__PURE__ */ jsx24(FileIcon4, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
+                  }),
+                  /* @__PURE__ */ jsx24("span", {
+                    className: "truncate max-w-[150px]",
+                    children: file.name
+                  })
+                ]
+              }, `file-${idx}`))
+            ]
+          }),
+          message.content && /* @__PURE__ */ jsx24("div", {
+            className: cn("rounded-2xl rounded-br-md px-4 py-2.5", classNames?.user?.bubble ?? "bg-primary text-primary-foreground", hasError && "opacity-70"),
+            children: /* @__PURE__ */ jsx24("p", {
+              className: "text-sm whitespace-pre-wrap",
+              children: message.content
+            })
+          }),
+          (showTimestamp || actions?.user) && /* @__PURE__ */ jsxs17("div", {
+            className: "flex items-center justify-end gap-1.5 px-1",
+            children: [
+              actions?.user && /* @__PURE__ */ jsx24("div", {
+                className: "flex items-center gap-1",
+                children: actions.user(message)
+              }),
+              /* @__PURE__ */ jsx24(SmartTimestamp, {
+                date: new Date(message.created_at * 1000),
+                formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
+                className: "text-[11px] text-muted-foreground"
+              }),
+              hasError && /* @__PURE__ */ jsx24(AlertCircle2, {
+                className: "h-3 w-3 text-destructive"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
 // src/hooks/useAgnoCustomEvents.ts
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback6, useRef } from "react";
+import { useState as useState9, useEffect as useEffect7, useCallback as useCallback7, useRef as useRef2 } from "react";
 function useAgnoCustomEvents(handler) {
   const client = useAgnoClient();
-  const [events, setEvents] = useState6([]);
-  const handlerRef = useRef(handler);
+  const [events, setEvents] = useState9([]);
+  const handlerRef = useRef2(handler);
   handlerRef.current = handler;
-  useEffect5(() => {
+  useEffect7(() => {
     const handleCustomEvent = (event) => {
       setEvents((prev) => [...prev, event]);
       handlerRef.current?.(event);
@@ -1082,20 +2742,20 @@ function useAgnoCustomEvents(handler) {
       client.off("custom:event", handleCustomEvent);
     };
   }, [client]);
-  const clearEvents = useCallback6(() => {
+  const clearEvents = useCallback7(() => {
     setEvents([]);
   }, []);
   return { events, clearEvents };
 }
 // src/hooks/useAgnoMemory.ts
-import { useState as useState7, useEffect as useEffect6, useCallback as useCallback7 } from "react";
+import { useState as useState10, useEffect as useEffect8, useCallback as useCallback8 } from "react";
 function useAgnoMemory() {
   const client = useAgnoClient();
-  const [memories, setMemories] = useState7([]);
-  const [topics, setTopics] = useState7([]);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [error, setError] = useState7();
-  useEffect6(() => {
+  const [memories, setMemories] = useState10([]);
+  const [topics, setTopics] = useState10([]);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10();
+  useEffect8(() => {
     const handleMemoryCreated = (memory) => {
       setMemories((prev) => [memory, ...prev]);
     };
@@ -1130,7 +2790,7 @@ function useAgnoMemory() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchMemories = useCallback7(async (queryParams, options) => {
+  const fetchMemories = useCallback8(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1145,7 +2805,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getMemoryById = useCallback7(async (memoryId, options) => {
+  const getMemoryById = useCallback8(async (memoryId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1158,7 +2818,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getMemoryTopics = useCallback7(async (options) => {
+  const getMemoryTopics = useCallback8(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1173,7 +2833,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getUserMemoryStats = useCallback7(async (queryParams, options) => {
+  const getUserMemoryStats = useCallback8(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1186,7 +2846,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const createMemory = useCallback7(async (request, options) => {
+  const createMemory = useCallback8(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1199,7 +2859,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateMemory = useCallback7(async (memoryId, request, options) => {
+  const updateMemory = useCallback8(async (memoryId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1212,7 +2872,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteMemory = useCallback7(async (memoryId, options) => {
+  const deleteMemory = useCallback8(async (memoryId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1225,7 +2885,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteMultipleMemories = useCallback7(async (memoryIds, options) => {
+  const deleteMultipleMemories = useCallback8(async (memoryIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1254,12 +2914,12 @@ function useAgnoMemory() {
   };
 }
 // src/hooks/useAgnoSessionState.ts
-import { useCallback as useCallback8, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useState as useState11 } from "react";
 function useAgnoSessionState() {
   const client = useAgnoClient();
-  const [sessionState, setLocalSessionState] = useState8(() => client.getSessionState());
-  const [isRefreshing, setIsRefreshing] = useState8(() => client.getState().isSessionStateRefreshing ?? false);
-  useEffect7(() => {
+  const [sessionState, setLocalSessionState] = useState11(() => client.getSessionState());
+  const [isRefreshing, setIsRefreshing] = useState11(() => client.getState().isSessionStateRefreshing ?? false);
+  useEffect9(() => {
     const handleStateChange = (state) => {
       setLocalSessionState(state);
     };
@@ -1276,16 +2936,16 @@ function useAgnoSessionState() {
       client.off("session-state:refresh:end", handleRefreshEnd);
     };
   }, [client]);
-  const setSessionState = useCallback8(async (next) => {
+  const setSessionState = useCallback9(async (next) => {
     const resolved = typeof next === "function" ? next(client.getSessionState()) : next;
     await client.setSessionState(resolved);
   }, [client]);
-  const mergeSessionState = useCallback8(async (partial) => {
+  const mergeSessionState = useCallback9(async (partial) => {
     const current = client.getSessionState() ?? {};
     const merged = { ...current, ...partial };
     await client.setSessionState(merged);
   }, [client]);
-  const refreshSessionState = useCallback8(async () => {
+  const refreshSessionState = useCallback9(async () => {
     const result = await client.refreshSessionState();
     return result ?? null;
   }, [client]);
@@ -1298,14 +2958,14 @@ function useAgnoSessionState() {
   };
 }
 // src/hooks/useAgnoKnowledge.ts
-import { useState as useState9, useCallback as useCallback9 } from "react";
+import { useState as useState12, useCallback as useCallback10 } from "react";
 function useAgnoKnowledge() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9();
-  const [config, setConfig] = useState9();
-  const [content, setContent] = useState9([]);
-  const getConfig = useCallback9(async (options) => {
+  const [isLoading, setIsLoading] = useState12(false);
+  const [error, setError] = useState12();
+  const [config, setConfig] = useState12();
+  const [content, setContent] = useState12([]);
+  const getConfig = useCallback10(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1320,7 +2980,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const listContent = useCallback9(async (listOptions, options) => {
+  const listContent = useCallback10(async (listOptions, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1335,7 +2995,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContent = useCallback9(async (contentId, options) => {
+  const getContent = useCallback10(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1348,7 +3008,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContentStatus = useCallback9(async (contentId, options) => {
+  const getContentStatus = useCallback10(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1361,7 +3021,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const search = useCallback9(async (request, options) => {
+  const search = useCallback10(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1374,7 +3034,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const uploadContent = useCallback9(async (data, options) => {
+  const uploadContent = useCallback10(async (data, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1389,7 +3049,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateContent = useCallback9(async (contentId, request, options) => {
+  const updateContent = useCallback10(async (contentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1404,7 +3064,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteAllContent = useCallback9(async (options) => {
+  const deleteAllContent = useCallback10(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1418,7 +3078,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteContent = useCallback9(async (contentId, options) => {
+  const deleteContent = useCallback10(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1450,14 +3110,14 @@ function useAgnoKnowledge() {
   };
 }
 // src/hooks/useAgnoMetrics.ts
-import { useState as useState10, useCallback as useCallback10 } from "react";
+import { useState as useState13, useCallback as useCallback11 } from "react";
 function useAgnoMetrics() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = useState10(false);
-  const [isRefreshing, setIsRefreshing] = useState10(false);
-  const [error, setError] = useState10();
-  const [metrics, setMetrics] = useState10();
-  const fetchMetrics = useCallback10(async (options) => {
+  const [isLoading, setIsLoading] = useState13(false);
+  const [isRefreshing, setIsRefreshing] = useState13(false);
+  const [error, setError] = useState13();
+  const [metrics, setMetrics] = useState13();
+  const fetchMetrics = useCallback11(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1472,7 +3132,7 @@ function useAgnoMetrics() {
       setIsLoading(false);
     }
   }, [client]);
-  const refreshMetrics = useCallback10(async (options) => {
+  const refreshMetrics = useCallback11(async (options) => {
     setIsRefreshing(true);
     setError(undefined);
     try {
@@ -1486,7 +3146,7 @@ function useAgnoMetrics() {
       setIsRefreshing(false);
     }
   }, [client]);
-  const clearMetrics = useCallback10(() => {
+  const clearMetrics = useCallback11(() => {
     setMetrics(undefined);
     setError(undefined);
   }, []);
@@ -1501,14 +3161,14 @@ function useAgnoMetrics() {
   };
 }
 // src/hooks/useAgnoEvals.ts
-import { useState as useState11, useCallback as useCallback11 } from "react";
+import { useState as useState14, useCallback as useCallback12 } from "react";
 function useAgnoEvals() {
   const client = useAgnoClient();
-  const [evalRuns, setEvalRuns] = useState11([]);
-  const [pagination, setPagination] = useState11();
-  const [isLoading, setIsLoading] = useState11(false);
-  const [error, setError] = useState11();
-  const listEvalRuns = useCallback11(async (listParams = {}, options) => {
+  const [evalRuns, setEvalRuns] = useState14([]);
+  const [pagination, setPagination] = useState14();
+  const [isLoading, setIsLoading] = useState14(false);
+  const [error, setError] = useState14();
+  const listEvalRuns = useCallback12(async (listParams = {}, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1524,7 +3184,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const getEvalRun = useCallback11(async (evalRunId, options) => {
+  const getEvalRun = useCallback12(async (evalRunId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1537,7 +3197,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const executeEval = useCallback11(async (request, options) => {
+  const executeEval = useCallback12(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1552,7 +3212,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateEvalRun = useCallback11(async (evalRunId, request, options) => {
+  const updateEvalRun = useCallback12(async (evalRunId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1567,7 +3227,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteEvalRuns = useCallback11(async (evalRunIds, options) => {
+  const deleteEvalRuns = useCallback12(async (evalRunIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1582,7 +3242,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const renameEvalRun = useCallback11(async (evalRunId, newName, options) => {
+  const renameEvalRun = useCallback12(async (evalRunId, newName, options) => {
     return updateEvalRun(evalRunId, { name: newName }, options);
   }, [updateEvalRun]);
   return {
@@ -1599,14 +3259,14 @@ function useAgnoEvals() {
   };
 }
 // src/hooks/useAgnoTraces.ts
-import { useState as useState12, useEffect as useEffect8, useCallback as useCallback12 } from "react";
+import { useState as useState15, useEffect as useEffect10, useCallback as useCallback13 } from "react";
 function useAgnoTraces() {
   const client = useAgnoClient();
-  const [traces, setTraces] = useState12([]);
-  const [traceSessionStats, setTraceSessionStats] = useState12([]);
-  const [isLoading, setIsLoading] = useState12(false);
-  const [error, setError] = useState12();
-  useEffect8(() => {
+  const [traces, setTraces] = useState15([]);
+  const [traceSessionStats, setTraceSessionStats] = useState15([]);
+  const [isLoading, setIsLoading] = useState15(false);
+  const [error, setError] = useState15();
+  useEffect10(() => {
     const handleStateChange = () => {
       const state2 = client.getState();
       setTraces(state2.traces);
@@ -1620,7 +3280,7 @@ function useAgnoTraces() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchTraces = useCallback12(async (options = {}, requestOptions) => {
+  const fetchTraces = useCallback13(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1635,7 +3295,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const getTraceDetail = useCallback12(async (traceId, options = {}, requestOptions) => {
+  const getTraceDetail = useCallback13(async (traceId, options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1648,7 +3308,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchTraceSessionStats = useCallback12(async (options = {}, requestOptions) => {
+  const fetchTraceSessionStats = useCallback13(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1674,13 +3334,13 @@ function useAgnoTraces() {
   };
 }
 // src/hooks/useAgnoComponents.ts
-import { useState as useState13, useEffect as useEffect9, useCallback as useCallback13 } from "react";
+import { useState as useState16, useEffect as useEffect11, useCallback as useCallback14 } from "react";
 function useAgnoComponents() {
   const client = useAgnoClient();
-  const [components, setComponents] = useState13([]);
-  const [isLoading, setIsLoading] = useState13(false);
-  const [error, setError] = useState13();
-  useEffect9(() => {
+  const [components, setComponents] = useState16([]);
+  const [isLoading, setIsLoading] = useState16(false);
+  const [error, setError] = useState16();
+  useEffect11(() => {
     const handleComponentCreated = (component) => {
       setComponents((prev) => [component, ...prev]);
     };
@@ -1705,7 +3365,7 @@ function useAgnoComponents() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchComponents = useCallback13(async (queryParams, options) => {
+  const fetchComponents = useCallback14(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1720,7 +3380,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getComponentById = useCallback13(async (componentId, options) => {
+  const getComponentById = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1733,7 +3393,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const createComponent = useCallback13(async (request, options) => {
+  const createComponent = useCallback14(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1746,7 +3406,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateComponent = useCallback13(async (componentId, request, options) => {
+  const updateComponent = useCallback14(async (componentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1759,7 +3419,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteComponent = useCallback13(async (componentId, options) => {
+  const deleteComponent = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1772,7 +3432,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchComponentConfigs = useCallback13(async (componentId, options) => {
+  const fetchComponentConfigs = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1785,7 +3445,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const createComponentConfig = useCallback13(async (componentId, request, options) => {
+  const createComponentConfig = useCallback14(async (componentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1798,7 +3458,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getCurrentComponentConfig = useCallback13(async (componentId, options) => {
+  const getCurrentComponentConfig = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1811,7 +3471,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getComponentConfigByVersion = useCallback13(async (componentId, version, options) => {
+  const getComponentConfigByVersion = useCallback14(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1824,7 +3484,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateComponentConfig = useCallback13(async (componentId, version, request, options) => {
+  const updateComponentConfig = useCallback14(async (componentId, version, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1837,7 +3497,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteComponentConfig = useCallback13(async (componentId, version, options) => {
+  const deleteComponentConfig = useCallback14(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1850,7 +3510,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const setCurrentComponentConfig = useCallback13(async (componentId, version, options) => {
+  const setCurrentComponentConfig = useCallback14(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1888,6 +3548,7 @@ export {
   useAgnoSessionState,
   useAgnoSession,
   useAgnoMetrics,
+  useAgnoMessageContext,
   useAgnoMemory,
   useAgnoKnowledge,
   useAgnoEvals,
@@ -1916,10 +3577,21 @@ export {
   createBarChart,
   createArtifact,
   createAreaChart,
+  byToolName,
   ToolHandlerProvider,
+  ToolGenerativeUI,
+  ToolDebugCard,
   GenerativeUIRenderer,
   ComponentRegistry,
-  AgnoProvider
+  AgnoProvider,
+  AgnoMessageTools,
+  AgnoMessageReferences,
+  AgnoMessageReasoning,
+  AgnoMessageMedia,
+  AgnoMessageFooter,
+  AgnoMessageContext,
+  AgnoMessageContent,
+  AgnoMessage
 };
 
-//# debugId=001BF048D0CD48E164756E2164756E21
+//# debugId=966D656003D9313664756E2164756E21