@servicetitan/titan-chatbot-ui 3.0.1 → 3.1.1

package/src/components/chatbot/feedback/__tests-cy__/chatbot-message-feedback-form.test.tsx

@@ -1,131 +1,6 @@
-import { Button } from '@servicetitan/design-system';
-import { Container, Provider, useDependencies } from '@servicetitan/react-ioc';
-import {
-    CHATBOT_UI_STORE_TOKEN,
-    ChatbotUiStore,
-    IChatbotUiStore,
-} from '@servicetitan/titan-chatbot-api';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
-import { FC } from 'react';
-import { MessageFeedbackStore } from '../../../../stores/message-feedback.store';
+import { runChatbotMessageFeedbackFormSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { ChatbotMessageFeedbackForm } from '../chatbot-message-feedback-form';
 
-const initContainer = () => {
-    const rootContainer = new Container();
-    const container = new Container();
-    container.parent = rootContainer;
-    container.bind<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
-    container.bind<MessageFeedbackStore>(MessageFeedbackStore).toSelf().inSingletonScope();
-    return container;
-};
-
 describe('[ChatbotMessageFeedbackForm]', () => {
-    let container: Container;
-    let uiStore: ChatbotUiStore;
-    let messageFeedbackStore: MessageFeedbackStore;
-
-    beforeEach(() => {
-        container = initContainer();
-        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
-        messageFeedbackStore = container.get<MessageFeedbackStore>(MessageFeedbackStore);
-        cy.viewport(780, 800);
-        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
-    });
-
-    const getFormError = () => ChatUiSelectors.chatbotMessageFeedback.find('.FormField__errorText');
-    const checkValid = () => {
-        cy.getCy('validator').click();
-        getFormError().should('not.exist');
-    };
-    const checkInvalid = () => {
-        cy.getCy('validator').click();
-        getFormError().should('be.visible');
-    };
-
-    const render = () => {
-        const Wrapper: FC = () => {
-            const Validator: FC = () => {
-                const [formStore] = useDependencies(MessageFeedbackStore);
-                return (
-                    <Button
-                        className="m-t-3"
-                        data-cy="validator"
-                        onClick={() => formStore.formState.validate()}
-                    >
-                        Validate
-                    </Button>
-                );
-            };
-            return (
-                <Provider
-                    singletons={[
-                        {
-                            provide: CHATBOT_UI_STORE_TOKEN,
-                            useValue: uiStore,
-                        },
-                        {
-                            provide: MessageFeedbackStore,
-                            useValue: messageFeedbackStore,
-                        },
-                    ]}
-                >
-                    <ChatbotMessageFeedbackForm />
-                    <Validator />
-                </Provider>
-            );
-        };
-        mount(<Wrapper />);
-    };
-
-    it('should render default state external', () => {
-        render();
-
-        // Default render
-        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackUnrelated.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackUnclear.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackNotFull.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackIncorrect.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackOther.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.should('not.exist');
-        checkValid();
-
-        // Click 'other' and check comment textarea
-        ChatUiSelectors.chatbotMessageFeedbackOther.click();
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment
-            .should('be.visible')
-            .type('Test comment');
-        getFormError().should('not.exist');
-        checkValid();
-
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.clear().blur();
-        getFormError().should('be.visible').should('contain.text', 'Enter details.');
-        checkInvalid();
-    });
-
-    it('should render default state internal', () => {
-        uiStore.customizations.feedback = {
-            isCommentAlwaysRequired: true,
-        };
-        render();
-
-        // Default render
-        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackUnrelated.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackUnclear.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackNotFull.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackIncorrect.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackOther.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.should('be.visible');
-        checkInvalid();
-
-        // Don't click 'other' and check comment textarea: should be mandatory
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.focus().blur();
-        getFormError().should('be.visible').should('contain.text', 'Enter details.');
-        checkInvalid();
-
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Test comment');
-        checkValid();
-    });
+    runChatbotMessageFeedbackFormSharedTests(ChatbotMessageFeedbackForm);
 });

package/src/components/chatbot/feedback/__tests-cy__/chatbot-message-feedback-popover.test.tsx

@@ -0,0 +1,6 @@
+import { runChatbotMessageFeedbackPopoverSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotMessageFeedbackPopover } from '../chatbot-message-feedback-popover';
+
+describe('[ChatbotMessageFeedbackPopover]', () => {
+    runChatbotMessageFeedbackPopoverSharedTests(ChatbotMessageFeedbackPopover);
+});

package/src/components/chatbot/feedback/__tests-cy__/chatbot-session-feedback-modal.test.tsx

@@ -0,0 +1,6 @@
+import { runChatbotSessionFeedbackModalSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotSessionFeedbackModal } from '../chatbot-session-feedback-modal';
+
+describe('[ChatbotSessionFeedbackModal]', () => {
+    runChatbotSessionFeedbackModalSharedTests(ChatbotSessionFeedbackModal);
+});

package/src/components/chatbot/feedback/chatbot-message-feedback-form-guardrail.tsx

@@ -1,10 +1,10 @@
 import { Form, Stack } from '@servicetitan/design-system';
 import { FormStateErrorBanner } from '@servicetitan/form';
 import { useDependencies } from '@servicetitan/react-ioc';
+import { MessageFeedbackGuardrailStore } from '@servicetitan/titan-chatbot-api';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { FC } from 'react';
-import { MessageFeedbackGuardrailStore } from '../../../stores/message-feedback-guardrail.store';
 import * as Styles from './chatbot-message-feedback-form.module.less';
 
 export const ChatbotMessageFeedbackFormGuardrail: FC = observer(() => {

package/src/components/chatbot/feedback/chatbot-message-feedback-form.tsx

@@ -1,9 +1,9 @@
 import { BodyText, Form } from '@servicetitan/design-system';
 import { useDependencies } from '@servicetitan/react-ioc';
+import { MessageFeedbackStore } from '@servicetitan/titan-chatbot-api';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { FC } from 'react';
-import { MessageFeedbackStore } from '../../../stores/message-feedback.store';
 import * as Styles from './chatbot-message-feedback-form.module.less';
 
 export const ChatbotMessageFeedbackForm: FC = observer(() => {

package/src/components/chatbot/feedback/chatbot-message-feedback-popover.tsx

@@ -11,13 +11,16 @@ import {
     Stack,
 } from '@servicetitan/design-system';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
-import { CHATBOT_UI_STORE_TOKEN, Models } from '@servicetitan/titan-chatbot-api';
+import {
+    CHATBOT_UI_STORE_TOKEN,
+    IMessageFeedbackBaseStore,
+    MessageFeedbackGuardrailStore,
+    MessageFeedbackStore,
+    Models,
+} from '@servicetitan/titan-chatbot-api';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { FC, useCallback, useState } from 'react';
-import { IMessageFeedbackBaseStore } from '../../../stores/message-feedback-base.store';
-import { MessageFeedbackGuardrailStore } from '../../../stores/message-feedback-guardrail.store';
-import { MessageFeedbackStore } from '../../../stores/message-feedback.store';
 import { ChatbotMessageFeedbackForm } from './chatbot-message-feedback-form';
 import { ChatbotMessageFeedbackFormGuardrail } from './chatbot-message-feedback-form-guardrail';
 import * as Styles from './chatbot-message-feedback-popover.module.less';
@@ -161,7 +164,7 @@ export const ChatbotMessageFeedbackPopover: FC<IChatbotMessageFeedbackProps> = p
                             <Headline size="small">
                                 {isGuardrail
                                     ? 'Provide correct answer'
-                                    : 'Why didn’t this answer solve your problem?'}
+                                    : "Why didn't this answer solve your problem?"}
                             </Headline>
                         </Stack>
                     }

package/src/components/chatbot/feedback/chatbot-session-feedback-modal.tsx

@@ -1,9 +1,8 @@
 import { BodyText, Button, ButtonGroup, Form, Modal, Stack } from '@servicetitan/design-system';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
-import { CHATBOT_UI_STORE_TOKEN } from '@servicetitan/titan-chatbot-api';
+import { CHATBOT_UI_STORE_TOKEN, SessionFeedbackStore } from '@servicetitan/titan-chatbot-api';
 import { observer } from 'mobx-react';
 import { FC, useCallback } from 'react';
-import { SessionFeedbackStore } from '../../../stores/session-feedback.store';
 
 export const ChatbotSessionFeedbackModal: FC<{ onClose: () => void }> = provide({
     singletons: [SessionFeedbackStore],

package/src/components/chatbot/filters/__tests-cy__/chatbot-filters.test.tsx

@@ -0,0 +1,6 @@
+import { runChatbotFiltersSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatFilters } from '../chatbot-filters';
+
+describe('[ChatFilters]', () => {
+    runChatbotFiltersSharedTests(ChatFilters);
+});

package/src/components/chatbot/filters/chatbot-filter.tsx

@@ -23,7 +23,7 @@ export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }: IChatFilte
     const [open, setOpen] = useState(false);
     const [listMaxHeight, setListMaxHeight] = useState(400);
     const [{ filterStore }] = useDependencies(CHATBOT_UI_STORE_TOKEN);
-    const filterLabel = filterStore.getFilterLabel(filter.displayName ?? filter.key);
+    const filterLabel = filterStore.getFilterLabel(filter.displayName ?? filter.key).trim();
     const triggerRef = useRef<HTMLDivElement>(null);
 
     const allOptions = useMemo(() => {

package/src/components/chatbot/messages/__tests-cy__/chatbot-links.test.tsx

@@ -0,0 +1,6 @@
+import { runChatbotLinksSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotLinks } from '../chatbot-links';
+
+describe('[ChatbotLinks]', () => {
+    runChatbotLinksSharedTests(ChatbotLinks);
+});

package/src/components/chatbot/messages/__tests-cy__/chatbot-message-answer-readonly.test.tsx

@@ -0,0 +1,6 @@
+import { runChatbotMessageAnswerReadonlySharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotMessageAnswerReadonly } from '../chatbot-message-answer-readonly';
+
+describe('[ChatbotMessageAnswerReadonly]', () => {
+    runChatbotMessageAnswerReadonlySharedTests(ChatbotMessageAnswerReadonly);
+});

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

@@ -1,110 +1,6 @@
-import { Container, Provider } from '@servicetitan/react-ioc';
-import { ChatMessageModelText, mockChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
-import {
-    CHATBOT_UI_STORE_TOKEN,
-    ChatbotUiStore,
-    Models,
-    ModelsMocks,
-} from '@servicetitan/titan-chatbot-api';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
-import { FC } from 'react';
+import { runChatbotMessageAnswerSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { ChatbotMessageAnswer } from '../chatbot-message-answer';
 
-const initContainer = () => {
-    const container = new Container();
-    container.bind(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
-    return container;
-};
-
-describe('<ChatbotMessageAnswer />', () => {
-    let container: Container;
-    let uiStore: ChatbotUiStore;
-
-    beforeEach(() => {
-        container = initContainer();
-        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
-        cy.viewport(780, 800);
-    });
-
-    const renderComponent = (message: ChatMessageModelText) => {
-        const Wrapper: FC = () => (
-            <Provider
-                singletons={[
-                    {
-                        provide: CHATBOT_UI_STORE_TOKEN,
-                        useValue: uiStore,
-                    },
-                ]}
-            >
-                <ChatbotMessageAnswer message={message} />
-            </Provider>
-        );
-        mount(<Wrapper />);
-    };
-
-    it('should render MultilineText and ChatbotLinks when chatbotMessageData exists', () => {
-        cy.clock();
-        cy.spy(uiStore, 'triggerScroll').as('triggerScroll');
-        const botMessage: Models.IBotMessage = ModelsMocks.mockBotMessage({
-            scoredUrls: ModelsMocks.mockScoredUrls(),
-        });
-        const message = mockChatMessageModelText(true, {
-            message: 'Test message',
-            data: botMessage,
-        });
-        uiStore.setMessages([message]);
-
-        renderComponent(message);
-
-        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Test message');
-        ChatUiSelectors.chatbotLinksLink.should('not.be.visible');
-
-        // Expand links
-        ChatUiSelectors.chatbotLinksMore
-            .should('be.visible')
-            .should('have.text', 'Learn more')
-            .click();
-
-        cy.tick(100);
-        cy.get('@triggerScroll').should('be.called');
-        ChatUiSelectors.chatbotLinksLink.should('be.visible').should('have.length', 2);
-
-        // Collapse links
-        ChatUiSelectors.chatbotLinksMore
-            .should('be.visible')
-            .should('have.text', 'Learn less')
-            .click();
-
-        cy.tick(100);
-        cy.get('@triggerScroll').should('be.called');
-        ChatUiSelectors.chatbotLinksLink.should('not.be.visible');
-    });
-
-    it('should not render ChatbotLinks when no links exist', () => {
-        const botMessage: Models.IBotMessage = ModelsMocks.mockBotMessage({
-            scoredUrls: [],
-        });
-        const message = mockChatMessageModelText(true, {
-            message: 'Test message',
-            data: botMessage,
-        });
-        renderComponent(message);
-
-        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Test message');
-        ChatUiSelectors.chatbotLinksMore.should('not.exist');
-        ChatUiSelectors.chatbotLinksLink.should('not.exist');
-    });
-
-    it('should not render ChatbotLinks when chatbotMessageData is undefined', () => {
-        const message = mockChatMessageModelText(true, {
-            message: 'Test message',
-            data: undefined,
-        });
-        renderComponent(message);
-
-        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Test message');
-        ChatUiSelectors.chatbotLinksMore.should('not.exist');
-        ChatUiSelectors.chatbotLinksLink.should('not.exist');
-    });
+describe('[ChatbotMessageAnswer]', () => {
+    runChatbotMessageAnswerSharedTests(ChatbotMessageAnswer);
 });

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

@@ -1,71 +1,6 @@
-import { IMessageAvatarProps } from '@servicetitan/titan-chat-ui';
-import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runChatbotMessageTypingSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { ChatbotMessageTyping } from '../chatbot-message-typing';
 
-describe('ChatbotMessageTyping', () => {
-    function render(icon: ChatParticipantIcon) {
-        const avatar: IMessageAvatarProps = {
-            name: 'Test User Name',
-            icon,
-        };
-        mount(<ChatbotMessageTyping avatar={avatar} />);
-        ChatUiSelectors.chatMessageTyping.should('be.visible');
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-    }
-
-    it('should render message with bot icon', () => {
-        render(ChatParticipantIcon.Bot);
-        ChatUiSelectors.chatAvatarBot
-            .should('be.visible')
-            .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.chatAvatarBot.should('not.exist');
-        ChatUiSelectors.chatAvatarInitials.should('not.exist');
-    });
-
-    it('should render message with initials', () => {
-        render(ChatParticipantIcon.Initials);
-        ChatUiSelectors.chatAvatarInitials.should('be.visible').should('contain.text', 'TU');
-    });
-
-    it('should show different messages during the time', () => {
-        cy.clock();
-        render(ChatParticipantIcon.Bot);
-        // Verify the rendered component + check the dots animation doesn't change over the time
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(11000);
-        ChatUiSelectors.chatMessageContentAgent
-            .should('be.visible')
-            .should('contain.text', 'Looking for the final details');
-
-        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
-        cy.tick(10000);
-        ChatUiSelectors.chatMessageContentAgent
-            .should('be.visible')
-            .should(
-                'contain.text',
-                'This is taking longer than usual, please give me a little bit more time'
-            );
-
-        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
-        cy.tick(60000);
-        ChatUiSelectors.chatMessageContentAgent
-            .should('be.visible')
-            .should(
-                'contain.text',
-                'This is taking longer than usual, please give me a little bit more time'
-            );
-        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
-    });
+describe('[ChatbotMessageTyping]', () => {
+    runChatbotMessageTypingSharedTests(ChatbotMessageTyping);
 });