impact-chatbot 2.3.85 → 2.3.87

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { cloneDeep, isEmpty as isEmpty$1, isNull, isArray as isArray$1, isObject, throttle } from 'lodash';
 import * as React from 'react';
-import { useCallback, useState, useEffect, useRef, createContext, useContext, useMemo, Fragment as Fragment$1 } from 'react';
+import { useCallback, useState, useEffect, useRef, Fragment as Fragment$1, createContext, useContext, useMemo } from 'react';
 import { COMBINED_CROSS_DIMENSIONAL_API, BASE_API } from 'config/api';
 import axiosInstance from 'core/Utils/axios';
 import { tenantConfigApiCache } from 'core/actions/tenantConfigActions';
@@ -19,7 +19,7 @@ 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 { setThinkingContext, setChatbotContext, setStepFormStreamData, setMinimizedStreamData, setPersistedFormValues, clearPersistedFormValues, setCurrentAgentChatId, setHierarchyKeyValue, setChatbotFilterOptions, setSavedFilterSets } from 'core/actions/smartBotActions';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import styled from 'styled-components';
 import { CircularProgress, Typography, Grid } from '@mui/material';
@@ -1420,31 +1420,50 @@ const ThinkinHeaderInfo = (props) => {
     });
     const { streamStartTime, isStreamCompleted, finalElapsedSeconds, thinkingHeaderMessage } = thinkingContext;
     const [elapsed, setElapsed] = useState(0);
+    const [frozenText, setFrozenText] = useState(null);
     const intervalRef = useRef(null);
     // Once this instance sees "completed", freeze it permanently so a future
     // chat's streamStartTime doesn't cause it to start ticking again.
     const frozenRef = useRef(false);
     const frozenTextRef = useRef(null);
-    const streamStartTimeRef = useRef(null); // Track streamStartTime changes to unfreeze
+    // The streamStartTime this instance latched onto. Used to detect when a
+    // different stream has taken over (e.g. the user asked a new question while
+    // this message's step form was still waiting for input).
+    const ownStartTimeRef = useRef(null);
+    /**
+     * Freezes this instance permanently on a final label and elapsed value.
+     */
+    const freeze = (text, seconds) => {
+        frozenRef.current = true;
+        frozenTextRef.current = text;
+        setFrozenText(text);
+        setElapsed(seconds);
+    };
     useEffect(() => {
         // If already frozen (stream completed), NEVER unfreeze.
         // This prevents a new chat's streamStartTime from restarting this timer.
         if (frozenRef.current)
             return;
-        // Track streamStartTime changes for non-frozen instances
-        if (streamStartTimeRef.current !== streamStartTime) {
-            streamStartTimeRef.current = streamStartTime;
+        // Adopt the first non-null streamStartTime we see as this instance's own
+        if (ownStartTimeRef.current === null && streamStartTime) {
+            ownStartTimeRef.current = streamStartTime;
         }
+        const ownStartTime = ownStartTimeRef.current;
         // Clear any existing interval
         if (intervalRef.current) {
             clearInterval(intervalRef.current);
             intervalRef.current = null;
         }
         if (isStreamCompleted && typeof finalElapsedSeconds === 'number') {
-            // Freeze this instance — it will never tick again
-            frozenRef.current = true;
-            frozenTextRef.current = `Completed in ${formatElapsedTime(finalElapsedSeconds)}`;
-            setElapsed(finalElapsedSeconds);
+            // Freeze this instance - it will never tick again
+            freeze(`Completed in ${formatElapsedTime(finalElapsedSeconds)}`, finalElapsedSeconds);
+        }
+        else if (ownStartTime !== null && streamStartTime !== ownStartTime) {
+            // A different stream has started (new question) while this one never
+            // completed - typically an abandoned step form. Freeze on this
+            // instance's OWN elapsed time instead of following the new stream.
+            const ownElapsed = Math.floor((Date.now() - ownStartTime) / 1000);
+            freeze(`Completed in ${formatElapsedTime(ownElapsed)}`, ownElapsed);
         }
         else if (streamStartTime && !isStreamCompleted) {
             // Live timer — update every second
@@ -1465,8 +1484,8 @@ const ThinkinHeaderInfo = (props) => {
     }, [streamStartTime, isStreamCompleted, finalElapsedSeconds]);
     // Determine display text
     let displayText = thinkingHeaderMessage || '';
-    if (frozenRef.current && frozenTextRef.current) {
-        displayText = frozenTextRef.current;
+    if (frozenText || (frozenRef.current && frozenTextRef.current)) {
+        displayText = frozenText || frozenTextRef.current;
     }
     else if (streamStartTime && !isStreamCompleted) {
         displayText = `Working for ${formatElapsedTime(elapsed)}`;
@@ -2460,6 +2479,20 @@ const useChatFlow = (chatDataRef, setLoader, setFlowType, setScreenName, setUser
         }
         if (data.flow_type === "agent" && data.actionType === "direct") {
             data.baseUrl = baseUrl;
+            // Reset the timer before the request goes out (same as index.jsx
+            // handleSendMessage). Without this the new ThinkinHeaderInfo mounts while
+            // the previous response's "completed" state is still in Redux and freezes
+            // itself on that stale elapsed time.
+            // streamStartTime stays null here: processStream sets it, so a question
+            // has exactly one start time (two would make the new header look like a
+            // superseded one and freeze it at 0m:00s).
+            dispatch(setThinkingContext({
+                thinkingContent: "",
+                thinkingHeaderMessage: "Working for 0m:00s",
+                streamStartTime: null,
+                isStreamCompleted: false,
+                finalElapsedSeconds: null,
+            }));
             prepareDataAndSendToAgent(data, false, {
                 chatbotContext: chatbotContext,
                 setChatbotContext: setChatbotContext,
@@ -5095,17 +5128,26 @@ const TextContent = ({ bodyText, botData }) => {
     return (jsx("div", { children: renderTextContent() }));
 };
 
-const ChipsContent = ({ bodyText, props }) => {
+const ChipsContent = ({ bodyText, props, botData, isFormDisabled = false }) => {
     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 && 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: () => {
-                    callBack && callBack(data);
-                }, children: data.displayText }, index));
-        }) }));
+    // Suggested-question chips are one-shot: once the user has clicked one of them
+    // or asked a new question the block disappears. isFormDisabled is true for
+    // every bot message except the latest, so it flips exactly when the user
+    // moves past these chips. Only chips that opt in via isQuestionsDisabled
+    // behave this way; all other chips stay visible.
+    if (botData?.isQuestionsDisabled && isFormDisabled) {
+        return null;
+    }
+    const showHeaderTitle = !botData?.noShowHeaderTitle && Boolean(botData?.headerTitle?.length);
+    return (jsxs(Fragment$1, { children: [showHeaderTitle && (jsx("div", { className: `${classes.chatbotText} ${classes.boldText} ${classes.combinedBlockHeaderTitle}`, children: botData.headerTitle })), jsx("div", { className: `${globalClasses.flexRow} ${globalClasses.flexWrap} ${globalClasses.gap} ${globalClasses.verticalAlignCenter}`, children: bodyText.map((data, index) => {
+                    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: () => {
+                            callBack && callBack(data);
+                        }, children: data.displayText }, index));
+                }) })] }));
 };
 
 /**
@@ -6102,7 +6144,8 @@ const TableContent = ({ bodyText }) => {
 };
 
 const GraphContent = ({ bodyText }) => {
-    const { chartOptions } = bodyText || {};
+    const { chartOptions, title } = bodyText || {};
+    const classes = useStyles$a();
     const chartRef = useRef(null);
     const handleChartRef = (ref) => {
         chartRef.current = ref;
@@ -6113,7 +6156,7 @@ const GraphContent = ({ bodyText }) => {
     const options = {
         ...chartOptions,
     };
-    return (jsx(Grid, { container: true, children: jsx(Grid, { item: true, xs: 12, children: jsx(CoreChart, { options: options, handleChartRef: handleChartRef }) }) }));
+    return (jsxs(Grid, { container: true, children: [Boolean(title?.length) && (jsx(Grid, { item: true, xs: 12, children: jsx("div", { className: `${classes.chatbotText} ${classes.boldText} ${classes.combinedBlockHeaderTitle}`, children: title }) })), jsx(Grid, { item: true, xs: 12, children: jsx(CoreChart, { options: options, handleChartRef: handleChartRef }) })] }));
 };
 
 const SelectableChips = ({ bodyText, chipType, props, utilityData }) => {
@@ -7501,7 +7544,6 @@ const STEP_FORM_TIMEOUT_KEY = "__stepFormTimedOut";
  */
 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);
@@ -7774,13 +7816,13 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
             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));
+                return parsedData.isMultiSelect ? (jsx(SelectableChips, { bodyText: parsedData.bodyText, chipType: "selectable", utilityData: parsedData.utilityData, props: botProps }, key)) : (jsx(ChipsContent, { bodyText: parsedData.bodyText, props: botProps, botData: parsedData, isFormDisabled: isFormDisabled }, 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);
+                return jsx(TableContent, { bodyText: parsedData.bodyText }, parsedData.bodyText?.table_name || key);
             case "graph":
                 return jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
             case "slider":
@@ -7815,17 +7857,11 @@ const StepFormContent = ({ formData, messageIndex = 0, isFormDisabled = false, s
             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);
+                buttonItems.push(body);
             }
             else {
-                formFields.push(rendered);
+                formFields.push(body);
             }
         }
         catch (error) {
@@ -8335,7 +8371,10 @@ const renderWidgetItem = (item, index, isFormDisabled) => {
             case "text":
                 return jsx(TextContent, { bodyText: parsedData.bodyText, botData: parsedData }, key);
             case "table":
-                return jsx(TableContent, { bodyText: parsedData.bodyText }, key);
+                // Key on table_name so a different table never reuses a mounted grid.
+                // ag-grid captures its fetch callback once at init, so a reused grid
+                // would keep querying the previous table's table_name.
+                return jsx(TableContent, { bodyText: parsedData.bodyText }, parsedData.bodyText?.table_name || key);
             case "graph":
                 return jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
             case "radio":
@@ -8673,7 +8712,7 @@ const StreamedContent = ({ botData, botProps }) => {
     const retryTimerRef = useRef(null); // Interval ref for countdown
     const retryCountdownRef = useRef(0); // Non-state countdown for interval callback
     const thinkingContentRef = useRef("");
-    useSelector((state) => {
+    const thinkingContext = useSelector((state) => {
         return state.smartBotReducer.thinkingContext;
     });
     const stepRef = useRef(_isAbortedRemount
@@ -8696,7 +8735,10 @@ const StreamedContent = ({ botData, botProps }) => {
     const thinkingStartTimeRef = useRef(null);
     const thinkingTimeFinalRef = useRef(0);
     const thinkingHeaderMessageRef = useRef("Working for 0m:00s");
-    const streamStartTimeRef = useRef(null);
+    // Inherit the in-flight start time so a remount (e.g. tab switch, where
+    // processStream is not re-run) keeps the original one instead of resetting.
+    // Null for a fresh question - processStream sets it.
+    const streamStartTimeRef = useRef(thinkingContext?.isStreamCompleted ? null : thinkingContext?.streamStartTime || null);
     const thinkingDoneRef = useRef(false);
     const thinkingStartedRef = useRef(false);
     const setThinkingContentRef = useRef(setThinkingContent); // Store current setThinkingContent function
@@ -10281,7 +10323,6 @@ let instanceCounter = 0;
 let activeTabularInstanceId = null;
 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);
@@ -10370,13 +10411,13 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
             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));
+                return parsedData.isMultiSelect ? (jsx(SelectableChips, { bodyText: parsedData.bodyText, chipType: "selectable", utilityData: parsedData.utilityData, props: botProps }, key)) : (jsx(ChipsContent, { bodyText: parsedData.bodyText, props: botProps, botData: parsedData, isFormDisabled: isFormDisabled }, 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);
+                return jsx(TableContent, { bodyText: parsedData.bodyText }, parsedData.bodyText?.table_name || key);
             case "graph":
                 return jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
             case "radio":
@@ -10407,13 +10448,7 @@ const TabularContent = ({ steps: initialSteps, currentTabValue, children, questi
             if (!parsedData)
                 return null;
             const key = `restream-widget-${index}`;
-            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}`));
+            return renderWidgetBody(parsedData, key);
         }
         catch (e) {
             console.error("[TabularContent] renderWidget error:", e);
@@ -10777,19 +10812,10 @@ const resetActiveTabularInstance = () => {
 };
 
 const CombinedContent = ({ botData, props }) => {
-    const classes = useStyles$a();
     const isFormDisabled = botData?.isFormDisabled || false;
     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.
-    const renderHeaderTitle = (parsedData) => {
-        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 }));
-    };
     // Function to render individual content based on its type
     const renderIndividualContent = (parsedData, index) => {
         const key = `combined-content-${index}`;
@@ -10801,12 +10827,12 @@ const CombinedContent = ({ botData, props }) => {
                     return (jsx(SelectableChips, { bodyText: parsedData.bodyText, chipType: "selectable", utilityData: parsedData.utilityData, props: props }, key));
                 }
                 else {
-                    return jsx(ChipsContent, { bodyText: parsedData.bodyText, props: props }, key);
+                    return (jsx(ChipsContent, { bodyText: parsedData.bodyText, props: props, botData: parsedData, isFormDisabled: isFormDisabled }, key));
                 }
             case "questions":
                 return jsx(QuestionsContent, { bodyText: parsedData.bodyText, props: props }, key);
             case "table":
-                return jsx(TableContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(TableContent, { bodyText: parsedData.bodyText }, parsedData.bodyText?.table_name || key);
             case "graph":
                 return jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
             case "slider":
@@ -10842,8 +10868,8 @@ const CombinedContent = ({ botData, props }) => {
             if (!parsedData) {
                 return null;
             }
-            // Render the parsed content, preceded by the block's header title when present
-            return (jsxs(Fragment$1, { children: [renderHeaderTitle(parsedData), renderIndividualContent(parsedData, index)] }, `combined-block-${index}`));
+            // Render the parsed content
+            return renderIndividualContent(parsedData, index);
         }
         catch (error) {
             console.error(`Error parsing combined content item at index ${index}:`, error);
@@ -15856,10 +15882,14 @@ const SmartBot = (props) => {
                     answerMode: answerMode,
                 };
                 // if(!isEmpty(userInput)) {
+                // Clear the previous response's completed state so the incoming
+                // ThinkinHeaderInfo doesn't freeze on it. streamStartTime stays null
+                // here: processStream sets it, so a question has exactly one start
+                // time (two would make the new header look like a superseded one).
                 dispatch(setThinkingContext({
                     thinkingContent: "",
                     thinkingHeaderMessage: "Working for 0m:00s",
-                    streamStartTime: Date.now(),
+                    streamStartTime: null,
                     isStreamCompleted: false,
                     finalElapsedSeconds: null,
                 }));