impact-chatbot 2.3.82 → 2.3.83

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

@@ -7,12 +7,16 @@
  * @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, showSavedFilters, preSelectedFilters }: {
+declare const StepFormContent: ({ formData, messageIndex, isFormDisabled, showSavedFilters, preSelectedFilters, botProps, currentMode, agentId, sessionId, }: {
     formData: any;
     messageIndex?: number;
     isFormDisabled?: boolean;
     showSavedFilters?: boolean;
     preSelectedFilters?: any;
+    botProps?: any;
+    currentMode?: string;
+    agentId?: string;
+    sessionId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 /** Reset the timeout flag (call when a new conversation/message starts) */
 export declare const resetStepFormTimeoutFlag: () => void;

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

@@ -1,4 +1,4 @@
-declare const TabularContent: ({ steps: initialSteps, currentTabValue, children, questions: initialQuestions, questionsStepsMap: initialQuestionsStepsMap, stepFormDataMap: initialStepFormDataMap, isFormDisabled, sessionId: propSessionId }: {
+declare const TabularContent: ({ steps: initialSteps, currentTabValue, children, questions: initialQuestions, questionsStepsMap: initialQuestionsStepsMap, stepFormDataMap: initialStepFormDataMap, isFormDisabled, sessionId: propSessionId, botProps, currentMode, agentId }: {
     steps: any;
     currentTabValue: any;
     children: any;
@@ -7,6 +7,9 @@ declare const TabularContent: ({ steps: initialSteps, currentTabValue, children,
     stepFormDataMap?: {};
     isFormDisabled?: boolean;
     sessionId?: string;
+    botProps?: any;
+    currentMode?: string;
+    agentId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 /** Reset the active instance tracker (call when a new conversation starts from the input field) */
 export declare const resetActiveTabularInstance: () => void;

package/dist/components/message-template/components/message-types/streamed-content/StreamedContent.d.ts

@@ -10,7 +10,8 @@
  * @param {React.RefObject} botData.utilityObject.chatBodyRef - Ref to chat body element
  * @param {Function} botData.utilityObject.setChatDataState - Function to update chat data state
  */
-declare const StreamedContent: ({ botData }: {
+declare const StreamedContent: ({ botData, botProps }: {
     botData: any;
+    botProps: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export default StreamedContent;

package/dist/components/message-template/components/message-types/streamed-content/steps-response-tab/components/Steps.d.ts

@@ -1,4 +1,4 @@
-declare const Steps: ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, }: {
+declare const Steps: ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, botProps, agentId, sessionId, }: {
     steps: any;
     setSteps: any;
     done: any;
@@ -12,5 +12,8 @@ declare const Steps: ({ steps, setSteps, done, setTabValue, setDone, finalStepDo
     questionsStepsMap?: {};
     stepFormDataMap?: {};
     isFormDisabled?: boolean;
+    botProps?: any;
+    agentId?: string;
+    sessionId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Steps;

package/dist/index.cjs.js

@@ -348,9 +348,9 @@ const parseResponse = (data, type, agentId = "", currentMode = "", disableTimeAn
                 userType: "bot",
                 userName: userName,
                 bodyText: data?.response,
-                headerTitle: data?.response_heading,
+                headerTitle: "",
                 thinkingResponse: data?.thinkingResponse,
-                noShowHeaderTitle: false,
+                noShowHeaderTitle: true,
                 bodyType: "text",
             };
         case "stream":
@@ -614,7 +614,8 @@ const parseResponse = (data, type, agentId = "", currentMode = "", disableTimeAn
                 timeStamp: timeString,
                 userType: "bot",
                 userName: userName,
-                headerTitle: data?.response_heading || "",
+                headerTitle: "",
+                noShowHeaderTitle: true,
                 bodyType: "image",
                 bodyText: data?.image || data,
             };
@@ -5031,7 +5032,7 @@ const ChipsContent = ({ bodyText, props }) => {
     const classes = useStyles$a();
     const globalClasses = globalStyles();
     return (jsxRuntime.jsx("div", { className: `${globalClasses.flexRow} ${globalClasses.flexWrap} ${globalClasses.gap} ${globalClasses.verticalAlignCenter}`, children: bodyText.map((data, index) => {
-            const callBack = data.interactable
+            const callBack = data.interactable && props
                 ? Object.entries(props).filter((entry) => entry[0] === data.actionName)?.[0]?.[1]
                 : null;
             return (jsxRuntime.jsx(material.Typography, { component: "span", variant: "body1", className: `${classes.gptChips} ${data.interactable ? globalClasses.cursorPointer : ""}`, onClick: () => {
@@ -5098,7 +5099,7 @@ const QuestionsContent = ({ bodyText, props }) => {
         };
     };
     return (jsxRuntime.jsx("div", { className: `${globalClasses.flexRow} ${globalClasses.flexColumn} ${classes.gptQuestionContainer}`, children: bodyText.map((data, index) => {
-            const callBack = data.interactable
+            const callBack = data.interactable && props
                 ? Object.entries(props).filter((entry) => entry[0] === data.actionName)?.[0]?.[1]
                 : null;
             return (jsxRuntime.jsxs("div", { className: `${globalClasses.layoutAlignStart} ${classes.gptQuestionBlock}`, style: {
@@ -6849,6 +6850,36 @@ const fetchCrossFilterOptions = async (filterConfig, existingSelections = [], al
     }
 };
 
+const useStyles$6 = styles.makeStyles(() => ({
+    htmlContentContainer: {
+        width: "100%",
+        "& *": {
+            boxSizing: "border-box",
+        },
+    },
+}));
+const HtmlContent = ({ bodyText }) => {
+    const classes = useStyles$6();
+    const containerRef = React.useRef(null);
+    const content = bodyText?.content || "";
+    React.useEffect(() => {
+        if (containerRef.current && content) {
+            const sanitizedHtml = DOMPurify.sanitize(content, {
+                ADD_TAGS: ["style", "details", "summary"],
+                ADD_ATTR: ["open", "target", "rel", "class", "style"],
+                ALLOW_DATA_ATTR: true,
+                FORCE_BODY: true,
+                WHOLE_DOCUMENT: false,
+            });
+            containerRef.current.innerHTML = sanitizedHtml;
+        }
+    }, [content]);
+    if (!content) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: classes.htmlContentContainer }));
+};
+
 const SliderContent = ({ bodyText, isFormDisabled = false, messageIndex }) => {
     const formKey = `${messageIndex}_${bodyText?.paramName}`;
     const { header, headerOrentiation, inputPosition, label, max, min, required, disabled, } = bodyText;
@@ -7394,8 +7425,9 @@ const STEP_FORM_TIMEOUT_KEY = "__stepFormTimedOut";
  * @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, showSavedFilters = true, preSelectedFilters = null }) => {
+const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, showSavedFilters = true, preSelectedFilters = null, botProps = null, currentMode = "", agentId = "", sessionId = "", }) => {
     const dispatch = reactRedux.useDispatch();
+    const classes = useStyles$a();
     const savedFilterSets = reactRedux.useSelector((state) => state.smartBotReducer.savedFilterSets);
     const persistedFormValues = reactRedux.useSelector((state) => state.smartBotReducer.persistedFormValues);
     const chatbotContext = reactRedux.useSelector((state) => state.smartBotReducer.chatbotContext);
@@ -7668,7 +7700,11 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
             case "text":
                 return jsxRuntime.jsx(TextContent, { bodyText: parsedData.bodyText, botData: parsedData }, key);
             case "chips":
-                return jsxRuntime.jsx(ChipsContent, { bodyText: parsedData.bodyText, props: {} }, key);
+                return parsedData.isMultiSelect ? (jsxRuntime.jsx(SelectableChips, { bodyText: parsedData.bodyText, chipType: "selectable", utilityData: parsedData.utilityData, props: botProps }, key)) : (jsxRuntime.jsx(ChipsContent, { bodyText: parsedData.bodyText, props: botProps }, key));
+            case "questions":
+                return jsxRuntime.jsx(QuestionsContent, { bodyText: parsedData.bodyText, props: botProps }, key);
+            case "html":
+                return jsxRuntime.jsx(HtmlContent, { bodyText: parsedData.bodyText }, key);
             case "table":
                 return jsxRuntime.jsx(TableContent, { bodyText: parsedData.bodyText }, key);
             case "graph":
@@ -7699,12 +7735,18 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
     const buttonItems = [];
     formData.forEach((item, index) => {
         try {
-            const parsedData = parseResponse(item, item.type, "", "", true);
+            const parsedData = parseResponse(item, item.type, agentId, currentMode, true, sessionId);
             if (!parsedData)
                 return;
-            const rendered = renderItem(parsedData, index);
-            if (!rendered)
+            const body = renderItem(parsedData, index);
+            if (!body)
                 return;
+            // Skip the block header when it is just a repeat of the label the widget
+            // renders itself (parseResponse derives headerTitle from label for inputs).
+            const showHeaderTitle = !parsedData?.noShowHeaderTitle &&
+                Boolean(parsedData?.headerTitle?.length) &&
+                parsedData.headerTitle !== parsedData?.bodyText?.label;
+            const rendered = showHeaderTitle ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: `${classes.chatbotText} ${classes.boldText} ${classes.combinedBlockHeaderTitle}`, children: parsedData.headerTitle }), body] }, `step-form-block-${index}`)) : (body);
             if (parsedData.bodyType === "button") {
                 buttonItems.push(rendered);
             }
@@ -7727,7 +7769,7 @@ const resetStepFormTimeoutFlag = () => {
     sessionStorage.removeItem(STEP_FORM_TIMEOUT_KEY);
 };
 
-const useStyles$6 = styles.makeStyles(() => ({
+const useStyles$5 = styles.makeStyles(() => ({
     subStepMarkdown: {
         // Inherit font styles from parent (.progressSubItem)
         fontFamily: 'inherit',
@@ -7801,14 +7843,14 @@ const preprocessSubStepMarkdown = (content) => {
         .trim();
 };
 const SubStepRenderer = ({ text }) => {
-    const classes = useStyles$6();
+    const classes = useStyles$5();
     if (!text)
         return null;
     const processed = preprocessSubStepMarkdown(text);
     return (jsxRuntime.jsx("div", { className: classes.subStepMarkdown, children: jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], children: processed }) }));
 };
 
-const useStyles$5 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
     "@global": {
         "@keyframes progressDotPulse": {
             "0%": {
@@ -8082,7 +8124,7 @@ const getQuestionStatus$1 = (questionSteps) => {
 /**
  * Renders a single progress bar item (main point + sub-items)
  */
-const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData, showSavedFilters = true, preSelectedFilters = null, isFormDisabled, onAllSubItemsAnimated = undefined }) => {
+const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData, showSavedFilters = true, preSelectedFilters = null, isFormDisabled, onAllSubItemsAnimated = undefined, botProps = null, currentMode = "", agentId = "", sessionId = "" }) => {
     const status = getQuestionStatus$1(questionSteps);
     const animatedCountRef = React.useRef(0);
     const [isExpanded, setIsExpanded] = React.useState(true);
@@ -8116,10 +8158,10 @@ const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData,
                                     if (animatedCountRef.current >= arr.length && onAllSubItemsAnimated) {
                                         onAllSubItemsAnimated();
                                     }
-                                } }) }, idx))) })), formData && isExpanded && (jsxRuntime.jsx("div", { className: classes.stepFormContainer, children: jsxRuntime.jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters }) }))] })] }));
+                                } }) }, idx))) })), formData && isExpanded && (jsxRuntime.jsx("div", { className: classes.stepFormContainer, children: jsxRuntime.jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId }) }))] })] }));
 };
-const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, }) => {
-    const classes = useStyles$5();
+const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, botProps = null, agentId = "", sessionId = "", }) => {
+    const classes = useStyles$4();
     React.useState(false);
     const [showThinking, setShowThinking] = React.useState(false);
     // Determine if last question is fully completed (all sub-steps done)
@@ -8201,7 +8243,7 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                 const showSavedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.showSavedFilters : true;
                 const preSelectedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.preSelectedFilters : null;
                 const isLast = index === questions.length - 1;
-                return (jsxRuntime.jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: isLast && !showThinking, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, onAllSubItemsAnimated: isLast && lastQuestionCompleted && !done
+                return (jsxRuntime.jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: isLast && !showThinking, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId, onAllSubItemsAnimated: isLast && lastQuestionCompleted && !done
                         ? () => setShowThinking(true)
                         : undefined }, index));
             }), showThinking && !done && (jsxRuntime.jsx("div", { style: {
@@ -8209,36 +8251,6 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                 }, children: jsxRuntime.jsx(ProgressBarItem$1, { question: "Thinking", questionSteps: [{ header: "", sub_header: "", step_status: "not-completed" }], isLast: true, classes: classes, formData: null, isFormDisabled: isFormDisabled }) }))] }));
 };
 
-const useStyles$4 = styles.makeStyles(() => ({
-    htmlContentContainer: {
-        width: "100%",
-        "& *": {
-            boxSizing: "border-box",
-        },
-    },
-}));
-const HtmlContent = ({ bodyText }) => {
-    const classes = useStyles$4();
-    const containerRef = React.useRef(null);
-    const content = bodyText?.content || "";
-    React.useEffect(() => {
-        if (containerRef.current && content) {
-            const sanitizedHtml = DOMPurify.sanitize(content, {
-                ADD_TAGS: ["style", "details", "summary"],
-                ADD_ATTR: ["open", "target", "rel", "class", "style"],
-                ALLOW_DATA_ATTR: true,
-                FORCE_BODY: true,
-                WHOLE_DOCUMENT: false,
-            });
-            containerRef.current.innerHTML = sanitizedHtml;
-        }
-    }, [content]);
-    if (!content) {
-        return null;
-    }
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: classes.htmlContentContainer }));
-};
-
 const renderWidgetItem = (item, index, isFormDisabled) => {
     try {
         const parsedData = parseResponse(item, item.type, "", "", true);
@@ -8290,7 +8302,7 @@ const AgentResponse$1 = (props) => {
 };
 
 const StepsResponseTab = (props) => {
-    const { steps, setSteps, stepsDone, setStepsDone, finalStepDone, setFinalStepDone, content, isStreaming, stepChange, currentMode, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, streamingWidgetData, isRetrying, } = props;
+    const { steps, setSteps, stepsDone, setStepsDone, finalStepDone, setFinalStepDone, content, isStreaming, stepChange, currentMode, questions, questionsStepsMap, stepFormDataMap, isFormDisabled, streamingWidgetData, isRetrying, botProps, agentId, sessionId, } = props;
     const dispatch = reactRedux.useDispatch();
     const thinkingContext = reactRedux.useSelector((state) => state.smartBotReducer.thinkingContext);
     const streamStartTimeRef = React.useRef(thinkingContext?.streamStartTime);
@@ -8354,7 +8366,7 @@ const StepsResponseTab = (props) => {
                     icon: jsxRuntime.jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsxRuntime.jsx(Steps$1, { steps: steps, setSteps: setSteps, done: stepsDone, setDone: setStepsDone, setTabValue: setTabValue, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, stepChange: stepChange, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: isFormDisabled || isTimedOut }),
+                jsxRuntime.jsx(Steps$1, { steps: steps, setSteps: setSteps, done: stepsDone, setDone: setStepsDone, setTabValue: setTabValue, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, stepChange: stepChange, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: isFormDisabled || isTimedOut, botProps: botProps, agentId: agentId, sessionId: sessionId }),
                 jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AgentResponse$1, { content: content, isStreaming: isStreaming, streamingWidgetData: streamingWidgetData, isFormDisabled: isFormDisabled || isTimedOut }), timeoutMessage && (jsxRuntime.jsx("div", { style: { marginTop: "8px", padding: "0 8px" }, children: jsxRuntime.jsx(TextRenderer, { text: timeoutMessage, thinking: "" }) }))] }),
             ], value: tabValue }) }));
 };
@@ -8536,7 +8548,7 @@ const streamStateMap = new Map();
  * @param {React.RefObject} botData.utilityObject.chatBodyRef - Ref to chat body element
  * @param {Function} botData.utilityObject.setChatDataState - Function to update chat data state
  */
-const StreamedContent = ({ botData }) => {
+const StreamedContent = ({ botData, botProps }) => {
     const { activeConversationId, currentMode, chatDataRef, chatBodyRef, setChatDataState, chatDataInfoRef, setLoader = (params) => { }, processResponse = (params) => { }, setThinkingContent, thinkingContent, isThinking: isThinkingFromParent, setIsThinking: setIsThinkingFromParent, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, baseUrl, setNavSessionId } = botData.utilityObject || {};
     const classes = useStyles$7();
     useStyles$a();
@@ -9715,8 +9727,13 @@ const StreamedContent = ({ botData }) => {
             }, 1000);
         }
     }, [isStreamingDone, thinkingTime, activeConversationId]);
+    // Show/hide the stop (cancel execution) icon while the stream is active.
+    // Gate on state only - sourceRef is a ref, so mutating it never re-runs this
+    // effect. Relying on it meant that if the source wasn't assigned yet on the
+    // first run, isStop was set to false and never re-evaluated for the rest of
+    // the stream, leaving the cancel button hidden.
     React.useEffect(() => {
-        if (sourceRef.current && isStreaming) {
+        if (isStreaming && !isStreamingDone) {
             setIsStop(true);
             setFunctionsState({
                 ...functionsState,
@@ -9727,7 +9744,7 @@ const StreamedContent = ({ botData }) => {
         else {
             setIsStop(false);
         }
-    }, [isStreaming]);
+    }, [isStreaming, isStreamingDone]);
     /**
      * Aborts the current streaming connection
      */
@@ -9740,10 +9757,12 @@ const StreamedContent = ({ botData }) => {
             setRetryCountdown(0);
         }
         retryCountRef.current = MAX_RETRY_COUNT; // Exhaust retries so no further auto-retries happen
-        if (sourceRef.current && isStreaming) {
+        if (isStreaming) {
             setWasStreamingAborted(true);
             wasStreamingAbortedRef.current = true;
-            sourceRef.current.close();
+            if (sourceRef.current) {
+                sourceRef.current.close();
+            }
             setIsStreaming(false);
             setIsStreamingDone(true);
             // Mark as completed+aborted so tab-switch remounts don't restart the stream.
@@ -9903,7 +9922,7 @@ const StreamedContent = ({ botData }) => {
      * @returns {JSX.Element} Rendered content with optional blinking cursor
      */
     const renderContent = () => {
-        return (jsxRuntime.jsxs("div", { className: classes.streamContainer, children: [jsxRuntime.jsx(StepsResponseTab, { steps: steps, stepChange: stepChange, setSteps: setSteps, stepsDone: stepsDone, setStepsDone: setStepsDone, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, content: content, isStreaming: isStreaming, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: botData?.isFormDisabled || false, streamingWidgetData: streamingWidgetData, isRetrying: isRetrying }), isRetrying && (jsxRuntime.jsx("div", { className: classes.retryContainer, children: jsxRuntime.jsx(TextRenderer, { text: `Auto re-trying in ${retryCountdown}s`, thinking: "" }) }))] }));
+        return (jsxRuntime.jsxs("div", { className: classes.streamContainer, children: [jsxRuntime.jsx(StepsResponseTab, { steps: steps, stepChange: stepChange, setSteps: setSteps, stepsDone: stepsDone, setStepsDone: setStepsDone, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, content: content, isStreaming: isStreaming, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: botData?.isFormDisabled || false, streamingWidgetData: streamingWidgetData, isRetrying: isRetrying, botProps: botProps, agentId: botData?.inputBody?.agent_id || "", sessionId: messageToStoreRef.current?.sessionId || "" }), isRetrying && (jsxRuntime.jsx("div", { className: classes.retryContainer, children: jsxRuntime.jsx(TextRenderer, { text: `Auto re-trying in ${retryCountdown}s`, thinking: "" }) }))] }));
     };
     if (currentMode === "agent") {
         return renderContent();
@@ -10173,8 +10192,9 @@ const AgentResponse = ({ children }) => {
 // Only the active instance should process stepFormStreamData from Redux.
 let instanceCounter = 0;
 let activeTabularInstanceId = null;
-const TabularContent = ({ steps: initialSteps, currentTabValue, children, questions: initialQuestions = [], questionsStepsMap: initialQuestionsStepsMap = {}, stepFormDataMap: initialStepFormDataMap = {}, isFormDisabled = false, sessionId: propSessionId = "" }) => {
+const TabularContent = ({ steps: initialSteps, currentTabValue, children, questions: initialQuestions = [], questionsStepsMap: initialQuestionsStepsMap = {}, stepFormDataMap: initialStepFormDataMap = {}, isFormDisabled = false, sessionId: propSessionId = "", botProps = null, currentMode = "", agentId = "" }) => {
     const dispatch = reactRedux.useDispatch();
+    const chatClasses = useStyles$a();
     const stepFormStreamData = reactRedux.useSelector((state) => state.smartBotReducer.stepFormStreamData);
     const thinkingContext = reactRedux.useSelector((state) => state.smartBotReducer.thinkingContext);
     const streamStartTimeRef = React.useRef(thinkingContext?.streamStartTime);
@@ -10258,40 +10278,55 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
         };
     }, []);
     // Render a widget item from SSE data
+    const renderWidgetBody = (parsedData, key) => {
+        switch (parsedData.bodyType) {
+            case "text":
+                return jsxRuntime.jsx(TextContent, { bodyText: parsedData.bodyText, botData: parsedData }, key);
+            case "chips":
+                return parsedData.isMultiSelect ? (jsxRuntime.jsx(SelectableChips, { bodyText: parsedData.bodyText, chipType: "selectable", utilityData: parsedData.utilityData, props: botProps }, key)) : (jsxRuntime.jsx(ChipsContent, { bodyText: parsedData.bodyText, props: botProps }, key));
+            case "questions":
+                return jsxRuntime.jsx(QuestionsContent, { bodyText: parsedData.bodyText, props: botProps }, key);
+            case "image":
+                return jsxRuntime.jsx(ImageContent, { bodyText: parsedData.bodyText }, key);
+            case "table":
+                return jsxRuntime.jsx(TableContent, { bodyText: parsedData.bodyText }, key);
+            case "graph":
+                return jsxRuntime.jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
+            case "radio":
+                return jsxRuntime.jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "checkbox":
+                return jsxRuntime.jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "select":
+                return jsxRuntime.jsx(SelectContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "slider":
+                return jsxRuntime.jsx(SliderContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "button":
+                return jsxRuntime.jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "input":
+                return jsxRuntime.jsx(InputContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "datePicker":
+                return jsxRuntime.jsx(DatePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "dateRangePicker":
+                return jsxRuntime.jsx(DateRangePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "html":
+                return jsxRuntime.jsx(HtmlContent, { bodyText: parsedData.bodyText }, key);
+            default:
+                return null;
+        }
+    };
     const renderWidget = (item, index) => {
         try {
-            const parsedData = parseResponse(item, item.type, "", "", true);
+            const parsedData = parseResponse(item, item.type, agentId, currentMode, true, propSessionId);
             if (!parsedData)
                 return null;
             const key = `restream-widget-${index}`;
-            switch (parsedData.bodyType) {
-                case "text":
-                    return jsxRuntime.jsx(TextContent, { bodyText: parsedData.bodyText, botData: parsedData }, key);
-                case "table":
-                    return jsxRuntime.jsx(TableContent, { bodyText: parsedData.bodyText }, key);
-                case "graph":
-                    return jsxRuntime.jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
-                case "radio":
-                    return jsxRuntime.jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "checkbox":
-                    return jsxRuntime.jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "select":
-                    return jsxRuntime.jsx(SelectContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "slider":
-                    return jsxRuntime.jsx(SliderContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "button":
-                    return jsxRuntime.jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "input":
-                    return jsxRuntime.jsx(InputContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "datePicker":
-                    return jsxRuntime.jsx(DatePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "dateRangePicker":
-                    return jsxRuntime.jsx(DateRangePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "html":
-                    return jsxRuntime.jsx(HtmlContent, { bodyText: parsedData.bodyText }, key);
-                default:
-                    return null;
-            }
+            const body = renderWidgetBody(parsedData, key);
+            if (!body)
+                return null;
+            const showHeaderTitle = !parsedData?.noShowHeaderTitle && Boolean(parsedData?.headerTitle?.length);
+            if (!showHeaderTitle)
+                return body;
+            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: `${chatClasses.chatbotText} ${chatClasses.boldText} ${chatClasses.combinedBlockHeaderTitle}`, children: parsedData.headerTitle }), body] }, `restream-widget-block-${index}`));
         }
         catch (e) {
             console.error("[TabularContent] renderWidget error:", e);
@@ -10661,11 +10696,8 @@ const CombinedContent = ({ botData, props }) => {
     // Get the array of content items from bodyText
     const contentItems = Array.isArray(botData.bodyText) ? botData.bodyText : [];
     // Renders the optional block-level header title above a content item.
-    // Text blocks are skipped because their heading is the echoed user query
-    // (response_heading), which we don't want to duplicate in the response.
     const renderHeaderTitle = (parsedData) => {
-        const showHeaderTitle = parsedData?.bodyType !== "text" &&
-            !parsedData?.noShowHeaderTitle &&
+        const showHeaderTitle = !parsedData?.noShowHeaderTitle &&
             Boolean(parsedData?.headerTitle?.length);
         if (!showHeaderTitle)
             return null;
@@ -10735,7 +10767,7 @@ const CombinedContent = ({ botData, props }) => {
     const validContent = renderedContent.filter(content => content !== null);
     const renderCombinedContent = () => (jsxRuntime.jsx("div", { className: "combined-content-container", children: validContent.length > 0 ? (validContent.map((content, index) => (jsxRuntime.jsx("div", { className: "combined-content-item", children: content }, `wrapper-${index}`)))) : (jsxRuntime.jsx("div", { children: "No valid content to display" })) }));
     if (isTabEnabled) {
-        return (jsxRuntime.jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, stepFormDataMap: botData?.utilityData?.stepFormDataMap || {}, isFormDisabled: isFormDisabled, sessionId: botData?.sessionId || "", children: renderCombinedContent() }));
+        return (jsxRuntime.jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, stepFormDataMap: botData?.utilityData?.stepFormDataMap || {}, isFormDisabled: isFormDisabled, sessionId: botData?.sessionId || "", botProps: props, currentMode: botData?.currentMode || "", agentId: botData?.agentId || "", children: renderCombinedContent() }));
     }
     return renderCombinedContent();
 };
@@ -10774,7 +10806,7 @@ const BotMessage = ({ botData, state, handleLikeDislike, props }) => {
             case "text":
                 return jsxRuntime.jsx(TextContent, { bodyText: botData.bodyText, botData: botData });
             case "stream":
-                return jsxRuntime.jsx(StreamedContent, { botData: botData });
+                return jsxRuntime.jsx(StreamedContent, { botData: botData, botProps: props });
             case "chips":
                 if (botData.isMultiSelect) {
                     return (jsxRuntime.jsx(SelectableChips, { bodyText: botData.bodyText, utilityData: botData.utilityData, props: props }));
@@ -15163,6 +15195,13 @@ const SmartBot = (props) => {
                                 //   );
                                 //   return;
                                 // } else {
+                                // The library re-fires the `initialClick` tab's onClick from an
+                                // effect whose deps (tabList/menuItems/onChatBotResize) are
+                                // recreated on every render. Track the previous tab so we only
+                                // reset transient state on a real tab change - otherwise these
+                                // spurious re-invocations wipe isStop mid-stream and hide the
+                                // cancel execution button.
+                                const previousActiveTab = activeTab.current.activeTab;
                                 setShowSavedFilters(false);
                                 const agentConversations = chatDataInfoRef?.current[params?.name?.toLowerCase()]?.conversations;
                                 const firstConversationId = agentConversations ? Object.keys(agentConversations)[0] : undefined;
@@ -15181,7 +15220,9 @@ const SmartBot = (props) => {
                                 localStorage.setItem("currentModeData", params?.name?.toLowerCase());
                                 setNewChatScreen(false);
                                 activeTab.current.activeTab = "agent";
-                                setIsStop(false);
+                                if (previousActiveTab !== "agent") {
+                                    setIsStop(false);
+                                }
                                 // }
                                 // setConversation([]);
                                 // chatDataInfoRef.current[currentMode] = [];
@@ -15200,6 +15241,8 @@ const SmartBot = (props) => {
                                 //   );
                                 //   return;
                                 // } else {
+                                // Only reset transient state on a real tab change.
+                                const previousActiveTab = activeTab.current.activeTab;
                                 setShowSavedFilters(false);
                                 let currentModeValue = params?.name?.toLowerCase();
                                 const modeConversations = chatDataInfoRef?.current[currentModeValue]?.conversations;
@@ -15223,7 +15266,9 @@ const SmartBot = (props) => {
                                     chatDataInfoRef.current = lodash.cloneDeep(parsedData);
                                 }
                                 // setNewChatScreen(true);
-                                setIsStop(false);
+                                if (previousActiveTab !== "navigation") {
+                                    setIsStop(false);
+                                }
                                 setCurrentMode(params?.name?.toLowerCase());
                                 if (firstConversationId) {
                                     setActiveConversationId(firstConversationId);
@@ -15292,6 +15337,9 @@ const SmartBot = (props) => {
                             //   );
                             //   return;
                             // } else {
+                            // Only reset transient state on a real tab change - the library
+                            // re-fires this initialClick handler on every render.
+                            const previousActiveTab = activeTab.current.activeTab;
                             setShowSavedFilters(false);
                             let currentModeValue = params?.name?.toLowerCase();
                             const modeConversations = chatDataInfoRef?.current[currentModeValue]?.conversations;
@@ -15315,7 +15363,9 @@ const SmartBot = (props) => {
                                 chatDataInfoRef.current = lodash.cloneDeep(parsedData);
                             }
                             // setNewChatScreen(true);
-                            setIsStop(false);
+                            if (previousActiveTab !== "navigation") {
+                                setIsStop(false);
+                            }
                             setCurrentMode(params?.name?.toLowerCase());
                             if (firstConversationId) {
                                 setActiveConversationId(firstConversationId);
@@ -15346,6 +15396,9 @@ const SmartBot = (props) => {
                             //   );
                             //   return;
                             // } else {
+                            // Only reset transient state on a real tab change - the library
+                            // re-fires this initialClick handler on every render.
+                            const previousActiveTab = activeTab.current.activeTab;
                             setShowSavedFilters(false);
                             let currentModeValue = params?.name?.toLowerCase();
                             const modeConversations = chatDataInfoRef?.current[currentModeValue]?.conversations;
@@ -15369,7 +15422,9 @@ const SmartBot = (props) => {
                                 chatDataInfoRef.current = lodash.cloneDeep(parsedData);
                             }
                             // setNewChatScreen(true);
-                            setIsStop(false);
+                            if (previousActiveTab !== "navigation") {
+                                setIsStop(false);
+                            }
                             setCurrentMode(params?.name?.toLowerCase());
                             if (firstConversationId) {
                                 setActiveConversationId(firstConversationId);