@servicetitan/titan-chatbot-ui 3.1.0 → 3.1.1

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

@@ -1,206 +1,6 @@
-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 { runChatbotTitanChatbotSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 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);
-            });
-        });
-    });
+    runChatbotTitanChatbotSharedTests(Chatbot);
 });

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

@@ -1,201 +1,6 @@
-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,
-    Models,
-    ModelsMocks,
-} 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 { runChatbotSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 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;
-};
-
 describe('[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(() => {
-        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);
-        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
-    });
-
-    const mockAskBotApi = (answer: string) => {
-        api.postMessage = cy.stub().as('askBot').resolves(
-            ModelsMocks.mockBotMessage({
-                answer,
-            })
-        );
-        api.postFeedback = cy
-            .stub()
-            .as('askBotFeedback')
-            .resolves(
-                ModelsMocks.mockFeedback({
-                    rating: Models.FeedbackRatings.ThumbsUp,
-                })
-            );
-    };
-
-    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>
-            );
-        };
-        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);
-                    });
-            })
-        );
-    };
-
-    const ask = (message: string) => {
-        ChatUiSelectors.chatInput.type(`${message}{enter}`, { delay: 0 });
-    };
-
-    const triggerFile = () => {
-        uiStore.setFilePickerEnabled(true);
-        ChatUiSelectors.chatUploadFile.should('be.visible');
-    };
-
-    it('should render the chatbot component', () => {
-        mockAskBotApi("Hello! I'm chatbot mocked response!!!");
-        render().then(() => {
-            // Pick filter
-            ChatUiSelectors.chatbotFilterButton.first().click();
-            ChatUiSelectors.chatbotFilterOptions.find('label').first().click();
-            ChatUiSelectors.chatbotFilterButton.first().click();
-
-            // Ask chatbot
-            ask('Hello, Chatbot!');
-            ask('Hello, Chatbot! Hello, Chatbot! Hello, Chatbot! Hello, Chatbot! Hello, Chatbot!');
-            triggerFile();
-
-            // Check if the message is sent
-            cy.get('@askBot').should('have.been.calledTwice');
-
-            cy.tick(1000);
-        });
-    });
-
-    describe('with error handling', () => {
-        const mockAskBotApiError = (errorMessage: string) => {
-            api.postMessage = cy.stub().as('askBot').rejects(new Error(errorMessage));
-        };
-
-        it('should react on send message API error', () => {
-            mockAskBotApiError('Chatbot API error');
-            render()
-                .then(() => {
-                    ask('Hello, Chatbot!');
-
-                    ChatUiSelectors.chatMessageFooter
-                        .last()
-                        .should('be.visible')
-                        .should('contain.text', 'Message not delivered. Retry');
-                    const errorBanner = ChatUiSelectors.chatError.should('be.visible');
-                    errorBanner
-                        .find('.Banner__text > .Banner__title')
-                        .should('contain.text', 'Chat Error');
-                    ChatUiSelectors.chatErrorText
-                        .should('be.visible')
-                        .should('contain.text', 'Failed to send message');
-                })
-                .then(() => {
-                    mockAskBotApi("Hello! I'm chatbot mocked response!!!");
-                    ChatUiSelectors.chatMessageErrorRetry.click();
-                    ChatUiSelectors.chatMessageContentAgent
-                        .should('be.visible')
-                        .should('contain.text', "Hello! I'm chatbot mocked response!!!");
-                });
-        });
-    });
-
-    describe('with message feedback', () => {
-        it('should render the chatbot component', () => {
-            mockAskBotApi("Hello! I'm chatbot mocked response!!!");
-            render();
-            ask('Hello!');
-            ChatUiSelectors.chatbotMessageFeedbackThumbsUp.should('be.visible').click();
-            cy.get('@askBotFeedback').should('have.been.calledOnce');
-            ChatUiSelectors.chatbotMessageFeedbackSuccess
-                .should('be.visible')
-                .should('contain.text', 'Thanks for your feedback.');
-        });
-    });
+    runChatbotSharedTests(Chatbot);
 });

package/src/components/chatbot/chatbot.tsx

@@ -13,7 +13,7 @@ import {
     ChatbotCustomizations,
 } from '@servicetitan/titan-chatbot-api';
 import { observer } from 'mobx-react';
-import { FC, useEffect, useMemo } from 'react';
+import { CSSProperties, FC, useEffect, useMemo } from 'react';
 import { ChatbotToChatProviderAdapter } from './chatbot-to-chat-provider-adapter';
 import { ChatFilters } from './filters/chatbot-filters';
 import { ChatbotMessageAnswer } from './messages/chatbot-message-answer';
@@ -24,72 +24,75 @@ import { ChatbotMessageTemplateAgent } from './templates/chatbot-message-templat
 
 export interface IChatbotProps {
     className?: string;
+    style?: CSSProperties;
     customizations?: ChatbotCustomizations;
     onReady?: () => void;
 }
 
-export const Chatbot: FC<IChatbotProps> = observer(({ className, customizations, onReady }) => {
-    const [chatUiStore, chatUiBackendStore] = useDependencies(
-        CHATBOT_UI_STORE_TOKEN,
-        CHATBOT_UI_BACKEND_STORE_TOKEN
-    );
-    useEffect(() => {
-        const init = async () => {
-            chatUiBackendStore.subscribe();
-            await chatUiStore.run({
-                agentName: 'Titan',
-                agentIcon: ChatParticipantIcon.Bot,
-            });
-            onReady?.();
-        };
-        init().then(() => {});
-        return () => chatUiBackendStore.unsubscribe();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+export const Chatbot: FC<IChatbotProps> = observer(
+    ({ className, customizations, onReady, style }) => {
+        const [chatUiStore, chatUiBackendStore] = useDependencies(
+            CHATBOT_UI_STORE_TOKEN,
+            CHATBOT_UI_BACKEND_STORE_TOKEN
+        );
+        useEffect(() => {
+            const init = async () => {
+                chatUiBackendStore.subscribe();
+                await chatUiStore.run({
+                    agentName: 'Titan',
+                    agentIcon: ChatParticipantIcon.Bot,
+                });
+                onReady?.();
+            };
+            init().then(() => {});
+            return () => chatUiBackendStore.unsubscribe();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
 
-    const customizationsMerged = useMemo<ChatbotCustomizations>(() => {
-        const templateCustomizations = customizations?.messageTemplates ?? {};
-        templateCustomizations.agent = templateCustomizations.agent ?? {
-            predicate: message => message.participant.isAgent,
-            component: ChatbotMessageTemplateAgent,
-        };
-        return {
-            error: customizations?.error,
-            filters: customizations?.filters,
-            feedback: customizations?.feedback,
-            footerComponent: customizations?.footerComponent,
-            messageTyping: customizations?.messageTyping ?? {
-                component: ChatbotMessageTyping,
-            },
-            messages: [
-                ...(customizations?.messages ?? []),
-                {
-                    predicate: (message: ChatMessageModelWelcome) => message.type === 'welcome',
-                    component: ChatbotMessageWelcome,
+        const customizationsMerged = useMemo<ChatbotCustomizations>(() => {
+            const templateCustomizations = customizations?.messageTemplates ?? {};
+            templateCustomizations.agent = templateCustomizations.agent ?? {
+                predicate: message => message.participant.isAgent,
+                component: ChatbotMessageTemplateAgent,
+            };
+            return {
+                error: customizations?.error,
+                filters: customizations?.filters,
+                feedback: customizations?.feedback,
+                footerComponent: customizations?.footerComponent,
+                messageTyping: customizations?.messageTyping ?? {
+                    component: ChatbotMessageTyping,
                 },
-                {
-                    predicate: (message: ChatMessageModelText) =>
-                        message.participant.isAgent && message.type === 'message',
-                    component: ChatbotMessageAnswer,
-                },
-                {
-                    predicate: (message: ChatMessageModelTimeout) => message.type === 'timeout',
-                    component: ChatbotMessageTimeout,
-                    isSystem: true,
-                },
-            ],
-            messageTemplates: templateCustomizations,
-        };
-    }, [customizations]);
+                messages: [
+                    ...(customizations?.messages ?? []),
+                    {
+                        predicate: (message: ChatMessageModelWelcome) => message.type === 'welcome',
+                        component: ChatbotMessageWelcome,
+                    },
+                    {
+                        predicate: (message: ChatMessageModelText) =>
+                            message.participant.isAgent && message.type === 'message',
+                        component: ChatbotMessageAnswer,
+                    },
+                    {
+                        predicate: (message: ChatMessageModelTimeout) => message.type === 'timeout',
+                        component: ChatbotMessageTimeout,
+                        isSystem: true,
+                    },
+                ],
+                messageTemplates: templateCustomizations,
+            };
+        }, [customizations]);
 
-    return (
-        <ChatbotToChatProviderAdapter>
-            <Stack direction="column" className={className}>
-                <Chat className="flex-grow-1 h-0" customizations={customizationsMerged} />
-                {Boolean(customizationsMerged.filters?.enabled) && (
-                    <ChatFilters className="p-x-3 p-b-2" />
-                )}
-            </Stack>
-        </ChatbotToChatProviderAdapter>
-    );
-});
+        return (
+            <ChatbotToChatProviderAdapter>
+                <Stack direction="column" className={className} style={style}>
+                    <Chat className="flex-grow-1 h-0" customizations={customizationsMerged} />
+                    {Boolean(customizationsMerged.filters?.enabled) && (
+                        <ChatFilters className="p-x-3 p-b-2" />
+                    )}
+                </Stack>
+            </ChatbotToChatProviderAdapter>
+        );
+    }
+);

package/src/components/chatbot/dialog/__tests-cy__/chatbot-restart-dialog.test.tsx

@@ -0,0 +1,6 @@
+import { runChatbotRestartDialogSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotRestartDialog } from '../chatbot-restart-dialog';
+
+describe('[ChatbotRestartDialog]', () => {
+    runChatbotRestartDialogSharedTests(ChatbotRestartDialog);
+});

package/src/components/chatbot/dialog/__tests-cy__/chatbot-restart-link.test.tsx

@@ -0,0 +1,6 @@
+import { runChatbotRestartLinkSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotRestartLink } from '../chatbot-restart-link';
+
+describe('[ChatbotRestartLink]', () => {
+    runChatbotRestartLinkSharedTests(ChatbotRestartLink);
+});

package/src/components/chatbot/dialog/chatbot-restart-dialog.tsx

@@ -29,6 +29,7 @@ export const ChatbotRestartDialog: FC<{ confirmText: string; onClose: () => void
             primaryActionName="Restart"
             onSecondaryActionClick={handleCloseDialog}
             secondaryActionName="Cancel"
+            data-cy="titan-chatbot-restart-dialog"
         >
             {confirmText}
         </Dialog>

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

@@ -1,89 +1,6 @@
-import { Button } from '@servicetitan/design-system';
-import { Container, Provider, useDependencies } from '@servicetitan/react-ioc';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
-import { FC } from 'react';
-import { MessageFeedbackGuardrailStore } from '../../../../stores/message-feedback-guardrail.store';
+import { runChatbotMessageFeedbackFormGuardrailSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { ChatbotMessageFeedbackFormGuardrail } from '../chatbot-message-feedback-form-guardrail';
 
-const initContainer = () => {
-    const rootContainer = new Container();
-    const container = new Container();
-    container.parent = rootContainer;
-    container.bind(MessageFeedbackGuardrailStore).toSelf().inSingletonScope();
-    return container;
-};
-
 describe('[ChatbotMessageFeedbackFormGuardrail]', () => {
-    let container: Container;
-    let messageFeedbackGuardrailStore: MessageFeedbackGuardrailStore;
-
-    beforeEach(() => {
-        container = initContainer();
-        messageFeedbackGuardrailStore = container.get(MessageFeedbackGuardrailStore);
-        cy.viewport(780, 800);
-    });
-
-    const getFormError = () => cy.get('[data-anvil-component="Banner"]');
-    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(MessageFeedbackGuardrailStore);
-                return (
-                    <Button
-                        className="m-t-3"
-                        data-cy="validator"
-                        onClick={() => formStore.formState.validate()}
-                    >
-                        Validate
-                    </Button>
-                );
-            };
-            return (
-                <Provider
-                    singletons={[
-                        {
-                            provide: MessageFeedbackGuardrailStore,
-                            useValue: messageFeedbackGuardrailStore,
-                        },
-                    ]}
-                >
-                    <ChatbotMessageFeedbackFormGuardrail />
-                    <Validator />
-                </Provider>
-            );
-        };
-        mount(<Wrapper />);
-    };
-
-    it('should render form', () => {
-        render();
-
-        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.should('be.visible');
-        checkInvalid();
-        getFormError().find('.Banner__title').should('contain.text', 'Form Incomplete');
-        getFormError()
-            .find('ul > li')
-            .should('contain.text', 'At least one input must be provided.');
-
-        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.type('https://example.com');
-        checkValid();
-
-        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.clear();
-        checkInvalid();
-
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Test comment');
-        checkValid();
-    });
+    runChatbotMessageFeedbackFormGuardrailSharedTests(ChatbotMessageFeedbackFormGuardrail);
 });