dp-widgets-framework 1.5.5 → 1.5.7

package/dist/index.esm.js

@@ -39327,6 +39327,23 @@ const parseAndUpdateFilterState = (apiResponse, setFilterState) => {
                     if (filterData.agent_message) {
                         newFilterState.agent_message = filterData.agent_message;
                     }
+                    // Handle confirmation state
+                    if (filterData.status) {
+                        newFilterState.status = filterData.status;
+                    }
+                    if (filterData.ambiguous_columns) {
+                        newFilterState.ambiguous_columns = filterData.ambiguous_columns;
+                    }
+                    if (filterData.message) {
+                        newFilterState.message = filterData.message;
+                    }
+                    if (filterData.filter_columns) {
+                        newFilterState.filter_columns = filterData.filter_columns;
+                    }
+                    if (filterData.resolved_columns) {
+                        newFilterState.resolved_columns = filterData.resolved_columns;
+                    }
+                    console.log('[parseAndUpdateFilterState] Updated filter state:', newFilterState);
                     return newFilterState;
                 });
             }
@@ -39350,6 +39367,25 @@ const convertFilterStateToGroups = (filterState) => {
         })),
     }));
 };
+// Component for handling table selection confirmation
+function TableSelectionConfirmation({ ambiguousColumns, resolvedColumns, message, onConfirm, onCancel, }) {
+    const [selectedTables, setSelectedTables] = useState({});
+    useEffect(() => {
+        // Initialize with first option for each column
+        const initial = {};
+        ambiguousColumns.forEach((col) => {
+            initial[col.column] = col.tables[0];
+        });
+        setSelectedTables(initial);
+    }, [ambiguousColumns]);
+    const handleSubmit = () => {
+        onConfirm(selectedTables);
+    };
+    const allSelected = ambiguousColumns.every((col) => selectedTables[col.column]);
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full p-4 bg-white", children: [jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "Table Selection Required" }), message && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 mb-4 whitespace-pre-line", children: message }))] }), resolvedColumns && resolvedColumns.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-green-800 mb-2", children: "Already Resolved Columns:" }), jsxRuntimeExports.jsx("div", { className: "space-y-1", children: resolvedColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "text-sm text-green-700", children: [jsxRuntimeExports.jsx("span", { className: "font-medium", children: col.column }), " \u2192 ", jsxRuntimeExports.jsx("span", { className: "text-green-600", children: col.table_name })] }, col.column))) })] })), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 mb-4", children: jsxRuntimeExports.jsx("div", { className: "space-y-4", children: ambiguousColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 rounded-lg p-3", children: [jsxRuntimeExports.jsx("label", { className: "block mb-2", children: jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Column: ", jsxRuntimeExports.jsx("span", { className: "text-primary-600", children: col.column })] }) }), jsxRuntimeExports.jsxs("select", { value: selectedTables[col.column] || '', onChange: (e) => {
+                                    setSelectedTables((prev) => (Object.assign(Object.assign({}, prev), { [col.column]: e.target.value })));
+                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
+}
 function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
     const hasCalledRef = useRef(false);
     const [expandedGroups, setExpandedGroups] = useState({});
@@ -39458,20 +39494,18 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                             }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: () => {
                                 // Convert option IDs back to original label values
                                 const filtersWithLabels = {};
-                                Object.entries(selectedFilters).forEach(([groupId, optionIds]) => {
-                                    const group = filterGroups.find(g => g.id === groupId);
-                                    if (group) {
-                                        filtersWithLabels[groupId] = optionIds.map(optionId => {
-                                            const option = group.options.find(opt => opt.id === optionId);
-                                            return (option === null || option === void 0 ? void 0 : option.label) || optionId;
-                                        });
-                                    }
+                                filterGroups.forEach((group) => {
+                                    const optionIds = selectedFilters[group.id] || [];
+                                    filtersWithLabels[group.id] = optionIds.map(optionId => {
+                                        const option = group.options.find(opt => opt.id === optionId);
+                                        return (option === null || option === void 0 ? void 0 : option.label) || optionId;
+                                    });
                                 });
                                 onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
                             }, disabled: isEditing, className: `${isEditing ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: "Apply Filters" })] }) })] }));
 }
 function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
     const widget_data = (_b = widget.widget_data) === null || _b === void 0 ? void 0 : _b.column_values;
     const { setThreadId } = useCopilotContext();
@@ -39575,11 +39609,94 @@ function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, w
             window.removeEventListener('clearFilterState', handleClearFilterState);
         };
     }, [widget.id, appendMessage, setFilterState, startLoadingTimeout]);
+    // Handle confirmation submission
+    const handleConfirmation = useCallback(async (tableMapping) => {
+        var _a, _b, _c;
+        console.log('[FiltersWidget] handleConfirmation called with:', {
+            tableMapping,
+            currentFilterState: filterState,
+            widgetQuery: (_a = widget.config) === null || _a === void 0 ? void 0 : _a.query
+        });
+        // Format table mapping as a JSON string for the agent
+        const tableMappingJson = JSON.stringify(tableMapping);
+        // Get filter columns - try multiple sources
+        let filterColumns = filterState.filter_columns || '';
+        // Fallback: extract from the original query if not in state
+        if (!filterColumns && ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.query)) {
+            const filterColumnsMatch = widget.config.query.match(/(?:filter by|filter)\s+(.+)/i);
+            filterColumns = filterColumnsMatch ? filterColumnsMatch[1].trim() : '';
+        }
+        // Fallback: extract from ambiguous_columns if available
+        if (!filterColumns && filterState.ambiguous_columns) {
+            filterColumns = filterState.ambiguous_columns.map(col => col.column).join(',');
+        }
+        if (!filterColumns) {
+            console.error('[FiltersWidget] No filter_columns found in state, query, or ambiguous_columns', {
+                filterState,
+                query: (_c = widget.config) === null || _c === void 0 ? void 0 : _c.query
+            });
+            return;
+        }
+        console.log('[FiltersWidget] Using filter columns:', filterColumns);
+        // Send a very explicit message for the agent to parse
+        const message = `User confirmed table selection. Call get_tables_columns_values with filter_columns="${filterColumns}" and table_mapping='${tableMappingJson}'`;
+        console.log('[FiltersWidget] Sending table mapping confirmation:', {
+            message,
+            tableMapping,
+            filterColumns,
+            tableMappingJson
+        });
+        // Clear the confirmation state completely, including agent_message
+        const newState = {
+            dashboard_id: datasetId || "",
+            status: undefined, // Don't set to 'processing' as it might block polling
+            ambiguous_columns: undefined,
+            message: undefined,
+            agent_message: undefined, // Clear agent_message to allow polling
+            column_values: [], // Clear column values to show loading
+            filter_columns: undefined, // Clear the stored filter columns
+        };
+        console.log('[FiltersWidget] Clearing confirmation state:', newState);
+        setFilterState(newState);
+        setAgentState(newState);
+        // Send the confirmation message
+        appendMessage(new TextMessage({
+            content: message,
+            role: Role.User,
+        }));
+        // Reset counters and start polling
+        setApiCallCount(0);
+        setHasTimeoutError(false);
+        console.log('[FiltersWidget] Starting polling after confirmation');
+        startLoadingTimeout();
+    }, [filterState.filter_columns, filterState.ambiguous_columns, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.query, datasetId, appendMessage, setFilterState, setAgentState, startLoadingTimeout, setApiCallCount, setHasTimeoutError]);
+    const handleCancelConfirmation = useCallback(() => {
+        // Clear the confirmation state
+        setFilterState((prev) => (Object.assign(Object.assign({}, prev), { status: undefined, ambiguous_columns: undefined, message: undefined })));
+    }, [setFilterState]);
     // Convert filter state to filter groups
     const filterGroups = convertFilterStateToGroups(filterState);
-    return (jsxRuntimeExports.jsx("div", { className: cn("flex flex-col h-full"), children: (filterState === null || filterState === void 0 ? void 0 : filterState.agent_message) &&
-            (!((_e = filterState.column_values) === null || _e === void 0 ? void 0 : _e.length))
-            ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: filterState.agent_message }) }) })) : (jsxRuntimeExports.jsx(FiltersContent, { filterGroups: filterGroups, showHeader: showHeader, onFilterChange: onFilterChange, widget: widget, appendMessage: appendMessage, query: (_f = widget.config) === null || _f === void 0 ? void 0 : _f.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, filterState: filterState, onApplyFilters: onApplyFilters, isEditing: isEditing })) }));
+    // Check if we're waiting for confirmation
+    const isWaitingForConfirmation = filterState.status === 'waiting_for_confirmation' &&
+        filterState.ambiguous_columns &&
+        filterState.ambiguous_columns.length > 0;
+    console.log('[CopilotKitFilters] Filter state check:', {
+        status: filterState.status,
+        hasAmbiguousColumns: !!filterState.ambiguous_columns,
+        ambiguousColumnsLength: ((_f = filterState.ambiguous_columns) === null || _f === void 0 ? void 0 : _f.length) || 0,
+        isWaitingForConfirmation,
+        fullFilterState: filterState
+    });
+    return (jsxRuntimeExports.jsx("div", { className: cn("flex flex-col h-full"), children: isWaitingForConfirmation ? (
+        // Show table selection UI when waiting for user to select tables
+        jsxRuntimeExports.jsx(TableSelectionConfirmation, { ambiguousColumns: filterState.ambiguous_columns || [], resolvedColumns: filterState.resolved_columns, message: filterState.message || filterState.agent_message, onConfirm: handleConfirmation, onCancel: handleCancelConfirmation })) : (filterState === null || filterState === void 0 ? void 0 : filterState.agent_message) &&
+            (!((_g = filterState.column_values) === null || _g === void 0 ? void 0 : _g.length)) &&
+            filterState.status !== 'waiting_for_confirmation'
+            ? (
+            // Show agent message (errors, warnings, etc.)
+            jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 whitespace-pre-line", children: filterState.agent_message }) }) })) : (
+        // Show normal filter UI
+        jsxRuntimeExports.jsx(FiltersContent, { filterGroups: filterGroups, showHeader: showHeader, onFilterChange: onFilterChange, widget: widget, appendMessage: appendMessage, query: (_h = widget.config) === null || _h === void 0 ? void 0 : _h.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, filterState: filterState, onApplyFilters: onApplyFilters, isEditing: isEditing })) }));
 }
 function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChange, widgetBackendUrl, onResetReady, datasetId, onApplyFilters, isEditing = false, }) {
     var _a;

package/dist/index.js

@@ -39354,6 +39354,23 @@ const parseAndUpdateFilterState = (apiResponse, setFilterState) => {
                     if (filterData.agent_message) {
                         newFilterState.agent_message = filterData.agent_message;
                     }
+                    // Handle confirmation state
+                    if (filterData.status) {
+                        newFilterState.status = filterData.status;
+                    }
+                    if (filterData.ambiguous_columns) {
+                        newFilterState.ambiguous_columns = filterData.ambiguous_columns;
+                    }
+                    if (filterData.message) {
+                        newFilterState.message = filterData.message;
+                    }
+                    if (filterData.filter_columns) {
+                        newFilterState.filter_columns = filterData.filter_columns;
+                    }
+                    if (filterData.resolved_columns) {
+                        newFilterState.resolved_columns = filterData.resolved_columns;
+                    }
+                    console.log('[parseAndUpdateFilterState] Updated filter state:', newFilterState);
                     return newFilterState;
                 });
             }
@@ -39377,6 +39394,25 @@ const convertFilterStateToGroups = (filterState) => {
         })),
     }));
 };
+// Component for handling table selection confirmation
+function TableSelectionConfirmation({ ambiguousColumns, resolvedColumns, message, onConfirm, onCancel, }) {
+    const [selectedTables, setSelectedTables] = React.useState({});
+    React.useEffect(() => {
+        // Initialize with first option for each column
+        const initial = {};
+        ambiguousColumns.forEach((col) => {
+            initial[col.column] = col.tables[0];
+        });
+        setSelectedTables(initial);
+    }, [ambiguousColumns]);
+    const handleSubmit = () => {
+        onConfirm(selectedTables);
+    };
+    const allSelected = ambiguousColumns.every((col) => selectedTables[col.column]);
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full p-4 bg-white", children: [jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "Table Selection Required" }), message && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 mb-4 whitespace-pre-line", children: message }))] }), resolvedColumns && resolvedColumns.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-green-800 mb-2", children: "Already Resolved Columns:" }), jsxRuntimeExports.jsx("div", { className: "space-y-1", children: resolvedColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "text-sm text-green-700", children: [jsxRuntimeExports.jsx("span", { className: "font-medium", children: col.column }), " \u2192 ", jsxRuntimeExports.jsx("span", { className: "text-green-600", children: col.table_name })] }, col.column))) })] })), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 mb-4", children: jsxRuntimeExports.jsx("div", { className: "space-y-4", children: ambiguousColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 rounded-lg p-3", children: [jsxRuntimeExports.jsx("label", { className: "block mb-2", children: jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Column: ", jsxRuntimeExports.jsx("span", { className: "text-primary-600", children: col.column })] }) }), jsxRuntimeExports.jsxs("select", { value: selectedTables[col.column] || '', onChange: (e) => {
+                                    setSelectedTables((prev) => (Object.assign(Object.assign({}, prev), { [col.column]: e.target.value })));
+                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
+}
 function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
     const hasCalledRef = React.useRef(false);
     const [expandedGroups, setExpandedGroups] = React.useState({});
@@ -39485,20 +39521,18 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                             }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: () => {
                                 // Convert option IDs back to original label values
                                 const filtersWithLabels = {};
-                                Object.entries(selectedFilters).forEach(([groupId, optionIds]) => {
-                                    const group = filterGroups.find(g => g.id === groupId);
-                                    if (group) {
-                                        filtersWithLabels[groupId] = optionIds.map(optionId => {
-                                            const option = group.options.find(opt => opt.id === optionId);
-                                            return (option === null || option === void 0 ? void 0 : option.label) || optionId;
-                                        });
-                                    }
+                                filterGroups.forEach((group) => {
+                                    const optionIds = selectedFilters[group.id] || [];
+                                    filtersWithLabels[group.id] = optionIds.map(optionId => {
+                                        const option = group.options.find(opt => opt.id === optionId);
+                                        return (option === null || option === void 0 ? void 0 : option.label) || optionId;
+                                    });
                                 });
                                 onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
                             }, disabled: isEditing, className: `${isEditing ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: "Apply Filters" })] }) })] }));
 }
 function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
     const widget_data = (_b = widget.widget_data) === null || _b === void 0 ? void 0 : _b.column_values;
     const { setThreadId } = reactCore.useCopilotContext();
@@ -39602,11 +39636,94 @@ function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, w
             window.removeEventListener('clearFilterState', handleClearFilterState);
         };
     }, [widget.id, appendMessage, setFilterState, startLoadingTimeout]);
+    // Handle confirmation submission
+    const handleConfirmation = React.useCallback(async (tableMapping) => {
+        var _a, _b, _c;
+        console.log('[FiltersWidget] handleConfirmation called with:', {
+            tableMapping,
+            currentFilterState: filterState,
+            widgetQuery: (_a = widget.config) === null || _a === void 0 ? void 0 : _a.query
+        });
+        // Format table mapping as a JSON string for the agent
+        const tableMappingJson = JSON.stringify(tableMapping);
+        // Get filter columns - try multiple sources
+        let filterColumns = filterState.filter_columns || '';
+        // Fallback: extract from the original query if not in state
+        if (!filterColumns && ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.query)) {
+            const filterColumnsMatch = widget.config.query.match(/(?:filter by|filter)\s+(.+)/i);
+            filterColumns = filterColumnsMatch ? filterColumnsMatch[1].trim() : '';
+        }
+        // Fallback: extract from ambiguous_columns if available
+        if (!filterColumns && filterState.ambiguous_columns) {
+            filterColumns = filterState.ambiguous_columns.map(col => col.column).join(',');
+        }
+        if (!filterColumns) {
+            console.error('[FiltersWidget] No filter_columns found in state, query, or ambiguous_columns', {
+                filterState,
+                query: (_c = widget.config) === null || _c === void 0 ? void 0 : _c.query
+            });
+            return;
+        }
+        console.log('[FiltersWidget] Using filter columns:', filterColumns);
+        // Send a very explicit message for the agent to parse
+        const message = `User confirmed table selection. Call get_tables_columns_values with filter_columns="${filterColumns}" and table_mapping='${tableMappingJson}'`;
+        console.log('[FiltersWidget] Sending table mapping confirmation:', {
+            message,
+            tableMapping,
+            filterColumns,
+            tableMappingJson
+        });
+        // Clear the confirmation state completely, including agent_message
+        const newState = {
+            dashboard_id: datasetId || "",
+            status: undefined, // Don't set to 'processing' as it might block polling
+            ambiguous_columns: undefined,
+            message: undefined,
+            agent_message: undefined, // Clear agent_message to allow polling
+            column_values: [], // Clear column values to show loading
+            filter_columns: undefined, // Clear the stored filter columns
+        };
+        console.log('[FiltersWidget] Clearing confirmation state:', newState);
+        setFilterState(newState);
+        setAgentState(newState);
+        // Send the confirmation message
+        appendMessage(new TextMessage({
+            content: message,
+            role: Role.User,
+        }));
+        // Reset counters and start polling
+        setApiCallCount(0);
+        setHasTimeoutError(false);
+        console.log('[FiltersWidget] Starting polling after confirmation');
+        startLoadingTimeout();
+    }, [filterState.filter_columns, filterState.ambiguous_columns, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.query, datasetId, appendMessage, setFilterState, setAgentState, startLoadingTimeout, setApiCallCount, setHasTimeoutError]);
+    const handleCancelConfirmation = React.useCallback(() => {
+        // Clear the confirmation state
+        setFilterState((prev) => (Object.assign(Object.assign({}, prev), { status: undefined, ambiguous_columns: undefined, message: undefined })));
+    }, [setFilterState]);
     // Convert filter state to filter groups
     const filterGroups = convertFilterStateToGroups(filterState);
-    return (jsxRuntimeExports.jsx("div", { className: cn("flex flex-col h-full"), children: (filterState === null || filterState === void 0 ? void 0 : filterState.agent_message) &&
-            (!((_e = filterState.column_values) === null || _e === void 0 ? void 0 : _e.length))
-            ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: filterState.agent_message }) }) })) : (jsxRuntimeExports.jsx(FiltersContent, { filterGroups: filterGroups, showHeader: showHeader, onFilterChange: onFilterChange, widget: widget, appendMessage: appendMessage, query: (_f = widget.config) === null || _f === void 0 ? void 0 : _f.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, filterState: filterState, onApplyFilters: onApplyFilters, isEditing: isEditing })) }));
+    // Check if we're waiting for confirmation
+    const isWaitingForConfirmation = filterState.status === 'waiting_for_confirmation' &&
+        filterState.ambiguous_columns &&
+        filterState.ambiguous_columns.length > 0;
+    console.log('[CopilotKitFilters] Filter state check:', {
+        status: filterState.status,
+        hasAmbiguousColumns: !!filterState.ambiguous_columns,
+        ambiguousColumnsLength: ((_f = filterState.ambiguous_columns) === null || _f === void 0 ? void 0 : _f.length) || 0,
+        isWaitingForConfirmation,
+        fullFilterState: filterState
+    });
+    return (jsxRuntimeExports.jsx("div", { className: cn("flex flex-col h-full"), children: isWaitingForConfirmation ? (
+        // Show table selection UI when waiting for user to select tables
+        jsxRuntimeExports.jsx(TableSelectionConfirmation, { ambiguousColumns: filterState.ambiguous_columns || [], resolvedColumns: filterState.resolved_columns, message: filterState.message || filterState.agent_message, onConfirm: handleConfirmation, onCancel: handleCancelConfirmation })) : (filterState === null || filterState === void 0 ? void 0 : filterState.agent_message) &&
+            (!((_g = filterState.column_values) === null || _g === void 0 ? void 0 : _g.length)) &&
+            filterState.status !== 'waiting_for_confirmation'
+            ? (
+            // Show agent message (errors, warnings, etc.)
+            jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 whitespace-pre-line", children: filterState.agent_message }) }) })) : (
+        // Show normal filter UI
+        jsxRuntimeExports.jsx(FiltersContent, { filterGroups: filterGroups, showHeader: showHeader, onFilterChange: onFilterChange, widget: widget, appendMessage: appendMessage, query: (_h = widget.config) === null || _h === void 0 ? void 0 : _h.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, filterState: filterState, onApplyFilters: onApplyFilters, isEditing: isEditing })) }));
 }
 function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChange, widgetBackendUrl, onResetReady, datasetId, onApplyFilters, isEditing = false, }) {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"