@servicetitan/titan-chat-ui 1.0.1

package/src/components/messages/message-typing.module.less

@@ -0,0 +1,40 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.dotsContainer {
+    @keyframes dot-jumping {
+        0% {
+            transform: translateY(0);
+        }
+        16.6666% {
+            transform: translateY(-6px);
+        }
+        33.3333% {
+            transform: translateY(0);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    & .dot {
+        width: 6px;
+        height: 6px;
+        margin: @spacing-0 2px;
+        background-color: @color-neutral-80;
+        border-radius: @border-radius-circular;
+        display: inline-block;
+        animation: dot-jumping 1.5s infinite ease-in-out;
+    }
+
+    & .dot:nth-child(1) {
+        animation-delay: 0s;
+    }
+
+    & .dot:nth-child(2) {
+        animation-delay: 0.5s;
+    }
+
+    & .dot:nth-child(3) {
+        animation-delay: 1s;
+    }
+}

package/src/components/messages/message-typing.module.less.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const dot: string;
+export const dotJumping: string;
+export const dotsContainer: string;
+

package/src/components/messages/message-typing.tsx

@@ -0,0 +1,25 @@
+import { Stack } from '@servicetitan/design-system';
+import { FC } from 'react';
+import { IDataCyProps } from '../../models/component';
+import { MessageAgent } from './message-agent';
+import { IMessageAvatarProps } from './message-avatar';
+import * as Styles from './message-typing.module.less';
+
+export interface IMessageTypingProps extends IDataCyProps {
+    avatar: IMessageAvatarProps;
+}
+
+export const MessageTyping: FC<IMessageTypingProps> = ({ avatar, ...rest }) => {
+    const dataCy = rest['data-cy'] ?? 'chat-message-typing';
+    return (
+        <MessageAgent avatar={avatar} data-cy={dataCy} subtle>
+            <Stack className="h-100" alignItems="center">
+                <div className={Styles.dotsContainer} data-cy={`${dataCy}-dots`}>
+                    <span className={Styles.dot} />
+                    <span className={Styles.dot} />
+                    <span className={Styles.dot} />
+                </div>
+            </Stack>
+        </MessageAgent>
+    );
+};

package/src/components/messages/message-user.module.less

@@ -0,0 +1,35 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+/* stylelint-disable declaration-property-value-no-unknown */
+.messageRoot {
+    display: grid;
+    grid-template-areas:
+        '. content'
+        '. footer';
+    grid-template-rows: auto auto;
+    grid-template-columns: minmax(@spacing-5, auto) 1fr;
+    column-gap: @spacing-2;
+    row-gap: @spacing-1;
+}
+
+.messageFooter {
+    grid-area: footer;
+    justify-self: end;
+}
+
+.messageContent {
+    grid-area: content;
+    overflow-wrap: anywhere;
+    justify-self: end;
+}
+
+.messageBubble {
+    color: @color-neutral-200;
+    padding: @spacing-2 @spacing-3;
+    background-color: @color-neutral-50;
+    border-radius: @spacing-3 @spacing-3 @spacing-0 @spacing-3;
+
+    &.error {
+        background-color: @color-red-100;
+    }
+}

package/src/components/messages/message-user.module.less.d.ts

@@ -0,0 +1,7 @@
+export const __esModule: true;
+export const error: string;
+export const messageBubble: string;
+export const messageContent: string;
+export const messageFooter: string;
+export const messageRoot: string;
+

package/src/components/messages/message-user.tsx

@@ -0,0 +1,49 @@
+import { Stack } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import { IDataCyProps } from '../../models/component';
+import * as Styles from './message-user.module.less';
+
+export interface IMessageUserProps extends IDataCyProps {
+    messageFooter?: ReactNode;
+    isError?: boolean;
+    className?: string;
+}
+
+export const MessageUser: FC<PropsWithChildren<IMessageUserProps>> = ({
+    children,
+    className,
+    isError,
+    messageFooter,
+    ...rest
+}) => {
+    const dataCy = rest['data-cy'] ?? 'chat-message-user';
+    const dataCy2 = isError ? 'chat-message-error' : 'chat-message-normal';
+    return (
+        <div
+            className={classNames(Styles.messageRoot, 'max-w-100')}
+            data-cy={dataCy}
+            data-cy2={dataCy2}
+        >
+            <Stack
+                direction="column"
+                spacing="1"
+                className={classNames('max-w-100', Styles.messageContent)}
+            >
+                <div
+                    className={classNames(Styles.messageBubble, {
+                        [Styles.error]: isError,
+                    })}
+                    data-cy={`${dataCy}-content`}
+                >
+                    {children}
+                </div>
+            </Stack>
+            {Boolean(messageFooter) && (
+                <div className={Styles.messageFooter} data-cy={`${dataCy}-footer`}>
+                    {messageFooter}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/messages/use-avatar-props.tsx

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { ChatParticipantIcon } from '../../models/support-chat';
+import { getNameInitialsFirst } from '../../utils/text-utils';
+import { IMessageAvatarProps } from './message-avatar';
+
+export const useAvatarProps = (name: string, icon: ChatParticipantIcon): IMessageAvatarProps => {
+    return useMemo<IMessageAvatarProps>(
+        () => ({
+            name:
+                name.length && icon === ChatParticipantIcon.Initials
+                    ? getNameInitialsFirst(name)
+                    : name,
+            icon,
+        }),
+        [icon, name]
+    );
+};

package/src/cypress.d.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+declare namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject = any> {
+        getCy<E extends Node = HTMLElement>(value: string): Chainable<JQuery<E>>;
+        getCy2<E extends Node = HTMLElement>(value: string): Chainable<JQuery<E>>;
+        getAnvil<E extends Node = HTMLElement>(value: string, extra?: string): Chainable<JQuery<E>>;
+    }
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export { MessageAgent, IMessageAgentProps } from './components/messages/message-agent';
+export { MessageUser, IMessageUserProps } from './components/messages/message-user';
+export { MessageSystem, IMessageSystemProps } from './components/messages/message-system';
+export { MessageTyping, IMessageTypingProps } from './components/messages/message-typing';
+export { MessageTimeout, IMessageTimeoutProps } from './components/messages/message-timeout';
+export { MessageAvatar, IMessageAvatarProps } from './components/messages/message-avatar';
+export { MessageFooter, IMessageFooterProps } from './components/messages/message-footer';
+export { useAvatarProps } from './components/messages/use-avatar-props';
+export { MultilineText } from './components/common/multiline-text';
+export * from './stores';
+export * from './models';

package/src/models/chat-customizations.ts

@@ -0,0 +1,34 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import { IMessageTypingProps } from '../components/messages/message-typing';
+import { ChatMessageModelBase } from './support-chat';
+
+export interface IChatMessageProps<T extends ChatMessageModelBase = ChatMessageModelBase> {
+    message: T;
+}
+
+export interface ChatMessageTemplateCustomization {
+    component: FC<PropsWithChildren<IChatMessageProps>>;
+    predicate: (message: ChatMessageModelBase) => boolean;
+}
+
+export type ChatMessageTemplateCustomizations = Partial<{
+    agent: ChatMessageTemplateCustomization;
+    user: ChatMessageTemplateCustomization;
+}>;
+
+export interface ChatMessageCustomization {
+    component: FC<IChatMessageProps>;
+    predicate: (message: ChatMessageModelBase) => boolean;
+    isSystem?: boolean; // System messages are messages that are not sent by the user or the agent and rendered without chat bubbles
+}
+
+export interface ChatMessageTypingCustomization {
+    component: FC<IMessageTypingProps>;
+}
+
+export type ChatCustomizations = Partial<{
+    messageTemplates: ChatMessageTemplateCustomizations;
+    messages: ChatMessageCustomization[];
+    messageTyping: ChatMessageTypingCustomization;
+    footerComponent: ReactNode;
+}>;

package/src/models/component.ts

@@ -0,0 +1,3 @@
+export interface IDataCyProps {
+    ['data-cy']?: string;
+}

package/src/models/index.ts

@@ -0,0 +1,2 @@
+export * from './support-chat';
+export * from './chat-customizations';

package/src/models/support-chat.ts

@@ -0,0 +1,84 @@
+export interface ChatTimer {
+    secondsLeft: number;
+    secondsTotal: number;
+}
+
+export enum ChatMessageState {
+    Delivering = 'Delivering',
+    Delivered = 'Delivered',
+    Failed = 'Failed',
+}
+
+export enum ChatEndReason {
+    ByUser = 'ByUser',
+    ByAgent = 'ByAgent',
+    ByTimeout = 'ByTimeout',
+    ByFailedToStart = 'ByFailedToStart',
+}
+
+export enum ChatParticipantIcon {
+    Empty = 'empty',
+    Initials = 'initials',
+    Bot = 'bot',
+}
+
+export interface ChatParticipantModel {
+    isAgent: boolean;
+    name: string;
+    icon: ChatParticipantIcon;
+}
+
+export type ChatMessageModelType =
+    | 'welcome'
+    | 'message'
+    | 'timeout'
+    | 'file'
+    | 'askSupport'
+    | 'askSupportButtons';
+
+export interface ChatConfiguration {
+    agentName?: string;
+    agentIcon?: ChatParticipantIcon;
+}
+
+export interface ChatMessageModelBase {
+    id: string;
+    timestamp: Date;
+    type: ChatMessageModelType;
+    participant: ChatParticipantModel;
+    state: ChatMessageState;
+    data?: any;
+}
+
+export interface ChatMessageModelTimeout extends ChatMessageModelBase {
+    type: 'timeout';
+}
+
+export interface ChatMessageModelText extends ChatMessageModelBase {
+    type: 'message';
+    message: string;
+}
+
+export interface ChatMessageModelWelcome extends ChatMessageModelBase {
+    type: 'welcome';
+    message: string;
+}
+
+export interface ChatMessageModelFile extends ChatMessageModelBase {
+    type: 'file';
+    fileName: string;
+}
+
+export interface ChatUiStateError {
+    title: string;
+    message: string;
+    isRecoverable?: boolean;
+}
+
+export enum ChatRunState {
+    Offline = 0,
+    Initializing = 1,
+    Started = 2,
+    Ended = 3,
+    Error = 4,
+}

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

@@ -0,0 +1,105 @@
+import { FileDescriptor } from '@servicetitan/form';
+import {
+    ChatConfiguration,
+    ChatCustomizations,
+    ChatMessageModelBase,
+    ChatMessageModelText,
+    ChatMessageModelWelcome,
+    ChatMessageState,
+    ChatParticipantIcon,
+    ChatRunState,
+    ChatTimer,
+} from '../../models';
+import { ChatUiEventListener, IChatUiStore, symbolAgent, symbolUser } from '../chat-ui.store';
+
+export class ChatUiStoreMock implements IChatUiStore {
+    scrollCounter = 0;
+    isFilePickerEnabled = true;
+    isStarting = false;
+    isStarted = true;
+    isAgentTyping = false;
+    status = ChatRunState.Started;
+    file = undefined;
+    participants = {
+        [symbolAgent]: {
+            isAgent: true,
+            name: 'Agent',
+            icon: ChatParticipantIcon.Bot,
+        },
+        [symbolUser]: {
+            isAgent: false,
+            name: 'User',
+            icon: ChatParticipantIcon.Initials,
+        },
+    };
+    get user() {
+        return this.participants[symbolUser];
+    }
+    get agent() {
+        return this.participants[symbolAgent];
+    }
+    get isEnded(): boolean {
+        return false;
+    }
+    get isError(): boolean {
+        return false;
+    }
+    get customizations(): ChatCustomizations {
+        return {};
+    }
+    messages: ChatMessageModelBase[] = [
+        {
+            type: 'welcome',
+            id: 'messageid',
+            state: ChatMessageState.Delivered,
+            timestamp: new Date(),
+            message:
+                'Hi there! I’m ServiceTitan Bot, a chatbot powered by Titan Intelligence designed to answer your questions about using ServiceTitan. I’m here to help you, but I’m still learning, so I might not have all the answers yet. Do you have a question?',
+            participant: {
+                isAgent: true,
+                name: 'Agent',
+                icon: ChatParticipantIcon.Bot,
+            },
+        } as ChatMessageModelWelcome,
+        {
+            type: 'message',
+            id: 'messageid2',
+            state: ChatMessageState.Delivered,
+            timestamp: new Date(),
+            message: 'How to create a form?',
+            participant: {
+                isAgent: false,
+                name: 'User',
+                icon: ChatParticipantIcon.Initials,
+            },
+        } as ChatMessageModelText,
+    ];
+    sendMessageRetry: (message: ChatMessageModelBase) => Promise<void> = cy.stub();
+    sendMessageText: (message: string) => Promise<void> = cy.stub();
+    setFile: (file: FileDescriptor | undefined) => void = cy.stub();
+    triggerScroll: () => void = cy.stub();
+    addMessage: (isAgent: boolean, message: string, data?: any) => void = cy.stub();
+    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();
+    setAgentTyping: (typing: boolean) => void = cy.stub();
+    setError: (errorTitle: string, errorMessage: string, isRecoverableError?: boolean) => void =
+        cy.stub();
+    setFilePickerEnabled: (isEnabled: boolean) => void = cy.stub();
+    setMessageState: (message: ChatMessageModelBase, state: ChatMessageState, data?: any) => void =
+        cy.stub();
+    addMessageWelcome: (message: string) => void = cy.stub();
+    setCustomizationContext: (customizationContext?: ChatCustomizations) => void = cy.stub();
+    chasitorTyping: (isTyping: boolean) => Promise<void> = cy.stub();
+    configure: (configuration?: ChatConfiguration) => void = cy.stub();
+    run: (configuration?: ChatConfiguration, data?: unknown) => Promise<void> = cy.stub();
+    recover: () => Promise<void> = cy.stub();
+    destroy: () => Promise<void> = cy.stub();
+    setAgentIcon: (icon: ChatParticipantIcon) => void = cy.stub();
+    setAgentName: (name: string) => void = cy.stub();
+    setIncomingSound: (soundUrl: string) => void = cy.stub();
+    setMessages: (messages: ChatMessageModelBase[]) => void = cy.stub();
+    setStatus: (status: ChatRunState) => void = cy.stub();
+    setTimer: (timer?: ChatTimer) => void = cy.stub();
+    restartTimers: () => Promise<void> = cy.stub();
+}

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

@@ -0,0 +1,25 @@
+import { TextAreaFieldState } from '@servicetitan/form';
+import { injectable } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+import { computed, makeObservable, observable } from 'mobx';
+
+@injectable()
+export class ChatInputStore {
+    @observable
+    formState = new FormState({
+        message: new TextAreaFieldState('')
+            .validators((text: string) =>
+                text.length > 6000 ? 'Message character max is 6000.' : false
+            )
+            .disableAutoValidation(),
+    });
+
+    @computed
+    get isEmpty() {
+        return !this.formState.$.message.value;
+    }
+
+    constructor() {
+        makeObservable(this);
+    }
+}

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

@@ -0,0 +1,94 @@
+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('Failed to send message', error?.message ?? error, false);
+        } 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('Custom error', error?.message ?? error, false);
+        }
+    };
+
+    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;
+}