impact-chatbot 2.3.51 → 2.3.53

package/dist/index.esm.js

@@ -18,13 +18,14 @@ import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import DOMPurify from 'dompurify';
 import { setSelectedFilters, setFilterConfiguration, getFilterUserConfiguration } from 'core/actions/filterAction';
-import { setChatbotContext, setStepFormStreamData, setPersistedFormValues, clearPersistedFormValues, setCurrentAgentChatId, setThinkingContext, setHierarchyKeyValue, setSavedFilterSets } from 'core/actions/smartBotActions';
+import { setChatbotContext, setStepFormStreamData, setThinkingContext, setPersistedFormValues, clearPersistedFormValues, setCurrentAgentChatId, setHierarchyKeyValue, 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';
 import { fetchBaseUrl, replaceSpecialCharacter as replaceSpecialCharacter$1, fetchLegacyAgentScreen } from 'core/Utils/functions/utils';
 import { Button, Modal, Slider, Select, DatePicker, DateRangePicker, Checkbox, RadioButtonGroup, Input, Tabs, Loader, Tooltip, ChatBotComponent } from 'impact-ui-v3';
+import axios from 'axios';
 import isArray$2 from 'lodash/isArray';
 import { stopAgentFlow } from 'core/commonComponents/smartBot/services/chatbot-services';
 import AgGridComponent from 'core/Utils/agGrid';
@@ -1277,12 +1278,70 @@ const ThinkingIndicator = (props) => {
     return (jsx("div", { children: jsx("div", { children: thinkingContentState ? (jsx("div", { children: jsx(TextRenderer, { text: thinkingContentState, thinking: true }) })) : (jsxs("div", { className: classes.thinkingSpinner, children: [jsx("span", { className: classes.thinkingDot }), jsx("span", { className: classes.thinkingDot }), jsx("span", { className: classes.thinkingDot })] })) }) }));
 };
 
+/**
+ * Formats elapsed seconds into "Xm:Ys" display string.
+ * e.g. 0 -> "0m:00s", 65 -> "1m:05s", 130 -> "2m:10s"
+ */
+const formatElapsedTime = (totalSeconds) => {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}m:${String(seconds).padStart(2, '0')}s`;
+};
 const ThinkinHeaderInfo = (props) => {
     const thinkingContext = useSelector((state) => {
         return state.smartBotReducer.thinkingContext;
     });
-    const { thinkingHeaderMessage } = thinkingContext;
-    return (jsx("div", { className: "thinkin-header-info", children: thinkingHeaderMessage }));
+    const { streamStartTime, isStreamCompleted, finalElapsedSeconds, thinkingHeaderMessage } = thinkingContext;
+    const [elapsed, setElapsed] = useState(0);
+    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);
+    useEffect(() => {
+        // If already frozen, ignore all future Redux changes
+        if (frozenRef.current)
+            return;
+        // 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);
+        }
+        else if (streamStartTime && !isStreamCompleted) {
+            // Live timer — update every second
+            const tick = () => {
+                const now = Date.now();
+                const diffSeconds = Math.floor((now - streamStartTime) / 1000);
+                setElapsed(diffSeconds);
+            };
+            tick(); // immediate first tick
+            intervalRef.current = setInterval(tick, 1000);
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [streamStartTime, isStreamCompleted, finalElapsedSeconds]);
+    // Determine display text
+    let displayText = thinkingHeaderMessage || '';
+    if (frozenRef.current && frozenTextRef.current) {
+        displayText = frozenTextRef.current;
+    }
+    else if (streamStartTime && !isStreamCompleted) {
+        displayText = `Working for ${formatElapsedTime(elapsed)}`;
+    }
+    else if (isStreamCompleted && typeof finalElapsedSeconds === 'number') {
+        displayText = `Completed in ${formatElapsedTime(finalElapsedSeconds)}`;
+    }
+    return (jsx("div", { className: "thinkin-header-info", children: displayText }));
 };
 
 // import { exampleGraphData } from "../examples/GraphExample";
@@ -4052,7 +4111,7 @@ const useChatState = () => {
     const [chatId, setChatId] = useState("");
     const [isStop, setIsStop] = useState(false);
     const [functionsState, setFunctionsState] = useState({});
-    const [thinkingHeaderMessage, setThinkingHeaderMessage] = useState("Planning next moves...");
+    const [thinkingHeaderMessage, setThinkingHeaderMessage] = useState("Working… 0m:00s");
     const [legacyAgentScreen, setLegacyAgentScreen] = useState(false);
     const [uniqueChatId, setUniqueChatId] = useState("");
     const [fieldNumber, setFieldNumber] = useState(0);
@@ -5277,9 +5336,9 @@ const AxiosSource = (url, opts, messageToStoreRef) => {
             headers: opts.headers,
             data: opts.body,
             signal: controller.signal,
-            responseType: "stream",
+            responseType: "text",
             onDownloadProgress: (progressEvent) => {
-                const response = progressEvent.currentTarget;
+                const response = progressEvent.currentTarget || progressEvent.target;
                 // Emit 'open' event when the connection is first established
                 if (!progressEvent.loaded) {
                     eventTarget.dispatchEvent(new Event("open", {
@@ -5314,8 +5373,9 @@ const AxiosSource = (url, opts, messageToStoreRef) => {
         })
             .catch((error) => {
             let reason = "Network request failed";
+            console.error("[AxiosSource] Request failed:", error);
             // Determine specific error reasons
-            if (axiosInstance.isCancel(error)) {
+            if (axios.isCancel(error)) {
                 reason = "Network request aborted";
             }
             else if (error.code === "ECONNABORTED") {
@@ -5386,6 +5446,7 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
         status: "",
     });
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
+    const thinkingContext = useSelector((state) => state.smartBotReducer.thinkingContext);
     const handleButtonClick = (button) => {
         if (isStepFormSubmit) {
             // Build the user_input from chatbotContext
@@ -5400,7 +5461,6 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
                         : typeof value === 'number' ? value : String(value);
                 }
             }
-            console.log("[ButtonContent] step form submit, calling init API with userInput:", userInput);
             dispatch(setChatbotContext({}));
             // Call the init API via SSE directly
             callInitApiStream(userInput);
@@ -5459,6 +5519,9 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
         dispatch(setStepFormStreamData({ status: "streaming_start", chunks: [], sessionId }));
         // Fire DOM event so SmartBot can show stop icon (Redux gets cleared by TabularContent before parent effects run)
         window.dispatchEvent(new CustomEvent("stepFormStreamStart"));
+        // Capture start time for computing elapsed on completion.
+        // Timer keeps running from the original streamStartTime (set when first API was hit).
+        const stepFormStreamStartTime = Date.now();
         sourceRef.current = AxiosSource(endPoint, {
             method: "POST",
             headers: {
@@ -5473,7 +5536,6 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
         sourceRef.current.addEventListener("message", (event) => {
             try {
                 const data = JSON.parse(event.data);
-                console.log("[ButtonContent] SSE chunk:", data);
                 // Always keep stepFormStreamControl.sessionId in sync with the latest chunk's session_id
                 if (data?.session_id) {
                     stepFormStreamControl.sessionId = data.session_id;
@@ -5514,6 +5576,22 @@ const ButtonContent = ({ bodyText, isFormDisabled = false, isStepFormSubmit = fa
                     stepFormStreamControl.isStreaming = false;
                     stepFormStreamControl.abort = null;
                     window.dispatchEvent(new CustomEvent("stepFormStreamEnd"));
+                    // Stop the timer only when status:"completed" is received
+                    if (data?.status === "completed") {
+                        // Use the original streamStartTime from Redux (set when first API was hit)
+                        const originalStartTime = thinkingContext?.streamStartTime || stepFormStreamStartTime;
+                        const totalElapsed = Math.floor((Date.now() - originalStartTime) / 1000);
+                        const sfMin = Math.floor(totalElapsed / 60);
+                        const sfSec = totalElapsed % 60;
+                        const sfWorkedLabel = `Completed in ${sfMin}m:${String(sfSec).padStart(2, '0')}s`;
+                        dispatch(setThinkingContext({
+                            streamStartTime: originalStartTime,
+                            isStreamCompleted: true,
+                            finalElapsedSeconds: totalElapsed,
+                            thinkingHeaderMessage: sfWorkedLabel,
+                            thinkingContent: "",
+                        }));
+                    }
                     // Signal tab switch to agent_response when status is "completed",
                     // but only if the response doesn't contain a new step_form that needs user interaction
                     const hasStepForm = chunksRef.some((c) => c.status === "step_form");
@@ -6972,24 +7050,6 @@ function clearTabNotification() {
  * This survives the cloneDeep replacement of botData in SmartBot's useEffect.
  */
 const streamStateMap = new Map();
-/**
- * Formats thinking time to display minutes when appropriate
- * @param {number} seconds - Time in seconds
- * @returns {string} Formatted time string
- */
-const formatThinkingTime = (seconds) => {
-    if (seconds < 60) {
-        return `${seconds} second${seconds !== 1 ? 's' : ''}`;
-    }
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = seconds % 60;
-    if (remainingSeconds === 0) {
-        return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
-    }
-    else {
-        return `${minutes} min ${remainingSeconds} sec`;
-    }
-};
 /**
  * StreamedContent Component
  * Handles real-time streaming of chat messages with a typing-like effect
@@ -7053,7 +7113,8 @@ const StreamedContent = ({ botData }) => {
     useRef(""); // Tracks the last received message
     const thinkingStartTimeRef = useRef(null);
     const thinkingTimeFinalRef = useRef(0);
-    const thinkingHeaderMessageRef = useRef("Planning next moves.....");
+    const thinkingHeaderMessageRef = useRef("Working for 0m:00s");
+    const streamStartTimeRef = useRef(null);
     const thinkingDoneRef = useRef(false);
     const setThinkingContentRef = useRef(setThinkingContent); // Store current setThinkingContent function
     const streamTimeoutRef = useRef(null); // Ref for stream timeout
@@ -7119,6 +7180,17 @@ const StreamedContent = ({ botData }) => {
                 ? botData?.utilityObject?.method
                 : "PUT";
             delete botData.inputBody.chat_input;
+            // Start the timer immediately when the API is called
+            if (!streamStartTimeRef.current) {
+                streamStartTimeRef.current = Date.now();
+                dispatch(setThinkingContext({
+                    streamStartTime: streamStartTimeRef.current,
+                    isStreamCompleted: false,
+                    finalElapsedSeconds: null,
+                    thinkingHeaderMessage: "Working for 0m:00s",
+                    thinkingContent: "",
+                }));
+            }
             // Initialize SSE connection with API endpoint
             sourceRef.current = AxiosSource(endPoint, {
                 method: method,
@@ -7207,7 +7279,7 @@ const StreamedContent = ({ botData }) => {
                         setQuestionsStepsMap(cloneDeep(initialMap));
                     }
                     else if (data.status === "thinking") {
-                        messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = "Planning next moves";
+                        messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = (jsx(ThinkinHeaderInfo, { thinkingHeaderMessage: "Working for 0m:00s" }));
                         // Start thinking if not already started
                         if (!isThinking) {
                             setIsThinking(true);
@@ -7218,6 +7290,9 @@ const StreamedContent = ({ botData }) => {
                         thinkingContentRef.current = thinkingContentRef.current + data.message;
                         messageToStoreRef.current.chatData.thinkingResponse.thinkingStream = newValue;
                         dispatch(setThinkingContext({
+                            streamStartTime: streamStartTimeRef.current,
+                            isStreamCompleted: false,
+                            finalElapsedSeconds: null,
                             thinkingHeaderMessage: thinkingHeaderMessageRef.current,
                             thinkingContent: thinkingContentRef.current,
                         }));
@@ -7350,7 +7425,8 @@ const StreamedContent = ({ botData }) => {
                         stepFormStreamControl.baseUrl = _burl;
                         // If this is the [DONE] chunk, mark streaming as complete
                         if (data.message === "[DONE]") {
-                            setStepsDone(true);
+                            // Do NOT set stepsDone here — step_form [DONE] is not status:"completed".
+                            // stepsDone should only be true when status:"completed" arrives.
                             setIsStreamingDone(true);
                             const doneState = streamStateMap.get(streamKey);
                             if (doneState)
@@ -7379,10 +7455,13 @@ const StreamedContent = ({ botData }) => {
                             // Store thinking time in messageToStoreRef for persistence
                             messageToStoreRef.current.chatData.thinkingResponse.thinkingTime = finalThinkingTime;
                             thinkingTimeFinalRef.current = finalThinkingTime;
-                            setThinkingHeaderMessage(`Thought for ${formatThinkingTime(finalThinkingTime)}`);
-                            thinkingHeaderMessageRef.current = `Thought for ${formatThinkingTime(finalThinkingTime)}`;
+                            // Keep timer running — do NOT set "Worked for" here.
+                            // Timer continues showing "Working for Xm:Ys" until status:"completed" arrives.
                             dispatch(setThinkingContext({
-                                thinkingHeaderMessage: `Thinking Completed`,
+                                streamStartTime: streamStartTimeRef.current,
+                                isStreamCompleted: false,
+                                finalElapsedSeconds: null,
+                                thinkingHeaderMessage: thinkingHeaderMessageRef.current,
                                 thinkingContent: thinkingContentRef.current,
                             }));
                         }
@@ -7496,11 +7575,31 @@ const StreamedContent = ({ botData }) => {
             if (currentMode === "agent") {
                 setIsStop(false);
                 // Use thinkingTime state instead of thinkingTimeFinalRef.current to ensure we have the correct value
-                thinkingTime || thinkingTimeFinalRef.current || 1;
-                messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = `Thinking Completed`;
-                // messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = `Thought for ${formatThinkingTime(
-                //   finalThinkingTime
-                // )}`;
+                const finalThinkingTime = thinkingTime || thinkingTimeFinalRef.current || 1;
+                const completedElapsed = streamStartTimeRef.current
+                    ? Math.floor((Date.now() - streamStartTimeRef.current) / 1000)
+                    : finalThinkingTime;
+                const compMin = Math.floor(completedElapsed / 60);
+                const compSec = completedElapsed % 60;
+                const workedForLabel = `Completed in ${compMin}m:${String(compSec).padStart(2, '0')}s`;
+                // Only stop the timer if we got status:"completed" (stepsDone=true).
+                // If stream ended with step_form [DONE], keep timer running for the next restream.
+                if (stepsDone) {
+                    // Completed — use a static string so this chat's heading won't
+                    // re-animate when a future chat dispatches a new streamStartTime.
+                    messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = workedForLabel;
+                    dispatch(setThinkingContext({
+                        streamStartTime: streamStartTimeRef.current,
+                        isStreamCompleted: true,
+                        finalElapsedSeconds: completedElapsed,
+                        thinkingHeaderMessage: workedForLabel,
+                        thinkingContent: thinkingContentRef.current,
+                    }));
+                }
+                else {
+                    // step_form case: keep heading as the live ThinkinHeaderInfo component so the timer keeps ticking
+                    messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = (jsx(ThinkinHeaderInfo, { thinkingHeaderMessage: "Working for 0m:00s" }));
+                }
                 let actualResponse = cloneDeep(messageToStoreRef.current.chatData.thinkingResponse.thinkingStream);
                 messageToStoreRef.current.chatData.thinkingResponse.thinkingContent = actualResponse;
                 parseResponse(messageToStoreRef.current.chatData, "text");
@@ -7741,6 +7840,20 @@ const StreamedContent = ({ botData }) => {
                 setShowThoughtDropdown(true);
                 messageToStoreRef.current.chatData.thinkingResponse.thinkingTime = finalThinkingTime;
             }
+            // Stop the timer on abort
+            const abortElapsed = streamStartTimeRef.current
+                ? Math.floor((Date.now() - streamStartTimeRef.current) / 1000)
+                : 0;
+            const abortMin = Math.floor(abortElapsed / 60);
+            const abortSec = abortElapsed % 60;
+            const abortLabel = `Completed in ${abortMin}m:${String(abortSec).padStart(2, '0')}s`;
+            dispatch(setThinkingContext({
+                streamStartTime: streamStartTimeRef.current,
+                isStreamCompleted: true,
+                finalElapsedSeconds: abortElapsed,
+                thinkingHeaderMessage: abortLabel,
+                thinkingContent: thinkingContentRef.current,
+            }));
             // If no content yet, show aborted message
             // if (isEmpty(messageToStoreRef.current.chatData?.response)) {
             messageToStoreRef.current.chatData.response =
@@ -7789,14 +7902,12 @@ const StreamedContent = ({ botData }) => {
         };
     }, [isStreaming, isStreamingDone]);
     /**
-     * Auto-abort previous stream when starting a new one
+     * Auto-abort previous stream when starting a new one.
+     * NOTE: This is intentionally removed. In axios 0.32.0, signal/abort is properly
+     * supported, and this effect was firing on mount causing immediate cancellation.
+     * Stream abort on "new chat" is already handled by handleNewChatClick calling
+     * functionsState.abortStreaming(). The streamStateMap logic handles all other cases.
      */
-    useEffect(() => {
-        // If we already have a source and it's streaming, abort it before starting new one
-        if (sourceRef.current && isStreaming) {
-            sourceRef.current.close();
-        }
-    }, [botData.inputBody]); // Trigger when new input is provided
     /**
      * Set up timeout for auto-abort (optional - can be configured)
      */
@@ -11628,7 +11739,7 @@ const useConversationManagement = (chatDataRef, currentMode, activeConversationI
                         thinkingStream: item.data,
                         thinkingContent: item.data,
                         thinkingTime: 1,
-                        thinkingHeading: "Thinking Completed",
+                        thinkingHeading: "Completed in 0m:00s",
                     };
                 }
                 else if (item.chatType === "steps") {
@@ -11823,7 +11934,9 @@ const useConversationManagement = (chatDataRef, currentMode, activeConversationI
                         thinkingResponse: msg.thinkingResponse ? {
                             thinkingStream: msg.thinkingResponse.thinkingStream,
                             thinkingTime: msg.thinkingResponse.thinkingTime,
-                            thinkingHeading: msg.thinkingResponse.thinkingHeading,
+                            thinkingHeading: typeof msg.thinkingResponse.thinkingHeading === 'string'
+                                ? msg.thinkingResponse.thinkingHeading
+                                : "Completed in 0m:00s",
                         } : undefined,
                     }
                 }))
@@ -12488,10 +12601,14 @@ const SmartBot = (props) => {
                     message.isFormDisabled = index !== lastBotMessageIndex;
                     message.messageIndex = index;
                     let originalUtilityObject = message.utilityObject;
+                    let originalThinkingResponse = message.thinkingResponse;
                     let newMessage = cloneDeep(message);
                     if (originalUtilityObject) {
                         newMessage.utilityObject = originalUtilityObject;
                     }
+                    if (originalThinkingResponse) {
+                        newMessage.thinkingResponse = originalThinkingResponse;
+                    }
                     message.jsx = (jsx(BotMessage, { botData: newMessage, state: loadingState, handleLikeDislike: handleLikeDislike, props: properties }));
                     let actualProps = {
                         botData: newMessage,
@@ -12506,6 +12623,15 @@ const SmartBot = (props) => {
             });
             // Create a deep clone and remove JSX properties to avoid circular references
             let newChat = cloneDeep(chatDataInfoRef?.current[currentMode]);
+            // Restore thinkingResponse (may contain JSX components like ThinkinHeaderInfo)
+            // which cloneDeep serializes into plain objects
+            const originalMessages = chatDataInfoRef?.current[currentMode]?.conversations?.[activeConversationId]?.messages || [];
+            const clonedMessages = newChat?.conversations?.[activeConversationId]?.messages || [];
+            originalMessages.forEach((origMsg, idx) => {
+                if (origMsg.thinkingResponse && clonedMessages[idx]) {
+                    clonedMessages[idx].thinkingResponse = origMsg.thinkingResponse;
+                }
+            });
             setConversation(newChat);
         }
         else if (showModal) {
@@ -12599,7 +12725,10 @@ const SmartBot = (props) => {
                 // if(!isEmpty(userInput)) {
                 dispatch(setThinkingContext({
                     thinkingContent: "",
-                    thinkingHeaderMessage: "Planning next moves.....",
+                    thinkingHeaderMessage: "Working for 0m:00s",
+                    streamStartTime: Date.now(),
+                    isStreamCompleted: false,
+                    finalElapsedSeconds: null,
                 }));
                 // }
                 prepareDataAndSendToAgent(data, true, {
@@ -12814,7 +12943,10 @@ const SmartBot = (props) => {
                         setShowChatPlaceholder(true);
                         dispatch(setThinkingContext({
                             thinkingContent: "",
-                            thinkingHeaderMessage: "Planning next moves.....",
+                            thinkingHeaderMessage: "Working for 0m:00s",
+                            streamStartTime: null,
+                            isStreamCompleted: false,
+                            finalElapsedSeconds: null,
                         }));
                         setInitValue(true);
                         setSessionId("");