pager-widget 1.0.3 → 1.0.4

package/out/ChatPageInput.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPageInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const ChatPageInput = ({ sendMessage }) => {
+    const [typedMessage, setTypedMessage] = (0, react_1.useState)('');
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isSendHover, setIsSendHover] = (0, react_1.useState)(false);
+    const send = () => {
+        if (typedMessage.trim()) {
+            sendMessage(typedMessage);
+        }
+        setTypedMessage('');
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: widget.status === 'ALLOW_MESSAGE' && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start p-5 gap-2.5", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full border border-zinc-300 rounded-lg overflow-hidden bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 px-4 py-2.5", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Enter message", className: "flex-1 text-sm text-[#1d293d] placeholder-[#62748e] outline-none", value: typedMessage, onChange: (e) => setTypedMessage(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    send();
+                                }
+                            } }), (0, jsx_runtime_1.jsx)("button", { className: "p-1.5 rounded-full transition-colors cursor-pointer flex items-center justify-center", onClick: () => send(), onMouseEnter: () => setIsSendHover(true), onMouseLeave: () => setIsSendHover(false), style: {
+                                color: isSendHover
+                                    ? widget.data?.brand_color || '#4B2FFF'
+                                    : '#62748e',
+                            }, children: isSendHover ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSendPlaneSlantSolid, { className: "w-5 h-5" })) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSendPlaneSlantStroke, { className: "w-5 h-5" })) })] }) }) })) }));
+};
+exports.ChatPageInput = ChatPageInput;

package/out/ChatWidget.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatWidget = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const BotMain_1 = __importDefault(require("./BotMain"));
+const useSocketContext_1 = require("./hooks/useSocketContext");
+const ChatWidget = ({ widgetToggleState, toggleWidget, widgetConfig, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    console.log('DEBUG:: widget', widget);
+    const isWidgetOpen = widgetToggleState === 'OPEN' && widget.status !== 'INVALID_STATE';
+    return ((0, jsx_runtime_1.jsx)(useSocketContext_1.SocketProvider, { endpoint: widgetConfig.endpoint, children: isWidgetOpen && ((0, jsx_runtime_1.jsx)(BotMain_1.default, { toggleWidget: toggleWidget, widgetToggleState: widgetToggleState, widgetConfig: widgetConfig })) }));
+};
+exports.ChatWidget = ChatWidget;

package/out/Consent.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Consent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const react_device_detect_1 = require("react-device-detect");
+const uuid_1 = require("uuid");
+const pager_md_1 = __importDefault(require("./markdown/pager_md"));
+const widgetStore_1 = require("./widgetStore");
+const Consent = () => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    // const current_conversation_id = useGetCurrentConversationId()
+    if (widget.status === 'CONSENT_NEEDED') {
+        let systemDetails;
+        let submissionPayload;
+        if (widget.status === 'CONSENT_NEEDED') {
+            const language = navigator.language;
+            const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            systemDetails = [
+                { field_id: 'SYS_browser', value: react_device_detect_1.browserName },
+                { field_id: 'SYS_browser_os', value: react_device_detect_1.osName },
+                { field_id: 'SYS_browser_language', value: language },
+                {
+                    field_id: 'SYS_screen_resolution',
+                    value: `${window.screen.width} x ${window.screen.height}`,
+                },
+                { field_id: 'SYS_time_zone', value: timeZone },
+                { field_id: 'SYS_device_type', value: react_device_detect_1.deviceType },
+                { field_id: 'SYS_From_Page', value: window.location.origin },
+            ];
+            submissionPayload = {
+                form_id: widget?.form_data?.form_id ?? '',
+                conversation_id: (0, uuid_1.v4)(),
+                lead_data: {
+                    name: widget?.form_data?.name,
+                    fields: systemDetails,
+                    ws: widget?.data?.workspace,
+                    user_consent: widget?.data.user_consent,
+                },
+                type: 'browser',
+            };
+        }
+        const ConsentGiven = () => {
+            widgetConfigStore2_1.widgetFetchStore2.trigger.processConsent({
+                consentState: 'GIVEN',
+                submissionPayload,
+            });
+        };
+        const ConsentDenied = () => {
+            // widgetFetchStore2.trigger.processConsent({
+            //     consentState: 'DENIED',
+            //     submissionPayload,
+            // })
+            widgetStore_1.widgetStore.trigger.selectTab({ tab: widgetStore_1.TabType.HOME });
+        };
+        console.log('hereconsent', widget.consent);
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-1.5 w-full px-5 animate-slide-in-left", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start w-full flex-col gap-2.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-start w-full rounded-lg overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-[5px]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex w-[24px] h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-6 h-6 text-white" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 w-[90%]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 items-baseline pt-0.5", children: (0, jsx_runtime_1.jsx)("div", { className: "font-inter text-sm font-medium text-[#020618]", children: widget?.data?.name }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm text-[#020618] w-full", children: (0, jsx_runtime_1.jsx)(pager_md_1.default, { mdText: widget?.consent
+                                                    .consent_display_data // TODO: fix this any
+                                             }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start gap-2 relative self-stretch pt-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: ConsentGiven, className: "flex cursor-pointer !h-7 w-max border border-slate-300 leading-5 px-3.5 py-1.5 font-medium text-slate-700 items-center text-sm justify-center bg-white rounded-lg hover:border-[#4b2fff]", children: "Yes, I agree" }), (0, jsx_runtime_1.jsx)("button", { onClick: ConsentDenied, className: "flex cursor-pointer !h-7 w-max border border-slate-300 leading-5 px-3.5 py-1.5 font-medium text-slate-700 items-center text-sm justify-center bg-white rounded-lg hover:border-[#4b2fff]", children: "No, I do not agree" })] })] })] }) }) }));
+    }
+    return null;
+};
+exports.Consent = Consent;

package/out/CountryDropdown.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountryDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CountryDropdown = ({ countries, value, onChange, disabled, error, placeholder = 'Select a country', label = 'Country', }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const dropdownRef = (0, react_1.useRef)(null);
+    const filteredCountries = countries.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()));
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", ref: dropdownRef, children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: label }), (0, jsx_runtime_1.jsxs)("div", { onClick: () => {
+                    if (!disabled)
+                        setIsOpen((prev) => !prev);
+                }, className: `w-full flex justify-between items-center px-4 py-2 h-9 text-sm rounded-lg border ${disabled ? 'text-slate-400 border-zinc-200 bg-zinc-50' : 'bg-white'} ${error
+                    ? 'border-red-500 focus:ring-red-500'
+                    : 'border-gray-300 focus:ring-blue-500'} focus:outline-none focus:ring-2 focus:border-transparent`, children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate", children: value || placeholder }), (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "z-50 mt-1 w-[100%] bg-white border border-gray-300 rounded-md shadow-lg", onMouseDown: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 border-b border-gray-200 bg-white sticky top-0 z-10 rounded-tl-md rounded-tr-md", children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), onMouseDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "max-h-48 overflow-y-auto", children: [filteredCountries.map((c) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                    onChange(c.name);
+                                    setIsOpen(false);
+                                }, className: "px-4 py-2 hover:bg-gray-100 cursor-pointer text-sm", children: c.name }, c.code))), filteredCountries.length === 0 && ((0, jsx_runtime_1.jsx)("li", { className: "px-4 py-2 text-sm text-gray-500", children: "No results found" }))] })] })), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+};
+exports.CountryDropdown = CountryDropdown;

package/out/Form.js

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const uuid_1 = require("uuid");
+const InputField_1 = require("./InputField");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const Form = ({ conversationId }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const widgetData = (0, widgetConfigStore2_1.widgetHasData)(widget) ? widget.data : null;
+    const [formValues, setFormValues] = (0, react_1.useState)({});
+    const [formErrors, setFormErrors] = (0, react_1.useState)({});
+    const [isSubmittedFormOpen, setIsSubmittedFormOpen] = (0, react_1.useState)(false);
+    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    const isUuid = typeof widgetData?.source_id === 'string' &&
+        uuidRegex.test(widgetData.source_id);
+    console.log('widget status from form', widget);
+    (0, react_1.useEffect)(() => {
+        if (widget.status === 'FORM_INPUT_NEEDED' && isUuid) {
+            console.log('Trigger  here');
+            widgetConfigStore2_1.widgetFetchStore2.trigger.processMessage();
+        }
+        if (widget.status === 'FORM_INPUT_NEEDED' && widget.form_data) {
+            const localKey = `CONVERSATION::${widget.data.id}`;
+            try {
+                const existingRaw = localStorage.getItem(localKey);
+                const existingData = existingRaw
+                    ? JSON.parse(existingRaw)
+                    : {
+                        widget_id: widget.data.id,
+                        conversation_id: null,
+                        user_state: 'FORM_INPUT_NEEDED',
+                        events: [],
+                    };
+                // ✅ Check if already added to prevent duplicates
+                const alreadyExists = existingData.events.some((e) => e.type === 'FORM_INPUT_NEEDED' &&
+                    e.form_data?.form_id === widget.form_data.form_id);
+                if (!alreadyExists) {
+                    const newEvent = {
+                        type: 'FORM_INPUT_NEEDED',
+                        form_data: widget.form_data,
+                    };
+                    existingData.events.push(newEvent);
+                    localStorage.setItem(localKey, JSON.stringify(existingData));
+                    console.log('✅ FORM_INPUT_NEEDED appended successfully');
+                }
+                else {
+                    console.log('ℹ️ FORM_INPUT_NEEDED already present, skipping append.');
+                }
+            }
+            catch (error) {
+                console.error('❌ Failed to append FORM_INPUT_NEEDED event:', error);
+            }
+        }
+    }, [widget.status, widget?.form_data, widget.data.id]);
+    (0, react_1.useEffect)(() => {
+        switch (widget.status) {
+            case 'WIDGET_LOADING':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.setFetchConfig(widget.config);
+                break;
+            case 'CONSENT_GIVEN':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.shouldShowForm({
+                    browser_data: widget.browser_data ?? null,
+                });
+                break;
+            case 'WIDGET_LOADED':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.shouldShowForm({ browser_data: null });
+                break;
+            case 'FORM_SUBMITTED':
+                widgetConfigStore2_1.widgetFetchStore2.trigger.processMessage();
+                break;
+        }
+    }, [widget.status]);
+    if (widget.status !== 'ALLOW_MESSAGE' &&
+        widget.status !== 'FORM_INPUT_NEEDED' &&
+        widget.status !== 'WIDGET_LOADED' &&
+        widget.status !== 'CONSENT_NEEDED' &&
+        widget.status !== 'CONSENT_GIVEN' &&
+        widget.status !== 'FORM_SUBMITTED') {
+        return null;
+    }
+    // const getFormTemplateFromLocalStorage = () => {
+    //     const raw = localStorage.getItem(`CONVERSATION_LIST::${widget.data.id}`);
+    //     if (!raw) {
+    //       console.warn('No data found in localStorage');
+    //       return null;
+    //     }
+    //     try {
+    //       const parsed: any = JSON.parse(raw);
+    //       console.log("parsed event", parsed);
+    //       const eventsArray = Array.isArray(parsed)
+    //         ? parsed.reduce<any[]>((acc, item) => {
+    //             if (item.events && Array.isArray(item.events)) acc.push(...item.events);
+    //             return acc;
+    //           }, [])
+    //         : parsed.events || [];
+    //       const formInputNeededEvent = eventsArray.find(
+    //         (e: any) => e.type === "FORM_INPUT_NEEDED"
+    //       );
+    //       console.log("form input needed event", formInputNeededEvent);
+    //       return formInputNeededEvent?.form_data || null;
+    //     } catch (error) {
+    //       console.error("Failed to parse localStorage data:", error);
+    //       return null;
+    //     }
+    //   };
+    const getFormTemplateFromLocalStorage = () => {
+        const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+        if (!raw) {
+            console.warn('No data found in localStorage under key "DUMMY"');
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            console.log('parsed event', parsed);
+            const formInputNeededEvent = parsed.events.find((e) => e.type === 'FORM_INPUT_NEEDED');
+            console.log('form input needed event', formInputNeededEvent);
+            return formInputNeededEvent?.form_data || null;
+        }
+        catch (error) {
+            console.error('Failed to parse localStorage DUMMY data:', error);
+            return null;
+        }
+    };
+    const formData = getFormTemplateFromLocalStorage();
+    const formTemplate = formData?.form_template ?? []; // ✅ Safely fallback to empty array
+    console.log('form template', formTemplate);
+    const submittedValueMap = (() => {
+        try {
+            const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+            if (!raw)
+                return {};
+            const parsed = JSON.parse(raw);
+            const formSubmittedEvent = parsed.events.find((e) => e.type === 'FORM_SUBMITTED');
+            const submittedArray = formSubmittedEvent?.submissionPayload?.lead_data?.fields ?? [];
+            return submittedArray.reduce((acc, { field_id, value }) => {
+                acc[field_id] = value;
+                return acc;
+            }, {});
+        }
+        catch (error) {
+            console.error('Error parsing submitted data:', error);
+            return {};
+        }
+    })();
+    const isFormSubmitted = (() => {
+        try {
+            const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+            if (!raw)
+                return false;
+            const parsed = JSON.parse(raw);
+            return parsed.events.some((e) => e.type === 'FORM_SUBMITTED');
+        }
+        catch (error) {
+            console.error('Error checking form submission:', error);
+            return false;
+        }
+    })();
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormValues((prev) => ({ ...prev, [name]: value }));
+        setFormErrors((prev) => ({ ...prev, [name]: '' }));
+    };
+    const validateForm = () => {
+        const errors = {};
+        formTemplate.forEach((field) => {
+            const value = formValues[field.field_id]?.trim() || '';
+            if (field.is_mandatory && !value) {
+                errors[field.field_id] =
+                    `${field.dispaly_name || field.name} is required`;
+            }
+            if (field.field_type === 'email' &&
+                value &&
+                !emailRegex.test(value)) {
+                errors[field.field_id] = 'Please enter a valid email address';
+            }
+        });
+        setFormErrors(errors);
+        return Object.keys(errors).length === 0;
+    };
+    const handleFormSubmission = (e) => {
+        e.preventDefault();
+        if (!validateForm())
+            return;
+        const fieldsArray = Object.entries(formValues).map(([field_id, value]) => ({ field_id, value }));
+        const submissionPayload = {
+            form_id: formData?.form_id ?? '',
+            conversation_id: conversationId ?? (0, uuid_1.v4)(),
+            lead_data: {
+                name: formData?.name ?? '',
+                fields: fieldsArray,
+                ws: formData?.ws ?? '',
+                user_consent: widget.data.user_consent,
+            },
+            type: 'lead',
+        };
+        widgetConfigStore2_1.widgetFetchStore2.trigger.processFormSubmission({ submissionPayload });
+        const localKey = `form::${widget?.data?.id}::${conversationId}`;
+        let existingData = {};
+        try {
+            const stored = localStorage.getItem(localKey);
+            existingData = stored ? JSON.parse(stored) : {};
+        }
+        catch (err) {
+            console.error(`Failed to parse localStorage for ${localKey}`, err);
+        }
+        existingData[formData?.form_id] = fieldsArray;
+        try {
+            localStorage.setItem(localKey, JSON.stringify(existingData));
+            localStorage.setItem('current_conversation', conversationId);
+        }
+        catch (err) {
+            console.error(`Failed to save form data to ${localKey}`, err);
+        }
+    };
+    const shouldShowForm = (widget.status === 'FORM_INPUT_NEEDED' && !isUuid) ||
+        widget.status === 'WIDGET_LOADED' ||
+        (widget.status === 'ALLOW_MESSAGE' &&
+            conversationId === localStorage.getItem('current_conversation'));
+    if (!shouldShowForm)
+        return null;
+    console.log('should show form ', shouldShowForm, formTemplate, conversationId);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-1.5 w-full px-5 animate-slide-in-left", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1.5 items-start w-full rounded-lg overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-[5px]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex w-[24px] h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-6 h-6 text-white" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 w-[90%]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 items-baseline pt-0.5", children: (0, jsx_runtime_1.jsx)("div", { className: "font-inter text-sm font-medium text-[#020618]", children: widget?.data?.name }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm text-[#020618] w-full", children: isFormSubmitted ? ((0, jsx_runtime_1.jsxs)("div", { className: "py-2.5 px-3.5 flex w-full flex-col items-start gap-4 rounded-lg border border-zinc-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-sm w-full justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex gap-1 items-center text-slate-950 text-sm font-regular leading-5", children: ["Form submitted", ' ', (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiCheckTickCircleSolid, { className: "h-[18px] w-[18px] text-green-500" })] }), (0, jsx_runtime_1.jsx)("span", { onClick: () => setIsSubmittedFormOpen(!isSubmittedFormOpen), className: "cursor-pointer text-slate-500 hover:text-slate-700 transition-colors hover:bg-slate-100 rounded-full", children: !isSubmittedFormOpen ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronDownStroke, {})) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronUpStroke, {})) })] }), isSubmittedFormOpen && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-4", children: formTemplate.map((input, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-700 text-sm font-medium leading-5", children: input.dispaly_name ||
+                                                            input.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-950 text-sm font-regular leading-5", children: formValues[input.field_id] ??
+                                                            submittedValueMap[input
+                                                                .field_id] ??
+                                                            '' })] }, index))) }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col bg-white w-full gap-2.5 px-3.5 py-2.5 rounded-lg border border-zinc-200", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleFormSubmission, className: "space-y-4 w-full", children: [formTemplate.map((input) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(InputField_1.InputField, { input: input, handleChange: handleChange, value: formValues[input.field_id] ??
+                                                        submittedValueMap[input.field_id] ??
+                                                        '', error: formErrors[input.field_id], disabled: isFormSubmitted }, input.field_id) }))), (0, jsx_runtime_1.jsx)("button", { type: "submit", className: `${!isFormSubmitted
+                                                    ? 'hover:bg-[#4b2fff]/90'
+                                                    : 'opacity-50'} w-full text-sm bg-[#4b2fff] text-white cursor-pointer font-medium py-2 px-4 rounded-lg transition-colors`, disabled: isFormSubmitted, children: isFormSubmitted
+                                                    ? 'Submitted'
+                                                    : 'Submit' })] }) })) })] })] }) }) }));
+};
+exports.Form = Form;

package/out/HomePage.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HomePageContent_1 = require("./HomePageContent");
+const HomePageFooter_1 = require("./HomePageFooter");
+const HomePageHeader_1 = require("./HomePageHeader");
+const HomePage = ({ toggleWidget, switchTab, isExpanded, }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HomePageHeader_1.HomePageHeader, { toggleWidget: toggleWidget }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col justify-between", children: [(0, jsx_runtime_1.jsx)(HomePageContent_1.HomePageContent, {}), (0, jsx_runtime_1.jsx)(HomePageFooter_1.HomePageFooter, { switchTab: switchTab, isExpanded: isExpanded })] })] }));
+};
+exports.HomePage = HomePage;

package/out/HomePageContent.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePageContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const RecentMessageTab_1 = require("./RecentMessageTab");
+const BotMain_1 = require("./BotMain");
+const widgetStore_1 = require("./widgetStore");
+// import { NewRecentMessageTab } from './NewRecentMessageTab'
+// import { setWidgetLocalState } from './widgetStateHandler'
+const HomePageContent = () => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "p-5 ", children: [(0, jsx_runtime_1.jsx)(RecentMessageTab_1.RecentMessageTab, {}), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 mt-2", children: (0, jsx_runtime_1.jsxs)("button", { className: `flex w-full items-center justify-between rounded-xl pl-5 pr-4 py-[13px] text-sm font-medium text-slate-950 cursor-pointer`, onClick: () => {
+                            localStorage.setItem('Tab', 'Chat');
+                            widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.CHAT });
+                            widgetStore_1.widgetStore.send({
+                                type: 'handleExitChatState',
+                                value: false,
+                            });
+                        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
+                            border: `1px solid ${isHovered
+                                ? widget?.data?.brand_color
+                                : '#e4e4e7'}`,
+                        }, children: [(0, jsx_runtime_1.jsx)("span", { className: "self-stretch mt-[-1.00px] text-sm text-[#020618]", children: widget?.data?.send_message_description }), (0, jsx_runtime_1.jsx)("svg", { style: {
+                                    color: isHovered
+                                        ? widget?.data?.brand_color
+                                        : '#b8b8b8',
+                                }, width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 18l6-6-6-6" }) })] }) })] }) }));
+};
+exports.HomePageContent = HomePageContent;

package/out/HomePageFooter.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePageFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const BotMain_1 = require("./BotMain");
+const widgetStore_1 = require("./widgetStore");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const CustomTooltip_1 = require("./components/CustomTooltip");
+const HomePageFooter = ({ switchTab, isExpanded, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isHomeHovered, setIsHomeHovered] = react_1.default.useState(false);
+    const [isRecentHovered, setIsRecentHovered] = react_1.default.useState(false);
+    // if (
+    //     !(
+    //         status !== 'NOT_STARTED' &&
+    //         status !== 'WIDGET_LOADING' &&
+    //         status !== 'INVALID_STATE' &&
+    //         status !== 'ALLOW_MESSAGE'
+    //     )
+    // ) {
+    //     return null
+    // }
+    function hexToRGB(hex) {
+        hex = hex.replace(/^#/, '');
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        const bigint = parseInt(hex, 16);
+        const r = (bigint >> 16) & 255;
+        const g = (bigint >> 8) & 255;
+        const b = bigint & 255;
+        return `rgb(${r}, ${g}, ${b}, 0.1)`;
+    }
+    const handleHomeButtonClick = () => {
+        if (isExpanded !== widgetStore_1.WidgetExpandType.DEFAULT) {
+            widgetStore_1.widgetStore.trigger.expandWidget({
+                expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
+            });
+            setTimeout(() => {
+                widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
+            }, 300);
+        }
+        else {
+            widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
+        }
+    };
+    const widgetData = (0, widgetConfigStore2_1.widgetHasData)(widget) ? widget.data : null;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-10 border-t border-zinc-200 bg-white px-8 py-3 z-50", children: [(0, jsx_runtime_1.jsx)(CustomTooltip_1.CustomTooltip, { content: "Home", children: (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg cursor-pointer p-1.5", onMouseEnter: () => setIsHomeHovered(true), onMouseLeave: () => setIsHomeHovered(false), onClick: () => handleHomeButtonClick(), style: {
+                            background: switchTab == 'home'
+                                ? widgetData?.brand_color
+                                    ? hexToRGB(widgetData?.brand_color)
+                                    : '#EBEFFF'
+                                : '',
+                            color: switchTab == 'home' || isHomeHovered
+                                ? widgetData?.brand_color
+                                    ? widgetData?.brand_color
+                                    : '#45556c'
+                                : '#62748e',
+                        }, children: switchTab == 'home' ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiHomeAltSolid, { style: {
+                                color: widgetData?.brand_color ?? '#564CFF',
+                            } })) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiHomeAltStroke, {})) }) }), (0, jsx_runtime_1.jsx)(CustomTooltip_1.CustomTooltip, { content: "Recent chats", children: (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg cursor-pointer p-1.5", onMouseEnter: () => setIsRecentHovered(true), onMouseLeave: () => setIsRecentHovered(false), onClick: () => widgetStore_1.widgetStore.trigger.selectTab({
+                            tab: BotMain_1.TabType.RECENT_MESSAGE_LIST,
+                        }), style: {
+                            background: switchTab == 'recentMessageList'
+                                ? widgetData?.brand_color
+                                    ? hexToRGB(widgetData?.brand_color)
+                                    : '#EBEFFF'
+                                : '',
+                            color: switchTab == 'recentMessageList' ||
+                                isRecentHovered
+                                ? widgetData?.brand_color
+                                    ? widgetData?.brand_color
+                                    : '#45556c'
+                                : '#62748e',
+                        }, children: switchTab == 'recentMessageList' ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChatDefaultSolid, { style: {
+                                color: widgetData?.brand_color ?? '#564CFF',
+                            } })) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChatDefaultStroke, {})) }) })] }) }));
+};
+exports.HomePageFooter = HomePageFooter;

package/out/HomePageHeader.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePageHeader = exports.isDarkColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+/**
+ * Determines if a color is "dark" or "light" based on its perceived brightness.
+ * @param color The color string in hex (e.g., #RRGGBB, #RGB) or RGB (e.g., rgb(r, g, b)) format.
+ * @returns 'dark' or 'light'. Returns 'light' for null or unsupported formats.
+ */
+// TODO : Needs to be Verified
+const isDarkColor = (color) => {
+    let r;
+    let g;
+    let b;
+    if (color?.startsWith('#')) {
+        let hex = color.slice(1);
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        if (hex.length === 6) {
+            const bigint = parseInt(hex, 16);
+            r = (bigint >> 16) & 255;
+            g = (bigint >> 8) & 255;
+            b = bigint & 255;
+        }
+    }
+    else if (color?.startsWith('rgb')) {
+        const rgbValues = color.match(/\d+/g);
+        if (rgbValues && rgbValues.length >= 3) {
+            ;
+            [r, g, b] = rgbValues.map(Number);
+        }
+    }
+    if (r === undefined || g === undefined || b === undefined) {
+        return 'light';
+    }
+    // --- Improved brightness formula (HSP model) ---
+    const brightness = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+    // --- Increased threshold for detecting “light” colors ---
+    return brightness < 170 ? 'dark' : 'light';
+};
+exports.isDarkColor = isDarkColor;
+const HomePageHeader = ({ toggleWidget, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const { status } = widget;
+    if (!(status !== 'NOT_STARTED' &&
+        status !== 'WIDGET_LOADING' &&
+        status !== 'INVALID_STATE')) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `relative h-[40%] w-full rounded-[22px] ${widget?.data?.welcome_text_color && (0, exports.isDarkColor)(widget?.data?.welcome_text_color) == 'light' ? 'bg-widget-home-light-top' : 'bg-widget-home-dark-top'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-full h-full rounded-[22px]", style: { backgroundColor: widget.data?.home_background_color }, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-full h-full z-[0] rounded-[22px] opacity-90", style: {
+                        backgroundImage: `url(${widget.data?.home_cover_image})`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        backgroundRepeat: 'no-repeat',
+                    }, children: (0, jsx_runtime_1.jsx)("button", { className: "absolute top-6 right-6 hover:bg-white/10 rounded-lg p-1.5 cursor-pointer flex items-start h-max", style: { mixBlendMode: 'difference' }, onClick: toggleWidget, children: (0, jsx_runtime_1.jsx)("svg", { style: {
+                                mixBlendMode: 'difference',
+                            }, width: "20", height: "20", viewBox: "0 0 24 24", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-start p-6 z-10 absolute w-2/3", children: (0, jsx_runtime_1.jsx)("img", { className: "h-[32] w-auto cursor-pointer", src: widget?.data?.home_header_logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col absolute bottom-[1.2rem] left-[1.5rem]", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold leading-8 ", style: { color: widget?.data?.welcome_text_color }, children: widget?.data?.home_header_title }), (0, jsx_runtime_1.jsx)("span", { className: "text-base font-medium leading-6", style: {
+                            color: widget?.data?.welcome_text_color,
+                        }, children: widget?.data?.home_header_description })] })] }));
+};
+exports.HomePageHeader = HomePageHeader;