@rodrigocoliveira/agno-react 2.0.0 → 2.1.0

package/dist/ui.js

@@ -66,7 +66,6 @@ __export(exports_ui, {
   ToolOutput: () => ToolOutput,
   ToolInput: () => ToolInput,
   ToolHeader: () => ToolHeader,
-  ToolGenerativeUI: () => ToolGenerativeUI,
   ToolDebugCard: () => ToolDebugCard,
   ToolContent: () => ToolContent,
   Tool: () => Tool,
@@ -118,9 +117,11 @@ __export(exports_ui, {
   PromptInputActionMenu: () => PromptInputActionMenu,
   PromptInputActionAddAttachments: () => PromptInputActionAddAttachments,
   PromptInput: () => PromptInput,
+  PieChart: () => PieChart,
   MessageContent: () => MessageContent,
   MessageAvatar: () => MessageAvatar,
   Message: () => Message,
+  LineChart: () => LineChart,
   InputGroupTextarea: () => InputGroupTextarea,
   InputGroupText: () => InputGroupText,
   InputGroupInput: () => InputGroupInput,
@@ -175,7 +176,15 @@ __export(exports_ui, {
   Collapsible: () => Collapsible,
   CodeBlockCopyButton: () => CodeBlockCopyButton,
   CodeBlock: () => CodeBlock,
+  ChartTooltipContent: () => ChartTooltipContent,
+  ChartTooltip: () => ChartTooltip,
+  ChartStyle: () => ChartStyle,
+  ChartLegendContent: () => ChartLegendContent,
+  ChartLegend: () => ChartLegend,
+  ChartContainer: () => ChartContainer,
+  CardGrid: () => CardGrid,
   Button: () => Button,
+  BarChart: () => BarChart,
   Badge: () => Badge,
   AvatarImage: () => AvatarImage,
   AvatarFallback: () => AvatarFallback,
@@ -189,6 +198,7 @@ __export(exports_ui, {
   ArtifactActions: () => ArtifactActions,
   ArtifactAction: () => ArtifactAction,
   Artifact: () => Artifact,
+  AreaChart: () => AreaChart,
   AgnoMessageTools: () => AgnoMessageTools,
   AgnoMessageReferences: () => AgnoMessageReferences,
   AgnoMessageReasoning: () => AgnoMessageReasoning,
@@ -2886,7 +2896,7 @@ var PromptInputCommandSeparator = ({ className, ...props }) => /* @__PURE__ */ j
   ...props
 });
 // src/ui/composed/agno-message/message.tsx
-var import_react20 = require("react");
+var import_react16 = require("react");
 var import_lucide_react23 = require("lucide-react");
 
 // src/ui/composed/agno-message/context.ts
@@ -3209,311 +3219,25 @@ function useAgnoChatContext() {
   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 jsx_runtime37 = 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, {
+  return /* @__PURE__ */ jsx_runtime37.jsxs(Tool, {
     defaultOpen,
     children: [
-      /* @__PURE__ */ jsx_runtime40.jsx(ToolHeader, {
+      /* @__PURE__ */ jsx_runtime37.jsx(ToolHeader, {
         title: tool.tool_name,
         type: "tool-use",
         state: getToolState(tool)
       }),
-      /* @__PURE__ */ jsx_runtime40.jsxs(ToolContent, {
+      /* @__PURE__ */ jsx_runtime37.jsxs(ToolContent, {
         children: [
-          /* @__PURE__ */ jsx_runtime40.jsx(ToolInput, {
+          /* @__PURE__ */ jsx_runtime37.jsx(ToolInput, {
             input: tool.tool_args
           }),
-          output ? /* @__PURE__ */ jsx_runtime40.jsx(ToolOutput, {
+          output ? /* @__PURE__ */ jsx_runtime37.jsx(ToolOutput, {
             output,
             errorText: tool.tool_call_error ? "Tool execution failed" : undefined
           }) : null
@@ -3522,47 +3246,26 @@ function ToolDebugCard({ tool, defaultOpen }) {
     ]
   });
 }
-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");
+var jsx_runtime38 = 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", {
+  return /* @__PURE__ */ jsx_runtime38.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 defaultRender = () => isDebug ? /* @__PURE__ */ jsx_runtime38.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", {
+      return /* @__PURE__ */ jsx_runtime38.jsx("div", {
         children: node
       }, tool.tool_call_id || idx);
     })
@@ -3570,14 +3273,14 @@ function AgnoMessageTools({ renderTool: renderToolProp } = {}) {
 }
 
 // src/ui/composed/agno-message/content.tsx
-var jsx_runtime42 = require("react/jsx-runtime");
+var jsx_runtime39 = require("react/jsx-runtime");
 function AgnoMessageContent() {
   const { message } = useAgnoMessageContext();
   if (!message.content)
     return null;
-  return /* @__PURE__ */ jsx_runtime42.jsx("div", {
+  return /* @__PURE__ */ jsx_runtime39.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: /* @__PURE__ */ jsx_runtime39.jsx(Response, {
       children: message.content
     })
   });
@@ -3585,19 +3288,19 @@ function AgnoMessageContent() {
 
 // src/ui/composed/agno-message/references.tsx
 var import_lucide_react21 = require("lucide-react");
-var jsx_runtime43 = require("react/jsx-runtime");
+var jsx_runtime40 = 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", {
+  return /* @__PURE__ */ jsx_runtime40.jsxs("div", {
     className: cn("space-y-2 pt-1", classNames?.assistant?.references),
     children: [
-      /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+      /* @__PURE__ */ jsx_runtime40.jsxs("div", {
         className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
         children: [
-          /* @__PURE__ */ jsx_runtime43.jsx(import_lucide_react21.FileText, {
+          /* @__PURE__ */ jsx_runtime40.jsx(import_lucide_react21.FileText, {
             className: "h-3.5 w-3.5"
           }),
           "References (",
@@ -3605,22 +3308,22 @@ function AgnoMessageReferences() {
           ")"
         ]
       }),
-      /* @__PURE__ */ jsx_runtime43.jsx("div", {
+      /* @__PURE__ */ jsx_runtime40.jsx("div", {
         className: "space-y-2",
-        children: references.map((refData, idx) => /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+        children: references.map((refData, idx) => /* @__PURE__ */ jsx_runtime40.jsxs("div", {
           className: "text-xs space-y-1.5",
           children: [
-            refData.query && /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+            refData.query && /* @__PURE__ */ jsx_runtime40.jsxs("div", {
               className: "font-medium text-foreground",
               children: [
                 "Query: ",
                 refData.query
               ]
             }),
-            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsx_runtime40.jsxs("div", {
               className: "bg-muted/50 border border-border p-2.5 rounded-lg",
               children: [
-                /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+                /* @__PURE__ */ jsx_runtime40.jsxs("div", {
                   className: "italic text-muted-foreground mb-1",
                   children: [
                     '"',
@@ -3628,7 +3331,7 @@ function AgnoMessageReferences() {
                     '"'
                   ]
                 }),
-                /* @__PURE__ */ jsx_runtime43.jsxs("div", {
+                /* @__PURE__ */ jsx_runtime40.jsxs("div", {
                   className: "text-muted-foreground/70",
                   children: [
                     "Source: ",
@@ -3651,7 +3354,7 @@ function AgnoMessageReferences() {
 
 // src/ui/composed/agno-message/footer.tsx
 var import_lucide_react22 = require("lucide-react");
-var jsx_runtime44 = require("react/jsx-runtime");
+var jsx_runtime41 = require("react/jsx-runtime");
 function AgnoMessageFooter({ showTimestamp = true } = {}) {
   const { message, classNames, actions, isLastAssistantMessage, formatTimestamp } = useAgnoMessageContext();
   const hasError = message.streamingError;
@@ -3659,7 +3362,7 @@ function AgnoMessageFooter({ showTimestamp = true } = {}) {
   const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
   if (!actions?.assistant && !showTimestamp && !hasError)
     return null;
-  return /* @__PURE__ */ jsx_runtime44.jsxs("div", {
+  return /* @__PURE__ */ jsx_runtime41.jsxs("div", {
     className: "flex items-center gap-2 pt-1",
     children: [
       actions?.assistant && (() => {
@@ -3667,21 +3370,21 @@ function AgnoMessageFooter({ showTimestamp = true } = {}) {
         if (visibility === "last-assistant" && !isLastAssistantMessage)
           return null;
         const useHover = visibility === "hover" || visibility === "hover-last-visible" && !isLastAssistantMessage;
-        return /* @__PURE__ */ jsx_runtime44.jsx("div", {
+        return /* @__PURE__ */ jsx_runtime41.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", {
+      hasError && /* @__PURE__ */ jsx_runtime41.jsxs("span", {
         className: "flex items-center gap-1 text-[11px] text-destructive",
         children: [
-          /* @__PURE__ */ jsx_runtime44.jsx(import_lucide_react22.AlertCircle, {
+          /* @__PURE__ */ jsx_runtime41.jsx(import_lucide_react22.AlertCircle, {
             className: "h-3 w-3"
           }),
           "Error"
         ]
       }),
-      showTimestamp && /* @__PURE__ */ jsx_runtime44.jsx(SmartTimestamp, {
+      showTimestamp && /* @__PURE__ */ jsx_runtime41.jsx(SmartTimestamp, {
         date: new Date(message.created_at * 1000),
         formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
         className: "text-[11px] text-muted-foreground"
@@ -3691,16 +3394,16 @@ function AgnoMessageFooter({ showTimestamp = true } = {}) {
 }
 
 // src/ui/composed/agno-message/message.tsx
-var jsx_runtime45 = require("react/jsx-runtime");
+var jsx_runtime42 = require("react/jsx-runtime");
 function DefaultAssistantComposition({ showTimestamp }) {
-  return /* @__PURE__ */ jsx_runtime45.jsxs(jsx_runtime45.Fragment, {
+  return /* @__PURE__ */ jsx_runtime42.jsxs(jsx_runtime42.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, {
+      /* @__PURE__ */ jsx_runtime42.jsx(AgnoMessageReasoning, {}),
+      /* @__PURE__ */ jsx_runtime42.jsx(AgnoMessageMedia, {}),
+      /* @__PURE__ */ jsx_runtime42.jsx(AgnoMessageTools, {}),
+      /* @__PURE__ */ jsx_runtime42.jsx(AgnoMessageContent, {}),
+      /* @__PURE__ */ jsx_runtime42.jsx(AgnoMessageReferences, {}),
+      /* @__PURE__ */ jsx_runtime42.jsx(AgnoMessageFooter, {
         showTimestamp
       })
     ]
@@ -3722,10 +3425,10 @@ function AgnoMessage({
 }) {
   const isUser = message.role === "user";
   const hasError = message.streamingError;
-  const [preview, setPreview] = import_react20.useState(null);
+  const [preview, setPreview] = import_react16.useState(null);
   const isCustomTimestamp = !!formatTimestamp;
   const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
-  const ctx = import_react20.useMemo(() => ({
+  const ctx = import_react16.useMemo(() => ({
     message,
     isLastAssistantMessage,
     classNames,
@@ -3757,12 +3460,12 @@ function AgnoMessage({
     renderTool
   ]);
   const closePreview = () => setPreview(null);
-  return /* @__PURE__ */ jsx_runtime45.jsx(AgnoMessageContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime42.jsx(AgnoMessageContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+    children: /* @__PURE__ */ jsx_runtime42.jsxs("div", {
       className: cn("py-5 first:pt-2", isUser ? "flex justify-end" : "", classNames?.root, className),
       children: [
-        isUser ? /* @__PURE__ */ jsx_runtime45.jsx(UserMessageLayout, {
+        isUser ? /* @__PURE__ */ jsx_runtime42.jsx(UserMessageLayout, {
           message,
           classNames,
           avatars,
@@ -3775,19 +3478,19 @@ function AgnoMessage({
           openImageLightbox: ctx.openImageLightbox,
           openFilePreview: ctx.openFilePreview,
           hasError
-        }) : /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+        }) : /* @__PURE__ */ jsx_runtime42.jsxs("div", {
           className: "flex items-start gap-3 group/message",
           children: [
             avatars?.assistant,
-            /* @__PURE__ */ jsx_runtime45.jsx("div", {
+            /* @__PURE__ */ jsx_runtime42.jsx("div", {
               className: cn("flex-1 min-w-0 space-y-3", classNames?.assistant?.container),
-              children: children ?? /* @__PURE__ */ jsx_runtime45.jsx(DefaultAssistantComposition, {
+              children: children ?? /* @__PURE__ */ jsx_runtime42.jsx(DefaultAssistantComposition, {
                 showTimestamp
               })
             })
           ]
         }),
-        preview?.type === "image" && /* @__PURE__ */ jsx_runtime45.jsx(ImageLightbox, {
+        preview?.type === "image" && /* @__PURE__ */ jsx_runtime42.jsx(ImageLightbox, {
           open: true,
           onOpenChange: (open) => {
             if (!open)
@@ -3796,7 +3499,7 @@ function AgnoMessage({
           images: preview.images,
           initialIndex: preview.initialIndex
         }),
-        preview?.type === "file" && /* @__PURE__ */ jsx_runtime45.jsx(FilePreviewModal, {
+        preview?.type === "file" && /* @__PURE__ */ jsx_runtime42.jsx(FilePreviewModal, {
           open: true,
           onOpenChange: (open) => {
             if (!open)
@@ -3828,42 +3531,42 @@ function UserMessageLayout({
   openFilePreview,
   hasError
 }) {
-  return /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+  return /* @__PURE__ */ jsx_runtime42.jsxs("div", {
     className: "flex items-start gap-2.5 max-w-[80%] flex-row-reverse",
     children: [
       avatars?.user,
-      /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+      /* @__PURE__ */ jsx_runtime42.jsxs("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__ */ jsx_runtime45.jsxs("div", {
+          (message.images && message.images.length > 0 || message.audio && message.audio.length > 0 || message.files && message.files.length > 0) && /* @__PURE__ */ jsx_runtime42.jsxs("div", {
             className: "flex flex-wrap gap-2 justify-end",
             children: [
-              message.images?.map((img, idx) => /* @__PURE__ */ jsx_runtime45.jsx(FilePreviewCard, {
+              message.images?.map((img, idx) => /* @__PURE__ */ jsx_runtime42.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", {
+              message.audio?.map((audio, idx) => /* @__PURE__ */ jsx_runtime42.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_runtime45.jsx(import_lucide_react23.Music, {
+                  /* @__PURE__ */ jsx_runtime42.jsx(import_lucide_react23.Music, {
                     className: "h-3.5 w-3.5 text-muted-foreground"
                   }),
-                  /* @__PURE__ */ jsx_runtime45.jsx("span", {
+                  /* @__PURE__ */ jsx_runtime42.jsx("span", {
                     className: "truncate max-w-[150px]",
                     children: audio.id || `Audio ${idx + 1}`
                   })
                 ]
               }, `audio-${idx}`)),
-              message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime45.jsx(FilePreviewCard, {
+              message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime42.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", {
+              }, `file-${idx}`) : /* @__PURE__ */ jsx_runtime42.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_runtime45.jsx(import_lucide_react23.FileIcon, {
+                  /* @__PURE__ */ jsx_runtime42.jsx(import_lucide_react23.FileIcon, {
                     className: "h-3.5 w-3.5 text-muted-foreground"
                   }),
-                  /* @__PURE__ */ jsx_runtime45.jsx("span", {
+                  /* @__PURE__ */ jsx_runtime42.jsx("span", {
                     className: "truncate max-w-[150px]",
                     children: file.name
                   })
@@ -3871,26 +3574,26 @@ function UserMessageLayout({
               }, `file-${idx}`))
             ]
           }),
-          message.content && /* @__PURE__ */ jsx_runtime45.jsx("div", {
+          message.content && /* @__PURE__ */ jsx_runtime42.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", {
+            children: /* @__PURE__ */ jsx_runtime42.jsx("p", {
               className: "text-sm whitespace-pre-wrap",
               children: message.content
             })
           }),
-          (showTimestamp || actions?.user) && /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+          (showTimestamp || actions?.user) && /* @__PURE__ */ jsx_runtime42.jsxs("div", {
             className: "flex items-center justify-end gap-1.5 px-1",
             children: [
-              actions?.user && /* @__PURE__ */ jsx_runtime45.jsx("div", {
+              actions?.user && /* @__PURE__ */ jsx_runtime42.jsx("div", {
                 className: "flex items-center gap-1",
                 children: actions.user(message)
               }),
-              /* @__PURE__ */ jsx_runtime45.jsx(SmartTimestamp, {
+              /* @__PURE__ */ jsx_runtime42.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, {
+              hasError && /* @__PURE__ */ jsx_runtime42.jsx(import_lucide_react23.AlertCircle, {
                 className: "h-3 w-3 text-destructive"
               })
             ]
@@ -3902,7 +3605,7 @@ function UserMessageLayout({
 }
 
 // src/ui/composed/AgnoMessageItem.tsx
-var jsx_runtime46 = require("react/jsx-runtime");
+var jsx_runtime43 = require("react/jsx-runtime");
 function AgnoMessageItem({
   message,
   className,
@@ -3918,7 +3621,7 @@ function AgnoMessageItem({
   formatTimestamp,
   renderTool
 }) {
-  return /* @__PURE__ */ jsx_runtime46.jsxs(AgnoMessage, {
+  return /* @__PURE__ */ jsx_runtime43.jsxs(AgnoMessage, {
     message,
     className,
     classNames,
@@ -3931,12 +3634,12 @@ function AgnoMessageItem({
     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, {
+      showReasoning && /* @__PURE__ */ jsx_runtime43.jsx(AgnoMessage.Reasoning, {}),
+      /* @__PURE__ */ jsx_runtime43.jsx(AgnoMessage.Media, {}),
+      /* @__PURE__ */ jsx_runtime43.jsx(AgnoMessage.Tools, {}),
+      /* @__PURE__ */ jsx_runtime43.jsx(AgnoMessage.Content, {}),
+      showReferences && /* @__PURE__ */ jsx_runtime43.jsx(AgnoMessage.References, {}),
+      /* @__PURE__ */ jsx_runtime43.jsx(AgnoMessage.Footer, {
         showTimestamp
       })
     ]
@@ -3944,7 +3647,7 @@ function AgnoMessageItem({
 }
 // src/ui/composed/AgnoChatInput.tsx
 var import_lucide_react24 = require("lucide-react");
-var jsx_runtime47 = require("react/jsx-runtime");
+var jsx_runtime44 = 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)
@@ -3964,14 +3667,14 @@ function dataUrlToBlob(dataUrl) {
   return new Blob([buf], { type: mime });
 }
 function CancelButton({ onCancel }) {
-  return /* @__PURE__ */ jsx_runtime47.jsx(Button, {
+  return /* @__PURE__ */ jsx_runtime44.jsx(Button, {
     type: "button",
     variant: "destructive",
     size: "icon",
     className: "h-8 w-8 rounded-lg",
     onClick: onCancel,
     "aria-label": "Stop",
-    children: /* @__PURE__ */ jsx_runtime47.jsx(import_lucide_react24.CircleStop, {
+    children: /* @__PURE__ */ jsx_runtime44.jsx(import_lucide_react24.CircleStop, {
       className: "size-4"
     })
   });
@@ -3979,7 +3682,7 @@ function CancelButton({ onCancel }) {
 function SubmitButton({ disabled, status }) {
   const { textInput } = usePromptInputController();
   const hasText = textInput.value.trim().length > 0;
-  return /* @__PURE__ */ jsx_runtime47.jsx(PromptInputSubmit, {
+  return /* @__PURE__ */ jsx_runtime44.jsx(PromptInputSubmit, {
     disabled: disabled || !hasText,
     status
   });
@@ -3988,9 +3691,9 @@ function AttachmentHeader() {
   const { files } = usePromptInputAttachments();
   if (files.length === 0)
     return null;
-  return /* @__PURE__ */ jsx_runtime47.jsx(PromptInputHeader, {
-    children: /* @__PURE__ */ jsx_runtime47.jsx(PromptInputAttachments, {
-      children: (attachment) => /* @__PURE__ */ jsx_runtime47.jsx(PromptInputAttachment, {
+  return /* @__PURE__ */ jsx_runtime44.jsx(PromptInputHeader, {
+    children: /* @__PURE__ */ jsx_runtime44.jsx(PromptInputAttachments, {
+      children: (attachment) => /* @__PURE__ */ jsx_runtime44.jsx(PromptInputAttachment, {
         data: attachment
       })
     })
@@ -4005,7 +3708,7 @@ function TranscribeAudioRecorder({
   labels
 }) {
   const { textInput } = usePromptInputController();
-  return /* @__PURE__ */ jsx_runtime47.jsx(AudioRecorder, {
+  return /* @__PURE__ */ jsx_runtime44.jsx(AudioRecorder, {
     mode: "transcribe",
     transcriptionEndpoint: endpoint,
     transcriptionHeaders: headers,
@@ -4069,8 +3772,8 @@ function AgnoChatInput({
   };
   const computedStatus = status ?? (disabled ? "submitted" : undefined);
   const showCancelButton = allowCancelRun && isStreaming && onCancel;
-  return /* @__PURE__ */ jsx_runtime47.jsx(PromptInputProvider, {
-    children: /* @__PURE__ */ jsx_runtime47.jsxs(PromptInput, {
+  return /* @__PURE__ */ jsx_runtime44.jsx(PromptInputProvider, {
+    children: /* @__PURE__ */ jsx_runtime44.jsxs(PromptInput, {
       onSubmit: handleSubmit,
       accept: fileUpload?.accept ?? DEFAULT_ACCEPTED_FILE_TYPES,
       multiple: fileUpload?.multiple ?? true,
@@ -4080,35 +3783,35 @@ function AgnoChatInput({
       dragListenerTarget: dropZoneContainerRef,
       className: cn("w-full", className),
       children: [
-        /* @__PURE__ */ jsx_runtime47.jsx(AttachmentHeader, {}),
-        /* @__PURE__ */ jsx_runtime47.jsx(PromptInputBody, {
-          children: /* @__PURE__ */ jsx_runtime47.jsx(PromptInputTextarea, {
+        /* @__PURE__ */ jsx_runtime44.jsx(AttachmentHeader, {}),
+        /* @__PURE__ */ jsx_runtime44.jsx(PromptInputBody, {
+          children: /* @__PURE__ */ jsx_runtime44.jsx(PromptInputTextarea, {
             placeholder: placeholder || "Type your message... (Enter to send, Shift+Enter for new line)",
             disabled
           })
         }),
-        /* @__PURE__ */ jsx_runtime47.jsxs(PromptInputFooter, {
+        /* @__PURE__ */ jsx_runtime44.jsxs(PromptInputFooter, {
           children: [
-            /* @__PURE__ */ jsx_runtime47.jsxs(PromptInputTools, {
+            /* @__PURE__ */ jsx_runtime44.jsxs(PromptInputTools, {
               children: [
-                showAttachments && /* @__PURE__ */ jsx_runtime47.jsxs(PromptInputActionMenu, {
+                showAttachments && /* @__PURE__ */ jsx_runtime44.jsxs(PromptInputActionMenu, {
                   children: [
-                    /* @__PURE__ */ jsx_runtime47.jsx(PromptInputActionMenuTrigger, {}),
-                    /* @__PURE__ */ jsx_runtime47.jsx(PromptInputActionMenuContent, {
-                      children: /* @__PURE__ */ jsx_runtime47.jsx(PromptInputActionAddAttachments, {
+                    /* @__PURE__ */ jsx_runtime44.jsx(PromptInputActionMenuTrigger, {}),
+                    /* @__PURE__ */ jsx_runtime44.jsx(PromptInputActionMenuContent, {
+                      children: /* @__PURE__ */ jsx_runtime44.jsx(PromptInputActionAddAttachments, {
                         label: "Add files"
                       })
                     })
                   ]
                 }),
-                audioEnabled && (audioMode === "transcribe" && resolvedAudio?.endpoint ? /* @__PURE__ */ jsx_runtime47.jsx(TranscribeAudioRecorder, {
+                audioEnabled && (audioMode === "transcribe" && resolvedAudio?.endpoint ? /* @__PURE__ */ jsx_runtime44.jsx(TranscribeAudioRecorder, {
                   endpoint: resolvedAudio.endpoint,
                   headers: resolvedAudio.headers,
                   disabled,
                   parseResponse: resolvedAudio.parseResponse,
                   onRequestPermission: resolvedAudio.requestPermission,
                   labels: resolvedAudio.labels
-                }) : /* @__PURE__ */ jsx_runtime47.jsx(AudioRecorder, {
+                }) : /* @__PURE__ */ jsx_runtime44.jsx(AudioRecorder, {
                   onRecordingComplete: handleAudioRecording,
                   disabled,
                   onRequestPermission: resolvedAudio?.requestPermission,
@@ -4117,15 +3820,15 @@ function AgnoChatInput({
                 extraTools
               ]
             }),
-            showCancelButton ? /* @__PURE__ */ jsx_runtime47.jsx(CancelButton, {
+            showCancelButton ? /* @__PURE__ */ jsx_runtime44.jsx(CancelButton, {
               onCancel
-            }) : /* @__PURE__ */ jsx_runtime47.jsx(SubmitButton, {
+            }) : /* @__PURE__ */ jsx_runtime44.jsx(SubmitButton, {
               disabled,
               status: computedStatus
             })
           ]
         }),
-        showAttachments && /* @__PURE__ */ jsx_runtime47.jsx(PromptInputDropZone, {
+        showAttachments && /* @__PURE__ */ jsx_runtime44.jsx(PromptInputDropZone, {
           ...dropZoneProps,
           container: dropZoneContainerRef
         })
@@ -4145,8 +3848,467 @@ function byToolName(map, fallback) {
     return entry(tool, args);
   };
 }
+// src/ui/composed/generative-components/charts.tsx
+var import_recharts = require("recharts");
+
+// src/ui/components/chart.tsx
+var React11 = __toESM(require("react"));
+var RechartsPrimitive = __toESM(require("recharts"));
+var jsx_runtime45 = require("react/jsx-runtime");
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React11.createContext(null);
+function useChart() {
+  const context = React11.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+var ChartContainer = React11.forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React11.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx_runtime45.jsx(ChartContext.Provider, {
+    value: { config },
+    children: /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+      "data-chart": chartId,
+      ref,
+      className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx_runtime45.jsx(ChartStyle, {
+          id: chartId,
+          config
+        }),
+        /* @__PURE__ */ jsx_runtime45.jsx(RechartsPrimitive.ResponsiveContainer, {
+          children
+        })
+      ]
+    })
+  });
+});
+ChartContainer.displayName = "Chart";
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(([, config2]) => config2.theme || config2.color);
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx_runtime45.jsx("style", {
+    dangerouslySetInnerHTML: {
+      __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+        const color = itemConfig.theme?.[theme] || itemConfig.color;
+        return color ? `  --color-${key}: ${color};` : null;
+      }).join(`
+`)}
+}
+`).join(`
+`)
+    }
+  });
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+var ChartTooltipContent = React11.forwardRef(({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}, ref) => {
+  const { config } = useChart();
+  const tooltipLabel = React11.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx_runtime45.jsx("div", {
+        className: cn("font-medium", labelClassName),
+        children: labelFormatter(value, payload)
+      });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx_runtime45.jsx("div", {
+      className: cn("font-medium", labelClassName),
+      children: value
+    });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+    ref,
+    className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
+    children: [
+      !nestLabel ? tooltipLabel : null,
+      /* @__PURE__ */ jsx_runtime45.jsx("div", {
+        className: "grid gap-1.5",
+        children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+          return /* @__PURE__ */ jsx_runtime45.jsx("div", {
+            className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+            children: formatter && item?.value !== undefined && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsx_runtime45.jsxs(jsx_runtime45.Fragment, {
+              children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx_runtime45.jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx_runtime45.jsx("div", {
+                  className: cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                    "h-2.5 w-2.5": indicator === "dot",
+                    "w-1": indicator === "line",
+                    "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                    "my-0.5": nestLabel && indicator === "dashed"
+                  }),
+                  style: {
+                    "--color-bg": indicatorColor,
+                    "--color-border": indicatorColor
+                  }
+                }),
+                /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+                  className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+                  children: [
+                    /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+                      className: "grid gap-1.5",
+                      children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx_runtime45.jsx("span", {
+                          className: "text-muted-foreground",
+                          children: itemConfig?.label || item.name
+                        })
+                      ]
+                    }),
+                    item.value && /* @__PURE__ */ jsx_runtime45.jsx("span", {
+                      className: "font-mono font-medium tabular-nums text-foreground",
+                      children: item.value.toLocaleString()
+                    })
+                  ]
+                })
+              ]
+            })
+          }, item.dataKey);
+        })
+      })
+    ]
+  });
+});
+ChartTooltipContent.displayName = "ChartTooltip";
+var ChartLegend = RechartsPrimitive.Legend;
+var ChartLegendContent = React11.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx_runtime45.jsx("div", {
+    ref,
+    className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+    children: payload.filter((item) => item.type !== "none").map((item) => {
+      const key = `${nameKey || item.dataKey || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      return /* @__PURE__ */ jsx_runtime45.jsxs("div", {
+        className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+        children: [
+          itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx_runtime45.jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx_runtime45.jsx("div", {
+            className: "h-2 w-2 shrink-0 rounded-[2px]",
+            style: {
+              backgroundColor: item.color
+            }
+          }),
+          itemConfig?.label
+        ]
+      }, item.value);
+    })
+  });
+});
+ChartLegendContent.displayName = "ChartLegend";
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : undefined;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+// src/ui/composed/generative-components/charts.tsx
+var jsx_runtime46 = require("react/jsx-runtime");
+var DEFAULT_COLORS = [
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))"
+];
+function generateChartConfig(series = []) {
+  const config = {};
+  series.forEach((item, index) => {
+    config[item.key] = {
+      label: item.label || item.key,
+      color: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]
+    };
+  });
+  return config;
+}
+function EmptyState({ message = "No data available" }) {
+  return /* @__PURE__ */ jsx_runtime46.jsx("div", {
+    className: "flex items-center justify-center h-[350px] border rounded-md bg-muted/10",
+    children: /* @__PURE__ */ jsx_runtime46.jsx("p", {
+      className: "text-sm text-muted-foreground",
+      children: message
+    })
+  });
+}
+function BarChart(props) {
+  const { data, xKey, bars = [], showLegend = true, showGrid = true, height = 350 } = props;
+  if (!data || data.length === 0)
+    return /* @__PURE__ */ jsx_runtime46.jsx(EmptyState, {});
+  const config = generateChartConfig(bars);
+  return /* @__PURE__ */ jsx_runtime46.jsx(ChartContainer, {
+    config,
+    className: "h-[350px]",
+    children: /* @__PURE__ */ jsx_runtime46.jsxs(import_recharts.BarChart, {
+      data,
+      height,
+      children: [
+        showGrid && /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.CartesianGrid, {
+          strokeDasharray: "3 3"
+        }),
+        /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.XAxis, {
+          dataKey: xKey
+        }),
+        /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.YAxis, {}),
+        /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltip, {
+          content: /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltipContent, {})
+        }),
+        showLegend && /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Legend, {}),
+        bars.map((bar) => /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Bar, {
+          dataKey: bar.key,
+          fill: bar.color || `var(--color-${bar.key})`,
+          radius: [4, 4, 0, 0]
+        }, bar.key))
+      ]
+    })
+  });
+}
+function LineChart(props) {
+  const { data, xKey, lines = [], showLegend = true, showGrid = true, height = 350 } = props;
+  if (!data || data.length === 0)
+    return /* @__PURE__ */ jsx_runtime46.jsx(EmptyState, {});
+  const config = generateChartConfig(lines);
+  return /* @__PURE__ */ jsx_runtime46.jsx(ChartContainer, {
+    config,
+    className: "h-[350px]",
+    children: /* @__PURE__ */ jsx_runtime46.jsxs(import_recharts.LineChart, {
+      data,
+      height,
+      children: [
+        showGrid && /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.CartesianGrid, {
+          strokeDasharray: "3 3"
+        }),
+        /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.XAxis, {
+          dataKey: xKey
+        }),
+        /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.YAxis, {}),
+        /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltip, {
+          content: /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltipContent, {})
+        }),
+        showLegend && /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Legend, {}),
+        lines.map((line) => /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Line, {
+          type: "monotone",
+          dataKey: line.key,
+          stroke: line.color || `var(--color-${line.key})`,
+          strokeWidth: 2,
+          dot: { r: 4 }
+        }, line.key))
+      ]
+    })
+  });
+}
+function AreaChart(props) {
+  const { data, xKey, areas = [], showLegend = true, showGrid = true, height = 350 } = props;
+  if (!data || data.length === 0)
+    return /* @__PURE__ */ jsx_runtime46.jsx(EmptyState, {});
+  const config = generateChartConfig(areas);
+  return /* @__PURE__ */ jsx_runtime46.jsx(ChartContainer, {
+    config,
+    className: "h-[350px]",
+    children: /* @__PURE__ */ jsx_runtime46.jsxs(import_recharts.AreaChart, {
+      data,
+      height,
+      children: [
+        showGrid && /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.CartesianGrid, {
+          strokeDasharray: "3 3"
+        }),
+        /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.XAxis, {
+          dataKey: xKey
+        }),
+        /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.YAxis, {}),
+        /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltip, {
+          content: /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltipContent, {})
+        }),
+        showLegend && /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Legend, {}),
+        areas.map((area) => /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Area, {
+          type: "monotone",
+          dataKey: area.key,
+          stroke: area.color || `var(--color-${area.key})`,
+          fill: area.color || `var(--color-${area.key})`,
+          fillOpacity: 0.6
+        }, area.key))
+      ]
+    })
+  });
+}
+function PieChart(props) {
+  const { data, pie, showLegend = true, height = 350 } = props;
+  if (!data || data.length === 0 || !pie)
+    return /* @__PURE__ */ jsx_runtime46.jsx(EmptyState, {});
+  const nameKey = pie.nameKey || "name";
+  const config = generateChartConfig(data.map((item) => ({
+    key: item[nameKey],
+    label: item[nameKey]
+  })));
+  return /* @__PURE__ */ jsx_runtime46.jsx(ChartContainer, {
+    config,
+    className: "h-[350px]",
+    children: /* @__PURE__ */ jsx_runtime46.jsxs(import_recharts.PieChart, {
+      height,
+      children: [
+        /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Pie, {
+          data,
+          dataKey: pie.dataKey,
+          nameKey,
+          cx: "50%",
+          cy: "50%",
+          outerRadius: 100,
+          label: pie.label,
+          children: data.map((_entry, index) => /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Cell, {
+            fill: DEFAULT_COLORS[index % DEFAULT_COLORS.length]
+          }, `cell-${index}`))
+        }),
+        /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltip, {
+          content: /* @__PURE__ */ jsx_runtime46.jsx(ChartTooltipContent, {})
+        }),
+        showLegend && /* @__PURE__ */ jsx_runtime46.jsx(import_recharts.Legend, {})
+      ]
+    })
+  });
+}
+// src/ui/composed/generative-components/card-grid.tsx
+var jsx_runtime47 = require("react/jsx-runtime");
+function CardGrid(props) {
+  const { cards, columns = { default: 1, md: 2, lg: 3 }, variant = "default" } = props;
+  if (!cards || cards.length === 0) {
+    return /* @__PURE__ */ jsx_runtime47.jsx("div", {
+      className: "flex items-center justify-center p-8 border rounded-md bg-muted/10",
+      children: /* @__PURE__ */ jsx_runtime47.jsx("p", {
+        className: "text-sm text-muted-foreground",
+        children: "No items available"
+      })
+    });
+  }
+  const gridCols = {
+    default: columns.default || 1,
+    sm: columns.sm,
+    md: columns.md || 2,
+    lg: columns.lg || 3,
+    xl: columns.xl
+  };
+  const gridClass = cn("grid gap-4", gridCols.default === 1 ? "grid-cols-1" : `grid-cols-${gridCols.default}`, gridCols.sm && `sm:grid-cols-${gridCols.sm}`, gridCols.md && `md:grid-cols-${gridCols.md}`, gridCols.lg && `lg:grid-cols-${gridCols.lg}`, gridCols.xl && `xl:grid-cols-${gridCols.xl}`);
+  const cardClass = cn("rounded-lg border bg-card text-card-foreground shadow-sm", variant === "bordered" && "border-2", variant === "elevated" && "shadow-lg");
+  return /* @__PURE__ */ jsx_runtime47.jsx("div", {
+    className: gridClass,
+    children: cards.map((card) => /* @__PURE__ */ jsx_runtime47.jsxs("div", {
+      className: cardClass,
+      children: [
+        card.image && /* @__PURE__ */ jsx_runtime47.jsx("div", {
+          className: "aspect-video w-full overflow-hidden rounded-t-lg",
+          children: /* @__PURE__ */ jsx_runtime47.jsx("img", {
+            src: card.image,
+            alt: card.title,
+            className: "h-full w-full object-cover"
+          })
+        }),
+        /* @__PURE__ */ jsx_runtime47.jsxs("div", {
+          className: "flex flex-col space-y-1.5 p-6",
+          children: [
+            /* @__PURE__ */ jsx_runtime47.jsx("h3", {
+              className: "text-lg font-semibold leading-none tracking-tight",
+              children: card.title
+            }),
+            card.description && /* @__PURE__ */ jsx_runtime47.jsx("p", {
+              className: "text-sm text-muted-foreground",
+              children: card.description
+            })
+          ]
+        }),
+        card.metadata && Object.keys(card.metadata).length > 0 && /* @__PURE__ */ jsx_runtime47.jsx("div", {
+          className: "px-6 pb-4",
+          children: /* @__PURE__ */ jsx_runtime47.jsx("dl", {
+            className: "space-y-1 text-sm",
+            children: Object.entries(card.metadata).map(([key, value]) => /* @__PURE__ */ jsx_runtime47.jsxs("div", {
+              className: "flex justify-between",
+              children: [
+                /* @__PURE__ */ jsx_runtime47.jsxs("dt", {
+                  className: "text-muted-foreground",
+                  children: [
+                    key,
+                    ":"
+                  ]
+                }),
+                /* @__PURE__ */ jsx_runtime47.jsx("dd", {
+                  className: "font-medium",
+                  children: String(value)
+                })
+              ]
+            }, key))
+          })
+        }),
+        card.actions && card.actions.length > 0 && /* @__PURE__ */ jsx_runtime47.jsx("div", {
+          className: "flex items-center gap-2 p-6 pt-0",
+          children: card.actions.map((action, index) => /* @__PURE__ */ jsx_runtime47.jsx(Button, {
+            variant: action.variant || "default",
+            size: "sm",
+            onClick: () => {
+              if (action.onClick) {
+                window.dispatchEvent(new CustomEvent("generative-ui-action", {
+                  detail: { action: action.onClick, cardId: card.id }
+                }));
+              }
+            },
+            children: action.label
+          }, index))
+        })
+      ]
+    }, card.id))
+  });
+}
 // src/ui/composed/agno-chat/agno-chat.tsx
-var import_react21 = require("react");
+var import_react17 = require("react");
 var import_agno_react = require("@rodrigocoliveira/agno-react");
 var jsx_runtime48 = require("react/jsx-runtime");
 function resolveDebug(debug) {
@@ -4160,19 +4322,19 @@ function AgnoChatRoot({
   autoExecuteTools = true,
   renderTool,
   debug,
-  skipHydration,
+  skipToolsOnSessionLoad,
   className,
   ...divProps
 }) {
   const chat = import_agno_react.useAgnoChat();
   const toolExec = import_agno_react.useAgnoToolExecution(toolHandlers, autoExecuteTools, {
-    skipHydration
+    skipToolsOnSessionLoad
   });
-  const containerRef = import_react21.useRef(null);
+  const containerRef = import_react17.useRef(null);
   const isDebug = resolveDebug(debug);
-  const sendRef = import_react21.useRef(chat.sendMessage);
+  const sendRef = import_react17.useRef(chat.sendMessage);
   sendRef.current = chat.sendMessage;
-  const handleSend = import_react21.useCallback(async (message) => {
+  const handleSend = import_react17.useCallback(async (message) => {
     try {
       await sendRef.current(message);
     } catch {}
@@ -4198,7 +4360,7 @@ function AgnoChatRoot({
     continueWithResults,
     executionError
   } = toolExec;
-  const contextValue = import_react21.useMemo(() => ({
+  const contextValue = import_react17.useMemo(() => ({
     messages,
     sendMessage,
     clearMessages,
@@ -4255,7 +4417,7 @@ function AgnoChatRoot({
 }
 
 // src/ui/composed/agno-chat/messages.tsx
-var import_react22 = require("react");
+var import_react18 = require("react");
 
 // src/ui/composed/agno-chat/suggested-prompts.tsx
 var jsx_runtime49 = require("react/jsx-runtime");
@@ -4287,8 +4449,8 @@ 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_react22.useRef(messageCount);
-  import_react22.useEffect(() => {
+  const prevCount = import_react18.useRef(messageCount);
+  import_react18.useEffect(() => {
     if (messageCount > prevCount.current) {
       scrollToBottom("smooth");
     }
@@ -4330,7 +4492,7 @@ function AgnoChatMessages({
     if (scrollToBottomButton === undefined || scrollToBottomButton === true) {
       return /* @__PURE__ */ jsx_runtime50.jsx(ConversationScrollButton, {});
     }
-    if (import_react22.isValidElement(scrollToBottomButton))
+    if (import_react18.isValidElement(scrollToBottomButton))
       return scrollToBottomButton;
     if (typeof scrollToBottomButton === "object" && scrollToBottomButton !== null && "className" in scrollToBottomButton) {
       return /* @__PURE__ */ jsx_runtime50.jsx(ConversationScrollButton, {
@@ -4441,7 +4603,7 @@ function AgnoChatEmptyState({ children, className, ...props }) {
 }
 
 // src/ui/composed/agno-chat/error-bar.tsx
-var import_react23 = require("react");
+var import_react19 = require("react");
 var jsx_runtime52 = require("react/jsx-runtime");
 function AgnoChatErrorBar({
   className,
@@ -4452,10 +4614,10 @@ function AgnoChatErrorBar({
   children
 }) {
   const { error, executionError } = useAgnoChatContext();
-  const [hidden, setHidden] = import_react23.useState(false);
-  const timerRef = import_react23.useRef(null);
+  const [hidden, setHidden] = import_react19.useState(false);
+  const timerRef = import_react19.useRef(null);
   const rawMessage = error || executionError;
-  import_react23.useEffect(() => {
+  import_react19.useEffect(() => {
     if (!rawMessage)
       return;
     setHidden(false);
@@ -4572,4 +4734,4 @@ var AgnoChat = Object.assign(AgnoChatRoot, {
   Input: AgnoChatInputArea
 });
 
-//# debugId=7C378B0E1199C3A164756E2164756E21
+//# debugId=DF0422349E1C62CD64756E2164756E21