impact-chatbot 2.3.4 → 2.3.5

package/dist/index.cjs.js

@@ -31,6 +31,8 @@ var AgGridComponent = require('core/Utils/agGrid');
 var agGridColumnFormatter = require('core/Utils/agGrid/column-formatter');
 var CoreChart = require('core/Utils/core-charts');
 var makeStyles = require('@mui/styles/makeStyles');
+var globalStyles$1 = require('core/Styles/globalStyles');
+var CircularProgress = require('@mui/material/CircularProgress');
 var FormatListBulletedOutlinedIcon = require('@mui/icons-material/FormatListBulletedOutlined');
 var PsychologyOutlinedIcon = require('@mui/icons-material/PsychologyOutlined');
 var chatbotServices = require('core/commonComponents/smartBot/services/chatbot-services');
@@ -940,14 +942,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
  */
@@ -1868,6 +1862,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 });
                 }
             }
@@ -4457,7 +4453,7 @@ const Rectangle = ({ type, icon, title, description, onClick, hoverable }) => {
     return (jsxRuntime.jsx("div", { className: `${classes.rectangle} ${classes[type]} ${hoverable ? classes.rectangleHoverable : ''}`, onClick: onClick, children: jsxRuntime.jsxs("div", { className: classes.textContainer, children: [jsxRuntime.jsx(material.Typography, { className: classes.title, children: title }), jsxRuntime.jsx(material.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] = React.useState([]);
@@ -4485,6 +4481,8 @@ const ChatPlaceholder = (props) => {
         setThinkingHeaderMessage,
         uniqueChatId,
         setUniqueChatId,
+        fieldNumber,
+        setFieldNumber,
     });
     const getBaseUrl = async () => {
         try {
@@ -4565,7 +4563,7 @@ const ChatPlaceholder = (props) => {
         type: "blue",
         icon: jsxRuntime.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;
@@ -5420,26 +5418,57 @@ var SvgStepError = function SvgStepError(props) {
   })));
 };
 
+const CustomGroupAccordion = ({ children, onExpandChange, }) => {
+    const globalClasses = globalStyles$1();
+    const [accordionData, setAccordionData] = React.useState([]);
+    const [activeAccordion, setActiveAccordion] = React.useState("");
+    const prepareAccordionData = () => {
+        const data = [];
+        React.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);
+    };
+    React.useEffect(() => {
+        prepareAccordionData();
+    }, [children]);
+    return (jsxRuntime.jsx("div", { className: globalClasses.accordianWrapper, children: jsxRuntime.jsx(impactUiV3.AccordionModern, { data: accordionData, expanded: activeAccordion, setExpanded: (val) => {
+                setActiveAccordion(val);
+                onExpandChange?.(val);
+            } }) }));
+};
+
 const useStyles$2 = makeStyles((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",
@@ -5453,7 +5482,7 @@ const useStyles$2 = makeStyles((theme) => ({
         "&.loading": {
             background: colours.backgroundChat,
             "& svg": {
-                animation: "$rotate 1s linear infinite",
+                animation: "stepsLoaderSpin 1s linear infinite",
             }
         },
         "&.error": {
@@ -5472,10 +5501,10 @@ const useStyles$2 = makeStyles((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,
         },
@@ -5486,25 +5515,131 @@ const useStyles$2 = makeStyles((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 }) => (jsxRuntime.jsxs("div", { className: classes.stepItem, children: [jsxRuntime.jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
+                ? "loading"
+                : step.step_status === "error"
+                    ? "error"
+                    : ""}`, children: step.step_status === "not-completed" ? (jsxRuntime.jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsxRuntime.jsx(SvgStepError, {})) : (jsxRuntime.jsx(SvgStepDone, {})) }), jsxRuntime.jsxs("div", { className: classes.stepContent, children: [jsxRuntime.jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
+                        ? "loading"
+                        : step.step_status === "error"
+                            ? "error"
+                            : ""}`, children: step.header }), jsxRuntime.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 (jsxRuntime.jsx("div", { className: classes.accordionStepsWrapper, children: jsxRuntime.jsx("div", { className: `${classes.stepsContainer} ${classes.mt12}`, children: questionSteps.map((step, index) => (jsxRuntime.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();
     React.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] = React.useState("");
     React.useEffect(() => {
         if (done) {
             // Add finished step when done is true
@@ -5539,15 +5674,38 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
             }
         }
     }, [done]);
-    return (jsxRuntime.jsx("div", { className: classes.stepsContainer, children: steps.map((step, index) => (jsxRuntime.jsxs("div", { className: classes.stepItem, children: [jsxRuntime.jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
-                        ? "loading"
-                        : step.step_status === "error"
-                            ? "error"
-                            : ""}`, children: step.step_status === "not-completed" ? (jsxRuntime.jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsxRuntime.jsx(SvgStepError, {})) : (jsxRuntime.jsx(SvgStepDone, {})) }), jsxRuntime.jsxs("div", { className: classes.stepContent, children: [jsxRuntime.jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
-                                ? "loading"
-                                : step.step_status === "error"
-                                    ? "error"
-                                    : ""}`, children: step.header }), jsxRuntime.jsx("div", { className: classes.stepSubheader, children: step.sub_header })] })] }, index))) }));
+    const hasQuestions = questions.length > 0;
+    if (!hasQuestions) {
+        if (currentMode === "agent" && steps.length === 1) {
+            return (jsxRuntime.jsxs("div", { className: classes.loaderContainer, children: [jsxRuntime.jsx(CircularProgress, { className: classes.loader, size: 50, thickness: 4 }), jsxRuntime.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 = (jsxRuntime.jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsxRuntime.jsx("div", { className: classes.accordionHeaderQuestion, children: fallbackQuestion }), !isExpanded && activeStep && (jsxRuntime.jsx("div", { className: classes.headerStepPreview, children: jsxRuntime.jsx(StepItemRenderer$1, { step: activeStep, classes: classes }) }))] }));
+            return (jsxRuntime.jsx("div", { className: `${classes.stepsContainer} ${classes.accordionAnimated}`, children: jsxRuntime.jsx(CustomGroupAccordion, { onExpandChange: (val) => setExpandedAccordion(val), children: jsxRuntime.jsx(AccordionStepsContent$1, { questionSteps: steps, classes: classes, accordionName: accordionHeader, accordionValue: fallbackQuestion }) }) }));
+        }
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: `${classes.stepsContainer} ${classes.accordionAnimated}`, children: jsxRuntime.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 = (jsxRuntime.jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsxRuntime.jsx("div", { className: classes.accordionHeaderQuestion, children: question }), !isExpanded && activeStep && (jsxRuntime.jsx("div", { className: classes.headerStepPreview, children: jsxRuntime.jsx(StepItemRenderer$1, { step: activeStep, classes: classes }) }))] }));
+                return (jsxRuntime.jsx(AccordionStepsContent$1, { questionSteps: questionSteps, classes: classes, accordionName: accordionHeader, accordionValue: question }, index));
+            }) }) }));
 };
 
 const AgentResponse$1 = (props) => {
@@ -5560,7 +5718,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] = React.useState("steps");
     const handleChangeTabValue = (_event, newValue) => {
         setTabValue(newValue);
@@ -5577,7 +5735,7 @@ const StepsResponseTab = (props) => {
                     icon: jsxRuntime.jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsxRuntime.jsx(Steps$1, { steps: steps, setSteps: setSteps, done: stepsDone, setDone: setStepsDone, setTabValue: setTabValue, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, stepChange: stepChange, currentMode: currentMode }),
+                jsxRuntime.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 }),
                 jsxRuntime.jsx(AgentResponse$1, { content: content, isStreaming: isStreaming }),
             ], value: tabValue }) }));
 };
@@ -5635,6 +5793,8 @@ const StreamedContent = ({ botData }) => {
             step_status: "not-completed"
         }
     ]);
+    const [questions, setQuestions] = React.useState([]);
+    const [questionsStepsMap, setQuestionsStepsMap] = React.useState({});
     const [stepChange, setStepChange] = React.useState(false);
     const [stepsDone, setStepsDone] = React.useState(false);
     const [finalStepDone, setFinalStepDone] = React.useState(false);
@@ -5651,6 +5811,8 @@ const StreamedContent = ({ botData }) => {
             step_status: "not-completed"
         }
     ]);
+    const questionsRef = React.useRef([]);
+    const questionsStepsMapRef = React.useRef({});
     // Refs to maintain data across renders
     const sourceRef = React.useRef(null); // Holds the SSE source instance
     React.useRef(""); // Tracks the last received message
@@ -5740,8 +5902,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(lodash.cloneDeep(initialMap));
+                        }
+                        else if (data.status === "thinking") {
                             messageToStoreRef.current.chatData.thinkingResponse.thinkingHeading = "Planning next moves";
                             // Start thinking if not already started
                             if (!isThinking) {
@@ -5780,6 +5959,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 = lodash.cloneDeep(stepRef.current);
                             if (newSteps.length === 1) {
@@ -5789,15 +5969,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 = lodash.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(lodash.cloneDeep(questionsStepsMapRef.current));
+                            }
                             setStepChange((prev) => !prev);
                         }
                         else if (data.message !== "[DONE]") {
@@ -6029,6 +6222,8 @@ const StreamedContent = ({ botData }) => {
                     isTabEnabled: true,
                     steps: lodash.cloneDeep(stepRef.current),
                     currentTabValue: "agent_response",
+                    questions: lodash.cloneDeep(questionsRef.current),
+                    questionsStepsMap: lodash.cloneDeep(questionsStepsMapRef.current),
                 });
                 // [
                 //   {
@@ -6107,6 +6302,8 @@ const StreamedContent = ({ botData }) => {
                     isTabEnabled: true,
                     steps: lodash.cloneDeep(stepRef.current),
                     currentTabValue: "agent_response",
+                    questions: lodash.cloneDeep(questionsRef.current),
+                    questionsStepsMap: lodash.cloneDeep(questionsStepsMapRef.current),
                 });
             }
             // Trigger re-render by updating chatDataState
@@ -6243,7 +6440,7 @@ const StreamedContent = ({ botData }) => {
      * @returns {JSX.Element} Rendered content with optional blinking cursor
      */
     const renderContent = () => {
-        return (jsxRuntime.jsx("div", { className: classes.streamContainer, children: jsxRuntime.jsx(StepsResponseTab, { steps: steps, stepChange: stepChange, setSteps: setSteps, stepsDone: stepsDone, setStepsDone: setStepsDone, finalStepDone: finalStepDone, setFinalStepDone: setFinalStepDone, content: content, isStreaming: isStreaming, currentMode: currentMode }) }));
+        return (jsxRuntime.jsx("div", { className: classes.streamContainer, children: jsxRuntime.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();
@@ -6462,9 +6659,28 @@ const useStyles$1 = makeStyles((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",
@@ -6510,10 +6726,10 @@ const useStyles$1 = makeStyles((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,
         },
@@ -6524,62 +6740,89 @@ const useStyles$1 = makeStyles((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();
-    React.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 (jsxRuntime.jsx("div", { className: classes.stepsContainer, children: steps.map((step, index) => (jsxRuntime.jsxs("div", { className: classes.stepItem, children: [jsxRuntime.jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
+const StepItemRenderer = ({ step, classes }) => (jsxRuntime.jsxs("div", { className: classes.stepItem, children: [jsxRuntime.jsx("div", { className: `${classes.stepStatus} ${step.step_status === "not-completed"
+                ? "loading"
+                : step.step_status === "error"
+                    ? "error"
+                    : ""}`, children: step.step_status === "not-completed" ? (jsxRuntime.jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsxRuntime.jsx(SvgStepError, {})) : (jsxRuntime.jsx(SvgStepDone, {})) }), jsxRuntime.jsxs("div", { className: classes.stepContent, children: [jsxRuntime.jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
                         ? "loading"
                         : step.step_status === "error"
                             ? "error"
-                            : ""}`, children: step.step_status === "not-completed" ? (jsxRuntime.jsx(SvgStepsLoader, {})) : step.step_status === "error" ? (jsxRuntime.jsx(SvgStepError, {})) : (jsxRuntime.jsx(SvgStepDone, {})) }), jsxRuntime.jsxs("div", { className: classes.stepContent, children: [jsxRuntime.jsx("div", { className: `${classes.stepHeader} ${step.step_status === "not-completed"
-                                ? "loading"
-                                : step.step_status === "error"
-                                    ? "error"
-                                    : ""}`, children: step.header }), jsxRuntime.jsx("div", { className: classes.stepSubheader, children: step.sub_header })] })] }, index))) }));
+                            : ""}`, children: step.header }), jsxRuntime.jsx("div", { className: classes.stepSubheader, children: step.sub_header })] })] }));
+const AccordionStepsContent = ({ questionSteps, classes, accordionName, accordionChildCount = "", accordionValue }) => {
+    return (jsxRuntime.jsx("div", { className: classes.accordionStepsWrapper, children: jsxRuntime.jsx("div", { className: `${classes.stepsContainer} ${classes.mt12}`, children: questionSteps.map((step, index) => (jsxRuntime.jsx(StepItemRenderer, { step: step, classes: classes }, index))) }) }));
+};
+const Steps = ({ steps, questions = [], questionsStepsMap = {} }) => {
+    const classes = useStyles$1();
+    React.useState(false);
+    const [expandedAccordion, setExpandedAccordion] = React.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 = (jsxRuntime.jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsxRuntime.jsx("div", { className: classes.accordionHeaderQuestion, children: fallbackQuestion }), !isExpanded && lastStep && (jsxRuntime.jsx("div", { className: classes.headerStepPreview, children: jsxRuntime.jsx(StepItemRenderer, { step: lastStep, classes: classes }) }))] }));
+            return (jsxRuntime.jsx("div", { className: classes.stepsContainer, children: jsxRuntime.jsx(CustomGroupAccordion, { onExpandChange: (val) => setExpandedAccordion(val), children: jsxRuntime.jsx(AccordionStepsContent, { questionSteps: steps, classes: classes, accordionName: accordionHeader, accordionValue: fallbackQuestion }) }) }));
+        }
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: classes.stepsContainer, children: jsxRuntime.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 = (jsxRuntime.jsxs("div", { className: classes.accordionHeaderWrapper, children: [jsxRuntime.jsx("div", { className: classes.accordionHeaderQuestion, children: question }), !isExpanded && lastStep && (jsxRuntime.jsx("div", { className: classes.headerStepPreview, children: jsxRuntime.jsx(StepItemRenderer, { step: lastStep, classes: classes }) }))] }));
+                return (jsxRuntime.jsx(AccordionStepsContent, { questionSteps: questionSteps, classes: classes, accordionName: accordionHeader, accordionValue: question }, index));
+            }) }) }));
 };
 
 const AgentResponse = ({ children }) => {
@@ -6587,7 +6830,7 @@ const AgentResponse = ({ children }) => {
     return (jsxRuntime.jsx("div", { className: classes.agentResponseContainer, children: children }));
 };
 
-const TabularContent = ({ steps, currentTabValue, children }) => {
+const TabularContent = ({ steps, currentTabValue, children, questions = [], questionsStepsMap = {} }) => {
     const [tabValue, setTabValue] = React.useState(currentTabValue);
     const handleChangeTabValue = (_event, newValue) => {
         setTabValue(newValue);
@@ -6595,6 +6838,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 (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(impactUiV3.Tabs, { onChange: handleChangeTabValue, orientation: "horizontal", tabNames: [
                 {
                     label: "Steps",
@@ -6607,7 +6857,7 @@ const TabularContent = ({ steps, currentTabValue, children }) => {
                     icon: jsxRuntime.jsx(PsychologyOutlinedIcon, { fontSize: "large" }),
                 },
             ], tabPanels: [
-                jsxRuntime.jsx(Steps, { steps: steps }),
+                jsxRuntime.jsx(Steps, { steps: steps, questions: questions, questionsStepsMap: questionsStepsMap }),
                 jsxRuntime.jsx(AgentResponse, { children: children }),
             ], value: tabValue }) }));
 };
@@ -6676,7 +6926,7 @@ const CombinedContent = ({ botData, props }) => {
     const validContent = renderedContent.filter(content => content !== null);
     const renderCombinedContent = () => (jsxRuntime.jsx("div", { className: "combined-content-container", children: validContent.length > 0 ? (validContent.map((content, index) => (jsxRuntime.jsx("div", { className: "combined-content-item", children: content }, `wrapper-${index}`)))) : (jsxRuntime.jsx("div", { children: "No valid content to display" })) }));
     if (isTabEnabled) {
-        return (jsxRuntime.jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", children: renderCombinedContent() }));
+        return (jsxRuntime.jsx(TabularContent, { steps: botData?.utilityData?.steps || [], currentTabValue: botData?.utilityData?.currentTabValue || "steps", questions: botData?.utilityData?.questions || [], questionsStepsMap: botData?.utilityData?.questionsStepsMap || {}, children: renderCombinedContent() }));
     }
     return renderCombinedContent();
 };
@@ -9698,7 +9948,7 @@ const SmartBot = (props) => {
     }, [chatDataState, currentMode]);
     const fetchLegacyAgentInfo = async () => {
         try {
-            let legacyAgentScreenData = await fetchLegacyAgentScreen();
+            let legacyAgentScreenData = await utils.fetchLegacyAgentScreen();
             setLegacyAgentScreen(legacyAgentScreenData);
         }
         catch (error) {
@@ -10069,7 +10319,7 @@ const SmartBot = (props) => {
                         },
                         icon: jsxRuntime.jsx(SvgNavigationIcon, {}),
                     },
-                ], utilityList: utilityList, isAssistantThinking: loader, isCustomScreen: showChatPlaceholder, customScreenJsx: jsxRuntime.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: jsxRuntime.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: () => {