@servicetitan/titan-chat-ui 1.0.1

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

@@ -0,0 +1,155 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="../../../cypress" />
+import { BodyText, Button, Stack } from '@servicetitan/design-system';
+import { mount } from 'cypress/react';
+import { ChatParticipantIcon } from '../../../models/support-chat';
+import { MessageAgent } from '../message-agent';
+import { MessageFooter } from '../message-footer';
+
+describe('[MessageAgent]', () => {
+    beforeEach(() => {
+        cy.viewport('macbook-13');
+        cy.clock(new Date('2023-10-10T10:10:00Z').getTime());
+    });
+
+    it('should be properly rendered', () => {
+        mount(
+            <MessageAgent
+                avatar={{
+                    name: 'Test User Name',
+                    icon: ChatParticipantIcon.Bot,
+                    className: 'custom-class',
+                }}
+            >
+                <BodyText data-cy="content">message agent content</BodyText>
+            </MessageAgent>
+        );
+        cy.getCy('chat-message-agent').should('be.visible').children().should('have.length', 2);
+        cy.getCy('chat-avatar-bot').should('be.visible').should('have.class', 'custom-class');
+        cy.getCy('chat-message-agent-content')
+
+            .should('contain.text', 'message agent content');
+        cy.getCy('content').should('contain.text', 'message agent content');
+    });
+
+    it('should be full width', () => {
+        mount(
+            <MessageAgent
+                fullWidth
+                avatar={{
+                    name: 'Test User Name',
+                    icon: ChatParticipantIcon.Bot,
+                }}
+            >
+                <BodyText>message agent content</BodyText>
+            </MessageAgent>
+        );
+        cy.getCy('chat-message-agent-center').should('have.class', 'w-100');
+    });
+
+    it('should render with custom data-cy', () => {
+        mount(
+            <MessageAgent
+                data-cy="custom-data-cy"
+                avatar={{
+                    name: 'Test User Name',
+                    icon: ChatParticipantIcon.Bot,
+                }}
+            >
+                <BodyText>message agent content</BodyText>
+            </MessageAgent>
+        );
+        cy.getCy('custom-data-cy').should('be.visible');
+        cy.getCy('custom-data-cy-content').should('be.visible');
+    });
+
+    it('should render custom message footer', () => {
+        mount(
+            <MessageAgent
+                messageFooter={
+                    <Stack direction="row" justifyContent="space-between" alignItems="center">
+                        <MessageFooter name="name" timestamp={new Date()} />
+                        <Stack direction="row" spacing="1">
+                            <Button iconName="thumb_up" xsmall fill="subtle" />
+                            <Button iconName="thumb_down" xsmall fill="subtle" />
+                        </Stack>
+                    </Stack>
+                }
+                avatar={{
+                    name: 'Test User Name',
+                    icon: ChatParticipantIcon.Bot,
+                }}
+            >
+                <BodyText>message agent content</BodyText>
+            </MessageAgent>
+        );
+        cy.getCy('chat-message-agent').should('be.visible').children().should('have.length', 2);
+        cy.getCy('chat-message-agent-footer')
+            .should('be.visible')
+            .should('contain.text', 'name • 10:10 AM');
+    });
+
+    it('should render error message', () => {
+        mount(
+            <MessageAgent
+                isError
+                avatar={{
+                    name: 'Test User Name',
+                    icon: ChatParticipantIcon.Bot,
+                }}
+            >
+                <BodyText>message agent content</BodyText>
+            </MessageAgent>
+        );
+        cy.getCy2('chat-message-error').should('be.visible');
+    });
+
+    it('should render subtle message', () => {
+        mount(
+            <MessageAgent
+                subtle
+                avatar={{
+                    name: 'Test User Name',
+                    icon: ChatParticipantIcon.Bot,
+                }}
+            >
+                <Stack className="border h-100" alignItems="center" data-cy="custom-content">
+                    <BodyText>message agent content</BodyText>
+                </Stack>
+            </MessageAgent>
+        );
+        cy.getCy('chat-avatar-bot').should('be.visible');
+        cy.getCy('custom-content')
+            .should('be.visible')
+            .should('contain.text', 'message agent content');
+    });
+
+    describe('with different icon types', () => {
+        const render = (icon: ChatParticipantIcon) => {
+            return mount(
+                <MessageAgent
+                    avatar={{
+                        name: 'Test User Name',
+                        icon,
+                    }}
+                >
+                    <BodyText>message agent content</BodyText>
+                </MessageAgent>
+            );
+        };
+        it('icon bot', () => {
+            render(ChatParticipantIcon.Bot);
+            cy.getCy('chat-avatar-bot').should('be.visible');
+        });
+
+        it('icon initials', () => {
+            render(ChatParticipantIcon.Initials);
+            cy.getCy('chat-avatar-initials').should('be.visible').should('contain.text', 'T');
+        });
+
+        it('icon empty', () => {
+            render(ChatParticipantIcon.Empty);
+            cy.getCy('chat-avatar-empty').should('exist').should('not.be.visible');
+        });
+    });
+});

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

@@ -0,0 +1,33 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="../../../cypress" />
+import { BodyText, Stack } from '@servicetitan/design-system';
+import { mount } from 'cypress/react';
+import { MessageSystem } from '../message-system';
+
+describe('[MessageSystem]', () => {
+    beforeEach(() => {
+        cy.viewport('macbook-13');
+    });
+
+    it('should be properly rendered', () => {
+        mount(
+            <MessageSystem className="custom-class">
+                <Stack className="border">
+                    <BodyText data-cy="content">message system content</BodyText>
+                </Stack>
+            </MessageSystem>
+        );
+        cy.getCy('chat-message-system').should('have.class', 'custom-class').should('be.visible');
+    });
+
+    it('should be properly rendered fullwidth', () => {
+        mount(
+            <MessageSystem className="custom-class" fullWidth>
+                <Stack className="border">
+                    <BodyText data-cy="content">message system content</BodyText>
+                </Stack>
+            </MessageSystem>
+        );
+        cy.getCy('chat-message-system').should('have.class', 'custom-class').should('be.visible');
+    });
+});

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

@@ -0,0 +1,38 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="../../../cypress" />
+import { mount } from 'cypress/react';
+import { MessageTimeout } from '../message-timeout';
+
+describe('MessageTimeout', () => {
+    it('should render message', () => {
+        const onResume = cy.spy().as('onResume');
+        const onReset = cy.spy().as('onReset');
+        mount(<MessageTimeout onResume={onResume} onReset={onReset} />);
+
+        cy.getCy('chat-message-timeout')
+            .should('be.visible')
+            .should(
+                'contain.text',
+                [
+                    'Your session has timed out.',
+                    'Would you like to resume it or start a new one?',
+                    'Continue session or Start new session',
+                ].join('')
+            );
+        cy.getCy('chat-message-timeout-resume').should('be.visible');
+        cy.getCy('chat-message-timeout-reset').should('be.visible');
+
+        cy.getCy('chat-message-timeout-resume').click();
+        cy.get('@onResume').should('have.been.calledOnce');
+        cy.getCy('chat-message-timeout-reset').click();
+        cy.get('@onReset').should('have.been.calledOnce');
+    });
+
+    it('should render with custom data-cy', () => {
+        mount(<MessageTimeout onResume={cy.stub()} onReset={cy.stub()} data-cy="custom-data-cy" />);
+
+        cy.getCy('custom-data-cy').should('be.visible');
+        cy.getCy('custom-data-cy-resume').should('be.visible');
+        cy.getCy('custom-data-cy-reset').should('be.visible');
+    });
+});

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

@@ -0,0 +1,58 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="../../../cypress" />
+import { mount } from 'cypress/react';
+import { ChatParticipantIcon } from '../../../models/support-chat';
+import { MessageTyping } from '../message-typing';
+
+describe('ChatMessageTyping', () => {
+    function render(icon: ChatParticipantIcon) {
+        mount(
+            <MessageTyping
+                avatar={{
+                    name: 'Test User Name',
+                    icon,
+                    className: 'custom-class',
+                }}
+            />
+        );
+        cy.getCy('chat-message-typing').should('be.visible').children().should('have.length', 2);
+        cy.getCy('chat-message-typing-dots').should('be.visible');
+    }
+
+    it('should render message with bot icon', () => {
+        render(ChatParticipantIcon.Bot);
+        cy.getCy('chat-avatar-bot')
+            .should('be.visible')
+            .should('have.class', 'custom-class')
+            .invoke('css', 'background-image')
+            .then(bgColor => {
+                const isSvg = Boolean(
+                    (bgColor as any as string).indexOf('data:image/svg+xml;base64') >= 0
+                );
+                expect(isSvg).to.eq(true);
+            });
+    });
+
+    it('should render message with empty icon', () => {
+        render(ChatParticipantIcon.Empty);
+        cy.getCy('chat-avatar-empty').should('exist').should('not.be.visible');
+    });
+
+    it('should render message with initials', () => {
+        render(ChatParticipantIcon.Initials);
+        cy.getCy('chat-avatar-initials').should('be.visible').should('contain.text', 'T');
+    });
+
+    it('should not cancel the dots animation', () => {
+        cy.clock();
+        render(ChatParticipantIcon.Initials);
+        // Verify the rendered component + check the dots animation doesn't change over the time
+        cy.getCy('chat-message-typing-dots').should('be.visible');
+        cy.tick(10000);
+        cy.getCy('chat-message-typing-dots').should('be.visible');
+        cy.tick(20000);
+        cy.getCy('chat-message-typing-dots').should('be.visible');
+        cy.tick(30000);
+        cy.getCy('chat-message-typing-dots').should('be.visible');
+    });
+});

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

@@ -0,0 +1,52 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="../../../cypress" />
+import { BodyText } from '@servicetitan/design-system';
+import { mount } from 'cypress/react';
+import { MessageUser } from '../message-user';
+
+describe('[MessageUser]', () => {
+    beforeEach(() => {
+        cy.viewport('macbook-13');
+    });
+
+    it('should be properly rendered', () => {
+        mount(
+            <MessageUser>
+                <BodyText data-cy="content">message user content</BodyText>
+            </MessageUser>
+        );
+        cy.getCy('chat-message-user').should('be.visible');
+        cy.getCy2('chat-message-normal').should('be.visible');
+        cy.getCy('chat-message-user-content')
+            .should('be.visible')
+            .should('contain.text', 'message user content');
+    });
+
+    it('should be properly rendered with long text', () => {
+        const longText = 'message user content '.repeat(100).trim();
+        mount(
+            <MessageUser>
+                <BodyText data-cy="content">{longText}</BodyText>
+            </MessageUser>
+        );
+        cy.getCy('chat-message-user-content').should('be.visible').should('contain.text', longText);
+    });
+
+    it('should be rendered with footer', () => {
+        mount(
+            <MessageUser messageFooter={<BodyText>message user footer</BodyText>}>
+                <BodyText data-cy="content">message user content</BodyText>
+            </MessageUser>
+        );
+        cy.getCy('chat-message-user-footer').should('be.visible');
+    });
+
+    it('should be rendered with error', () => {
+        mount(
+            <MessageUser isError>
+                <BodyText data-cy="content">message user content</BodyText>
+            </MessageUser>
+        );
+        cy.getCy2('chat-message-error').should('be.visible');
+    });
+});

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

@@ -0,0 +1,59 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+@color-gradient-bot-start: #2270ee;
+@color-gradient-bot-end: #8772e5;
+
+/* stylelint-disable declaration-property-value-no-unknown */
+.messageRoot {
+    display: grid;
+    max-width: 100%;
+    column-gap: @spacing-2;
+    row-gap: @spacing-1;
+    grid-template-areas:
+        'avatar content .'
+        '.      footer  .';
+    grid-template-rows: auto 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;
+        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;
+
+    &.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

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const error: string;
+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

@@ -0,0 +1,62 @@
+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-agent.module.less';
+import { IMessageAvatarProps, MessageAvatar } from './message-avatar';
+
+export interface IMessageAgentProps extends IDataCyProps {
+    avatar?: IMessageAvatarProps;
+    messageFooter?: ReactNode;
+    isError?: boolean;
+    fullWidth?: boolean;
+    subtle?: boolean;
+}
+
+export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
+    avatar,
+    children,
+    fullWidth,
+    isError,
+    messageFooter,
+    subtle,
+    ...rest
+}) => {
+    const dataCy = rest['data-cy'] ?? 'chat-message-agent';
+    const dataCy2 = isError ? 'chat-message-error' : 'chat-message-normal';
+    return (
+        <div
+            className={classNames(Styles.messageRoot, {
+                [Styles.fullWidth]: Boolean(fullWidth),
+            })}
+            data-cy={dataCy}
+            data-cy2={dataCy2}
+        >
+            <div className={Styles.messageAvatar}>
+                {avatar ? <MessageAvatar {...avatar} /> : <div />}
+            </div>
+            <Stack
+                direction="column"
+                spacing="1"
+                className={classNames(Styles.messageContent, {
+                    'w-100': Boolean(fullWidth),
+                })}
+                data-cy={`${dataCy}-center`}
+            >
+                {subtle ? (
+                    children
+                ) : (
+                    <div
+                        className={classNames(Styles.messageBubble, {
+                            [Styles.error]: Boolean(isError),
+                        })}
+                        data-cy={`${dataCy}-content`}
+                    >
+                        {children}
+                    </div>
+                )}
+                {Boolean(messageFooter) && <div data-cy={`${dataCy}-footer`}>{messageFooter}</div>}
+            </Stack>
+        </div>
+    );
+};

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

@@ -0,0 +1,26 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.userIcon {
+    width: @spacing-5;
+    height: @spacing-5;
+    min-width: @spacing-5;
+    min-height: @spacing-5;
+    border-radius: @spacing-3;
+    background-color: @color-neutral-60;
+    font-size: @typescale-4;
+    color: @color-neutral-400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &.bot {
+        background-image: url('../../assets/floating-chat-avatar.svg');
+    }
+
+    &.system {
+        min-height: @spacing-0;
+        height: @spacing-0;
+        background-color: transparent;
+    }
+}

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

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const bot: string;
+export const system: string;
+export const userIcon: string;
+

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

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import { FC } from 'react';
+import { ChatParticipantIcon } from '../../models/support-chat';
+import * as Styles from './message-avatar.module.less';
+
+export interface IMessageAvatarProps {
+    className?: string;
+    name: string;
+    icon: ChatParticipantIcon;
+}
+
+export const MessageAvatar: FC<IMessageAvatarProps> = ({ className, icon, name }) => {
+    const isEmpty = icon === ChatParticipantIcon.Empty;
+    const isInitials = icon === ChatParticipantIcon.Initials;
+    const isBot = icon === ChatParticipantIcon.Bot;
+
+    return (
+        <div
+            className={classNames(
+                'align-self-end',
+                Styles.userIcon,
+                {
+                    [Styles.bot]: isBot,
+                    [Styles.system]: isEmpty,
+                },
+                className
+            )}
+            data-cy={`chat-avatar-${icon}`}
+        >
+            {isInitials ? name : null}
+        </div>
+    );
+};

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

@@ -0,0 +1,17 @@
+import { Eyebrow } from '@servicetitan/design-system';
+import { FC } from 'react';
+import { formatChatMessageDate } from '../../utils/text-utils';
+
+export interface IMessageFooterProps {
+    timestamp: Date;
+    name?: string;
+}
+
+export const MessageFooter: FC<IMessageFooterProps> = ({ name, timestamp }) => {
+    return (
+        <Eyebrow>
+            {name && `${name} • `}
+            {formatChatMessageDate(timestamp)}
+        </Eyebrow>
+    );
+};

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

@@ -0,0 +1,26 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+/* stylelint-disable declaration-property-value-no-unknown */
+.messageRoot {
+    display: grid;
+    grid-template-areas: '. content .';
+    grid-template-rows: auto;
+    grid-template-columns: minmax(@spacing-5, auto) 1fr minmax(@spacing-5, auto);
+    column-gap: @spacing-2;
+    row-gap: @spacing-1;
+    width: 100%;
+
+    &.fullWidth {
+        grid-template:
+            'content' auto
+            /
+            1fr;
+    }
+}
+
+.messageContent {
+    grid-area: content;
+    overflow-wrap: anywhere;
+    justify-self: flex-start;
+    width: 100%;
+}

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

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const fullWidth: string;
+export const messageContent: string;
+export const messageRoot: string;
+

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

@@ -0,0 +1,35 @@
+import { Stack } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import { FC, PropsWithChildren } from 'react';
+import { IDataCyProps } from '../../models/component';
+import * as Styles from './message-system.module.less';
+
+export interface IMessageSystemProps extends IDataCyProps {
+    fullWidth?: boolean;
+    className?: string;
+}
+
+export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
+    children,
+    className,
+    fullWidth,
+    ...rest
+}) => {
+    const dataCy = rest['data-cy'] ?? 'chat-message-system';
+    return (
+        <div
+            className={classNames(
+                Styles.messageRoot,
+                {
+                    [Styles.fullWidth]: Boolean(fullWidth),
+                },
+                className
+            )}
+            data-cy={dataCy}
+        >
+            <Stack direction="column" spacing="1" className={Styles.messageContent}>
+                {children}
+            </Stack>
+        </div>
+    );
+};

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

@@ -0,0 +1,42 @@
+import { BodyText, Divider, Link, Stack } from '@servicetitan/design-system';
+import { FC, useCallback } from 'react';
+import { IDataCyProps } from '../../models/component';
+import { MessageSystem } from './message-system';
+
+export interface IMessageTimeoutProps extends IDataCyProps {
+    onResume: () => void;
+    onReset: () => void;
+}
+
+export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume, ...rest }) => {
+    const dataCy = rest['data-cy'] ?? 'chat-message-timeout';
+
+    const handleResume = useCallback(() => {
+        onResume();
+    }, [onResume]);
+
+    const handleReset = useCallback(() => {
+        onReset();
+    }, [onReset]);
+
+    return (
+        <MessageSystem data-cy={dataCy} fullWidth>
+            <Stack direction="column" spacing="2">
+                <Divider />
+                <BodyText el="div" className="ta-center">
+                    Your session has timed out.
+                    <br />
+                    Would you like to resume it or start a new one?
+                    <br />
+                    <Link onClick={handleResume} primary data-cy={`${dataCy}-resume`}>
+                        Continue session
+                    </Link>{' '}
+                    or{' '}
+                    <Link onClick={handleReset} primary data-cy={`${dataCy}-reset`}>
+                        Start new session
+                    </Link>
+                </BodyText>
+            </Stack>
+        </MessageSystem>
+    );
+};