@servicetitan/titan-chat-ui 1.1.1 → 2.0.0

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

@@ -2,8 +2,8 @@ import { BodyText } from '@servicetitan/design-system';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { observer } from 'mobx-react';
 import { FC, PropsWithChildren, ReactNode } from 'react';
+import { IChatMessageProps } from '../../models';
 import {
-    ChatMessageModelBase,
     ChatMessageModelFile,
     ChatMessageModelText,
     ChatMessageModelWelcome,
@@ -14,65 +14,71 @@ import { MessageContentText } from '../message-content/message-content-text';
 import { ChatMessageTemplateAgent } from './chat-message-template-agent';
 import { ChatMessageTemplateUser } from './chat-message-template-user';
 
-interface IChatMessageProps {
-    message: ChatMessageModelBase;
-}
-
 /**
  * ChatMessage component provides a default way to render chat messages in the chat UI and contains only most generic
  * components and templates/customizations rendering
  */
-export const ChatMessage: FC<IChatMessageProps> = observer(({ message }) => {
-    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
-    const isAgent = message.participant.isAgent;
-    const { messageTemplates, messages } = chatUiStore.customizations;
-    const messageCustomization = messages?.find(c => c.predicate(message));
-    const isSystem = Boolean(messageCustomization?.isSystem);
+export const ChatMessage: FC<IChatMessageProps> = observer(
+    ({ message, omitAvatar, omitTimestamp }) => {
+        const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+        const isAgent = message.participant.isAgent;
+        const { messageTemplates, messages } = chatUiStore.customizations;
+        const messageCustomization = messages?.find(c => c.predicate(message));
+        const isSystem = Boolean(messageCustomization?.isSystem);
 
-    let messageContentNode: ReactNode | undefined;
-    if (messageCustomization) {
-        messageContentNode = <messageCustomization.component message={message} />;
-    } else {
-        // Default message content rendering
-        switch (message.type) {
-            case 'message':
-            case 'welcome':
-                messageContentNode = (
-                    <MessageContentText
-                        message={message as ChatMessageModelText | ChatMessageModelWelcome}
-                    />
-                );
-                break;
-            case 'file':
-                messageContentNode = (
-                    <MessageContentFile message={message as ChatMessageModelFile} />
-                );
-                break;
-            default: {
-                messageContentNode = <BodyText>Unknown message type: {message.type}</BodyText>;
+        let messageContentNode: ReactNode | undefined;
+        if (messageCustomization?.component) {
+            messageContentNode = <messageCustomization.component message={message} />;
+        } else {
+            // Default message content rendering
+            switch (message.type) {
+                case 'message':
+                case 'welcome':
+                    messageContentNode = (
+                        <MessageContentText
+                            message={message as ChatMessageModelText | ChatMessageModelWelcome}
+                        />
+                    );
+                    break;
+                case 'file':
+                    messageContentNode = (
+                        <MessageContentFile message={message as ChatMessageModelFile} />
+                    );
+                    break;
+                default: {
+                    messageContentNode = <BodyText>Unknown message type: {message.type}</BodyText>;
+                }
             }
         }
-    }
 
-    if (!messageContentNode) {
-        return null;
-    }
+        if (!messageContentNode || messageCustomization?.isIgnored) {
+            return null;
+        }
 
-    if (isSystem) {
-        return messageContentNode;
-    }
+        if (isSystem) {
+            return messageContentNode;
+        }
 
-    let ComponentTemplate: FC<PropsWithChildren<IChatMessageProps>>;
-    if (isAgent) {
-        const template = messageTemplates?.agent;
-        ComponentTemplate = template?.predicate(message)
-            ? template.component
-            : ChatMessageTemplateAgent;
-    } else {
-        const template = messageTemplates?.user;
-        ComponentTemplate = template?.predicate(message)
-            ? template.component
-            : ChatMessageTemplateUser;
+        let ComponentTemplate: FC<PropsWithChildren<IChatMessageProps>>;
+        if (isAgent) {
+            const template = messageTemplates?.agent;
+            ComponentTemplate = template?.predicate(message)
+                ? template.component
+                : ChatMessageTemplateAgent;
+        } else {
+            const template = messageTemplates?.user;
+            ComponentTemplate = template?.predicate(message)
+                ? template.component
+                : ChatMessageTemplateUser;
+        }
+        return (
+            <ComponentTemplate
+                message={message}
+                omitAvatar={omitAvatar}
+                omitTimestamp={omitTimestamp}
+            >
+                {messageContentNode}
+            </ComponentTemplate>
+        );
     }
-    return <ComponentTemplate message={message}>{messageContentNode}</ComponentTemplate>;
-});
+);

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/__mocks__/support-chat.mock.ts

@@ -0,0 +1,105 @@
+import {
+    ChatMessageModelFile,
+    ChatMessageModelText,
+    ChatMessageModelTimeout,
+    ChatMessageModelWelcome,
+    ChatMessageState,
+    ChatParticipantIcon,
+    ChatParticipantModel,
+} from '../support-chat';
+
+export function mockChatAgent(overrides?: Partial<ChatParticipantModel>): ChatParticipantModel {
+    return {
+        isAgent: true,
+        name: 'agent name',
+        icon: ChatParticipantIcon.Bot,
+        ...overrides,
+    };
+}
+
+export function mockChatUser(overrides?: Partial<ChatParticipantModel>): ChatParticipantModel {
+    return {
+        isAgent: false,
+        name: 'user name',
+        icon: ChatParticipantIcon.Initials,
+        ...overrides,
+    };
+}
+
+export function mockChatMessageModelText(
+    isAgent: boolean,
+    overrides?: Partial<ChatMessageModelText>
+): ChatMessageModelText {
+    return {
+        id: 'id',
+        type: 'message',
+        message: 'message',
+        timestamp: new Date('2000-01-01T00:00:00Z'),
+        state: ChatMessageState.Delivered,
+        data: {},
+        participant: isAgent ? mockChatAgent() : mockChatUser(),
+        ...overrides,
+    };
+}
+
+export function mockChatMessageModelWelcome(
+    overrides?: Partial<ChatMessageModelWelcome>
+): ChatMessageModelWelcome {
+    return {
+        id: 'id',
+        type: 'welcome',
+        message: 'message welcome',
+        timestamp: new Date('2000-01-01T00:00:00Z'),
+        state: ChatMessageState.Delivered,
+        data: {},
+        participant: mockChatAgent(),
+        ...overrides,
+    };
+}
+
+export function mockChatMessageModelFile(
+    overrides?: Partial<ChatMessageModelFile>
+): ChatMessageModelFile {
+    return {
+        id: 'id',
+        type: 'file',
+        timestamp: new Date('2000-01-01T00:00:00Z'),
+        state: ChatMessageState.Delivered,
+        fileName: 'file name',
+        data: {},
+        participant: mockChatUser(),
+        ...overrides,
+    };
+}
+
+export function mockChatMessageModelTimeout(
+    overrides?: Partial<ChatMessageModelTimeout>
+): ChatMessageModelTimeout {
+    return {
+        id: 'id',
+        type: 'timeout',
+        timestamp: new Date('2000-01-01T00:00:00Z'),
+        state: ChatMessageState.Delivered,
+        data: {},
+        participant: mockChatAgent(),
+        ...overrides,
+    };
+}
+
+export function mockChatConversation() {
+    return [
+        mockChatMessageModelWelcome(),
+        mockChatMessageModelText(false, {
+            message: 'question 1',
+        }),
+        mockChatMessageModelText(true, {
+            message: 'answer 1',
+        }),
+        mockChatMessageModelText(false, {
+            message: 'question 2',
+        }),
+        mockChatMessageModelText(true, {
+            message: 'answer 2',
+        }),
+    ];
+}

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/index.ts

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