@smallwebco/tinypivot-react 1.0.55 → 1.0.58

package/README.md

@@ -1,14 +1,15 @@
 # @smallwebco/tinypivot-react
 
-A lightweight, AI-ready data grid with pivot tables and charts for React. **Under 40KB gzipped** — 10x smaller than AG Grid.
+**Embed an AI Data Analyst in your React app.** Ask questions in plain English, get instant SQL-powered insights. AI-enabled data grid with pivot tables and charts — all under 40KB gzipped.
 
 **[Live Demo](https://tiny-pivot.com)** · **[Buy License](https://tiny-pivot.com/#pricing)**
 
 ## Why TinyPivot?
 
-- **Lightweight**: Under 40KB gzipped vs 500KB+ for AG Grid
-- **AI-Ready**: Natural language data exploration with your own API key (BYOK)
-- **Batteries Included**: Pivot tables, charts, and Excel-like features out of the box
+- **Embedded AI Data Analyst**: Let users ask questions in plain English — AI generates SQL and returns results instantly
+- **Bring Your Own Key (BYOK)**: Use your own OpenAI, Anthropic, or any LLM API key — full control over costs and privacy
+- **Lightweight**: Under 40KB gzipped vs 500KB+ for AG Grid (10x smaller)
+- **Batteries Included**: Pivot tables, 6 chart types, Excel-like features out of the box
 - **One-Time License**: No subscriptions — pay once, use forever
 
 ## Installation
@@ -88,9 +89,9 @@ export default function App() {
 | `onExport` | `(payload) => void` | CSV exported |
 | `onCopy` | `(payload) => void` | Cells copied |
 
-## AI Data Analyst (Pro)
+## Embedded AI Data Analyst (Pro)
 
-Enable natural language data exploration with your own AI API key (BYOK).
+Embed an AI-powered data analyst that lets users explore data using natural language. Ask questions like "What's the return rate by category?" and get instant results — no SQL knowledge required for end users.
 
 ```tsx
 import { DataGrid } from '@smallwebco/tinypivot-react'

package/dist/index.cjs

@@ -567,6 +567,82 @@ What would you like to know about this data?`
       setIsLoading(false);
     }
   }, [isLoading, schemas, effectiveDataSources, callAIEndpoint, executeQuery, handleDemoResponse, onConversationUpdate, onError]);
+  const loadFullData = (0, import_react.useCallback)(async () => {
+    const dataSourceId = conversation.dataSourceId;
+    if (!dataSourceId) {
+      return null;
+    }
+    const dataSource = effectiveDataSources.find((ds) => ds.id === dataSourceId);
+    if (!dataSource) {
+      return null;
+    }
+    const currentConfig = configRef.current;
+    if (currentConfig.dataSourceLoader) {
+      try {
+        const { data } = await currentConfig.dataSourceLoader(dataSourceId);
+        if (data && data.length > 0) {
+          return data;
+        }
+      } catch (err) {
+        console.warn("Failed to load full data:", err);
+        onError?.({
+          message: err instanceof Error ? err.message : "Failed to load full data",
+          type: "network"
+        });
+      }
+      return null;
+    }
+    if (currentConfig.queryExecutor) {
+      try {
+        const result = await currentConfig.queryExecutor(
+          `SELECT * FROM ${dataSource.table}`,
+          dataSource.table
+        );
+        if (result.data && result.data.length > 0) {
+          return result.data;
+        }
+      } catch (err) {
+        console.warn("Failed to load full data via query:", err);
+        onError?.({
+          message: err instanceof Error ? err.message : "Failed to load full data",
+          type: "network"
+        });
+      }
+      return null;
+    }
+    if (currentConfig.endpoint) {
+      try {
+        const response = await fetch(currentConfig.endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action: "query",
+            sql: `SELECT * FROM ${dataSource.table}`,
+            table: dataSource.table
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to load data: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (data.data && data.data.length > 0) {
+          return data.data;
+        }
+      } catch (err) {
+        console.warn("Failed to load full data from endpoint:", err);
+        onError?.({
+          message: err instanceof Error ? err.message : "Failed to load full data",
+          type: "network"
+        });
+      }
+      return null;
+    }
+    if (currentConfig.demoMode) {
+      const initialData = (0, import_tinypivot_core.getInitialDemoData)(dataSourceId);
+      return initialData || null;
+    }
+    return null;
+  }, [conversation.dataSourceId, effectiveDataSources, onError]);
   const clearConversation = (0, import_react.useCallback)(() => {
     const newConv = (0, import_tinypivot_core.createConversation)(configRef.current.sessionId);
     setConversation(newConv);
@@ -602,13 +678,15 @@ What would you like to know about this data?`
     exportConversation,
     importConversation,
     /** Refresh table list from endpoint */
-    fetchTables
+    fetchTables,
+    /** Load full data for the currently selected data source */
+    loadFullData
   };
 }
 
 // src/components/AIAnalyst.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function AIAnalyst({
+var AIAnalyst = (0, import_react2.forwardRef)(({
   config,
   theme = "light",
   onDataLoaded,
@@ -616,7 +694,7 @@ function AIAnalyst({
   onQueryExecuted,
   onError,
   onViewResults
-}) {
+}, ref) => {
   const {
     messages,
     hasMessages,
@@ -629,7 +707,8 @@ function AIAnalyst({
     dataSources,
     selectDataSource,
     sendMessage,
-    clearConversation
+    clearConversation,
+    loadFullData
   } = useAIAnalyst({
     config,
     onDataLoaded,
@@ -637,6 +716,10 @@ function AIAnalyst({
     onQueryExecuted,
     onError
   });
+  (0, import_react2.useImperativeHandle)(ref, () => ({
+    loadFullData,
+    selectedDataSource
+  }), [loadFullData, selectedDataSource]);
   const [inputText, setInputText] = (0, import_react2.useState)("");
   const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
   const [selectedMessageId, setSelectedMessageId] = (0, import_react2.useState)(null);
@@ -1145,7 +1228,7 @@ function AIAnalyst({
       )
     ] })
   ] }) });
-}
+});
 
 // src/components/CalculatedFieldModal.tsx
 var import_tinypivot_core3 = require("@smallwebco/tinypivot-core");
@@ -4639,7 +4722,9 @@ function DataGrid({
   const [showCopyToast, setShowCopyToast] = (0, import_react13.useState)(false);
   const [copyToastMessage, setCopyToastMessage] = (0, import_react13.useState)("");
   const [viewMode, setViewMode] = (0, import_react13.useState)("grid");
+  const aiAnalystRef = (0, import_react13.useRef)(null);
   const [aiLoadedData, setAiLoadedData] = (0, import_react13.useState)(null);
+  const [isLoadingFullData, setIsLoadingFullData] = (0, import_react13.useState)(false);
   const displayData = (0, import_react13.useMemo)(() => aiLoadedData || data, [aiLoadedData, data]);
   const [_chartConfig, setChartConfig] = (0, import_react13.useState)(null);
   const handleChartConfigChange = (0, import_react13.useCallback)((config) => {
@@ -4997,9 +5082,27 @@ function DataGrid({
     [isSelecting]
   );
   const isShowingAIData = aiLoadedData !== null;
-  const resetToFullData = (0, import_react13.useCallback)(() => {
-    setAiLoadedData(null);
-  }, []);
+  const resetToFullData = (0, import_react13.useCallback)(async () => {
+    if (aiAnalystRef.current?.selectedDataSource) {
+      setIsLoadingFullData(true);
+      try {
+        const fullData = await aiAnalystRef.current.loadFullData();
+        if (fullData && fullData.length > 0) {
+          setAiLoadedData(fullData);
+        } else {
+          setAiLoadedData(null);
+        }
+      } catch (err) {
+        console.warn("Failed to load full data:", err);
+        setAiLoadedData(null);
+      } finally {
+        setIsLoadingFullData(false);
+      }
+    } else {
+      setAiLoadedData(null);
+    }
+    clearAllFilters();
+  }, [clearAllFilters]);
   const handleAIDataLoaded = (0, import_react13.useCallback)(
     (payload) => {
       setAiLoadedData(payload.data);
@@ -5417,11 +5520,12 @@ function DataGrid({
             viewMode === "grid" && isShowingAIData && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "button",
               {
-                className: "vpg-reset-data-btn",
+                className: `vpg-reset-data-btn${isLoadingFullData ? " vpg-loading-btn" : ""}`,
+                disabled: isLoadingFullData,
                 title: "Reset to full dataset",
                 onClick: resetToFullData,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: `vpg-icon${isLoadingFullData ? " vpg-spin" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5430,7 +5534,7 @@ function DataGrid({
                       d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Full Data" })
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: isLoadingFullData ? "Loading..." : "Full Data" })
                 ]
               }
             ),
@@ -5498,6 +5602,7 @@ function DataGrid({
         showAIAnalyst && aiAnalyst && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vpg-ai-view", style: { display: viewMode === "ai" ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           AIAnalyst,
           {
+            ref: aiAnalystRef,
             config: aiAnalyst,
             theme: currentTheme,
             onDataLoaded: handleAIDataLoaded,