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

package/src/components/chat/__tests-cy__/chat-messages.test.tsx

@@ -1,111 +1,6 @@
-import { Provider } from '@servicetitan/react-ioc';
-import { CHAT_UI_STORE_TOKEN, mockChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors, CypressMocks } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runChatMessagesSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { ChatMessages } from '../chat-messages';
 
 describe('[ChatMessages]', () => {
-    let storeMock: CypressMocks.ChatUiStoreMock;
-
-    beforeEach(() => {
-        cy.viewport(780, 600);
-        cy.clock(new Date('2023-10-01T10:10:00Z').getTime());
-        storeMock = new CypressMocks.ChatUiStoreMock();
-    });
-
-    const render = () => {
-        return mount(
-            <Provider
-                singletons={[
-                    {
-                        provide: CHAT_UI_STORE_TOKEN,
-                        useValue: storeMock,
-                    },
-                ]}
-            >
-                <ChatMessages messages={storeMock.messages} />
-            </Provider>
-        );
-    };
-
-    it('should render default chat', () => {
-        render();
-
-        ChatUiSelectors.chatMessages.should('be.visible');
-        ChatUiSelectors.chatMessage.should('have.length', 2);
-    });
-
-    it('should render several consecutive agent messages without extra avatars', () => {
-        storeMock.messages = [
-            mockChatMessageModelText(true, {
-                id: 'id1',
-                timestamp: new Date('2023-01-01T10:10:00Z'),
-                message: 'Hello, this is the first message',
-            }),
-            mockChatMessageModelText(true, {
-                id: 'id2',
-                message: 'Hello, this is the second message. '.repeat(5).trim(),
-                timestamp: new Date('2023-01-01T10:10:59.999Z'),
-            }),
-            mockChatMessageModelText(true, {
-                id: 'id3',
-                message: 'Hello, this is the third message',
-                timestamp: new Date('2023-01-01T10:11:00Z'),
-            }),
-            mockChatMessageModelText(true, {
-                id: 'id4',
-                message: 'Hello, this is the forth message',
-                timestamp: new Date('2023-01-01T10:11:01Z'),
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id11',
-                timestamp: new Date('2023-01-01T11:10:00Z'),
-                message: 'Hello, this is the first message',
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id22',
-                message: 'Hello, this is the second message',
-                timestamp: new Date('2023-01-01T11:11:00Z'),
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id33',
-                message: 'Hello, this is the third message',
-                timestamp: new Date('2023-01-01T11:12:00Z'),
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id44',
-                message: 'Hello, this is the forth message',
-                timestamp: new Date('2023-01-01T11:12:01Z'),
-            }),
-        ];
-        render();
-
-        const getTimestamp = (i: number) =>
-            ChatUiSelectors.chatMessage
-                .eq(i)
-                .find(`[data-cy="${ChatUiSelectors.cy.chatMessageFooter}"]`);
-
-        ChatUiSelectors.chatMessageAgent.should('have.length', 4);
-        ChatUiSelectors.chatMessageUser.should('have.length', 4);
-
-        // Agent avatar should be visible only for the first message in group
-        const getAvatar = (i: number) =>
-            ChatUiSelectors.chatMessageAgent
-                .find(`[data-cy="${ChatUiSelectors.cy.chatAvatar}"]`)
-                .eq(i);
-        getAvatar(0).should('be.visible');
-        getAvatar(1).should('not.exist');
-        getAvatar(2).should('not.exist');
-        getAvatar(3).should('not.exist');
-
-        // Footer with date should be visible only for the different formatted timestamps
-        getTimestamp(0).should('not.exist');
-        getTimestamp(1).should('be.visible').should('contain.text', 'agent • 10:10 AM');
-        getTimestamp(2).should('not.exist');
-        getTimestamp(3).should('be.visible').should('contain.text', 'agent • 10:11 AM');
-        getTimestamp(4).should('be.visible').should('contain.text', '11:10 AM');
-        getTimestamp(5).should('be.visible').should('contain.text', '11:11 AM');
-        getTimestamp(6).should('not.exist');
-        getTimestamp(7).should('be.visible').should('contain.text', '11:12 AM');
-    });
+    runChatMessagesSharedTests(ChatMessages);
 });

package/src/components/chat/__tests-cy__/chat-notifications.test.tsx

@@ -0,0 +1,6 @@
+import { runChatNotificationsTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatNotifications } from '../chat-notifications';
+
+describe('ChatNotifications', () => {
+    runChatNotificationsTests(ChatNotifications);
+});

package/src/components/chat/__tests-cy__/chat-timer.test.tsx

@@ -0,0 +1,6 @@
+import { runChatTimerTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatTimer } from '../chat-timer';
+
+describe('ChatTimer', () => {
+    runChatTimerTests(ChatTimer);
+});

package/src/components/chat/__tests-cy__/chat.test.tsx

@@ -1,164 +1,6 @@
-import { AnvilProvider } from '@servicetitan/anvil2';
-import { Container, provide, useDependencies } from '@servicetitan/react-ioc';
-import {
-    CHAT_UI_BACKEND_STORE_TOKEN,
-    CHAT_UI_STORE_TOKEN,
-    ChatParticipantIcon,
-    ChatUiBackendEchoStore,
-    ChatUiStore,
-    IChatUiBackendStore,
-    IChatUiStore,
-} from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount as cyMount } from 'cypress/react';
-import { ReactNode, useEffect } from 'react';
+import { runChatSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { Chat } from '../chat';
 
-const mount = (children: ReactNode) => {
-    return cyMount(<AnvilProvider>{children}</AnvilProvider>);
-};
-
-const initContainer = () => {
-    const rootContainer = new Container();
-    const container = new Container();
-    container.parent = rootContainer;
-    container.bind<IChatUiStore>(CHAT_UI_STORE_TOKEN).to(ChatUiStore).inSingletonScope();
-    container
-        .bind<IChatUiBackendStore>(CHAT_UI_BACKEND_STORE_TOKEN)
-        .to(ChatUiBackendEchoStore)
-        .inSingletonScope();
-    return container;
-};
-
-describe('[Chat]', () => {
-    let container: Container;
-    let chatUiStore: IChatUiStore;
-    let chatUiBackendStore: ChatUiBackendEchoStore;
-
-    beforeEach(() => {
-        container = initContainer();
-        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
-        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
-        cy.viewport(780, 800);
-        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
-    });
-
-    const render = () => {
-        const ChatWrapper = provide({
-            singletons: [
-                {
-                    provide: CHAT_UI_STORE_TOKEN,
-                    useValue: chatUiStore,
-                },
-                {
-                    provide: CHAT_UI_BACKEND_STORE_TOKEN,
-                    useValue: chatUiBackendStore,
-                },
-            ],
-        })(() => {
-            const [chatUiStore, chatUiBackendStore] = useDependencies(
-                CHAT_UI_STORE_TOKEN,
-                CHAT_UI_BACKEND_STORE_TOKEN
-            );
-            useEffect(() => {
-                const init = async () => {
-                    chatUiBackendStore.subscribe();
-                    await chatUiStore.run({
-                        agentName: 'EchoBot',
-                        agentIcon: ChatParticipantIcon.Bot,
-                    });
-                };
-                init().then(() => {});
-                return () => chatUiBackendStore.unsubscribe();
-            }, [chatUiStore, chatUiBackendStore]);
-            return <Chat className="h-100vh max-h-100vh" />;
-        });
-
-        cy.spy(chatUiStore, 'run').as('runSpy');
-        mount(<ChatWrapper />);
-
-        ChatUiSelectors.chatConnecting.should('be.visible');
-        cy.tick(1000);
-        return cy.wrap(
-            new Promise(resolve => {
-                cy.get('@runSpy')
-                    .should('have.been.calledOnce')
-                    .then((invocation: any) => {
-                        const initPromise = invocation.firstCall.returnValue as ReturnType<
-                            IChatUiStore['run']
-                        >;
-                        initPromise.then(resolve);
-                    });
-            })
-        );
-    };
-
-    const ask = (message: string) => {
-        ChatUiSelectors.chatInput.type(`${message}{enter}`);
-    };
-
-    it('should render default chat', () => {
-        render().then(() => {
-            ChatUiSelectors.chatMessages.should('be.visible');
-            ChatUiSelectors.chatMessageAgent.should('have.length', 1).should('be.visible');
-            ChatUiSelectors.chatMessageContentAgent
-                .should('be.visible')
-                .should(
-                    'contain.text',
-                    "Hello! I'm generic echo bot. I can echo your messages. Try it out!"
-                );
-            ChatUiSelectors.chatNotifications.should('exist');
-            ChatUiSelectors.chatSend.should('be.visible').should('be.disabled');
-            ChatUiSelectors.chatInput.should('be.visible').should('not.be.disabled');
-
-            ChatUiSelectors.chatInput.type('Hello');
-            ChatUiSelectors.chatSend.click();
-
-            ChatUiSelectors.chatMessageUser
-                .should('be.visible')
-                .should('have.length', 1)
-                .should('contain.text', 'Hello');
-            ChatUiSelectors.chatMessageTyping.should('be.visible');
-            ChatUiSelectors.chatMessageAgent.should('have.length', 1);
-
-            cy.tick(1000);
-
-            ChatUiSelectors.chatMessageTyping.should('not.exist');
-            ChatUiSelectors.chatMessageAgent.should('have.length', 2);
-        });
-    });
-
-    it('should render chat error message', () => {
-        render().then(() => {
-            chatUiStore.setTimer({ secondsTotal: 100, secondsLeft: 10 });
-            chatUiStore.setError('error message', {
-                title: 'Custom Error',
-                recoverStrategy: {
-                    recoverButtonTitle: 'Recover button title',
-                },
-            });
-
-            ChatUiSelectors.chatTimer.should('not.exist');
-            ChatUiSelectors.chatError.should('be.visible');
-        });
-    });
-
-    it('should handle send message error and retry', () => {
-        render().then(() => {
-            ask('[Error]Custom error message');
-            cy.tick(1000);
-
-            // Check error message
-            ChatUiSelectors.chatMessageError
-                .should('be.visible')
-                .should('contain.text', 'Message not delivered. Retry');
-            ChatUiSelectors.chatError
-                .should('be.visible')
-                .should('contain.text', ['Custom Error Title', 'Custom error message'].join(''));
-
-            // Retry message
-            ChatUiSelectors.chatMessageErrorRetry.should('be.visible').click();
-            cy.tick(1000);
-        });
-    });
+describe('Chat', () => {
+    runChatSharedTests(Chat);
 });

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

@@ -16,7 +16,7 @@ export const ChatConnecting: FC<IChatConnectingProps> = ({ className }) => {
         >
             <Flex direction="row" gap="4" alignItems="center">
                 <Spinner />
-                <Text className="c-neutral-100">Starting...</Text>
+                <Text className="c-subdued">Starting...</Text>
             </Flex>
         </Flex>
     );

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

@@ -1,12 +1,11 @@
-import { Announcement, Button } from '@servicetitan/anvil2';
+import { Alert, Button, Flex } 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 { MultilineText } from '../common/multiline-text';
-import * as Styles from './chat-error.module.less';
 
-export const ChatError: FC = observer(() => {
+export const ChatError: FC<{ className?: string }> = observer(({ className }) => {
     const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
     const { error } = chatUiStore;
 
@@ -18,23 +17,21 @@ export const ChatError: FC = observer(() => {
         return null;
     }
     return (
-        <Announcement
-            status="danger"
-            title={error.title}
-            className={Styles.banner}
-            data-cy="titan-chat-error"
-        >
-            <MultilineText text={error.message} data-cy="titan-chat-error-text" />
-            {error.recoverStrategy && (
-                <Button
-                    className="m-t-2 bg-white-i"
-                    size="small"
-                    onClick={handleReconnect}
-                    data-cy="titan-chat-error-recover"
-                >
-                    {error.recoverStrategy.recoverButtonTitle}
-                </Button>
-            )}
-        </Announcement>
+        <Alert status="danger" title={error.title} className={className} data-cy="titan-chat-error">
+            <Flex direction="column" gap="4">
+                <MultilineText text={error.message} data-cy="titan-chat-error-text" />
+                {error.recoverStrategy && (
+                    <Button
+                        type="button"
+                        appearance="danger"
+                        size="small"
+                        onClick={handleReconnect}
+                        data-cy="titan-chat-error-recover"
+                    >
+                        {error.recoverStrategy.recoverButtonTitle}
+                    </Button>
+                )}
+            </Flex>
+        </Alert>
     );
 });

package/src/components/chat/chat-input-file.tsx

@@ -1,20 +1,28 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Flex, Text } from '@servicetitan/anvil2';
+import { Button, Card, Flex, Icon, Text } from '@servicetitan/anvil2';
+import IconAttachment from '@servicetitan/anvil2/assets/icons/material/round/attach_file.svg';
+import IconDelete from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
+import IconFile from '@servicetitan/anvil2/assets/icons/material/round/insert_drive_file.svg';
+import IconEdit from '@servicetitan/anvil2/assets/icons/material/round/refresh.svg';
 import { FileDescriptor } from '@servicetitan/form';
 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, useEffect, useState } from 'react';
+import { ChangeEvent, FC, Fragment, useCallback, useEffect, useRef, useState } from 'react';
 
 export const ChatInputFile: FC<{ className?: string }> = observer(({ className }) => {
+    const fileInputRef = useRef<HTMLInputElement>(null);
     const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
     const [fileDescriptor, setFileDescriptor] = useState<FileDescriptor | undefined>(undefined);
 
     const handleSelected = useCallback(
-        (newAttachments: FileList) => {
+        (event: ChangeEvent<HTMLInputElement>) => {
+            const files = event.target.files;
+            if (!files || files.length === 0) {
+                return;
+            }
             const fileDescriptor: FileDescriptor = {
-                file: newAttachments[0],
-                displayName: newAttachments[0].name,
+                file: files[0],
+                displayName: files[0].name,
             };
             setFileDescriptor(fileDescriptor);
             chatUiStore.setFile(fileDescriptor);
@@ -22,17 +30,9 @@ export const ChatInputFile: FC<{ className?: string }> = observer(({ className }
         [chatUiStore]
     );
 
-    const handleReplace = useCallback(
-        ({ newFile }: { file: FileDescriptor; newFile: File }) => {
-            const fileDescriptor: FileDescriptor = {
-                file: newFile,
-                displayName: newFile.name,
-            };
-            setFileDescriptor(fileDescriptor);
-            chatUiStore.setFile(fileDescriptor);
-        },
-        [chatUiStore]
-    );
+    const handleUpload = () => {
+        fileInputRef.current?.click();
+    };
 
     const handleDelete = useCallback(() => {
         setFileDescriptor(undefined);
@@ -51,20 +51,55 @@ export const ChatInputFile: FC<{ className?: string }> = observer(({ className }
     return (
         <Flex className={className} gap="6" direction="column">
             <Text variant="eyebrow">Upload file</Text>
-            {/* <FilePicker */}
-            {/*     name="attachments" */}
-            {/*     buttonProps={{ */}
-            {/*         color: 'primary', */}
-            {/*         fill: 'outline', */}
-            {/*     }} */}
-            {/*     typesNote="e.g. Screenshot of issue" */}
-            {/*     value={fileDescriptor} */}
-            {/*     onSelected={handleSelected} */}
-            {/*     onDelete={handleDelete} */}
-            {/*     onReplace={handleReplace} */}
-            {/*     data-cy="titan-chat-upload-file" */}
-            {/* /> */}
-            FILE PICKER PLACEHOLDER
+            <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleSelected}
+                style={{ display: 'none' }} // Hide the native input
+                accept="*/*"
+                multiple={false}
+            />
+            <Flex direction="column" gap="2" data-cy="titan-chat-upload-file">
+                {fileDescriptor ? (
+                    <Card padding="small">
+                        <Flex style={{ width: '100%' }} direction="row" alignItems="center" gap="2">
+                            <Icon svg={IconFile} className="m-inline-start-4" />
+                            <Text variant="body" flexGrow={1} data-cy="titan-chat-upload-file-name">
+                                {fileDescriptor.displayName}
+                            </Text>
+                            <Button
+                                icon={IconEdit}
+                                aria-label="Replace file"
+                                appearance="ghost"
+                                onClick={handleUpload}
+                                data-cy="titan-chat-upload-file-edit"
+                            />
+                            <Button
+                                icon={IconDelete}
+                                aria-label="Delete file"
+                                appearance="ghost"
+                                onClick={handleDelete}
+                                data-cy="titan-chat-upload-file-delete"
+                            />
+                        </Flex>
+                    </Card>
+                ) : (
+                    <Fragment>
+                        <Button
+                            type="button"
+                            appearance="secondary"
+                            icon={IconAttachment}
+                            onClick={handleUpload}
+                            data-cy="titan-chat-upload-file-btn"
+                        >
+                            Upload File
+                        </Button>
+                        <Text variant="body" size="small" subdued>
+                            e.g. Screenshot of issue
+                        </Text>
+                    </Fragment>
+                )}
+            </Flex>
         </Flex>
     );
 });

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

@@ -1,5 +1,9 @@
 @import '@servicetitan/tokens/dist/tokens.less';
 
+.formContainer {
+    width: 100%;
+}
+
 .form-textarea {
     margin-bottom: @spacing-0 !important;
 

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

@@ -1,3 +1,4 @@
 export const __esModule: true;
+export const formContainer: string;
 export const formTextarea: string;
 

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

@@ -1,10 +1,10 @@
-import { Button, Textarea } from '@servicetitan/anvil2';
+import { Button, Flex, Textarea } from '@servicetitan/anvil2';
 import IconSend from '@servicetitan/anvil2/assets/icons/material/round/send.svg';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { CHAT_UI_STORE_TOKEN } from '@servicetitan/titan-chat-ui-common';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
-import { FC, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, FormEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { ChatInputStore } from '../../stores/chat-input.store';
 import * as Styles from './chat-input.module.less';
 
@@ -22,26 +22,30 @@ export const ChatInput: FC<{ className?: string }> = provide({
             ChatInputStore
         );
 
-        const handleSendMessage = useCallback(async () => {
-            const validateResult = await supportChatInputStore.formState.validate();
-            if (validateResult.hasError) {
-                return;
-            }
-            const text = supportChatInputStore.formState.$.message.value;
-            if (!text.trim() && !chatUiStore.file) {
-                return;
-            }
-            supportChatInputStore.formState.$.message.onChange('');
-            setIsSending(true);
-            try {
-                await chatUiStore.sendMessageText(text);
-            } finally {
-                setIsSending(false);
-            }
-            setTimeout(() => {
-                textareaRef.current?.focus();
-            }, 0);
-        }, [chatUiStore, supportChatInputStore]);
+        const handleSendMessage = useCallback(
+            async (event?: FormEvent) => {
+                event?.preventDefault();
+                const validateResult = await supportChatInputStore.formState.validate();
+                if (validateResult.hasError) {
+                    return;
+                }
+                const text = supportChatInputStore.formState.$.message.value;
+                if (!text.trim() && !chatUiStore.file) {
+                    return;
+                }
+                supportChatInputStore.formState.$.message.onChange('');
+                setIsSending(true);
+                try {
+                    await chatUiStore.sendMessageText(text);
+                } finally {
+                    setIsSending(false);
+                }
+                setTimeout(() => {
+                    textareaRef.current?.focus();
+                }, 0);
+            },
+            [chatUiStore, supportChatInputStore]
+        );
 
         const clearTimer = useCallback(() => {
             clearTimeout(typingTimeoutRef.current ?? 0);
@@ -98,14 +102,15 @@ export const ChatInput: FC<{ className?: string }> = provide({
 
         return (
             <form className={classNames(className)} onSubmit={handleSendMessage}>
-                <div className={classNames('d-f flex-row gap-2')}>
+                <Flex direction="row" gap={4} className={Styles.formContainer}>
                     <Textarea
                         ref={textareaRef}
                         name="question"
                         placeholder="Type your message"
                         rows={1}
-                        // maxRows={2}
+                        maxRows={2}
                         autoHeight
+                        flexGrow={1}
                         onKeyDown={handleTextKeyPress}
                         value={supportChatInputStore.formState.$.message.value}
                         error={supportChatInputStore.formState.$.message.error}
@@ -123,7 +128,7 @@ export const ChatInput: FC<{ className?: string }> = provide({
                         data-cy="titan-chat-input"
                     />
                     <Button
-                        className="align-self-baseline"
+                        alignSelf="baseline"
                         icon={IconSend}
                         data-pendo="titan-chat-send"
                         data-cy="titan-chat-send"
@@ -137,7 +142,7 @@ export const ChatInput: FC<{ className?: string }> = provide({
                             supportChatInputStore.isEmpty
                         }
                     />
-                </div>
+                </Flex>
             </form>
         );
     })

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

@@ -1,4 +1,4 @@
-import { Button, Text } from '@servicetitan/anvil2';
+import { Button, Flex, Text } from '@servicetitan/anvil2';
 import IconRefresh from '@servicetitan/anvil2/assets/icons/material/round/refresh.svg';
 import { useDependencies } from '@servicetitan/react-ioc';
 import {
@@ -26,21 +26,24 @@ export const ChatMessageTemplateUser: FC<PropsWithChildren<IChatMessageProps>> =
                 isError={isError}
                 messageFooter={
                     isError ? (
-                        <Text
-                            variant="eyebrow"
-                            className="c-red-600"
-                            data-cy="titan-chat-message-error"
-                        >
-                            Message not delivered. Retry
+                        <Flex direction="row" alignItems="center" gap="1">
+                            <Text
+                                variant="eyebrow"
+                                className="c-danger"
+                                data-cy="titan-chat-message-error"
+                            >
+                                Message not delivered. Retry
+                            </Text>
                             <Button
                                 icon={IconRefresh}
                                 appearance="ghost"
                                 size="small"
+                                className="c-danger"
                                 aria-label="Retry send message"
                                 onClick={handleRetry}
                                 data-cy="titan-chat-message-error-retry"
                             />
-                        </Text>
+                        </Flex>
                     ) : !omitTimestamp ? (
                         <MessageFooter timestamp={message.timestamp} />
                     ) : null