bolt-table 0.1.36 → 0.1.37

package/dist/index.mjs

@@ -102,6 +102,18 @@ var XIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBase,
   /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
   /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
 ] });
+var SparklesIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 17v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 5h4" }),
+  /* @__PURE__ */ jsx("path", { d: "M17 19h4" })
+] });
+var SendIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M22 2 11 13" })
+] });
+var LoaderIcon = ({ style, className }) => /* @__PURE__ */ jsx("svg", { ...svgBase, style, className, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 
 // src/DraggableHeader.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -643,6 +655,280 @@ var DraggableHeader = React.memo(
 DraggableHeader.displayName = "DraggableHeader";
 var DraggableHeader_default = DraggableHeader;
 
+// src/ai.ts
+function detectColumnType(key, data) {
+  const values = [];
+  for (let i = 0; i < Math.min(data.length, 20); i++) {
+    const v = data[i]?.[key];
+    if (v != null) values.push(v);
+  }
+  if (values.length === 0) return { type: "unknown", sample: "" };
+  const allNumbers = values.every((v) => typeof v === "number");
+  const allBooleans = values.every((v) => typeof v === "boolean");
+  const uniqueVals = [...new Set(values.map(String))];
+  const sampleStr = uniqueVals.length <= 8 ? uniqueVals.join(", ") : uniqueVals.slice(0, 6).join(", ") + "...";
+  if (allBooleans) return { type: "boolean", sample: sampleStr };
+  if (allNumbers) {
+    const nums = values;
+    const min = Math.min(...nums);
+    const max = Math.max(...nums);
+    return { type: "number", sample: `range ${min}\u2013${max}` };
+  }
+  return { type: "string", sample: sampleStr };
+}
+function buildSystemPrompt(columns, data) {
+  const schemaLines = columns.filter((c) => c.key !== "__select__" && c.key !== "__expand__").map((c) => {
+    const key = c.dataIndex ?? c.key;
+    const title = typeof c.title === "string" ? c.title : c.key;
+    const info = detectColumnType(key, data);
+    return `  - key: "${c.key}", title: "${title}", dataIndex: "${key}", type: ${info.type}${info.sample ? ` (values: ${info.sample})` : ""}`;
+  }).join("\n");
+  const sample = data.slice(0, 5).map((row) => {
+    const obj = {};
+    for (const col of columns) {
+      if (col.key === "__select__" || col.key === "__expand__") continue;
+      const di = col.dataIndex ?? col.key;
+      obj[di] = row[di];
+    }
+    return obj;
+  });
+  return `You are a data table assistant. You help users query, filter, sort, and style tabular data.
+You MUST respond with ONLY a valid JSON object \u2014 no markdown fences, no explanation, no extra text.
+
+## Table Schema
+${schemaLines}
+
+## Sample Data (first ${sample.length} of ${data.length} rows)
+${JSON.stringify(sample, null, 2)}
+
+## Available Operations
+Combine any of these in a single response:
+
+1. **filter** \u2014 show only rows matching conditions
+   { "type": "filter", "conditions": [{ "column": "<dataIndex>", "op": "<op>", "value": <val> }], "logic": "and" | "or" }
+
+2. **rowStyle** \u2014 apply CSS styles to entire rows matching conditions
+   { "type": "rowStyle", "conditions": [...], "logic": "and"|"or", "style": { "<cssProp>": "<value>" } }
+
+3. **cellStyle** \u2014 apply CSS styles to a specific column's cells matching conditions
+   { "type": "cellStyle", "column": "<dataIndex>", "conditions": [...], "logic": "and"|"or", "style": { "<cssProp>": "<value>" } }
+
+4. **sort** \u2014 sort data by a column
+   { "type": "sort", "column": "<dataIndex>", "direction": "asc" | "desc" }
+
+5. **hideColumns** / **showColumns** \u2014 toggle column visibility
+   { "type": "hideColumns" | "showColumns", "columns": ["<key>", ...] }
+
+## Operators
+eq, neq, gt, gte, lt, lte, contains, notContains, startsWith, endsWith, in, notIn
+
+## Response format
+{
+  "operations": [ ... ],
+  "message": "Brief user-friendly description of what was applied"
+}
+
+## Rules
+- Use the dataIndex values from the schema, not display titles.
+- For colors use semi-transparent values like "rgba(255,0,0,0.15)" so text stays readable.
+- CSS property names must be camelCase (e.g. "backgroundColor", "color", "fontWeight").
+- If the user asks to highlight / color / mark specific rows, use rowStyle or cellStyle.
+- If the user asks to show only certain rows, use filter.
+- You can combine filter + rowStyle + sort etc. in one response.
+- The "message" should be concise: what was done, in plain English.`;
+}
+async function callAI(config, systemPrompt, userQuery) {
+  const { provider, apiKey, model, baseUrl, maxTokens = 1024, temperature = 0.1 } = config;
+  if (provider === "openai" || provider === "custom") {
+    const url = baseUrl ? `${baseUrl.replace(/\/$/, "")}/chat/completions` : "https://api.openai.com/v1/chat/completions";
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`
+      },
+      body: JSON.stringify({
+        model: model ?? "gpt-4o-mini",
+        messages: [
+          { role: "system", content: systemPrompt },
+          { role: "user", content: userQuery }
+        ],
+        max_tokens: maxTokens,
+        temperature
+      })
+    });
+    if (!res.ok) {
+      const body = await res.text().catch(() => "");
+      throw new Error(`AI request failed (${res.status}): ${body}`);
+    }
+    const json = await res.json();
+    return json.choices?.[0]?.message?.content ?? "";
+  }
+  if (provider === "anthropic") {
+    const url = baseUrl ? `${baseUrl.replace(/\/$/, "")}/messages` : "https://api.anthropic.com/v1/messages";
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey,
+        "anthropic-version": "2023-06-01",
+        "anthropic-dangerous-direct-browser-access": "true"
+      },
+      body: JSON.stringify({
+        model: model ?? "claude-sonnet-4-20250514",
+        system: systemPrompt,
+        messages: [{ role: "user", content: userQuery }],
+        max_tokens: maxTokens,
+        temperature
+      })
+    });
+    if (!res.ok) {
+      const body = await res.text().catch(() => "");
+      throw new Error(`AI request failed (${res.status}): ${body}`);
+    }
+    const json = await res.json();
+    const textBlock = json.content?.find(
+      (b) => b.type === "text"
+    );
+    return textBlock?.text ?? "";
+  }
+  throw new Error(`Unsupported AI provider: ${provider}`);
+}
+function parseAIResponse(raw) {
+  let text = raw.trim();
+  const fenceMatch = text.match(/```(?:json)?\s*([\s\S]*?)```/);
+  if (fenceMatch) text = fenceMatch[1].trim();
+  const start = text.indexOf("{");
+  const end = text.lastIndexOf("}");
+  if (start !== -1 && end > start) {
+    text = text.slice(start, end + 1);
+  }
+  const parsed = JSON.parse(text);
+  if (!parsed.operations || !Array.isArray(parsed.operations)) {
+    throw new Error("Invalid AI response: missing operations array");
+  }
+  return {
+    operations: parsed.operations,
+    message: parsed.message ?? "AI operations applied."
+  };
+}
+function evaluateCondition(condition, row) {
+  const rawVal = row[condition.column];
+  const target = condition.value;
+  switch (condition.op) {
+    case "eq":
+      return rawVal == target;
+    case "neq":
+      return rawVal != target;
+    case "gt":
+      return Number(rawVal) > Number(target);
+    case "gte":
+      return Number(rawVal) >= Number(target);
+    case "lt":
+      return Number(rawVal) < Number(target);
+    case "lte":
+      return Number(rawVal) <= Number(target);
+    case "contains":
+      return String(rawVal ?? "").toLowerCase().includes(String(target).toLowerCase());
+    case "notContains":
+      return !String(rawVal ?? "").toLowerCase().includes(String(target).toLowerCase());
+    case "startsWith":
+      return String(rawVal ?? "").toLowerCase().startsWith(String(target).toLowerCase());
+    case "endsWith":
+      return String(rawVal ?? "").toLowerCase().endsWith(String(target).toLowerCase());
+    case "in":
+      if (Array.isArray(target)) {
+        return target.some((t) => rawVal == t);
+      }
+      return false;
+    case "notIn":
+      if (Array.isArray(target)) {
+        return !target.some((t) => rawVal == t);
+      }
+      return true;
+    default:
+      return true;
+  }
+}
+function matchesConditions(conditions, logic, row) {
+  if (!conditions || conditions.length === 0) return true;
+  if (logic === "or") {
+    return conditions.some((c) => evaluateCondition(c, row));
+  }
+  return conditions.every((c) => evaluateCondition(c, row));
+}
+function applyAIFilter(data, op) {
+  return data.filter((row) => matchesConditions(op.conditions, op.logic, row));
+}
+function applyAISort(data, op) {
+  const dir = op.direction === "asc" ? 1 : -1;
+  const col = op.column;
+  return [...data].sort((a, b) => {
+    const aVal = a[col];
+    const bVal = b[col];
+    if (aVal == null && bVal == null) return 0;
+    if (aVal == null) return 1;
+    if (bVal == null) return -1;
+    if (typeof aVal === "number" && typeof bVal === "number")
+      return (aVal - bVal) * dir;
+    return String(aVal).localeCompare(String(bVal)) * dir;
+  });
+}
+function getAIRowStyle(row, ops) {
+  let merged;
+  for (const op of ops) {
+    if (matchesConditions(op.conditions, op.logic, row)) {
+      if (!merged) merged = {};
+      Object.assign(merged, op.style);
+    }
+  }
+  return merged;
+}
+function getAICellStyle(row, columnKey, ops) {
+  let merged;
+  for (const op of ops) {
+    if (op.column === columnKey && matchesConditions(op.conditions, op.logic, row)) {
+      if (!merged) merged = {};
+      Object.assign(merged, op.style);
+    }
+  }
+  return merged;
+}
+function applyAIOperations(data, operations) {
+  let filteredData = data;
+  let sortOp = null;
+  const styleOps = [];
+  const cellStyleOps = [];
+  const hideColumns = [];
+  const showColumns = [];
+  for (const op of operations) {
+    switch (op.type) {
+      case "filter":
+        filteredData = applyAIFilter(filteredData, op);
+        break;
+      case "sort":
+        sortOp = op;
+        break;
+      case "rowStyle":
+        styleOps.push(op);
+        break;
+      case "cellStyle":
+        cellStyleOps.push(op);
+        break;
+      case "hideColumns":
+        hideColumns.push(...op.columns);
+        break;
+      case "showColumns":
+        showColumns.push(...op.columns);
+        break;
+    }
+  }
+  if (sortOp) {
+    filteredData = applyAISort(filteredData, sortOp);
+  }
+  return { filteredData, sortOp, styleOps, cellStyleOps, hideColumns, showColumns };
+}
+
 // src/ResizeOverlay.tsx
 import { forwardRef, useImperativeHandle, useRef as useRef2 } from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -870,9 +1156,11 @@ var Cell = React3.memo(
     isLoading,
     onEdit,
     isEditing,
-    onEditComplete
+    onEditComplete,
+    cellStyleFn
   }) => {
     const isPinned = Boolean(column.pinned);
+    const extraCellStyle = cellStyleFn?.(record, column.dataIndex ?? column.key);
     if (isLoading && column.key !== "__select__" && column.key !== "__expand__") {
       const shimmerContent = column.shimmerRender ? column.shimmerRender() : /* @__PURE__ */ jsx4(
         "div",
@@ -1024,7 +1312,8 @@ var Cell = React3.memo(
           minWidth: 0,
           ...column.style,
           ...isPinned ? styles?.pinnedCell : void 0,
-          ...styles?.cell
+          ...styles?.cell,
+          ...extraCellStyle
         },
         children: isSystem ? content : showEditor ? content : /* @__PURE__ */ jsx4(
           "div",
@@ -1051,6 +1340,7 @@ var Cell = React3.memo(
     if (prev.onEdit !== next.onEdit) return false;
     if (prev.isEditing !== next.isEditing) return false;
     if (prev.onEditComplete !== next.onEditComplete) return false;
+    if (prev.cellStyleFn !== next.cellStyleFn) return false;
     if (prev.column.key === "__select__") {
       return prev.isSelected === next.isSelected && prev.normalizedSelectedKeys === next.normalizedSelectedKeys;
     }
@@ -1152,7 +1442,8 @@ var TableBody = ({
   onEditComplete,
   enableDynamicRowHeight = false,
   onRowHeightChange,
-  columnGridIndexMap
+  columnGridIndexMap,
+  cellStyleFn
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1281,7 +1572,8 @@ var TableBody = ({
                             recordFingerprint,
                             onEdit,
                             isEditing: editingCell?.rowKey === rowKey && editingCell?.columnKey === col.key,
-                            onEditComplete
+                            onEditComplete,
+                            cellStyleFn
                           }
                         )
                       }
@@ -1318,7 +1610,8 @@ var TableBody = ({
                         recordFingerprint,
                         onEdit,
                         isEditing: editingCell?.rowKey === rowKey && editingCell?.columnKey === col.key,
-                        onEditComplete
+                        onEditComplete,
+                        cellStyleFn
                       }
                     )
                   }
@@ -1508,7 +1801,8 @@ var TableBody = ({
                                 recordFingerprint,
                                 onEdit,
                                 isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
-                                onEditComplete
+                                onEditComplete,
+                                cellStyleFn
                               }
                             )
                           }
@@ -1636,7 +1930,8 @@ var TableBody = ({
                                 recordFingerprint,
                                 onEdit,
                                 isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
-                                onEditComplete
+                                onEditComplete,
+                                cellStyleFn
                               }
                             )
                           }
@@ -1731,7 +2026,13 @@ function BoltTable({
   globalSearchValue,
   onGlobalSearchChange,
   toolbarContent,
-  columnSettingsLabel
+  columnSettingsLabel,
+  aiMode = false,
+  aiConfig,
+  onAIQuery,
+  onAIResponse,
+  aiPlaceholder = "Ask AI anything about your data...",
+  aiButtonLabel
 }) {
   const data = useMemo2(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1905,6 +2206,96 @@ function BoltTable({
       document.removeEventListener("keydown", onKey);
     };
   }, [showColumnPicker]);
+  const [aiBarOpen, setAiBarOpen] = useState3(false);
+  const [aiQuery, setAiQuery] = useState3("");
+  const [aiLoading, setAiLoading] = useState3(false);
+  const [aiResult, setAiResult] = useState3(null);
+  const [aiError, setAiError] = useState3(null);
+  const aiInputRef = useRef4(null);
+  const [aiStyleOps, setAiStyleOps] = useState3([]);
+  const [aiCellStyleOps, setAiCellStyleOps] = useState3(
+    []
+  );
+  const [aiFilteredDataKeys, setAiFilteredDataKeys] = useState3(null);
+  const [aiSortKey, setAiSortKey] = useState3(null);
+  const [aiSortDir, setAiSortDir] = useState3(null);
+  const onAIResponseRef = useRef4(onAIResponse);
+  onAIResponseRef.current = onAIResponse;
+  const handleAISubmit = useCallback2(async () => {
+    const query = aiQuery.trim();
+    if (!query) return;
+    setAiLoading(true);
+    setAiError(null);
+    try {
+      let response;
+      if (onAIQuery) {
+        response = await onAIQuery(query, {
+          data,
+          columns: initialColumns
+        });
+      } else if (aiConfig) {
+        const sysPrompt = buildSystemPrompt(initialColumns, data);
+        const raw = await callAI(aiConfig, sysPrompt, query);
+        response = parseAIResponse(raw);
+      } else {
+        throw new Error("AI mode requires either aiConfig or onAIQuery prop");
+      }
+      const { filteredData, sortOp, styleOps: sOps, cellStyleOps: csOps, hideColumns, showColumns } = applyAIOperations(data, response.operations);
+      setAiStyleOps(sOps);
+      setAiCellStyleOps(csOps);
+      if (response.operations.some((op) => op.type === "filter")) {
+        const keySet = /* @__PURE__ */ new Set();
+        filteredData.forEach((row, idx) => {
+          const k = typeof rowKey === "function" ? rowKey(row) : String(row[typeof rowKey === "string" ? rowKey : "id"] ?? idx);
+          keySet.add(k);
+        });
+        setAiFilteredDataKeys(keySet);
+      } else {
+        setAiFilteredDataKeys(null);
+      }
+      if (sortOp) {
+        setAiSortKey(sortOp.column);
+        setAiSortDir(sortOp.direction);
+      } else {
+        setAiSortKey(null);
+        setAiSortDir(null);
+      }
+      if (hideColumns.length > 0 || showColumns.length > 0) {
+        setColumns(
+          (prev) => prev.map((col) => {
+            if (hideColumns.includes(col.key)) return { ...col, hidden: true };
+            if (showColumns.includes(col.key)) return { ...col, hidden: false };
+            return col;
+          })
+        );
+      }
+      setAiResult(response);
+      onAIResponseRef.current?.(response);
+    } catch (err) {
+      setAiError(err instanceof Error ? err.message : "AI query failed");
+    } finally {
+      setAiLoading(false);
+    }
+  }, [aiQuery, aiConfig, onAIQuery, data, initialColumns, rowKey]);
+  const handleAIClear = useCallback2(() => {
+    setAiResult(null);
+    setAiError(null);
+    setAiStyleOps([]);
+    setAiCellStyleOps([]);
+    setAiFilteredDataKeys(null);
+    setAiSortKey(null);
+    setAiSortDir(null);
+    setAiQuery("");
+  }, []);
+  const handleAIBarClose = useCallback2(() => {
+    setAiBarOpen(false);
+    handleAIClear();
+  }, [handleAIClear]);
+  React4.useEffect(() => {
+    if (aiBarOpen && aiInputRef.current) {
+      setTimeout(() => aiInputRef.current?.focus(), 300);
+    }
+  }, [aiBarOpen]);
   const columnsWithPersistedWidths = useMemo2(
     () => columns.map((col) => ({
       ...col,
@@ -2546,6 +2937,47 @@ function BoltTable({
     }
     return result;
   }, [data, sortState, columnFilters, globalSearchValue, internalGlobalSearch]);
+  const aiProcessedData = useMemo2(() => {
+    let result = processedData;
+    if (aiFilteredDataKeys) {
+      result = result.filter((row, idx) => {
+        if (row == null) return false;
+        const k = typeof rowKey === "function" ? rowKey(row) : String(
+          row[typeof rowKey === "string" ? rowKey : "id"] ?? idx
+        );
+        return aiFilteredDataKeys.has(k);
+      });
+    }
+    if (aiSortKey && aiSortDir) {
+      const dir = aiSortDir === "asc" ? 1 : -1;
+      const col = aiSortKey;
+      result = [...result].sort((a, b) => {
+        const aVal = a[col];
+        const bVal = b[col];
+        if (aVal == null && bVal == null) return 0;
+        if (aVal == null) return 1;
+        if (bVal == null) return -1;
+        if (typeof aVal === "number" && typeof bVal === "number")
+          return (aVal - bVal) * dir;
+        return String(aVal).localeCompare(String(bVal)) * dir;
+      });
+    }
+    return result;
+  }, [processedData, aiFilteredDataKeys, aiSortKey, aiSortDir, rowKey]);
+  const getAIRowStyleForRecord = useCallback2(
+    (record) => {
+      if (aiStyleOps.length === 0) return void 0;
+      return getAIRowStyle(record, aiStyleOps);
+    },
+    [aiStyleOps]
+  );
+  const getAICellStyleForRecord = useCallback2(
+    (record, columnKey) => {
+      if (aiCellStyleOps.length === 0) return void 0;
+      return getAICellStyle(record, columnKey, aiCellStyleOps);
+    },
+    [aiCellStyleOps]
+  );
   const pinnedRowCacheRef = useRef4(/* @__PURE__ */ new Map());
   const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = useMemo2(() => {
     if (!resolvedRowPinning || !resolvedRowPinning.top?.length && !resolvedRowPinning.bottom?.length) {
@@ -2553,7 +2985,7 @@ function BoltTable({
       return {
         pinnedTopRows: [],
         pinnedBottomRows: [],
-        unpinnedProcessedData: processedData
+        unpinnedProcessedData: aiProcessedData
       };
     }
     const topKeySet = new Set((resolvedRowPinning.top ?? []).map(String));
@@ -2563,7 +2995,7 @@ function BoltTable({
     const topMap = /* @__PURE__ */ new Map();
     const bottomMap = /* @__PURE__ */ new Map();
     const rest = [];
-    processedData.forEach((row, idx) => {
+    aiProcessedData.forEach((row, idx) => {
       if (row == null) return;
       const key = getSafeRowKey(row, idx);
       if (topKeySet.has(key)) {
@@ -2603,7 +3035,7 @@ function BoltTable({
       unpinnedProcessedData: rest
     };
   }, [
-    processedData,
+    aiProcessedData,
     resolvedRowPinning,
     getSafeRowKey,
     keepPinnedRowsAcrossPages
@@ -2672,7 +3104,7 @@ function BoltTable({
     return unpinnedProcessedData.slice(start, start + pgSize);
   }, [unpinnedProcessedData, needsClientPagination, pgCurrent, pgSize]);
   const shimmerCount = pgEnabled ? pgSize : 15;
-  const showShimmer = isLoading && processedData.length === 0;
+  const showShimmer = isLoading && aiProcessedData.length === 0;
   const shimmerRowKeyField = typeof rowKey === "string" ? rowKey : "id";
   const shimmerData = useMemo2(() => {
     if (!showShimmer) return null;
@@ -2956,49 +3388,291 @@ function BoltTable({
             border: 1px dashed ${accentColor} !important;
           }
           ${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
+          @keyframes bt-spin { to { transform: rotate(360deg); } }
+          @keyframes bt-ai-shimmer {
+            0% { background-position: -200% 0; }
+            100% { background-position: 200% 0; }
+          }
         ` }),
-          (!hideGlobalSearch || showColumnSettings) && /* @__PURE__ */ jsxs5(
+          (!hideGlobalSearch || showColumnSettings || aiMode) && /* @__PURE__ */ jsxs5(
             "div",
             {
               style: {
+                position: "relative",
                 display: "flex",
                 alignItems: "center",
                 gap: 8,
                 padding: "6px 8px",
                 borderBottom: "1px solid rgba(128,128,128,0.2)",
                 fontSize: 12,
-                flexShrink: 0
+                flexShrink: 0,
+                overflow: "hidden"
               },
               children: [
-                !hideGlobalSearch && /* @__PURE__ */ jsxs5(
+                /* @__PURE__ */ jsxs5(
                   "div",
                   {
                     style: {
                       display: "flex",
                       alignItems: "center",
-                      gap: 4,
+                      gap: 8,
                       flex: "1 1 0%",
-                      position: "relative"
+                      opacity: aiBarOpen ? 0 : 1,
+                      transform: aiBarOpen ? "scale(0.97)" : "scale(1)",
+                      transition: "opacity 0.25s ease, transform 0.25s ease",
+                      pointerEvents: aiBarOpen ? "none" : "auto",
+                      minWidth: 0
+                    },
+                    children: [
+                      !hideGlobalSearch && /* @__PURE__ */ jsxs5(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 4,
+                            flex: "1 1 0%",
+                            position: "relative"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx5(
+                              "span",
+                              {
+                                style: {
+                                  display: "flex",
+                                  color: "GrayText",
+                                  flexShrink: 0
+                                },
+                                children: icons?.search ?? /* @__PURE__ */ jsx5(SearchIcon, { style: { width: 14, height: 14 } })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx5(
+                              "input",
+                              {
+                                type: "text",
+                                placeholder: "Search all columns...",
+                                value: globalSearchValue ?? internalGlobalSearch,
+                                onChange: (e) => {
+                                  const v = e.target.value;
+                                  if (onGlobalSearchChange) onGlobalSearchChange(v);
+                                  else setInternalGlobalSearch(v);
+                                },
+                                style: {
+                                  flex: "1 1 0%",
+                                  border: "none",
+                                  outline: "none",
+                                  background: "transparent",
+                                  font: "inherit",
+                                  color: "inherit",
+                                  padding: "4px 6px",
+                                  minWidth: 0
+                                }
+                              }
+                            ),
+                            (globalSearchValue ?? internalGlobalSearch) && /* @__PURE__ */ jsx5(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => {
+                                  if (onGlobalSearchChange) onGlobalSearchChange("");
+                                  else setInternalGlobalSearch("");
+                                },
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  background: "none",
+                                  border: "none",
+                                  cursor: "pointer",
+                                  padding: 2,
+                                  color: "GrayText",
+                                  flexShrink: 0
+                                },
+                                children: icons?.close ?? /* @__PURE__ */ jsx5(XIcon, { style: { width: 12, height: 12 } })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      toolbarContent,
+                      showColumnSettings && /* @__PURE__ */ jsxs5("div", { style: { position: "relative", flexShrink: 0 }, children: [
+                        /* @__PURE__ */ jsxs5(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setShowColumnPicker((p) => !p),
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              background: "none",
+                              border: "1px solid rgba(128,128,128,0.2)",
+                              borderRadius: 4,
+                              cursor: "pointer",
+                              padding: "4px 6px",
+                              color: "inherit",
+                              gap: 4,
+                              fontSize: 12
+                            },
+                            title: "Column settings",
+                            children: [
+                              icons?.columns ?? /* @__PURE__ */ jsx5(ColumnsIcon, { style: { width: 14, height: 14 } }),
+                              /* @__PURE__ */ jsx5("span", { children: columnSettingsLabel ?? "Columns" })
+                            ]
+                          }
+                        ),
+                        showColumnPicker && /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            ref: columnPickerRef,
+                            style: {
+                              position: "absolute",
+                              top: "100%",
+                              right: 0,
+                              zIndex: 99999,
+                              minWidth: 200,
+                              maxHeight: 320,
+                              overflowY: "auto",
+                              borderRadius: 8,
+                              border: "1px solid rgba(128,128,128,0.2)",
+                              boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
+                              backdropFilter: "blur(16px)",
+                              WebkitBackdropFilter: "blur(16px)",
+                              backgroundColor: "rgba(128,128,128,0.08)",
+                              padding: "4px 0",
+                              marginTop: 4
+                            },
+                            children: initialColumns.filter(
+                              (c) => c.key !== "__select__" && c.key !== "__expand__"
+                            ).map((col) => {
+                              const current = columns.find(
+                                (c) => c.key === col.key
+                              );
+                              const isHidden = current?.hidden ?? false;
+                              const isPinned = !!current?.pinned;
+                              return /* @__PURE__ */ jsxs5(
+                                "label",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 8,
+                                    padding: "6px 12px",
+                                    cursor: isPinned ? "not-allowed" : "pointer",
+                                    opacity: isPinned ? 0.5 : 1,
+                                    fontSize: 12
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx5(
+                                      "input",
+                                      {
+                                        type: "checkbox",
+                                        checked: !isHidden,
+                                        disabled: isPinned,
+                                        onChange: () => {
+                                          if (isPinned) return;
+                                          handleToggleHide(col.key);
+                                        },
+                                        style: {
+                                          cursor: isPinned ? "not-allowed" : "pointer",
+                                          accentColor
+                                        }
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx5(
+                                      "span",
+                                      {
+                                        style: {
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        children: typeof col.title === "string" ? col.title : col.key
+                                      }
+                                    )
+                                  ]
+                                },
+                                col.key
+                              );
+                            })
+                          }
+                        )
+                      ] }),
+                      aiMode && /* @__PURE__ */ jsxs5(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setAiBarOpen(true),
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: 4,
+                            background: `linear-gradient(135deg, ${accentColor}18, ${accentColor}08)`,
+                            border: `1px solid ${accentColor}40`,
+                            borderRadius: 4,
+                            cursor: "pointer",
+                            padding: "4px 8px",
+                            color: accentColor,
+                            fontSize: 12,
+                            fontWeight: 500,
+                            flexShrink: 0,
+                            transition: "all 0.2s ease"
+                          },
+                          title: "Ask AI",
+                          children: [
+                            icons?.sparkles ?? /* @__PURE__ */ jsx5(SparklesIcon, { style: { width: 14, height: 14 } }),
+                            /* @__PURE__ */ jsx5("span", { children: aiButtonLabel ?? "Ask AI" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                aiMode && /* @__PURE__ */ jsxs5(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      padding: "4px 8px",
+                      opacity: aiBarOpen ? 1 : 0,
+                      transform: aiBarOpen ? "translateX(0)" : "translateX(40px)",
+                      transition: "opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1)",
+                      pointerEvents: aiBarOpen ? "auto" : "none",
+                      zIndex: 2,
+                      background: "inherit",
+                      backdropFilter: "blur(12px)",
+                      WebkitBackdropFilter: "blur(12px)"
                     },
                     children: [
                       /* @__PURE__ */ jsx5(
                         "span",
                         {
-                          style: { display: "flex", color: "GrayText", flexShrink: 0 },
-                          children: icons?.search ?? /* @__PURE__ */ jsx5(SearchIcon, { style: { width: 14, height: 14 } })
+                          style: {
+                            display: "flex",
+                            color: accentColor,
+                            flexShrink: 0
+                          },
+                          children: icons?.sparkles ?? /* @__PURE__ */ jsx5(SparklesIcon, { style: { width: 16, height: 16 } })
                         }
                       ),
                       /* @__PURE__ */ jsx5(
                         "input",
                         {
+                          ref: aiInputRef,
                           type: "text",
-                          placeholder: "Search all columns...",
-                          value: globalSearchValue ?? internalGlobalSearch,
-                          onChange: (e) => {
-                            const v = e.target.value;
-                            if (onGlobalSearchChange) onGlobalSearchChange(v);
-                            else setInternalGlobalSearch(v);
+                          placeholder: aiPlaceholder,
+                          value: aiQuery,
+                          onChange: (e) => setAiQuery(e.target.value),
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter" && !aiLoading) handleAISubmit();
+                            if (e.key === "Escape") handleAIBarClose();
                           },
+                          disabled: aiLoading,
                           style: {
                             flex: "1 1 0%",
                             border: "none",
@@ -3007,18 +3681,51 @@ function BoltTable({
                             font: "inherit",
                             color: "inherit",
                             padding: "4px 6px",
-                            minWidth: 0
+                            minWidth: 0,
+                            fontSize: 12
                           }
                         }
                       ),
-                      (globalSearchValue ?? internalGlobalSearch) && /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
-                          onClick: () => {
-                            if (onGlobalSearchChange) onGlobalSearchChange("");
-                            else setInternalGlobalSearch("");
+                          onClick: handleAISubmit,
+                          disabled: aiLoading || !aiQuery.trim(),
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            background: aiQuery.trim() ? accentColor : "rgba(128,128,128,0.15)",
+                            border: "none",
+                            borderRadius: 4,
+                            cursor: aiLoading || !aiQuery.trim() ? "not-allowed" : "pointer",
+                            padding: "4px 8px",
+                            color: aiQuery.trim() ? "#fff" : "GrayText",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0,
+                            gap: 4,
+                            fontSize: 12,
+                            opacity: aiLoading ? 0.7 : 1
                           },
+                          title: "Send",
+                          children: aiLoading ? /* @__PURE__ */ jsx5(Fragment4, { children: icons?.loader ?? /* @__PURE__ */ jsx5(
+                            LoaderIcon,
+                            {
+                              style: {
+                                width: 14,
+                                height: 14,
+                                animation: "bt-spin 1s linear infinite"
+                              }
+                            }
+                          ) }) : /* @__PURE__ */ jsx5(Fragment4, { children: icons?.send ?? /* @__PURE__ */ jsx5(SendIcon, { style: { width: 14, height: 14 } }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx5(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: handleAIBarClose,
                           style: {
                             display: "flex",
                             alignItems: "center",
@@ -3030,114 +3737,96 @@ function BoltTable({
                             color: "GrayText",
                             flexShrink: 0
                           },
-                          children: icons?.close ?? /* @__PURE__ */ jsx5(XIcon, { style: { width: 12, height: 12 } })
+                          title: "Close AI",
+                          children: icons?.close ?? /* @__PURE__ */ jsx5(XIcon, { style: { width: 14, height: 14 } })
                         }
                       )
                     ]
                   }
-                ),
-                toolbarContent,
-                showColumnSettings && /* @__PURE__ */ jsxs5("div", { style: { position: "relative", flexShrink: 0 }, children: [
-                  /* @__PURE__ */ jsxs5(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setShowColumnPicker((p) => !p),
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        background: "none",
-                        border: "1px solid rgba(128,128,128,0.2)",
-                        borderRadius: 4,
-                        cursor: "pointer",
-                        padding: "4px 6px",
-                        color: "inherit",
-                        gap: 4,
-                        fontSize: 12
-                      },
-                      title: "Column settings",
-                      children: [
-                        icons?.columns ?? /* @__PURE__ */ jsx5(ColumnsIcon, { style: { width: 14, height: 14 } }),
-                        /* @__PURE__ */ jsx5("span", { children: columnSettingsLabel ?? "Columns" })
-                      ]
-                    }
-                  ),
-                  showColumnPicker && /* @__PURE__ */ jsx5(
-                    "div",
-                    {
-                      ref: columnPickerRef,
-                      style: {
-                        position: "absolute",
-                        top: "100%",
-                        right: 0,
-                        zIndex: 99999,
-                        minWidth: 200,
-                        maxHeight: 320,
-                        overflowY: "auto",
-                        borderRadius: 8,
-                        border: "1px solid rgba(128,128,128,0.2)",
-                        boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
-                        backdropFilter: "blur(16px)",
-                        WebkitBackdropFilter: "blur(16px)",
-                        backgroundColor: "rgba(128,128,128,0.08)",
-                        padding: "4px 0",
-                        marginTop: 4
-                      },
-                      children: initialColumns.filter(
-                        (c) => c.key !== "__select__" && c.key !== "__expand__"
-                      ).map((col) => {
-                        const current = columns.find((c) => c.key === col.key);
-                        const isHidden = current?.hidden ?? false;
-                        const isPinned = !!current?.pinned;
-                        return /* @__PURE__ */ jsxs5(
-                          "label",
-                          {
-                            style: {
-                              display: "flex",
-                              alignItems: "center",
-                              gap: 8,
-                              padding: "6px 12px",
-                              cursor: isPinned ? "not-allowed" : "pointer",
-                              opacity: isPinned ? 0.5 : 1,
-                              fontSize: 12
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx5(
-                                "input",
-                                {
-                                  type: "checkbox",
-                                  checked: !isHidden,
-                                  disabled: isPinned,
-                                  onChange: () => {
-                                    if (isPinned) return;
-                                    handleToggleHide(col.key);
-                                  },
-                                  style: {
-                                    cursor: isPinned ? "not-allowed" : "pointer",
-                                    accentColor
-                                  }
-                                }
-                              ),
-                              /* @__PURE__ */ jsx5(
-                                "span",
-                                {
-                                  style: {
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap"
-                                  },
-                                  children: typeof col.title === "string" ? col.title : col.key
-                                }
-                              )
-                            ]
-                          },
-                          col.key
-                        );
-                      })
-                    }
-                  )
-                ] })
+                )
+              ]
+            }
+          ),
+          aiResult && /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "6px 12px",
+                fontSize: 12,
+                borderBottom: "1px solid rgba(128,128,128,0.2)",
+                background: `linear-gradient(90deg, ${accentColor}08, transparent)`,
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx5("span", { style: { color: accentColor, display: "flex", flexShrink: 0 }, children: icons?.sparkles ?? /* @__PURE__ */ jsx5(SparklesIcon, { style: { width: 14, height: 14 } }) }),
+                /* @__PURE__ */ jsx5("span", { style: { flex: "1 1 0%", opacity: 0.85 }, children: aiResult.message }),
+                /* @__PURE__ */ jsxs5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleAIClear,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      background: "none",
+                      border: "1px solid rgba(128,128,128,0.2)",
+                      borderRadius: 4,
+                      cursor: "pointer",
+                      padding: "2px 8px",
+                      color: "inherit",
+                      fontSize: 11,
+                      flexShrink: 0,
+                      opacity: 0.7
+                    },
+                    title: "Clear AI results",
+                    children: [
+                      icons?.close ?? /* @__PURE__ */ jsx5(XIcon, { style: { width: 10, height: 10 } }),
+                      /* @__PURE__ */ jsx5("span", { children: "Clear" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          aiError && !aiResult && /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "6px 12px",
+                fontSize: 12,
+                borderBottom: "1px solid rgba(239,68,68,0.2)",
+                background: "rgba(239,68,68,0.06)",
+                color: "#ef4444",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx5("span", { style: { flex: "1 1 0%" }, children: aiError }),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setAiError(null),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 2,
+                      color: "#ef4444",
+                      flexShrink: 0
+                    },
+                    children: icons?.close ?? /* @__PURE__ */ jsx5(XIcon, { style: { width: 12, height: 12 } })
+                  }
+                )
               ]
             }
           ),
@@ -3639,14 +4328,20 @@ function BoltTable({
                               gridTemplateColumns,
                               headerHeight: HEADER_HEIGHT,
                               rowClassName,
-                              rowStyle,
+                              rowStyle: aiStyleOps.length > 0 ? (record, index) => {
+                                const base = rowStyle ? rowStyle(record, index) : void 0;
+                                const ai = getAIRowStyleForRecord(record);
+                                if (!base && !ai) return {};
+                                return { ...base, ...ai };
+                              } : rowStyle,
                               bodyGridRow: hasColumnGroups ? 3 : 2,
                               onEdit,
                               editingCell,
                               onEditComplete: handleEditComplete,
                               enableDynamicRowHeight,
                               onRowHeightChange: handleRowHeightChange,
-                              columnGridIndexMap
+                              columnGridIndexMap,
+                              cellStyleFn: aiCellStyleOps.length > 0 ? (record, columnKey) => getAICellStyleForRecord(record, columnKey) : void 0
                             }
                           )
                         ]
@@ -4264,9 +4959,15 @@ function BoltTable({
     })()
   ] });
 }
+
+// src/types.ts
+function defineConfig(config) {
+  return config;
+}
 export {
   BoltTable,
   DraggableHeader_default as DraggableHeader,
   ResizeOverlay_default as ResizeOverlay,
-  TableBody_default as TableBody
+  TableBody_default as TableBody,
+  defineConfig
 };