@servicetitan/titan-chat-ui 1.0.1

package/src/components/chat/chat-input.tsx

@@ -0,0 +1,143 @@
+import { Button, Form, FormTextArea, Stack } from '@servicetitan/design-system';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { ChatInputStore } from '../../stores/chat-input.store';
+import * as Styles from './chat-input.module.less';
+
+const TIMEOUT_COOLDOWN_MS = 3000;
+
+export const ChatInput: FC<{ className?: string }> = provide({
+    singletons: [ChatInputStore],
+})(
+    observer(({ className }) => {
+        const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+        const [isSending, setIsSending] = useState(false);
+        const textareaRef = useRef<HTMLTextAreaElement>(null);
+        const [chatUiStore, supportChatInputStore] = useDependencies(
+            CHAT_UI_STORE_TOKEN,
+            ChatInputStore
+        );
+
+        const handleSendMessage = useCallback(async () => {
+            const validateResult = await supportChatInputStore.formState.validate();
+            if (validateResult.hasError) {
+                return;
+            }
+            const text = supportChatInputStore.formState.$.message.value;
+            if (!text.trim() && !chatUiStore.file) {
+                return;
+            }
+            supportChatInputStore.formState.$.message.onChange('');
+            setIsSending(true);
+            try {
+                await chatUiStore.sendMessageText(text);
+            } finally {
+                setIsSending(false);
+            }
+            setTimeout(() => {
+                textareaRef.current?.focus();
+            }, 0);
+        }, [chatUiStore, supportChatInputStore]);
+
+        const clearTimer = useCallback(() => {
+            clearTimeout(typingTimeoutRef.current ?? 0);
+            typingTimeoutRef.current = undefined;
+        }, []);
+
+        // Send typing status = false
+        const sendTypingStatusStop = useCallback(() => {
+            const isTyping = Boolean(typingTimeoutRef.current);
+            if (isTyping) {
+                clearTimer();
+                chatUiStore.chasitorTyping(false);
+            }
+        }, [chatUiStore, clearTimer]);
+
+        // Send typing status = true and start the typing countdown. After the countdown, send typing status = false
+        const sendTypingStatusStart = useCallback(() => {
+            if (!typingTimeoutRef.current) {
+                chatUiStore.chasitorTyping(true);
+            }
+            clearTimeout(typingTimeoutRef.current);
+            typingTimeoutRef.current = setTimeout(sendTypingStatusStop, TIMEOUT_COOLDOWN_MS);
+        }, [sendTypingStatusStop, chatUiStore]);
+
+        const setUserIsTyping = useCallback(
+            (typing: boolean) => {
+                if (typing) {
+                    sendTypingStatusStart();
+                } else {
+                    sendTypingStatusStop();
+                }
+            },
+            [sendTypingStatusStart, sendTypingStatusStop]
+        );
+
+        const handleTextKeyPress = useCallback(
+            (e: KeyboardEvent) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    clearTimer();
+                    handleSendMessage().then(() => {});
+                    return;
+                }
+                setUserIsTyping(true);
+            },
+            [setUserIsTyping, handleSendMessage, clearTimer]
+        );
+
+        useEffect(() => {
+            if (textareaRef.current) {
+                textareaRef.current.focus();
+            }
+        }, []);
+
+        return (
+            <Form className={className} onSubmit={handleSendMessage}>
+                <Stack direction="row" spacing="2">
+                    <FormTextArea
+                        ref={textareaRef}
+                        name="question"
+                        placeholder="Type your message"
+                        rows={1}
+                        maxRows={2}
+                        autoHeight
+                        onKeyPress={handleTextKeyPress}
+                        value={supportChatInputStore.formState.$.message.value}
+                        error={supportChatInputStore.formState.$.message.error}
+                        onChange={supportChatInputStore.formState.$.message.onChangeHandler}
+                        onFocus={() => {
+                            setTimeout(() => {
+                                chatUiStore.triggerScroll();
+                            }, 0);
+                        }}
+                        onBlur={() => {
+                            supportChatInputStore.formState.$.message.enableAutoValidationAndValidate();
+                        }}
+                        className={classNames('flex-grow-1', Styles.formTextarea)}
+                        disabled={!chatUiStore.isStarted || isSending}
+                        data-cy="titan-chat-input"
+                    />
+                    <Button
+                        className="align-self-baseline"
+                        iconName="send"
+                        data-pendo="titan-chat-send"
+                        data-cy="titan-chat-send"
+                        type="submit"
+                        primary
+                        aria-label="submit"
+                        disabled={
+                            !chatUiStore.isStarted ||
+                            isSending ||
+                            supportChatInputStore.formState.hasError ||
+                            supportChatInputStore.isEmpty
+                        }
+                    />
+                </Stack>
+            </Form>
+        );
+    })
+);

package/src/components/chat/chat-message-template-agent.tsx

@@ -0,0 +1,26 @@
+import { observer } from 'mobx-react';
+import { FC, PropsWithChildren, useMemo } from 'react';
+import { IChatMessageProps } from '../../models';
+import { getFirstName } from '../../utils/text-utils';
+import { MessageAgent } from '../messages/message-agent';
+import { MessageFooter } from '../messages/message-footer';
+import { useAvatarProps } from '../messages/use-avatar-props';
+
+export const ChatMessageTemplateAgent: FC<PropsWithChildren<IChatMessageProps>> = 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/chat/chat-message-template-user.tsx

@@ -0,0 +1,46 @@
+import { Button, Eyebrow } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC, PropsWithChildren, useCallback } from 'react';
+import { ChatMessageState, IChatMessageProps } from '../../models';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { MessageFooter } from '../messages/message-footer';
+import { MessageUser } from '../messages/message-user';
+
+export const ChatMessageTemplateUser: FC<PropsWithChildren<IChatMessageProps>> = observer(
+    ({ children, message }) => {
+        const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+        const isError = message.state === ChatMessageState.Failed;
+
+        const handleRetry = useCallback(
+            () => chatUiStore.sendMessageRetry(message),
+            [chatUiStore, message]
+        );
+
+        return (
+            <MessageUser
+                isError={isError}
+                messageFooter={
+                    isError ? (
+                        <Eyebrow className="c-red-600" data-cy="titan-chat-message-user-error">
+                            Message not delivered. Retry
+                            <Button
+                                iconName="refresh"
+                                fill="subtle"
+                                size="xsmall"
+                                negative
+                                aria-label="Retry send message"
+                                onClick={handleRetry}
+                                data-cy="titan-chat-message-user-retry"
+                            />
+                        </Eyebrow>
+                    ) : (
+                        <MessageFooter timestamp={message.timestamp} />
+                    )
+                }
+            >
+                {children}
+            </MessageUser>
+        );
+    }
+);

package/src/components/chat/chat-message-typing.tsx

@@ -0,0 +1,19 @@
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC } from 'react';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { MessageTyping } from '../messages/message-typing';
+import { useAvatarProps } from '../messages/use-avatar-props';
+
+export const ChatMessageTyping: FC = observer(() => {
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+    const [
+        {
+            agent: { icon, name },
+        },
+    ] = useDependencies(CHAT_UI_STORE_TOKEN);
+    const avatar = useAvatarProps(name, icon);
+    const Component = chatUiStore.customizations.messageTyping?.component ?? MessageTyping;
+
+    return <Component avatar={avatar} />;
+});

package/src/components/chat/chat-message.tsx

@@ -0,0 +1,78 @@
+import { BodyText } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import {
+    ChatMessageModelBase,
+    ChatMessageModelFile,
+    ChatMessageModelText,
+    ChatMessageModelWelcome,
+} from '../../models/support-chat';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { MessageContentFile } from '../message-content/message-content-file';
+import { MessageContentText } from '../message-content/message-content-text';
+import { ChatMessageTemplateAgent } from './chat-message-template-agent';
+import { ChatMessageTemplateUser } from './chat-message-template-user';
+
+interface IChatMessageProps {
+    message: ChatMessageModelBase;
+}
+
+/**
+ * ChatMessage component provides a default way to render chat messages in the chat UI and contains only most generic
+ * components and templates/customizations rendering
+ */
+export const ChatMessage: FC<IChatMessageProps> = observer(({ message }) => {
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+    const isAgent = message.participant.isAgent;
+    const { messageTemplates, messages } = chatUiStore.customizations;
+    const messageCustomization = messages?.find(c => c.predicate(message));
+    const isSystem = Boolean(messageCustomization?.isSystem);
+
+    let messageContentNode: ReactNode | undefined;
+    if (messageCustomization) {
+        messageContentNode = <messageCustomization.component message={message} />;
+    } else {
+        // Default message content rendering
+        switch (message.type) {
+            case 'message':
+            case 'welcome':
+                messageContentNode = (
+                    <MessageContentText
+                        message={message as ChatMessageModelText | ChatMessageModelWelcome}
+                    />
+                );
+                break;
+            case 'file':
+                messageContentNode = (
+                    <MessageContentFile message={message as ChatMessageModelFile} />
+                );
+                break;
+            default: {
+                messageContentNode = <BodyText>Unknown message type: {message.type}</BodyText>;
+            }
+        }
+    }
+
+    if (!messageContentNode) {
+        return null;
+    }
+
+    if (isSystem) {
+        return messageContentNode;
+    }
+
+    let ComponentTemplate: FC<PropsWithChildren<IChatMessageProps>>;
+    if (isAgent) {
+        const template = messageTemplates?.agent;
+        ComponentTemplate = template?.predicate(message)
+            ? template.component
+            : ChatMessageTemplateAgent;
+    } else {
+        const template = messageTemplates?.user;
+        ComponentTemplate = template?.predicate(message)
+            ? template.component
+            : ChatMessageTemplateUser;
+    }
+    return <ComponentTemplate message={message}>{messageContentNode}</ComponentTemplate>;
+});

package/src/components/chat/chat-messages.tsx

@@ -0,0 +1,23 @@
+import { Stack } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC } from 'react';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { ChatMessage } from './chat-message';
+import { ChatMessageTyping } from './chat-message-typing';
+
+interface IChatMessagesProps {
+    className?: string;
+}
+
+export const ChatMessages: FC<IChatMessagesProps> = observer(({ className }) => {
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+    return (
+        <Stack direction="column" spacing="2" className={className} data-cy="titan-chat-messages">
+            {chatUiStore.messages.map(message => (
+                <ChatMessage key={message.id} message={message} />
+            ))}
+            {chatUiStore.isAgentTyping && <ChatMessageTyping />}
+        </Stack>
+    );
+});

package/src/components/chat/chat-notifications.tsx

@@ -0,0 +1,19 @@
+import { Stack } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC } from 'react';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { ChatError } from './chat-error';
+import { ChatTimer } from './chat-timer';
+
+export interface IChatNotificationsProps {}
+
+export const ChatNotifications: FC<IChatNotificationsProps> = observer(() => {
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+    return (
+        <Stack direction="column" spacing="2" data-cy="titan-chat-notifications">
+            {chatUiStore.timer && !chatUiStore.isError && <ChatTimer />}
+            {chatUiStore.isError && <ChatError />}
+        </Stack>
+    );
+});

package/src/components/chat/chat-timer.module.less

@@ -0,0 +1,5 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.banner {
+    border: 0 !important;
+}

package/src/components/chat/chat-timer.module.less.d.ts

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

package/src/components/chat/chat-timer.tsx

@@ -0,0 +1,35 @@
+import { Banner, BodyText, Link } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC, useCallback } from 'react';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import * as Styles from './chat-timer.module.less';
+
+export const ChatTimer: FC = observer(() => {
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+    const secondsLeft = chatUiStore.timer?.secondsLeft ?? 0;
+
+    const restartTimers = useCallback(() => chatUiStore.restartTimers(), [chatUiStore]);
+
+    if (!chatUiStore.timer) {
+        return null;
+    }
+    return (
+        <Banner
+            status="info"
+            title="Chat inactive"
+            icon
+            className={Styles.banner}
+            data-cy="titan-chat-timer"
+        >
+            <BodyText el="p">
+                {'Are you still there? Please respond within '}
+                <b>{secondsLeft}s</b>
+                {' or this chat will time out.'}
+            </BodyText>
+            <Link onClick={restartTimers} subdued data-cy="titan-chat-timer-restart">
+                I'm here
+            </Link>
+        </Banner>
+    );
+});

package/src/components/chat/chat.tsx

@@ -0,0 +1,55 @@
+import { Stack } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC, Fragment, useEffect, useRef } from 'react';
+import { ChatCustomizations } from '../../models';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import { ChatConnecting } from './chat-connecting';
+import { ChatInput } from './chat-input';
+import { ChatInputFile } from './chat-input-file';
+import { ChatMessages } from './chat-messages';
+import { ChatNotifications } from './chat-notifications';
+
+export interface IChatProps {
+    className?: string;
+    customizations?: ChatCustomizations;
+}
+
+export const Chat: FC<IChatProps> = observer(({ className, customizations }) => {
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+
+    const footerComponent = customizations?.footerComponent;
+
+    useEffect(() => {
+        chatUiStore.setCustomizationContext(customizations);
+    }, [chatUiStore, customizations]);
+
+    useEffect(() => {
+        setTimeout(() => {
+            if (scrollRef.current) {
+                scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+            }
+        }, 0);
+    }, [chatUiStore.scrollCounter]);
+
+    return (
+        <Stack direction="column" className={className} data-cy="titan-chat">
+            {chatUiStore.isStarting ? (
+                <ChatConnecting className="p-3" />
+            ) : (
+                <Fragment>
+                    <div ref={scrollRef} className="flex-grow-1 of-y-auto">
+                        <ChatMessages className="p-3" />
+                    </div>
+                    <ChatNotifications />
+                    <div>
+                        <ChatInputFile className="m-3 m-b-0 p-3 border-radius-1 border border-style-dashed" />
+                        <ChatInput className="p-x-3 p-y-2" />
+                        {Boolean(footerComponent) && footerComponent}
+                    </div>
+                </Fragment>
+            )}
+        </Stack>
+    );
+});

package/src/components/common/multiline-text.module.less

@@ -0,0 +1,9 @@
+@import '@servicetitan/tokens/core/tokens.less';
+
+p.multiline-text:first-child {
+    margin-top: @spacing-0;
+}
+
+p.multiline-text:last-child {
+    margin-bottom: @spacing-0;
+}

package/src/components/common/multiline-text.module.less.d.ts

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

package/src/components/common/multiline-text.tsx

@@ -0,0 +1,30 @@
+import { BodyText } from '@servicetitan/design-system';
+import { BodyTextProps } from '@servicetitan/design-system/dist/components/BodyText/BodyText';
+import classNames from 'classnames';
+import { FC, Fragment, useMemo } from 'react';
+import * as Styles from './multiline-text.module.less';
+
+interface MultilineTextProps extends BodyTextProps {
+    text: string;
+}
+
+export const MultilineText: FC<MultilineTextProps> = ({ className, text, ...rest }) => {
+    const textParts = useMemo(() => text.split('\n'), [text]);
+    return (
+        <Fragment>
+            {textParts.map((part, index) => {
+                return (
+                    <BodyText
+                        el="p"
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
+                        {...rest}
+                        className={classNames(Styles.multilineText, className)}
+                    >
+                        {part.trim() ? part : <span>&nbsp;</span>}
+                    </BodyText>
+                );
+            })}
+        </Fragment>
+    );
+};

package/src/components/message-content/message-content-file.tsx

@@ -0,0 +1,27 @@
+import { BodyText, Icon, Stack } from '@servicetitan/design-system';
+import { observer } from 'mobx-react';
+import { FC, Fragment } from 'react';
+import { ChatMessageModelFile, ChatMessageState } from '../../models';
+
+interface IMessageContentFileProps {
+    message: ChatMessageModelFile;
+}
+
+export const MessageContentFile: FC<IMessageContentFileProps> = observer(({ message }) => {
+    const isDelivering = message.state === ChatMessageState.Delivering;
+    const isDelivered = message.state === ChatMessageState.Delivered;
+
+    return (
+        <Fragment>
+            <Stack direction="row" spacing="1" alignItems="center">
+                <Icon name="attach_file" />
+                <span>{message.fileName}</span>
+            </Stack>
+            {(isDelivering || isDelivered) && (
+                <BodyText el="div" size="small" className="ta-right" subdued>
+                    {isDelivered ? 'File uploaded' : 'Please wait while uploading...'}
+                </BodyText>
+            )}
+        </Fragment>
+    );
+});

package/src/components/message-content/message-content-text.tsx

@@ -0,0 +1,12 @@
+import { observer } from 'mobx-react';
+import { FC } from 'react';
+import { ChatMessageModelText, ChatMessageModelWelcome } from '../../models/support-chat';
+import { MultilineText } from '../common/multiline-text';
+
+interface IMessageContentTextProps {
+    message: ChatMessageModelText | ChatMessageModelWelcome;
+}
+
+export const MessageContentText: FC<IMessageContentTextProps> = observer(({ message }) => {
+    return <MultilineText text={message.message} />;
+});