pager-widget 1.0.11-alpha.9 → 1.0.13

package/out/markdown/pager_md.js

@@ -0,0 +1,152 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseUrlAndString = parseUrlAndString;
+exports.evalNormalOrJoinText = evalNormalOrJoinText;
+exports.default = PagerMd;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = __importDefault(require("react"));
+const URL_REGEX = /https?:\/\/(?:www\.)?[a-zA-Z0-9@:%._+~#=-]{2,256}\.[a-z]{2,6}\b[-a-zA-Z0-9@:%_+.~#?&/=]*/;
+// const URL_REGEX =
+//     /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=-]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/
+function parseUrlAndString(str) {
+    const results = [];
+    let remaining = str;
+    while (remaining) {
+        const match = remaining.match(URL_REGEX);
+        if (!match) {
+            results.push({ type: 'normal_str', value: remaining });
+            break;
+        }
+        if (match.index !== 0) {
+            results.push({
+                type: 'normal_str',
+                value: remaining.slice(0, match.index),
+            });
+            results.push({ type: 'url', value: match[0] });
+            remaining = remaining.slice(match.index + match[0].length);
+            continue;
+        }
+        results.push({ type: 'url', value: match[0] });
+        remaining = remaining.slice(match[0].length);
+    }
+    return results;
+}
+// const style = {
+//     fontFamily: "'Inter', 'Open Sans'",
+// }
+const DisplayWithSpace = ({ text }) => ((0, jsx_runtime_1.jsx)("span", { style: {
+        whiteSpace: 'pre-wrap',
+        fontSize: 'clamp(0.875rem, calc(0.625rem + 0.3125vw))',
+        // fontStyle: 'normal',
+        lineHeight: '20px',
+        // color: '#020618',
+        // ...style,
+    }, children: text }));
+const DisplayLineBreaks = ({ text }) => {
+    const texts = text.split('\n');
+    const lastOne = texts[texts.length - 1];
+    const exceptLastOne = texts.slice(0, -1);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [exceptLastOne.map((t, i) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DisplayWithSpace, { text: t }), (0, jsx_runtime_1.jsx)("br", {})] }, i))), (0, jsx_runtime_1.jsx)(DisplayWithSpace, { text: lastOne })] }));
+};
+const DisplayURL = ({ text }) => {
+    const parsed = parseUrlAndString(text);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: parsed.map(({ type, value }, i) => type === 'url' ? ((0, jsx_runtime_1.jsx)("a", { href: value, target: "_blank", rel: "noreferrer", children: value }, i)) : ((0, jsx_runtime_1.jsx)(DisplayLineBreaks, { text: value }, i))) }));
+};
+function NormalTextMd({ mdText }) {
+    if (typeof mdText === 'string')
+        return (0, jsx_runtime_1.jsx)(DisplayURL, { text: mdText });
+    if (typeof mdText.value === 'string')
+        return (0, jsx_runtime_1.jsx)(DisplayURL, { text: mdText.value });
+    return (0, jsx_runtime_1.jsx)(PagerMd, { mdText: mdText.value });
+}
+function HyperLinkMd({ mdText }) {
+    if (typeof mdText !== 'object' || !mdText.href)
+        return null;
+    const value = mdText.link?.value ?? mdText.value ?? '';
+    return ((0, jsx_runtime_1.jsx)("a", { href: mdText.href, target: "_blank", rel: "noreferrer", className: "text-sm opacity-90 hover:opacity-100 underline cursor-pointer text-[#4B2FFF] hover:text-[#3517f7]", children: (0, jsx_runtime_1.jsx)(PagerMd, { mdText: value }) }));
+}
+// const normalWrapper =
+//     (TagName: keyof JSX.IntrinsicElements) =>
+//     ({ mdText }: { mdText: { value: MarkdownText } }) => (
+//         <TagName>
+//             <PagerMd mdText={mdText.value} />
+//         </TagName>
+//     )
+const mdElementStyles = (tagName) => {
+    switch (tagName) {
+        case 'strong':
+            return '-mt-[1px] text-sm font-semibold';
+        case 'em':
+            return '-mt-[1px] text-sm italic';
+        case 'u':
+            return '-mt-[1px] text-sm underline';
+        case 's':
+            return '-mt-[1px] text-sm line-through';
+        default:
+            return '';
+    }
+};
+const normalWrapper = (Tag) => {
+    const Wrapped = ({ mdText }) => ((0, jsx_runtime_1.jsx)(Tag, { className: mdElementStyles(Tag), children: (0, jsx_runtime_1.jsx)(PagerMd, { mdText: mdText.value }) }));
+    Wrapped.displayName = `normalWrapper(${Tag})`;
+    return Wrapped; // <-- a proper React component now
+};
+const listWrapper = (Tag) => {
+    const Wrapped = ({ mdText }) => ((0, jsx_runtime_1.jsx)(Tag, { children: mdText.value.map((item, i) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(PagerMd, { mdText: item }) }, i))) }));
+    Wrapped.displayName = `listWrapper(${Tag})`;
+    return Wrapped; // <- React component with a name
+};
+// const listWrapper =
+//     (TagName: keyof JSX.IntrinsicElements) =>
+//     ({ mdText }: { mdText: { value: MarkdownText[] } }) => (
+//         <TagName>
+//             {mdText.value.map((item, index) => (
+//                 <li key={index}>
+//                     <PagerMd mdText={item} />
+//                 </li>
+//             ))}
+//         </TagName>
+//     )
+function JoinMd({ mdText }) {
+    const normalText = joinAsNormalText(mdText.lhs, mdText.rhs);
+    return normalText ? ((0, jsx_runtime_1.jsx)(NormalTextMd, { mdText: normalText })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PagerMd, { mdText: mdText.lhs }), (0, jsx_runtime_1.jsx)(PagerMd, { mdText: mdText.rhs })] }));
+}
+function joinAsNormalText(lhs, rhs) {
+    const left = evalNormalOrJoinText(lhs);
+    const right = evalNormalOrJoinText(rhs);
+    return left !== null && right !== null ? `${left}${right}` : null;
+}
+function evalNormalOrJoinText(mdText) {
+    if (typeof mdText === 'string')
+        return mdText;
+    if (mdText.markdown_text === 'normal_text')
+        return mdText.normal_text ?? null;
+    if (mdText.markdown_text === 'join') {
+        const lhs = mdText.join?.lhs ?? null;
+        const rhs = mdText.join?.rhs ?? null;
+        return lhs && rhs ? joinAsNormalText(lhs, rhs) : null;
+    }
+    return null;
+}
+const mdTypeRenderers = {
+    text: NormalTextMd,
+    bold: normalWrapper('strong'),
+    italic: normalWrapper('em'),
+    underline: normalWrapper('u'),
+    hyperlink: HyperLinkMd,
+    order_list: listWrapper('ol'),
+    unorder_list: listWrapper('ul'),
+    new_line: () => (0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-full" }),
+    join: JoinMd,
+};
+function PagerMd({ mdText }) {
+    console.log(mdText, 'here md text');
+    if (typeof mdText === 'string')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mdText });
+    const Renderer = mdTypeRenderers[mdText?.type];
+    return Renderer ? (0, jsx_runtime_1.jsx)(Renderer, { mdText: mdText }) : null;
+}

package/out/onscreenNotificationPopup.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnScreenNotificationPopup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const OnScreenNotificationPopup = () => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const { status } = widget;
+    const [closeNotification, setCloseNotification] = (0, react_1.useState)(false);
+    if (!(status !== 'NOT_STARTED' &&
+        status !== 'WIDGET_LOADING' &&
+        status !== 'INVALID_STATE')) {
+        return null;
+    }
+    const handleCloseNotification = () => {
+        setCloseNotification(true);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: widget?.data?.onscreen_notification &&
+            closeNotification == false && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2 pl-3 pr-2.5 py-2.5 relative self-stretch w-full rounded-lg border border-solid border-zinc-200 bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5 relative pt-px", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiInformationCircleStroke, { className: "w-3.5 h-3.5 text-slate-600" }) }), (0, jsx_runtime_1.jsx)("p", { className: "relative flex-1 mt-[-1.00px] font-regular text-[#1d293d] text-xs tracking-[0] leading-[18px]", children: widget?.data?.onscreen_notification }), (0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-0 h-[18px] w-[18px] justify-center cursor-pointer hover:bg-slate-100 rounded-xl overflow-hidden", onClick: handleCloseNotification, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiMultipleCrossCancelDefaultStroke, { className: "h-4 w-4 cursor-pointer text-slate-600" }) })] }) })) }));
+};
+exports.OnScreenNotificationPopup = OnScreenNotificationPopup;

package/out/socket.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSocket = void 0;
+const socket_io_client_1 = __importDefault(require("socket.io-client"));
+const createSocket = (url, path) => {
+    return (0, socket_io_client_1.default)(url, { path });
+};
+exports.createSocket = createSocket;

package/out/utils/checkConversationExit.js

@@ -0,0 +1,24 @@
+"use strict";
+// import { useState } from "react"
+// import { LocalEventStore, ExitEvent } from "../widgetStateHandler"
+Object.defineProperty(exports, "__esModule", { value: true });
+// export const checkIsConversationExited = () => {
+//     const [isExit, setIsExit] = useState<boolean>(false)
+//     try{
+//         const raw = localStorage.getItem('DUMMY')
+//         if(raw){
+//             const parsed:LocalEventStore = JSON.parse(raw)
+//             const exitEvent = parsed.events.find(
+//                 (e): e is ExitEvent => e.type === 'SESSION_EXITED'
+//             )
+//             if(exitEvent){
+//                 setIsExit(true)
+//             }
+//             else{
+//                 setIsExit(false)
+//             }
+//         }
+//     }
+//     catch(error){
+//     }
+// }

package/out/utils/convertTime.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimeAMPM = void 0;
+const formatTimeAMPM = (dateInString) => {
+    console.log(dateInString, 'tatatat');
+    if (!dateInString) {
+        console.warn('No date string provided to formatTimeAMPM');
+        return '';
+    }
+    const date = new Date(dateInString);
+    if (isNaN(date.getTime())) {
+        console.warn(`Invalid date string: ${dateInString}`);
+        return '';
+    }
+    // Format time
+    let hours = date.getHours();
+    const minutes = date.getMinutes();
+    const ampm = hours >= 12 ? 'pm' : 'am';
+    hours = hours % 12 || 12;
+    const minutesInString = minutes < 10 ? '0' + minutes : minutes.toString();
+    const timeString = `${hours}:${minutesInString} ${ampm}`;
+    // Format date
+    const day = date.getDate();
+    const monthNames = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ];
+    const month = monthNames[date.getMonth()];
+    const year = date.getFullYear();
+    const dateString = `${day} ${month} ${year}`;
+    return `${timeString} | ${dateString}`;
+};
+exports.formatTimeAMPM = formatTimeAMPM;

package/out/utils/sendInitialMessage.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendInitialMessage = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const uuid_1 = require("uuid");
+const sendInitialMessage = ({ socket, widget_id, context, msg, setMessages, }) => {
+    // const{}=useM
+    const { SYS_FirstName, SYS_LastName, SYS_UserEmail } = context;
+    console.log(context, 'contextcontext');
+    const conversationId = (0, uuid_1.v4)();
+    const systemData = msg
+        ? {
+            conversationId: conversationId,
+            user: SYS_UserEmail
+                ? {
+                    user_id: SYS_UserEmail || (0, uuid_1.v4)(),
+                    firstName: SYS_FirstName,
+                    lastName: SYS_LastName,
+                    email: SYS_UserEmail,
+                }
+                : undefined,
+        }
+        : {
+            conversationId: conversationId,
+            user: SYS_UserEmail
+                ? {
+                    user_id: SYS_UserEmail || (0, uuid_1.v4)(),
+                    firstName: SYS_FirstName,
+                    lastName: SYS_LastName,
+                    email: SYS_UserEmail,
+                }
+                : undefined,
+        };
+    const sentMessage = {
+        type: 'sent',
+        message: {
+            input: {
+                type: 'text',
+                value: msg,
+            },
+            system: systemData,
+        },
+        time: new Date(),
+    };
+    console.log(systemData, 'systemData');
+    console.log('conversation id emit to greeet', conversationId);
+    socket.emit('greeting', {
+        widget_id,
+        context: {
+            input: {
+                type: 'text',
+                value: msg ? msg : '',
+            },
+            ...context,
+            system: systemData,
+        },
+    });
+    if (msg !== '') {
+        setMessages([sentMessage]);
+    }
+    const key = `CONVERSATION::${widget_id}`;
+    localStorage.setItem('CURRENT_CONVERSATION', conversationId);
+    const storedConversation = localStorage.getItem(key);
+    if (storedConversation) {
+        console.log('Conversation already exists:', storedConversation);
+    }
+    else {
+        console.log('No conversation found. Creating new one...');
+        // Only add event if message is not empty
+        const events = [];
+        if (msg.trim() !== '') {
+            events.push(sentMessage); // push only valid sent message
+        }
+        localStorage.setItem(key, JSON.stringify({
+            widget_id,
+            conversation_id: conversationId,
+            user_state: 'ALLOW_MESSAGE',
+            events,
+        }));
+    }
+};
+exports.sendInitialMessage = sendInitialMessage;

package/out/widget.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Widget = exports.MyContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ChatWidget_1 = require("./ChatWidget");
+const WidgetToggleButton_1 = require("./WidgetToggleButton");
+const useWidgetToggle_1 = require("./hooks/useWidgetToggle");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+exports.MyContext = (0, react_1.createContext)(null);
+const Widget = (widgetConfig) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const widgetData = (0, widgetConfigStore2_1.widgetHasData)(widget) ? widget.data : null;
+    const [initialUserMessage, setInitialUserMessage] = (0, react_1.useState)(null);
+    if (widgetData?.openby_default === undefined) {
+        return null;
+    }
+    const [chatWindowStatus, toggleChatWindow] = (0, useWidgetToggle_1.useWidgetToggle)(widgetData?.openby_default);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "fixed bottom-0 right-4 flex flex-col items-end space-y-2", children: [(0, jsx_runtime_1.jsx)(exports.MyContext.Provider, { value: { initialUserMessage, setInitialUserMessage }, children: (0, jsx_runtime_1.jsx)(ChatWidget_1.ChatWidget, { widgetToggleState: chatWindowStatus, toggleWidget: toggleChatWindow, widgetConfig: widgetConfig }) }), (0, jsx_runtime_1.jsx)(WidgetToggleButton_1.WidgetToggleButton, { setUserInitialMessage: setInitialUserMessage, widgetToggleState: chatWindowStatus, toggleWidget: toggleChatWindow })] }) }));
+};
+exports.Widget = Widget;

package/out/widgetConfigStore.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetInitializer = exports.useWidgetData = void 0;
+const store_1 = require("@xstate/store");
+const react_1 = require("@xstate/store/react");
+const react_2 = require("react");
+const widgetFetchStore = (0, store_1.createStore)({
+    context: {
+        widget: { status: 'not-started' },
+        // currentMachineState: 'WIDGET_NOT_LOADED' as States,
+    },
+    on: {
+        setWidgetError: (context, event) => {
+            if (context.widget.status === 'loading' ||
+                context.widget.status === 'success') {
+                return {
+                    widget: {
+                        status: 'error',
+                        config: context.widget.config,
+                        error: event.error,
+                    },
+                };
+            }
+            return context;
+        },
+        setWidgetData: (context, event) => {
+            if (context.widget.status === 'loading' ||
+                context.widget.status === 'error') {
+                let consent;
+                const data = event.data;
+                if (data.user_consent === true) {
+                    consent = {
+                        type: 'CONSENT_NEEDED',
+                        consent_display_data: data.consent_data,
+                    };
+                }
+                else {
+                    consent = {
+                        type: 'NO_CONSENT_NEEDED',
+                    };
+                }
+                // data.user_consent === true
+                //     ? (consent = {
+                //           type: 'CONSENT_NEEDED',
+                //           consent_display_data: data.consent_data,
+                //       })
+                //     : (consent = {
+                //           type: 'NO_CONSENT_NEEDED',
+                //       })
+                return {
+                    widget: {
+                        status: 'success',
+                        config: context.widget.config,
+                        data: event.data,
+                        consent,
+                    },
+                };
+            }
+            return context;
+        },
+        setFetchConfig: (_, event, enqueueAction) => {
+            const widgetId = event.widget_id;
+            const endpoint = event.endpoint;
+            enqueueAction.effect(async () => {
+                const result = await fetchWidget(endpoint, widgetId);
+                if (result.status === 'error') {
+                    widgetFetchStore.trigger.setWidgetError({
+                        error: result.error,
+                    });
+                    return;
+                }
+                widgetFetchStore.trigger.setWidgetData({
+                    data: result.data,
+                });
+            });
+            return {
+                widget: {
+                    status: 'loading',
+                    config: event,
+                },
+            };
+        },
+    },
+});
+const useWidgetData = () => (0, react_1.useSelector)(widgetFetchStore, (state) => {
+    if (state.context.widget.status === 'success') {
+        return state.context.widget.data;
+    }
+    return null;
+});
+exports.useWidgetData = useWidgetData;
+const useWidgetInitializer = (config, debug = false) => {
+    (0, react_2.useEffect)(() => {
+        widgetFetchStore.trigger.setFetchConfig({
+            widget_id: config.widget_id,
+            endpoint: config.endpoint,
+        });
+        if (debug) {
+            widgetFetchStore.inspect((inspectionEvent) => {
+                console.log('INSPECTION:: ', inspectionEvent);
+            });
+        }
+    }, []);
+};
+exports.useWidgetInitializer = useWidgetInitializer;
+const fetchWidget = async (endpoint, widgetId) => {
+    try {
+        const response = await fetch(`${endpoint}/public/${widgetId}`, {
+            credentials: 'include',
+        });
+        if (response.ok) {
+            const data = await response.json();
+            return {
+                status: 'success',
+                data,
+            };
+        }
+        else if (response.status === 404) {
+            return {
+                status: 'error',
+                error: 'Given widget does not exist',
+            };
+        }
+        else {
+            return {
+                status: 'error',
+                error: 'Something went wrong',
+            };
+        }
+    }
+    catch (_) {
+        console.error('Fetch error:', _);
+        return {
+            status: 'error',
+            error: 'Fetch error',
+        };
+    }
+};
+// #region old widget fetched Details
+// export type WidgetDataT = unknown & { _tag: 'widgetdata' }
+// export const useWidgetData = WidgetConfigStore.select((state) => state.widgetData)
+// type FetchWidgetProps = {
+//     endpoint: string
+//     widget_id: string
+// }
+// export const widgetStore = createStore({
+//     context: {
+//         widget: null as WidgetDataT | null,
+//         loading: false,
+//         error: null as string | null,
+//     },
+//     on: {
+//         setWidget: (ctx, event: { data: WidgetDataT }) => ({
+//             ...ctx,
+//             widget: event.data,
+//             loading: false,
+//             error: null,
+//         }),
+//         setLoading: (ctx) => ({
+//             ...ctx,
+//             loading: true,
+//             error: null,
+//         }),
+//         setError: (ctx, event: { error: string }) => ({
+//             ...ctx,
+//             loading: false,
+//             error: event.error,
+//         }),
+//     },
+// })
+// export const useFetchWidget = ({ widget_id, endpoint }: FetchWidgetProps) => {
+//     // const [widget, setWidget] = useState()
+//     const widget = useSelector(widgetStore, (state) => state.context.widget)
+//     useEffect(() => {
+//         const fetchWidget = async () => {
+//             try {
+//                 const response = await fetch(
+//                     `${endpoint}/public/${widget_id}`,
+//                     {
+//                         credentials: 'include',
+//                     }
+//                 )
+//
+//                 if (response.ok) {
+//                     const data = await response.json()
+//                     //   setWidget(data);
+//                     widgetStore.trigger.setWidget({
+//                         data,
+//                     })
+//                 } else if (response.status === 404) {
+//                     console.error('Given widget does not exist')
+//                 } else {
+//                     console.error('Something went wrong', response)
+//                 }
+//             } catch (error) {
+//                 console.error('Fetch error:', error)
+//             }
+//         }
+//         fetchWidget()
+//     }, [])
+//
+//     console.log('widget', widget)
+//     return { widget }
+// }
+// #endregion