@servicetitan/titan-chatbot-ui 3.0.0

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

@@ -0,0 +1,65 @@
+import { BodyText, Form } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { FC } from 'react';
+import { MessageFeedbackStore } from '../../../stores/message-feedback.store';
+import * as Styles from './chatbot-message-feedback-form.module.less';
+
+export const ChatbotMessageFeedbackForm: FC = observer(() => {
+    const [store] = useDependencies(MessageFeedbackStore);
+    return (
+        <Form data-cy="titan-chatbot-message-feedback-form">
+            <Form.Checkbox
+                label="Answer is unrelated to my question"
+                className={Styles.formItem}
+                value={store.formState.$.unrelated.value}
+                onChange={store.formState.$.unrelated.onChangeHandler}
+                data-cy="titan-chatbot-message-feedback-form-unrelated"
+            />
+            <Form.Checkbox
+                label="Answer is unclear, not sure what it means"
+                className={Styles.formItem}
+                value={store.formState.$.unclear.value}
+                onChange={store.formState.$.unclear.onChangeHandler}
+                data-cy="titan-chatbot-message-feedback-form-unclear"
+            />
+            <Form.Checkbox
+                label="Answer doesn’t fully address the question"
+                className={Styles.formItem}
+                value={store.formState.$.notFull.value}
+                onChange={store.formState.$.notFull.onChangeHandler}
+                data-cy="titan-chatbot-message-feedback-form-not-full"
+            />
+            <Form.Checkbox
+                label="Answer is incorrect or doesn’t work"
+                className={Styles.formItem}
+                value={store.formState.$.incorrect.value}
+                onChange={store.formState.$.incorrect.onChangeHandler}
+                data-cy="titan-chatbot-message-feedback-form-incorrect"
+            />
+            <Form.Checkbox
+                label="Other"
+                className={Styles.formItem}
+                value={store.formState.$.other.value}
+                onChange={store.formState.$.other.onChangeHandler}
+                data-cy="titan-chatbot-message-feedback-form-other"
+            />
+            {store.isTextAreaVisible && (
+                <div className="m-l-4">
+                    <Form.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"
+                    />
+                    <BodyText size="small" className="c-neutral-100 m-b-1">
+                        Tell us more about what can be improved.
+                    </BodyText>
+                </div>
+            )}
+        </Form>
+    );
+});

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

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

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

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

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

@@ -0,0 +1,200 @@
+import {
+    BodyText,
+    Button,
+    ButtonGroup,
+    Eyebrow,
+    Headline,
+    Icon,
+    Link,
+    Popover,
+    Spinner,
+    Stack,
+} from '@servicetitan/design-system';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN, Models } from '@servicetitan/titan-chatbot-api';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { FC, useCallback, useState } from 'react';
+import { IMessageFeedbackBaseStore } from '../../../stores/message-feedback-base.store';
+import { MessageFeedbackGuardrailStore } from '../../../stores/message-feedback-guardrail.store';
+import { MessageFeedbackStore } from '../../../stores/message-feedback.store';
+import { ChatbotMessageFeedbackForm } from './chatbot-message-feedback-form';
+import { ChatbotMessageFeedbackFormGuardrail } from './chatbot-message-feedback-form-guardrail';
+import * as Styles from './chatbot-message-feedback-popover.module.less';
+
+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 {
+                    const result = await chatbotUiStore.sendMessageFeedback(botMessage, feedback);
+                    setFeedbackState(result ?? 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 (
+                <Stack
+                    direction="row"
+                    spacing="1"
+                    alignItems="center"
+                    className={classNames(className, Styles.feedback)}
+                    data-cy="titan-chatbot-message-feedback-loading"
+                >
+                    <Spinner size="tiny" />
+                </Stack>
+            );
+        }
+        if (feedbackState === Models.ChatbotFeedbackState.Success) {
+            return (
+                <Stack
+                    direction="row"
+                    spacing="1"
+                    alignItems="center"
+                    className={classNames(className, Styles.feedback)}
+                >
+                    <Icon name="check" className="c-green-500" />
+                    <BodyText
+                        className={classNames('c-neutral-100', Styles.feedbackResultText)}
+                        data-cy="titan-chatbot-message-feedback-success"
+                    >
+                        Thanks for your feedback.
+                    </BodyText>
+                </Stack>
+            );
+        }
+        if (feedbackState === Models.ChatbotFeedbackState.Failure) {
+            // Feedback is done: either user clicked thumbs up or submitted feedback
+            return (
+                <Stack
+                    direction="row"
+                    spacing="1"
+                    alignItems="center"
+                    className={classNames(className, Styles.feedback)}
+                    data-cy="titan-chatbot-message-feedback-failed"
+                >
+                    <Icon name="error" className="c-red-500" />
+                    <BodyText className={classNames('c-red-100', Styles.feedbackResultText)}>
+                        Failed to send feedback.
+                    </BodyText>
+                </Stack>
+            );
+        }
+        return (
+            <Stack direction="row" spacing="1" alignItems="center" className={className}>
+                {!isGuardrail && title && <Eyebrow>{title}</Eyebrow>}
+                {!isGuardrail && (
+                    <Button
+                        iconName="thumb_up"
+                        xsmall
+                        fill="subtle"
+                        aria-label="thumb up"
+                        onClick={handleFeedbackThumbsUp}
+                        data-cy="titan-chatbot-message-feedback-thumbs-up"
+                    />
+                )}
+                <Popover
+                    trigger={
+                        isGuardrail ? (
+                            <Link
+                                onClick={() => setIsPopoverOpen(true)}
+                                className="fs-1 tt-uppercase"
+                                color="blue"
+                                data-cy="titan-chatbot-message-feedback-provide-answer"
+                            >
+                                Provide correct answer
+                            </Link>
+                        ) : (
+                            <Button
+                                iconName="thumb_down"
+                                xsmall
+                                fill="subtle"
+                                onClick={() => setIsPopoverOpen(true)}
+                                aria-label="thumb down"
+                                data-cy="titan-chatbot-message-feedback-thumbs-down"
+                            />
+                        )
+                    }
+                    header={
+                        <Stack justifyContent="space-between" alignItems="center" className="w-100">
+                            <Headline size="small">
+                                {isGuardrail
+                                    ? 'Provide correct answer'
+                                    : 'Why didn’t this answer solve your problem?'}
+                            </Headline>
+                        </Stack>
+                    }
+                    onClickOutside={() => setIsPopoverOpen(false)}
+                    headerAlign="space-between"
+                    footer={
+                        <ButtonGroup>
+                            <Button
+                                primary
+                                disabled={!feedbackStore.isValid}
+                                onClick={handleFeedbackSubmit}
+                                data-cy="titan-chatbot-message-feedback-submit"
+                            >
+                                Submit
+                            </Button>
+                        </ButtonGroup>
+                    }
+                    className="feedback-form-popover-body"
+                    footerAlign="right"
+                    direction="tr"
+                    width="m"
+                    padding="m"
+                    autoFlipVertically
+                    autoFlipHorizontally
+                    open={isPopoverOpen}
+                >
+                    {isGuardrail ? (
+                        <ChatbotMessageFeedbackFormGuardrail />
+                    ) : (
+                        <ChatbotMessageFeedbackForm />
+                    )}
+                </Popover>
+            </Stack>
+        );
+    })
+);

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

@@ -0,0 +1,27 @@
+import { useDependencies } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN, Models } from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { FC } from 'react';
+import { ChatbotMessageFeedbackPopover } from './chatbot-message-feedback-popover';
+
+interface IChatbotFeedbackProps {
+    botMessage: Models.IBotMessage;
+    className?: string;
+}
+
+export const ChatbotMessageFeedback: FC<IChatbotFeedbackProps> = observer(
+    ({ botMessage, className }) => {
+        const [chatbotUiStore] = useDependencies(CHATBOT_UI_STORE_TOKEN);
+
+        // We show feedback for all messages with normal answer and for guardrailed messages if internal chatbot setting is enabled
+        const showGuardrailFeedback = Boolean(
+            chatbotUiStore.customizations?.feedback?.showGuardrailFeedback
+        );
+        const isFeedbackVisible = showGuardrailFeedback || !botMessage.isGuardrailed;
+
+        if (!isFeedbackVisible) {
+            return null;
+        }
+        return <ChatbotMessageFeedbackPopover className={className} botMessage={botMessage} />;
+    }
+);

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

@@ -0,0 +1,29 @@
+import { Link, LinkProps } from '@servicetitan/design-system';
+import { FC, Fragment, useCallback, useState } from 'react';
+import { ChatbotSessionFeedbackModal } from './chatbot-session-feedback-modal';
+
+export const ChatbotSessionFeedbackLink: FC<LinkProps> = ({ children, onClick, ...rest }) => {
+    const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
+
+    const handleFeedbackOpen = useCallback(() => {
+        setIsFeedbackOpen(true);
+        onClick?.();
+    }, [onClick]);
+
+    const handleFeedback = useCallback(() => {
+        setIsFeedbackOpen(false);
+    }, []);
+
+    return (
+        <Fragment>
+            <Link
+                {...rest}
+                onClick={handleFeedbackOpen}
+                data-cy="titan-chatbot-session-feedback-link"
+            >
+                {children}
+            </Link>
+            {isFeedbackOpen && <ChatbotSessionFeedbackModal onClose={handleFeedback} />}
+        </Fragment>
+    );
+};

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

@@ -0,0 +1,96 @@
+import { BodyText, Button, ButtonGroup, Form, Modal, Stack } from '@servicetitan/design-system';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN } from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { FC, useCallback } from 'react';
+import { SessionFeedbackStore } from '../../../stores/session-feedback.store';
+
+export const ChatbotSessionFeedbackModal: FC<{ onClose: () => void }> = provide({
+    singletons: [SessionFeedbackStore],
+})(
+    observer(({ onClose }) => {
+        const [chatbotFeedbackStore, chatbotUiStore] = useDependencies(
+            SessionFeedbackStore,
+            CHATBOT_UI_STORE_TOKEN
+        );
+
+        const handleClose = useCallback(() => {
+            onClose();
+        }, [onClose]);
+
+        const handleSubmit = useCallback(() => {
+            chatbotUiStore.sendSessionFeedback(chatbotFeedbackStore.feedback);
+            onClose();
+        }, [chatbotUiStore, chatbotFeedbackStore, onClose]);
+
+        const handleThumbs = useCallback(
+            (isThumbsUp: boolean) => {
+                chatbotFeedbackStore.formState.$.thumbs.onChange(isThumbsUp ? 1 : -1);
+            },
+            [chatbotFeedbackStore]
+        );
+
+        return (
+            <Modal
+                onClose={handleClose}
+                open
+                title="Give Feedback on Titan"
+                size={Modal.Sizes.S}
+                footer={
+                    <ButtonGroup>
+                        <Button
+                            onClick={handleClose}
+                            data-cy="titan-chatbot-session-feedback-cancel"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            onClick={handleSubmit}
+                            primary
+                            disabled={!chatbotFeedbackStore.isValid}
+                            data-cy="titan-chatbot-session-feedback-submit"
+                        >
+                            Submit Feedback
+                        </Button>
+                    </ButtonGroup>
+                }
+                data-cy="titan-chatbot-session-feedback-modal"
+            >
+                <Stack direction="column" spacing="3">
+                    <Stack direction="column" spacing="2">
+                        <BodyText>Was Titan able to help solve your problem?</BodyText>
+                        <ButtonGroup>
+                            <Button
+                                small
+                                aria-label="Thumbs Up"
+                                title="Thumbs Up"
+                                iconName="thumb_up"
+                                fill="outline"
+                                selected={chatbotFeedbackStore.isThumbsUp}
+                                onClick={() => handleThumbs(true)}
+                                data-cy="titan-chatbot-session-feedback-thumbs-up"
+                            />
+                            <Button
+                                small
+                                fill="outline"
+                                aria-label="Thumbs Down"
+                                title="Thumbs Down"
+                                selected={chatbotFeedbackStore.isThumbsDown}
+                                iconName="thumb_down"
+                                onClick={() => handleThumbs(false)}
+                                data-cy="titan-chatbot-session-feedback-thumbs-down"
+                            />
+                        </ButtonGroup>
+                    </Stack>
+                    <Form.TextArea
+                        label="Tell us more"
+                        maxRows={3}
+                        value={chatbotFeedbackStore.formState.$.comment.value}
+                        onChange={chatbotFeedbackStore.formState.$.comment.onChangeHandler}
+                        data-cy="titan-chatbot-session-feedback-comment"
+                    />
+                </Stack>
+            </Modal>
+        );
+    })
+);

package/src/components/chatbot/filters/chatbot-filter.module.css

@@ -0,0 +1,19 @@
+@import '@servicetitan/tokens/dist/tokens.css';
+
+.filterBottomButton {
+    padding-left: var(--spacing-half);
+    padding-right: var(--spacing-half);
+}
+
+.filterBottomText {
+    padding-right: var(--spacing-half);
+}
+
+.filterPopover {
+    :global(.Popover__header),
+    :global(.Popover__content),
+    :global(.Popover__footer) {
+        padding-left: var(--spacing-1);
+        padding-right: var(--spacing-1);
+    }
+}

package/src/components/chatbot/filters/chatbot-filter.module.css.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const filterBottomButton: string;
+export const filterBottomText: string;
+export const filterPopover: string;
+

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

@@ -0,0 +1,160 @@
+import {
+    BodyText,
+    Button,
+    FilterButton,
+    Input,
+    OptionList,
+    Popover,
+    Stack,
+} from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN, Models } from '@servicetitan/titan-chatbot-api';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as Style from './chatbot-filter.module.css';
+
+interface IChatFilterProps {
+    filter: Models.IOption;
+}
+
+export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }: IChatFilterProps) => {
+    const [filterText, setFilterText] = useState('');
+    const [open, setOpen] = useState(false);
+    const [listMaxHeight, setListMaxHeight] = useState(400);
+    const [{ filterStore }] = useDependencies(CHATBOT_UI_STORE_TOKEN);
+    const filterLabel = filterStore.getFilterLabel(filter.displayName ?? filter.key);
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    const allOptions = useMemo(() => {
+        return (
+            filter.subOptions?.map(filterSelectable => ({
+                text: filterStore.getFilterLabel(
+                    filterSelectable.displayName ?? filterSelectable.key
+                ),
+                value: filterSelectable.key,
+            })) ?? []
+        );
+    }, [filterStore, filter.subOptions]);
+
+    const filteredOptions = useMemo(() => {
+        return allOptions.filter(
+            opt => opt.text && opt.text.toLowerCase().indexOf(filterText.toLowerCase()) > -1
+        );
+    }, [filterText, allOptions]);
+
+    useEffect(() => {
+        if (triggerRef.current) {
+            const triggerElement = triggerRef.current;
+            const boundingRect = triggerElement.getBoundingClientRect();
+            const headerFooterSize = 160;
+            setListMaxHeight(boundingRect.top - headerFooterSize);
+        }
+    }, []);
+
+    const handleToggle = () => {
+        setOpen(prev => !prev);
+    };
+
+    const handleCancel = () => {
+        setOpen(false);
+    };
+
+    const handleFilterChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+        setFilterText(event.target.value);
+    }, []);
+
+    const handleItemChecked = useCallback(
+        (value: string, checked: boolean) => {
+            if (checked) {
+                filterStore.selectOption(filter.key, value);
+            } else {
+                filterStore.deselectOption(filter.key, value);
+            }
+        },
+        [filterStore, filter]
+    );
+
+    return (
+        <Popover
+            el="span"
+            direction="t"
+            padding="s"
+            onClickOutside={handleCancel}
+            open={open}
+            portal
+            className={classNames(Style.filterPopover)}
+            scrollHeight={`${listMaxHeight}px`}
+            header={
+                <Stack className={classNames('w-100 p-x-2 p-y-half')}>
+                    <Input
+                        onChange={handleFilterChange}
+                        value={filterText}
+                        size="small"
+                        icon="search"
+                        iconPosition="left"
+                        placeholder="Search"
+                        className="w-100"
+                        data-cy="titan-chatbot-filter-search"
+                    />
+                </Stack>
+            }
+            footer={
+                <Stack direction="row" className="w-100 p-l-2" alignItems="baseline">
+                    <BodyText size="small" className={Style.filterBottomText}>
+                        Select
+                    </BodyText>
+                    <Button
+                        fill="subtle"
+                        primary
+                        xsmall
+                        onClick={() => {
+                            filterStore.selectAll(filter.key);
+                        }}
+                        className={Style.filterBottomButton}
+                        data-cy="titan-chatbot-filter-all"
+                    >
+                        All
+                    </Button>
+                    <Button
+                        fill="subtle"
+                        primary
+                        xsmall
+                        onClick={() => {
+                            filterStore.deselectAll(filter.key);
+                        }}
+                        className={Style.filterBottomButton}
+                        data-cy="titan-chatbot-filter-none"
+                    >
+                        None
+                    </Button>
+                </Stack>
+            }
+            trigger={
+                <FilterButton
+                    ref={triggerRef}
+                    onClick={handleToggle}
+                    value={filterStore.selectedOptions[filter.key]?.length || undefined}
+                    label={filterLabel}
+                    expandIcon={open}
+                    disabled={false}
+                    data-cy="titan-chatbot-filter-button"
+                />
+            }
+        >
+            {allOptions.length > 0 ? (
+                <OptionList
+                    multiple
+                    options={filteredOptions}
+                    onChange={handleItemChecked}
+                    value={filterStore.selectedOptions[filter.key] || []}
+                    data-cy="titan-chatbot-filter-options"
+                />
+            ) : (
+                <BodyText className="ta-center" size="small" subdued>
+                    No items available
+                </BodyText>
+            )}
+        </Popover>
+    );
+});

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

@@ -0,0 +1,17 @@
+import { Stack } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN } from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { FC } from 'react';
+import { ChatFilter } from './chatbot-filter';
+
+export const ChatFilters: FC<{ className?: string }> = observer(({ className }) => {
+    const [{ filterStore }] = useDependencies(CHATBOT_UI_STORE_TOKEN);
+    return filterStore.filters.length > 0 ? (
+        <Stack className={className} spacing="1" data-cy="titan-chatbot-filters">
+            {filterStore.filters.map(filter => (
+                <ChatFilter key={filter.key} filter={filter} />
+            ))}
+        </Stack>
+    ) : null;
+});