pager-widget 1.0.3 → 1.0.4

package/out/ReceivedMessage.js

@@ -0,0 +1,211 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReceivedMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = __importDefault(require("react"));
+const ButtonsWrapper_1 = require("./ButtonsWrapper");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const pager_md_1 = __importDefault(require("./markdown/pager_md"));
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const convertTime_1 = require("./utils/convertTime");
+const PagerMarkdown_1 = __importDefault(require("./markdown/PagerMarkdown"));
+const AgentFeedbackButtonWrapper_1 = require("./AgentFeedbackButtonWrapper");
+const ReceivedMessage = ({ message, sendFeedback, sendMessage, time, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [, setTick] = react_1.default.useState(0);
+    react_1.default.useEffect(() => {
+        const interval = setInterval(() => {
+            setTick((tick) => tick + 1);
+        }, 30000);
+        return () => clearInterval(interval);
+    }, []);
+    const formatMessageTime = (timestamp) => {
+        const now = new Date();
+        const messageTime = new Date(timestamp);
+        const diffMs = now - messageTime;
+        const diffMins = Math.floor(diffMs / 60000);
+        if (diffMins < 1) {
+            return 'Just now';
+        }
+        else if (diffMins <= 10) {
+            return diffMins == 1
+                ? `${diffMins} min ago`
+                : `${diffMins} mins ago`;
+        }
+        else {
+            let hours = messageTime.getHours();
+            const minutes = messageTime.getMinutes().toString().padStart(2, '0');
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12 || 12;
+            return `${hours}:${minutes}${ampm}`;
+        }
+    };
+    if (message.output[0].response_type === 'ai_response') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full animate-slide-in-left", children: (0, jsx_runtime_1.jsxs)("div", { className: "items-start gap-1.5 self-stretch w-full flex flex-col relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-[26px] py-0 relative self-stretch w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative w-fit mt-[-1.00px] font-medium text-xs text-[#020618]", children: widget?.data?.name }) }), (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-start gap-1 relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center justify-center w-[22px] h-[22px] bg-[#4b2fff] rounded-full", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiBotStroke, { className: "relative w-3.5 h-3.5 bg-[100%_100%] text-white" }) }), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col bg-zinc-100 items-start gap-2.5 px-3.5 py-2.5 relative rounded-lg max-w-[80%]", children: (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm text-[#020618] w-full", children: (0, jsx_runtime_1.jsx)(PagerMarkdown_1.default, { message: message.output[0].text }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-[86%] items-start gap-1 relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 pl-[26px] pr-0 py-0 relative flex-1 grow", children: (0, jsx_runtime_1.jsx)("div", { className: "relative w-fit mt-[-1.00px] text-xs text-[#45556c]", children: (0, convertTime_1.formatTimeAMPM)(time) }) }), (0, jsx_runtime_1.jsx)(ButtonsWrapper_1.AiFeedbackButtonsWrapper, { event_id: message.event_id, buttons: message.output[0].buttons, sendFeedback: sendFeedback, sendMessage: sendMessage })] })] }) }));
+    }
+    // if(message.output[0].response_type === 'agent_response'){
+    //     return(
+    //         <p>{message.output[0].type}</p>
+    //     )
+    // }
+    else if (message.output[0].response_type === 'live_agent_prompt' &&
+        message.output[0].text) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-start gap-1 relative w-full animate-slide-in-left", children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center justify-center w-[22px] h-[22px] bg-[#4b2fff] rounded-full", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiBotStroke, { className: "relative w-3.5 h-3.5 bg-[100%_100%] text-white" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex flex-col bg-zinc-100 items-start gap-2.5 px-3.5 py-2.5 relative rounded-lg max-w-[80%]", children: [(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: message.output[0].text }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 relative self-stretch w-full", children: message.output[0].buttons.map((button, i) => ((0, jsx_runtime_1.jsx)("button", { className: "flex cursor-pointer items-center justify-center gap-2 px-3.5 py-1.5 relative self-stretch w-full bg-white rounded-lg border border-gray-200 hover:border-[#4b2fff]", onClick: () => sendMessage(button.action.send_rly), children: (0, jsx_runtime_1.jsx)("span", { className: "relative w-fit mt-[-1.00px] font-medium text-sm text-[#314158]", children: button.label }) }, i))) })] })] }));
+    }
+    else if (message.output[0].response_type === 'live_agent_prompt' &&
+        message.output[0].value) {
+        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-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-auto h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-auto 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 gap-2 items-baseline pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[#020618]", children: widget?.data?.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#62748E]", children: (0, convertTime_1.formatTimeAMPM)(time) })] }), (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: message.output[0].value }) })] })] }) }) }));
+    }
+    else if (message.output[0].response_type === 'fallback') {
+        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-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-auto h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-auto 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 gap-2 items-baseline pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[#020618]", children: widget?.data?.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#62748E]", children: (0, convertTime_1.formatTimeAMPM)(time) })] }), (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: message.output[0].value }) })] })] }) }) }));
+    }
+    else if (message.output[0].response_type === 'agent') {
+        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-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-auto h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-auto 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 gap-2 items-baseline pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[#020618]", children: widget?.data?.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#62748E]", children: (0, convertTime_1.formatTimeAMPM)(time) })] }), (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: message.output[0].value }) })] })] }) }) }));
+    }
+    else if (message.output[0].response_type === 'agent_feedback') {
+        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-auto h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-auto 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.jsxs)("div", { className: "flex gap-2 items-baseline pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[#020618]", children: widget?.data?.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#62748E]", children: (0, convertTime_1.formatTimeAMPM)(time) })] }), (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: message.output[0].text }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-start gap-2 relative self-stretch pt-1", children: (0, jsx_runtime_1.jsx)(AgentFeedbackButtonWrapper_1.AgentFeedbackButtonWrapper, { sendMessage: sendMessage, buttons: message.output[0].buttons }) })] })] }) }) })
+        //             <div className="flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full animate-slide-in-left">
+        //             <div className="items-start gap-1.5 self-stretch w-full flex flex-col relative">
+        //                 {/* <div className="flex items-center gap-2.5 px-[26px] py-0 relative self-stretch w-full">
+        //                     <div className="relative w-fit mt-[-1.00px] font-medium text-xs text-[#020618]">
+        //                         {widget?.data?.name}
+        //                     </div>
+        //                 </div> */}
+        //                 {/* <div className="inline-flex items-start gap-1 relative">
+        //                     <div className="inline-flex items-center justify-center w-[22px] h-[22px] bg-[#4b2fff] rounded-full">
+        //                         <PiBotStroke className="relative w-3.5 h-3.5 bg-[100%_100%] text-white" />
+        //                     </div>
+        //                     <div className="inline-flex flex-col bg-zinc-100 items-start gap-2.5 px-3.5 py-2.5 relative rounded-lg max-w-[80%]">
+        //                         <div className="relative mt-[-1.00px] text-sm text-[#020618] w-full">
+        //                             <PagerMd mdText={message.output[0].text} />
+        //                         </div>
+        //                     </div>
+        //                 </div> */}
+        //                          <div className="flex items-center gap-2">
+        //                         <div className="flex items-start gap-[5px]">
+        //                             <div className="flex w-auto h-[24px] items-center justify-center rounded-full">
+        //                                 <img
+        //                                     src={widget?.data?.logo_url}
+        //                                     className="w-[18px] h-[18px] text-white"
+        //                                 />
+        //                             </div>
+        //                         </div>
+        //                     </div>
+        //                        <div className="flex flex-col items-start gap-2 w-full">
+        //                             <div className="flex gap-2 items-baseline pt-0.5">
+        //                                 <div className="text-sm font-medium text-[#020618]">
+        //                                     {widget?.data?.name}
+        //                                 </div>
+        //                             </div>
+        //                             <div className="relative mt-[-1.00px] text-sm text-[#020618] w-full">
+        //                                 <PagerMd
+        //                                     mdText={
+        //                                         message.output[0].text
+        //                                     }
+        //                                 />
+        //                             </div>
+        //                         </div>
+        //                 <div className="flex w-[86%] items-start gap-1 relative">
+        //                     {/* <div className="flex items-center gap-2.5 pl-[26px] pr-0 py-0 relative flex-1 grow">
+        //                         <div className="relative w-fit mt-[-1.00px] text-xs text-[#45556c]">
+        //                             {formatTimeAMPM(time)}
+        //                         </div>
+        //                     </div> */}
+        //                     <AgentFeedbackButtonWrapper sendMessage = {sendMessage} buttons={message.output[0].buttons}/>
+        // {/*
+        //                     <AiFeedbackButtonsWrapper
+        //                         event_id={message.event_id}
+        //                         buttons={message.output[0].buttons}
+        //                         sendFeedback={sendFeedback}
+        //                         sendMessage={sendMessage}
+        //                     /> */}
+        //                 </div>
+        //             </div>
+        //         </div>
+        );
+    }
+    else if (message.output[0].type === 'text') {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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-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-auto h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-auto 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 gap-2 items-baseline pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[#020618]", children: widget?.data?.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#62748E]", children: formatMessageTime(time) })] }), (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm text-[#020618] w-full", children: (0, jsx_runtime_1.jsx)(PagerMarkdown_1.default, { message: message.output[0].value.value }) })] })] }) }) }) }));
+    }
+    else {
+        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-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-auto h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-auto 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 gap-2 items-baseline pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[#020618]", children: widget?.data?.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#62748E]", children: formatMessageTime(time) })] }), (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: message.output[0].value }) })] })] }) }) })
+        // <div className="flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full">
+        //     <div className="items-start gap-1.5 self-stretch w-full flex flex-col relative">
+        //         <div className="flex items-center gap-2.5 px-[26px] py-0 relative self-stretch w-full">
+        //             <div className="relative w-fit mt-[-1.00px] font-medium text-xs text-[#020618]">
+        //                 {widget?.data?.name}
+        //             </div>
+        //             <div>{formatTimeAMPM(time)}</div>
+        //         </div>
+        //         <div className="inline-flex items-start gap-1 relative">
+        //             <div className="inline-flex items-center justify-center w-[22px] h-[22px] bg-[#4b2fff] rounded-full">
+        //                 <img src={widget?.data?.logo_url} />
+        //             </div>
+        //             <div className="inline-flex flex-col bg-zinc-100 items-start gap-2.5 px-3.5 py-2.5 relative rounded-lg max-w-[80%]">
+        //                 <div className="relative mt-[-1.00px] text-sm text-[#020618] w-full">
+        //                     <PagerMd mdText={message.output[0].value} />
+        //                 </div>
+        //             </div>
+        //         </div>
+        //     </div>
+        // </div>
+        );
+    }
+    // return(
+    //     <>
+    //     {message.output[0].response_type === "ai_response"? (
+    //         <div className="flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full">
+    //         <div className="items-start gap-1.5 self-stretch w-full flex flex-col relative">
+    //             <div className="flex items-center gap-2.5 px-[26px] py-0 relative self-stretch w-full">
+    //                 <div className="relative w-fit mt-[-1.00px] font-medium text-xs text-[#020618]">
+    //                     Bot
+    //                 </div>
+    //             </div>
+    //             <div className="inline-flex items-start gap-1 relative">
+    //                 <div className="inline-flex items-center justify-center w-[22px] h-[22px] bg-[#4b2fff] rounded-full">
+    //                     <PiBotStroke className="relative w-3.5 h-3.5 bg-[100%_100%] text-white" />
+    //                 </div>
+    //                 <div className="inline-flex flex-col bg-zinc-100 items-start gap-2.5 px-3.5 py-2.5 relative rounded-lg">
+    //                     <div className="relative mt-[-1.00px] text-sm text-[#020618] w-full">
+    //                         <PagerMd mdText={message.output[0].text} />
+    //                     </div>
+    //                 </div>
+    //             </div>
+    //             <div className="flex w-[289px] items-start gap-1 relative">
+    //                     <div className="flex items-center gap-2.5 pl-[26px] pr-0 py-0 relative flex-1 grow">
+    //                         <div className="relative w-fit mt-[-1.00px] text-xs text-[#45556c]">
+    //                             4:09
+    //                         </div>
+    //                     </div>
+    //                    <AiFeedbackButtonsWrapper event_id={message.event_id} buttons={message.output[0].buttons} sendFeedback={sendFeedback} sendMessage={sendMessage}/>
+    //                 </div>
+    //         </div>
+    //     </div>
+    //     ):
+    //     <div className="flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full">
+    //     <div className="items-start gap-1.5 self-stretch w-full flex flex-col relative">
+    //         <div className="flex items-center gap-2.5 px-[26px] py-0 relative self-stretch w-full">
+    //             <div className="relative w-fit mt-[-1.00px] font-medium text-xs text-[#020618]">
+    //                 Bot
+    //             </div>
+    //         </div>
+    //         <div className="inline-flex items-start gap-1 relative">
+    //             <div className="inline-flex items-center justify-center w-[22px] h-[22px] bg-[#4b2fff] rounded-full">
+    //                 <PiBotStroke className="relative w-3.5 h-3.5 bg-[100%_100%] text-white" />
+    //             </div>
+    //             <div className="inline-flex flex-col bg-zinc-100 items-start gap-2.5 px-3.5 py-2.5 relative rounded-lg">
+    //                 <div className="relative mt-[-1.00px] text-sm text-[#020618] w-full">
+    //                     <PagerMd mdText={message.output[0].value} />
+    //                 </div>
+    //             </div>
+    //         </div>
+    //     </div>
+    // </div>}
+    //         </>
+    // )
+};
+exports.ReceivedMessage = ReceivedMessage;

package/out/RecentMessageDetail.js

@@ -0,0 +1,178 @@
+"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.RecentMessageDetail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const BotMain_1 = require("./BotMain");
+const ReceivedMessage_1 = require("./ReceivedMessage");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const useChatHistoryListExist_1 = require("./hooks/useChatHistoryListExist");
+const pager_md_1 = __importDefault(require("./markdown/pager_md"));
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const widgetStore_1 = require("./widgetStore");
+const RecentMessageDetail = ({ isExpanded }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const { status } = widget;
+    const conversation_id = (0, widgetStore_1.useSelectedConversationData)();
+    const { chatDetail } = (0, useChatHistoryListExist_1.useGetSingleConversation)(conversation_id);
+    console.log('chatDetail', chatDetail);
+    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]);
+    const handleBackButtonClick = () => {
+        if (isExpanded) {
+            widgetStore_1.widgetStore.trigger.selectTab({
+                tab: BotMain_1.TabType.RECENT_MESSAGE_LIST,
+            });
+        }
+        else {
+            widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.RECENT_MESSAGE_LIST });
+        }
+    };
+    if (!(status !== 'NOT_STARTED' &&
+        status !== 'WIDGET_LOADING' &&
+        status !== 'INVALID_STATE')) {
+        return null;
+    }
+    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", "data-model-id": "10445:55564", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-5 py-0 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 cursor-pointer" }) }), (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-[30px]", src: widget?.data?.logo_url }), (0, jsx_runtime_1.jsx)("span", { className: "flex flex-col items-start flex-1 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 py-0 w-max justify-end", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative" }), (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 gap-2.5 p-1 cursor-pointer hover:bg-slate-50 rounded-lg overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiMultipleCrossCancelDefaultStroke, { className: "w-[18px] h-[18px]" }) }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-[94%] pb-8 justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-4 relative h-full overflow-y-scroll w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2.5 px-5 py-0 relative self-stretch w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-5 w-full pb-3", children: chatDetail?.map((message) => ((0, jsx_runtime_1.jsx)("div", { children: message.type === 'received' ? ((0, jsx_runtime_1.jsx)(ReceivedMessage_1.ReceivedMessage, { sendFeedback: () => { }, sendMessage: () => { }, message: message.message, time: message.time })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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-[300px] 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: {
+                                                        backgroundColor: widget?.data
+                                                            ?.secondary_color,
+                                                        color: widget?.data
+                                                            ?.user_message_text_color,
+                                                    }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm", children: (0, jsx_runtime_1.jsx)(pager_md_1.default, { mdText: message
+                                                                .message
+                                                                .input }) }) }) }) }) }) })) }, message.type))) })] }) })] }));
+};
+exports.RecentMessageDetail = RecentMessageDetail;

package/out/RecentMessageList.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecentMessageList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const HomePageFooter_1 = require("./HomePageFooter");
+const BotMain_1 = require("./BotMain");
+const RecentMessageListHeader_1 = __importDefault(require("./RecentMessageListHeader"));
+const RecentMessageListCard_1 = __importDefault(require("./RecentMessageListCard"));
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const useChatHistoryListExist_1 = require("./hooks/useChatHistoryListExist");
+const widgetStore_1 = require("./widgetStore");
+const convertTime_1 = require("./utils/convertTime");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const HomePageHeader_1 = require("./HomePageHeader");
+const RecentMessageList = ({ toggleWidget, isExpanded, switchTab, }) => {
+    const [visibleCount, setVisibleCount] = (0, react_1.useState)(0);
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const { recentChatList } = (0, useChatHistoryListExist_1.useChatHistoryListExists)();
+    (0, react_1.useEffect)(() => {
+        if (visibleCount <= (recentChatList || []).length) {
+            const timeout = setTimeout(() => {
+                setVisibleCount((c) => c + 1);
+            }, 120); // adjust delay as needed
+            return () => clearTimeout(timeout);
+        }
+    }, [visibleCount]);
+    console.log(recentChatList, 'Inga recent list');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RecentMessageListHeader_1.default, { isExpanded: isExpanded, toggleWidget: toggleWidget }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col justify-between h-[90%] relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "pt-4 px-5 pb-[70px] overflow-y-scroll h-full flex flex-col items-start gap-3", children: (recentChatList || [])
+                            .map((item, index) => ({
+                            ...item,
+                            originalIndex: index,
+                        }))
+                            .sort((a, b) => {
+                            const aTime = new Date(a.events?.[a.events.length - 1]?.time || 0).getTime();
+                            const bTime = new Date(b.events?.[b.events.length - 1]?.time || 0).getTime();
+                            return bTime - aTime;
+                        })
+                            .map((chat, index) => {
+                            const events = chat.events;
+                            const lastMessage = events[events.length - 1];
+                            return ((0, jsx_runtime_1.jsx)(RecentMessageListCard_1.default, { lastActive: (0, convertTime_1.formatTimeAMPM)(lastMessage?.time), message: lastMessage?.message?.output?.[0]?.value
+                                    ?.value ?? 'No message', brandColor: widget?.data?.brand_color, animate: index < visibleCount, delay: index * 2, onClick: () => {
+                                    localStorage.setItem('SELECTED_INDEX', `${chat.originalIndex}`);
+                                    widgetStore_1.widgetStore.trigger.selectTab({
+                                        tab: BotMain_1.TabType.NEW_RECENT_MESSAGE,
+                                    });
+                                } }, index));
+                        }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full absolute flex justify-center bottom-20", children: (0, jsx_runtime_1.jsxs)("button", { className: `${(0, HomePageHeader_1.isDarkColor)(widget?.data?.brand_color) == 'light' ? 'text-black' : 'text-white'} flex p-2 text-sm z-50 font-medium leading-5 cursor-pointer pl-3.5 pr-3 justify-center items-center gap-1.5 rounded-[10px]`, style: {
+                                backgroundColor: widget?.data?.brand_color
+                                    ? widget?.data?.brand_color
+                                    : '#4B2FFF',
+                                color: (0, HomePageHeader_1.isDarkColor)(widget?.data?.brand_color) ==
+                                    'light'
+                                    ? '#000'
+                                    : '#fff',
+                            }, onClick: () => {
+                                localStorage.setItem('Tab', 'Chat');
+                                widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.CHAT });
+                            }, children: [widget?.data?.send_message_description
+                                    ? widget?.data?.send_message_description
+                                    : 'Send us a message', (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSendPlaneSlantStroke, { className: "w-4 h-4" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full absolute flex justify-center bottom-gradient-recent-list", children: '' }), (0, jsx_runtime_1.jsx)(HomePageFooter_1.HomePageFooter, { switchTab: switchTab, isExpanded: isExpanded })] })] }));
+};
+exports.RecentMessageList = RecentMessageList;
+{
+    /* <>
+<RecentMessageListHeader
+    isExpanded={isExpanded}
+    setIsExpanded={setIsExpanded}
+    setIsHomeScreen={setIsHomeScreen}
+    setSwitchTab={setSwitchTab}
+    toggleWidget={toggleWidget}
+/>
+<div className="flex flex-1 flex-col justify-between h-[90%] relative">
+    <div className="pt-4 px-5 pb-[70px] overflow-y-scroll h-full flex flex-col items-start gap-3">
+        {messages.map((msg, index) => (
+            <RecentMessageListCard
+                key={index}
+                message={msg}
+                lastActive="2 hours ago"
+                onClick={() => {}}
+                animate={index < visibleCount}
+                delay={index * 2}
+            />
+        ))}
+        <div className="w-[calc(100%-40px)] absolute flex justify-center bottom-20">
+            <button
+                className="flex p-2 text-sm z-50 font-medium leading-5 cursor-pointer pl-3.5 pr-3 justify-center items-center gap-1.5 rounded-[10px] text-white bg-[#4B2FFF] hover:bg-[#3f25e8]"
+                onClick={() => {
+                    localStorage.setItem('Tab', 'Chat')
+                    setSwitchTab(TabType.CHAT)
+                }}
+            >
+                Send us message{' '}
+                <PiSendPlaneSlantStroke className="w-4 h-4" />
+            </button>
+        </div>
+        <div className="w-full absolute flex justify-center bottom-gradient-recent-list">
+            {''}
+        </div>
+    </div>
+    <HomePageFooter
+        switchTab={switchTab}
+        setIsHomeScreen={setIsHomeScreen}
+        setSwitchTab={setSwitchTab}
+    />
+</div>
+</> */
+}

package/out/RecentMessageListCard.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const RecentMessageListCard = ({ message, lastActive, onClick, animate, delay = 0, brandColor, }) => {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex py-3 pl-5 !pr-4 items-center gap-2.5 rounded-xl w-full justify-between cursor-pointer text-slate-950 hover:text-[#4B2FFF] transition-all duration-800 ease-in-out
+                ${animate ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-1'}
+            `, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
+            willChange: 'transform, opacity',
+            transitionDelay: `${delay}ms`,
+            border: `1px solid ${isHovered ? brandColor : '#e4e4e7'}`,
+        }, onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1 w-[93%]", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-950 text-sm font-normal leading-5 overflow-hidden text-ellipsis whitespace-nowrap w-full", children: message }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-600 text-xs font-normal leading-[18px] overflow-hidden text-ellipsis whitespace-nowrap w-full", children: lastActive ? lastActive : '-' })] }), (0, jsx_runtime_1.jsx)("span", { className: `w-3 h-5 transition-all duration-800 ease-in-out ${animate ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-1'}`, style: {
+                    color: isHovered ? brandColor : '#e4e4e7',
+                    willChange: 'transform, opacity',
+                    transitionDelay: `${delay}ms`,
+                }, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronBigRightStroke, { className: "w-[18px] h-[18px]" }) })] }));
+};
+exports.default = RecentMessageListCard;