pager-widget 1.0.11-alpha.9 → 1.0.13

package/out/widgetStateHandler.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setWidgetLocalState = void 0;
+// const LOCAL_KEY = 'DUMMY'
+const setWidgetLocalState = ({ widget_id, 
+// conversation_id,
+user_state, events, }) => {
+    const conversation_id = localStorage.getItem('CURRENT_CONVERSATION') ?? null;
+    console.log('conversation id from current', conversation_id);
+    appendEvent({ widget_id, conversation_id, user_state, events });
+};
+exports.setWidgetLocalState = setWidgetLocalState;
+const appendEvent = ({ widget_id, conversation_id, user_state, events, }) => {
+    console.log('DEBUGG :: append event called', events);
+    const existing = localStorage.getItem(`CONVERSATION::${widget_id}`);
+    const _events = Array.isArray(events) ? events : [events];
+    const currentWidgetState = {
+        widget_id,
+        conversation_id,
+        user_state,
+        events: _events,
+    };
+    if (!existing) {
+        localStorage.setItem(`CONVERSATION::${widget_id}`, JSON.stringify(currentWidgetState));
+        return;
+    }
+    try {
+        const parsed = JSON.parse(existing);
+        const isSameConversation = parsed.conversation_id === conversation_id;
+        const previousEvents = isSameConversation ? parsed.events : [];
+        // 🧹 Remove FORM_INPUT_NEEDED if form is now submitted
+        // if (user_state === 'FORM_SUBMITTED') {
+        //     previousEvents = previousEvents.filter(
+        //         (e) => e.type !== 'FORM_INPUT_NEEDED'
+        //     )
+        // }
+        // ✅ Deduplicate events by `event_id` (if present), else fallback to serialized JSON
+        const allEvents = [...previousEvents, ..._events];
+        const deduplicated = [
+            ...new Map(allEvents.map((e) => {
+                const key = e.type === 'received' && 'message' in e
+                    ? e.message?.event_id
+                    : JSON.stringify(e);
+                return [key, e];
+            })).values(),
+        ];
+        const updatedState = {
+            widget_id,
+            conversation_id,
+            user_state,
+            events: deduplicated,
+        };
+        localStorage.setItem(`CONVERSATION::${widget_id}`, JSON.stringify(updatedState));
+    }
+    catch (error) {
+        console.error('Failed to append event to widget state:', error);
+    }
+};
+// const appendEvent = ({
+//     widget_id,
+//     conversation_id,
+//     user_state,
+//     events,
+// }: appendEventType) => {
+//     console.log('DEBUGG :: append event called', events)
+//     const existing = localStorage.getItem(LOCAL_KEY)
+//     const _events = Array.isArray(events) ? events : [events]
+//     const currentWidgetState: LocalEventStore = {
+//         widget_id,
+//         conversation_id,
+//         user_state,
+//         events: _events,
+//     }
+//     if (!existing) {
+//         localStorage.setItem(LOCAL_KEY, JSON.stringify(currentWidgetState))
+//         return
+//     }
+//     try {
+//         const parsed: LocalEventStore = JSON.parse(existing)
+//         const isSameConversation = parsed.conversation_id === conversation_id
+//         // const deduplicated = [
+//         //     ...new Map(
+//         //         [...parsed.events, ..._events].map((e) => [
+//         //             e?.message?.event_id ?? JSON.stringify(e),
+//         //             e,
+//         //         ])
+//         //     ).values(),
+//         // ]
+//         let previousEvents = isSameConversation ? parsed.events : []
+//         // 👉 Remove FORM_INPUT_NEEDED if current state is FORM_SUBMITTED
+//         if (user_state === 'FORM_SUBMITTED') {
+//             previousEvents = previousEvents.filter(
+//                 (e) => e.type !== 'FORM_INPUT_NEEDED'
+//             )
+//         }
+//         const updatedState: LocalEventStore = {
+//             widget_id,
+//             conversation_id,
+//             user_state,
+//             events: [...previousEvents, ..._events],
+//         }
+//         localStorage.setItem(LOCAL_KEY, JSON.stringify(updatedState))
+//     } catch (error) {
+//         console.error('Failed to append event to widget state:', error)
+//     }
+// }

package/out/widgetStore.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetCurrentConversationId = exports.useChatExit = exports.useUserDetails = exports.useIsWidgetExpanded = exports.useSelectTab = exports.useSelectedConversationData = exports.useInspectConversation = exports.widgetStore = exports.WidgetExpandType = exports.TabType = void 0;
+const store_1 = require("@xstate/store");
+const react_1 = require("@xstate/store/react");
+const react_2 = require("react");
+// Tab types
+var TabType;
+(function (TabType) {
+    TabType["HOME"] = "home";
+    TabType["CHAT"] = "chat";
+    TabType["RECENT_MESSAGE"] = "recentMessage";
+    TabType["RECENT_MESSAGE_LIST"] = "recentMessageList";
+    TabType["RECENT_MESSAGE_DETAIL"] = "recentMessageDetail";
+    TabType["NEW_RECENT_MESSAGE"] = "newRecentMessage";
+})(TabType || (exports.TabType = TabType = {}));
+var WidgetExpandType;
+(function (WidgetExpandType) {
+    WidgetExpandType["DEFAULT"] = "default";
+    WidgetExpandType["EXPANDED"] = "expanded";
+    WidgetExpandType["FULLSCREEN"] = "fullscreen";
+})(WidgetExpandType || (exports.WidgetExpandType = WidgetExpandType = {}));
+// ---- DEFAULT CONTEXT ----
+const defaultContext = {
+    current_conversation_id: null,
+    selected_conversation_id: '',
+    switchTab: TabType.HOME,
+    isExpanded: WidgetExpandType.DEFAULT,
+    user_details: {
+        SYS_FirstName: '',
+        SYS_LastName: '',
+        SYS_Location: '',
+        SYS_Timezone: '',
+        SYS_UserEmail: '',
+    },
+    isChatExit: false,
+};
+const storedData = localStorage.getItem('widgetContext');
+const initialContext = storedData
+    ? { ...defaultContext, ...JSON.parse(storedData) }
+    : defaultContext;
+// ---- STORE ----
+exports.widgetStore = (0, store_1.createStore)({
+    context: initialContext,
+    on: {
+        setCurrentConversation: (context, event) => {
+            context.current_conversation_id = event.conversation_id;
+        },
+        selectConversation: (context, event) => {
+            context.selected_conversation_id = event.conversation_id;
+            persistContext();
+        },
+        selectTab: (context, event) => {
+            context.switchTab = event.tab;
+            persistContext();
+        },
+        expandWidget: (context, event) => {
+            context.isExpanded = event.expanded_size;
+            persistContext();
+        },
+        updateUserDetails: (context, event) => {
+            context.user_details = {
+                ...context.user_details,
+                ...event.user_details,
+            };
+            persistContext();
+        },
+        handleExitChatState: (context, event) => {
+            console.log('exit chat called in store');
+            context.isChatExit = event.value;
+        },
+    },
+});
+// ---- PERSIST ----
+const persistContext = () => {
+    const currentContext = exports.widgetStore.getSnapshot().context;
+    localStorage.setItem('widgetContext', JSON.stringify(currentContext));
+};
+// ---- DEBUGGING ----
+const useInspectConversation = (debug = false) => {
+    (0, react_2.useEffect)(() => {
+        if (debug) {
+            exports.widgetStore.inspect((inspectionEvent) => {
+                console.log('CONVERSATION INSPECTION::', inspectionEvent);
+            });
+        }
+    }, []);
+};
+exports.useInspectConversation = useInspectConversation;
+// ---- SELECTORS ----
+const useSelectedConversationData = () => (0, react_1.useSelector)(exports.widgetStore, (state) => state.context.selected_conversation_id);
+exports.useSelectedConversationData = useSelectedConversationData;
+const useSelectTab = () => (0, react_1.useSelector)(exports.widgetStore, (state) => state.context.switchTab);
+exports.useSelectTab = useSelectTab;
+const useIsWidgetExpanded = () => (0, react_1.useSelector)(exports.widgetStore, (state) => state.context.isExpanded);
+exports.useIsWidgetExpanded = useIsWidgetExpanded;
+const useUserDetails = () => (0, react_1.useSelector)(exports.widgetStore, (state) => state.context.user_details);
+exports.useUserDetails = useUserDetails;
+const useChatExit = () => (0, react_1.useSelector)(exports.widgetStore, (state) => state.context.isChatExit);
+exports.useChatExit = useChatExit;
+const useGetCurrentConversationId = () => (0, react_1.useSelector)(exports.widgetStore, (state) => state.context.current_conversation_id);
+exports.useGetCurrentConversationId = useGetCurrentConversationId;
+// import { createStore } from '@xstate/store'
+// import { useSelector } from '@xstate/store/react'
+// import { useEffect } from 'react'
+// export enum TabType {
+//     HOME = 'home',
+//     CHAT = 'chat',
+//     RECENT_MESSAGE = 'recentMessage',
+//     RECENT_MESSAGE_LIST = 'recentMessageList',
+//     RECENT_MESSAGE_DETAIL = 'recentMessageDetail',
+//     // etc.
+// }
+// type conversationPayload = {
+//     conversation_id: string
+// }
+// type selectTabPayloadT = {
+//     tab: TabType
+// }
+// const storedData = localStorage.getItem('widgetContext')
+// const initialContext = storedData
+//     ? JSON.parse(storedData)
+//     : {
+//           selected_conversation_id: '',
+//           switchTab: TabType.HOME,
+//           isExpanded: false,
+//       }
+// export const widgetStore = createStore({
+//     context: initialContext,
+//     on: {
+//         selectConversation: (context, event: conversationPayload) => {
+//             context.selected_conversation_id = event.conversation_id
+//             persistContext()
+//         },
+//         selectTab: (context, event: selectTabPayloadT) => {
+//             context.switchTab = event.tab
+//             persistContext()
+//         },
+//         expandWidget: (context) => {
+//             context.isExpanded = !context.isExpanded
+//             persistContext()
+//         },
+//     },
+// })
+// export const useInspectConversation = (debug = false) => {
+//     useEffect(() => {
+//         if (debug) {
+//             widgetStore.inspect((inspectionEvent) => {
+//                 console.log('CONVERSATION INSPECTION::', inspectionEvent)
+//             })
+//         }
+//     }, [])
+// }
+// const persistContext = () => {
+//     const currentContext = widgetStore.getSnapshot().context
+//     localStorage.setItem('widgetContext', JSON.stringify(currentContext))
+// }
+// export const useSelectedConversationData = () =>
+//     useSelector(widgetStore, (state) => {
+//         return state.context.selected_conversation_id
+//     })
+// export const useSelectTab = () => {
+//     return useSelector(widgetStore, (state) => {
+//         return state.context.switchTab
+//     })
+// }
+// export const useIsWidgetExpanded = () => {
+//     return useSelector(widgetStore, (state) => {
+//         return state.context.isExpanded
+//     })
+// }

package/out/widgetUserStore.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUserData = exports.userDetailInitializer = exports.widgetUserStore = void 0;
+const store_1 = require("@xstate/store");
+const react_1 = require("react");
+const react_2 = require("@xstate/store/react");
+exports.widgetUserStore = (0, store_1.createStore)({
+    context: {
+        user_details: {
+            SYS_FirstName: 'sample',
+            SYS_LastName: 'B',
+            SYS_UserEmail: 'example@gmail.com',
+            SYS_Location: 'India',
+            SYS_Timezone: 'Asia/Kolkata',
+        },
+    },
+    on: {
+        setUserDetails: (_, event) => {
+            return {
+                user_details: {
+                    SYS_FirstName: event.userDetails?.SYS_FirstName ?? 'sample',
+                    SYS_LastName: event.userDetails?.SYS_LastName ?? 'B',
+                    SYS_UserEmail: event.userDetails?.SYS_UserEmail ?? 'example@gmail.com',
+                    SYS_Location: event.userDetails?.SYS_Location ?? 'India',
+                    SYS_Timezone: event.userDetails?.SYS_Timezone ?? 'Asia/Kolkata',
+                },
+            };
+        },
+    },
+});
+const userDetailInitializer = (userDetails, debug = false) => {
+    (0, react_1.useEffect)(() => {
+        exports.widgetUserStore.trigger.setUserDetails({ ...userDetails });
+        if (debug) {
+            exports.widgetUserStore.inspect((inspectionEvent) => {
+                console.log('USER INSPECTION::', inspectionEvent);
+            });
+        }
+    }, []);
+};
+exports.userDetailInitializer = userDetailInitializer;
+const useUserData = () => {
+    (0, react_2.useSelector)(exports.widgetUserStore, (state) => {
+        return state.context.user_details;
+    });
+};
+exports.useUserData = useUserData;

package/package.json

@@ -8,10 +8,9 @@
         "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
         "prepublishOnly": "npm run build:lib",
         "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md}\" --config ./.prettierrc.json",
-        "prepare": "husky install",
         "parcel:build": "PARCEL_WORKER_BACKEND=process TAILWIND_MODE=build DEGUG=* parcel build src/index.tsx --no-source-maps",
         "postcss:build": "postcss src/global.css -o dist/global.css",
-        "release": "npx bumpp"
+        "release": "bumpp"
     },
     "devDependencies": {
         "@eslint/js": "^9.25.1",
@@ -24,6 +23,7 @@
         "@types/react-syntax-highlighter": "^15.5.13",
         "@types/socket.io-client": "^1.4.36",
         "autoprefixer": "^10.4.21",
+        "bumpp": "^11.1.0",
         "eslint": "^9.25.1",
         "eslint-config-prettier": "^10.1.2",
         "eslint-plugin-prettier": "^5.2.6",
@@ -89,6 +89,6 @@
         ],
         "mode": "all"
     },
-    "version": "1.0.11-alpha.9",
+    "version": "1.0.13",
     "name": "pager-widget"
 }

package/server.html

@@ -3,45 +3,39 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Pager Widget</title>
-        <style>
-          body { margin: 0; overflow: hidden; }
-        </style>
+        
+        <title>React with Tailwind</title>
+        <!-- <script type="module" src="./index.tsx"></script> -->
+        <script type="module" src="./index.js"></script>
+        <link rel="stylesheet" href="./index.css">
     </head>
     <body>
-      <div id="pager-widget-container"
-           style="position:fixed;bottom:0;right:0;z-index:9999;min-height:60px;min-width:60px">
-        <iframe id="pager-widget-iframe"
-          src="https://dev.pagergpt.ai/wgt-hook/embed/ae320291-260f-48fc-a069-68ab73858664?v=1.0.10&SYS_FirstName=John&SYS_UserEmail=john@example.com"
-          style="position:absolute;width:100%!important;height:100%!important;border:none!important;bottom:0!important;right:0!important;background:transparent!important"
-          title="Pager Widget">
-        </iframe>
-      </div>
-      <script>
-        (function() {
-          var container = document.getElementById('pager-widget-container');
-          var iframe = document.getElementById('pager-widget-iframe');
-
-          window.addEventListener('message', function(event) {
-            if (event.data && event.data.type === 'widgetResize') {
-              container.style.width = event.data.width + 'px';
-              container.style.height = event.data.height + 'px';
-            }
-          });
-
-          iframe.addEventListener('load', function() {
-            iframe.contentWindow.postMessage({
-              type: 'userDetails',
-              data: {
-                SYS_FirstName: "{{firstName}}",
-                SYS_LastName: "{{lastName}}",
-                SYS_UserEmail: "{{email}}",
-                SYS_Location: "{{location}}",
-                SYS_Timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
-              }
-            }, 'https://dev.pagergpt.ai');
-          });
-        })();
-      </script>
-  </body>
+        <div id="pager-widget-f08cbac9-472f-40ca-a1ef-4cdbf88cddae"></div>
+        <!-- This is where React will mount -->
+        <script>
+            setTimeout(() => {
+                window.WAWidget.init({
+                    id: 'pager-widget-f08cbac9-472f-40ca-a1ef-4cdbf88cddae',
+                    endpoint: 'https://dev.pagergpt.ai/wgt-hook',
+                    // widget_id: 'b6a8b7a6-10e8-41fa-ab89-b4c9413c20a8',
+                    widget_id: 'f08cbac9-472f-40ca-a1ef-4cdbf88cddae',
+                    openByDefault: true,
+                    widget_size: 'small',
+                    userDetails: {
+                        SYS_FirstName: 'sample',
+                        SYS_LastName: 'user',
+                        SYS_UserEmail: 'email',
+                        SYS_Location: 'india',
+                        SYS_Timezone: 'Asia/Kolkata',
+                    },
+                    style: {
+                        logo_shape: 'circle',
+                        logo_size: {
+                            size: 1,
+                        },
+                    },
+                })
+            }, 1000)
+        </script>
+    </body>
 </html>

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged

package/docs/issues/001-use-widget-resize-hook.md

@@ -1,51 +0,0 @@
-## What to build
-
-Create a `useWidgetResize` hook that sends the widget's rendered dimensions to the parent page via `postMessage` whenever the widget's DOM size changes.
-
-The hook uses **ResizeObserver** (not state-based triggers) to detect ALL size changes:
-- Toggle open/close
-- Expand (DEFAULT → EXPANDED → FULLSCREEN)
-- Window resize
-- Content growth / layout shifts
-
-The hook measures the rendered `.pager-widget-root` element and sends the actual pixel dimensions to `window.parent` via `postMessage`.
-
-### Message shape
-
-```json
-{
-  "type": "widgetResize",
-  "width": 448,
-  "height": 637
-}
-```
-
-Note: no `state` field — dimensions are the source of truth. The parent just resizes to match.
-
-### Edge cases
-
-- **Not in iframe**: skip sending if `window.parent === window`
-- **Zero dimensions**: skip if measured width or height is 0 (DOM not yet ready)
-- **Initial render**: fire once on mount after first requestAnimationFrame
-- **Flood protection**: throttle via `requestAnimationFrame` guard (one message per frame)
-
-### Integration point
-
-The hook is called in `widget.tsx` where the toggle state and rendering live.
-
-## Acceptance criteria
-
-- [x] `src/hooks/useWidgetResize.ts` exists
-- [x] Hook measures the rendered widget dimensions via `getBoundingClientRect()`
-- [x] Hook sends `postMessage({ type: 'widgetResize', width, height }, '*')` on size change
-- [x] Hook skips when not in an iframe
-- [x] Hook skips when dimensions are zero
-- [x] Hook is integrated into `widget.tsx`
-- [ ] Hook uses **ResizeObserver** instead of state-based `setTimeout(50ms)` approach
-- [ ] Hook fires on ALL size changes (toggle, expand, window resize — not just toggle state transitions)
-- [ ] Hook throttles messages with `requestAnimationFrame`
-- [ ] Unit tests pass for all edge cases (not in iframe, zero dimensions, observer cleanup)
-
-## Blocked by
-
-None — can start immediately.

package/docs/issues/002-embed-snippet-container-resize.md

@@ -1,81 +0,0 @@
-## What to build
-
-Update `server.html` (the backend container page served at `/embed/{widget_id}`) to use HubSpot's container pattern instead of the current full-viewport iframe.
-
-### Current (broken)
-
-The current `server.html` has a full-viewport iframe that blocks all pointer events on the host page:
-
-```html
-<iframe style="border:none;position:fixed;bottom:0;right:0;width:100%;height:100%;z-index:9999;">
-</iframe>
-```
-
-### Target (container pattern)
-
-The updated page has a container div that starts at launcher size and is dynamically resized:
-
-```html
-<div id="pager-widget-container"
-     style="position:fixed;bottom:0;right:0;z-index:9999;min-height:60px;min-width:60px">
-  <iframe src="https://dev.pagergpt.ai/wgt-hook/embed/{widget_id}?v={version}"
-    style="position:absolute;width:100%!important;height:100%!important;border:none!important;bottom:0!important;right:0!important;background:transparent!important"
-    title="Pager Widget">
-  </iframe>
-</div>
-<script>
-  (function() {
-    var container = document.getElementById('pager-widget-container');
-
-    window.addEventListener('message', function(event) {
-      if (event.data && event.data.type === 'widgetResize') {
-        container.style.width = event.data.width + 'px';
-        container.style.height = event.data.height + 'px';
-      }
-    });
-  })();
-</script>
-```
-
-### Behavior
-
-| Widget state | Container size | Page interaction |
-|---|---|---|
-| Collapsed (launcher only) | ~60×60px | Fully interactive — scroll, click all page elements |
-| Open (chat panel, DEFAULT) | ~400×58-70vh (dynamic) | Only the chat panel area captures events |
-| Open (chat panel, EXPANDED) | ~50vw × 58-70vh | Wider panel, still only panel area blocks events |
-| Open (chat panel, FULLSCREEN) | ~95vw × 58-70vh | Nearly full-width, still only panel area blocks events |
-
-### CSS breakdown
-
-| Property | Value | Purpose |
-|---|---|---|
-| `position: fixed` | bottom; right | Anchors widget to viewport corner |
-| `z-index: 9999` | high value | Stays above page content |
-| `min-height: 60px` | launcher button height | Prevents collapse to zero before first message |
-| `min-width: 60px` | launcher button width | Prevents collapse to zero before first message |
-| `width` / `height` | set dynamically | Updated by message listener |
-
-The inner iframe uses `position:absolute;width:100%;height:100%` to fill the container.
-
-### Security
-
-The `postMessage` listener does not check `event.origin` since customers have different domains. The widget side uses `targetOrigin: '*'`. Origin validation can be added later via a known-allowlist of customer origins.
-
-### File to update
-
-- `server.html` — the backend template served at `/embed/{widget_id}`
-
-## Acceptance criteria
-
-- [ ] `server.html` container div starts at `min-height:60px; min-width:60px` before first resize message
-- [ ] Page scrolling works when widget is collapsed (no full-viewport iframe)
-- [ ] Page scrolling works outside the widget's chat panel when open
-- [ ] Container resizes correctly when widget opens and collapses
-- [ ] Container resizes correctly when widget expands (DEFAULT → EXPANDED → FULLSCREEN)
-- [ ] UserDetails postMessage to inner iframe still works on load
-- [ ] Failed resize (JS error) leaves container at 60×60px (safe failure)
-
-## Blocked by
-
-- [ ] Slice 1: `useWidgetResize` hook must be updated to ResizeObserver (the container page has nothing to listen to without the hook sending messages)