@rodrigocoliveira/agno-react 1.4.0 → 2.1.0

package/dist/index.js

@@ -48,6 +48,7 @@ __export(exports_src, {
   useAgnoSessionState: () => useAgnoSessionState,
   useAgnoSession: () => useAgnoSession,
   useAgnoMetrics: () => useAgnoMetrics,
+  useAgnoMessageContext: () => useAgnoMessageContext,
   useAgnoMemory: () => useAgnoMemory,
   useAgnoKnowledge: () => useAgnoKnowledge,
   useAgnoEvals: () => useAgnoEvals,
@@ -60,10 +61,6 @@ __export(exports_src, {
   resultWithSmartChart: () => resultWithSmartChart,
   resultWithCardGrid: () => resultWithCardGrid,
   resultWithBarChart: () => resultWithBarChart,
-  registerChartComponent: () => registerChartComponent,
-  getCustomRender: () => getCustomRender,
-  getComponentRegistry: () => getComponentRegistry,
-  getChartComponent: () => getChartComponent,
   createToolResult: () => createToolResult,
   createTable: () => createTable,
   createSmartChart: () => createSmartChart,
@@ -76,10 +73,18 @@ __export(exports_src, {
   createBarChart: () => createBarChart,
   createArtifact: () => createArtifact,
   createAreaChart: () => createAreaChart,
+  byToolName: () => byToolName,
   ToolHandlerProvider: () => ToolHandlerProvider,
-  GenerativeUIRenderer: () => GenerativeUIRenderer,
-  ComponentRegistry: () => ComponentRegistry,
-  AgnoProvider: () => AgnoProvider
+  ToolDebugCard: () => ToolDebugCard,
+  AgnoProvider: () => AgnoProvider,
+  AgnoMessageTools: () => AgnoMessageTools,
+  AgnoMessageReferences: () => AgnoMessageReferences,
+  AgnoMessageReasoning: () => AgnoMessageReasoning,
+  AgnoMessageMedia: () => AgnoMessageMedia,
+  AgnoMessageFooter: () => AgnoMessageFooter,
+  AgnoMessageContext: () => AgnoMessageContext,
+  AgnoMessageContent: () => AgnoMessageContent,
+  AgnoMessage: () => AgnoMessage
 });
 module.exports = __toCommonJS(exports_src);
 
@@ -138,1026 +143,2331 @@ function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
 function useToolHandlers() {
   return import_react2.useContext(ToolHandlerContext);
 }
-// src/components/GenerativeUIRenderer.tsx
-var import_react4 = __toESM(require("react"));
-
-// src/utils/component-registry.ts
-class ComponentRegistry {
-  static instance;
-  components = new Map;
-  constructor() {}
-  static getInstance() {
-    if (!ComponentRegistry.instance) {
-      ComponentRegistry.instance = new ComponentRegistry;
-    }
-    return ComponentRegistry.instance;
-  }
-  register(type, renderer) {
-    this.components.set(type, renderer);
-  }
-  registerBatch(components) {
-    Object.entries(components).forEach(([type, renderer]) => {
-      this.register(type, renderer);
-    });
-  }
-  get(type) {
-    return this.components.get(type);
-  }
-  has(type) {
-    return this.components.has(type);
-  }
-  unregister(type) {
-    this.components.delete(type);
-  }
-  getRegisteredTypes() {
-    return Array.from(this.components.keys());
-  }
-  clear() {
-    this.components.clear();
-  }
+// 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
-var import_react3 = require("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
+var import_react3 = require("react");
+function useAgnoChat() {
   const client = useAgnoClient();
-  const toolHandlerContext = useToolHandlers();
-  const isTeamMode = client.getConfig().mode === "team";
-  import_react3.useEffect(() => {
-    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 = import_react3.useMemo(() => {
-    const globalHandlers = toolHandlerContext?.handlers || {};
-    return { ...globalHandlers, ...handlers };
-  }, [toolHandlerContext?.handlers, handlers]);
-  const [pendingTools, setPendingTools] = import_react3.useState([]);
-  const [isPaused, setIsPaused] = import_react3.useState(false);
-  const [isExecuting, setIsExecuting] = import_react3.useState(false);
-  const [executionError, setExecutionError] = import_react3.useState();
+  const [messages, setMessages] = import_react3.useState(client.getMessages());
+  const [state, setState] = import_react3.useState(client.getState());
   import_react3.useEffect(() => {
-    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 = import_react3.useCallback(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 = import_react3.useCallback(async (message, options) => {
+    try {
+      await client.sendMessage(message, options);
+    } catch (err) {
+      throw err;
     }
-  }, [client, mergedHandlers, isPaused, pendingTools]);
-  import_react3.useEffect(() => {
-    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 = import_react3.useCallback(() => {
+    client.clearMessages();
+    setMessages([]);
+  }, [client]);
+  const cancelRun = import_react3.useCallback(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
+var import_react4 = require("react");
+function useAgnoSession() {
+  const client = useAgnoClient();
+  const [sessions, setSessions] = import_react4.useState([]);
+  const [currentSessionId, setCurrentSessionId] = import_react4.useState(client.getConfig().sessionId);
+  const [isLoading, setIsLoading] = import_react4.useState(false);
+  const [error, setError] = import_react4.useState();
+  import_react4.useEffect(() => {
+    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 = import_react3.useCallback(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 = import_react3.useCallback(async (tools, options2) => {
-    if (!isPaused) {
-      throw new Error("No paused run to continue");
+  }, [client]);
+  const loadSession = import_react4.useCallback(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 = import_react4.useCallback(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]);
-  import_react3.useEffect(() => {
-    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
-      executeAndContinue();
+  }, [client]);
+  const getSessionById = import_react4.useCallback(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
-var jsx_runtime3 = require("react/jsx-runtime");
-
-class UIErrorBoundary extends import_react4.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("[GenerativeUIRenderer] Error rendering component:", error, errorInfo);
-    this.props.onError?.(error);
-  }
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback || /* @__PURE__ */ jsx_runtime3.jsxs("div", {
-        className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800",
-        children: [
-          /* @__PURE__ */ jsx_runtime3.jsx("p", {
-            className: "font-semibold",
-            children: "Failed to render UI component"
-          }),
-          /* @__PURE__ */ jsx_runtime3.jsx("p", {
-            className: "text-sm mt-1",
-            children: this.state.error?.message || "Unknown error"
-          })
-        ]
-      });
+  }, [client]);
+  const getRunById = import_react4.useCallback(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__ */ jsx_runtime3.jsx(UIErrorBoundary, {
-          onError,
-          children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
-            className,
-            children: renderFn(customSpec.props || {})
-          })
-        });
-      }
+  }, [client]);
+  const createSession = import_react4.useCallback(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__ */ jsx_runtime3.jsxs("div", {
-      className: `p-4 border border-yellow-300 rounded-md bg-yellow-50 text-yellow-800 ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx_runtime3.jsx("p", {
-          className: "font-semibold",
-          children: "Custom component not available"
-        }),
-        /* @__PURE__ */ jsx_runtime3.jsx("p", {
-          className: "text-sm mt-1",
-          children: "The custom render function for this component is not available."
-        })
-      ]
-    });
-  }
-  if (spec.type === "chart") {
-    const chartSpec = spec;
-    const chartType = `chart:${chartSpec.component}`;
-    if (registry.has(chartType)) {
-      const ChartRenderer = registry.get(chartType);
-      return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
-          className,
-          children: [
-            chartSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
-              className: "font-semibold mb-2",
-              children: chartSpec.title
-            }),
-            chartSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
-              className: "text-sm text-gray-600 mb-4",
-              children: chartSpec.description
-            }),
-            /* @__PURE__ */ jsx_runtime3.jsx(ChartRenderer, {
-              ...chartSpec.props
-            })
-          ]
-        })
-      });
+  }, [client]);
+  const updateSession = import_react4.useCallback(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__ */ jsx_runtime3.jsxs("div", {
-      className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx_runtime3.jsx("p", {
-          className: "font-semibold mb-2",
-          children: chartSpec.title || "Chart Data"
-        }),
-        chartSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
-          className: "text-sm text-gray-600 mb-2",
-          children: chartSpec.description
-        }),
-        /* @__PURE__ */ jsx_runtime3.jsx("pre", {
-          className: "text-xs bg-gray-100 p-2 rounded overflow-auto",
-          children: JSON.stringify(chartSpec.props.data, null, 2)
-        })
-      ]
-    });
-  }
-  if (spec.type === "card-grid") {
-    const cardGridSpec = spec;
-    if (registry.has("card-grid")) {
-      const CardGridRenderer = registry.get("card-grid");
-      return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
-          className,
-          children: [
-            cardGridSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
-              className: "font-semibold mb-2",
-              children: cardGridSpec.title
-            }),
-            cardGridSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
-              className: "text-sm text-gray-600 mb-4",
-              children: cardGridSpec.description
-            }),
-            /* @__PURE__ */ jsx_runtime3.jsx(CardGridRenderer, {
-              ...cardGridSpec.props
-            })
-          ]
-        })
-      });
+  }, [client]);
+  const renameSession = import_react4.useCallback(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__ */ jsx_runtime3.jsx(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
-          className,
-          children: [
-            tableSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
-              className: "font-semibold mb-2",
-              children: tableSpec.title
-            }),
-            tableSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
-              className: "text-sm text-gray-600 mb-4",
-              children: tableSpec.description
-            }),
-            /* @__PURE__ */ jsx_runtime3.jsx(TableRenderer, {
-              ...tableSpec.props
-            })
-          ]
-        })
-      });
+  }, [client]);
+  const deleteSession = import_react4.useCallback(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__ */ jsx_runtime3.jsx(UIErrorBoundary, {
-        onError,
-        children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
-          className,
-          children: /* @__PURE__ */ jsx_runtime3.jsx(MarkdownRenderer, {
-            ...markdownSpec.props
-          })
-        })
-      });
+  }, [client]);
+  const deleteMultipleSessions = import_react4.useCallback(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__ */ jsx_runtime3.jsx("div", {
-      className,
-      children: markdownSpec.props.content
-    });
-  }
-  if (spec.type === "artifact") {
-    const artifactSpec = spec;
-    return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
-      onError,
-      children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
-        className: `p-4 border rounded-md ${className || ""}`,
-        children: [
-          artifactSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
-            className: "font-semibold mb-4",
-            children: artifactSpec.title
-          }),
-          artifactSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
-            className: "text-sm text-gray-600 mb-4",
-            children: artifactSpec.description
-          }),
-          /* @__PURE__ */ jsx_runtime3.jsx("div", {
-            className: "space-y-4",
-            children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsx_runtime3.jsx(GenerativeUIRenderer, {
-              spec: childSpec,
-              onError
-            }, index))
-          })
-        ]
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
-    className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
-    children: [
-      /* @__PURE__ */ jsx_runtime3.jsx("p", {
-        className: "font-semibold",
-        children: "Unsupported UI component"
-      }),
-      /* @__PURE__ */ jsx_runtime3.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
+var import_react5 = require("react");
+function useAgnoActions() {
+  const client = useAgnoClient();
+  const [isInitializing, setIsInitializing] = import_react5.useState(false);
+  const [error, setError] = import_react5.useState();
+  const initialize = import_react5.useCallback(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);
     }
-  };
-}
-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
+  }, [client]);
+  const checkStatus = import_react5.useCallback(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;
     }
-  };
-}
-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
+  }, [client]);
+  const fetchAgents = import_react5.useCallback(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;
     }
-  };
-}
-function createCardGrid(cards, options) {
+  }, [client]);
+  const fetchTeams = import_react5.useCallback(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 = import_react5.useCallback((updates) => {
+    client.updateConfig(updates);
+  }, [client]);
   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 createCard(id, title, description, options) {
-  return {
-    id,
-    title,
-    description,
-    image: options?.image,
-    metadata: options?.metadata,
-    actions: options?.actions
+    initialize,
+    checkStatus,
+    fetchAgents,
+    fetchTeams,
+    updateConfig,
+    isInitializing,
+    error
   };
 }
-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/hooks/useAgnoToolExecution.ts
+var import_react6 = require("react");
+function isToolHandlerResult(value) {
+  return value && typeof value === "object" && (("data" in value) || ("ui" in value));
 }
-function createColumn(key, header, options) {
-  return {
-    key,
-    header,
-    width: options?.width,
-    sortable: options?.sortable,
-    cellType: options?.cellType || "text",
-    format: options?.format
-  };
+function isUIComponentSpec(value) {
+  return value && typeof value === "object" && "type" in value;
 }
-function createMarkdown(content, options) {
+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: "markdown",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      content,
-      syntaxHighlight: options?.syntaxHighlight ?? true
-    }
+    resultData: typeof result === "string" ? result : JSON.stringify(result),
+    uiComponent: undefined
   };
 }
-function createArtifact(content, options) {
-  return {
-    type: "artifact",
-    title: options?.title,
-    description: options?.description,
-    props: {
-      content,
-      variant: options?.variant || "default"
+function useAgnoToolExecution(handlers = {}, autoExecute = true, options) {
+  const client = useAgnoClient();
+  const toolHandlerContext = useToolHandlers();
+  const isTeamMode = client.getConfig().mode === "team";
+  import_react6.useEffect(() => {
+    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.");
     }
-  };
-}
-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);
+  }, [isTeamMode]);
+  const mergedHandlers = import_react6.useMemo(() => {
+    const globalHandlers = toolHandlerContext?.handlers || {};
+    return { ...globalHandlers, ...handlers };
+  }, [toolHandlerContext?.handlers, handlers]);
+  const [pendingTools, setPendingTools] = import_react6.useState([]);
+  const [isPaused, setIsPaused] = import_react6.useState(false);
+  const [isExecuting, setIsExecuting] = import_react6.useState(false);
+  const [executionError, setExecutionError] = import_react6.useState();
+  import_react6.useEffect(() => {
+    if (isTeamMode) {
+      return;
     }
-  }
-  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 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
-var import_react5 = require("react");
-function useAgnoChat() {
-  const client = useAgnoClient();
-  const [messages, setMessages] = import_react5.useState(client.getMessages());
-  const [state, setState] = import_react5.useState(client.getState());
-  import_react5.useEffect(() => {
-    const handleMessageUpdate = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleMessageComplete = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleMessageRefreshed = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleStateChange = (newState) => {
-      setState(newState);
+    const handleRunPaused = (event) => {
+      setIsPaused(true);
+      setPendingTools(event.tools);
+      setExecutionError(undefined);
     };
-    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 handleRunContinued = () => {
+      setIsPaused(false);
+      setPendingTools([]);
+      setIsExecuting(false);
+      setExecutionError(undefined);
     };
-    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());
+    client.on("run:paused", handleRunPaused);
+    client.on("run:continued", handleRunContinued);
     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.off("run:paused", handleRunPaused);
+      client.off("run:continued", handleRunContinued);
     };
-  }, [client]);
-  const sendMessage = import_react5.useCallback(async (message, options) => {
+  }, [client, isTeamMode]);
+  const executeAndContinue = import_react6.useCallback(async () => {
+    if (!isPaused || pendingTools.length === 0) {
+      console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
+      return;
+    }
+    setIsExecuting(true);
+    setExecutionError(undefined);
     try {
-      await client.sendMessage(message, options);
-    } catch (err) {
-      throw err;
+      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]);
-  const clearMessages = import_react5.useCallback(() => {
-    client.clearMessages();
-    setMessages([]);
-  }, [client]);
-  const cancelRun = import_react5.useCallback(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
+  }, [client, mergedHandlers, isPaused, pendingTools]);
+  import_react6.useEffect(() => {
+    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 = import_react6.useCallback(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 = import_react6.useCallback(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]);
+  import_react6.useEffect(() => {
+    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
+      executeAndContinue();
+    }
+  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
+  return {
+    isPaused,
+    isExecuting,
+    pendingTools,
+    executeAndContinue,
+    executeTools,
+    continueWithResults,
+    executionError
+  };
+}
+// src/ui/composed/agno-chat/render-tool.ts
+function byToolName(map, fallback) {
+  return (tool, args) => {
+    if (!Object.prototype.hasOwnProperty.call(map, tool.tool_name)) {
+      return fallback ? fallback(tool, args) : args.defaultRender();
+    }
+    const entry = map[tool.tool_name];
+    if (entry === false)
+      return null;
+    return entry(tool, args);
+  };
+}
+// src/ui/primitives/badge.tsx
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/ui/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return import_tailwind_merge.twMerge(import_clsx.clsx(inputs));
+}
+
+// src/ui/primitives/badge.tsx
+var jsx_runtime3 = require("react/jsx-runtime");
+var badgeVariants = import_class_variance_authority.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__ */ jsx_runtime3.jsx("div", {
+    className: cn(badgeVariants({ variant }), className),
+    ...props
+  });
+}
+
+// src/ui/primitives/collapsible.tsx
+var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+// src/ui/components/tool.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_react8 = require("react");
+
+// src/ui/primitives/button.tsx
+var React3 = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+var jsx_runtime4 = require("react/jsx-runtime");
+var buttonVariants = import_class_variance_authority2.cva("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 ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ jsx_runtime4.jsx(Comp, {
+    className: cn(buttonVariants({ variant, size, className })),
+    ref,
+    ...props
+  });
+});
+Button.displayName = "Button";
+
+// src/ui/components/code-block.tsx
+var import_lucide_react = require("lucide-react");
+var import_react7 = require("react");
+var jsx_runtime5 = require("react/jsx-runtime");
+var CodeBlockContext = import_react7.createContext({
+  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] = import_react7.useState("");
+  const [darkHtml, setDarkHtml] = import_react7.useState("");
+  const effectIdRef = import_react7.useRef(0);
+  import_react7.useEffect(() => {
+    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__ */ jsx_runtime5.jsx(CodeBlockContext.Provider, {
+    value: { code },
+    children: /* @__PURE__ */ jsx_runtime5.jsx("div", {
+      className: cn("group relative w-full overflow-hidden rounded-md border bg-background text-foreground", className),
+      ...props,
+      children: /* @__PURE__ */ jsx_runtime5.jsxs("div", {
+        className: "relative",
+        children: [
+          useFallback ? /* @__PURE__ */ jsx_runtime5.jsx("pre", {
+            className: "m-0 overflow-auto bg-background p-4 text-foreground text-sm",
+            children: /* @__PURE__ */ jsx_runtime5.jsx("code", {
+              className: "font-mono text-sm",
+              children: code
+            })
+          }) : /* @__PURE__ */ jsx_runtime5.jsxs(jsx_runtime5.Fragment, {
+            children: [
+              /* @__PURE__ */ jsx_runtime5.jsx("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__ */ jsx_runtime5.jsx("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__ */ jsx_runtime5.jsx("div", {
+            className: "absolute top-2 right-2 flex items-center gap-2",
+            children
+          })
+        ]
+      })
+    })
+  });
+};
+
+// src/ui/components/tool.tsx
+var jsx_runtime6 = require("react/jsx-runtime");
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx_runtime6.jsx(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__ */ jsx_runtime6.jsx(import_lucide_react2.CircleIcon, {
+      className: "size-4"
+    }),
+    "input-available": /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.ClockIcon, {
+      className: "size-4 animate-pulse"
+    }),
+    "approval-requested": /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.ClockIcon, {
+      className: "size-4 text-yellow-600"
+    }),
+    "approval-responded": /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.CheckCircleIcon, {
+      className: "size-4 text-blue-600"
+    }),
+    "output-available": /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.CheckCircleIcon, {
+      className: "size-4 text-green-600"
+    }),
+    "output-error": /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.XCircleIcon, {
+      className: "size-4 text-red-600"
+    }),
+    "output-denied": /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.XCircleIcon, {
+      className: "size-4 text-orange-600"
+    })
   };
+  return /* @__PURE__ */ jsx_runtime6.jsxs(Badge, {
+    className: "gap-1.5 rounded-full text-xs",
+    variant: "secondary",
+    children: [
+      icons[status],
+      labels[status]
+    ]
+  });
+};
+var ToolHeader = ({ className, title, type, state, ...props }) => /* @__PURE__ */ jsx_runtime6.jsxs(CollapsibleTrigger2, {
+  className: cn("group flex w-full items-center justify-between gap-4 p-3", className),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx_runtime6.jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [
+        /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.WrenchIcon, {
+          className: "size-4 text-muted-foreground"
+        }),
+        /* @__PURE__ */ jsx_runtime6.jsx("span", {
+          className: "font-medium text-sm",
+          children: title ?? type?.split("-").slice(1).join("-") ?? "Tool"
+        }),
+        getStatusBadge(state)
+      ]
+    }),
+    /* @__PURE__ */ jsx_runtime6.jsx(import_lucide_react2.ChevronDownIcon, {
+      className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+    })
+  ]
+});
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx_runtime6.jsx(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__ */ jsx_runtime6.jsxs("div", {
+  className: cn("space-y-2 overflow-hidden p-4", className),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx_runtime6.jsx("h4", {
+      className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+      children: "Parameters"
+    }),
+    /* @__PURE__ */ jsx_runtime6.jsx("div", {
+      className: "rounded-md bg-muted/50",
+      children: /* @__PURE__ */ jsx_runtime6.jsx(CodeBlock, {
+        code: JSON.stringify(input, null, 2),
+        language: "json"
+      })
+    })
+  ]
+});
+var ToolOutput = ({ className, output, errorText, ...props }) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ jsx_runtime6.jsx("div", {
+    children: output
+  });
+  if (typeof output === "object" && !import_react8.isValidElement(output)) {
+    Output = /* @__PURE__ */ jsx_runtime6.jsx(CodeBlock, {
+      code: JSON.stringify(output, null, 2),
+      language: "json"
+    });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ jsx_runtime6.jsx(CodeBlock, {
+      code: output,
+      language: "json"
+    });
+  }
+  return /* @__PURE__ */ jsx_runtime6.jsxs("div", {
+    className: cn("space-y-2 p-4", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx_runtime6.jsx("h4", {
+        className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+        children: errorText ? "Error" : "Result"
+      }),
+      /* @__PURE__ */ jsx_runtime6.jsxs("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__ */ jsx_runtime6.jsx("div", {
+            children: errorText
+          }),
+          Output
+        ]
+      })
+    ]
+  });
+};
+
+// src/ui/composed/agno-chat/tool-building-blocks.tsx
+var jsx_runtime7 = require("react/jsx-runtime");
+var getToolState = (tool) => tool.tool_call_error ? "output-error" : "output-available";
+function ToolDebugCard({ tool, defaultOpen }) {
+  const output = tool.result ?? tool.content;
+  return /* @__PURE__ */ jsx_runtime7.jsxs(Tool, {
+    defaultOpen,
+    children: [
+      /* @__PURE__ */ jsx_runtime7.jsx(ToolHeader, {
+        title: tool.tool_name,
+        type: "tool-use",
+        state: getToolState(tool)
+      }),
+      /* @__PURE__ */ jsx_runtime7.jsxs(ToolContent, {
+        children: [
+          /* @__PURE__ */ jsx_runtime7.jsx(ToolInput, {
+            input: tool.tool_args
+          }),
+          output ? /* @__PURE__ */ jsx_runtime7.jsx(ToolOutput, {
+            output,
+            errorText: tool.tool_call_error ? "Tool execution failed" : undefined
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+// src/ui/composed/agno-message/message.tsx
+var import_react13 = require("react");
+var import_lucide_react12 = require("lucide-react");
+
+// src/ui/primitives/tooltip.tsx
+var React4 = __toESM(require("react"));
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+var jsx_runtime8 = require("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__ */ jsx_runtime8.jsx(TooltipPrimitive.Portal, {
+  children: /* @__PURE__ */ jsx_runtime8.jsx(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
+var jsx_runtime9 = require("react/jsx-runtime");
+function SmartTimestamp({ date, formatShort, className }) {
+  const shortText = formatShort ? formatShort(date) : formatSmartTimestamp(date);
+  const fullText = formatFullTimestamp(date);
+  return /* @__PURE__ */ jsx_runtime9.jsx(TooltipProvider, {
+    children: /* @__PURE__ */ jsx_runtime9.jsxs(Tooltip, {
+      children: [
+        /* @__PURE__ */ jsx_runtime9.jsx(TooltipTrigger, {
+          asChild: true,
+          children: /* @__PURE__ */ jsx_runtime9.jsx("span", {
+            className,
+            children: shortText
+          })
+        }),
+        /* @__PURE__ */ jsx_runtime9.jsx(TooltipContent, {
+          children: /* @__PURE__ */ jsx_runtime9.jsx("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
+var import_lucide_react3 = require("lucide-react");
+var jsx_runtime10 = require("react/jsx-runtime");
+function ExtBadge({ ext }) {
+  if (!ext)
+    return null;
+  return /* @__PURE__ */ jsx_runtime10.jsx("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__ */ jsx_runtime10.jsxs("button", {
+      type: "button",
+      onClick,
+      disabled: !isClickable,
+      className: cardBase,
+      children: [
+        /* @__PURE__ */ jsx_runtime10.jsx("img", {
+          src: file.url,
+          alt: file.name,
+          className: "w-full h-full object-cover"
+        }),
+        /* @__PURE__ */ jsx_runtime10.jsx(ExtBadge, {
+          ext
+        }),
+        isClickable && /* @__PURE__ */ jsx_runtime10.jsx("div", {
+          className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors",
+          children: /* @__PURE__ */ jsx_runtime10.jsx(import_lucide_react3.Search, {
+            className: "h-5 w-5 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+          })
+        })
+      ]
+    });
+  }
+  if (previewType === "pdf" && file.url) {
+    return /* @__PURE__ */ jsx_runtime10.jsxs("button", {
+      type: "button",
+      onClick,
+      disabled: !isClickable,
+      className: cardBase,
+      children: [
+        /* @__PURE__ */ jsx_runtime10.jsx("div", {
+          className: "w-full h-full overflow-hidden pointer-events-none",
+          children: /* @__PURE__ */ jsx_runtime10.jsx("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__ */ jsx_runtime10.jsx("div", {
+              className: "flex items-center justify-center w-full h-full",
+              children: /* @__PURE__ */ jsx_runtime10.jsx(import_lucide_react3.FileIcon, {
+                className: "h-8 w-8 text-muted-foreground/40"
+              })
+            })
+          })
+        }),
+        /* @__PURE__ */ jsx_runtime10.jsx(ExtBadge, {
+          ext
+        }),
+        isClickable && /* @__PURE__ */ jsx_runtime10.jsx("div", {
+          className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/10 transition-colors",
+          children: /* @__PURE__ */ jsx_runtime10.jsx(import_lucide_react3.Search, {
+            className: "h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+          })
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsx_runtime10.jsxs("button", {
+    type: "button",
+    onClick,
+    disabled: !isClickable,
+    className: cardBase,
+    children: [
+      /* @__PURE__ */ jsx_runtime10.jsx("div", {
+        className: "flex-1 flex items-center justify-center",
+        children: /* @__PURE__ */ jsx_runtime10.jsx(import_lucide_react3.FileIcon, {
+          className: "h-8 w-8 text-muted-foreground/40"
+        })
+      }),
+      /* @__PURE__ */ jsx_runtime10.jsxs("div", {
+        className: "w-full text-center min-w-0 px-2 pb-2 space-y-0.5",
+        children: [
+          /* @__PURE__ */ jsx_runtime10.jsx("p", {
+            className: "text-[10px] text-foreground truncate leading-tight",
+            title: file.name,
+            children: file.name
+          }),
+          file.size != null && file.size > 0 && /* @__PURE__ */ jsx_runtime10.jsx("p", {
+            className: "text-[9px] text-muted-foreground leading-tight",
+            children: formatFileSize(file.size)
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx_runtime10.jsx(ExtBadge, {
+        ext
+      })
+    ]
+  });
+}
+
+// src/ui/primitives/dialog.tsx
+var React5 = __toESM(require("react"));
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_lucide_react4 = require("lucide-react");
+var jsx_runtime11 = require("react/jsx-runtime");
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx_runtime11.jsx(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 = import_class_variance_authority3.cva("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__ */ jsx_runtime11.jsxs(DialogPortal, {
+  children: [
+    /* @__PURE__ */ jsx_runtime11.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx_runtime11.jsxs(DialogPrimitive.Content, {
+      ref,
+      className: cn(dialogContentVariants({ variant }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx_runtime11.jsxs(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__ */ jsx_runtime11.jsx(import_lucide_react4.X, {
+              className: "h-4 w-4"
+            }),
+            /* @__PURE__ */ jsx_runtime11.jsx("span", {
+              className: "sr-only",
+              children: "Close"
+            })
+          ]
+        })
+      ]
+    })
+  ]
+}));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx_runtime11.jsx("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__ */ jsx_runtime11.jsx("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__ */ jsx_runtime11.jsx(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__ */ jsx_runtime11.jsx(DialogPrimitive.Description, {
+  ref,
+  className: cn("text-sm text-muted-foreground", className),
+  ...props
+}));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/ui/components/file-preview-modal.tsx
+var import_lucide_react5 = require("lucide-react");
+var jsx_runtime12 = require("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__ */ jsx_runtime12.jsx(Dialog, {
+    open,
+    onOpenChange,
+    children: previewType === "image" && file.url ? /* @__PURE__ */ jsx_runtime12.jsxs(DialogContent, {
+      variant: "lightbox",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx_runtime12.jsx(DialogTitle, {
+          className: "sr-only",
+          children: file.name
+        }),
+        /* @__PURE__ */ jsx_runtime12.jsx("img", {
+          src: file.url,
+          alt: file.name,
+          className: "max-h-[85vh] max-w-full object-contain rounded-md"
+        })
+      ]
+    }) : previewType === "pdf" && file.url ? /* @__PURE__ */ jsx_runtime12.jsxs(DialogContent, {
+      variant: "lightbox",
+      className: "w-[80vw] h-[85vh]",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx_runtime12.jsx(DialogTitle, {
+          className: "sr-only",
+          children: file.name
+        }),
+        /* @__PURE__ */ jsx_runtime12.jsx("object", {
+          data: file.url,
+          type: "application/pdf",
+          className: "w-full h-full rounded-md",
+          children: /* @__PURE__ */ jsx_runtime12.jsxs("div", {
+            className: "flex flex-col items-center justify-center h-full gap-3 text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime12.jsx("p", {
+                className: "text-sm",
+                children: "Unable to display PDF"
+              }),
+              /* @__PURE__ */ jsx_runtime12.jsxs("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__ */ jsx_runtime12.jsx(import_lucide_react5.Download, {
+                    className: "h-4 w-4"
+                  }),
+                  "Download ",
+                  file.name
+                ]
+              })
+            ]
+          })
+        })
+      ]
+    }) : /* @__PURE__ */ jsx_runtime12.jsxs(DialogContent, {
+      children: [
+        /* @__PURE__ */ jsx_runtime12.jsxs(DialogHeader, {
+          children: [
+            /* @__PURE__ */ jsx_runtime12.jsxs(DialogTitle, {
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx_runtime12.jsx(import_lucide_react5.FileIcon, {
+                  className: "h-5 w-5 text-muted-foreground"
+                }),
+                file.name
+              ]
+            }),
+            /* @__PURE__ */ jsx_runtime12.jsxs(DialogDescription, {
+              children: [
+                file.size != null && file.size > 0 && /* @__PURE__ */ jsx_runtime12.jsx("span", {
+                  children: formatFileSize(file.size)
+                }),
+                !canPreview && /* @__PURE__ */ jsx_runtime12.jsx("span", {
+                  children: " · Preview not available for this file type"
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx_runtime12.jsxs("div", {
+          className: "flex flex-col items-center justify-center py-8 text-muted-foreground gap-3",
+          children: [
+            /* @__PURE__ */ jsx_runtime12.jsx(import_lucide_react5.FileIcon, {
+              className: "h-12 w-12"
+            }),
+            /* @__PURE__ */ jsx_runtime12.jsx("p", {
+              className: "text-sm",
+              children: "Preview not available"
+            }),
+            file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsx_runtime12.jsxs("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__ */ jsx_runtime12.jsx(import_lucide_react5.Download, {
+                  className: "h-4 w-4"
+                }),
+                "Download file"
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+// src/ui/components/image-lightbox.tsx
+var import_react9 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var jsx_runtime13 = require("react/jsx-runtime");
+function ImageLightbox({ open, onOpenChange, images, initialIndex = 0 }) {
+  const [currentIndex, setCurrentIndex] = import_react9.useState(initialIndex);
+  const hasMultiple = images.length > 1;
+  import_react9.useEffect(() => {
+    if (open)
+      setCurrentIndex(initialIndex);
+  }, [open, initialIndex]);
+  const goNext = import_react9.useCallback(() => {
+    setCurrentIndex((i) => (i + 1) % images.length);
+  }, [images.length]);
+  const goPrev = import_react9.useCallback(() => {
+    setCurrentIndex((i) => (i - 1 + images.length) % images.length);
+  }, [images.length]);
+  import_react9.useEffect(() => {
+    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__ */ jsx_runtime13.jsx(Dialog, {
+    open,
+    onOpenChange,
+    children: /* @__PURE__ */ jsx_runtime13.jsxs(DialogContent, {
+      variant: "lightbox",
+      "aria-describedby": undefined,
+      children: [
+        /* @__PURE__ */ jsx_runtime13.jsx(DialogTitle, {
+          className: "sr-only",
+          children: current.alt || `Image ${currentIndex + 1} of ${images.length}`
+        }),
+        /* @__PURE__ */ jsx_runtime13.jsxs("div", {
+          className: "relative flex items-center justify-center",
+          children: [
+            /* @__PURE__ */ jsx_runtime13.jsx("img", {
+              src: current.url,
+              alt: current.alt || "Image preview",
+              className: "max-h-[85vh] max-w-full object-contain rounded-md"
+            }),
+            hasMultiple && /* @__PURE__ */ jsx_runtime13.jsxs(jsx_runtime13.Fragment, {
+              children: [
+                /* @__PURE__ */ jsx_runtime13.jsxs("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__ */ jsx_runtime13.jsx(import_lucide_react6.ChevronLeft, {
+                      className: "h-5 w-5"
+                    }),
+                    /* @__PURE__ */ jsx_runtime13.jsx("span", {
+                      className: "sr-only",
+                      children: "Previous image"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx_runtime13.jsxs("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__ */ jsx_runtime13.jsx(import_lucide_react6.ChevronRight, {
+                      className: "h-5 w-5"
+                    }),
+                    /* @__PURE__ */ jsx_runtime13.jsx("span", {
+                      className: "sr-only",
+                      children: "Next image"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx_runtime13.jsxs("div", {
+                  className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white",
+                  children: [
+                    currentIndex + 1,
+                    " / ",
+                    images.length
+                  ]
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+// src/ui/composed/agno-message/context.ts
+var import_react10 = require("react");
+var AgnoMessageContext = import_react10.createContext(null);
+function useAgnoMessageContext() {
+  const ctx = import_react10.useContext(AgnoMessageContext);
+  if (!ctx) {
+    throw new Error("useAgnoMessageContext must be used within an <AgnoMessage> provider. " + "Wrap your slots with <AgnoMessage message={...}>.");
+  }
+  return ctx;
+}
+
+// src/ui/composed/agno-message/reasoning.tsx
+var import_lucide_react8 = require("lucide-react");
+
+// src/ui/primitives/accordion.tsx
+var React6 = __toESM(require("react"));
+var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
+var import_lucide_react7 = require("lucide-react");
+var jsx_runtime14 = require("react/jsx-runtime");
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx_runtime14.jsx(AccordionPrimitive.Item, {
+  ref,
+  className: cn("border-b", className),
+  ...props
+}));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx_runtime14.jsx(AccordionPrimitive.Header, {
+  className: "flex",
+  children: /* @__PURE__ */ jsx_runtime14.jsxs(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__ */ jsx_runtime14.jsx(import_lucide_react7.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__ */ jsx_runtime14.jsx(AccordionPrimitive.Content, {
+  ref,
+  className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+  ...props,
+  children: /* @__PURE__ */ jsx_runtime14.jsx("div", {
+    className: cn("pb-4 pt-0", className),
+    children
+  })
+}));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/ui/composed/agno-message/reasoning.tsx
+var jsx_runtime15 = require("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__ */ jsx_runtime15.jsxs("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.reasoning),
+    children: [
+      /* @__PURE__ */ jsx_runtime15.jsxs("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx_runtime15.jsx(import_lucide_react8.Lightbulb, {
+            className: "h-3.5 w-3.5"
+          }),
+          "Reasoning (",
+          steps.length,
+          " steps)"
+        ]
+      }),
+      /* @__PURE__ */ jsx_runtime15.jsx(Accordion, {
+        type: "multiple",
+        className: "w-full",
+        children: steps.map((step, idx) => /* @__PURE__ */ jsx_runtime15.jsxs(AccordionItem, {
+          value: `reasoning-${idx}`,
+          className: "border-muted",
+          children: [
+            /* @__PURE__ */ jsx_runtime15.jsx(AccordionTrigger, {
+              className: "text-xs py-1.5 hover:no-underline",
+              children: step.title || `Step ${idx + 1}`
+            }),
+            /* @__PURE__ */ jsx_runtime15.jsxs(AccordionContent, {
+              className: "space-y-1.5 text-xs text-muted-foreground",
+              children: [
+                step.action && /* @__PURE__ */ jsx_runtime15.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime15.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Action:"
+                    }),
+                    " ",
+                    step.action
+                  ]
+                }),
+                step.reasoning && /* @__PURE__ */ jsx_runtime15.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime15.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Reasoning:"
+                    }),
+                    " ",
+                    step.reasoning
+                  ]
+                }),
+                step.result && /* @__PURE__ */ jsx_runtime15.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime15.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Result:"
+                    }),
+                    " ",
+                    step.result
+                  ]
+                }),
+                step.confidence !== undefined && /* @__PURE__ */ jsx_runtime15.jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime15.jsx("span", {
+                      className: "font-medium text-foreground",
+                      children: "Confidence:"
+                    }),
+                    " ",
+                    (step.confidence * 100).toFixed(1),
+                    "%"
+                  ]
+                })
+              ]
+            })
+          ]
+        }, idx))
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-message/media.tsx
+var import_lucide_react9 = require("lucide-react");
+var jsx_runtime16 = require("react/jsx-runtime");
+function AgnoMessageMedia() {
+  const {
+    message,
+    classNames,
+    showImageLightbox,
+    showFilePreview,
+    openImageLightbox,
+    openFilePreview
+  } = useAgnoMessageContext();
+  const mediaClassName = classNames?.assistant?.media;
+  const hasImages = !!message.images && message.images.length > 0;
+  const hasVideos = !!message.videos && message.videos.length > 0;
+  const hasAudio = !!message.audio && message.audio.length > 0;
+  const hasFiles = !!message.files && message.files.length > 0;
+  const hasResponseAudio = !!message.response_audio;
+  if (!hasImages && !hasVideos && !hasAudio && !hasFiles && !hasResponseAudio)
+    return null;
+  return /* @__PURE__ */ jsx_runtime16.jsxs(jsx_runtime16.Fragment, {
+    children: [
+      hasImages && /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime16.jsx(import_lucide_react9.Image, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Images (",
+              message.images.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime16.jsx("div", {
+            className: "grid grid-cols-2 gap-2",
+            children: message.images.map((img, idx) => /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+              className: "space-y-1",
+              children: [
+                showImageLightbox ? /* @__PURE__ */ jsx_runtime16.jsx("button", {
+                  type: "button",
+                  onClick: () => openImageLightbox(message.images.map((i) => ({ url: i.url, alt: i.revised_prompt })), idx),
+                  className: "group relative w-full overflow-hidden rounded-lg border border-border cursor-pointer hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors",
+                  children: /* @__PURE__ */ jsx_runtime16.jsx("img", {
+                    src: img.url,
+                    alt: img.revised_prompt || "Generated image",
+                    className: "w-full rounded-lg"
+                  })
+                }) : /* @__PURE__ */ jsx_runtime16.jsx("img", {
+                  src: img.url,
+                  alt: img.revised_prompt || "Generated image",
+                  className: "w-full rounded-lg border border-border"
+                }),
+                img.revised_prompt && /* @__PURE__ */ jsx_runtime16.jsx("p", {
+                  className: "text-[11px] text-muted-foreground italic px-0.5",
+                  children: img.revised_prompt
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasVideos && /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime16.jsx(import_lucide_react9.Video, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Videos (",
+              message.videos.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime16.jsx("div", {
+            className: "space-y-2",
+            children: message.videos.map((video, idx) => /* @__PURE__ */ jsx_runtime16.jsx("div", {
+              children: video.url ? /* @__PURE__ */ jsx_runtime16.jsx("video", {
+                src: video.url,
+                controls: true,
+                className: "w-full rounded-lg border border-border"
+              }) : /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+                className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
+                children: [
+                  "Video ID: ",
+                  video.id,
+                  " (ETA: ",
+                  video.eta,
+                  "s)"
+                ]
+              })
+            }, idx))
+          })
+        ]
+      }),
+      hasAudio && /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime16.jsx(import_lucide_react9.Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Audio (",
+              message.audio.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime16.jsx("div", {
+            className: "space-y-2",
+            children: message.audio.map((audio, idx) => /* @__PURE__ */ jsx_runtime16.jsx("div", {
+              children: audio.url ? /* @__PURE__ */ jsx_runtime16.jsx("audio", {
+                src: audio.url,
+                controls: true,
+                className: "w-full"
+              }) : audio.base64_audio ? /* @__PURE__ */ jsx_runtime16.jsx("audio", {
+                src: `data:${audio.mime_type || "audio/wav"};base64,${audio.base64_audio}`,
+                controls: true,
+                className: "w-full"
+              }) : /* @__PURE__ */ jsx_runtime16.jsx("div", {
+                className: "bg-muted/50 border border-border p-2.5 rounded-lg text-xs text-muted-foreground",
+                children: "Audio data unavailable"
+              })
+            }, idx))
+          })
+        ]
+      }),
+      hasFiles && /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime16.jsx(import_lucide_react9.Paperclip, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Files (",
+              message.files.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime16.jsx("div", {
+            className: "flex flex-wrap gap-2",
+            children: message.files.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime16.jsx(FilePreviewCard, {
+              file: { name: file.name, type: file.type, url: file.url, size: file.size },
+              onClick: () => openFilePreview({ name: file.name, type: file.type, url: file.url, size: file.size })
+            }, idx) : /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+              className: "flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs bg-muted/30 hover:bg-muted/50 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx_runtime16.jsx(import_lucide_react9.FileIcon, {
+                  className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                }),
+                /* @__PURE__ */ jsx_runtime16.jsx("span", {
+                  className: "truncate max-w-[180px]",
+                  children: file.name
+                }),
+                file.size && /* @__PURE__ */ jsx_runtime16.jsxs("span", {
+                  className: "text-muted-foreground/70",
+                  children: [
+                    "(",
+                    (file.size / 1024).toFixed(1),
+                    "KB)"
+                  ]
+                }),
+                file.url && /^https?:\/\//i.test(file.url) && /* @__PURE__ */ jsx_runtime16.jsx("a", {
+                  href: file.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-primary hover:underline font-medium",
+                  children: "View"
+                })
+              ]
+            }, idx))
+          })
+        ]
+      }),
+      hasResponseAudio && message.response_audio && /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+        className: cn("space-y-2 pt-1", mediaClassName),
+        children: [
+          /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+            className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx_runtime16.jsx(import_lucide_react9.Music, {
+                className: "h-3.5 w-3.5"
+              }),
+              "Response Audio"
+            ]
+          }),
+          message.response_audio.transcript && /* @__PURE__ */ jsx_runtime16.jsxs("div", {
+            className: "text-xs italic bg-muted/50 border border-border p-2.5 rounded-lg text-muted-foreground",
+            children: [
+              '"',
+              message.response_audio.transcript,
+              '"'
+            ]
+          }),
+          message.response_audio.content && /* @__PURE__ */ jsx_runtime16.jsx("audio", {
+            src: `data:audio/wav;base64,${message.response_audio.content}`,
+            controls: true,
+            className: "w-full"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-chat/context.ts
+var import_react11 = require("react");
+var AgnoChatContext = import_react11.createContext(null);
+function useAgnoChatContext() {
+  const ctx = import_react11.useContext(AgnoChatContext);
+  if (!ctx) {
+    throw new Error("useAgnoChatContext must be used within an <AgnoChat> provider. " + "Wrap your component tree with <AgnoChat>.");
+  }
+  return ctx;
+}
+
+// src/ui/composed/agno-message/tools.tsx
+var jsx_runtime17 = require("react/jsx-runtime");
+function AgnoMessageTools({ renderTool: renderToolProp } = {}) {
+  const { message, classNames, renderTool: ctxMsgRenderTool } = useAgnoMessageContext();
+  const { renderTool: ctxChatRenderTool, isDebug } = useAgnoChatContext();
+  const renderTool = renderToolProp ?? ctxMsgRenderTool ?? ctxChatRenderTool;
+  if (!message.tool_calls || message.tool_calls.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx_runtime17.jsx("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.toolCalls),
+    children: message.tool_calls.map((tool, idx) => {
+      const defaultRender = () => isDebug ? /* @__PURE__ */ jsx_runtime17.jsx(ToolDebugCard, {
+        tool,
+        defaultOpen: idx === 0
+      }) : null;
+      const node = renderTool ? renderTool(tool, { index: idx, isDebug, defaultRender }) : defaultRender();
+      if (node === null || node === undefined)
+        return null;
+      return /* @__PURE__ */ jsx_runtime17.jsx("div", {
+        children: node
+      }, tool.tool_call_id || idx);
+    })
+  });
+}
+
+// src/ui/components/response.tsx
+var import_react12 = require("react");
+var import_streamdown = require("streamdown");
+var jsx_runtime18 = require("react/jsx-runtime");
+var Response = import_react12.memo(({ className, ...props }) => /* @__PURE__ */ jsx_runtime18.jsx(import_streamdown.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
+var jsx_runtime19 = require("react/jsx-runtime");
+function AgnoMessageContent() {
+  const { message } = useAgnoMessageContext();
+  if (!message.content)
+    return null;
+  return /* @__PURE__ */ jsx_runtime19.jsx("div", {
+    className: "prose prose-sm dark:prose-invert max-w-none prose-p:leading-relaxed prose-pre:bg-muted prose-pre:border prose-pre:border-border",
+    children: /* @__PURE__ */ jsx_runtime19.jsx(Response, {
+      children: message.content
+    })
+  });
+}
+
+// src/ui/composed/agno-message/references.tsx
+var import_lucide_react10 = require("lucide-react");
+var jsx_runtime20 = require("react/jsx-runtime");
+function AgnoMessageReferences() {
+  const { message, classNames } = useAgnoMessageContext();
+  const references = message.extra_data?.references;
+  if (!references || references.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx_runtime20.jsxs("div", {
+    className: cn("space-y-2 pt-1", classNames?.assistant?.references),
+    children: [
+      /* @__PURE__ */ jsx_runtime20.jsxs("div", {
+        className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx_runtime20.jsx(import_lucide_react10.FileText, {
+            className: "h-3.5 w-3.5"
+          }),
+          "References (",
+          references.length,
+          ")"
+        ]
+      }),
+      /* @__PURE__ */ jsx_runtime20.jsx("div", {
+        className: "space-y-2",
+        children: references.map((refData, idx) => /* @__PURE__ */ jsx_runtime20.jsxs("div", {
+          className: "text-xs space-y-1.5",
+          children: [
+            refData.query && /* @__PURE__ */ jsx_runtime20.jsxs("div", {
+              className: "font-medium text-foreground",
+              children: [
+                "Query: ",
+                refData.query
+              ]
+            }),
+            refData.references.map((ref, refIdx) => /* @__PURE__ */ jsx_runtime20.jsxs("div", {
+              className: "bg-muted/50 border border-border p-2.5 rounded-lg",
+              children: [
+                /* @__PURE__ */ jsx_runtime20.jsxs("div", {
+                  className: "italic text-muted-foreground mb-1",
+                  children: [
+                    '"',
+                    ref.content,
+                    '"'
+                  ]
+                }),
+                /* @__PURE__ */ jsx_runtime20.jsxs("div", {
+                  className: "text-muted-foreground/70",
+                  children: [
+                    "Source: ",
+                    ref.name,
+                    " (chunk ",
+                    ref.meta_data.chunk,
+                    "/",
+                    ref.meta_data.chunk_size,
+                    ")"
+                  ]
+                })
+              ]
+            }, refIdx))
+          ]
+        }, idx))
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-message/footer.tsx
+var import_lucide_react11 = require("lucide-react");
+var jsx_runtime21 = require("react/jsx-runtime");
+function AgnoMessageFooter({ showTimestamp = true } = {}) {
+  const { message, classNames, actions, isLastAssistantMessage, formatTimestamp } = useAgnoMessageContext();
+  const hasError = message.streamingError;
+  const isCustomTimestamp = !!formatTimestamp;
+  const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
+  if (!actions?.assistant && !showTimestamp && !hasError)
+    return null;
+  return /* @__PURE__ */ jsx_runtime21.jsxs("div", {
+    className: "flex items-center gap-2 pt-1",
+    children: [
+      actions?.assistant && (() => {
+        const visibility = actions.visibility ?? "visible";
+        if (visibility === "last-assistant" && !isLastAssistantMessage)
+          return null;
+        const useHover = visibility === "hover" || visibility === "hover-last-visible" && !isLastAssistantMessage;
+        return /* @__PURE__ */ jsx_runtime21.jsx("div", {
+          className: cn("flex items-center gap-1 transition-opacity", useHover && "opacity-0 group-hover/message:opacity-100", classNames?.assistant?.actions),
+          children: actions.assistant(message)
+        });
+      })(),
+      hasError && /* @__PURE__ */ jsx_runtime21.jsxs("span", {
+        className: "flex items-center gap-1 text-[11px] text-destructive",
+        children: [
+          /* @__PURE__ */ jsx_runtime21.jsx(import_lucide_react11.AlertCircle, {
+            className: "h-3 w-3"
+          }),
+          "Error"
+        ]
+      }),
+      showTimestamp && /* @__PURE__ */ jsx_runtime21.jsx(SmartTimestamp, {
+        date: new Date(message.created_at * 1000),
+        formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
+        className: "text-[11px] text-muted-foreground"
+      })
+    ]
+  });
+}
+
+// src/ui/composed/agno-message/message.tsx
+var jsx_runtime22 = require("react/jsx-runtime");
+function DefaultAssistantComposition({ showTimestamp }) {
+  return /* @__PURE__ */ jsx_runtime22.jsxs(jsx_runtime22.Fragment, {
+    children: [
+      /* @__PURE__ */ jsx_runtime22.jsx(AgnoMessageReasoning, {}),
+      /* @__PURE__ */ jsx_runtime22.jsx(AgnoMessageMedia, {}),
+      /* @__PURE__ */ jsx_runtime22.jsx(AgnoMessageTools, {}),
+      /* @__PURE__ */ jsx_runtime22.jsx(AgnoMessageContent, {}),
+      /* @__PURE__ */ jsx_runtime22.jsx(AgnoMessageReferences, {}),
+      /* @__PURE__ */ jsx_runtime22.jsx(AgnoMessageFooter, {
+        showTimestamp
+      })
+    ]
+  });
 }
-// src/hooks/useAgnoSession.ts
-var import_react6 = require("react");
-function useAgnoSession() {
-  const client = useAgnoClient();
-  const [sessions, setSessions] = import_react6.useState([]);
-  const [currentSessionId, setCurrentSessionId] = import_react6.useState(client.getConfig().sessionId);
-  const [isLoading, setIsLoading] = import_react6.useState(false);
-  const [error, setError] = import_react6.useState();
-  import_react6.useEffect(() => {
-    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 = import_react6.useCallback(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 = import_react6.useCallback(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 = import_react6.useCallback(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 = import_react6.useCallback(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 = import_react6.useCallback(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 = import_react6.useCallback(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 = import_react6.useCallback(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 = import_react6.useCallback(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 = import_react6.useCallback(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] = import_react13.useState(null);
+  const isCustomTimestamp = !!formatTimestamp;
+  const resolvedFormatTimestamp = formatTimestamp ?? formatSmartTimestamp;
+  const ctx = import_react13.useMemo(() => ({
+    message,
+    isLastAssistantMessage,
+    classNames,
+    actions,
+    avatars,
+    formatTimestamp,
+    showFilePreview,
+    showImageLightbox,
+    openImageLightbox: (images, index) => {
+      if (!showImageLightbox)
+        return;
+      setPreview({ type: "image", images, initialIndex: index });
+    },
+    openFilePreview: (file) => {
+      if (!showFilePreview)
+        return;
+      setPreview({ type: "file", file });
+    },
+    renderTool
+  }), [
+    message,
+    isLastAssistantMessage,
+    classNames,
+    actions,
+    avatars,
+    formatTimestamp,
+    showFilePreview,
+    showImageLightbox,
+    renderTool
+  ]);
+  const closePreview = () => setPreview(null);
+  return /* @__PURE__ */ jsx_runtime22.jsx(AgnoMessageContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx_runtime22.jsxs("div", {
+      className: cn("py-5 first:pt-2", isUser ? "flex justify-end" : "", classNames?.root, className),
+      children: [
+        isUser ? /* @__PURE__ */ jsx_runtime22.jsx(UserMessageLayout, {
+          message,
+          classNames,
+          avatars,
+          actions,
+          isCustomTimestamp,
+          resolvedFormatTimestamp,
+          showTimestamp,
+          showImageLightbox,
+          showFilePreview,
+          openImageLightbox: ctx.openImageLightbox,
+          openFilePreview: ctx.openFilePreview,
+          hasError
+        }) : /* @__PURE__ */ jsx_runtime22.jsxs("div", {
+          className: "flex items-start gap-3 group/message",
+          children: [
+            avatars?.assistant,
+            /* @__PURE__ */ jsx_runtime22.jsx("div", {
+              className: cn("flex-1 min-w-0 space-y-3", classNames?.assistant?.container),
+              children: children ?? /* @__PURE__ */ jsx_runtime22.jsx(DefaultAssistantComposition, {
+                showTimestamp
+              })
+            })
+          ]
+        }),
+        preview?.type === "image" && /* @__PURE__ */ jsx_runtime22.jsx(ImageLightbox, {
+          open: true,
+          onOpenChange: (open) => {
+            if (!open)
+              closePreview();
+          },
+          images: preview.images,
+          initialIndex: preview.initialIndex
+        }),
+        preview?.type === "file" && /* @__PURE__ */ jsx_runtime22.jsx(FilePreviewModal, {
+          open: true,
+          onOpenChange: (open) => {
+            if (!open)
+              closePreview();
+          },
+          file: preview.file
+        })
+      ]
+    })
+  });
 }
-// src/hooks/useAgnoActions.ts
-var import_react7 = require("react");
-function useAgnoActions() {
-  const client = useAgnoClient();
-  const [isInitializing, setIsInitializing] = import_react7.useState(false);
-  const [error, setError] = import_react7.useState();
-  const initialize = import_react7.useCallback(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 = import_react7.useCallback(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 = import_react7.useCallback(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 = import_react7.useCallback(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 = import_react7.useCallback((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__ */ jsx_runtime22.jsxs("div", {
+    className: "flex items-start gap-2.5 max-w-[80%] flex-row-reverse",
+    children: [
+      avatars?.user,
+      /* @__PURE__ */ jsx_runtime22.jsxs("div", {
+        className: "space-y-1.5 flex flex-col items-end min-w-0",
+        children: [
+          (message.images && message.images.length > 0 || message.audio && message.audio.length > 0 || message.files && message.files.length > 0) && /* @__PURE__ */ jsx_runtime22.jsxs("div", {
+            className: "flex flex-wrap gap-2 justify-end",
+            children: [
+              message.images?.map((img, idx) => /* @__PURE__ */ jsx_runtime22.jsx(FilePreviewCard, {
+                file: { name: img.revised_prompt || `Image ${idx + 1}`, type: "image/png", url: img.url },
+                onClick: showImageLightbox ? () => openImageLightbox(message.images.map((i) => ({ url: i.url, alt: i.revised_prompt })), idx) : undefined
+              }, `img-${idx}`)),
+              message.audio?.map((audio, idx) => /* @__PURE__ */ jsx_runtime22.jsxs("div", {
+                className: "flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-2.5 py-1.5 text-xs text-foreground self-end",
+                children: [
+                  /* @__PURE__ */ jsx_runtime22.jsx(import_lucide_react12.Music, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
+                  }),
+                  /* @__PURE__ */ jsx_runtime22.jsx("span", {
+                    className: "truncate max-w-[150px]",
+                    children: audio.id || `Audio ${idx + 1}`
+                  })
+                ]
+              }, `audio-${idx}`)),
+              message.files?.map((file, idx) => showFilePreview ? /* @__PURE__ */ jsx_runtime22.jsx(FilePreviewCard, {
+                file: { name: file.name, type: file.type, url: file.url, size: file.size },
+                onClick: () => openFilePreview({ name: file.name, type: file.type, url: file.url, size: file.size })
+              }, `file-${idx}`) : /* @__PURE__ */ jsx_runtime22.jsxs("div", {
+                className: "flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-2.5 py-1.5 text-xs text-foreground self-end",
+                children: [
+                  /* @__PURE__ */ jsx_runtime22.jsx(import_lucide_react12.FileIcon, {
+                    className: "h-3.5 w-3.5 text-muted-foreground"
+                  }),
+                  /* @__PURE__ */ jsx_runtime22.jsx("span", {
+                    className: "truncate max-w-[150px]",
+                    children: file.name
+                  })
+                ]
+              }, `file-${idx}`))
+            ]
+          }),
+          message.content && /* @__PURE__ */ jsx_runtime22.jsx("div", {
+            className: cn("rounded-2xl rounded-br-md px-4 py-2.5", classNames?.user?.bubble ?? "bg-primary text-primary-foreground", hasError && "opacity-70"),
+            children: /* @__PURE__ */ jsx_runtime22.jsx("p", {
+              className: "text-sm whitespace-pre-wrap",
+              children: message.content
+            })
+          }),
+          (showTimestamp || actions?.user) && /* @__PURE__ */ jsx_runtime22.jsxs("div", {
+            className: "flex items-center justify-end gap-1.5 px-1",
+            children: [
+              actions?.user && /* @__PURE__ */ jsx_runtime22.jsx("div", {
+                className: "flex items-center gap-1",
+                children: actions.user(message)
+              }),
+              /* @__PURE__ */ jsx_runtime22.jsx(SmartTimestamp, {
+                date: new Date(message.created_at * 1000),
+                formatShort: isCustomTimestamp ? resolvedFormatTimestamp : undefined,
+                className: "text-[11px] text-muted-foreground"
+              }),
+              hasError && /* @__PURE__ */ jsx_runtime22.jsx(import_lucide_react12.AlertCircle, {
+                className: "h-3 w-3 text-destructive"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
 }
 // src/hooks/useAgnoCustomEvents.ts
-var import_react8 = require("react");
+var import_react14 = require("react");
 function useAgnoCustomEvents(handler) {
   const client = useAgnoClient();
-  const [events, setEvents] = import_react8.useState([]);
-  const handlerRef = import_react8.useRef(handler);
+  const [events, setEvents] = import_react14.useState([]);
+  const handlerRef = import_react14.useRef(handler);
   handlerRef.current = handler;
-  import_react8.useEffect(() => {
+  import_react14.useEffect(() => {
     const handleCustomEvent = (event) => {
       setEvents((prev) => [...prev, event]);
       handlerRef.current?.(event);
@@ -1167,20 +2477,20 @@ function useAgnoCustomEvents(handler) {
       client.off("custom:event", handleCustomEvent);
     };
   }, [client]);
-  const clearEvents = import_react8.useCallback(() => {
+  const clearEvents = import_react14.useCallback(() => {
     setEvents([]);
   }, []);
   return { events, clearEvents };
 }
 // src/hooks/useAgnoMemory.ts
-var import_react9 = require("react");
+var import_react15 = require("react");
 function useAgnoMemory() {
   const client = useAgnoClient();
-  const [memories, setMemories] = import_react9.useState([]);
-  const [topics, setTopics] = import_react9.useState([]);
-  const [isLoading, setIsLoading] = import_react9.useState(false);
-  const [error, setError] = import_react9.useState();
-  import_react9.useEffect(() => {
+  const [memories, setMemories] = import_react15.useState([]);
+  const [topics, setTopics] = import_react15.useState([]);
+  const [isLoading, setIsLoading] = import_react15.useState(false);
+  const [error, setError] = import_react15.useState();
+  import_react15.useEffect(() => {
     const handleMemoryCreated = (memory) => {
       setMemories((prev) => [memory, ...prev]);
     };
@@ -1215,7 +2525,7 @@ function useAgnoMemory() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchMemories = import_react9.useCallback(async (queryParams, options) => {
+  const fetchMemories = import_react15.useCallback(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1230,7 +2540,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getMemoryById = import_react9.useCallback(async (memoryId, options) => {
+  const getMemoryById = import_react15.useCallback(async (memoryId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1243,7 +2553,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getMemoryTopics = import_react9.useCallback(async (options) => {
+  const getMemoryTopics = import_react15.useCallback(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1258,7 +2568,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const getUserMemoryStats = import_react9.useCallback(async (queryParams, options) => {
+  const getUserMemoryStats = import_react15.useCallback(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1271,7 +2581,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const createMemory = import_react9.useCallback(async (request, options) => {
+  const createMemory = import_react15.useCallback(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1284,7 +2594,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateMemory = import_react9.useCallback(async (memoryId, request, options) => {
+  const updateMemory = import_react15.useCallback(async (memoryId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1297,7 +2607,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteMemory = import_react9.useCallback(async (memoryId, options) => {
+  const deleteMemory = import_react15.useCallback(async (memoryId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1310,7 +2620,7 @@ function useAgnoMemory() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteMultipleMemories = import_react9.useCallback(async (memoryIds, options) => {
+  const deleteMultipleMemories = import_react15.useCallback(async (memoryIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1339,12 +2649,12 @@ function useAgnoMemory() {
   };
 }
 // src/hooks/useAgnoSessionState.ts
-var import_react10 = require("react");
+var import_react16 = require("react");
 function useAgnoSessionState() {
   const client = useAgnoClient();
-  const [sessionState, setLocalSessionState] = import_react10.useState(() => client.getSessionState());
-  const [isRefreshing, setIsRefreshing] = import_react10.useState(() => client.getState().isSessionStateRefreshing ?? false);
-  import_react10.useEffect(() => {
+  const [sessionState, setLocalSessionState] = import_react16.useState(() => client.getSessionState());
+  const [isRefreshing, setIsRefreshing] = import_react16.useState(() => client.getState().isSessionStateRefreshing ?? false);
+  import_react16.useEffect(() => {
     const handleStateChange = (state) => {
       setLocalSessionState(state);
     };
@@ -1361,16 +2671,16 @@ function useAgnoSessionState() {
       client.off("session-state:refresh:end", handleRefreshEnd);
     };
   }, [client]);
-  const setSessionState = import_react10.useCallback(async (next) => {
+  const setSessionState = import_react16.useCallback(async (next) => {
     const resolved = typeof next === "function" ? next(client.getSessionState()) : next;
     await client.setSessionState(resolved);
   }, [client]);
-  const mergeSessionState = import_react10.useCallback(async (partial) => {
+  const mergeSessionState = import_react16.useCallback(async (partial) => {
     const current = client.getSessionState() ?? {};
     const merged = { ...current, ...partial };
     await client.setSessionState(merged);
   }, [client]);
-  const refreshSessionState = import_react10.useCallback(async () => {
+  const refreshSessionState = import_react16.useCallback(async () => {
     const result = await client.refreshSessionState();
     return result ?? null;
   }, [client]);
@@ -1383,14 +2693,14 @@ function useAgnoSessionState() {
   };
 }
 // src/hooks/useAgnoKnowledge.ts
-var import_react11 = require("react");
+var import_react17 = require("react");
 function useAgnoKnowledge() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = import_react11.useState(false);
-  const [error, setError] = import_react11.useState();
-  const [config, setConfig] = import_react11.useState();
-  const [content, setContent] = import_react11.useState([]);
-  const getConfig = import_react11.useCallback(async (options) => {
+  const [isLoading, setIsLoading] = import_react17.useState(false);
+  const [error, setError] = import_react17.useState();
+  const [config, setConfig] = import_react17.useState();
+  const [content, setContent] = import_react17.useState([]);
+  const getConfig = import_react17.useCallback(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1405,7 +2715,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const listContent = import_react11.useCallback(async (listOptions, options) => {
+  const listContent = import_react17.useCallback(async (listOptions, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1420,7 +2730,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContent = import_react11.useCallback(async (contentId, options) => {
+  const getContent = import_react17.useCallback(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1433,7 +2743,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContentStatus = import_react11.useCallback(async (contentId, options) => {
+  const getContentStatus = import_react17.useCallback(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1446,7 +2756,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const search = import_react11.useCallback(async (request, options) => {
+  const search = import_react17.useCallback(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1459,7 +2769,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const uploadContent = import_react11.useCallback(async (data, options) => {
+  const uploadContent = import_react17.useCallback(async (data, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1474,7 +2784,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateContent = import_react11.useCallback(async (contentId, request, options) => {
+  const updateContent = import_react17.useCallback(async (contentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1489,7 +2799,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteAllContent = import_react11.useCallback(async (options) => {
+  const deleteAllContent = import_react17.useCallback(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1503,7 +2813,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteContent = import_react11.useCallback(async (contentId, options) => {
+  const deleteContent = import_react17.useCallback(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1535,14 +2845,14 @@ function useAgnoKnowledge() {
   };
 }
 // src/hooks/useAgnoMetrics.ts
-var import_react12 = require("react");
+var import_react18 = require("react");
 function useAgnoMetrics() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = import_react12.useState(false);
-  const [isRefreshing, setIsRefreshing] = import_react12.useState(false);
-  const [error, setError] = import_react12.useState();
-  const [metrics, setMetrics] = import_react12.useState();
-  const fetchMetrics = import_react12.useCallback(async (options) => {
+  const [isLoading, setIsLoading] = import_react18.useState(false);
+  const [isRefreshing, setIsRefreshing] = import_react18.useState(false);
+  const [error, setError] = import_react18.useState();
+  const [metrics, setMetrics] = import_react18.useState();
+  const fetchMetrics = import_react18.useCallback(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1557,7 +2867,7 @@ function useAgnoMetrics() {
       setIsLoading(false);
     }
   }, [client]);
-  const refreshMetrics = import_react12.useCallback(async (options) => {
+  const refreshMetrics = import_react18.useCallback(async (options) => {
     setIsRefreshing(true);
     setError(undefined);
     try {
@@ -1571,7 +2881,7 @@ function useAgnoMetrics() {
       setIsRefreshing(false);
     }
   }, [client]);
-  const clearMetrics = import_react12.useCallback(() => {
+  const clearMetrics = import_react18.useCallback(() => {
     setMetrics(undefined);
     setError(undefined);
   }, []);
@@ -1586,14 +2896,14 @@ function useAgnoMetrics() {
   };
 }
 // src/hooks/useAgnoEvals.ts
-var import_react13 = require("react");
+var import_react19 = require("react");
 function useAgnoEvals() {
   const client = useAgnoClient();
-  const [evalRuns, setEvalRuns] = import_react13.useState([]);
-  const [pagination, setPagination] = import_react13.useState();
-  const [isLoading, setIsLoading] = import_react13.useState(false);
-  const [error, setError] = import_react13.useState();
-  const listEvalRuns = import_react13.useCallback(async (listParams = {}, options) => {
+  const [evalRuns, setEvalRuns] = import_react19.useState([]);
+  const [pagination, setPagination] = import_react19.useState();
+  const [isLoading, setIsLoading] = import_react19.useState(false);
+  const [error, setError] = import_react19.useState();
+  const listEvalRuns = import_react19.useCallback(async (listParams = {}, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1609,7 +2919,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const getEvalRun = import_react13.useCallback(async (evalRunId, options) => {
+  const getEvalRun = import_react19.useCallback(async (evalRunId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1622,7 +2932,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const executeEval = import_react13.useCallback(async (request, options) => {
+  const executeEval = import_react19.useCallback(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1637,7 +2947,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateEvalRun = import_react13.useCallback(async (evalRunId, request, options) => {
+  const updateEvalRun = import_react19.useCallback(async (evalRunId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1652,7 +2962,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteEvalRuns = import_react13.useCallback(async (evalRunIds, options) => {
+  const deleteEvalRuns = import_react19.useCallback(async (evalRunIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1667,7 +2977,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const renameEvalRun = import_react13.useCallback(async (evalRunId, newName, options) => {
+  const renameEvalRun = import_react19.useCallback(async (evalRunId, newName, options) => {
     return updateEvalRun(evalRunId, { name: newName }, options);
   }, [updateEvalRun]);
   return {
@@ -1684,14 +2994,14 @@ function useAgnoEvals() {
   };
 }
 // src/hooks/useAgnoTraces.ts
-var import_react14 = require("react");
+var import_react20 = require("react");
 function useAgnoTraces() {
   const client = useAgnoClient();
-  const [traces, setTraces] = import_react14.useState([]);
-  const [traceSessionStats, setTraceSessionStats] = import_react14.useState([]);
-  const [isLoading, setIsLoading] = import_react14.useState(false);
-  const [error, setError] = import_react14.useState();
-  import_react14.useEffect(() => {
+  const [traces, setTraces] = import_react20.useState([]);
+  const [traceSessionStats, setTraceSessionStats] = import_react20.useState([]);
+  const [isLoading, setIsLoading] = import_react20.useState(false);
+  const [error, setError] = import_react20.useState();
+  import_react20.useEffect(() => {
     const handleStateChange = () => {
       const state2 = client.getState();
       setTraces(state2.traces);
@@ -1705,7 +3015,7 @@ function useAgnoTraces() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchTraces = import_react14.useCallback(async (options = {}, requestOptions) => {
+  const fetchTraces = import_react20.useCallback(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1720,7 +3030,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const getTraceDetail = import_react14.useCallback(async (traceId, options = {}, requestOptions) => {
+  const getTraceDetail = import_react20.useCallback(async (traceId, options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1733,7 +3043,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchTraceSessionStats = import_react14.useCallback(async (options = {}, requestOptions) => {
+  const fetchTraceSessionStats = import_react20.useCallback(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1759,13 +3069,13 @@ function useAgnoTraces() {
   };
 }
 // src/hooks/useAgnoComponents.ts
-var import_react15 = require("react");
+var import_react21 = require("react");
 function useAgnoComponents() {
   const client = useAgnoClient();
-  const [components, setComponents] = import_react15.useState([]);
-  const [isLoading, setIsLoading] = import_react15.useState(false);
-  const [error, setError] = import_react15.useState();
-  import_react15.useEffect(() => {
+  const [components, setComponents] = import_react21.useState([]);
+  const [isLoading, setIsLoading] = import_react21.useState(false);
+  const [error, setError] = import_react21.useState();
+  import_react21.useEffect(() => {
     const handleComponentCreated = (component) => {
       setComponents((prev) => [component, ...prev]);
     };
@@ -1790,7 +3100,7 @@ function useAgnoComponents() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchComponents = import_react15.useCallback(async (queryParams, options) => {
+  const fetchComponents = import_react21.useCallback(async (queryParams, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1805,7 +3115,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getComponentById = import_react15.useCallback(async (componentId, options) => {
+  const getComponentById = import_react21.useCallback(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1818,7 +3128,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const createComponent = import_react15.useCallback(async (request, options) => {
+  const createComponent = import_react21.useCallback(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1831,7 +3141,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateComponent = import_react15.useCallback(async (componentId, request, options) => {
+  const updateComponent = import_react21.useCallback(async (componentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1844,7 +3154,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteComponent = import_react15.useCallback(async (componentId, options) => {
+  const deleteComponent = import_react21.useCallback(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1857,7 +3167,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchComponentConfigs = import_react15.useCallback(async (componentId, options) => {
+  const fetchComponentConfigs = import_react21.useCallback(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1870,7 +3180,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const createComponentConfig = import_react15.useCallback(async (componentId, request, options) => {
+  const createComponentConfig = import_react21.useCallback(async (componentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1883,7 +3193,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getCurrentComponentConfig = import_react15.useCallback(async (componentId, options) => {
+  const getCurrentComponentConfig = import_react21.useCallback(async (componentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1896,7 +3206,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const getComponentConfigByVersion = import_react15.useCallback(async (componentId, version, options) => {
+  const getComponentConfigByVersion = import_react21.useCallback(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1909,7 +3219,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateComponentConfig = import_react15.useCallback(async (componentId, version, request, options) => {
+  const updateComponentConfig = import_react21.useCallback(async (componentId, version, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1922,7 +3232,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteComponentConfig = import_react15.useCallback(async (componentId, version, options) => {
+  const deleteComponentConfig = import_react21.useCallback(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1935,7 +3245,7 @@ function useAgnoComponents() {
       setIsLoading(false);
     }
   }, [client]);
-  const setCurrentComponentConfig = import_react15.useCallback(async (componentId, version, options) => {
+  const setCurrentComponentConfig = import_react21.useCallback(async (componentId, version, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1967,4 +3277,4 @@ function useAgnoComponents() {
   };
 }
 
-//# debugId=D27FED2F9BD03ABF64756E2164756E21
+//# debugId=6A9B00E27FD63EE064756E2164756E21