@servicetitan/titan-chat-ui 1.1.1 → 2.0.0

package/src/models/support-chat.ts

@@ -28,14 +28,6 @@ export interface ChatParticipantModel {
     icon: ChatParticipantIcon;
 }
 
-export type ChatMessageModelType =
-    | 'welcome'
-    | 'message'
-    | 'timeout'
-    | 'file'
-    | 'askSupport'
-    | 'askSupportButtons';
-
 export interface ChatConfiguration {
     agentName?: string;
     agentIcon?: ChatParticipantIcon;
@@ -44,7 +36,7 @@ export interface ChatConfiguration {
 export interface ChatMessageModelBase {
     id: string;
     timestamp: Date;
-    type: ChatMessageModelType;
+    type: string;
     participant: ChatParticipantModel;
     state: ChatMessageState;
     data?: any;
@@ -69,7 +61,7 @@ export interface ChatMessageModelFile extends ChatMessageModelBase {
     fileName: string;
 }
 
-type ChatErrorRecoverStrategy =
+export type ChatErrorRecoverStrategy =
     | {
           recoverButtonTitle: string;
       }
@@ -94,6 +86,26 @@ export class ChatError<T = any> extends Error {
         this.data = options?.data;
         Object.setPrototypeOf(this, ChatError.prototype);
     }
+
+    toJSON(): Record<string, any> {
+        return {
+            name: this.name,
+            message: this.message,
+            title: this.title,
+            recoverStrategy: this.recoverStrategy,
+            data: this.data,
+        };
+    }
+
+    fromJSON(json: Record<string, any>): ChatError<T> {
+        const error = new ChatError<T>(json.message, {
+            title: json.title,
+            recoverStrategy: json.recoverStrategy,
+            data: json.data,
+        });
+        error.name = json.name;
+        return error;
+    }
 }
 
 export enum ChatRunState {

package/src/stores/__mocks-cy__/chat-ui.store.mock.ts

@@ -2,6 +2,7 @@ import { FileDescriptor } from '@servicetitan/form';
 import {
     ChatConfiguration,
     ChatCustomizations,
+    ChatEndReason,
     ChatError,
     ChatErrorOptions,
     ChatMessageModelBase,
@@ -84,6 +85,8 @@ export class ChatUiStoreMock implements IChatUiStore {
     off: <T>(event: string, listener: ChatUiEventListener<T>) => void = cy.stub();
     on: <T>(event: string, listener: ChatUiEventListener<T>) => void = cy.stub();
     resetError: (runState: ChatRunState) => void = cy.stub();
+    reset: (resetState?: boolean) => void = cy.stub();
+    resetFile: () => void = cy.stub();
     setAgentTyping: (typing: boolean) => void = cy.stub();
     setChatError: (chatError: ChatError) => void = cy.stub();
     setError: <T = any>(message: string, options?: ChatErrorOptions<T>) => void = cy.stub();
@@ -104,4 +107,7 @@ export class ChatUiStoreMock implements IChatUiStore {
     setStatus: (status: ChatRunState) => void = cy.stub();
     setTimer: (timer?: ChatTimer) => void = cy.stub();
     restartTimers: () => Promise<void> = cy.stub();
+    restart: () => Promise<void> = cy.stub();
+    cancelChat: () => Promise<void> = cy.stub();
+    endChat: (endReason?: ChatEndReason) => Promise<void> = cy.stub();
 }

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

@@ -0,0 +1,39 @@
+import { expect } from '@jest/globals';
+import { Container } from '@servicetitan/react-ioc';
+import { initTestContainer } from '../../utils/test-utils';
+import { ChatInputStore } from '../chat-input.store';
+
+const initContainer = initTestContainer(ChatInputStore, () => {});
+
+describe('[ChatInputStore]', () => {
+    let container: Container;
+    let store: ChatInputStore;
+
+    beforeEach(() => {
+        container = initContainer();
+        store = container.get(ChatInputStore);
+    });
+
+    test('should have proper form state', async () => {
+        expect(store.formState.$.message).toBeDefined();
+        expect(store.formState.$.message.value).toBe('');
+        const validateResult = await store.formState.validate();
+        expect(validateResult.hasError).toBe(false);
+
+        store.formState.$.message.onChange('test');
+        expect(store.formState.$.message.value).toBe('test');
+        const validateResult2 = await store.formState.validate();
+        expect(validateResult2.hasError).toBe(false);
+
+        store.formState.$.message.onChange('a'.repeat(6000));
+        expect(store.formState.$.message.value).toBe('a'.repeat(6000));
+        const validateResult3 = await store.formState.validate();
+        expect(validateResult3.hasError).toBe(false);
+
+        store.formState.$.message.onChange('a'.repeat(6001));
+        expect(store.formState.$.message.value).toBe('a'.repeat(6001));
+        const validateResult4 = await store.formState.validate();
+        expect(validateResult4.hasError).toBe(true);
+        expect(store.formState.$.message.error).toBe('Message character max is 6000.');
+    });
+});

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

@@ -13,7 +13,6 @@ import {
     ChatMessageModelFile,
     ChatMessageModelText,
     ChatMessageModelTimeout,
-    ChatMessageModelType,
     ChatMessageModelWelcome,
     ChatMessageState,
     ChatParticipantIcon,
@@ -29,12 +28,15 @@ export enum ChatUiEvent {
     eventRun = 'eventRun',
     eventDestroy = 'eventDestroy',
     eventRestart = 'eventRestart',
+    eventCancel = 'eventCancel',
+    eventEndChat = 'eventEndChat',
     eventRecover = 'eventRecover',
     eventChasitorTyping = 'eventChasitorTyping',
     eventTimerRestart = 'eventTimerRestart',
     eventMessageSend = 'eventMessageSend',
-    eventMessageSendFile = 'eventMessageSendFile',
     eventMessageSendRetry = 'eventMessageSendRetry',
+    eventMessageSendFile = 'eventMessageSendFile',
+    eventMessageSendFileRetry = 'eventMessageSendFileRetry',
 }
 
 export type ChatUiEventListener<T = void> = (
@@ -82,6 +84,8 @@ export interface IChatUiStore<T extends ChatCustomizations = ChatCustomizations>
     setError<T = any>(message: string, options?: ChatErrorOptions<T>): void;
     setStatus(status: ChatRunState): void;
     resetError(runState: ChatRunState): void;
+    reset(resetStatus?: boolean): void;
+    resetFile(): void;
 
     triggerScroll(): void;
     configure(configuration?: ChatConfiguration): void;
@@ -90,6 +94,9 @@ export interface IChatUiStore<T extends ChatCustomizations = ChatCustomizations>
     destroy(): Promise<void>;
     chasitorTyping(isTyping: boolean): Promise<void>;
     restartTimers(): Promise<void>;
+    restart(): Promise<void>;
+    cancelChat(): Promise<void>;
+    endChat(endReason?: ChatEndReason): Promise<void>;
     sendMessageText(messageText: string): Promise<void>;
     sendMessageRetry(message: ChatMessageModelBase): Promise<void>;
     addMessage(isAgent: boolean, message: string, data?: any): void;
@@ -306,24 +313,21 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
         await this.emitAsync(ChatUiEvent.eventDestroy);
     }
 
-    restart() {
+    async restart() {
         this.reset();
-        this.eventEmitter.emit('restart');
+        await this.emitAsync(ChatUiEvent.eventRestart);
     }
 
-    cancelChat() {
-        this.eventEmitter.emit('cancelChat');
+    async cancelChat() {
+        await this.emitAsync(ChatUiEvent.eventCancel);
     }
 
-    endChat() {
-        this.eventEmitter.emit('endChat');
+    async endChat(endReason?: ChatEndReason) {
+        await this.emitAsync(ChatUiEvent.eventEndChat, endReason);
     }
 
     async chasitorTyping(isTyping: boolean) {
-        await this.emitAsync(
-            ChatUiEvent.eventChasitorTyping,
-            isTyping ? 'chasitorTyping' : 'chasitorNotTyping'
-        );
+        await this.emitAsync(ChatUiEvent.eventChasitorTyping, isTyping);
     }
 
     @action
@@ -358,10 +362,10 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
     }
 
     @action
-    sendMessageFileRetry(messageModel: ChatMessageModelFile) {
+    async sendMessageFileRetry(messageModel: ChatMessageModelFile) {
         this.resetError(ChatRunState.Started);
         this.setMessageState(messageModel, ChatMessageState.Delivering);
-        this.eventEmitter.emit('sendMessageFileRetry', messageModel);
+        await this.emitAsync(ChatUiEvent.eventMessageSendFileRetry, messageModel);
     }
 
     getParticipant(participantKey: symbol): ChatParticipantModel {
@@ -431,6 +435,26 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
         }
     }
 
+    @action
+    resetFile() {
+        this.currentFileMessage = undefined;
+        this.file = undefined;
+        this.isFilePickerEnabled = false;
+        this.triggerScroll();
+    }
+
+    @action
+    reset(resetStatus = true) {
+        this.setMessages([]);
+        if (resetStatus) {
+            this.status = ChatRunState.Offline;
+        }
+        this.error = undefined;
+        this.isAgentTyping = false;
+        this.endReason = undefined;
+        this.resetFile();
+    }
+
     getLastFailedMessages() {
         const result: ChatMessageModelText[] = [];
         for (let i = this.messages.length - 1; i >= 0; i--) {
@@ -453,26 +477,6 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
         }, 0);
     }
 
-    @action
-    protected reset(resetStatus = true) {
-        this.setMessages([]);
-        if (resetStatus) {
-            this.status = ChatRunState.Offline;
-        }
-        this.error = undefined;
-        this.isAgentTyping = false;
-        this.endReason = undefined;
-        this.resetFile();
-    }
-
-    @action
-    protected resetFile() {
-        this.currentFileMessage = undefined;
-        this.file = undefined;
-        this.isFilePickerEnabled = false;
-        this.triggerScroll();
-    }
-
     protected async emitAsync<T>(event: string, ...args: unknown[]) {
         if (!this.eventEmitter.listenerCount(event)) {
             return Promise.resolve();
@@ -482,23 +486,14 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
         });
     }
 
-    private async sendMessageTextInternal(message: string) {
-        if (message.trim() === '') {
-            return;
-        }
-        const messageModel = this.addMessage(false, message);
-        await this.emitAsync(ChatUiEvent.eventMessageSend, messageModel);
-    }
-
-    private addMessageInternal<T extends ChatMessageModelBase>(
+    protected addMessageInternal<T extends ChatMessageModelBase>(
         message: Omit<T, 'id' | 'timestamp'>
     ): T {
         if (message.type === 'timeout') {
             this.removeMessageByType('timeout'); // Remove previous timeout messages
         } else {
-            this.restartTimers();
+            this.restartTimers().then(() => {});
         }
-        this.removeAskSupportButtons();
         const newMessage = this.createMessage<T>(message);
         this.setMessages([...this.messages, newMessage]);
         if (message.participant.isAgent) {
@@ -507,6 +502,20 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
         return newMessage;
     }
 
+    protected removeMessageByType(type: string) {
+        if (this.messages.some(m => m.type === type)) {
+            this.setMessages(this.messages.filter(m => m.type !== type));
+        }
+    }
+
+    private async sendMessageTextInternal(message: string) {
+        if (message.trim() === '') {
+            return;
+        }
+        const messageModel = this.addMessage(false, message);
+        await this.emitAsync(ChatUiEvent.eventMessageSend, messageModel);
+    }
+
     private createMessage<T extends ChatMessageModelBase>(rest: Omit<T, 'id' | 'timestamp'>) {
         return {
             id: nanoid(),
@@ -528,14 +537,4 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
             this.incomingMessageSoundPromise = undefined;
         }
     }
-
-    private removeMessageByType(type: ChatMessageModelType) {
-        if (this.messages.some(m => m.type === type)) {
-            this.setMessages(this.messages.filter(m => m.type !== type));
-        }
-    }
-
-    private removeAskSupportButtons() {
-        this.removeMessageByType('askSupportButtons');
-    }
 }

package/src/utils/test-utils.ts

@@ -0,0 +1,22 @@
+import { Container } from '@servicetitan/react-ioc';
+
+type Newable<T> = new (...args: never[]) => T;
+
+export const initTestContainer = (
+    serviceIdentifier: Newable<unknown> | Newable<unknown>[],
+    initDependenciesFn: (container: Container) => void
+) => {
+    const rootContainer = new Container();
+    if (Array.isArray(serviceIdentifier)) {
+        serviceIdentifier.forEach(identifier => rootContainer.bind(identifier).toSelf());
+    } else {
+        rootContainer.bind(serviceIdentifier).toSelf();
+    }
+
+    return () => {
+        const container = new Container();
+        container.parent = rootContainer;
+        initDependenciesFn(container);
+        return container;
+    };
+};

package/tsconfig.json

@@ -9,7 +9,6 @@
     },
     "include": ["src/**/*"],
     "exclude": [
-        "node_modules",
-        "src/**/__tests__/**/*"
+        "node_modules"
     ]
 }