@servicetitan/titan-chat-ui-anvil2 3.0.0

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

@@ -0,0 +1,18 @@
+import { Text } from '@servicetitan/anvil2';
+import { formatChatMessageDate } from '@servicetitan/titan-chat-ui-common';
+import { FC } from 'react';
+
+export interface IMessageFooterProps {
+    timestamp?: Date;
+    name?: string;
+}
+
+export const MessageFooter: FC<IMessageFooterProps> = ({ name, timestamp }) => {
+    return (
+        <Text variant="eyebrow">
+            {Boolean(name) && name}
+            {name && timestamp && ' • '}
+            {timestamp && formatChatMessageDate(timestamp)}
+        </Text>
+    );
+};

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,36 @@
+import { Flex } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, PropsWithChildren } from 'react';
+import * as Styles from './message-system.module.less';
+
+export interface IMessageSystemProps {
+    fullWidth?: boolean;
+    className?: string;
+    ['data-cy']?: string;
+}
+
+export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
+    children,
+    className,
+    fullWidth,
+    ...rest
+}) => {
+    const dataCy = rest['data-cy'] ?? 'titan-chat-message-system';
+    return (
+        <div
+            className={classNames(
+                Styles.messageRoot,
+                {
+                    [Styles.fullWidth]: Boolean(fullWidth),
+                },
+                className
+            )}
+            data-cy2="titan-chat-message"
+            data-cy={dataCy}
+        >
+            <Flex direction="column" gap="2" className={Styles.messageContent}>
+                {children}
+            </Flex>
+        </div>
+    );
+};

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

@@ -0,0 +1,47 @@
+import { Divider, Flex, Link, Text } from '@servicetitan/anvil2';
+import { FC, useCallback } from 'react';
+import { MessageSystem } from './message-system';
+
+export interface IMessageTimeoutProps {
+    onResume: () => void;
+    onReset: () => void;
+}
+
+export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume }) => {
+    const handleResume = useCallback(() => {
+        onResume();
+    }, [onResume]);
+
+    const handleReset = useCallback(() => {
+        onReset();
+    }, [onReset]);
+
+    return (
+        <MessageSystem data-cy="titan-chat-message-timeout" fullWidth>
+            <Flex direction="column" gap="4">
+                <Divider />
+                <Text className="ta-center">
+                    Your session has timed out.
+                    <br />
+                    Would you like to resume it or start a new one?
+                    <br />
+                    <Link
+                        onClick={handleResume}
+                        appearance="primary"
+                        data-cy="titan-chat-message-timeout-resume"
+                    >
+                        Continue session
+                    </Link>{' '}
+                    or{' '}
+                    <Link
+                        onClick={handleReset}
+                        appearance="primary"
+                        data-cy="titan-chat-message-timeout-reset"
+                    >
+                        Start new session
+                    </Link>
+                </Text>
+            </Flex>
+        </MessageSystem>
+    );
+};

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,21 @@
+import { Flex } from '@servicetitan/anvil2';
+import { FC } from 'react';
+import { MessageAgent } from './message-agent';
+import { IMessageAvatarProps } from './message-avatar';
+import * as Styles from './message-typing.module.less';
+
+export interface IMessageTypingProps {
+    avatar: IMessageAvatarProps;
+}
+
+export const MessageTyping: FC<IMessageTypingProps> = ({ avatar }) => (
+    <MessageAgent avatar={avatar} data-cy="titan-chat-message-typing" subtle>
+        <Flex className="h-100" alignItems="center">
+            <div className={Styles.dotsContainer} data-cy="titan-chat-message-typing-dots">
+                <span className={Styles.dot} />
+                <span className={Styles.dot} />
+                <span className={Styles.dot} />
+            </div>
+        </Flex>
+    </MessageAgent>
+);

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

@@ -0,0 +1,32 @@
+@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;
+    column-gap: @spacing-2;
+    row-gap: @spacing-1;
+}
+
+.messageFooter {
+    text-align: right;
+}
+
+.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,46 @@
+import { Flex } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import * as Styles from './message-user.module.less';
+
+export interface IMessageUserProps {
+    messageFooter?: ReactNode;
+    isError?: boolean;
+    className?: string;
+}
+
+export const MessageUser: FC<PropsWithChildren<IMessageUserProps>> = ({
+    children,
+    className,
+    isError,
+    messageFooter,
+}) => {
+    return (
+        <div
+            className={classNames(Styles.messageRoot, 'max-w-100', className)}
+            data-cy2="titan-chat-message"
+            data-cy="titan-chat-message-user"
+        >
+            <Flex
+                direction="column"
+                gap="2"
+                className={classNames('max-w-100', Styles.messageContent)}
+            >
+                <div
+                    className={classNames(Styles.messageBubble, {
+                        [Styles.error]: isError,
+                    })}
+                    data-cy="titan-chat-message-content"
+                    data-cy2="titan-chat-message-content-user"
+                >
+                    {children}
+                </div>
+                {Boolean(messageFooter) && (
+                    <div className={Styles.messageFooter} data-cy="titan-chat-message-footer">
+                        {messageFooter}
+                    </div>
+                )}
+            </Flex>
+        </div>
+    );
+};

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

@@ -0,0 +1,16 @@
+import { ChatParticipantIcon, getNameInitialsFirst } from '@servicetitan/titan-chat-ui-common';
+import { useMemo } from 'react';
+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,13 @@
+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';
+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 { ChatInputStore } from './stores/chat-input.store';

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

@@ -0,0 +1,43 @@
+import { expect } from '@jest/globals';
+import { Container } from '@servicetitan/react-ioc';
+import { initTestContainer } from '@servicetitan/titan-chat-ui-common';
+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);
+        expect(store.isEmpty).toBe(true);
+
+        store.formState.$.message.onChange('test');
+        expect(store.formState.$.message.value).toBe('test');
+        const validateResult2 = await store.formState.validate();
+        expect(validateResult2.hasError).toBe(false);
+        expect(store.isEmpty).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);
+        expect(store.isEmpty).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.');
+        expect(store.isEmpty).toBe(false);
+    });
+});

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/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "extends": "@servicetitan/startup/tsconfig/base",
+    "compilerOptions": {
+        "composite": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "jsx": "react-jsx",
+        "moduleResolution": "bundler"
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules"
+    ],
+    "references": [
+        {
+            "path": "../titan-chatbot-ui-cypress"
+        },
+        {
+            "path": "../titan-chat-ui-common"
+        }
+    ]
+}