@informedai/react 0.4.26 → 0.4.28

package/dist/index.d.mts

@@ -26,6 +26,14 @@ interface WidgetMessage {
     timestamp: string;
     taskContext?: string;
     kbSearch?: KbSearchInfo;
+    agentContext?: {
+        analyticsRun?: {
+            runId: string;
+            query: string;
+            status: string;
+        };
+        triages?: string[];
+    };
 }
 interface QuickAction {
     id: string;
@@ -128,6 +136,8 @@ interface InformedAssistantConfig {
      * Return the current values of all fields as they appear in your UI.
      */
     getCurrentFieldValues?: () => Record<string, unknown>;
+    /** Callback when an analytics run badge is clicked. If not provided, an inline panel is shown. */
+    onAnalyticsRunClick?: (runId: string, query: string, sessionId: string) => void;
     /** Custom theme overrides */
     theme?: Partial<WidgetTheme>;
     /** Position of the widget (for floating mode) */
@@ -152,6 +162,24 @@ interface WidgetTheme {
     /** Font family */
     fontFamily: string;
 }
+interface SqlBreakdown {
+    baseDataset: string;
+    metrics: string[];
+    filters: string[];
+    grouping: string[];
+    sorting: string | null;
+    timeRange: string | null;
+}
+interface AnalyticsRunDetail {
+    id: string;
+    query: string;
+    status: string;
+    generatedSql: string | null;
+    structuredBreakdown: SqlBreakdown | null;
+    result: unknown[] | null;
+    createdAt: string;
+    parentRunId: string | null;
+}
 interface SSEEvent {
     type: 'content' | 'done' | 'error' | 'session_update';
     content?: string;
@@ -345,6 +373,8 @@ interface InformedAIContextValue {
     startNewSession: () => Promise<void>;
     endSession: () => Promise<void>;
     clearError: () => void;
+    onAnalyticsRunClick?: (runId: string, query: string, sessionId: string) => void;
+    getAnalyticsRun: (sessionId: string, runId: string) => Promise<AnalyticsRunDetail>;
 }
 declare function useInformedAI(): InformedAIContextValue;
 interface InformedAIProviderProps {
@@ -463,7 +493,11 @@ declare class InformedAIClient {
      * Returns true if sendBeacon was used, false if fetch fallback was attempted.
      */
     endSessionBeacon(sessionId: string): boolean;
+    /**
+     * Get details of a specific analytics run.
+     */
+    getAnalyticsRun(sessionId: string, runId: string): Promise<AnalyticsRunDetail>;
     private processSSEStream;
 }
 
-export { AdminChatbot, type AdminChatbotConfig, type AdminChatbotTheme, type ChatMessage, type Document, type DocumentType, type DocumentTypeSchema, type FieldDefinition, InformedAIClient, InformedAIProvider, InformedAssistant, type InformedAssistantConfig, type QuickAction, type QuickActionGroup, type SSEEvent, type Session, SmartQuestionnaire, type SmartQuestionnaireConfig, type SmartQuestionnaireTheme, type TaskConfig, type TaskState, type UseSessionReturn, WebsiteChatbot, type WebsiteChatbotConfig, type WebsiteChatbotTheme, type WidgetMessage, type WidgetReadyContext, type WidgetTheme, useInformedAI, useSession };
+export { AdminChatbot, type AdminChatbotConfig, type AdminChatbotTheme, type AnalyticsRunDetail, type ChatMessage, type Document, type DocumentType, type DocumentTypeSchema, type FieldDefinition, InformedAIClient, InformedAIProvider, InformedAssistant, type InformedAssistantConfig, type QuickAction, type QuickActionGroup, type SSEEvent, type Session, SmartQuestionnaire, type SmartQuestionnaireConfig, type SmartQuestionnaireTheme, type SqlBreakdown, type TaskConfig, type TaskState, type UseSessionReturn, WebsiteChatbot, type WebsiteChatbotConfig, type WebsiteChatbotTheme, type WidgetMessage, type WidgetReadyContext, type WidgetTheme, useInformedAI, useSession };

package/dist/index.d.ts

@@ -26,6 +26,14 @@ interface WidgetMessage {
     timestamp: string;
     taskContext?: string;
     kbSearch?: KbSearchInfo;
+    agentContext?: {
+        analyticsRun?: {
+            runId: string;
+            query: string;
+            status: string;
+        };
+        triages?: string[];
+    };
 }
 interface QuickAction {
     id: string;
@@ -128,6 +136,8 @@ interface InformedAssistantConfig {
      * Return the current values of all fields as they appear in your UI.
      */
     getCurrentFieldValues?: () => Record<string, unknown>;
+    /** Callback when an analytics run badge is clicked. If not provided, an inline panel is shown. */
+    onAnalyticsRunClick?: (runId: string, query: string, sessionId: string) => void;
     /** Custom theme overrides */
     theme?: Partial<WidgetTheme>;
     /** Position of the widget (for floating mode) */
@@ -152,6 +162,24 @@ interface WidgetTheme {
     /** Font family */
     fontFamily: string;
 }
+interface SqlBreakdown {
+    baseDataset: string;
+    metrics: string[];
+    filters: string[];
+    grouping: string[];
+    sorting: string | null;
+    timeRange: string | null;
+}
+interface AnalyticsRunDetail {
+    id: string;
+    query: string;
+    status: string;
+    generatedSql: string | null;
+    structuredBreakdown: SqlBreakdown | null;
+    result: unknown[] | null;
+    createdAt: string;
+    parentRunId: string | null;
+}
 interface SSEEvent {
     type: 'content' | 'done' | 'error' | 'session_update';
     content?: string;
@@ -345,6 +373,8 @@ interface InformedAIContextValue {
     startNewSession: () => Promise<void>;
     endSession: () => Promise<void>;
     clearError: () => void;
+    onAnalyticsRunClick?: (runId: string, query: string, sessionId: string) => void;
+    getAnalyticsRun: (sessionId: string, runId: string) => Promise<AnalyticsRunDetail>;
 }
 declare function useInformedAI(): InformedAIContextValue;
 interface InformedAIProviderProps {
@@ -463,7 +493,11 @@ declare class InformedAIClient {
      * Returns true if sendBeacon was used, false if fetch fallback was attempted.
      */
     endSessionBeacon(sessionId: string): boolean;
+    /**
+     * Get details of a specific analytics run.
+     */
+    getAnalyticsRun(sessionId: string, runId: string): Promise<AnalyticsRunDetail>;
     private processSSEStream;
 }
 
-export { AdminChatbot, type AdminChatbotConfig, type AdminChatbotTheme, type ChatMessage, type Document, type DocumentType, type DocumentTypeSchema, type FieldDefinition, InformedAIClient, InformedAIProvider, InformedAssistant, type InformedAssistantConfig, type QuickAction, type QuickActionGroup, type SSEEvent, type Session, SmartQuestionnaire, type SmartQuestionnaireConfig, type SmartQuestionnaireTheme, type TaskConfig, type TaskState, type UseSessionReturn, WebsiteChatbot, type WebsiteChatbotConfig, type WebsiteChatbotTheme, type WidgetMessage, type WidgetReadyContext, type WidgetTheme, useInformedAI, useSession };
+export { AdminChatbot, type AdminChatbotConfig, type AdminChatbotTheme, type AnalyticsRunDetail, type ChatMessage, type Document, type DocumentType, type DocumentTypeSchema, type FieldDefinition, InformedAIClient, InformedAIProvider, InformedAssistant, type InformedAssistantConfig, type QuickAction, type QuickActionGroup, type SSEEvent, type Session, SmartQuestionnaire, type SmartQuestionnaireConfig, type SmartQuestionnaireTheme, type SqlBreakdown, type TaskConfig, type TaskState, type UseSessionReturn, WebsiteChatbot, type WebsiteChatbotConfig, type WebsiteChatbotTheme, type WidgetMessage, type WidgetReadyContext, type WidgetTheme, useInformedAI, useSession };

package/dist/index.js

@@ -216,6 +216,15 @@ var InformedAIClient = class {
     return false;
   }
   // ========================================================================
+  // Analytics
+  // ========================================================================
+  /**
+   * Get details of a specific analytics run.
+   */
+  async getAnalyticsRun(sessionId, runId) {
+    return this.request(`/widget/sessions/${sessionId}/analytics-runs/${runId}`);
+  }
+  // ========================================================================
   // SSE Stream Processing
   // ========================================================================
   async processSSEStream(response, onEvent) {
@@ -713,6 +722,10 @@ function InformedAIProvider({ config, children }) {
   const clearError = (0, import_react.useCallback)(() => {
     setError(null);
   }, []);
+  const getAnalyticsRun = (0, import_react.useCallback)(async (sessionId, runId) => {
+    if (!clientRef.current) throw new Error("Client not initialized");
+    return clientRef.current.getAnalyticsRun(sessionId, runId);
+  }, []);
   const value = {
     session,
     document,
@@ -727,7 +740,9 @@ function InformedAIProvider({ config, children }) {
     skipTask,
     startNewSession,
     endSession,
-    clearError
+    clearError,
+    onAnalyticsRunClick: config.onAnalyticsRunClick,
+    getAnalyticsRun
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InformedAIContext.Provider, { value, children });
 }
@@ -1150,6 +1165,7 @@ function MessageBubble({ message, theme, onQuickAction, isLatest = false, quickA
   const isUser = message.role === "user";
   const hasQuickActions = isLatest && message.quickActions && message.quickActions.length > 0;
   const hasKbSearch = message.kbSearch != null;
+  const hasAnalyticsRun = message.agentContext?.analyticsRun != null;
   if ((message.type === "quick_actions" || !message.content) && hasQuickActions) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       GroupedQuickActions,
@@ -1188,6 +1204,14 @@ function MessageBubble({ message, theme, onQuickAction, isLatest = false, quickA
         ]
       }
     ),
+    hasAnalyticsRun && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      AnalyticsBadge,
+      {
+        runId: message.agentContext.analyticsRun.runId,
+        query: message.agentContext.analyticsRun.query,
+        status: message.agentContext.analyticsRun.status
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
@@ -1323,6 +1347,182 @@ function GroupedQuickActions({ actions, groups, theme, onQuickAction }) {
     ] }, groupKey);
   }) });
 }
+function AnalyticsBadge({ runId, query, status }) {
+  const { session, onAnalyticsRunClick, getAnalyticsRun } = useInformedAI();
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  const [runDetail, setRunDetail] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const handleClick = () => {
+    if (onAnalyticsRunClick && session) {
+      onAnalyticsRunClick(runId, query, session.id);
+      return;
+    }
+    setExpanded((prev) => !prev);
+  };
+  (0, import_react2.useEffect)(() => {
+    if (expanded && !runDetail && !loading && session) {
+      setLoading(true);
+      getAnalyticsRun(session.id, runId).then(setRunDetail).catch((err) => console.warn("Failed to load analytics run:", err)).finally(() => setLoading(false));
+    }
+  }, [expanded, runDetail, loading, session, runId, getAnalyticsRun]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "4px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        onClick: handleClick,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "4px 10px",
+          backgroundColor: status === "completed" ? "#ede9fe" : "#fef3c7",
+          border: "none",
+          borderRadius: "12px",
+          fontSize: "11px",
+          color: status === "completed" ? "#6d28d9" : "#92400e",
+          cursor: "pointer",
+          transition: "opacity 0.15s"
+        },
+        onMouseOver: (e) => {
+          e.currentTarget.style.opacity = "0.8";
+        },
+        onMouseOut: (e) => {
+          e.currentTarget.style.opacity = "1";
+        },
+        title: `Analytics query: ${query}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartIcon, { size: 12 }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Analytics query" }),
+          !onAnalyticsRunClick && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "9px", marginLeft: "2px" }, children: expanded ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    expanded && !onAnalyticsRunClick && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AnalyticsRunPanel, { detail: runDetail, loading })
+  ] });
+}
+function AnalyticsRunPanel({ detail, loading }) {
+  const [sqlExpanded, setSqlExpanded] = (0, import_react2.useState)(false);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "12px", fontSize: "12px", color: "#737373" }, children: "Loading analytics details..." });
+  }
+  if (!detail) return null;
+  const breakdown = detail.structuredBreakdown;
+  const rows = detail.result;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        marginTop: "6px",
+        padding: "12px",
+        backgroundColor: "#faf5ff",
+        borderRadius: "8px",
+        fontSize: "12px",
+        lineHeight: 1.5,
+        border: "1px solid #e9d5ff"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 600, color: "#6d28d9", marginBottom: "8px" }, children: detail.query }),
+        breakdown && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BreakdownItem, { label: "Dataset", value: breakdown.baseDataset }),
+          breakdown.metrics.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BreakdownItem, { label: "Metrics", value: breakdown.metrics.join(", ") }),
+          breakdown.filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BreakdownItem, { label: "Filters", value: breakdown.filters.join(", ") }),
+          breakdown.grouping.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BreakdownItem, { label: "Grouped by", value: breakdown.grouping.join(", ") }),
+          breakdown.sorting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BreakdownItem, { label: "Sorted", value: breakdown.sorting }),
+          breakdown.timeRange && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BreakdownItem, { label: "Time range", value: breakdown.timeRange })
+        ] }),
+        detail.generatedSql && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => setSqlExpanded((prev) => !prev),
+              style: {
+                background: "none",
+                border: "none",
+                padding: 0,
+                fontSize: "11px",
+                color: "#7c3aed",
+                cursor: "pointer",
+                textDecoration: "underline"
+              },
+              children: sqlExpanded ? "Hide SQL" : "Show SQL"
+            }
+          ),
+          sqlExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "pre",
+            {
+              style: {
+                marginTop: "4px",
+                padding: "8px",
+                backgroundColor: "#1e1b4b",
+                color: "#c4b5fd",
+                borderRadius: "6px",
+                fontSize: "10px",
+                overflowX: "auto",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all"
+              },
+              children: detail.generatedSql
+            }
+          )
+        ] }),
+        rows && rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "11px", color: "#737373", marginBottom: "4px" }, children: [
+            "Results (",
+            rows.length,
+            " row",
+            rows.length !== 1 ? "s" : "",
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { overflowX: "auto" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: { borderCollapse: "collapse", fontSize: "10px", width: "100%" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: Object.keys(rows[0]).map((key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "th",
+                {
+                  style: {
+                    padding: "4px 8px",
+                    backgroundColor: "#ede9fe",
+                    borderBottom: "1px solid #d8b4fe",
+                    textAlign: "left",
+                    fontWeight: 600,
+                    whiteSpace: "nowrap"
+                  },
+                  children: key
+                },
+                key
+              )) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: rows.slice(0, 5).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: Object.values(row).map((val, j) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "td",
+                {
+                  style: {
+                    padding: "3px 8px",
+                    borderBottom: "1px solid #f3e8ff",
+                    whiteSpace: "nowrap"
+                  },
+                  children: String(val ?? "")
+                },
+                j
+              )) }, i)) })
+            ] }),
+            rows.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "10px", color: "#737373", marginTop: "4px" }, children: [
+              "+ ",
+              rows.length - 5,
+              " more rows"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function BreakdownItem({ label, value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: "#737373", minWidth: "70px" }, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#1c1917" }, children: value })
+  ] });
+}
 function SparklesIcon({ color = "currentColor" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
@@ -1339,6 +1539,13 @@ function MinimizeIcon() {
 function ChevronRightIcon({ size = 16, color = "currentColor" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 18l6-6-6-6" }) });
 }
+function ChartIcon({ size = 16, color = "currentColor" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18", y1: "20", x2: "18", y2: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "20", x2: "12", y2: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "6", y1: "20", x2: "6", y2: "14" })
+  ] });
+}
 function BookIcon({ size = 16, color = "currentColor" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 19.5A2.5 2.5 0 016.5 17H20" }),

package/dist/index.mjs

@@ -183,6 +183,15 @@ var InformedAIClient = class {
     return false;
   }
   // ========================================================================
+  // Analytics
+  // ========================================================================
+  /**
+   * Get details of a specific analytics run.
+   */
+  async getAnalyticsRun(sessionId, runId) {
+    return this.request(`/widget/sessions/${sessionId}/analytics-runs/${runId}`);
+  }
+  // ========================================================================
   // SSE Stream Processing
   // ========================================================================
   async processSSEStream(response, onEvent) {
@@ -680,6 +689,10 @@ function InformedAIProvider({ config, children }) {
   const clearError = useCallback(() => {
     setError(null);
   }, []);
+  const getAnalyticsRun = useCallback(async (sessionId, runId) => {
+    if (!clientRef.current) throw new Error("Client not initialized");
+    return clientRef.current.getAnalyticsRun(sessionId, runId);
+  }, []);
   const value = {
     session,
     document,
@@ -694,7 +707,9 @@ function InformedAIProvider({ config, children }) {
     skipTask,
     startNewSession,
     endSession,
-    clearError
+    clearError,
+    onAnalyticsRunClick: config.onAnalyticsRunClick,
+    getAnalyticsRun
   };
   return /* @__PURE__ */ jsx(InformedAIContext.Provider, { value, children });
 }
@@ -1117,6 +1132,7 @@ function MessageBubble({ message, theme, onQuickAction, isLatest = false, quickA
   const isUser = message.role === "user";
   const hasQuickActions = isLatest && message.quickActions && message.quickActions.length > 0;
   const hasKbSearch = message.kbSearch != null;
+  const hasAnalyticsRun = message.agentContext?.analyticsRun != null;
   if ((message.type === "quick_actions" || !message.content) && hasQuickActions) {
     return /* @__PURE__ */ jsx2(
       GroupedQuickActions,
@@ -1155,6 +1171,14 @@ function MessageBubble({ message, theme, onQuickAction, isLatest = false, quickA
         ]
       }
     ),
+    hasAnalyticsRun && /* @__PURE__ */ jsx2(
+      AnalyticsBadge,
+      {
+        runId: message.agentContext.analyticsRun.runId,
+        query: message.agentContext.analyticsRun.query,
+        status: message.agentContext.analyticsRun.status
+      }
+    ),
     /* @__PURE__ */ jsx2(
       "div",
       {
@@ -1290,6 +1314,182 @@ function GroupedQuickActions({ actions, groups, theme, onQuickAction }) {
     ] }, groupKey);
   }) });
 }
+function AnalyticsBadge({ runId, query, status }) {
+  const { session, onAnalyticsRunClick, getAnalyticsRun } = useInformedAI();
+  const [expanded, setExpanded] = useState2(false);
+  const [runDetail, setRunDetail] = useState2(null);
+  const [loading, setLoading] = useState2(false);
+  const handleClick = () => {
+    if (onAnalyticsRunClick && session) {
+      onAnalyticsRunClick(runId, query, session.id);
+      return;
+    }
+    setExpanded((prev) => !prev);
+  };
+  useEffect2(() => {
+    if (expanded && !runDetail && !loading && session) {
+      setLoading(true);
+      getAnalyticsRun(session.id, runId).then(setRunDetail).catch((err) => console.warn("Failed to load analytics run:", err)).finally(() => setLoading(false));
+    }
+  }, [expanded, runDetail, loading, session, runId, getAnalyticsRun]);
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleClick,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "4px 10px",
+          backgroundColor: status === "completed" ? "#ede9fe" : "#fef3c7",
+          border: "none",
+          borderRadius: "12px",
+          fontSize: "11px",
+          color: status === "completed" ? "#6d28d9" : "#92400e",
+          cursor: "pointer",
+          transition: "opacity 0.15s"
+        },
+        onMouseOver: (e) => {
+          e.currentTarget.style.opacity = "0.8";
+        },
+        onMouseOut: (e) => {
+          e.currentTarget.style.opacity = "1";
+        },
+        title: `Analytics query: ${query}`,
+        children: [
+          /* @__PURE__ */ jsx2(ChartIcon, { size: 12 }),
+          /* @__PURE__ */ jsx2("span", { children: "Analytics query" }),
+          !onAnalyticsRunClick && /* @__PURE__ */ jsx2("span", { style: { fontSize: "9px", marginLeft: "2px" }, children: expanded ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    expanded && !onAnalyticsRunClick && /* @__PURE__ */ jsx2(AnalyticsRunPanel, { detail: runDetail, loading })
+  ] });
+}
+function AnalyticsRunPanel({ detail, loading }) {
+  const [sqlExpanded, setSqlExpanded] = useState2(false);
+  if (loading) {
+    return /* @__PURE__ */ jsx2("div", { style: { padding: "12px", fontSize: "12px", color: "#737373" }, children: "Loading analytics details..." });
+  }
+  if (!detail) return null;
+  const breakdown = detail.structuredBreakdown;
+  const rows = detail.result;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        marginTop: "6px",
+        padding: "12px",
+        backgroundColor: "#faf5ff",
+        borderRadius: "8px",
+        fontSize: "12px",
+        lineHeight: 1.5,
+        border: "1px solid #e9d5ff"
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", { style: { fontWeight: 600, color: "#6d28d9", marginBottom: "8px" }, children: detail.query }),
+        breakdown && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx2(BreakdownItem, { label: "Dataset", value: breakdown.baseDataset }),
+          breakdown.metrics.length > 0 && /* @__PURE__ */ jsx2(BreakdownItem, { label: "Metrics", value: breakdown.metrics.join(", ") }),
+          breakdown.filters.length > 0 && /* @__PURE__ */ jsx2(BreakdownItem, { label: "Filters", value: breakdown.filters.join(", ") }),
+          breakdown.grouping.length > 0 && /* @__PURE__ */ jsx2(BreakdownItem, { label: "Grouped by", value: breakdown.grouping.join(", ") }),
+          breakdown.sorting && /* @__PURE__ */ jsx2(BreakdownItem, { label: "Sorted", value: breakdown.sorting }),
+          breakdown.timeRange && /* @__PURE__ */ jsx2(BreakdownItem, { label: "Time range", value: breakdown.timeRange })
+        ] }),
+        detail.generatedSql && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => setSqlExpanded((prev) => !prev),
+              style: {
+                background: "none",
+                border: "none",
+                padding: 0,
+                fontSize: "11px",
+                color: "#7c3aed",
+                cursor: "pointer",
+                textDecoration: "underline"
+              },
+              children: sqlExpanded ? "Hide SQL" : "Show SQL"
+            }
+          ),
+          sqlExpanded && /* @__PURE__ */ jsx2(
+            "pre",
+            {
+              style: {
+                marginTop: "4px",
+                padding: "8px",
+                backgroundColor: "#1e1b4b",
+                color: "#c4b5fd",
+                borderRadius: "6px",
+                fontSize: "10px",
+                overflowX: "auto",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all"
+              },
+              children: detail.generatedSql
+            }
+          )
+        ] }),
+        rows && rows.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: "#737373", marginBottom: "4px" }, children: [
+            "Results (",
+            rows.length,
+            " row",
+            rows.length !== 1 ? "s" : "",
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { overflowX: "auto" }, children: [
+            /* @__PURE__ */ jsxs("table", { style: { borderCollapse: "collapse", fontSize: "10px", width: "100%" }, children: [
+              /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: Object.keys(rows[0]).map((key) => /* @__PURE__ */ jsx2(
+                "th",
+                {
+                  style: {
+                    padding: "4px 8px",
+                    backgroundColor: "#ede9fe",
+                    borderBottom: "1px solid #d8b4fe",
+                    textAlign: "left",
+                    fontWeight: 600,
+                    whiteSpace: "nowrap"
+                  },
+                  children: key
+                },
+                key
+              )) }) }),
+              /* @__PURE__ */ jsx2("tbody", { children: rows.slice(0, 5).map((row, i) => /* @__PURE__ */ jsx2("tr", { children: Object.values(row).map((val, j) => /* @__PURE__ */ jsx2(
+                "td",
+                {
+                  style: {
+                    padding: "3px 8px",
+                    borderBottom: "1px solid #f3e8ff",
+                    whiteSpace: "nowrap"
+                  },
+                  children: String(val ?? "")
+                },
+                j
+              )) }, i)) })
+            ] }),
+            rows.length > 5 && /* @__PURE__ */ jsxs("div", { style: { fontSize: "10px", color: "#737373", marginTop: "4px" }, children: [
+              "+ ",
+              rows.length - 5,
+              " more rows"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function BreakdownItem({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs("span", { style: { color: "#737373", minWidth: "70px" }, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx2("span", { style: { color: "#1c1917" }, children: value })
+  ] });
+}
 function SparklesIcon({ color = "currentColor" }) {
   return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", children: [
     /* @__PURE__ */ jsx2("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
@@ -1306,6 +1506,13 @@ function MinimizeIcon() {
 function ChevronRightIcon({ size = 16, color = "currentColor" }) {
   return /* @__PURE__ */ jsx2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("path", { d: "M9 18l6-6-6-6" }) });
 }
+function ChartIcon({ size = 16, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx2("line", { x1: "18", y1: "20", x2: "18", y2: "10" }),
+    /* @__PURE__ */ jsx2("line", { x1: "12", y1: "20", x2: "12", y2: "4" }),
+    /* @__PURE__ */ jsx2("line", { x1: "6", y1: "20", x2: "6", y2: "14" })
+  ] });
+}
 function BookIcon({ size = 16, color = "currentColor" }) {
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx2("path", { d: "M4 19.5A2.5 2.5 0 016.5 17H20" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@informedai/react",
-  "version": "0.4.26",
+  "version": "0.4.28",
   "description": "React SDK for InformedAI Assistant - AI-powered content creation widget",
   "main": "dist/index.js",
   "module": "dist/index.mjs",