@rodrigocoliveira/agno-react 1.4.0 → 2.1.0

package/dist/index.mjs

@@ -1,3 +1,11 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/context/AgnoContext.tsx
 import { createContext, useContext, useMemo, useEffect } from "react";
 import { AgnoClient } from "@rodrigocoliveira/agno-client";
@@ -53,1026 +61,2344 @@ function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
 function useToolHandlers() {
   return useContext2(ToolHandlerContext);
 }
-// src/components/GenerativeUIRenderer.tsx
-import React3 from "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();
-  }
+// src/utils/ui-helpers.ts
+function createBarChart(data, xKey, bars, options) {
+  return {
+    type: "chart",
+    component: "BarChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      xKey,
+      bars: bars.map((bar) => ({
+        key: bar.key,
+        label: bar.label || bar.key,
+        color: bar.color
+      })),
+      showLegend: options?.showLegend ?? true,
+      showGrid: options?.showGrid ?? true,
+      height: options?.height,
+      width: options?.width
+    }
+  };
 }
-function getComponentRegistry() {
-  return ComponentRegistry.getInstance();
+function createLineChart(data, xKey, lines, options) {
+  return {
+    type: "chart",
+    component: "LineChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      xKey,
+      lines: lines.map((line) => ({
+        key: line.key,
+        label: line.label || line.key,
+        color: line.color
+      })),
+      showLegend: options?.showLegend ?? true,
+      showGrid: options?.showGrid ?? true,
+      height: options?.height,
+      width: options?.width
+    }
+  };
 }
-function registerChartComponent(name, renderer) {
-  getComponentRegistry().register(`chart:${name}`, renderer);
+function createPieChart(data, dataKey, nameKey, options) {
+  return {
+    type: "chart",
+    component: "PieChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      pie: {
+        dataKey,
+        nameKey,
+        label: options?.showLabel ?? true
+      },
+      showLegend: options?.showLegend ?? true,
+      height: options?.height || 400,
+      width: options?.width
+    }
+  };
 }
-function getChartComponent(name) {
-  return getComponentRegistry().get(`chart:${name}`);
+function createAreaChart(data, xKey, areas, options) {
+  return {
+    type: "chart",
+    component: "AreaChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      xKey,
+      areas: areas.map((area) => ({
+        key: area.key,
+        label: area.label || area.key,
+        color: area.color
+      })),
+      showLegend: options?.showLegend ?? true,
+      showGrid: options?.showGrid ?? true,
+      height: options?.height,
+      width: options?.width
+    }
+  };
 }
-
-// src/hooks/useAgnoToolExecution.ts
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
-var customRenderRegistry = new Map;
-function registerCustomRender(renderFn) {
-  const key = `custom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  customRenderRegistry.set(key, renderFn);
-  return key;
+function createCardGrid(cards, options) {
+  return {
+    type: "card-grid",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      cards,
+      columns: options?.columns || { default: 1, md: 2, lg: 3 },
+      variant: options?.variant || "default"
+    }
+  };
 }
-function getCustomRender(key) {
-  return customRenderRegistry.get(key);
+function createCard(id, title, description, options) {
+  return {
+    id,
+    title,
+    description,
+    image: options?.image,
+    metadata: options?.metadata,
+    actions: options?.actions
+  };
 }
-function isToolHandlerResult(value) {
-  return value && typeof value === "object" && (("data" in value) || ("ui" in value));
+function createTable(data, columns, options) {
+  return {
+    type: "table",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      columns,
+      sortable: options?.sortable ?? true,
+      filterable: options?.filterable,
+      pagination: options?.pagination,
+      density: options?.density || "comfortable"
+    }
+  };
 }
-function isUIComponentSpec(value) {
-  return value && typeof value === "object" && "type" in value;
+function createColumn(key, header, options) {
+  return {
+    key,
+    header,
+    width: options?.width,
+    sortable: options?.sortable,
+    cellType: options?.cellType || "text",
+    format: options?.format
+  };
 }
-function processToolResult(result, _tool) {
-  if (isToolHandlerResult(result)) {
-    const { data, ui } = result;
-    let uiComponent = undefined;
-    if (ui) {
-      if (ui.type === "custom" && typeof ui.render === "function") {
-        const renderKey = registerCustomRender(ui.render);
-        uiComponent = {
-          ...ui,
-          renderKey,
-          render: undefined
-        };
-      } else {
-        uiComponent = ui;
-      }
+function createMarkdown(content, options) {
+  return {
+    type: "markdown",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      content,
+      syntaxHighlight: options?.syntaxHighlight ?? true
     }
-    return {
-      resultData: typeof data === "string" ? data : JSON.stringify(data),
-      uiComponent
-    };
+  };
+}
+function createArtifact(content, options) {
+  return {
+    type: "artifact",
+    title: options?.title,
+    description: options?.description,
+    props: {
+      content,
+      variant: options?.variant || "default"
+    }
+  };
+}
+function createSmartChart(data, options) {
+  if (!data || data.length === 0) {
+    return createBarChart([], "", [], options);
   }
-  if (isUIComponentSpec(result)) {
-    let uiComponent;
-    if (result.type === "custom" && typeof result.render === "function") {
-      const renderKey = registerCustomRender(result.render);
-      uiComponent = {
-        ...result,
-        renderKey,
-        render: undefined
-      };
-    } else {
-      uiComponent = result;
+  const firstItem = data[0];
+  const keys = Object.keys(firstItem);
+  const xKey = options?.xKey || keys.find((k) => ["name", "label", "category", "date", "time", "month", "year"].includes(k.toLowerCase())) || keys[0];
+  const numericKeys = keys.filter((k) => k !== xKey && typeof firstItem[k] === "number");
+  const yKeys = options?.yKeys || numericKeys;
+  if (options?.preferredType) {
+    switch (options.preferredType) {
+      case "bar":
+        return createBarChart(data, xKey, yKeys.map((key) => ({ key })), options);
+      case "line":
+        return createLineChart(data, xKey, yKeys.map((key) => ({ key })), options);
+      case "area":
+        return createAreaChart(data, xKey, yKeys.map((key) => ({ key })), options);
+      case "pie":
+        return createPieChart(data, yKeys[0], xKey, options);
     }
-    return {
-      resultData: JSON.stringify(result),
-      uiComponent
-    };
   }
-  return {
-    resultData: typeof result === "string" ? result : JSON.stringify(result),
-    uiComponent: undefined
-  };
+  if (yKeys.length === 1 && typeof firstItem[xKey] === "string") {
+    return createPieChart(data, yKeys[0], xKey, options);
+  }
+  if (xKey.toLowerCase().includes("date") || xKey.toLowerCase().includes("time") || xKey.toLowerCase().includes("month") || xKey.toLowerCase().includes("year")) {
+    return createLineChart(data, xKey, yKeys.map((key) => ({ key })), options);
+  }
+  return createBarChart(data, xKey, yKeys.map((key) => ({ key })), options);
 }
-function useAgnoToolExecution(handlers = {}, autoExecute = true, options) {
+function createToolResult(data, ui) {
+  return { data, ui };
+}
+function resultWithBarChart(data, xKey, bars, options) {
+  return createToolResult(data, createBarChart(data, xKey, bars, options));
+}
+function resultWithSmartChart(data, options) {
+  return createToolResult(data, createSmartChart(data, options));
+}
+function resultWithCardGrid(cards, options) {
+  return createToolResult(cards, createCardGrid(cards, options));
+}
+function resultWithTable(data, columns, options) {
+  return createToolResult(data, createTable(data, columns, options));
+}
+// src/hooks/useAgnoChat.ts
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+function useAgnoChat() {
   const client = useAgnoClient();
-  const toolHandlerContext = useToolHandlers();
-  const isTeamMode = client.getConfig().mode === "team";
-  useEffect2(() => {
-    if (isTeamMode) {
-      console.warn("[useAgnoToolExecution] HITL (Human-in-the-Loop) frontend tool execution is not supported for teams. " + "Only agents support the continue endpoint. This hook will not function in team mode.");
-    }
-  }, [isTeamMode]);
-  const mergedHandlers = useMemo2(() => {
-    const globalHandlers = toolHandlerContext?.handlers || {};
-    return { ...globalHandlers, ...handlers };
-  }, [toolHandlerContext?.handlers, handlers]);
-  const [pendingTools, setPendingTools] = useState2([]);
-  const [isPaused, setIsPaused] = useState2(false);
-  const [isExecuting, setIsExecuting] = useState2(false);
-  const [executionError, setExecutionError] = useState2();
+  const [messages, setMessages] = useState2(client.getMessages());
+  const [state, setState] = useState2(client.getState());
   useEffect2(() => {
-    if (isTeamMode) {
-      return;
-    }
-    const handleRunPaused = (event) => {
-      setIsPaused(true);
-      setPendingTools(event.tools);
-      setExecutionError(undefined);
+    const handleMessageUpdate = (updatedMessages) => {
+      setMessages(updatedMessages);
     };
-    const handleRunContinued = () => {
-      setIsPaused(false);
-      setPendingTools([]);
-      setIsExecuting(false);
-      setExecutionError(undefined);
+    const handleMessageComplete = (updatedMessages) => {
+      setMessages(updatedMessages);
     };
-    client.on("run:paused", handleRunPaused);
-    client.on("run:continued", handleRunContinued);
-    return () => {
-      client.off("run:paused", handleRunPaused);
-      client.off("run:continued", handleRunContinued);
+    const handleMessageRefreshed = (updatedMessages) => {
+      setMessages(updatedMessages);
     };
-  }, [client, isTeamMode]);
-  const executeAndContinue = useCallback2(async () => {
-    if (!isPaused || pendingTools.length === 0) {
-      console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
-      return;
-    }
-    setIsExecuting(true);
-    setExecutionError(undefined);
-    try {
-      const updatedTools = await Promise.all(pendingTools.map(async (tool) => {
-        const handler = mergedHandlers[tool.tool_name];
-        if (!handler) {
-          return {
-            ...tool,
-            result: JSON.stringify({
-              error: `No handler registered for ${tool.tool_name}`
-            })
-          };
-        }
-        try {
-          const result = await handler(tool.tool_args);
-          const { resultData, uiComponent } = processToolResult(result, tool);
-          return {
-            ...tool,
-            result: resultData,
-            ui_component: uiComponent
-          };
-        } catch (error) {
-          return {
-            ...tool,
-            result: JSON.stringify({
-              error: error instanceof Error ? error.message : String(error)
-            })
-          };
+    const handleStateChange = (newState) => {
+      setState(newState);
+    };
+    const handleUIRender = (event) => {
+      const { tools } = event;
+      for (const tool of tools) {
+        if (tool.ui_component) {
+          client.hydrateToolCallUI(tool.tool_call_id, tool.ui_component);
         }
-      }));
-      const toolsWithUI = updatedTools.filter((t) => t.ui_component);
-      if (toolsWithUI.length > 0) {
-        client.emit("ui:render", {
-          tools: updatedTools,
-          runId: client.getState().pausedRunId
-        });
       }
-      client.addToolCallsToLastMessage(updatedTools);
-      await client.continueRun(updatedTools);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      setExecutionError(errorMessage);
-      setIsExecuting(false);
-      throw error;
+    };
+    const handleRunCancelled = () => {};
+    client.on("message:update", handleMessageUpdate);
+    client.on("message:complete", handleMessageComplete);
+    client.on("message:refreshed", handleMessageRefreshed);
+    client.on("state:change", handleStateChange);
+    client.on("ui:render", handleUIRender);
+    client.on("run:cancelled", handleRunCancelled);
+    setMessages(client.getMessages());
+    setState(client.getState());
+    return () => {
+      client.off("message:update", handleMessageUpdate);
+      client.off("message:complete", handleMessageComplete);
+      client.off("message:refreshed", handleMessageRefreshed);
+      client.off("state:change", handleStateChange);
+      client.off("ui:render", handleUIRender);
+      client.off("run:cancelled", handleRunCancelled);
+    };
+  }, [client]);
+  const sendMessage = useCallback2(async (message, options) => {
+    try {
+      await client.sendMessage(message, options);
+    } catch (err) {
+      throw err;
     }
-  }, [client, mergedHandlers, isPaused, pendingTools]);
-  useEffect2(() => {
-    const handleSessionLoaded = async (_sessionId) => {
-      const messages = client.getMessages();
-      for (const message of messages) {
-        if (!message.tool_calls)
-          continue;
-        for (const tool of message.tool_calls) {
-          if (tool.ui_component)
-            continue;
-          if (options?.skipHydration?.includes(tool.tool_name))
-            continue;
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler)
-            continue;
-          try {
-            const result = await handler(tool.tool_args);
-            const { uiComponent } = processToolResult(result, tool);
-            if (uiComponent) {
-              client.hydrateToolCallUI(tool.tool_call_id, uiComponent);
-            }
-          } catch (err) {
-            console.error(`Failed to hydrate UI for ${tool.tool_name}:`, err);
-          }
-        }
-      }
+  }, [client]);
+  const clearMessages = useCallback2(() => {
+    client.clearMessages();
+    setMessages([]);
+  }, [client]);
+  const cancelRun = useCallback2(async () => {
+    await client.cancelRun();
+  }, [client]);
+  return {
+    messages,
+    sendMessage,
+    clearMessages,
+    cancelRun,
+    isStreaming: state.isStreaming,
+    isRefreshing: state.isRefreshing,
+    isPaused: state.isPaused,
+    isCancelling: state.isCancelling,
+    currentRunId: state.currentRunId,
+    error: state.errorMessage,
+    state
+  };
+}
+// src/hooks/useAgnoSession.ts
+import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
+function useAgnoSession() {
+  const client = useAgnoClient();
+  const [sessions, setSessions] = useState3([]);
+  const [currentSessionId, setCurrentSessionId] = useState3(client.getConfig().sessionId);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3();
+  useEffect3(() => {
+    const handleSessionLoaded = (sessionId) => {
+      setCurrentSessionId(sessionId);
+    };
+    const handleSessionCreated = (session) => {
+      setSessions((prev) => [session, ...prev]);
+      setCurrentSessionId(session.session_id);
+    };
+    const handleStateChange = () => {
+      const config = client.getConfig();
+      setCurrentSessionId(config.sessionId);
+      setSessions(client.getState().sessions);
     };
     client.on("session:loaded", handleSessionLoaded);
+    client.on("session:created", handleSessionCreated);
+    client.on("state:change", handleStateChange);
+    setSessions(client.getState().sessions);
+    setCurrentSessionId(client.getConfig().sessionId);
     return () => {
       client.off("session:loaded", handleSessionLoaded);
+      client.off("session:created", handleSessionCreated);
+      client.off("state:change", handleStateChange);
     };
-  }, [client, mergedHandlers]);
-  const executeTools = useCallback2(async (tools) => {
-    return Promise.all(tools.map(async (tool) => {
-      const handler = mergedHandlers[tool.tool_name];
-      if (!handler)
-        return tool;
-      try {
-        const result = await handler(tool.tool_args);
-        const { resultData, uiComponent } = processToolResult(result, tool);
-        return {
-          ...tool,
-          result: resultData,
-          ui_component: uiComponent
-        };
-      } catch (error) {
-        return {
-          ...tool,
-          result: JSON.stringify({
-            error: error instanceof Error ? error.message : String(error)
-          })
-        };
-      }
-    }));
-  }, [mergedHandlers]);
-  const continueWithResults = useCallback2(async (tools, options2) => {
-    if (!isPaused) {
-      throw new Error("No paused run to continue");
+  }, [client]);
+  const loadSession = useCallback3(async (sessionId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      const messages = await client.loadSession(sessionId, options);
+      setCurrentSessionId(sessionId);
+      return messages;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-    setIsExecuting(true);
+  }, [client]);
+  const fetchSessions = useCallback3(async (options) => {
+    setIsLoading(true);
+    setError(undefined);
     try {
-      await client.continueRun(tools, options2);
-    } catch (error) {
-      setIsExecuting(false);
-      throw error;
+      const fetchedSessions = await client.fetchSessions(options);
+      setSessions(fetchedSessions);
+      return fetchedSessions;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-  }, [client, isPaused]);
-  useEffect2(() => {
-    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
-      executeAndContinue();
+  }, [client]);
+  const getSessionById = useCallback3(async (sessionId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.getSessionById(sessionId, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
-  return {
-    isPaused,
-    isExecuting,
-    pendingTools,
-    executeAndContinue,
-    executeTools,
-    continueWithResults,
-    executionError
-  };
-}
-
-// src/components/GenerativeUIRenderer.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-
-class UIErrorBoundary extends React3.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__ */ jsxs("div", {
-        className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800",
-        children: [
-          /* @__PURE__ */ jsx3("p", {
-            className: "font-semibold",
-            children: "Failed to render UI component"
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-sm mt-1",
-            children: this.state.error?.message || "Unknown error"
-          })
-        ]
-      });
+  }, [client]);
+  const getRunById = useCallback3(async (sessionId, runId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.getRunById(sessionId, runId, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-    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__ */ jsx3(UIErrorBoundary, {
-          onError,
-          children: /* @__PURE__ */ jsx3("div", {
-            className,
-            children: renderFn(customSpec.props || {})
-          })
-        });
-      }
+  }, [client]);
+  const createSession = useCallback3(async (request, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      const session = await client.createSession(request, options);
+      return session;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-    return /* @__PURE__ */ jsxs("div", {
-      className: `p-4 border border-yellow-300 rounded-md bg-yellow-50 text-yellow-800 ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx3("p", {
-          className: "font-semibold",
-          children: "Custom component not available"
-        }),
-        /* @__PURE__ */ jsx3("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__ */ jsx3(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsxs("div", {
-          className,
-          children: [
-            chartSpec.title && /* @__PURE__ */ jsx3("h3", {
-              className: "font-semibold mb-2",
-              children: chartSpec.title
-            }),
-            chartSpec.description && /* @__PURE__ */ jsx3("p", {
-              className: "text-sm text-gray-600 mb-4",
-              children: chartSpec.description
-            }),
-            /* @__PURE__ */ jsx3(ChartRenderer, {
-              ...chartSpec.props
-            })
-          ]
-        })
-      });
+  }, [client]);
+  const updateSession = useCallback3(async (sessionId, request, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.updateSession(sessionId, request, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-    return /* @__PURE__ */ jsxs("div", {
-      className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx3("p", {
-          className: "font-semibold mb-2",
-          children: chartSpec.title || "Chart Data"
-        }),
-        chartSpec.description && /* @__PURE__ */ jsx3("p", {
-          className: "text-sm text-gray-600 mb-2",
-          children: chartSpec.description
-        }),
-        /* @__PURE__ */ jsx3("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__ */ jsx3(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsxs("div", {
-          className,
-          children: [
-            cardGridSpec.title && /* @__PURE__ */ jsx3("h3", {
-              className: "font-semibold mb-2",
-              children: cardGridSpec.title
-            }),
-            cardGridSpec.description && /* @__PURE__ */ jsx3("p", {
-              className: "text-sm text-gray-600 mb-4",
-              children: cardGridSpec.description
-            }),
-            /* @__PURE__ */ jsx3(CardGridRenderer, {
-              ...cardGridSpec.props
-            })
-          ]
-        })
-      });
+  }, [client]);
+  const renameSession = useCallback3(async (sessionId, newName, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.renameSession(sessionId, newName, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-  }
-  if (spec.type === "table") {
-    const tableSpec = spec;
-    if (registry.has("table")) {
-      const TableRenderer = registry.get("table");
-      return /* @__PURE__ */ jsx3(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsxs("div", {
-          className,
-          children: [
-            tableSpec.title && /* @__PURE__ */ jsx3("h3", {
-              className: "font-semibold mb-2",
-              children: tableSpec.title
-            }),
-            tableSpec.description && /* @__PURE__ */ jsx3("p", {
-              className: "text-sm text-gray-600 mb-4",
-              children: tableSpec.description
-            }),
-            /* @__PURE__ */ jsx3(TableRenderer, {
-              ...tableSpec.props
-            })
-          ]
-        })
-      });
+  }, [client]);
+  const deleteSession = useCallback3(async (sessionId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      await client.deleteSession(sessionId, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-  }
-  if (spec.type === "markdown") {
-    const markdownSpec = spec;
-    if (registry.has("markdown")) {
-      const MarkdownRenderer = registry.get("markdown");
-      return /* @__PURE__ */ jsx3(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsx3("div", {
-          className,
-          children: /* @__PURE__ */ jsx3(MarkdownRenderer, {
-            ...markdownSpec.props
-          })
-        })
-      });
+  }, [client]);
+  const deleteMultipleSessions = useCallback3(async (sessionIds, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      await client.deleteMultipleSessions(sessionIds, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
     }
-    return /* @__PURE__ */ jsx3("div", {
-      className,
-      children: markdownSpec.props.content
-    });
-  }
-  if (spec.type === "artifact") {
-    const artifactSpec = spec;
-    return /* @__PURE__ */ jsx3(UIErrorBoundary, {
-      onError,
-      children: /* @__PURE__ */ jsxs("div", {
-        className: `p-4 border rounded-md ${className || ""}`,
-        children: [
-          artifactSpec.title && /* @__PURE__ */ jsx3("h3", {
-            className: "font-semibold mb-4",
-            children: artifactSpec.title
-          }),
-          artifactSpec.description && /* @__PURE__ */ jsx3("p", {
-            className: "text-sm text-gray-600 mb-4",
-            children: artifactSpec.description
-          }),
-          /* @__PURE__ */ jsx3("div", {
-            className: "space-y-4",
-            children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsx3(GenerativeUIRenderer, {
-              spec: childSpec,
-              onError
-            }, index))
-          })
-        ]
-      })
-    });
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
-    children: [
-      /* @__PURE__ */ jsx3("p", {
-        className: "font-semibold",
-        children: "Unsupported UI component"
-      }),
-      /* @__PURE__ */ jsxs("p", {
-        className: "text-sm text-gray-600 mt-1",
-        children: [
-          "Component type: ",
-          spec.type
-        ]
-      })
-    ]
-  });
-}
-// src/utils/ui-helpers.ts
-function createBarChart(data, xKey, bars, options) {
+  }, [client]);
   return {
-    type: "chart",
-    component: "BarChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      xKey,
-      bars: bars.map((bar) => ({
-        key: bar.key,
-        label: bar.label || bar.key,
-        color: bar.color
-      })),
-      showLegend: options?.showLegend ?? true,
-      showGrid: options?.showGrid ?? true,
-      height: options?.height,
-      width: options?.width
-    }
+    sessions,
+    currentSessionId,
+    loadSession,
+    fetchSessions,
+    getSessionById,
+    getRunById,
+    createSession,
+    updateSession,
+    renameSession,
+    deleteSession,
+    deleteMultipleSessions,
+    isLoading,
+    error
   };
 }
-function createLineChart(data, xKey, lines, options) {
-  return {
-    type: "chart",
-    component: "LineChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      xKey,
-      lines: lines.map((line) => ({
-        key: line.key,
-        label: line.label || line.key,
-        color: line.color
-      })),
-      showLegend: options?.showLegend ?? true,
-      showGrid: options?.showGrid ?? true,
-      height: options?.height,
-      width: options?.width
+// src/hooks/useAgnoActions.ts
+import { useState as useState4, useCallback as useCallback4 } from "react";
+function useAgnoActions() {
+  const client = useAgnoClient();
+  const [isInitializing, setIsInitializing] = useState4(false);
+  const [error, setError] = useState4();
+  const initialize = useCallback4(async (options) => {
+    setIsInitializing(true);
+    setError(undefined);
+    try {
+      const result = await client.initialize(options);
+      return result;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsInitializing(false);
+    }
+  }, [client]);
+  const checkStatus = useCallback4(async (options) => {
+    setError(undefined);
+    try {
+      return await client.checkStatus(options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      return false;
+    }
+  }, [client]);
+  const fetchAgents = useCallback4(async (options) => {
+    setError(undefined);
+    try {
+      return await client.fetchAgents(options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    }
+  }, [client]);
+  const fetchTeams = useCallback4(async (options) => {
+    setError(undefined);
+    try {
+      return await client.fetchTeams(options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
     }
+  }, [client]);
+  const updateConfig = useCallback4((updates) => {
+    client.updateConfig(updates);
+  }, [client]);
+  return {
+    initialize,
+    checkStatus,
+    fetchAgents,
+    fetchTeams,
+    updateConfig,
+    isInitializing,
+    error
   };
 }
-function createPieChart(data, dataKey, nameKey, options) {
+// src/hooks/useAgnoToolExecution.ts
+import { useState as useState5, useEffect as useEffect4, useCallback as useCallback5, useMemo as useMemo2 } from "react";
+function isToolHandlerResult(value) {
+  return value && typeof value === "object" && (("data" in value) || ("ui" in value));
+}
+function isUIComponentSpec(value) {
+  return value && typeof value === "object" && "type" in value;
+}
+function processToolResult(result, _tool) {
+  if (isToolHandlerResult(result)) {
+    const { data, ui } = result;
+    return {
+      resultData: typeof data === "string" ? data : JSON.stringify(data),
+      uiComponent: ui
+    };
+  }
+  if (isUIComponentSpec(result)) {
+    return {
+      resultData: JSON.stringify(result),
+      uiComponent: result
+    };
+  }
   return {
-    type: "chart",
-    component: "PieChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      pie: {
-        dataKey,
-        nameKey,
-        label: options?.showLabel ?? true
-      },
-      showLegend: options?.showLegend ?? true,
-      height: options?.height || 400,
-      width: options?.width
-    }
+    resultData: typeof result === "string" ? result : JSON.stringify(result),
+    uiComponent: undefined
   };
 }
-function createAreaChart(data, xKey, areas, options) {
-  return {
-    type: "chart",
-    component: "AreaChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      xKey,
-      areas: areas.map((area) => ({
-        key: area.key,
-        label: area.label || area.key,
-        color: area.color
-      })),
-      showLegend: options?.showLegend ?? true,
-      showGrid: options?.showGrid ?? true,
-      height: options?.height,
-      width: options?.width
+function useAgnoToolExecution(handlers = {}, autoExecute = true, options) {
+  const client = useAgnoClient();
+  const toolHandlerContext = useToolHandlers();
+  const isTeamMode = client.getConfig().mode === "team";
+  useEffect4(() => {
+    if (isTeamMode) {
+      console.warn("[useAgnoToolExecution] HITL (Human-in-the-Loop) frontend tool execution is not supported for teams. " + "Only agents support the continue endpoint. This hook will not function in team mode.");
+    }
+  }, [isTeamMode]);
+  const mergedHandlers = useMemo2(() => {
+    const globalHandlers = toolHandlerContext?.handlers || {};
+    return { ...globalHandlers, ...handlers };
+  }, [toolHandlerContext?.handlers, handlers]);
+  const [pendingTools, setPendingTools] = useState5([]);
+  const [isPaused, setIsPaused] = useState5(false);
+  const [isExecuting, setIsExecuting] = useState5(false);
+  const [executionError, setExecutionError] = useState5();
+  useEffect4(() => {
+    if (isTeamMode) {
+      return;
+    }
+    const handleRunPaused = (event) => {
+      setIsPaused(true);
+      setPendingTools(event.tools);
+      setExecutionError(undefined);
+    };
+    const handleRunContinued = () => {
+      setIsPaused(false);
+      setPendingTools([]);
+      setIsExecuting(false);
+      setExecutionError(undefined);
+    };
+    client.on("run:paused", handleRunPaused);
+    client.on("run:continued", handleRunContinued);
+    return () => {
+      client.off("run:paused", handleRunPaused);
+      client.off("run:continued", handleRunContinued);
+    };
+  }, [client, isTeamMode]);
+  const executeAndContinue = useCallback5(async () => {
+    if (!isPaused || pendingTools.length === 0) {
+      console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
+      return;
     }
+    setIsExecuting(true);
+    setExecutionError(undefined);
+    try {
+      const updatedTools = await Promise.all(pendingTools.map(async (tool) => {
+        const handler = mergedHandlers[tool.tool_name];
+        if (!handler) {
+          return {
+            ...tool,
+            result: JSON.stringify({
+              error: `No handler registered for ${tool.tool_name}`
+            })
+          };
+        }
+        try {
+          const result = await handler(tool.tool_args);
+          const { resultData, uiComponent } = processToolResult(result, tool);
+          return {
+            ...tool,
+            result: resultData,
+            ui_component: uiComponent
+          };
+        } catch (error) {
+          return {
+            ...tool,
+            result: JSON.stringify({
+              error: error instanceof Error ? error.message : String(error)
+            })
+          };
+        }
+      }));
+      const toolsWithUI = updatedTools.filter((t) => t.ui_component);
+      if (toolsWithUI.length > 0) {
+        client.emit("ui:render", {
+          tools: updatedTools,
+          runId: client.getState().pausedRunId
+        });
+      }
+      client.addToolCallsToLastMessage(updatedTools);
+      await client.continueRun(updatedTools);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      setExecutionError(errorMessage);
+      setIsExecuting(false);
+      throw error;
+    }
+  }, [client, mergedHandlers, isPaused, pendingTools]);
+  useEffect4(() => {
+    const handleSessionLoaded = async (_sessionId) => {
+      const messages = client.getMessages();
+      for (const message of messages) {
+        if (!message.tool_calls)
+          continue;
+        for (const tool of message.tool_calls) {
+          if (tool.ui_component)
+            continue;
+          if (options?.skipToolsOnSessionLoad?.includes(tool.tool_name))
+            continue;
+          const handler = mergedHandlers[tool.tool_name];
+          if (!handler)
+            continue;
+          try {
+            const result = await handler(tool.tool_args);
+            const { uiComponent } = processToolResult(result, tool);
+            if (uiComponent) {
+              client.hydrateToolCallUI(tool.tool_call_id, uiComponent);
+            }
+          } catch (err) {
+            console.error(`Failed to hydrate UI for ${tool.tool_name}:`, err);
+          }
+        }
+      }
+    };
+    client.on("session:loaded", handleSessionLoaded);
+    return () => {
+      client.off("session:loaded", handleSessionLoaded);
+    };
+  }, [client, mergedHandlers]);
+  const executeTools = useCallback5(async (tools) => {
+    return Promise.all(tools.map(async (tool) => {
+      const handler = mergedHandlers[tool.tool_name];
+      if (!handler)
+        return tool;
+      try {
+        const result = await handler(tool.tool_args);
+        const { resultData, uiComponent } = processToolResult(result, tool);
+        return {
+          ...tool,
+          result: resultData,
+          ui_component: uiComponent
+        };
+      } catch (error) {
+        return {
+          ...tool,
+          result: JSON.stringify({
+            error: error instanceof Error ? error.message : String(error)
+          })
+        };
+      }
+    }));
+  }, [mergedHandlers]);
+  const continueWithResults = useCallback5(async (tools, options2) => {
+    if (!isPaused) {
+      throw new Error("No paused run to continue");
+    }
+    setIsExecuting(true);
+    try {
+      await client.continueRun(tools, options2);
+    } catch (error) {
+      setIsExecuting(false);
+      throw error;
+    }
+  }, [client, isPaused]);
+  useEffect4(() => {
+    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
+      executeAndContinue();
+    }
+  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
+  return {
+    isPaused,
+    isExecuting,
+    pendingTools,
+    executeAndContinue,
+    executeTools,
+    continueWithResults,
+    executionError
   };
 }
-function createCardGrid(cards, options) {
-  return {
-    type: "card-grid",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      cards,
-      columns: options?.columns || { default: 1, md: 2, lg: 3 },
-      variant: options?.variant || "default"
-    }
+// src/ui/composed/agno-chat/render-tool.ts
+function byToolName(map, fallback) {
+  return (tool, args) => {
+    if (!Object.prototype.hasOwnProperty.call(map, tool.tool_name)) {
+      return fallback ? fallback(tool, args) : args.defaultRender();
+    }
+    const entry = map[tool.tool_name];
+    if (entry === false)
+      return null;
+    return entry(tool, args);
   };
 }
-function createCard(id, title, description, options) {
-  return {
-    id,
-    title,
-    description,
-    image: options?.image,
-    metadata: options?.metadata,
-    actions: options?.actions
+// src/ui/primitives/badge.tsx
+import { cva } from "class-variance-authority";
+
+// src/ui/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/primitives/badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+      outline: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx3("div", {
+    className: cn(badgeVariants({ variant }), className),
+    ...props
+  });
+}
+
+// src/ui/primitives/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+// src/ui/components/tool.tsx
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon
+} from "lucide-react";
+import { isValidElement } from "react";
+
+// src/ui/primitives/button.tsx
+import * as React3 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var buttonVariants = cva2("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+      destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+      outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2",
+      sm: "h-8 rounded-md px-3 text-xs",
+      lg: "h-10 rounded-md px-8",
+      icon: "h-9 w-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React3.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx4(Comp, {
+    className: cn(buttonVariants({ variant, size, className })),
+    ref,
+    ...props
+  });
+});
+Button.displayName = "Button";
+
+// src/ui/components/code-block.tsx
+import { CheckIcon, CopyIcon } from "lucide-react";
+import {
+  createContext as createContext3,
+  useContext as useContext3,
+  useEffect as useEffect5,
+  useRef,
+  useState as useState6
+} from "react";
+import { jsx as jsx5, jsxs, Fragment } from "react/jsx-runtime";
+var CodeBlockContext = createContext3({
+  code: ""
+});
+async function highlightCode(code, language, showLineNumbers = false) {
+  try {
+    const shiki = await import("shiki");
+    const lineNumberTransformer = showLineNumbers ? [
+      {
+        name: "line-numbers",
+        line(node, line) {
+          node.children.unshift({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["inline-block", "min-w-10", "mr-4", "text-right", "select-none", "text-muted-foreground"]
+            },
+            children: [{ type: "text", value: String(line) }]
+          });
+        }
+      }
+    ] : [];
+    const [light, dark] = await Promise.all([
+      shiki.codeToHtml(code, { lang: language, theme: "one-light", transformers: lineNumberTransformer }),
+      shiki.codeToHtml(code, { lang: language, theme: "one-dark-pro", transformers: lineNumberTransformer })
+    ]);
+    return [light, dark];
+  } catch {
+    return ["", ""];
+  }
+}
+var CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}) => {
+  const [html, setHtml] = useState6("");
+  const [darkHtml, setDarkHtml] = useState6("");
+  const effectIdRef = useRef(0);
+  useEffect5(() => {
+    const id = ++effectIdRef.current;
+    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+      if (id === effectIdRef.current) {
+        setHtml(light);
+        setDarkHtml(dark);
+      }
+    });
+  }, [code, language, showLineNumbers]);
+  const useFallback = !html && !darkHtml;
+  return /* @__PURE__ */ jsx5(CodeBlockContext.Provider, {
+    value: { code },
+    children: /* @__PURE__ */ jsx5("div", {
+      className: cn("group relative w-full overflow-hidden rounded-md border bg-background text-foreground", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", {
+        className: "relative",
+        children: [
+          useFallback ? /* @__PURE__ */ jsx5("pre", {
+            className: "m-0 overflow-auto bg-background p-4 text-foreground text-sm",
+            children: /* @__PURE__ */ jsx5("code", {
+              className: "font-mono text-sm",
+              children: code
+            })
+          }) : /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx5("div", {
+                className: "overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm",
+                dangerouslySetInnerHTML: { __html: html }
+              }),
+              /* @__PURE__ */ jsx5("div", {
+                className: "hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm",
+                dangerouslySetInnerHTML: { __html: darkHtml }
+              })
+            ]
+          }),
+          children && /* @__PURE__ */ jsx5("div", {
+            className: "absolute top-2 right-2 flex items-center gap-2",
+            children
+          })
+        ]
+      })
+    })
+  });
+};
+
+// src/ui/components/tool.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx6(Collapsible, {
+  className: cn("not-prose mb-4 w-full rounded-md border", className),
+  ...props
+});
+var getStatusBadge = (status) => {
+  const labels = {
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    "approval-requested": "Awaiting Approval",
+    "approval-responded": "Responded",
+    "output-available": "Completed",
+    "output-error": "Error",
+    "output-denied": "Denied"
   };
+  const icons = {
+    "input-streaming": /* @__PURE__ */ jsx6(CircleIcon, {
+      className: "size-4"
+    }),
+    "input-available": /* @__PURE__ */ jsx6(ClockIcon, {
+      className: "size-4 animate-pulse"
+    }),
+    "approval-requested": /* @__PURE__ */ jsx6(ClockIcon, {
+      className: "size-4 text-yellow-600"
+    }),
+    "approval-responded": /* @__PURE__ */ jsx6(CheckCircleIcon, {
+      className: "size-4 text-blue-600"
+    }),
+    "output-available": /* @__PURE__ */ jsx6(CheckCircleIcon, {
+      className: "size-4 text-green-600"
+    }),
+    "output-error": /* @__PURE__ */ jsx6(XCircleIcon, {
+      className: "size-4 text-red-600"
+    }),
+    "output-denied": /* @__PURE__ */ jsx6(XCircleIcon, {
+      className: "size-4 text-orange-600"
+    })
+  };
+  return /* @__PURE__ */ jsxs2(Badge, {
+    className: "gap-1.5 rounded-full text-xs",
+    variant: "secondary",
+    children: [
+      icons[status],
+      labels[status]
+    ]
+  });
+};
+var ToolHeader = ({ className, title, type, state, ...props }) => /* @__PURE__ */ jsxs2(CollapsibleTrigger2, {
+  className: cn("group flex w-full items-center justify-between gap-4 p-3", className),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxs2("div", {
+      className: "flex items-center gap-2",
+      children: [
+        /* @__PURE__ */ jsx6(WrenchIcon, {
+          className: "size-4 text-muted-foreground"
+        }),
+        /* @__PURE__ */ jsx6("span", {
+          className: "font-medium text-sm",
+          children: title ?? type?.split("-").slice(1).join("-") ?? "Tool"
+        }),
+        getStatusBadge(state)
+      ]
+    }),
+    /* @__PURE__ */ jsx6(ChevronDownIcon, {
+      className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+    })
+  ]
+});
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx6(CollapsibleContent2, {
+  className: cn("data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in", className),
+  ...props
+});
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs2("div", {
+  className: cn("space-y-2 overflow-hidden p-4", className),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx6("h4", {
+      className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+      children: "Parameters"
+    }),
+    /* @__PURE__ */ jsx6("div", {
+      className: "rounded-md bg-muted/50",
+      children: /* @__PURE__ */ jsx6(CodeBlock, {
+        code: JSON.stringify(input, null, 2),
+        language: "json"
+      })
+    })
+  ]
+});
+var ToolOutput = ({ className, output, errorText, ...props }) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ jsx6("div", {
+    children: output
+  });
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = /* @__PURE__ */ jsx6(CodeBlock, {
+      code: JSON.stringify(output, null, 2),
+      language: "json"
+    });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ jsx6(CodeBlock, {
+      code: output,
+      language: "json"
+    });
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    className: cn("space-y-2 p-4", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx6("h4", {
+        className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+        children: errorText ? "Error" : "Result"
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        className: cn("overflow-x-auto rounded-md text-xs [&_table]:w-full", errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"),
+        children: [
+          errorText && /* @__PURE__ */ jsx6("div", {
+            children: errorText
+          }),
+          Output
+        ]
+      })
+    ]
+  });
+};
+
+// src/ui/composed/agno-chat/tool-building-blocks.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var getToolState = (tool) => tool.tool_call_error ? "output-error" : "output-available";
+function ToolDebugCard({ tool, defaultOpen }) {
+  const output = tool.result ?? tool.content;
+  return /* @__PURE__ */ jsxs3(Tool, {
+    defaultOpen,
+    children: [
+      /* @__PURE__ */ jsx7(ToolHeader, {
+        title: tool.tool_name,
+        type: "tool-use",
+        state: getToolState(tool)
+      }),
+      /* @__PURE__ */ jsxs3(ToolContent, {
+        children: [
+          /* @__PURE__ */ jsx7(ToolInput, {
+            input: tool.tool_args
+          }),
+          output ? /* @__PURE__ */ jsx7(ToolOutput, {
+            output,
+            errorText: tool.tool_call_error ? "Tool execution failed" : undefined
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+// src/ui/composed/agno-message/message.tsx
+import { useMemo as useMemo3, useState as useState8 } from "react";
+import { AlertCircle as AlertCircle2, FileIcon as FileIcon4, Music as Music2 } from "lucide-react";
+
+// src/ui/primitives/tooltip.tsx
+import * as React4 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx8(TooltipPrimitive.Portal, {
+  children: /* @__PURE__ */ jsx8(TooltipPrimitive.Content, {
+    ref,
+    sideOffset,
+    className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]", className),
+    ...props
+  })
+}));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/ui/lib/format-timestamp.ts
+function formatSmartTimestamp(date) {
+  const now = new Date;
+  const isToday = date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate();
+  if (isToday) {
+    return new Intl.DateTimeFormat(undefined, {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true
+    }).format(date);
+  }
+  const isSameYear = date.getFullYear() === now.getFullYear();
+  if (isSameYear) {
+    return new Intl.DateTimeFormat(undefined, {
+      month: "short",
+      day: "numeric"
+    }).format(date);
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(date);
+}
+function formatFullTimestamp(date) {
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  }).format(date);
+}
+
+// src/ui/components/smart-timestamp.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function SmartTimestamp({ date, formatShort, className }) {
+  const shortText = formatShort ? formatShort(date) : formatSmartTimestamp(date);
+  const fullText = formatFullTimestamp(date);
+  return /* @__PURE__ */ jsx9(TooltipProvider, {
+    children: /* @__PURE__ */ jsxs4(Tooltip, {
+      children: [
+        /* @__PURE__ */ jsx9(TooltipTrigger, {
+          asChild: true,
+          children: /* @__PURE__ */ jsx9("span", {
+            className,
+            children: shortText
+          })
+        }),
+        /* @__PURE__ */ jsx9(TooltipContent, {
+          children: /* @__PURE__ */ jsx9("p", {
+            children: fullText
+          })
+        })
+      ]
+    })
+  });
+}
+
+// src/ui/lib/file-utils.ts
+function getFilePreviewType(mimeType) {
+  if (!mimeType)
+    return "none";
+  if (mimeType.startsWith("image/"))
+    return "image";
+  if (mimeType === "application/pdf")
+    return "pdf";
+  if (mimeType.startsWith("text/"))
+    return "text";
+  if (mimeType.startsWith("video/"))
+    return "video";
+  if (mimeType.startsWith("audio/"))
+    return "audio";
+  return "none";
+}
+function formatFileSize(bytes) {
+  if (bytes === 0)
+    return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const value = bytes / Math.pow(k, i);
+  return `${value % 1 === 0 ? value : value.toFixed(1)} ${units[i]}`;
+}
+function getFileExtension(filename, mimeType) {
+  const lastDot = filename.lastIndexOf(".");
+  if (lastDot !== -1 && lastDot !== 0) {
+    return filename.slice(lastDot + 1).toLowerCase();
+  }
+  if (mimeType) {
+    return extensionFromMime(mimeType);
+  }
+  return "";
+}
+var mimeToExt = {
+  "application/pdf": "pdf",
+  "application/zip": "zip",
+  "application/x-rar-compressed": "rar",
+  "application/json": "json",
+  "application/xml": "xml",
+  "application/msword": "doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+  "application/vnd.ms-excel": "xls",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+  "application/vnd.ms-powerpoint": "ppt",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx",
+  "text/csv": "csv",
+  "text/plain": "txt",
+  "text/html": "html",
+  "text/css": "css",
+  "text/javascript": "js"
+};
+function extensionFromMime(mimeType) {
+  if (mimeToExt[mimeType])
+    return mimeToExt[mimeType];
+  const subtype = mimeType.split("/")[1];
+  if (subtype && !subtype.includes(".") && !subtype.includes("+")) {
+    return subtype.toLowerCase();
+  }
+  return "";
+}
+function isPreviewable(mimeType) {
+  const type = getFilePreviewType(mimeType);
+  return type === "image" || type === "pdf";
+}
+
+// src/ui/components/file-preview-card.tsx
+import { FileIcon, Search } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function ExtBadge({ ext }) {
+  if (!ext)
+    return null;
+  return /* @__PURE__ */ jsx10("span", {
+    className: "absolute bottom-1.5 left-1.5 rounded px-1 py-0.5 text-[9px] font-semibold uppercase leading-none bg-background/80 text-muted-foreground border border-border/50 backdrop-blur-sm",
+    children: ext
+  });
+}
+function FilePreviewCard({ file, onClick, className }) {
+  const previewType = getFilePreviewType(file.type);
+  const isClickable = !!onClick;
+  const ext = getFileExtension(file.name, file.type);
+  const cardBase = cn("group relative flex flex-col overflow-hidden rounded-xl border border-border bg-muted/20 w-28 h-28", isClickable && "cursor-pointer hover:border-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors", className);
+  if (previewType === "image" && file.url) {
+    return /* @__PURE__ */ jsxs5("button", {
+      type: "button",
+      onClick,
+      disabled: !isClickable,
+      className: cardBase,
+      children: [
+        /* @__PURE__ */ jsx10("img", {
+          src: file.url,
+          alt: file.name,
+          className: "w-full h-full object-cover"
+        }),
+        /* @__PURE__ */ jsx10(ExtBadge, {
+          ext
+        }),
+        isClickable && /* @__PURE__ */ jsx10("div", {
+          className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors",
+          children: /* @__PURE__ */ jsx10(Search, {
+            className: "h-5 w-5 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+          })
+        })
+      ]
+    });
+  }
+  if (previewType === "pdf" && file.url) {
+    return /* @__PURE__ */ jsxs5("button", {
+      type: "button",
+      onClick,
+      disabled: !isClickable,
+      className: cardBase,
+      children: [
+        /* @__PURE__ */ jsx10("div", {
+          className: "w-full h-full overflow-hidden pointer-events-none",
+          children: /* @__PURE__ */ jsx10("object", {
+            data: `${file.url}#page=1&view=FitH`,
+            type: "application/pdf",
+            className: "w-[200%] h-[200%] origin-top-left scale-50",
+            "aria-label": file.name,
+            children: /* @__PURE__ */ jsx10("div", {
+              className: "flex items-center justify-center w-full h-full",
+              children: /* @__PURE__ */ jsx10(FileIcon, {
+                className: "h-8 w-8 text-muted-foreground/40"
+              })
+            })
+          })
+        }),
+        /* @__PURE__ */ jsx10(ExtBadge, {
+          ext
+        }),
+        isClickable && /* @__PURE__ */ jsx10("div", {
+          className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/10 transition-colors",
+          children: /* @__PURE__ */ jsx10(Search, {
+            className: "h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+          })
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsxs5("button", {
+    type: "button",
+    onClick,
+    disabled: !isClickable,
+    className: cardBase,
+    children: [
+      /* @__PURE__ */ jsx10("div", {
+        className: "flex-1 flex items-center justify-center",
+        children: /* @__PURE__ */ jsx10(FileIcon, {
+          className: "h-8 w-8 text-muted-foreground/40"
+        })
+      }),
+      /* @__PURE__ */ jsxs5("div", {
+        className: "w-full text-center min-w-0 px-2 pb-2 space-y-0.5",
+        children: [
+          /* @__PURE__ */ jsx10("p", {
+            className: "text-[10px] text-foreground truncate leading-tight",
+            title: file.name,
+            children: file.name
+          }),
+          file.size != null && file.size > 0 && /* @__PURE__ */ jsx10("p", {
+            className: "text-[9px] text-muted-foreground leading-tight",
+            children: formatFileSize(file.size)
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx10(ExtBadge, {
+        ext
+      })
+    ]
+  });
+}
+
+// src/ui/primitives/dialog.tsx
+import * as React5 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva as cva3 } from "class-variance-authority";
+import { X } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(DialogPrimitive.Overlay, {
+  ref,
+  className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+  ...props
+}));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var dialogContentVariants = cva3("fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", {
+  variants: {
+    variant: {
+      default: "w-full max-w-lg bg-background p-6",
+      lightbox: "max-w-[90vw] max-h-[90vh] bg-background/95 backdrop-blur-sm p-2"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var DialogContent = React5.forwardRef(({ className, variant, children, ...props }, ref) => /* @__PURE__ */ jsxs6(DialogPortal, {
+  children: [
+    /* @__PURE__ */ jsx11(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs6(DialogPrimitive.Content, {
+      ref,
+      className: cn(dialogContentVariants({ variant }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs6(DialogPrimitive.Close, {
+          className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsx11(X, {
+              className: "h-4 w-4"
+            }),
+            /* @__PURE__ */ jsx11("span", {
+              className: "sr-only",
+              children: "Close"
+            })
+          ]
+        })
+      ]
+    })
+  ]
+}));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx11("div", {
+  className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+  ...props
+});
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx11("div", {
+  className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+  ...props
+});
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(DialogPrimitive.Title, {
+  ref,
+  className: cn("text-lg font-semibold leading-none tracking-tight", className),
+  ...props
+}));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(DialogPrimitive.Description, {
+  ref,
+  className: cn("text-sm text-muted-foreground", className),
+  ...props
+}));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/ui/components/file-preview-modal.tsx
+import { Download, FileIcon as FileIcon2 } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function FilePreviewModal({ open, onOpenChange, file }) {
+  if (!file)
+    return null;
+  const previewType = getFilePreviewType(file.type);
+  const canPreview = isPreviewable(file.type) && !!file.url;
+  return /* @__PURE__ */ jsx12(Dialog, {
+    open,
+    onOpenChange,
+    children: previewType === "image" && file.url ? /* @__PURE__ */ jsxs7(DialogContent, {
+      variant: "lightbox",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx12(DialogTitle, {
+          className: "sr-only",
+          children: file.name
+        }),
+        /* @__PURE__ */ jsx12("img", {
+          src: file.url,
+          alt: file.name,
+          className: "max-h-[85vh] max-w-full object-contain rounded-md"
+        })
+      ]
+    }) : previewType === "pdf" && file.url ? /* @__PURE__ */ jsxs7(DialogContent, {
+      variant: "lightbox",
+      className: "w-[80vw] h-[85vh]",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx12(DialogTitle, {
+          className: "sr-only",
+          children: file.name
+        }),
+        /* @__PURE__ */ jsx12("object", {
+          data: file.url,
+          type: "application/pdf",
+          className: "w-full h-full rounded-md",
+          children: /* @__PURE__ */ jsxs7("div", {
+            className: "flex flex-col items-center justify-center h-full gap-3 text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx12("p", {
+                className: "text-sm",
+                children: "Unable to display PDF"
+              }),
+              /* @__PURE__ */ jsxs7("a", {
+                href: file.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline",
+                children: [
+                  /* @__PURE__ */ jsx12(Download, {
+                    className: "h-4 w-4"
+                  }),
+                  "Download ",
+                  file.name
+                ]
+              })
+            ]
+          })
+        })
+      ]
+    }) : /* @__PURE__ */ jsxs7(DialogContent, {
+      children: [
+        /* @__PURE__ */ jsxs7(DialogHeader, {
+          children: [
+            /* @__PURE__ */ jsxs7(DialogTitle, {
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx12(FileIcon2, {
+                  className: "h-5 w-5 text-muted-foreground"
+                }),
+                file.name
+              ]
+            }),
+            /* @__PURE__ */ jsxs7(DialogDescription, {
+              children: [
+                file.size != null && file.size > 0 && /* @__PURE__ */ jsx12("span", {
+                  children: formatFileSize(file.size)
+                }),
+                !canPreview && /* @__PURE__ */ jsx12("span", {
+                  children: " · Preview not available for this file type"
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs7("div", {
+          className: "flex flex-col items-center justify-center py-8 text-muted-foreground gap-3",
+          children: [
+            /* @__PURE__ */ jsx12(FileIcon2, {
+              className: "h-12 w-12"
+            }),
+            /* @__PURE__ */ jsx12("p", {
+              className: "text-sm",
+              children: "Preview not available"
+            }),
+            file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsxs7("a", {
+              href: file.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline",
+              children: [
+                /* @__PURE__ */ jsx12(Download, {
+                  className: "h-4 w-4"
+                }),
+                "Download file"
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
 }
-function createTable(data, columns, options) {
-  return {
-    type: "table",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      columns,
-      sortable: options?.sortable ?? true,
-      filterable: options?.filterable,
-      pagination: options?.pagination,
-      density: options?.density || "comfortable"
-    }
-  };
+
+// src/ui/components/image-lightbox.tsx
+import { useState as useState7, useEffect as useEffect6, useCallback as useCallback6 } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
+function ImageLightbox({ open, onOpenChange, images, initialIndex = 0 }) {
+  const [currentIndex, setCurrentIndex] = useState7(initialIndex);
+  const hasMultiple = images.length > 1;
+  useEffect6(() => {
+    if (open)
+      setCurrentIndex(initialIndex);
+  }, [open, initialIndex]);
+  const goNext = useCallback6(() => {
+    setCurrentIndex((i) => (i + 1) % images.length);
+  }, [images.length]);
+  const goPrev = useCallback6(() => {
+    setCurrentIndex((i) => (i - 1 + images.length) % images.length);
+  }, [images.length]);
+  useEffect6(() => {
+    if (!open || !hasMultiple)
+      return;
+    const handler = (e) => {
+      if (e.key === "ArrowRight")
+        goNext();
+      if (e.key === "ArrowLeft")
+        goPrev();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, hasMultiple, goNext, goPrev]);
+  if (images.length === 0)
+    return null;
+  const current = images[currentIndex];
+  if (!current)
+    return null;
+  return /* @__PURE__ */ jsx13(Dialog, {
+    open,
+    onOpenChange,
+    children: /* @__PURE__ */ jsxs8(DialogContent, {
+      variant: "lightbox",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx13(DialogTitle, {
+          className: "sr-only",
+          children: current.alt || `Image ${currentIndex + 1} of ${images.length}`
+        }),
+        /* @__PURE__ */ jsxs8("div", {
+          className: "relative flex items-center justify-center",
+          children: [
+            /* @__PURE__ */ jsx13("img", {
+              src: current.url,
+              alt: current.alt || "Image preview",
+              className: "max-h-[85vh] max-w-full object-contain rounded-md"
+            }),
+            hasMultiple && /* @__PURE__ */ jsxs8(Fragment2, {
+              children: [
+                /* @__PURE__ */ jsxs8("button", {
+                  type: "button",
+                  onClick: goPrev,
+                  className: cn("absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white", "hover:bg-black/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"),
+                  children: [
+                    /* @__PURE__ */ jsx13(ChevronLeft, {
+                      className: "h-5 w-5"
+                    }),
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "sr-only",
+                      children: "Previous image"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs8("button", {
+                  type: "button",
+                  onClick: goNext,
+                  className: cn("absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white", "hover:bg-black/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"),
+                  children: [
+                    /* @__PURE__ */ jsx13(ChevronRight, {
+                      className: "h-5 w-5"
+                    }),
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "sr-only",
+                      children: "Next image"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs8("div", {
+                  className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white",
+                  children: [
+                    currentIndex + 1,
+                    " / ",
+                    images.length
+                  ]
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
 }
-function createColumn(key, header, options) {
-  return {
-    key,
-    header,
-    width: options?.width,
-    sortable: options?.sortable,
-    cellType: options?.cellType || "text",
-    format: options?.format
-  };
+
+// src/ui/composed/agno-message/context.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var AgnoMessageContext = createContext4(null);
+function useAgnoMessageContext() {
+  const ctx = useContext4(AgnoMessageContext);
+  if (!ctx) {
+    throw new Error("useAgnoMessageContext must be used within an <AgnoMessage> provider. " + "Wrap your slots with <AgnoMessage message={...}>.");
+  }
+  return ctx;
 }
-function createMarkdown(content, options) {
-  return {
-    type: "markdown",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      content,
-      syntaxHighlight: options?.syntaxHighlight ?? true
-    }
-  };
+
+// src/ui/composed/agno-message/reasoning.tsx
+import { Lightbulb } from "lucide-react";
+
+// src/ui/primitives/accordion.tsx
+import * as React6 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(AccordionPrimitive.Item, {
+  ref,
+  className: cn("border-b", className),
+  ...props
+}));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx14(AccordionPrimitive.Header, {
+  className: "flex",
+  children: /* @__PURE__ */ jsxs9(AccordionPrimitive.Trigger, {
+    ref,
+    className: cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180", className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx14(ChevronDown, {
+        className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      })
+    ]
+  })
+}));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx14(AccordionPrimitive.Content, {
+  ref,
+  className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+  ...props,
+  children: /* @__PURE__ */ jsx14("div", {
+    className: cn("pb-4 pt-0", className),
+    children
+  })
+}));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/ui/composed/agno-message/reasoning.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function AgnoMessageReasoning() {
+  const { message, classNames } = useAgnoMessageContext();
+  const steps = message.extra_data?.reasoning_steps;
+  if (!steps || steps.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs10("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.reasoning),
+    children: [
+      /* @__PURE__ */ jsxs10("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx15(Lightbulb, {
+            className: "h-3.5 w-3.5"
+          }),
+          "Reasoning (",
+          steps.length,
+          " steps)"
+        ]
+      }),
+      /* @__PURE__ */ jsx15(Accordion, {
+        type: "multiple",
+        className: "w-full",
+        children: steps.map((step, idx) => /* @__PURE__ */ jsxs10(AccordionItem, {
+          value: `reasoning-${idx}`,
+          className: "border-muted",
+          children: [
+            /* @__PURE__ */ jsx15(AccordionTrigger, {
+              className: "text-xs py-1.5 hover:no-underline",
+              children: step.title || `Step ${idx + 1}`
+            }),
+            /* @__PURE__ */ jsxs10(AccordionContent, {
+              className: "space-y-1.5 text-xs text-muted-foreground",
+              children: [
+                step.action && /* @__PURE__ */ jsxs10("div", {
+                  children: [
+                    /* @__PURE__ */ jsx15("span", {
+                      className: "font-medium text-foreground",
+                      children: "Action:"
+                    }),
+                    " ",
+                    step.action
+                  ]
+                }),
+                step.reasoning && /* @__PURE__ */ jsxs10("div", {
+                  children: [
+                    /* @__PURE__ */ jsx15("span", {
+                      className: "font-medium text-foreground",
+                      children: "Reasoning:"
+                    }),
+                    " ",
+                    step.reasoning
+                  ]
+                }),
+                step.result && /* @__PURE__ */ jsxs10("div", {
+                  children: [
+                    /* @__PURE__ */ jsx15("span", {
+                      className: "font-medium text-foreground",
+                      children: "Result:"
+                    }),
+                    " ",
+                    step.result
+                  ]
+                }),
+                step.confidence !== undefined && /* @__PURE__ */ jsxs10("div", {
+                  children: [
+                    /* @__PURE__ */ jsx15("span", {
+                      className: "font-medium text-foreground",
+                      children: "Confidence:"
+                    }),
+                    " ",
+                    (step.confidence * 100).toFixed(1),
+                    "%"
+                  ]
+                })
+              ]
+            })
+          ]
+        }, idx))
+      })
+    ]
+  });
 }
-function createArtifact(content, options) {
-  return {
-    type: "artifact",
-    title: options?.title,
-    description: options?.description,
-    props: {
-      content,
-      variant: options?.variant || "default"
-    }
-  };
+
+// src/ui/composed/agno-message/media.tsx
+import { FileIcon as FileIcon3, Image as ImageIcon, Music, Paperclip, Video } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs11, Fragment as Fragment3 } from "react/jsx-runtime";
+function AgnoMessageMedia() {
+  const {
+    message,
+    classNames,
+    showImageLightbox,
+    showFilePreview,
+    openImageLightbox,
+    openFilePreview
+  } = useAgnoMessageContext();
+  const mediaClassName = classNames?.assistant?.media;
+  const hasImages = !!message.images && message.images.length > 0;
+  const hasVideos = !!message.videos && message.videos.length > 0;
+  const hasAudio = !!message.audio && message.audio.length > 0;
+  const hasFiles = !!message.files && message.files.length > 0;
+  const hasResponseAudio = !!message.response_audio;
+  if (!hasImages && !hasVideos && !hasAudio && !hasFiles && !hasResponseAudio)
+    return null;
+  return /* @__PURE__ */ jsxs11(Fragment3, {
+    children: [
+      hasImages && /* @__PURE__ */ jsxs11("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs11("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx16(ImageIcon, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Images (",
+              message.images.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx16("div", {
+            className: "grid grid-cols-2 gap-2",
+            children: message.images.map((img, idx) => /* @__PURE__ */ jsxs11("div", {
+              className: "space-y-1",
+              children: [
+                showImageLightbox ? /* @__PURE__ */ jsx16("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__ */ jsx16("img", {
+                    src: img.url,
+                    alt: img.revised_prompt || "Generated image",
+                    className: "w-full rounded-lg"
+                  })
+                }) : /* @__PURE__ */ jsx16("img", {
+                  src: img.url,
+                  alt: img.revised_prompt || "Generated image",
+                  className: "w-full rounded-lg border border-border"
+                }),
+                img.revised_prompt && /* @__PURE__ */ jsx16("p", {
+                  className: "text-[11px] text-muted-foreground italic px-0.5",
+                  children: img.revised_prompt
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasVideos && /* @__PURE__ */ jsxs11("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs11("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx16(Video, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Videos (",
+              message.videos.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx16("div", {
+            className: "space-y-2",
+            children: message.videos.map((video, idx) => /* @__PURE__ */ jsx16("div", {
+              children: video.url ? /* @__PURE__ */ jsx16("video", {
+                src: video.url,
+                controls: true,
+                className: "w-full rounded-lg border border-border"
+              }) : /* @__PURE__ */ jsxs11("div", {
+                className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
+                children: [
+                  "Video ID: ",
+                  video.id,
+                  " (ETA: ",
+                  video.eta,
+                  "s)"
+                ]
+              })
+            }, idx))
+          })
+        ]
+      }),
+      hasAudio && /* @__PURE__ */ jsxs11("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs11("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx16(Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Audio (",
+              message.audio.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx16("div", {
+            className: "space-y-2",
+            children: message.audio.map((audio, idx) => /* @__PURE__ */ jsx16("div", {
+              children: audio.url ? /* @__PURE__ */ jsx16("audio", {
+                src: audio.url,
+                controls: true,
+                className: "w-full"
+              }) : audio.base64_audio ? /* @__PURE__ */ jsx16("audio", {
+                src: `data:${audio.mime_type || "audio/wav"};base64,${audio.base64_audio}`,
+                controls: true,
+                className: "w-full"
+              }) : /* @__PURE__ */ jsx16("div", {
+                className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
+                children: "Audio data unavailable"
+              })
+            }, idx))
+          })
+        ]
+      }),
+      hasFiles && /* @__PURE__ */ jsxs11("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs11("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx16(Paperclip, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Files (",
+              message.files.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx16("div", {
+            className: "flex flex-wrap gap-2",
+            children: message.files.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx16(FilePreviewCard, {
+              file: { name: file.name, type: file.type, url: file.url, size: file.size },
+              onClick: () => openFilePreview({ name: file.name, type: file.type, url: file.url, size: file.size })
+            }, idx) : /* @__PURE__ */ jsxs11("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__ */ jsx16(FileIcon3, {
+                  className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                }),
+                /* @__PURE__ */ jsx16("span", {
+                  className: "truncate max-w-[180px]",
+                  children: file.name
+                }),
+                file.size && /* @__PURE__ */ jsxs11("span", {
+                  className: "text-muted-foreground/70",
+                  children: [
+                    "(",
+                    (file.size / 1024).toFixed(1),
+                    "KB)"
+                  ]
+                }),
+                file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsx16("a", {
+                  href: file.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-primary hover:underline font-medium",
+                  children: "View"
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasResponseAudio && message.response_audio && /* @__PURE__ */ jsxs11("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsxs11("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx16(Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Response Audio"
+            ]
+          }),
+          message.response_audio.transcript && /* @__PURE__ */ jsxs11("div", {
+            className: "text-xs italic bg-muted/50 border border-border p-2.5 rounded-lg text-muted-foreground",
+            children: [
+              '"',
+              message.response_audio.transcript,
+              '"'
+            ]
+          }),
+          message.response_audio.content && /* @__PURE__ */ jsx16("audio", {
+            src: `data:audio/wav;base64,${message.response_audio.content}`,
+            controls: true,
+            className: "w-full"
+          })
+        ]
+      })
+    ]
+  });
 }
-function createSmartChart(data, options) {
-  if (!data || data.length === 0) {
-    return createBarChart([], "", [], options);
-  }
-  const firstItem = data[0];
-  const keys = Object.keys(firstItem);
-  const xKey = options?.xKey || keys.find((k) => ["name", "label", "category", "date", "time", "month", "year"].includes(k.toLowerCase())) || keys[0];
-  const numericKeys = keys.filter((k) => k !== xKey && typeof firstItem[k] === "number");
-  const yKeys = options?.yKeys || numericKeys;
-  if (options?.preferredType) {
-    switch (options.preferredType) {
-      case "bar":
-        return createBarChart(data, xKey, yKeys.map((key) => ({ key })), options);
-      case "line":
-        return createLineChart(data, xKey, yKeys.map((key) => ({ key })), options);
-      case "area":
-        return createAreaChart(data, xKey, yKeys.map((key) => ({ key })), options);
-      case "pie":
-        return createPieChart(data, yKeys[0], xKey, options);
-    }
-  }
-  if (yKeys.length === 1 && typeof firstItem[xKey] === "string") {
-    return createPieChart(data, yKeys[0], xKey, options);
-  }
-  if (xKey.toLowerCase().includes("date") || xKey.toLowerCase().includes("time") || xKey.toLowerCase().includes("month") || xKey.toLowerCase().includes("year")) {
-    return createLineChart(data, xKey, yKeys.map((key) => ({ key })), options);
+
+// src/ui/composed/agno-chat/context.ts
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var AgnoChatContext = createContext5(null);
+function useAgnoChatContext() {
+  const ctx = useContext5(AgnoChatContext);
+  if (!ctx) {
+    throw new Error("useAgnoChatContext must be used within an <AgnoChat> provider. " + "Wrap your component tree with <AgnoChat>.");
   }
-  return createBarChart(data, xKey, yKeys.map((key) => ({ key })), options);
-}
-function createToolResult(data, ui) {
-  return { data, ui };
+  return ctx;
 }
-function resultWithBarChart(data, xKey, bars, options) {
-  return createToolResult(data, createBarChart(data, xKey, bars, options));
+
+// src/ui/composed/agno-message/tools.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function AgnoMessageTools({ renderTool: renderToolProp } = {}) {
+  const { message, classNames, renderTool: ctxMsgRenderTool } = useAgnoMessageContext();
+  const { renderTool: ctxChatRenderTool, isDebug } = useAgnoChatContext();
+  const renderTool = renderToolProp ?? ctxMsgRenderTool ?? ctxChatRenderTool;
+  if (!message.tool_calls || message.tool_calls.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx17("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.toolCalls),
+    children: message.tool_calls.map((tool, idx) => {
+      const defaultRender = () => isDebug ? /* @__PURE__ */ jsx17(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__ */ jsx17("div", {
+        children: node
+      }, tool.tool_call_id || idx);
+    })
+  });
 }
-function resultWithSmartChart(data, options) {
-  return createToolResult(data, createSmartChart(data, options));
+
+// src/ui/components/response.tsx
+import { memo } from "react";
+import { Streamdown } from "streamdown";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Response = memo(({ className, ...props }) => /* @__PURE__ */ jsx18(Streamdown, {
+  className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+  ...props
+}), (prevProps, nextProps) => prevProps.children === nextProps.children);
+Response.displayName = "Response";
+
+// src/ui/composed/agno-message/content.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function AgnoMessageContent() {
+  const { message } = useAgnoMessageContext();
+  if (!message.content)
+    return null;
+  return /* @__PURE__ */ jsx19("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__ */ jsx19(Response, {
+      children: message.content
+    })
+  });
 }
-function resultWithCardGrid(cards, options) {
-  return createToolResult(cards, createCardGrid(cards, options));
+
+// src/ui/composed/agno-message/references.tsx
+import { FileText } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+function AgnoMessageReferences() {
+  const { message, classNames } = useAgnoMessageContext();
+  const references = message.extra_data?.references;
+  if (!references || references.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs12("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.references),
+    children: [
+      /* @__PURE__ */ jsxs12("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx20(FileText, {
+            className: "h-3.5 w-3.5"
+          }),
+          "References (",
+          references.length,
+          ")"
+        ]
+      }),
+      /* @__PURE__ */ jsx20("div", {
+        className: "space-y-2",
+        children: references.map((refData, idx) => /* @__PURE__ */ jsxs12("div", {
+          className: "text-xs space-y-1.5",
+          children: [
+            refData.query && /* @__PURE__ */ jsxs12("div", {
+              className: "font-medium text-foreground",
+              children: [
+                "Query: ",
+                refData.query
+              ]
+            }),
+            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsxs12("div", {
+              className: "bg-muted/50 border border-border p-2.5 rounded-lg",
+              children: [
+                /* @__PURE__ */ jsxs12("div", {
+                  className: "italic text-muted-foreground mb-1",
+                  children: [
+                    '"',
+                    ref.content,
+                    '"'
+                  ]
+                }),
+                /* @__PURE__ */ jsxs12("div", {
+                  className: "text-muted-foreground/70",
+                  children: [
+                    "Source: ",
+                    ref.name,
+                    " (chunk ",
+                    ref.meta_data.chunk,
+                    "/",
+                    ref.meta_data.chunk_size,
+                    ")"
+                  ]
+                })
+              ]
+            }, refIdx))
+          ]
+        }, idx))
+      })
+    ]
+  });
 }
-function resultWithTable(data, columns, options) {
-  return createToolResult(data, createTable(data, columns, options));
+
+// src/ui/composed/agno-message/footer.tsx
+import { AlertCircle } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function AgnoMessageFooter({ showTimestamp = true } = {}) {
+  const { message, classNames, actions, isLastAssistantMessage, formatTimestamp } = useAgnoMessageContext();
+  const hasError = message.streamingError;
+  const isCustomTimestamp = !!formatTimestamp;
+  const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
+  if (!actions?.assistant && !showTimestamp && !hasError)
+    return null;
+  return /* @__PURE__ */ jsxs13("div", {
+    className: "flex items-center gap-2 pt-1",
+    children: [
+      actions?.assistant && (() => {
+        const visibility = actions.visibility ?? "visible";
+        if (visibility === "last-assistant" && !isLastAssistantMessage)
+          return null;
+        const useHover = visibility === "hover" || visibility === "hover-last-visible" && !isLastAssistantMessage;
+        return /* @__PURE__ */ jsx21("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__ */ jsxs13("span", {
+        className: "flex items-center gap-1 text-[11px] text-destructive",
+        children: [
+          /* @__PURE__ */ jsx21(AlertCircle, {
+            className: "h-3 w-3"
+          }),
+          "Error"
+        ]
+      }),
+      showTimestamp && /* @__PURE__ */ jsx21(SmartTimestamp, {
+        date: new Date(message.created_at * 1000),
+        formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
+        className: "text-[11px] text-muted-foreground"
+      })
+    ]
+  });
 }
-// src/hooks/useAgnoChat.ts
-import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
-function useAgnoChat() {
-  const client = useAgnoClient();
-  const [messages, setMessages] = useState3(client.getMessages());
-  const [state, setState] = useState3(client.getState());
-  useEffect3(() => {
-    const handleMessageUpdate = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleMessageComplete = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleMessageRefreshed = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleStateChange = (newState) => {
-      setState(newState);
-    };
-    const handleUIRender = (event) => {
-      const { tools } = event;
-      for (const tool of tools) {
-        if (tool.ui_component) {
-          client.hydrateToolCallUI(tool.tool_call_id, tool.ui_component);
-        }
-      }
-    };
-    const handleRunCancelled = () => {};
-    client.on("message:update", handleMessageUpdate);
-    client.on("message:complete", handleMessageComplete);
-    client.on("message:refreshed", handleMessageRefreshed);
-    client.on("state:change", handleStateChange);
-    client.on("ui:render", handleUIRender);
-    client.on("run:cancelled", handleRunCancelled);
-    setMessages(client.getMessages());
-    setState(client.getState());
-    return () => {
-      client.off("message:update", handleMessageUpdate);
-      client.off("message:complete", handleMessageComplete);
-      client.off("message:refreshed", handleMessageRefreshed);
-      client.off("state:change", handleStateChange);
-      client.off("ui:render", handleUIRender);
-      client.off("run:cancelled", handleRunCancelled);
-    };
-  }, [client]);
-  const sendMessage = useCallback3(async (message, options) => {
-    try {
-      await client.sendMessage(message, options);
-    } catch (err) {
-      throw err;
-    }
-  }, [client]);
-  const clearMessages = useCallback3(() => {
-    client.clearMessages();
-    setMessages([]);
-  }, [client]);
-  const cancelRun = useCallback3(async () => {
-    await client.cancelRun();
-  }, [client]);
-  return {
-    messages,
-    sendMessage,
-    clearMessages,
-    cancelRun,
-    isStreaming: state.isStreaming,
-    isRefreshing: state.isRefreshing,
-    isPaused: state.isPaused,
-    isCancelling: state.isCancelling,
-    currentRunId: state.currentRunId,
-    error: state.errorMessage,
-    state
-  };
+
+// src/ui/composed/agno-message/message.tsx
+import { jsx as jsx22, jsxs as jsxs14, Fragment as Fragment4 } from "react/jsx-runtime";
+function DefaultAssistantComposition({ showTimestamp }) {
+  return /* @__PURE__ */ jsxs14(Fragment4, {
+    children: [
+      /* @__PURE__ */ jsx22(AgnoMessageReasoning, {}),
+      /* @__PURE__ */ jsx22(AgnoMessageMedia, {}),
+      /* @__PURE__ */ jsx22(AgnoMessageTools, {}),
+      /* @__PURE__ */ jsx22(AgnoMessageContent, {}),
+      /* @__PURE__ */ jsx22(AgnoMessageReferences, {}),
+      /* @__PURE__ */ jsx22(AgnoMessageFooter, {
+        showTimestamp
+      })
+    ]
+  });
 }
-// src/hooks/useAgnoSession.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
-function useAgnoSession() {
-  const client = useAgnoClient();
-  const [sessions, setSessions] = useState4([]);
-  const [currentSessionId, setCurrentSessionId] = useState4(client.getConfig().sessionId);
-  const [isLoading, setIsLoading] = useState4(false);
-  const [error, setError] = useState4();
-  useEffect4(() => {
-    const handleSessionLoaded = (sessionId) => {
-      setCurrentSessionId(sessionId);
-    };
-    const handleSessionCreated = (session) => {
-      setSessions((prev) => [session, ...prev]);
-      setCurrentSessionId(session.session_id);
-    };
-    const handleStateChange = () => {
-      const config = client.getConfig();
-      setCurrentSessionId(config.sessionId);
-      setSessions(client.getState().sessions);
-    };
-    client.on("session:loaded", handleSessionLoaded);
-    client.on("session:created", handleSessionCreated);
-    client.on("state:change", handleStateChange);
-    setSessions(client.getState().sessions);
-    setCurrentSessionId(client.getConfig().sessionId);
-    return () => {
-      client.off("session:loaded", handleSessionLoaded);
-      client.off("session:created", handleSessionCreated);
-      client.off("state:change", handleStateChange);
-    };
-  }, [client]);
-  const loadSession = useCallback4(async (sessionId, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      const messages = await client.loadSession(sessionId, options);
-      setCurrentSessionId(sessionId);
-      return messages;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const fetchSessions = useCallback4(async (options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      const fetchedSessions = await client.fetchSessions(options);
-      setSessions(fetchedSessions);
-      return fetchedSessions;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const getSessionById = useCallback4(async (sessionId, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      return await client.getSessionById(sessionId, options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const getRunById = useCallback4(async (sessionId, runId, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      return await client.getRunById(sessionId, runId, options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const createSession = useCallback4(async (request, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      const session = await client.createSession(request, options);
-      return session;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const updateSession = useCallback4(async (sessionId, request, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      return await client.updateSession(sessionId, request, options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const renameSession = useCallback4(async (sessionId, newName, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      return await client.renameSession(sessionId, newName, options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const deleteSession = useCallback4(async (sessionId, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      await client.deleteSession(sessionId, options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  const deleteMultipleSessions = useCallback4(async (sessionIds, options) => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      await client.deleteMultipleSessions(sessionIds, options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  return {
-    sessions,
-    currentSessionId,
-    loadSession,
-    fetchSessions,
-    getSessionById,
-    getRunById,
-    createSession,
-    updateSession,
-    renameSession,
-    deleteSession,
-    deleteMultipleSessions,
-    isLoading,
-    error
-  };
+function AgnoMessage({
+  message,
+  className,
+  classNames,
+  avatars,
+  actions,
+  isLastAssistantMessage = false,
+  showFilePreview = true,
+  showImageLightbox = true,
+  showTimestamp = true,
+  formatTimestamp,
+  renderTool,
+  children
+}) {
+  const isUser = message.role === "user";
+  const hasError = message.streamingError;
+  const [preview, setPreview] = useState8(null);
+  const isCustomTimestamp = !!formatTimestamp;
+  const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
+  const ctx = useMemo3(() => ({
+    message,
+    isLastAssistantMessage,
+    classNames,
+    actions,
+    avatars,
+    formatTimestamp,
+    showFilePreview,
+    showImageLightbox,
+    openImageLightbox: (images, index) => {
+      if (!showImageLightbox)
+        return;
+      setPreview({ type: "image", images, initialIndex: index });
+    },
+    openFilePreview: (file) => {
+      if (!showFilePreview)
+        return;
+      setPreview({ type: "file", file });
+    },
+    renderTool
+  }), [
+    message,
+    isLastAssistantMessage,
+    classNames,
+    actions,
+    avatars,
+    formatTimestamp,
+    showFilePreview,
+    showImageLightbox,
+    renderTool
+  ]);
+  const closePreview = () => setPreview(null);
+  return /* @__PURE__ */ jsx22(AgnoMessageContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsxs14("div", {
+      className: cn("py-5 first:pt-2", isUser ? "flex justify-end" : "", classNames?.root, className),
+      children: [
+        isUser ? /* @__PURE__ */ jsx22(UserMessageLayout, {
+          message,
+          classNames,
+          avatars,
+          actions,
+          isCustomTimestamp,
+          resolvedFormatTimestamp,
+          showTimestamp,
+          showImageLightbox,
+          showFilePreview,
+          openImageLightbox: ctx.openImageLightbox,
+          openFilePreview: ctx.openFilePreview,
+          hasError
+        }) : /* @__PURE__ */ jsxs14("div", {
+          className: "flex items-start gap-3 group/message",
+          children: [
+            avatars?.assistant,
+            /* @__PURE__ */ jsx22("div", {
+              className: cn("flex-1 min-w-0 space-y-3", classNames?.assistant?.container),
+              children: children ?? /* @__PURE__ */ jsx22(DefaultAssistantComposition, {
+                showTimestamp
+              })
+            })
+          ]
+        }),
+        preview?.type === "image" && /* @__PURE__ */ jsx22(ImageLightbox, {
+          open: true,
+          onOpenChange: (open) => {
+            if (!open)
+              closePreview();
+          },
+          images: preview.images,
+          initialIndex: preview.initialIndex
+        }),
+        preview?.type === "file" && /* @__PURE__ */ jsx22(FilePreviewModal, {
+          open: true,
+          onOpenChange: (open) => {
+            if (!open)
+              closePreview();
+          },
+          file: preview.file
+        })
+      ]
+    })
+  });
 }
-// src/hooks/useAgnoActions.ts
-import { useState as useState5, useCallback as useCallback5 } from "react";
-function useAgnoActions() {
-  const client = useAgnoClient();
-  const [isInitializing, setIsInitializing] = useState5(false);
-  const [error, setError] = useState5();
-  const initialize = useCallback5(async (options) => {
-    setIsInitializing(true);
-    setError(undefined);
-    try {
-      const result = await client.initialize(options);
-      return result;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsInitializing(false);
-    }
-  }, [client]);
-  const checkStatus = useCallback5(async (options) => {
-    setError(undefined);
-    try {
-      return await client.checkStatus(options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      return false;
-    }
-  }, [client]);
-  const fetchAgents = useCallback5(async (options) => {
-    setError(undefined);
-    try {
-      return await client.fetchAgents(options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    }
-  }, [client]);
-  const fetchTeams = useCallback5(async (options) => {
-    setError(undefined);
-    try {
-      return await client.fetchTeams(options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    }
-  }, [client]);
-  const updateConfig = useCallback5((updates) => {
-    client.updateConfig(updates);
-  }, [client]);
-  return {
-    initialize,
-    checkStatus,
-    fetchAgents,
-    fetchTeams,
-    updateConfig,
-    isInitializing,
-    error
-  };
+AgnoMessage.Reasoning = AgnoMessageReasoning;
+AgnoMessage.Media = AgnoMessageMedia;
+AgnoMessage.Tools = AgnoMessageTools;
+AgnoMessage.Content = AgnoMessageContent;
+AgnoMessage.References = AgnoMessageReferences;
+AgnoMessage.Footer = AgnoMessageFooter;
+function UserMessageLayout({
+  message,
+  classNames,
+  avatars,
+  actions,
+  isCustomTimestamp,
+  resolvedFormatTimestamp,
+  showTimestamp,
+  showImageLightbox,
+  showFilePreview,
+  openImageLightbox,
+  openFilePreview,
+  hasError
+}) {
+  return /* @__PURE__ */ jsxs14("div", {
+    className: "flex items-start gap-2.5 max-w-[80%] flex-row-reverse",
+    children: [
+      avatars?.user,
+      /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", {
+            className: "flex flex-wrap gap-2 justify-end",
+            children: [
+              message.images?.map((img, idx) => /* @__PURE__ */ jsx22(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__ */ jsxs14("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__ */ jsx22(Music2, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
+                  }),
+                  /* @__PURE__ */ jsx22("span", {
+                    className: "truncate max-w-[150px]",
+                    children: audio.id || `Audio ${idx + 1}`
+                  })
+                ]
+              }, `audio-${idx}`)),
+              message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx22(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__ */ jsxs14("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__ */ jsx22(FileIcon4, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
+                  }),
+                  /* @__PURE__ */ jsx22("span", {
+                    className: "truncate max-w-[150px]",
+                    children: file.name
+                  })
+                ]
+              }, `file-${idx}`))
+            ]
+          }),
+          message.content && /* @__PURE__ */ jsx22("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__ */ jsx22("p", {
+              className: "text-sm whitespace-pre-wrap",
+              children: message.content
+            })
+          }),
+          (showTimestamp || actions?.user) && /* @__PURE__ */ jsxs14("div", {
+            className: "flex items-center justify-end gap-1.5 px-1",
+            children: [
+              actions?.user && /* @__PURE__ */ jsx22("div", {
+                className: "flex items-center gap-1",
+                children: actions.user(message)
+              }),
+              /* @__PURE__ */ jsx22(SmartTimestamp, {
+                date: new Date(message.created_at * 1000),
+                formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
+                className: "text-[11px] text-muted-foreground"
+              }),
+              hasError && /* @__PURE__ */ jsx22(AlertCircle2, {
+                className: "h-3 w-3 text-destructive"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
 }
 // src/hooks/useAgnoCustomEvents.ts
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback6, useRef } from "react";
+import { useState as useState9, useEffect as useEffect7, useCallback as useCallback7, useRef as useRef2 } from "react";
 function useAgnoCustomEvents(handler) {
   const client = useAgnoClient();
-  const [events, setEvents] = useState6([]);
-  const handlerRef = useRef(handler);
+  const [events, setEvents] = useState9([]);
+  const handlerRef = useRef2(handler);
   handlerRef.current = handler;
-  useEffect5(() => {
+  useEffect7(() => {
     const handleCustomEvent = (event) => {
       setEvents((prev) => [...prev, event]);
       handlerRef.current?.(event);
@@ -1082,20 +2408,20 @@ function useAgnoCustomEvents(handler) {
       client.off("custom:event", handleCustomEvent);
     };
   }, [client]);
-  const clearEvents = useCallback6(() => {
+  const clearEvents = useCallback7(() => {
     setEvents([]);
   }, []);
   return { events, clearEvents };
 }
 // src/hooks/useAgnoMemory.ts
-import { useState as useState7, useEffect as useEffect6, useCallback as useCallback7 } from "react";
+import { useState as useState10, useEffect as useEffect8, useCallback as useCallback8 } from "react";
 function useAgnoMemory() {
   const client = useAgnoClient();
-  const [memories, setMemories] = useState7([]);
-  const [topics, setTopics] = useState7([]);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [error, setError] = useState7();
-  useEffect6(() => {
+  const [memories, setMemories] = useState10([]);
+  const [topics, setTopics] = useState10([]);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10();
+  useEffect8(() => {
     const handleMemoryCreated = (memory) => {
       setMemories((prev) => [memory, ...prev]);
     };
@@ -1130,7 +2456,7 @@ function useAgnoMemory() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchMemories = useCallback7(async (queryParams, options) => {
+  const fetchMemories = useCallback8(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1145,7 +2471,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getMemoryById = useCallback7(async (memoryId, options) => {
+  const getMemoryById = useCallback8(async (memoryId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1158,7 +2484,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getMemoryTopics = useCallback7(async (options) => {
+  const getMemoryTopics = useCallback8(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1173,7 +2499,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getUserMemoryStats = useCallback7(async (queryParams, options) => {
+  const getUserMemoryStats = useCallback8(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1186,7 +2512,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const createMemory = useCallback7(async (request, options) => {
+  const createMemory = useCallback8(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1199,7 +2525,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateMemory = useCallback7(async (memoryId, request, options) => {
+  const updateMemory = useCallback8(async (memoryId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1212,7 +2538,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteMemory = useCallback7(async (memoryId, options) => {
+  const deleteMemory = useCallback8(async (memoryId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1225,7 +2551,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteMultipleMemories = useCallback7(async (memoryIds, options) => {
+  const deleteMultipleMemories = useCallback8(async (memoryIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1254,12 +2580,12 @@ function useAgnoMemory() {
   };
 }
 // src/hooks/useAgnoSessionState.ts
-import { useCallback as useCallback8, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useState as useState11 } from "react";
 function useAgnoSessionState() {
   const client = useAgnoClient();
-  const [sessionState, setLocalSessionState] = useState8(() => client.getSessionState());
-  const [isRefreshing, setIsRefreshing] = useState8(() => client.getState().isSessionStateRefreshing ?? false);
-  useEffect7(() => {
+  const [sessionState, setLocalSessionState] = useState11(() => client.getSessionState());
+  const [isRefreshing, setIsRefreshing] = useState11(() => client.getState().isSessionStateRefreshing ?? false);
+  useEffect9(() => {
     const handleStateChange = (state) => {
       setLocalSessionState(state);
     };
@@ -1276,16 +2602,16 @@ function useAgnoSessionState() {
       client.off("session-state:refresh:end", handleRefreshEnd);
     };
   }, [client]);
-  const setSessionState = useCallback8(async (next) => {
+  const setSessionState = useCallback9(async (next) => {
     const resolved = typeof next === "function" ? next(client.getSessionState()) : next;
     await client.setSessionState(resolved);
   }, [client]);
-  const mergeSessionState = useCallback8(async (partial) => {
+  const mergeSessionState = useCallback9(async (partial) => {
     const current = client.getSessionState() ?? {};
     const merged = { ...current, ...partial };
     await client.setSessionState(merged);
   }, [client]);
-  const refreshSessionState = useCallback8(async () => {
+  const refreshSessionState = useCallback9(async () => {
     const result = await client.refreshSessionState();
     return result ?? null;
   }, [client]);
@@ -1298,14 +2624,14 @@ function useAgnoSessionState() {
   };
 }
 // src/hooks/useAgnoKnowledge.ts
-import { useState as useState9, useCallback as useCallback9 } from "react";
+import { useState as useState12, useCallback as useCallback10 } from "react";
 function useAgnoKnowledge() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9();
-  const [config, setConfig] = useState9();
-  const [content, setContent] = useState9([]);
-  const getConfig = useCallback9(async (options) => {
+  const [isLoading, setIsLoading] = useState12(false);
+  const [error, setError] = useState12();
+  const [config, setConfig] = useState12();
+  const [content, setContent] = useState12([]);
+  const getConfig = useCallback10(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1320,7 +2646,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const listContent = useCallback9(async (listOptions, options) => {
+  const listContent = useCallback10(async (listOptions, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1335,7 +2661,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContent = useCallback9(async (contentId, options) => {
+  const getContent = useCallback10(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1348,7 +2674,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContentStatus = useCallback9(async (contentId, options) => {
+  const getContentStatus = useCallback10(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1361,7 +2687,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const search = useCallback9(async (request, options) => {
+  const search = useCallback10(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1374,7 +2700,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const uploadContent = useCallback9(async (data, options) => {
+  const uploadContent = useCallback10(async (data, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1389,7 +2715,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateContent = useCallback9(async (contentId, request, options) => {
+  const updateContent = useCallback10(async (contentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1404,7 +2730,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteAllContent = useCallback9(async (options) => {
+  const deleteAllContent = useCallback10(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1418,7 +2744,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteContent = useCallback9(async (contentId, options) => {
+  const deleteContent = useCallback10(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1450,14 +2776,14 @@ function useAgnoKnowledge() {
   };
 }
 // src/hooks/useAgnoMetrics.ts
-import { useState as useState10, useCallback as useCallback10 } from "react";
+import { useState as useState13, useCallback as useCallback11 } from "react";
 function useAgnoMetrics() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = useState10(false);
-  const [isRefreshing, setIsRefreshing] = useState10(false);
-  const [error, setError] = useState10();
-  const [metrics, setMetrics] = useState10();
-  const fetchMetrics = useCallback10(async (options) => {
+  const [isLoading, setIsLoading] = useState13(false);
+  const [isRefreshing, setIsRefreshing] = useState13(false);
+  const [error, setError] = useState13();
+  const [metrics, setMetrics] = useState13();
+  const fetchMetrics = useCallback11(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1472,7 +2798,7 @@ function useAgnoMetrics() {
       setIsLoading(false);
     }
   }, [client]);
-  const refreshMetrics = useCallback10(async (options) => {
+  const refreshMetrics = useCallback11(async (options) => {
     setIsRefreshing(true);
     setError(undefined);
     try {
@@ -1486,7 +2812,7 @@ function useAgnoMetrics() {
       setIsRefreshing(false);
     }
   }, [client]);
-  const clearMetrics = useCallback10(() => {
+  const clearMetrics = useCallback11(() => {
     setMetrics(undefined);
     setError(undefined);
   }, []);
@@ -1501,14 +2827,14 @@ function useAgnoMetrics() {
   };
 }
 // src/hooks/useAgnoEvals.ts
-import { useState as useState11, useCallback as useCallback11 } from "react";
+import { useState as useState14, useCallback as useCallback12 } from "react";
 function useAgnoEvals() {
   const client = useAgnoClient();
-  const [evalRuns, setEvalRuns] = useState11([]);
-  const [pagination, setPagination] = useState11();
-  const [isLoading, setIsLoading] = useState11(false);
-  const [error, setError] = useState11();
-  const listEvalRuns = useCallback11(async (listParams = {}, options) => {
+  const [evalRuns, setEvalRuns] = useState14([]);
+  const [pagination, setPagination] = useState14();
+  const [isLoading, setIsLoading] = useState14(false);
+  const [error, setError] = useState14();
+  const listEvalRuns = useCallback12(async (listParams = {}, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1524,7 +2850,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const getEvalRun = useCallback11(async (evalRunId, options) => {
+  const getEvalRun = useCallback12(async (evalRunId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1537,7 +2863,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const executeEval = useCallback11(async (request, options) => {
+  const executeEval = useCallback12(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1552,7 +2878,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateEvalRun = useCallback11(async (evalRunId, request, options) => {
+  const updateEvalRun = useCallback12(async (evalRunId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1567,7 +2893,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteEvalRuns = useCallback11(async (evalRunIds, options) => {
+  const deleteEvalRuns = useCallback12(async (evalRunIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1582,7 +2908,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const renameEvalRun = useCallback11(async (evalRunId, newName, options) => {
+  const renameEvalRun = useCallback12(async (evalRunId, newName, options) => {
     return updateEvalRun(evalRunId, { name: newName }, options);
   }, [updateEvalRun]);
   return {
@@ -1599,14 +2925,14 @@ function useAgnoEvals() {
   };
 }
 // src/hooks/useAgnoTraces.ts
-import { useState as useState12, useEffect as useEffect8, useCallback as useCallback12 } from "react";
+import { useState as useState15, useEffect as useEffect10, useCallback as useCallback13 } from "react";
 function useAgnoTraces() {
   const client = useAgnoClient();
-  const [traces, setTraces] = useState12([]);
-  const [traceSessionStats, setTraceSessionStats] = useState12([]);
-  const [isLoading, setIsLoading] = useState12(false);
-  const [error, setError] = useState12();
-  useEffect8(() => {
+  const [traces, setTraces] = useState15([]);
+  const [traceSessionStats, setTraceSessionStats] = useState15([]);
+  const [isLoading, setIsLoading] = useState15(false);
+  const [error, setError] = useState15();
+  useEffect10(() => {
     const handleStateChange = () => {
       const state2 = client.getState();
       setTraces(state2.traces);
@@ -1620,7 +2946,7 @@ function useAgnoTraces() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchTraces = useCallback12(async (options = {}, requestOptions) => {
+  const fetchTraces = useCallback13(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1635,7 +2961,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const getTraceDetail = useCallback12(async (traceId, options = {}, requestOptions) => {
+  const getTraceDetail = useCallback13(async (traceId, options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1648,7 +2974,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchTraceSessionStats = useCallback12(async (options = {}, requestOptions) => {
+  const fetchTraceSessionStats = useCallback13(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1674,13 +3000,13 @@ function useAgnoTraces() {
   };
 }
 // src/hooks/useAgnoComponents.ts
-import { useState as useState13, useEffect as useEffect9, useCallback as useCallback13 } from "react";
+import { useState as useState16, useEffect as useEffect11, useCallback as useCallback14 } from "react";
 function useAgnoComponents() {
   const client = useAgnoClient();
-  const [components, setComponents] = useState13([]);
-  const [isLoading, setIsLoading] = useState13(false);
-  const [error, setError] = useState13();
-  useEffect9(() => {
+  const [components, setComponents] = useState16([]);
+  const [isLoading, setIsLoading] = useState16(false);
+  const [error, setError] = useState16();
+  useEffect11(() => {
     const handleComponentCreated = (component) => {
       setComponents((prev) => [component, ...prev]);
     };
@@ -1705,7 +3031,7 @@ function useAgnoComponents() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchComponents = useCallback13(async (queryParams, options) => {
+  const fetchComponents = useCallback14(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1720,7 +3046,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getComponentById = useCallback13(async (componentId, options) => {
+  const getComponentById = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1733,7 +3059,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const createComponent = useCallback13(async (request, options) => {
+  const createComponent = useCallback14(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1746,7 +3072,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateComponent = useCallback13(async (componentId, request, options) => {
+  const updateComponent = useCallback14(async (componentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1759,7 +3085,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteComponent = useCallback13(async (componentId, options) => {
+  const deleteComponent = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1772,7 +3098,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchComponentConfigs = useCallback13(async (componentId, options) => {
+  const fetchComponentConfigs = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1785,7 +3111,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const createComponentConfig = useCallback13(async (componentId, request, options) => {
+  const createComponentConfig = useCallback14(async (componentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1798,7 +3124,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getCurrentComponentConfig = useCallback13(async (componentId, options) => {
+  const getCurrentComponentConfig = useCallback14(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1811,7 +3137,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getComponentConfigByVersion = useCallback13(async (componentId, version, options) => {
+  const getComponentConfigByVersion = useCallback14(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1824,7 +3150,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateComponentConfig = useCallback13(async (componentId, version, request, options) => {
+  const updateComponentConfig = useCallback14(async (componentId, version, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1837,7 +3163,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteComponentConfig = useCallback13(async (componentId, version, options) => {
+  const deleteComponentConfig = useCallback14(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1850,7 +3176,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const setCurrentComponentConfig = useCallback13(async (componentId, version, options) => {
+  const setCurrentComponentConfig = useCallback14(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1888,6 +3214,7 @@ export {
   useAgnoSessionState,
   useAgnoSession,
   useAgnoMetrics,
+  useAgnoMessageContext,
   useAgnoMemory,
   useAgnoKnowledge,
   useAgnoEvals,
@@ -1900,10 +3227,6 @@ export {
   resultWithSmartChart,
   resultWithCardGrid,
   resultWithBarChart,
-  registerChartComponent,
-  getCustomRender,
-  getComponentRegistry,
-  getChartComponent,
   createToolResult,
   createTable,
   createSmartChart,
@@ -1916,10 +3239,18 @@ export {
   createBarChart,
   createArtifact,
   createAreaChart,
+  byToolName,
   ToolHandlerProvider,
-  GenerativeUIRenderer,
-  ComponentRegistry,
-  AgnoProvider
+  ToolDebugCard,
+  AgnoProvider,
+  AgnoMessageTools,
+  AgnoMessageReferences,
+  AgnoMessageReasoning,
+  AgnoMessageMedia,
+  AgnoMessageFooter,
+  AgnoMessageContext,
+  AgnoMessageContent,
+  AgnoMessage
 };
 
-//# debugId=001BF048D0CD48E164756E2164756E21
+//# debugId=D4A0A1768653051B64756E2164756E21