@prismiq/react 0.1.0 → 0.2.0

package/dist/{chunk-UPYINBZU.js → chunk-GELI7MDZ.js}

@@ -1,5 +1,5 @@
 import { useTheme } from './chunk-T6STUE7E.js';
-import { useFocusTrap, parseColumnRef } from './chunk-EX74SI67.js';
+import { useFocusTrap, parseColumnRef } from './chunk-LBE6GIBC.js';
 import { forwardRef, useState, useRef, useCallback, useEffect, isValidElement, cloneElement, createContext, useContext, useLayoutEffect, Component, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -2325,6 +2325,9 @@ var PrismiqClient = class {
   }
   /**
    * Make an authenticated request to the API.
+   *
+   * @param path - API path (starting with /)
+   * @param options - Fetch options including signal for cancellation
    */
   async request(path, options = {}) {
     const url = `${this.endpoint}${path}`;
@@ -2470,6 +2473,17 @@ var PrismiqClient = class {
     const result = await this.request(path);
     return result.values;
   }
+  /**
+   * Get data source metadata including display names and descriptions.
+   *
+   * Returns metadata for all exposed tables/views that can be used
+   * to show user-friendly names in the UI instead of raw table names.
+   *
+   * @returns Array of data source metadata.
+   */
+  async getDataSources() {
+    return this.request("/data-sources");
+  }
   // ============================================================================
   // Query Methods
   // ============================================================================
@@ -2503,12 +2517,14 @@ var PrismiqClient = class {
    *
    * @param query - The query definition to execute.
    * @param bypassCache - If true, bypass cache and re-execute query.
+   * @param signal - Optional AbortSignal for cancellation.
    * @returns The query result with all rows and cache metadata.
    */
-  async executeQuery(query, bypassCache = false) {
+  async executeQuery(query, bypassCache = false, signal) {
     return this.request("/query/execute", {
       method: "POST",
-      body: JSON.stringify({ query, bypass_cache: bypassCache })
+      body: JSON.stringify({ query, bypass_cache: bypassCache }),
+      signal
     });
   }
   /**
@@ -2825,6 +2841,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 = createContext(null);
 var CallbacksContext = createContext({});
@@ -2861,6 +2954,7 @@ function AnalyticsProvider({
   }
   const client = clientRef.current;
   const [schema, setSchema] = useState(null);
+  const [dataSources, setDataSources] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const hasFetchedSchemaRef = useRef(false);
@@ -2878,8 +2972,13 @@ function AnalyticsProvider({
     setIsLoading(true);
     setError(null);
     try {
-      const fetchedSchema = await client.getSchema();
+      const [fetchedSchema, fetchedDataSources] = await Promise.all([
+        client.getSchema(),
+        client.getDataSources().catch(() => [])
+        // Non-critical, fallback to empty
+      ]);
       setSchema(fetchedSchema);
+      setDataSources(fetchedDataSources);
       onSchemaLoadRef.current?.(fetchedSchema);
     } catch (err) {
       const schemaError = err instanceof Error ? err : new Error(String(err));
@@ -2901,6 +3000,7 @@ function AnalyticsProvider({
     () => ({
       client,
       schema,
+      dataSources,
       isLoading,
       error,
       refetchSchema,
@@ -2908,7 +3008,7 @@ function AnalyticsProvider({
       userId,
       schemaName
     }),
-    [client, schema, isLoading, error, refetchSchema, tenantId, userId, schemaName]
+    [client, schema, dataSources, isLoading, error, refetchSchema, tenantId, userId, schemaName]
   );
   const callbacks = useMemo(
     () => ({
@@ -2929,22 +3029,44 @@ function useAnalytics() {
   return context;
 }
 function useSchema() {
-  const { schema, isLoading, error } = useAnalytics();
+  const { schema, dataSources, isLoading, error } = useAnalytics();
   const tables = useMemo(() => schema?.tables ?? [], [schema]);
   const relationships = useMemo(() => schema?.relationships ?? [], [schema]);
+  const dataSourceMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const ds of dataSources) {
+      map.set(ds.table, ds);
+    }
+    return map;
+  }, [dataSources]);
   const getTable = useCallback(
     (name) => {
       return tables.find((table) => table.name === name);
     },
     [tables]
   );
+  const getDisplayName = useCallback(
+    (tableName) => {
+      return dataSourceMap.get(tableName)?.title ?? tableName;
+    },
+    [dataSourceMap]
+  );
+  const getDescription = useCallback(
+    (tableName) => {
+      return dataSourceMap.get(tableName)?.subtitle ?? "";
+    },
+    [dataSourceMap]
+  );
   return {
     schema,
     tables,
     relationships,
+    dataSources,
     isLoading,
     error,
-    getTable
+    getTable,
+    getDisplayName,
+    getDescription
   };
 }
 function queryEquals(a, b) {
@@ -3853,6 +3975,140 @@ function CrossFilterProvider({
 function useCrossFilterOptional() {
   return useContext(CrossFilterContext);
 }
+
+// src/hooks/useLLMStatus.ts
+function useLLMStatus() {
+  const { client } = useAnalytics();
+  const [status, setStatus] = useState({ enabled: false });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  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] = useState([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingContent, setStreamingContent] = useState("");
+  const [suggestedSql, setSuggestedSql] = useState(null);
+  const [error, setError] = useState(null);
+  const abortRef = useRef(null);
+  const isStreamingRef = useRef(false);
+  const messagesRef = useRef([]);
+  messagesRef.current = messages;
+  const sendMessage = 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]
+  );
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+  const clearHistory = 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",
@@ -4315,6 +4571,7 @@ function SchemaExplorer({
   selectedColumns = [],
   searchable = true,
   collapsible = true,
+  headerAction,
   className,
   style
 }) {
@@ -4350,10 +4607,12 @@ function SchemaExplorer({
       style: { ...containerStyles4, ...style },
       role: "tree",
       "aria-label": "Database schema",
+      "data-testid": "schema-explorer-root",
       children: [
         /* @__PURE__ */ jsxs("div", { style: headerStyles2, children: [
           /* @__PURE__ */ jsx(Icon, { name: "table", size: 16, style: { color: "var(--prismiq-color-primary)" } }),
-          /* @__PURE__ */ jsx("span", { style: titleStyles2, children: "Schema Explorer" })
+          /* @__PURE__ */ jsx("span", { style: { ...titleStyles2, flex: 1 }, children: "Schema Explorer" }),
+          headerAction
         ] }),
         searchable && /* @__PURE__ */ jsx("div", { style: searchContainerStyles, children: /* @__PURE__ */ jsx(
           Input,
@@ -4362,7 +4621,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__ */ jsx("div", { style: treeContainerStyles, children: isLoading ? /* @__PURE__ */ jsx(LoadingSkeleton, {}) : error ? /* @__PURE__ */ jsxs("div", { style: errorStyles2, children: [
@@ -4833,6 +5093,29 @@ var containerStyles7 = {
   gap: "var(--prismiq-spacing-xs)",
   flex: 1
 };
+var comboboxContainerStyles = {
+  position: "relative",
+  flex: 1
+};
+var dropdownStyles2 = {
+  position: "fixed",
+  backgroundColor: "var(--prismiq-color-background)",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-md)",
+  boxShadow: "var(--prismiq-shadow-md)",
+  zIndex: 1e3,
+  maxHeight: "200px",
+  overflow: "auto"
+};
+var optionStyles2 = {
+  padding: "var(--prismiq-spacing-sm) var(--prismiq-spacing-md)",
+  cursor: "pointer",
+  fontSize: "var(--prismiq-font-size-sm)",
+  transition: "background-color 0.1s"
+};
+var optionHoverStyles2 = {
+  backgroundColor: "var(--prismiq-color-surface-hover)"
+};
 function parseValue(value, dataType) {
   if (!value) return void 0;
   const type = dataType?.toLowerCase() ?? "";
@@ -4863,15 +5146,270 @@ function getInputType(dataType) {
   }
   return "text";
 }
+function isMultiValueOperator(op) {
+  return op === "in_" || op === "not_in" || op === "in_or_null";
+}
+var tagContainerStyles = {
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "4px",
+  padding: "4px 8px",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-sm)",
+  backgroundColor: "var(--prismiq-color-background)",
+  minHeight: "32px",
+  cursor: "text",
+  flex: 1
+};
+var tagStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "1px 6px",
+  backgroundColor: "var(--prismiq-color-surface)",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-sm)",
+  fontSize: "var(--prismiq-font-size-sm)",
+  lineHeight: "20px",
+  whiteSpace: "nowrap"
+};
+var tagRemoveStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "14px",
+  height: "14px",
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  padding: 0,
+  fontSize: "12px",
+  lineHeight: 1,
+  color: "var(--prismiq-color-text-muted)",
+  borderRadius: "50%"
+};
+var tagInputStyles = {
+  border: "none",
+  outline: "none",
+  background: "none",
+  flex: 1,
+  minWidth: "80px",
+  fontSize: "var(--prismiq-font-size-sm)",
+  padding: "2px 0",
+  color: "var(--prismiq-color-text)"
+};
+var multiOptionCheckStyles = {
+  marginRight: "6px",
+  color: "var(--prismiq-color-primary)",
+  fontWeight: 700,
+  fontSize: "12px"
+};
 function FilterValueInput({
   operator,
   value,
   onChange,
   dataType,
   disabled = false,
-  className
+  className,
+  tableName,
+  columnName
 }) {
+  const { client } = useAnalytics();
   const inputType = getInputType(dataType);
+  const isMulti = isMultiValueOperator(operator);
+  const [sampleValues, setSampleValues] = useState([]);
+  const [isLoadingValues, setIsLoadingValues] = useState(false);
+  const fetchedRef = useRef(null);
+  const fetchSeqRef = useRef(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const inputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const containerRef = useRef(null);
+  const [multiInputText, setMultiInputText] = useState("");
+  useEffect(() => {
+    setMultiInputText("");
+  }, [operator]);
+  useEffect(() => {
+    if (!tableName || !columnName || !client) {
+      setSampleValues([]);
+      setIsLoadingValues(false);
+      fetchedRef.current = null;
+      return;
+    }
+    const fetchKey = `${tableName}.${columnName}`;
+    if (fetchedRef.current === fetchKey) return;
+    const fetchSeq = ++fetchSeqRef.current;
+    const fetchSamples = async () => {
+      setIsLoadingValues(true);
+      try {
+        const values = await client.getColumnSample(tableName, columnName, 100);
+        const stringValues = values.filter((v) => v !== null && v !== void 0).map((v) => String(v));
+        if (fetchSeqRef.current !== fetchSeq) return;
+        setSampleValues(stringValues);
+        fetchedRef.current = fetchKey;
+      } catch (err) {
+        if (fetchSeqRef.current !== fetchSeq) return;
+        console.error("Failed to fetch sample values:", err);
+        setSampleValues([]);
+        fetchedRef.current = null;
+      } finally {
+        if (fetchSeqRef.current === fetchSeq) {
+          setIsLoadingValues(false);
+        }
+      }
+    };
+    fetchSamples();
+  }, [client, tableName, columnName]);
+  const selectedValues = isMulti && Array.isArray(value) ? value.filter((v) => v !== null && v !== void 0).map((v) => String(v)) : [];
+  const currentValueStr = isMulti ? multiInputText : formatValue(value);
+  const filteredOptions = isMulti ? sampleValues.filter(
+    (v) => v.toLowerCase().includes(multiInputText.toLowerCase()) && !selectedValues.includes(v)
+  ) : sampleValues.filter(
+    (v) => v.toLowerCase().includes(currentValueStr.toLowerCase())
+  );
+  const updateDropdownPosition = useCallback(() => {
+    const el = isMulti ? containerRef.current : inputRef.current;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width
+      });
+    }
+  }, [isMulti]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isInsideContainer = containerRef.current?.contains(target);
+      const isInsideDropdown = dropdownRef.current?.contains(target);
+      if (!isInsideContainer && !isInsideDropdown) {
+        setIsDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleInputFocus = useCallback(() => {
+    if (sampleValues.length > 0) {
+      updateDropdownPosition();
+      setIsDropdownOpen(true);
+      setHighlightedIndex(-1);
+    }
+  }, [sampleValues.length, updateDropdownPosition]);
+  const handleOptionSelect = useCallback(
+    (optionValue) => {
+      onChange(parseValue(optionValue, dataType));
+      setIsDropdownOpen(false);
+      inputRef.current?.blur();
+    },
+    [onChange, dataType]
+  );
+  const addMultiValue = useCallback(
+    (val) => {
+      const trimmed = val.trim();
+      if (!trimmed) return;
+      if (selectedValues.includes(trimmed)) return;
+      const newValues = [...selectedValues, trimmed].map((v) => parseValue(v, dataType));
+      onChange(newValues);
+      setMultiInputText("");
+    },
+    [selectedValues, onChange, dataType]
+  );
+  const removeMultiValue = useCallback(
+    (val) => {
+      const newValues = selectedValues.filter((v) => v !== val).map((v) => parseValue(v, dataType));
+      onChange(newValues.length > 0 ? newValues : []);
+    },
+    [selectedValues, onChange, dataType]
+  );
+  const handleMultiOptionSelect = useCallback(
+    (optionValue) => {
+      if (selectedValues.includes(optionValue)) {
+        removeMultiValue(optionValue);
+      } else {
+        addMultiValue(optionValue);
+      }
+      setMultiInputText("");
+      updateDropdownPosition();
+      inputRef.current?.focus();
+    },
+    [selectedValues, addMultiValue, removeMultiValue, updateDropdownPosition]
+  );
+  const handleMultiInputKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Backspace" && multiInputText === "" && selectedValues.length > 0) {
+        const lastVal = selectedValues[selectedValues.length - 1];
+        if (lastVal !== void 0) removeMultiValue(lastVal);
+        return;
+      }
+      if (isDropdownOpen && filteredOptions.length > 0) {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+            return;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+            return;
+          case "Enter":
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+              handleMultiOptionSelect(filteredOptions[highlightedIndex]);
+            } else if (multiInputText.trim()) {
+              addMultiValue(multiInputText);
+            }
+            return;
+          case "Escape":
+            setIsDropdownOpen(false);
+            return;
+        }
+      }
+      if (e.key === "," || e.key === "Enter") {
+        e.preventDefault();
+        addMultiValue(multiInputText);
+      }
+    },
+    [
+      multiInputText,
+      selectedValues,
+      isDropdownOpen,
+      filteredOptions,
+      highlightedIndex,
+      addMultiValue,
+      removeMultiValue,
+      handleMultiOptionSelect
+    ]
+  );
+  const handleSingleKeyDown = useCallback(
+    (e) => {
+      if (!isDropdownOpen || filteredOptions.length === 0) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+            handleOptionSelect(filteredOptions[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          setIsDropdownOpen(false);
+          break;
+      }
+    },
+    [isDropdownOpen, filteredOptions, highlightedIndex, handleOptionSelect]
+  );
   if (operator === "is_null" || operator === "is_not_null") {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
@@ -4911,36 +5449,163 @@ function FilterValueInput({
       )
     ] });
   }
-  if (operator === "in_" || operator === "not_in" || operator === "in_or_null") {
-    const handleMultiChange = (e) => {
-      const values = e.target.value.split(",").map((v) => v.trim()).filter(Boolean).map((v) => parseValue(v, dataType));
-      onChange(values);
-    };
-    return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsx(
+  if (isMulti) {
+    return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, style: comboboxContainerStyles, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-testid": "filter-tag-container",
+          style: tagContainerStyles,
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            selectedValues.map((val) => /* @__PURE__ */ jsxs("span", { "data-testid": `filter-tag-${val}`, style: tagStyles, children: [
+              val,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": `filter-tag-remove-${val}`,
+                  style: tagRemoveStyles,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeMultiValue(val);
+                  },
+                  tabIndex: -1,
+                  children: "\xD7"
+                }
+              )
+            ] }, val)),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                "data-testid": "filter-multi-input",
+                type: "text",
+                placeholder: selectedValues.length === 0 ? isLoadingValues ? "Loading..." : "Type or select values" : "",
+                value: multiInputText,
+                disabled: disabled || isLoadingValues,
+                onChange: (e) => {
+                  setMultiInputText(e.target.value);
+                  if (sampleValues.length > 0) {
+                    updateDropdownPosition();
+                    setIsDropdownOpen(true);
+                    setHighlightedIndex(-1);
+                  }
+                },
+                onFocus: handleInputFocus,
+                onKeyDown: handleMultiInputKeyDown,
+                style: tagInputStyles
+              }
+            )
+          ]
+        }
+      ),
+      selectedValues.length === 0 && !multiInputText && /* @__PURE__ */ jsxs("div", { "data-testid": "filter-multi-hint", style: {
+        fontSize: "11px",
+        color: "var(--prismiq-color-text-muted)",
+        marginTop: "2px",
+        paddingLeft: "2px"
+      }, children: [
+        "Press ",
+        /* @__PURE__ */ jsx("kbd", { style: { padding: "0 3px", border: "1px solid var(--prismiq-color-border)", borderRadius: "3px", fontSize: "10px" }, children: "," }),
+        " or ",
+        /* @__PURE__ */ jsx("kbd", { style: { padding: "0 3px", border: "1px solid var(--prismiq-color-border)", borderRadius: "3px", fontSize: "10px" }, children: "Enter" }),
+        " to add values"
+      ] }),
+      isDropdownOpen && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: dropdownRef,
+            "data-testid": "filter-dropdown",
+            style: {
+              ...dropdownStyles2,
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+              width: dropdownPosition.width
+            },
+            children: filteredOptions.map((optionValue, index) => {
+              const isSelected = selectedValues.includes(optionValue);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": `filter-option-${index}`,
+                  onClick: () => handleMultiOptionSelect(optionValue),
+                  onMouseEnter: () => setHighlightedIndex(index),
+                  style: {
+                    ...optionStyles2,
+                    ...index === highlightedIndex ? optionHoverStyles2 : {},
+                    ...isSelected ? { backgroundColor: "var(--prismiq-color-surface)", fontWeight: 500 } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: multiOptionCheckStyles, children: isSelected ? "\u2713" : "\u2003" }),
+                    optionValue
+                  ]
+                },
+                `${optionValue}-${index}`
+              );
+            })
+          }
+        ),
+        document.body
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, style: comboboxContainerStyles, children: [
+    /* @__PURE__ */ jsx(
       Input,
       {
+        ref: inputRef,
+        "data-testid": "filter-single-input",
         inputSize: "sm",
-        type: "text",
-        placeholder: "value1, value2, ...",
-        value: formatValue(value),
-        disabled,
-        onChange: handleMultiChange,
-        style: { flex: 1 }
+        type: inputType,
+        placeholder: isLoadingValues ? "Loading..." : "Type or select value",
+        value: currentValueStr,
+        disabled: disabled || isLoadingValues,
+        onChange: (e) => {
+          onChange(parseValue(e.target.value, dataType));
+          if (sampleValues.length > 0) {
+            updateDropdownPosition();
+            setIsDropdownOpen(true);
+          }
+        },
+        onFocus: handleInputFocus,
+        onKeyDown: handleSingleKeyDown,
+        style: { width: "100%" }
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsx(
-    Input,
-    {
-      inputSize: "sm",
-      type: inputType,
-      placeholder: "Value",
-      value: formatValue(value),
-      disabled,
-      onChange: (e) => onChange(parseValue(e.target.value, dataType)),
-      style: { flex: 1 }
-    }
-  ) });
+    ),
+    isDropdownOpen && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          "data-testid": "filter-dropdown",
+          style: {
+            ...dropdownStyles2,
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+            width: dropdownPosition.width
+          },
+          children: filteredOptions.map((optionValue, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": `filter-option-${index}`,
+              onClick: () => handleOptionSelect(optionValue),
+              onMouseEnter: () => setHighlightedIndex(index),
+              style: {
+                ...optionStyles2,
+                ...index === highlightedIndex ? optionHoverStyles2 : {},
+                ...optionValue === currentValueStr ? { backgroundColor: "var(--prismiq-color-surface)", fontWeight: 500 } : {}
+              },
+              children: optionValue
+            },
+            `${optionValue}-${index}`
+          ))
+        }
+      ),
+      document.body
+    )
+  ] }) });
 }
 var rowStyles = {
   display: "flex",
@@ -5033,13 +5698,16 @@ function FilterRow({
     });
     return options;
   }, [tables, schema]);
+  const currentTable = useMemo(
+    () => tables.find((t) => t.id === filter.table_id),
+    [tables, filter.table_id]
+  );
   const currentColumnSchema = useMemo(() => {
-    const table = tables.find((t) => t.id === filter.table_id);
-    if (!table) return void 0;
-    const tableSchema = schema.tables.find((t) => t.name === table.name);
+    if (!currentTable) return void 0;
+    const tableSchema = schema.tables.find((t) => t.name === currentTable.name);
     if (!tableSchema) return void 0;
     return tableSchema.columns.find((c) => c.name === filter.column);
-  }, [tables, schema, filter.table_id, filter.column]);
+  }, [currentTable, schema, filter.column]);
   const operatorOptions = useMemo(
     () => getOperatorsForType(currentColumnSchema?.data_type),
     [currentColumnSchema]
@@ -5100,7 +5768,9 @@ function FilterRow({
         operator: filter.operator,
         value: filter.value,
         onChange: handleValueChange,
-        dataType: currentColumnSchema?.data_type
+        dataType: currentColumnSchema?.data_type,
+        tableName: currentTable?.name,
+        columnName: filter.column
       }
     ) }),
     /* @__PURE__ */ jsx(
@@ -8416,7 +9086,14 @@ function CustomSQLEditor({
   style
 }) {
   const [sql, setSql] = useState(initialSql);
+  const prevInitialSqlRef = useRef(initialSql);
   const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    if (initialSql !== prevInitialSqlRef.current) {
+      prevInitialSqlRef.current = initialSql;
+      setSql(initialSql);
+    }
+  }, [initialSql]);
   const [executeEnabled, setExecuteEnabled] = useState(false);
   const [lastExecutedSql, setLastExecutedSql] = useState(null);
   const {
@@ -8462,7 +9139,7 @@ function CustomSQLEditor({
     ...buttonStyles,
     ...canExecute ? {} : buttonDisabledStyles
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...containerStyles17, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...containerStyles17, ...style }, "data-testid": "custom-sql-editor", children: [
     /* @__PURE__ */ jsxs("div", { style: editorWrapperStyles, children: [
       /* @__PURE__ */ jsx(
         "textarea",
@@ -8476,7 +9153,8 @@ function CustomSQLEditor({
           style: mergedTextareaStyles,
           spellCheck: false,
           autoComplete: "off",
-          autoCapitalize: "off"
+          autoCapitalize: "off",
+          "data-testid": "custom-sql-textarea"
         }
       ),
       validation && !validation.valid && /* @__PURE__ */ jsxs("div", { style: validationErrorStyles, children: [
@@ -8500,6 +9178,7 @@ function CustomSQLEditor({
             disabled: !canExecute,
             style: mergedButtonStyles,
             type: "button",
+            "data-testid": "custom-sql-run-button",
             children: [
               isLoading ? "Executing..." : "Run Query",
               /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", opacity: 0.7 }, children: "(Cmd+Enter)" })
@@ -8541,13 +9220,14 @@ function TableSelector({
   className
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const availableTableOptions = useMemo(() => {
     const selectedNames = new Set(tables.map((t) => t.name));
     return schema.tables.filter((t) => !selectedNames.has(t.name)).map((t) => ({
       value: t.name,
-      label: `${t.name} (${t.columns.length} cols)`
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables, tables]);
+  }, [schema.tables, tables, getDisplayName]);
   const suggestedTables = useMemo(() => {
     if (!showRelationships || tables.length === 0) return [];
     const selectedNames = new Set(tables.map((t) => t.name));
@@ -8649,7 +9329,7 @@ function TableSelector({
   return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
     tables.length > 0 && /* @__PURE__ */ jsx("div", { style: selectedTablesStyle, children: tables.map((table, index) => /* @__PURE__ */ jsxs("div", { style: tableChipStyle, children: [
       /* @__PURE__ */ jsx(Icon, { name: "table", size: 14 }),
-      /* @__PURE__ */ jsx("span", { children: table.name }),
+      /* @__PURE__ */ jsx("span", { children: getDisplayName(table.name) }),
       index === 0 && /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "default", children: "primary" }),
       tables.length > 1 && /* @__PURE__ */ jsx(
         "button",
@@ -8657,7 +9337,7 @@ function TableSelector({
           type: "button",
           style: removeButtonStyle,
           onClick: () => handleRemoveTable(table.id),
-          "aria-label": `Remove ${table.name}`,
+          "aria-label": `Remove ${getDisplayName(table.name)}`,
           children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
         }
       )
@@ -8691,7 +9371,7 @@ function TableSelector({
             title: suggestion.relationship,
             children: [
               /* @__PURE__ */ jsx(Icon, { name: "plus", size: 10 }),
-              suggestion.table
+              getDisplayName(suggestion.table)
             ]
           },
           suggestion.table
@@ -8700,7 +9380,258 @@ 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 } = useTheme();
+  const isUser = message.role === "user";
+  const parts = 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__ */ jsx("div", { style: bubbleStyle, children: parts.map((part, i) => {
+    if (part.type === "sql") {
+      return /* @__PURE__ */ jsxs("div", { "data-testid": `chat-sql-${i}`, children: [
+        /* @__PURE__ */ jsx("pre", { style: sqlBlockStyle, children: /* @__PURE__ */ jsx("code", { children: part.value }) }),
+        onApplySql && /* @__PURE__ */ jsx("div", { style: applyBtnContainerStyle, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onApplySql(part.value),
+            "data-testid": `apply-sql-btn-${i}`,
+            children: "Apply to Editor"
+          }
+        ) })
+      ] }, i);
+    }
+    return /* @__PURE__ */ jsx("span", { children: part.value }, i);
+  }) });
+}
+function ChatPanel({ currentSql, onApplySql }) {
+  const { theme } = useTheme();
+  const {
+    messages,
+    isStreaming,
+    streamingContent,
+    suggestedSql,
+    sendMessage,
+    clearHistory,
+    error
+  } = useLLMChat();
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streamingContent]);
+  const handleSend = useCallback(() => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    setInput("");
+    void sendMessage(trimmed, currentSql);
+  }, [input, currentSql, sendMessage]);
+  const handleKeyDown = 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__ */ jsxs("div", { style: containerStyle, className: "prismiq-chat-panel", "data-testid": "chat-panel-root", children: [
+    /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: headerTitleStyle, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "edit", size: 16 }),
+        /* @__PURE__ */ jsx("span", { children: "SQL Assistant" })
+      ] }),
+      messages.length > 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: clearHistory, "data-testid": "chat-clear", children: "Clear" })
+    ] }),
+    messages.length === 0 && !isStreaming ? /* @__PURE__ */ 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__ */ jsxs("div", { style: messagesStyle, "data-testid": "chat-messages", children: [
+      messages.map((msg, i) => /* @__PURE__ */ jsx(ChatBubble, { message: msg, onApplySql }, i)),
+      isStreaming && streamingContent && /* @__PURE__ */ jsxs("div", { style: streamingStyle, "data-testid": "chat-streaming", children: [
+        streamingContent,
+        "\u258D"
+      ] }),
+      isStreaming && !streamingContent && /* @__PURE__ */ jsx("div", { style: streamingStyle, "data-testid": "chat-streaming", children: "Thinking..." }),
+      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { style: errorStyle, "data-testid": "chat-error", children: error }),
+    suggestedSql && !isStreaming && /* @__PURE__ */ jsx("div", { style: suggestedSqlStyle, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: () => onApplySql(suggestedSql), "data-testid": "chat-apply-sql", children: "Apply SQL to Editor" }) }),
+    /* @__PURE__ */ jsxs("div", { style: inputAreaStyle, children: [
+      /* @__PURE__ */ 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__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "sm",
+          onClick: handleSend,
+          disabled: isStreaming || !input.trim(),
+          "data-testid": "chat-send",
+          children: /* @__PURE__ */ jsx(Icon, { name: "play", size: 16 })
+        }
+      )
+    ] })
+  ] });
+}
 
-export { AggregationPicker, AnalyticsProvider, AutoSaveIndicator, Badge, Button, CalculatedFieldBuilder, Checkbox, CollapsibleSection, ColorPaletteSelector, ColumnNode, ColumnSelector, CrossFilterProvider, CustomSQLEditor, Dialog, DialogFooter, DialogHeader, Dropdown, DropdownItem, DropdownSeparator, EmptyDashboard, EmptyState, ErrorBoundary, ErrorFallback, ExpressionEditor, FilterBuilder, FilterRow, FilterValueInput, Icon, Input, JoinBuilder, JoinRow, NoData, NoResults, Pagination, PrismiqClient, PrismiqError, QueryBuilder, QueryBuilderToolbar, QueryPreview, ResultsTable, SavedQueryPicker, SchemaExplorer, Select, SelectedColumn, Skeleton, SkeletonChart, SkeletonMetricCard, SkeletonTable, SkeletonText, SortBuilder, SortRow, TableCell, TableHeader, TableNode, TableRow, TableSelector, TimeSeriesConfig, Tooltip, WidgetErrorBoundary, useAnalytics, useAnalyticsCallbacks, useChartData, useCrossFilterOptional, useCustomSQL, useDashboard, useDashboardMutations, useDashboardPinStatus, useDashboards, useDebouncedLayoutSave, usePinMutations, usePinnedDashboards, useQuery, useSavedQueries, useSchema };
-//# sourceMappingURL=chunk-UPYINBZU.js.map
-//# sourceMappingURL=chunk-UPYINBZU.js.map
+export { AggregationPicker, AnalyticsProvider, AutoSaveIndicator, Badge, Button, CalculatedFieldBuilder, ChatBubble, ChatPanel, Checkbox, CollapsibleSection, ColorPaletteSelector, ColumnNode, ColumnSelector, CrossFilterProvider, CustomSQLEditor, Dialog, DialogFooter, DialogHeader, Dropdown, DropdownItem, DropdownSeparator, EmptyDashboard, EmptyState, ErrorBoundary, ErrorFallback, ExpressionEditor, FilterBuilder, FilterRow, FilterValueInput, Icon, Input, JoinBuilder, JoinRow, NoData, NoResults, Pagination, PrismiqClient, PrismiqError, QueryBuilder, QueryBuilderToolbar, QueryPreview, ResultsTable, SavedQueryPicker, SchemaExplorer, Select, SelectedColumn, Skeleton, SkeletonChart, SkeletonMetricCard, SkeletonTable, SkeletonText, SortBuilder, SortRow, TableCell, TableHeader, TableNode, TableRow, TableSelector, TimeSeriesConfig, Tooltip, WidgetErrorBoundary, useAnalytics, useAnalyticsCallbacks, useChartData, useCrossFilterOptional, useCustomSQL, useDashboard, useDashboardMutations, useDashboardPinStatus, useDashboards, useDebouncedLayoutSave, useLLMChat, useLLMStatus, usePinMutations, usePinnedDashboards, useQuery, useSavedQueries, useSchema };
+//# sourceMappingURL=chunk-GELI7MDZ.js.map
+//# sourceMappingURL=chunk-GELI7MDZ.js.map