@servicetitan/titan-chatbot-ui 3.0.0

package/src/components/chatbot/__tests-cy__/chatbot-help-center.test.tsx

@@ -0,0 +1,210 @@
+import { ILog, Log } from '@servicetitan/log-service';
+import { Container, Provider } from '@servicetitan/react-ioc';
+import {
+    ApiClientHelpCenter,
+    CHATBOT_API_CLIENT,
+    CHATBOT_CLIENT_SETTINGS,
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotCustomizations,
+    ChatbotUiBackendStore,
+    ChatbotUiStore,
+    IChatbotApiClient,
+    IChatbotUiBackendStore,
+    IChatbotUiStore,
+    Models,
+} from '@servicetitan/titan-chatbot-api';
+import { ChatUiSelectors, CypressMocks } from '@servicetitan/titan-chatbot-ui-cypress';
+import axios from 'axios';
+import { mount } from 'cypress/react';
+import { FC, useMemo } from 'react';
+import { Chatbot } from '../chatbot';
+
+const ChatbotBaseUrl = 'https://chatbot-api.example.com/base/url';
+
+const initContainer = () => {
+    const rootContainer = new Container();
+    const container = new Container();
+    container.parent = rootContainer;
+    container.bind<ILog>(Log).to(CypressMocks.LogMock).inSingletonScope();
+    container.bind<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
+    container
+        .bind<IChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN)
+        .to(ChatbotUiBackendStore)
+        .inSingletonScope();
+
+    // Set up Helpcenter API client
+    const clientSettings: ApiClientHelpCenter.IChatbotClientSettingsHelpCenter = {
+        area: 'FloatingChat',
+        instance: 'STapp',
+        constructorParametersFactory: () => ({
+            baseUrl: ChatbotBaseUrl,
+            axiosInstance: axios.create(),
+        }),
+    };
+    container
+        .bind<ApiClientHelpCenter.IChatbotClientSettingsHelpCenter>(CHATBOT_CLIENT_SETTINGS)
+        .toConstantValue(clientSettings);
+    container
+        .bind<IChatbotApiClient>(CHATBOT_API_CLIENT)
+        .to(ApiClientHelpCenter.ChatbotApiClient)
+        .inSingletonScope();
+    return container;
+};
+
+describe('[Chatbot with Help Center API]', () => {
+    let container: Container;
+    let log: CypressMocks.LogMock;
+    let apiClientSettings: ApiClientHelpCenter.IChatbotClientSettingsHelpCenter;
+    let apiClient: ApiClientHelpCenter.ChatbotApiClient;
+    let uiStore: ChatbotUiStore;
+    let uiBackendStore: ChatbotUiBackendStore;
+
+    beforeEach(() => {
+        container = initContainer();
+        log = container.get<CypressMocks.LogMock>(Log);
+        apiClientSettings =
+            container.get<ApiClientHelpCenter.IChatbotClientSettingsHelpCenter>(
+                CHATBOT_CLIENT_SETTINGS
+            );
+        apiClient = container.get<ApiClientHelpCenter.ChatbotApiClient>(CHATBOT_API_CLIENT);
+        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        uiBackendStore = container.get<ChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(550, 800);
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+    });
+
+    const render = () => {
+        const ChatbotWrapper: FC = () => {
+            const customizationContext = useMemo<ChatbotCustomizations>(
+                () => ({
+                    filters: { enabled: true },
+                    feedback: { title: 'TITLE' },
+                }),
+                []
+            );
+            return (
+                <Provider
+                    singletons={[
+                        {
+                            provide: Log,
+                            useValue: log,
+                        },
+                        {
+                            provide: CHATBOT_CLIENT_SETTINGS,
+                            useValue: apiClientSettings,
+                        },
+                        { provide: CHATBOT_API_CLIENT, useValue: apiClient },
+                        {
+                            provide: CHATBOT_UI_STORE_TOKEN,
+                            useValue: uiStore,
+                        },
+                        {
+                            provide: CHATBOT_UI_BACKEND_STORE_TOKEN,
+                            useValue: uiBackendStore,
+                        },
+                    ]}
+                >
+                    <Chatbot
+                        className="h-100vh max-h-100vh of-x-hidden"
+                        customizations={customizationContext}
+                    />
+                </Provider>
+            );
+        };
+        cy.spy(uiStore, 'run').as('runSpy');
+        mount(<ChatbotWrapper />);
+        return cy.wrap(
+            new Promise(resolve => {
+                cy.get('@runSpy')
+                    .should('have.been.calledOnce')
+                    .then((invocation: any) => {
+                        const initPromise = invocation.firstCall.returnValue as ReturnType<
+                            IChatbotUiStore['run']
+                        >;
+                        initPromise.then(resolve);
+                    });
+            })
+        );
+    };
+
+    it('should render the chatbot with help center API', () => {
+        const sessionMock = CypressMocks.HC.CreateSession;
+        const messageMock = CypressMocks.HC.SendUserMessage;
+        const messageFeedbackMock = CypressMocks.HC.MessageFeedback;
+        const sessionFeedbackMock = CypressMocks.HC.SessionFeedback;
+
+        const aliasFilterOptions = CypressMocks.HC.interceptFilterOptions(ChatbotBaseUrl);
+        const aliasCreateSession = sessionMock.intercept(ChatbotBaseUrl);
+        const aliasSendUserMessage = messageMock.intercept(ChatbotBaseUrl);
+        const aliasMessageFeedback = messageFeedbackMock.intercept(ChatbotBaseUrl);
+        const aliasSessionFeedback = sessionFeedbackMock.intercept(ChatbotBaseUrl);
+
+        render().then(() => {
+            // Expect filters were loaded using the Help Center API
+            cy.wait(aliasFilterOptions).then(interception => {
+                // Check options were loaded correctly
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/Chat/filter-options`
+                );
+                expect(interception.response?.body).to.an('object');
+                expect(interception.response?.body?.sources).to.an('array');
+                expect(interception.response?.body?.contentTypes).to.an('array');
+                expect(interception.response?.body?.productAreas).to.an('array');
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            // Ask the bot a question
+            cy.log('Sending message...');
+            ChatUiSelectors.chatInput.type(`${messageMock.request.text}{enter}`, { delay: 0 });
+
+            // Check that the session was created
+            cy.wait(aliasCreateSession).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/Chat/create-session`
+                );
+                expect(interception.request.body).to.deep.equal(sessionMock.request);
+                expect(interception.response?.body).to.deep.equal(sessionMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            // Check the user message is sent
+            cy.wait(aliasSendUserMessage).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/Chat/user-message`
+                );
+                expect(interception.request.body).to.deep.equal(messageMock.request);
+                expect(interception.response?.body).to.deep.equal(messageMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            // Send session feedback (manually)
+            cy.log('Sending session feedback...');
+            uiStore.sendSessionFeedback(
+                new Models.Feedback({
+                    sessionId: sessionMock.response.id,
+                    description: 'Good answer!',
+                    rating: Models.FeedbackRatings.ThumbsUp,
+                })
+            );
+            cy.wait(aliasSessionFeedback).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/Chat/session-feedback?sessionId=${sessionMock.response.id}`
+                );
+                expect(interception.request.body).to.deep.equal(sessionFeedbackMock.request);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            // Check the feedback is sent with thumbs up
+            cy.log('Sending message feedback...');
+            ChatUiSelectors.chatbotMessageFeedbackThumbsUp.scrollIntoView().click({ force: true });
+            cy.wait(aliasMessageFeedback).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/Chat/bot-message-feedback?sessionId=${messageMock.response.sessionId}&botMessageId=${messageMock.response.id}`
+                );
+                expect(interception.request.body).to.deep.equal(messageFeedbackMock.request);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,120 @@
+import { ILog, Log } from '@servicetitan/log-service';
+import { Container, Provider } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotCustomizations,
+    ChatbotUiBackendStore,
+    ChatbotUiStore,
+    IChatbotApiClient,
+    IChatbotUiBackendStore,
+    IChatbotUiStore,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { CypressMocks } from '@servicetitan/titan-chatbot-ui-cypress';
+import { mount } from 'cypress/react';
+import { FC, useMemo } from 'react';
+import { Chatbot } from '../chatbot';
+
+const initContainer = () => {
+    const rootContainer = new Container();
+    const container = new Container();
+    container.parent = rootContainer;
+    container.bind<ILog>(Log).to(CypressMocks.LogMock).inSingletonScope();
+    container
+        .bind<IChatbotApiClient>(CHATBOT_API_CLIENT)
+        .to(CypressMocks.ChatbotApiClientMock)
+        .inSingletonScope();
+    container.bind<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
+    container
+        .bind<IChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN)
+        .to(ChatbotUiBackendStore)
+        .inSingletonScope();
+    return container;
+};
+
+/**
+ * The test is for internal purposes only.
+ */
+describe.skip('[Chatbot]', () => {
+    let container: Container;
+    let log: CypressMocks.LogMock;
+    let api: CypressMocks.ChatbotApiClientMock;
+    let uiStore: ChatbotUiStore;
+    let uiBackendStore: ChatbotUiBackendStore;
+
+    const mockApi = () => {
+        api.postSession = cy.stub().resolves(ModelsMocks.mockSession());
+        api.getOptions = cy.stub().resolves(ModelsMocks.mockFrontendModel());
+    };
+
+    beforeEach(() => {
+        cy.intercept('GET', 'https://fonts.gstatic.com/**', {
+            statusCode: 200,
+            body: new ArrayBuffer(0),
+            headers: {
+                'Content-Type': 'font/woff2',
+                'Cache-Control': 'no-cache, no-store, must-revalidate',
+            },
+        });
+        container = initContainer();
+        log = container.get<CypressMocks.LogMock>(Log);
+        api = container.get<CypressMocks.ChatbotApiClientMock>(CHATBOT_API_CLIENT);
+        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        uiBackendStore = container.get<ChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN);
+        mockApi();
+        cy.viewport(550, 800);
+    });
+
+    const mockAskBotApi = (answer: string) => {
+        api.postMessage = cy.stub().as('askBot').resolves(
+            ModelsMocks.mockBotMessage({
+                answer,
+            })
+        );
+        return '@askBot';
+    };
+
+    const render = () => {
+        const ChatbotWrapper: FC = () => {
+            const customizationContext = useMemo<ChatbotCustomizations>(
+                () => ({
+                    filters: { enabled: true },
+                    feedback: { title: 'TITLE' },
+                }),
+                []
+            );
+            return (
+                <Provider
+                    singletons={[
+                        {
+                            provide: Log,
+                            useValue: log,
+                        },
+                        { provide: CHATBOT_API_CLIENT, useValue: api },
+                        {
+                            provide: CHATBOT_UI_STORE_TOKEN,
+                            useValue: uiStore,
+                        },
+                        {
+                            provide: CHATBOT_UI_BACKEND_STORE_TOKEN,
+                            useValue: uiBackendStore,
+                        },
+                    ]}
+                >
+                    <Chatbot
+                        className="h-100vh max-h-100vh of-x-hidden"
+                        customizations={customizationContext}
+                    />
+                </Provider>
+            );
+        };
+        mount(<ChatbotWrapper />);
+    };
+
+    it('should render the chatbot component', () => {
+        mockAskBotApi("Hello! I'm chatbot mocked response!!!");
+        render();
+    });
+});

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

@@ -0,0 +1,206 @@
+import { ILog, Log } from '@servicetitan/log-service';
+import { Container, Provider } from '@servicetitan/react-ioc';
+import {
+    ApiClientTitanChat,
+    CHATBOT_API_CLIENT,
+    CHATBOT_CLIENT_SETTINGS,
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotCustomizations,
+    ChatbotUiBackendStore,
+    ChatbotUiStore,
+    IChatbotApiClient,
+    IChatbotUiBackendStore,
+    IChatbotUiStore,
+    Models,
+} from '@servicetitan/titan-chatbot-api';
+import { ChatUiSelectors, CypressMocks } from '@servicetitan/titan-chatbot-ui-cypress';
+import { mount } from 'cypress/react';
+import { FC, useMemo } from 'react';
+import { Chatbot } from '../chatbot';
+
+const ChatbotBaseUrl = 'https://chatbot-api.example.com/base/url';
+const ChatbotVersion = 2;
+
+const initContainer = () => {
+    const rootContainer = new Container();
+    const container = new Container();
+    container.parent = rootContainer;
+    container.bind<ILog>(Log).to(CypressMocks.LogMock).inSingletonScope();
+    container.bind<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
+    container
+        .bind<IChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN)
+        .to(ChatbotUiBackendStore)
+        .inSingletonScope();
+
+    // Set up Helpcenter API client
+    const clientSettings: ApiClientTitanChat.IChatbotClientSettingsTitanChat = {
+        clientId: 'TitanChatClientId',
+        version: String(ChatbotVersion),
+        constructorParametersFactory: () => ({
+            baseUrl: ChatbotBaseUrl,
+        }),
+    };
+    container
+        .bind<ApiClientTitanChat.IChatbotClientSettingsTitanChat>(CHATBOT_CLIENT_SETTINGS)
+        .toConstantValue(clientSettings);
+    container
+        .bind<IChatbotApiClient>(CHATBOT_API_CLIENT)
+        .to(ApiClientTitanChat.ChatbotApiClient)
+        .inSingletonScope();
+    return container;
+};
+
+describe('[Chatbot with Titan Chat API]', () => {
+    let container: Container;
+    let log: CypressMocks.LogMock;
+    let apiClientSettings: ApiClientTitanChat.IChatbotClientSettingsTitanChat;
+    let apiClient: ApiClientTitanChat.ChatbotApiClient;
+    let uiStore: ChatbotUiStore;
+    let uiBackendStore: ChatbotUiBackendStore;
+
+    beforeEach(() => {
+        container = initContainer();
+        log = container.get<CypressMocks.LogMock>(Log);
+        apiClientSettings =
+            container.get<ApiClientTitanChat.IChatbotClientSettingsTitanChat>(
+                CHATBOT_CLIENT_SETTINGS
+            );
+        apiClient = container.get<ApiClientTitanChat.ChatbotApiClient>(CHATBOT_API_CLIENT);
+        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        uiBackendStore = container.get<ChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(550, 800);
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+    });
+
+    const render = () => {
+        const ChatbotWrapper: FC = () => {
+            const customizationContext = useMemo<ChatbotCustomizations>(
+                () => ({
+                    filters: { enabled: true },
+                    feedback: { title: 'TITLE' },
+                }),
+                []
+            );
+            return (
+                <Provider
+                    singletons={[
+                        {
+                            provide: Log,
+                            useValue: log,
+                        },
+                        {
+                            provide: CHATBOT_CLIENT_SETTINGS,
+                            useValue: apiClientSettings,
+                        },
+                        { provide: CHATBOT_API_CLIENT, useValue: apiClient },
+                        {
+                            provide: CHATBOT_UI_STORE_TOKEN,
+                            useValue: uiStore,
+                        },
+                        {
+                            provide: CHATBOT_UI_BACKEND_STORE_TOKEN,
+                            useValue: uiBackendStore,
+                        },
+                    ]}
+                >
+                    <Chatbot
+                        className="h-100vh max-h-100vh of-x-hidden"
+                        customizations={customizationContext}
+                    />
+                </Provider>
+            );
+        };
+        cy.spy(uiStore, 'run').as('runSpy');
+        mount(<ChatbotWrapper />);
+        return cy.wrap(
+            new Promise(resolve => {
+                cy.get('@runSpy')
+                    .should('have.been.calledOnce')
+                    .then((invocation: any) => {
+                        const initPromise = invocation.firstCall.returnValue as ReturnType<
+                            IChatbotUiStore['run']
+                        >;
+                        initPromise.then(resolve);
+                    });
+            })
+        );
+    };
+
+    it('should render the chatbot with titan chat API', () => {
+        const optionsMock = CypressMocks.TC.Options;
+        const sessionMock = CypressMocks.TC.SessionPost;
+        const messageMock = CypressMocks.TC.MessagePost;
+        const messageFeedbackMock = CypressMocks.TC.MessageFeedbackPost;
+        const sessionFeedbackMock = CypressMocks.TC.SessionFeedbackPost;
+
+        const aliasOptions = optionsMock.intercept(ChatbotBaseUrl, ChatbotVersion);
+        const aliasSession = sessionMock.intercept(ChatbotBaseUrl, ChatbotVersion);
+        const aliasMessage = messageMock.intercept(ChatbotBaseUrl, ChatbotVersion);
+        const { aliasPostMessage, aliasPostSession } = CypressMocks.TC.interceptFeedback(
+            ChatbotBaseUrl,
+            ChatbotVersion
+        );
+
+        render().then(() => {
+            cy.log('Getting options...');
+            cy.wait(aliasOptions).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/options`
+                );
+                expect(interception.response?.statusCode).to.equal(200);
+                expect(interception.response?.body).to.deep.equal(optionsMock.response);
+            });
+
+            // Ask the bot a question
+            cy.log('Sending message...');
+            ChatUiSelectors.chatInput.type(`${messageMock.request.question}{enter}`, { delay: 0 });
+
+            // Check that the session was created
+            cy.wait(aliasSession).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/session`
+                );
+                expect(interception.request.body).to.deep.equal(sessionMock.request);
+                expect(interception.response?.body).to.deep.equal(sessionMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            // Check the user message is sent
+            cy.wait(aliasMessage).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/message`
+                );
+                expect(interception.request.body).to.deep.equal(messageMock.request);
+                expect(interception.response?.body).to.deep.equal(messageMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            cy.tick(100);
+            // Send session feedback (manually)
+            cy.log('Sending session feedback...');
+            uiStore.sendSessionFeedback(new Models.Feedback(sessionFeedbackMock.request));
+            cy.wait(aliasPostSession).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/feedback`
+                );
+                expect(interception.request.body).to.deep.equal(sessionFeedbackMock.request);
+                expect(interception.response?.body).to.deep.equal(sessionFeedbackMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            cy.tick(100);
+            // Check the feedback is sent with thumbs up
+            cy.log('Sending message feedback...');
+            ChatUiSelectors.chatbotMessageFeedbackThumbsUp.scrollIntoView().click({ force: true });
+            cy.wait(aliasPostMessage).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/feedback`
+                );
+                expect(interception.request.body).to.deep.equal(messageFeedbackMock.request);
+                expect(interception.response?.body).to.deep.equal(messageFeedbackMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+        });
+    });
+});