impact-chatbot 2.3.10 → 2.3.11

package/dist/components/chatbot-input/utils/apiHelpers.d.ts

@@ -18,7 +18,10 @@ export declare const buildFilterOptionsPayload: (filterConfig: any, existingFilt
         filter_type: string;
         dimension: any;
         display_type: any;
-        check_configuration: any[];
+        check_configuration: {
+            checkAll: boolean;
+            meta: {};
+        }[];
         is_mandatory: any;
         extra: {};
         values: any;

package/dist/components/chatbot-input/utils/domHelpers.d.ts

@@ -35,7 +35,7 @@ export declare const findTextNodeAtPosition: (editorRef: any, position: any) =>
  * @param {boolean} isStage1 - Whether this is stage 1 (filter only) or stage 2 (with values)
  * @returns {HTMLSpanElement} Mention span element
  */
-export declare const createMentionSpan: (text: any, filterName: any, values: any, groupId: any, isStage1?: boolean) => HTMLSpanElement;
+export declare const createMentionSpan: (text: any, filterName: any, values: any, groupId: any, isStage1?: boolean, checkAll?: boolean) => HTMLSpanElement;
 /**
  * Create +N count badge
  * @param {number} count - Hidden count
@@ -68,6 +68,7 @@ export declare const getAllMentions: (editorRef: any) => {
     filterName: any;
     stage: any;
     values: any;
+    checkAll: boolean;
     text: any;
 }[];
 /**

package/dist/index.cjs.js

@@ -7910,10 +7910,10 @@ const buildFilterOptionsPayload = (filterConfig, existingFilters = [], filterOpt
             filter_type: "cascaded",
             dimension: fullFilterConfig?.dimension || "product",
             display_type: fullFilterConfig?.display_type || "dropdown",
-            check_configuration: [],
+            check_configuration: mention.checkAll ? [{ checkAll: true, meta: {} }] : [],
             is_mandatory: fullFilterConfig?.is_mandatory || false,
             extra: {},
-            values: mention.values || [],
+            values: mention.checkAll ? [] : (mention.values || []),
             attribute_name: attributeName,
             operator: "in",
             display_order: fullFilterConfig?.display_order || 0,
@@ -8063,7 +8063,7 @@ const findTextNodeAtPosition = (editorRef, position) => {
  * @param {boolean} isStage1 - Whether this is stage 1 (filter only) or stage 2 (with values)
  * @returns {HTMLSpanElement} Mention span element
  */
-const createMentionSpan = (text, filterName, values, groupId, isStage1 = false) => {
+const createMentionSpan = (text, filterName, values, groupId, isStage1 = false, checkAll = false) => {
     const mentionSpan = document.createElement("span");
     mentionSpan.className = "mention-highlight";
     mentionSpan.contentEditable = "false";
@@ -8073,6 +8073,9 @@ const createMentionSpan = (text, filterName, values, groupId, isStage1 = false)
     if (values && values.length > 0) {
         mentionSpan.setAttribute("data-values", JSON.stringify(values));
     }
+    if (checkAll) {
+        mentionSpan.setAttribute("data-check-all", "true");
+    }
     mentionSpan.textContent = text;
     return mentionSpan;
 };
@@ -8174,6 +8177,7 @@ const getAllMentions = (editorRef) => {
         filterName: span.getAttribute("data-filter-name"),
         stage: span.getAttribute("data-stage"),
         values: JSON.parse(span.getAttribute("data-values") || "[]"),
+        checkAll: span.getAttribute("data-check-all") === "true",
         text: span.textContent,
     }));
 };
@@ -8219,13 +8223,10 @@ const formatMentionDisplay = (filterName, values, maxVisible = 3) => {
         return `@${filterName}::`;
     }
     const visibleValues = values.slice(0, maxVisible);
-    const hiddenCount = values.length - maxVisible;
+    values.length - maxVisible;
     // Decode any special character codes for display purposes only.
     const displayVisibleValues = visibleValues.map((v) => replaceSpecialCharacter(String(v)));
     let display = `@${filterName}::${displayVisibleValues.join(",")}`;
-    if (hiddenCount > 0) {
-        display += `,+${hiddenCount}`;
-    }
     return display;
 };
 /**
@@ -8374,6 +8375,10 @@ const ChatbotInput = (props) => {
     const isInsertingMentionRef = React.useRef(false);
     const isTransitioningStageRef = React.useRef(false);
     const shouldClearCacheRef = React.useRef(false);
+    const allFilterValuesRef = React.useRef([]);
+    const windowStartRef = React.useRef(0);
+    const INITIAL_DISPLAY_COUNT = 500;
+    const LOAD_MORE_COUNT = 100;
     const chatbotContext = reactRedux.useSelector((state) => state.smartBotReducer.chatbotContext);
     // Date range picker state
     const [showDateRangePicker, setShowDateRangePicker] = React.useState(false);
@@ -8863,6 +8868,7 @@ const ChatbotInput = (props) => {
                     filterConfig?.name ||
                     mention.filterName,
                 values: mention.values,
+                checkAll: mention.checkAll || false,
             };
         });
     };
@@ -8936,7 +8942,16 @@ const ChatbotInput = (props) => {
                 // Fetch values for Stage 2 (with existing filters for cascading)
                 fetchFilterValues(filterConfig, existingFilters, filterOptions).then((valueOptions) => {
                     setIsLoadingValues(false);
-                    setCurrentOptions(valueOptions || []);
+                    const allValues = valueOptions || [];
+                    windowStartRef.current = 0;
+                    if (allValues.length > 2000) {
+                        allFilterValuesRef.current = allValues;
+                        setCurrentOptions(allValues.slice(0, INITIAL_DISPLAY_COUNT));
+                    }
+                    else {
+                        allFilterValuesRef.current = [];
+                        setCurrentOptions(allValues);
+                    }
                     // Update dropdown position again after values are loaded (DOM might have shifted)
                     if (mentionStartPos !== null) {
                         updateDropdownPosition(mentionStartPos);
@@ -9029,6 +9044,7 @@ const ChatbotInput = (props) => {
         }
         // Determine if this filter is multi-select
         selectedFilter.isMulti !== false; // Default to true
+        const isCheckAll = isAllSelected && allFilterValuesRef.current.length > 0;
         // Format mention text (decoded for display only)
         const mentionText = formatMentionDisplay(filterName, values, MAX_VISIBLE);
         // Create fragment
@@ -9036,12 +9052,15 @@ const ChatbotInput = (props) => {
         // Create mention span
         values.slice(0, MAX_VISIBLE);
         const hiddenValues = values.slice(MAX_VISIBLE);
-        const mentionSpan = createMentionSpan(mentionText, filterName, values, currentMentionGroupId, false // Stage 2
-        );
+        const mentionSpan = createMentionSpan(mentionText, filterName, values, currentMentionGroupId, false, // Stage 2
+        isCheckAll);
         fragment.appendChild(mentionSpan);
         // Add count badge if needed
         if (hiddenValues.length > 0) {
-            const countBadge = createCountBadge(hiddenValues.length, hiddenValues, currentMentionGroupId);
+            const badgeCount = isCheckAll
+                ? allFilterValuesRef.current.length - MAX_VISIBLE
+                : hiddenValues.length;
+            const countBadge = createCountBadge(badgeCount, hiddenValues, currentMentionGroupId);
             fragment.appendChild(countBadge);
         }
         // Add space to fragment
@@ -9626,7 +9645,28 @@ const ChatbotInput = (props) => {
                     // Stage 2: Value selection with dropdown - use Select
                     jsxRuntime.jsx(impactUiV3.Select, { currentOptions: currentOptions.length > 0 ? currentOptions : [], setCurrentOptions: setCurrentOptions, initialOptions: currentOptions.length > 0 ? currentOptions : [], placeholder: isLoadingValues
                             ? "Loading values..."
-                            : "Select values...", handleChange: handleMentionSelect, isOpen: isSelectOpen, setIsOpen: setIsSelectOpen, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, isCloseWhenClickOutside: false, isWithSearch: true, isSelectAll: !isLoadingValues ? isAllSelected : false, setIsSelectAll: setIsAllSelected, toggleSelectAll: !isLoadingValues, isMulti: selectedFilter?.is_multiple_selection !== false, disabled: isLoadingValues, isLoading: isLoadingValues, emptyMessage: isLoadingValues ? "Loading values..." : "No options available" })) })), showDateRangePicker && (jsxRuntime.jsx("div", { className: "mention-select-wrapper", ref: dateRangePickerRef, style: {
+                            : "Select values...", handleChange: handleMentionSelect, isOpen: isSelectOpen, setIsOpen: setIsSelectOpen, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, isCloseWhenClickOutside: false, isWithSearch: true, onMenuScrollToBottom: () => {
+                            const allValues = allFilterValuesRef.current;
+                            if (allValues.length > 0 && currentOptions.length < allValues.length) {
+                                const nextCount = Math.min(currentOptions.length + LOAD_MORE_COUNT, allValues.length);
+                                const nextOptions = allValues.slice(0, nextCount);
+                                setCurrentOptions(nextOptions);
+                                if (isAllSelected) {
+                                    setSelectedOptions(nextOptions);
+                                }
+                            }
+                        }, onSelectAll: (e) => {
+                            if (e && e.target.checked) {
+                                setSelectedOptions([...currentOptions]);
+                                setIsAllSelected(true);
+                            }
+                            else {
+                                setSelectedOptions([]);
+                                setIsAllSelected(false);
+                            }
+                        }, customPlaceholderAfterSelect: isAllSelected && allFilterValuesRef.current.length > 0
+                            ? allFilterValuesRef.current.length
+                            : null, isSelectAll: !isLoadingValues ? isAllSelected : false, setIsSelectAll: setIsAllSelected, toggleSelectAll: !isLoadingValues, isMulti: selectedFilter?.is_multiple_selection !== false, disabled: isLoadingValues, isLoading: isLoadingValues, emptyMessage: isLoadingValues ? "Loading values..." : "No options available" })) })), showDateRangePicker && (jsxRuntime.jsx("div", { className: "mention-select-wrapper", ref: dateRangePickerRef, style: {
                         position: "fixed",
                         top: `680px`,
                         left: `${dropdownPosition.left}px`,