impact-chatbot 2.3.38 → 2.3.40

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

@@ -1,3 +1,11 @@
+export declare const stepFormStreamControl: {
+    isStreaming: boolean;
+    abort: any;
+    sessionId: string;
+    chatId: string;
+    agentId: string;
+    baseUrl: string;
+};
 declare const ButtonContent: ({ bodyText, isFormDisabled, isStepFormSubmit, isFormValid }: {
     bodyText: any;
     isFormDisabled?: boolean;

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

@@ -7,9 +7,10 @@
  * @param {Array} props.formData - Array of raw widget_data items from step_form chunk
  * @param {number} props.messageIndex - Index for form state persistence keys
  */
-declare const StepFormContent: ({ formData, messageIndex, isFormDisabled }: {
+declare const StepFormContent: ({ formData, messageIndex, isFormDisabled, showSavedFilters }: {
     formData: any;
     messageIndex?: number;
     isFormDisabled?: boolean;
+    showSavedFilters?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default StepFormContent;

package/dist/components/message-template/components/message-content/tabular-content/components/Steps.d.ts

@@ -1,9 +1,10 @@
-declare const Steps: ({ steps, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, isRestreaming }: {
+declare const Steps: ({ steps, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, activeFormIntent, isRestreaming }: {
     steps: any;
     questions?: any[];
     questionsStepsMap?: {};
     stepFormDataMap?: {};
     isFormDisabled?: boolean;
+    activeFormIntent?: any;
     isRestreaming?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Steps;

package/dist/index.cjs.js

@@ -29,6 +29,7 @@ var material = require('@mui/material');
 var utils = require('core/Utils/functions/utils');
 var impactUiV3 = require('impact-ui-v3');
 var isArray$1 = require('lodash/isArray');
+var chatbotServices = require('core/commonComponents/smartBot/services/chatbot-services');
 var AgGridComponent = require('core/Utils/agGrid');
 var agGridColumnFormatter = require('core/Utils/agGrid/column-formatter');
 var CoreChart = require('core/Utils/core-charts');
@@ -36,7 +37,6 @@ var makeStyles = require('@mui/styles/makeStyles');
 var ChevronRightIcon$1 = require('@mui/icons-material/ChevronRight');
 var FormatListBulletedOutlinedIcon = require('@mui/icons-material/FormatListBulletedOutlined');
 var PsychologyOutlinedIcon = require('@mui/icons-material/PsychologyOutlined');
-var chatbotServices = require('core/commonComponents/smartBot/services/chatbot-services');
 var SaveOutlinedIcon = require('@mui/icons-material/SaveOutlined');
 var RangePicker = require('core/commonComponents/dateRangePicker');
 var NoFilterSetSavedIcon = require('core/coreAssets/chatbot/noFilterSetSaved.svg');
@@ -5285,6 +5285,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 = styles.makeStyles((theme) => ({
     buttonContainer: {
         display: 'flex',
@@ -5345,11 +5356,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,
@@ -5363,8 +5374,25 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
             : `${api.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) {
+                chatbotServices.stopAgentFlow({ session_id: sessionId }, baseUrl);
+            }
+            dispatch(smartBotActions.setStepFormStreamData({ status: "error", chunks: [...chunksRef] }));
+        };
+        // Signal that streaming has started (after setting stepFormStreamControl so useEffect sees the flag)
         dispatch(smartBotActions.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: {
@@ -5384,11 +5412,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(smartBotActions.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(smartBotActions.setStepFormStreamData({ status: "done", chunks: [...chunksRef] }));
                 }
                 else if (data?.message) {
@@ -5401,6 +5439,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(smartBotActions.setStepFormStreamData({ status: "error", chunks: chunksRef }));
         });
     };
@@ -5454,7 +5495,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 || [],
@@ -6012,7 +6053,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 = reactRedux.useDispatch();
     const savedFilterSets = reactRedux.useSelector((state) => state.smartBotReducer.savedFilterSets);
     const persistedFormValues = reactRedux.useSelector((state) => state.smartBotReducer.persistedFormValues);
@@ -6183,7 +6224,7 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false })
     });
     if (formFields.length === 0 && buttonItems.length === 0)
         return null;
-    return (jsxRuntime.jsxs("div", { className: "step-form-content", children: [filterSetOptions.length > 0 && (jsxRuntime.jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsxRuntime.jsx(impactUiV3.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 && (jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #E0E0E0", margin: "12px 0" } })), jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsxs("div", { className: "step-form-content", children: [showSavedFilters && filterSetOptions.length > 0 && (jsxRuntime.jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsxRuntime.jsx(impactUiV3.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 && (jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #E0E0E0", margin: "12px 0" } })), jsxRuntime.jsx("div", { style: {
                     ...(isFilterSelected && !isFormDisabled ? { pointerEvents: "none", opacity: 0.5 } : {}),
                 }, children: formFields }), buttonItems] }));
 };
@@ -6256,8 +6297,8 @@ const useStyles$3 = makeStyles((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": {
@@ -6405,9 +6446,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] = React.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] = React.useState(true);
     const dotClass = status === "completed"
         ? "completed"
         : status === "in-progress"
@@ -6431,11 +6474,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 (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 }) }))] })] }));
+    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, showSavedFilters: showSavedFilters }) }))] })] }));
 };
 const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, }) => {
     const classes = useStyles$3();
@@ -6485,7 +6525,7 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                     step_status: "not-completed",
                 },
             ];
-        return (jsxRuntime.jsx("div", { className: classes.progressBarContainer, children: jsxRuntime.jsx(ProgressBarItem$1, { question: fallbackQuestion, questionSteps: fallbackSteps, isLast: true, classes: classes, formData: null, isFormDisabled: isFormDisabled }) }));
+        return (jsxRuntime.jsx("div", { className: classes.progressBarContainer, children: jsxRuntime.jsx(ProgressBarItem$1, { question: fallbackQuestion, questionSteps: fallbackSteps, isLast: true, classes: classes, formData: null, isFormDisabled: isFormDisabled, showSavedFilters: true }) }));
     }
     return (jsxRuntime.jsx("div", { className: classes.progressBarContainer, children: questions.map((question, index) => {
             const questionData = questionsStepsMap[question];
@@ -6496,8 +6536,10 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                     step_status: "not-completed",
                 },
             ];
-            const formData = stepFormDataMap[question] || null;
-            return (jsxRuntime.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 (jsxRuntime.jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: index === questions.length - 1, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters }, index));
         }) }));
 };
 
@@ -6751,6 +6793,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") {
@@ -6877,15 +6920,27 @@ const StreamedContent = ({ botData }) => {
                                     ],
                                 },
                             };
-                            stepFormDataMapRef.current[currentIntent] = [...formWidgetData, stepFormSubmitButton];
+                            stepFormDataMapRef.current[currentIntent] = {
+                                widgets: [...formWidgetData, stepFormSubmitButton],
+                                showSavedFilters: data.show_saved_filters !== false,
+                            };
                             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 || "");
+                        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);
@@ -6895,7 +6950,6 @@ const StreamedContent = ({ botData }) => {
                         }
                     }
                     else if (data.message !== "[DONE]") {
-                        setStepsDone(true);
                         if (!thinkingDoneRef?.current && currentMode === "agent") {
                             thinkingDoneRef.current = true;
                             setThinkDone(true);
@@ -6922,6 +6976,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)
@@ -7039,10 +7097,15 @@ const StreamedContent = ({ botData }) => {
                     dispatch(smartBotActions.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)) {
@@ -7097,7 +7160,7 @@ const StreamedContent = ({ botData }) => {
                     newChatData: chatDataInfoRef,
                     isTabEnabled: true,
                     steps: lodash.cloneDeep(stepRef.current),
-                    currentTabValue: "agent_response",
+                    currentTabValue: stepsDone ? "agent_response" : undefined,
                     questions: lodash.cloneDeep(questionsRef.current),
                     questionsStepsMap: lodash.cloneDeep(questionsStepsMapRef.current),
                     stepFormDataMap: lodash.cloneDeep(stepFormDataMapRef.current),
@@ -7183,7 +7246,7 @@ const StreamedContent = ({ botData }) => {
                     newChatData: chatDataInfoRef,
                     isTabEnabled: true,
                     steps: lodash.cloneDeep(stepRef.current),
-                    currentTabValue: "agent_response",
+                    currentTabValue: stepsDone ? "agent_response" : undefined,
                     questions: lodash.cloneDeep(questionsRef.current),
                     questionsStepsMap: lodash.cloneDeep(questionsStepsMapRef.current),
                     stepFormDataMap: lodash.cloneDeep(stepFormDataMapRef.current),
@@ -7395,8 +7458,8 @@ const useStyles$2 = makeStyles((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": {
@@ -7538,11 +7601,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] = React.useState(status === "in-progress" || status === "error");
+    const [isExpanded, setIsExpanded] = React.useState(true);
     const dotClass = status === "completed"
         ? "completed"
         : status === "in-progress"
@@ -7567,9 +7630,9 @@ const ProgressBarItem = ({ question, questionSteps, isLast, classes, formData, i
             setIsExpanded(true);
         }
     }, [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: { 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, 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();
     React.useState(false);
     const hasQuestions = questions.length > 0;
@@ -7589,8 +7652,15 @@ const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap
                     step_status: "completed",
                 },
             ];
-            const formData = stepFormDataMap[question] || null;
-            return (jsxRuntime.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 (jsxRuntime.jsx(ProgressBarItem, { question: question, questionSteps: questionSteps, isLast: index === questions.length - 1, classes: classes, formData: formData, isFormDisabled: formDisabledForThis, isRestreaming: isRestreaming, showSavedFilters: showSavedFilters }, index));
         }) }));
 };
 
@@ -7622,6 +7692,7 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
     const [isRestreaming, setIsRestreaming] = React.useState(false);
     const [stepFormSubmitted, setStepFormSubmitted] = React.useState(false);
     const [hasNewStepFormFromRestream, setHasNewStepFormFromRestream] = React.useState(false);
+    const [activeFormIntent, setActiveFormIntent] = React.useState(null);
     // Refs for accumulating state during streaming (avoids stale closures)
     const stepsRef = React.useRef(stepsState);
     const questionsRef = React.useRef(questionsState);
@@ -7630,6 +7701,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"
+    React.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 {
@@ -7716,9 +7797,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) {
@@ -7752,7 +7835,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") {
@@ -7779,10 +7865,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$1(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(smartBotActions.clearPersistedFormValues());
+            dispatch(smartBotActions.setChatbotContext({}));
         }
         setIsRestreaming(false);
     }, [stepFormStreamData]);
@@ -7800,7 +7892,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: hasNewStepFormFromRestream ? false : ((isFormDisabled && !isRestreaming) || stepFormSubmitted), isRestreaming: isRestreaming }),
+                jsxRuntime.jsx(Steps, { steps: stepsState, questions: questionsState, questionsStepsMap: questionsStepsMapState, stepFormDataMap: stepFormDataMapState, isFormDisabled: (isFormDisabled && !isRestreaming) || stepFormSubmitted, activeFormIntent: hasNewStepFormFromRestream ? activeFormIntent : null, isRestreaming: isRestreaming }),
                 jsxRuntime.jsxs(AgentResponse, { children: [children, renderedWidgets.length > 0 && (jsxRuntime.jsx("div", { className: "restream-widget-content", children: renderedWidgets }))] }),
             ], value: tabValue }) }));
 };
@@ -11554,6 +11646,35 @@ 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.
+    React.useEffect(() => {
+        const handleStepFormStreamStart = () => {
+            setIsStop(true);
+            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);