impact-chatbot 2.3.60 → 2.3.61

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { cloneDeep, isEmpty as isEmpty$1, isNull, isArray as isArray$1, isObject, throttle } from 'lodash';
 import * as React from 'react';
-import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { useCallback, useState, useEffect, useRef, createContext, useContext, useMemo } from 'react';
 import { COMBINED_CROSS_DIMENSIONAL_API, BASE_API } from 'config/api';
 import axiosInstance from 'core/Utils/axios';
 import { tenantConfigApiCache } from 'core/actions/tenantConfigActions';
@@ -18,7 +18,7 @@ import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import DOMPurify from 'dompurify';
 import { setSelectedFilters, setFilterConfiguration, getFilterUserConfiguration } from 'core/actions/filterAction';
-import { setChatbotContext, setStepFormStreamData, setMinimizedStreamData, setThinkingContext, setPersistedFormValues, clearPersistedFormValues, setCurrentAgentChatId, setHierarchyKeyValue, setSavedFilterSets } from 'core/actions/smartBotActions';
+import { setChatbotContext, setStepFormStreamData, setMinimizedStreamData, setThinkingContext, setPersistedFormValues, clearPersistedFormValues, setCurrentAgentChatId, setHierarchyKeyValue, setChatbotFilterOptions, setSavedFilterSets } from 'core/actions/smartBotActions';
 import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import styled from 'styled-components';
@@ -6044,6 +6044,563 @@ var SvgReasoningIcon = function SvgReasoningIcon(props) {
   })))));
 };
 
+/**
+ * Generic hook for cross-filter cascading functionality.
+ * When a filter's value changes, downstream filters' options are re-fetched
+ * with the current selections of upstream filters included in the payload.
+ *
+ * @param {Object} config
+ * @param {Array} config.filters - Array of filter configs. Each must have at minimum:
+ *   { paramName, dimension?, column_name?, attribute_name?, display_type?, ... }
+ *   The order in this array determines the cascading hierarchy (index 0 = most upstream).
+ * @param {Function} config.fetchOptionsFn - Async function to fetch options for a filter.
+ *   Signature: (filterConfig, existingSelections, allFilters) => Promise<Array<{label, value}>>
+ *   - filterConfig: the config of the filter whose options we're fetching
+ *   - existingSelections: array of { attributeName, filterName, values, checkAll } for upstream filters
+ *   - allFilters: the full filters array (for reference/lookup)
+ * @param {Object} config.initialSelections - Optional. { paramName: value[] } to preload selections.
+ * @param {boolean} config.fetchOnMount - Whether to fetch initial options for all filters on mount. Default: true.
+ * @param {Function} config.onSelectionChange - Optional callback fired after any filter value changes.
+ *   Signature: (paramName, selectedValues, allSelections) => void
+ *
+ * @returns {Object}
+ *   - optionsMap: { paramName: Array<{label, value}> } — current available options per filter
+ *   - loadingMap: { paramName: boolean } — loading state per filter
+ *   - selectionsMap: { paramName: value[] } — current selections per filter
+ *   - onFilterChange: (paramName, selectedValues) => void — call when user changes a filter
+ *   - resetAll: () => void — reset all selections and re-fetch initial options
+ *   - resetFilter: (paramName) => void — reset a single filter and its downstream filters
+ */
+const useCrossFilterCascading = ({ filters = [], fetchOptionsFn, initialSelections = {}, fetchOnMount = true, onSelectionChange, }) => {
+    // State maps
+    const [optionsMap, setOptionsMap] = useState({});
+    const [loadingMap, setLoadingMap] = useState({});
+    const [selectionsMap, setSelectionsMap] = useState(() => {
+        // Initialize from initialSelections
+        const initial = {};
+        filters.forEach((f) => {
+            const paramName = f.paramName || f.param_name || f.column_name || f.attribute_name;
+            initial[paramName] = initialSelections[paramName] || [];
+        });
+        return initial;
+    });
+    // Refs for latest state access in async operations
+    const selectionsRef = useRef(selectionsMap);
+    const filtersRef = useRef(filters);
+    const fetchFnRef = useRef(fetchOptionsFn);
+    const mountedRef = useRef(true);
+    // Keep refs in sync
+    useEffect(() => {
+        selectionsRef.current = selectionsMap;
+    }, [selectionsMap]);
+    useEffect(() => {
+        filtersRef.current = filters;
+    }, [filters]);
+    useEffect(() => {
+        fetchFnRef.current = fetchOptionsFn;
+    }, [fetchOptionsFn]);
+    useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    /**
+     * Get the paramName from a filter config object (supports multiple naming conventions)
+     */
+    const getParamName = useCallback((filter) => {
+        return filter.paramName || filter.param_name || filter.column_name || filter.attribute_name;
+    }, []);
+    /**
+     * Get the index of a filter in the hierarchy by its paramName
+     */
+    const getFilterIndex = useCallback((paramName) => {
+        return filtersRef.current.findIndex((f) => getParamName(f) === paramName);
+    }, [getParamName]);
+    /**
+     * Get all filters that are downstream (higher index) of a given filter
+     */
+    const getDownstreamFilters = useCallback((paramName) => {
+        const index = getFilterIndex(paramName);
+        if (index === -1)
+            return [];
+        return filtersRef.current.slice(index + 1);
+    }, [getFilterIndex]);
+    /**
+     * Get all filters that are upstream (lower index) of a given filter
+     */
+    const getUpstreamFilters = useCallback((paramName) => {
+        const index = getFilterIndex(paramName);
+        if (index <= 0)
+            return [];
+        return filtersRef.current.slice(0, index);
+    }, [getFilterIndex]);
+    /**
+     * Build the existing selections payload for upstream filters (for cascading API call)
+     */
+    const buildExistingSelections = useCallback((paramName) => {
+        const upstreamFilters = getUpstreamFilters(paramName);
+        const currentSelections = selectionsRef.current;
+        return upstreamFilters
+            .filter((f) => {
+            const pName = getParamName(f);
+            const vals = currentSelections[pName];
+            return vals && vals.length > 0;
+        })
+            .map((f) => {
+            const pName = getParamName(f);
+            return {
+                filterName: f.label || f.name || pName,
+                attributeName: f.column_name || f.attribute_name || pName,
+                values: currentSelections[pName] || [],
+                checkAll: false,
+            };
+        });
+    }, [getUpstreamFilters, getParamName]);
+    /**
+     * Fetch options for a single filter
+     */
+    const fetchOptionsForFilter = useCallback(async (filterConfig) => {
+        const paramName = getParamName(filterConfig);
+        if (!fetchFnRef.current)
+            return;
+        // Set loading
+        setLoadingMap((prev) => ({ ...prev, [paramName]: true }));
+        try {
+            const existingSelections = buildExistingSelections(paramName);
+            const options = await fetchFnRef.current(filterConfig, existingSelections, filtersRef.current);
+            if (!mountedRef.current)
+                return;
+            // Check if the response contains extra options for other filters
+            const extraOptionsMap = options?.__extraOptionsMap;
+            if (extraOptionsMap && typeof extraOptionsMap === "object") {
+                // Distribute extra options to matching filters
+                setOptionsMap((prev) => {
+                    const updated = { ...prev, [paramName]: options || [] };
+                    Object.keys(extraOptionsMap).forEach((key) => {
+                        // Only populate if this key matches a known filter in our hierarchy
+                        const matchingFilter = filtersRef.current.find((f) => getParamName(f) === key || f.column_name === key || f.attribute_name === key);
+                        if (matchingFilter) {
+                            const matchParamName = getParamName(matchingFilter);
+                            updated[matchParamName] = extraOptionsMap[key];
+                        }
+                    });
+                    return updated;
+                });
+                // Clear loading for extra filters that were populated
+                setLoadingMap((prev) => {
+                    const updated = { ...prev, [paramName]: false };
+                    Object.keys(extraOptionsMap).forEach((key) => {
+                        const matchingFilter = filtersRef.current.find((f) => getParamName(f) === key || f.column_name === key || f.attribute_name === key);
+                        if (matchingFilter) {
+                            updated[getParamName(matchingFilter)] = false;
+                        }
+                    });
+                    return updated;
+                });
+            }
+            else {
+                setOptionsMap((prev) => ({ ...prev, [paramName]: options || [] }));
+                setLoadingMap((prev) => ({ ...prev, [paramName]: false }));
+            }
+        }
+        catch (error) {
+            console.error(`[useCrossFilterCascading] Error fetching options for ${paramName}:`, error);
+            if (mountedRef.current) {
+                setOptionsMap((prev) => ({ ...prev, [paramName]: [] }));
+                setLoadingMap((prev) => ({ ...prev, [paramName]: false }));
+            }
+        }
+    }, [getParamName, buildExistingSelections]);
+    /**
+     * Fetch options for multiple filters (used for initial load and cascade refresh)
+     */
+    const fetchOptionsForFilters = useCallback(async (filterConfigs) => {
+        await Promise.all(filterConfigs.map((f) => fetchOptionsForFilter(f)));
+    }, [fetchOptionsForFilter]);
+    /**
+     * Handle a filter value change — triggers cascading for downstream filters
+     */
+    const onFilterChange = useCallback((paramName, selectedValues) => {
+        const values = Array.isArray(selectedValues) ? selectedValues : [selectedValues];
+        // Update selections
+        setSelectionsMap((prev) => {
+            const updated = { ...prev, [paramName]: values };
+            selectionsRef.current = updated;
+            // Notify consumer
+            if (onSelectionChange) {
+                onSelectionChange(paramName, values, updated);
+            }
+            return updated;
+        });
+        // Only clear downstream if the filter is being emptied (user cleared the filter).
+        // When a value is being selected/changed while downstream filters already have
+        // selections, preserve them — the dropdown close handler will decide whether
+        // to refetch downstream options.
+        if (values.length === 0) {
+            const downstreamFilters = getDownstreamFilters(paramName);
+            if (downstreamFilters.length > 0) {
+                // Clear downstream selections
+                setSelectionsMap((prev) => {
+                    const updated = { ...prev };
+                    downstreamFilters.forEach((f) => {
+                        const pName = getParamName(f);
+                        updated[pName] = [];
+                    });
+                    selectionsRef.current = updated;
+                    return updated;
+                });
+                // Clear downstream options
+                const downstreamParamNames = downstreamFilters.map(getParamName);
+                setOptionsMap((prev) => {
+                    const updated = { ...prev };
+                    downstreamParamNames.forEach((pName) => {
+                        updated[pName] = [];
+                    });
+                    return updated;
+                });
+            }
+        }
+    }, [getDownstreamFilters, getParamName, fetchOptionsForFilter, onSelectionChange]);
+    /**
+     * Reset all filters — clears selections and re-fetches initial options
+     */
+    const resetAll = useCallback(() => {
+        const initial = {};
+        filtersRef.current.forEach((f) => {
+            initial[getParamName(f)] = [];
+        });
+        setSelectionsMap(initial);
+        selectionsRef.current = initial;
+        setOptionsMap({});
+        if (fetchFnRef.current && filtersRef.current.length > 0) {
+            // Fetch options for the first filter (others will cascade)
+            fetchOptionsForFilter(filtersRef.current[0]);
+        }
+    }, [getParamName, fetchOptionsForFilter]);
+    /**
+     * Reset a specific filter and all its downstream filters
+     */
+    const resetFilter = useCallback((paramName) => {
+        const downstreamFilters = getDownstreamFilters(paramName);
+        const allToReset = [paramName, ...downstreamFilters.map(getParamName)];
+        setSelectionsMap((prev) => {
+            const updated = { ...prev };
+            allToReset.forEach((pName) => {
+                updated[pName] = [];
+            });
+            selectionsRef.current = updated;
+            return updated;
+        });
+        // Re-fetch options for the reset filter itself
+        const filterConfig = filtersRef.current.find((f) => getParamName(f) === paramName);
+        if (filterConfig) {
+            fetchOptionsForFilter(filterConfig);
+        }
+    }, [getDownstreamFilters, getParamName, fetchOptionsForFilter]);
+    /**
+     * Fetch options for a specific filter on demand (e.g., when dropdown is opened)
+     */
+    const fetchOptions = useCallback((paramName) => {
+        const filterConfig = filtersRef.current.find((f) => getParamName(f) === paramName);
+        if (filterConfig) {
+            fetchOptionsForFilter(filterConfig);
+        }
+    }, [getParamName, fetchOptionsForFilter]);
+    /**
+     * Fetch options for all downstream filters of a given filter.
+     * Called when the user closes a dropdown after making a selection,
+     * so downstream filters are pre-populated before the user opens them.
+     */
+    const fetchDownstreamOptions = useCallback((paramName) => {
+        const downstreamFilters = getDownstreamFilters(paramName);
+        if (downstreamFilters.length > 0) {
+            fetchOptionsForFilters(downstreamFilters);
+        }
+    }, [getDownstreamFilters, fetchOptionsForFilters]);
+    /**
+     * Build selections payload that includes the triggering filter and all other
+     * filters that have selections (used for upstream/reverse cascading).
+     */
+    const buildAllSelections = useCallback((excludeParamName) => {
+        const currentSelections = selectionsRef.current;
+        return filtersRef.current
+            .filter((f) => {
+            const pName = getParamName(f);
+            if (pName === excludeParamName)
+                return false;
+            const vals = currentSelections[pName];
+            return vals && vals.length > 0;
+        })
+            .map((f) => {
+            const pName = getParamName(f);
+            return {
+                filterName: f.label || f.name || pName,
+                attributeName: f.column_name || f.attribute_name || pName,
+                values: currentSelections[pName] || [],
+                checkAll: false,
+            };
+        });
+    }, [getParamName]);
+    /**
+     * Fetch options for a single upstream filter using all current selections
+     * (reverse cascading — the payload includes the triggering lower filter's values).
+     */
+    const fetchUpstreamFilterOptions = useCallback(async (filterConfig) => {
+        const paramName = getParamName(filterConfig);
+        if (!fetchFnRef.current)
+            return;
+        setLoadingMap((prev) => ({ ...prev, [paramName]: true }));
+        try {
+            const existingSelections = buildAllSelections(paramName);
+            const options = await fetchFnRef.current(filterConfig, existingSelections, filtersRef.current);
+            if (!mountedRef.current)
+                return;
+            // Handle extra options from multi-key response
+            const extraOptionsMap = options?.__extraOptionsMap;
+            if (extraOptionsMap && typeof extraOptionsMap === "object") {
+                setOptionsMap((prev) => {
+                    const updated = { ...prev, [paramName]: options || [] };
+                    Object.keys(extraOptionsMap).forEach((key) => {
+                        const matchingFilter = filtersRef.current.find((f) => getParamName(f) === key || f.column_name === key || f.attribute_name === key);
+                        if (matchingFilter) {
+                            updated[getParamName(matchingFilter)] = extraOptionsMap[key];
+                        }
+                    });
+                    return updated;
+                });
+                setLoadingMap((prev) => {
+                    const updated = { ...prev, [paramName]: false };
+                    Object.keys(extraOptionsMap).forEach((key) => {
+                        const matchingFilter = filtersRef.current.find((f) => getParamName(f) === key || f.column_name === key || f.attribute_name === key);
+                        if (matchingFilter) {
+                            updated[getParamName(matchingFilter)] = false;
+                        }
+                    });
+                    return updated;
+                });
+            }
+            else {
+                setOptionsMap((prev) => ({ ...prev, [paramName]: options || [] }));
+                setLoadingMap((prev) => ({ ...prev, [paramName]: false }));
+            }
+        }
+        catch (error) {
+            console.error(`[useCrossFilterCascading] Error fetching upstream options for ${paramName}:`, error);
+            if (mountedRef.current) {
+                setOptionsMap((prev) => ({ ...prev, [paramName]: [] }));
+                setLoadingMap((prev) => ({ ...prev, [paramName]: false }));
+            }
+        }
+    }, [getParamName, buildAllSelections]);
+    /**
+     * Fetch options for all upstream filters of a given filter.
+     * Called on dropdown close to reverse-cascade — e.g., selecting Channel
+     * triggers a fetch for Brand with Channel's selection in the payload.
+     */
+    const fetchUpstreamOptions = useCallback((paramName) => {
+        const upstreamFilters = getUpstreamFilters(paramName);
+        if (upstreamFilters.length > 0) {
+            Promise.all(upstreamFilters.map((f) => fetchUpstreamFilterOptions(f)));
+        }
+    }, [getUpstreamFilters, fetchUpstreamFilterOptions]);
+    // Fetch initial options on mount
+    useEffect(() => {
+        if (fetchOnMount && filters.length > 0 && fetchFnRef.current) {
+            // Fetch options for the first filter (it has no upstream dependencies)
+            fetchOptionsForFilter(filters[0]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return {
+        optionsMap,
+        loadingMap,
+        selectionsMap,
+        onFilterChange,
+        resetAll,
+        resetFilter,
+        fetchOptions,
+        fetchDownstreamOptions,
+        fetchUpstreamOptions,
+        getParamName,
+    };
+};
+
+/**
+ * Context for cross-filter cascading.
+ * Provides cascading state and actions to child select components.
+ *
+ * Shape:
+ * {
+ *   optionsMap: { paramName: Array<{label, value}> },
+ *   loadingMap: { paramName: boolean },
+ *   selectionsMap: { paramName: value[] },
+ *   onFilterChange: (paramName, selectedValues) => void,
+ *   resetAll: () => void,
+ *   resetFilter: (paramName) => void,
+ *   fetchOptions: (paramName) => void,
+ *   getParamName: (filterConfig) => string,
+ *   isEnabled: boolean,  // flag to know if cascading is active
+ * }
+ */
+const CrossFilterContext = createContext(null);
+/**
+ * Hook to consume cross-filter cascading context.
+ * Returns null if not inside a CrossFilterProvider (graceful fallback).
+ */
+const useCrossFilterContext = () => {
+    return useContext(CrossFilterContext);
+};
+
+/**
+ * Provider component that wraps a group of select components to enable
+ * cross-filter cascading between them.
+ *
+ * @param {Object} props
+ * @param {Array} props.filters - Array of filter configs (ordered by hierarchy)
+ * @param {Function} props.fetchOptionsFn - Async function to fetch options for a filter
+ * @param {Object} props.initialSelections - Optional preloaded selections { paramName: values[] }
+ * @param {boolean} props.fetchOnMount - Whether to fetch initial options on mount (default: true)
+ * @param {Function} props.onSelectionChange - Optional callback on any filter change
+ * @param {React.ReactNode} props.children - Child components (selects) that will consume the context
+ */
+const CrossFilterProvider = ({ filters, fetchOptionsFn, initialSelections = {}, fetchOnMount = true, onSelectionChange = null, children, }) => {
+    const cascadingState = useCrossFilterCascading({
+        filters,
+        fetchOptionsFn,
+        initialSelections,
+        fetchOnMount,
+        onSelectionChange,
+    });
+    const contextValue = useMemo(() => ({
+        ...cascadingState,
+        isEnabled: true,
+    }), [cascadingState]);
+    return (jsx(CrossFilterContext.Provider, { value: contextValue, children: children }));
+};
+
+/**
+ * Adapter function that bridges the generic useCrossFilterCascading hook
+ * with the existing cross-filter API used by the chatbot.
+ *
+ * This is the `fetchOptionsFn` passed to the CrossFilterProvider.
+ *
+ * @param {Object} filterConfig - The filter config for which to fetch options
+ * @param {Array} existingSelections - Upstream filter selections
+ *   Each item: { filterName, attributeName, values, checkAll }
+ * @param {Array} allFilters - Full array of all filter configs
+ * @returns {Promise<Array<{label, value}>>} - Formatted options
+ */
+const fetchCrossFilterOptions = async (filterConfig, existingSelections = [], allFilters = []) => {
+    try {
+        const attributeName = filterConfig.column_name ||
+            filterConfig.attribute_name ||
+            filterConfig.param_name ||
+            filterConfig.paramName;
+        if (!attributeName)
+            return [];
+        const dimension = filterConfig.dimension || "product";
+        // Build filters array from existing selections (upstream filters with values)
+        const filtersArray = existingSelections.map((selection) => {
+            // Find full config for this upstream filter
+            const fullConfig = allFilters.find((f) => (f.column_name || f.attribute_name || f.param_name || f.paramName) === selection.attributeName);
+            const selAttrName = fullConfig?.column_name ||
+                fullConfig?.attribute_name ||
+                fullConfig?.param_name ||
+                fullConfig?.paramName ||
+                selection.attributeName;
+            return {
+                filter_name: selection.filterName || selAttrName,
+                filter_id: selAttrName,
+                filter_type: "cascaded",
+                dimension: fullConfig?.dimension || dimension,
+                display_type: fullConfig?.display_type || "dropdown",
+                check_configuration: selection.checkAll ? [{ checkAll: true, meta: {} }] : [],
+                is_mandatory: fullConfig?.is_mandatory || fullConfig?.isRequired || false,
+                extra: {},
+                values: selection.checkAll ? [] : (selection.values || []),
+                attribute_name: selAttrName,
+                operator: "in",
+                display_order: fullConfig?.display_order || fullConfig?.ordering || 0,
+            };
+        });
+        const payload = {
+            attributes: [
+                {
+                    attribute_name: attributeName,
+                    dimension: dimension,
+                    filter_type: "cascaded",
+                },
+            ],
+            filter_type: "cascaded",
+            filters: filtersArray,
+            is_urm_filter: true,
+            screen_name: "Chatbot",
+            application_code: 1,
+        };
+        console.log("[crossFilterAdapter] Fetching options for:", attributeName, "payload:", JSON.stringify(payload, null, 2));
+        const response = await getFilterOptions(payload)();
+        console.log("[crossFilterAdapter] Response for:", attributeName, "data:", response?.data?.data);
+        if (response?.data?.status && response?.data?.data) {
+            const responseData = response.data.data;
+            const primaryValues = responseData[attributeName];
+            // Format the primary filter's options
+            let primaryOptions = Array.isArray(primaryValues)
+                ? primaryValues.map((value) => {
+                    const stringValue = String(value);
+                    return {
+                        label: replaceSpecialCharacter(stringValue),
+                        value: stringValue,
+                    };
+                })
+                : [];
+            // Check if the response contains options for other filters (multi-key response)
+            const extraOptionsMap = {};
+            Object.keys(responseData).forEach((key) => {
+                if (key !== attributeName && Array.isArray(responseData[key])) {
+                    extraOptionsMap[key] = responseData[key].map((value) => {
+                        const stringValue = String(value);
+                        return {
+                            label: replaceSpecialCharacter(stringValue),
+                            value: stringValue,
+                        };
+                    });
+                }
+            });
+            // If primary options are empty but response has data under other keys,
+            // include ALL response keys in extraOptionsMap so the hook can distribute
+            // them to matching filters by column_name/attribute_name lookup.
+            if (primaryOptions.length === 0 && Object.keys(extraOptionsMap).length > 0) {
+                // Also check if any response key matches the paramName directly
+                // (e.g., paramName is "brand" but column_name sent was different)
+                const altKey = Object.keys(responseData).find((key) => {
+                    return Array.isArray(responseData[key]) && (key === attributeName ||
+                        key.toLowerCase() === attributeName.toLowerCase());
+                });
+                if (altKey) {
+                    primaryOptions = responseData[altKey].map((value) => {
+                        const stringValue = String(value);
+                        return {
+                            label: replaceSpecialCharacter(stringValue),
+                            value: stringValue,
+                        };
+                    });
+                    delete extraOptionsMap[altKey];
+                }
+            }
+            // Return enriched result with extra options if available
+            if (Object.keys(extraOptionsMap).length > 0) {
+                primaryOptions.__extraOptionsMap = extraOptionsMap;
+            }
+            return primaryOptions;
+        }
+        return [];
+    }
+    catch (error) {
+        console.error("[crossFilterAdapter] Error fetching options:", error);
+        return [];
+    }
+};
+
 const SliderContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
     const formKey = `${messageIndex}_${bodyText?.paramName}`;
     const { header, headerOrentiation, inputPosition, label, max, min, required, disabled, } = bodyText;
@@ -6093,6 +6650,10 @@ const SelectContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
     const heirarchyKeyValuePairs = useSelector((state) => state.smartBotReducer.heirarchyKeyValuePairs);
     const dispatch = useDispatch();
+    // Cross-filter cascading context (optional — graceful fallback when not wrapped)
+    const crossFilterCtx = useCrossFilterContext();
+    const isCascading = crossFilterCtx?.isEnabled && paramName;
+    const isMountedRef = useRef(false);
     if (isEmpty$1(bodyText))
         return null;
     const onChange = (selectedOptions) => {
@@ -6116,6 +6677,10 @@ const SelectContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
             // };
             dispatch(setChatbotContext(chatbotContext));
             dispatch(setPersistedFormValues({ [formKey]: Array.isArray(selectedOptions) ? selectedOptions : [selectedOptions] }));
+            // Notify cross-filter context if cascading is active
+            if (isCascading) {
+                crossFilterCtx.onFilterChange(paramName, Array.isArray(value) ? value : [value]);
+            }
         }
         catch (error) {
             console.error("Error in select handleChange", error);
@@ -6127,16 +6692,94 @@ const SelectContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
             setCurrentSelectedOptions([]);
         }
     }, [persistedFormValues, formKey]);
+    // When cross-filter context provides new options for this filter, update local state
     useEffect(() => {
-        allOptionsRef.current = options;
-        const initialSlice = formatSlice(options, 0, INITIAL_DISPLAY_COUNT);
-        setInitialOptions(initialSlice);
-        setCurrentOptions(initialSlice);
-    }, []);
+        if (isCascading && crossFilterCtx.optionsMap[paramName]) {
+            const cascadedOptions = crossFilterCtx.optionsMap[paramName];
+            allOptionsRef.current = cascadedOptions;
+            const initialSlice = formatSlice(cascadedOptions, 0, INITIAL_DISPLAY_COUNT);
+            setInitialOptions(initialSlice);
+            setCurrentOptions(initialSlice);
+        }
+    }, [isCascading, crossFilterCtx?.optionsMap?.[paramName]]);
+    // When cascading resets downstream selections, clear local selection
+    // Skip on initial mount to avoid clearing persisted values when context reinitializes
+    useEffect(() => {
+        if (!isMountedRef.current) {
+            isMountedRef.current = true;
+            return;
+        }
+        if (isCascading) {
+            const cascadedSelection = crossFilterCtx.selectionsMap[paramName];
+            if (cascadedSelection && cascadedSelection.length === 0 && currentSelectedOptions.length > 0) {
+                setCurrentSelectedOptions([]);
+                setIsAllSelected(false);
+                // Also clear from chatbotContext and persistedFormValues
+                chatbotContext[bodyText?.paramName] = {
+                    ...chatbotContext?.[bodyText?.paramName],
+                    [bodyText?.paramName]: [],
+                    updated: true,
+                };
+                dispatch(setChatbotContext(chatbotContext));
+                dispatch(setPersistedFormValues({ [formKey]: [] }));
+            }
+        }
+    }, [isCascading, crossFilterCtx?.selectionsMap?.[paramName]]);
+    useEffect(() => {
+        // Only use static options from bodyText if NOT in cascading mode
+        if (!isCascading) {
+            allOptionsRef.current = options;
+            const initialSlice = formatSlice(options, 0, INITIAL_DISPLAY_COUNT);
+            setInitialOptions(initialSlice);
+            setCurrentOptions(initialSlice);
+        }
+    }, [isCascading]);
     return (jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsx(Select, { currentOptions: currentOptions, setCurrentOptions: setCurrentOptions, label: heirarchyKeyValuePairs[paramName] || label, labelOrientation: labelOrientation, 
             // inputPosition={inputPosition}
             // header={header}
-            isRequired: isRequired, isDisabled: isDisabled || isFormDisabled, handleChange: (selected) => onChange(selected), isCloseWhenClickOutside: true, setIsOpen: setIsOpen, isOpen: isOpen, selectedOptions: currentSelectedOptions, setSelectedOptions: setCurrentSelectedOptions, initialOptions: initialOptions, isMulti: isMulti, isSelectAll: isAllSelected, setIsSelectAll: setIsAllSelected, toggleSelectAll: true, isWithSearch: isMulti ? true : false, onMenuScrollToBottom: () => {
+            isRequired: isRequired, isDisabled: isDisabled || isFormDisabled, isClearable: !(isDisabled || isFormDisabled), onClearAll: () => {
+                setCurrentSelectedOptions([]);
+                setIsAllSelected(false);
+                chatbotContext[bodyText?.paramName] = {
+                    ...chatbotContext?.[bodyText?.paramName],
+                    [bodyText?.paramName]: [],
+                    updated: true,
+                };
+                dispatch(setChatbotContext(chatbotContext));
+                dispatch(setPersistedFormValues({ [formKey]: [] }));
+                // Notify cross-filter context to clear downstream filters
+                if (isCascading) {
+                    crossFilterCtx.onFilterChange(paramName, []);
+                }
+            }, handleChange: (selected) => onChange(selected), isCloseWhenClickOutside: true, setIsOpen: (open) => {
+                setIsOpen(open);
+                if (isCascading) {
+                    if (open) {
+                        // Lazy fetch: trigger cross-filter API call when dropdown opens for the first time
+                        if ((!crossFilterCtx.optionsMap[paramName] || crossFilterCtx.optionsMap[paramName].length === 0) && !crossFilterCtx.loadingMap[paramName]) {
+                            crossFilterCtx.fetchOptions(paramName);
+                        }
+                    }
+                    else {
+                        // On dropdown close: if there's a selection, pre-fetch related filter options
+                        const currentSelection = crossFilterCtx.selectionsMap[paramName];
+                        if (currentSelection && currentSelection.length > 0) {
+                            // Only fetch downstream if no downstream filter already has selections
+                            // (avoids clearing user's existing lower-hierarchy choices)
+                            const hasDownstreamSelections = Object.keys(crossFilterCtx.selectionsMap).some((key) => {
+                                if (key === paramName)
+                                    return false;
+                                const vals = crossFilterCtx.selectionsMap[key];
+                                return vals && vals.length > 0;
+                            });
+                            if (!hasDownstreamSelections) {
+                                crossFilterCtx.fetchDownstreamOptions(paramName);
+                            }
+                            crossFilterCtx.fetchUpstreamOptions(paramName);
+                        }
+                    }
+                }
+            }, isOpen: isOpen, selectedOptions: currentSelectedOptions, setSelectedOptions: setCurrentSelectedOptions, initialOptions: initialOptions, isMulti: isMulti, isSelectAll: isAllSelected, setIsSelectAll: setIsAllSelected, toggleSelectAll: true, isLoading: isCascading ? crossFilterCtx.loadingMap[paramName] : false, emptyMessage: isCascading && crossFilterCtx.loadingMap[paramName] ? "Loading values..." : "No options available", isWithSearch: isMulti ? true : false, onMenuScrollToBottom: () => {
                 const allRaw = allOptionsRef.current;
                 if (allRaw.length > 0 && currentOptions.length < allRaw.length) {
                     const nextCount = Math.min(currentOptions.length + LOAD_MORE_COUNT, allRaw.length);
@@ -6160,10 +6803,18 @@ const SelectContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
                     };
                     dispatch(setChatbotContext(chatbotContext));
                     dispatch(setPersistedFormValues({ [formKey]: currentOptions }));
+                    // Notify cross-filter context if cascading is active
+                    if (isCascading) {
+                        crossFilterCtx.onFilterChange(paramName, allValues);
+                    }
                 }
                 else {
                     setCurrentSelectedOptions([]);
                     setIsAllSelected(false);
+                    // Notify cross-filter context of deselection
+                    if (isCascading) {
+                        crossFilterCtx.onFilterChange(paramName, []);
+                    }
                 }
             }, customPlaceholderAfterSelect: isAllSelected && allOptionsRef.current.length > 0
                 ? allOptionsRef.current.length
@@ -6377,6 +7028,8 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
     const persistedFormValues = useSelector((state) => state.smartBotReducer.persistedFormValues);
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
     const stepFormStreamData = useSelector((state) => state.smartBotReducer.stepFormStreamData);
+    const chatbotFilterOptions = useSelector((state) => state.smartBotReducer.chatbotFilterOptions);
+    const dimensionHierarchies = useSelector((state) => state.userRoleManagementService?.dimensionHierarchies);
     const [isFormSubmitted, setIsFormSubmitted] = useState(false);
     useEffect(() => {
         if (stepFormStreamData?.status === "streaming_start") {
@@ -6483,6 +7136,77 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
             return false;
         });
     }, [formData, chatbotContext, persistedFormValues, messageIndex]);
+    // Extract select-type filter configs from formData for cross-filter cascading
+    // and sort them based on the filters_hierarchy_order from tenant config
+    const crossFilterConfigs = useMemo(() => {
+        if (!formData || !Array.isArray(formData))
+            return [];
+        const configs = formData
+            .filter((item) => item?.type === "select" && item?.data?.param_name)
+            .map((item) => {
+            const data = item.data;
+            const paramName = data.param_name;
+            // Try to find full filter config from chatbotFilterOptions (Redux)
+            const fullConfig = (chatbotFilterOptions || []).find((f) => f.column_name === paramName || f.attribute_name === paramName || f.name === paramName);
+            return {
+                paramName: paramName,
+                param_name: paramName,
+                column_name: fullConfig?.column_name || paramName,
+                attribute_name: fullConfig?.attribute_name || paramName,
+                dimension: fullConfig?.dimension || "product",
+                display_type: fullConfig?.display_type || "dropdown",
+                display_order: fullConfig?.display_order || item.ordering || 0,
+                label: data.label,
+                name: fullConfig?.name || data.label,
+                is_mandatory: data.isRequired || false,
+            };
+        });
+        // Sort configs based on dimensionHierarchies order.
+        // Filters are sorted by their position in their dimension's hierarchy list.
+        // This determines the cascading order (earlier = upstream/higher hierarchy).
+        if (dimensionHierarchies && Object.keys(dimensionHierarchies).length > 0) {
+            configs.sort((a, b) => {
+                const aHierarchy = dimensionHierarchies[a.dimension] || [];
+                const bHierarchy = dimensionHierarchies[b.dimension] || [];
+                const aIndex = aHierarchy.indexOf(a.column_name) !== -1
+                    ? aHierarchy.indexOf(a.column_name)
+                    : aHierarchy.indexOf(a.attribute_name) !== -1
+                        ? aHierarchy.indexOf(a.attribute_name)
+                        : aHierarchy.indexOf(a.paramName) !== -1
+                            ? aHierarchy.indexOf(a.paramName)
+                            : 999;
+                const bIndex = bHierarchy.indexOf(b.column_name) !== -1
+                    ? bHierarchy.indexOf(b.column_name)
+                    : bHierarchy.indexOf(b.attribute_name) !== -1
+                        ? bHierarchy.indexOf(b.attribute_name)
+                        : bHierarchy.indexOf(b.paramName) !== -1
+                            ? bHierarchy.indexOf(b.paramName)
+                            : 999;
+                return aIndex - bIndex;
+            });
+        }
+        return configs;
+    }, [formData, chatbotFilterOptions, dimensionHierarchies]);
+    // Build initial selections from chatbotContext and persistedFormValues (for restore on remount)
+    const crossFilterInitialSelections = useMemo(() => {
+        const selections = {};
+        crossFilterConfigs.forEach((cfg) => {
+            const ctx = chatbotContext?.[cfg.paramName];
+            if (ctx && ctx.updated && ctx[cfg.paramName]) {
+                const val = ctx[cfg.paramName];
+                selections[cfg.paramName] = Array.isArray(val) ? val : [val];
+            }
+            else {
+                // Fallback: check persistedFormValues for option objects
+                const persistedKey = `${messageIndex}_${cfg.paramName}`;
+                const persisted = persistedFormValues?.[persistedKey];
+                if (persisted && Array.isArray(persisted) && persisted.length > 0) {
+                    selections[cfg.paramName] = persisted.map((opt) => opt.value || opt);
+                }
+            }
+        });
+        return selections;
+    }, [crossFilterConfigs, chatbotContext, persistedFormValues, messageIndex]);
     if (!formData || !Array.isArray(formData) || formData.length === 0) {
         return null;
     }
@@ -6544,7 +7268,7 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
         return null;
     return (jsxs("div", { className: "step-form-content", children: [showSavedFilters && filterSetOptions.length > 0 && (jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsx(Select, { currentOptions: filterSetCurrentOptions, setCurrentOptions: setFilterSetCurrentOptions, label: "Saved Filter Sets", labelOrientation: "top", isRequired: false, isDisabled: savedFilterDisabled, handleChange: (selected) => onFilterSetChange(selected), isCloseWhenClickOutside: true, setIsOpen: setIsFilterSetOpen, isOpen: isFilterSetOpen, selectedOptions: selectedFilterSet, setSelectedOptions: setSelectedFilterSet, initialOptions: filterSetOptions, isMulti: false, isClearable: true }) })), showSavedFilters && filterSetOptions.length > 0 && (jsx("hr", { style: { border: "none", borderTop: "1px solid #E0E0E0", margin: "12px 0" } })), jsx("div", { style: {
                     ...(isFilterSelected && !isFormDisabled ? { pointerEvents: "none", opacity: 0.5 } : {}),
-                }, children: formFields }), buttonItems] }));
+                }, children: crossFilterConfigs.length > 1 ? (jsx(CrossFilterProvider, { filters: crossFilterConfigs, fetchOptionsFn: fetchCrossFilterOptions, initialSelections: crossFilterInitialSelections, fetchOnMount: false, children: formFields })) : (formFields) }), buttonItems] }));
 };
 
 const useStyles$4 = makeStyles$1((theme) => ({
@@ -13309,6 +14033,7 @@ const SmartBot = (props) => {
             // Dispatch hierarchy key-value pairs to store
             dispatch(setHierarchyKeyValue(hierarchyKeyValuePairs));
             setFilterOptions(combinedOptions);
+            dispatch(setChatbotFilterOptions(combinedOptions));
             // Fetch saved filter sets for the plus-button menu
             fetchSavedFilterSets();
         }