impact-chatbot 2.3.5 → 2.3.6

package/dist/index.esm.js

@@ -29,7 +29,6 @@ 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';
@@ -4431,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, fieldNumber, setFieldNumber, } = 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([]);
@@ -4488,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();
     }, []);
@@ -4544,7 +4549,7 @@ const ChatPlaceholder = (props) => {
         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))) })] }));
 };
 
@@ -5432,6 +5437,68 @@ const useStyles$2 = makeStyles$1((theme) => ({
                 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",
@@ -5513,19 +5580,46 @@ const useStyles$2 = makeStyles$1((theme) => ({
     loaderContainer: {
         display: "flex",
         flexDirection: "column",
-        justifyContent: "center",
+        gap: pxToRem(10),
+        padding: `${pxToRem(20)} ${pxToRem(16)}`,
+    },
+    skeletonRowWrapper: {
+        display: "flex",
         alignItems: "center",
-        padding: pxToRem(40),
     },
-    loader: {
-        color: "#435af0",
+    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",
     },
-    loaderCaption: {
-        color: colours.neutrals,
-        fontFamily: "Manrope",
-        fontSize: pxToRem(13),
-        fontWeight: 500,
-        marginTop: pxToRem(12),
+    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",
@@ -5655,7 +5749,7 @@ const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, s
     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..." })] }));
+            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";
@@ -9598,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);
@@ -10297,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, fieldNumber: fieldNumber, setFieldNumber: setFieldNumber }), 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: () => {