@sqlrooms/ai 0.6.0 → 0.7.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/README.md +114 -0
- package/dist/AnalysisResult.d.ts.map +1 -1
- package/dist/AnalysisResult.js +9 -2
- package/dist/AnalysisResult.js.map +1 -1
- package/dist/ToolResult.d.ts.map +1 -1
- package/dist/ToolResult.js +14 -1
- package/dist/ToolResult.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +9 -8
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
An AI integration package for SQLRooms that provides components and utilities for adding AI-powered features to your data applications. This package enables natural language querying, data analysis, and AI-assisted insights.
|
|
2
|
+
|
|
3
|
+
## Features
|
|
4
|
+
|
|
5
|
+
- 🤖 **AI Query Interface**: Natural language to SQL conversion
|
|
6
|
+
- 📊 **Automated Analysis**: AI-powered data analysis and insights
|
|
7
|
+
- 🔄 **State Management**: Zustand-based state management for AI features
|
|
8
|
+
- 🧩 **UI Components**: Ready-to-use components for AI interactions
|
|
9
|
+
- 📝 **Query History**: Track and manage AI query history
|
|
10
|
+
- 🎯 **Tool Integration**: Framework for AI tools and actions
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @sqlrooms/ai
|
|
16
|
+
# or
|
|
17
|
+
yarn add @sqlrooms/ai
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Basic Usage
|
|
21
|
+
|
|
22
|
+
### Setting Up AI Integration
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import {createAiSlice, createDefaultAiConfig, useAiStore} from '@sqlrooms/ai';
|
|
26
|
+
import {createProjectStore} from '@sqlrooms/project-builder';
|
|
27
|
+
|
|
28
|
+
// Create a project store with AI capabilities
|
|
29
|
+
const useStore = createProjectStore({
|
|
30
|
+
ai: createAiSlice(createDefaultAiConfig()),
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
function MyApp() {
|
|
34
|
+
return (
|
|
35
|
+
<ProjectStateProvider projectStore={useStore}>
|
|
36
|
+
<MyDataApp />
|
|
37
|
+
</ProjectStateProvider>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Using AI Query Controls
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import {QueryControls} from '@sqlrooms/ai';
|
|
46
|
+
|
|
47
|
+
function AiQueryPanel() {
|
|
48
|
+
return (
|
|
49
|
+
<div className="p-4 border rounded-lg">
|
|
50
|
+
<h2 className="text-xl font-bold mb-4">Ask AI</h2>
|
|
51
|
+
<QueryControls
|
|
52
|
+
placeholder="Ask a question about your data..."
|
|
53
|
+
onSubmit={(query) => console.log('Processing query:', query)}
|
|
54
|
+
/>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Displaying Analysis Results
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import {AnalysisResultsContainer, AnalysisResult} from '@sqlrooms/ai';
|
|
64
|
+
import {useAiStore} from '@sqlrooms/ai';
|
|
65
|
+
|
|
66
|
+
function AnalysisPanel() {
|
|
67
|
+
const {analysisResults} = useAiStore();
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<div className="p-4 border rounded-lg">
|
|
71
|
+
<h2 className="text-xl font-bold mb-4">AI Analysis</h2>
|
|
72
|
+
<AnalysisResultsContainer>
|
|
73
|
+
{analysisResults.map((result, index) => (
|
|
74
|
+
<AnalysisResult key={index} result={result} />
|
|
75
|
+
))}
|
|
76
|
+
</AnalysisResultsContainer>
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Working with AI State
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import {useAiStore} from '@sqlrooms/ai';
|
|
86
|
+
|
|
87
|
+
function AiStatusIndicator() {
|
|
88
|
+
const {isProcessing, lastQuery, error} = useAiStore();
|
|
89
|
+
|
|
90
|
+
if (isProcessing) {
|
|
91
|
+
return <div>AI is thinking...</div>;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (error) {
|
|
95
|
+
return <div>Error: {error.message}</div>;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
if (lastQuery) {
|
|
99
|
+
return <div>Last query: "{lastQuery}"</div>;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return <div>Ask AI a question about your data</div>;
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Advanced Features
|
|
107
|
+
|
|
108
|
+
- **Custom AI Tools**: Define custom tools for AI to use
|
|
109
|
+
- **Query Templates**: Create and manage reusable query templates
|
|
110
|
+
- **Result Visualization**: Automatically visualize AI analysis results
|
|
111
|
+
- **Conversation Context**: Maintain context across multiple queries
|
|
112
|
+
- **Feedback Loop**: Collect user feedback to improve AI responses
|
|
113
|
+
|
|
114
|
+
For more information, visit the SQLRooms documentation.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalysisResult.d.ts","sourceRoot":"","sources":["../src/AnalysisResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"AnalysisResult.d.ts","sourceRoot":"","sources":["../src/AnalysisResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,WAAW,CAAC;AAM/C;;;GAGG;AACH,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,oBAAoB,CAAC;CAC9B,CAAC;AA8BF;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiExD,CAAC"}
|
package/dist/AnalysisResult.js
CHANGED
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { SquareTerminalIcon, CodeIcon } from 'lucide-react';
|
|
3
3
|
import { Button, Popover, PopoverContent, PopoverTrigger } from '@sqlrooms/ui';
|
|
4
4
|
import { ToolResult } from './ToolResult';
|
|
5
|
+
import { JsonMonacoEditor } from '@sqlrooms/monaco-editor';
|
|
5
6
|
/**
|
|
6
7
|
* Stringify the result of the analysis, excluding toolCallMessages.
|
|
7
8
|
* Used to display raw result data in a code view.
|
|
@@ -13,7 +14,7 @@ const stringifyResult = (result) => {
|
|
|
13
14
|
// remove toolCallMessages from the result
|
|
14
15
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
15
16
|
const { toolCallMessages, ...rest } = result;
|
|
16
|
-
return JSON.stringify(rest);
|
|
17
|
+
return JSON.stringify(rest, null, 2);
|
|
17
18
|
};
|
|
18
19
|
/**
|
|
19
20
|
* Find a custom message element for a given tool call ID
|
|
@@ -39,7 +40,13 @@ export const AnalysisResult = ({ result }) => {
|
|
|
39
40
|
// the toolResults are reasoning steps that the LLM took to achieve the final result
|
|
40
41
|
// by calling function tools to answer the prompt
|
|
41
42
|
const analysisToolResults = result.toolResults;
|
|
42
|
-
return (_jsxs("div", { className: "flex flex-col w-full text-sm gap-5 border py-6 px-4 rounded-md", children: [_jsxs("div", { className: "p-2 mb-2 rounded-md text-gray-700 dark:text-gray-100 flex items-center gap-2", children: [_jsx(SquareTerminalIcon, { className: "w-4 h-4" }), _jsx("div", { className: "text-sm flex-1", children: result.prompt }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "w-6 h-6", children: _jsx(CodeIcon, { className: "w-4 h-4" }) }) }), _jsx(PopoverContent, { className: "w-[400px] max-h-[400px] overflow-auto", align: "end", side: "right", children: _jsx(
|
|
43
|
+
return (_jsxs("div", { className: "flex flex-col w-full text-sm gap-5 border py-6 px-4 rounded-md", children: [_jsxs("div", { className: "p-2 mb-2 rounded-md text-gray-700 dark:text-gray-100 flex items-center gap-2", children: [_jsx(SquareTerminalIcon, { className: "w-4 h-4" }), _jsx("div", { className: "text-sm flex-1", children: result.prompt }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "w-6 h-6", children: _jsx(CodeIcon, { className: "w-4 h-4" }) }) }), _jsx(PopoverContent, { className: "w-[400px] max-h-[400px] overflow-auto", align: "end", side: "right", children: _jsx(JsonMonacoEditor, { value: stringifyResult(result), readOnly: true, className: "h-[300px]", options: {
|
|
44
|
+
minimap: { enabled: false },
|
|
45
|
+
scrollBeyondLastLine: false,
|
|
46
|
+
automaticLayout: true,
|
|
47
|
+
folding: true,
|
|
48
|
+
lineNumbers: false,
|
|
49
|
+
} }) })] })] }), analysisToolResults.length > 0 && (_jsx("div", { className: "flex flex-col gap-5 px-4", children: analysisToolResults.map((toolResult) => (_jsx(ToolResult, { toolResult: toolResult, customMessage: findCustomMessage(result.toolCallMessages, toolResult.toolCallId) }, toolResult.toolCallId))) })), result.analysis.length > 0 && (_jsx("div", { className: "flex flex-col gap-5 px-4", children: _jsx(ToolResult, { toolResult: {
|
|
43
50
|
toolName: 'answer',
|
|
44
51
|
toolCallId: result.id,
|
|
45
52
|
args: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalysisResult.js","sourceRoot":"","sources":["../src/AnalysisResult.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,kBAAkB,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AnalysisResult.js","sourceRoot":"","sources":["../src/AnalysisResult.tsx"],"names":[],"mappings":"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","sourcesContent":["import {AnalysisResultSchema} from './schemas';\nimport {SquareTerminalIcon, CodeIcon} from 'lucide-react';\nimport {Button, Popover, PopoverContent, PopoverTrigger} from '@sqlrooms/ui';\nimport {ToolResult} from './ToolResult';\nimport {JsonMonacoEditor} from '@sqlrooms/monaco-editor';\n\n/**\n * Props for the AnalysisResult component\n * @property {AnalysisResultSchema} result - The result of the analysis containing prompt, tool calls, and analysis data\n */\ntype AnalysisResultProps = {\n result: AnalysisResultSchema;\n};\n\n/**\n * Stringify the result of the analysis, excluding toolCallMessages.\n * Used to display raw result data in a code view.\n *\n * @param result - The complete analysis result\n * @returns A JSON string representation of the result without toolCallMessages\n */\nconst stringifyResult = (result: AnalysisResultSchema) => {\n // remove toolCallMessages from the result\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {toolCallMessages, ...rest} = result;\n return JSON.stringify(rest, null, 2);\n};\n\n/**\n * Find a custom message element for a given tool call ID\n * @param toolCallMessages - Array of tool call messages\n * @param toolCallId - The ID of the tool call to find a message for\n * @returns The custom message element if found, undefined otherwise\n */\nconst findCustomMessage = (\n toolCallMessages: AnalysisResultSchema['toolCallMessages'],\n toolCallId: string,\n) => {\n return toolCallMessages.find((message) => message.toolCallId === toolCallId)\n ?.element;\n};\n\n/**\n * Component that displays the results of an AI analysis.\n * Shows the original prompt, intermediate tool calls, final analysis text,\n * and any tool results.\n *\n * @component\n * @param props - Component props\n * @param props.result - The analysis result data to display\n * @returns A React component displaying the analysis results\n */\nexport const AnalysisResult: React.FC<AnalysisResultProps> = ({result}) => {\n // the toolResults are reasoning steps that the LLM took to achieve the final result\n // by calling function tools to answer the prompt\n const analysisToolResults = result.toolResults;\n\n return (\n <div className=\"flex flex-col w-full text-sm gap-5 border py-6 px-4 rounded-md\">\n <div className=\"p-2 mb-2 rounded-md text-gray-700 dark:text-gray-100 flex items-center gap-2\">\n <SquareTerminalIcon className=\"w-4 h-4\" />\n <div className=\"text-sm flex-1\">{result.prompt}</div>\n <Popover>\n <PopoverTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\" className=\"w-6 h-6\">\n <CodeIcon className=\"w-4 h-4\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className=\"w-[400px] max-h-[400px] overflow-auto\"\n align=\"end\"\n side=\"right\"\n >\n <JsonMonacoEditor\n value={stringifyResult(result)}\n readOnly={true}\n className=\"h-[300px]\"\n options={{\n minimap: {enabled: false},\n scrollBeyondLastLine: false,\n automaticLayout: true,\n folding: true,\n lineNumbers: false,\n }}\n />\n </PopoverContent>\n </Popover>\n </div>\n {analysisToolResults.length > 0 && (\n <div className=\"flex flex-col gap-5 px-4\">\n {analysisToolResults.map((toolResult) => (\n <ToolResult\n key={toolResult.toolCallId}\n toolResult={toolResult}\n customMessage={findCustomMessage(\n result.toolCallMessages,\n toolResult.toolCallId,\n )}\n />\n ))}\n </div>\n )}\n {result.analysis.length > 0 && (\n <div className=\"flex flex-col gap-5 px-4\">\n <ToolResult\n key={result.id + '-streaming-result'}\n toolResult={{\n toolName: 'answer',\n toolCallId: result.id,\n args: {},\n result: {success: true, data: {analysis: result.analysis}},\n }}\n />\n </div>\n )}\n </div>\n );\n};\n"]}
|
package/dist/ToolResult.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolResult.d.ts","sourceRoot":"","sources":["../src/ToolResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAU3C,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolResult.d.ts","sourceRoot":"","sources":["../src/ToolResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAU3C,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,eAAe;IACvB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAkBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyFhD,CAAC"}
|
package/dist/ToolResult.js
CHANGED
|
@@ -3,6 +3,7 @@ import { Badge, Button, Popover, PopoverContent, PopoverTrigger, cn, } from '@sq
|
|
|
3
3
|
import { CheckCircle2Icon, CodeIcon, XCircleIcon } from 'lucide-react';
|
|
4
4
|
import { AnalysisAnswer, ChartToolCall, isAnalysisAnswer, isChartToolParameters, } from './ToolCall';
|
|
5
5
|
import { isQueryToolParameters, QueryToolCall } from './ToolCall';
|
|
6
|
+
import { JsonMonacoEditor } from '@sqlrooms/monaco-editor';
|
|
6
7
|
function getBorderColor(isSuccess, toolName) {
|
|
7
8
|
if (!isSuccess) {
|
|
8
9
|
return 'border-red-500';
|
|
@@ -21,6 +22,18 @@ function getBorderColor(isSuccess, toolName) {
|
|
|
21
22
|
export const ToolResult = ({ toolResult, customMessage, }) => {
|
|
22
23
|
const { toolName, args, result } = toolResult;
|
|
23
24
|
const isSuccess = result.success;
|
|
24
|
-
return (_jsxs("div", { className: cn('border-2 relative bg-gray-100 dark:bg-gray-900 px-5 py-6 rounded-md text-gray-700 dark:text-gray-300 text-xs', getBorderColor(isSuccess, toolName)), children: [_jsxs(Badge, { variant: "secondary", className: cn('text-xs absolute top-[-12px] left-2 dark:text-gray-100 text-gray-700 flex items-center gap-1 border', getBorderColor(isSuccess, toolName)), children: [isSuccess ? (_jsx(CheckCircle2Icon, { className: "w-3 h-3 text-green-500" })) : (_jsx(XCircleIcon, { className: "w-3 h-3 text-red-500" })), toolName] }), _jsx("div", { className: "absolute top-2 right-2", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", className: "w-6 h-6", children: _jsx(CodeIcon, { className: "w-4 h-4" }) }) }), _jsx(PopoverContent, { className: "w-[400px] max-h-[300px] overflow-auto p-4", side: "right", align: "start", children: _jsx(
|
|
25
|
+
return (_jsxs("div", { className: cn('border-2 relative bg-gray-100 dark:bg-gray-900 px-5 py-6 rounded-md text-gray-700 dark:text-gray-300 text-xs', getBorderColor(isSuccess, toolName)), children: [_jsxs(Badge, { variant: "secondary", className: cn('text-xs absolute top-[-12px] left-2 dark:text-gray-100 text-gray-700 flex items-center gap-1 border', getBorderColor(isSuccess, toolName)), children: [isSuccess ? (_jsx(CheckCircle2Icon, { className: "w-3 h-3 text-green-500" })) : (_jsx(XCircleIcon, { className: "w-3 h-3 text-red-500" })), toolName] }), _jsx("div", { className: "absolute top-2 right-2", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", className: "w-6 h-6", children: _jsx(CodeIcon, { className: "w-4 h-4" }) }) }), _jsx(PopoverContent, { className: "w-[400px] max-h-[300px] overflow-auto p-4", side: "right", align: "start", children: _jsx(JsonMonacoEditor, { value: JSON.stringify(toolResult, null, 2), readOnly: true, className: "h-[250px]", options: {
|
|
26
|
+
minimap: { enabled: false },
|
|
27
|
+
scrollBeyondLastLine: false,
|
|
28
|
+
automaticLayout: true,
|
|
29
|
+
folding: true,
|
|
30
|
+
lineNumbers: false,
|
|
31
|
+
} }) })] }) }), _jsxs("div", { className: "flex flex-col gap-5", children: [toolName === 'query' && isQueryToolParameters(args) ? (_jsx(QueryToolCall, { ...args, customMessage: customMessage })) : toolName === 'chart' && isChartToolParameters(args) ? (_jsx(ChartToolCall, { ...args })) : toolName === 'answer' && isAnalysisAnswer(result) ? (_jsx(AnalysisAnswer, { ...result })) : (Object.keys(args).length > 0 && (_jsx(JsonMonacoEditor, { value: JSON.stringify(args, null, 2), readOnly: true, className: "h-[150px]", options: {
|
|
32
|
+
minimap: { enabled: false },
|
|
33
|
+
scrollBeyondLastLine: false,
|
|
34
|
+
automaticLayout: true,
|
|
35
|
+
folding: true,
|
|
36
|
+
lineNumbers: false,
|
|
37
|
+
} }))), !result.success && (_jsxs("div", { className: "text-red-500 gap-2 flex flex-col", children: [_jsx("p", { className: "text-sm font-bold", children: "Oops! Something went wrong..." }), _jsx("p", { className: "text-xs", children: result.error })] }))] })] }));
|
|
25
38
|
};
|
|
26
39
|
//# sourceMappingURL=ToolResult.js.map
|
package/dist/ToolResult.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolResult.js","sourceRoot":"","sources":["../src/ToolResult.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,EAAE,GACH,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,gBAAgB,EAAE,QAAQ,EAAE,WAAW,EAAC,MAAM,cAAc,CAAC;AAErE,OAAO,EACL,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,qBAAqB,EAAE,aAAa,EAAC,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolResult.js","sourceRoot":"","sources":["../src/ToolResult.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ToolResultSchema} from './schemas';\nimport {\n Badge,\n Button,\n Popover,\n PopoverContent,\n PopoverTrigger,\n cn,\n} from '@sqlrooms/ui';\nimport {CheckCircle2Icon, CodeIcon, XCircleIcon} from 'lucide-react';\nimport {ReactNode} from 'react';\nimport {\n AnalysisAnswer,\n ChartToolCall,\n isAnalysisAnswer,\n isChartToolParameters,\n} from './ToolCall';\nimport {isQueryToolParameters, QueryToolCall} from './ToolCall';\nimport React from 'react';\nimport {JsonMonacoEditor} from '@sqlrooms/monaco-editor';\n\ninterface ToolResultProps {\n toolResult: ToolResultSchema;\n customMessage?: ReactNode;\n}\n\nfunction getBorderColor(isSuccess: boolean, toolName: string) {\n if (!isSuccess) {\n return 'border-red-500';\n }\n switch (toolName) {\n case 'query':\n return 'border-green-500';\n case 'chart':\n return 'border-blue-500';\n case 'answer':\n return 'border-gray-500';\n default:\n return 'border-gray-500';\n }\n}\n\nexport const ToolResult: React.FC<ToolResultProps> = ({\n toolResult,\n customMessage,\n}) => {\n const {toolName, args, result} = toolResult;\n const isSuccess = result.success;\n\n return (\n <div\n className={cn(\n 'border-2 relative bg-gray-100 dark:bg-gray-900 px-5 py-6 rounded-md text-gray-700 dark:text-gray-300 text-xs',\n getBorderColor(isSuccess, toolName),\n )}\n >\n <Badge\n variant=\"secondary\"\n className={cn(\n 'text-xs absolute top-[-12px] left-2 dark:text-gray-100 text-gray-700 flex items-center gap-1 border',\n getBorderColor(isSuccess, toolName),\n )}\n >\n {isSuccess ? (\n <CheckCircle2Icon className=\"w-3 h-3 text-green-500\" />\n ) : (\n <XCircleIcon className=\"w-3 h-3 text-red-500\" />\n )}\n {toolName}\n </Badge>\n\n <div className=\"absolute top-2 right-2\">\n <Popover>\n <PopoverTrigger asChild>\n <Button variant=\"outline\" size=\"icon\" className=\"w-6 h-6\">\n <CodeIcon className=\"w-4 h-4\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className=\"w-[400px] max-h-[300px] overflow-auto p-4\"\n side=\"right\"\n align=\"start\"\n >\n <JsonMonacoEditor\n value={JSON.stringify(toolResult, null, 2)}\n readOnly={true}\n className=\"h-[250px]\"\n options={{\n minimap: {enabled: false},\n scrollBeyondLastLine: false,\n automaticLayout: true,\n folding: true,\n lineNumbers: false,\n }}\n />\n </PopoverContent>\n </Popover>\n </div>\n\n <div className=\"flex flex-col gap-5\">\n {toolName === 'query' && isQueryToolParameters(args) ? (\n <QueryToolCall {...args} customMessage={customMessage} />\n ) : toolName === 'chart' && isChartToolParameters(args) ? (\n <ChartToolCall {...args} />\n ) : toolName === 'answer' && isAnalysisAnswer(result) ? (\n <AnalysisAnswer {...result} />\n ) : (\n Object.keys(args).length > 0 && (\n <JsonMonacoEditor\n value={JSON.stringify(args, null, 2)}\n readOnly={true}\n className=\"h-[150px]\"\n options={{\n minimap: {enabled: false},\n scrollBeyondLastLine: false,\n automaticLayout: true,\n folding: true,\n lineNumbers: false,\n }}\n />\n )\n )}\n {!result.success && (\n <div className=\"text-red-500 gap-2 flex flex-col\">\n <p className=\"text-sm font-bold\">Oops! Something went wrong...</p>\n <p className=\"text-xs\">{result.error}</p>\n </div>\n )}\n </div>\n </div>\n );\n};\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* {@include ../README.md}
|
|
3
|
+
* @packageDocumentation
|
|
4
|
+
*/
|
|
1
5
|
export { AiSliceConfig, createAiSlice, useStoreWithAi as useAiStore, createDefaultAiConfig, } from './AiSlice';
|
|
2
6
|
export type { AiSliceState } from './AiSlice';
|
|
3
7
|
export { QueryControls } from './QueryControls';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,IAAI,UAAU,EAC5B,qBAAqB,GACtB,MAAM,WAAW,CAAC;AAEnB,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,8BAA8B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,IAAI,UAAU,EAC5B,qBAAqB,GACtB,MAAM,WAAW,CAAC;AAEnB,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,8BAA8B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* {@include ../README.md}
|
|
3
|
+
* @packageDocumentation
|
|
4
|
+
*/
|
|
1
5
|
export { AiSliceConfig, createAiSlice, useStoreWithAi as useAiStore, createDefaultAiConfig, } from './AiSlice';
|
|
2
6
|
export { QueryControls } from './QueryControls';
|
|
3
7
|
export { AnalysisResultsContainer } from './AnalysisResultsContainer';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,IAAI,UAAU,EAC5B,qBAAqB,GACtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,8BAA8B,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,IAAI,UAAU,EAC5B,qBAAqB,GACtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,8BAA8B,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {\n AiSliceConfig,\n createAiSlice,\n useStoreWithAi as useAiStore,\n createDefaultAiConfig,\n} from './AiSlice';\n\nexport type {AiSliceState} from './AiSlice';\nexport {QueryControls} from './QueryControls';\nexport {AnalysisResultsContainer} from './AnalysisResultsContainer';\nexport {AnalysisResult} from './AnalysisResult';\nexport {\n useScrollToBottom,\n useScrollToBottomButton,\n} from './hooks/use-scroll-to-bottom';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/ai",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -22,12 +22,13 @@
|
|
|
22
22
|
"@ai-sdk/provider": "^1.0.7",
|
|
23
23
|
"@openassistant/core": "^0.1.9",
|
|
24
24
|
"@paralleldrive/cuid2": "^2.2.2",
|
|
25
|
-
"@sqlrooms/data-table": "0.
|
|
26
|
-
"@sqlrooms/duckdb": "0.
|
|
27
|
-
"@sqlrooms/
|
|
28
|
-
"@sqlrooms/project-
|
|
29
|
-
"@sqlrooms/
|
|
30
|
-
"@sqlrooms/
|
|
25
|
+
"@sqlrooms/data-table": "0.7.0",
|
|
26
|
+
"@sqlrooms/duckdb": "0.7.0",
|
|
27
|
+
"@sqlrooms/monaco-editor": "0.7.0",
|
|
28
|
+
"@sqlrooms/project-builder": "0.7.0",
|
|
29
|
+
"@sqlrooms/project-config": "0.7.0",
|
|
30
|
+
"@sqlrooms/ui": "0.7.0",
|
|
31
|
+
"@sqlrooms/vega": "0.7.0",
|
|
31
32
|
"ai": "^4.1.28",
|
|
32
33
|
"immer": "^10.1.1",
|
|
33
34
|
"lucide-react": "^0.475.0",
|
|
@@ -45,5 +46,5 @@
|
|
|
45
46
|
"lint": "eslint .",
|
|
46
47
|
"typedoc": "typedoc"
|
|
47
48
|
},
|
|
48
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "8be65f051c588d3a963f721322429657913b6c63"
|
|
49
50
|
}
|