@servicetitan/titan-chat-ui-anvil2 3.1.0 → 3.1.1

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

@@ -1,9 +1,8 @@
-import { Announcement, Link, Text } from '@servicetitan/anvil2';
+import { Alert, Link, Text } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { CHAT_UI_STORE_TOKEN } from '@servicetitan/titan-chat-ui-common';
 import { observer } from 'mobx-react';
 import { FC, useCallback } from 'react';
-import * as Styles from './chat-timer.module.less';
 
 export const ChatTimer: FC = observer(() => {
     const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
@@ -15,12 +14,7 @@ export const ChatTimer: FC = observer(() => {
         return null;
     }
     return (
-        <Announcement
-            status="info"
-            title="Chat inactive"
-            className={Styles.banner}
-            data-cy="titan-chat-timer"
-        >
+        <Alert status="info" title="Chat inactive" data-cy="titan-chat-timer">
             <Text variant="body">
                 {'Are you still there? Please respond within '}
                 <b>{secondsLeft}s</b>
@@ -29,6 +23,6 @@ export const ChatTimer: FC = observer(() => {
             <Link onClick={restartTimers} appearance="secondary" data-cy="titan-chat-timer-restart">
                 I'm here
             </Link>
-        </Announcement>
+        </Alert>
     );
 });

package/src/components/chat/chat.module.less

@@ -0,0 +1,9 @@
+.scrollContainer {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.fileContainer {
+    border-width: 1px;
+    border-style: dashed;
+}

package/src/components/chat/chat.module.less.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const fileContainer: string;
+export const scrollContainer: string;
+

package/src/components/chat/chat.tsx

@@ -1,13 +1,15 @@
 import { Flex } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { CHAT_UI_STORE_TOKEN, ChatCustomizations } from '@servicetitan/titan-chat-ui-common';
+import classNames from 'classnames';
 import { observer } from 'mobx-react';
-import { FC, Fragment, useEffect, useRef } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { ChatConnecting } from './chat-connecting';
 import { ChatInput } from './chat-input';
 import { ChatInputFile } from './chat-input-file';
 import { ChatMessages } from './chat-messages';
 import { ChatNotifications } from './chat-notifications';
+import * as Styles from './chat.module.less';
 
 export interface IChatProps {
     className?: string;
@@ -33,27 +35,38 @@ export const Chat: FC<IChatProps> = observer(({ className, customizations }) =>
         }, 0);
     }, [chatUiStore.scrollCounter]);
 
+    if (chatUiStore.isStarting) {
+        return (
+            <Flex direction="column" className={className} data-cy="titan-chat">
+                {loadingComponent ?? <ChatConnecting className="p-inline-6 p-block-4" />}
+            </Flex>
+        );
+    }
     return (
         <Flex direction="column" className={className} data-cy="titan-chat">
-            {chatUiStore.isStarting ? (
-                (loadingComponent ?? <ChatConnecting className="p-x-3 p-y-2" />)
-            ) : (
-                <Fragment>
-                    <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 />
-                    {!chatUiStore.customizations?.input?.isDisabled && (
-                        <Flex className="p-x-3 p-y-2" direction="column" gap="4">
-                            <ChatInputFile className="p-2 box-sizing-border-box border-radius-1 border border-style-dashed" />
-                            <ChatInput />
-                            {Boolean(footerComponent) && footerComponent}
-                        </Flex>
-                    )}
-                </Fragment>
+            <Flex
+                direction="column"
+                ref={scrollRef}
+                grow="1"
+                className={classNames('p-inline-6 p-block-4', Styles.scrollContainer)}
+            >
+                <ChatMessages
+                    messages={chatUiStore.messages}
+                    showTypingIndicator={chatUiStore.isAgentTyping}
+                />
+            </Flex>
+            <ChatNotifications />
+            {!chatUiStore.customizations?.input?.isDisabled && (
+                <Flex className="p-inline-6 p-block-4" direction="column" gap="4">
+                    <ChatInputFile
+                        className={classNames(
+                            'p-4 border-radius-small border-color-subdued',
+                            Styles.fileContainer
+                        )}
+                    />
+                    <ChatInput />
+                    {Boolean(footerComponent) && footerComponent}
+                </Flex>
             )}
         </Flex>
     );

package/src/components/message-content/__tests-cy__/message-content-file.test.tsx

@@ -0,0 +1,6 @@
+import { runMessageContentFileSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { MessageContentFile } from '../message-content-file';
+
+describe('MessageContentFile', () => {
+    runMessageContentFileSharedTests(MessageContentFile, { isAnvil2: true });
+});

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

@@ -1,142 +1,21 @@
-import { AnvilProvider, Button, Flex, Text } from '@servicetitan/anvil2';
+import { Button, Flex, Text } from '@servicetitan/anvil2';
 import IconThumbDown from '@servicetitan/anvil2/assets/icons/material/round/thumb_down.svg';
 import IconThumbUp from '@servicetitan/anvil2/assets/icons/material/round/thumb_up.svg';
-import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount as cyMount } from 'cypress/react';
-import { ReactNode } from 'react';
+import { runMessageAgentSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 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());
-    });
-
-    const mount = (children: ReactNode) => {
-        return cyMount(<AnvilProvider>{children}</AnvilProvider>);
-    };
-
-    it('should be properly rendered', () => {
-        mount(
-            <MessageAgent
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                    className: 'custom-class',
-                }}
-            >
-                <Text data-cy="content">message agent content</Text>
-            </MessageAgent>
-        );
-        ChatUiSelectors.chatMessageAgent.should('be.visible').children().should('have.length', 2);
-        ChatUiSelectors.chatAvatarBot.should('be.visible').should('have.class', 'custom-class');
-        ChatUiSelectors.chatMessageContentAgent.should('contain.text', 'message agent content');
-    });
-
-    it('should be full width', () => {
-        mount(
-            <MessageAgent
-                fullWidth
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <Text>message agent content</Text>
-            </MessageAgent>
-        );
-        ChatUiSelectors.chatMessageContentAgent.should('contain.text', 'message agent content');
-    });
-
-    it('should render with custom data-cy', () => {
-        mount(
-            <MessageAgent
-                data-cy="custom-data-cy"
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <Text>message agent content</Text>
-            </MessageAgent>
-        );
-        cy.getCy('custom-data-cy').should('be.visible');
-    });
-
-    it('should render custom message footer', () => {
-        mount(
-            <MessageAgent
-                messageFooter={
-                    <Flex direction="row" justifyContent="space-between" alignItems="center">
-                        <MessageFooter name="name" timestamp={new Date()} />
-                        <Flex direction="row" gap="2">
-                            <Button icon={IconThumbUp} size="small" appearance="ghost" />
-                            <Button icon={IconThumbDown} size="small" appearance="ghost" />
-                        </Flex>
-                    </Flex>
-                }
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <Text>message agent content</Text>
-            </MessageAgent>
-        );
-        ChatUiSelectors.chatMessageAgent.should('be.visible').children().should('have.length', 2);
-        ChatUiSelectors.chatMessageFooter
-            .should('be.visible')
-            .should('contain.text', 'name • 10:10 AM');
-    });
-
-    it('should render subtle message', () => {
-        mount(
-            <MessageAgent
-                subtle
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <Flex className="border h-100" alignItems="center" data-cy="custom-content">
-                    <Text>message agent content</Text>
-                </Flex>
-            </MessageAgent>
-        );
-        ChatUiSelectors.chatAvatarBot.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,
-                    }}
-                >
-                    <Text>message agent content</Text>
-                </MessageAgent>
-            );
-        };
-        it('icon bot', () => {
-            render(ChatParticipantIcon.Bot);
-            ChatUiSelectors.chatAvatarBot.should('be.visible');
-        });
-
-        it('icon initials', () => {
-            render(ChatParticipantIcon.Initials);
-            ChatUiSelectors.chatAvatarInitials.should('be.visible').should('contain.text', 'T');
-        });
-
-        it('icon empty', () => {
-            render(ChatParticipantIcon.Empty);
-            ChatUiSelectors.chatAvatarEmpty.should('exist').should('not.be.visible');
-        });
-    });
+describe('MessageAgent', () => {
+    runMessageAgentSharedTests(
+        MessageAgent,
+        {
+            TextComponent: Text,
+            ButtonComponent: Button,
+            ContainerComponent: Flex,
+            MessageFooterComponent: MessageFooter,
+            thumbUpIcon: IconThumbUp,
+            thumbDownIcon: IconThumbDown,
+        },
+        { isAnvil2: true }
+    );
 });

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

@@ -1,32 +1,14 @@
 import { Flex, Text } from '@servicetitan/anvil2';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageSystemSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { MessageSystem } from '../message-system';
 
-describe('[MessageSystem]', () => {
-    beforeEach(() => {
-        cy.viewport('macbook-13');
-    });
-
-    it('should be properly rendered', () => {
-        mount(
-            <MessageSystem className="custom-class">
-                <Flex className="border">
-                    <Text data-cy="content">message system content</Text>
-                </Flex>
-            </MessageSystem>
-        );
-        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
-    });
-
-    it('should be properly rendered fullwidth', () => {
-        mount(
-            <MessageSystem className="custom-class" fullWidth>
-                <Flex className="border">
-                    <Text data-cy="content">message system content</Text>
-                </Flex>
-            </MessageSystem>
-        );
-        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
-    });
+describe('MessageSystem', () => {
+    runMessageSystemSharedTests(
+        MessageSystem,
+        {
+            TextComponent: Text,
+            ContainerComponent: Flex,
+        },
+        { isAnvil2: true }
+    );
 });

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

@@ -1,29 +1,6 @@
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageTimeoutSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 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} />);
-
-        ChatUiSelectors.chatMessageTimeout
-            .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('')
-            );
-        ChatUiSelectors.chatMessageTimeoutResume.should('be.visible');
-        ChatUiSelectors.chatMessageTimeoutReset.should('be.visible');
-
-        ChatUiSelectors.chatMessageTimeoutResume.click();
-        cy.get('@onResume').should('have.been.calledOnce');
-        ChatUiSelectors.chatMessageTimeoutReset.click();
-        cy.get('@onReset').should('have.been.calledOnce');
-    });
+    runMessageTimeoutSharedTests(MessageTimeout);
 });

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

@@ -1,57 +1,6 @@
-import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageTypingSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { MessageTyping } from '../message-typing';
 
-describe('ChatMessageTyping', () => {
-    function render(icon: ChatParticipantIcon) {
-        mount(
-            <MessageTyping
-                avatar={{
-                    name: 'Test User Name',
-                    icon,
-                    className: 'custom-class',
-                }}
-            />
-        );
-        ChatUiSelectors.chatMessageTyping.should('be.visible').children().should('have.length', 2);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-    }
-
-    it('should render message with bot icon', () => {
-        render(ChatParticipantIcon.Bot);
-        ChatUiSelectors.chatAvatarBot
-            .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);
-        ChatUiSelectors.chatAvatarEmpty.should('exist').should('not.be.visible');
-    });
-
-    it('should render message with initials', () => {
-        render(ChatParticipantIcon.Initials);
-        ChatUiSelectors.chatAvatarInitials.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
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(10000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(20000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(30000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-    });
+describe('MessageTyping', () => {
+    runMessageTypingSharedTests(MessageTyping);
 });

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

@@ -1,41 +1,7 @@
 import { Text } from '@servicetitan/anvil2';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageUserSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { MessageUser } from '../message-user';
 
-describe('[MessageUser]', () => {
-    beforeEach(() => {
-        cy.viewport('macbook-13');
-    });
-
-    it('should be properly rendered', () => {
-        mount(
-            <MessageUser>
-                <Text data-cy="content">message user content</Text>
-            </MessageUser>
-        );
-        ChatUiSelectors.chatMessageUser.should('be.visible');
-        ChatUiSelectors.chatMessageContent
-            .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>
-                <Text data-cy="content">{longText}</Text>
-            </MessageUser>
-        );
-        ChatUiSelectors.chatMessageContent.should('be.visible').should('contain.text', longText);
-    });
-
-    it('should be rendered with footer', () => {
-        mount(
-            <MessageUser messageFooter={<Text>message user footer</Text>}>
-                <Text data-cy="content">message user content</Text>
-            </MessageUser>
-        );
-        ChatUiSelectors.chatMessageFooter.should('be.visible');
-    });
+describe('MessageUser', () => {
+    runMessageUserSharedTests(MessageUser, Text);
 });

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

@@ -0,0 +1,3 @@
+.timeoutMessage {
+    text-align: center;
+}

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

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const timeoutMessage: string;
+

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

@@ -1,6 +1,7 @@
 import { Divider, Flex, Link, Text } from '@servicetitan/anvil2';
 import { FC, useCallback } from 'react';
 import { MessageSystem } from './message-system';
+import * as Styles from './message-timeout.module.less';
 
 export interface IMessageTimeoutProps {
     onResume: () => void;
@@ -18,9 +19,9 @@ export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume })
 
     return (
         <MessageSystem data-cy="titan-chat-message-timeout" fullWidth>
-            <Flex direction="column" gap="4">
+            <Flex direction="column" alignItems="center" gap="4">
                 <Divider />
-                <Text className="ta-center">
+                <Text variant="body" className={Styles.timeoutMessage}>
                     Your session has timed out.
                     <br />
                     Would you like to resume it or start a new one?

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

@@ -1,5 +1,9 @@
 @import '@servicetitan/tokens/dist/tokens.less';
 
+.container {
+    height: 100%;
+}
+
 .dotsContainer {
     @keyframes dot-jumping {
         0% {

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

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

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

@@ -10,7 +10,7 @@ export interface IMessageTypingProps {
 
 export const MessageTyping: FC<IMessageTypingProps> = ({ avatar }) => (
     <MessageAgent avatar={avatar} data-cy="titan-chat-message-typing" subtle>
-        <Flex className="h-100" alignItems="center">
+        <Flex className={Styles.container} alignItems="center">
             <div className={Styles.dotsContainer} data-cy="titan-chat-message-typing-dots">
                 <span className={Styles.dot} />
                 <span className={Styles.dot} />