impact-chatbot 2.3.82 → 2.3.84

package/dist/index.esm.js

@@ -17,9 +17,9 @@ import rehypeSanitize from 'rehype-sanitize';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import DOMPurify from 'dompurify';
+import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import { setSelectedFilters, setFilterConfiguration, getFilterUserConfiguration } from 'core/actions/filterAction';
 import { setChatbotContext, setStepFormStreamData, setMinimizedStreamData, setThinkingContext, setPersistedFormValues, clearPersistedFormValues, setCurrentAgentChatId, setHierarchyKeyValue, setChatbotFilterOptions, setSavedFilterSets } from 'core/actions/smartBotActions';
-import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import styled from 'styled-components';
 import { CircularProgress, Typography, Grid } from '@mui/material';
@@ -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,
             };
@@ -1097,6 +1098,66 @@ const getFormattedApplicationName = (applicationURL) => {
   }
 };
 
+/**
+ * Resolves a link href to an in-app route (path + search + hash) when the link
+ * points to a screen of this application, otherwise returns null.
+ * Handles both relative links ("/inventory-smart/create-allocation?step=0") and
+ * absolute links sent by the backend
+ * ("https://tapestry.test.impactsmartsuite.com/inventory-smart/create-allocation?step=0").
+ */
+const resolveInternalPath = (href) => {
+    if (!href || typeof href !== 'string')
+        return null;
+    // Non navigational protocols (mailto:, tel:, javascript:, #anchor) stay as-is
+    if (/^(mailto:|tel:|javascript:)/i.test(href) || href.startsWith('#'))
+        return null;
+    try {
+        const url = new URL(href, window.location.origin);
+        if (url.protocol !== 'http:' && url.protocol !== 'https:')
+            return null;
+        const currentApp = window.location.pathname.split('/')[1];
+        const targetApp = url.pathname.split('/')[1];
+        // Same origin, or a different host of the same app (e.g. backend returns the
+        // deployed host while running locally) - both resolve to a client side route
+        const isInternal = url.origin === window.location.origin ||
+            (!!currentApp && currentApp === targetApp);
+        if (!isInternal)
+            return null;
+        return `${url.pathname}${url.search}${url.hash}`;
+    }
+    catch (e) {
+        return null;
+    }
+};
+/**
+ * Minimizes the chat window so the user can see the screen they navigated to.
+ * SmartBot (index.tsx) listens for this event and sets partialClose.
+ */
+const minimizeChatBot = () => {
+    window.dispatchEvent(new CustomEvent("smartBotMinimize"));
+};
+/**
+ * Anchor rendered inside chatbot markdown. Internal links are navigated through
+ * react-router so the chatbot is not remounted by a full page load.
+ */
+const MarkdownLink = ({ href, children, ...props }) => {
+    const navigate = useNavigate();
+    const handleClick = (event) => {
+        // Let the browser handle new tab / new window / download intents
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
+            return;
+        const internalPath = resolveInternalPath(href);
+        if (!internalPath)
+            return;
+        event.preventDefault();
+        const currentPath = `${window.location.pathname}${window.location.search}`;
+        if (currentPath !== internalPath) {
+            navigate(internalPath);
+        }
+        minimizeChatBot();
+    };
+    return (jsx("a", { href: href, target: "_self", onClick: handleClick, ...props, children: children }));
+};
 /**
  * Checks whether the input string contains meaningful HTML markup
  * (beyond simple inline tags like <b>, <i>, <em>, <strong>, <br>, <a>, <u>
@@ -1137,9 +1198,16 @@ const preprocessMarkdown = (content) => {
         .replace(/(^|\n)([^\n-•]*[a-zA-Z0-9][^\n]*)\n([-•]\s+)/g, '$1$2\n\n$3')
         // Handle list items with - or • appearing directly after text without newline
         // Only treat as a new bullet when preceded by sentence-ending punctuation (to avoid splitting inline hyphens like "KSO- ORLANDO")
-        .replace(/([.!?:)\"])\s*([-•])\s+/g, '$1\n\n$2 ')
-        // Handle nested list items with proper indentation
-        .replace(/(\n\s{2,})([-•]|\d+\.)\s+/g, '\n    $2 ')
+        // [^\S\n] (horizontal whitespace only) keeps this from crossing line breaks,
+        // which would dedent already correctly indented nested bullets
+        .replace(/([.!?:)"])[^\S\n]*([-\u2022])[^\S\n]+/g, '$1\n\n$2 ')
+        // Handle nested list items with proper indentation.
+        // Matching only horizontal whitespace after the newline keeps blank lines and
+        // top level numbered items intact (indenting those turns them into plain text).
+        // Normalize to 3 spaces: enough to nest under both "- " and "1. " parents, and
+        // below the 4 space threshold that would turn the line into a code block.
+        // Indents of 4 or more are left untouched (deliberate deeper nesting).
+        .replace(/(\n[^\S\n]{2,3})([-\u2022]|\d+\.)[^\S\n]+/g, '\n   $2 ')
         // Ensure double line breaks after list sections
         .replace(/(\n\d+\.\s+.*?)(\n\n###)/g, '$1\n$2')
         .replace(/(\n[-•]\s+.*?)(\n\n###)/g, '$1\n$2')
@@ -1151,8 +1219,8 @@ const preprocessMarkdown = (content) => {
  * Custom components for markdown rendering
  */
 const markdownComponents = {
-    // Custom link component that opens in the same tab
-    a: ({ href, children, ...props }) => (jsx("a", { href: href, target: "_self", ...props, children: children })),
+    // Custom link component that navigates in-app without reloading the page
+    a: MarkdownLink,
     // Custom code component
     code: ({ children, className, ...props }) => (jsx("code", { className: `markdown-code ${className || ''}`, ...props, children: children })),
     // Custom pre component for code blocks
@@ -1172,13 +1240,32 @@ const markdownComponents = {
  * Markdown renderer component with sanitization
  */
 const TextRenderer = ({ text, thinking }) => {
+    const navigate = useNavigate();
+    // Click delegation for anchors inside raw HTML content (dangerouslySetInnerHTML),
+    // so in-app links navigate through react-router instead of reloading the page.
+    const handleHtmlClick = (event) => {
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
+            return;
+        const anchor = event.target.closest?.('a');
+        if (!anchor || anchor.target === '_blank')
+            return;
+        const internalPath = resolveInternalPath(anchor.getAttribute('href'));
+        if (!internalPath)
+            return;
+        event.preventDefault();
+        const currentPath = `${window.location.pathname}${window.location.search}`;
+        if (currentPath !== internalPath) {
+            navigate(internalPath);
+        }
+        minimizeChatBot();
+    };
     // If the input contains rich HTML, render it directly with DOMPurify sanitization
     if (containsRichHtml(text)) {
         const sanitizedHtml = DOMPurify.sanitize(text, {
             ADD_TAGS: ['style'],
             ADD_ATTR: ['style', 'class', 'target', 'rel'],
         });
-        return (jsx("div", { className: `markdown-content md-content ${thinking ? "thinking" : ""}`, dangerouslySetInnerHTML: { __html: sanitizedHtml } }));
+        return (jsx("div", { className: `markdown-content md-content ${thinking ? "thinking" : ""}`, onClick: handleHtmlClick, dangerouslySetInnerHTML: { __html: sanitizedHtml } }));
     }
     // Otherwise, use the existing markdown pipeline
     const processedContent = preprocessMarkdown(text);
@@ -5009,7 +5096,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 +5163,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 +6914,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 +7489,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 +7764,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 +7799,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 +7833,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 +7907,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 +8188,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 +8222,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 +8307,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 +8315,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 +8366,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 +8430,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 +8612,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 +9791,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 +9808,7 @@ const StreamedContent = ({ botData }) => {
         else {
             setIsStop(false);
         }
-    }, [isStreaming]);
+    }, [isStreaming, isStreamingDone]);
     /**
      * Aborts the current streaming connection
      */
@@ -9718,10 +9821,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 +9986,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 +10256,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 +10342,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);
@@ -10639,11 +10760,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;
@@ -10713,7 +10831,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();
 };
@@ -10752,7 +10870,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 }));
@@ -14999,13 +15117,19 @@ const SmartBot = (props) => {
             if (newChatId !== undefined)
                 setUniqueChatId(newChatId);
         };
+        // Minimize the chat window when the user follows an in-app link from a bot response
+        const handleMinimizeRequest = () => {
+            setPartialClose(true);
+        };
         window.addEventListener("stepFormStreamStart", handleStepFormStreamStart);
         window.addEventListener("stepFormStreamEnd", handleStepFormStreamEnd);
         window.addEventListener("stepFormInitStateUpdate", handleStepFormInitStateUpdate);
+        window.addEventListener("smartBotMinimize", handleMinimizeRequest);
         return () => {
             window.removeEventListener("stepFormStreamStart", handleStepFormStreamStart);
             window.removeEventListener("stepFormStreamEnd", handleStepFormStreamEnd);
             window.removeEventListener("stepFormInitStateUpdate", handleStepFormInitStateUpdate);
+            window.removeEventListener("smartBotMinimize", handleMinimizeRequest);
         };
     }, []);
     const fetchCustomBotConfigurations = async () => {
@@ -15141,6 +15265,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;
@@ -15159,7 +15290,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] = [];
@@ -15178,6 +15311,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;
@@ -15201,7 +15336,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);
@@ -15270,6 +15407,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;
@@ -15293,7 +15433,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);
@@ -15324,6 +15466,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;
@@ -15347,7 +15492,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);