@servicetitan/titan-chat-ui 2.1.1 → 3.0.0

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

@@ -1,531 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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;
-}