@rodrigocoliveira/agno-react 1.0.3 → 1.1.0

package/dist/ui.mjs

@@ -2684,116 +2684,6 @@ var PromptInputCommandSeparator = ({ className, ...props }) => /* @__PURE__ */ j
   className: cn(className),
   ...props
 }, undefined, false, undefined, this);
-// src/ui/composed/agno-chat/agno-chat.tsx
-import { useCallback as useCallback7, useMemo as useMemo3, useRef as useRef6 } from "react";
-import { useAgnoChat, useAgnoToolExecution } from "@rodrigocoliveira/agno-react";
-
-// src/ui/composed/agno-chat/context.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var AgnoChatContext = createContext3(null);
-function useAgnoChatContext() {
-  const ctx = useContext3(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/agno-chat.tsx
-import { jsxDEV as jsxDEV35 } from "react/jsx-dev-runtime";
-function AgnoChatRoot({
-  children,
-  toolHandlers = {},
-  autoExecuteTools = true,
-  className,
-  ...divProps
-}) {
-  const chat = useAgnoChat();
-  const toolExec = useAgnoToolExecution(toolHandlers, autoExecuteTools);
-  const containerRef = useRef6(null);
-  const sendRef = useRef6(chat.sendMessage);
-  sendRef.current = chat.sendMessage;
-  const handleSend = useCallback7(async (message) => {
-    try {
-      await sendRef.current(message);
-    } catch {}
-  }, []);
-  const {
-    messages,
-    sendMessage,
-    clearMessages,
-    cancelRun,
-    isStreaming,
-    isRefreshing,
-    isCancelling,
-    currentRunId,
-    error,
-    state
-  } = chat;
-  const {
-    isPaused,
-    isExecuting,
-    pendingTools,
-    executeAndContinue,
-    executeTools,
-    continueWithResults,
-    executionError
-  } = toolExec;
-  const contextValue = useMemo3(() => ({
-    messages,
-    sendMessage,
-    clearMessages,
-    cancelRun,
-    isStreaming,
-    isRefreshing,
-    isCancelling: isCancelling ?? false,
-    currentRunId,
-    error,
-    state,
-    isPaused,
-    isExecuting,
-    pendingTools,
-    executeAndContinue,
-    executeTools,
-    continueWithResults,
-    executionError,
-    handleSend,
-    inputDisabled: isStreaming || isPaused,
-    dropZoneContainerRef: containerRef
-  }), [
-    messages,
-    sendMessage,
-    clearMessages,
-    cancelRun,
-    isStreaming,
-    isRefreshing,
-    isCancelling,
-    currentRunId,
-    error,
-    state,
-    isPaused,
-    isExecuting,
-    pendingTools,
-    executeAndContinue,
-    executeTools,
-    continueWithResults,
-    executionError,
-    handleSend
-  ]);
-  return /* @__PURE__ */ jsxDEV35(AgnoChatContext.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsxDEV35("div", {
-      ref: containerRef,
-      className: cn("relative h-full flex flex-col", className),
-      ...divProps,
-      children
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/ui/composed/agno-chat/messages.tsx
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
-
 // src/ui/composed/AgnoMessageItem.tsx
 import { useState as useState8 } from "react";
 import { GenerativeUIRenderer } from "@rodrigocoliveira/agno-react";
@@ -2807,7 +2697,7 @@ import {
   Paperclip,
   Video
 } from "lucide-react";
-import { jsxDEV as jsxDEV36, Fragment as Fragment5 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV35, Fragment as Fragment5 } from "react/jsx-dev-runtime";
 var defaultFormatTimestamp = formatSmartTimestamp;
 var getToolState = (tool) => {
   return tool.tool_call_error ? "output-error" : "output-available";
@@ -2819,9 +2709,9 @@ function AgnoMessageItem({
   renderContent,
   renderToolCall,
   renderMedia,
-  renderActions,
-  userAvatar,
-  assistantAvatar,
+  avatars,
+  actions,
+  isLastAssistantMessage = false,
   showReasoning = true,
   showReferences = true,
   showTimestamp = true,
@@ -2848,45 +2738,45 @@ function AgnoMessageItem({
     setPreview({ type: "file", file });
   };
   const closePreview = () => setPreview(null);
-  return /* @__PURE__ */ jsxDEV36("div", {
+  return /* @__PURE__ */ jsxDEV35("div", {
     className: cn("py-5 first:pt-2", isUser ? "flex justify-end" : "", classNames?.root, className),
     children: [
-      isUser ? /* @__PURE__ */ jsxDEV36("div", {
+      isUser ? /* @__PURE__ */ jsxDEV35("div", {
         className: "flex items-start gap-2.5 max-w-[80%] flex-row-reverse",
         children: [
-          userAvatar,
-          /* @__PURE__ */ jsxDEV36("div", {
+          avatars?.user,
+          /* @__PURE__ */ jsxDEV35("div", {
             className: "space-y-1.5 flex flex-col items-end min-w-0",
             children: [
-              (message.images && message.images.length > 0 || message.audio && message.audio.length > 0 || message.files && message.files.length > 0) && /* @__PURE__ */ jsxDEV36("div", {
+              (message.images && message.images.length > 0 || message.audio && message.audio.length > 0 || message.files && message.files.length > 0) && /* @__PURE__ */ jsxDEV35("div", {
                 className: "flex flex-wrap gap-2 justify-end",
                 children: [
-                  message.images?.map((img, idx) => /* @__PURE__ */ jsxDEV36(FilePreviewCard, {
+                  message.images?.map((img, idx) => /* @__PURE__ */ jsxDEV35(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}`, false, undefined, this)),
-                  message.audio?.map((audio, idx) => /* @__PURE__ */ jsxDEV36("div", {
+                  message.audio?.map((audio, idx) => /* @__PURE__ */ jsxDEV35("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__ */ jsxDEV36(Music, {
+                      /* @__PURE__ */ jsxDEV35(Music, {
                         className: "h-3.5 w-3.5 text-muted-foreground"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV36("span", {
+                      /* @__PURE__ */ jsxDEV35("span", {
                         className: "truncate max-w-[150px]",
                         children: audio.id || `Audio ${idx + 1}`
                       }, undefined, false, undefined, this)
                     ]
                   }, `audio-${idx}`, true, undefined, this)),
-                  message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsxDEV36(FilePreviewCard, {
+                  message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsxDEV35(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}`, false, undefined, this) : /* @__PURE__ */ jsxDEV36("div", {
+                  }, `file-${idx}`, false, undefined, this) : /* @__PURE__ */ jsxDEV35("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__ */ jsxDEV36(FileIcon3, {
+                      /* @__PURE__ */ jsxDEV35(FileIcon3, {
                         className: "h-3.5 w-3.5 text-muted-foreground"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV36("span", {
+                      /* @__PURE__ */ jsxDEV35("span", {
                         className: "truncate max-w-[150px]",
                         children: file.name
                       }, undefined, false, undefined, this)
@@ -2894,22 +2784,26 @@ function AgnoMessageItem({
                   }, `file-${idx}`, true, undefined, this))
                 ]
               }, undefined, true, undefined, this),
-              message.content && /* @__PURE__ */ jsxDEV36("div", {
-                className: cn("rounded-2xl rounded-br-md px-4 py-2.5", classNames?.userBubble ?? "bg-primary text-primary-foreground", hasError && "opacity-70"),
-                children: /* @__PURE__ */ jsxDEV36("p", {
+              message.content && /* @__PURE__ */ jsxDEV35("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__ */ jsxDEV35("p", {
                   className: "text-sm whitespace-pre-wrap",
                   children: message.content
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              showTimestamp && /* @__PURE__ */ jsxDEV36("div", {
+              (showTimestamp || actions?.user) && /* @__PURE__ */ jsxDEV35("div", {
                 className: "flex items-center justify-end gap-1.5 px-1",
                 children: [
-                  /* @__PURE__ */ jsxDEV36(SmartTimestamp, {
+                  actions?.user && /* @__PURE__ */ jsxDEV35("div", {
+                    className: "flex items-center gap-1",
+                    children: actions.user(message)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV35(SmartTimestamp, {
                     date: new Date(message.created_at * 1000),
                     formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
                     className: "text-[11px] text-muted-foreground"
                   }, undefined, false, undefined, this),
-                  hasError && /* @__PURE__ */ jsxDEV36(AlertCircle, {
+                  hasError && /* @__PURE__ */ jsxDEV35(AlertCircle, {
                     className: "h-3 w-3 text-destructive"
                   }, undefined, false, undefined, this)
                 ]
@@ -2917,22 +2811,22 @@ function AgnoMessageItem({
             ]
           }, undefined, true, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV36("div", {
-        className: "flex items-start gap-3",
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV35("div", {
+        className: "flex items-start gap-3 group/message",
         children: [
-          assistantAvatar,
-          /* @__PURE__ */ jsxDEV36("div", {
-            className: cn("flex-1 min-w-0 space-y-3", classNames?.assistantContainer),
+          avatars?.assistant,
+          /* @__PURE__ */ jsxDEV35("div", {
+            className: cn("flex-1 min-w-0 space-y-3", classNames?.assistant?.container),
             children: [
-              renderContent ? renderContent(message) : /* @__PURE__ */ jsxDEV36(Fragment5, {
+              renderContent ? renderContent(message) : /* @__PURE__ */ jsxDEV35(Fragment5, {
                 children: [
-                  showReasoning && message.extra_data?.reasoning_steps && message.extra_data.reasoning_steps.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
-                    className: cn("space-y-2 pt-1", classNames?.reasoning),
+                  showReasoning && message.extra_data?.reasoning_steps && message.extra_data.reasoning_steps.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
+                    className: cn("space-y-2 pt-1", classNames?.assistant?.reasoning),
                     children: [
-                      /* @__PURE__ */ jsxDEV36("div", {
+                      /* @__PURE__ */ jsxDEV35("div", {
                         className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
                         children: [
-                          /* @__PURE__ */ jsxDEV36(Lightbulb, {
+                          /* @__PURE__ */ jsxDEV35(Lightbulb, {
                             className: "h-3.5 w-3.5"
                           }, undefined, false, undefined, this),
                           "Reasoning (",
@@ -2940,23 +2834,23 @@ function AgnoMessageItem({
                           " steps)"
                         ]
                       }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV36(Accordion, {
+                      /* @__PURE__ */ jsxDEV35(Accordion, {
                         type: "multiple",
                         className: "w-full",
-                        children: message.extra_data.reasoning_steps.map((step, idx) => /* @__PURE__ */ jsxDEV36(AccordionItem, {
+                        children: message.extra_data.reasoning_steps.map((step, idx) => /* @__PURE__ */ jsxDEV35(AccordionItem, {
                           value: `reasoning-${idx}`,
                           className: "border-muted",
                           children: [
-                            /* @__PURE__ */ jsxDEV36(AccordionTrigger, {
+                            /* @__PURE__ */ jsxDEV35(AccordionTrigger, {
                               className: "text-xs py-1.5 hover:no-underline",
                               children: step.title || `Step ${idx + 1}`
                             }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV36(AccordionContent, {
+                            /* @__PURE__ */ jsxDEV35(AccordionContent, {
                               className: "space-y-1.5 text-xs text-muted-foreground",
                               children: [
-                                step.action && /* @__PURE__ */ jsxDEV36("div", {
+                                step.action && /* @__PURE__ */ jsxDEV35("div", {
                                   children: [
-                                    /* @__PURE__ */ jsxDEV36("span", {
+                                    /* @__PURE__ */ jsxDEV35("span", {
                                       className: "font-medium text-foreground",
                                       children: "Action:"
                                     }, undefined, false, undefined, this),
@@ -2964,9 +2858,9 @@ function AgnoMessageItem({
                                     step.action
                                   ]
                                 }, undefined, true, undefined, this),
-                                step.reasoning && /* @__PURE__ */ jsxDEV36("div", {
+                                step.reasoning && /* @__PURE__ */ jsxDEV35("div", {
                                   children: [
-                                    /* @__PURE__ */ jsxDEV36("span", {
+                                    /* @__PURE__ */ jsxDEV35("span", {
                                       className: "font-medium text-foreground",
                                       children: "Reasoning:"
                                     }, undefined, false, undefined, this),
@@ -2974,9 +2868,9 @@ function AgnoMessageItem({
                                     step.reasoning
                                   ]
                                 }, undefined, true, undefined, this),
-                                step.result && /* @__PURE__ */ jsxDEV36("div", {
+                                step.result && /* @__PURE__ */ jsxDEV35("div", {
                                   children: [
-                                    /* @__PURE__ */ jsxDEV36("span", {
+                                    /* @__PURE__ */ jsxDEV35("span", {
                                       className: "font-medium text-foreground",
                                       children: "Result:"
                                     }, undefined, false, undefined, this),
@@ -2984,9 +2878,9 @@ function AgnoMessageItem({
                                     step.result
                                   ]
                                 }, undefined, true, undefined, this),
-                                step.confidence !== undefined && /* @__PURE__ */ jsxDEV36("div", {
+                                step.confidence !== undefined && /* @__PURE__ */ jsxDEV35("div", {
                                   children: [
-                                    /* @__PURE__ */ jsxDEV36("span", {
+                                    /* @__PURE__ */ jsxDEV35("span", {
                                       className: "font-medium text-foreground",
                                       children: "Confidence:"
                                     }, undefined, false, undefined, this),
@@ -3002,23 +2896,23 @@ function AgnoMessageItem({
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  message.content && /* @__PURE__ */ jsxDEV36("div", {
+                  message.content && /* @__PURE__ */ jsxDEV35("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__ */ jsxDEV36(Response, {
+                    children: /* @__PURE__ */ jsxDEV35(Response, {
                       children: message.content
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  showGenerativeUI && toolsWithUI.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
+                  showGenerativeUI && toolsWithUI.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
                     className: "space-y-3",
                     children: toolsWithUI.map((tool) => {
                       const uiComponent = tool.ui_component;
-                      return /* @__PURE__ */ jsxDEV36("div", {
-                        children: uiComponent.layout === "artifact" ? /* @__PURE__ */ jsxDEV36(Artifact, {
-                          children: /* @__PURE__ */ jsxDEV36(GenerativeUIRenderer, {
+                      return /* @__PURE__ */ jsxDEV35("div", {
+                        children: uiComponent.layout === "artifact" ? /* @__PURE__ */ jsxDEV35(Artifact, {
+                          children: /* @__PURE__ */ jsxDEV35(GenerativeUIRenderer, {
                             spec: uiComponent,
                             className: "w-full p-2"
                           }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV36(GenerativeUIRenderer, {
+                        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV35(GenerativeUIRenderer, {
                           spec: uiComponent,
                           className: "w-full"
                         }, undefined, false, undefined, this)
@@ -3026,16 +2920,16 @@ function AgnoMessageItem({
                     })
                   }, undefined, false, undefined, this),
                   renderMedia ? renderMedia(message) : (() => {
-                    const mediaClassName = classNames?.media;
-                    return /* @__PURE__ */ jsxDEV36(Fragment5, {
+                    const mediaClassName = classNames?.assistant?.media;
+                    return /* @__PURE__ */ jsxDEV35(Fragment5, {
                       children: [
-                        message.images && message.images.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
+                        message.images && message.images.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
                           className: cn("space-y-2 pt-1", mediaClassName),
                           children: [
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
                               children: [
-                                /* @__PURE__ */ jsxDEV36(ImageIcon2, {
+                                /* @__PURE__ */ jsxDEV35(ImageIcon2, {
                                   className: "h-3.5 w-3.5"
                                 }, undefined, false, undefined, this),
                                 "Images (",
@@ -3043,26 +2937,26 @@ function AgnoMessageItem({
                                 ")"
                               ]
                             }, undefined, true, undefined, this),
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "grid grid-cols-2 gap-2",
-                              children: message.images.map((img, idx) => /* @__PURE__ */ jsxDEV36("div", {
+                              children: message.images.map((img, idx) => /* @__PURE__ */ jsxDEV35("div", {
                                 className: "space-y-1",
                                 children: [
-                                  showImageLightbox ? /* @__PURE__ */ jsxDEV36("button", {
+                                  showImageLightbox ? /* @__PURE__ */ jsxDEV35("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__ */ jsxDEV36("img", {
+                                    children: /* @__PURE__ */ jsxDEV35("img", {
                                       src: img.url,
                                       alt: img.revised_prompt || "Generated image",
                                       className: "w-full rounded-lg"
                                     }, undefined, false, undefined, this)
-                                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV36("img", {
+                                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV35("img", {
                                     src: img.url,
                                     alt: img.revised_prompt || "Generated image",
                                     className: "w-full rounded-lg border border-border"
                                   }, undefined, false, undefined, this),
-                                  img.revised_prompt && /* @__PURE__ */ jsxDEV36("p", {
+                                  img.revised_prompt && /* @__PURE__ */ jsxDEV35("p", {
                                     className: "text-[11px] text-muted-foreground italic px-0.5",
                                     children: img.revised_prompt
                                   }, undefined, false, undefined, this)
@@ -3071,13 +2965,13 @@ function AgnoMessageItem({
                             }, undefined, false, undefined, this)
                           ]
                         }, undefined, true, undefined, this),
-                        message.videos && message.videos.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
+                        message.videos && message.videos.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
                           className: cn("space-y-2 pt-1", mediaClassName),
                           children: [
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
                               children: [
-                                /* @__PURE__ */ jsxDEV36(Video, {
+                                /* @__PURE__ */ jsxDEV35(Video, {
                                   className: "h-3.5 w-3.5"
                                 }, undefined, false, undefined, this),
                                 "Videos (",
@@ -3085,14 +2979,14 @@ function AgnoMessageItem({
                                 ")"
                               ]
                             }, undefined, true, undefined, this),
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "space-y-2",
-                              children: message.videos.map((video, idx) => /* @__PURE__ */ jsxDEV36("div", {
-                                children: video.url ? /* @__PURE__ */ jsxDEV36("video", {
+                              children: message.videos.map((video, idx) => /* @__PURE__ */ jsxDEV35("div", {
+                                children: video.url ? /* @__PURE__ */ jsxDEV35("video", {
                                   src: video.url,
                                   controls: true,
                                   className: "w-full rounded-lg border border-border"
-                                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV36("div", {
+                                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV35("div", {
                                   className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
                                   children: [
                                     "Video ID: ",
@@ -3106,13 +3000,13 @@ function AgnoMessageItem({
                             }, undefined, false, undefined, this)
                           ]
                         }, undefined, true, undefined, this),
-                        message.audio && message.audio.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
+                        message.audio && message.audio.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
                           className: cn("space-y-2 pt-1", mediaClassName),
                           children: [
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
                               children: [
-                                /* @__PURE__ */ jsxDEV36(Music, {
+                                /* @__PURE__ */ jsxDEV35(Music, {
                                   className: "h-3.5 w-3.5"
                                 }, undefined, false, undefined, this),
                                 "Audio (",
@@ -3120,18 +3014,18 @@ function AgnoMessageItem({
                                 ")"
                               ]
                             }, undefined, true, undefined, this),
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "space-y-2",
-                              children: message.audio.map((audio, idx) => /* @__PURE__ */ jsxDEV36("div", {
-                                children: audio.url ? /* @__PURE__ */ jsxDEV36("audio", {
+                              children: message.audio.map((audio, idx) => /* @__PURE__ */ jsxDEV35("div", {
+                                children: audio.url ? /* @__PURE__ */ jsxDEV35("audio", {
                                   src: audio.url,
                                   controls: true,
                                   className: "w-full"
-                                }, undefined, false, undefined, this) : audio.base64_audio ? /* @__PURE__ */ jsxDEV36("audio", {
+                                }, undefined, false, undefined, this) : audio.base64_audio ? /* @__PURE__ */ jsxDEV35("audio", {
                                   src: `data:${audio.mime_type || "audio/wav"};base64,${audio.base64_audio}`,
                                   controls: true,
                                   className: "w-full"
-                                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV36("div", {
+                                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV35("div", {
                                   className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
                                   children: "Audio data unavailable"
                                 }, undefined, false, undefined, this)
@@ -3139,13 +3033,13 @@ function AgnoMessageItem({
                             }, undefined, false, undefined, this)
                           ]
                         }, undefined, true, undefined, this),
-                        message.files && message.files.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
+                        message.files && message.files.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
                           className: cn("space-y-2 pt-1", mediaClassName),
                           children: [
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
                               children: [
-                                /* @__PURE__ */ jsxDEV36(Paperclip, {
+                                /* @__PURE__ */ jsxDEV35(Paperclip, {
                                   className: "h-3.5 w-3.5"
                                 }, undefined, false, undefined, this),
                                 "Files (",
@@ -3153,22 +3047,22 @@ function AgnoMessageItem({
                                 ")"
                               ]
                             }, undefined, true, undefined, this),
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "flex flex-wrap gap-2",
-                              children: message.files.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsxDEV36(FilePreviewCard, {
+                              children: message.files.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsxDEV35(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, false, undefined, this) : /* @__PURE__ */ jsxDEV36("div", {
+                              }, idx, false, undefined, this) : /* @__PURE__ */ jsxDEV35("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__ */ jsxDEV36(FileIcon3, {
+                                  /* @__PURE__ */ jsxDEV35(FileIcon3, {
                                     className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
                                   }, undefined, false, undefined, this),
-                                  /* @__PURE__ */ jsxDEV36("span", {
+                                  /* @__PURE__ */ jsxDEV35("span", {
                                     className: "truncate max-w-[180px]",
                                     children: file.name
                                   }, undefined, false, undefined, this),
-                                  file.size && /* @__PURE__ */ jsxDEV36("span", {
+                                  file.size && /* @__PURE__ */ jsxDEV35("span", {
                                     className: "text-muted-foreground/70",
                                     children: [
                                       "(",
@@ -3176,7 +3070,7 @@ function AgnoMessageItem({
                                       "KB)"
                                     ]
                                   }, undefined, true, undefined, this),
-                                  file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsxDEV36("a", {
+                                  file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsxDEV35("a", {
                                     href: file.url,
                                     target: "_blank",
                                     rel: "noopener noreferrer",
@@ -3188,19 +3082,19 @@ function AgnoMessageItem({
                             }, undefined, false, undefined, this)
                           ]
                         }, undefined, true, undefined, this),
-                        message.response_audio && /* @__PURE__ */ jsxDEV36("div", {
+                        message.response_audio && /* @__PURE__ */ jsxDEV35("div", {
                           className: cn("space-y-2 pt-1", mediaClassName),
                           children: [
-                            /* @__PURE__ */ jsxDEV36("div", {
+                            /* @__PURE__ */ jsxDEV35("div", {
                               className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
                               children: [
-                                /* @__PURE__ */ jsxDEV36(Music, {
+                                /* @__PURE__ */ jsxDEV35(Music, {
                                   className: "h-3.5 w-3.5"
                                 }, undefined, false, undefined, this),
                                 "Response Audio"
                               ]
                             }, undefined, true, undefined, this),
-                            message.response_audio.transcript && /* @__PURE__ */ jsxDEV36("div", {
+                            message.response_audio.transcript && /* @__PURE__ */ jsxDEV35("div", {
                               className: "text-xs italic bg-muted/50 border border-border p-2.5 rounded-lg text-muted-foreground",
                               children: [
                                 '"',
@@ -3208,7 +3102,7 @@ function AgnoMessageItem({
                                 '"'
                               ]
                             }, undefined, true, undefined, this),
-                            message.response_audio.content && /* @__PURE__ */ jsxDEV36("audio", {
+                            message.response_audio.content && /* @__PURE__ */ jsxDEV35("audio", {
                               src: `data:audio/wav;base64,${message.response_audio.content}`,
                               controls: true,
                               className: "w-full"
@@ -3218,22 +3112,22 @@ function AgnoMessageItem({
                       ]
                     }, undefined, true, undefined, this);
                   })(),
-                  showToolCalls && message.tool_calls && message.tool_calls.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
-                    className: cn("space-y-2 pt-1", classNames?.toolCalls),
-                    children: message.tool_calls.map((tool, idx) => renderToolCall ? renderToolCall(tool, idx) : /* @__PURE__ */ jsxDEV36(Tool, {
+                  showToolCalls && message.tool_calls && message.tool_calls.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
+                    className: cn("space-y-2 pt-1", classNames?.assistant?.toolCalls),
+                    children: message.tool_calls.map((tool, idx) => renderToolCall ? renderToolCall(tool, idx) : /* @__PURE__ */ jsxDEV35(Tool, {
                       defaultOpen: idx === 0,
                       children: [
-                        /* @__PURE__ */ jsxDEV36(ToolHeader, {
+                        /* @__PURE__ */ jsxDEV35(ToolHeader, {
                           title: tool.tool_name,
                           type: "tool-use",
                           state: getToolState(tool)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV36(ToolContent, {
+                        /* @__PURE__ */ jsxDEV35(ToolContent, {
                           children: [
-                            /* @__PURE__ */ jsxDEV36(ToolInput, {
+                            /* @__PURE__ */ jsxDEV35(ToolInput, {
                               input: tool.tool_args
                             }, undefined, false, undefined, this),
-                            tool.content && /* @__PURE__ */ jsxDEV36(ToolOutput, {
+                            tool.content && /* @__PURE__ */ jsxDEV35(ToolOutput, {
                               output: tool.content,
                               errorText: tool.tool_call_error ? "Tool execution failed" : undefined
                             }, undefined, false, undefined, this)
@@ -3242,13 +3136,13 @@ function AgnoMessageItem({
                       ]
                     }, tool.tool_call_id || idx, true, undefined, this))
                   }, undefined, false, undefined, this),
-                  showReferences && message.extra_data?.references && message.extra_data.references.length > 0 && /* @__PURE__ */ jsxDEV36("div", {
-                    className: cn("space-y-2 pt-1", classNames?.references),
+                  showReferences && message.extra_data?.references && message.extra_data.references.length > 0 && /* @__PURE__ */ jsxDEV35("div", {
+                    className: cn("space-y-2 pt-1", classNames?.assistant?.references),
                     children: [
-                      /* @__PURE__ */ jsxDEV36("div", {
+                      /* @__PURE__ */ jsxDEV35("div", {
                         className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
                         children: [
-                          /* @__PURE__ */ jsxDEV36(FileText, {
+                          /* @__PURE__ */ jsxDEV35(FileText, {
                             className: "h-3.5 w-3.5"
                           }, undefined, false, undefined, this),
                           "References (",
@@ -3256,22 +3150,22 @@ function AgnoMessageItem({
                           ")"
                         ]
                       }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV36("div", {
+                      /* @__PURE__ */ jsxDEV35("div", {
                         className: "space-y-2",
-                        children: message.extra_data.references.map((refData, idx) => /* @__PURE__ */ jsxDEV36("div", {
+                        children: message.extra_data.references.map((refData, idx) => /* @__PURE__ */ jsxDEV35("div", {
                           className: "text-xs space-y-1.5",
                           children: [
-                            refData.query && /* @__PURE__ */ jsxDEV36("div", {
+                            refData.query && /* @__PURE__ */ jsxDEV35("div", {
                               className: "font-medium text-foreground",
                               children: [
                                 "Query: ",
                                 refData.query
                               ]
                             }, undefined, true, undefined, this),
-                            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsxDEV36("div", {
+                            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsxDEV35("div", {
                               className: "bg-muted/50 border border-border p-2.5 rounded-lg",
                               children: [
-                                /* @__PURE__ */ jsxDEV36("div", {
+                                /* @__PURE__ */ jsxDEV35("div", {
                                   className: "italic text-muted-foreground mb-1",
                                   children: [
                                     '"',
@@ -3279,7 +3173,7 @@ function AgnoMessageItem({
                                     '"'
                                   ]
                                 }, undefined, true, undefined, this),
-                                /* @__PURE__ */ jsxDEV36("div", {
+                                /* @__PURE__ */ jsxDEV35("div", {
                                   className: "text-muted-foreground/70",
                                   children: [
                                     "Source: ",
@@ -3300,23 +3194,29 @@ function AgnoMessageItem({
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              (renderActions || showTimestamp || hasError) && /* @__PURE__ */ jsxDEV36("div", {
+              (actions?.assistant || showTimestamp || hasError) && /* @__PURE__ */ jsxDEV35("div", {
                 className: "flex items-center gap-2 pt-1",
                 children: [
-                  renderActions && /* @__PURE__ */ jsxDEV36("div", {
-                    className: cn("flex items-center gap-1", classNames?.actions),
-                    children: renderActions(message)
-                  }, undefined, false, undefined, this),
-                  hasError && /* @__PURE__ */ jsxDEV36("span", {
+                  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__ */ jsxDEV35("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)
+                    }, undefined, false, undefined, this);
+                  })(),
+                  hasError && /* @__PURE__ */ jsxDEV35("span", {
                     className: "flex items-center gap-1 text-[11px] text-destructive",
                     children: [
-                      /* @__PURE__ */ jsxDEV36(AlertCircle, {
+                      /* @__PURE__ */ jsxDEV35(AlertCircle, {
                         className: "h-3 w-3"
                       }, undefined, false, undefined, this),
                       "Error"
                     ]
                   }, undefined, true, undefined, this),
-                  showTimestamp && /* @__PURE__ */ jsxDEV36(SmartTimestamp, {
+                  showTimestamp && /* @__PURE__ */ jsxDEV35(SmartTimestamp, {
                     date: new Date(message.created_at * 1000),
                     formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
                     className: "text-[11px] text-muted-foreground"
@@ -3327,7 +3227,7 @@ function AgnoMessageItem({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      preview?.type === "image" && /* @__PURE__ */ jsxDEV36(ImageLightbox, {
+      preview?.type === "image" && /* @__PURE__ */ jsxDEV35(ImageLightbox, {
         open: true,
         onOpenChange: (open) => {
           if (!open)
@@ -3336,7 +3236,7 @@ function AgnoMessageItem({
         images: preview.images,
         initialIndex: preview.initialIndex
       }, undefined, false, undefined, this),
-      preview?.type === "file" && /* @__PURE__ */ jsxDEV36(FilePreviewModal, {
+      preview?.type === "file" && /* @__PURE__ */ jsxDEV35(FilePreviewModal, {
         open: true,
         onOpenChange: (open) => {
           if (!open)
@@ -3347,267 +3247,55 @@ function AgnoMessageItem({
     ]
   }, undefined, true, undefined, this);
 }
-
-// src/ui/composed/agno-chat/suggested-prompts.tsx
-import { jsxDEV as jsxDEV37 } from "react/jsx-dev-runtime";
-function AgnoChatSuggestedPrompts({ className, prompts }) {
-  const { handleSend } = useAgnoChatContext();
-  if (prompts.length === 0)
-    return null;
-  return /* @__PURE__ */ jsxDEV37("div", {
-    className: cn("grid grid-cols-2 gap-2 w-full max-w-md", className),
-    children: prompts.map((prompt, idx) => /* @__PURE__ */ jsxDEV37("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__ */ jsxDEV37("span", {
-          className: "text-muted-foreground group-hover:text-primary transition-colors",
-          children: prompt.icon
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV37("span", {
-          className: "text-muted-foreground group-hover:text-foreground transition-colors text-xs leading-snug",
-          children: prompt.text
-        }, undefined, false, undefined, this)
-      ]
-    }, idx, true, undefined, this))
-  }, undefined, false, undefined, this);
+// src/ui/composed/AgnoChatInput.tsx
+import { CircleStop } from "lucide-react";
+import { jsxDEV as jsxDEV36 } from "react/jsx-dev-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)
+    return { enabled: true };
+  if (!audio)
+    return;
+  return audio;
 }
-
-// src/ui/composed/agno-chat/messages.tsx
-import { Bot as Bot2 } from "lucide-react";
-import { jsxDEV as jsxDEV38 } from "react/jsx-dev-runtime";
-function ScrollOnNewUserMessage({ messageCount }) {
-  const { scrollToBottom } = useStickToBottomContext2();
-  const prevCount = useRef7(messageCount);
-  useEffect6(() => {
-    if (messageCount > prevCount.current) {
-      scrollToBottom("smooth");
-    }
-    prevCount.current = messageCount;
-  }, [messageCount, scrollToBottom]);
-  return null;
+function dataUrlToBlob(dataUrl) {
+  const [header, base64] = dataUrl.split(",");
+  const mime = header.match(/:(.*?);/)?.[1] || "application/octet-stream";
+  const bytes = atob(base64);
+  const buf = new Uint8Array(bytes.length);
+  for (let i = 0;i < bytes.length; i++) {
+    buf[i] = bytes.charCodeAt(i);
+  }
+  return new Blob([buf], { type: mime });
 }
-var DEFAULT_PROMPTS = [
-  { text: "What can you help me with?" },
-  { text: "Explain how you work" }
-];
-function AgnoChatMessages({
-  className,
-  renderMessage,
-  userAvatar,
-  assistantAvatar,
-  messageItemProps,
-  emptyState,
-  suggestedPrompts = DEFAULT_PROMPTS,
-  children,
-  showThinkingIndicator = true,
-  renderThinkingIndicator
-}) {
-  const { messages, isStreaming } = useAgnoChatContext();
-  const lastMessage = messages[messages.length - 1];
-  const isThinking = showThinkingIndicator && isStreaming && (!lastMessage || lastMessage.role !== "user") && !lastMessage?.content;
-  const resolvedEmptyState = children ?? emptyState ?? /* @__PURE__ */ jsxDEV38("div", {
-    className: "flex flex-col items-center gap-6",
-    children: [
-      /* @__PURE__ */ jsxDEV38("div", {
-        className: "relative",
-        children: [
-          /* @__PURE__ */ jsxDEV38("div", {
-            className: "h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center",
-            children: /* @__PURE__ */ jsxDEV38(Bot2, {
-              className: "h-8 w-8 text-primary"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV38("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__ */ jsxDEV38("span", {
-              className: "h-2 w-2 rounded-full bg-white animate-pulse"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV38("div", {
-        className: "space-y-2 text-center",
-        children: [
-          /* @__PURE__ */ jsxDEV38("h3", {
-            className: "text-xl font-semibold tracking-tight",
-            children: "Welcome to Agno Chat"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV38("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."
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      suggestedPrompts.length > 0 && /* @__PURE__ */ jsxDEV38(AgnoChatSuggestedPrompts, {
-        prompts: suggestedPrompts
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-  return /* @__PURE__ */ jsxDEV38(Conversation, {
-    className: cn("relative flex-1 w-full", className),
-    children: [
-      /* @__PURE__ */ jsxDEV38(ScrollOnNewUserMessage, {
-        messageCount: messages.length
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV38(ConversationContent, {
-        className: "max-w-3xl mx-auto",
-        children: [
-          messages.length === 0 ? /* @__PURE__ */ jsxDEV38(ConversationEmptyState, {
-            children: resolvedEmptyState
-          }, undefined, false, undefined, this) : messages.map((message, index) => {
-            if (isThinking && index === messages.length - 1 && message === lastMessage)
-              return null;
-            return renderMessage ? renderMessage(message, index) : /* @__PURE__ */ jsxDEV38(AgnoMessageItem, {
-              message,
-              userAvatar,
-              assistantAvatar,
-              ...messageItemProps
-            }, `msg-${index}-${message.created_at}`, false, undefined, this);
-          }),
-          isThinking && /* @__PURE__ */ jsxDEV38("div", {
-            className: "py-2",
-            children: renderThinkingIndicator ?? /* @__PURE__ */ jsxDEV38(StreamingIndicator, {
-              avatar: assistantAvatar
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV38(ConversationScrollButton, {}, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+function CancelButton({ onCancel }) {
+  return /* @__PURE__ */ jsxDEV36(Button, {
+    type: "button",
+    variant: "destructive",
+    size: "icon",
+    className: "h-8 w-8 rounded-lg",
+    onClick: onCancel,
+    "aria-label": "Stop",
+    children: /* @__PURE__ */ jsxDEV36(CircleStop, {
+      className: "size-4"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
-
-// src/ui/composed/agno-chat/empty-state.tsx
-import { jsxDEV as jsxDEV39 } from "react/jsx-dev-runtime";
-function AgnoChatEmptyState({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxDEV39("div", {
-    className: cn("flex flex-col items-center gap-6", className),
-    ...props,
-    children
+function SubmitButton({ disabled, status }) {
+  const { textInput } = usePromptInputController();
+  const hasText = textInput.value.trim().length > 0;
+  return /* @__PURE__ */ jsxDEV36(PromptInputSubmit, {
+    disabled: disabled || !hasText,
+    status
   }, undefined, false, undefined, this);
 }
-
-// src/ui/composed/agno-chat/tool-status.tsx
-import { Loader2 as Loader22, Wrench } from "lucide-react";
-import { jsxDEV as jsxDEV40, Fragment as Fragment6 } from "react/jsx-dev-runtime";
-function AgnoChatToolStatus({ className }) {
-  const { isPaused, isExecuting, pendingTools } = useAgnoChatContext();
-  if (!isPaused && !isExecuting)
+function AttachmentHeader() {
+  const { files } = usePromptInputAttachments();
+  if (files.length === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV40("div", {
-    className: cn("px-4 py-2.5 border-t border-border bg-primary/5", className),
-    children: /* @__PURE__ */ jsxDEV40("div", {
-      className: "flex items-center gap-2.5 text-sm max-w-3xl mx-auto",
-      children: isExecuting ? /* @__PURE__ */ jsxDEV40(Fragment6, {
-        children: [
-          /* @__PURE__ */ jsxDEV40("div", {
-            className: "h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center",
-            children: /* @__PURE__ */ jsxDEV40(Loader22, {
-              className: "h-3 w-3 animate-spin text-primary"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV40("span", {
-            className: "text-muted-foreground",
-            children: [
-              "Executing",
-              " ",
-              /* @__PURE__ */ jsxDEV40("span", {
-                className: "font-medium text-foreground",
-                children: pendingTools.length
-              }, undefined, false, undefined, this),
-              " tool",
-              pendingTools.length !== 1 ? "s" : "",
-              "..."
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV40(Fragment6, {
-        children: [
-          /* @__PURE__ */ jsxDEV40("div", {
-            className: "h-5 w-5 rounded-full bg-amber-500/10 flex items-center justify-center",
-            children: /* @__PURE__ */ jsxDEV40(Wrench, {
-              className: "h-3 w-3 text-amber-600 dark:text-amber-400"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV40("span", {
-            className: "text-muted-foreground",
-            children: [
-              "Preparing",
-              " ",
-              /* @__PURE__ */ jsxDEV40("span", {
-                className: "font-medium text-foreground",
-                children: pendingTools.length
-              }, undefined, false, undefined, this),
-              " tool",
-              pendingTools.length !== 1 ? "s" : "",
-              "..."
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/ui/composed/agno-chat/error-bar.tsx
-import { jsxDEV as jsxDEV41 } from "react/jsx-dev-runtime";
-function AgnoChatErrorBar({ className }) {
-  const { error, executionError } = useAgnoChatContext();
-  const message = error || executionError;
-  if (!message)
-    return null;
-  return /* @__PURE__ */ jsxDEV41("div", {
-    className: cn("px-4 py-2.5 bg-destructive/5 border-t border-destructive/20", className),
-    children: /* @__PURE__ */ jsxDEV41("p", {
-      className: "text-sm text-destructive max-w-3xl mx-auto",
-      children: message
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/ui/composed/AgnoChatInput.tsx
-import { CircleStop } from "lucide-react";
-import { jsxDEV as jsxDEV42 } from "react/jsx-dev-runtime";
-var DEFAULT_ACCEPTED_FILE_TYPES = "image/*,audio/*,.pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.ppt,.pptx,.md,.json,.xml";
-function dataUrlToBlob(dataUrl) {
-  const [header, base64] = dataUrl.split(",");
-  const mime = header.match(/:(.*?);/)?.[1] || "application/octet-stream";
-  const bytes = atob(base64);
-  const buf = new Uint8Array(bytes.length);
-  for (let i = 0;i < bytes.length; i++) {
-    buf[i] = bytes.charCodeAt(i);
-  }
-  return new Blob([buf], { type: mime });
-}
-function CancelButton({ onCancel }) {
-  return /* @__PURE__ */ jsxDEV42(Button, {
-    type: "button",
-    variant: "destructive",
-    size: "icon",
-    className: "h-8 w-8 rounded-lg",
-    onClick: onCancel,
-    "aria-label": "Stop",
-    children: /* @__PURE__ */ jsxDEV42(CircleStop, {
-      className: "size-4"
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-function SubmitButton({ disabled, status }) {
-  const { textInput } = usePromptInputController();
-  const hasText = textInput.value.trim().length > 0;
-  return /* @__PURE__ */ jsxDEV42(PromptInputSubmit, {
-    disabled: disabled || !hasText,
-    status
-  }, undefined, false, undefined, this);
-}
-function AttachmentHeader() {
-  const { files } = usePromptInputAttachments();
-  if (files.length === 0)
-    return null;
-  return /* @__PURE__ */ jsxDEV42(PromptInputHeader, {
-    children: /* @__PURE__ */ jsxDEV42(PromptInputAttachments, {
-      children: (attachment) => /* @__PURE__ */ jsxDEV42(PromptInputAttachment, {
+  return /* @__PURE__ */ jsxDEV36(PromptInputHeader, {
+    children: /* @__PURE__ */ jsxDEV36(PromptInputAttachments, {
+      children: (attachment) => /* @__PURE__ */ jsxDEV36(PromptInputAttachment, {
         data: attachment
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -3622,7 +3310,7 @@ function TranscribeAudioRecorder({
   labels
 }) {
   const { textInput } = usePromptInputController();
-  return /* @__PURE__ */ jsxDEV42(AudioRecorder, {
+  return /* @__PURE__ */ jsxDEV36(AudioRecorder, {
     mode: "transcribe",
     transcriptionEndpoint: endpoint,
     transcriptionHeaders: headers,
@@ -3643,22 +3331,19 @@ function AgnoChatInput({
   placeholder,
   className,
   fileUpload,
-  showAudioRecorder = false,
+  audio,
   showAttachments = true,
   status,
   isStreaming,
   onCancel,
   allowCancelRun = false,
   extraTools,
-  audioMode = "send",
-  transcriptionEndpoint,
-  transcriptionHeaders,
-  parseTranscriptionResponse,
-  onRequestPermission,
-  audioRecorderLabels,
   dropZoneContainerRef,
   dropZoneProps
 }) {
+  const resolvedAudio = normalizeAudio(audio);
+  const audioEnabled = resolvedAudio?.enabled ?? false;
+  const audioMode = resolvedAudio?.mode ?? "send";
   const handleSubmit = (message) => {
     const text = message.text?.trim() || "";
     const files = message.files || [];
@@ -3689,8 +3374,8 @@ function AgnoChatInput({
   };
   const computedStatus = status ?? (disabled ? "submitted" : undefined);
   const showCancelButton = allowCancelRun && isStreaming && onCancel;
-  return /* @__PURE__ */ jsxDEV42(PromptInputProvider, {
-    children: /* @__PURE__ */ jsxDEV42(PromptInput, {
+  return /* @__PURE__ */ jsxDEV36(PromptInputProvider, {
+    children: /* @__PURE__ */ jsxDEV36(PromptInput, {
       onSubmit: handleSubmit,
       accept: fileUpload?.accept ?? DEFAULT_ACCEPTED_FILE_TYPES,
       multiple: fileUpload?.multiple ?? true,
@@ -3700,52 +3385,52 @@ function AgnoChatInput({
       dragListenerTarget: dropZoneContainerRef,
       className: cn("w-full", className),
       children: [
-        /* @__PURE__ */ jsxDEV42(AttachmentHeader, {}, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV42(PromptInputBody, {
-          children: /* @__PURE__ */ jsxDEV42(PromptInputTextarea, {
+        /* @__PURE__ */ jsxDEV36(AttachmentHeader, {}, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV36(PromptInputBody, {
+          children: /* @__PURE__ */ jsxDEV36(PromptInputTextarea, {
             placeholder: placeholder || "Type your message... (Enter to send, Shift+Enter for new line)",
             disabled
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV42(PromptInputFooter, {
+        /* @__PURE__ */ jsxDEV36(PromptInputFooter, {
           children: [
-            /* @__PURE__ */ jsxDEV42(PromptInputTools, {
+            /* @__PURE__ */ jsxDEV36(PromptInputTools, {
               children: [
-                showAttachments && /* @__PURE__ */ jsxDEV42(PromptInputActionMenu, {
+                showAttachments && /* @__PURE__ */ jsxDEV36(PromptInputActionMenu, {
                   children: [
-                    /* @__PURE__ */ jsxDEV42(PromptInputActionMenuTrigger, {}, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV42(PromptInputActionMenuContent, {
-                      children: /* @__PURE__ */ jsxDEV42(PromptInputActionAddAttachments, {
+                    /* @__PURE__ */ jsxDEV36(PromptInputActionMenuTrigger, {}, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV36(PromptInputActionMenuContent, {
+                      children: /* @__PURE__ */ jsxDEV36(PromptInputActionAddAttachments, {
                         label: "Add files"
                       }, undefined, false, undefined, this)
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                showAudioRecorder && (audioMode === "transcribe" && transcriptionEndpoint ? /* @__PURE__ */ jsxDEV42(TranscribeAudioRecorder, {
-                  endpoint: transcriptionEndpoint,
-                  headers: transcriptionHeaders,
+                audioEnabled && (audioMode === "transcribe" && resolvedAudio?.endpoint ? /* @__PURE__ */ jsxDEV36(TranscribeAudioRecorder, {
+                  endpoint: resolvedAudio.endpoint,
+                  headers: resolvedAudio.headers,
                   disabled,
-                  parseResponse: parseTranscriptionResponse,
-                  onRequestPermission,
-                  labels: audioRecorderLabels
-                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV42(AudioRecorder, {
+                  parseResponse: resolvedAudio.parseResponse,
+                  onRequestPermission: resolvedAudio.requestPermission,
+                  labels: resolvedAudio.labels
+                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV36(AudioRecorder, {
                   onRecordingComplete: handleAudioRecording,
                   disabled,
-                  onRequestPermission,
-                  labels: audioRecorderLabels
+                  onRequestPermission: resolvedAudio?.requestPermission,
+                  labels: resolvedAudio?.labels
                 }, undefined, false, undefined, this)),
                 extraTools
               ]
             }, undefined, true, undefined, this),
-            showCancelButton ? /* @__PURE__ */ jsxDEV42(CancelButton, {
+            showCancelButton ? /* @__PURE__ */ jsxDEV36(CancelButton, {
               onCancel
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV42(SubmitButton, {
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV36(SubmitButton, {
               disabled,
               status: computedStatus
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        showAttachments && /* @__PURE__ */ jsxDEV42(PromptInputDropZone, {
+        showAttachments && /* @__PURE__ */ jsxDEV36(PromptInputDropZone, {
           ...dropZoneProps,
           container: dropZoneContainerRef
         }, undefined, false, undefined, this)
@@ -3753,6 +3438,437 @@ function AgnoChatInput({
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
+// src/ui/composed/agno-chat/agno-chat.tsx
+import { useCallback as useCallback7, useMemo as useMemo3, useRef as useRef6 } from "react";
+import { useAgnoChat, useAgnoToolExecution } from "@rodrigocoliveira/agno-react";
+
+// src/ui/composed/agno-chat/context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var AgnoChatContext = createContext3(null);
+function useAgnoChatContext() {
+  const ctx = useContext3(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/agno-chat.tsx
+import { jsxDEV as jsxDEV37 } from "react/jsx-dev-runtime";
+function AgnoChatRoot({
+  children,
+  toolHandlers = {},
+  autoExecuteTools = true,
+  className,
+  ...divProps
+}) {
+  const chat = useAgnoChat();
+  const toolExec = useAgnoToolExecution(toolHandlers, autoExecuteTools);
+  const containerRef = useRef6(null);
+  const sendRef = useRef6(chat.sendMessage);
+  sendRef.current = chat.sendMessage;
+  const handleSend = useCallback7(async (message) => {
+    try {
+      await sendRef.current(message);
+    } catch {}
+  }, []);
+  const {
+    messages,
+    sendMessage,
+    clearMessages,
+    cancelRun,
+    isStreaming,
+    isRefreshing,
+    isCancelling,
+    currentRunId,
+    error,
+    state
+  } = chat;
+  const {
+    isPaused,
+    isExecuting,
+    pendingTools,
+    executeAndContinue,
+    executeTools,
+    continueWithResults,
+    executionError
+  } = toolExec;
+  const contextValue = useMemo3(() => ({
+    messages,
+    sendMessage,
+    clearMessages,
+    cancelRun,
+    isStreaming,
+    isRefreshing,
+    isCancelling: isCancelling ?? false,
+    currentRunId,
+    error,
+    state,
+    isPaused,
+    isExecuting,
+    pendingTools,
+    executeAndContinue,
+    executeTools,
+    continueWithResults,
+    executionError,
+    handleSend,
+    inputDisabled: isStreaming || isPaused,
+    dropZoneContainerRef: containerRef
+  }), [
+    messages,
+    sendMessage,
+    clearMessages,
+    cancelRun,
+    isStreaming,
+    isRefreshing,
+    isCancelling,
+    currentRunId,
+    error,
+    state,
+    isPaused,
+    isExecuting,
+    pendingTools,
+    executeAndContinue,
+    executeTools,
+    continueWithResults,
+    executionError,
+    handleSend
+  ]);
+  return /* @__PURE__ */ jsxDEV37(AgnoChatContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxDEV37("div", {
+      ref: containerRef,
+      className: cn("relative h-full flex flex-col", className),
+      ...divProps,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/composed/agno-chat/messages.tsx
+import { useEffect as useEffect6, useRef as useRef7 } from "react";
+
+// src/ui/composed/agno-chat/suggested-prompts.tsx
+import { jsxDEV as jsxDEV38 } from "react/jsx-dev-runtime";
+function AgnoChatSuggestedPrompts({ className, prompts }) {
+  const { handleSend } = useAgnoChatContext();
+  if (prompts.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV38("div", {
+    className: cn("grid grid-cols-2 gap-2 w-full max-w-md", className),
+    children: prompts.map((prompt, idx) => /* @__PURE__ */ jsxDEV38("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__ */ jsxDEV38("span", {
+          className: "text-muted-foreground group-hover:text-primary transition-colors",
+          children: prompt.icon
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV38("span", {
+          className: "text-muted-foreground group-hover:text-foreground transition-colors text-xs leading-snug",
+          children: prompt.text
+        }, undefined, false, undefined, this)
+      ]
+    }, idx, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/composed/agno-chat/messages.tsx
+import { Bot as Bot2 } from "lucide-react";
+import { jsxDEV as jsxDEV39 } from "react/jsx-dev-runtime";
+function ScrollOnNewUserMessage({ messageCount }) {
+  const { scrollToBottom } = useStickToBottomContext2();
+  const prevCount = useRef7(messageCount);
+  useEffect6(() => {
+    if (messageCount > prevCount.current) {
+      scrollToBottom("smooth");
+    }
+    prevCount.current = messageCount;
+  }, [messageCount, scrollToBottom]);
+  return null;
+}
+var DEFAULT_PROMPTS = [
+  { text: "What can you help me with?" },
+  { text: "Explain how you work" }
+];
+function AgnoChatMessages({
+  className,
+  renderMessage,
+  avatars,
+  actions,
+  showReasoning,
+  showReferences,
+  showTimestamp,
+  showGenerativeUI,
+  showToolCalls,
+  showFilePreview,
+  showImageLightbox,
+  renderToolCall,
+  renderContent,
+  renderMedia,
+  formatTimestamp,
+  messageClassNames,
+  emptyState,
+  suggestedPrompts = DEFAULT_PROMPTS,
+  children,
+  showThinkingIndicator = true,
+  renderThinkingIndicator
+}) {
+  const { messages, isStreaming } = useAgnoChatContext();
+  const lastMessage = messages[messages.length - 1];
+  const isThinking = showThinkingIndicator && isStreaming && (!lastMessage || lastMessage.role !== "user") && !lastMessage?.content;
+  let lastAssistantIndex = -1;
+  for (let i = messages.length - 1;i >= 0; i--) {
+    if (messages[i].role !== "user") {
+      lastAssistantIndex = i;
+      break;
+    }
+  }
+  const messageItemProps = {
+    ...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 }
+  };
+  const resolvedEmptyState = children ?? emptyState ?? /* @__PURE__ */ jsxDEV39("div", {
+    className: "flex flex-col items-center gap-6",
+    children: [
+      /* @__PURE__ */ jsxDEV39("div", {
+        className: "relative",
+        children: [
+          /* @__PURE__ */ jsxDEV39("div", {
+            className: "h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center",
+            children: /* @__PURE__ */ jsxDEV39(Bot2, {
+              className: "h-8 w-8 text-primary"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV39("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__ */ jsxDEV39("span", {
+              className: "h-2 w-2 rounded-full bg-white animate-pulse"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV39("div", {
+        className: "space-y-2 text-center",
+        children: [
+          /* @__PURE__ */ jsxDEV39("h3", {
+            className: "text-xl font-semibold tracking-tight",
+            children: "Welcome to Agno Chat"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV39("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."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      suggestedPrompts.length > 0 && /* @__PURE__ */ jsxDEV39(AgnoChatSuggestedPrompts, {
+        prompts: suggestedPrompts
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+  return /* @__PURE__ */ jsxDEV39(Conversation, {
+    className: cn("relative flex-1 w-full", className),
+    children: [
+      /* @__PURE__ */ jsxDEV39(ScrollOnNewUserMessage, {
+        messageCount: messages.length
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV39(ConversationContent, {
+        className: "max-w-3xl mx-auto",
+        children: [
+          messages.length === 0 ? /* @__PURE__ */ jsxDEV39(ConversationEmptyState, {
+            children: resolvedEmptyState
+          }, undefined, false, undefined, this) : messages.map((message, index) => {
+            if (isThinking && index === messages.length - 1 && message === lastMessage)
+              return null;
+            return renderMessage ? renderMessage(message, index) : /* @__PURE__ */ jsxDEV39(AgnoMessageItem, {
+              message,
+              avatars,
+              actions,
+              isLastAssistantMessage: index === lastAssistantIndex,
+              ...messageItemProps
+            }, `msg-${index}-${message.created_at}`, false, undefined, this);
+          }),
+          isThinking && /* @__PURE__ */ jsxDEV39("div", {
+            className: "py-2",
+            children: renderThinkingIndicator ?? /* @__PURE__ */ jsxDEV39(StreamingIndicator, {
+              avatar: avatars?.assistant
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV39(ConversationScrollButton, {}, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/composed/agno-chat/empty-state.tsx
+import { jsxDEV as jsxDEV40 } from "react/jsx-dev-runtime";
+function AgnoChatEmptyState({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxDEV40("div", {
+    className: cn("flex flex-col items-center gap-6", className),
+    ...props,
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/composed/agno-chat/tool-status.tsx
+import { Loader2 as Loader22, Wrench } from "lucide-react";
+import { jsxDEV as jsxDEV41, Fragment as Fragment6 } from "react/jsx-dev-runtime";
+function AgnoChatToolStatus({ className }) {
+  const { isPaused, isExecuting, pendingTools } = useAgnoChatContext();
+  if (!isPaused && !isExecuting)
+    return null;
+  return /* @__PURE__ */ jsxDEV41("div", {
+    className: cn("px-4 py-2.5 border-t border-border bg-primary/5", className),
+    children: /* @__PURE__ */ jsxDEV41("div", {
+      className: "flex items-center gap-2.5 text-sm max-w-3xl mx-auto",
+      children: isExecuting ? /* @__PURE__ */ jsxDEV41(Fragment6, {
+        children: [
+          /* @__PURE__ */ jsxDEV41("div", {
+            className: "h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center",
+            children: /* @__PURE__ */ jsxDEV41(Loader22, {
+              className: "h-3 w-3 animate-spin text-primary"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV41("span", {
+            className: "text-muted-foreground",
+            children: [
+              "Executing",
+              " ",
+              /* @__PURE__ */ jsxDEV41("span", {
+                className: "font-medium text-foreground",
+                children: pendingTools.length
+              }, undefined, false, undefined, this),
+              " tool",
+              pendingTools.length !== 1 ? "s" : "",
+              "..."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV41(Fragment6, {
+        children: [
+          /* @__PURE__ */ jsxDEV41("div", {
+            className: "h-5 w-5 rounded-full bg-amber-500/10 flex items-center justify-center",
+            children: /* @__PURE__ */ jsxDEV41(Wrench, {
+              className: "h-3 w-3 text-amber-600 dark:text-amber-400"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV41("span", {
+            className: "text-muted-foreground",
+            children: [
+              "Preparing",
+              " ",
+              /* @__PURE__ */ jsxDEV41("span", {
+                className: "font-medium text-foreground",
+                children: pendingTools.length
+              }, undefined, false, undefined, this),
+              " tool",
+              pendingTools.length !== 1 ? "s" : "",
+              "..."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/composed/agno-chat/error-bar.tsx
+import { useState as useState9, useEffect as useEffect7, useRef as useRef8 } from "react";
+import { jsxDEV as jsxDEV42 } from "react/jsx-dev-runtime";
+function AgnoChatErrorBar({
+  className,
+  text,
+  icon,
+  dismissible = false,
+  timeout = 1e4,
+  children
+}) {
+  const { error, executionError } = useAgnoChatContext();
+  const [hidden, setHidden] = useState9(false);
+  const timerRef = useRef8(null);
+  const rawMessage = error || executionError;
+  useEffect7(() => {
+    if (!rawMessage)
+      return;
+    setHidden(false);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (timeout > 0) {
+      timerRef.current = setTimeout(() => {
+        setHidden(true);
+      }, timeout);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [rawMessage, timeout]);
+  if (!rawMessage || hidden)
+    return null;
+  const displayMessage = text ?? rawMessage;
+  const renderContent = () => {
+    if (children) {
+      return typeof children === "function" ? children(rawMessage) : children;
+    }
+    return /* @__PURE__ */ jsxDEV42("div", {
+      className: "flex items-center gap-2 max-w-3xl mx-auto",
+      children: [
+        icon && /* @__PURE__ */ jsxDEV42("span", {
+          className: "shrink-0",
+          children: icon
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV42("p", {
+          className: "text-sm text-destructive flex-1",
+          children: displayMessage
+        }, undefined, false, undefined, this),
+        dismissible && /* @__PURE__ */ jsxDEV42("button", {
+          type: "button",
+          onClick: () => setHidden(true),
+          className: "shrink-0 text-destructive/60 hover:text-destructive transition-colors",
+          "aria-label": "Dismiss error",
+          children: /* @__PURE__ */ jsxDEV42("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxDEV42("path", {
+                d: "M18 6 6 18"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV42("path", {
+                d: "m6 6 12 12"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  };
+  return /* @__PURE__ */ jsxDEV42("div", {
+    className: cn("px-4 py-2.5 bg-destructive/5 border-t border-destructive/20", className),
+    children: renderContent()
+  }, undefined, false, undefined, this);
+}
 
 // src/ui/composed/agno-chat/input.tsx
 import { jsxDEV as jsxDEV43 } from "react/jsx-dev-runtime";
@@ -3761,16 +3877,9 @@ function AgnoChatInputArea({
   children,
   placeholder,
   fileUpload,
-  showAudioRecorder = false,
+  audio,
   showAttachments,
   extraTools,
-  chatInputProps,
-  audioMode,
-  transcriptionEndpoint,
-  transcriptionHeaders,
-  parseTranscriptionResponse,
-  onRequestPermission,
-  audioRecorderLabels,
   allowCancelRun = false,
   dropZoneProps
 }) {
@@ -3780,23 +3889,16 @@ function AgnoChatInputArea({
     children: /* @__PURE__ */ jsxDEV43("div", {
       className: "mx-auto px-4 py-2",
       children: children ? children({ onSend: handleSend, disabled: inputDisabled, isStreaming, isPaused }) : /* @__PURE__ */ jsxDEV43(AgnoChatInput, {
-        ...chatInputProps,
         onSend: handleSend,
         disabled: inputDisabled,
         isStreaming,
         onCancel: cancelRun,
         allowCancelRun,
-        placeholder: placeholder ?? chatInputProps?.placeholder ?? "Message your agent...",
+        placeholder: placeholder ?? "Message your agent...",
         fileUpload,
-        showAudioRecorder,
+        audio,
         showAttachments,
         extraTools,
-        audioMode,
-        transcriptionEndpoint,
-        transcriptionHeaders,
-        parseTranscriptionResponse,
-        onRequestPermission,
-        audioRecorderLabels,
         dropZoneContainerRef,
         dropZoneProps
       }, undefined, false, undefined, this)
@@ -3813,74 +3915,6 @@ var AgnoChat = Object.assign(AgnoChatRoot, {
   ErrorBar: AgnoChatErrorBar,
   Input: AgnoChatInputArea
 });
-
-// src/ui/composed/AgnoChatInterface.tsx
-import { Bot as Bot3, Sparkles } from "lucide-react";
-import { jsxDEV as jsxDEV44 } from "react/jsx-dev-runtime";
-var DEFAULT_PROMPTS2 = [
-  { icon: /* @__PURE__ */ jsxDEV44(Sparkles, {
-    className: "h-3.5 w-3.5"
-  }, undefined, false, undefined, this), text: "What can you help me with?" },
-  { icon: /* @__PURE__ */ jsxDEV44(Bot3, {
-    className: "h-3.5 w-3.5"
-  }, undefined, false, undefined, this), text: "Explain how you work" }
-];
-function AgnoChatInterface({
-  className,
-  classNames,
-  renderMessage,
-  renderInput,
-  emptyState,
-  headerSlot,
-  inputToolbarSlot,
-  suggestedPrompts = DEFAULT_PROMPTS2,
-  toolHandlers = {},
-  autoExecuteTools = true,
-  placeholder,
-  userAvatar,
-  assistantAvatar,
-  fileUpload,
-  showAudioRecorder = true,
-  showAttachments = true,
-  messageItemProps,
-  chatInputProps,
-  dropZoneLabel
-}) {
-  return /* @__PURE__ */ jsxDEV44(AgnoChat, {
-    toolHandlers,
-    autoExecuteTools,
-    className: cn(classNames?.root, className),
-    children: [
-      headerSlot,
-      /* @__PURE__ */ jsxDEV44(AgnoChat.Messages, {
-        className: classNames?.messagesArea,
-        renderMessage,
-        userAvatar,
-        assistantAvatar,
-        messageItemProps,
-        emptyState,
-        suggestedPrompts
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV44(AgnoChat.ToolStatus, {
-        className: classNames?.toolStatusBar
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV44(AgnoChat.ErrorBar, {
-        className: classNames?.errorBar
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV44(AgnoChat.Input, {
-        className: classNames?.inputArea,
-        placeholder,
-        fileUpload,
-        showAudioRecorder,
-        showAttachments,
-        extraTools: inputToolbarSlot,
-        chatInputProps,
-        dropZoneProps: { className: classNames?.dropZone, label: dropZoneLabel },
-        children: renderInput ? ({ onSend, disabled }) => renderInput({ onSend, disabled }) : undefined
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
 export {
   useProviderAttachments,
   usePromptInputDropZone,
@@ -4029,7 +4063,6 @@ export {
   AgnoChatSuggestedPrompts,
   AgnoChatRoot,
   AgnoChatMessages,
-  AgnoChatInterface,
   AgnoChatInputArea,
   AgnoChatInput,
   AgnoChatErrorBar,
@@ -4041,4 +4074,4 @@ export {
   Accordion
 };
 
-//# debugId=2F56CC8E4E8AD83564756E2164756E21
+//# debugId=6E9B25001B68B11264756E2164756E21