@sqlrooms/vega 0.7.0 → 0.8.1

package/README.md

@@ -107,6 +107,94 @@ The chart can be sized in multiple ways:
 />
 ```
 
+### VegaChartTool
+
+A tool for creating Vega-Lite charts in AI-assisted workflows, designed to work with the [SQLRooms AI assistant framework](/api/ai/).
+
+#### Features
+
+- **AI Integration**: Allows AI assistants to create data visualizations
+- **SQL-Powered**: Uses SQL queries to fetch data for visualizations
+- **Declarative Specs**: Uses Vega-Lite's declarative JSON syntax for chart creation
+- **Responsive Design**: Charts automatically adapt to container size
+
+#### Usage
+
+```tsx
+import {createVegaChartTool} from '@sqlrooms/vega';
+import {createAiSlice} from '@sqlrooms/ai';
+import {createProjectStore} from '@sqlrooms/project-builder';
+
+// Create a project store with the VegaChartTool configured
+export const {projectStore, useProjectStore} = createProjectStore(
+  (set, get, store) => ({
+    // Other slices and state...
+
+    // AI slice with custom tools
+    ...createAiSlice({
+      getApiKey: (modelProvider: string) => {
+        return get()?.apiKeys[modelProvider] || '';
+      },
+      // Configure custom tools at store creation time
+      customTools: {
+        // Add the VegaChart tool
+        chart: createVegaChartTool({
+          // Optional custom description
+          description:
+            'Create data visualizations using Vega-Lite and SQL queries',
+        }),
+
+        // Other custom tools...
+      },
+    })(set, get, store),
+
+    // Other state and methods...
+  }),
+);
+```
+
+#### Tool Parameters
+
+The VegaChartTool accepts the following parameters:
+
+| Parameter      | Type     | Description                                                 |
+| -------------- | -------- | ----------------------------------------------------------- |
+| `sqlQuery`     | `string` | The SQL query to fetch data for the chart                   |
+| `vegaLiteSpec` | `string` | The Vega-Lite specification as a JSON string                |
+| `reasoning`    | `string` | Optional explanation of the chart's purpose or significance |
+
+#### Example AI Assistant Usage
+
+When the AI assistant uses the VegaChartTool, it will generate a response like this:
+
+```json
+{
+  "sqlQuery": "SELECT product_category, SUM(sales) as total_sales FROM sales GROUP BY product_category ORDER BY total_sales DESC LIMIT 10",
+  "vegaLiteSpec": "{\"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"product_category\", \"type\": \"nominal\", \"sort\": \"-y\"}, \"y\": {\"field\": \"total_sales\", \"type\": \"quantitative\", \"title\": \"Total Sales\"}, \"color\": {\"field\": \"product_category\", \"type\": \"nominal\", \"legend\": null}}}",
+  "reasoning": "This chart visualizes the top 10 product categories by total sales to identify the best-performing categories."
+}
+```
+
+In a conversation with the AI assistant, it might look like this:
+
+```
+User: Can you show me a chart of our top 10 product categories by sales?
+
+AI: I'll create a visualization of your top 10 product categories by sales.
+
+[Chart: Bar chart showing product categories on the x-axis and total sales on the y-axis]
+
+This chart displays your top 10 product categories ranked by total sales. As you can see,
+Electronics leads with the highest sales, followed by Furniture and Clothing. This visualization
+helps identify which product categories are driving the most revenue for your business.
+```
+
+The tool will:
+
+1. Execute the SQL query to fetch the data
+2. Apply the Vega-Lite specification to create the visualization
+3. Render the chart in the UI with responsive sizing
+
 ## Dependencies
 
 This package depends on:
@@ -114,4 +202,5 @@ This package depends on:
 - `@sqlrooms/duckdb` - For SQL query execution
 - `@sqlrooms/ui` - For UI utilities
 - `@sqlrooms/utils` - For utility functions
+- `@sqlrooms/ai` - For AI assistant integration
 - `react-vega` - For rendering Vega-Lite visualizations

package/dist/VegaChartTool.d.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod';
+import { AiSliceTool } from '@sqlrooms/ai';
+/**
+ * Zod schema for the VegaChart tool parameters
+ */
+export declare const VegaChartToolParameters: z.ZodObject<{
+    sqlQuery: z.ZodString;
+    vegaLiteSpec: z.ZodString;
+    reasoning: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    sqlQuery: string;
+    vegaLiteSpec: string;
+    reasoning: string;
+}, {
+    sqlQuery: string;
+    vegaLiteSpec: string;
+    reasoning: string;
+}>;
+export type VegaChartToolParameters = z.infer<typeof VegaChartToolParameters>;
+/**
+ * Default description for the VegaChart tool
+ */
+export declare const DEFAULT_VEGA_CHART_DESCRIPTION = "A tool for creating VegaLite charts based on the schema of the SQL query result from the \"query\" tool.\nIn the response:\n- omit the data from the vegaLiteSpec\n- provide an sql query in sqlQuery instead.";
+/**
+ * Creates a VegaLite chart visualization tool for AI assistants
+ * @param options - Configuration options for the VegaChart tool
+ * @param options.description - Custom description for the tool (defaults to a standard description)
+ * @returns A tool that can be used with the AI assistant
+ */
+export declare function createVegaChartTool({ description, }?: {
+    description?: string;
+}): AiSliceTool;
+//# sourceMappingURL=VegaChartTool.d.ts.map

package/dist/VegaChartTool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaChartTool.d.ts","sourceRoot":"","sources":["../src/VegaChartTool.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;EAIlC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,8BAA8B,mNAGC,CAAC;AAE7C;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAA4C,GAC7C,GAAE;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,WAAW,CA8BnB"}

package/dist/VegaChartTool.js

@@ -0,0 +1,56 @@
+import { z } from 'zod';
+import { VegaChartToolResult } from './VegaChartToolResult';
+/**
+ * Zod schema for the VegaChart tool parameters
+ */
+export const VegaChartToolParameters = z.object({
+    sqlQuery: z.string(),
+    vegaLiteSpec: z.string(),
+    reasoning: z.string(),
+});
+/**
+ * Default description for the VegaChart tool
+ */
+export const DEFAULT_VEGA_CHART_DESCRIPTION = `A tool for creating VegaLite charts based on the schema of the SQL query result from the "query" tool.
+In the response:
+- omit the data from the vegaLiteSpec
+- provide an sql query in sqlQuery instead.`;
+/**
+ * Creates a VegaLite chart visualization tool for AI assistants
+ * @param options - Configuration options for the VegaChart tool
+ * @param options.description - Custom description for the tool (defaults to a standard description)
+ * @returns A tool that can be used with the AI assistant
+ */
+export function createVegaChartTool({ description = DEFAULT_VEGA_CHART_DESCRIPTION, } = {}) {
+    return {
+        description,
+        parameters: VegaChartToolParameters,
+        execute: async ({ sqlQuery, vegaLiteSpec }) => {
+            try {
+                const parsedVegaLiteSpec = JSON.parse(vegaLiteSpec);
+                // data object of the vegaLiteSpec and sqlQuery
+                // it is not used yet, but we can use it to create a JSON editor for user to edit the vegaLiteSpec so that chart can be updated
+                return {
+                    llmResult: {
+                        success: true,
+                        details: 'Chart created successfully.',
+                    },
+                    additionalData: {
+                        sqlQuery,
+                        vegaLiteSpec: parsedVegaLiteSpec,
+                    },
+                };
+            }
+            catch (error) {
+                return {
+                    llmResult: {
+                        success: false,
+                        details: `Not a valid JSON object: ${error}`,
+                    },
+                };
+            }
+        },
+        component: VegaChartToolResult,
+    };
+}
+//# sourceMappingURL=VegaChartTool.js.map

package/dist/VegaChartTool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaChartTool.js","sourceRoot":"","sources":["../src/VegaChartTool.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AACtB,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAG1D;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC9C,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE;IACpB,YAAY,EAAE,CAAC,CAAC,MAAM,EAAE;IACxB,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;CACtB,CAAC,CAAC;AAIH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG;;;4CAGF,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,WAAW,GAAG,8BAA8B,MAG1C,EAAE;IACJ,OAAO;QACL,WAAW;QACX,UAAU,EAAE,uBAAuB;QACnC,OAAO,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,YAAY,EAA0B,EAAE,EAAE;YACnE,IAAI,CAAC;gBACH,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;gBACpD,+CAA+C;gBAC/C,+HAA+H;gBAC/H,OAAO;oBACL,SAAS,EAAE;wBACT,OAAO,EAAE,IAAI;wBACb,OAAO,EAAE,6BAA6B;qBACvC;oBACD,cAAc,EAAE;wBACd,QAAQ;wBACR,YAAY,EAAE,kBAAkB;qBACjC;iBACF,CAAC;YACJ,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO;oBACL,SAAS,EAAE;wBACT,OAAO,EAAE,KAAK;wBACd,OAAO,EAAE,4BAA4B,KAAK,EAAE;qBAC7C;iBACF,CAAC;YACJ,CAAC;QACH,CAAC;QACD,SAAS,EAAE,mBAAmB;KAC/B,CAAC;AACJ,CAAC","sourcesContent":["import {z} from 'zod';\nimport {VegaChartToolResult} from './VegaChartToolResult';\nimport {AiSliceTool} from '@sqlrooms/ai';\n\n/**\n * Zod schema for the VegaChart tool parameters\n */\nexport const VegaChartToolParameters = z.object({\n  sqlQuery: z.string(),\n  vegaLiteSpec: z.string(),\n  reasoning: z.string(),\n});\n\nexport type VegaChartToolParameters = z.infer<typeof VegaChartToolParameters>;\n\n/**\n * Default description for the VegaChart tool\n */\nexport const DEFAULT_VEGA_CHART_DESCRIPTION = `A tool for creating VegaLite charts based on the schema of the SQL query result from the \"query\" tool.\nIn the response:\n- omit the data from the vegaLiteSpec\n- provide an sql query in sqlQuery instead.`;\n\n/**\n * Creates a VegaLite chart visualization tool for AI assistants\n * @param options - Configuration options for the VegaChart tool\n * @param options.description - Custom description for the tool (defaults to a standard description)\n * @returns A tool that can be used with the AI assistant\n */\nexport function createVegaChartTool({\n  description = DEFAULT_VEGA_CHART_DESCRIPTION,\n}: {\n  description?: string;\n} = {}): AiSliceTool {\n  return {\n    description,\n    parameters: VegaChartToolParameters,\n    execute: async ({sqlQuery, vegaLiteSpec}: VegaChartToolParameters) => {\n      try {\n        const parsedVegaLiteSpec = JSON.parse(vegaLiteSpec);\n        // data object of the vegaLiteSpec and sqlQuery\n        // it is not used yet, but we can use it to create a JSON editor for user to edit the vegaLiteSpec so that chart can be updated\n        return {\n          llmResult: {\n            success: true,\n            details: 'Chart created successfully.',\n          },\n          additionalData: {\n            sqlQuery,\n            vegaLiteSpec: parsedVegaLiteSpec,\n          },\n        };\n      } catch (error) {\n        return {\n          llmResult: {\n            success: false,\n            details: `Not a valid JSON object: ${error}`,\n          },\n        };\n      }\n    },\n    component: VegaChartToolResult,\n  };\n}\n"]}

package/dist/VegaChartToolResult.d.ts

@@ -0,0 +1,14 @@
+import { VisualizationSpec } from 'react-vega';
+type VegaChartToolResultProps = {
+    reasoning: string;
+    sqlQuery: string;
+    vegaLiteSpec: VisualizationSpec;
+};
+/**
+ * Renders a chart tool call with visualization using Vega-Lite
+ * @param {VegaChartToolResultProps} props - The component props
+ * @returns {JSX.Element} The rendered chart tool call
+ */
+export declare function VegaChartToolResult({ sqlQuery, vegaLiteSpec, }: VegaChartToolResultProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VegaChartToolResult.d.ts.map

package/dist/VegaChartToolResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAE7C,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,iBAAiB,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,2CAwB1B"}

package/dist/VegaChartToolResult.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { VegaLiteChart } from './VegaLiteChart';
+import { QueryToolResult } from '@sqlrooms/ai';
+/**
+ * Renders a chart tool call with visualization using Vega-Lite
+ * @param {VegaChartToolResultProps} props - The component props
+ * @returns {JSX.Element} The rendered chart tool call
+ */
+export function VegaChartToolResult({ sqlQuery, vegaLiteSpec, }) {
+    return (_jsx(_Fragment, { children: vegaLiteSpec && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(QueryToolResult, { title: "Query", sqlQuery: sqlQuery }), _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" }) }), children: _jsx(VegaLiteChart, { className: "max-w-[600px]", aspectRatio: 16 / 9, sqlQuery: sqlQuery, spec: vegaLiteSpec }) })] })) }));
+}
+//# sourceMappingURL=VegaChartToolResult.js.map

package/dist/VegaChartToolResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAS7C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,GACa;IACzB,OAAO,CACL,4BACG,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,eAAe,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,QAAQ,GAAI,EACrD,KAAC,QAAQ,IACP,QAAQ,EACN,cAAK,SAAS,EAAC,gDAAgD,YAC7D,cAAK,SAAS,EAAC,8EAA8E,GAAO,GAChG,YAGR,KAAC,aAAa,IACZ,SAAS,EAAC,eAAe,EACzB,WAAW,EAAE,EAAE,GAAG,CAAC,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,GAClB,GACO,IACP,CACP,GACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import {Suspense} from 'react';\nimport {VegaLiteChart} from './VegaLiteChart';\nimport {QueryToolResult} from '@sqlrooms/ai';\nimport {VisualizationSpec} from 'react-vega';\n\ntype VegaChartToolResultProps = {\n  reasoning: string;\n  sqlQuery: string;\n  vegaLiteSpec: VisualizationSpec;\n};\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite\n * @param {VegaChartToolResultProps} props - The component props\n * @returns {JSX.Element} The rendered chart tool call\n */\nexport function VegaChartToolResult({\n  sqlQuery,\n  vegaLiteSpec,\n}: VegaChartToolResultProps) {\n  return (\n    <>\n      {vegaLiteSpec && (\n        <div className=\"flex flex-col gap-2\">\n          <QueryToolResult title=\"Query\" sqlQuery={sqlQuery} />\n          <Suspense\n            fallback={\n              <div className=\"flex h-full w-full items-center justify-center\">\n                <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\"></div>\n              </div>\n            }\n          >\n            <VegaLiteChart\n              className=\"max-w-[600px]\"\n              aspectRatio={16 / 9}\n              sqlQuery={sqlQuery}\n              spec={vegaLiteSpec}\n            />\n          </Suspense>\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/dist/VegaLiteChart.js

@@ -87,6 +87,6 @@ export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspe
         };
         fetchData();
     }, [sqlQuery, conn]);
-    return (_jsx("div", { ref: containerRef, className: cn('w-full h-full flex flex-col gap-2 overflow-hidden', className), children: refinedSpec && data && _jsx(VegaLite, { spec: refinedSpec, data: data }) }));
+    return (_jsx("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: refinedSpec && data && _jsx(VegaLite, { spec: refinedSpec, data: data }) }));
 };
 //# sourceMappingURL=VegaLiteChart.js.map

package/dist/VegaLiteChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAC,EAAE,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAoB,MAAM,YAAY,CAAC;AAEvD,MAAM,SAAS,GAAG,aAAa,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,MAAM,aAAa,GAOrB,CAAC,EACJ,SAAS,EACT,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,WAAW,GAAG,CAAC,GAAG,CAAC,EACnB,QAAQ,EACR,IAAI,GACL,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,wBAAwB,CAAC;QAC1C,YAAY;QACZ,KAAK;QACL,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;IAEH,MAAM,EAAC,IAAI,EAAC,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAA2B,CAAC;IAE5D,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QACzB,OAAO;YACL,GAAG,MAAM;YACT,IAAI,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;YACvB,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,MAAM;YACzB,QAAQ,EAAE;gBACR,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,SAAS;aACpB;SACmB,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC1C,OAAO,CAAC,EAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC;QACnD,CAAC,CAAC;QACF,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,YAEA,WAAW,IAAI,IAAI,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,GAC/D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {arrowTableToJson, useDuckDb} from '@sqlrooms/duckdb';\nimport {cn, useAspectRatioDimensions} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport {useEffect, useMemo, useRef, useState} from 'react';\nimport {VegaLite, VisualizationSpec} from 'react-vega';\n\nconst DATA_NAME = 'queryResult';\n\n/**\n * A component that renders a Vega-Lite chart with SQL data and responsive sizing.\n *\n * The chart can be sized in multiple ways:\n * - Fixed dimensions: Provide both width and height as numbers\n * - Fixed width, proportional height: Provide width as number, height as 'auto'\n * - Fixed height, proportional width: Provide height as number, width as 'auto'\n * - Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio\n *\n * @param props - The component props\n * @param {number | 'auto'} [props.width='auto'] - The chart width in pixels, or 'auto' to use container width\n * @param {number | 'auto'} [props.height='auto'] - The chart height in pixels, or 'auto' to calculate from aspect ratio\n * @param {number} [props.aspectRatio=3/2] - The desired width-to-height ratio when dimensions are auto-calculated\n * @param {string} props.sqlQuery - The SQL query to fetch data for the chart\n * @param {string | VisualizationSpec} props.spec - The Vega-Lite specification for the chart.\n *   Can be either a JSON string or a VisualizationSpec object.\n *   The data and size properties will be overridden by the component.\n *\n * @returns The rendered chart component\n *\n * @example\n * // Fixed size chart\n * <VegaLiteChart\n *   width={600}\n *   height={400}\n *   sqlQuery=\"SELECT category, count(*) as count FROM sales GROUP BY category\"\n *   spec={{\n *     mark: 'bar',\n *     encoding: {\n *       x: {field: 'category', type: 'nominal'},\n *       y: {field: 'count', type: 'quantitative'}\n *     }\n *   }}\n * />\n *\n * @example\n * // Responsive chart with 16:9 aspect ratio\n * <VegaLiteChart\n *   className=\"max-w-[600px]\"\n *   aspectRatio={16/9}\n *   sqlQuery=\"SELECT date, value FROM metrics\"\n *   spec={{\n *     mark: 'line',\n *     encoding: {\n *       x: {field: 'date', type: 'temporal'},\n *       y: {field: 'value', type: 'quantitative'}\n *     }\n *   }}\n * />\n */\nexport const VegaLiteChart: React.FC<{\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  sqlQuery: string;\n  spec: string | VisualizationSpec;\n}> = ({\n  className,\n  width = 'auto',\n  height = 'auto',\n  aspectRatio = 3 / 2,\n  sqlQuery,\n  spec,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n\n  const {conn} = useDuckDb();\n  const [data, setData] = useState<Record<string, unknown>>();\n\n  const refinedSpec = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) return null;\n    return {\n      ...parsed,\n      data: {name: DATA_NAME},\n      width: dimensions.width,\n      height: dimensions.height,\n      autosize: {\n        type: 'fit',\n        contains: 'padding',\n      },\n    } as VisualizationSpec;\n  }, [spec, dimensions]);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const result = await conn.query(sqlQuery);\n      setData({[DATA_NAME]: arrowTableToJson(result)});\n    };\n    fetchData();\n  }, [sqlQuery, conn]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'w-full h-full flex flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {refinedSpec && data && <VegaLite spec={refinedSpec} data={data} />}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAC,EAAE,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAoB,MAAM,YAAY,CAAC;AAEvD,MAAM,SAAS,GAAG,aAAa,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,MAAM,aAAa,GAOrB,CAAC,EACJ,SAAS,EACT,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,WAAW,GAAG,CAAC,GAAG,CAAC,EACnB,QAAQ,EACR,IAAI,GACL,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,wBAAwB,CAAC;QAC1C,YAAY;QACZ,KAAK;QACL,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;IAEH,MAAM,EAAC,IAAI,EAAC,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAA2B,CAAC;IAE5D,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QACzB,OAAO;YACL,GAAG,MAAM;YACT,IAAI,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;YACvB,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,MAAM;YACzB,QAAQ,EAAE;gBACR,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,SAAS;aACpB;SACmB,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC1C,OAAO,CAAC,EAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC;QACnD,CAAC,CAAC;QACF,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,YAEA,WAAW,IAAI,IAAI,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,GAC/D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {arrowTableToJson, useDuckDb} from '@sqlrooms/duckdb';\nimport {cn, useAspectRatioDimensions} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport {useEffect, useMemo, useRef, useState} from 'react';\nimport {VegaLite, VisualizationSpec} from 'react-vega';\n\nconst DATA_NAME = 'queryResult';\n\n/**\n * A component that renders a Vega-Lite chart with SQL data and responsive sizing.\n *\n * The chart can be sized in multiple ways:\n * - Fixed dimensions: Provide both width and height as numbers\n * - Fixed width, proportional height: Provide width as number, height as 'auto'\n * - Fixed height, proportional width: Provide height as number, width as 'auto'\n * - Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio\n *\n * @param props - The component props\n * @param {number | 'auto'} [props.width='auto'] - The chart width in pixels, or 'auto' to use container width\n * @param {number | 'auto'} [props.height='auto'] - The chart height in pixels, or 'auto' to calculate from aspect ratio\n * @param {number} [props.aspectRatio=3/2] - The desired width-to-height ratio when dimensions are auto-calculated\n * @param {string} props.sqlQuery - The SQL query to fetch data for the chart\n * @param {string | VisualizationSpec} props.spec - The Vega-Lite specification for the chart.\n *   Can be either a JSON string or a VisualizationSpec object.\n *   The data and size properties will be overridden by the component.\n *\n * @returns The rendered chart component\n *\n * @example\n * // Fixed size chart\n * <VegaLiteChart\n *   width={600}\n *   height={400}\n *   sqlQuery=\"SELECT category, count(*) as count FROM sales GROUP BY category\"\n *   spec={{\n *     mark: 'bar',\n *     encoding: {\n *       x: {field: 'category', type: 'nominal'},\n *       y: {field: 'count', type: 'quantitative'}\n *     }\n *   }}\n * />\n *\n * @example\n * // Responsive chart with 16:9 aspect ratio\n * <VegaLiteChart\n *   className=\"max-w-[600px]\"\n *   aspectRatio={16/9}\n *   sqlQuery=\"SELECT date, value FROM metrics\"\n *   spec={{\n *     mark: 'line',\n *     encoding: {\n *       x: {field: 'date', type: 'temporal'},\n *       y: {field: 'value', type: 'quantitative'}\n *     }\n *   }}\n * />\n */\nexport const VegaLiteChart: React.FC<{\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  sqlQuery: string;\n  spec: string | VisualizationSpec;\n}> = ({\n  className,\n  width = 'auto',\n  height = 'auto',\n  aspectRatio = 3 / 2,\n  sqlQuery,\n  spec,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n\n  const {conn} = useDuckDb();\n  const [data, setData] = useState<Record<string, unknown>>();\n\n  const refinedSpec = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) return null;\n    return {\n      ...parsed,\n      data: {name: DATA_NAME},\n      width: dimensions.width,\n      height: dimensions.height,\n      autosize: {\n        type: 'fit',\n        contains: 'padding',\n      },\n    } as VisualizationSpec;\n  }, [spec, dimensions]);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const result = await conn.query(sqlQuery);\n      setData({[DATA_NAME]: arrowTableToJson(result)});\n    };\n    fetchData();\n  }, [sqlQuery, conn]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {refinedSpec && data && <VegaLite spec={refinedSpec} data={data} />}\n    </div>\n  );\n};\n"]}

package/dist/index.d.ts

@@ -3,5 +3,8 @@
  * @packageDocumentation
  */
 export { VegaLiteChart } from './VegaLiteChart';
+export { VegaChartToolResult as VegaChartToolResult } from './VegaChartToolResult';
 export type { VisualizationSpec } from 'react-vega';
+export { createVegaChartTool, VegaChartToolParameters, DEFAULT_VEGA_CHART_DESCRIPTION, } from './VegaChartTool';
+export type { VegaChartToolParameters as VegaChartToolParametersType } from './VegaChartTool';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,mBAAmB,IAAI,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AACjF,YAAY,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAClD,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,8BAA8B,GAC/B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAC,uBAAuB,IAAI,2BAA2B,EAAC,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -3,4 +3,6 @@
  * @packageDocumentation
  */
 export { VegaLiteChart } from './VegaLiteChart';
+export { VegaChartToolResult as VegaChartToolResult } from './VegaChartToolResult';
+export { createVegaChartTool, VegaChartToolParameters, DEFAULT_VEGA_CHART_DESCRIPTION, } from './VegaChartTool';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\nexport {VegaLiteChart} from './VegaLiteChart';\nexport type {VisualizationSpec} from 'react-vega';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,mBAAmB,IAAI,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAEjF,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,8BAA8B,GAC/B,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\nexport {VegaLiteChart} from './VegaLiteChart';\nexport {VegaChartToolResult as VegaChartToolResult} from './VegaChartToolResult';\nexport type {VisualizationSpec} from 'react-vega';\nexport {\n  createVegaChartTool,\n  VegaChartToolParameters,\n  DEFAULT_VEGA_CHART_DESCRIPTION,\n} from './VegaChartTool';\nexport type {VegaChartToolParameters as VegaChartToolParametersType} from './VegaChartTool';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/vega",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -19,9 +19,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sqlrooms/duckdb": "0.7.0",
-    "@sqlrooms/ui": "0.7.0",
-    "@sqlrooms/utils": "0.7.0",
+    "@sqlrooms/ai": "0.8.1",
+    "@sqlrooms/duckdb": "0.8.1",
+    "@sqlrooms/ui": "0.8.1",
+    "@sqlrooms/utils": "0.8.1",
     "react-vega": "^7.6.0",
     "vega": "^5.31.0",
     "vega-lite": "^5.23.0"
@@ -36,5 +37,5 @@
     "lint": "eslint .",
     "typedoc": "typedoc"
   },
-  "gitHead": "8be65f051c588d3a963f721322429657913b6c63"
+  "gitHead": "7b5e727b79d675c17b93412c109d1ba1b22699c8"
 }