impact-chatbot 2.3.2 → 2.3.4

package/dist/index.esm.js

@@ -23,14 +23,14 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import styled from 'styled-components';
 import { CircularProgress, Typography, Grid } from '@mui/material';
 import { fetchBaseUrl, replaceSpecialCharacter as replaceSpecialCharacter$1 } from 'core/Utils/functions/utils';
-import { ChatBotComponent } from 'impact-ui-chatbot';
-import { Button, Modal, Tabs, Slider, Select, DatePicker, Checkbox, RadioButtonGroup, Input, Loader } from 'impact-ui-v3';
+import { Button, Modal, 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 FormatListBulletedOutlinedIcon from '@mui/icons-material/FormatListBulletedOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
+import { stopAgentFlow } from 'core/commonComponents/smartBot/services/chatbot-services';
 import RangePicker from 'core/commonComponents/dateRangePicker';
 
 /**
@@ -496,6 +496,16 @@ const parseResponse = (data, type, agentId = "", currentMode = "", disableTimeAn
                     paramName: data?.data?.param_name
                 }
             };
+        case "image":
+            return {
+                ...data,
+                timeStamp: timeString,
+                userType: "bot",
+                userName: userName,
+                headerTitle: data?.response_heading || "",
+                bodyType: "image",
+                bodyText: data?.image || data,
+            };
         case "combined":
             return {
                 ...data,
@@ -1205,6 +1215,7 @@ const useAgentFlow = (dateFormat, chatDataRef, currentMode, setShowChatPlacehold
                     setUniqueChatId: utilityObjectData?.setUniqueChatId,
                     fieldNumber: utilityObjectData?.fieldNumber,
                     setFieldNumber: utilityObjectData?.setFieldNumber,
+                    baseUrl: baseUrlTemp,
                 };
                 response = await parseResponse(null, "stream", "", currentModeValue, false, "", {}, payload, utilityObject);
                 let chatDataMessages = chatDataInfoRef.current[currentModeValue].conversations[1].messages;
@@ -4338,6 +4349,13 @@ const useRectangleStyles = makeStyles((theme) => ({
         transition: "all 0.2s ease-in-out",
         position: "relative",
         overflow: "hidden",
+    },
+    rectangleHoverable: {
+        cursor: "pointer",
+        "&:hover": {
+            transform: "translateY(-2px)",
+            boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        },
         "&::before": {
             content: '""',
             position: "absolute",
@@ -4412,9 +4430,9 @@ const useRectangleStyles = makeStyles((theme) => ({
         color: "#60697D",
     },
 }));
-const Rectangle = ({ type, icon, title, description, onClick }) => {
+const Rectangle = ({ type, icon, title, description, onClick, hoverable }) => {
     const classes = useRectangleStyles();
-    return (jsx("div", { className: `${classes.rectangle} ${classes[type]}`, onClick: onClick, children: jsxs("div", { className: classes.textContainer, children: [jsx(Typography, { className: classes.title, children: title }), jsx(Typography, { className: classes.description, children: description })] }) }));
+    return (jsx("div", { className: `${classes.rectangle} ${classes[type]} ${hoverable ? classes.rectangleHoverable : ''}`, onClick: onClick, children: jsxs("div", { className: classes.textContainer, children: [jsx(Typography, { className: classes.title, children: title }), jsx(Typography, { className: classes.description, children: description })] }) }));
 };
 const ChatPlaceholder = (props) => {
     const { dateFormat, chatDataRef, currentMode, setShowChatPlaceholder, setLoader, setCurrentAgentId, baseUrl, setBaseUrl, setCurrentSessionId, customChatConfig, chatDataInfoRef, setChatDataState, userInput, legacyAgentScreen, activeConversationId, chatBodyRef, chatbotContext, setInitValue, setSessionId, thinkingContent, setThinkingContent, isThinking, setIsThinking, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, uniqueChatId, setUniqueChatId, } = props;
@@ -4479,15 +4497,15 @@ const ChatPlaceholder = (props) => {
     useEffect(() => {
         getBaseUrl();
     }, []);
-    const handleRectangleClick = (agentId) => {
+    const handleRectangleClick = (agentId, title) => {
         if (legacyAgentScreen) {
             setCurrentAgentId(agentId);
             const initiateAgentPayload = {
                 agent_id: agentId,
                 session_id: null,
-                user_input: userInput,
+                user_input: title,
                 init: true,
-                delay: 0,
+                delay: 0.3,
             };
             setAgentFlow(initiateAgentPayload, "", baseUrl);
         }
@@ -4529,7 +4547,7 @@ const ChatPlaceholder = (props) => {
         agentId: card.agentId || card.id
     }));
     const dataToMap = legacyAgentScreen ? transformedCardList : rectangleData;
-    return (jsxs("div", { className: classes.placeholderContainer, children: [jsx("div", { className: classes.centerIconContainer, children: jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsx(Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsx(Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsx(Rectangle, { type: item.type, icon: item.icon, title: item.title, description: item.description, onClick: () => handleRectangleClick(item.agentId) }, index))) })] }));
+    return (jsxs("div", { className: classes.placeholderContainer, children: [jsx("div", { className: classes.centerIconContainer, children: jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsx(Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsx(Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsx(Rectangle, { type: item.type, icon: item.icon, title: item.title, description: item.description, onClick: () => handleRectangleClick(item?.agentId, item?.title), hoverable: legacyAgentScreen }, index))) })] }));
 };
 
 const dateFormat = "DD-MM-YYYY HH:mm:ss";
@@ -5012,6 +5030,13 @@ const sseevent = (message, messageToStoreRef) => {
                 };
             }
         }
+        if (messageToStoreRef.current.currentMode === "agent" &&
+            (parsedData?.chat_id || parsedData?.session_id)) {
+            messageToStoreRef.current.uniqueChatId = parsedData?.chat_id
+                ? parsedData.chat_id
+                : "";
+            messageToStoreRef.current.sessionId = parsedData?.session_id;
+        }
         if (parsedData?.is_error) {
             messageToStoreRef.current.chatData.response =
                 messageToStoreRef.current.chatData.response +
@@ -5079,6 +5104,21 @@ const sseevent = (message, messageToStoreRef) => {
                 : "";
             messageToStoreRef.current.status = parsedData?.status;
         }
+        // Handle image chunks for navigation mode
+        if (parsedData?.response_type === "image" &&
+            messageToStoreRef.current.currentMode === "navigation") {
+            let imageData = {
+                type: "image",
+                image: parsedData.image,
+                response_heading: parsedData.response_heading,
+            };
+            let previousData = isArray$1(messageToStoreRef.current.appendedData)
+                ? messageToStoreRef.current.appendedData
+                : isEmpty$1(messageToStoreRef.current.appendedData)
+                    ? []
+                    : [messageToStoreRef.current.appendedData];
+            messageToStoreRef.current.appendedData = [...previousData, imageData];
+        }
         return new MessageEvent(type, { data: data });
     }
     catch (error) {
@@ -5551,7 +5591,7 @@ const formatThinkingTime = (seconds) => {
  * @param {Function} botData.utilityObject.setChatDataState - Function to update chat data state
  */
 const StreamedContent = ({ botData }) => {
-    const { activeConversationId, currentMode, chatDataRef, chatBodyRef, setChatDataState, chatDataInfoRef, setLoader = (params) => { }, processResponse = (params) => { }, setThinkingContent, thinkingContent, isThinking: isThinkingFromParent, setIsThinking: setIsThinkingFromParent, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, } = botData.utilityObject;
+    const { activeConversationId, currentMode, chatDataRef, chatBodyRef, setChatDataState, chatDataInfoRef, setLoader = (params) => { }, processResponse = (params) => { }, setThinkingContent, thinkingContent, isThinking: isThinkingFromParent, setIsThinking: setIsThinkingFromParent, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, baseUrl } = botData.utilityObject;
     const classes = useStyles$3();
     useStyles$6();
     const dispatch = useDispatch();
@@ -5611,6 +5651,7 @@ const StreamedContent = ({ botData }) => {
                 thinkingHeading: botData?.utilityObject?.thinkingResponse?.thinkingHeading
             },
         },
+        currentMode: currentMode,
         appendedData: {},
         appendedDataFromLastChunk: {},
         initValue: false,
@@ -6023,6 +6064,11 @@ const StreamedContent = ({ botData }) => {
                     //   // enableLikes: true
                     // },
                 ];
+                let finalData = isArray(messageToStoreRef?.current?.appendedData)
+                    ? messageToStoreRef?.current?.appendedData
+                    : isEmpty(messageToStoreRef?.current?.appendedData)
+                        ? []
+                        : [messageToStoreRef?.current?.appendedData];
                 let textResponseTobeParsed = {
                     ...messageToStoreRef.current.chatData,
                     type: "text",
@@ -6030,7 +6076,7 @@ const StreamedContent = ({ botData }) => {
                 let response = {
                     data: {
                         data: {
-                            data: [textResponseTobeParsed],
+                            data: [textResponseTobeParsed, ...finalData],
                         },
                     },
                 };
@@ -6072,6 +6118,10 @@ const StreamedContent = ({ botData }) => {
             sourceRef.current.close();
             setIsStreaming(false);
             setIsStreamingDone(true);
+            // Stop the agent flow on the backend
+            if (messageToStoreRef.current.sessionId) {
+                stopAgentFlow({ session_id: messageToStoreRef.current.sessionId }, baseUrl);
+            }
             // Clear timeout if exists
             if (streamTimeoutRef.current) {
                 clearTimeout(streamTimeoutRef.current);
@@ -6372,6 +6422,20 @@ const InputContent = ({ bodyText }) => {
     return (jsx("div", { style: { width: '100%', marginTop: '10px' }, children: jsx(Input, { label: label, placeholder: placeholder, value: value, onChange: handleChange, required: isRequired, disabled: isDisabled, type: inputType || "text", labelOrientation: labelOrientation, maxLength: maxLength, minLength: minLength }) }));
 };
 
+const ImageContent = ({ bodyText }) => {
+    const { gcs_uri, caption } = bodyText || {};
+    return (jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px",
+            width: "100%",
+        }, children: [gcs_uri && (jsx("img", { src: gcs_uri, alt: caption || "Image", style: {
+                    maxWidth: "100%",
+                    borderRadius: "8px",
+                    objectFit: "contain",
+                } })), caption && (jsx("div", { children: jsx(TextRenderer, { text: caption }) }))] }));
+};
+
 const useStyles$1 = makeStyles$1((theme) => ({
     stepsContainer: {
         display: "flex",
@@ -6563,6 +6627,8 @@ const CombinedContent = ({ botData, props }) => {
                 return jsx(ButtonContent, { bodyText: parsedData.bodyText }, key);
             case "input":
                 return jsx(InputContent, { bodyText: parsedData.bodyText }, key);
+            case "image":
+                return jsx(ImageContent, { bodyText: parsedData.bodyText }, key);
             default:
                 return null;
         }
@@ -6655,6 +6721,8 @@ const BotMessage = ({ botData, state, handleLikeDislike, props }) => {
                 return jsx(ButtonContent, { bodyText: botData.bodyText });
             case "input":
                 return jsx(InputContent, { bodyText: botData.bodyText });
+            case "image":
+                return jsx(ImageContent, { bodyText: botData.bodyText });
             case "combined":
                 return jsx(CombinedContent, { botData: botData, props: props });
             case "dynamic":
@@ -9846,7 +9914,7 @@ const SmartBot = (props) => {
             setBaseUrl(customBaseUrl);
         }
     }, [forceOpen]);
-    return (jsxs("div", { className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""}`, children: [jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsx(ChatBotComponent, { isFullWidth: true, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" ? (jsx(ChatbotInput, { newChatScreen: newChatScreen, inputValue: userInput, setInputValue: setUserInput, isStopIcon: isStop, onSendIconClick: onSendIconClick, onStopIconClick: onStopIconClick, currentMode: currentMode, filterOptions: filterOptions })) : null, isChatBotOpen: showModal || forceOpen, 
+    return (jsxs("div", { className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""}`, children: [jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsx(ChatBotComponent, { isFullWidth: forceOpen, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" ? (jsx(ChatbotInput, { newChatScreen: newChatScreen, inputValue: userInput, setInputValue: setUserInput, isStopIcon: isStop, onSendIconClick: onSendIconClick, onStopIconClick: onStopIconClick, currentMode: currentMode, filterOptions: filterOptions })) : null, isChatBotOpen: showModal || forceOpen, 
                 // landingScreen={true}
                 handleNewChatClick: () => {
                     localStorage.setItem("isStreaming", "false");