@servicetitan/titan-chatbot-ui-anvil2 3.1.1

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

@@ -0,0 +1,39 @@
+import { MultilineText } from '@servicetitan/titan-chat-ui-anvil2';
+import { ChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
+import { Models } from '@servicetitan/titan-chatbot-api';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { FC, Fragment, useMemo } from 'react';
+import { ChatbotLinks } from './chatbot-links';
+import * as Styles from './chatbot-message-answer.module.less';
+
+export const ChatbotMessageAnswerReadonly: FC<{ message: ChatMessageModelText }> = observer(
+    ({ message }) => {
+        const linkProps = useMemo(
+            () => ({
+                primary: false,
+                className: classNames(Styles.link, 'm-block-1'),
+            }),
+            []
+        );
+
+        const chatbotMessageData = useMemo(
+            () => message?.data as Models.IBotMessageWithFeedback,
+            [message]
+        );
+
+        return (
+            <Fragment>
+                <MultilineText text={message.message} className="m-block-1" />
+                {chatbotMessageData && (
+                    <ChatbotLinks
+                        links={chatbotMessageData.scoredUrls ?? []}
+                        seeMoreLabel="Learn more"
+                        seeLessLabel="Learn more"
+                        linkProps={linkProps}
+                    />
+                )}
+            </Fragment>
+        );
+    }
+);

package/src/components/chatbot/messages/chatbot-message-answer.module.less

@@ -0,0 +1,3 @@
+.link {
+    text-decoration: underline;
+}

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

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

package/src/components/chatbot/messages/chatbot-message-answer.tsx

@@ -0,0 +1,55 @@
+import { useDependencies } from '@servicetitan/react-ioc';
+import { MultilineText } from '@servicetitan/titan-chat-ui-anvil2';
+import { ChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
+import { CHATBOT_UI_STORE_TOKEN, Models } from '@servicetitan/titan-chatbot-api';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { FC, Fragment, useCallback, useMemo } from 'react';
+import { ChatbotLinks } from './chatbot-links';
+import * as Styles from './chatbot-message-answer.module.less';
+
+export const ChatbotMessageAnswer: FC<{ message: ChatMessageModelText }> = observer(
+    ({ message }) => {
+        const [chatbotUiStore] = useDependencies(CHATBOT_UI_STORE_TOKEN);
+        const chatbotMessageData = useMemo(
+            () => message?.data as Models.IBotMessageWithFeedback,
+            [message]
+        );
+
+        const handleToggleLinks = useCallback(() => {
+            if (chatbotUiStore.messages.at(-1)?.id !== message.id) {
+                return;
+            }
+            setTimeout(() => {
+                chatbotUiStore.triggerScroll();
+            }, 100);
+        }, [message.id, chatbotUiStore]);
+
+        const linkProps = useMemo(
+            () => ({
+                primary: false,
+                className: classNames(Styles.link, 'm-block-1'),
+            }),
+            []
+        );
+
+        return (
+            <Fragment>
+                <MultilineText
+                    text={message.message}
+                    className="m-block-1"
+                    data-cy="titan-chatbot-message-answer"
+                />
+                {chatbotMessageData && (
+                    <ChatbotLinks
+                        links={chatbotMessageData.scoredUrls ?? []}
+                        onToggle={handleToggleLinks}
+                        seeMoreLabel="Learn more"
+                        seeLessLabel="Learn less"
+                        linkProps={linkProps}
+                    />
+                )}
+            </Fragment>
+        );
+    }
+);

package/src/components/chatbot/messages/chatbot-message-timeout.tsx

@@ -0,0 +1,20 @@
+import { useDependencies } from '@servicetitan/react-ioc';
+import { MessageTimeout } from '@servicetitan/titan-chat-ui-anvil2';
+import { ChatMessageModelTimeout } from '@servicetitan/titan-chat-ui-common';
+import { CHATBOT_UI_STORE_TOKEN } from '@servicetitan/titan-chatbot-api';
+import { observer } from 'mobx-react';
+import { FC, useCallback } from 'react';
+
+export const ChatbotMessageTimeout: FC<{ message: ChatMessageModelTimeout }> = observer(() => {
+    const [chatbotUiStore] = useDependencies(CHATBOT_UI_STORE_TOKEN);
+
+    const handleResume = useCallback(() => {
+        chatbotUiStore.restartTimers();
+    }, [chatbotUiStore]);
+
+    const handleReset = useCallback(() => {
+        chatbotUiStore.restart();
+    }, [chatbotUiStore]);
+
+    return <MessageTimeout onResume={handleResume} onReset={handleReset} />;
+});

package/src/components/chatbot/messages/chatbot-message-typing.tsx

@@ -0,0 +1,43 @@
+import { Text } from '@servicetitan/anvil2';
+import {
+    IMessageTypingProps,
+    MessageAgent,
+    MessageTyping,
+} from '@servicetitan/titan-chat-ui-anvil2';
+import { FC, useEffect, useMemo, useState } from 'react';
+
+/**
+ * Typing message for chatbot. Shows three dots that are blinking, after 10 and 20 seconds shows a messages
+ * that the chatbot is still working instead of the dots.
+ */
+export const ChatbotMessageTyping: FC<IMessageTypingProps> = ({ avatar }) => {
+    const [timer, setTimer] = useState(0);
+    const [dots, setDots] = useState('');
+
+    useEffect(() => {
+        const interval = setInterval(() => setTimer(prev => prev + 1), 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    useEffect(() => {
+        setDots(() => '.'.repeat((timer % 3) + 1));
+    }, [timer]);
+
+    const dotsStyle = useMemo(() => ({ width: '1rem' }), []);
+
+    if (timer < 10) {
+        return <MessageTyping avatar={avatar} />;
+    }
+    return (
+        <MessageAgent avatar={avatar}>
+            <Text>
+                {timer < 20
+                    ? 'Looking for the final details'
+                    : 'This is taking longer than usual, please give me a little bit more time'}
+                <span className="d-ib" style={dotsStyle}>
+                    {dots}
+                </span>
+            </Text>
+        </MessageAgent>
+    );
+};

package/src/components/chatbot/messages/chatbot-message-welcome.tsx

@@ -0,0 +1,16 @@
+import { Text } from '@servicetitan/anvil2';
+import { FC } from 'react';
+
+export const ChatbotMessageWelcome: FC = () => (
+    <Text>
+        Hi there! I’m Titan, an AI chatbot.
+        <br />
+        <br />
+        <b>Have a question?</b> Ask me anything about how ServiceTitan works.
+        <br />
+        <b>Need help?</b> If I can’t solve your issue, I’ll guide you through submitting a support
+        case.
+        <br />
+        Let’s get started - how can I assist you today?
+    </Text>
+);

package/src/components/chatbot/templates/chatbot-message-template-agent-readonly.tsx

@@ -0,0 +1,25 @@
+import { MessageAgent, MessageFooter, useAvatarProps } from '@servicetitan/titan-chat-ui-anvil2';
+import { ChatMessageModelBase, getFirstName } from '@servicetitan/titan-chat-ui-common';
+import { observer } from 'mobx-react';
+import { FC, PropsWithChildren, useMemo } from 'react';
+
+export const ChatbotMessageTemplateAgentReadonly: FC<
+    PropsWithChildren<{
+        message: ChatMessageModelBase;
+    }>
+> = observer(({ children, message }) => {
+    const {
+        participant: { icon, name },
+    } = message;
+    const firstName = useMemo(() => getFirstName(name), [name]);
+    const avatarProps = useAvatarProps(name, icon);
+
+    return (
+        <MessageAgent
+            avatar={avatarProps}
+            messageFooter={<MessageFooter name={firstName} timestamp={message.timestamp} />}
+        >
+            {children}
+        </MessageAgent>
+    );
+});

package/src/components/chatbot/templates/chatbot-message-template-agent.tsx

@@ -0,0 +1,25 @@
+import { MessageAgent, useAvatarProps } from '@servicetitan/titan-chat-ui-anvil2';
+import { ChatMessageModelBase } from '@servicetitan/titan-chat-ui-common';
+import { observer } from 'mobx-react';
+import { FC, PropsWithChildren } from 'react';
+import { ChatbotMessageAgentFooter } from '../messages/chatbot-message-agent-footer';
+
+export const ChatbotMessageTemplateAgent: FC<
+    PropsWithChildren<{
+        message: ChatMessageModelBase;
+    }>
+> = observer(({ children, message }) => {
+    const {
+        participant: { icon, name },
+    } = message;
+    const avatarProps = useAvatarProps(name, icon);
+
+    return (
+        <MessageAgent
+            avatar={avatarProps}
+            messageFooter={<ChatbotMessageAgentFooter message={message} />}
+        >
+            {children}
+        </MessageAgent>
+    );
+});

package/src/components/chatbot/templates/chatbot-message-template-user-readonly.tsx

@@ -0,0 +1,16 @@
+import { MessageFooter, MessageUser } from '@servicetitan/titan-chat-ui-anvil2';
+import { ChatMessageModelBase } from '@servicetitan/titan-chat-ui-common';
+import { observer } from 'mobx-react';
+import { FC, PropsWithChildren } from 'react';
+
+export const ChatbotMessageTemplateUserReadonly: FC<
+    PropsWithChildren<{
+        message: ChatMessageModelBase;
+    }>
+> = observer(({ children, message }) => {
+    return (
+        <MessageUser messageFooter={<MessageFooter timestamp={message.timestamp} />}>
+            {children}
+        </MessageUser>
+    );
+});

package/src/cypress.d.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+declare namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject = any> {
+        getCy<E extends Node = HTMLElement>(value: string): Chainable<JQuery<E>>;
+        getCy2<E extends Node = HTMLElement>(value: string): Chainable<JQuery<E>>;
+        getAnvil<E extends Node = HTMLElement>(value: string, extra?: string): Chainable<JQuery<E>>;
+    }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from '@servicetitan/titan-chat-ui-anvil2';
+export { Chatbot } from './components/chatbot/chatbot';
+export { ChatbotLinks } from './components/chatbot/messages/chatbot-links';
+export { ChatbotMessageAgentFooter } from './components/chatbot/messages/chatbot-message-agent-footer';
+export { ChatbotSessionFeedbackLink } from './components/chatbot/feedback/chatbot-session-feedback-link';

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "extends": "@servicetitan/startup/tsconfig/base",
+    "compilerOptions": {
+        "composite": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "jsx": "react-jsx",
+        "moduleResolution": "bundler"
+    },
+    "include": ["src/**/*"],
+    "exclude": [
+        "node_modules"
+    ],
+    "references": [
+        {
+            "path": "../titan-chat-ui-anvil2"
+        },
+        {
+            "path": "../titan-chatbot-ui-cypress"
+        },
+        {
+            "path": "../titan-chat-ui-common"
+        }
+    ]
+}