@sqlrooms/vega 0.26.0-rc.6 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/VegaChartTool.d.ts +1 -1
- package/dist/VegaChartTool.d.ts.map +1 -1
- package/dist/VegaChartTool.js +41 -3
- package/dist/VegaChartTool.js.map +1 -1
- package/dist/VegaChartToolResult.d.ts.map +1 -1
- package/dist/VegaChartToolResult.js +4 -2
- package/dist/VegaChartToolResult.js.map +1 -1
- package/package.json +6 -6
package/dist/VegaChartTool.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ export type VegaChartToolContext = unknown;
|
|
|
26
26
|
/**
|
|
27
27
|
* Default description for the VegaChart tool
|
|
28
28
|
*/
|
|
29
|
-
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.";
|
|
29
|
+
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.\n\nBest practices for creating charts:\n- try to use strptime to convert e.g. YYYYMMDD string format to a proper type (date, datetime, etc.)\n- try to set the top-level width property to \"container\", so the chart will stretch to the full width of its parent container.\n- for bar charts with few categories (<= 5), widen bars by reducing band padding on the x scale:\n - For 2-3 categories: set \"encoding.x.scale.paddingInner\" to 0.2 and \"paddingOuter\" to 0.1 for optimal bar width with clear separation\n - For 4-5 categories: set \"encoding.x.scale.paddingInner\" to 0.1 and \"paddingOuter\" to 0.05 for narrower spacing\n - Adjust to lower values (0.05/0.02 or 0/0) only if user specifically requests maximum bar width\n- If the chart uses an encoding channel like color, shape, or size to represent a data field, then include a legend object in that channel's encoding (unless explicitly told not to).";
|
|
30
30
|
/**
|
|
31
31
|
* Creates a VegaLite chart visualization tool for AI assistants
|
|
32
32
|
* @param options - Configuration options for the VegaChart tool
|
|
@@ -1 +1 @@
|
|
|
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,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;
|
|
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,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AAIvD;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;iBAIlC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,SAAS,CAAC;IAC1C,QAAQ,EAAE,CAAC,CAAC,SAAS,CAAC;IACtB,YAAY,EAAE,CAAC,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC;CACxB,CAAC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC;AAE3C;;GAEG;AACH,eAAO,MAAM,8BAA8B,smCAY4I,CAAC;AAExL;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAA4C,GAC7C,GAAE;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,iBAAiB,CACxB,OAAO,uBAAuB,EAC9B,sBAAsB,EACtB,2BAA2B,EAC3B,oBAAoB,CACrB,CAiEA"}
|
package/dist/VegaChartTool.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { z } from 'zod';
|
|
2
2
|
import { VegaChartToolResult } from './VegaChartToolResult';
|
|
3
|
+
import { compile } from 'vega-lite';
|
|
4
|
+
import { parse as vegaParse } from 'vega';
|
|
3
5
|
/**
|
|
4
6
|
* Zod schema for the VegaChart tool parameters
|
|
5
7
|
*/
|
|
@@ -14,7 +16,16 @@ export const VegaChartToolParameters = z.object({
|
|
|
14
16
|
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.
|
|
15
17
|
In the response:
|
|
16
18
|
- omit the data from the vegaLiteSpec
|
|
17
|
-
- provide an sql query in sqlQuery instead
|
|
19
|
+
- provide an sql query in sqlQuery instead.
|
|
20
|
+
|
|
21
|
+
Best practices for creating charts:
|
|
22
|
+
- try to use strptime to convert e.g. YYYYMMDD string format to a proper type (date, datetime, etc.)
|
|
23
|
+
- try to set the top-level width property to "container", so the chart will stretch to the full width of its parent container.
|
|
24
|
+
- for bar charts with few categories (<= 5), widen bars by reducing band padding on the x scale:
|
|
25
|
+
- For 2-3 categories: set "encoding.x.scale.paddingInner" to 0.2 and "paddingOuter" to 0.1 for optimal bar width with clear separation
|
|
26
|
+
- For 4-5 categories: set "encoding.x.scale.paddingInner" to 0.1 and "paddingOuter" to 0.05 for narrower spacing
|
|
27
|
+
- Adjust to lower values (0.05/0.02 or 0/0) only if user specifically requests maximum bar width
|
|
28
|
+
- If the chart uses an encoding channel like color, shape, or size to represent a data field, then include a legend object in that channel's encoding (unless explicitly told not to).`;
|
|
18
29
|
/**
|
|
19
30
|
* Creates a VegaLite chart visualization tool for AI assistants
|
|
20
31
|
* @param options - Configuration options for the VegaChart tool
|
|
@@ -26,16 +37,43 @@ export function createVegaChartTool({ description = DEFAULT_VEGA_CHART_DESCRIPTI
|
|
|
26
37
|
name: 'chart',
|
|
27
38
|
description,
|
|
28
39
|
parameters: VegaChartToolParameters,
|
|
29
|
-
execute: async (params) => {
|
|
40
|
+
execute: async (params, options) => {
|
|
41
|
+
const abortSignal = options?.abortSignal;
|
|
30
42
|
const { sqlQuery, vegaLiteSpec } = params;
|
|
31
43
|
try {
|
|
44
|
+
// Check if aborted before starting
|
|
45
|
+
if (abortSignal?.aborted) {
|
|
46
|
+
throw new Error('Chart creation was aborted');
|
|
47
|
+
}
|
|
32
48
|
const parsedVegaLiteSpec = JSON.parse(vegaLiteSpec);
|
|
49
|
+
// Validate/spec-check by compiling to Vega and attempting to parse it.
|
|
50
|
+
// - compile() can throw on invalid Vega-Lite specs
|
|
51
|
+
// - vegaParse() will throw if the compiled Vega spec is invalid
|
|
52
|
+
let vegaWarnings = [];
|
|
53
|
+
try {
|
|
54
|
+
const compiled = compile(parsedVegaLiteSpec);
|
|
55
|
+
// vega-lite's compile() may expose warnings at runtime, but types don't include it
|
|
56
|
+
vegaWarnings = compiled.warnings ?? [];
|
|
57
|
+
// This will throw if the compiled Vega spec is invalid
|
|
58
|
+
vegaParse(compiled.spec);
|
|
59
|
+
}
|
|
60
|
+
catch (e) {
|
|
61
|
+
const message = e instanceof Error ? e.message : String(e);
|
|
62
|
+
return {
|
|
63
|
+
llmResult: {
|
|
64
|
+
success: false,
|
|
65
|
+
details: `Invalid Vega-Lite spec: ${message}`,
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
}
|
|
33
69
|
// data object of the vegaLiteSpec and sqlQuery
|
|
34
70
|
// 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
|
|
35
71
|
return {
|
|
36
72
|
llmResult: {
|
|
37
73
|
success: true,
|
|
38
|
-
details:
|
|
74
|
+
details: vegaWarnings.length > 0
|
|
75
|
+
? `Chart created successfully with warnings:\n- ${vegaWarnings.join('\n- ')}`
|
|
76
|
+
: 'Chart created successfully.',
|
|
39
77
|
},
|
|
40
78
|
additionalData: {
|
|
41
79
|
sqlQuery,
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAE1D,OAAO,EAAC,OAAO,EAAe,MAAM,WAAW,CAAC;AAChD,OAAO,EAAC,KAAK,IAAI,SAAS,EAAC,MAAM,MAAM,CAAC;AAExC;;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;AAsBH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG;;;;;;;;;;;;uLAYyI,CAAC;AAExL;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,WAAW,GAAG,8BAA8B,MAG1C,EAAE;IAMJ,OAAO;QACL,IAAI,EAAE,OAAO;QACb,WAAW;QACX,UAAU,EAAE,uBAAuB;QACnC,OAAO,EAAE,KAAK,EACZ,MAA+B,EAC/B,OAAqC,EACrC,EAAE;YACF,MAAM,WAAW,GAAG,OAAO,EAAE,WAAW,CAAC;YACzC,MAAM,EAAC,QAAQ,EAAE,YAAY,EAAC,GAAG,MAAM,CAAC;YACxC,IAAI,CAAC;gBACH,mCAAmC;gBACnC,IAAI,WAAW,EAAE,OAAO,EAAE,CAAC;oBACzB,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;gBAChD,CAAC;gBAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAiB,CAAC;gBAEpE,uEAAuE;gBACvE,mDAAmD;gBACnD,gEAAgE;gBAChE,IAAI,YAAY,GAAa,EAAE,CAAC;gBAChC,IAAI,CAAC;oBACH,MAAM,QAAQ,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;oBAC7C,mFAAmF;oBACnF,YAAY,GAAI,QAAgB,CAAC,QAAQ,IAAI,EAAE,CAAC;oBAChD,uDAAuD;oBACvD,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,MAAM,OAAO,GAAG,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;oBAC3D,OAAO;wBACL,SAAS,EAAE;4BACT,OAAO,EAAE,KAAK;4BACd,OAAO,EAAE,2BAA2B,OAAO,EAAE;yBAC9C;qBACF,CAAC;gBACJ,CAAC;gBAED,+CAA+C;gBAC/C,+HAA+H;gBAC/H,OAAO;oBACL,SAAS,EAAE;wBACT,OAAO,EAAE,IAAI;wBACb,OAAO,EACL,YAAY,CAAC,MAAM,GAAG,CAAC;4BACrB,CAAC,CAAC,gDAAgD,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;4BAC7E,CAAC,CAAC,6BAA6B;qBACpC;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 {OpenAssistantTool} from '@openassistant/utils';\nimport {compile, TopLevelSpec} from 'vega-lite';\nimport {parse as vegaParse} from 'vega';\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\nexport type VegaChartToolArgs = z.ZodObject<{\n sqlQuery: z.ZodString;\n vegaLiteSpec: z.ZodString;\n reasoning: z.ZodString;\n}>;\n\nexport type VegaChartToolLlmResult = {\n success: boolean;\n details: string;\n};\n\nexport type VegaChartToolAdditionalData = {\n sqlQuery: string;\n vegaLiteSpec: object;\n};\n\nexport type VegaChartToolContext = unknown;\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\nBest practices for creating charts:\n- try to use strptime to convert e.g. YYYYMMDD string format to a proper type (date, datetime, etc.)\n- try to set the top-level width property to \"container\", so the chart will stretch to the full width of its parent container.\n- for bar charts with few categories (<= 5), widen bars by reducing band padding on the x scale:\n - For 2-3 categories: set \"encoding.x.scale.paddingInner\" to 0.2 and \"paddingOuter\" to 0.1 for optimal bar width with clear separation\n - For 4-5 categories: set \"encoding.x.scale.paddingInner\" to 0.1 and \"paddingOuter\" to 0.05 for narrower spacing\n - Adjust to lower values (0.05/0.02 or 0/0) only if user specifically requests maximum bar width\n- If the chart uses an encoding channel like color, shape, or size to represent a data field, then include a legend object in that channel's encoding (unless explicitly told not to).`;\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} = {}): OpenAssistantTool<\n typeof VegaChartToolParameters,\n VegaChartToolLlmResult,\n VegaChartToolAdditionalData,\n VegaChartToolContext\n> {\n return {\n name: 'chart',\n description,\n parameters: VegaChartToolParameters,\n execute: async (\n params: VegaChartToolParameters,\n options?: {abortSignal?: AbortSignal},\n ) => {\n const abortSignal = options?.abortSignal;\n const {sqlQuery, vegaLiteSpec} = params;\n try {\n // Check if aborted before starting\n if (abortSignal?.aborted) {\n throw new Error('Chart creation was aborted');\n }\n\n const parsedVegaLiteSpec = JSON.parse(vegaLiteSpec) as TopLevelSpec;\n\n // Validate/spec-check by compiling to Vega and attempting to parse it.\n // - compile() can throw on invalid Vega-Lite specs\n // - vegaParse() will throw if the compiled Vega spec is invalid\n let vegaWarnings: string[] = [];\n try {\n const compiled = compile(parsedVegaLiteSpec);\n // vega-lite's compile() may expose warnings at runtime, but types don't include it\n vegaWarnings = (compiled as any).warnings ?? [];\n // This will throw if the compiled Vega spec is invalid\n vegaParse(compiled.spec);\n } catch (e) {\n const message = e instanceof Error ? e.message : String(e);\n return {\n llmResult: {\n success: false,\n details: `Invalid Vega-Lite spec: ${message}`,\n },\n };\n }\n\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:\n vegaWarnings.length > 0\n ? `Chart created successfully with warnings:\\n- ${vegaWarnings.join('\\n- ')}`\n : '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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAG7C,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,iBAAiB,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,2CAmD1B"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { QueryToolResult } from '@sqlrooms/ai';
|
|
3
3
|
import { useSql } from '@sqlrooms/duckdb';
|
|
4
|
-
import { cn } from '@sqlrooms/ui';
|
|
4
|
+
import { cn, Popover, PopoverContent, PopoverTrigger, useDisclosure, } from '@sqlrooms/ui';
|
|
5
|
+
import { TriangleAlertIcon } from 'lucide-react';
|
|
5
6
|
import { VegaLiteChart } from './VegaLiteChart';
|
|
6
7
|
/**
|
|
7
8
|
* Renders a chart tool call with visualization using Vega-Lite
|
|
@@ -10,6 +11,7 @@ import { VegaLiteChart } from './VegaLiteChart';
|
|
|
10
11
|
*/
|
|
11
12
|
export function VegaChartToolResult({ className, sqlQuery, vegaLiteSpec, }) {
|
|
12
13
|
const result = useSql({ query: sqlQuery });
|
|
13
|
-
|
|
14
|
+
const popoverOpen = useDisclosure();
|
|
15
|
+
return (_jsx(_Fragment, { children: vegaLiteSpec && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(QueryToolResult, { title: "", arrowTable: result.data?.arrowTable, sqlQuery: sqlQuery }), result.error ? (_jsxs(Popover, { open: popoverOpen.isOpen, onOpenChange: popoverOpen.onToggle, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "flex items-center gap-2 transition-colors", "aria-label": "Show error details", children: _jsx(TriangleAlertIcon, { className: "h-4 w-4" }) }) }), _jsx(PopoverContent, { align: "start", style: { width: '600px', maxWidth: '80%' }, children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "border-b text-sm font-medium", children: "Query Error" }), _jsx("div", { className: "whitespace-pre-wrap font-mono text-sm text-red-500", children: result.error?.message })] }) })] })) : result.isLoading ? (_jsxs("div", { className: "text-muted-foreground align-center flex gap-2 px-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" }), "Running query for chart data\u2026"] })) : (_jsx(VegaLiteChart.ArrowChart, { className: cn(className), aspectRatio: 16 / 9, arrowTable: result.data?.arrowTable, spec: vegaLiteSpec }))] })) }));
|
|
14
16
|
}
|
|
15
17
|
//# sourceMappingURL=VegaChartToolResult.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,
|
|
1
|
+
{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACL,EAAE,EACF,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAS9C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,GACa;IACzB,MAAM,MAAM,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,aAAa,EAAE,CAAC;IACpC,OAAO,CACL,4BACG,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,eAAe,IACd,KAAK,EAAC,EAAE,EACR,UAAU,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,EACnC,QAAQ,EAAE,QAAQ,GAClB,EACD,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CACd,MAAC,OAAO,IAAC,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,WAAW,CAAC,QAAQ,aACnE,KAAC,cAAc,IAAC,OAAO,kBACrB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,4CAA4C,gBAC3C,oBAAoB,YAE/B,KAAC,iBAAiB,IAAC,SAAS,EAAC,SAAS,GAAG,GAClC,GACM,EACjB,KAAC,cAAc,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAC,YACpE,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,8BAA8B,4BAEvC,EACN,cAAK,SAAS,EAAC,oDAAoD,YAChE,MAAM,CAAC,KAAK,EAAE,OAAO,GAClB,IACF,GACS,IACT,CACX,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CACrB,eAAK,SAAS,EAAC,oDAAoD,aACjE,cAAK,SAAS,EAAC,8EAA8E,GAAO,0CAEhG,CACP,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,CAAC,UAAU,IACvB,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EACxB,WAAW,EAAE,EAAE,GAAG,CAAC,EACnB,UAAU,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,EACnC,IAAI,EAAE,YAAY,GAClB,CACH,IACG,CACP,GACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import {QueryToolResult} from '@sqlrooms/ai';\nimport {useSql} from '@sqlrooms/duckdb';\nimport {\n cn,\n Popover,\n PopoverContent,\n PopoverTrigger,\n useDisclosure,\n} from '@sqlrooms/ui';\nimport {TriangleAlertIcon} from 'lucide-react';\nimport {VisualizationSpec} from 'react-vega';\nimport {VegaLiteChart} from './VegaLiteChart';\n\ntype VegaChartToolResultProps = {\n className?: string;\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 className,\n sqlQuery,\n vegaLiteSpec,\n}: VegaChartToolResultProps) {\n const result = useSql({query: sqlQuery});\n const popoverOpen = useDisclosure();\n return (\n <>\n {vegaLiteSpec && (\n <div className=\"flex flex-col gap-2\">\n <QueryToolResult\n title=\"\"\n arrowTable={result.data?.arrowTable}\n sqlQuery={sqlQuery}\n />\n {result.error ? (\n <Popover open={popoverOpen.isOpen} onOpenChange={popoverOpen.onToggle}>\n <PopoverTrigger asChild>\n <button\n type=\"button\"\n className=\"flex items-center gap-2 transition-colors\"\n aria-label=\"Show error details\"\n >\n <TriangleAlertIcon className=\"h-4 w-4\" />\n </button>\n </PopoverTrigger>\n <PopoverContent align=\"start\" style={{width: '600px', maxWidth: '80%'}}>\n <div className=\"flex flex-col gap-2\">\n <div className=\"border-b text-sm font-medium\">\n Query Error\n </div>\n <div className=\"whitespace-pre-wrap font-mono text-sm text-red-500\">\n {result.error?.message}\n </div>\n </div>\n </PopoverContent>\n </Popover>\n ) : result.isLoading ? (\n <div className=\"text-muted-foreground align-center flex gap-2 px-2\">\n <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\"></div>\n Running query for chart data…\n </div>\n ) : (\n <VegaLiteChart.ArrowChart\n className={cn(className)}\n aspectRatio={16 / 9}\n arrowTable={result.data?.arrowTable}\n spec={vegaLiteSpec}\n />\n )}\n </div>\n )}\n </>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/vega",
|
|
3
|
-
"version": "0.26.0
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@openassistant/utils": "1.0.0-alpha.0",
|
|
22
|
-
"@sqlrooms/ai": "0.26.0
|
|
23
|
-
"@sqlrooms/duckdb": "0.26.0
|
|
24
|
-
"@sqlrooms/ui": "0.26.0
|
|
25
|
-
"@sqlrooms/utils": "0.26.0
|
|
22
|
+
"@sqlrooms/ai": "0.26.0",
|
|
23
|
+
"@sqlrooms/duckdb": "0.26.0",
|
|
24
|
+
"@sqlrooms/ui": "0.26.0",
|
|
25
|
+
"@sqlrooms/utils": "0.26.0",
|
|
26
26
|
"lucide-react": "^0.475.0",
|
|
27
27
|
"react-vega": "^7.7.1",
|
|
28
28
|
"vega": "^6.2.0",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"typecheck": "tsc --noEmit",
|
|
42
42
|
"typedoc": "typedoc"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "3376e76ddfa3c54097b79a20b88a1c37814dca61"
|
|
45
45
|
}
|