@servicetitan/titan-chat-ui-common 3.0.0

package/src/stores/__tests__/chat-ui.store.test.ts

@@ -0,0 +1,531 @@
+import { expect } from '@jest/globals';
+import { FileDescriptor } from '@servicetitan/form';
+import { Container } from '@servicetitan/react-ioc';
+import {
+    ChatCustomizations,
+    ChatEndReason,
+    ChatError,
+    ChatMessageModelBase,
+    ChatMessageModelText,
+    ChatMessageModelWelcome,
+    ChatMessageState,
+    ChatParticipantIcon,
+    ChatRunState,
+} from '../../models';
+import { initTestContainer } from '../../utils/test-utils';
+import { ChatUiEvent, ChatUiStore, symbolAgent, symbolUser } from '../chat-ui.store';
+
+const mockAudio = {
+    Audio: {
+        play: jest.fn().mockResolvedValue(undefined),
+    },
+};
+const mockEventEmitter = {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+    listeners: jest.fn(),
+    listenerCount: jest.fn(),
+};
+jest.mock('events', () => ({
+    EventEmitter: class {
+        on = mockEventEmitter.on;
+        off = mockEventEmitter.off;
+        emit = mockEventEmitter.emit;
+        listeners = mockEventEmitter.listeners;
+        listenerCount = mockEventEmitter.listenerCount;
+    },
+}));
+
+const initContainer = initTestContainer(ChatUiStore, () => {});
+
+describe('[ChatUiStore]', () => {
+    let container: Container;
+    let store: ChatUiStore<ChatCustomizations>;
+    let audioBackup: any;
+
+    beforeEach(() => {
+        container = initContainer();
+        store = container.get(ChatUiStore);
+        jest.useFakeTimers();
+        jest.setSystemTime(Date.parse('2021-01-01T00:00:00.000Z'));
+        audioBackup = global.Audio;
+        global.Audio = jest.fn().mockImplementation(() => ({
+            play: mockAudio.Audio.play,
+        }));
+    });
+
+    afterEach(() => {
+        if (audioBackup) {
+            global.Audio = audioBackup;
+        }
+        jest.useRealTimers();
+        jest.clearAllMocks();
+        mockEventEmitter.on.mockClear();
+        mockEventEmitter.off.mockClear();
+        mockEventEmitter.emit.mockClear();
+        mockEventEmitter.listeners.mockClear();
+        mockEventEmitter.listenerCount.mockClear();
+    });
+
+    test('should initialize with default values', () => {
+        expect(store.isAgentTyping).toBe(false);
+        expect(store.status).toBe(ChatRunState.Offline);
+        expect(store.isFilePickerEnabled).toBe(false);
+        expect(store.file).toBeUndefined();
+        expect(store.currentFileMessage).toBeUndefined();
+        expect(store.error).toBeUndefined();
+        expect(store.endReason).toBeUndefined();
+        expect(store.messages).toEqual([]);
+        expect(store.scrollCounter).toBe(1);
+        expect(store.timer).toBeUndefined();
+        expect(store.participants[symbolAgent].isAgent).toBe(true);
+        expect(store.participants[symbolAgent].name).toBe('Agent');
+        expect(store.participants[symbolAgent].icon).toBe(ChatParticipantIcon.Initials);
+        expect(store.participants[symbolUser].isAgent).toBe(false);
+        expect(store.participants[symbolUser].name).toBe('User');
+        expect(store.participants[symbolUser].icon).toBe(ChatParticipantIcon.Initials);
+        // Getters
+        expect(store.agent).toBe(store.participants[symbolAgent]);
+        expect(store.user).toBe(store.participants[symbolUser]);
+        expect(store.isStarted).toBe(false);
+        expect(store.isError).toBe(false);
+        expect(store.isEnded).toBe(false);
+        expect(store.isStarting).toBe(false);
+        expect(store.customizations).toEqual({});
+    });
+
+    test('should subscribe and unsubscribe to events', () => {
+        const mockCallback = jest.fn();
+        store.on('testEvent', mockCallback);
+        expect(mockEventEmitter.on).toHaveBeenCalledWith('testEvent', mockCallback);
+
+        store.off('testEvent', mockCallback);
+        expect(mockEventEmitter.off).toHaveBeenCalledWith('testEvent', mockCallback);
+    });
+
+    test('should set customizations context', async () => {
+        const customizations = { abc: '123' } as ChatCustomizations;
+        store.setCustomizationContext(customizations);
+        expect(store.customizations).toEqual(customizations);
+        await checkScrollTriggered();
+    });
+
+    test('should getLastFailedMessages', () => {
+        store.addMessage(false, 'message1');
+        const m2 = store.addMessage(false, 'message2');
+        const m3 = store.addMessage(false, 'message3');
+        expect(store.getLastFailedMessages()).toEqual([]);
+
+        store.setMessageState(m3, ChatMessageState.Failed);
+        let failedMessages = store.getLastFailedMessages();
+        expect(failedMessages).toEqual([m3]);
+
+        store.setMessageState(m2, ChatMessageState.Failed);
+        failedMessages = store.getLastFailedMessages();
+        expect(failedMessages).toEqual([m3, m2]);
+    });
+
+    describe('with file messages', () => {
+        test('should set file', () => {
+            const file = mockFile();
+            store.setFile(file);
+            expect(store.file).toBe(file);
+
+            store.setFile(undefined);
+            expect(store.file).toBeUndefined();
+        });
+
+        test('should set file picker enabled state', async () => {
+            store.setFile(mockFile());
+            store.setFilePickerEnabled(true);
+            expect(store.isFilePickerEnabled).toBe(true);
+            expect(store.file).toBeUndefined();
+            await checkScrollTriggered();
+
+            store.setFile(mockFile());
+            store.setFilePickerEnabled(false);
+            expect(store.isFilePickerEnabled).toBe(false);
+            expect(store.file).toBeUndefined();
+            await checkScrollTriggered();
+        });
+    });
+
+    describe('with chat errors', () => {
+        test('should set error', async () => {
+            store.setError('Test error', {
+                title: 'Test error title',
+                recoverStrategy: { recoverButtonTitle: 'Test error button' },
+                data: { some: 'data' },
+            });
+            expect(store.error?.toJSON()).toEqual({
+                data: { some: 'data' },
+                message: 'Test error',
+                name: 'ChatError',
+                recoverStrategy: {
+                    recoverButtonTitle: 'Test error button',
+                },
+                title: 'Test error title',
+            });
+            expect(store.status).toBe(ChatRunState.Error);
+            expect(store.isError).toBe(true);
+            await checkScrollTriggered();
+        });
+
+        test('should reset error', async () => {
+            store.setError('Test error');
+            store.resetError(ChatRunState.Started);
+            expect(store.error).toBeUndefined();
+            expect(store.status).toBe(ChatRunState.Started);
+            await checkScrollTriggered();
+        });
+    });
+
+    describe('with messages', () => {
+        function expectText(message: ChatMessageModelBase, expected: string) {
+            expect(message.type).toBe('message');
+            expect((message as ChatMessageModelText).message).toBe(expected);
+        }
+
+        test('should add message without sound', async () => {
+            store.addMessageWelcome('welcome');
+            await jest.runOnlyPendingTimersAsync();
+            expect(mockAudio.Audio.play).toHaveBeenCalledTimes(0);
+        });
+
+        test('should add message', async () => {
+            store.setIncomingSound('non-existing-sound.mp3');
+            store.setIncomingSound('non-existing-sound2.mp3');
+
+            // Welcome message
+            store.addMessageWelcome('welcome');
+            await jest.runOnlyPendingTimersAsync();
+            expect(mockAudio.Audio.play).toHaveBeenCalledTimes(1);
+
+            // Incoming message
+            store.addMessage(true, 'message1');
+            await jest.runOnlyPendingTimersAsync();
+            expect(mockAudio.Audio.play).toHaveBeenCalledTimes(2);
+
+            // Outgoing message
+            store.addMessage(false, 'message2');
+            await jest.runOnlyPendingTimersAsync();
+            expect(mockAudio.Audio.play).toHaveBeenCalledTimes(2); // No sound for outgoing messages
+
+            // File message
+            store.addMessageFile({
+                file: new File([], 'fileName'),
+                displayName: 'displayName',
+            });
+            await jest.runOnlyPendingTimersAsync();
+            expect(mockAudio.Audio.play).toHaveBeenCalledTimes(2); // No sound for outgoing messages
+
+            expect(store.messages.length).toBe(4);
+            expect(store.messages[0].participant.isAgent).toBe(true);
+            expect((store.messages[0] as ChatMessageModelWelcome).message).toBe('welcome');
+            expect(store.messages[1].participant.isAgent).toBe(true);
+            expectText(store.messages[1], 'message1');
+            expect(store.messages[2].participant.isAgent).toBe(false);
+            expectText(store.messages[2], 'message2');
+            expect(store.messages[3].participant.isAgent).toBe(false);
+            expect(store.messages[3].type).toBe('file');
+        });
+
+        test('should addMessageTimeout', async () => {
+            // Adding timeout message should not happen when no messages are present
+            store.addMessageTimeout();
+            expect(store.messages.length).toBe(0);
+
+            // Adding timeout message should not happen when no non-welcome messages are present
+            store.addMessageWelcome('welcome');
+            store.addMessageTimeout();
+            expect(store.messages.length).toBe(1);
+            expect(store.messages[0].type).toBe('welcome');
+
+            // Adding timeout message should happen when at least one message is present
+            store.addMessage(true, 'message1');
+            store.addMessageTimeout();
+            expect(store.messages.length).toBe(3);
+            expect(store.messages.at(-1)?.type).toBe('timeout');
+
+            // Adding new message should dismiss the timeout message
+            store.addMessage(true, 'message2');
+            expect(store.messages.some(message => message.type === 'timeout')).toBe(false);
+            await checkScrollTriggered();
+        });
+    });
+
+    test('should configure', () => {
+        store.configure({
+            agentIcon: ChatParticipantIcon.Bot,
+            agentName: 'Test Agent',
+        });
+        expect(store.participants[symbolAgent].icon).toBe(ChatParticipantIcon.Bot);
+        expect(store.participants[symbolAgent].name).toBe('Test Agent');
+    });
+
+    describe('with chat events', () => {
+        test('should run', async () => {
+            // Without subscription: should throw an error
+            mockEventEmitter.listeners.mockImplementation(() => []);
+            await expect(store.run()).rejects.toThrow(
+                "No listeners for ChatUiEvent.eventRun ('eventRun')"
+            );
+
+            const spyConfigure = jest.spyOn(store, 'configure');
+            mockEmit();
+
+            await store.run(
+                {
+                    agentIcon: ChatParticipantIcon.Bot,
+                    agentName: 'Test Agent',
+                },
+                'chat data'
+            );
+
+            expect(spyConfigure).toHaveBeenCalled();
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventRun,
+                expect.any(Function),
+                expect.any(Function),
+                'chat data'
+            );
+        });
+
+        test('should recover', async () => {
+            mockEmit();
+            store.setError('Test error');
+            await store.recover();
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventRecover,
+                expect.any(Function),
+                expect.any(Function),
+                new ChatError('Test error')
+            );
+        });
+
+        test('should destroy', async () => {
+            const spyReset = jest.spyOn(store, 'reset');
+            mockEmit();
+            await store.destroy();
+            expect(spyReset).toHaveBeenCalledWith();
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventDestroy,
+                expect.any(Function),
+                expect.any(Function)
+            );
+        });
+
+        test('should restart', async () => {
+            const spyReset = jest.spyOn(store, 'reset');
+            mockEmit();
+            await store.restart();
+            expect(spyReset).toHaveBeenCalledWith();
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventRestart,
+                expect.any(Function),
+                expect.any(Function)
+            );
+        });
+
+        test('should cancelChat', async () => {
+            mockEmit();
+            await store.cancelChat();
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventCancel,
+                expect.any(Function),
+                expect.any(Function)
+            );
+        });
+
+        test('should endChat', async () => {
+            mockEmit();
+            await store.endChat(ChatEndReason.ByAgent);
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventEndChat,
+                expect.any(Function),
+                expect.any(Function),
+                ChatEndReason.ByAgent
+            );
+        });
+
+        test('should chasitorTyping', async () => {
+            mockEmit();
+            await store.chasitorTyping(false);
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventChasitorTyping,
+                expect.any(Function),
+                expect.any(Function),
+                false
+            );
+
+            await store.chasitorTyping(true);
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventChasitorTyping,
+                expect.any(Function),
+                expect.any(Function),
+                true
+            );
+        });
+
+        test('should sendMessageText', async () => {
+            mockEmit();
+            await store.sendMessageText('Hello, world!');
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventMessageSend,
+                expect.any(Function),
+                expect.any(Function),
+                expect.objectContaining({
+                    message: 'Hello, world!',
+                    type: 'message',
+                    state: ChatMessageState.Delivering,
+                })
+            );
+            expect(store.messages.length).toBe(1);
+            expect(store.messages[0].type).toBe('message');
+            expect((store.messages[0] as ChatMessageModelText).message).toBe('Hello, world!');
+            await checkScrollTriggered();
+        });
+
+        test('should sendMessageText with file', async () => {
+            mockEmit();
+            const file = mockFile();
+            store.setFilePickerEnabled(true);
+            store.setFile(file);
+            await store.sendMessageText('Hello, world!');
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventMessageSendFile,
+                expect.any(Function),
+                expect.any(Function),
+                store.currentFileMessage,
+                store.file,
+                expect.objectContaining({
+                    message: 'Hello, world!',
+                    type: 'message',
+                    state: ChatMessageState.Delivering,
+                })
+            );
+            expect(store.messages.length).toBe(2);
+            expect(store.messages[0].type).toBe('file');
+            expect(store.messages[1].type).toBe('message');
+            expect((store.messages[1] as ChatMessageModelText).message).toBe('Hello, world!');
+            expect(store.currentFileMessage).toBeDefined();
+            await checkScrollTriggered();
+        });
+
+        test('should sendMessageText empty', async () => {
+            mockEmit();
+            await store.sendMessageText('   ');
+            expect(mockEventEmitter.emit).not.toHaveBeenCalled();
+        });
+
+        test('should sendMessageRetry', async () => {
+            mockEmit();
+
+            store.setError('Test error');
+            const message = store.addMessage(true, 'message1');
+            store.setMessageState(message, ChatMessageState.Failed);
+
+            const p = store.sendMessageRetry(message);
+
+            expect(message.state).toBe(ChatMessageState.Delivering);
+            await p;
+            expect(store.isError).toBe(false);
+            expect(store.status).toBe(ChatRunState.Started);
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventMessageSendRetry,
+                expect.any(Function),
+                expect.any(Function),
+                message
+            );
+            expect(message.state).toBe(ChatMessageState.Delivering);
+            await checkScrollTriggered();
+        });
+
+        test('should sendMessageFileRetry', async () => {
+            mockEmit();
+
+            store.setError('Test error');
+            const fileMessage = store.addMessageFile({
+                file: new File([], 'fileName'),
+                displayName: 'displayName',
+            });
+            store.setMessageState(fileMessage, ChatMessageState.Failed);
+
+            const p = store.sendMessageFileRetry(fileMessage);
+
+            expect(fileMessage.state).toBe(ChatMessageState.Delivering);
+            await p;
+            expect(store.isError).toBe(false);
+            expect(store.status).toBe(ChatRunState.Started);
+            expect(mockEventEmitter.emit).toHaveBeenCalledWith(
+                ChatUiEvent.eventMessageSendFileRetry,
+                expect.any(Function),
+                expect.any(Function),
+                fileMessage
+            );
+            expect(fileMessage.state).toBe(ChatMessageState.Delivering);
+            await checkScrollTriggered();
+        });
+    });
+
+    test('should setTimer', () => {
+        store.setTimer({ secondsLeft: 10, secondsTotal: 20 });
+        expect(store.timer).toEqual({
+            secondsLeft: 10,
+            secondsTotal: 20,
+        });
+    });
+
+    test('should setAgentTyping', async () => {
+        store.setAgentTyping(true);
+        expect(store.isAgentTyping).toBe(true);
+        await checkScrollTriggered();
+
+        store.setAgentTyping(false);
+        expect(store.isAgentTyping).toBe(false);
+        await checkScrollTriggered();
+    });
+
+    test('should setEndReason', async () => {
+        store.setEndReason(ChatEndReason.ByTimeout);
+        expect(store.endReason).toBe(ChatEndReason.ByTimeout);
+        await checkScrollTriggered();
+    });
+
+    test('should setEndedChatState', async () => {
+        store.isFilePickerEnabled = true;
+        store.setFile(mockFile());
+        store.setEndedChatState(ChatEndReason.ByTimeout);
+        expect(store.endReason).toBe(ChatEndReason.ByTimeout);
+        expect(store.status).toBe(ChatRunState.Ended);
+        expect(store.isAgentTyping).toBe(false);
+        expect(store.currentFileMessage).toBeUndefined();
+        expect(store.file).toBeUndefined();
+        expect(store.isFilePickerEnabled).toBe(false);
+        await checkScrollTriggered();
+    });
+
+    function mockFile() {
+        const file: FileDescriptor = {
+            file: new File(['content'], 'file.txt', { type: 'text/plain' }),
+            displayName: 'file.txt',
+        };
+        return file;
+    }
+
+    function mockEmit() {
+        mockEventEmitter.listeners.mockImplementation(() => ['1']);
+        mockEventEmitter.listenerCount.mockReturnValue(1);
+        mockEventEmitter.emit.mockImplementation(async (eventName: string, resolve: () => void) => {
+            await Promise.resolve();
+            resolve();
+        });
+    }
+
+    async function checkScrollTriggered() {
+        const counter = store.scrollCounter;
+        await jest.runOnlyPendingTimersAsync();
+        expect(counter < store.scrollCounter).toBe(true);
+    }
+});

package/src/stores/chat-ui-backend-echo.store.ts

@@ -0,0 +1,98 @@
+import { inject, injectable } from '@servicetitan/react-ioc';
+import {
+    ChatMessageModelBase,
+    ChatMessageModelText,
+    ChatMessageState,
+    ChatRunState,
+} from '../models';
+import { IChatUiBackendStore } from './chat-ui-backend.store';
+import {
+    CHAT_UI_STORE_TOKEN,
+    ChatUiEvent,
+    ChatUiEventListener,
+    IChatUiStore,
+} from './chat-ui.store';
+
+@injectable()
+export class ChatUiBackendEchoStore implements IChatUiBackendStore {
+    constructor(@inject(CHAT_UI_STORE_TOKEN) readonly chatUiStore: IChatUiStore) {}
+
+    subscribe() {
+        this.chatUiStore.on(ChatUiEvent.eventRun, this.handleRun);
+        this.chatUiStore.on(ChatUiEvent.eventMessageSend, this.handleTextMessageSend);
+        this.chatUiStore.on(ChatUiEvent.eventMessageSendRetry, this.handleMessageSendRetry);
+    }
+
+    unsubscribe() {
+        this.chatUiStore.off(ChatUiEvent.eventRun, this.handleRun);
+        this.chatUiStore.off(ChatUiEvent.eventMessageSend, this.handleTextMessageSend);
+        this.chatUiStore.off(ChatUiEvent.eventMessageSendRetry, this.handleMessageSendRetry);
+    }
+
+    private handleRun: ChatUiEventListener = async (resolve, _) => {
+        this.chatUiStore.setStatus(ChatRunState.Initializing);
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        this.chatUiStore.addMessageWelcome(
+            "Hello! I'm generic echo bot. I can echo your messages. Try it out!"
+        );
+        this.chatUiStore.setStatus(ChatRunState.Started);
+        resolve();
+    };
+
+    private handleTextMessageSend: ChatUiEventListener = async (
+        resolve,
+        _,
+        message: ChatMessageModelText
+    ) => {
+        const isErrorSimulated = message.message.startsWith('[Error]');
+        try {
+            this.chatUiStore.setAgentTyping(true);
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            if (isErrorSimulated) {
+                throw new Error(message.message.split('[Error]')[1]);
+            }
+            this.chatUiStore.setMessageState(message, ChatMessageState.Delivered);
+            this.chatUiStore.addMessage(true, this.getEchoAnswer(message));
+            this.chatUiStore.resetError(ChatRunState.Started);
+            resolve();
+        } catch (error: any) {
+            this.chatUiStore.setMessageState(message, ChatMessageState.Failed);
+            this.chatUiStore.setError(error?.message ?? error, {
+                title: 'Custom Error Title',
+            });
+        } finally {
+            this.chatUiStore.setAgentTyping(false);
+        }
+    };
+
+    private handleMessageSendRetry: ChatUiEventListener = async (
+        resolve,
+        _,
+        message: ChatMessageModelBase
+    ) => {
+        try {
+            this.chatUiStore.setMessageState(message, ChatMessageState.Delivering);
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            this.chatUiStore.setMessageState(message, ChatMessageState.Delivered);
+            this.chatUiStore.addMessage(true, this.getEchoAnswer(message));
+            this.chatUiStore.resetError(ChatRunState.Started);
+            resolve();
+        } catch (error: any) {
+            this.chatUiStore.setMessageState(message, ChatMessageState.Failed);
+            this.chatUiStore.setError(error?.message ?? error, {
+                title: 'Custom Error Title',
+            });
+        }
+    };
+
+    private getEchoAnswer(message: ChatMessageModelBase) {
+        if (message.type === 'message') {
+            let messageText = (message as ChatMessageModelText).message;
+            if (messageText.startsWith('[Error]')) {
+                messageText = messageText.split('[Error]')[1];
+            }
+            return `Echo: ${messageText}`;
+        }
+        return `Echo bot cannot answer to message type ${message.type} yet`;
+    }
+}

package/src/stores/chat-ui-backend.store.ts

@@ -0,0 +1,10 @@
+import { symbolToken } from '@servicetitan/react-ioc';
+
+export const CHAT_UI_BACKEND_STORE_TOKEN = symbolToken<IChatUiBackendStore>(
+    'CHAT_UI_BACKEND_STORE_TOKEN'
+);
+
+export interface IChatUiBackendStore {
+    subscribe(): void;
+    unsubscribe(): void;
+}