impact-chatbot 2.3.3 → 2.3.5

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, useMemo } from 'react';
+import React__default, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
 import { COMBINED_CROSS_DIMENSIONAL_API, BASE_API } from 'config/api';
 import axiosInstance from 'core/Utils/axios';
 import 'core/actions/tenantConfigActions';
@@ -22,15 +22,17 @@ 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 } from 'core/Utils/functions/utils';
-import { ChatBotComponent } from 'impact-ui-chatbot';
-import { Button, Modal, Tabs, Slider, Select, DatePicker, Checkbox, RadioButtonGroup, Input, Loader } from 'impact-ui-v3';
+import { fetchBaseUrl, replaceSpecialCharacter as replaceSpecialCharacter$1, fetchLegacyAgentScreen } from 'core/Utils/functions/utils';
+import { Button, Modal, AccordionModern, Tabs, Slider, Select, DatePicker, Checkbox, RadioButtonGroup, Input, Loader, ChatBotComponent } from 'impact-ui-v3';
 import AgGridComponent from 'core/Utils/agGrid';
 import agGridColumnFormatter from 'core/Utils/agGrid/column-formatter';
 import CoreChart from 'core/Utils/core-charts';
 import makeStyles$1 from '@mui/styles/makeStyles';
+import globalStyles$1 from 'core/Styles/globalStyles';
+import CircularProgress$1 from '@mui/material/CircularProgress';
 import FormatListBulletedOutlinedIcon from '@mui/icons-material/FormatListBulletedOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
+import { stopAgentFlow } from 'core/commonComponents/smartBot/services/chatbot-services';
 import RangePicker from 'core/commonComponents/dateRangePicker';
 
 /**
@@ -918,14 +920,6 @@ const getFormattedApplicationName = (applicationURL) => {
   }
 };
 
-// Fetch legacy agent screen - stub implementation
-const fetchLegacyAgentScreen = () => {
-  // This function is kept as a stub since it's rarely used
-  // The actual implementation will be provided by the host app if needed
-  console.warn("fetchLegacyAgentScreen called - this is a stub implementation");
-  return null;
-};
-
 /**
  * Preprocesses markdown content to improve list formatting
  */
@@ -1215,6 +1209,7 @@ const useAgentFlow = (dateFormat, chatDataRef, currentMode, setShowChatPlacehold
                     setUniqueChatId: utilityObjectData?.setUniqueChatId,
                     fieldNumber: utilityObjectData?.fieldNumber,
                     setFieldNumber: utilityObjectData?.setFieldNumber,
+                    baseUrl: baseUrlTemp,
                 };
                 response = await parseResponse(null, "stream", "", currentModeValue, false, "", {}, payload, utilityObject);
                 let chatDataMessages = chatDataInfoRef.current[currentModeValue].conversations[1].messages;
@@ -1845,6 +1840,8 @@ const useAgentFlow = (dateFormat, chatDataRef, currentMode, setShowChatPlacehold
                         isTabEnabled: utilsObject?.isTabEnabled,
                         steps: utilsObject?.steps,
                         currentTabValue: utilsObject?.currentTabValue,
+                        questions: utilsObject?.questions,
+                        questionsStepsMap: utilsObject?.questionsStepsMap,
                     }, null, { thinkingResponse: thinkingInfo });
                 }
             }
@@ -4348,6 +4345,13 @@ const useRectangleStyles = makeStyles((theme) => ({
         transition: "all 0.2s ease-in-out",
         position: "relative",
         overflow: "hidden",
+    },
+    rectangleHoverable: {
+        cursor: "pointer",
+        "&:hover": {
+            transform: "translateY(-2px)",
+            boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        },
         "&::before": {
             content: '""',
             position: "absolute",
@@ -4422,12 +4426,12 @@ const useRectangleStyles = makeStyles((theme) => ({
         color: "#60697D",
     },
 }));
-const Rectangle = ({ type, icon, title, description, onClick }) => {
+const Rectangle = ({ type, icon, title, description, onClick, hoverable }) => {
     const classes = useRectangleStyles();
-    return (jsx("div", { className: `${classes.rectangle} ${classes[type]}`, onClick: onClick, children: jsxs("div", { className: classes.textContainer, children: [jsx(Typography, { className: classes.title, children: title }), jsx(Typography, { className: classes.description, children: description })] }) }));
+    return (jsx("div", { className: `${classes.rectangle} ${classes[type]} ${hoverable ? classes.rectangleHoverable : ''}`, onClick: onClick, children: jsxs("div", { className: classes.textContainer, children: [jsx(Typography, { className: classes.title, children: title }), jsx(Typography, { className: classes.description, children: description })] }) }));
 };
 const ChatPlaceholder = (props) => {
-    const { dateFormat, chatDataRef, currentMode, setShowChatPlaceholder, setLoader, setCurrentAgentId, baseUrl, setBaseUrl, setCurrentSessionId, customChatConfig, chatDataInfoRef, setChatDataState, userInput, legacyAgentScreen, activeConversationId, chatBodyRef, chatbotContext, setInitValue, setSessionId, thinkingContent, setThinkingContent, isThinking, setIsThinking, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, uniqueChatId, setUniqueChatId, } = props;
+    const { dateFormat, chatDataRef, currentMode, setShowChatPlaceholder, setLoader, setCurrentAgentId, baseUrl, setBaseUrl, setCurrentSessionId, customChatConfig, chatDataInfoRef, setChatDataState, userInput, legacyAgentScreen, activeConversationId, chatBodyRef, chatbotContext, setInitValue, setSessionId, thinkingContent, setThinkingContent, isThinking, setIsThinking, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, uniqueChatId, setUniqueChatId, fieldNumber, setFieldNumber, } = props;
     const classes = useStyles$5();
     globalStyles();
     const [cardList, setCardList] = useState([]);
@@ -4455,6 +4459,8 @@ const ChatPlaceholder = (props) => {
         setThinkingHeaderMessage,
         uniqueChatId,
         setUniqueChatId,
+        fieldNumber,
+        setFieldNumber,
     });
     const getBaseUrl = async () => {
         try {
@@ -4489,15 +4495,15 @@ const ChatPlaceholder = (props) => {
     useEffect(() => {
         getBaseUrl();
     }, []);
-    const handleRectangleClick = (agentId) => {
+    const handleRectangleClick = (agentId, title) => {
         if (legacyAgentScreen) {
             setCurrentAgentId(agentId);
             const initiateAgentPayload = {
                 agent_id: agentId,
                 session_id: null,
-                user_input: userInput,
+                user_input: title,
                 init: true,
-                delay: 0,
+                delay: 0.3,
             };
             setAgentFlow(initiateAgentPayload, "", baseUrl);
         }
@@ -4535,11 +4541,11 @@ const ChatPlaceholder = (props) => {
         type: "blue",
         icon: jsx(SvgCircular3D, {}),
         title: card.name || card.title || "Agent",
-        description: card.description || card.helpText || "Agent description",
+        description: card.description || card.helpText || "",
         agentId: card.agentId || card.id
     }));
     const dataToMap = legacyAgentScreen ? transformedCardList : rectangleData;
-    return (jsxs("div", { className: classes.placeholderContainer, children: [jsx("div", { className: classes.centerIconContainer, children: jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsx(Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsx(Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsx(Rectangle, { type: item.type, icon: item.icon, title: item.title, description: item.description, onClick: () => handleRectangleClick(item.agentId) }, index))) })] }));
+    return (jsxs("div", { className: classes.placeholderContainer, children: [jsx("div", { className: classes.centerIconContainer, children: jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsx(Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsx(Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsx(Rectangle, { type: item.type, icon: item.icon, title: item.title, description: item.description, onClick: () => handleRectangleClick(item?.agentId, item?.title), hoverable: legacyAgentScreen }, index))) })] }));
 };
 
 const dateFormat = "DD-MM-YYYY HH:mm:ss";
@@ -5022,6 +5028,13 @@ const sseevent = (message, messageToStoreRef) => {
                 };
             }
         }
+        if (messageToStoreRef.current.currentMode === "agent" &&
+            (parsedData?.chat_id || parsedData?.session_id)) {
+            messageToStoreRef.current.uniqueChatId = parsedData?.chat_id
+                ? parsedData.chat_id
+                : "";
+            messageToStoreRef.current.sessionId = parsedData?.session_id;
+        }
         if (parsedData?.is_error) {
             messageToStoreRef.current.chatData.response =
                 messageToStoreRef.current.chatData.response +
@@ -5383,26 +5396,57 @@ var SvgStepError = function SvgStepError(props) {
   })));
 };
 
+const CustomGroupAccordion = ({ children, onExpandChange, }) => {
+    const globalClasses = globalStyles$1();
+    const [accordionData, setAccordionData] = useState([]);
+    const [activeAccordion, setActiveAccordion] = useState("");
+    const prepareAccordionData = () => {
+        const data = [];
+        React__default.Children.toArray(children).forEach((child, index) => {
+            data.push({
+                id: index + 1,
+                header: child.props.accordionName,
+                content: child,
+                value: child.props.accordionValue || child.props.accordionName,
+                childCount: child.props.accordionChildCount,
+            });
+        });
+        setAccordionData(data);
+    };
+    useEffect(() => {
+        prepareAccordionData();
+    }, [children]);
+    return (jsx("div", { className: globalClasses.accordianWrapper, children: jsx(AccordionModern, { data: accordionData, expanded: activeAccordion, setExpanded: (val) => {
+                setActiveAccordion(val);
+                onExpandChange?.(val);
+            } }) }));
+};
+
 const useStyles$2 = makeStyles$1((theme) => ({
+    "@global": {
+        "@keyframes stepsLoaderSpin": {
+            "0%": {
+                transform: "rotate(0deg)",
+            },
+            "100%": {
+                transform: "rotate(360deg)",
+            },
+        },
+    },
     stepsContainer: {
         display: "flex",
         flexDirection: "column",
-        gap: "20px",
+        gap: pxToRem(20),
         background: colours.white,
-        marginTop: "20px",
+        marginTop: pxToRem(20),
     },
     stepItem: {
         display: "flex",
         alignItems: "center",
         gap: "12px",
     },
-    "@keyframes rotate": {
-        "0%": {
-            transform: "rotate(0deg)",
-        },
-        "100%": {
-            transform: "rotate(360deg)",
-        }
+    mt12: {
+        marginTop: pxToRem(12),
     },
     stepStatus: {
         display: "flex",
@@ -5416,7 +5460,7 @@ const useStyles$2 = makeStyles$1((theme) => ({
         "&.loading": {
             background: colours.backgroundChat,
             "& svg": {
-                animation: "$rotate 1s linear infinite",
+                animation: "stepsLoaderSpin 1s linear infinite",
             }
         },
         "&.error": {
@@ -5435,10 +5479,10 @@ const useStyles$2 = makeStyles$1((theme) => ({
     stepHeader: {
         color: colours.oceanGreen,
         fontFamily: "Manrope",
-        fontSize: "14px",
+        fontSize: pxToRem(14),
         fontStyle: "normal",
         fontWeight: 500,
-        lineHeight: "20px",
+        lineHeight: pxToRem(20),
         "&.loading": {
             color: colours.brightRoyalBlue,
         },
@@ -5449,25 +5493,131 @@ const useStyles$2 = makeStyles$1((theme) => ({
     stepSubheader: {
         color: colours.neutrals,
         fontFamily: "Manrope",
-        fontSize: "12px",
+        fontSize: pxToRem(12),
         fontStyle: "normal",
         fontWeight: 500,
-        lineHeight: "16px",
+        lineHeight: pxToRem(16),
+    },
+    "@keyframes slideDown": {
+        "0%": {
+            opacity: 0,
+            maxHeight: 0,
+            transform: "translateY(-12px)",
+        },
+        "100%": {
+            opacity: 1,
+            maxHeight: "2000px",
+            transform: "translateY(0)",
+        },
+    },
+    loaderContainer: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: pxToRem(40),
+    },
+    loader: {
+        color: "#435af0",
+    },
+    loaderCaption: {
+        color: colours.neutrals,
+        fontFamily: "Manrope",
+        fontSize: pxToRem(13),
+        fontWeight: 500,
+        marginTop: pxToRem(12),
+    },
+    accordionAnimated: {
+        animation: "$slideDown 0.4s ease-out forwards",
+        overflow: "hidden",
+        "& .impact-modern-accordion-item .impact-modern-accordion-header": {
+            height: "auto",
+            alignItems: "flex-start",
+            padding: `${pxToRem(16)} ${pxToRem(16)} ${pxToRem(8)} ${pxToRem(16)} !important`
+        },
+        "& .loading svg": {
+            animation: "stepsLoaderSpin 1s linear infinite !important",
+        },
+        "& .impact-modern-accordion-item .impact-modern-accordion-content": {
+            padding: `${pxToRem(0)} ${pxToRem(42)} ${pxToRem(8)} ${pxToRem(32)} !important`
+        },
+        "& .impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon": {
+            width: `${pxToRem(24)} !important`,
+            height: `${pxToRem(24)} !important`,
+        }
+    },
+    accordionStepsWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        gap: pxToRem(12),
+    },
+    accordionHeaderWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        gap: pxToRem(16),
+        width: "100%",
+    },
+    accordionHeaderQuestion: {
+        fontFamily: "Manrope",
+        fontSize: pxToRem(14),
+        fontWeight: 600,
+    },
+    headerStepPreview: {
+        marginLeft: pxToRem(-20),
+    },
+    closedAccordionStep: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        marginTop: pxToRem(4),
+        "& svg": {
+            width: "14px",
+            height: "14px",
+            flexShrink: 0,
+        },
+    },
+    closedStepLoading: {
+        "& svg": {
+            animation: "stepsLoaderSpin 1s linear infinite",
+        },
+    },
+    closedStepText: {
+        fontFamily: "Manrope",
+        fontSize: pxToRem(12),
+        fontWeight: 500,
+        color: colours.neutrals,
+        "&.loading": {
+            color: colours.brightRoyalBlue,
+        },
+        "&.completed": {
+            color: colours.oceanGreen,
+        },
     },
 }));
-const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, }) => {
+const StepItemRenderer$1 = ({ step, classes }) => (jsxs("div", { className: classes.stepItem, children: [jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
+                ? "loading"
+                : step.step_status === "error"
+                    ? "error"
+                    : ""}`, children: step.step_status === "not-completed" ? (jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsx(SvgStepError, {})) : (jsx(SvgStepDone, {})) }), jsxs("div", { className: classes.stepContent, children: [jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
+                        ? "loading"
+                        : step.step_status === "error"
+                            ? "error"
+                            : ""}`, children: step.header }), jsx("div", { className: classes.stepSubheader, children: step.sub_header })] })] }));
+const getActiveStep = (stepsForQuestion) => {
+    if (!stepsForQuestion || stepsForQuestion.length === 0)
+        return null;
+    const loadingStep = stepsForQuestion.find((s) => s.step_status === "not-completed");
+    if (loadingStep)
+        return loadingStep;
+    return stepsForQuestion[stepsForQuestion.length - 1];
+};
+const AccordionStepsContent$1 = ({ questionSteps, classes, accordionName, accordionChildCount = "", accordionValue }) => {
+    return (jsx("div", { className: classes.accordionStepsWrapper, children: jsx("div", { className: `${classes.stepsContainer} ${classes.mt12}`, children: questionSteps.map((step, index) => (jsx(StepItemRenderer$1, { step: step, classes: classes }, index))) }) }));
+};
+const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, }) => {
     const classes = useStyles$2();
     useState(false);
-    // useEffect(() => {
-    //   if (steps.length > 0) {
-    //     // Mark all previous steps as done and last step as loading
-    //     const updatedSteps = steps.map((step, index) => ({
-    //       ...step,
-    //       status: index === steps.length - 1 ? "loading" : "done"
-    //     }));
-    //     setSteps(updatedSteps);
-    //   }
-    // }, [steps]);
+    const [expandedAccordion, setExpandedAccordion] = useState("");
     useEffect(() => {
         if (done) {
             // Add finished step when done is true
@@ -5502,15 +5652,38 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
             }
         }
     }, [done]);
-    return (jsx("div", { className: classes.stepsContainer, children: steps.map((step, index) => (jsxs("div", { className: classes.stepItem, children: [jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
-                        ? "loading"
-                        : step.step_status === "error"
-                            ? "error"
-                            : ""}`, children: step.step_status === "not-completed" ? (jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsx(SvgStepError, {})) : (jsx(SvgStepDone, {})) }), jsxs("div", { className: classes.stepContent, children: [jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
-                                ? "loading"
-                                : step.step_status === "error"
-                                    ? "error"
-                                    : ""}`, children: step.header }), jsx("div", { className: classes.stepSubheader, children: step.sub_header })] })] }, index))) }));
+    const hasQuestions = questions.length > 0;
+    if (!hasQuestions) {
+        if (currentMode === "agent" && steps.length === 1) {
+            return (jsxs("div", { className: classes.loaderContainer, children: [jsx(CircularProgress$1, { className: classes.loader, size: 50, thickness: 4 }), jsx("span", { className: classes.loaderCaption, children: "Analyzing next steps..." })] }));
+        }
+        if (steps.length > 0) {
+            const fallbackQuestion = "Processing Request";
+            const activeStep = getActiveStep(steps);
+            const isExpanded = expandedAccordion === fallbackQuestion;
+            const accordionHeader = (jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsx("div", { className: classes.accordionHeaderQuestion, children: fallbackQuestion }), !isExpanded && activeStep && (jsx("div", { className: classes.headerStepPreview, children: jsx(StepItemRenderer$1, { step: activeStep, classes: classes }) }))] }));
+            return (jsx("div", { className: `${classes.stepsContainer} ${classes.accordionAnimated}`, children: jsx(CustomGroupAccordion, { onExpandChange: (val) => setExpandedAccordion(val), children: jsx(AccordionStepsContent$1, { questionSteps: steps, classes: classes, accordionName: accordionHeader, accordionValue: fallbackQuestion }) }) }));
+        }
+        return null;
+    }
+    return (jsx("div", { className: `${classes.stepsContainer} ${classes.accordionAnimated}`, children: jsx(CustomGroupAccordion, { onExpandChange: (val) => setExpandedAccordion(val), children: questions.map((question, index) => {
+                const questionSteps = questionsStepsMap[question] || [
+                    {
+                        header: "Processing Request",
+                        sub_header: "Analyzing the current request",
+                        step_status: "not-completed",
+                    },
+                ];
+                const activeStep = getActiveStep(questionSteps);
+                const stepCount = questionSteps.length;
+                const completedCount = questionSteps.filter((s) => s.step_status === "completed").length;
+                activeStep
+                    ? `${activeStep.header} - Step ${completedCount}/${stepCount}`
+                    : "";
+                const isExpanded = expandedAccordion === question;
+                const accordionHeader = (jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsx("div", { className: classes.accordionHeaderQuestion, children: question }), !isExpanded && activeStep && (jsx("div", { className: classes.headerStepPreview, children: jsx(StepItemRenderer$1, { step: activeStep, classes: classes }) }))] }));
+                return (jsx(AccordionStepsContent$1, { questionSteps: questionSteps, classes: classes, accordionName: accordionHeader, accordionValue: question }, index));
+            }) }) }));
 };
 
 const AgentResponse$1 = (props) => {
@@ -5523,7 +5696,7 @@ const AgentResponse$1 = (props) => {
 };
 
 const StepsResponseTab = (props) => {
-    const { steps, setSteps, stepsDone, setStepsDone, finalStepDone, setFinalStepDone, content, isStreaming, stepChange, currentMode, } = props;
+    const { steps, setSteps, stepsDone, setStepsDone, finalStepDone, setFinalStepDone, content, isStreaming, stepChange, currentMode, questions, questionsStepsMap, } = props;
     const [tabValue, setTabValue] = useState("steps");
     const handleChangeTabValue = (_event, newValue) => {
         setTabValue(newValue);
@@ -5540,7 +5713,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 }),
+                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 }),
                 jsx(AgentResponse$1, { content: content, isStreaming: isStreaming }),
             ], value: tabValue }) }));
 };
@@ -5576,7 +5749,7 @@ const formatThinkingTime = (seconds) => {
  * @param {Function} botData.utilityObject.setChatDataState - Function to update chat data state
  */
 const StreamedContent = ({ botData }) => {
-    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, } = botData.utilityObject;
+    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 } = botData.utilityObject;
     const classes = useStyles$3();
     useStyles$6();
     const dispatch = useDispatch();
@@ -5598,6 +5771,8 @@ const StreamedContent = ({ botData }) => {
             step_status: "not-completed"
         }
     ]);
+    const [questions, setQuestions] = useState([]);
+    const [questionsStepsMap, setQuestionsStepsMap] = useState({});
     const [stepChange, setStepChange] = useState(false);
     const [stepsDone, setStepsDone] = useState(false);
     const [finalStepDone, setFinalStepDone] = useState(false);
@@ -5614,6 +5789,8 @@ const StreamedContent = ({ botData }) => {
             step_status: "not-completed"
         }
     ]);
+    const questionsRef = useRef([]);
+    const questionsStepsMapRef = useRef({});
     // Refs to maintain data across renders
     const sourceRef = useRef(null); // Holds the SSE source instance
     useRef(""); // Tracks the last received message
@@ -5703,8 +5880,25 @@ const StreamedContent = ({ botData }) => {
                         thinkingStartTimeRef.current = Date.now();
                     }
                     const data = JSON.parse(event.data);
-                    if (data?.message || data?.status === "step" || data?.status === "thinking") {
-                        if (data.status === "thinking") {
+                    if (data?.message || data?.status === "step" || data?.status === "thinking" || data?.status === "questions") {
+                        if (data.status === "questions") {
+                            const incomingQuestions = data.widget_data?.[0]?.questions || [];
+                            questionsRef.current = incomingQuestions;
+                            setQuestions(incomingQuestions);
+                            const initialMap = {};
+                            incomingQuestions.forEach((q) => {
+                                initialMap[q] = [
+                                    {
+                                        header: "Processing Request",
+                                        sub_header: "Analyzing the current request",
+                                        step_status: "not-completed",
+                                    },
+                                ];
+                            });
+                            questionsStepsMapRef.current = initialMap;
+                            setQuestionsStepsMap(cloneDeep(initialMap));
+                        }
+                        else if (data.status === "thinking") {
                             messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = "Planning next moves";
                             // Start thinking if not already started
                             if (!isThinking) {
@@ -5743,6 +5937,7 @@ const StreamedContent = ({ botData }) => {
                         }
                         else if (data.status === "step") {
                             let newStep = data.widget_data[0];
+                            const currentIntent = data.widget_data[0]?.current_intent;
                             setSteps([...steps, newStep]);
                             let newSteps = cloneDeep(stepRef.current);
                             if (newSteps.length === 1) {
@@ -5752,15 +5947,28 @@ const StreamedContent = ({ botData }) => {
                             }
                             const existingStepIndex = newSteps.findIndex((step) => step.header === newStep.header);
                             if (existingStepIndex !== -1) {
-                                // Replace the existing step at the same position
                                 newSteps[existingStepIndex] = newStep;
                             }
                             else {
-                                // If no matching step found, add it to the end
                                 newSteps.push(newStep);
                             }
                             stepRef.current = newSteps;
                             setSteps(newSteps);
+                            if (currentIntent && questionsStepsMapRef.current[currentIntent]) {
+                                let intentSteps = cloneDeep(questionsStepsMapRef.current[currentIntent]);
+                                if (intentSteps.length === 1 && intentSteps[0].header === "Processing Request") {
+                                    intentSteps[0].step_status = "completed";
+                                }
+                                const existingIdx = intentSteps.findIndex((s) => s.header === newStep.header);
+                                if (existingIdx !== -1) {
+                                    intentSteps[existingIdx] = newStep;
+                                }
+                                else {
+                                    intentSteps.push(newStep);
+                                }
+                                questionsStepsMapRef.current[currentIntent] = intentSteps;
+                                setQuestionsStepsMap(cloneDeep(questionsStepsMapRef.current));
+                            }
                             setStepChange((prev) => !prev);
                         }
                         else if (data.message !== "[DONE]") {
@@ -5992,6 +6200,8 @@ const StreamedContent = ({ botData }) => {
                     isTabEnabled: true,
                     steps: cloneDeep(stepRef.current),
                     currentTabValue: "agent_response",
+                    questions: cloneDeep(questionsRef.current),
+                    questionsStepsMap: cloneDeep(questionsStepsMapRef.current),
                 });
                 // [
                 //   {
@@ -6070,6 +6280,8 @@ const StreamedContent = ({ botData }) => {
                     isTabEnabled: true,
                     steps: cloneDeep(stepRef.current),
                     currentTabValue: "agent_response",
+                    questions: cloneDeep(questionsRef.current),
+                    questionsStepsMap: cloneDeep(questionsStepsMapRef.current),
                 });
             }
             // Trigger re-render by updating chatDataState
@@ -6103,6 +6315,10 @@ const StreamedContent = ({ botData }) => {
             sourceRef.current.close();
             setIsStreaming(false);
             setIsStreamingDone(true);
+            // Stop the agent flow on the backend
+            if (messageToStoreRef.current.sessionId) {
+                stopAgentFlow({ session_id: messageToStoreRef.current.sessionId }, baseUrl);
+            }
             // Clear timeout if exists
             if (streamTimeoutRef.current) {
                 clearTimeout(streamTimeoutRef.current);
@@ -6202,7 +6418,7 @@ const StreamedContent = ({ botData }) => {
      * @returns {JSX.Element} Rendered content with optional blinking cursor
      */
     const renderContent = () => {
-        return (jsx("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 }) }));
+        return (jsx("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 }) }));
     };
     if (currentMode === "agent") {
         return renderContent();
@@ -6421,9 +6637,28 @@ const useStyles$1 = makeStyles$1((theme) => ({
     stepsContainer: {
         display: "flex",
         flexDirection: "column",
-        gap: "20px",
+        gap: pxToRem(20),
         background: colours.white,
-        marginTop: "20px",
+        marginTop: pxToRem(20),
+        "& .impact-modern-accordion-item .impact-modern-accordion-header": {
+            height: "auto",
+            alignItems: "flex-start"
+        },
+        "& .impact-modern-accordion-item .impact-modern-accordion-content": {
+            padding: `${pxToRem(0)} ${pxToRem(42)} ${pxToRem(8)} ${pxToRem(32)} !important`
+        },
+        "& .impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon": {
+            width: `${pxToRem(24)} !important`,
+            height: `${pxToRem(24)} !important`,
+        }
+    },
+    hideContentDiv: {
+        "& .impact-modern-accordion-item .impact-modern-accordion-content": {
+            display: "none",
+        }
+    },
+    mt12: {
+        marginTop: pxToRem(12),
     },
     stepItem: {
         display: "flex",
@@ -6469,10 +6704,10 @@ const useStyles$1 = makeStyles$1((theme) => ({
     stepHeader: {
         color: colours.oceanGreen,
         fontFamily: "Manrope",
-        fontSize: "14px",
+        fontSize: pxToRem(14),
         fontStyle: "normal",
         fontWeight: 500,
-        lineHeight: "20px",
+        lineHeight: pxToRem(20),
         "&.loading": {
             color: colours.brightRoyalBlue,
         },
@@ -6483,62 +6718,89 @@ const useStyles$1 = makeStyles$1((theme) => ({
     stepSubheader: {
         color: colours.neutrals,
         fontFamily: "Manrope",
-        fontSize: "12px",
+        fontSize: pxToRem(12),
         fontStyle: "normal",
         fontWeight: 500,
-        lineHeight: "16px",
+        lineHeight: pxToRem(16),
+    },
+    accordionStepsWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        gap: pxToRem(12),
+    },
+    accordionHeaderWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        gap: pxToRem(16),
+        width: "100%",
+    },
+    accordionHeaderQuestion: {
+        fontFamily: "Manrope",
+        fontSize: pxToRem(14),
+        fontWeight: 600,
+    },
+    headerStepPreview: {
+        marginLeft: pxToRem(-20),
+    },
+    closedAccordionStep: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        marginTop: pxToRem(4),
+        "& svg": {
+            width: "14px",
+            height: "14px",
+            flexShrink: 0,
+        },
+    },
+    closedStepText: {
+        fontFamily: "Manrope",
+        fontSize: pxToRem(12),
+        fontWeight: 500,
+        color: colours.oceanGreen,
     },
 }));
-const Steps = ({ steps }) => {
-    const classes = useStyles$1();
-    useState(false);
-    // useEffect(() => {
-    //   if (steps.length > 0) {
-    //     // Mark all previous steps as done and last step as loading
-    //     const updatedSteps = steps.map((step, index) => ({
-    //       ...step,
-    //       status: index === steps.length - 1 ? "loading" : "done"
-    //     }));
-    //     setSteps(updatedSteps);
-    //   }
-    // }, [steps]);
-    //   useEffect(() => {
-    //     if (done) {
-    //       // Add finished step when done is true
-    //       if (!finalStepDone) {
-    //         let updatedSteps = steps.map((step) => ({
-    //           ...step,
-    //           step_status: "completed",
-    //         }));
-    //         updatedSteps = [...updatedSteps, {
-    //           header: "Finished",
-    //           sub_header: "Analysis complete",
-    //           step_status: "not-completed",
-    //         }];
-    //         setSteps(cloneDeep(updatedSteps));
-    //         setTimeout(() => {
-    //            updatedSteps = updatedSteps.map((step) => ({
-    //             ...step,
-    //             step_status: "completed",
-    //           }));
-    //           setSteps(cloneDeep(updatedSteps));
-    //           setFinalStepDone(true);
-    //         }, 4000);
-    //         setTimeout(() => {
-    //           setTabValue("agent_response");
-    //         }, 4300);
-    //       }
-    //     }
-    //   }, [done]);
-    return (jsx("div", { className: classes.stepsContainer, children: steps.map((step, index) => (jsxs("div", { className: classes.stepItem, children: [jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
+const StepItemRenderer = ({ step, classes }) => (jsxs("div", { className: classes.stepItem, children: [jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
+                ? "loading"
+                : step.step_status === "error"
+                    ? "error"
+                    : ""}`, children: step.step_status === "not-completed" ? (jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsx(SvgStepError, {})) : (jsx(SvgStepDone, {})) }), jsxs("div", { className: classes.stepContent, children: [jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
                         ? "loading"
                         : step.step_status === "error"
                             ? "error"
-                            : ""}`, children: step.step_status === "not-completed" ? (jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsx(SvgStepError, {})) : (jsx(SvgStepDone, {})) }), jsxs("div", { className: classes.stepContent, children: [jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
-                                ? "loading"
-                                : step.step_status === "error"
-                                    ? "error"
-                                    : ""}`, children: step.header }), jsx("div", { className: classes.stepSubheader, children: step.sub_header })] })] }, index))) }));
+                            : ""}`, children: step.header }), jsx("div", { className: classes.stepSubheader, children: step.sub_header })] })] }));
+const AccordionStepsContent = ({ questionSteps, classes, accordionName, accordionChildCount = "", accordionValue }) => {
+    return (jsx("div", { className: classes.accordionStepsWrapper, children: jsx("div", { className: `${classes.stepsContainer} ${classes.mt12}`, children: questionSteps.map((step, index) => (jsx(StepItemRenderer, { step: step, classes: classes }, index))) }) }));
+};
+const Steps = ({ steps, questions = [], questionsStepsMap = {} }) => {
+    const classes = useStyles$1();
+    useState(false);
+    const [expandedAccordion, setExpandedAccordion] = useState("");
+    const hasQuestions = questions.length > 0;
+    if (!hasQuestions) {
+        if (steps.length > 0) {
+            const fallbackQuestion = "Processing Request";
+            const lastStep = steps[steps.length - 1];
+            const isExpanded = expandedAccordion === fallbackQuestion;
+            const accordionHeader = (jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsx("div", { className: classes.accordionHeaderQuestion, children: fallbackQuestion }), !isExpanded && lastStep && (jsx("div", { className: classes.headerStepPreview, children: jsx(StepItemRenderer, { step: lastStep, classes: classes }) }))] }));
+            return (jsx("div", { className: classes.stepsContainer, children: jsx(CustomGroupAccordion, { onExpandChange: (val) => setExpandedAccordion(val), children: jsx(AccordionStepsContent, { questionSteps: steps, classes: classes, accordionName: accordionHeader, accordionValue: fallbackQuestion }) }) }));
+        }
+        return null;
+    }
+    return (jsx("div", { className: classes.stepsContainer, children: jsx(CustomGroupAccordion, { onExpandChange: (val) => setExpandedAccordion(val), children: questions.map((question, index) => {
+                const questionSteps = questionsStepsMap[question] || [
+                    {
+                        header: "Processing Request",
+                        sub_header: "Analyzing the current request",
+                        step_status: "completed",
+                    },
+                ];
+                questionSteps.length;
+                const lastStep = questionSteps[questionSteps.length - 1];
+                const isExpanded = expandedAccordion === question;
+                const accordionHeader = (jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsx("div", { className: classes.accordionHeaderQuestion, children: question }), !isExpanded && lastStep && (jsx("div", { className: classes.headerStepPreview, children: jsx(StepItemRenderer, { step: lastStep, classes: classes }) }))] }));
+                return (jsx(AccordionStepsContent, { questionSteps: questionSteps, classes: classes, accordionName: accordionHeader, accordionValue: question }, index));
+            }) }) }));
 };
 
 const AgentResponse = ({ children }) => {
@@ -6546,7 +6808,7 @@ const AgentResponse = ({ children }) => {
     return (jsx("div", { className: classes.agentResponseContainer, children: children }));
 };
 
-const TabularContent = ({ steps, currentTabValue, children }) => {
+const TabularContent = ({ steps, currentTabValue, children, questions = [], questionsStepsMap = {} }) => {
     const [tabValue, setTabValue] = useState(currentTabValue);
     const handleChangeTabValue = (_event, newValue) => {
         setTabValue(newValue);
@@ -6554,6 +6816,13 @@ const TabularContent = ({ steps, currentTabValue, children }) => {
     steps.forEach((step) => {
         step.step_status = "completed";
     });
+    if (Object.keys(questionsStepsMap).length > 0) {
+        Object.keys(questionsStepsMap).forEach((key) => {
+            questionsStepsMap[key].forEach((step) => {
+                step.step_status = "completed";
+            });
+        });
+    }
     return (jsx("div", { children: jsx(Tabs, { onChange: handleChangeTabValue, orientation: "horizontal", tabNames: [
                 {
                     label: "Steps",
@@ -6566,7 +6835,7 @@ const TabularContent = ({ steps, currentTabValue, children }) => {
                     icon: jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsx(Steps, { steps: steps }),
+                jsx(Steps, { steps: steps, questions: questions, questionsStepsMap: questionsStepsMap }),
                 jsx(AgentResponse, { children: children }),
             ], value: tabValue }) }));
 };
@@ -6635,7 +6904,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", children: renderCombinedContent() }));
+        return (jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, children: renderCombinedContent() }));
     }
     return renderCombinedContent();
 };
@@ -9895,7 +10164,7 @@ const SmartBot = (props) => {
             setBaseUrl(customBaseUrl);
         }
     }, [forceOpen]);
-    return (jsxs("div", { className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""}`, children: [jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsx(ChatBotComponent, { isFullWidth: true, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" ? (jsx(ChatbotInput, { newChatScreen: newChatScreen, inputValue: userInput, setInputValue: setUserInput, isStopIcon: isStop, onSendIconClick: onSendIconClick, onStopIconClick: onStopIconClick, currentMode: currentMode, filterOptions: filterOptions })) : null, isChatBotOpen: showModal || forceOpen, 
+    return (jsxs("div", { className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""}`, children: [jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsx(ChatBotComponent, { isFullWidth: forceOpen, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" ? (jsx(ChatbotInput, { newChatScreen: newChatScreen, inputValue: userInput, setInputValue: setUserInput, isStopIcon: isStop, onSendIconClick: onSendIconClick, onStopIconClick: onStopIconClick, currentMode: currentMode, filterOptions: filterOptions })) : null, isChatBotOpen: showModal || forceOpen, 
                 // landingScreen={true}
                 handleNewChatClick: () => {
                     localStorage.setItem("isStreaming", "false");
@@ -10028,7 +10297,7 @@ const SmartBot = (props) => {
                         },
                         icon: jsx(SvgNavigationIcon, {}),
                     },
-                ], utilityList: utilityList, isAssistantThinking: loader, isCustomScreen: showChatPlaceholder, customScreenJsx: jsx(ChatPlaceholder, { dateFormat: dateFormat, chatDataRef: chatDataRef, currentMode: currentMode, setShowChatPlaceholder: setShowChatPlaceholder, setLoader: setLoader, setCurrentAgentId: setCurrentAgentId, baseUrl: baseUrl, setBaseUrl: setBaseUrl, setCurrentSessionId: setCurrentSessionId, customChatConfig: customChatConfig, chatDataInfoRef: chatDataInfoRef, setChatDataState: setChatDataState, userInput: userInput, legacyAgentScreen: legacyAgentScreen, activeConversationId: activeConversationId, chatBodyRef: chatBodyRef, chatbotContext: chatbotContext, setInitValue: setInitValue, setSessionId: setSessionId, thinkingContent: thinkingContext?.thinkingContent, setThinkingContent: setThinkingContent, isThinking: isThinking, setIsThinking: setIsThinking, chatId: chatId, setChatId: setChatId, isStop: isStop, setIsStop: setIsStop, functionsRef: functionsRef, functionsState: functionsState, setFunctionsState: setFunctionsState, thinkingHeaderMessage: thinkingContext?.thinkingHeaderMessage, setThinkingHeaderMessage: setThinkingHeaderMessage, uniqueChatId: uniqueChatId, setUniqueChatId: setUniqueChatId }), inputText: userInput, threadList: ["Home"], hideMenuArrow: hideMenu, newChatScreen: newChatScreen, isModuleListLoading: modulesLoading, suggestionBanner: {
+                ], utilityList: utilityList, isAssistantThinking: loader, isCustomScreen: showChatPlaceholder, customScreenJsx: jsx(ChatPlaceholder, { dateFormat: dateFormat, chatDataRef: chatDataRef, currentMode: currentMode, setShowChatPlaceholder: setShowChatPlaceholder, setLoader: setLoader, setCurrentAgentId: setCurrentAgentId, baseUrl: baseUrl, setBaseUrl: setBaseUrl, setCurrentSessionId: setCurrentSessionId, customChatConfig: customChatConfig, chatDataInfoRef: chatDataInfoRef, setChatDataState: setChatDataState, userInput: userInput, legacyAgentScreen: legacyAgentScreen, activeConversationId: activeConversationId, chatBodyRef: chatBodyRef, chatbotContext: chatbotContext, setInitValue: setInitValue, setSessionId: setSessionId, thinkingContent: thinkingContext?.thinkingContent, setThinkingContent: setThinkingContent, isThinking: isThinking, setIsThinking: setIsThinking, chatId: chatId, setChatId: setChatId, isStop: isStop, setIsStop: setIsStop, functionsRef: functionsRef, functionsState: functionsState, setFunctionsState: setFunctionsState, thinkingHeaderMessage: thinkingContext?.thinkingHeaderMessage, setThinkingHeaderMessage: setThinkingHeaderMessage, uniqueChatId: uniqueChatId, setUniqueChatId: setUniqueChatId, fieldNumber: fieldNumber, setFieldNumber: setFieldNumber }), inputText: userInput, threadList: ["Home"], hideMenuArrow: hideMenu, newChatScreen: newChatScreen, isModuleListLoading: modulesLoading, suggestionBanner: {
                     freeTextHeading: "Try adding more details :",
                     freeTextContent: "Alan works better when you provide more context and pointed questions",
                 }, isStopIcon: isStop, onStopIconClick: onStopIconClick, footerText: "AI-generated responses may contain errors\u2014please verify important information", showSuggestionBanner: showSuggestionBanner, onCloseSuggestionBanner: () => {