impact-chatbot 2.3.4 → 2.3.6

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,12 +22,13 @@ 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 { Button, Modal, Tabs, Slider, Select, DatePicker, Checkbox, RadioButtonGroup, Input, Loader, ChatBotComponent } 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 FormatListBulletedOutlinedIcon from '@mui/icons-material/FormatListBulletedOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 import { stopAgentFlow } from 'core/commonComponents/smartBot/services/chatbot-services';
@@ -918,14 +919,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
  */
@@ -1846,6 +1839,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 });
                 }
             }
@@ -4435,7 +4430,7 @@ const Rectangle = ({ type, icon, title, description, onClick, hoverable }) => {
     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, questions, displayQuestions } = props;
     const classes = useStyles$5();
     globalStyles();
     const [cardList, setCardList] = useState([]);
@@ -4463,6 +4458,8 @@ const ChatPlaceholder = (props) => {
         setThinkingHeaderMessage,
         uniqueChatId,
         setUniqueChatId,
+        fieldNumber,
+        setFieldNumber,
     });
     const getBaseUrl = async () => {
         try {
@@ -4490,10 +4487,16 @@ const ChatPlaceholder = (props) => {
                 setLoading(false);
             }
         };
-        if (baseUrl && legacyAgentScreen) {
+        if (baseUrl && legacyAgentScreen && !displayQuestions) {
             loadCards();
         }
-    }, [baseUrl]);
+        if (questions &&
+            Array.isArray(questions) &&
+            questions.length > 0 &&
+            displayQuestions) {
+            setCardList(questions);
+        }
+    }, [baseUrl, questions, displayQuestions]);
     useEffect(() => {
         getBaseUrl();
     }, []);
@@ -4543,10 +4546,10 @@ 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;
+    const dataToMap = legacyAgentScreen || displayQuestions ? 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, item?.title), hoverable: legacyAgentScreen }, index))) })] }));
 };
 
@@ -5398,26 +5401,119 @@ 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)",
+            },
+        },
+        "@keyframes skeletonRowExpand": {
+            "0%": {
+                width: pxToRem(31),
+                gap: 0,
+            },
+            "20%": {
+                width: "40%",
+                gap: 0,
+            },
+            "30%": {
+                width: "70%",
+                gap: pxToRem(2),
+            },
+            "40%": {
+                width: "100%",
+                gap: pxToRem(4),
+            },
+            "70%": {
+                width: "70%",
+                gap: pxToRem(2),
+            },
+            "80%": {
+                width: "40%",
+                gap: 0,
+            },
+            "100%": {
+                width: pxToRem(31),
+                gap: 0,
+            },
+        },
+        "@keyframes skeletonSquareFade": {
+            "0%": {
+                opacity: 0,
+                width: 0,
+                marginRight: 0,
+            },
+            "35%": {
+                opacity: 0,
+                width: 0,
+                marginRight: 0,
+            },
+            "45%": {
+                opacity: 1,
+                width: pxToRem(31),
+                marginRight: pxToRem(8),
+            },
+            "60%": {
+                opacity: 1,
+                width: pxToRem(31),
+                marginRight: pxToRem(8),
+            },
+            "75%": {
+                opacity: 0,
+                width: 0,
+                marginRight: 0,
+            },
+            "100%": {
+                opacity: 0,
+                width: 0,
+                marginRight: 0,
+            },
+        },
+    },
     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",
@@ -5431,7 +5527,7 @@ const useStyles$2 = makeStyles$1((theme) => ({
         "&.loading": {
             background: colours.backgroundChat,
             "& svg": {
-                animation: "$rotate 1s linear infinite",
+                animation: "stepsLoaderSpin 1s linear infinite",
             }
         },
         "&.error": {
@@ -5450,10 +5546,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,
         },
@@ -5464,25 +5560,158 @@ 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",
+        gap: pxToRem(10),
+        padding: `${pxToRem(20)} ${pxToRem(16)}`,
+    },
+    skeletonRowWrapper: {
+        display: "flex",
+        alignItems: "center",
+    },
+    skeletonSquare: {
+        width: 0,
+        height: pxToRem(30),
+        borderRadius: pxToRem(4),
+        background: "linear-gradient(266deg, rgba(220, 220, 220, 0.60) -5.22%, rgba(255, 255, 255, 0.80) 4.31%, rgba(200, 200, 200, 0.40) 17.94%)",
+        opacity: 0.2,
+        flexShrink: 0,
+        animation: "skeletonSquareFade 1.8s ease-out infinite",
+    },
+    skeletonSquareDelayed: {
+        animationDelay: "0.2s",
+    },
+    skeletonRow: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0,
+        overflow: "hidden",
+        animation: "skeletonRowExpand 1.8s ease-out infinite",
+    },
+    skeletonRowDelayed: {
+        animationDelay: "0.2s",
+    },
+    skeletonBlock: {
+        width: "100%",
+        height: pxToRem(15),
+        background: "linear-gradient(266deg, rgba(220, 220, 220, 0.60) -5.22%, rgba(255, 255, 255, 0.80) 4.31%, rgba(200, 200, 200, 0.40) 17.94%)",
+        opacity: 0.2,
+        "&:first-child": {
+            borderRadius: `${pxToRem(4)} ${pxToRem(4)} 0 0`,
+        },
+        "&:last-child": {
+            borderRadius: `0 0 ${pxToRem(4)} ${pxToRem(4)}`,
+        },
+    },
+    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
@@ -5517,15 +5746,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: [jsxs("div", { className: classes.skeletonRowWrapper, children: [jsx("div", { className: classes.skeletonSquare }), jsxs("div", { className: classes.skeletonRow, children: [jsx("div", { className: classes.skeletonBlock }), jsx("div", { className: classes.skeletonBlock })] })] }), jsxs("div", { className: classes.skeletonRowWrapper, children: [jsx("div", { className: `${classes.skeletonSquare} ${classes.skeletonSquareDelayed}` }), jsxs("div", { className: `${classes.skeletonRow} ${classes.skeletonRowDelayed}`, children: [jsx("div", { className: classes.skeletonBlock }), jsx("div", { className: classes.skeletonBlock })] })] })] }));
+        }
+        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) => {
@@ -5538,7 +5790,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);
@@ -5555,7 +5807,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 }) }));
 };
@@ -5613,6 +5865,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);
@@ -5629,6 +5883,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
@@ -5718,8 +5974,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) {
@@ -5758,6 +6031,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) {
@@ -5767,15 +6041,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]") {
@@ -6007,6 +6294,8 @@ const StreamedContent = ({ botData }) => {
                     isTabEnabled: true,
                     steps: cloneDeep(stepRef.current),
                     currentTabValue: "agent_response",
+                    questions: cloneDeep(questionsRef.current),
+                    questionsStepsMap: cloneDeep(questionsStepsMapRef.current),
                 });
                 // [
                 //   {
@@ -6085,6 +6374,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
@@ -6221,7 +6512,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();
@@ -6440,9 +6731,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",
@@ -6488,10 +6798,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,
         },
@@ -6502,62 +6812,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 }) => {
@@ -6565,7 +6902,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);
@@ -6573,6 +6910,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",
@@ -6585,7 +6929,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 }) }));
 };
@@ -6654,7 +6998,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();
 };
@@ -9348,7 +9692,7 @@ let chatbotFilterCustomConfig = {
 };
 
 const SmartBot = (props) => {
-    const { userName, partialClose, setPartialClose, forceOpen, customBaseUrl = "" } = props;
+    const { userName, partialClose, setPartialClose, forceOpen, customBaseUrl = "", displayQuestions, questions = [] } = props;
     const { showModal, setShowModal, minimizedMode, setMinimizedMode, userInput, setUserInput, position, setPosition, flowType, setFlowType, screenName, setScreenName, questionIndex, setQuestionIndex, currentAppLink, setCurrentAppLink, loader, setLoader, enableRefreshAction, setEnableRefreshAction, refreshLoader, setRefreshLoader, chatDataState, setChatDataState, showExtendedContent, setShowExtendedContent, currentMode, setCurrentMode, selectedModule, setSelectedModule, isCardVisible, setIsCardVisible, templateData, setTemplateData, showAlert, setShowAlert, grabPositionRef, chatDataRef, chatBodyRef, minimizedBtnRef, chatDataScreenLinkRef, navigate, location, dispatch, globalClasses, classes, dateFormat, filterReducerState, activeConversationId, setActiveConversationId, isModuleChanged, setIsModuleChanged, showChatPlaceholder, setShowChatPlaceholder, currentAgentId, setCurrentAgentId, baseUrl = customBaseUrl, setBaseUrl, currentSessionId, setCurrentSessionId, notificationData, agentTaskCompleted, setAgentTaskCompleted, customChatConfig, setCustomChatConfig, setMiddleWareFunction, chatBotInfoRef, chatDataInfoRef, initValue, setInitValue, sessionId, setSessionId, thinkingContent, setThinkingContent, isThinking, setIsThinking, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, legacyAgentScreen, setLegacyAgentScreen, uniqueChatId, setUniqueChatId, fieldNumber, setFieldNumber, thinkingContext, isModalOpen, setIsModalOpen, utilityList, setUtilityList, isUploadModalOpen, setIsUploadModalOpen, isRefreshTriggered, setIsRefreshTriggered, } = useChatState();
     // Add state for confirmation dialogs
     useState(false);
@@ -10047,7 +10391,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, displayQuestions: displayQuestions, questions: questions }), 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: () => {