@servicetitan/titan-chatbot-ui-anvil2 3.1.1

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,27 @@
+import { Link, LinkProps } from '@servicetitan/anvil2';
+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 handleFeedback = useCallback(() => {
+        setIsFeedbackOpen(false);
+    }, []);
+
+    return (
+        <Fragment>
+            <Link
+                {...rest}
+                onClick={e => {
+                    setIsFeedbackOpen(true);
+                    onClick?.(e);
+                }}
+                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,95 @@
+import { Button, ButtonToggle, Dialog, Flex, Text, Textarea } from '@servicetitan/anvil2';
+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, SessionFeedbackStore } from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { FC, useCallback } from 'react';
+
+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 (
+            <Dialog
+                onClose={handleClose}
+                open
+                title="Give Feedback on Titan"
+                data-cy="titan-chatbot-session-feedback-modal"
+            >
+                <Dialog.Content>
+                    <Flex direction="column" gap="2" className="m-block-start-6">
+                        <Text>Was Titan able to help solve your problem?</Text>
+                        <Flex direction="row" gap="4" alignItems="center">
+                            <ButtonToggle
+                                size="small"
+                                aria-label="Thumbs Up"
+                                title="Thumbs Up"
+                                icon={IconThumbUp}
+                                checked={chatbotFeedbackStore.isThumbsUp}
+                                onClick={() => handleThumbs(true)}
+                                data-cy="titan-chatbot-session-feedback-thumbs-up"
+                            />
+                            <ButtonToggle
+                                size="small"
+                                aria-label="Thumbs Down"
+                                title="Thumbs Down"
+                                icon={IconThumbDown}
+                                checked={chatbotFeedbackStore.isThumbsDown}
+                                onClick={() => handleThumbs(false)}
+                                data-cy="titan-chatbot-session-feedback-thumbs-down"
+                            />
+                        </Flex>
+                        <Textarea
+                            className="m-block-start-4"
+                            label="Tell us more"
+                            rows={3}
+                            value={chatbotFeedbackStore.formState.$.comment.value}
+                            onChange={chatbotFeedbackStore.formState.$.comment.onChangeHandler}
+                            data-cy="titan-chatbot-session-feedback-comment"
+                        />
+                    </Flex>
+                </Dialog.Content>
+                <Dialog.Footer>
+                    <Flex direction="row" justifyContent="flex-end" gap="3">
+                        <Button
+                            onClick={handleClose}
+                            data-cy="titan-chatbot-session-feedback-cancel"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            onClick={handleSubmit}
+                            appearance="primary"
+                            disabled={!chatbotFeedbackStore.isValid}
+                            data-cy="titan-chatbot-session-feedback-submit"
+                        >
+                            Submit Feedback
+                        </Button>
+                    </Flex>
+                </Dialog.Footer>
+            </Dialog>
+        );
+    })
+);

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

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

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

@@ -0,0 +1,58 @@
+import { Chip, ChipProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, RefAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import * as Styles from './chatbot-filter.module.css';
+
+export const ChatbotFilterButton: FC<
+    RefAttributes<HTMLElement> & ChipProps & { count: number; open: boolean }
+> = forwardRef<HTMLElement, ChipProps & { open: boolean; count: number }>(
+    ({ className, count, open, ...chipProps }, ref) => {
+        const buttonRef = useRef<HTMLElement | null>(null);
+
+        useImperativeHandle(ref, () => buttonRef.current!, []);
+
+        useEffect(() => {
+            // This is temporary solution until we have a proper filter button component, or it's replacement in Anvil2
+            const chip = buttonRef.current;
+            if (!chip) {
+                return;
+            }
+
+            // Ensure chip has a counter element
+            let counterEl: HTMLElement | null = chip.querySelector('.chip__counter');
+            if (!counterEl) {
+                counterEl = document.createElement('div');
+                counterEl.className = 'chip__counter';
+
+                chip.append(counterEl);
+            }
+            counterEl.textContent = count.toString();
+            counterEl.style.display = count > 0 ? 'flex' : 'none';
+
+            // Ensure chip has an icon element
+            const iconEl = chip.querySelector('.chip__icon');
+            if (!iconEl) {
+                const icon = document.createElement('img');
+                icon.className = 'chip__icon';
+                icon.src =
+                    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgaGVpZ2h0PSIxZW0iIHdpZHRoPSIxZW0iIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuNDEgNy44NEwxMiAxMi40Mmw0LjU5LTQuNThMMTggOS4yNWwtNiA2LTYtNnoiPjwvcGF0aD48L3N2Zz4=';
+                chip.append(icon);
+            }
+        }, [count]);
+
+        return (
+            <Chip
+                ref={buttonRef}
+                className={classNames(
+                    Styles.filterButton,
+                    {
+                        [Styles.filterButtonActive]: count > 0,
+                        [Styles.filterButtonOpen]: open,
+                    },
+                    className
+                )}
+                {...chipProps}
+            />
+        );
+    }
+);

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

@@ -0,0 +1,43 @@
+@import '@servicetitan/tokens/dist/tokens.css';
+
+.filterButton {
+    padding-inline: var(--size-1);
+    padding-block: var(--size-1);
+    border-radius: 0.375rem;
+    border: 1px solid
+        light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162));
+    background-color: light-dark(
+        var(--color-neutral-0, #ffffff),
+        var(--color-neutral-400, #141414)
+    );
+}
+
+.filterButton:hover {
+    background-color: light-dark(#14141414, #ffffff14);
+}
+
+.filterButton > :global(.chip__counter) {
+    background-color: var(--color-purple-400, #6954c0);
+    color: var(--color-purple-100, #f1edff);
+    border-radius: 100%;
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-block: auto;
+}
+
+.filterButton.filterButtonActive {
+    background-color: var(--color-purple-100, #f1edff);
+    color: var(--color-purple-400, #6954c0);
+    border: 1px solid var(--color-purple-400, #6954c0);
+}
+
+.filterButton > :global(.chip__icon) {
+    transform: rotate(0deg);
+}
+
+.filterButton.filterButtonOpen > :global(.chip__icon) {
+    transform: rotate(180deg);
+}

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

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const filterButton: string;
+export const filterButtonActive: string;
+export const filterButtonOpen: string;
+

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

@@ -0,0 +1,166 @@
+import { Checkbox, Flex, Link, Popover, Text, TextField, useMergeRefs } from '@servicetitan/anvil2';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN, Models } from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { ChangeEvent, FC, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ChatbotFilterButton } from './chatbot-filter-button';
+
+interface IChatFilterProps {
+    filter: Models.IOption;
+}
+
+export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }: IChatFilterProps) => {
+    const triggerRef = useRef<HTMLButtonElement>();
+    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).trim();
+    const selectedOptionsCount = filterStore.selectedOptions[filter.key]?.length ?? 0;
+
+    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) {
+            return;
+        }
+        const triggerElement = triggerRef.current;
+        const boundingRect = triggerElement.getBoundingClientRect();
+        const headerFooterSize = 160;
+        setListMaxHeight(boundingRect.top - headerFooterSize);
+    }, []);
+
+    const handleToggle = () => {
+        setOpen(prev => !prev);
+    };
+
+    const handleCancel = (e: MouseEvent) => {
+        if (triggerRef.current?.contains(e.target as Node)) {
+            return;
+        }
+        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
+            placement="top"
+            noPadding
+            maxHeight={listMaxHeight}
+            onOutsidePress={handleCancel}
+            open={open}
+        >
+            <Popover.Trigger>
+                {({ ref: popoverRef, ...props }) => {
+                    const mergedRef = useMergeRefs([
+                        popoverRef,
+                        triggerRef as Ref<HTMLButtonElement>,
+                    ]);
+                    return (
+                        <ChatbotFilterButton
+                            {...props}
+                            ref={mergedRef}
+                            count={selectedOptionsCount}
+                            open={open}
+                            label={filterLabel}
+                            onClick={handleToggle}
+                            data-cy="titan-chatbot-filter-button"
+                        />
+                    );
+                }}
+            </Popover.Trigger>
+            <Popover.Content>
+                <Flex
+                    direction="column"
+                    className="p-4"
+                    gap="4"
+                    data-cy="titan-chatbot-filter-content"
+                >
+                    <Flex>
+                        <TextField
+                            onChange={handleFilterChange}
+                            value={filterText}
+                            size="small"
+                            placeholder="Search"
+                            data-cy="titan-chatbot-filter-search"
+                        />
+                    </Flex>
+                    {allOptions.length > 0 ? (
+                        <Flex direction="column" gap="2" data-cy="titan-chatbot-filter-options">
+                            {filteredOptions.map(option => (
+                                <Checkbox
+                                    key={option.value}
+                                    label={option.text}
+                                    value={option.value}
+                                    checked={(
+                                        filterStore.selectedOptions[filter.key] || []
+                                    ).includes(option.value)}
+                                    onChange={(_, state) => {
+                                        handleItemChecked(
+                                            String(state?.value ?? ''),
+                                            !state?.checked
+                                        );
+                                    }}
+                                />
+                            ))}
+                        </Flex>
+                    ) : (
+                        <Text className="ta-center" size="small" subdued>
+                            No items available
+                        </Text>
+                    )}
+                    <Flex direction="row" alignItems="baseline" gap="2">
+                        <Text size="small">Select</Text>
+                        <Text size="small">
+                            <Link
+                                appearance="primary"
+                                onClick={() => filterStore.selectAll(filter.key)}
+                                data-cy="titan-chatbot-filter-all"
+                            >
+                                All
+                            </Link>
+                        </Text>
+                        <Text size="small">
+                            <Link
+                                appearance="primary"
+                                onClick={() => filterStore.deselectAll(filter.key)}
+                                data-cy="titan-chatbot-filter-none"
+                            >
+                                None
+                            </Link>
+                        </Text>
+                    </Flex>
+                </Flex>
+            </Popover.Content>
+        </Popover>
+    );
+});

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

@@ -0,0 +1,17 @@
+import { Flex } from '@servicetitan/anvil2';
+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 ? (
+        <Flex className={className} gap="2" data-cy="titan-chatbot-filters">
+            {filterStore.filters.map(filter => (
+                <ChatFilter key={filter.key} filter={filter} />
+            ))}
+        </Flex>
+    ) : null;
+});

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

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

package/src/components/chatbot/messages/__tests-cy__/chatbot-message-answer-readonly.test.tsx

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

package/src/components/chatbot/messages/__tests-cy__/chatbot-message-answer.test.tsx

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

package/src/components/chatbot/messages/__tests-cy__/chatbot-message-typing.test.tsx

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

package/src/components/chatbot/messages/chatbot-links.module.less

@@ -0,0 +1,24 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.details [data-anv='details-summary'] {
+    padding-inline: var(--size-0);
+}
+
+ul.message-link-list {
+    margin-bottom: var(--size-0);
+    padding-inline-start: var(--size-2);
+    margin-block-start: var(--size-1);
+    line-height: 1.25em;
+}
+
+ul.message-link-list > li {
+    padding-left: var(--size-1);
+}
+
+.messageLink {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/src/components/chatbot/messages/chatbot-links.module.less.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const details: string;
+export const messageLink: string;
+export const messageLinkList: string;
+

package/src/components/chatbot/messages/chatbot-links.tsx

@@ -0,0 +1,73 @@
+import { Details, Link, Text } from '@servicetitan/anvil2';
+import { Models } from '@servicetitan/titan-chatbot-api';
+import { FC, useCallback, useState } from 'react';
+import * as Styles from './chatbot-links.module.less';
+
+interface ChatLinksProps {
+    seeMoreLabel: string;
+    seeLessLabel: string;
+    links: Models.ScoredUrl[];
+    onToggle?: () => void;
+    linkProps?: {
+        primary?: boolean;
+        className?: string;
+    };
+}
+
+export const ChatbotLinks: FC<ChatLinksProps> = ({
+    linkProps,
+    links,
+    onToggle,
+    seeLessLabel,
+    seeMoreLabel,
+}) => {
+    const [linksCollapsed, setLinksCollapsed] = useState(true);
+
+    const handleToggleCollapsible = useCallback(() => {
+        setLinksCollapsed(!linksCollapsed);
+        setTimeout(() => {
+            onToggle?.();
+        }, 200);
+    }, [onToggle, linksCollapsed]);
+
+    if (!links.length) {
+        return null;
+    }
+    return (
+        <Details className={Styles.details}>
+            <Details.Summary>
+                <Link
+                    appearance="secondary"
+                    className="m-inline-start-2"
+                    onClick={handleToggleCollapsible}
+                    data-cy="titan-chatbot-links-more"
+                    data-pendo="titan-chatbot-links-more"
+                >
+                    {linksCollapsed ? seeMoreLabel : seeLessLabel}
+                </Link>
+            </Details.Summary>
+            <Details.Content data-cy="titan-chatbot-links-collapsible">
+                <ul className={Styles.messageLinkList}>
+                    {links.map(u => (
+                        <li key={u.url}>
+                            <Text>
+                                <Link
+                                    href={u.url}
+                                    target="_blank"
+                                    className={Styles.messageLink}
+                                    primary
+                                    data-cy="titan-chatbot-links-link"
+                                    data-pendo="titan-chatbot-links-link-secondary"
+                                    title={u.title ?? u.url}
+                                    {...linkProps}
+                                >
+                                    {u.title ?? u.url}
+                                </Link>
+                            </Text>
+                        </li>
+                    ))}
+                </ul>
+            </Details.Content>
+        </Details>
+    );
+};

package/src/components/chatbot/messages/chatbot-message-agent-footer.tsx

@@ -0,0 +1,35 @@
+import { Flex, Text } from '@servicetitan/anvil2';
+import {
+    ChatMessageModelBase,
+    formatChatMessageDate,
+    getFirstName,
+} from '@servicetitan/titan-chat-ui-common';
+import { Models } from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { FC, useMemo } from 'react';
+import { ChatbotMessageFeedback } from '../feedback/chatbot-message-feedback';
+
+interface IChatbotMessageAgentFooterProps {
+    message: Pick<ChatMessageModelBase, 'participant' | 'timestamp' | 'data'>;
+}
+
+export const ChatbotMessageAgentFooter: FC<IChatbotMessageAgentFooterProps> = observer(
+    ({ message }) => {
+        const botMessage = useMemo(() => message.data as Models.IBotMessage, [message]);
+        const isBotMessage = Boolean(botMessage) && message.participant.isAgent;
+        const firstName = useMemo(
+            () => getFirstName(message.participant.name),
+            [message.participant.name]
+        );
+
+        return (
+            <Flex gap="4" justifyContent="space-between" alignItems="center">
+                <Text variant="eyebrow">
+                    {message.participant.isAgent && `${firstName} • `}
+                    {formatChatMessageDate(message.timestamp)}
+                </Text>
+                {isBotMessage && <ChatbotMessageFeedback botMessage={botMessage} />}
+            </Flex>
+        );
+    }
+);