pager-widget 1.0.3 → 1.0.4

package/out/NewRecentMessagePage.js

@@ -0,0 +1,525 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewRecentMessagePage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ReceivedMessage_1 = require("./ReceivedMessage");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+// import { useChatHistoryExists } from './hooks/useChatHistoryExists'
+const pager_md_1 = __importDefault(require("./markdown/pager_md"));
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const widgetStore_1 = require("./widgetStore");
+const useCurrentConversationExists_1 = require("./hooks/useCurrentConversationExists");
+// type MessageType = {
+//     type: string
+//     time: Date
+//     message: {
+//         event_id: string
+//         input?: string
+//         output: any[]
+//         context: Record<string, any>
+//         system: Record<string, any>
+//     }
+// }
+const NewRecentMessagePage = ({ toggleWidget, isExpanded, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    // const { recentChat } = useChatHistoryExists()
+    // const [isSubmittedFormOpen, setIsSubmittedFormOpen] =
+    //     useState<boolean>(true)
+    // const chatValues = recentChat ?? {}
+    // const widgetId = widget?.data?.id
+    // const messageResponse: MessageType[] = chatValues?.[widgetId] ?? []
+    const { recentConversation } = (0, useCurrentConversationExists_1.useSelectedConversation)();
+    const messageResponse = recentConversation != null
+        ? recentConversation.events.filter((e) => e.type === 'received' || e.type === 'sent')
+        : [];
+    const expandRef = react_1.default.useRef(null);
+    const [expandPopupOpen, setExpandPopupOpen] = react_1.default.useState(false);
+    const [showExpandPopUp, setShowExpandPopUp] = react_1.default.useState(false);
+    const expandMenuItems = [
+        {
+            id: 1,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiPhoneStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
+            label: 'Default mode',
+            selected: isExpanded === widgetStore_1.WidgetExpandType.DEFAULT,
+            onClick: () => {
+                widgetStore_1.widgetStore.trigger.expandWidget({
+                    expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
+                });
+                setExpandPopupOpen(false);
+            },
+        },
+        {
+            id: 2,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiTabletStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
+            label: 'Expanded mode',
+            selected: isExpanded === widgetStore_1.WidgetExpandType.EXPANDED,
+            onClick: () => {
+                widgetStore_1.widgetStore.trigger.expandWidget({
+                    expanded_size: widgetStore_1.WidgetExpandType.EXPANDED,
+                });
+                setExpandPopupOpen(false);
+            },
+        },
+        {
+            id: 3,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSpatialCurvedScreenStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
+            label: 'Full screen mode',
+            selected: isExpanded === widgetStore_1.WidgetExpandType.FULLSCREEN,
+            onClick: () => {
+                widgetStore_1.widgetStore.trigger.expandWidget({
+                    expanded_size: widgetStore_1.WidgetExpandType.FULLSCREEN,
+                });
+                setExpandPopupOpen(false);
+            },
+        },
+    ];
+    const selectedExpandItem = expandMenuItems.find((item) => {
+        return item.selected ? item.icon : null;
+    });
+    (0, react_1.useEffect)(() => {
+        function handleClick(event) {
+            if (expandRef.current &&
+                !expandRef.current.contains(event.target)) {
+                setExpandPopupOpen(false);
+            }
+        }
+        if (expandPopupOpen) {
+            document.addEventListener('mousedown', handleClick);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [expandPopupOpen]);
+    react_1.default.useEffect(() => {
+        if (expandPopupOpen) {
+            setShowExpandPopUp(true);
+        }
+        else if (showExpandPopUp) {
+            const timeout = setTimeout(() => setShowExpandPopUp(false), 140);
+            return () => clearTimeout(timeout);
+        }
+    }, [expandPopupOpen, showExpandPopUp]);
+    if (!Array.isArray(messageResponse) || messageResponse.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "p-4 text-center text-gray-500", children: "No recent messages found." }));
+    }
+    const handleBackButtonClick = () => {
+        if (isExpanded) {
+            widgetStore_1.widgetStore.trigger.expandWidget({
+                expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
+            });
+            setTimeout(() => {
+                widgetStore_1.widgetStore.trigger.selectTab({
+                    tab: widgetStore_1.TabType.RECENT_MESSAGE_LIST,
+                });
+            }, 300);
+        }
+        else {
+            widgetStore_1.widgetStore.trigger.selectTab({ tab: widgetStore_1.TabType.RECENT_MESSAGE_LIST });
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const recentConversation1 = {
+        widget_id: '84b9d5a9-5322-4894-9e8d-c051a1f63cec',
+        conversation_id: '12242bc4-f2c6-472c-98f9-dc2984b6b1c2',
+        user_state: 'ALLOW_MESSAGE',
+        events: [
+            {
+                type: 'received',
+                time: '2025-06-24T07:27:48.676Z',
+                message: {
+                    event_id: '885dc00e-01f6-4d87-a9b8-dc1117d29197',
+                    output: [
+                        {
+                            response_type: 'greetings',
+                            type: 'text',
+                            value: {
+                                type: 'text',
+                                value: 'Hey there! Welcome to zomato support. How can I help you today? If you need to create a ticket, just let me know!',
+                            },
+                        },
+                    ],
+                    context: {
+                        SYS_FirstName: 'Dhanush',
+                        SYS_LastName: 'B',
+                        SYS_Location: 'india',
+                        SYS_Timezone: 'Asia/Kolkata',
+                        SYS_UserEmail: 'dhanush.b@workativ.com',
+                    },
+                    system: {
+                        conversationId: '12242bc4-f2c6-472c-98f9-dc2984b6b1c2',
+                        platform: 'widget',
+                        user: {
+                            email: 'dhanush.b@workativ.com',
+                            firstName: 'Dhanush',
+                            lastName: 'B',
+                        },
+                    },
+                },
+            },
+            {
+                type: 'CONSENT_NEEDED',
+                consent: {
+                    consent_display_data: {
+                        type: 'text',
+                        value: 'allow consent',
+                    },
+                },
+            },
+            {
+                type: 'CONSENT_GIVEN',
+                submissionPayload: {
+                    form_id: '68356e1e66c3922d39b8758a',
+                    conversation_id: '5b105213-1ab7-4faa-b828-902965d0e5d1',
+                    lead_data: {
+                        name: 'new_form',
+                        fields: [
+                            {
+                                field_id: 'SYS_browser',
+                                value: 'Chrome',
+                            },
+                            {
+                                field_id: 'SYS_browser_os',
+                                value: 'Mac OS',
+                            },
+                            {
+                                field_id: 'SYS_browser_language',
+                                value: 'en-IN',
+                            },
+                            {
+                                field_id: 'SYS_screen_resolution',
+                                value: '1680 x 1050',
+                            },
+                            {
+                                field_id: 'SYS_time_zone',
+                                value: 'Asia/Calcutta',
+                            },
+                            {
+                                field_id: 'SYS_device_type',
+                                value: 'browser',
+                            },
+                            {
+                                field_id: 'SYS_From_Page',
+                                value: 'http://localhost:1234',
+                            },
+                        ],
+                        ws: 'skitter',
+                        user_consent: true,
+                    },
+                    type: 'browser',
+                },
+            },
+            {
+                type: 'FORM_INPUT_NEEDED',
+                form_data: {
+                    _id: '68356e1f3e9aab349699a0ee',
+                    name: 'new_form',
+                    form_id: '68356e1e66c3922d39b8758a',
+                    form_template: [
+                        {
+                            id: '678cd944f15097eed2f83da3',
+                            name: 'Phone Number',
+                            field_id: 'SYS_phone_number',
+                            description: '',
+                            dispaly_name: 'phonenumber',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca3',
+                            field_type: 'phone_number',
+                        },
+                        {
+                            id: '678cd91cf15097eed2f83d9b',
+                            name: 'First Name',
+                            field_id: 'SYS_first_name',
+                            description: '',
+                            dispaly_name: 'first name',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca4',
+                            field_type: 'short_text',
+                        },
+                        {
+                            id: '678cd944f15097eed2f83da2',
+                            name: 'Country',
+                            field_id: 'SYS_country',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca5',
+                            field_type: 'country',
+                        },
+                        {
+                            id: '678cd91cf15097eed2f83d9d',
+                            name: 'Email',
+                            field_id: 'SYS_email',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca6',
+                            field_type: 'email',
+                        },
+                        {
+                            id: '678cd91cf15097eed2f83d9c',
+                            name: 'Last Name',
+                            field_id: 'SYS_last_name',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca7',
+                            field_type: 'short_text',
+                        },
+                        {
+                            id: '6848460c2ed03cfcece7ab19',
+                            name: 'Address',
+                            field_id: 'iBv4WZbJrqe18DwrxkbvUF',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca8',
+                            field_type: 'long_text',
+                        },
+                    ],
+                    ws: 'skitter',
+                    __v: 8,
+                },
+            },
+            {
+                type: 'FORM_SUBMITTED',
+                form_data: {
+                    _id: '68356e1f3e9aab349699a0ee',
+                    name: 'new_form',
+                    form_id: '68356e1e66c3922d39b8758a',
+                    form_template: [
+                        {
+                            id: '678cd944f15097eed2f83da3',
+                            name: 'Phone Number',
+                            field_id: 'SYS_phone_number',
+                            description: '',
+                            dispaly_name: 'phonenumber',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca3',
+                            field_type: 'phone_number',
+                        },
+                        {
+                            id: '678cd91cf15097eed2f83d9b',
+                            name: 'First Name',
+                            field_id: 'SYS_first_name',
+                            description: '',
+                            dispaly_name: 'first name',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca4',
+                            field_type: 'short_text',
+                        },
+                        {
+                            id: '678cd944f15097eed2f83da2',
+                            name: 'Country',
+                            field_id: 'SYS_country',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca5',
+                            field_type: 'country',
+                        },
+                        {
+                            id: '678cd91cf15097eed2f83d9d',
+                            name: 'Email',
+                            field_id: 'SYS_email',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca6',
+                            field_type: 'email',
+                        },
+                        {
+                            id: '678cd91cf15097eed2f83d9c',
+                            name: 'Last Name',
+                            field_id: 'SYS_last_name',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca7',
+                            field_type: 'short_text',
+                        },
+                        {
+                            id: '6848460c2ed03cfcece7ab19',
+                            name: 'Address',
+                            field_id: 'iBv4WZbJrqe18DwrxkbvUF',
+                            description: '',
+                            dispaly_name: '',
+                            placeholder: '',
+                            is_mandatory: true,
+                            _id: '684aed462ed03cfcece80ca8',
+                            field_type: 'long_text',
+                        },
+                    ],
+                    ws: 'skitter',
+                    __v: 8,
+                },
+                submissionPayload: {
+                    form_id: '68356e1e66c3922d39b8758a',
+                    conversation_id: '12242bc4-f2c6-472c-98f9-dc2984b6b1c2',
+                    lead_data: {
+                        name: 'new_form',
+                        fields: [
+                            {
+                                field_id: 'SYS_phone_number',
+                                value: '4567898769',
+                            },
+                            {
+                                field_id: 'SYS_first_name',
+                                value: 'Dhanush',
+                            },
+                            {
+                                field_id: 'SYS_country',
+                                value: 'Türkiye',
+                            },
+                            {
+                                field_id: 'SYS_email',
+                                value: 'dhanush.b@workativ.com',
+                            },
+                            {
+                                field_id: 'SYS_last_name',
+                                value: 'Hi',
+                            },
+                            {
+                                field_id: 'iBv4WZbJrqe18DwrxkbvUF',
+                                value: 'No.6\nDuraiswamy street visalatchi nagar ekkattuthangal',
+                            },
+                        ],
+                        ws: 'skitter',
+                        user_consent: true,
+                    },
+                    type: 'lead',
+                },
+            },
+            {
+                type: 'ALLOW_MESSAGE',
+            },
+        ],
+    };
+    const SubmittedEvent = recentConversation.events.find((e) => e.type === 'FORM_SUBMITTED');
+    // const submittedFields =
+    //     recentConversation.events.find((e) => e.type === 'FORM_SUBMITTED')
+    //         ?.submissionPayload?.lead_data?.fields ?? []
+    // console.log(
+    //     'found form submitted value',
+    //     recentConversation.events.find((e) => e.type === 'FORM_SUBMITTED')
+    //         ?.submissionPayload.lead_data.fields
+    // )
+    // const submittedValueMap = submittedFields.reduce(
+    //     (acc, field) => {
+    //         acc[field.field_id] = field.value
+    //         return acc
+    //     },
+    //     {} as Record<string, string>
+    // )
+    // console.log(formTemplate, 'formTemplate')
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex items-center px-0 py-[15px] border-b border-zinc-300 w-full justify-between h-[60px] bg-white rounded-t-[22px] cursor-pointer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-5 w-full", children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center justify-center gap-2.5 p-0 cursor-pointer hover:bg-slate-100 rounded-xl overflow-hidden", onClick: handleBackButtonClick, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronLeftStroke, { className: "w-6 h-6" }) }), (0, jsx_runtime_1.jsx)("img", { className: "w-[30px] h-[30px]", src: widget?.data?.logo_url, alt: "Bot logo" }), (0, jsx_runtime_1.jsx)("span", { className: "flex flex-col items-start grow", children: (0, jsx_runtime_1.jsx)("span", { className: "flex flex-col items-start gap-[18px] flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("h1", { className: "w-fit mt-[-1.00px] font-text-md-medium font-[number:var(--text-md-medium-font-weight)] text-[#020618] text-[length:var(--text-md-medium-font-size)] tracking-[var(--text-md-medium-letter-spacing)] leading-[var(--text-md-medium-line-height)] whitespace-nowrap [font-style:var(--text-md-medium-font-style)]", children: widget?.data?.name }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: expandRef, children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-1 cursor-pointer hover:bg-slate-100 rounded-lg overflow-hidden", onClick: () => setExpandPopupOpen(!expandPopupOpen), children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: selectedExpandItem
+                                                ? selectedExpandItem.icon
+                                                : null }) }), showExpandPopUp && ((0, jsx_runtime_1.jsxs)("nav", { className: `flex flex-col w-[148px] h-max absolute items-start gap-1 p-1 right-0 bg-white rounded-lg overflow-hidden border border-solid border-slate-200 z-50`, style: {
+                                            animation: expandPopupOpen
+                                                ? 'popin 0.18s cubic-bezier(0.4,0,0.2,1)'
+                                                : 'popout 0.14s cubic-bezier(0.4,0,0.2,1)',
+                                        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                                    @keyframes popin {
+                                        0% {
+                                            opacity: 0;
+                                            transform: scale(0.95) translateY(-8px);
+                                        }
+                                        100% {
+                                            opacity: 1;
+                                            transform: scale(1) translateY(0);
+                                        }
+                                    }
+                                    @keyframes popout {
+                                        0% {
+                                            opacity: 1;
+                                            transform: scale(1) translateY(0);
+                                        }
+                                        100% {
+                                            opacity: 0;
+                                            transform: scale(0.95) translateY(-8px);
+                                        }
+                                    }
+                                ` }), expandMenuItems.map((item) => ((0, jsx_runtime_1.jsxs)("button", { className: `flex items-center gap-1.5 pl-2 pr-3 py-1.5 relative self-stretch w-full cursor-pointer 
+                                        hover:bg-slate-100 rounded-md overflow-hidden`, style: {
+                                                    backgroundColor: item.selected
+                                                        ? '#f0f0f0'
+                                                        : '',
+                                                }, onClick: item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5 flex-[0_0_auto]", children: item.icon }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start justify-center gap-2 flex-1 self-stretch grow", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "w-fit whitespace-nowrap text-xs font-medium text-[#020618]", children: item.label }) }) }) })] }, item.id)))] }))] }), (0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center p-1 hover:bg-slate-50 rounded-lg cursor-pointer", onClick: toggleWidget, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiMultipleCrossCancelDefaultStroke, { className: "w-[18px] h-[18px]" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-[calc(100%-80px)] justify-between w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4 h-full overflow-y-scroll w-full -mt-[12px] mb-[6px]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-5 w-full", children: [SubmittedEvent != undefined ? ((0, jsx_runtime_1.jsx)(RenderForm, { event: SubmittedEvent })) : null, messageResponse.map((message, index) => ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [console.log(message.type, 'message type'), message.type === 'received' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [console.log('message from new recentchat', message), (0, jsx_runtime_1.jsx)(ReceivedMessage_1.ReceivedMessage, { message: message.message, time: message.time, sendFeedback: function () {
+                                                            throw new Error('Function not implemented.');
+                                                        }, sendMessage: function () {
+                                                            throw new Error('Function not implemented.');
+                                                        } })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-end px-5 animate-slide-in-right", children: (0, jsx_runtime_1.jsx)("div", { className: "w-[300px] flex flex-col items-end gap-1", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 text-sm px-3.5 py-2.5 rounded-lg", style: {
+                                                            backgroundColor: widget?.data
+                                                                ?.secondary_color,
+                                                            color: widget?.data
+                                                                ?.user_message_text_color,
+                                                        }, children: (0, jsx_runtime_1.jsx)(pager_md_1.default, { mdText: message.message
+                                                                .input ?? '' }) }) }) }))] }) }, index)))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 bg-white", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center justify-center gap-8 w-full overflow-hidden border border-zinc-100", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-4 py-2 w-full bg-white", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-1.5 flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center w-full gap-1.5 pb-0.5", children: (0, jsx_runtime_1.jsx)("span", { className: "font-text-xs-regular text-[#1d293d] text-xs tracking-[0px] leading-[18px] whitespace-nowrap", children: "Your conversation has ended" }) }) }) }) }) }) })] })] }));
+};
+exports.NewRecentMessagePage = NewRecentMessagePage;
+const RenderForm = ({ event }) => {
+    const submittedFields = event.submissionPayload?.lead_data?.fields ?? [];
+    // console.log(
+    //     'found form submitted value',
+    //     recentConversation.events.find((e) => e.type === 'FORM_SUBMITTED')
+    //         ?.submissionPayload.lead_data.fields
+    // )
+    const submittedValueMap = submittedFields.reduce((acc, field) => {
+        acc[field.field_id] = field.value;
+        return acc;
+    }, {});
+    const formTemplate = event?.form_data?.form_template;
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isSubmittedFormOpen, setIsSubmittedFormOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-start w-full rounded-lg overflow-hidden px-5", 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.jsx)("div", { className: "flex flex-col items-start gap-2 w-[90%]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-col flex gap-2 items-baseline pt-0.5 w-full", 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.jsxs)("div", { className: `${isSubmittedFormOpen ? 'py-2.5 px-3.5' : '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: `${isSubmittedFormOpen ? 'py-0.5 pr-1' : 'py-0.5 pr-1'} 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, { className: "" })) })] }), isSubmittedFormOpen && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-4", children: formTemplate &&
+                                            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.dispaly_name
+                                                            : input.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-950 text-sm font-regular leading-5", children: submittedValueMap?.[input.field_id] })] }, index))) }))] }) })] }) })] }));
+};

package/out/NewRecentMessageTab.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewRecentMessageTab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCurrentConversationExists_1 = require("./hooks/useCurrentConversationExists");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const widgetStore_1 = require("./widgetStore");
+const NewRecentMessageTab = () => {
+    const { hasRecentConversation, recentConversation } = (0, useCurrentConversationExists_1.useCurrentConversationExist)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasRecentConversation && ((0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center gap-2.5 pl-5 pr-4 py-3 rounded-xl border bg-white cursor-pointer", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => widgetStore_1.widgetStore.trigger.selectTab({
+                tab: widgetStore_1.TabType.CHAT,
+            }), style: {
+                borderColor: isHovered
+                    ? widget?.data?.brand_color
+                    : '#cad5e2',
+            }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex-col items-start gap-1 flex-1 grow flex w-[91%]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-col items-start gap-1 self-stretch w-full flex", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-col items-start gap-[18px] self-stretch w-full flex", children: (0, jsx_runtime_1.jsx)("h3", { className: "w-fit mt-[-1.00px] text-sm font-semibold text-[#020618]", children: "Recent messagess" }) }), (0, jsx_runtime_1.jsx)("div", { title: "Hello! Thanks for contacting us! all of\n                             our team", className: "flex-col items-start gap-[18px] self-stretch w-full flex", children: (0, jsx_runtime_1.jsx)("p", { className: "self-stretch mt-[-1.00px] text-sm text-[#020618] leading-5 whitespace-nowrap overflow-hidden text-ellipsis w-full", children: recentConversation &&
+                                    recentConversation.events[0].message
+                                        ?.output[0].value.value }) })] }) }) })) }));
+};
+exports.NewRecentMessageTab = NewRecentMessageTab;