impact-chatbot 2.3.37 → 2.3.39

package/dist/index.esm.js

@@ -26,6 +26,7 @@ import { CircularProgress, Typography, Grid } from '@mui/material';
 import { fetchBaseUrl, replaceSpecialCharacter as replaceSpecialCharacter$1, fetchLegacyAgentScreen } from 'core/Utils/functions/utils';
 import { Button, Modal, Slider, Select, DatePicker, DateRangePicker, Checkbox, RadioButtonGroup, Input, Tabs, Loader, Tooltip, ChatBotComponent } from 'impact-ui-v3';
 import isArray$2 from 'lodash/isArray';
+import { stopAgentFlow } from 'core/commonComponents/smartBot/services/chatbot-services';
 import AgGridComponent from 'core/Utils/agGrid';
 import agGridColumnFormatter from 'core/Utils/agGrid/column-formatter';
 import CoreChart from 'core/Utils/core-charts';
@@ -33,7 +34,6 @@ import makeStyles$1 from '@mui/styles/makeStyles';
 import ChevronRightIcon$1 from '@mui/icons-material/ChevronRight';
 import FormatListBulletedOutlinedIcon from '@mui/icons-material/FormatListBulletedOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
-import { stopAgentFlow } from 'core/commonComponents/smartBot/services/chatbot-services';
 import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import RangePicker from 'core/commonComponents/dateRangePicker';
 import NoFilterSetSavedIcon from 'core/coreAssets/chatbot/noFilterSetSaved.svg';
@@ -5263,6 +5263,17 @@ const AxiosSource = (url, opts, messageToStoreRef) => {
     }
 };
 
+// Module-level control object for step-form SSE stream.
+// StreamedContent imports this to show/hide the stop icon during the second init stream.
+const stepFormStreamControl = {
+    isStreaming: false,
+    abort: null,
+    // Session info — set by StreamedContent when step_form arrives
+    sessionId: "",
+    chatId: "",
+    agentId: "",
+    baseUrl: "",
+};
 const useStyles$5 = makeStyles((theme) => ({
     buttonContainer: {
         display: 'flex',
@@ -5323,11 +5334,11 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
         sendButton.click();
     };
     const callInitApiStream = (userInput) => {
-        // Get session/chat IDs from localStorage — set by StreamedContent on stream completion
-        const sessionId = localStorage.getItem("stepForm_sessionId") || "";
-        const chatId = localStorage.getItem("stepForm_chatId") || "";
-        const agentId = localStorage.getItem("stepForm_agentId") || "";
-        const baseUrl = localStorage.getItem("stepForm_baseUrl") || "";
+        // Prefer module-level values (set synchronously by StreamedContent), fall back to sessionStorage
+        const sessionId = stepFormStreamControl.sessionId || sessionStorage.getItem("stepForm_sessionId") || "";
+        const chatId = stepFormStreamControl.chatId || sessionStorage.getItem("stepForm_chatId") || "";
+        const agentId = stepFormStreamControl.agentId || sessionStorage.getItem("stepForm_agentId") || "";
+        const baseUrl = stepFormStreamControl.baseUrl || sessionStorage.getItem("stepForm_baseUrl") || "";
         const payload = {
             agent_id: agentId,
             session_id: sessionId,
@@ -5341,8 +5352,25 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
             : `${BASE_API}/core/chatbot/agent/init`;
         // Collect all chunks, dispatch once when stream ends
         const chunksRef = [];
-        // Signal that streaming has started
+        // Expose stream control BEFORE Redux dispatch so SmartBot index.jsx can show stop icon
+        stepFormStreamControl.isStreaming = true;
+        stepFormStreamControl.abort = () => {
+            if (sourceRef.current) {
+                sourceRef.current.close();
+                sourceRef.current = null;
+            }
+            stepFormStreamControl.isStreaming = false;
+            stepFormStreamControl.abort = null;
+            // Stop the agent flow on the backend (same as StreamedContent.abortStreaming)
+            if (sessionId) {
+                stopAgentFlow({ session_id: sessionId }, baseUrl);
+            }
+            dispatch(setStepFormStreamData({ status: "error", chunks: [...chunksRef] }));
+        };
+        // Signal that streaming has started (after setting stepFormStreamControl so useEffect sees the flag)
         dispatch(setStepFormStreamData({ status: "streaming_start", chunks: [] }));
+        // Fire DOM event so SmartBot can show stop icon (Redux gets cleared by TabularContent before parent effects run)
+        window.dispatchEvent(new CustomEvent("stepFormStreamStart"));
         sourceRef.current = AxiosSource(endPoint, {
             method: "POST",
             headers: {
@@ -5362,11 +5390,21 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
                     chunksRef.push(data);
                     // If this chunk also carries [DONE], dispatch collected chunks now
                     if (data?.message === "[DONE]") {
+                        stepFormStreamControl.isStreaming = false;
+                        stepFormStreamControl.abort = null;
+                        window.dispatchEvent(new CustomEvent("stepFormStreamEnd"));
                         dispatch(setStepFormStreamData({ status: "done", chunks: [...chunksRef] }));
                     }
                 }
                 else if (data?.status === "completed" || data?.message === "[DONE]") {
                     // Stream ended — dispatch all collected chunks at once
+                    stepFormStreamControl.isStreaming = false;
+                    stepFormStreamControl.abort = null;
+                    window.dispatchEvent(new CustomEvent("stepFormStreamEnd"));
+                    // Signal tab switch to agent_response when status is "completed"
+                    if (data?.status === "completed") {
+                        window.dispatchEvent(new CustomEvent("stepFormStreamCompleted"));
+                    }
                     dispatch(setStepFormStreamData({ status: "done", chunks: [...chunksRef] }));
                 }
                 else if (data?.message) {
@@ -5379,6 +5417,9 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
         });
         sourceRef.current.addEventListener("error", () => {
             // On error, still dispatch whatever we collected
+            stepFormStreamControl.isStreaming = false;
+            stepFormStreamControl.abort = null;
+            window.dispatchEvent(new CustomEvent("stepFormStreamEnd"));
             dispatch(setStepFormStreamData({ status: "error", chunks: chunksRef }));
         });
     };
@@ -5432,7 +5473,7 @@ const TableContent = ({ bodyText }) => {
     }, [row_data]);
     const serverSideManualCallBack = async (manualbody, pageIndex, params) => {
         try {
-            const baseUrl = localStorage.getItem("stepForm_baseUrl") || "";
+            const baseUrl = sessionStorage.getItem("stepForm_baseUrl") || "";
             const response = await getTableRecords(baseUrl, table_name, pageIndex + 1, page_size);
             return {
                 data: response?.data?.data || [],
@@ -5990,7 +6031,7 @@ const ImageContent = ({ bodyText }) => {
  * @param {Array} props.formData - Array of raw widget_data items from step_form chunk
  * @param {number} props.messageIndex - Index for form state persistence keys
  */
-const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false }) => {
+const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, showSavedFilters = true }) => {
     const dispatch = useDispatch();
     const savedFilterSets = useSelector((state) => state.smartBotReducer.savedFilterSets);
     const persistedFormValues = useSelector((state) => state.smartBotReducer.persistedFormValues);
@@ -6161,7 +6202,7 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false })
     });
     if (formFields.length === 0 && buttonItems.length === 0)
         return null;
-    return (jsxs("div", { className: "step-form-content", children: [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 }) })), filterSetOptions.length > 0 && (jsx("hr", { style: { border: "none", borderTop: "1px solid #E0E0E0", margin: "12px 0" } })), jsx("div", { style: {
+    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] }));
 };
@@ -6234,8 +6275,8 @@ const useStyles$3 = makeStyles$1((theme) => ({
         "&.completed": {
             width: pxToRem(10),
             height: pxToRem(10),
-            background: colours.greyscale250,
-            border: `${pxToRem(3)} solid ${colours.greyscale150}`,
+            background: "#4CAF50",
+            border: `${pxToRem(3)} solid #C8E6C9`,
             boxSizing: "content-box",
         },
         "&.in-progress": {
@@ -6383,9 +6424,11 @@ const getQuestionStatus$1 = (questionSteps) => {
 /**
  * Renders a single progress bar item (main point + sub-items)
  */
-const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData, isFormDisabled }) => {
-    const status = getQuestionStatus$1(questionSteps);
-    const [isExpanded, setIsExpanded] = useState(status === "in-progress" || status === "error");
+const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData, showSavedFilters = true, isFormDisabled, isRestreaming = false }) => {
+    const baseStatus = getQuestionStatus$1(questionSteps);
+    // When restreaming and this is the last item, show as in-progress
+    const status = (isRestreaming && isLast) ? "in-progress" : baseStatus;
+    const [isExpanded, setIsExpanded] = useState(true);
     const dotClass = status === "completed"
         ? "completed"
         : status === "in-progress"
@@ -6409,11 +6452,8 @@ 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 (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, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxs("div", { className: classes.progressSubItem, children: [step.header, step.sub_header ? ` - ${step.sub_header}` : ""] }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled }) }))] })] }));
+    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, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxs("div", { className: classes.progressSubItem, children: [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 }) }))] })] }));
 };
 const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, }) => {
     const classes = useStyles$3();
@@ -6463,7 +6503,7 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                     step_status: "not-completed",
                 },
             ];
-        return (jsx("div", { className: classes.progressBarContainer, children: jsx(ProgressBarItem$1, { question: fallbackQuestion, questionSteps: fallbackSteps, isLast: true, classes: classes, formData: null, isFormDisabled: isFormDisabled }) }));
+        return (jsx("div", { className: classes.progressBarContainer, children: jsx(ProgressBarItem$1, { question: fallbackQuestion, questionSteps: fallbackSteps, isLast: true, classes: classes, formData: null, isFormDisabled: isFormDisabled, showSavedFilters: true }) }));
     }
     return (jsx("div", { className: classes.progressBarContainer, children: questions.map((question, index) => {
             const questionData = questionsStepsMap[question];
@@ -6474,8 +6514,10 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                     step_status: "not-completed",
                 },
             ];
-            const formData = stepFormDataMap[question] || null;
-            return (jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: index === questions.length - 1, classes: classes, formData: formData, isFormDisabled: isFormDisabled }, index));
+            const formEntry = stepFormDataMap[question] || null;
+            const formData = formEntry ? (Array.isArray(formEntry) ? formEntry : formEntry.widgets) : null;
+            const showSavedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.showSavedFilters : true;
+            return (jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: index === questions.length - 1, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters }, index));
         }) }));
 };
 
@@ -6657,7 +6699,7 @@ const StreamedContent = ({ botData }) => {
             // }
             let endPoint = botData?.utilityObject?.endpoint
                 ? `${BASE_API}${botData?.utilityObject?.endpoint}`
-                : `${BASE_API}/core/chatbot/navigation-v3`;
+                : `${BASE_API}/core/chatbot/navigation-v2`;
             let method = botData?.utilityObject?.method
                 ? botData?.utilityObject?.method
                 : "PUT";
@@ -6729,6 +6771,7 @@ const StreamedContent = ({ botData }) => {
                             session_id: data?.session_id || "",
                         },
                     }));
+                    return;
                 }
                 if (data?.message || data?.status === "step" || data?.status === "step_form" || data?.status === "thinking" || data?.status === "questions") {
                     if (data.status === "questions") {
@@ -6855,15 +6898,27 @@ const StreamedContent = ({ botData }) => {
                                     ],
                                 },
                             };
-                            stepFormDataMapRef.current[currentIntent] = [...formWidgetData, stepFormSubmitButton];
+                            stepFormDataMapRef.current[currentIntent] = {
+                                widgets: [...formWidgetData, stepFormSubmitButton],
+                                showSavedFilters: data.show_saved_filters !== false,
+                            };
                             setStepFormDataMap(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 || "");
+                        const _sid = messageToStoreRef.current.sessionId || "";
+                        const _cid = messageToStoreRef.current.uniqueChatId || "";
+                        const _aid = botData.inputBody?.agent_id || "";
+                        const _burl = baseUrl || "";
+                        sessionStorage.setItem("stepForm_sessionId", _sid);
+                        sessionStorage.setItem("stepForm_chatId", _cid);
+                        sessionStorage.setItem("stepForm_agentId", _aid);
+                        sessionStorage.setItem("stepForm_baseUrl", _burl);
+                        // Also set on module-level control object (survives async timing issues)
+                        stepFormStreamControl.sessionId = _sid;
+                        stepFormStreamControl.chatId = _cid;
+                        stepFormStreamControl.agentId = _aid;
+                        stepFormStreamControl.baseUrl = _burl;
                         // If this is the [DONE] chunk, mark streaming as complete
                         if (data.message === "[DONE]") {
                             setIsStreamingDone(true);
@@ -6873,7 +6928,6 @@ const StreamedContent = ({ botData }) => {
                         }
                     }
                     else if (data.message !== "[DONE]") {
-                        setStepsDone(true);
                         if (!thinkingDoneRef?.current && currentMode === "agent") {
                             thinkingDoneRef.current = true;
                             setThinkDone(true);
@@ -6900,6 +6954,10 @@ const StreamedContent = ({ botData }) => {
                         });
                     }
                     else {
+                        // message === "[DONE]" with status "completed" — switch to agent_response tab
+                        if (data.status === "completed") {
+                            setStepsDone(true);
+                        }
                         setIsStreamingDone(true);
                         const doneState = streamStateMap.get(streamKey);
                         if (doneState)
@@ -7017,10 +7075,15 @@ const StreamedContent = ({ botData }) => {
                     dispatch(setCurrentAgentChatId(messageToStoreRef.current.uniqueChatId));
                 }
                 // Persist IDs for step form restream (ButtonContent reads these)
-                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 || "");
+                sessionStorage.setItem("stepForm_sessionId", messageToStoreRef.current.sessionId || "");
+                sessionStorage.setItem("stepForm_chatId", messageToStoreRef.current.uniqueChatId || "");
+                sessionStorage.setItem("stepForm_agentId", botData.inputBody?.agent_id || "");
+                sessionStorage.setItem("stepForm_baseUrl", baseUrl || "");
+                // Also sync module-level control object
+                stepFormStreamControl.sessionId = messageToStoreRef.current.sessionId || "";
+                stepFormStreamControl.chatId = messageToStoreRef.current.uniqueChatId || "";
+                stepFormStreamControl.agentId = botData.inputBody?.agent_id || "";
+                stepFormStreamControl.baseUrl = baseUrl || "";
                 let appendedDataLength = 0;
                 // Use appendedDataFromLastChunk for field number calculation like host app
                 if (isArray(messageToStoreRef.current.appendedDataFromLastChunk)) {
@@ -7075,7 +7138,7 @@ const StreamedContent = ({ botData }) => {
                     newChatData: chatDataInfoRef,
                     isTabEnabled: true,
                     steps: cloneDeep(stepRef.current),
-                    currentTabValue: "agent_response",
+                    currentTabValue: stepsDone ? "agent_response" : undefined,
                     questions: cloneDeep(questionsRef.current),
                     questionsStepsMap: cloneDeep(questionsStepsMapRef.current),
                     stepFormDataMap: cloneDeep(stepFormDataMapRef.current),
@@ -7161,7 +7224,7 @@ const StreamedContent = ({ botData }) => {
                     newChatData: chatDataInfoRef,
                     isTabEnabled: true,
                     steps: cloneDeep(stepRef.current),
-                    currentTabValue: "agent_response",
+                    currentTabValue: stepsDone ? "agent_response" : undefined,
                     questions: cloneDeep(questionsRef.current),
                     questionsStepsMap: cloneDeep(questionsStepsMapRef.current),
                     stepFormDataMap: cloneDeep(stepFormDataMapRef.current),
@@ -7373,8 +7436,8 @@ const useStyles$2 = makeStyles$1((theme) => ({
         "&.completed": {
             width: pxToRem(10),
             height: pxToRem(10),
-            background: colours.greyscale250,
-            border: `${pxToRem(3)} solid ${colours.greyscale150}`,
+            background: "#4CAF50",
+            border: `${pxToRem(3)} solid #C8E6C9`,
             boxSizing: "content-box",
         },
         "&.in-progress": {
@@ -7516,11 +7579,11 @@ const getQuestionStatus = (questionSteps) => {
 /**
  * Renders a single progress bar item (main point + sub-items)
  */
-const ProgressBarItem = ({ question, questionSteps, isLast, classes, formData, isFormDisabled, isRestreaming = false }) => {
+const ProgressBarItem = ({ question, questionSteps, isLast, classes, formData, isFormDisabled, isRestreaming = false, showSavedFilters = true }) => {
     const baseStatus = getQuestionStatus(questionSteps);
     // When restreaming and this is the last item, show as in-progress
     const status = (isRestreaming && isLast) ? "in-progress" : baseStatus;
-    const [isExpanded, setIsExpanded] = useState(status === "in-progress" || status === "error");
+    const [isExpanded, setIsExpanded] = useState(true);
     const dotClass = status === "completed"
         ? "completed"
         : status === "in-progress"
@@ -7545,9 +7608,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, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxs("div", { className: classes.progressSubItem, children: [step.header, step.sub_header ? ` - ${step.sub_header}` : ""] }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled }) }))] })] }));
+    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, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxs("div", { className: classes.progressSubItem, children: [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 }) }))] })] }));
 };
-const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, isRestreaming = false }) => {
+const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, activeFormIntent = null, isRestreaming = false }) => {
     const classes = useStyles$2();
     useState(false);
     const hasQuestions = questions.length > 0;
@@ -7567,8 +7630,15 @@ const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap
                     step_status: "completed",
                 },
             ];
-            const formData = stepFormDataMap[question] || null;
-            return (jsx(ProgressBarItem, { question: question, questionSteps: questionSteps, isLast: index === questions.length - 1, classes: classes, formData: formData, isFormDisabled: isFormDisabled, isRestreaming: isRestreaming }, index));
+            const formEntry = stepFormDataMap[question] || null;
+            // Support both old array format and new object format { widgets, showSavedFilters }
+            const formData = formEntry ? (Array.isArray(formEntry) ? formEntry : formEntry.widgets) : null;
+            const showSavedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.showSavedFilters : true;
+            // If activeFormIntent is set, only the matching form is enabled; all others stay disabled
+            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 }, index));
         }) }));
 };
 
@@ -7600,6 +7670,7 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
     const [isRestreaming, setIsRestreaming] = useState(false);
     const [stepFormSubmitted, setStepFormSubmitted] = useState(false);
     const [hasNewStepFormFromRestream, setHasNewStepFormFromRestream] = useState(false);
+    const [activeFormIntent, setActiveFormIntent] = useState(null);
     // Refs for accumulating state during streaming (avoids stale closures)
     const stepsRef = useRef(stepsState);
     const questionsRef = useRef(questionsState);
@@ -7608,6 +7679,16 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
     const handleChangeTabValue = (_event, newValue) => {
         setTabValue(newValue);
     };
+    // Switch to agent_response tab when ButtonContent's nth init stream completes with status "completed"
+    useEffect(() => {
+        const handleStepFormCompleted = () => {
+            setTabValue("agent_response");
+        };
+        window.addEventListener("stepFormStreamCompleted", handleStepFormCompleted);
+        return () => {
+            window.removeEventListener("stepFormStreamCompleted", handleStepFormCompleted);
+        };
+    }, []);
     // Render a widget item from SSE data
     const renderWidget = (item, index) => {
         try {
@@ -7694,9 +7775,11 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
                             },
                         ];
                     }
-                    const intentSteps = newQuestionsStepsMap[currentIntent];
-                    if (intentSteps.length === 1 && intentSteps[0].header === "Processing Request") {
-                        intentSteps[0].step_status = "completed";
+                    let intentSteps = newQuestionsStepsMap[currentIntent];
+                    // Remove placeholder if the real step has a header
+                    if (newStep.header && intentSteps.length === 1 && intentSteps[0].header === "Processing Request") {
+                        intentSteps = [];
+                        newQuestionsStepsMap[currentIntent] = intentSteps;
                     }
                     const existingStepIdx = intentSteps.findIndex((s) => s.header === newStep.header);
                     if (existingStepIdx !== -1) {
@@ -7730,7 +7813,10 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
                             ],
                         },
                     };
-                    newStepFormDataMap[currentIntent] = [...formWidgetData, submitButton];
+                    newStepFormDataMap[currentIntent] = {
+                        widgets: [...formWidgetData, submitButton],
+                        showSavedFilters: data.show_saved_filters !== false,
+                    };
                 }
             }
             if (data.status === "widget") {
@@ -7757,10 +7843,16 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
             setWidgetContent((prev) => [...prev, ...newWidgets]);
         }
         // If the response contains a new step_form, reset stepFormSubmitted and mark new form as active
-        const hasNewStepForm = chunks.some((c) => c.status === "step_form");
-        if (hasNewStepForm) {
+        const lastStepFormChunk = [...chunks].reverse().find((c) => c.status === "step_form");
+        if (lastStepFormChunk) {
+            const formWidgetData = isArray$2(lastStepFormChunk.widget_data) ? lastStepFormChunk.widget_data : [lastStepFormChunk.widget_data];
+            const latestIntent = lastStepFormChunk.current_intent || formWidgetData?.[0]?.current_intent;
             setStepFormSubmitted(false);
             setHasNewStepFormFromRestream(true);
+            setActiveFormIntent(latestIntent || null);
+            // Clear stale persisted form values and context so the new form starts fresh
+            dispatch(clearPersistedFormValues());
+            dispatch(setChatbotContext({}));
         }
         setIsRestreaming(false);
     }, [stepFormStreamData]);
@@ -7778,7 +7870,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: hasNewStepFormFromRestream ? false : ((isFormDisabled && !isRestreaming) || stepFormSubmitted), isRestreaming: isRestreaming }),
+                jsx(Steps, { steps: stepsState, questions: questionsState, questionsStepsMap: questionsStepsMapState, stepFormDataMap: stepFormDataMapState, isFormDisabled: (isFormDisabled && !isRestreaming) || stepFormSubmitted, activeFormIntent: hasNewStepFormFromRestream ? activeFormIntent : null, isRestreaming: isRestreaming }),
                 jsxs(AgentResponse, { children: [children, renderedWidgets.length > 0 && (jsx("div", { className: "restream-widget-content", children: renderedWidgets }))] }),
             ], value: tabValue }) }));
 };
@@ -11532,6 +11624,36 @@ const SmartBot = (props) => {
         setFieldNumber,
         setAdditionalArgs,
     });
+    // Show/hide stop icon when step-form restream (second init API from ButtonContent) starts/ends.
+    // Must live here (SmartBot) because StreamedContent unmounts after the first stream completes.
+    useEffect(() => {
+        const handleStepFormStreamStart = () => {
+            setIsStop(true);
+            const { stepFormStreamControl } = require("./components/message-template/components/message-content/ButtonContent");
+            const abortStepFormStream = () => {
+                if (stepFormStreamControl.abort) {
+                    stepFormStreamControl.abort();
+                }
+                setIsStop(false);
+            };
+            setFunctionsState((prev) => ({
+                ...prev,
+                abortStreaming: abortStepFormStream,
+            }));
+            if (functionsRef?.current) {
+                functionsRef.current.abortStreaming = abortStepFormStream;
+            }
+        };
+        const handleStepFormStreamEnd = () => {
+            setIsStop(false);
+        };
+        window.addEventListener("stepFormStreamStart", handleStepFormStreamStart);
+        window.addEventListener("stepFormStreamEnd", handleStepFormStreamEnd);
+        return () => {
+            window.removeEventListener("stepFormStreamStart", handleStepFormStreamStart);
+            window.removeEventListener("stepFormStreamEnd", handleStepFormStreamEnd);
+        };
+    }, []);
     const fetchCustomBotConfigurations = async () => {
         try {
             // const response = await fetchCustomBotConfig(baseUrl);