@sqlrooms/ai 0.5.1 → 0.7.0

package/dist/AiSlice.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiSlice.js","sourceRoot":"","sources":["../src/AiSlice.ts"],"names":[],"mappings":"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","sourcesContent":["import {createId} from '@paralleldrive/cuid2';\nimport {\n  createSlice,\n  ProjectState,\n  useBaseProjectStore,\n  type StateCreator,\n} from '@sqlrooms/project-builder';\nimport {BaseProjectConfig} from '@sqlrooms/project-config';\nimport {\n  CoreAssistantMessage,\n  CoreToolMessage,\n  CoreUserMessage,\n  LanguageModelV1,\n} from 'ai';\nimport {produce} from 'immer';\nimport {z} from 'zod';\nimport {runAnalysis} from './analysis';\nimport {\n  AnalysisResultSchema,\n  ToolCallSchema,\n  ToolResultSchema,\n} from './schemas';\n\ntype AiMessage = (CoreToolMessage | CoreAssistantMessage | CoreUserMessage) & {\n  id: string;\n};\n\nexport const AiSliceConfig = z.object({\n  ai: z.object({\n    model: z.string(),\n    analysisResults: z.array(AnalysisResultSchema),\n  }),\n});\nexport type AiSliceConfig = z.infer<typeof AiSliceConfig>;\n\nexport function createDefaultAiConfig(): AiSliceConfig {\n  return {\n    ai: {\n      model: 'gpt-4o-mini',\n      analysisResults: [],\n    },\n  };\n}\n\nexport type AiSliceState = {\n  ai: {\n    analysisPrompt: string;\n    isRunningAnalysis: boolean;\n    analysisAbortController?: AbortController;\n    setAnalysisPrompt: (prompt: string) => void;\n    startAnalysis: () => Promise<void>;\n    cancelAnalysis: () => void;\n    messagesById: Map<string, AiMessage>;\n    addMessages: (messages: AiMessage[]) => void;\n    getMessages: () => AiMessage[];\n  };\n};\n\nexport function createAiSlice<PC extends BaseProjectConfig & AiSliceConfig>({\n  createModel,\n  initialAnalysisPrompt = 'Describe the data in the tables and make a chart providing an overview of the most important features.',\n}: {\n  createModel: (model: string) => LanguageModelV1;\n  initialAnalysisPrompt?: string;\n}): StateCreator<AiSliceState> {\n  return createSlice<PC, AiSliceState>((set, get) => ({\n    ai: {\n      analysisPrompt: initialAnalysisPrompt,\n      isRunningAnalysis: false,\n      messagesById: new Map(),\n      apiKey: null,\n\n      setAnalysisPrompt: (prompt: string) => {\n        set((state) =>\n          produce(state, (draft) => {\n            draft.ai.analysisPrompt = prompt;\n          }),\n        );\n      },\n\n      setAiModel: (model: string) => {\n        set((state) =>\n          produce(state, (draft) => {\n            draft.project.config.ai.model = model;\n          }),\n        );\n      },\n\n      /**\n       * Add messages to the project store uniquely by id\n       * @param messages - The messages to add.\n       */\n      addMessages: (messages: AiMessage[]) => {\n        set((state) => {\n          const newMessages = messages.filter(\n            (m) => !state.ai.messagesById.has(m.id),\n          );\n          const newMessagesById = new Map(state.ai.messagesById);\n          for (const m of newMessages) {\n            if (!m.id) {\n              console.warn('Message has no id', m);\n            }\n            newMessagesById.set(m.id, m);\n          }\n          console.log('newMessagesById', Array.from(newMessagesById.values()));\n          return {\n            ai: {\n              ...state.ai,\n              messagesById: newMessagesById,\n            },\n          };\n        });\n      },\n\n      getMessages: () => {\n        return Array.from(get().ai.messagesById.values());\n      },\n      startAnalysis: async () => {\n        const resultId = createId();\n        const abortController = new AbortController();\n        set((state) =>\n          produce(state, (draft) => {\n            draft.ai.analysisAbortController = abortController;\n            draft.ai.isRunningAnalysis = true;\n            draft.project.config.ai.analysisResults.push({\n              id: resultId,\n              prompt: get().ai.analysisPrompt,\n              toolResults: [],\n              toolCalls: [],\n            });\n          }),\n        );\n        get().ai.addMessages([\n          {\n            id: createId(),\n            role: 'user',\n            content: get().ai.analysisPrompt,\n          },\n        ]);\n        set((state) =>\n          produce(state, (draft) => {\n            draft.ai.analysisPrompt = '';\n          }),\n        );\n        try {\n          const {toolResults, toolCalls, ...rest} = await runAnalysis({\n            model: createModel(get().project.config.ai.model),\n            // prompt: get().analysisPrompt,\n            messages: get().ai.getMessages(),\n            onStepFinish: (event) => {\n              console.log('onStepFinish', event);\n              get().ai.addMessages(event.response.messages);\n              set(\n                makeResultsAppender({\n                  resultId,\n                  toolResults: event.toolResults,\n                  toolCalls: event.toolCalls,\n                }),\n              );\n            },\n            abortSignal: abortController.signal,\n          });\n          console.log('final result', {toolResults, toolCalls, ...rest});\n          // get().ai.addMessages([\n          //   {\n          //     id: createId(),\n          //     role: 'tool',\n          //     content: [],\n          //     // @ts-ignore\n          //     tool_call_id: toolCalls[toolCalls.length - 1].toolCallId,\n          //   } satisfies AiMessage,\n          // ]);\n          // set(\n          //   makeResultsAppender({\n          //     resultId,\n          //     toolResults,\n          //     toolCalls: rest.toolCalls,\n          //   }),\n          // );\n        } catch (err) {\n          set(\n            makeResultsAppender({\n              resultId,\n              toolResults: [\n                {\n                  toolName: 'answer',\n                  toolCallId: createId(),\n                  args: {},\n                  result: {\n                    success: false,\n                    error: err instanceof Error ? err.message : String(err),\n                  },\n                },\n              ],\n              toolCalls: [],\n            }),\n          );\n        } finally {\n          set((state) =>\n            produce(state, (draft) => {\n              draft.ai.isRunningAnalysis = false;\n            }),\n          );\n        }\n      },\n      cancelAnalysis: () => {\n        set((state) =>\n          produce(state, (draft) => {\n            draft.ai.isRunningAnalysis = false;\n          }),\n        );\n        get().ai.analysisAbortController?.abort('Analysis cancelled');\n      },\n    },\n  }));\n}\n\nfunction findResultById(analysisResults: AnalysisResultSchema[], id: string) {\n  return analysisResults.find((r: AnalysisResultSchema) => r.id === id);\n}\n\n/**\n * Returns a function that will update the state by appending new results\n * to the analysis results.\n * @param resultId - The result id\n * @param toolResults - The new tool results\n * @param toolCalls - The new tool calls\n * @returns The new state\n */\nfunction makeResultsAppender<PC extends BaseProjectConfig & AiSliceConfig>({\n  resultId,\n  toolResults,\n  toolCalls,\n}: {\n  resultId: string;\n  toolResults: ToolResultSchema[];\n  toolCalls: ToolCallSchema[];\n}) {\n  return (state: ProjectState<PC>) =>\n    produce(state, (draft) => {\n      const result = findResultById(\n        draft.project.config.ai.analysisResults,\n        resultId,\n      );\n      if (result) {\n        result.toolResults = [...result.toolResults, ...toolResults];\n        result.toolCalls = [...result.toolCalls, ...toolCalls];\n      } else {\n        console.error('Result not found', resultId);\n      }\n    });\n}\n\ntype ProjectConfigWithAi = BaseProjectConfig & AiSliceConfig;\ntype ProjectStateWithAi = ProjectState<ProjectConfigWithAi> & AiSliceState;\n\nexport function useStoreWithAi<T>(\n  selector: (state: ProjectStateWithAi) => T,\n): T {\n  return useBaseProjectStore<\n    BaseProjectConfig & AiSliceConfig,\n    ProjectState<ProjectConfigWithAi>,\n    T\n  >((state) => selector(state as unknown as ProjectStateWithAi));\n}\n"]}
+{"version":3,"file":"AiSlice.js","sourceRoot":"","sources":["../src/AiSlice.ts"],"names":[],"mappings":"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","sourcesContent":["import {createId} from '@paralleldrive/cuid2';\nimport {\n  createSlice,\n  ProjectState,\n  useBaseProjectStore,\n  type StateCreator,\n} from '@sqlrooms/project-builder';\nimport {BaseProjectConfig} from '@sqlrooms/project-config';\nimport {\n  CoreAssistantMessage,\n  CoreToolMessage,\n  CoreUserMessage,\n  StepResult,\n  ToolSet,\n} from 'ai';\nimport {produce} from 'immer';\nimport {z} from 'zod';\nimport {runAnalysis} from './analysis';\nimport {\n  AnalysisResultSchema,\n  ToolCallSchema,\n  ToolResultSchema,\n} from './schemas';\nimport {ToolCallMessage} from '@openassistant/core';\ntype AiMessage = (CoreToolMessage | CoreAssistantMessage | CoreUserMessage) & {\n  id: string;\n};\n\nexport const AiSliceConfig = z.object({\n  ai: z.object({\n    modelProvider: z.string(),\n    model: z.string(),\n    analysisResults: z.array(AnalysisResultSchema),\n  }),\n});\nexport type AiSliceConfig = z.infer<typeof AiSliceConfig>;\n\nexport function createDefaultAiConfig(): AiSliceConfig {\n  return {\n    ai: {\n      modelProvider: 'openai',\n      model: 'gpt-4o-mini',\n      analysisResults: [],\n    },\n  };\n}\n\nexport type AiSliceState = {\n  ai: {\n    analysisPrompt: string;\n    isRunningAnalysis: boolean;\n    analysisAbortController?: AbortController;\n    setAnalysisPrompt: (prompt: string) => void;\n    startAnalysis: () => Promise<void>;\n    cancelAnalysis: () => void;\n    messagesById: Map<string, AiMessage>;\n    addMessages: (messages: AiMessage[]) => void;\n    getMessages: () => AiMessage[];\n    setAiModel: (model: string) => void;\n  };\n};\n\n/**\n * Execute the analysis. It will be used by the action `startAnalysis`.\n *\n * Each analysis contains an array of toolCalls and the results of the tool calls (toolResults).\n * After all the tool calls have been executed, the LLM will stream the results as text stored in `analysis`.\n *\n * @param resultId - The result id\n * @param prompt - The prompt\n * @param model - The model\n * @param apiKey - The api key\n * @param abortController - The abort controller\n * @param addMessages - The add messages function\n * @param set - The set function\n */\nasync function executeAnalysis({\n  resultId,\n  prompt,\n  modelProvider,\n  model,\n  apiKey,\n  abortController,\n  addMessages,\n  set,\n}: {\n  resultId: string;\n  prompt: string;\n  modelProvider: string;\n  model: string;\n  apiKey: string;\n  abortController: AbortController;\n  addMessages: (messages: AiMessage[]) => void;\n  set: <T>(fn: (state: T) => T) => void;\n}) {\n  try {\n    await runAnalysis({\n      modelProvider,\n      model,\n      apiKey,\n      prompt,\n      abortController,\n      onStepFinish: (\n        event: StepResult<ToolSet>,\n        toolCallMessages: ToolCallMessage[],\n      ) => {\n        addMessages(event.response.messages);\n        set(\n          makeResultsAppender({\n            resultId,\n            toolResults: event.toolResults,\n            toolCalls: event.toolCalls,\n            toolCallMessages,\n          }),\n        );\n      },\n      onStreamResult: (message, isCompleted) => {\n        set(\n          makeResultsAppender({\n            resultId,\n            analysis: message,\n            isCompleted,\n          }),\n        );\n      },\n    });\n  } catch (err) {\n    set(\n      makeResultsAppender({\n        resultId,\n        isCompleted: true,\n        toolResults: [\n          {\n            toolName: 'error',\n            toolCallId: createId(),\n            args: {},\n            result: {\n              success: false,\n              error: err instanceof Error ? err.message : String(err),\n            },\n          },\n        ],\n        toolCalls: [],\n      }),\n    );\n  }\n}\n\nexport function createAiSlice<PC extends BaseProjectConfig & AiSliceConfig>({\n  getApiKey,\n  initialAnalysisPrompt = 'Describe the data in the tables and make a chart providing an overview of the most important features.',\n}: {\n  getApiKey: () => string;\n  initialAnalysisPrompt?: string;\n}): StateCreator<AiSliceState> {\n  return createSlice<PC, AiSliceState>((set, get) => ({\n    ai: {\n      analysisPrompt: initialAnalysisPrompt,\n      isRunningAnalysis: false,\n      messagesById: new Map(),\n\n      setAnalysisPrompt: (prompt: string) => {\n        set((state) =>\n          produce(state, (draft) => {\n            draft.ai.analysisPrompt = prompt;\n          }),\n        );\n      },\n\n      /**\n       * Set the AI model\n       * @param model - The model to set\n       */\n      setAiModel: (model: string) => {\n        set((state) =>\n          produce(state, (draft) => {\n            draft.project.config.ai.model = model;\n          }),\n        );\n      },\n\n      /**\n       * Add messages to the project store uniquely by id\n       * @param messages - The messages to add.\n       */\n      addMessages: (messages: AiMessage[]) => {\n        set((state) => {\n          const newMessages = messages.filter(\n            (m) => !state.ai.messagesById.has(m.id),\n          );\n          const newMessagesById = new Map(state.ai.messagesById);\n          for (const m of newMessages) {\n            if (!m.id) {\n              console.warn('Message has no id', m);\n            }\n            newMessagesById.set(m.id, m);\n          }\n          return {\n            ai: {\n              ...state.ai,\n              messagesById: newMessagesById,\n            },\n          };\n        });\n      },\n\n      getMessages: () => {\n        return Array.from(get().ai.messagesById.values());\n      },\n\n      startAnalysis: async () => {\n        const resultId = createId();\n        const abortController = new AbortController();\n        set((state) =>\n          produce(state, (draft) => {\n            draft.ai.analysisAbortController = abortController;\n            draft.ai.isRunningAnalysis = true;\n            draft.project.config.ai.analysisResults.push({\n              id: resultId,\n              prompt: get().ai.analysisPrompt,\n              toolResults: [],\n              toolCalls: [],\n              toolCallMessages: [],\n              analysis: '',\n              isCompleted: false,\n            });\n          }),\n        );\n\n        get().ai.addMessages([\n          {\n            id: createId(),\n            role: 'user',\n            content: get().ai.analysisPrompt,\n          },\n        ]);\n\n        try {\n          await executeAnalysis({\n            resultId,\n            prompt: get().ai.analysisPrompt,\n            modelProvider: get().project.config.ai.modelProvider,\n            model: get().project.config.ai.model,\n            apiKey: getApiKey(),\n            abortController,\n            addMessages: get().ai.addMessages,\n            set,\n          });\n        } finally {\n          set((state) =>\n            produce(state, (draft) => {\n              draft.ai.isRunningAnalysis = false;\n              draft.ai.analysisPrompt = '';\n            }),\n          );\n        }\n      },\n      cancelAnalysis: () => {\n        set((state) =>\n          produce(state, (draft) => {\n            draft.ai.isRunningAnalysis = false;\n          }),\n        );\n        get().ai.analysisAbortController?.abort('Analysis cancelled');\n      },\n    },\n  }));\n}\n\nfunction findResultById(analysisResults: AnalysisResultSchema[], id: string) {\n  return analysisResults.find((r: AnalysisResultSchema) => r.id === id);\n}\n\n/**\n * Returns a function that will update the state by appending new results to the analysis results.\n *\n * @param resultId - The result id\n * @param toolCalls - The tool calls that were executed by the LLM, e.g. \"query\" or \"chart\" (\"map\" will be added soon). See {@link ToolCallSchema} for more details.\n * @param toolResults - The results of the tool calls that were executed by the LLM. See {@link ToolResultSchema} for more details.\n * @param toolCallMessages - The tool call messages that were created by some of our defined TOOLS, e.g. the table with query result. It's an array of React/JSX elements. It is linked to the tool call by the toolCallId.\n * @param analysis - The analysis is the content generated after all the tool calls have been executed\n * @param isCompleted - Whether the analysis is completed\n * @returns The new state\n */\nfunction makeResultsAppender<PC extends BaseProjectConfig & AiSliceConfig>({\n  resultId,\n  toolResults,\n  toolCalls,\n  analysis,\n  isCompleted,\n  toolCallMessages,\n}: {\n  resultId: string;\n  toolResults?: ToolResultSchema[];\n  toolCalls?: ToolCallSchema[];\n  analysis?: string;\n  isCompleted?: boolean;\n  toolCallMessages?: ToolCallMessage[];\n}) {\n  return (state: ProjectState<PC>) =>\n    produce(state, (draft) => {\n      const result = findResultById(\n        draft.project.config.ai.analysisResults,\n        resultId,\n      );\n      if (result) {\n        if (toolResults) {\n          result.toolResults = [...result.toolResults, ...toolResults];\n        }\n        if (toolCalls) {\n          result.toolCalls = [...result.toolCalls, ...toolCalls];\n        }\n        if (toolCallMessages) {\n          result.toolCallMessages = [\n            ...result.toolCallMessages,\n            ...toolCallMessages,\n          ];\n        }\n        if (analysis) {\n          result.analysis = analysis;\n        }\n        if (isCompleted) {\n          result.isCompleted = isCompleted;\n        }\n      } else {\n        console.error('Result not found', resultId);\n      }\n    });\n}\n\ntype ProjectConfigWithAi = BaseProjectConfig & AiSliceConfig;\ntype ProjectStateWithAi = ProjectState<ProjectConfigWithAi> & AiSliceState;\n\nexport function useStoreWithAi<T>(\n  selector: (state: ProjectStateWithAi) => T,\n): T {\n  return useBaseProjectStore<\n    BaseProjectConfig & AiSliceConfig,\n    ProjectState<ProjectConfigWithAi>,\n    T\n  >((state) => selector(state as unknown as ProjectStateWithAi));\n}\n"]}

package/dist/AnalysisResult.d.ts

@@ -1,7 +1,21 @@
 import { AnalysisResultSchema } from './schemas';
-interface AnalysisResultProps {
+/**
+ * Props for the AnalysisResult component
+ * @property {AnalysisResultSchema} result - The result of the analysis containing prompt, tool calls, and analysis data
+ */
+type AnalysisResultProps = {
     result: AnalysisResultSchema;
-}
+};
+/**
+ * Component that displays the results of an AI analysis.
+ * Shows the original prompt, intermediate tool calls, final analysis text,
+ * and any tool results.
+ *
+ * @component
+ * @param props - Component props
+ * @param props.result - The analysis result data to display
+ * @returns A React component displaying the analysis results
+ */
 export declare const AnalysisResult: React.FC<AnalysisResultProps>;
 export {};
 //# sourceMappingURL=AnalysisResult.d.ts.map

package/dist/AnalysisResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnalysisResult.d.ts","sourceRoot":"","sources":["../src/AnalysisResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,WAAW,CAAC;AAM/C,UAAU,mBAAmB;IAC3B,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwCxD,CAAC"}
+{"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

@@ -1,13 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToolCall } from './ToolCall';
-import { ToolResult } from './ToolResult';
 import { SquareTerminalIcon, CodeIcon } from 'lucide-react';
 import { Button, Popover, PopoverContent, PopoverTrigger } from '@sqlrooms/ui';
+import { ToolResult } from './ToolResult';
+import { JsonMonacoEditor } from '@sqlrooms/monaco-editor';
+/**
+ * Stringify the result of the analysis, excluding toolCallMessages.
+ * Used to display raw result data in a code view.
+ *
+ * @param result - The complete analysis result
+ * @returns A JSON string representation of the result without toolCallMessages
+ */
+const stringifyResult = (result) => {
+    // remove toolCallMessages from the result
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { toolCallMessages, ...rest } = result;
+    return JSON.stringify(rest, null, 2);
+};
+/**
+ * Find a custom message element for a given tool call ID
+ * @param toolCallMessages - Array of tool call messages
+ * @param toolCallId - The ID of the tool call to find a message for
+ * @returns The custom message element if found, undefined otherwise
+ */
+const findCustomMessage = (toolCallMessages, toolCallId) => {
+    return toolCallMessages.find((message) => message.toolCallId === toolCallId)
+        ?.element;
+};
+/**
+ * Component that displays the results of an AI analysis.
+ * Shows the original prompt, intermediate tool calls, final analysis text,
+ * and any tool results.
+ *
+ * @component
+ * @param props - Component props
+ * @param props.result - The analysis result data to display
+ * @returns A React component displaying the analysis results
+ */
 export const AnalysisResult = ({ result }) => {
-    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("pre", { className: "text-xs", children: JSON.stringify(result, null, 2) }) })] })] }), _jsx("div", { className: "flex flex-col gap-5 px-4", children: result.toolResults
-                    .filter((toolResult) => toolResult.toolName !== 'answer' || !toolResult.result.success)
-                    .map((toolResult) => (_jsx(ToolResult, { toolResult: toolResult }, toolResult.toolCallId))) }), _jsx("div", { className: "flex flex-col gap-5 px-4", children: result.toolCalls
-                    .filter((toolCall) => toolCall.toolName === 'answer')
-                    .map((toolCall) => (_jsx(ToolCall, { toolCall: toolCall }, toolCall.toolCallId))) })] }));
+    // the toolResults are reasoning steps that the LLM took to achieve the final result
+    // by calling function tools to answer the prompt
+    const analysisToolResults = result.toolResults;
+    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: {
+                                        minimap: { enabled: false },
+                                        scrollBeyondLastLine: false,
+                                        automaticLayout: true,
+                                        folding: true,
+                                        lineNumbers: false,
+                                    } }) })] })] }), 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: {
+                        toolName: 'answer',
+                        toolCallId: result.id,
+                        args: {},
+                        result: { success: true, data: { analysis: result.analysis } },
+                    } }, result.id + '-streaming-result') }))] }));
 };
 //# sourceMappingURL=AnalysisResult.js.map

package/dist/AnalysisResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnalysisResult.js","sourceRoot":"","sources":["../src/AnalysisResult.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,kBAAkB,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAM7E,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;IACxE,OAAO,CACL,eAAK,SAAS,EAAC,gEAAgE,aAC7E,eAAK,SAAS,EAAC,8EAA8E,aAC3F,KAAC,kBAAkB,IAAC,SAAS,EAAC,SAAS,GAAG,EAC1C,cAAK,SAAS,EAAC,gBAAgB,YAAE,MAAM,CAAC,MAAM,GAAO,EACrD,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,YACrD,KAAC,QAAQ,IAAC,SAAS,EAAC,SAAS,GAAG,GACzB,GACM,EACjB,KAAC,cAAc,IACb,SAAS,EAAC,uCAAuC,EACjD,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,OAAO,YAEZ,cAAK,SAAS,EAAC,SAAS,YAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,GACjD,IACT,IACN,EACN,cAAK,SAAS,EAAC,0BAA0B,YACtC,MAAM,CAAC,WAAW;qBAChB,MAAM,CACL,CAAC,UAAU,EAAE,EAAE,CACb,UAAU,CAAC,QAAQ,KAAK,QAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CACjE;qBACA,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACnB,KAAC,UAAU,IAA6B,UAAU,EAAE,UAAU,IAA7C,UAAU,CAAC,UAAU,CAA4B,CACnE,CAAC,GACA,EACN,cAAK,SAAS,EAAC,0BAA0B,YACtC,MAAM,CAAC,SAAS;qBACd,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,KAAK,QAAQ,CAAC;qBACpD,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjB,KAAC,QAAQ,IAA2B,QAAQ,EAAE,QAAQ,IAAvC,QAAQ,CAAC,UAAU,CAAwB,CAC3D,CAAC,GACA,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {AnalysisResultSchema} from './schemas';\nimport {ToolCall} from './ToolCall';\nimport {ToolResult} from './ToolResult';\nimport {SquareTerminalIcon, CodeIcon} from 'lucide-react';\nimport {Button, Popover, PopoverContent, PopoverTrigger} from '@sqlrooms/ui';\n\ninterface AnalysisResultProps {\n  result: AnalysisResultSchema;\n}\n\nexport const AnalysisResult: React.FC<AnalysisResultProps> = ({result}) => {\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            <pre className=\"text-xs\">{JSON.stringify(result, null, 2)}</pre>\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-5 px-4\">\n        {result.toolResults\n          .filter(\n            (toolResult) =>\n              toolResult.toolName !== 'answer' || !toolResult.result.success,\n          )\n          .map((toolResult) => (\n            <ToolResult key={toolResult.toolCallId} toolResult={toolResult} />\n          ))}\n      </div>\n      <div className=\"flex flex-col gap-5 px-4\">\n        {result.toolCalls\n          .filter((toolCall) => toolCall.toolName === 'answer')\n          .map((toolCall) => (\n            <ToolCall key={toolCall.toolCallId} toolCall={toolCall} />\n          ))}\n      </div>\n    </div>\n  );\n};\n"]}
+{"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/QueryResult.d.ts

@@ -0,0 +1,9 @@
+import { CustomFunctionCall } from '@openassistant/core';
+/**
+ * Creates a query result message component based on a custom function call.
+ *
+ * @param {CustomFunctionCall} props - The custom function call properties
+ * @returns {JSX.Element | null} A query result table modal component or null if no data is available
+ */
+export declare function queryMessage(props: CustomFunctionCall): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=QueryResult.d.ts.map

package/dist/QueryResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryResult.d.ts","sourceRoot":"","sources":["../src/QueryResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AA6DvD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,kDAarD"}

package/dist/QueryResult.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DataTableModal } from '@sqlrooms/data-table';
+import { Expand, TableIcon } from 'lucide-react';
+import { useState } from 'react';
+/**
+ * A modal component that displays a data table with a title.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {string} props.title - The title to display in the modal header
+ * @param {string} props.sqlQuery - The SQL query that generated the data
+ * @returns {JSX.Element} A modal component containing a data table
+ */
+function QueryResultTableModal({ title, sqlQuery, }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const handleClick = () => {
+        setIsModalOpen(true);
+    };
+    const onClose = () => {
+        setIsModalOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex gap-2 flex-row items-center text-muted-foreground", onClick: handleClick, children: [_jsx(TableIcon, { className: "h-4 w-4" }), _jsx("h3", { className: "ml-1 text-xs uppercase", children: "Query Result" }), _jsx(Expand, { className: "h-3 w-3 shrink-0 text-muted-foreground transition-transform duration-200" })] }), _jsx(DataTableModal, { title: title, query: sqlQuery, tableModal: {
+                    isOpen: isModalOpen,
+                    onClose: onClose,
+                } })] }));
+}
+function isQueryToolOutputData(data) {
+    return typeof data === 'object' && data !== null && 'sqlQuery' in data;
+}
+/**
+ * Creates a query result message component based on a custom function call.
+ *
+ * @param {CustomFunctionCall} props - The custom function call properties
+ * @returns {JSX.Element | null} A query result table modal component or null if no data is available
+ */
+export function queryMessage(props) {
+    const data = props.output?.data;
+    if (!isQueryToolOutputData(data)) {
+        throw new Error('Invalid query tool output data');
+    }
+    if (!data.sqlQuery) {
+        return null;
+    }
+    return (_jsx(QueryResultTableModal, { title: data.sqlQuery, sqlQuery: data.sqlQuery }));
+}
+//# sourceMappingURL=QueryResult.js.map

package/dist/QueryResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryResult.js","sourceRoot":"","sources":["../src/QueryResult.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAC,MAAM,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B;;;;;;;;GAQG;AACH,SAAS,qBAAqB,CAAC,EAC7B,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,eACE,SAAS,EAAC,wDAAwD,EAClE,OAAO,EAAE,WAAW,aAEpB,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,EACjC,aAAI,SAAS,EAAC,wBAAwB,6BAAkB,EACxD,KAAC,MAAM,IAAC,SAAS,EAAC,0EAA0E,GAAG,IAC3F,EAEN,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,QAAQ,EACf,UAAU,EAAE;oBACV,MAAM,EAAE,WAAW;oBACnB,OAAO,EAAE,OAAO;iBACjB,GACD,IACD,CACJ,CAAC;AACJ,CAAC;AAMD,SAAS,qBAAqB,CAAC,IAAa;IAC1C,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI,IAAI,UAAU,IAAI,IAAI,CAAC;AACzE,CAAC;AACD;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,KAAyB;IACpD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;IAEhC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC;QACjC,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;IACpD,CAAC;IACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,qBAAqB,IAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACzE,CAAC;AACJ,CAAC","sourcesContent":["import {CustomFunctionCall} from '@openassistant/core';\nimport {DataTableModal} from '@sqlrooms/data-table';\nimport {Expand, TableIcon} from 'lucide-react';\nimport {useState} from 'react';\n\n/**\n * A modal component that displays a data table with a title.\n *\n * @component\n * @param {Object} props - The component props\n * @param {string} props.title - The title to display in the modal header\n * @param {string} props.sqlQuery - The SQL query that generated the data\n * @returns {JSX.Element} A modal component containing a data table\n */\nfunction QueryResultTableModal({\n  title,\n  sqlQuery,\n}: {\n  title: string;\n  sqlQuery: string;\n}) {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleClick = () => {\n    setIsModalOpen(true);\n  };\n\n  const onClose = () => {\n    setIsModalOpen(false);\n  };\n\n  return (\n    <>\n      <div\n        className=\"flex gap-2 flex-row items-center text-muted-foreground\"\n        onClick={handleClick}\n      >\n        <TableIcon className=\"h-4 w-4\" />\n        <h3 className=\"ml-1 text-xs uppercase\">Query Result</h3>\n        <Expand className=\"h-3 w-3 shrink-0 text-muted-foreground transition-transform duration-200\" />\n      </div>\n\n      <DataTableModal\n        title={title}\n        query={sqlQuery}\n        tableModal={{\n          isOpen: isModalOpen,\n          onClose: onClose,\n        }}\n      />\n    </>\n  );\n}\n\ntype QueryToolOutputData = {\n  sqlQuery: string;\n};\n\nfunction isQueryToolOutputData(data: unknown): data is QueryToolOutputData {\n  return typeof data === 'object' && data !== null && 'sqlQuery' in data;\n}\n/**\n * Creates a query result message component based on a custom function call.\n *\n * @param {CustomFunctionCall} props - The custom function call properties\n * @returns {JSX.Element | null} A query result table modal component or null if no data is available\n */\nexport function queryMessage(props: CustomFunctionCall) {\n  const data = props.output?.data;\n\n  if (!isQueryToolOutputData(data)) {\n    throw new Error('Invalid query tool output data');\n  }\n  if (!data.sqlQuery) {\n    return null;\n  }\n\n  return (\n    <QueryResultTableModal title={data.sqlQuery} sqlQuery={data.sqlQuery} />\n  );\n}\n"]}

package/dist/ToolCall.d.ts

@@ -1,7 +1,66 @@
-import { ToolCallSchema } from './schemas';
-interface ToolCallProps {
-    toolCall: ToolCallSchema;
-}
-export declare function ToolCall({ toolCall }: ToolCallProps): import("react/jsx-runtime").JSX.Element;
+import { ChartToolParameters, QueryToolParameters, ToolResultSchema } from './schemas';
+import { ReactNode } from 'react';
+import React from 'react';
+/**
+ * Props for the QueryToolCall component
+ * @interface QueryToolCallProps
+ * @extends {QueryToolParameters}
+ * @property {ReactNode} [customMessage] - Optional custom message to display with the query
+ */
+type QueryToolCallProps = QueryToolParameters & {
+    customMessage?: ReactNode;
+};
+/**
+ * Type guard to check if an argument object matches QueryToolParameters
+ * @param {unknown} args - The arguments to check
+ * @returns {boolean} True if args matches QueryToolParameters structure
+ */
+export declare function isQueryToolParameters(args: unknown): args is QueryToolParameters;
+/**
+ * Type guard to check if an argument object matches ChartToolParameters
+ * @param {unknown} args - The arguments to check
+ * @returns {boolean} True if args matches ChartToolParameters structure
+ */
+export declare function isChartToolParameters(args: unknown): args is ChartToolParameters;
+/**
+ * Renders a SQL query tool call with reasoning and query text
+ * @param {QueryToolCallProps} props - The component props
+ * @returns {JSX.Element} The rendered query tool call
+ */
+export declare const QueryToolCall: React.NamedExoticComponent<QueryToolCallProps>;
+/**
+ * Renders a chart tool call with visualization using Vega-Lite
+ * @param {ChartToolParameters} props - The component props
+ * @returns {JSX.Element} The rendered chart tool call
+ */
+export declare const ChartToolCall: React.NamedExoticComponent<{
+    sqlQuery: string;
+    reasoning: string;
+    vegaLiteSpec: string;
+}>;
+/**
+ * Type guard to check if a result object matches AnalysisAnswerProps
+ * @param {unknown} result - The result to check
+ * @returns {boolean} True if result matches AnalysisAnswerProps structure
+ */
+type AnalysisAnswerProps = {
+    success: true;
+    data: {
+        analysis: string;
+    };
+};
+/**
+ * Type guard to check if a result object matches AnalysisAnswerProps
+ * @param {unknown} result - The result to check
+ * @returns {boolean} True if result matches AnalysisAnswerProps structure
+ */
+export declare function isAnalysisAnswer(result: ToolResultSchema['result']): result is AnalysisAnswerProps;
+/**
+ * Renders an analysis answer with markdown content of the final streaming response.
+ *
+ * @param {AnalysisAnswerProps} props - The component props. See {@link AnalysisAnswerProps} for more details.
+ * @returns {JSX.Element} The rendered answer tool call
+ */
+export declare const AnalysisAnswer: React.NamedExoticComponent<AnalysisAnswerProps>;
 export {};
 //# sourceMappingURL=ToolCall.d.ts.map

package/dist/ToolCall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCall.d.ts","sourceRoot":"","sources":["../src/ToolCall.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,WAAW,CAAC;AAezC,UAAU,aAAa;IACrB,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EAAC,QAAQ,EAAC,EAAE,aAAa,2CAiFjD"}
+{"version":3,"file":"ToolCall.d.ts","sourceRoot":"","sources":["../src/ToolCall.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAW,SAAS,EAAC,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;GAKG;AACH,KAAK,kBAAkB,GAAG,mBAAmB,GAAG;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,OAAO,GACZ,IAAI,IAAI,mBAAmB,CAO7B;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,OAAO,GACZ,IAAI,IAAI,mBAAmB,CAE7B;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,gDAYxB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;EAiCxB,CAAC;AAEH;;;;GAIG;AACH,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GACjC,MAAM,IAAI,mBAAmB,CAE/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,iDAYzB,CAAC"}

package/dist/ToolCall.js

@@ -1,16 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Button, Popover, PopoverContent, PopoverTrigger, Spinner, cn, } from '@sqlrooms/ui';
-import { CodeIcon } from 'lucide-react';
+import { Spinner } from '@sqlrooms/ui';
 import { Suspense } from 'react';
 import Markdown from 'react-markdown';
 import { VegaLiteChart } from '@sqlrooms/vega';
-export function ToolCall({ toolCall }) {
-    const { args, toolName, toolCallId } = toolCall;
-    const { type } = args;
-    return (_jsxs("div", { className: cn('border-2 relative px-5 py-6 rounded-md dark:bg-gray-900 dark:text-gray-300 bg-gray-100 text-gray-700 text-xs', {
-            ' border-blue-500': toolName === 'answer',
-        }), children: [_jsx(Badge, { variant: "secondary", className: cn('text-xs absolute top-[-12px] left-2 dark:text-gray-100 text-gray-700', {
-                    ' border-blue-500': toolName === 'answer',
-                }), children: 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-[400px] overflow-auto", align: "start", side: "right", children: _jsx("pre", { className: "text-xs", children: JSON.stringify(toolCall, null, 2) }) })] }) }), type === 'query' ? (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsx("div", { className: "text-xs text-gray-700 dark:text-gray-400", children: args.reasoning }), _jsx("div", { className: "font-mono", children: args.sqlQuery })] })) : type === 'answer' ? (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsx("div", { className: "text-sm", children: _jsx(Markdown, { children: args.answer }) }), args.chart && (_jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsx("div", { className: "text-xs text-muted-foreground font-mono", children: args.chart.sqlQuery }), _jsx(Suspense, { fallback: _jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx(Spinner, { className: "w-4 h-4" }) }), children: _jsx(VegaLiteChart, { className: "max-w-[600px]", aspectRatio: 16 / 9, sqlQuery: args.chart.sqlQuery, spec: args.chart.vegaLiteSpec }) })] }))] })) : (_jsx("pre", { children: JSON.stringify(args, null, 2) }))] }, toolCallId));
+import React from 'react';
+/**
+ * Type guard to check if an argument object matches QueryToolParameters
+ * @param {unknown} args - The arguments to check
+ * @returns {boolean} True if args matches QueryToolParameters structure
+ */
+export function isQueryToolParameters(args) {
+    return (typeof args === 'object' &&
+        args !== null &&
+        'reasoning' in args &&
+        'sqlQuery' in args);
 }
+/**
+ * Type guard to check if an argument object matches ChartToolParameters
+ * @param {unknown} args - The arguments to check
+ * @returns {boolean} True if args matches ChartToolParameters structure
+ */
+export function isChartToolParameters(args) {
+    return typeof args === 'object' && args !== null && 'vegaLiteSpec' in args;
+}
+/**
+ * Renders a SQL query tool call with reasoning and query text
+ * @param {QueryToolCallProps} props - The component props
+ * @returns {JSX.Element} The rendered query tool call
+ */
+export const QueryToolCall = React.memo(function QueryToolCall({ reasoning, sqlQuery, customMessage, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsx("div", { className: "text-xs text-gray-400", children: reasoning }), _jsx("div", { className: "font-mono", children: sqlQuery }), customMessage] }));
+});
+/**
+ * Renders a chart tool call with visualization using Vega-Lite
+ * @param {ChartToolParameters} props - The component props
+ * @returns {JSX.Element} The rendered chart tool call
+ */
+export const ChartToolCall = React.memo(function ChartToolCall({ reasoning, sqlQuery, vegaLiteSpec, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsx("div", { className: "text-sm", children: _jsx(Markdown, { children: reasoning }) }), vegaLiteSpec && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-xs text-muted-foreground font-mono", children: sqlQuery }), _jsx(Suspense, { fallback: _jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx(Spinner, { className: "w-4 h-4" }) }), children: _jsx(VegaLiteChart, { width: 400, height: 250, sqlQuery: sqlQuery, spec: vegaLiteSpec }) })] }))] }));
+});
+/**
+ * Type guard to check if a result object matches AnalysisAnswerProps
+ * @param {unknown} result - The result to check
+ * @returns {boolean} True if result matches AnalysisAnswerProps structure
+ */
+export function isAnalysisAnswer(result) {
+    return result.success && result.data.analysis !== undefined;
+}
+/**
+ * Renders an analysis answer with markdown content of the final streaming response.
+ *
+ * @param {AnalysisAnswerProps} props - The component props. See {@link AnalysisAnswerProps} for more details.
+ * @returns {JSX.Element} The rendered answer tool call
+ */
+export const AnalysisAnswer = React.memo(function AnalysisAnswer(props) {
+    return (_jsx("div", { className: "flex flex-col gap-5", children: _jsx("div", { className: "text-xs", children: _jsx(Markdown, { className: "whitespace-pre-wrap break-words", children: props.data.analysis }) }) }));
+});
 //# sourceMappingURL=ToolCall.js.map

package/dist/ToolCall.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCall.js","sourceRoot":"","sources":["../src/ToolCall.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,OAAO,EACP,EAAE,GACH,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/B,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAM7C,MAAM,UAAU,QAAQ,CAAC,EAAC,QAAQ,EAAgB;IAChD,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,GAAG,QAAQ,CAAC;IAC9C,MAAM,EAAC,IAAI,EAAC,GAAG,IAAI,CAAC;IAEpB,OAAO,CACL,eAEE,SAAS,EAAE,EAAE,CACX,8GAA8G,EAC9G;YACE,kBAAkB,EAAE,QAAQ,KAAK,QAAQ;SAC1C,CACF,aAED,KAAC,KAAK,IACJ,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,EAAE,CACX,sEAAsE,EACtE;oBACE,kBAAkB,EAAE,QAAQ,KAAK,QAAQ;iBAC1C,CACF,YAEA,QAAQ,GACH,EAER,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,YACvD,KAAC,QAAQ,IAAC,SAAS,EAAC,SAAS,GAAG,GACzB,GACM,EACjB,KAAC,cAAc,IACb,SAAS,EAAC,uCAAuC,EACjD,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,YAEZ,cAAK,SAAS,EAAC,SAAS,YAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,GACnD,IACT,GACN,EACL,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAClB,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,0CAA0C,YACtD,IAAI,CAAC,SAAS,GACX,EACN,cAAK,SAAS,EAAC,WAAW,YAAE,IAAI,CAAC,QAAQ,GAAO,IAC5C,CACP,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACtB,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,QAAQ,cAAE,IAAI,CAAC,MAAM,GAAY,GAC9B,EACL,IAAI,CAAC,KAAK,IAAI,CACb,eAAK,SAAS,EAAC,4BAA4B,aACzC,cAAK,SAAS,EAAC,yCAAyC,YACrD,IAAI,CAAC,KAAK,CAAC,QAAQ,GAChB,EACN,KAAC,QAAQ,IACP,QAAQ,EACN,cAAK,SAAS,EAAC,gDAAgD,YAC7D,KAAC,OAAO,IAAC,SAAS,EAAC,SAAS,GAAG,GAC3B,YAGR,KAAC,aAAa,IACZ,SAAS,EAAC,eAAe,EACzB,WAAW,EAAE,EAAE,GAAG,CAAC,EACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,GAC7B,GACO,IACP,CACP,IACG,CACP,CAAC,CAAC,CAAC,CACF,wBAAM,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,CAC3C,KAxEI,UAAU,CAyEX,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {ToolCallSchema} from './schemas';\nimport {\n  Badge,\n  Button,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Spinner,\n  cn,\n} from '@sqlrooms/ui';\nimport {CodeIcon} from 'lucide-react';\nimport {Suspense} from 'react';\nimport Markdown from 'react-markdown';\nimport {VegaLiteChart} from '@sqlrooms/vega';\n\ninterface ToolCallProps {\n  toolCall: ToolCallSchema;\n}\n\nexport function ToolCall({toolCall}: ToolCallProps) {\n  const {args, toolName, toolCallId} = toolCall;\n  const {type} = args;\n\n  return (\n    <div\n      key={toolCallId}\n      className={cn(\n        'border-2 relative px-5 py-6 rounded-md dark:bg-gray-900 dark:text-gray-300 bg-gray-100 text-gray-700 text-xs',\n        {\n          ' border-blue-500': toolName === 'answer',\n        },\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',\n          {\n            ' border-blue-500': toolName === 'answer',\n          },\n        )}\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-[400px] overflow-auto\"\n            align=\"start\"\n            side=\"right\"\n          >\n            <pre className=\"text-xs\">{JSON.stringify(toolCall, null, 2)}</pre>\n          </PopoverContent>\n        </Popover>\n      </div>\n      {type === 'query' ? (\n        <div className=\"flex flex-col gap-5\">\n          <div className=\"text-xs text-gray-700 dark:text-gray-400\">\n            {args.reasoning}\n          </div>\n          <div className=\"font-mono\">{args.sqlQuery}</div>\n        </div>\n      ) : type === 'answer' ? (\n        <div className=\"flex flex-col gap-5\">\n          <div className=\"text-sm\">\n            <Markdown>{args.answer}</Markdown>\n          </div>\n          {args.chart && (\n            <div className=\"flex flex-col gap-2 w-full\">\n              <div className=\"text-xs text-muted-foreground font-mono\">\n                {args.chart.sqlQuery}\n              </div>\n              <Suspense\n                fallback={\n                  <div className=\"w-full h-full flex items-center justify-center\">\n                    <Spinner className=\"w-4 h-4\" />\n                  </div>\n                }\n              >\n                <VegaLiteChart\n                  className=\"max-w-[600px]\"\n                  aspectRatio={16 / 9}\n                  sqlQuery={args.chart.sqlQuery}\n                  spec={args.chart.vegaLiteSpec}\n                />\n              </Suspense>\n            </div>\n          )}\n        </div>\n      ) : (\n        <pre>{JSON.stringify(args, null, 2)}</pre>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"ToolCall.js","sourceRoot":"","sources":["../src/ToolCall.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAY,MAAM,OAAO,CAAC;AAC1C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CACnC,IAAa;IAEb,OAAO,CACL,OAAO,IAAI,KAAK,QAAQ;QACxB,IAAI,KAAK,IAAI;QACb,WAAW,IAAI,IAAI;QACnB,UAAU,IAAI,IAAI,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CACnC,IAAa;IAEb,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI,IAAI,cAAc,IAAI,IAAI,CAAC;AAC7E,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,EAC7D,SAAS,EACT,QAAQ,EACR,aAAa,GACM;IACnB,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,uBAAuB,YAAE,SAAS,GAAO,EACxD,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,EAC1C,aAAa,IACV,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,EAC7D,SAAS,EACT,QAAQ,EACR,YAAY,GACQ;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,QAAQ,cAAE,SAAS,GAAY,GAC5B,EACL,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,yCAAyC,YACrD,QAAQ,GACL,EACN,KAAC,QAAQ,IACP,QAAQ,EACN,cAAK,SAAS,EAAC,gDAAgD,YAC7D,KAAC,OAAO,IAAC,SAAS,EAAC,SAAS,GAAG,GAC3B,YAGR,KAAC,aAAa,IACZ,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,GAClB,GACO,IACP,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAcH;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAC9B,MAAkC;IAElC,OAAO,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC;AAC9D,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,cAAc,CAC9D,KAA0B;IAE1B,OAAO,CACL,cAAK,SAAS,EAAC,qBAAqB,YAClC,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,QAAQ,IAAC,SAAS,EAAC,iCAAiC,YAClD,KAAK,CAAC,IAAI,CAAC,QAAQ,GACX,GACP,GACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import {\n  ChartToolParameters,\n  QueryToolParameters,\n  ToolResultSchema,\n} from './schemas';\nimport {Spinner} from '@sqlrooms/ui';\nimport {Suspense, ReactNode} from 'react';\nimport Markdown from 'react-markdown';\nimport {VegaLiteChart} from '@sqlrooms/vega';\nimport React from 'react';\n\n/**\n * Props for the QueryToolCall component\n * @interface QueryToolCallProps\n * @extends {QueryToolParameters}\n * @property {ReactNode} [customMessage] - Optional custom message to display with the query\n */\ntype QueryToolCallProps = QueryToolParameters & {\n  customMessage?: ReactNode;\n};\n\n/**\n * Type guard to check if an argument object matches QueryToolParameters\n * @param {unknown} args - The arguments to check\n * @returns {boolean} True if args matches QueryToolParameters structure\n */\nexport function isQueryToolParameters(\n  args: unknown,\n): args is QueryToolParameters {\n  return (\n    typeof args === 'object' &&\n    args !== null &&\n    'reasoning' in args &&\n    'sqlQuery' in args\n  );\n}\n\n/**\n * Type guard to check if an argument object matches ChartToolParameters\n * @param {unknown} args - The arguments to check\n * @returns {boolean} True if args matches ChartToolParameters structure\n */\nexport function isChartToolParameters(\n  args: unknown,\n): args is ChartToolParameters {\n  return typeof args === 'object' && args !== null && 'vegaLiteSpec' in args;\n}\n\n/**\n * Renders a SQL query tool call with reasoning and query text\n * @param {QueryToolCallProps} props - The component props\n * @returns {JSX.Element} The rendered query tool call\n */\nexport const QueryToolCall = React.memo(function QueryToolCall({\n  reasoning,\n  sqlQuery,\n  customMessage,\n}: QueryToolCallProps) {\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <div className=\"text-xs text-gray-400\">{reasoning}</div>\n      <div className=\"font-mono\">{sqlQuery}</div>\n      {customMessage}\n    </div>\n  );\n});\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite\n * @param {ChartToolParameters} props - The component props\n * @returns {JSX.Element} The rendered chart tool call\n */\nexport const ChartToolCall = React.memo(function ChartToolCall({\n  reasoning,\n  sqlQuery,\n  vegaLiteSpec,\n}: ChartToolParameters) {\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <div className=\"text-sm\">\n        <Markdown>{reasoning}</Markdown>\n      </div>\n      {vegaLiteSpec && (\n        <div className=\"flex flex-col gap-2\">\n          <div className=\"text-xs text-muted-foreground font-mono\">\n            {sqlQuery}\n          </div>\n          <Suspense\n            fallback={\n              <div className=\"w-full h-full flex items-center justify-center\">\n                <Spinner className=\"w-4 h-4\" />\n              </div>\n            }\n          >\n            <VegaLiteChart\n              width={400}\n              height={250}\n              sqlQuery={sqlQuery}\n              spec={vegaLiteSpec}\n            />\n          </Suspense>\n        </div>\n      )}\n    </div>\n  );\n});\n\n/**\n * Type guard to check if a result object matches AnalysisAnswerProps\n * @param {unknown} result - The result to check\n * @returns {boolean} True if result matches AnalysisAnswerProps structure\n */\ntype AnalysisAnswerProps = {\n  success: true;\n  data: {\n    analysis: string;\n  };\n};\n\n/**\n * Type guard to check if a result object matches AnalysisAnswerProps\n * @param {unknown} result - The result to check\n * @returns {boolean} True if result matches AnalysisAnswerProps structure\n */\nexport function isAnalysisAnswer(\n  result: ToolResultSchema['result'],\n): result is AnalysisAnswerProps {\n  return result.success && result.data.analysis !== undefined;\n}\n\n/**\n * Renders an analysis answer with markdown content of the final streaming response.\n *\n * @param {AnalysisAnswerProps} props - The component props. See {@link AnalysisAnswerProps} for more details.\n * @returns {JSX.Element} The rendered answer tool call\n */\nexport const AnalysisAnswer = React.memo(function AnalysisAnswer(\n  props: AnalysisAnswerProps,\n) {\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <div className=\"text-xs\">\n        <Markdown className=\"whitespace-pre-wrap break-words\">\n          {props.data.analysis}\n        </Markdown>\n      </div>\n    </div>\n  );\n});\n"]}

package/dist/ToolResult.d.ts

@@ -1,6 +1,9 @@
 import { ToolResultSchema } from './schemas';
+import { ReactNode } from 'react';
+import React from 'react';
 interface ToolResultProps {
     toolResult: ToolResultSchema;
+    customMessage?: ReactNode;
 }
 export declare const ToolResult: React.FC<ToolResultProps>;
 export {};

package/dist/ToolResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolResult.d.ts","sourceRoot":"","sources":["../src/ToolResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAW3C,UAAU,eAAe;IACvB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2DhD,CAAC"}
+{"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

@@ -1,9 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Button, Popover, PopoverContent, PopoverTrigger, cn, } from '@sqlrooms/ui';
 import { CheckCircle2Icon, CodeIcon, XCircleIcon } from 'lucide-react';
-export const ToolResult = ({ toolResult }) => {
+import { AnalysisAnswer, ChartToolCall, isAnalysisAnswer, isChartToolParameters, } from './ToolCall';
+import { isQueryToolParameters, QueryToolCall } from './ToolCall';
+import { JsonMonacoEditor } from '@sqlrooms/monaco-editor';
+function getBorderColor(isSuccess, toolName) {
+    if (!isSuccess) {
+        return 'border-red-500';
+    }
+    switch (toolName) {
+        case 'query':
+            return 'border-green-500';
+        case 'chart':
+            return 'border-blue-500';
+        case 'answer':
+            return 'border-gray-500';
+        default:
+            return 'border-gray-500';
+    }
+}
+export const ToolResult = ({ toolResult, customMessage, }) => {
     const { toolName, args, result } = toolResult;
     const isSuccess = result.success;
-    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', isSuccess ? 'border-green-500' : 'border-red-500'), 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', isSuccess ? 'border-green-500' : 'border-red-500'), 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("pre", { className: "whitespace-no-wrap text-xs", children: JSON.stringify(toolResult, null, 2) }) })] }) }), _jsxs("div", { className: "flex flex-col gap-5", children: [args.reasoning && (_jsx("div", { className: "text-xs text-gray-400", children: args.reasoning })), args.sqlQuery && _jsx("div", { className: "font-mono", children: args.sqlQuery }), !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 })] }))] })] }));
+    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: {
+                                    minimap: { enabled: false },
+                                    scrollBeyondLastLine: false,
+                                    automaticLayout: true,
+                                    folding: true,
+                                    lineNumbers: false,
+                                } }) })] }) }), _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: {
+                            minimap: { enabled: false },
+                            scrollBeyondLastLine: false,
+                            automaticLayout: true,
+                            folding: true,
+                            lineNumbers: false,
+                        } }))), !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 })] }))] })] }));
 };
 //# sourceMappingURL=ToolResult.js.map

package/dist/ToolResult.js.map

@@ -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;AAMrE,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAC,UAAU,EAAC,EAAE,EAAE;IACpE,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAC,GAAG,UAAU,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;IAEjC,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,8GAA8G,EAC9G,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAClD,aAED,MAAC,KAAK,IACJ,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAClD,aAEA,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,gBAAgB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CACxD,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,SAAS,EAAC,sBAAsB,GAAG,CACjD,EACA,QAAQ,IACH,EAER,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,YACvD,KAAC,QAAQ,IAAC,SAAS,EAAC,SAAS,GAAG,GACzB,GACM,EACjB,KAAC,cAAc,IACb,SAAS,EAAC,2CAA2C,EACrD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,YAEb,cAAK,SAAS,EAAC,4BAA4B,YACxC,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,GAChC,GACS,IACT,GACN,EAEN,eAAK,SAAS,EAAC,qBAAqB,aACjC,IAAI,CAAC,SAAS,IAAI,CACjB,cAAK,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,SAAS,GAAO,CAC9D,EACA,IAAI,CAAC,QAAQ,IAAI,cAAK,SAAS,EAAC,WAAW,YAAE,IAAI,CAAC,QAAQ,GAAO,EACjE,CAAC,MAAM,CAAC,OAAO,IAAI,CAClB,eAAK,SAAS,EAAC,kCAAkC,aAC/C,YAAG,SAAS,EAAC,mBAAmB,8CAAkC,EAClE,YAAG,SAAS,EAAC,SAAS,YAAE,MAAM,CAAC,KAAK,GAAK,IACrC,CACP,IACG,IACF,CACP,CAAC;AACJ,CAAC,CAAC","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';\n\ninterface ToolResultProps {\n  toolResult: ToolResultSchema;\n}\n\nexport const ToolResult: React.FC<ToolResultProps> = ({toolResult}) => {\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        isSuccess ? 'border-green-500' : 'border-red-500',\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          isSuccess ? 'border-green-500' : 'border-red-500',\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            <pre className=\"whitespace-no-wrap text-xs\">\n              {JSON.stringify(toolResult, null, 2)}\n            </pre>\n          </PopoverContent>\n        </Popover>\n      </div>\n\n      <div className=\"flex flex-col gap-5\">\n        {args.reasoning && (\n          <div className=\"text-xs text-gray-400\">{args.reasoning}</div>\n        )}\n        {args.sqlQuery && <div className=\"font-mono\">{args.sqlQuery}</div>}\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"]}
+{"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"]}