@servicetitan/titan-chat-ui 1.1.2 → 2.0.0

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

@@ -1,23 +1,67 @@
 import { Stack } from '@servicetitan/design-system';
-import { useDependencies } from '@servicetitan/react-ioc';
-import { observer } from 'mobx-react';
-import { FC } from 'react';
-import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { FC, useMemo } from 'react';
+import { ChatMessageModelBase } from '../../models';
+import { formatChatMessageDate } from '../../utils/text-utils';
 import { ChatMessage } from './chat-message';
 import { ChatMessageTyping } from './chat-message-typing';
 
 interface IChatMessagesProps {
     className?: string;
+    messages: ChatMessageModelBase[];
+    showTypingIndicator?: boolean;
 }
 
-export const ChatMessages: FC<IChatMessagesProps> = observer(({ className }) => {
-    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+export const ChatMessages: FC<IChatMessagesProps> = ({
+    className,
+    messages,
+    showTypingIndicator,
+}) => {
+    // Split messages into chunks divided by participant name and message time (with 1 minute accuracy)
+    const messagesChunks = useMemo(
+        () =>
+            messages.reduce((acc: ChatMessageModelBase[][][], message) => {
+                if (!acc.length) {
+                    acc.push([[message]]);
+                    return acc;
+                }
+                const lastMessage = acc.at(-1)!.at(-1)!.at(-1)!;
+                if (lastMessage.participant.name !== message.participant.name) {
+                    acc.push([[message]]);
+                } else if (
+                    formatChatMessageDate(lastMessage.timestamp) !==
+                    formatChatMessageDate(message.timestamp)
+                ) {
+                    acc.at(-1)!.push([message]);
+                } else {
+                    acc.at(-1)!.at(-1)!.push(message);
+                }
+                return acc;
+            }, []),
+        [messages]
+    );
+
     return (
         <Stack direction="column" spacing="2" className={className} data-cy="titan-chat-messages">
-            {chatUiStore.messages.map(message => (
-                <ChatMessage key={message.id} message={message} />
-            ))}
-            {chatUiStore.isAgentTyping && <ChatMessageTyping />}
+            {messagesChunks
+                .map(sameParticipantMessages => {
+                    // Set omit avatar for all messages except the first one
+                    const firstParticipantMessage = sameParticipantMessages[0][0];
+                    return sameParticipantMessages.map(sameDateMessages => {
+                        const lastTimestampMessage = sameDateMessages.at(-1)!;
+                        return sameDateMessages.map(message => {
+                            return (
+                                <ChatMessage
+                                    key={message.id}
+                                    message={message}
+                                    omitAvatar={message !== firstParticipantMessage}
+                                    omitTimestamp={message !== lastTimestampMessage}
+                                />
+                            );
+                        });
+                    });
+                })
+                .flat(2)}
+            {showTypingIndicator && <ChatMessageTyping />}
         </Stack>
     );
-});
+};

package/src/components/chat/chat.tsx

@@ -20,6 +20,7 @@ export const Chat: FC<IChatProps> = observer(({ className, customizations }) =>
     const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
 
     const footerComponent = customizations?.footerComponent;
+    const loadingComponent = customizations?.loadingComponent;
 
     useEffect(() => {
         chatUiStore.setCustomizationContext(customizations);
@@ -36,18 +37,23 @@ export const Chat: FC<IChatProps> = observer(({ className, customizations }) =>
     return (
         <Stack direction="column" className={className} data-cy="titan-chat">
             {chatUiStore.isStarting ? (
-                <ChatConnecting className="p-3" />
+                (loadingComponent ?? <ChatConnecting className="p-x-3 p-y-2" />)
             ) : (
                 <Fragment>
-                    <div ref={scrollRef} className="flex-grow-1 of-y-auto">
-                        <ChatMessages className="p-3" />
+                    <div ref={scrollRef} className="p-x-3 p-y-2 flex-grow-1 of-y-auto">
+                        <ChatMessages
+                            messages={chatUiStore.messages}
+                            showTypingIndicator={chatUiStore.isAgentTyping}
+                        />
                     </div>
                     <ChatNotifications />
-                    <div>
-                        <ChatInputFile className="m-3 m-b-0 p-3 border-radius-1 border border-style-dashed" />
-                        <ChatInput className="p-x-3 p-y-2" />
-                        {Boolean(footerComponent) && footerComponent}
-                    </div>
+                    {!chatUiStore.customizations?.input?.isDisabled && (
+                        <Stack className="p-x-3 p-y-2" direction="column" spacing="2">
+                            <ChatInputFile className="box-sizing-border-box border-radius-1 border border-style-dashed" />
+                            <ChatInput />
+                            {Boolean(footerComponent) && footerComponent}
+                        </Stack>
+                    )}
                 </Fragment>
             )}
         </Stack>

package/src/components/messages/__tests-cy__/message-agent.test.tsx

@@ -44,7 +44,7 @@ describe('[MessageAgent]', () => {
                 <BodyText>message agent content</BodyText>
             </MessageAgent>
         );
-        cy.getCy('chat-message-agent-center').should('have.class', 'w-100');
+        cy.getCy('chat-message-agent-center').should('contain.text', 'message agent content');
     });
 
     it('should render with custom data-cy', () => {

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

@@ -9,51 +9,43 @@
     max-width: 100%;
     column-gap: @spacing-2;
     row-gap: @spacing-1;
-    grid-template-areas:
-        'avatar content .'
-        '.      footer  .';
-    grid-template-rows: auto auto;
+    grid-template-areas: 'avatar content .';
+    grid-template-rows: auto;
     grid-template-columns: minmax(@spacing-5, auto) 1fr minmax(@spacing-5, auto);
 
     &.fullWidth {
-        width: 100%;
-        grid-template-areas:
-            'avatar content'
-            '.      footer ';
-        grid-template-rows: auto auto;
+        //width: 100%;
+        grid-template-areas: 'avatar content';
+        grid-template-rows: auto;
         grid-template-columns: minmax(@spacing-5, auto) 1fr;
     }
-}
-
-.messageFooter {
-    grid-area: footer;
-}
-
-.messageAvatar {
-    grid-area: avatar;
-}
 
-.messageContent {
-    max-width: 100%;
-    grid-area: content;
-    overflow-wrap: anywhere;
-    justify-self: flex-start;
-}
-
-.messageBubble {
-    color: @color-neutral-200;
-    padding: @spacing-2 @spacing-3;
-    background-color: @color-blue-100;
-    position: relative;
-    border-radius: @spacing-0 @spacing-3 @spacing-3 @spacing-3;
-    box-sizing: border-box;
+    .messageAvatar {
+        grid-area: avatar;
+    }
 
-    &.error {
-        color: @color-neutral-400;
-        background-color: @color-red-100;
+    .messageContent {
+        max-width: 100%;
+        grid-area: content;
+        overflow-wrap: anywhere;
+        justify-self: flex-start;
+    }
 
-        &::after {
-            background: @color-red-200;
+    .messageBubble {
+        color: @color-neutral-200;
+        padding: @spacing-2 @spacing-3;
+        background-color: @color-blue-100;
+        position: relative;
+        border-radius: @spacing-0 @spacing-3 @spacing-3 @spacing-3;
+        box-sizing: border-box;
+
+        &.error {
+            color: @color-neutral-400;
+            background-color: @color-red-100;
+
+            &::after {
+                background: @color-red-200;
+            }
         }
     }
 }

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

@@ -4,6 +4,5 @@ export const fullWidth: string;
 export const messageAvatar: string;
 export const messageBubble: string;
 export const messageContent: string;
-export const messageFooter: string;
 export const messageRoot: string;
 

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

@@ -11,6 +11,7 @@ export interface IMessageAgentProps extends IDataCyProps {
     isError?: boolean;
     fullWidth?: boolean;
     subtle?: boolean;
+    omitAvatar?: boolean;
 }
 
 export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
@@ -19,6 +20,7 @@ export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
     fullWidth,
     isError,
     messageFooter,
+    omitAvatar,
     subtle,
     ...rest
 }) => {
@@ -33,14 +35,12 @@ export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
             data-cy2={dataCy2}
         >
             <div className={Styles.messageAvatar}>
-                {avatar ? <MessageAvatar {...avatar} /> : <div />}
+                {!omitAvatar && avatar ? <MessageAvatar {...avatar} /> : <div />}
             </div>
             <Stack
                 direction="column"
                 spacing="1"
-                className={classNames(Styles.messageContent, {
-                    'w-100': Boolean(fullWidth),
-                })}
+                className={classNames(Styles.messageContent)}
                 data-cy={`${dataCy}-center`}
             >
                 {subtle ? (

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

@@ -3,15 +3,16 @@ import { FC } from 'react';
 import { formatChatMessageDate } from '../../utils/text-utils';
 
 export interface IMessageFooterProps {
-    timestamp: Date;
+    timestamp?: Date;
     name?: string;
 }
 
 export const MessageFooter: FC<IMessageFooterProps> = ({ name, timestamp }) => {
     return (
         <Eyebrow>
-            {name && `${name} • `}
-            {formatChatMessageDate(timestamp)}
+            {Boolean(name) && name}
+            {name && timestamp && ' • '}
+            {timestamp && formatChatMessageDate(timestamp)}
         </Eyebrow>
     );
 };

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

@@ -3,18 +3,15 @@
 /* stylelint-disable declaration-property-value-no-unknown */
 .messageRoot {
     display: grid;
-    grid-template-areas:
-        '. content'
-        '. footer';
-    grid-template-rows: auto auto;
+    grid-template-areas: '. content';
+    grid-template-rows: auto;
     grid-template-columns: minmax(@spacing-5, auto) 1fr;
     column-gap: @spacing-2;
     row-gap: @spacing-1;
 }
 
 .messageFooter {
-    grid-area: footer;
-    justify-self: end;
+    text-align: right;
 }
 
 .messageContent {

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

@@ -38,12 +38,12 @@ export const MessageUser: FC<PropsWithChildren<IMessageUserProps>> = ({
                 >
                     {children}
                 </div>
+                {Boolean(messageFooter) && (
+                    <div className={Styles.messageFooter} data-cy={`${dataCy}-footer`}>
+                        {messageFooter}
+                    </div>
+                )}
             </Stack>
-            {Boolean(messageFooter) && (
-                <div className={Styles.messageFooter} data-cy={`${dataCy}-footer`}>
-                    {messageFooter}
-                </div>
-            )}
         </div>
     );
 };

package/src/index.ts

@@ -1,3 +1,6 @@
+export { ChatMessages } from './components/chat/chat-messages';
+export { Chat, IChatProps } from './components/chat/chat';
+export { ChatLog } from './components/chat/chat-log';
 export { MessageAgent, IMessageAgentProps } from './components/messages/message-agent';
 export { MessageUser, IMessageUserProps } from './components/messages/message-user';
 export { MessageSystem, IMessageSystemProps } from './components/messages/message-system';

package/src/models/chat-customizations.ts

@@ -4,11 +4,15 @@ import { ChatMessageModelBase } from './support-chat';
 
 export interface IChatMessageProps<T extends ChatMessageModelBase = ChatMessageModelBase> {
     message: T;
+    omitAvatar?: boolean;
+    omitTimestamp?: boolean;
 }
 
-export interface ChatMessageTemplateCustomization {
-    component: FC<PropsWithChildren<IChatMessageProps>>;
-    predicate: (message: ChatMessageModelBase) => boolean;
+export interface ChatMessageTemplateCustomization<
+    T extends ChatMessageModelBase = ChatMessageModelBase,
+> {
+    component: FC<PropsWithChildren<IChatMessageProps<T>>>;
+    predicate: (message: T) => boolean;
 }
 
 export type ChatMessageTemplateCustomizations = Partial<{
@@ -16,19 +20,26 @@ export type ChatMessageTemplateCustomizations = Partial<{
     user: ChatMessageTemplateCustomization;
 }>;
 
-export interface ChatMessageCustomization {
-    component: FC<IChatMessageProps>;
-    predicate: (message: ChatMessageModelBase) => boolean;
+export interface ChatMessageCustomization<T extends ChatMessageModelBase = ChatMessageModelBase> {
+    predicate: (message: T) => boolean;
+    component?: FC<IChatMessageProps<T>>;
     isSystem?: boolean; // System messages are messages that are not sent by the user or the agent and rendered without chat bubbles
+    isIgnored?: boolean;
 }
 
 export interface ChatMessageTypingCustomization {
     component: FC<IMessageTypingProps>;
 }
 
+export interface ChatInputCustomization {
+    isDisabled?: boolean;
+}
+
 export type ChatCustomizations = Partial<{
     messageTemplates: ChatMessageTemplateCustomizations;
     messages: ChatMessageCustomization[];
     messageTyping: ChatMessageTypingCustomization;
+    input: ChatInputCustomization;
     footerComponent: ReactNode;
+    loadingComponent: ReactNode;
 }>;

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.');
+    });
+});