impact-chatbot 2.3.33 → 2.3.34

package/dist/components/message-template/components/message-content/ButtonContent.d.ts

@@ -1,6 +1,7 @@
-declare const ButtonContent: ({ bodyText, isFormDisabled, isStepFormSubmit }: {
+declare const ButtonContent: ({ bodyText, isFormDisabled, isStepFormSubmit, isFormValid }: {
     bodyText: any;
     isFormDisabled?: boolean;
     isStepFormSubmit?: boolean;
+    isFormValid?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ButtonContent;

package/dist/index.cjs.js

@@ -5098,7 +5098,8 @@ const sseevent = (message, messageToStoreRef) => {
                 parsedData?.response_heading || "";
         }
         else if (parsedData?.message === "[DONE]" &&
-            !lodash.isEmpty(parsedData?.widget_data)) {
+            !lodash.isEmpty(parsedData?.widget_data) &&
+            parsedData?.status !== "step_form") {
             // Accumulate widget_data chunks like host app
             let finalWidgetData = lodash.isArray(parsedData.widget_data)
                 ? parsedData.widget_data
@@ -5146,15 +5147,6 @@ const sseevent = (message, messageToStoreRef) => {
             if (currentIntent) {
                 messageToStoreRef.current.stepFormData[currentIntent] = formWidgetData;
             }
-            let previousWidgetData = lodash.isArray(messageToStoreRef.current.appendedData)
-                ? messageToStoreRef.current.appendedData
-                : lodash.isEmpty(messageToStoreRef.current.appendedData)
-                    ? []
-                    : [messageToStoreRef.current.appendedData];
-            messageToStoreRef.current.appendedData = [
-                ...previousWidgetData,
-                ...formWidgetData,
-            ];
             messageToStoreRef.current.additionalArgs = parsedData?.additional_args
                 ? parsedData.additional_args
                 : {};
@@ -5293,7 +5285,7 @@ const useStyles$4 = styles.makeStyles((theme) => ({
         marginTop: pxToRem(16),
     }
 }));
-const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = false }) => {
+const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = false, isFormValid = true }) => {
     const classes = useStyles$4();
     const dispatch = reactRedux.useDispatch();
     const sourceRef = React.useRef(null);
@@ -5399,7 +5391,7 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
         if (!Array.isArray(bodyText.buttons)) {
             return null;
         }
-        return bodyText.buttons.map((button, index) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(impactUiV3.Button, { variant: button.variant || "primary", size: button.size || "medium", onClick: () => handleButtonClick(), disabled: button.disabled || isFormDisabled, className: button.className, icon: button.icon, iconPlacement: button.iconPlacement || "left", children: button.label }) }, index)));
+        return bodyText.buttons.map((button, index) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(impactUiV3.Button, { variant: button.variant || "primary", size: button.size || "medium", onClick: () => handleButtonClick(), disabled: button.disabled || isFormDisabled || (isStepFormSubmit && !isFormValid), className: button.className, icon: button.icon, iconPlacement: button.iconPlacement || "left", children: button.label }) }, index)));
     };
     return (jsxRuntime.jsxs("div", { className: classes.buttonContainer, children: [bodyText.message && (jsxRuntime.jsx("div", { className: classes.message, children: bodyText.message })), jsxRuntime.jsx("div", { className: classes.buttonRow, children: renderButtons() })] }));
 };
@@ -5780,6 +5772,12 @@ const SelectContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
             console.error("Error in select handleChange", error);
         }
     };
+    React.useEffect(() => {
+        const persisted = persistedFormValues?.[formKey];
+        if (!persisted || (Array.isArray(persisted) && persisted.length === 0)) {
+            setCurrentSelectedOptions([]);
+        }
+    }, [persistedFormValues, formKey]);
     React.useEffect(() => {
         let formattedOptions = options.map((option) => {
             return {
@@ -6002,6 +6000,13 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false })
     const savedFilterSets = reactRedux.useSelector((state) => state.smartBotReducer.savedFilterSets);
     const persistedFormValues = reactRedux.useSelector((state) => state.smartBotReducer.persistedFormValues);
     const chatbotContext = reactRedux.useSelector((state) => state.smartBotReducer.chatbotContext);
+    const stepFormStreamData = reactRedux.useSelector((state) => state.smartBotReducer.stepFormStreamData);
+    const [isFormSubmitted, setIsFormSubmitted] = React.useState(false);
+    React.useEffect(() => {
+        if (stepFormStreamData?.status === "streaming_start") {
+            setIsFormSubmitted(true);
+        }
+    }, [stepFormStreamData]);
     const [isFilterSetOpen, setIsFilterSetOpen] = React.useState(false);
     const [selectedFilterSet, setSelectedFilterSet] = React.useState(() => {
         // Restore from chatbotContext if available (persists across tab switches)
@@ -6022,6 +6027,7 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false })
             const selectedValue = Array.isArray(selected) ? selected[0]?.value : selected?.value;
             if (!selectedValue) {
                 dispatch(smartBotActions.setChatbotContext({}));
+                dispatch(smartBotActions.clearPersistedFormValues());
                 return;
             }
             const fullFilterObj = (savedFilterSets || []).find((f) => (f.fuc_code || f.name || f.label) === selectedValue);
@@ -6069,8 +6075,32 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false })
             return val && (Array.isArray(val) ? val.length > 0 : !!val);
         });
     }, [persistedFormValues, messageIndex]);
-    const formFieldsDisabled = isFormDisabled || isFilterSelected;
-    const savedFilterDisabled = isFormDisabled || isFormFieldUsed;
+    const formFieldsDisabled = isFormDisabled || isFilterSelected || isFormSubmitted;
+    const savedFilterDisabled = isFormDisabled || isFormFieldUsed || isFormSubmitted;
+    const requiredFieldsFilled = React.useMemo(() => {
+        if (!formData || !Array.isArray(formData))
+            return false;
+        const requiredParams = formData
+            .filter((item) => item?.data?.isRequired)
+            .map((item) => item.data.param_name);
+        if (requiredParams.length === 0)
+            return true;
+        return requiredParams.every((param) => {
+            // Check chatbotContext (populated by saved filters)
+            const ctx = chatbotContext?.[param];
+            if (ctx && ctx.updated) {
+                const val = ctx[param];
+                if (val && (Array.isArray(val) ? val.length > 0 : !!val))
+                    return true;
+            }
+            // Check persistedFormValues (populated by manual form field selection)
+            const persistedKey = `${messageIndex}_${param}`;
+            const persistedVal = persistedFormValues?.[persistedKey];
+            if (persistedVal && (Array.isArray(persistedVal) ? persistedVal.length > 0 : !!persistedVal))
+                return true;
+            return false;
+        });
+    }, [formData, chatbotContext, persistedFormValues, messageIndex]);
     if (!formData || !Array.isArray(formData) || formData.length === 0) {
         return null;
     }
@@ -6098,7 +6128,7 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false })
             case "radio":
                 return jsxRuntime.jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: formFieldsDisabled, messageIndex: messageIndex }, key);
             case "button":
-                return jsxRuntime.jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled, isStepFormSubmit: true }, key);
+                return jsxRuntime.jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled || isFormSubmitted, isStepFormSubmit: true, isFormValid: requiredFieldsFilled }, key);
             case "input":
                 return jsxRuntime.jsx(InputContent, { bodyText: parsedData.bodyText, isFormDisabled: formFieldsDisabled, messageIndex: messageIndex }, key);
             case "image":
@@ -6159,12 +6189,10 @@ const useStyles$2 = makeStyles((theme) => ({
         "@keyframes slideDown": {
             "0%": {
                 opacity: 0,
-                maxHeight: 0,
                 transform: "translateY(-12px)",
             },
             "100%": {
                 opacity: 1,
-                maxHeight: "2000px",
                 transform: "translateY(0)",
             },
         },
@@ -6277,8 +6305,13 @@ const useStyles$2 = makeStyles((theme) => ({
         padding: `${pxToRem(8)} ${pxToRem(14)}`,
         background: colours.greys100,
         borderRadius: pxToRem(8),
-        overflow: "hidden",
-        transition: "max-height 0.3s ease, opacity 0.3s ease",
+        transition: "opacity 0.3s ease",
+        overflow: "auto",
+        maxHeight: pxToRem(300),
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": {
+            display: "none",
+        },
     },
     reasoningLabel: {
         display: "flex",
@@ -6331,8 +6364,10 @@ const useStyles$2 = makeStyles((theme) => ({
  * - "not-started": no steps or all pending
  */
 const getQuestionStatus$1 = (questionSteps) => {
-    if (!questionSteps || questionSteps.length === 0)
+    if (!questionSteps)
         return "not-started";
+    if (questionSteps.length === 0)
+        return "completed";
     const hasError = questionSteps.some((s) => s.step_status === "error");
     if (hasError)
         return "error";
@@ -6373,8 +6408,11 @@ const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData,
         if (status === "in-progress" || status === "error" || formData) {
             setIsExpanded(true);
         }
+        else if (status === "completed" && !formData) {
+            setIsExpanded(false);
+        }
     }, [status, formData]);
-    return (jsxRuntime.jsxs("div", { className: classes.progressItem, children: [jsxRuntime.jsxs("div", { className: classes.progressTrack, children: [jsxRuntime.jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsxRuntime.jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxRuntime.jsxs("div", { className: classes.progressContent, children: [jsxRuntime.jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsxRuntime.jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsxRuntime.jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxRuntime.jsxs("div", { className: classes.reasoningLabel, children: [jsxRuntime.jsx(SvgReasoningIcon, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsxRuntime.jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxRuntime.jsxs("div", { className: classes.progressSubItem, children: [step.header, step.sub_header ? ` - ${step.sub_header}` : ""] }, idx))) })), formData && isExpanded && (jsxRuntime.jsx("div", { className: classes.stepFormContainer, children: jsxRuntime.jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled }) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: classes.progressItem, children: [jsxRuntime.jsxs("div", { className: classes.progressTrack, children: [jsxRuntime.jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsxRuntime.jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxRuntime.jsxs("div", { className: classes.progressContent, children: [jsxRuntime.jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsxRuntime.jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsxRuntime.jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxRuntime.jsxs("div", { className: classes.reasoningLabel, children: [jsxRuntime.jsx(SvgReasoningIcon, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsxRuntime.jsx("div", { className: classes.progressSubItems, style: { opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxRuntime.jsxs("div", { className: classes.progressSubItem, children: [step.header, step.sub_header ? ` - ${step.sub_header}` : ""] }, idx))) })), formData && isExpanded && (jsxRuntime.jsx("div", { className: classes.stepFormContainer, children: jsxRuntime.jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled }) }))] })] }));
 };
 const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, }) => {
     const classes = useStyles$2();
@@ -6617,7 +6655,7 @@ const StreamedContent = ({ botData }) => {
             // }
             let endPoint = botData?.utilityObject?.endpoint
                 ? `${api.BASE_API}${botData?.utilityObject?.endpoint}`
-                : `${api.BASE_API}/core/chatbot/navigation-v2`;
+                : `${api.BASE_API}/core/chatbot/navigation-v3`;
             let method = botData?.utilityObject?.method
                 ? botData?.utilityObject?.method
                 : "PUT";
@@ -6745,17 +6783,48 @@ const StreamedContent = ({ botData }) => {
                         }
                         stepRef.current = newSteps;
                         setSteps(newSteps);
-                        if (currentIntent && questionsStepsMapRef.current[currentIntent]) {
+                        if (currentIntent) {
+                            // Auto-create entry if no questions chunk was received
+                            if (!questionsStepsMapRef.current[currentIntent]) {
+                                questionsStepsMapRef.current[currentIntent] = [
+                                    {
+                                        header: "Processing Request",
+                                        sub_header: "Analyzing the current request",
+                                        step_status: "not-completed",
+                                    },
+                                ];
+                                // Add intent to questions list if not already present
+                                if (!questionsRef.current.includes(currentIntent)) {
+                                    questionsRef.current = [...questionsRef.current, currentIntent];
+                                    setQuestions([...questionsRef.current]);
+                                }
+                            }
                             let intentSteps = lodash.cloneDeep(questionsStepsMapRef.current[currentIntent]);
-                            if (intentSteps.length === 1 && intentSteps[0].header === "Processing Request") {
-                                intentSteps[0].step_status = "completed";
+                            if (newStep.header) {
+                                // Only add/update sub-steps that have a non-empty header
+                                const existingIdx = intentSteps.findIndex((s) => s.header === newStep.header);
+                                if (existingIdx !== -1) {
+                                    intentSteps[existingIdx] = newStep;
+                                }
+                                else {
+                                    intentSteps.push(newStep);
+                                }
                             }
-                            const existingIdx = intentSteps.findIndex((s) => s.header === newStep.header);
-                            if (existingIdx !== -1) {
-                                intentSteps[existingIdx] = newStep;
+                            else if (newStep.step_status === "completed") {
+                                // Empty header + completed: remove the placeholder so no bullet shows
+                                const placeholderIdx = intentSteps.findIndex((s) => s.header === "Processing Request");
+                                if (placeholderIdx !== -1 && intentSteps.length === 1) {
+                                    intentSteps.splice(placeholderIdx, 1);
+                                }
+                                else if (placeholderIdx !== -1) {
+                                    intentSteps[placeholderIdx].step_status = "completed";
+                                }
                             }
-                            else {
-                                intentSteps.push(newStep);
+                            // If the latest step for this intent is completed, mark all sub-steps as completed
+                            if (newStep.step_status === "completed") {
+                                intentSteps.forEach((s) => {
+                                    s.step_status = "completed";
+                                });
                             }
                             questionsStepsMapRef.current[currentIntent] = intentSteps;
                             setQuestionsStepsMap(lodash.cloneDeep(questionsStepsMapRef.current));
@@ -6788,6 +6857,18 @@ const StreamedContent = ({ botData }) => {
                             setStepFormDataMap(lodash.cloneDeep(stepFormDataMapRef.current));
                         }
                         setStepChange((prev) => !prev);
+                        // Persist IDs immediately when step_form arrives (AxiosEventSource already set them)
+                        localStorage.setItem("stepForm_sessionId", messageToStoreRef.current.sessionId || "");
+                        localStorage.setItem("stepForm_chatId", messageToStoreRef.current.uniqueChatId || "");
+                        localStorage.setItem("stepForm_agentId", botData.inputBody?.agent_id || "");
+                        localStorage.setItem("stepForm_baseUrl", baseUrl || "");
+                        // If this is the [DONE] chunk, mark streaming as complete
+                        if (data.message === "[DONE]") {
+                            setIsStreamingDone(true);
+                            const doneState = streamStateMap.get(streamKey);
+                            if (doneState)
+                                doneState.completed = true;
+                        }
                     }
                     else if (data.message !== "[DONE]") {
                         setStepsDone(true);
@@ -6950,7 +7031,9 @@ const StreamedContent = ({ botData }) => {
                 let sendButton = document.getElementById("chat-input-send-button");
                 // sendButton.disabled = false;
                 let dummyButton = {};
+                const hasStepForm = !isEmpty(messageToStoreRef.current.stepFormData);
                 if (!wasStreamingAborted &&
+                    !hasStepForm &&
                     (!messageToStoreRef.current.initValue ||
                         messageToStoreRef.current.status === "follow-up")) {
                     dummyButton = {
@@ -7357,8 +7440,13 @@ const useStyles$1 = makeStyles((theme) => ({
         padding: `${pxToRem(8)} ${pxToRem(14)}`,
         background: colours.greys100,
         borderRadius: pxToRem(8),
-        overflow: "hidden",
         transition: "max-height 0.3s ease, opacity 0.3s ease",
+        overflow: "auto",
+        maxHeight: pxToRem(300),
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": {
+            display: "none",
+        },
     },
     reasoningLabel: {
         display: "flex",
@@ -7505,6 +7593,7 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
     const [stepFormDataMapState, setStepFormDataMapState] = React.useState(lodash.cloneDeep(initialStepFormDataMap));
     const [widgetContent, setWidgetContent] = React.useState([]);
     const [isRestreaming, setIsRestreaming] = React.useState(false);
+    const [stepFormSubmitted, setStepFormSubmitted] = React.useState(false);
     // Refs for accumulating state during streaming (avoids stale closures)
     const stepsRef = React.useRef(stepsState);
     const questionsRef = React.useRef(questionsState);
@@ -7545,6 +7634,7 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
         dispatch(smartBotActions.setStepFormStreamData(null));
         if (payload.status === "streaming_start") {
             setIsRestreaming(true);
+            setStepFormSubmitted(true);
             setTabValue("steps");
             return;
         }
@@ -7585,7 +7675,18 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
                     newSteps.push(newStep);
                 }
                 // Update per-question steps map
-                if (currentIntent && newQuestionsStepsMap[currentIntent]) {
+                if (currentIntent) {
+                    // If this is a new intent we haven't seen, add it to questions and map
+                    if (!newQuestionsStepsMap[currentIntent]) {
+                        newQuestions.push(currentIntent);
+                        newQuestionsStepsMap[currentIntent] = [
+                            {
+                                header: "Processing Request",
+                                sub_header: "Analyzing the current request",
+                                step_status: "not-completed",
+                            },
+                        ];
+                    }
                     const intentSteps = newQuestionsStepsMap[currentIntent];
                     if (intentSteps.length === 1 && intentSteps[0].header === "Processing Request") {
                         intentSteps[0].step_status = "completed";
@@ -7597,6 +7698,10 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
                     else {
                         intentSteps.push(newStep);
                     }
+                    // Mark all sub-steps completed when the latest step is completed
+                    if (newStep.step_status === "completed") {
+                        intentSteps.forEach((s) => { s.step_status = "completed"; });
+                    }
                     newQuestionsStepsMap[currentIntent] = intentSteps;
                 }
             }
@@ -7660,7 +7765,7 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
                     icon: jsxRuntime.jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsxRuntime.jsx(Steps, { steps: stepsState, questions: questionsState, questionsStepsMap: questionsStepsMapState, stepFormDataMap: stepFormDataMapState, isFormDisabled: isFormDisabled && !isRestreaming, isRestreaming: isRestreaming }),
+                jsxRuntime.jsx(Steps, { steps: stepsState, questions: questionsState, questionsStepsMap: questionsStepsMapState, stepFormDataMap: stepFormDataMapState, isFormDisabled: (isFormDisabled && !isRestreaming) || stepFormSubmitted, isRestreaming: isRestreaming }),
                 jsxRuntime.jsxs(AgentResponse, { children: [children, renderedWidgets.length > 0 && (jsxRuntime.jsx("div", { className: "restream-widget-content", children: renderedWidgets }))] }),
             ], value: tabValue }) }));
 };