@servicetitan/titan-chat-ui 1.0.1 → 1.1.1

package/src/components/chat/__tests-cy__/chat.test.tsx

@@ -94,12 +94,12 @@ describe('[Chat]', () => {
     it('should render default chat', () => {
         render().then(() => {
             cy.getCy('titan-chat-messages').should('be.visible');
-            cy.getCy('chat-message-agent')
-                .should('have.length', 1)
+            cy.getCy('chat-message-agent').should('have.length', 1).should('be.visible');
+            cy.getCy('chat-message-agent-content')
                 .should('be.visible')
                 .should(
                     'contain.text',
-                    'Hi there! I’m Titan, an AI chatbot powered by Titan Intelligence.'
+                    "Hello! I'm generic echo bot. I can echo your messages. Try it out!"
                 );
             cy.getCy('titan-chat-notifications').should('exist');
             cy.getCy('titan-chat-send').should('be.visible').should('be.disabled');
@@ -125,14 +125,19 @@ describe('[Chat]', () => {
     it('should render chat error message', () => {
         render().then(() => {
             chatUiStore.setTimer({ secondsTotal: 100, secondsLeft: 10 });
-            chatUiStore.setError('Custom error', 'error message', true);
+            chatUiStore.setError('error message', {
+                title: 'Custom Error',
+                recoverStrategy: {
+                    recoverButtonTitle: 'Recover button title',
+                },
+            });
 
             cy.getCy('titan-chat-timer').should('not.exist');
             cy.getCy('titan-chat-error').should('be.visible');
         });
     });
 
-    it.only('should handle send message error and retry', () => {
+    it('should handle send message error and retry', () => {
         render().then(() => {
             ask('[Error]Custom error message');
             cy.tick(1000);
@@ -143,10 +148,7 @@ describe('[Chat]', () => {
                 .should('contain.text', 'Message not delivered. Retry');
             cy.getCy('titan-chat-error')
                 .should('be.visible')
-                .should(
-                    'contain.text',
-                    ['Failed to send message', 'Custom error message'].join('')
-                );
+                .should('contain.text', ['Custom Error Title', 'Custom error message'].join(''));
 
             // Retry message
             cy.getCy('titan-chat-message-user-retry').should('be.visible').click();

package/src/components/chat/chat-error.tsx

@@ -1,37 +1,39 @@
-import { Banner, BodyText, Button } from '@servicetitan/design-system';
+import { Banner, Button } from '@servicetitan/design-system';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { observer } from 'mobx-react';
 import { FC, useCallback } from 'react';
 import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { MultilineText } from '../common/multiline-text';
 import * as Styles from './chat-error.module.less';
 
 export const ChatError: FC = observer(() => {
     const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+    const { error } = chatUiStore;
 
     const handleReconnect = useCallback(async () => {
         await chatUiStore.recover();
     }, [chatUiStore]);
 
-    if (!chatUiStore.error) {
+    if (!error) {
         return null;
     }
     return (
         <Banner
             status="critical"
-            title={chatUiStore.error.title}
+            title={error.title}
             icon
             className={Styles.banner}
             data-cy="titan-chat-error"
         >
-            <BodyText el="div">{chatUiStore.error.message}</BodyText>
-            {chatUiStore.error.isRecoverable && (
+            <MultilineText text={error.message} />
+            {error.recoverStrategy && (
                 <Button
                     className="m-t-2 bg-white-i"
                     small
                     onClick={handleReconnect}
                     data-cy="titan-chat-error-recover"
                 >
-                    Reconnect
+                    {error.recoverStrategy.recoverButtonTitle}
                 </Button>
             )}
         </Banner>

package/src/models/support-chat.ts

@@ -69,10 +69,31 @@ export interface ChatMessageModelFile extends ChatMessageModelBase {
     fileName: string;
 }
 
-export interface ChatUiStateError {
+type ChatErrorRecoverStrategy =
+    | {
+          recoverButtonTitle: string;
+      }
+    | false;
+
+export interface ChatErrorOptions<T = any> {
+    title?: string;
+    recoverStrategy?: ChatErrorRecoverStrategy;
+    data?: T;
+}
+
+export class ChatError<T = any> extends Error {
     title: string;
-    message: string;
-    isRecoverable?: boolean;
+    recoverStrategy: ChatErrorRecoverStrategy;
+    data?: T;
+
+    constructor(message: string, options?: ChatErrorOptions<T>) {
+        super(message);
+        this.name = 'ChatError';
+        this.title = options?.title ?? 'Chat Error';
+        this.recoverStrategy = options?.recoverStrategy ?? false;
+        this.data = options?.data;
+        Object.setPrototypeOf(this, ChatError.prototype);
+    }
 }
 
 export enum ChatRunState {

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

@@ -2,6 +2,8 @@ import { FileDescriptor } from '@servicetitan/form';
 import {
     ChatConfiguration,
     ChatCustomizations,
+    ChatError,
+    ChatErrorOptions,
     ChatMessageModelBase,
     ChatMessageModelText,
     ChatMessageModelWelcome,
@@ -83,8 +85,8 @@ export class ChatUiStoreMock implements IChatUiStore {
     on: <T>(event: string, listener: ChatUiEventListener<T>) => void = cy.stub();
     resetError: (runState: ChatRunState) => void = cy.stub();
     setAgentTyping: (typing: boolean) => void = cy.stub();
-    setError: (errorTitle: string, errorMessage: string, isRecoverableError?: boolean) => void =
-        cy.stub();
+    setChatError: (chatError: ChatError) => void = cy.stub();
+    setError: <T = any>(message: string, options?: ChatErrorOptions<T>) => void = cy.stub();
     setFilePickerEnabled: (isEnabled: boolean) => void = cy.stub();
     setMessageState: (message: ChatMessageModelBase, state: ChatMessageState, data?: any) => void =
         cy.stub();

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

@@ -57,7 +57,9 @@ export class ChatUiBackendEchoStore implements IChatUiBackendStore {
             resolve();
         } catch (error: any) {
             this.chatUiStore.setMessageState(message, ChatMessageState.Failed);
-            this.chatUiStore.setError('Failed to send message', error?.message ?? error, false);
+            this.chatUiStore.setError(error?.message ?? error, {
+                title: 'Custom Error Title',
+            });
         } finally {
             this.chatUiStore.setAgentTyping(false);
         }
@@ -77,7 +79,9 @@ export class ChatUiBackendEchoStore implements IChatUiBackendStore {
             resolve();
         } catch (error: any) {
             this.chatUiStore.setMessageState(message, ChatMessageState.Failed);
-            this.chatUiStore.setError('Custom error', error?.message ?? error, false);
+            this.chatUiStore.setError(error?.message ?? error, {
+                title: 'Custom Error Title',
+            });
         }
     };
 

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

@@ -7,6 +7,8 @@ import {
     ChatConfiguration,
     ChatCustomizations,
     ChatEndReason,
+    ChatError,
+    ChatErrorOptions,
     ChatMessageModelBase,
     ChatMessageModelFile,
     ChatMessageModelText,
@@ -18,7 +20,6 @@ import {
     ChatParticipantModel,
     ChatRunState,
     ChatTimer,
-    ChatUiStateError,
 } from '../models';
 
 export const symbolAgent = Symbol('SupportChatAgent');
@@ -59,7 +60,7 @@ export interface IChatUiStore<T extends ChatCustomizations = ChatCustomizations>
     isAgentTyping: boolean;
     isFilePickerEnabled: boolean;
     file?: FileDescriptor;
-    error?: ChatUiStateError;
+    error?: ChatError;
 
     get agent(): ChatParticipantModel;
     get user(): ChatParticipantModel;
@@ -77,7 +78,8 @@ export interface IChatUiStore<T extends ChatCustomizations = ChatCustomizations>
     setMessages(messages: ChatMessageModelBase[]): void;
     setAgentName(name: string): void;
     setAgentIcon(icon: ChatParticipantIcon): void;
-    setError(errorTitle: string, errorMessage: string, isRecoverableError?: boolean): void;
+    setChatError(chatError: ChatError): void;
+    setError<T = any>(message: string, options?: ChatErrorOptions<T>): void;
     setStatus(status: ChatRunState): void;
     resetError(runState: ChatRunState): void;
 
@@ -105,7 +107,7 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
 
     file?: FileDescriptor;
 
-    @observable error?: ChatUiStateError;
+    @observable.ref error?: ChatError;
 
     @observable endReason?: ChatEndReason;
 
@@ -220,16 +222,18 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
     }
 
     @action
-    setError(errorTitle: string, errorMessage: string, isRecoverableError = false) {
-        this.error = {
-            message: errorMessage,
-            isRecoverable: isRecoverableError,
-            title: errorTitle,
-        };
+    setChatError(chatError: ChatError) {
+        this.error = chatError;
         this.setStatus(ChatRunState.Error);
         this.triggerScroll();
     }
 
+    @action
+    setError<T = any>(message: string, options?: ChatErrorOptions<T>) {
+        this.error = new ChatError(message, options);
+        this.setChatError(this.error);
+    }
+
     @action
     setStatus(status: ChatRunState) {
         this.status = status;
@@ -294,7 +298,7 @@ export class ChatUiStore<T extends ChatCustomizations> implements IChatUiStore<T
     }
 
     async recover() {
-        await this.emitAsync(ChatUiEvent.eventRecover);
+        await this.emitAsync(ChatUiEvent.eventRecover, this.error);
     }
 
     async destroy() {