impact-chatbot 2.3.2 → 2.3.4

package/dist/components/message-template/components/message-content/ImageContent.d.ts

@@ -0,0 +1,4 @@
+declare const ImageContent: ({ bodyText }: {
+    bodyText: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ImageContent;

package/dist/index.cjs.js

@@ -26,7 +26,6 @@ var RefreshIcon = require('@mui/icons-material/Refresh');
 var styled = require('styled-components');
 var material = require('@mui/material');
 var utils = require('core/Utils/functions/utils');
-var impactUiChatbot = require('impact-ui-chatbot');
 var impactUiV3 = require('impact-ui-v3');
 var AgGridComponent = require('core/Utils/agGrid');
 var agGridColumnFormatter = require('core/Utils/agGrid/column-formatter');
@@ -34,6 +33,7 @@ var CoreChart = require('core/Utils/core-charts');
 var makeStyles = require('@mui/styles/makeStyles');
 var FormatListBulletedOutlinedIcon = require('@mui/icons-material/FormatListBulletedOutlined');
 var PsychologyOutlinedIcon = require('@mui/icons-material/PsychologyOutlined');
+var chatbotServices = require('core/commonComponents/smartBot/services/chatbot-services');
 var RangePicker = require('core/commonComponents/dateRangePicker');
 
 function _interopNamespaceDefault(e) {
@@ -518,6 +518,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,
@@ -1227,6 +1237,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;
@@ -4360,6 +4371,13 @@ const useRectangleStyles = styles.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",
@@ -4434,9 +4452,9 @@ const useRectangleStyles = styles.makeStyles((theme) => ({
         color: "#60697D",
     },
 }));
-const Rectangle = ({ type, icon, title, description, onClick }) => {
+const Rectangle = ({ type, icon, title, description, onClick, hoverable }) => {
     const classes = useRectangleStyles();
-    return (jsxRuntime.jsx("div", { className: `${classes.rectangle} ${classes[type]}`, 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 })] }) }));
+    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;
@@ -4501,15 +4519,15 @@ const ChatPlaceholder = (props) => {
     React.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);
         }
@@ -4551,7 +4569,7 @@ const ChatPlaceholder = (props) => {
         agentId: card.agentId || card.id
     }));
     const dataToMap = legacyAgentScreen ? transformedCardList : rectangleData;
-    return (jsxRuntime.jsxs("div", { className: classes.placeholderContainer, children: [jsxRuntime.jsx("div", { className: classes.centerIconContainer, children: jsxRuntime.jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsxRuntime.jsx(material.Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsxRuntime.jsx(material.Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsxRuntime.jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsxRuntime.jsx(Rectangle, { type: item.type, icon: item.icon, title: item.title, description: item.description, onClick: () => handleRectangleClick(item.agentId) }, index))) })] }));
+    return (jsxRuntime.jsxs("div", { className: classes.placeholderContainer, children: [jsxRuntime.jsx("div", { className: classes.centerIconContainer, children: jsxRuntime.jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsxRuntime.jsx(material.Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsxRuntime.jsx(material.Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsxRuntime.jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsxRuntime.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";
@@ -5034,6 +5052,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 +
@@ -5101,6 +5126,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 = lodash.isArray(messageToStoreRef.current.appendedData)
+                ? messageToStoreRef.current.appendedData
+                : lodash.isEmpty(messageToStoreRef.current.appendedData)
+                    ? []
+                    : [messageToStoreRef.current.appendedData];
+            messageToStoreRef.current.appendedData = [...previousData, imageData];
+        }
         return new MessageEvent(type, { data: data });
     }
     catch (error) {
@@ -5573,7 +5613,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 = reactRedux.useDispatch();
@@ -5633,6 +5673,7 @@ const StreamedContent = ({ botData }) => {
                 thinkingHeading: botData?.utilityObject?.thinkingResponse?.thinkingHeading
             },
         },
+        currentMode: currentMode,
         appendedData: {},
         appendedDataFromLastChunk: {},
         initValue: false,
@@ -6045,6 +6086,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",
@@ -6052,7 +6098,7 @@ const StreamedContent = ({ botData }) => {
                 let response = {
                     data: {
                         data: {
-                            data: [textResponseTobeParsed],
+                            data: [textResponseTobeParsed, ...finalData],
                         },
                     },
                 };
@@ -6094,6 +6140,10 @@ const StreamedContent = ({ botData }) => {
             sourceRef.current.close();
             setIsStreaming(false);
             setIsStreamingDone(true);
+            // Stop the agent flow on the backend
+            if (messageToStoreRef.current.sessionId) {
+                chatbotServices.stopAgentFlow({ session_id: messageToStoreRef.current.sessionId }, baseUrl);
+            }
             // Clear timeout if exists
             if (streamTimeoutRef.current) {
                 clearTimeout(streamTimeoutRef.current);
@@ -6394,6 +6444,20 @@ const InputContent = ({ bodyText }) => {
     return (jsxRuntime.jsx("div", { style: { width: '100%', marginTop: '10px' }, children: jsxRuntime.jsx(impactUiV3.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 (jsxRuntime.jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px",
+            width: "100%",
+        }, children: [gcs_uri && (jsxRuntime.jsx("img", { src: gcs_uri, alt: caption || "Image", style: {
+                    maxWidth: "100%",
+                    borderRadius: "8px",
+                    objectFit: "contain",
+                } })), caption && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(TextRenderer, { text: caption }) }))] }));
+};
+
 const useStyles$1 = makeStyles((theme) => ({
     stepsContainer: {
         display: "flex",
@@ -6585,6 +6649,8 @@ const CombinedContent = ({ botData, props }) => {
                 return jsxRuntime.jsx(ButtonContent, { bodyText: parsedData.bodyText }, key);
             case "input":
                 return jsxRuntime.jsx(InputContent, { bodyText: parsedData.bodyText }, key);
+            case "image":
+                return jsxRuntime.jsx(ImageContent, { bodyText: parsedData.bodyText }, key);
             default:
                 return null;
         }
@@ -6677,6 +6743,8 @@ const BotMessage = ({ botData, state, handleLikeDislike, props }) => {
                 return jsxRuntime.jsx(ButtonContent, { bodyText: botData.bodyText });
             case "input":
                 return jsxRuntime.jsx(InputContent, { bodyText: botData.bodyText });
+            case "image":
+                return jsxRuntime.jsx(ImageContent, { bodyText: botData.bodyText });
             case "combined":
                 return jsxRuntime.jsx(CombinedContent, { botData: botData, props: props });
             case "dynamic":
@@ -9868,7 +9936,7 @@ const SmartBot = (props) => {
             setBaseUrl(customBaseUrl);
         }
     }, [forceOpen]);
-    return (jsxRuntime.jsxs("div", { className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""}`, children: [jsxRuntime.jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsxRuntime.jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsxRuntime.jsx(impactUiChatbot.ChatBotComponent, { isFullWidth: true, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" ? (jsxRuntime.jsx(ChatbotInput, { newChatScreen: newChatScreen, inputValue: userInput, setInputValue: setUserInput, isStopIcon: isStop, onSendIconClick: onSendIconClick, onStopIconClick: onStopIconClick, currentMode: currentMode, filterOptions: filterOptions })) : null, isChatBotOpen: showModal || forceOpen, 
+    return (jsxRuntime.jsxs("div", { className: `${classes.agentStyleOverride} ${partialClose ? classes.hideBotStyle : ""}`, children: [jsxRuntime.jsx(MemoryModal, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, displaySnackMessages: displaySnackMessages }), jsxRuntime.jsx(UploadModal, { isUploadModalOpen: isUploadModalOpen, setIsUploadModalOpen: setIsUploadModalOpen, displaySnackMessages: displaySnackMessages }), jsxRuntime.jsx(impactUiV3.ChatBotComponent, { isFullWidth: forceOpen, userName: userName, showHistoryPanel: false, customInputComponent: currentMode === "agent" ? (jsxRuntime.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");