impact-chatbot 2.3.88 → 2.3.89

package/dist/index.esm.js

@@ -542,6 +542,26 @@ const parseResponse = (data, type, agentId = "", currentMode = "", disableTimeAn
                     paramName: data?.data?.param_name
                 }
             };
+        case "checkboxGroup":
+            return {
+                ...data,
+                timeStamp: timeString,
+                userType: "bot",
+                userName: userName,
+                headerTitle: data?.data?.label || "",
+                bodyType: "checkboxGroup",
+                bodyText: {
+                    label: data?.data?.label,
+                    orientation: data?.data?.orientation,
+                    options: data?.data?.options,
+                    defaultSelected: data?.data?.defaultSelected,
+                    minOptions: data?.data?.minOptions,
+                    maxOptions: data?.data?.maxOptions,
+                    isRequired: data?.data?.isRequired,
+                    isDisabled: data?.data?.isDisabled,
+                    paramName: data?.data?.param_name
+                }
+            };
         case "button":
             return {
                 ...data,
@@ -7447,6 +7467,61 @@ const CheckboxContent = ({ bodyText, isFormDisabled = false, messageIndex }) =>
     return (jsx("div", { style: { width: '100%', marginTop: '10px' }, children: jsx(Checkbox, { label: label, checked: checked, required: required, disabled: disabled || isFormDisabled, onChange: (e) => handleChange(e), variant: "default" }) }));
 };
 
+const CheckboxGroupContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
+    const formKey = `${messageIndex}_${bodyText?.paramName}`;
+    const classes = useStyles$a();
+    const { label, orientation, options = [], defaultSelected, minOptions, maxOptions, isRequired, isDisabled, } = bodyText || {};
+    const min = minOptions ?? 1;
+    const max = maxOptions ?? options.length;
+    const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
+    const chatbotContextRef = useRef(chatbotContext);
+    chatbotContextRef.current = chatbotContext;
+    const persistedFormValues = useSelector((state) => state.smartBotReducer.persistedFormValues);
+    const dispatch = useDispatch();
+    const [selected, setSelected] = useState(() => {
+        const persisted = persistedFormValues?.[formKey];
+        if (Array.isArray(persisted))
+            return persisted;
+        return Array.isArray(defaultSelected) ? defaultSelected : [];
+    });
+    if (isEmpty$1(bodyText))
+        return null;
+    const groupDisabled = isDisabled || isFormDisabled;
+    const dispatchSelection = (newValues) => {
+        const latestContext = chatbotContextRef.current;
+        dispatch(setChatbotContext({
+            ...latestContext,
+            [bodyText?.paramName]: {
+                ...latestContext?.[bodyText?.paramName],
+                [bodyText?.paramName]: newValues,
+                updated: true,
+            },
+        }));
+        dispatch(setPersistedFormValues({ [formKey]: newValues }));
+    };
+    const handleChange = (optionValue, isChecked) => {
+        try {
+            const newValues = isChecked
+                ? [...selected, optionValue]
+                : selected.filter((val) => val !== optionValue);
+            setSelected(newValues);
+            dispatchSelection(newValues);
+        }
+        catch (error) {
+            console.error("Error in checkboxGroup handleChange", error);
+        }
+    };
+    const isRow = orientation === "row";
+    const overMax = selected.length > max;
+    const belowMin = isRequired && selected.length < min;
+    return (jsxs("div", { style: { width: "100%", marginTop: "10px" }, children: [label && (jsxs("p", { className: classes.radioGrpLabel, children: [label, isRequired ? " *" : ""] })), jsx("div", { style: {
+                    display: "flex",
+                    flexDirection: isRow ? "row" : "column",
+                    flexWrap: isRow ? "wrap" : "nowrap",
+                    gap: isRow ? "16px" : "8px",
+                }, children: options.map((option) => (jsx(Checkbox, { label: option.label, checked: selected.includes(option.value), disabled: option.disabled || groupDisabled, onChange: (e) => handleChange(option.value, e?.currentTarget?.checked), variant: "default" }, option.value))) }), overMax && (jsx("p", { className: classes.radioGrpLabel, style: { margin: "8px 0 0 0", color: "red" }, children: `Select at most ${max} option${max > 1 ? "s" : ""}` })), !overMax && belowMin && (jsx("p", { className: classes.radioGrpLabel, style: { margin: "8px 0 0 0", color: "red" }, children: `Select at least ${min} option${min > 1 ? "s" : ""}` }))] }));
+};
+
 const RadioContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
     const formKey = `${messageIndex}_${bodyText?.paramName}`;
     const classes = useStyles$a();
@@ -7730,6 +7805,38 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
             return false;
         });
     }, [formData, chatbotContext, persistedFormValues, messageIndex]);
+    // Validate checkboxGroup fields against their minOptions/maxOptions bounds.
+    // A required group must have selectedCount within [min, max]; any group (even
+    // non-required) must not exceed max. Blocks submit when out of bounds.
+    const checkboxGroupsValid = useMemo(() => {
+        if (!formData || !Array.isArray(formData))
+            return true;
+        const groups = formData.filter((item) => item?.type === "checkboxGroup");
+        return groups.every((item) => {
+            const data = item.data || {};
+            const param = data.param_name;
+            const options = data.options || [];
+            const min = data.minOptions ?? 1;
+            const max = data.maxOptions ?? options.length;
+            // Resolve current selection: chatbotContext first, then persistedFormValues
+            let selectedValues = [];
+            const ctx = chatbotContext?.[param];
+            if (ctx && ctx.updated && Array.isArray(ctx[param])) {
+                selectedValues = ctx[param];
+            }
+            else {
+                const persisted = persistedFormValues?.[`${messageIndex}_${param}`];
+                if (Array.isArray(persisted))
+                    selectedValues = persisted;
+            }
+            const count = selectedValues.length;
+            if (count > max)
+                return false;
+            if (data.isRequired && count < min)
+                return false;
+            return true;
+        });
+    }, [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(() => {
@@ -7838,10 +7945,12 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
                 return jsx(DateRangePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: formFieldsDisabled, messageIndex: messageIndex }, key);
             case "checkbox":
                 return jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: formFieldsDisabled, messageIndex: messageIndex }, key);
+            case "checkboxGroup":
+                return jsx(CheckboxGroupContent, { bodyText: parsedData.bodyText, isFormDisabled: formFieldsDisabled, messageIndex: messageIndex }, key);
             case "radio":
                 return jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: formFieldsDisabled, messageIndex: messageIndex }, key);
             case "button":
-                return jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled || isFormSubmitted || isTimedOut, isStepFormSubmit: true, isFormValid: requiredFieldsFilled, formParamNames: formParamNames, messageIndex: messageIndex }, key);
+                return jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled || isFormSubmitted || isTimedOut, isStepFormSubmit: true, isFormValid: requiredFieldsFilled && checkboxGroupsValid, formParamNames: formParamNames, messageIndex: messageIndex }, key);
             case "input":
                 return jsx(InputContent, { bodyText: parsedData.bodyText, isFormDisabled: formFieldsDisabled, messageIndex: messageIndex }, key);
             case "image":
@@ -8237,7 +8346,7 @@ const getQuestionStatus$1 = (questionSteps) => {
 /**
  * Renders a single progress bar item (main point + sub-items)
  */
-const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData, showSavedFilters = true, preSelectedFilters = null, isFormDisabled, onAllSubItemsAnimated = undefined, botProps = null, currentMode = "", agentId = "", sessionId = "" }) => {
+const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData, showSavedFilters = true, preSelectedFilters = null, isFormDisabled, onAllSubItemsAnimated = undefined, botProps = null, currentMode = "", agentId = "", sessionId = "", index = 0, chatSessionId = "" }) => {
     const status = getQuestionStatus$1(questionSteps);
     const animatedCountRef = useRef(0);
     const [isExpanded, setIsExpanded] = useState(true);
@@ -8271,9 +8380,9 @@ const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData,
                                     if (animatedCountRef.current >= arr.length && onAllSubItemsAnimated) {
                                         onAllSubItemsAnimated();
                                     }
-                                } }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId }) }))] })] }));
+                                } }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId, messageIndex: `${String(chatSessionId)}_${index}` }) }))] })] }));
 };
-const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, botProps = null, agentId = "", sessionId = "", }) => {
+const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, botProps = null, agentId = "", sessionId = "", chatSessionId = "", }) => {
     const classes = useStyles$4();
     useState(false);
     const [showThinking, setShowThinking] = useState(false);
@@ -8356,7 +8465,7 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                 const showSavedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.showSavedFilters : true;
                 const preSelectedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.preSelectedFilters : null;
                 const isLast = index === questions.length - 1;
-                return (jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: isLast && !showThinking, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId, onAllSubItemsAnimated: isLast && lastQuestionCompleted && !done
+                return (jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: isLast && !showThinking, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId, index: index, chatSessionId: chatSessionId, onAllSubItemsAnimated: isLast && lastQuestionCompleted && !done
                         ? () => setShowThinking(true)
                         : undefined }, index));
             }), showThinking && !done && (jsx("div", { style: {
@@ -8384,6 +8493,8 @@ const renderWidgetItem = (item, index, isFormDisabled) => {
                 return jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "checkbox":
                 return jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "checkboxGroup":
+                return jsx(CheckboxGroupContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "select":
                 return jsx(SelectContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "slider":
@@ -8418,7 +8529,7 @@ const AgentResponse$1 = (props) => {
 };
 
 const StepsResponseTab = (props) => {
-    const { steps, setSteps, stepsDone, setStepsDone, finalStepDone, setFinalStepDone, content, isStreaming, stepChange, currentMode, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, streamingWidgetData, isRetrying, botProps, agentId, sessionId, } = props;
+    const { steps, setSteps, stepsDone, setStepsDone, finalStepDone, setFinalStepDone, content, isStreaming, stepChange, currentMode, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, streamingWidgetData, isRetrying, botProps, agentId, sessionId, chatSessionId, } = props;
     const dispatch = useDispatch();
     const thinkingContext = useSelector((state) => state.smartBotReducer.thinkingContext);
     const streamStartTimeRef = useRef(thinkingContext?.streamStartTime);
@@ -8482,7 +8593,7 @@ const StepsResponseTab = (props) => {
                     icon: jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsx(Steps$1, { steps: steps, setSteps: setSteps, done: stepsDone, setDone: setStepsDone, setTabValue: setTabValue, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, stepChange: stepChange, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: isFormDisabled || isTimedOut, botProps: botProps, agentId: agentId, sessionId: sessionId }),
+                jsx(Steps$1, { steps: steps, setSteps: setSteps, done: stepsDone, setDone: setStepsDone, setTabValue: setTabValue, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, stepChange: stepChange, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: isFormDisabled || isTimedOut, botProps: botProps, agentId: agentId, sessionId: sessionId, chatSessionId: chatSessionId }),
                 jsxs(Fragment, { children: [jsx(AgentResponse$1, { content: content, isStreaming: isStreaming, streamingWidgetData: streamingWidgetData, isFormDisabled: isFormDisabled || isTimedOut }), timeoutMessage && (jsx("div", { style: { marginTop: "8px", padding: "0 8px" }, children: jsx(TextRenderer, { text: timeoutMessage, thinking: "" }) }))] }),
             ], value: tabValue }) }));
 };
@@ -10054,7 +10165,7 @@ const StreamedContent = ({ botData, botProps }) => {
      * @returns {JSX.Element} Rendered content with optional blinking cursor
      */
     const renderContent = () => {
-        return (jsxs("div", { className: classes.streamContainer, children: [jsx(StepsResponseTab, { steps: steps, stepChange: stepChange, setSteps: setSteps, stepsDone: stepsDone, setStepsDone: setStepsDone, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, content: content, isStreaming: isStreaming, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: botData?.isFormDisabled || false, streamingWidgetData: streamingWidgetData, isRetrying: isRetrying, botProps: botProps, agentId: botData?.inputBody?.agent_id || "", sessionId: messageToStoreRef.current?.sessionId || "" }), isRetrying && (jsx("div", { className: classes.retryContainer, children: jsx(TextRenderer, { text: `Auto re-trying in ${retryCountdown}s`, thinking: "" }) }))] }));
+        return (jsxs("div", { className: classes.streamContainer, children: [jsx(StepsResponseTab, { steps: steps, stepChange: stepChange, setSteps: setSteps, stepsDone: stepsDone, setStepsDone: setStepsDone, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, content: content, isStreaming: isStreaming, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: botData?.isFormDisabled || false, streamingWidgetData: streamingWidgetData, isRetrying: isRetrying, botProps: botProps, agentId: botData?.inputBody?.agent_id || "", sessionId: messageToStoreRef.current?.sessionId || "", chatSessionId: messageToStoreRef.current?.chatSessionId || botData?.chatSessionId || "" }), isRetrying && (jsx("div", { className: classes.retryContainer, children: jsx(TextRenderer, { text: `Auto re-trying in ${retryCountdown}s`, thinking: "" }) }))] }));
     };
     if (currentMode === "agent") {
         return renderContent();
@@ -10250,7 +10361,7 @@ const getQuestionStatus = (questionSteps) => {
 /**
  * Renders a single progress bar item (main point + sub-items)
  */
-const ProgressBarItem = ({ question, questionSteps, isLast, classes, formData, isFormDisabled, isRestreaming = false, showSavedFilters = true, preSelectedFilters = null }) => {
+const ProgressBarItem = ({ question, questionSteps, isLast, classes, formData, isFormDisabled, isRestreaming = false, showSavedFilters = true, preSelectedFilters = null, sessionId = "", index = 0, chatSessionId = "" }) => {
     const baseStatus = getQuestionStatus(questionSteps);
     // When restreaming and this is the last item, show as in-progress
     const status = (isRestreaming && isLast) ? "in-progress" : baseStatus;
@@ -10280,9 +10391,9 @@ const ProgressBarItem = ({ question, questionSteps, isLast, classes, formData, i
             setIsExpanded(true);
         }
     }, [status, formData]);
-    return (jsxs("div", { className: classes.progressItem, children: [jsxs("div", { className: classes.progressTrack, children: [jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxs("div", { className: classes.progressContent, children: [jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxs("div", { className: classes.reasoningLabel, children: [jsx(SvgReasoningIcon, {}), "Working on the next step..."] })), hasSubItems && isExpanded && !isProcessingRequest && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsx("div", { className: classes.progressSubItem, children: jsx(SubStepRenderer, { text: `${step.header}${step.sub_header ? ` - ${step.sub_header}` : ""}` }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters }) }))] })] }));
+    return (jsxs("div", { className: classes.progressItem, children: [jsxs("div", { className: classes.progressTrack, children: [jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxs("div", { className: classes.progressContent, children: [jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxs("div", { className: classes.reasoningLabel, children: [jsx(SvgReasoningIcon, {}), "Working on the next step..."] })), hasSubItems && isExpanded && !isProcessingRequest && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsx("div", { className: classes.progressSubItem, children: jsx(SubStepRenderer, { text: `${step.header}${step.sub_header ? ` - ${step.sub_header}` : ""}` }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, messageIndex: `${String(chatSessionId)}_${index}` }) }))] })] }));
 };
-const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, activeFormIntent = null, isRestreaming = false }) => {
+const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, activeFormIntent = null, isRestreaming = false, sessionId = "", chatSessionId = "" }) => {
     const classes = useStyles$3();
     useState(false);
     const hasQuestions = questions.length > 0;
@@ -10311,7 +10422,7 @@ const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap
             const formDisabledForThis = activeFormIntent
                 ? question !== activeFormIntent
                 : isFormDisabled;
-            return (jsx(ProgressBarItem, { question: question, questionSteps: questionSteps, isLast: index === questions.length - 1, classes: classes, formData: formData, isFormDisabled: formDisabledForThis, isRestreaming: isRestreaming, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters }, index));
+            return (jsx(ProgressBarItem, { question: question, questionSteps: questionSteps, isLast: index === questions.length - 1, classes: classes, formData: formData, isFormDisabled: formDisabledForThis, isRestreaming: isRestreaming, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, sessionId: sessionId, index: index, chatSessionId: chatSessionId }, index));
         }) }));
 };
 
@@ -10324,7 +10435,7 @@ const AgentResponse = ({ children }) => {
 // Only the active instance should process stepFormStreamData from Redux.
 let instanceCounter = 0;
 let activeTabularInstanceId = null;
-const TabularContent = ({ steps: initialSteps, currentTabValue, children, questions: initialQuestions = [], questionsStepsMap: initialQuestionsStepsMap = {}, stepFormDataMap: initialStepFormDataMap = {}, isFormDisabled = false, sessionId: propSessionId = "", botProps = null, currentMode = "", agentId = "" }) => {
+const TabularContent = ({ steps: initialSteps, currentTabValue, children, questions: initialQuestions = [], questionsStepsMap: initialQuestionsStepsMap = {}, stepFormDataMap: initialStepFormDataMap = {}, isFormDisabled = false, sessionId: propSessionId = "", chatSessionId = "", botProps = null, currentMode = "", agentId = "" }) => {
     const dispatch = useDispatch();
     const stepFormStreamData = useSelector((state) => state.smartBotReducer.stepFormStreamData);
     const thinkingContext = useSelector((state) => state.smartBotReducer.thinkingContext);
@@ -10805,7 +10916,7 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
                     icon: jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsx(Steps, { steps: stepsState, questions: questionsState, questionsStepsMap: questionsStepsMapState, stepFormDataMap: stepFormDataMapState, isFormDisabled: (isFormDisabled && !isRestreaming) || stepFormSubmitted || isTimedOut, activeFormIntent: hasNewStepFormFromRestream ? activeFormIntent : null, isRestreaming: isRestreaming }),
+                jsx(Steps, { steps: stepsState, questions: questionsState, questionsStepsMap: questionsStepsMapState, stepFormDataMap: stepFormDataMapState, isFormDisabled: (isFormDisabled && !isRestreaming) || stepFormSubmitted || isTimedOut, activeFormIntent: hasNewStepFormFromRestream ? activeFormIntent : null, isRestreaming: isRestreaming, sessionId: propSessionId, chatSessionId: chatSessionId, agentId: agentId }),
                 jsxs(AgentResponse, { children: [children, renderedWidgets.length > 0 && (jsx("div", { className: "restream-widget-content", children: renderedWidgets })), retryCountdown > 0 && (jsx("div", { style: { marginTop: "8px" }, children: jsx(TextRenderer, { text: `Auto re-trying in ${retryCountdown}s`, thinking: "" }) })), timeoutMessage && (jsx("div", { style: { marginTop: "8px" }, children: jsx(TextRenderer, { text: timeoutMessage, thinking: "" }) }))] }),
             ], value: tabValue }) }));
 };
@@ -10848,6 +10959,8 @@ const CombinedContent = ({ botData, props }) => {
                 return jsx(DateRangePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled, messageIndex: botData.messageIndex }, key);
             case "checkbox":
                 return jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled, messageIndex: botData.messageIndex }, key);
+            case "checkboxGroup":
+                return jsx(CheckboxGroupContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled, messageIndex: botData.messageIndex }, key);
             case "radio":
                 return jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled, messageIndex: botData.messageIndex }, key);
             case "button":
@@ -10883,7 +10996,7 @@ const CombinedContent = ({ botData, props }) => {
     const validContent = renderedContent.filter(content => content !== null);
     const renderCombinedContent = () => (jsx("div", { className: "combined-content-container", children: validContent.length > 0 ? (validContent.map((content, index) => (jsx("div", { className: "combined-content-item", children: content }, `wrapper-${index}`)))) : (jsx("div", { children: "No valid content to display" })) }));
     if (isTabEnabled) {
-        return (jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, stepFormDataMap: botData?.utilityData?.stepFormDataMap || {}, isFormDisabled: isFormDisabled, sessionId: botData?.sessionId || "", botProps: props, currentMode: botData?.currentMode || "", agentId: botData?.agentId || "", children: renderCombinedContent() }));
+        return (jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, stepFormDataMap: botData?.utilityData?.stepFormDataMap || {}, isFormDisabled: isFormDisabled, sessionId: botData?.sessionId || "", chatSessionId: botData?.chatSessionId || "", botProps: props, currentMode: botData?.currentMode || "", agentId: botData?.agentId || "", children: renderCombinedContent() }));
     }
     return renderCombinedContent();
 };
@@ -10946,6 +11059,8 @@ const BotMessage = ({ botData, state, handleLikeDislike, props }) => {
                 return jsx(DateRangePickerContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled, messageIndex: botData.messageIndex });
             case "checkbox":
                 return jsx(CheckboxContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled, messageIndex: botData.messageIndex });
+            case "checkboxGroup":
+                return jsx(CheckboxGroupContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled, messageIndex: botData.messageIndex });
             case "radio":
                 return jsx(RadioContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled, messageIndex: botData.messageIndex });
             case "button":
@@ -16081,10 +16196,50 @@ const SmartBot = (props) => {
         }
         fetchConversations(null, "agent");
     }, [renameConversation, deleteConversation, fetchConversations]);
+    // Ref to the SmartBot wrapper so we can scope outside-click detection and the
+    // collapse-button query to this (local) chatbot instance only.
+    const smartBotWrapperRef = useRef(null);
+    // Collapse the expanded/docked chatbot into the small draggable panel by
+    // triggering impact-ui's header "Collapse chatbot" control. That button is
+    // only present while expanded (its label becomes "Expand chatbot" once
+    // collapsed), so this is a safe no-op when already collapsed.
+    const collapseChatBotIfExpanded = useCallback(() => {
+        const root = smartBotWrapperRef.current;
+        if (!root)
+            return;
+        const collapseBtn = root.querySelector('button[aria-label="Collapse chatbot"]');
+        if (collapseBtn)
+            collapseBtn.click();
+    }, []);
+    // Auto-collapse to draggable mode when the user interacts outside the bot.
+    useEffect(() => {
+        const handleOutsideInteraction = (e) => {
+            const root = smartBotWrapperRef.current;
+            if (!root)
+                return;
+            if (root.contains(e.target))
+                return; // interaction inside the bot → ignore
+            collapseChatBotIfExpanded();
+        };
+        document.addEventListener("mousedown", handleOutsideInteraction, true);
+        return () => {
+            document.removeEventListener("mousedown", handleOutsideInteraction, true);
+        };
+    }, [collapseChatBotIfExpanded]);
+    // Auto-collapse on route changes (skip the initial mount so freshly opening
+    // the bot doesn't immediately collapse it).
+    const hasMountedForCollapseRef = useRef(false);
+    useEffect(() => {
+        if (!hasMountedForCollapseRef.current) {
+            hasMountedForCollapseRef.current = true;
+            return;
+        }
+        collapseChatBotIfExpanded();
+    }, [location.pathname, collapseChatBotIfExpanded]);
     return (jsxs(Fragment, { children: [partialClose && (minimizedStreamData?.isStreaming || minimizedStreamData?.stepStatus === "step_form") && (jsx(MinimizedChatWidget, { onExpand: () => {
                     setShowModal(true);
                     setPartialClose(false);
-                } })), jsxs("div", { className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""} `, children: [jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsx(ChatBotComponent, { isFullWidth: forceOpen, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" && !showSavedFilters ? (jsx(ChatbotInput, { newChatScreen: newChatScreen, inputValue: userInput, setInputValue: setUserInput, isStopIcon: isStop, onSendIconClick: onSendIconClick, onStopIconClick: onStopIconClick, currentMode: currentMode, filterOptions: filterOptions, 
+                } })), jsxs("div", { ref: smartBotWrapperRef, className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""} `, children: [jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsx(ChatBotComponent, { isFullWidth: forceOpen, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" && !showSavedFilters ? (jsx(ChatbotInput, { newChatScreen: newChatScreen, inputValue: userInput, setInputValue: setUserInput, isStopIcon: isStop, onSendIconClick: onSendIconClick, onStopIconClick: onStopIconClick, currentMode: currentMode, filterOptions: filterOptions, 
                             // onSaveClick={saveCurrentChat}
                             savedFilterSets: savedFilterSets, selectedFilterSet: selectedFilterSet, onFilterSetSelect: (filterSet) => setSelectedFilterSet(filterSet), onClearFilterSet: () => setSelectedFilterSet(null), onTriggerRefresh: triggerRefreshAction, answerMode: answerMode, setAnswerMode: setAnswerMode })) : showSavedFilters ? jsx(Fragment, {}) : null, isChatBotOpen: showModal || forceOpen, historyPanelData: historyPanelData, onHistorySearchChange: (params) => { console.log("History Search Change", params); }, onHistorySelectConversation: (params) => {
                             console.log("History Select Conversation", params);