@botonic/webchat-core 2.23.0

package/src/lib/machines/webchat.js

@@ -0,0 +1,768 @@
+import { __awaiter } from "tslib";
+import { MessageSentBy, WebchatMessageFactory, } from '@botonic/shared';
+import { v7 as uuidv7 } from 'uuid';
+import { and, assertEvent, assign, createActor, emit, fromPromise, setup, } from 'xstate';
+import { createStorageRepository, } from '../infra/repositories';
+import { WebchatService, } from '../services/webchat-service';
+import { detectUserLocale } from '../utils/locale-detection';
+import { createWebchatMessageMachine, WebchatMessageStatus, } from './message';
+import { OverlayMachine } from './overlay';
+// Helper function to generate anonymous users with locale props
+function generateAnonymousUser(localeProps, extraData) {
+    const userId = `${uuidv7()}`;
+    const userLocale = detectUserLocale(localeProps);
+    return Object.assign(Object.assign({ id: userId, name: 'Anonymous User' }, userLocale), { extra_data: extraData });
+}
+/**
+ * Helper function to create a postMessage actor for sending messages to the backend
+ */
+function createPostMessageActor(webchatService) {
+    return fromPromise((_a) => __awaiter(this, [_a], void 0, function* ({ input: { message, user }, }) {
+        if (!webchatService) {
+            throw new Error('Webchat service not initialized');
+        }
+        const response = yield webchatService.sendMessage(message, user);
+        if (!response.success) {
+            throw new Error(response.error || `Failed to send message`);
+        }
+        return {
+            message: Promise.resolve({ detail: 'sent' }),
+        };
+    }));
+}
+/**
+ * Main webchat machine that handles the complete lifecycle
+ *
+ * Flow:
+ * 1. idle → initializing (setup services, load session)
+ * 2. initializing → operational (ready for messaging)
+ * 3. operational → (handle messages, connections, UI state)
+ */
+export const WebchatMachine = setup({
+    types: {},
+    actors: {
+        // Initialize webchat service with all dependencies
+        initializeWebchatService: fromPromise((_a) => __awaiter(void 0, [_a], void 0, function* ({ input }) {
+            const { config } = input;
+            // Initialize storage repository with config
+            const storageRepository = createStorageRepository(config.storage);
+            const webchatServiceConfig = {
+                appId: config.appId,
+                apiUrl: config.apiUrl,
+                timeout: 10000,
+            };
+            const webchatService = new WebchatService(webchatServiceConfig);
+            return { webchatService, storageRepository };
+        })),
+        // Load messages from storage
+        loadMessages: fromPromise((_a) => __awaiter(void 0, [_a], void 0, function* ({ input, }) {
+            const { storageRepository, appId, userId } = input;
+            return yield storageRepository.findMessagesByConversation(appId, userId);
+        })),
+        // Load last user from storage
+        loadLastUser: fromPromise((_a) => __awaiter(void 0, [_a], void 0, function* ({ input, }) {
+            const { storageRepository, appId } = input;
+            const session = yield storageRepository.findLastUserSession(appId);
+            return session || null;
+        })),
+        // Initialize realtime connection
+        initializeRealtimeConnection: fromPromise((_a) => __awaiter(void 0, [_a], void 0, function* ({ input, }) {
+            const { webchatService, user, messages } = input;
+            const result = yield webchatService.connect(user, messages);
+            if (!result.success) {
+                throw new Error(result.error || 'Failed to initialize realtime connection');
+            }
+            return { success: true };
+        })),
+        // Reconnect to realtime
+        reconnectToRealtime: fromPromise((_a) => __awaiter(void 0, [_a], void 0, function* ({ input, }) {
+            const { webchatService, user, messages, attempt } = input;
+            // Calculate backoff delay
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
+            // Wait before attempting reconnection
+            if (attempt > 0) {
+                yield new Promise(resolve => setTimeout(resolve, delay));
+            }
+            // Attempt to reconnect
+            const result = yield webchatService.connect(user, messages);
+            if (!result.success) {
+                throw new Error(result.error || 'Failed to reconnect');
+            }
+            return { success: true };
+        })),
+    },
+    actions: {
+        // Actions extracted from connection machine
+        assignWebchatService: assign({
+            webchatService: ({ event }) => event.output.webchatService,
+            storageRepository: ({ event }) => event.output.storageRepository,
+            appId: ({ context }) => context.config.appId,
+        }),
+        assignLoadedUser: assign({
+            user: ({ context, event }) => {
+                // If we already have a user in context (from createAnonymousUser), use it
+                if (context.user)
+                    return context.user;
+                // Otherwise use the loaded user from storage
+                return event.output;
+            },
+        }),
+        createAnonymousUser: assign({
+            user: ({ context }) => {
+                // Extract locale props and extra_data from config
+                const { locale, country, system_locale, extra_data } = context.config;
+                const newUser = generateAnonymousUser({ locale, country, system_locale }, extra_data);
+                return newUser;
+            },
+        }),
+        assignLoadedMessages: assign({
+            messages: ({ event }) => event.output,
+        }),
+        spawnPersistedMessageActors: assign({
+            messageActors: ({ context, spawn }) => {
+                var _a;
+                const actors = new Map();
+                (_a = context.messages) === null || _a === void 0 ? void 0 : _a.forEach(storedMessage => {
+                    const message = WebchatMessageFactory.fromStoredMessage(storedMessage);
+                    // Create API actors using helper functions
+                    const postMessageActor = createPostMessageActor(context.webchatService);
+                    // Use factory function to create machine logic and spawn with input
+                    const actor = spawn(createWebchatMessageMachine(postMessageActor), {
+                        input: {
+                            message,
+                            user: context.user,
+                            status: storedMessage.status, // Preserve stored status!
+                        },
+                        systemId: message.id,
+                    });
+                    actors.set(message.id, actor);
+                });
+                return actors;
+            },
+        }),
+        saveUser: (_a) => __awaiter(void 0, [_a], void 0, function* ({ context }) {
+            var _b;
+            if (!context.storageRepository || !context.user)
+                return;
+            try {
+                const channelData = (_b = context.webchatService) === null || _b === void 0 ? void 0 : _b.getChannelData();
+                const userToSave = channelData
+                    ? Object.assign(Object.assign({}, context.user), { botId: channelData.botId, chatId: channelData.chatId }) : context.user;
+                yield context.storageRepository.saveUser(context.appId || context.config.appId, userToSave);
+            }
+            catch (error) {
+                console.error('Failed to save user:', error);
+            }
+        }),
+        // Forward WEBVIEW.OPEN events from message actors to the overlay actor
+        forwardWebviewOpenToOverlay: ({ context, event }) => {
+            assertEvent(event, 'WEBVIEW.OPEN');
+            context.overlayActor.send({
+                type: 'OPEN_WEBVIEW',
+                url: event.url,
+                title: event.title,
+            });
+        },
+        // Subscribe to WebchatService message callbacks
+        subscribeToWebchatService: ({ context, self }) => {
+            if (!context.webchatService) {
+                console.warn('⚠️ No webchat service available for subscriptions');
+                return;
+            }
+            // Subscribe to received messages from bot
+            const unsubscribeMessages = context.webchatService.onMessageReceived((message) => {
+                self.send({
+                    type: 'MESSAGE_RECEIVED',
+                    message,
+                });
+            });
+            // Subscribe to connection status changes (better than polling!)
+            const unsubscribeStatus = context.webchatService.onConnectionStatusChange(status => {
+                console.log(`🔄 Connection status changed: ${status}`);
+                self.send({
+                    type: 'CONNECTION_STATUS_CHANGED',
+                    status,
+                });
+            });
+            context._unsubscribeMessages = unsubscribeMessages;
+            context._unsubscribeStatus = unsubscribeStatus;
+        },
+        // Cleanup webchat service subscriptions
+        cleanupWebchatServiceSubscriptions: ({ context }) => {
+            if (context._unsubscribeMessages) {
+                ;
+                context._unsubscribeMessages();
+            }
+            if (context._unsubscribeStatus) {
+                ;
+                context._unsubscribeStatus();
+            }
+        },
+        // Toggle webchat open/close (direct handling)
+        toggleWebchat: assign({
+            isOpen: ({ context, event }) => {
+                assertEvent(event, 'TOGGLE_WEBCHAT');
+                return event.isOpen !== undefined ? event.isOpen : !context.isOpen;
+            },
+        }),
+        emitWebchatToggled: emit(({ context, event }) => {
+            assertEvent(event, 'TOGGLE_WEBCHAT');
+            const newIsOpen = event.isOpen !== undefined ? event.isOpen : !context.isOpen;
+            return newIsOpen
+                ? { type: 'WEBCHAT_OPENED' }
+                : { type: 'WEBCHAT_CLOSED' };
+        }),
+        // Update connection status in context
+        updateConnectionStatus: assign({
+            connectionStatus: ({ event }) => {
+                assertEvent(event, 'CONNECTION_STATUS_CHANGED');
+                return event.status;
+            },
+        }),
+        // Add message by spawning actor (single source of truth)
+        addMessage: assign({
+            messageActors: ({ context, event, spawn }) => {
+                assertEvent(event, ['SEND_MESSAGE', 'MESSAGE_RECEIVED']);
+                console.log('addMessage', event.message.type);
+                const message = event.message;
+                // Get unique identifier for the message
+                // Note: After domain refactoring, different message types use different ID fields:
+                // - UserInputMessage uses provider_id
+                // - RealtimeResponseMessage uses message_id
+                const messageId = message.id;
+                // Check if actor already exists
+                const currentActors = context.messageActors || new Map();
+                if (currentActors.has(messageId)) {
+                    return currentActors;
+                }
+                // Determine status based on event type
+                // IMPORTANT: After domain refactoring, UserInputMessage doesn't have sent_by property
+                // Only RealtimeResponseMessage (bot messages) have sent_by
+                // So we determine status purely from event type:
+                // - SEND_MESSAGE = user input that needs to be sent via API (UNSENT)
+                // - MESSAGE_RECEIVED = bot response already sent via Pusher (SENT)
+                const status = event.type === 'MESSAGE_RECEIVED'
+                    ? WebchatMessageStatus.SENT
+                    : message.sent_by === MessageSentBy.User
+                        ? WebchatMessageStatus.UNSENT
+                        : WebchatMessageStatus.SENT;
+                // Create actors for API operations using helper functions
+                const postMessageActor = createPostMessageActor(context.webchatService);
+                // Use factory function to create machine logic and spawn with input
+                const actor = spawn(createWebchatMessageMachine(postMessageActor), {
+                    input: {
+                        message,
+                        user: context.user,
+                        status,
+                    },
+                    systemId: message.id,
+                });
+                // Update actors registry using the appropriate ID as key
+                const newActors = new Map(currentActors);
+                newActors.set(messageId, actor);
+                return newActors;
+            },
+        }),
+        // Save all messages to storage (derived from messageActors)
+        saveMessages: (_a) => __awaiter(void 0, [_a], void 0, function* ({ context }) {
+            if (!context.storageRepository || !context.user) {
+                console.warn('💾 PERSISTENCE: Cannot save - missing storage repository or user');
+                return;
+            }
+            try {
+                // Derive current messages from messageActors (single source of truth)
+                const currentMessages = [];
+                for (const [messageId, actor] of context.messageActors || new Map()) {
+                    const snapshot = actor.getSnapshot();
+                    const message = snapshot.context.message;
+                    const status = snapshot.context.status;
+                    // Create simple StoredMessage object
+                    currentMessages.push(Object.assign({ status }, message));
+                }
+                // Use simple strings for the repository call
+                const appId = context.appId || context.config.appId;
+                const userId = context.user.id;
+                yield context.storageRepository.saveAllMessages(appId, userId, currentMessages);
+            }
+            catch (error) {
+                console.error('💾 PERSISTENCE: ❌ Failed to save messages:', error);
+            }
+        }),
+        // Emit message added event
+        emitMessageAdded: emit(({ context, event }) => {
+            assertEvent(event, ['SEND_MESSAGE', 'MESSAGE_RECEIVED']);
+            const message = event.message;
+            // Get ID based on message type (domain refactoring: different ID fields)
+            const messageId = message.id;
+            return {
+                type: 'MESSAGE_ADDED',
+                message: event.message,
+                // Lookup actor using the appropriate ID field
+                actor: (context.messageActors || new Map()).get(messageId),
+            };
+        }),
+        // New emit actions for enhanced event system
+        emitMessageSent: emit(({ event }) => {
+            assertEvent(event, 'SEND_MESSAGE');
+            return {
+                type: 'MESSAGE_SENT',
+                message: event.message,
+            };
+        }),
+        emitMessageReceived: emit(({ event }) => {
+            assertEvent(event, 'MESSAGE_RECEIVED');
+            return {
+                type: 'MESSAGE_RECEIVED',
+                message: event.message,
+            };
+        }),
+        emitMessageUpdated: emit(({ event }) => {
+            assertEvent(event, 'UPDATE_MESSAGE');
+            return {
+                type: 'MESSAGE_UPDATED',
+                messageId: event.messageId,
+                updates: event.updates,
+            };
+        }),
+        emitMessagesCleared: emit(() => ({
+            type: 'MESSAGES_CLEARED',
+        })),
+        emitUserUpdated: emit(({ event }) => {
+            assertEvent(event, 'UPDATE_USER');
+            return {
+                type: 'USER_UPDATED',
+                user: event.user,
+            };
+        }),
+        emitWebchatOpened: emit(() => ({
+            type: 'WEBCHAT_OPENED',
+        })),
+        emitWebchatClosed: emit(() => ({
+            type: 'WEBCHAT_CLOSED',
+        })),
+        // Initialization emit actions
+        emitInitializationStarted: emit(() => ({
+            type: 'INITIALIZATION_STARTED',
+        })),
+        emitInitializationCompleted: emit(({ context }) => ({
+            type: 'INITIALIZATION_COMPLETED',
+            context: context,
+        })),
+        emitInitializationFailed: emit(({ event }) => {
+            // Extract error from the event or provide a default
+            const error = event.error || 'Initialization failed';
+            return {
+                type: 'INITIALIZATION_FAILED',
+                error: typeof error === 'string' ? error : error.message || 'Unknown error',
+            };
+        }),
+        // Connection emit actions
+        emitConnectionChanged: emit(({ event }) => {
+            assertEvent(event, 'CONNECTION_STATUS_CHANGED');
+            return {
+                type: 'CONNECTION_CHANGED',
+                status: event.status,
+            };
+        }),
+        emitMessageDeleted: emit(({ event }) => {
+            assertEvent(event, 'DELETE_MESSAGE');
+            return {
+                type: 'MESSAGE_DELETED',
+                messageId: event.messageId,
+            };
+        }),
+        // New assign actions for state management
+        updateUser: assign({
+            user: ({ context, event }) => {
+                assertEvent(event, 'UPDATE_USER');
+                return Object.assign(Object.assign({}, context.user), event.user);
+            },
+        }),
+        clearMessages: assign({
+            messageActors: () => new Map(),
+        }),
+        updateMessage: assign({
+            messageActors: ({ context, event }) => {
+                assertEvent(event, 'UPDATE_MESSAGE');
+                const actors = new Map(context.messageActors);
+                const actor = actors.get(event.messageId);
+                // if (actor) {
+                //   // Send update to the message actor
+                //   actor.send({
+                //     type: 'UPDATE_MESSAGE_INFO',
+                //     message: {
+                //       id: event.messageId,
+                //       data: event.updates as any,
+                //     },
+                //   })
+                // }
+                return actors;
+            },
+        }),
+        deleteMessage: assign({
+            messageActors: ({ context, event }) => {
+                assertEvent(event, 'DELETE_MESSAGE');
+                const actors = new Map(context.messageActors);
+                actors.delete(event.messageId);
+                return actors;
+            },
+        }),
+        setTyping: assign({
+            isTypingOn: ({ event }) => {
+                assertEvent(event, 'MESSAGE_RECEIVED');
+                return event.message.isTypingOn;
+            },
+        }),
+        setTypingExternal: assign({
+            isTypingOn: ({ event }) => {
+                assertEvent(event, 'SET_TYPING');
+                return event.isTypingOn;
+            },
+        }),
+        setOnline: ({ context, event }) => {
+            assertEvent(event, 'SET_ONLINE');
+            // Handle online/offline status
+            if (context.webchatService) {
+                // TODO: Implement online status in WebchatService
+                // context.webchatService.setOnline(event.online)
+            }
+        },
+    },
+    guards: {
+        isInitialized: ({ context }) => !!context.user && !!context.webchatService,
+        hasLoadedUser: ({ event }) => {
+            // This is safe because this guard is only called in the context of loadLastUser's onDone
+            return event.output !== null;
+        },
+        isMaxReconnectAttempts: ({ context }) => (context.reconnectAttempt || 0) >= 5,
+        isTypingEvent: ({ event }) => {
+            assertEvent(event, ['MESSAGE_RECEIVED']);
+            return event.message.isTypingEvent();
+        },
+    },
+}).createMachine({
+    /** @xstate-layout N4IgpgJg5mDOIC5QHcwCMDGALAhgFwDoBLCAGzAGIBJAOSoBUqBBAGSoC0BRAbQAYBdRKAAOAe1hE8RUQDshIAB6IAjACYArAQBs6gBy6ALAHYAnAGZel9Vq0AaEAE8V63kYImb6o731Gz65TMAXyD7VExcQiIZSSIcUiIAL2ioYhipeKSUgGUwACcANyIMOAoIWTA0gtEAa0rw7Hw02MzkmVToloS2qFzC4rgEaOqMfGkZPn5J+TEJKVl5JQQvAwI9Ay1eLVVdDVUTXXsnBGV1awI1VUsdU91edRMQsPRGqPS47pTmjM-2vqKSrAKPk8qI8gRhKR8AAzMEAWwIDUi3w+WXaKNaOXyAMGw1Eo3mEwE0yQIFmsQWpKWGkMBDMuxMqiMgQOZgM6iOKjMyguBkM9LMqgsrgMBieICRTU6PzRqVIohwECxsAksjKFSqtXqL2R0tRPQI8sVytVMiGMhGY1kkxJInEFLkVJU900m14yhMRjOWiMu1UnJOBjZBFMqlUxk9ljZYtCEp1UvemPRRqVfzgpvVMkqeLqiPjby6ssNCtTvXT43NlsJNuUglJ5MJi2dZ20lg9XusvrDAdOWlWylFGxMPh2ujU4slBZlBpTJvGwLyoPBkJh8LzEQThZnJbnskr+KtRKmAhm9sbToQGhMq3p+yZLN0bI5jhURjcntUOg7Pq0-l0E-zDFfjlHd2gAWXTHAYCBcos01XNJyAotZ3AyDoP3AlxhtE96zPcYmxOLRlB5LRdCMAwTEZPQB2sHsLC0Ol1A0LRKN4YctgAjcp31L4UKgCCVSg0oQTBCEoTwWE8gRRC9STEDjVQwT0LxTDrWJHC7TmfCL2UIiSLIiiqLHdk7BfQNmRDMwbDItRqMeWMZMTYCCFgYQcGQGJ2gABXyCRYDwSABNgISgVtMk8MpUBqVOXg1h8EwAl4GldHUAw6P2AhXGZMNfQCdl1E414kINDBZCzDApHaehRAAJTAeIpDhShYOzC0tXXIrZOc0qZHKyqoGquqGqIJqMMPbC600h0CJpG8GXvMxWXZHsmTcO4-AHDtTGCBzAK6oser6lJBvq0hGsoETl3EyTpL2pyDrKsAKuO2rTvOsbq3Uybwq0yLFEQWa6Xm5lFsfZazIHIU6TYyjRTuRbP0K5FDqewkADEcCIcgIAoGrOHoGqAE0AH0AGEAHkaBoThScYSmwobbSooBvRLN2HQ+TZIxwwDMc6TDExlFMX0WLDJGmjyJ7Hue9pM1a6oEMAyWUZlqAPqwr7T1+x1mcvci6WUSw+WIjn9DSiGqJDZRdCInQbFFa3xcIZXpf6hclzE1cpI65EXd61GUnVtTj2+xm-upPsDaNsddNSs2e0fMwCFFdQLHDQx7kd3auIIP2jtly7PYktdELzgP2iDo9uFrLXpovMN6WT31iPdCxh1SgMrkF9w7jOQWks5nbnhzsvVYoUmmBoUnOBYYm8YpqmafoBmIp1-6EHpd9eGN7x4v2DZO+31ZNh9E2kvIrQnYIURhHyQ94nHynqdpqhKeJ7J6CYegAFVsjJgAJSeABxTgAARFe2sCKb3cNvMcu9dCMmvKZY4qgWQEH0GoYc7IkrKCvjfO+hIH4L2fnTGg79P4-z-qTQBNAQHgJrrhSBF4LB82IsYMwFgDCG2tsg18XoCD7F-KGNifZDB4Nvnke+pBcY0yfkvCBdddbQKwXAywCD968MvKOIGLh2TXg4URAq2cir4MkYQ6R9ByZAKASwTgxMADqnAABC1Cv4KPPEogcPJt7Ch8XoQwmjY5JwMK4d014RzeFwcY5EpipEUGyJwGgoDiZgU4NkbITAQHuKZuvbkqdMpkW5J+D0VEzA9mMLoARZsGRESuBscRBDxgP1SekzJdj56cCoAANTAdk8OiBuRWQuC4Ji7pSK7CMHRXgSddKwxuFwhGDSzFNOkS0jJIC54006T0+hodV5QLZDyZkzdfzhl9G+Hs5g3AhP0acN8Y4NBLLiWstp5Cv6-wAcA3pGkfqKNyYbVQ7hU53GwR6XS-oIZXDWglJk3JSJcIMKoJ55iKDfy8qAr+djf6cBqn0teSw4WxTZAcIU60fTdghj4Bi1xLAiyYh4eyw8TESLiaTWxTAaopLSestJeKoEDiTn2Zkj4XD6GmZMsyVy4pXF-GYL02x-DIpWai9FmKuWtKyT8sO+KBkCuTkRN8wiDg2ADL6SplE-RbFTiwpF0SmixJRaAme+M7EvM1XsphnjRQwNIuREJewylmT7LFCiiKjC2ysmyf8drCAOuVQk+gxNKZsGpny5hulKmx3ymofw1qAyIqThw90HoHb6CZDGJlMSWUooTcTeghMvK0CAWmzxPoQz5UZD4AVTIAwBEqZsPk14zgUR0NGyt9rq3Kq8ji7IVAP6JOngQDJPT1U8pbf8ywFxhz7D8HpEWAZBSVJdNGQ9phPRKtkA-RxTiulUE4PYgg5Np00HXQS04qxPwILfElHQehO6ChDL3EljJDbGArXGHOcbL3SNoAwZgbAuCvpZpUvw7M45cx5hDX0gqPS-h9F4UwNgQixhkKICAcB5CTlrh49eABaTRtHNApQQXkt81hjCkSviQcg1GclLERT2UVFwnxfhSpRPQXH7o9F4-0y87I2afnQ8YTDxw2GrAorpH0XYsq2vHdxOSxUsT9EBDJnVl5zAKdNhh82qnU4mHQdtVK8KRRDwg51KTvFQJlhVDk7VBFHyAu8AlcNCUwMJUE6lTKlEPRypombSTW5PMKX4mhCjjC-lLBZDyPRfZiIBCKYEoMgWWJBgCOMoWCXpxfFcu5TyUAfJ5D8gFCAQUQqmYItbCwawnNbD8H2iFqnOH809F4Q29yUqVZ4uiFW-UTrDSau1+u4ZViCxsKcGLY5XDlI2D3Rk5ESkcPHDGggM3xgYyxpARbusdj622m2LYBbnyqf1vsAF28ErXnhlfUe-Urvr1pHKz7HhSKoKFiYTuqCmOkQ5oEMiZEL0yHiH96kCD7O6Q2KlbwVlryXJ2OgqMQoWLmFQdGkIQA */
+    id: 'webchat',
+    context: ({ input, spawn }) => ({
+        config: input,
+        // UI state
+        isOpen: false,
+        connectionStatus: 'disconnected',
+        // Operational state - messageActors is the single source of truth
+        messageActors: new Map(),
+        reconnectAttempt: 0,
+        // Initialized context properties (will be set after initialization)
+        user: undefined,
+        webchatService: undefined,
+        storageRepository: undefined,
+        appId: undefined,
+        isTypingOn: false,
+        // Overlay actor (spawned child machine)
+        overlayActor: spawn(OverlayMachine, {
+            systemId: 'overlay',
+            input: { initialState: null },
+        }),
+    }),
+    initial: 'idle',
+    states: {
+        idle: {
+            on: {
+                INITIALIZE: 'initializing',
+            },
+        },
+        initializing: {
+            initial: 'initializingServices',
+            entry: [
+                'emitInitializationStarted',
+                assign({
+                    connectionStatus: () => 'connecting',
+                }),
+            ],
+            states: {
+                initializingServices: {
+                    invoke: {
+                        src: 'initializeWebchatService',
+                        input: ({ context }) => ({
+                            config: context.config,
+                        }),
+                        onDone: {
+                            target: 'loadingSession',
+                            actions: 'assignWebchatService',
+                        },
+                        onError: {
+                            target: '#webchat.connectionFailed',
+                        },
+                    },
+                },
+                loadingSession: {
+                    invoke: {
+                        src: 'loadLastUser',
+                        input: ({ context }) => ({
+                            storageRepository: context.storageRepository,
+                            appId: context.config.appId,
+                        }),
+                        onDone: [
+                            {
+                                // Existing user found - load their messages
+                                target: 'loadingMessages',
+                                guard: 'hasLoadedUser',
+                                actions: 'assignLoadedUser',
+                            },
+                            {
+                                // No user found - create anonymous and skip to realtime
+                                target: 'connectingToRealtime',
+                                actions: ['createAnonymousUser', 'assignLoadedUser'],
+                            },
+                        ],
+                        onError: '#webchat.connectionFailed',
+                    },
+                },
+                loadingMessages: {
+                    invoke: {
+                        src: 'loadMessages',
+                        input: ({ context }) => ({
+                            storageRepository: context.storageRepository,
+                            appId: context.config.appId,
+                            userId: context.user.id,
+                        }),
+                        onDone: {
+                            target: 'spawningPersistedMessages',
+                            actions: 'assignLoadedMessages',
+                        },
+                        onError: {
+                            // If loading messages fails, continue without them
+                            target: 'connectingToRealtime',
+                        },
+                    },
+                },
+                spawningPersistedMessages: {
+                    entry: 'spawnPersistedMessageActors',
+                    always: 'connectingToRealtime',
+                },
+                connectingToRealtime: {
+                    invoke: {
+                        src: 'initializeRealtimeConnection',
+                        input: ({ context }) => {
+                            var _a;
+                            return ({
+                                webchatService: context.webchatService,
+                                user: context.user,
+                                messages: ((_a = context.messages) !== null && _a !== void 0 ? _a : []).map(WebchatMessageFactory.fromStoredMessage),
+                            });
+                        },
+                        onDone: {
+                            target: '#webchat.operational',
+                            actions: [
+                                assign({
+                                    connectionStatus: () => 'connected',
+                                }),
+                                'saveUser',
+                                'emitInitializationCompleted',
+                            ],
+                        },
+                        onError: {
+                            // Continue without realtime if it fails (same as current behavior)
+                            target: '#webchat.operational',
+                            actions: [
+                                assign({
+                                    connectionStatus: () => 'disconnected',
+                                }),
+                                'saveUser',
+                                'emitInitializationCompleted',
+                                ({ event }) => {
+                                    console.warn('⚠️ Realtime connection failed, continuing without realtime:', event);
+                                },
+                            ],
+                        },
+                    },
+                },
+            },
+        },
+        connectionFailed: {
+            on: {
+                RETRY_CONNECTION: 'initializing',
+            },
+        },
+        reconnecting: {
+            entry: assign({
+                connectionStatus: () => 'connecting',
+            }),
+            invoke: {
+                src: 'reconnectToRealtime',
+                input: ({ context }) => {
+                    var _a;
+                    return ({
+                        webchatService: context.webchatService,
+                        user: context.user,
+                        messages: ((_a = context.messages) !== null && _a !== void 0 ? _a : []).map(WebchatMessageFactory.fromStoredMessage),
+                        attempt: context.reconnectAttempt || 0,
+                    });
+                },
+                onDone: {
+                    target: 'operational',
+                    actions: [
+                        assign({
+                            connectionStatus: () => 'connected',
+                            reconnectAttempt: () => 0,
+                        }),
+                        () => {
+                            console.log('✅ Reconnected successfully');
+                        },
+                    ],
+                },
+                onError: [
+                    {
+                        // Max retries reached
+                        guard: 'isMaxReconnectAttempts',
+                        target: 'connectionFailed',
+                        actions: [
+                            ({ event }) => {
+                                console.error('❌ Max reconnection attempts reached:', event);
+                            },
+                        ],
+                    },
+                    {
+                        // Retry with backoff
+                        target: 'reconnecting',
+                        reenter: true,
+                        actions: [
+                            assign({
+                                reconnectAttempt: ({ context }) => (context.reconnectAttempt || 0) + 1,
+                            }),
+                            ({ context }) => {
+                                const attempt = context.reconnectAttempt || 0;
+                                const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
+                                console.log(`⏳ Reconnection attempt ${attempt + 1} failed, retrying in ${delay}ms...`);
+                            },
+                        ],
+                    },
+                ],
+            },
+            on: {
+                CANCEL_RECONNECT: {
+                    target: 'operational',
+                    actions: [
+                        assign({
+                            connectionStatus: () => 'disconnected',
+                            reconnectAttempt: () => 0,
+                        }),
+                    ],
+                },
+            },
+        },
+        operational: {
+            entry: 'subscribeToWebchatService',
+            exit: 'cleanupWebchatServiceSubscriptions',
+            on: {
+                // Connection monitoring events
+                CONNECTION_STATUS_CHANGED: [
+                    {
+                        // Auto-reconnect on disconnect
+                        guard: ({ event }) => event.status === 'disconnected',
+                        target: 'reconnecting',
+                        actions: [
+                            'updateConnectionStatus',
+                            'emitConnectionChanged',
+                            () => {
+                                console.log('📡 Connection lost, attempting to reconnect...');
+                            },
+                        ],
+                    },
+                    {
+                        // Other status changes just update context
+                        actions: [
+                            'updateConnectionStatus',
+                            'emitConnectionChanged',
+                            ({ event }) => {
+                                console.log(`📡 Connection status updated: ${event.status}`);
+                            },
+                        ],
+                    },
+                ],
+                // Allow manual reconnection trigger
+                RECONNECT: {
+                    guard: 'isInitialized',
+                    target: 'reconnecting',
+                },
+                // Handle operational events directly
+                TOGGLE_WEBCHAT: {
+                    guard: 'isInitialized',
+                    actions: ['toggleWebchat', 'emitWebchatToggled'],
+                },
+                SEND_MESSAGE: {
+                    guard: 'isInitialized',
+                    actions: [
+                        'addMessage',
+                        'saveMessages',
+                        'emitMessageAdded',
+                        'emitMessageSent',
+                    ],
+                },
+                MESSAGE_RECEIVED: [
+                    {
+                        guard: and(['isInitialized', 'isTypingEvent']),
+                        actions: ['setTyping'],
+                    },
+                    {
+                        guard: 'isInitialized',
+                        actions: [
+                            'addMessage',
+                            'saveMessages',
+                            'emitMessageAdded',
+                            'emitMessageReceived',
+                        ],
+                    },
+                ],
+                MESSAGE_STATUS_CHANGED: {
+                    guard: 'isInitialized',
+                    actions: ['saveMessages'],
+                },
+                // User management
+                UPDATE_USER: {
+                    guard: 'isInitialized',
+                    actions: ['updateUser', 'saveUser', 'emitUserUpdated'],
+                },
+                // Message management
+                CLEAR_MESSAGES: {
+                    guard: 'isInitialized',
+                    actions: ['clearMessages', 'saveMessages', 'emitMessagesCleared'],
+                },
+                UPDATE_MESSAGE: {
+                    guard: 'isInitialized',
+                    actions: ['updateMessage', 'saveMessages', 'emitMessageUpdated'],
+                },
+                DELETE_MESSAGE: {
+                    guard: 'isInitialized',
+                    actions: ['deleteMessage', 'saveMessages', 'emitMessageDeleted'],
+                },
+                // Connection management
+                SET_ONLINE: {
+                    guard: 'isInitialized',
+                    actions: ['setOnline'],
+                },
+                // Typing indicator control
+                SET_TYPING: {
+                    guard: 'isInitialized',
+                    actions: ['setTypingExternal'],
+                },
+                // Listen for persistence requests from message actors
+                'PERSISTENCE.SAVE_MESSAGE': {
+                    guard: 'isInitialized',
+                    actions: ['saveMessages'],
+                },
+                // Forward WEBVIEW.OPEN from message actors to overlay actor
+                'WEBVIEW.OPEN': {
+                    guard: 'isInitialized',
+                    actions: ['forwardWebviewOpenToOverlay'],
+                },
+                // Allow re-initialization if needed
+                INITIALIZE: 'initializing',
+            },
+        },
+    },
+});
+// Factory function for creating webchat machine actors
+export function createWebchatMachine(webchatConfig) {
+    return createActor(WebchatMachine, { input: webchatConfig });
+}
+//# sourceMappingURL=webchat.js.map