impact-chatbot 2.3.17 → 2.3.19

package/dist/index.esm.js

@@ -23,7 +23,7 @@ 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, fetchLegacyAgentScreen } from 'core/Utils/functions/utils';
-import { Button, Modal, AccordionModern, Tabs, Slider, Select, DatePicker, Checkbox, RadioButtonGroup, Input, Loader, ChatBotComponent } from 'impact-ui-v3';
+import { Button, Modal, AccordionModern, Tabs, Slider, Select, DatePicker, DateRangePicker, 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';
@@ -434,6 +434,26 @@ const parseResponse = (data, type, agentId = "", currentMode = "", disableTimeAn
                     paramName: data?.data?.param_name
                 }
             };
+        case "dateRangePicker":
+            return {
+                ...data,
+                timeStamp: timeString,
+                userType: "bot",
+                userName: userName,
+                headerTitle: data?.data?.label || "",
+                bodyType: "dateRangePicker",
+                bodyText: {
+                    displayFormat: data?.data?.displayFormat,
+                    label: data?.data?.label,
+                    isRequired: data?.data?.isRequired,
+                    labelOrientation: data?.data?.labelOrientation,
+                    minDate: data?.data?.minDate,
+                    maxDate: data?.data?.maxDate,
+                    isDisabled: data?.data?.isDisabled,
+                    showMonthYearSelect: data?.data?.showMonthYearSelect,
+                    paramName: data?.data?.param_name
+                }
+            };
         case "checkbox":
             return {
                 ...data,
@@ -4847,7 +4867,7 @@ const useStyles$4 = makeStyles((theme) => ({
         marginTop: pxToRem(16),
     }
 }));
-const ButtonContent = ({ bodyText }) => {
+const ButtonContent = ({ bodyText, isFormDisabled = false }) => {
     const classes = useStyles$4();
     const handleButtonClick = (button) => {
         // if (button.onClick) {
@@ -4864,7 +4884,7 @@ const ButtonContent = ({ bodyText }) => {
         if (!Array.isArray(bodyText.buttons)) {
             return null;
         }
-        return bodyText.buttons.map((button, index) => (jsx(Button, { variant: button.variant || "primary", size: button.size || "medium", onClick: () => handleButtonClick(), disabled: button.disabled, className: button.className, icon: button.icon, iconPlacement: button.iconPlacement || "left", children: button.label }, index)));
+        return bodyText.buttons.map((button, index) => (jsx(Button, { variant: button.variant || "primary", size: button.size || "medium", onClick: () => handleButtonClick(), disabled: button.disabled || isFormDisabled, className: button.className, icon: button.icon, iconPlacement: button.iconPlacement || "left", children: button.label }, index)));
     };
     return (jsxs("div", { className: classes.buttonContainer, children: [bodyText.message && (jsx("div", { className: classes.message, children: bodyText.message })), jsx("div", { className: classes.buttonRow, children: renderButtons() })] }));
 };
@@ -6615,7 +6635,7 @@ const StreamedContent = ({ botData }) => {
     return renderContent();
 };
 
-const SliderContent = ({ bodyText }) => {
+const SliderContent = ({ bodyText, isFormDisabled = false }) => {
     const { header, headerOrentiation, inputPosition, label, max, min, required, disabled, } = bodyText;
     const [sliderValue, setSliderValue] = useState(0);
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
@@ -6636,10 +6656,10 @@ const SliderContent = ({ bodyText }) => {
             console.error("Error in slider handleChange", error);
         }
     };
-    return (jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsx(Slider, { header: header, headerOrientation: headerOrentiation, inputPosition: inputPosition, label: label, max: max, min: min, required: required, disabled: disabled, onChange: (e) => handleChange(e), value: sliderValue }) }));
+    return (jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsx(Slider, { header: header, headerOrientation: headerOrentiation, inputPosition: inputPosition, label: label, max: max, min: min, required: required, disabled: disabled || isFormDisabled, onChange: (e) => handleChange(e), value: sliderValue }) }));
 };
 
-const SelectContent = ({ bodyText }) => {
+const SelectContent = ({ bodyText, isFormDisabled = false }) => {
     const { header, inputPosition, labelOrientation, label, options, isRequired, isDisabled, isMulti, paramName } = bodyText;
     const [isOpen, setIsOpen] = useState(false);
     const [currentOptions, setCurrentOptions] = useState([]);
@@ -6689,10 +6709,10 @@ const SelectContent = ({ bodyText }) => {
     return (jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsx(Select, { currentOptions: currentOptions, setCurrentOptions: setCurrentOptions, label: heirarchyKeyValuePairs[paramName] || label, labelOrientation: labelOrientation, 
             // inputPosition={inputPosition}
             // header={header}
-            isRequired: isRequired, isDisabled: isDisabled, handleChange: (selected) => onChange(selected), isCloseWhenClickOutside: true, setIsOpen: setIsOpen, isOpen: isOpen, selectedOptions: currentSelectedOptions, setSelectedOptions: setCurrentSelectedOptions, initialOptions: initialOptions, isMulti: isMulti, isSelectAll: isAllSelected, setIsSelectAll: setIsAllSelected, toggleSelectAll: true, isWithSearch: isMulti ? true : false }) }));
+            isRequired: isRequired, isDisabled: isDisabled || isFormDisabled, handleChange: (selected) => onChange(selected), isCloseWhenClickOutside: true, setIsOpen: setIsOpen, isOpen: isOpen, selectedOptions: currentSelectedOptions, setSelectedOptions: setCurrentSelectedOptions, initialOptions: initialOptions, isMulti: isMulti, isSelectAll: isAllSelected, setIsSelectAll: setIsAllSelected, toggleSelectAll: true, isWithSearch: isMulti ? true : false }) }));
 };
 
-const DatePickerContent = ({ bodyText }) => {
+const DatePickerContent = ({ bodyText, isFormDisabled = false }) => {
     const { displayFormat, label, isRequired, labelOrientation, placeholder, minDate, maxDate, isDisabled, } = bodyText;
     const [selectedDate, setSelectedDate] = useState(null);
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
@@ -6716,13 +6736,49 @@ const DatePickerContent = ({ bodyText }) => {
     return (jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsx(DatePicker, { displayFormat: displayFormat, label: label, required: isRequired, labelOrientation: labelOrientation, placeholder: placeholder, 
             // minDate={minDate}
             // maxDate={maxDate}
-            disabled: isDisabled, setSelectedDate: (date) => handleDateChange(date), 
+            isDisabled: isDisabled || isFormDisabled, setSelectedDate: (date) => handleDateChange(date), 
             // showMonthYearSelect
             // showWeekNumbers
             selectedDate: selectedDate }) }));
 };
 
-const CheckboxContent = ({ bodyText }) => {
+const DateRangePickerContent = ({ bodyText, isFormDisabled = false }) => {
+    const { displayFormat, label, isRequired, labelOrientation, minDate, maxDate, isDisabled, showMonthYearSelect, } = bodyText;
+    const [startDate, setStartDate] = useState(null);
+    const [endDate, setEndDate] = useState(null);
+    const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
+    const dispatch = useDispatch();
+    if (isEmpty$1(bodyText))
+        return null;
+    const handleDatesChange = (start, end) => {
+        try {
+            setStartDate(start);
+            setEndDate(end);
+            chatbotContext[bodyText?.paramName] = {
+                ...chatbotContext?.[bodyText?.paramName],
+                [bodyText?.paramName]: {
+                    startDate: start ? moment(start).format(displayFormat) : null,
+                    endDate: end ? moment(end).format(displayFormat) : null,
+                },
+                updated: true,
+            };
+            dispatch(setChatbotContext(chatbotContext));
+        }
+        catch (error) {
+            console.error("Error in dateRangePicker handleDatesChange", error);
+        }
+    };
+    return (jsx("div", { style: { width: "100%", marginTop: "10px" }, children: jsx(DateRangePicker, { displayFormat: displayFormat, label: label, isRequired: isRequired, labelOrientation: labelOrientation || "top", minDate: minDate, maxDate: maxDate, isDisabled: isDisabled || isFormDisabled, startDate: startDate, setStartDate: setStartDate, endDate: endDate, setEndDate: setEndDate, showMonthYearSelect: showMonthYearSelect, handleDatesChange: handleDatesChange, onPrimaryButtonClick: () => handleDatesChange(startDate, endDate), onSecondaryButtonClick: () => {
+                setStartDate(null);
+                setEndDate(null);
+            }, onResetClick: () => {
+                setStartDate(null);
+                setEndDate(null);
+                handleDatesChange(null, null);
+            } }) }));
+};
+
+const CheckboxContent = ({ bodyText, isFormDisabled = false }) => {
     const { label, checked: checkedValue, required, disabled, } = bodyText;
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
     const dispatch = useDispatch();
@@ -6748,10 +6804,10 @@ const CheckboxContent = ({ bodyText }) => {
             console.error("Error in checkbox handleChange", error);
         }
     };
-    return (jsx("div", { style: { width: '100%', marginTop: '10px' }, children: jsx(Checkbox, { label: label, checked: checked, required: required, disabled: disabled, onChange: (e) => handleChange(e), variant: "default" }) }));
+    return (jsx("div", { style: { width: '100%', marginTop: '10px' }, children: jsx(Checkbox, { label: label, checked: checked, required: required, disabled: disabled || isFormDisabled, onChange: (e) => handleChange(e), variant: "default" }) }));
 };
 
-const RadioContent = ({ bodyText }) => {
+const RadioContent = ({ bodyText, isFormDisabled = false }) => {
     const classes = useStyles$6();
     const { label, isDisabled, orientation, options } = bodyText;
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
@@ -6779,10 +6835,10 @@ const RadioContent = ({ bodyText }) => {
             console.error("Error in radio handleChange", error);
         }
     };
-    return (jsxs("div", { style: { width: "100%", marginTop: "10px" }, children: [bodyText?.label && jsx("p", { className: classes.radioGrpLabel, children: bodyText.label }), jsx(RadioButtonGroup, { name: "radio-group", options: options, onChange: (e) => handleChange(e), orientation: orientation, disabled: isDisabled, selectedOption: selectedOption })] }));
+    return (jsxs("div", { style: { width: "100%", marginTop: "10px" }, children: [bodyText?.label && jsx("p", { className: classes.radioGrpLabel, children: bodyText.label }), jsx(RadioButtonGroup, { name: "radio-group", options: options, onChange: (e) => handleChange(e), orientation: orientation, isDisabled: isDisabled || isFormDisabled, selectedOption: selectedOption })] }));
 };
 
-const InputContent = ({ bodyText }) => {
+const InputContent = ({ bodyText, isFormDisabled = false }) => {
     const { label, placeholder, isRequired, isDisabled, inputType, labelOrientation, defaultValue, maxLength, minLength, } = bodyText;
     const chatbotContext = useSelector((state) => state.smartBotReducer.chatbotContext);
     const dispatch = useDispatch();
@@ -6805,7 +6861,7 @@ const InputContent = ({ bodyText }) => {
             console.error("Error in input handleChange", error);
         }
     };
-    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 }) }));
+    return (jsx("div", { style: { width: '100%', marginTop: '10px' }, children: jsx(Input, { label: label, placeholder: placeholder, value: value, onChange: handleChange, required: isRequired, isDisabled: isDisabled || isFormDisabled, type: inputType || "text", labelOrientation: labelOrientation, maxLength: maxLength, minLength: minLength }) }));
 };
 
 const ImageContent = ({ bodyText }) => {
@@ -7030,6 +7086,7 @@ const TabularContent = ({ steps, currentTabValue, children, questions = [], ques
 };
 
 const CombinedContent = ({ botData, props }) => {
+    const isFormDisabled = botData?.isFormDisabled || false;
     const isTabEnabled = botData?.utilityData?.isTabEnabled;
     // Get the array of content items from bodyText
     const contentItems = Array.isArray(botData.bodyText) ? botData.bodyText : [];
@@ -7053,19 +7110,21 @@ const CombinedContent = ({ botData, props }) => {
             case "graph":
                 return jsx(GraphContent, { bodyText: parsedData.bodyText }, key);
             case "slider":
-                return jsx(SliderContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(SliderContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "select":
-                return jsx(SelectContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(SelectContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "datePicker":
-                return jsx(DatePickerContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(DatePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
+            case "dateRangePicker":
+                return jsx(DateRangePickerContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "checkbox":
-                return jsx(CheckboxContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(CheckboxContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "radio":
-                return jsx(RadioContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(RadioContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "button":
-                return jsx(ButtonContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(ButtonContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "input":
-                return jsx(InputContent, { bodyText: parsedData.bodyText }, key);
+                return jsx(InputContent, { bodyText: parsedData.bodyText, isFormDisabled: isFormDisabled }, key);
             case "image":
                 return jsx(ImageContent, { bodyText: parsedData.bodyText }, key);
             default:
@@ -7147,19 +7206,21 @@ const BotMessage = ({ botData, state, handleLikeDislike, props }) => {
             case "graph":
                 return jsx(GraphContent, { bodyText: botData.bodyText });
             case "slider":
-                return jsx(SliderContent, { bodyText: botData.bodyText });
+                return jsx(SliderContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
             case "select":
-                return jsx(SelectContent, { bodyText: botData.bodyText });
+                return jsx(SelectContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
             case "datePicker":
-                return jsx(DatePickerContent, { bodyText: botData.bodyText });
+                return jsx(DatePickerContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
+            case "dateRangePicker":
+                return jsx(DateRangePickerContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
             case "checkbox":
-                return jsx(CheckboxContent, { bodyText: botData.bodyText });
+                return jsx(CheckboxContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
             case "radio":
-                return jsx(RadioContent, { bodyText: botData.bodyText });
+                return jsx(RadioContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
             case "button":
-                return jsx(ButtonContent, { bodyText: botData.bodyText });
+                return jsx(ButtonContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
             case "input":
-                return jsx(InputContent, { bodyText: botData.bodyText });
+                return jsx(InputContent, { bodyText: botData.bodyText, isFormDisabled: botData.isFormDisabled });
             case "image":
                 return jsx(ImageContent, { bodyText: botData.bodyText });
             case "combined":
@@ -10134,7 +10195,9 @@ const SmartBot = (props) => {
                 customChatConfig: customChatConfig,
                 loader: loader,
             };
-            chatDataInfoRef?.current[currentMode]?.conversations?.[1]?.messages.forEach((message, index) => {
+            const allMessages = chatDataInfoRef?.current[currentMode]?.conversations?.[1]?.messages || [];
+            const lastBotMessageIndex = allMessages.reduce((lastIdx, msg, idx) => msg.userType === "bot" ? idx : lastIdx, -1);
+            allMessages.forEach((message, index) => {
                 if (message.userType === "bot") {
                     // let BotMessageJsx =
                     //   <BotMessage
@@ -10144,6 +10207,7 @@ const SmartBot = (props) => {
                     //     props={properties}
                     //   />
                     // ;
+                    message.isFormDisabled = index !== lastBotMessageIndex;
                     message.jsx = (jsx(BotMessage, { botData: message, state: loadingState, handleLikeDislike: handleLikeDislike, props: properties }));
                     message.firstMessage = true;
                     // message.enableLikes = true;