@servicetitan/titan-chatbot-ui-anvil2 3.1.1

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.module.less

@@ -0,0 +1,4 @@
+.chat {
+    flex-grow: 1;
+    height: 0;
+}

package/src/components/chatbot/chatbot.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const chat: string;
+

package/src/components/chatbot/chatbot.tsx

@@ -0,0 +1,99 @@
+import { Flex } from '@servicetitan/anvil2';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { Chat } from '@servicetitan/titan-chat-ui-anvil2';
+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 { CSSProperties, FC, useEffect, useMemo } from 'react';
+import { ChatbotToChatProviderAdapter } from './chatbot-to-chat-provider-adapter';
+import * as Styles from './chatbot.module.less';
+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;
+    style?: CSSProperties;
+    customizations?: ChatbotCustomizations;
+    onReady?: () => void;
+}
+
+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,
+                    },
+                    {
+                        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>
+                <Flex direction="column" className={className} style={style}>
+                    <Chat className={Styles.chat} customizations={customizationsMerged} />
+                    {Boolean(customizationsMerged.filters?.enabled) && (
+                        <ChatFilters className="p-inline-6 p-block-end-4" />
+                    )}
+                </Flex>
+            </ChatbotToChatProviderAdapter>
+        );
+    }
+);

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { Button, Dialog, Flex } from '@servicetitan/anvil2';
+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} data-cy="titan-chatbot-restart-dialog">
+            <Dialog.Content>
+                <Flex className="m-block-start-4">{confirmText}</Flex>
+            </Dialog.Content>
+            <Dialog.Footer>
+                <Flex justifyContent="flex-end">
+                    <Flex gap="3">
+                        <Button onClick={handleCloseDialog}>Cancel</Button>
+                        <Button appearance="primary" onClick={handleRestart}>
+                            Restart
+                        </Button>
+                    </Flex>
+                </Flex>
+            </Dialog.Footer>
+        </Dialog>
+    );
+};

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

@@ -0,0 +1,29 @@
+import { Link, LinkProps } from '@servicetitan/anvil2';
+import { FC, Fragment, MouseEvent, 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(
+        (event: MouseEvent<HTMLAnchorElement>) => {
+            setIsRestartDialogOpen(true);
+            onClick?.(event);
+        },
+        [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,10 @@
+import { AnvilProvider } from '@servicetitan/anvil2';
+import { runChatbotMessageFeedbackFormGuardrailSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotMessageFeedbackFormGuardrail } from '../chatbot-message-feedback-form-guardrail';
+
+describe('[ChatbotMessageFeedbackFormGuardrail]', () => {
+    runChatbotMessageFeedbackFormGuardrailSharedTests(
+        ChatbotMessageFeedbackFormGuardrail,
+        component => <AnvilProvider>{component}</AnvilProvider>
+    );
+});

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

@@ -0,0 +1,9 @@
+import { AnvilProvider } from '@servicetitan/anvil2';
+import { runChatbotMessageFeedbackFormSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatbotMessageFeedbackForm } from '../chatbot-message-feedback-form';
+
+describe('[ChatbotMessageFeedbackForm]', () => {
+    runChatbotMessageFeedbackFormSharedTests(ChatbotMessageFeedbackForm, component => (
+        <AnvilProvider>{component}</AnvilProvider>
+    ));
+});

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { Flex, TextField, Textarea } from '@servicetitan/anvil2';
+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 { ChangeEvent, FC } from 'react';
+import * as Styles from './chatbot-message-feedback-form.module.less';
+
+export const ChatbotMessageFeedbackFormGuardrail: FC = observer(() => {
+    const [store] = useDependencies(MessageFeedbackGuardrailStore);
+
+    const onLinkUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
+        store.formState.$.linkUrl.onChange(event.target.value);
+    };
+
+    return (
+        <Flex direction="column" gap="4">
+            {store.formState.error && <FormStateErrorBanner form={store.formState} />}
+            <form data-cy="titan-chatbot-message-feedback-form">
+                <TextField
+                    label="Link to correct article"
+                    className={classNames(Styles.formItem)}
+                    error={store.formState.$.linkUrl.error}
+                    value={store.formState.$.linkUrl.value}
+                    onChange={onLinkUrlChange}
+                    data-cy="titan-chatbot-message-feedback-form-link-url"
+                />
+                <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>
+        </Flex>
+    );
+});

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;
+

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

@@ -0,0 +1,76 @@
+import { Checkbox, Flex, Text, Textarea } from '@servicetitan/anvil2';
+import { CheckboxFieldState } from '@servicetitan/form';
+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 * as Styles from './chatbot-message-feedback-form.module.less';
+
+export const ChatbotMessageFeedbackForm: FC = observer(() => {
+    const [store] = useDependencies(MessageFeedbackStore);
+
+    const onCheckboxChange = (checkbox: keyof MessageFeedbackStore['formState']['$']) => {
+        return (_: any, state: any) => {
+            const fieldState = store.formState.$[checkbox] as CheckboxFieldState;
+            fieldState.onChange(!state.checked);
+        };
+    };
+
+    return (
+        <form data-cy="titan-chatbot-message-feedback-form">
+            <Flex direction="column">
+                <Checkbox
+                    label="Answer is unrelated to my question"
+                    className={Styles.formItem}
+                    checked={store.formState.$.unrelated.value}
+                    onChange={onCheckboxChange('unrelated')}
+                    data-cy="titan-chatbot-message-feedback-form-unrelated"
+                />
+                <Checkbox
+                    label="Answer is unclear, not sure what it means"
+                    className={Styles.formItem}
+                    checked={store.formState.$.unclear.value}
+                    onChange={onCheckboxChange('unclear')}
+                    data-cy="titan-chatbot-message-feedback-form-unclear"
+                />
+                <Checkbox
+                    label="Answer doesn’t fully address the question"
+                    className={Styles.formItem}
+                    checked={store.formState.$.notFull.value}
+                    onChange={onCheckboxChange('notFull')}
+                    data-cy="titan-chatbot-message-feedback-form-not-full"
+                />
+                <Checkbox
+                    label="Answer is incorrect or doesn’t work"
+                    className={Styles.formItem}
+                    checked={store.formState.$.incorrect.value}
+                    onChange={onCheckboxChange('incorrect')}
+                    data-cy="titan-chatbot-message-feedback-form-incorrect"
+                />
+                <Checkbox
+                    label="Other"
+                    className={Styles.formItem}
+                    checked={store.formState.$.other.value}
+                    onChange={onCheckboxChange('other')}
+                    data-cy="titan-chatbot-message-feedback-form-other"
+                />
+                {store.isTextAreaVisible && (
+                    <div className="m-inline-start-8">
+                        <Textarea
+                            className={classNames(Styles.formItem, Styles.textArea)}
+                            error={store.formState.$.otherComment.error}
+                            value={store.formState.$.otherComment.value}
+                            onChange={store.formState.$.otherComment.onChangeHandler}
+                            onBlur={store.formState.$.otherComment.enableAutoValidationAndValidate}
+                            data-cy="titan-chatbot-message-feedback-form-other-comment"
+                        />
+                        <Text size="small" subdued className="m-block-end-2">
+                            Tell us more about what can be improved.
+                        </Text>
+                    </div>
+                )}
+            </Flex>
+        </form>
+    );
+});

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

@@ -0,0 +1,14 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.feedback {
+    min-width: 200px;
+    max-width: 200px;
+}
+
+.feedbackResultText {
+    white-space: nowrap;
+}
+
+.provideAnswer {
+    text-transform: uppercase;
+}

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

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const feedback: string;
+export const feedbackResultText: string;
+export const provideAnswer: string;
+

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

@@ -0,0 +1,207 @@
+import { Button, Flex, Icon, Link, Popover, Spinner, Text } from '@servicetitan/anvil2';
+import IconCheck from '@servicetitan/anvil2/assets/icons/material/round/check.svg';
+import IconError from '@servicetitan/anvil2/assets/icons/material/round/error.svg';
+import IconThumbDown from '@servicetitan/anvil2/assets/icons/material/round/thumb_down.svg';
+import IconThumbUp from '@servicetitan/anvil2/assets/icons/material/round/thumb_up.svg';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+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, Fragment, HTMLAttributes, useCallback, useState } from 'react';
+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';
+
+interface IChatbotMessageFeedbackProps {
+    botMessage: Models.IBotMessage;
+    className?: string;
+}
+
+export const ChatbotMessageFeedbackPopover: FC<IChatbotMessageFeedbackProps> = provide({
+    singletons: [MessageFeedbackStore, MessageFeedbackGuardrailStore],
+})(
+    observer(({ botMessage, className }) => {
+        const [chatbotUiStore, messageFeedbackStore, messageFeedbackGuardrailStore] =
+            useDependencies(
+                CHATBOT_UI_STORE_TOKEN,
+                MessageFeedbackStore,
+                MessageFeedbackGuardrailStore
+            );
+        const [feedbackState, setFeedbackState] = useState<Models.ChatbotFeedbackState>(
+            Models.ChatbotFeedbackState.None
+        );
+        const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+        const title = chatbotUiStore.customizations.feedback?.title;
+        const isGuardrail = botMessage.isGuardrailed;
+        const feedbackStore: IMessageFeedbackBaseStore = isGuardrail
+            ? messageFeedbackGuardrailStore
+            : messageFeedbackStore;
+
+        const sendFeedback = useCallback(
+            async (feedback: Models.IFeedback) => {
+                setFeedbackState(Models.ChatbotFeedbackState.Sent);
+                try {
+                    await chatbotUiStore.sendMessageFeedback(botMessage, feedback);
+                    setFeedbackState(Models.ChatbotFeedbackState.Success);
+                } catch {
+                    setFeedbackState(Models.ChatbotFeedbackState.Failure);
+                }
+            },
+            [chatbotUiStore, botMessage]
+        );
+
+        const handleFeedbackThumbsUp = useCallback(async () => {
+            await sendFeedback(new Models.Feedback({ rating: Models.FeedbackRatings.ThumbsUp }));
+        }, [sendFeedback]);
+
+        const handleFeedbackSubmit = useCallback(async () => {
+            const validateResult = await feedbackStore.formState.validate();
+            if (validateResult.hasError) {
+                return;
+            }
+            const feedback = feedbackStore.export();
+            await sendFeedback(feedback);
+        }, [feedbackStore, sendFeedback]);
+
+        if (feedbackState === Models.ChatbotFeedbackState.Sent) {
+            return (
+                <Flex
+                    direction="row"
+                    gap="2"
+                    alignItems="center"
+                    className={classNames(className, Styles.feedback)}
+                    data-cy="titan-chatbot-message-feedback-loading"
+                >
+                    <Spinner />
+                </Flex>
+            );
+        }
+        if (feedbackState === Models.ChatbotFeedbackState.Success) {
+            return (
+                <Flex
+                    direction="row"
+                    gap="2"
+                    alignItems="center"
+                    className={classNames(className, Styles.feedback)}
+                >
+                    <Icon svg={IconCheck} className="c-status-success" />
+                    <Text
+                        className={Styles.feedbackResultText}
+                        subdued
+                        size="small"
+                        data-cy="titan-chatbot-message-feedback-success"
+                    >
+                        Thanks for your feedback.
+                    </Text>
+                </Flex>
+            );
+        }
+        if (feedbackState === Models.ChatbotFeedbackState.Failure) {
+            // Feedback is done: either user clicked thumbs up or submitted feedback
+            return (
+                <Flex
+                    direction="row"
+                    gap="2"
+                    alignItems="center"
+                    className={classNames(className, Styles.feedback)}
+                    data-cy="titan-chatbot-message-feedback-failed"
+                >
+                    <Icon svg={IconError} className="c-status-danger" />
+                    <Text className={classNames('c-status-danger', Styles.feedbackResultText)}>
+                        Failed to send feedback.
+                    </Text>
+                </Flex>
+            );
+        }
+        const SubmitButton = (
+            <Button
+                appearance="primary"
+                disabled={!feedbackStore.isValid}
+                onClick={handleFeedbackSubmit}
+                data-cy="titan-chatbot-message-feedback-submit"
+            >
+                Submit
+            </Button>
+        );
+        return (
+            <Flex direction="row" gap="2" alignItems="center" className={className}>
+                {!isGuardrail && title && <Text variant="eyebrow">{title}</Text>}
+                {!isGuardrail && (
+                    <Button
+                        icon={IconThumbUp}
+                        size="small"
+                        appearance="ghost"
+                        aria-label="thumb up"
+                        onClick={handleFeedbackThumbsUp}
+                        data-cy="titan-chatbot-message-feedback-thumbs-up"
+                    />
+                )}
+                <Popover
+                    placement="top-start"
+                    onOutsidePress={() => setIsPopoverOpen(false)}
+                    open={isPopoverOpen}
+                >
+                    {isGuardrail ? (
+                        <Fragment>
+                            <Popover.Trigger>
+                                {props => (
+                                    <Link
+                                        {...(props as unknown as HTMLAttributes<HTMLAnchorElement>)}
+                                        onClick={() => setIsPopoverOpen(true)}
+                                        className={classNames(
+                                            'fs-paragraph-small',
+                                            Styles.provideAnswer
+                                        )}
+                                        color="blue"
+                                        data-cy="titan-chatbot-message-feedback-provide-answer"
+                                    >
+                                        Provide correct answer
+                                    </Link>
+                                )}
+                            </Popover.Trigger>
+                            <Popover.Content>
+                                <Flex direction="column">
+                                    <Flex justifyContent="space-between" alignItems="center">
+                                        <Text el="h3" variant="headline" size="small">
+                                            Provide correct answer
+                                        </Text>
+                                    </Flex>
+                                    <ChatbotMessageFeedbackFormGuardrail />
+                                    {SubmitButton}
+                                </Flex>
+                            </Popover.Content>
+                        </Fragment>
+                    ) : (
+                        <Fragment>
+                            <Popover.Button
+                                icon={IconThumbDown}
+                                size="small"
+                                appearance="ghost"
+                                onClick={() => setIsPopoverOpen(true)}
+                                aria-label="thumb down"
+                                data-cy="titan-chatbot-message-feedback-thumbs-down"
+                            />
+                            <Popover.Content>
+                                <Flex direction="column">
+                                    <Flex justifyContent="space-between" alignItems="center">
+                                        <Text el="h3" variant="headline" size="small">
+                                            Why didn't this answer solve your problem?
+                                        </Text>
+                                    </Flex>
+                                    <ChatbotMessageFeedbackForm />
+                                    {SubmitButton}
+                                </Flex>
+                            </Popover.Content>
+                        </Fragment>
+                    )}
+                </Popover>
+            </Flex>
+        );
+    })
+);