@servicetitan/titan-chatbot-ui 3.0.0

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

@@ -0,0 +1,181 @@
+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 { ChatUiSelectors, 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;
+};
+
+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,
+            })
+        );
+        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>
+            );
+        };
+        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', () => {
+        const apiAnswerAlias = 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(apiAnswerAlias).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));
+            return '@askBot';
+        };
+
+        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!!!");
+                });
+        });
+    });
+});

package/src/components/chatbot/chatbot-to-chat-provider-adapter.tsx

@@ -0,0 +1,36 @@
+import { Provider, useDependencies } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+} from '@servicetitan/titan-chat-ui-common';
+import {
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+} from '@servicetitan/titan-chatbot-api';
+import { FC, PropsWithChildren } from 'react';
+
+/**
+ * Passes the Chatbot UI store and backend store to the Chat UI providers.
+ */
+export const ChatbotToChatProviderAdapter: FC<PropsWithChildren> = ({ children }) => {
+    const [chatbotUiStore, chatbotUiBackendStore] = useDependencies(
+        CHATBOT_UI_STORE_TOKEN,
+        CHATBOT_UI_BACKEND_STORE_TOKEN
+    );
+    return (
+        <Provider
+            singletons={[
+                {
+                    provide: CHAT_UI_STORE_TOKEN,
+                    useValue: chatbotUiStore,
+                },
+                {
+                    provide: CHAT_UI_BACKEND_STORE_TOKEN,
+                    useValue: chatbotUiBackendStore,
+                },
+            ]}
+        >
+            {children}
+        </Provider>
+    );
+};

package/src/components/chatbot/chatbot.tsx

@@ -0,0 +1,95 @@
+import { Stack } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { Chat } from '@servicetitan/titan-chat-ui';
+import {
+    ChatMessageModelText,
+    ChatMessageModelTimeout,
+    ChatMessageModelWelcome,
+    ChatParticipantIcon,
+} from '@servicetitan/titan-chat-ui-common';
+import {
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotCustomizations,
+} from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { 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';
+import { ChatbotMessageTimeout } from './messages/chatbot-message-timeout';
+import { ChatbotMessageTyping } from './messages/chatbot-message-typing';
+import { ChatbotMessageWelcome } from './messages/chatbot-message-welcome';
+import { ChatbotMessageTemplateAgent } from './templates/chatbot-message-template-agent';
+
+export interface IChatbotProps {
+    className?: string;
+    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
+    }, []);
+
+    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,
+                },
+                {
+                    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>
+    );
+});

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

@@ -0,0 +1,36 @@
+import { Dialog } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN } from '@servicetitan/titan-chatbot-api';
+import { FC, useCallback, useState } from 'react';
+
+export const ChatbotRestartDialog: FC<{ confirmText: string; onClose: () => void }> = ({
+    confirmText,
+    onClose,
+}) => {
+    const [isRestartDialogOpen, setIsRestartDialogOpen] = useState(true);
+    const [chatbotUiStore] = useDependencies(CHATBOT_UI_STORE_TOKEN);
+
+    const handleCloseDialog = useCallback(() => {
+        setIsRestartDialogOpen(false);
+        onClose();
+    }, [onClose]);
+
+    const handleRestart = useCallback(() => {
+        setIsRestartDialogOpen(false);
+        onClose();
+        chatbotUiStore.restart();
+    }, [onClose, chatbotUiStore]);
+
+    return (
+        <Dialog
+            open={isRestartDialogOpen}
+            portal
+            onPrimaryActionClick={handleRestart}
+            primaryActionName="Restart"
+            onSecondaryActionClick={handleCloseDialog}
+            secondaryActionName="Cancel"
+        >
+            {confirmText}
+        </Dialog>
+    );
+};

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

@@ -0,0 +1,26 @@
+import { Link, LinkProps } from '@servicetitan/design-system';
+import { FC, Fragment, useCallback, useState } from 'react';
+import { ChatbotRestartDialog } from './chatbot-restart-dialog';
+
+export const ChatbotRestartLink: FC<LinkProps> = ({ children, onClick, ...rest }) => {
+    const [isRestartDialogOpen, setIsRestartDialogOpen] = useState(false);
+
+    const handleRestartOpen = useCallback(() => {
+        setIsRestartDialogOpen(true);
+        onClick?.();
+    }, [onClick]);
+
+    return (
+        <Fragment>
+            <Link {...rest} onClick={handleRestartOpen} data-cy="titan-chatbot-restart-session">
+                {children}
+            </Link>
+            {isRestartDialogOpen && (
+                <ChatbotRestartDialog
+                    confirmText="Restart Titan session?"
+                    onClose={() => setIsRestartDialogOpen(false)}
+                />
+            )}
+        </Fragment>
+    );
+};

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

@@ -0,0 +1,89 @@
+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 { 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();
+    });
+});

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

@@ -0,0 +1,131 @@
+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 { 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();
+    });
+});

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

@@ -0,0 +1,35 @@
+import { Form, Stack } from '@servicetitan/design-system';
+import { FormStateErrorBanner } from '@servicetitan/form';
+import { useDependencies } from '@servicetitan/react-ioc';
+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(() => {
+    const [store] = useDependencies(MessageFeedbackGuardrailStore);
+    return (
+        <Stack direction="column" spacing="2">
+            {store.formState.error && <FormStateErrorBanner form={store.formState} />}
+            <Form data-cy="titan-chatbot-message-feedback-form">
+                <Form.Input
+                    label="Link to correct article"
+                    className={classNames(Styles.formItem)}
+                    error={store.formState.$.linkUrl.error}
+                    value={store.formState.$.linkUrl.value}
+                    onChange={store.formState.$.linkUrl.onChangeHandler}
+                    data-cy="titan-chatbot-message-feedback-form-link-url"
+                />
+                <Form.TextArea
+                    label="Notes"
+                    className={classNames(Styles.formItem, Styles.textArea)}
+                    value={store.formState.$.comment.value}
+                    onChange={store.formState.$.comment.onChangeHandler}
+                    onBlur={store.formState.$.comment.enableAutoValidationAndValidate}
+                    data-cy="titan-chatbot-message-feedback-form-other-comment"
+                />
+            </Form>
+        </Stack>
+    );
+});

package/src/components/chatbot/feedback/chatbot-message-feedback-form.module.less

@@ -0,0 +1,15 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.formItem {
+    margin-bottom: @spacing-2;
+    white-space: nowrap;
+}
+
+.formItem.textArea {
+    margin-bottom: @spacing-1;
+}
+
+.formItem.textArea textarea {
+    resize: none;
+    height: 4lh;
+}

package/src/components/chatbot/feedback/chatbot-message-feedback-form.module.less.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const formItem: string;
+export const textArea: string;
+