impact-chatbot 2.3.81 → 2.3.83

package/dist/index.esm.js

@@ -326,9 +326,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":
@@ -592,7 +592,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,
             };
@@ -1151,8 +1152,8 @@ const preprocessMarkdown = (content) => {
  * Custom components for markdown rendering
  */
 const markdownComponents = {
-    // Custom link component with target="_blank"
-    a: ({ href, children, ...props }) => (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", ...props, children: children })),
+    // Custom link component that opens in the same tab
+    a: ({ href, children, ...props }) => (jsx("a", { href: href, target: "_self", ...props, children: children })),
     // Custom code component
     code: ({ children, className, ...props }) => (jsx("code", { className: `markdown-code ${className || ''}`, ...props, children: children })),
     // Custom pre component for code blocks
@@ -5009,7 +5010,7 @@ const ChipsContent = ({ bodyText, props }) => {
     const classes = useStyles$a();
     const globalClasses = globalStyles();
     return (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 (jsx(Typography, { component: "span", variant: "body1", className: `${classes.gptChips} ${data.interactable ? globalClasses.cursorPointer : ""}`, onClick: () => {
@@ -5076,7 +5077,7 @@ const QuestionsContent = ({ bodyText, props }) => {
         };
     };
     return (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 (jsxs("div", { className: `${globalClasses.layoutAlignStart} ${classes.gptQuestionBlock}`, style: {
@@ -6827,6 +6828,36 @@ const fetchCrossFilterOptions = async (filterConfig, existingSelections = [], al
     }
 };
 
+const useStyles$6 = makeStyles(() => ({
+    htmlContentContainer: {
+        width: "100%",
+        "& *": {
+            boxSizing: "border-box",
+        },
+    },
+}));
+const HtmlContent = ({ bodyText }) => {
+    const classes = useStyles$6();
+    const containerRef = useRef(null);
+    const content = bodyText?.content || "";
+    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 (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;
@@ -7372,8 +7403,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 = useDispatch();
+    const classes = useStyles$a();
     const savedFilterSets = useSelector((state) => state.smartBotReducer.savedFilterSets);
     const persistedFormValues = useSelector((state) => state.smartBotReducer.persistedFormValues);
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
@@ -7646,7 +7678,11 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
             case "text":
                 return jsx(TextContent, { bodyText: parsedData.bodyText, botData: parsedData }, key);
             case "chips":
-                return jsx(ChipsContent, { bodyText: parsedData.bodyText, props: {} }, key);
+                return parsedData.isMultiSelect ? (jsx(SelectableChips, { bodyText: parsedData.bodyText, chipType: "selectable", utilityData: parsedData.utilityData, props: botProps }, key)) : (jsx(ChipsContent, { bodyText: parsedData.bodyText, props: botProps }, key));
+            case "questions":
+                return jsx(QuestionsContent, { bodyText: parsedData.bodyText, props: botProps }, key);
+            case "html":
+                return jsx(HtmlContent, { bodyText: parsedData.bodyText }, key);
             case "table":
                 return jsx(TableContent, { bodyText: parsedData.bodyText }, key);
             case "graph":
@@ -7677,12 +7713,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 ? (jsxs(Fragment$1, { children: [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);
             }
@@ -7705,7 +7747,7 @@ const resetStepFormTimeoutFlag = () => {
     sessionStorage.removeItem(STEP_FORM_TIMEOUT_KEY);
 };
 
-const useStyles$6 = makeStyles(() => ({
+const useStyles$5 = makeStyles(() => ({
     subStepMarkdown: {
         // Inherit font styles from parent (.progressSubItem)
         fontFamily: 'inherit',
@@ -7779,14 +7821,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 (jsx("div", { className: classes.subStepMarkdown, children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], children: processed }) }));
 };
 
-const useStyles$5 = makeStyles$1((theme) => ({
+const useStyles$4 = makeStyles$1((theme) => ({
     "@global": {
         "@keyframes progressDotPulse": {
             "0%": {
@@ -8060,7 +8102,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 = useRef(0);
     const [isExpanded, setIsExpanded] = useState(true);
@@ -8094,10 +8136,10 @@ const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData,
                                     if (animatedCountRef.current >= arr.length && onAllSubItemsAnimated) {
                                         onAllSubItemsAnimated();
                                     }
-                                } }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters }) }))] })] }));
+                                } }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId }) }))] })] }));
 };
-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();
     useState(false);
     const [showThinking, setShowThinking] = useState(false);
     // Determine if last question is fully completed (all sub-steps done)
@@ -8179,7 +8221,7 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                 const showSavedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.showSavedFilters : true;
                 const preSelectedFilters = formEntry && !Array.isArray(formEntry) ? formEntry.preSelectedFilters : null;
                 const isLast = index === questions.length - 1;
-                return (jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: isLast && !showThinking, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, onAllSubItemsAnimated: isLast && lastQuestionCompleted && !done
+                return (jsx(ProgressBarItem$1, { question: question, questionSteps: questionSteps, isLast: isLast && !showThinking, classes: classes, formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters, preSelectedFilters: preSelectedFilters, botProps: botProps, currentMode: currentMode, agentId: agentId, sessionId: sessionId, onAllSubItemsAnimated: isLast && lastQuestionCompleted && !done
                         ? () => setShowThinking(true)
                         : undefined }, index));
             }), showThinking && !done && (jsx("div", { style: {
@@ -8187,36 +8229,6 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
                 }, children: jsx(ProgressBarItem$1, { question: "Thinking", questionSteps: [{ header: "", sub_header: "", step_status: "not-completed" }], isLast: true, classes: classes, formData: null, isFormDisabled: isFormDisabled }) }))] }));
 };
 
-const useStyles$4 = makeStyles(() => ({
-    htmlContentContainer: {
-        width: "100%",
-        "& *": {
-            boxSizing: "border-box",
-        },
-    },
-}));
-const HtmlContent = ({ bodyText }) => {
-    const classes = useStyles$4();
-    const containerRef = useRef(null);
-    const content = bodyText?.content || "";
-    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 (jsx("div", { ref: containerRef, className: classes.htmlContentContainer }));
-};
-
 const renderWidgetItem = (item, index, isFormDisabled) => {
     try {
         const parsedData = parseResponse(item, item.type, "", "", true);
@@ -8268,7 +8280,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 = useDispatch();
     const thinkingContext = useSelector((state) => state.smartBotReducer.thinkingContext);
     const streamStartTimeRef = useRef(thinkingContext?.streamStartTime);
@@ -8332,7 +8344,7 @@ const StepsResponseTab = (props) => {
                     icon: jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsx(Steps$1, { steps: steps, setSteps: setSteps, done: stepsDone, setDone: setStepsDone, setTabValue: setTabValue, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, stepChange: stepChange, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: isFormDisabled || isTimedOut }),
+                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 }),
                 jsxs(Fragment, { children: [jsx(AgentResponse$1, { content: content, isStreaming: isStreaming, streamingWidgetData: streamingWidgetData, isFormDisabled: isFormDisabled || isTimedOut }), timeoutMessage && (jsx("div", { style: { marginTop: "8px", padding: "0 8px" }, children: jsx(TextRenderer, { text: timeoutMessage, thinking: "" }) }))] }),
             ], value: tabValue }) }));
 };
@@ -8514,7 +8526,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();
@@ -9693,8 +9705,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.
     useEffect(() => {
-        if (sourceRef.current && isStreaming) {
+        if (isStreaming && !isStreamingDone) {
             setIsStop(true);
             setFunctionsState({
                 ...functionsState,
@@ -9705,7 +9722,7 @@ const StreamedContent = ({ botData }) => {
         else {
             setIsStop(false);
         }
-    }, [isStreaming]);
+    }, [isStreaming, isStreamingDone]);
     /**
      * Aborts the current streaming connection
      */
@@ -9718,10 +9735,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.
@@ -9881,7 +9900,7 @@ const StreamedContent = ({ botData }) => {
      * @returns {JSX.Element} Rendered content with optional blinking cursor
      */
     const renderContent = () => {
-        return (jsxs("div", { className: classes.streamContainer, children: [jsx(StepsResponseTab, { steps: steps, stepChange: stepChange, setSteps: setSteps, stepsDone: stepsDone, setStepsDone: setStepsDone, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, content: content, isStreaming: isStreaming, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: botData?.isFormDisabled || false, streamingWidgetData: streamingWidgetData, isRetrying: isRetrying }), isRetrying && (jsx("div", { className: classes.retryContainer, children: jsx(TextRenderer, { text: `Auto re-trying in ${retryCountdown}s`, thinking: "" }) }))] }));
+        return (jsxs("div", { className: classes.streamContainer, children: [jsx(StepsResponseTab, { steps: steps, stepChange: stepChange, setSteps: setSteps, stepsDone: stepsDone, setStepsDone: setStepsDone, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, content: content, isStreaming: isStreaming, currentMode: currentMode, questions: questions, questionsStepsMap: questionsStepsMap, stepFormDataMap: stepFormDataMap, isFormDisabled: botData?.isFormDisabled || false, streamingWidgetData: streamingWidgetData, isRetrying: isRetrying, botProps: botProps, agentId: botData?.inputBody?.agent_id || "", sessionId: messageToStoreRef.current?.sessionId || "" }), isRetrying && (jsx("div", { className: classes.retryContainer, children: jsx(TextRenderer, { text: `Auto re-trying in ${retryCountdown}s`, thinking: "" }) }))] }));
     };
     if (currentMode === "agent") {
         return renderContent();
@@ -10151,8 +10170,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 = useDispatch();
+    const chatClasses = useStyles$a();
     const stepFormStreamData = useSelector((state) => state.smartBotReducer.stepFormStreamData);
     const thinkingContext = useSelector((state) => state.smartBotReducer.thinkingContext);
     const streamStartTimeRef = useRef(thinkingContext?.streamStartTime);
@@ -10236,40 +10256,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 jsx(TextContent, { bodyText: parsedData.bodyText, botData: parsedData }, key);
+            case "chips":
+                return parsedData.isMultiSelect ? (jsx(SelectableChips, { bodyText: parsedData.bodyText, chipType: "selectable", utilityData: parsedData.utilityData, props: botProps }, key)) : (jsx(ChipsContent, { bodyText: parsedData.bodyText, props: botProps }, key));
+            case "questions":
+                return jsx(QuestionsContent, { bodyText: parsedData.bodyText, props: botProps }, key);
+            case "image":
+                return jsx(ImageContent, { bodyText: parsedData.bodyText }, key);
+            case "table":
+                return jsx(TableContent, { bodyText: parsedData.bodyText }, key);
+            case "graph":
+                return jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
+            case "radio":
+                return jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "checkbox":
+                return jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "select":
+                return jsx(SelectContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "slider":
+                return jsx(SliderContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "button":
+                return jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "input":
+                return jsx(InputContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "datePicker":
+                return jsx(DatePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "dateRangePicker":
+                return jsx(DateRangePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "html":
+                return 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 jsx(TextContent, { bodyText: parsedData.bodyText, botData: parsedData }, key);
-                case "table":
-                    return jsx(TableContent, { bodyText: parsedData.bodyText }, key);
-                case "graph":
-                    return jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
-                case "radio":
-                    return jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "checkbox":
-                    return jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "select":
-                    return jsx(SelectContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "slider":
-                    return jsx(SliderContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "button":
-                    return jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "input":
-                    return jsx(InputContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "datePicker":
-                    return jsx(DatePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "dateRangePicker":
-                    return jsx(DateRangePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
-                case "html":
-                    return 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 (jsxs(Fragment$1, { children: [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);
@@ -10638,9 +10673,10 @@ const CombinedContent = ({ botData, props }) => {
     const isTabEnabled = botData?.utilityData?.isTabEnabled;
     // 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
+    // Renders the optional block-level header title above a content item.
     const renderHeaderTitle = (parsedData) => {
-        const showHeaderTitle = !parsedData?.noShowHeaderTitle && Boolean(parsedData?.headerTitle?.length);
+        const showHeaderTitle = !parsedData?.noShowHeaderTitle &&
+            Boolean(parsedData?.headerTitle?.length);
         if (!showHeaderTitle)
             return null;
         return (jsx("div", { className: `${classes.chatbotText} ${classes.boldText} ${classes.combinedBlockHeaderTitle}`, children: parsedData.headerTitle }));
@@ -10709,7 +10745,7 @@ const CombinedContent = ({ botData, props }) => {
     const validContent = renderedContent.filter(content => content !== null);
     const renderCombinedContent = () => (jsx("div", { className: "combined-content-container", children: validContent.length > 0 ? (validContent.map((content, index) => (jsx("div", { className: "combined-content-item", children: content }, `wrapper-${index}`)))) : (jsx("div", { children: "No valid content to display" })) }));
     if (isTabEnabled) {
-        return (jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, stepFormDataMap: botData?.utilityData?.stepFormDataMap || {}, isFormDisabled: isFormDisabled, sessionId: botData?.sessionId || "", children: renderCombinedContent() }));
+        return (jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, stepFormDataMap: botData?.utilityData?.stepFormDataMap || {}, isFormDisabled: isFormDisabled, sessionId: botData?.sessionId || "", botProps: props, currentMode: botData?.currentMode || "", agentId: botData?.agentId || "", children: renderCombinedContent() }));
     }
     return renderCombinedContent();
 };
@@ -10748,7 +10784,7 @@ const BotMessage = ({ botData, state, handleLikeDislike, props }) => {
             case "text":
                 return jsx(TextContent, { bodyText: botData.bodyText, botData: botData });
             case "stream":
-                return jsx(StreamedContent, { botData: botData });
+                return jsx(StreamedContent, { botData: botData, botProps: props });
             case "chips":
                 if (botData.isMultiSelect) {
                     return (jsx(SelectableChips, { bodyText: botData.bodyText, utilityData: botData.utilityData, props: props }));
@@ -15137,6 +15173,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;
@@ -15155,7 +15198,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] = [];
@@ -15174,6 +15219,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;
@@ -15197,7 +15244,9 @@ const SmartBot = (props) => {
                                     chatDataInfoRef.current = cloneDeep(parsedData);
                                 }
                                 // setNewChatScreen(true);
-                                setIsStop(false);
+                                if (previousActiveTab !== "navigation") {
+                                    setIsStop(false);
+                                }
                                 setCurrentMode(params?.name?.toLowerCase());
                                 if (firstConversationId) {
                                     setActiveConversationId(firstConversationId);
@@ -15266,6 +15315,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;
@@ -15289,7 +15341,9 @@ const SmartBot = (props) => {
                                 chatDataInfoRef.current = cloneDeep(parsedData);
                             }
                             // setNewChatScreen(true);
-                            setIsStop(false);
+                            if (previousActiveTab !== "navigation") {
+                                setIsStop(false);
+                            }
                             setCurrentMode(params?.name?.toLowerCase());
                             if (firstConversationId) {
                                 setActiveConversationId(firstConversationId);
@@ -15320,6 +15374,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;
@@ -15343,7 +15400,9 @@ const SmartBot = (props) => {
                                 chatDataInfoRef.current = cloneDeep(parsedData);
                             }
                             // setNewChatScreen(true);
-                            setIsStop(false);
+                            if (previousActiveTab !== "navigation") {
+                                setIsStop(false);
+                            }
                             setCurrentMode(params?.name?.toLowerCase());
                             if (firstConversationId) {
                                 setActiveConversationId(firstConversationId);