pager-widget 1.0.3 → 1.0.4

package/out/InputField.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const country_codes_flags_phone_codes_1 = require("country-codes-flags-phone-codes");
+const CountryDropdown_1 = require("./CountryDropdown");
+const InputField = ({ input, handleChange, value, error, disabled, }) => {
+    // const [selectedCountry, setSelectedCountry] = useState(value||"");
+    if (input.field_type === 'short_text' || input.field_type === 'email') {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.name, className: "block text-sm font-medium text-gray-700 mb-1", children: input.dispaly_name ? input.dispaly_name : input.name }), (0, jsx_runtime_1.jsx)("input", { type: input.field_type === 'short_text' ||
+                        input.field_type === 'email'
+                        ? 'text'
+                        : input.field_type, id: input._id, name: input.field_id, value: value, onChange: handleChange, formNoValidate: true, placeholder: input.placeholder, disabled: disabled, className: `w-full 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` }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+    }
+    else if (input.field_type === 'country') {
+        return ((0, jsx_runtime_1.jsx)(CountryDropdown_1.CountryDropdown, { disabled: disabled, countries: country_codes_flags_phone_codes_1.countries, value: value, onChange: (selectedValue) => {
+                const syntheticEvent = {
+                    target: {
+                        name: input.field_id,
+                        value: selectedValue,
+                    },
+                };
+                handleChange(syntheticEvent);
+            } })
+        // <CountryDropdown countries={countries}
+        //  value={selectedCountry}
+        // />
+        // <div className="w-full">
+        //     <label
+        //         htmlFor={input.field_id}
+        //         className="block text-sm font-medium text-gray-700 mb-1"
+        //     >
+        //         {input.display_name || 'Country'}
+        //     </label>
+        //     <select
+        //         id={input._id}
+        //         name={input.field_id}
+        //         value={value}
+        //         onChange={(e) =>
+        //             handleChange(
+        //                 e as unknown as React.ChangeEvent<HTMLInputElement>
+        //             )
+        //         }
+        //         className={`w-full px-2 py-2 h-9 text-sm rounded-lg border ${
+        //             error
+        //                 ? 'border-red-500 focus:ring-red-500'
+        //                 : 'border-gray-300 focus:ring-blue-500'
+        //         } focus:outline-none focus:ring-2 focus:border-transparent bg-white`}
+        //     >
+        //         <option
+        //             value=""
+        //             disabled
+        //             className="bg-[red] mt-10 text-[#fff]"
+        //         >
+        //             {input.placeholder || 'Select a country'}
+        //         </option>
+        //         {countries.map((c) => (
+        //             <option key={c.code} value={c.name}>
+        //                 {c.name}
+        //             </option>
+        //         ))}
+        //     </select>
+        //     {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        // </div>
+        );
+    }
+    else if (input.field_type === 'long_text') {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.name, className: "block text-sm font-medium text-gray-700 mb-1", children: input.dispaly_name ? input.dispaly_name : input.name }), (0, jsx_runtime_1.jsx)("textarea", { name: input.field_id, value: value, className: `w-full px-4 py-2 h-32 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`, onChange: handleChange }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+    }
+    else if (input.field_type === 'phone_number') {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.name, className: "block text-sm font-medium text-gray-700 mb-1", children: input.dispaly_name ? input.dispaly_name : input.name }), (0, jsx_runtime_1.jsx)("input", { id: input._id, name: input.field_id, value: value, onChange: handleChange, formNoValidate: true, placeholder: input.placeholder, disabled: disabled, maxLength: 15, className: `w-full 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` }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+    }
+};
+exports.InputField = InputField;

package/out/Markdown.js

@@ -0,0 +1,126 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const react_syntax_highlighter_1 = require("react-syntax-highlighter");
+const prism_1 = require("react-syntax-highlighter/dist/esm/styles/prism");
+require("./global.css");
+const Markdown = () => {
+    const [markdown] = react_1.default.useState('table');
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const codeString = `
+    import requests
+    
+    response = requests.get("https://api.example.com/data")  # Replace with a real API endpoint
+    if response.status_code == 200:
+    data = response.json()
+    print(data)
+    else:
+    print(f"Failed to fetch data: {response.status_code}")
+    `;
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(codeString);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Copy failed', err);
+        }
+    };
+    const nestedItems = ['Nested item 1', 'Nested item 2', 'Nested item 3'];
+    const columns = [
+        'ID',
+        'Name',
+        'Email',
+        'Phone',
+        'Company',
+        'Country',
+        'Status',
+        'Date',
+        'ID',
+        'Name',
+        'Email',
+        'Phone',
+        'Company',
+        'Country',
+        'Status',
+        'Date',
+    ];
+    const data = Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `User ${i + 1}`,
+        email: `user${i + 1}@example.com`,
+        phone: `+123456789${i}`,
+        company: `Company ${i % 10}`,
+        country: `Country ${i % 5}`,
+        status: i % 2 === 0 ? 'Active' : 'Inactive',
+        date: `2025-05-${(i % 30) + 1}`,
+        id2: i + 1,
+        name2: `User ${i + 1}`,
+        email2: `user${i + 1}@example.com`,
+        phone2: `+123456789${i}`,
+        company2: `Company ${i % 10}`,
+        country2: `Country ${i % 5}`,
+        status2: i % 2 === 0 ? 'Active' : 'Inactive',
+        date2: `2025-05-${(i % 30) + 1}`,
+    }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-1.5 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 w-[90%] rounded-lg overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("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 items-center justify-center p-[5px] rounded-full bg-gradient-to-r from-[#564CFF] via-[#EB582E] to-[#ECD906]", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSparkleAi01Solid, { className: "w-[16px] h-[16px] text-white" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[#020618]", children: "Support Agent" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#62748E]", children: "Just now" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-3 px-9 w-full", children: [markdown == 'bold' ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full -mt-[1px] text-sm font-bold text-[#020618]", children: "Hello! How can I help you today?" })) : null, markdown == 'italic' ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full -mt-[1px] text-sm italic text-[#020618]", children: "Hello! How can I help you today?" })) : null, markdown == 'bold-italic' ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full -mt-[1px] text-sm font-bold italic text-[#020618]", children: "Hello! How can I help you today?" })) : null, markdown == 'cross-text' ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full -mt-[1px] text-sm line-through text-[#020618]", children: "Hello! How can I help you today?" })) : null, markdown == 'yellow-marked-text' ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-3 w-full p-4 bg-[#fef3c6] border-l-4 border-[#e17100] rounded-r-lg", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[#020618] text-sm leading-5", children: "Hello! How can I help you today?" }) })) : null, markdown == 'grey-marked-text' ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-3 w-full p-4 bg-[#F4F4F5] border-l-4 border-[#52525C] rounded-r-lg", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[#020618] text-sm leading-5", children: "Hello! How can I help you today?" }) })) : null, markdown == 'key-texts' ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center w-max py-1 px-2 rounded-md bg-[#F4F4F5]", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[#314158] text-sm leading-5", children: `api_key: "sk_abcdef1234567890"` }) })) : null, markdown == 'code-snippet' ? ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleCopy, style: {
+                                            position: 'absolute',
+                                            top: '10px',
+                                            right: '10px',
+                                            cursor: 'pointer',
+                                            zIndex: 1,
+                                        }, children: copied ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiCopyCopiedStroke, { className: "h-3.5 w-3.5" })) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiCopyDefaultStroke, { className: "h-3.5 w-3.5" })) }), (0, jsx_runtime_1.jsx)(react_syntax_highlighter_1.Prism, { customStyle: {
+                                            width: '100%',
+                                            borderRadius: '8px',
+                                            fontSize: '12px',
+                                        }, showLineNumbers: true, lineProps: {
+                                            style: {
+                                                display: 'block',
+                                                backgroundColor: '#F4F4F5',
+                                                fontSize: '12px',
+                                            },
+                                        }, codeTagProps: {
+                                            style: {
+                                                backgroundColor: '#F4F4F5',
+                                                padding: '0px',
+                                                fontSize: '12px',
+                                            },
+                                        }, PreTag: "div", wrapLongLines: true, wrapLines: true, className: "w-full bg-[#F4F4F5] text-wrap text-xs border border-[#E4E7EC] rounded-lg", language: "python", style: prism_1.coy, children: codeString })] })) : null, markdown == 'unordered-list' ? ((0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Responsive design", (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Nested item 1" }), (0, jsx_runtime_1.jsx)("li", { children: "Nested item 2" }), (0, jsx_runtime_1.jsx)("li", { children: "Nested item 3" })] })] }), (0, jsx_runtime_1.jsx)("li", { children: "Real-time editing" }), (0, jsx_runtime_1.jsx)("li", { children: "WYSIWYG interface" }), (0, jsx_runtime_1.jsx)("li", { children: "Font styles and sizes" }), (0, jsx_runtime_1.jsx)("li", { children: "Font styles and sizes" }), (0, jsx_runtime_1.jsx)("li", { children: "Text color and highlighting" }), (0, jsx_runtime_1.jsx)("li", { children: "Text alignment" }), (0, jsx_runtime_1.jsx)("li", { children: "Bullet and numbered Lists" })] })) : null, markdown == 'ordered-list' ? ((0, jsx_runtime_1.jsxs)("ol", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Responsive design", (0, jsx_runtime_1.jsxs)("ol", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Nested item 1" }), (0, jsx_runtime_1.jsx)("li", { children: "Nested item 2" }), (0, jsx_runtime_1.jsx)("li", { children: "Nested item 3" })] })] }), (0, jsx_runtime_1.jsx)("li", { children: "Real-time editing" }), (0, jsx_runtime_1.jsx)("li", { children: "WYSIWYG interface" }), (0, jsx_runtime_1.jsx)("li", { children: "Font styles and sizes" }), (0, jsx_runtime_1.jsx)("li", { children: "Text color and highlighting" }), (0, jsx_runtime_1.jsx)("li", { children: "Text alignment" }), (0, jsx_runtime_1.jsx)("li", { children: "Bullet and numbered Lists" })] })) : null, markdown == 'link-text' ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full -mt-[1px] text-sm text-[#4B2FFF] underline cursor-pointer hover:text-[#3517f7]", children: (0, jsx_runtime_1.jsx)("a", { href: "https://www.example.com", children: "Hello! How can I help you today?" }) })) : null, markdown == 'table' ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-[300px] overflow-auto rounded-lg border border-gray-300", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full border-collapse min-w-full text-sm", children: [(0, jsx_runtime_1.jsx)("thead", { className: "bg-gray-100 sticky top-0 z-10", children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((col, i) => ((0, jsx_runtime_1.jsx)("th", { className: "px-4 py-2 text-left border-b border-gray-300 whitespace-nowrap text-sm", children: col }, i))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.map((row, i) => ((0, jsx_runtime_1.jsx)("tr", { className: "bg-white", children: Object.entries(row).map(([key, value]) => ((0, jsx_runtime_1.jsx)("td", { className: "px-4 py-2 border-b whitespace-nowrap texrt-sm", children: value }, key))) }, i))) })] }) })) : null, markdown == 'image' ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full -mt-[1px] text-sm text-[#020618]", children: (0, jsx_runtime_1.jsx)("img", { src: "https://img.freepik.com/free-photo/3d-rendering-luxury-business-meeting-working-room-executive-office_105762-1993.jpg?ga=GA1.1.30189705.1747290318&semt=ais_hybrid&w=740", alt: "Placeholder", className: "rounded-lg" }) })) : null, markdown == 'image-skeleton' ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-[250px] h-[250px] flex flex-col justify-center items-center gap-1 bg-[#F4F4F5] rounded-[10px]", children: [(0, jsx_runtime_1.jsx)(pikaicons_react_1.PiPhotoImageDefaultSolid, { className: "text-[#90A1B9]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-normal leading-5 text-[#45556C]", children: "No preview available" })] })) : null, markdown == 'rule-text' ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full max-w-[533px] items-start gap-2 pr-0 py-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full h-px bg-gray-200" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)("ol", { children: (0, jsx_runtime_1.jsxs)("li", { children: ["Responsive design", (0, jsx_runtime_1.jsx)("ol", { children: nestedItems.map((item, index) => ((0, jsx_runtime_1.jsx)("li", { className: "flex-1 text-sm text-[#1a1a1a] font-regular", children: item }, index))) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-px bg-gray-200" })] })) : null, markdown == 'rule-without-text' ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full max-w-[533px] items-start gap-2 pr-0 py-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full h-px bg-gray-200" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-px bg-gray-200" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-px bg-gray-200" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-px bg-gray-200" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-px bg-gray-200" })] })) : null] })] }) }) }));
+};
+exports.default = Markdown;

package/out/Message.js

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = require("react");
+const pager_md_1 = __importDefault(require("./markdown/pager_md"));
+const ReceivedMessage_1 = require("./ReceivedMessage");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const widgetStore_1 = require("./widgetStore");
+// function shouldTriggerExit(message: any): boolean {
+//     if (
+//         message?.output?.[0]?.value?.value
+//             ?.toLowerCase()
+//             ?.includes('we are exiting from the conversation now')
+//     ) {
+//         return true
+//     }
+//     return false
+// }
+function shouldTriggerExit(message) {
+    if (message?.output[0]?.response_type === 'session_expired' ||
+        message?.output?.[0]?.value?.value
+            ?.toLowerCase()
+            ?.includes('we are exiting from the conversation now')) {
+        return true;
+    }
+    return false;
+}
+const Message = ({ messageResponse, sendFeedback, sendMessage, setMessages, }) => {
+    console.log(messageResponse, 'messageResponse');
+    const { type, time, message } = messageResponse;
+    const [botStatus, setBotStatus] = (0, react_1.useState)(null);
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    (0, react_1.useEffect)(() => {
+        console.log('exit check var');
+        if (type === 'received' && shouldTriggerExit(message)) {
+            const exitLockKey = `CONVERSATION_EXIT_LOCK::${widget.data.id}`;
+            // Prevent multiple tabs from running exit logic
+            if (localStorage.getItem(exitLockKey)) {
+                console.log('Exit already handled by another tab');
+                return;
+            }
+            // Set lock
+            localStorage.setItem(exitLockKey, 'true');
+            widgetStore_1.widgetStore.trigger.handleExitChatState({ value: true });
+            const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+            if (!raw) {
+                console.warn('No data found in CONVERSATION key');
+                return;
+            }
+            try {
+                const currentData = JSON.parse(raw);
+                const listRaw = localStorage.getItem(`CONVERSATION_LIST::${widget.data.id}`);
+                const currentList = listRaw ? JSON.parse(listRaw) : [];
+                currentList.push(currentData);
+                localStorage.setItem(`CONVERSATION_LIST::${widget.data.id}`, JSON.stringify(currentList));
+                localStorage.removeItem('CURRENT_CONVERSATION');
+                localStorage.removeItem(`CONVERSATION::${widget.data.id}`);
+                // Optional: clear lock after short delay
+                setTimeout(() => {
+                    localStorage.removeItem(exitLockKey);
+                }, 100);
+            }
+            catch (error) {
+                console.error('Failed to parse localStorage data:', error);
+            }
+        }
+    }, []);
+    // useEffect(() => {
+    //     console.log('Exit triggered')
+    //     if (type === 'received' && shouldTriggerExit(message)) {
+    //         const exitLockKey = `CONVERSATION_EXIT_LOCK::${widget.data.id}`
+    //         // Prevent multiple tabs from running exit logic
+    //         if (localStorage.getItem(exitLockKey)) {
+    //             console.log('Exit already handled by another tab')
+    //             return
+    //         }
+    //         // Set lock
+    //         localStorage.setItem(exitLockKey, 'true')
+    //         widgetStore.trigger.handleExitChatState({ value: true })
+    //         const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`)
+    //         if (!raw) {
+    //             console.warn('No data found in CONVERSATION key')
+    //             return
+    //         }
+    //         try {
+    //             const currentData = JSON.parse(raw)
+    //             const listRaw = localStorage.getItem(
+    //                 `CONVERSATION_LIST::${widget.data.id}`
+    //             )
+    //             const currentList = listRaw ? JSON.parse(listRaw) : []
+    //             currentList.push(currentData)
+    //             localStorage.setItem(
+    //                 `CONVERSATION_LIST::${widget.data.id}`,
+    //                 JSON.stringify(currentList)
+    //             )
+    //             localStorage.removeItem('CURRENT_CONVERSATION')
+    //             // Optional: clear lock after short delay
+    //             setTimeout(() => {
+    //                 localStorage.removeItem(exitLockKey)
+    //             }, 5000)
+    //         } catch (error) {
+    //             console.error('Failed to parse localStorage data:', error)
+    //         }
+    //     }
+    // }, [type, message, widget.data.id])
+    // useEffect(() => {
+    //     console.log('Exit triggered')
+    //     if (type === 'received' && shouldTriggerExit(message)) {
+    //         widgetStore.trigger.handleExitChatState({ value: true })
+    //         const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`)
+    //         if (!raw) {
+    //             console.warn('No data found in DUMMY key')
+    //             return
+    //         }
+    //         try {
+    //             const currentData = JSON.parse(raw)
+    //             // Step 2: Get existing array from 'DUMMY_LIST'
+    //             const listRaw = localStorage.getItem(
+    //                 `CONVERSATION_LIST::${widget.data.id}`
+    //             )
+    //             const currentList = listRaw ? JSON.parse(listRaw) : []
+    //             // Step 3: Append the current object
+    //             currentList.push(currentData)
+    //             // Step 4: Save back to 'DUMMY_LIST'
+    //             localStorage.setItem(
+    //                 `CONVERSATION_LIST::${widget.data.id}`,
+    //                 JSON.stringify(currentList)
+    //             )
+    //             localStorage.removeItem('CURRENT_CONVERSATION')
+    //             // Step 5: Perform other exit actions
+    //             // widgetFetchStore2.trigger.exitConversation()
+    //             // Optional: Also update widget state
+    //             // widgetStore.send({ type: 'handleExitChatState', value: true })
+    //         } catch (error) {
+    //             console.error('Failed to parse localStorage data:', error)
+    //         }
+    //     }
+    // }, [type, message, widget.data.id])
+    (0, react_1.useEffect)(() => {
+        const handleStorageChange = () => {
+            const raw = window.localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+            if (raw) {
+                try {
+                    const parsed = JSON.parse(raw);
+                    const filtered = parsed.events.filter((event) => event.type === 'sent' || event.type === 'received');
+                    console.log('event listener called (filtered):', filtered);
+                    setMessages(filtered);
+                }
+                catch (err) {
+                    console.error('Failed to parse localStorage on storage event:', err);
+                }
+            }
+        };
+        window.addEventListener('storage', handleStorageChange);
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+        };
+    }, []);
+    console.log('botStatus', botStatus);
+    (0, react_1.useEffect)(() => {
+        const outputType = message?.output?.[0]?.type;
+        console.log('botStatus', outputType);
+        // If it's a status message
+        if (['thinking', 'finalizing_output', 'progress_done'].includes(outputType)) {
+            setBotStatus(outputType); // <-- only latest status
+            return;
+        }
+        // If it's the real bot message (received)
+        if (type === 'received') {
+            setBotStatus(null); // <-- clear status
+        }
+    }, [message, type]);
+    const outputType = message?.output?.[0]?.type;
+    const isBlockedType = [
+        'thinking',
+        'finalizing_output',
+        'progress_done',
+    ].includes(outputType);
+    const isStatus = [
+        'thinking',
+        'finalizing_output',
+        'progress_done',
+    ].includes(outputType);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === 'received' && isStatus ? null : null, type === 'received' && !isBlockedType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ReceivedMessage_1.ReceivedMessage, { message: message, sendFeedback: sendFeedback, sendMessage: sendMessage, time: time }) })) : type !== 'received' ? (
+            // Render user (sent) message
+            (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-end gap-2.5 px-5 py-0 relative self-stretch w-full animate-slide-in-right", children: (0, jsx_runtime_1.jsx)("div", { className: "w-auto max-w-[80%] items-end gap-1 flex flex-col relative", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-end w-fit gap-1 relative", children: (0, jsx_runtime_1.jsx)("div", { className: `flex flex-1 grow text-[${widget?.data?.user_message_text_color}] items-start gap-2.5 px-3.5 py-2.5 relative rounded-lg`, style: {
+                                background: widget?.data?.secondary_color,
+                                color: widget?.data
+                                    ?.user_message_text_color,
+                            }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1px] text-sm", children: (0, jsx_runtime_1.jsx)(pager_md_1.default, { mdText: message.input }) }) }) }) }) })) : null] }));
+};
+exports.Message = Message;

package/out/MessagesT.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });