@rodrigocoliveira/agno-react 1.3.1 → 2.0.0

package/dist/ui.js

@@ -47,6 +47,7 @@ __export(exports_ui, {
   usePromptInputDropZone: () => usePromptInputDropZone,
   usePromptInputController: () => usePromptInputController,
   usePromptInputAttachments: () => usePromptInputAttachments,
+  useAgnoMessageContext: () => useAgnoMessageContext,
   useAgnoChatContext: () => useAgnoChatContext,
   isPreviewable: () => isPreviewable,
   getFilePreviewType: () => getFilePreviewType,
@@ -55,6 +56,7 @@ __export(exports_ui, {
   formatFullTimestamp: () => formatFullTimestamp,
   formatFileSize: () => formatFileSize,
   cn: () => cn,
+  byToolName: () => byToolName,
   buttonVariants: () => buttonVariants,
   badgeVariants: () => badgeVariants,
   TooltipTrigger: () => TooltipTrigger,
@@ -64,6 +66,8 @@ __export(exports_ui, {
   ToolOutput: () => ToolOutput,
   ToolInput: () => ToolInput,
   ToolHeader: () => ToolHeader,
+  ToolGenerativeUI: () => ToolGenerativeUI,
+  ToolDebugCard: () => ToolDebugCard,
   ToolContent: () => ToolContent,
   Tool: () => Tool,
   StreamingIndicator: () => StreamingIndicator,
@@ -185,7 +189,15 @@ __export(exports_ui, {
   ArtifactActions: () => ArtifactActions,
   ArtifactAction: () => ArtifactAction,
   Artifact: () => Artifact,
+  AgnoMessageTools: () => AgnoMessageTools,
+  AgnoMessageReferences: () => AgnoMessageReferences,
+  AgnoMessageReasoning: () => AgnoMessageReasoning,
+  AgnoMessageMedia: () => AgnoMessageMedia,
   AgnoMessageItem: () => AgnoMessageItem,
+  AgnoMessageFooter: () => AgnoMessageFooter,
+  AgnoMessageContext: () => AgnoMessageContext,
+  AgnoMessageContent: () => AgnoMessageContent,
+  AgnoMessage: () => AgnoMessage,
   AgnoChatSuggestedPrompts: () => AgnoChatSuggestedPrompts,
   AgnoChatRoot: () => AgnoChatRoot,
   AgnoChatMessages: () => AgnoChatMessages,
@@ -943,12 +955,20 @@ var import_react = require("react");
 var import_use_stick_to_bottom = require("use-stick-to-bottom");
 var import_use_stick_to_bottom2 = require("use-stick-to-bottom");
 var jsx_runtime13 = require("react/jsx-runtime");
-var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx_runtime13.jsx(import_use_stick_to_bottom.StickToBottom, {
-  className: cn("relative flex-1 overflow-y-auto", className),
-  initial: "smooth",
-  role: "log",
-  ...props
-});
+var Conversation = ({ className, scrollBehavior, ...props }) => {
+  const initial = scrollBehavior?.initial ?? "smooth";
+  const resize = scrollBehavior?.resize ?? "instant";
+  return /* @__PURE__ */ jsx_runtime13.jsx(import_use_stick_to_bottom.StickToBottom, {
+    className: cn("relative flex-1 overflow-y-auto", className),
+    initial,
+    resize,
+    ...scrollBehavior?.damping !== undefined && { damping: scrollBehavior.damping },
+    ...scrollBehavior?.stiffness !== undefined && { stiffness: scrollBehavior.stiffness },
+    ...scrollBehavior?.mass !== undefined && { mass: scrollBehavior.mass },
+    role: "log",
+    ...props
+  });
+};
 var ConversationContent = ({ className, ...props }) => /* @__PURE__ */ jsx_runtime13.jsx(import_use_stick_to_bottom.StickToBottom.Content, {
   className: cn("p-4", className),
   ...props
@@ -2865,573 +2885,1066 @@ var PromptInputCommandSeparator = ({ className, ...props }) => /* @__PURE__ */ j
   className: cn(className),
   ...props
 });
-// src/ui/composed/AgnoMessageItem.tsx
+// src/ui/composed/agno-message/message.tsx
+var import_react20 = require("react");
+var import_lucide_react23 = require("lucide-react");
+
+// src/ui/composed/agno-message/context.ts
 var import_react14 = require("react");
-var import_agno_react = require("@rodrigocoliveira/agno-react");
+var AgnoMessageContext = import_react14.createContext(null);
+function useAgnoMessageContext() {
+  const ctx = import_react14.useContext(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
 var import_lucide_react19 = require("lucide-react");
 var jsx_runtime35 = require("react/jsx-runtime");
-var defaultFormatTimestamp = formatSmartTimestamp;
-var getToolState = (tool) => {
-  return tool.tool_call_error ? "output-error" : "output-available";
-};
-function AgnoMessageItem({
+function AgnoMessageReasoning() {
+  const { message, classNames } = useAgnoMessageContext();
+  const steps = message.extra_data?.reasoning_steps;
+  if (!steps || steps.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx_runtime35.jsxs("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.reasoning),
+    children: [
+      /* @__PURE__ */ jsx_runtime35.jsxs("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.Lightbulb, {
+            className: "h-3.5 w-3.5"
+          }),
+          "Reasoning (",
+          steps.length,
+          " steps)"
+        ]
+      }),
+      /* @__PURE__ */ jsx_runtime35.jsx(Accordion, {
+        type: "multiple",
+        className: "w-full",
+        children: steps.map((step, idx) => /* @__PURE__ */ jsx_runtime35.jsxs(AccordionItem, {
+          value: `reasoning-${idx}`,
+          className: "border-muted",
+          children: [
+            /* @__PURE__ */ jsx_runtime35.jsx(AccordionTrigger, {
+              className: "text-xs py-1.5 hover:no-underline",
+              children: step.title || `Step ${idx + 1}`
+            }),
+            /* @__PURE__ */ jsx_runtime35.jsxs(AccordionContent, {
+              className: "space-y-1.5 text-xs text-muted-foreground",
+              children: [
+                step.action && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Action:"
+                    }),
+                    " ",
+                    step.action
+                  ]
+                }),
+                step.reasoning && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Reasoning:"
+                    }),
+                    " ",
+                    step.reasoning
+                  ]
+                }),
+                step.result && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Result:"
+                    }),
+                    " ",
+                    step.result
+                  ]
+                }),
+                step.confidence !== undefined && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Confidence:"
+                    }),
+                    " ",
+                    (step.confidence * 100).toFixed(1),
+                    "%"
+                  ]
+                })
+              ]
+            })
+          ]
+        }, idx))
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-message/media.tsx
+var import_lucide_react20 = require("lucide-react");
+var jsx_runtime36 = require("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__ */ jsx_runtime36.jsxs(jsx_runtime36.Fragment, {
+    children: [
+      hasImages && /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime36.jsx(import_lucide_react20.Image, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Images (",
+              message.images.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime36.jsx("div", {
+            className: "grid grid-cols-2 gap-2",
+            children: message.images.map((img, idx) => /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+              className: "space-y-1",
+              children: [
+                showImageLightbox ? /* @__PURE__ */ jsx_runtime36.jsx("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__ */ jsx_runtime36.jsx("img", {
+                    src: img.url,
+                    alt: img.revised_prompt || "Generated image",
+                    className: "w-full rounded-lg"
+                  })
+                }) : /* @__PURE__ */ jsx_runtime36.jsx("img", {
+                  src: img.url,
+                  alt: img.revised_prompt || "Generated image",
+                  className: "w-full rounded-lg border border-border"
+                }),
+                img.revised_prompt && /* @__PURE__ */ jsx_runtime36.jsx("p", {
+                  className: "text-[11px] text-muted-foreground italic px-0.5",
+                  children: img.revised_prompt
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasVideos && /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime36.jsx(import_lucide_react20.Video, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Videos (",
+              message.videos.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime36.jsx("div", {
+            className: "space-y-2",
+            children: message.videos.map((video, idx) => /* @__PURE__ */ jsx_runtime36.jsx("div", {
+              children: video.url ? /* @__PURE__ */ jsx_runtime36.jsx("video", {
+                src: video.url,
+                controls: true,
+                className: "w-full rounded-lg border border-border"
+              }) : /* @__PURE__ */ jsx_runtime36.jsxs("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__ */ jsx_runtime36.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime36.jsx(import_lucide_react20.Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Audio (",
+              message.audio.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime36.jsx("div", {
+            className: "space-y-2",
+            children: message.audio.map((audio, idx) => /* @__PURE__ */ jsx_runtime36.jsx("div", {
+              children: audio.url ? /* @__PURE__ */ jsx_runtime36.jsx("audio", {
+                src: audio.url,
+                controls: true,
+                className: "w-full"
+              }) : audio.base64_audio ? /* @__PURE__ */ jsx_runtime36.jsx("audio", {
+                src: `data:${audio.mime_type || "audio/wav"};base64,${audio.base64_audio}`,
+                controls: true,
+                className: "w-full"
+              }) : /* @__PURE__ */ jsx_runtime36.jsx("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__ */ jsx_runtime36.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime36.jsx(import_lucide_react20.Paperclip, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Files (",
+              message.files.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime36.jsx("div", {
+            className: "flex flex-wrap gap-2",
+            children: message.files.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime36.jsx(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__ */ jsx_runtime36.jsxs("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__ */ jsx_runtime36.jsx(import_lucide_react20.FileIcon, {
+                  className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                }),
+                /* @__PURE__ */ jsx_runtime36.jsx("span", {
+                  className: "truncate max-w-[180px]",
+                  children: file.name
+                }),
+                file.size && /* @__PURE__ */ jsx_runtime36.jsxs("span", {
+                  className: "text-muted-foreground/70",
+                  children: [
+                    "(",
+                    (file.size / 1024).toFixed(1),
+                    "KB)"
+                  ]
+                }),
+                file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsx_runtime36.jsx("a", {
+                  href: file.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-primary hover:underline font-medium",
+                  children: "View"
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasResponseAudio && message.response_audio && /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime36.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime36.jsx(import_lucide_react20.Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Response Audio"
+            ]
+          }),
+          message.response_audio.transcript && /* @__PURE__ */ jsx_runtime36.jsxs("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__ */ jsx_runtime36.jsx("audio", {
+            src: `data:audio/wav;base64,${message.response_audio.content}`,
+            controls: true,
+            className: "w-full"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-chat/context.ts
+var import_react15 = require("react");
+var AgnoChatContext = import_react15.createContext(null);
+function useAgnoChatContext() {
+  const ctx = import_react15.useContext(AgnoChatContext);
+  if (!ctx) {
+    throw new Error("useAgnoChatContext must be used within an <AgnoChat> provider. " + "Wrap your component tree with <AgnoChat>.");
+  }
+  return ctx;
+}
+
+// src/components/GenerativeUIRenderer.tsx
+var import_react19 = __toESM(require("react"));
+
+// src/utils/component-registry.ts
+class ComponentRegistry {
+  static instance;
+  components = new Map;
+  constructor() {}
+  static getInstance() {
+    if (!ComponentRegistry.instance) {
+      ComponentRegistry.instance = new ComponentRegistry;
+    }
+    return ComponentRegistry.instance;
+  }
+  register(type, renderer) {
+    this.components.set(type, renderer);
+  }
+  registerBatch(components) {
+    Object.entries(components).forEach(([type, renderer]) => {
+      this.register(type, renderer);
+    });
+  }
+  get(type) {
+    return this.components.get(type);
+  }
+  has(type) {
+    return this.components.has(type);
+  }
+  unregister(type) {
+    this.components.delete(type);
+  }
+  getRegisteredTypes() {
+    return Array.from(this.components.keys());
+  }
+  clear() {
+    this.components.clear();
+  }
+}
+function getComponentRegistry() {
+  return ComponentRegistry.getInstance();
+}
+
+// src/hooks/useAgnoToolExecution.ts
+var import_react18 = require("react");
+
+// src/context/AgnoContext.tsx
+var import_react16 = require("react");
+var import_agno_client = require("@rodrigocoliveira/agno-client");
+var jsx_runtime37 = require("react/jsx-runtime");
+var AgnoContext = import_react16.createContext(null);
+
+// src/context/ToolHandlerContext.tsx
+var import_react17 = require("react");
+var jsx_runtime38 = require("react/jsx-runtime");
+var ToolHandlerContext = import_react17.createContext(null);
+
+// src/hooks/useAgnoToolExecution.ts
+var customRenderRegistry = new Map;
+function getCustomRender(key) {
+  return customRenderRegistry.get(key);
+}
+
+// src/components/GenerativeUIRenderer.tsx
+var jsx_runtime39 = require("react/jsx-runtime");
+
+class UIErrorBoundary extends import_react19.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[GenerativeUIRenderer] Error rendering component:", error, errorInfo);
+    this.props.onError?.(error);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+        className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800",
+        children: [
+          /* @__PURE__ */ jsx_runtime39.jsx("p", {
+            className: "font-semibold",
+            children: "Failed to render UI component"
+          }),
+          /* @__PURE__ */ jsx_runtime39.jsx("p", {
+            className: "text-sm mt-1",
+            children: this.state.error?.message || "Unknown error"
+          })
+        ]
+      });
+    }
+    return this.props.children;
+  }
+}
+function GenerativeUIRenderer({
+  spec,
+  className,
+  onError
+}) {
+  const registry = getComponentRegistry();
+  if (spec.type === "custom") {
+    const customSpec = spec;
+    if (customSpec.renderKey) {
+      const renderFn = getCustomRender(customSpec.renderKey);
+      if (renderFn) {
+        return /* @__PURE__ */ jsx_runtime39.jsx(UIErrorBoundary, {
+          onError,
+          children: /* @__PURE__ */ jsx_runtime39.jsx("div", {
+            className,
+            children: renderFn(customSpec.props || {})
+          })
+        });
+      }
+    }
+    return /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+      className: `p-4 border border-yellow-300 rounded-md bg-yellow-50 text-yellow-800 ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx_runtime39.jsx("p", {
+          className: "font-semibold",
+          children: "Custom component not available"
+        }),
+        /* @__PURE__ */ jsx_runtime39.jsx("p", {
+          className: "text-sm mt-1",
+          children: "The custom render function for this component is not available."
+        })
+      ]
+    });
+  }
+  if (spec.type === "chart") {
+    const chartSpec = spec;
+    const chartType = `chart:${chartSpec.component}`;
+    if (registry.has(chartType)) {
+      const ChartRenderer = registry.get(chartType);
+      return /* @__PURE__ */ jsx_runtime39.jsx(UIErrorBoundary, {
+        onError,
+        children: /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+          className,
+          children: [
+            chartSpec.title && /* @__PURE__ */ jsx_runtime39.jsx("h3", {
+              className: "font-semibold mb-2",
+              children: chartSpec.title
+            }),
+            chartSpec.description && /* @__PURE__ */ jsx_runtime39.jsx("p", {
+              className: "text-sm text-gray-600 mb-4",
+              children: chartSpec.description
+            }),
+            /* @__PURE__ */ jsx_runtime39.jsx(ChartRenderer, {
+              ...chartSpec.props
+            })
+          ]
+        })
+      });
+    }
+    return /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+      className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx_runtime39.jsx("p", {
+          className: "font-semibold mb-2",
+          children: chartSpec.title || "Chart Data"
+        }),
+        chartSpec.description && /* @__PURE__ */ jsx_runtime39.jsx("p", {
+          className: "text-sm text-gray-600 mb-2",
+          children: chartSpec.description
+        }),
+        /* @__PURE__ */ jsx_runtime39.jsx("pre", {
+          className: "text-xs bg-gray-100 p-2 rounded overflow-auto",
+          children: JSON.stringify(chartSpec.props.data, null, 2)
+        })
+      ]
+    });
+  }
+  if (spec.type === "card-grid") {
+    const cardGridSpec = spec;
+    if (registry.has("card-grid")) {
+      const CardGridRenderer = registry.get("card-grid");
+      return /* @__PURE__ */ jsx_runtime39.jsx(UIErrorBoundary, {
+        onError,
+        children: /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+          className,
+          children: [
+            cardGridSpec.title && /* @__PURE__ */ jsx_runtime39.jsx("h3", {
+              className: "font-semibold mb-2",
+              children: cardGridSpec.title
+            }),
+            cardGridSpec.description && /* @__PURE__ */ jsx_runtime39.jsx("p", {
+              className: "text-sm text-gray-600 mb-4",
+              children: cardGridSpec.description
+            }),
+            /* @__PURE__ */ jsx_runtime39.jsx(CardGridRenderer, {
+              ...cardGridSpec.props
+            })
+          ]
+        })
+      });
+    }
+  }
+  if (spec.type === "table") {
+    const tableSpec = spec;
+    if (registry.has("table")) {
+      const TableRenderer = registry.get("table");
+      return /* @__PURE__ */ jsx_runtime39.jsx(UIErrorBoundary, {
+        onError,
+        children: /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+          className,
+          children: [
+            tableSpec.title && /* @__PURE__ */ jsx_runtime39.jsx("h3", {
+              className: "font-semibold mb-2",
+              children: tableSpec.title
+            }),
+            tableSpec.description && /* @__PURE__ */ jsx_runtime39.jsx("p", {
+              className: "text-sm text-gray-600 mb-4",
+              children: tableSpec.description
+            }),
+            /* @__PURE__ */ jsx_runtime39.jsx(TableRenderer, {
+              ...tableSpec.props
+            })
+          ]
+        })
+      });
+    }
+  }
+  if (spec.type === "markdown") {
+    const markdownSpec = spec;
+    if (registry.has("markdown")) {
+      const MarkdownRenderer = registry.get("markdown");
+      return /* @__PURE__ */ jsx_runtime39.jsx(UIErrorBoundary, {
+        onError,
+        children: /* @__PURE__ */ jsx_runtime39.jsx("div", {
+          className,
+          children: /* @__PURE__ */ jsx_runtime39.jsx(MarkdownRenderer, {
+            ...markdownSpec.props
+          })
+        })
+      });
+    }
+    return /* @__PURE__ */ jsx_runtime39.jsx("div", {
+      className,
+      children: markdownSpec.props.content
+    });
+  }
+  if (spec.type === "artifact") {
+    const artifactSpec = spec;
+    return /* @__PURE__ */ jsx_runtime39.jsx(UIErrorBoundary, {
+      onError,
+      children: /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+        className: `p-4 border rounded-md ${className || ""}`,
+        children: [
+          artifactSpec.title && /* @__PURE__ */ jsx_runtime39.jsx("h3", {
+            className: "font-semibold mb-4",
+            children: artifactSpec.title
+          }),
+          artifactSpec.description && /* @__PURE__ */ jsx_runtime39.jsx("p", {
+            className: "text-sm text-gray-600 mb-4",
+            children: artifactSpec.description
+          }),
+          /* @__PURE__ */ jsx_runtime39.jsx("div", {
+            className: "space-y-4",
+            children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsx_runtime39.jsx(GenerativeUIRenderer, {
+              spec: childSpec,
+              onError
+            }, index))
+          })
+        ]
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+    className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
+    children: [
+      /* @__PURE__ */ jsx_runtime39.jsx("p", {
+        className: "font-semibold",
+        children: "Unsupported UI component"
+      }),
+      /* @__PURE__ */ jsx_runtime39.jsxs("p", {
+        className: "text-sm text-gray-600 mt-1",
+        children: [
+          "Component type: ",
+          spec.type
+        ]
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-chat/tool-building-blocks.tsx
+var jsx_runtime40 = require("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__ */ jsx_runtime40.jsxs(Tool, {
+    defaultOpen,
+    children: [
+      /* @__PURE__ */ jsx_runtime40.jsx(ToolHeader, {
+        title: tool.tool_name,
+        type: "tool-use",
+        state: getToolState(tool)
+      }),
+      /* @__PURE__ */ jsx_runtime40.jsxs(ToolContent, {
+        children: [
+          /* @__PURE__ */ jsx_runtime40.jsx(ToolInput, {
+            input: tool.tool_args
+          }),
+          output ? /* @__PURE__ */ jsx_runtime40.jsx(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__ */ jsx_runtime40.jsx(Artifact, {
+    children: /* @__PURE__ */ jsx_runtime40.jsx(GenerativeUIRenderer, {
+      spec: uiComponent,
+      className: "w-full p-2"
+    })
+  }) : /* @__PURE__ */ jsx_runtime40.jsx(GenerativeUIRenderer, {
+    spec: uiComponent,
+    className: "w-full"
+  });
+}
+
+// src/ui/composed/agno-message/tools.tsx
+var jsx_runtime41 = require("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__ */ jsx_runtime41.jsx("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.toolCalls),
+    children: message.tool_calls.map((tool, idx) => {
+      const defaultRender = () => /* @__PURE__ */ jsx_runtime41.jsxs(jsx_runtime41.Fragment, {
+        children: [
+          /* @__PURE__ */ jsx_runtime41.jsx(ToolGenerativeUI, {
+            tool
+          }),
+          isDebug ? /* @__PURE__ */ jsx_runtime41.jsx(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__ */ jsx_runtime41.jsx("div", {
+        children: node
+      }, tool.tool_call_id || idx);
+    })
+  });
+}
+
+// src/ui/composed/agno-message/content.tsx
+var jsx_runtime42 = require("react/jsx-runtime");
+function AgnoMessageContent() {
+  const { message } = useAgnoMessageContext();
+  if (!message.content)
+    return null;
+  return /* @__PURE__ */ jsx_runtime42.jsx("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__ */ jsx_runtime42.jsx(Response, {
+      children: message.content
+    })
+  });
+}
+
+// src/ui/composed/agno-message/references.tsx
+var import_lucide_react21 = require("lucide-react");
+var jsx_runtime43 = require("react/jsx-runtime");
+function AgnoMessageReferences() {
+  const { message, classNames } = useAgnoMessageContext();
+  const references = message.extra_data?.references;
+  if (!references || references.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.references),
+    children: [
+      /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx_runtime43.jsx(import_lucide_react21.FileText, {
+            className: "h-3.5 w-3.5"
+          }),
+          "References (",
+          references.length,
+          ")"
+        ]
+      }),
+      /* @__PURE__ */ jsx_runtime43.jsx("div", {
+        className: "space-y-2",
+        children: references.map((refData, idx) => /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+          className: "text-xs space-y-1.5",
+          children: [
+            refData.query && /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+              className: "font-medium text-foreground",
+              children: [
+                "Query: ",
+                refData.query
+              ]
+            }),
+            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+              className: "bg-muted/50 border border-border p-2.5 rounded-lg",
+              children: [
+                /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+                  className: "italic text-muted-foreground mb-1",
+                  children: [
+                    '"',
+                    ref.content,
+                    '"'
+                  ]
+                }),
+                /* @__PURE__ */ jsx_runtime43.jsxs("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
+var import_lucide_react22 = require("lucide-react");
+var jsx_runtime44 = require("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__ */ jsx_runtime44.jsxs("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__ */ jsx_runtime44.jsx("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__ */ jsx_runtime44.jsxs("span", {
+        className: "flex items-center gap-1 text-[11px] text-destructive",
+        children: [
+          /* @__PURE__ */ jsx_runtime44.jsx(import_lucide_react22.AlertCircle, {
+            className: "h-3 w-3"
+          }),
+          "Error"
+        ]
+      }),
+      showTimestamp && /* @__PURE__ */ jsx_runtime44.jsx(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
+var jsx_runtime45 = require("react/jsx-runtime");
+function DefaultAssistantComposition({ showTimestamp }) {
+  return /* @__PURE__ */ jsx_runtime45.jsxs(jsx_runtime45.Fragment, {
+    children: [
+      /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageReasoning, {}),
+      /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageMedia, {}),
+      /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageTools, {}),
+      /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageContent, {}),
+      /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageReferences, {}),
+      /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageFooter, {
+        showTimestamp
+      })
+    ]
+  });
+}
+function AgnoMessage({
   message,
   className,
   classNames,
-  renderContent,
-  renderToolCall,
-  renderMedia,
   avatars,
   actions,
   isLastAssistantMessage = false,
-  showReasoning = true,
-  showReferences = true,
-  showTimestamp = true,
-  showGenerativeUI = true,
-  showToolCalls = true,
   showFilePreview = true,
   showImageLightbox = true,
+  showTimestamp = true,
   formatTimestamp,
-  toolResultRenderers
+  renderTool,
+  children
 }) {
   const isUser = message.role === "user";
   const hasError = message.streamingError;
-  const toolsWithUI = message.tool_calls?.filter((tool) => tool.ui_component) || [];
-  const [preview, setPreview] = import_react14.useState(null);
+  const [preview, setPreview] = import_react20.useState(null);
   const isCustomTimestamp = !!formatTimestamp;
-  const resolvedFormatTimestamp = formatTimestamp ?? defaultFormatTimestamp;
-  const openImageLightbox = (images, index) => {
-    if (!showImageLightbox)
-      return;
-    setPreview({ type: "image", images, initialIndex: index });
-  };
-  const openFilePreview = (file) => {
-    if (!showFilePreview)
-      return;
-    setPreview({ type: "file", file });
-  };
+  const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
+  const ctx = import_react20.useMemo(() => ({
+    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__ */ jsx_runtime35.jsxs("div", {
-    className: cn("py-5 first:pt-2", isUser ? "flex justify-end" : "", classNames?.root, className),
+  return /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+      className: cn("py-5 first:pt-2", isUser ? "flex justify-end" : "", classNames?.root, className),
+      children: [
+        isUser ? /* @__PURE__ */ jsx_runtime45.jsx(UserMessageLayout, {
+          message,
+          classNames,
+          avatars,
+          actions,
+          isCustomTimestamp,
+          resolvedFormatTimestamp,
+          showTimestamp,
+          showImageLightbox,
+          showFilePreview,
+          openImageLightbox: ctx.openImageLightbox,
+          openFilePreview: ctx.openFilePreview,
+          hasError
+        }) : /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+          className: "flex items-start gap-3 group/message",
+          children: [
+            avatars?.assistant,
+            /* @__PURE__ */ jsx_runtime45.jsx("div", {
+              className: cn("flex-1 min-w-0 space-y-3", classNames?.assistant?.container),
+              children: children ?? /* @__PURE__ */ jsx_runtime45.jsx(DefaultAssistantComposition, {
+                showTimestamp
+              })
+            })
+          ]
+        }),
+        preview?.type === "image" && /* @__PURE__ */ jsx_runtime45.jsx(ImageLightbox, {
+          open: true,
+          onOpenChange: (open) => {
+            if (!open)
+              closePreview();
+          },
+          images: preview.images,
+          initialIndex: preview.initialIndex
+        }),
+        preview?.type === "file" && /* @__PURE__ */ jsx_runtime45.jsx(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__ */ jsx_runtime45.jsxs("div", {
+    className: "flex items-start gap-2.5 max-w-[80%] flex-row-reverse",
     children: [
-      isUser ? /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-        className: "flex items-start gap-2.5 max-w-[80%] flex-row-reverse",
+      avatars?.user,
+      /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+        className: "space-y-1.5 flex flex-col items-end min-w-0",
         children: [
-          avatars?.user,
-          /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-            className: "space-y-1.5 flex flex-col items-end min-w-0",
+          (message.images && message.images.length > 0 || message.audio && message.audio.length > 0 || message.files && message.files.length > 0) && /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+            className: "flex flex-wrap gap-2 justify-end",
             children: [
-              (message.images && message.images.length > 0 || message.audio && message.audio.length > 0 || message.files && message.files.length > 0) && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                className: "flex flex-wrap gap-2 justify-end",
-                children: [
-                  message.images?.map((img, idx) => /* @__PURE__ */ jsx_runtime35.jsx(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__ */ jsx_runtime35.jsxs("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__ */ jsx_runtime35.jsx(import_lucide_react19.Music, {
-                        className: "h-3.5 w-3.5 text-muted-foreground"
-                      }),
-                      /* @__PURE__ */ jsx_runtime35.jsx("span", {
-                        className: "truncate max-w-[150px]",
-                        children: audio.id || `Audio ${idx + 1}`
-                      })
-                    ]
-                  }, `audio-${idx}`)),
-                  message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime35.jsx(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__ */ jsx_runtime35.jsxs("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__ */ jsx_runtime35.jsx(import_lucide_react19.FileIcon, {
-                        className: "h-3.5 w-3.5 text-muted-foreground"
-                      }),
-                      /* @__PURE__ */ jsx_runtime35.jsx("span", {
-                        className: "truncate max-w-[150px]",
-                        children: file.name
-                      })
-                    ]
-                  }, `file-${idx}`))
-                ]
-              }),
-              message.content && /* @__PURE__ */ jsx_runtime35.jsx("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__ */ jsx_runtime35.jsx("p", {
-                  className: "text-sm whitespace-pre-wrap",
-                  children: message.content
-                })
-              }),
-              (showTimestamp || actions?.user) && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                className: "flex items-center justify-end gap-1.5 px-1",
+              message.images?.map((img, idx) => /* @__PURE__ */ jsx_runtime45.jsx(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__ */ jsx_runtime45.jsxs("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: [
-                  actions?.user && /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                    className: "flex items-center gap-1",
-                    children: actions.user(message)
-                  }),
-                  /* @__PURE__ */ jsx_runtime35.jsx(SmartTimestamp, {
-                    date: new Date(message.created_at * 1000),
-                    formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
-                    className: "text-[11px] text-muted-foreground"
+                  /* @__PURE__ */ jsx_runtime45.jsx(import_lucide_react23.Music, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
                   }),
-                  hasError && /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.AlertCircle, {
-                    className: "h-3 w-3 text-destructive"
+                  /* @__PURE__ */ jsx_runtime45.jsx("span", {
+                    className: "truncate max-w-[150px]",
+                    children: audio.id || `Audio ${idx + 1}`
                   })
                 ]
-              })
-            ]
-          })
-        ]
-      }) : /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-        className: "flex items-start gap-3 group/message",
-        children: [
-          avatars?.assistant,
-          /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-            className: cn("flex-1 min-w-0 space-y-3", classNames?.assistant?.container),
-            children: [
-              renderContent ? renderContent(message) : /* @__PURE__ */ jsx_runtime35.jsxs(jsx_runtime35.Fragment, {
+              }, `audio-${idx}`)),
+              message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime45.jsx(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__ */ jsx_runtime45.jsxs("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: [
-                  showReasoning && message.extra_data?.reasoning_steps && message.extra_data.reasoning_steps.length > 0 && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                    className: cn("space-y-2 pt-1", classNames?.assistant?.reasoning),
-                    children: [
-                      /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
-                        children: [
-                          /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.Lightbulb, {
-                            className: "h-3.5 w-3.5"
-                          }),
-                          "Reasoning (",
-                          message.extra_data.reasoning_steps.length,
-                          " steps)"
-                        ]
-                      }),
-                      /* @__PURE__ */ jsx_runtime35.jsx(Accordion, {
-                        type: "multiple",
-                        className: "w-full",
-                        children: message.extra_data.reasoning_steps.map((step, idx) => /* @__PURE__ */ jsx_runtime35.jsxs(AccordionItem, {
-                          value: `reasoning-${idx}`,
-                          className: "border-muted",
-                          children: [
-                            /* @__PURE__ */ jsx_runtime35.jsx(AccordionTrigger, {
-                              className: "text-xs py-1.5 hover:no-underline",
-                              children: step.title || `Step ${idx + 1}`
-                            }),
-                            /* @__PURE__ */ jsx_runtime35.jsxs(AccordionContent, {
-                              className: "space-y-1.5 text-xs text-muted-foreground",
-                              children: [
-                                step.action && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                                  children: [
-                                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
-                                      className: "font-medium text-foreground",
-                                      children: "Action:"
-                                    }),
-                                    " ",
-                                    step.action
-                                  ]
-                                }),
-                                step.reasoning && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                                  children: [
-                                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
-                                      className: "font-medium text-foreground",
-                                      children: "Reasoning:"
-                                    }),
-                                    " ",
-                                    step.reasoning
-                                  ]
-                                }),
-                                step.result && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                                  children: [
-                                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
-                                      className: "font-medium text-foreground",
-                                      children: "Result:"
-                                    }),
-                                    " ",
-                                    step.result
-                                  ]
-                                }),
-                                step.confidence !== undefined && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                                  children: [
-                                    /* @__PURE__ */ jsx_runtime35.jsx("span", {
-                                      className: "font-medium text-foreground",
-                                      children: "Confidence:"
-                                    }),
-                                    " ",
-                                    (step.confidence * 100).toFixed(1),
-                                    "%"
-                                  ]
-                                })
-                              ]
-                            })
-                          ]
-                        }, idx))
-                      })
-                    ]
+                  /* @__PURE__ */ jsx_runtime45.jsx(import_lucide_react23.FileIcon, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
                   }),
-                  message.content && /* @__PURE__ */ jsx_runtime35.jsx("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__ */ jsx_runtime35.jsx(Response, {
-                      children: message.content
-                    })
-                  }),
-                  showGenerativeUI && toolsWithUI.length > 0 && /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                    className: "space-y-3",
-                    children: toolsWithUI.map((tool) => {
-                      const uiComponent = tool.ui_component;
-                      return /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                        children: uiComponent.layout === "artifact" ? /* @__PURE__ */ jsx_runtime35.jsx(Artifact, {
-                          children: /* @__PURE__ */ jsx_runtime35.jsx(import_agno_react.GenerativeUIRenderer, {
-                            spec: uiComponent,
-                            className: "w-full p-2"
-                          })
-                        }) : /* @__PURE__ */ jsx_runtime35.jsx(import_agno_react.GenerativeUIRenderer, {
-                          spec: uiComponent,
-                          className: "w-full"
-                        })
-                      }, tool.tool_call_id);
-                    })
-                  }),
-                  toolResultRenderers && message.tool_calls?.map((tool) => {
-                    const renderer = toolResultRenderers[tool.tool_name];
-                    const content = tool.result ?? tool.content;
-                    if (!renderer || !content)
-                      return null;
-                    return /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                      children: renderer(tool.tool_args, content)
-                    }, `result-${tool.tool_call_id}`);
-                  }),
-                  renderMedia ? renderMedia(message) : (() => {
-                    const mediaClassName = classNames?.assistant?.media;
-                    return /* @__PURE__ */ jsx_runtime35.jsxs(jsx_runtime35.Fragment, {
-                      children: [
-                        message.images && message.images.length > 0 && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                          className: cn("space-y-2 pt-1", mediaClassName),
-                          children: [
-                            /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                              className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
-                              children: [
-                                /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.Image, {
-                                  className: "h-3.5 w-3.5"
-                                }),
-                                "Images (",
-                                message.images.length,
-                                ")"
-                              ]
-                            }),
-                            /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                              className: "grid grid-cols-2 gap-2",
-                              children: message.images.map((img, idx) => /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                                className: "space-y-1",
-                                children: [
-                                  showImageLightbox ? /* @__PURE__ */ jsx_runtime35.jsx("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__ */ jsx_runtime35.jsx("img", {
-                                      src: img.url,
-                                      alt: img.revised_prompt || "Generated image",
-                                      className: "w-full rounded-lg"
-                                    })
-                                  }) : /* @__PURE__ */ jsx_runtime35.jsx("img", {
-                                    src: img.url,
-                                    alt: img.revised_prompt || "Generated image",
-                                    className: "w-full rounded-lg border border-border"
-                                  }),
-                                  img.revised_prompt && /* @__PURE__ */ jsx_runtime35.jsx("p", {
-                                    className: "text-[11px] text-muted-foreground italic px-0.5",
-                                    children: img.revised_prompt
-                                  })
-                                ]
-                              }, idx))
-                            })
-                          ]
-                        }),
-                        message.videos && message.videos.length > 0 && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                          className: cn("space-y-2 pt-1", mediaClassName),
-                          children: [
-                            /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                              className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
-                              children: [
-                                /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.Video, {
-                                  className: "h-3.5 w-3.5"
-                                }),
-                                "Videos (",
-                                message.videos.length,
-                                ")"
-                              ]
-                            }),
-                            /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                              className: "space-y-2",
-                              children: message.videos.map((video, idx) => /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                                children: video.url ? /* @__PURE__ */ jsx_runtime35.jsx("video", {
-                                  src: video.url,
-                                  controls: true,
-                                  className: "w-full rounded-lg border border-border"
-                                }) : /* @__PURE__ */ jsx_runtime35.jsxs("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))
-                            })
-                          ]
-                        }),
-                        message.audio && message.audio.length > 0 && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                          className: cn("space-y-2 pt-1", mediaClassName),
-                          children: [
-                            /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                              className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
-                              children: [
-                                /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.Music, {
-                                  className: "h-3.5 w-3.5"
-                                }),
-                                "Audio (",
-                                message.audio.length,
-                                ")"
-                              ]
-                            }),
-                            /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                              className: "space-y-2",
-                              children: message.audio.map((audio, idx) => /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                                children: audio.url ? /* @__PURE__ */ jsx_runtime35.jsx("audio", {
-                                  src: audio.url,
-                                  controls: true,
-                                  className: "w-full"
-                                }) : audio.base64_audio ? /* @__PURE__ */ jsx_runtime35.jsx("audio", {
-                                  src: `data:${audio.mime_type || "audio/wav"};base64,${audio.base64_audio}`,
-                                  controls: true,
-                                  className: "w-full"
-                                }) : /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                                  className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
-                                  children: "Audio data unavailable"
-                                })
-                              }, idx))
-                            })
-                          ]
-                        }),
-                        message.files && message.files.length > 0 && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                          className: cn("space-y-2 pt-1", mediaClassName),
-                          children: [
-                            /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                              className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
-                              children: [
-                                /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.Paperclip, {
-                                  className: "h-3.5 w-3.5"
-                                }),
-                                "Files (",
-                                message.files.length,
-                                ")"
-                              ]
-                            }),
-                            /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                              className: "flex flex-wrap gap-2",
-                              children: message.files.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime35.jsx(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__ */ jsx_runtime35.jsxs("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__ */ jsx_runtime35.jsx(import_lucide_react19.FileIcon, {
-                                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
-                                  }),
-                                  /* @__PURE__ */ jsx_runtime35.jsx("span", {
-                                    className: "truncate max-w-[180px]",
-                                    children: file.name
-                                  }),
-                                  file.size && /* @__PURE__ */ jsx_runtime35.jsxs("span", {
-                                    className: "text-muted-foreground/70",
-                                    children: [
-                                      "(",
-                                      (file.size / 1024).toFixed(1),
-                                      "KB)"
-                                    ]
-                                  }),
-                                  file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsx_runtime35.jsx("a", {
-                                    href: file.url,
-                                    target: "_blank",
-                                    rel: "noopener noreferrer",
-                                    className: "text-primary hover:underline font-medium",
-                                    children: "View"
-                                  })
-                                ]
-                              }, idx))
-                            })
-                          ]
-                        }),
-                        message.response_audio && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                          className: cn("space-y-2 pt-1", mediaClassName),
-                          children: [
-                            /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                              className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
-                              children: [
-                                /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.Music, {
-                                  className: "h-3.5 w-3.5"
-                                }),
-                                "Response Audio"
-                              ]
-                            }),
-                            message.response_audio.transcript && /* @__PURE__ */ jsx_runtime35.jsxs("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__ */ jsx_runtime35.jsx("audio", {
-                              src: `data:audio/wav;base64,${message.response_audio.content}`,
-                              controls: true,
-                              className: "w-full"
-                            })
-                          ]
-                        })
-                      ]
-                    });
-                  })(),
-                  showToolCalls && message.tool_calls && message.tool_calls.length > 0 && /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                    className: cn("space-y-2 pt-1", classNames?.assistant?.toolCalls),
-                    children: message.tool_calls.map((tool, idx) => renderToolCall ? renderToolCall(tool, idx) : /* @__PURE__ */ jsx_runtime35.jsxs(Tool, {
-                      defaultOpen: idx === 0,
-                      children: [
-                        /* @__PURE__ */ jsx_runtime35.jsx(ToolHeader, {
-                          title: tool.tool_name,
-                          type: "tool-use",
-                          state: getToolState(tool)
-                        }),
-                        /* @__PURE__ */ jsx_runtime35.jsxs(ToolContent, {
-                          children: [
-                            /* @__PURE__ */ jsx_runtime35.jsx(ToolInput, {
-                              input: tool.tool_args
-                            }),
-                            tool.content && /* @__PURE__ */ jsx_runtime35.jsx(ToolOutput, {
-                              output: tool.content,
-                              errorText: tool.tool_call_error ? "Tool execution failed" : undefined
-                            })
-                          ]
-                        })
-                      ]
-                    }, tool.tool_call_id || idx))
-                  }),
-                  showReferences && message.extra_data?.references && message.extra_data.references.length > 0 && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                    className: cn("space-y-2 pt-1", classNames?.assistant?.references),
-                    children: [
-                      /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
-                        children: [
-                          /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.FileText, {
-                            className: "h-3.5 w-3.5"
-                          }),
-                          "References (",
-                          message.extra_data.references.length,
-                          ")"
-                        ]
-                      }),
-                      /* @__PURE__ */ jsx_runtime35.jsx("div", {
-                        className: "space-y-2",
-                        children: message.extra_data.references.map((refData, idx) => /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                          className: "text-xs space-y-1.5",
-                          children: [
-                            refData.query && /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                              className: "font-medium text-foreground",
-                              children: [
-                                "Query: ",
-                                refData.query
-                              ]
-                            }),
-                            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                              className: "bg-muted/50 border border-border p-2.5 rounded-lg",
-                              children: [
-                                /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                                  className: "italic text-muted-foreground mb-1",
-                                  children: [
-                                    '"',
-                                    ref.content,
-                                    '"'
-                                  ]
-                                }),
-                                /* @__PURE__ */ jsx_runtime35.jsxs("div", {
-                                  className: "text-muted-foreground/70",
-                                  children: [
-                                    "Source: ",
-                                    ref.name,
-                                    " (chunk ",
-                                    ref.meta_data.chunk,
-                                    "/",
-                                    ref.meta_data.chunk_size,
-                                    ")"
-                                  ]
-                                })
-                              ]
-                            }, refIdx))
-                          ]
-                        }, idx))
-                      })
-                    ]
+                  /* @__PURE__ */ jsx_runtime45.jsx("span", {
+                    className: "truncate max-w-[150px]",
+                    children: file.name
                   })
                 ]
+              }, `file-${idx}`))
+            ]
+          }),
+          message.content && /* @__PURE__ */ jsx_runtime45.jsx("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__ */ jsx_runtime45.jsx("p", {
+              className: "text-sm whitespace-pre-wrap",
+              children: message.content
+            })
+          }),
+          (showTimestamp || actions?.user) && /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+            className: "flex items-center justify-end gap-1.5 px-1",
+            children: [
+              actions?.user && /* @__PURE__ */ jsx_runtime45.jsx("div", {
+                className: "flex items-center gap-1",
+                children: actions.user(message)
               }),
-              (actions?.assistant || showTimestamp || hasError) && /* @__PURE__ */ jsx_runtime35.jsxs("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__ */ jsx_runtime35.jsx("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__ */ jsx_runtime35.jsxs("span", {
-                    className: "flex items-center gap-1 text-[11px] text-destructive",
-                    children: [
-                      /* @__PURE__ */ jsx_runtime35.jsx(import_lucide_react19.AlertCircle, {
-                        className: "h-3 w-3"
-                      }),
-                      "Error"
-                    ]
-                  }),
-                  showTimestamp && /* @__PURE__ */ jsx_runtime35.jsx(SmartTimestamp, {
-                    date: new Date(message.created_at * 1000),
-                    formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
-                    className: "text-[11px] text-muted-foreground"
-                  })
-                ]
+              /* @__PURE__ */ jsx_runtime45.jsx(SmartTimestamp, {
+                date: new Date(message.created_at * 1000),
+                formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
+                className: "text-[11px] text-muted-foreground"
+              }),
+              hasError && /* @__PURE__ */ jsx_runtime45.jsx(import_lucide_react23.AlertCircle, {
+                className: "h-3 w-3 text-destructive"
               })
             ]
           })
         ]
-      }),
-      preview?.type === "image" && /* @__PURE__ */ jsx_runtime35.jsx(ImageLightbox, {
-        open: true,
-        onOpenChange: (open) => {
-          if (!open)
-            closePreview();
-        },
-        images: preview.images,
-        initialIndex: preview.initialIndex
-      }),
-      preview?.type === "file" && /* @__PURE__ */ jsx_runtime35.jsx(FilePreviewModal, {
-        open: true,
-        onOpenChange: (open) => {
-          if (!open)
-            closePreview();
-        },
-        file: preview.file
+      })
+    ]
+  });
+}
+
+// src/ui/composed/AgnoMessageItem.tsx
+var jsx_runtime46 = require("react/jsx-runtime");
+function AgnoMessageItem({
+  message,
+  className,
+  classNames,
+  avatars,
+  actions,
+  isLastAssistantMessage = false,
+  showReasoning = true,
+  showReferences = true,
+  showTimestamp = true,
+  showFilePreview = true,
+  showImageLightbox = true,
+  formatTimestamp,
+  renderTool
+}) {
+  return /* @__PURE__ */ jsx_runtime46.jsxs(AgnoMessage, {
+    message,
+    className,
+    classNames,
+    avatars,
+    actions,
+    isLastAssistantMessage,
+    showTimestamp,
+    showFilePreview,
+    showImageLightbox,
+    formatTimestamp,
+    renderTool,
+    children: [
+      showReasoning && /* @__PURE__ */ jsx_runtime46.jsx(AgnoMessage.Reasoning, {}),
+      /* @__PURE__ */ jsx_runtime46.jsx(AgnoMessage.Media, {}),
+      /* @__PURE__ */ jsx_runtime46.jsx(AgnoMessage.Tools, {}),
+      /* @__PURE__ */ jsx_runtime46.jsx(AgnoMessage.Content, {}),
+      showReferences && /* @__PURE__ */ jsx_runtime46.jsx(AgnoMessage.References, {}),
+      /* @__PURE__ */ jsx_runtime46.jsx(AgnoMessage.Footer, {
+        showTimestamp
       })
     ]
   });
 }
 // src/ui/composed/AgnoChatInput.tsx
-var import_lucide_react20 = require("lucide-react");
-var jsx_runtime36 = require("react/jsx-runtime");
+var import_lucide_react24 = require("lucide-react");
+var jsx_runtime47 = require("react/jsx-runtime");
 var DEFAULT_ACCEPTED_FILE_TYPES = "image/*,audio/*,.pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.ppt,.pptx,.md,.json,.xml";
 function normalizeAudio(audio) {
   if (audio === true)
@@ -3451,14 +3964,14 @@ function dataUrlToBlob(dataUrl) {
   return new Blob([buf], { type: mime });
 }
 function CancelButton({ onCancel }) {
-  return /* @__PURE__ */ jsx_runtime36.jsx(Button, {
+  return /* @__PURE__ */ jsx_runtime47.jsx(Button, {
     type: "button",
     variant: "destructive",
     size: "icon",
     className: "h-8 w-8 rounded-lg",
     onClick: onCancel,
     "aria-label": "Stop",
-    children: /* @__PURE__ */ jsx_runtime36.jsx(import_lucide_react20.CircleStop, {
+    children: /* @__PURE__ */ jsx_runtime47.jsx(import_lucide_react24.CircleStop, {
       className: "size-4"
     })
   });
@@ -3466,7 +3979,7 @@ function CancelButton({ onCancel }) {
 function SubmitButton({ disabled, status }) {
   const { textInput } = usePromptInputController();
   const hasText = textInput.value.trim().length > 0;
-  return /* @__PURE__ */ jsx_runtime36.jsx(PromptInputSubmit, {
+  return /* @__PURE__ */ jsx_runtime47.jsx(PromptInputSubmit, {
     disabled: disabled || !hasText,
     status
   });
@@ -3475,9 +3988,9 @@ function AttachmentHeader() {
   const { files } = usePromptInputAttachments();
   if (files.length === 0)
     return null;
-  return /* @__PURE__ */ jsx_runtime36.jsx(PromptInputHeader, {
-    children: /* @__PURE__ */ jsx_runtime36.jsx(PromptInputAttachments, {
-      children: (attachment) => /* @__PURE__ */ jsx_runtime36.jsx(PromptInputAttachment, {
+  return /* @__PURE__ */ jsx_runtime47.jsx(PromptInputHeader, {
+    children: /* @__PURE__ */ jsx_runtime47.jsx(PromptInputAttachments, {
+      children: (attachment) => /* @__PURE__ */ jsx_runtime47.jsx(PromptInputAttachment, {
         data: attachment
       })
     })
@@ -3492,7 +4005,7 @@ function TranscribeAudioRecorder({
   labels
 }) {
   const { textInput } = usePromptInputController();
-  return /* @__PURE__ */ jsx_runtime36.jsx(AudioRecorder, {
+  return /* @__PURE__ */ jsx_runtime47.jsx(AudioRecorder, {
     mode: "transcribe",
     transcriptionEndpoint: endpoint,
     transcriptionHeaders: headers,
@@ -3556,8 +4069,8 @@ function AgnoChatInput({
   };
   const computedStatus = status ?? (disabled ? "submitted" : undefined);
   const showCancelButton = allowCancelRun && isStreaming && onCancel;
-  return /* @__PURE__ */ jsx_runtime36.jsx(PromptInputProvider, {
-    children: /* @__PURE__ */ jsx_runtime36.jsxs(PromptInput, {
+  return /* @__PURE__ */ jsx_runtime47.jsx(PromptInputProvider, {
+    children: /* @__PURE__ */ jsx_runtime47.jsxs(PromptInput, {
       onSubmit: handleSubmit,
       accept: fileUpload?.accept ?? DEFAULT_ACCEPTED_FILE_TYPES,
       multiple: fileUpload?.multiple ?? true,
@@ -3567,35 +4080,35 @@ function AgnoChatInput({
       dragListenerTarget: dropZoneContainerRef,
       className: cn("w-full", className),
       children: [
-        /* @__PURE__ */ jsx_runtime36.jsx(AttachmentHeader, {}),
-        /* @__PURE__ */ jsx_runtime36.jsx(PromptInputBody, {
-          children: /* @__PURE__ */ jsx_runtime36.jsx(PromptInputTextarea, {
+        /* @__PURE__ */ jsx_runtime47.jsx(AttachmentHeader, {}),
+        /* @__PURE__ */ jsx_runtime47.jsx(PromptInputBody, {
+          children: /* @__PURE__ */ jsx_runtime47.jsx(PromptInputTextarea, {
             placeholder: placeholder || "Type your message... (Enter to send, Shift+Enter for new line)",
             disabled
           })
         }),
-        /* @__PURE__ */ jsx_runtime36.jsxs(PromptInputFooter, {
+        /* @__PURE__ */ jsx_runtime47.jsxs(PromptInputFooter, {
           children: [
-            /* @__PURE__ */ jsx_runtime36.jsxs(PromptInputTools, {
+            /* @__PURE__ */ jsx_runtime47.jsxs(PromptInputTools, {
               children: [
-                showAttachments && /* @__PURE__ */ jsx_runtime36.jsxs(PromptInputActionMenu, {
+                showAttachments && /* @__PURE__ */ jsx_runtime47.jsxs(PromptInputActionMenu, {
                   children: [
-                    /* @__PURE__ */ jsx_runtime36.jsx(PromptInputActionMenuTrigger, {}),
-                    /* @__PURE__ */ jsx_runtime36.jsx(PromptInputActionMenuContent, {
-                      children: /* @__PURE__ */ jsx_runtime36.jsx(PromptInputActionAddAttachments, {
+                    /* @__PURE__ */ jsx_runtime47.jsx(PromptInputActionMenuTrigger, {}),
+                    /* @__PURE__ */ jsx_runtime47.jsx(PromptInputActionMenuContent, {
+                      children: /* @__PURE__ */ jsx_runtime47.jsx(PromptInputActionAddAttachments, {
                         label: "Add files"
                       })
                     })
                   ]
                 }),
-                audioEnabled && (audioMode === "transcribe" && resolvedAudio?.endpoint ? /* @__PURE__ */ jsx_runtime36.jsx(TranscribeAudioRecorder, {
+                audioEnabled && (audioMode === "transcribe" && resolvedAudio?.endpoint ? /* @__PURE__ */ jsx_runtime47.jsx(TranscribeAudioRecorder, {
                   endpoint: resolvedAudio.endpoint,
                   headers: resolvedAudio.headers,
                   disabled,
                   parseResponse: resolvedAudio.parseResponse,
                   onRequestPermission: resolvedAudio.requestPermission,
                   labels: resolvedAudio.labels
-                }) : /* @__PURE__ */ jsx_runtime36.jsx(AudioRecorder, {
+                }) : /* @__PURE__ */ jsx_runtime47.jsx(AudioRecorder, {
                   onRecordingComplete: handleAudioRecording,
                   disabled,
                   onRequestPermission: resolvedAudio?.requestPermission,
@@ -3604,15 +4117,15 @@ function AgnoChatInput({
                 extraTools
               ]
             }),
-            showCancelButton ? /* @__PURE__ */ jsx_runtime36.jsx(CancelButton, {
+            showCancelButton ? /* @__PURE__ */ jsx_runtime47.jsx(CancelButton, {
               onCancel
-            }) : /* @__PURE__ */ jsx_runtime36.jsx(SubmitButton, {
+            }) : /* @__PURE__ */ jsx_runtime47.jsx(SubmitButton, {
               disabled,
               status: computedStatus
             })
           ]
         }),
-        showAttachments && /* @__PURE__ */ jsx_runtime36.jsx(PromptInputDropZone, {
+        showAttachments && /* @__PURE__ */ jsx_runtime47.jsx(PromptInputDropZone, {
           ...dropZoneProps,
           container: dropZoneContainerRef
         })
@@ -3620,39 +4133,46 @@ function AgnoChatInput({
     })
   });
 }
-// src/ui/composed/agno-chat/agno-chat.tsx
-var import_react16 = require("react");
-var import_agno_react2 = require("@rodrigocoliveira/agno-react");
-
-// src/ui/composed/agno-chat/context.ts
-var import_react15 = require("react");
-var AgnoChatContext = import_react15.createContext(null);
-function useAgnoChatContext() {
-  const ctx = import_react15.useContext(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-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/composed/agno-chat/agno-chat.tsx
-var jsx_runtime37 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_agno_react = require("@rodrigocoliveira/agno-react");
+var jsx_runtime48 = require("react/jsx-runtime");
+function resolveDebug(debug) {
+  if (typeof debug === "boolean")
+    return debug;
+  return typeof process !== "undefined" && process.env?.NODE_ENV === "development";
+}
 function AgnoChatRoot({
   children,
   toolHandlers = {},
   autoExecuteTools = true,
-  toolResultRenderers,
+  renderTool,
+  debug,
+  skipHydration,
   className,
   ...divProps
 }) {
-  const chat = import_agno_react2.useAgnoChat();
-  const toolExec = import_agno_react2.useAgnoToolExecution(toolHandlers, autoExecuteTools, {
-    skipHydration: toolResultRenderers ? Object.keys(toolResultRenderers) : undefined
+  const chat = import_agno_react.useAgnoChat();
+  const toolExec = import_agno_react.useAgnoToolExecution(toolHandlers, autoExecuteTools, {
+    skipHydration
   });
-  const containerRef = import_react16.useRef(null);
-  const sendRef = import_react16.useRef(chat.sendMessage);
+  const containerRef = import_react21.useRef(null);
+  const isDebug = resolveDebug(debug);
+  const sendRef = import_react21.useRef(chat.sendMessage);
   sendRef.current = chat.sendMessage;
-  const handleSend = import_react16.useCallback(async (message) => {
+  const handleSend = import_react21.useCallback(async (message) => {
     try {
       await sendRef.current(message);
     } catch {}
@@ -3678,7 +4198,7 @@ function AgnoChatRoot({
     continueWithResults,
     executionError
   } = toolExec;
-  const contextValue = import_react16.useMemo(() => ({
+  const contextValue = import_react21.useMemo(() => ({
     messages,
     sendMessage,
     clearMessages,
@@ -3699,7 +4219,8 @@ function AgnoChatRoot({
     handleSend,
     inputDisabled: isStreaming || isPaused,
     dropZoneContainerRef: containerRef,
-    toolResultRenderers
+    renderTool,
+    isDebug
   }), [
     messages,
     sendMessage,
@@ -3719,11 +4240,12 @@ function AgnoChatRoot({
     continueWithResults,
     executionError,
     handleSend,
-    toolResultRenderers
+    renderTool,
+    isDebug
   ]);
-  return /* @__PURE__ */ jsx_runtime37.jsx(AgnoChatContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime48.jsx(AgnoChatContext.Provider, {
     value: contextValue,
-    children: /* @__PURE__ */ jsx_runtime37.jsx("div", {
+    children: /* @__PURE__ */ jsx_runtime48.jsx("div", {
       ref: containerRef,
       className: cn("relative h-full flex flex-col", className),
       ...divProps,
@@ -3733,25 +4255,25 @@ function AgnoChatRoot({
 }
 
 // src/ui/composed/agno-chat/messages.tsx
-var import_react17 = require("react");
+var import_react22 = require("react");
 
 // src/ui/composed/agno-chat/suggested-prompts.tsx
-var jsx_runtime38 = require("react/jsx-runtime");
+var jsx_runtime49 = require("react/jsx-runtime");
 function AgnoChatSuggestedPrompts({ className, prompts }) {
   const { handleSend } = useAgnoChatContext();
   if (prompts.length === 0)
     return null;
-  return /* @__PURE__ */ jsx_runtime38.jsx("div", {
+  return /* @__PURE__ */ jsx_runtime49.jsx("div", {
     className: cn("grid grid-cols-2 gap-2 w-full max-w-md", className),
-    children: prompts.map((prompt, idx) => /* @__PURE__ */ jsx_runtime38.jsxs("button", {
+    children: prompts.map((prompt, idx) => /* @__PURE__ */ jsx_runtime49.jsxs("button", {
       onClick: () => handleSend(prompt.text),
       className: "flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border bg-card hover:bg-accent/50 hover:border-primary/20 transition-all duration-200 text-left text-sm group",
       children: [
-        prompt.icon && /* @__PURE__ */ jsx_runtime38.jsx("span", {
+        prompt.icon && /* @__PURE__ */ jsx_runtime49.jsx("span", {
           className: "text-muted-foreground group-hover:text-primary transition-colors",
           children: prompt.icon
         }),
-        /* @__PURE__ */ jsx_runtime38.jsx("span", {
+        /* @__PURE__ */ jsx_runtime49.jsx("span", {
           className: "text-muted-foreground group-hover:text-foreground transition-colors text-xs leading-snug",
           children: prompt.text
         })
@@ -3761,12 +4283,12 @@ function AgnoChatSuggestedPrompts({ className, prompts }) {
 }
 
 // src/ui/composed/agno-chat/messages.tsx
-var import_lucide_react21 = require("lucide-react");
-var jsx_runtime39 = require("react/jsx-runtime");
+var import_lucide_react25 = require("lucide-react");
+var jsx_runtime50 = require("react/jsx-runtime");
 function ScrollOnNewUserMessage({ messageCount }) {
   const { scrollToBottom } = import_use_stick_to_bottom2.useStickToBottomContext();
-  const prevCount = import_react17.useRef(messageCount);
-  import_react17.useEffect(() => {
+  const prevCount = import_react22.useRef(messageCount);
+  import_react22.useEffect(() => {
     if (messageCount > prevCount.current) {
       scrollToBottom("smooth");
     }
@@ -3786,13 +4308,8 @@ function AgnoChatMessages({
   showReasoning,
   showReferences,
   showTimestamp,
-  showGenerativeUI,
-  showToolCalls,
   showFilePreview,
   showImageLightbox,
-  renderToolCall,
-  renderContent,
-  renderMedia,
   formatTimestamp,
   messageClassNames,
   emptyState,
@@ -3800,12 +4317,28 @@ function AgnoChatMessages({
   children,
   showThinkingIndicator = true,
   renderThinkingIndicator,
-  toolResultRenderers: propToolResultRenderers
+  renderTool: propRenderTool,
+  scrollBehavior,
+  scrollToBottomButton
 }) {
-  const { messages, isStreaming, toolResultRenderers: contextToolResultRenderers } = useAgnoChatContext();
-  const toolResultRenderers = propToolResultRenderers ?? contextToolResultRenderers;
+  const { messages, isStreaming } = useAgnoChatContext();
   const lastMessage = messages[messages.length - 1];
   const isThinking = showThinkingIndicator && isStreaming && (!lastMessage || lastMessage.role !== "user") && !lastMessage?.content;
+  const resolvedScrollButton = (() => {
+    if (scrollToBottomButton === false)
+      return null;
+    if (scrollToBottomButton === undefined || scrollToBottomButton === true) {
+      return /* @__PURE__ */ jsx_runtime50.jsx(ConversationScrollButton, {});
+    }
+    if (import_react22.isValidElement(scrollToBottomButton))
+      return scrollToBottomButton;
+    if (typeof scrollToBottomButton === "object" && scrollToBottomButton !== null && "className" in scrollToBottomButton) {
+      return /* @__PURE__ */ jsx_runtime50.jsx(ConversationScrollButton, {
+        className: scrollToBottomButton.className
+      });
+    }
+    return scrollToBottomButton;
+  })();
   let lastAssistantIndex = -1;
   for (let i = messages.length - 1;i >= 0; i--) {
     if (messages[i].role !== "user") {
@@ -3817,70 +4350,66 @@ function AgnoChatMessages({
     ...showReasoning !== undefined && { showReasoning },
     ...showReferences !== undefined && { showReferences },
     ...showTimestamp !== undefined && { showTimestamp },
-    ...showGenerativeUI !== undefined && { showGenerativeUI },
-    ...showToolCalls !== undefined && { showToolCalls },
     ...showFilePreview !== undefined && { showFilePreview },
     ...showImageLightbox !== undefined && { showImageLightbox },
-    ...renderToolCall !== undefined && { renderToolCall },
-    ...renderContent !== undefined && { renderContent },
-    ...renderMedia !== undefined && { renderMedia },
     ...formatTimestamp !== undefined && { formatTimestamp },
     ...messageClassNames !== undefined && { classNames: messageClassNames },
-    ...toolResultRenderers !== undefined && { toolResultRenderers }
+    ...propRenderTool !== undefined && { renderTool: propRenderTool }
   };
-  const resolvedEmptyState = children ?? emptyState ?? /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+  const resolvedEmptyState = children ?? emptyState ?? /* @__PURE__ */ jsx_runtime50.jsxs("div", {
     className: "flex flex-col items-center gap-6",
     children: [
-      /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+      /* @__PURE__ */ jsx_runtime50.jsxs("div", {
         className: "relative",
         children: [
-          /* @__PURE__ */ jsx_runtime39.jsx("div", {
+          /* @__PURE__ */ jsx_runtime50.jsx("div", {
             className: "h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center",
-            children: /* @__PURE__ */ jsx_runtime39.jsx(import_lucide_react21.Bot, {
+            children: /* @__PURE__ */ jsx_runtime50.jsx(import_lucide_react25.Bot, {
               className: "h-8 w-8 text-primary"
             })
           }),
-          /* @__PURE__ */ jsx_runtime39.jsx("div", {
+          /* @__PURE__ */ jsx_runtime50.jsx("div", {
             className: "absolute -bottom-1 -right-1 h-5 w-5 rounded-full bg-green-500 border-2 border-background flex items-center justify-center",
-            children: /* @__PURE__ */ jsx_runtime39.jsx("span", {
+            children: /* @__PURE__ */ jsx_runtime50.jsx("span", {
               className: "h-2 w-2 rounded-full bg-white animate-pulse"
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx_runtime39.jsxs("div", {
+      /* @__PURE__ */ jsx_runtime50.jsxs("div", {
         className: "space-y-2 text-center",
         children: [
-          /* @__PURE__ */ jsx_runtime39.jsx("h3", {
+          /* @__PURE__ */ jsx_runtime50.jsx("h3", {
             className: "text-xl font-semibold tracking-tight",
             children: "Welcome to Agno Chat"
           }),
-          /* @__PURE__ */ jsx_runtime39.jsx("p", {
+          /* @__PURE__ */ jsx_runtime50.jsx("p", {
             className: "text-muted-foreground text-sm max-w-sm",
             children: "Start a conversation with your AI agent. Ask questions, explore ideas, or run tools."
           })
         ]
       }),
-      suggestedPrompts.length > 0 && /* @__PURE__ */ jsx_runtime39.jsx(AgnoChatSuggestedPrompts, {
+      suggestedPrompts.length > 0 && /* @__PURE__ */ jsx_runtime50.jsx(AgnoChatSuggestedPrompts, {
         prompts: suggestedPrompts
       })
     ]
   });
-  return /* @__PURE__ */ jsx_runtime39.jsxs(Conversation, {
+  return /* @__PURE__ */ jsx_runtime50.jsxs(Conversation, {
     className: cn("relative flex-1 w-full", className),
+    scrollBehavior,
     children: [
-      /* @__PURE__ */ jsx_runtime39.jsx(ScrollOnNewUserMessage, {
+      /* @__PURE__ */ jsx_runtime50.jsx(ScrollOnNewUserMessage, {
         messageCount: messages.length
       }),
-      /* @__PURE__ */ jsx_runtime39.jsxs(ConversationContent, {
+      /* @__PURE__ */ jsx_runtime50.jsxs(ConversationContent, {
         className: "max-w-3xl mx-auto",
         children: [
-          messages.length === 0 ? /* @__PURE__ */ jsx_runtime39.jsx(ConversationEmptyState, {
+          messages.length === 0 ? /* @__PURE__ */ jsx_runtime50.jsx(ConversationEmptyState, {
             children: resolvedEmptyState
           }) : messages.map((message, index) => {
             if (isThinking && index === messages.length - 1 && message === lastMessage)
               return null;
-            return renderMessage ? renderMessage(message, index) : /* @__PURE__ */ jsx_runtime39.jsx(AgnoMessageItem, {
+            return renderMessage ? renderMessage(message, index) : /* @__PURE__ */ jsx_runtime50.jsx(AgnoMessageItem, {
               message,
               avatars,
               actions,
@@ -3888,23 +4417,23 @@ function AgnoChatMessages({
               ...messageItemProps
             }, `msg-${index}-${message.created_at}`);
           }),
-          isThinking && /* @__PURE__ */ jsx_runtime39.jsx("div", {
+          isThinking && /* @__PURE__ */ jsx_runtime50.jsx("div", {
             className: "py-2",
-            children: renderThinkingIndicator ?? /* @__PURE__ */ jsx_runtime39.jsx(StreamingIndicator, {
+            children: renderThinkingIndicator ?? /* @__PURE__ */ jsx_runtime50.jsx(StreamingIndicator, {
               avatar: avatars?.assistant
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx_runtime39.jsx(ConversationScrollButton, {})
+      resolvedScrollButton
     ]
   });
 }
 
 // src/ui/composed/agno-chat/empty-state.tsx
-var jsx_runtime40 = require("react/jsx-runtime");
+var jsx_runtime51 = require("react/jsx-runtime");
 function AgnoChatEmptyState({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx_runtime40.jsx("div", {
+  return /* @__PURE__ */ jsx_runtime51.jsx("div", {
     className: cn("flex flex-col items-center gap-6", className),
     ...props,
     children
@@ -3912,8 +4441,8 @@ function AgnoChatEmptyState({ children, className, ...props }) {
 }
 
 // src/ui/composed/agno-chat/error-bar.tsx
-var import_react18 = require("react");
-var jsx_runtime41 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var jsx_runtime52 = require("react/jsx-runtime");
 function AgnoChatErrorBar({
   className,
   text,
@@ -3923,10 +4452,10 @@ function AgnoChatErrorBar({
   children
 }) {
   const { error, executionError } = useAgnoChatContext();
-  const [hidden, setHidden] = import_react18.useState(false);
-  const timerRef = import_react18.useRef(null);
+  const [hidden, setHidden] = import_react23.useState(false);
+  const timerRef = import_react23.useRef(null);
   const rawMessage = error || executionError;
-  import_react18.useEffect(() => {
+  import_react23.useEffect(() => {
     if (!rawMessage)
       return;
     setHidden(false);
@@ -3953,23 +4482,23 @@ function AgnoChatErrorBar({
     if (children) {
       return typeof children === "function" ? children(rawMessage) : children;
     }
-    return /* @__PURE__ */ jsx_runtime41.jsxs("div", {
+    return /* @__PURE__ */ jsx_runtime52.jsxs("div", {
       className: "flex items-center gap-2 max-w-3xl mx-auto",
       children: [
-        icon && /* @__PURE__ */ jsx_runtime41.jsx("span", {
+        icon && /* @__PURE__ */ jsx_runtime52.jsx("span", {
           className: "shrink-0",
           children: icon
         }),
-        /* @__PURE__ */ jsx_runtime41.jsx("p", {
+        /* @__PURE__ */ jsx_runtime52.jsx("p", {
           className: "text-sm text-destructive flex-1",
           children: displayMessage
         }),
-        dismissible && /* @__PURE__ */ jsx_runtime41.jsx("button", {
+        dismissible && /* @__PURE__ */ jsx_runtime52.jsx("button", {
           type: "button",
           onClick: () => setHidden(true),
           className: "shrink-0 text-destructive/60 hover:text-destructive transition-colors",
           "aria-label": "Dismiss error",
-          children: /* @__PURE__ */ jsx_runtime41.jsxs("svg", {
+          children: /* @__PURE__ */ jsx_runtime52.jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             width: "16",
             height: "16",
@@ -3980,10 +4509,10 @@ function AgnoChatErrorBar({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx_runtime41.jsx("path", {
+              /* @__PURE__ */ jsx_runtime52.jsx("path", {
                 d: "M18 6 6 18"
               }),
-              /* @__PURE__ */ jsx_runtime41.jsx("path", {
+              /* @__PURE__ */ jsx_runtime52.jsx("path", {
                 d: "m6 6 12 12"
               })
             ]
@@ -3992,14 +4521,14 @@ function AgnoChatErrorBar({
       ]
     });
   };
-  return /* @__PURE__ */ jsx_runtime41.jsx("div", {
+  return /* @__PURE__ */ jsx_runtime52.jsx("div", {
     className: cn("px-4 py-2.5 bg-destructive/5 border-t border-destructive/20", className),
     children: renderContent()
   });
 }
 
 // src/ui/composed/agno-chat/input.tsx
-var jsx_runtime42 = require("react/jsx-runtime");
+var jsx_runtime53 = require("react/jsx-runtime");
 function AgnoChatInputArea({
   className,
   children,
@@ -4012,11 +4541,11 @@ function AgnoChatInputArea({
   dropZoneProps
 }) {
   const { handleSend, inputDisabled, isStreaming, isPaused, cancelRun, dropZoneContainerRef } = useAgnoChatContext();
-  return /* @__PURE__ */ jsx_runtime42.jsx("div", {
+  return /* @__PURE__ */ jsx_runtime53.jsx("div", {
     className: cn("border-t border-border bg-background/80 backdrop-blur-sm", className),
-    children: /* @__PURE__ */ jsx_runtime42.jsx("div", {
+    children: /* @__PURE__ */ jsx_runtime53.jsx("div", {
       className: "mx-auto px-4 py-2",
-      children: children ? children({ onSend: handleSend, disabled: inputDisabled, isStreaming, isPaused }) : /* @__PURE__ */ jsx_runtime42.jsx(AgnoChatInput, {
+      children: children ? children({ onSend: handleSend, disabled: inputDisabled, isStreaming, isPaused }) : /* @__PURE__ */ jsx_runtime53.jsx(AgnoChatInput, {
         onSend: handleSend,
         disabled: inputDisabled,
         isStreaming,
@@ -4043,4 +4572,4 @@ var AgnoChat = Object.assign(AgnoChatRoot, {
   Input: AgnoChatInputArea
 });
 
-//# debugId=7D6444DACC443C3D64756E2164756E21
+//# debugId=7C378B0E1199C3A164756E2164756E21