@prismiq/react 0.1.1 → 0.2.0

package/dist/{chunk-URJH4H6G.cjs → chunk-PG7QBH3G.cjs}

@@ -2843,6 +2843,83 @@ var PrismiqClient = class {
       })
     });
   }
+  // ============================================================================
+  // LLM Methods
+  // ============================================================================
+  /**
+   * Get the LLM agent status.
+   *
+   * @returns LLM status including enabled state, provider, and model.
+   */
+  async getLLMStatus() {
+    return this.request("/llm/status");
+  }
+  /**
+   * Stream a chat response from the LLM agent via SSE.
+   *
+   * @param message - User's message.
+   * @param history - Previous conversation messages.
+   * @param currentSql - Current SQL in the editor (for context).
+   * @param signal - Optional AbortSignal for cancellation.
+   * @yields StreamChunk objects as the response is generated.
+   */
+  async *streamChat(message, history, currentSql, signal) {
+    const url = `${this.endpoint}/llm/chat`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Tenant-ID": this.tenantId
+    };
+    if (this.userId) headers["X-User-ID"] = this.userId;
+    if (this.schemaName) headers["X-Schema-Name"] = this.schemaName;
+    if (this.customHeaders) Object.assign(headers, this.customHeaders);
+    if (this.getToken) {
+      const token = await this.getToken();
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+    const response = await fetch(url, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        message,
+        history,
+        current_sql: currentSql
+      }),
+      signal
+    });
+    if (!response.ok) {
+      throw new PrismiqError(
+        `LLM chat failed: ${response.status} ${response.statusText}`,
+        response.status
+      );
+    }
+    const reader = response.body?.getReader();
+    if (!reader) return;
+    const decoder = new TextDecoder();
+    let buffer = "";
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6).trim();
+            if (data) {
+              try {
+                const chunk = JSON.parse(data);
+                yield chunk;
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  }
 };
 var AnalyticsContext = react.createContext(null);
 var CallbacksContext = react.createContext({});
@@ -3900,6 +3977,140 @@ function CrossFilterProvider({
 function useCrossFilterOptional() {
   return react.useContext(CrossFilterContext);
 }
+
+// src/hooks/useLLMStatus.ts
+function useLLMStatus() {
+  const { client } = useAnalytics();
+  const [status, setStatus] = react.useState({ enabled: false });
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    if (!client) {
+      setIsLoading(false);
+      return;
+    }
+    let cancelled = false;
+    client.getLLMStatus().then((result) => {
+      if (!cancelled) {
+        setStatus(result);
+        setError(null);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setStatus({ enabled: false });
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    }).finally(() => {
+      if (!cancelled) setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+  return {
+    enabled: status.enabled,
+    provider: status.provider,
+    model: status.model,
+    isLoading,
+    error
+  };
+}
+function useLLMChat() {
+  const { client } = useAnalytics();
+  const [messages, setMessages] = react.useState([]);
+  const [isStreaming, setIsStreaming] = react.useState(false);
+  const [streamingContent, setStreamingContent] = react.useState("");
+  const [suggestedSql, setSuggestedSql] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const abortRef = react.useRef(null);
+  const isStreamingRef = react.useRef(false);
+  const messagesRef = react.useRef([]);
+  messagesRef.current = messages;
+  const sendMessage = react.useCallback(
+    async (message, currentSql) => {
+      if (!client || isStreamingRef.current) return;
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const userMsg = { role: "user", content: message };
+      setMessages((prev) => [...prev, userMsg]);
+      isStreamingRef.current = true;
+      setIsStreaming(true);
+      setStreamingContent("");
+      setSuggestedSql(null);
+      setError(null);
+      let accumulatedText = "";
+      let lastSql = null;
+      try {
+        const history = messagesRef.current.map((m) => ({
+          role: m.role,
+          content: m.content
+        }));
+        for await (const chunk of client.streamChat(
+          message,
+          history,
+          currentSql,
+          controller.signal
+        )) {
+          if (controller.signal.aborted) break;
+          switch (chunk.type) {
+            case "text":
+              accumulatedText += chunk.content ?? "";
+              setStreamingContent(accumulatedText);
+              break;
+            case "sql":
+              lastSql = chunk.content ?? null;
+              setSuggestedSql(lastSql);
+              break;
+            case "error":
+              setError(chunk.content ?? "Unknown error");
+              break;
+            case "done":
+              break;
+          }
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name !== "AbortError") {
+          setError(err.message);
+        }
+      } finally {
+        isStreamingRef.current = false;
+        setIsStreaming(false);
+        if (accumulatedText) {
+          const assistantMsg = {
+            role: "assistant",
+            content: accumulatedText
+          };
+          setMessages((prev) => [...prev, assistantMsg]);
+        }
+        setStreamingContent("");
+      }
+    },
+    [client]
+  );
+  react.useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+  const clearHistory = react.useCallback(() => {
+    abortRef.current?.abort();
+    setMessages([]);
+    setStreamingContent("");
+    setSuggestedSql(null);
+    setError(null);
+    setIsStreaming(false);
+  }, []);
+  return {
+    messages,
+    isStreaming,
+    streamingContent,
+    suggestedSql,
+    sendMessage,
+    clearHistory,
+    error
+  };
+}
 var nodeStyles = {
   display: "flex",
   alignItems: "center",
@@ -4362,6 +4573,7 @@ function SchemaExplorer({
   selectedColumns = [],
   searchable = true,
   collapsible = true,
+  headerAction,
   className,
   style
 }) {
@@ -4397,10 +4609,12 @@ function SchemaExplorer({
       style: { ...containerStyles4, ...style },
       role: "tree",
       "aria-label": "Database schema",
+      "data-testid": "schema-explorer-root",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyles2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "table", size: 16, style: { color: "var(--prismiq-color-primary)" } }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: titleStyles2, children: "Schema Explorer" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...titleStyles2, flex: 1 }, children: "Schema Explorer" }),
+          headerAction
         ] }),
         searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { style: searchContainerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(
           Input,
@@ -4409,7 +4623,8 @@ function SchemaExplorer({
             placeholder: "Search tables and columns...",
             value: searchQuery,
             onChange: (e) => setSearchQuery(e.target.value),
-            style: { width: "100%" }
+            style: { width: "100%" },
+            "data-testid": "schema-explorer-search"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: treeContainerStyles, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSkeleton, {}) : error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: errorStyles2, children: [
@@ -8873,7 +9088,14 @@ function CustomSQLEditor({
   style
 }) {
   const [sql, setSql] = react.useState(initialSql);
+  const prevInitialSqlRef = react.useRef(initialSql);
   const [isFocused, setIsFocused] = react.useState(false);
+  react.useEffect(() => {
+    if (initialSql !== prevInitialSqlRef.current) {
+      prevInitialSqlRef.current = initialSql;
+      setSql(initialSql);
+    }
+  }, [initialSql]);
   const [executeEnabled, setExecuteEnabled] = react.useState(false);
   const [lastExecutedSql, setLastExecutedSql] = react.useState(null);
   const {
@@ -8919,7 +9141,7 @@ function CustomSQLEditor({
     ...buttonStyles,
     ...canExecute ? {} : buttonDisabledStyles
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...containerStyles17, ...style }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...containerStyles17, ...style }, "data-testid": "custom-sql-editor", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: editorWrapperStyles, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
@@ -8933,7 +9155,8 @@ function CustomSQLEditor({
           style: mergedTextareaStyles,
           spellCheck: false,
           autoComplete: "off",
-          autoCapitalize: "off"
+          autoCapitalize: "off",
+          "data-testid": "custom-sql-textarea"
         }
       ),
       validation && !validation.valid && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: validationErrorStyles, children: [
@@ -8957,6 +9180,7 @@ function CustomSQLEditor({
             disabled: !canExecute,
             style: mergedButtonStyles,
             type: "button",
+            "data-testid": "custom-sql-run-button",
             children: [
               isLoading ? "Executing..." : "Run Query",
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", opacity: 0.7 }, children: "(Cmd+Enter)" })
@@ -9158,6 +9382,257 @@ function TableSelector({
     ] })
   ] });
 }
+function parseContent(content) {
+  const startToken = "```sql";
+  const endToken = "```";
+  const parts = [];
+  let cursor = 0;
+  while (cursor < content.length) {
+    const start = content.indexOf(startToken, cursor);
+    if (start === -1) break;
+    if (start > cursor) {
+      parts.push({ type: "text", value: content.slice(cursor, start) });
+    }
+    const sqlStart = content.indexOf("\n", start + startToken.length);
+    if (sqlStart === -1) break;
+    const end = content.indexOf(endToken, sqlStart + 1);
+    if (end === -1) break;
+    const sql = content.slice(sqlStart + 1, end).trim();
+    if (sql) {
+      parts.push({ type: "sql", value: sql });
+    }
+    cursor = end + endToken.length;
+  }
+  if (cursor < content.length) {
+    parts.push({ type: "text", value: content.slice(cursor) });
+  }
+  return parts;
+}
+function ChatBubble({ message, onApplySql }) {
+  const { theme } = chunkLMTG3LRC_cjs.useTheme();
+  const isUser = message.role === "user";
+  const parts = react.useMemo(() => parseContent(message.content), [message.content]);
+  const bubbleStyle = {
+    maxWidth: "85%",
+    padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+    borderRadius: theme.radius.md,
+    fontSize: theme.fontSizes.sm,
+    lineHeight: 1.5,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    alignSelf: isUser ? "flex-end" : "flex-start",
+    backgroundColor: isUser ? theme.colors.primary : theme.colors.surface,
+    color: isUser ? "#fff" : theme.colors.text,
+    border: isUser ? "none" : `1px solid ${theme.colors.border}`
+  };
+  const sqlBlockStyle = {
+    backgroundColor: isUser ? "rgba(0,0,0,0.2)" : theme.colors.background,
+    borderRadius: theme.radius.sm,
+    padding: theme.spacing.sm,
+    margin: `${theme.spacing.xs} 0`,
+    fontFamily: theme.fonts.mono,
+    fontSize: theme.fontSizes.xs,
+    overflow: "auto",
+    position: "relative"
+  };
+  const applyBtnContainerStyle = {
+    display: "flex",
+    justifyContent: "flex-end",
+    marginTop: theme.spacing.xs
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: bubbleStyle, children: parts.map((part, i) => {
+    if (part.type === "sql") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": `chat-sql-${i}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { style: sqlBlockStyle, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: part.value }) }),
+        onApplySql && /* @__PURE__ */ jsxRuntime.jsx("div", { style: applyBtnContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onApplySql(part.value),
+            "data-testid": `apply-sql-btn-${i}`,
+            children: "Apply to Editor"
+          }
+        ) })
+      ] }, i);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: part.value }, i);
+  }) });
+}
+function ChatPanel({ currentSql, onApplySql }) {
+  const { theme } = chunkLMTG3LRC_cjs.useTheme();
+  const {
+    messages,
+    isStreaming,
+    streamingContent,
+    suggestedSql,
+    sendMessage,
+    clearHistory,
+    error
+  } = useLLMChat();
+  const [input, setInput] = react.useState("");
+  const messagesEndRef = react.useRef(null);
+  react.useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streamingContent]);
+  const handleSend = react.useCallback(() => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    setInput("");
+    void sendMessage(trimmed, currentSql);
+  }, [input, currentSql, sendMessage]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    borderLeft: `1px solid ${theme.colors.border}`,
+    backgroundColor: theme.colors.background
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+    borderBottom: `1px solid ${theme.colors.border}`,
+    flexShrink: 0
+  };
+  const headerTitleStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing.xs,
+    fontSize: theme.fontSizes.sm,
+    fontWeight: 600,
+    color: theme.colors.text
+  };
+  const messagesStyle = {
+    flex: 1,
+    overflow: "auto",
+    padding: theme.spacing.md,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.md
+  };
+  const streamingStyle = {
+    alignSelf: "flex-start",
+    maxWidth: "85%",
+    padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+    borderRadius: theme.radius.md,
+    fontSize: theme.fontSizes.sm,
+    lineHeight: 1.5,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    backgroundColor: theme.colors.surface,
+    color: theme.colors.text,
+    border: `1px solid ${theme.colors.border}`
+  };
+  const suggestedSqlStyle = {
+    padding: theme.spacing.sm,
+    borderTop: `1px solid ${theme.colors.border}`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  };
+  const inputAreaStyle = {
+    display: "flex",
+    gap: theme.spacing.sm,
+    padding: theme.spacing.sm,
+    borderTop: `1px solid ${theme.colors.border}`,
+    flexShrink: 0
+  };
+  const textareaStyle = {
+    flex: 1,
+    resize: "none",
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.radius.sm,
+    padding: theme.spacing.sm,
+    fontSize: theme.fontSizes.sm,
+    fontFamily: theme.fonts.sans,
+    backgroundColor: theme.colors.surface,
+    color: theme.colors.text,
+    outline: "none",
+    minHeight: "36px",
+    maxHeight: "120px"
+  };
+  const emptyStyle = {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    padding: theme.spacing.lg,
+    color: theme.colors.textMuted,
+    fontSize: theme.fontSizes.sm
+  };
+  const errorStyle = {
+    padding: theme.spacing.sm,
+    margin: `0 ${theme.spacing.md}`,
+    borderRadius: theme.radius.sm,
+    backgroundColor: "rgba(239, 68, 68, 0.1)",
+    color: "#ef4444",
+    fontSize: theme.fontSizes.xs,
+    flexShrink: 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, className: "prismiq-chat-panel", "data-testid": "chat-panel-root", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerTitleStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "edit", size: 16 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "SQL Assistant" })
+      ] }),
+      messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: clearHistory, "data-testid": "chat-clear", children: "Clear" })
+    ] }),
+    messages.length === 0 && !isStreaming ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: emptyStyle, "data-testid": "chat-empty", children: [
+      "Ask me to help write SQL queries.",
+      "\n",
+      "I can see your database schema and validate queries."
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: messagesStyle, "data-testid": "chat-messages", children: [
+      messages.map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx(ChatBubble, { message: msg, onApplySql }, i)),
+      isStreaming && streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: streamingStyle, "data-testid": "chat-streaming", children: [
+        streamingContent,
+        "\u258D"
+      ] }),
+      isStreaming && !streamingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { style: streamingStyle, "data-testid": "chat-streaming", children: "Thinking..." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle, "data-testid": "chat-error", children: error }),
+    suggestedSql && !isStreaming && /* @__PURE__ */ jsxRuntime.jsx("div", { style: suggestedSqlStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: () => onApplySql(suggestedSql), "data-testid": "chat-apply-sql", children: "Apply SQL to Editor" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: inputAreaStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          style: textareaStyle,
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "Ask about your data...",
+          rows: 1,
+          disabled: isStreaming,
+          "data-testid": "chat-input"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "sm",
+          onClick: handleSend,
+          disabled: isStreaming || !input.trim(),
+          "data-testid": "chat-send",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "play", size: 16 })
+        }
+      )
+    ] })
+  ] });
+}
 
 exports.AggregationPicker = AggregationPicker;
 exports.AnalyticsProvider = AnalyticsProvider;
@@ -9165,6 +9640,8 @@ exports.AutoSaveIndicator = AutoSaveIndicator;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.CalculatedFieldBuilder = CalculatedFieldBuilder;
+exports.ChatBubble = ChatBubble;
+exports.ChatPanel = ChatPanel;
 exports.Checkbox = Checkbox;
 exports.CollapsibleSection = CollapsibleSection;
 exports.ColorPaletteSelector = ColorPaletteSelector;
@@ -9228,10 +9705,12 @@ exports.useDashboardMutations = useDashboardMutations;
 exports.useDashboardPinStatus = useDashboardPinStatus;
 exports.useDashboards = useDashboards;
 exports.useDebouncedLayoutSave = useDebouncedLayoutSave;
+exports.useLLMChat = useLLMChat;
+exports.useLLMStatus = useLLMStatus;
 exports.usePinMutations = usePinMutations;
 exports.usePinnedDashboards = usePinnedDashboards;
 exports.useQuery = useQuery;
 exports.useSavedQueries = useSavedQueries;
 exports.useSchema = useSchema;
-//# sourceMappingURL=chunk-URJH4H6G.cjs.map
-//# sourceMappingURL=chunk-URJH4H6G.cjs.map
+//# sourceMappingURL=chunk-PG7QBH3G.cjs.map
+//# sourceMappingURL=chunk-PG7QBH3G.cjs.map