@servicetitan/titan-chatbot-ui 3.0.0

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

@@ -0,0 +1,110 @@
+import { Container, Provider } from '@servicetitan/react-ioc';
+import { ChatMessageModelText, mockChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
+import {
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotUiStore,
+    Models,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
+import { mount } from 'cypress/react';
+import { FC } from 'react';
+import { ChatbotMessageAnswer } from '../chatbot-message-answer';
+
+const initContainer = () => {
+    const container = new Container();
+    container.bind(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
+    return container;
+};
+
+describe('<ChatbotMessageAnswer />', () => {
+    let container: Container;
+    let uiStore: ChatbotUiStore;
+
+    beforeEach(() => {
+        container = initContainer();
+        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        cy.viewport(780, 800);
+    });
+
+    const renderComponent = (message: ChatMessageModelText) => {
+        const Wrapper: FC = () => (
+            <Provider
+                singletons={[
+                    {
+                        provide: CHATBOT_UI_STORE_TOKEN,
+                        useValue: uiStore,
+                    },
+                ]}
+            >
+                <ChatbotMessageAnswer message={message} />
+            </Provider>
+        );
+        mount(<Wrapper />);
+    };
+
+    it('should render MultilineText and ChatbotLinks when chatbotMessageData exists', () => {
+        cy.clock();
+        cy.spy(uiStore, 'triggerScroll').as('triggerScroll');
+        const botMessage: Models.IBotMessage = ModelsMocks.mockBotMessage({
+            scoredUrls: ModelsMocks.mockScoredUrls(),
+        });
+        const message = mockChatMessageModelText(true, {
+            message: 'Test message',
+            data: botMessage,
+        });
+        uiStore.setMessages([message]);
+
+        renderComponent(message);
+
+        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Test message');
+        ChatUiSelectors.chatbotLinksLink.should('not.be.visible');
+
+        // Expand links
+        ChatUiSelectors.chatbotLinksMore
+            .should('be.visible')
+            .should('have.text', 'Learn more')
+            .click();
+
+        cy.tick(100);
+        cy.get('@triggerScroll').should('be.called');
+        ChatUiSelectors.chatbotLinksLink.should('be.visible').should('have.length', 2);
+
+        // Collapse links
+        ChatUiSelectors.chatbotLinksMore
+            .should('be.visible')
+            .should('have.text', 'Learn less')
+            .click();
+
+        cy.tick(100);
+        cy.get('@triggerScroll').should('be.called');
+        ChatUiSelectors.chatbotLinksLink.should('not.be.visible');
+    });
+
+    it('should not render ChatbotLinks when no links exist', () => {
+        const botMessage: Models.IBotMessage = ModelsMocks.mockBotMessage({
+            scoredUrls: [],
+        });
+        const message = mockChatMessageModelText(true, {
+            message: 'Test message',
+            data: botMessage,
+        });
+        renderComponent(message);
+
+        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Test message');
+        ChatUiSelectors.chatbotLinksMore.should('not.exist');
+        ChatUiSelectors.chatbotLinksLink.should('not.exist');
+    });
+
+    it('should not render ChatbotLinks when chatbotMessageData is undefined', () => {
+        const message = mockChatMessageModelText(true, {
+            message: 'Test message',
+            data: undefined,
+        });
+        renderComponent(message);
+
+        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Test message');
+        ChatUiSelectors.chatbotLinksMore.should('not.exist');
+        ChatUiSelectors.chatbotLinksLink.should('not.exist');
+    });
+});

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

@@ -0,0 +1,71 @@
+import { IMessageAvatarProps } from '@servicetitan/titan-chat-ui';
+import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
+import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
+import { mount } from 'cypress/react';
+import { ChatbotMessageTyping } from '../chatbot-message-typing';
+
+describe('ChatbotMessageTyping', () => {
+    function render(icon: ChatParticipantIcon) {
+        const avatar: IMessageAvatarProps = {
+            name: 'Test User Name',
+            icon,
+        };
+        mount(<ChatbotMessageTyping avatar={avatar} />);
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+    }
+
+    it('should render message with bot icon', () => {
+        render(ChatParticipantIcon.Bot);
+        ChatUiSelectors.chatAvatarBot
+            .should('be.visible')
+            .invoke('css', 'background-image')
+            .then(bgColor => {
+                const isSvg = Boolean(
+                    (bgColor as any as string).indexOf('data:image/svg+xml;base64') >= 0
+                );
+                expect(isSvg).to.eq(true);
+            });
+    });
+
+    it('should render message with empty icon', () => {
+        render(ChatParticipantIcon.Empty);
+        ChatUiSelectors.chatAvatarBot.should('not.exist');
+        ChatUiSelectors.chatAvatarInitials.should('not.exist');
+    });
+
+    it('should render message with initials', () => {
+        render(ChatParticipantIcon.Initials);
+        ChatUiSelectors.chatAvatarInitials.should('be.visible').should('contain.text', 'TU');
+    });
+
+    it('should show different messages during the time', () => {
+        cy.clock();
+        render(ChatParticipantIcon.Bot);
+        // Verify the rendered component + check the dots animation doesn't change over the time
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+        cy.tick(11000);
+        ChatUiSelectors.chatMessageContentAgent
+            .should('be.visible')
+            .should('contain.text', 'Looking for the final details');
+
+        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
+        cy.tick(10000);
+        ChatUiSelectors.chatMessageContentAgent
+            .should('be.visible')
+            .should(
+                'contain.text',
+                'This is taking longer than usual, please give me a little bit more time'
+            );
+
+        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
+        cy.tick(60000);
+        ChatUiSelectors.chatMessageContentAgent
+            .should('be.visible')
+            .should(
+                'contain.text',
+                'This is taking longer than usual, please give me a little bit more time'
+            );
+        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
+    });
+});

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

@@ -0,0 +1,22 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+ul.message-link-list {
+    margin-top: @spacing-1;
+    margin-bottom: @spacing-0;
+    padding-inline-start: @spacing-3;
+    margin-block-start: @spacing-half;
+    line-height: 1.5em;
+}
+
+ul.message-link-list > li {
+    padding-left: @spacing-half;
+    padding-top: @spacing-half;
+}
+
+.message-link {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

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

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

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

@@ -0,0 +1,76 @@
+import { BodyText, Collapsible, Icon, Link, Stack } from '@servicetitan/design-system';
+import { Models } from '@servicetitan/titan-chatbot-api';
+import { FC, Fragment, 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 (
+        <Fragment>
+            <Link
+                className="m-t-2"
+                onClick={handleToggleCollapsible}
+                data-cy="titan-chatbot-links-more"
+                data-pendo="titan-chatbot-links-more"
+            >
+                <Stack direction="row" alignItems="center">
+                    <BodyText el="div">{linksCollapsed ? seeMoreLabel : seeLessLabel}</BodyText>
+                    <Icon
+                        className="m-l-half"
+                        name={linksCollapsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}
+                    />
+                </Stack>
+            </Link>
+            <Collapsible animate open={!linksCollapsed} data-cy="titan-chatbot-links-collapsible">
+                <ul className={Styles.messageLinkList}>
+                    {links.map(u => (
+                        <li key={u.url}>
+                            <BodyText el="span">
+                                <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>
+                            </BodyText>
+                        </li>
+                    ))}
+                </ul>
+            </Collapsible>
+        </Fragment>
+    );
+};

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

@@ -0,0 +1,35 @@
+import { Eyebrow, Stack } from '@servicetitan/design-system';
+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 (
+            <Stack className="w-100" spacing="2" justifyContent="space-between" alignItems="center">
+                <Eyebrow>
+                    {message.participant.isAgent && `${firstName} • `}
+                    {formatChatMessageDate(message.timestamp)}
+                </Eyebrow>
+                {isBotMessage && <ChatbotMessageFeedback botMessage={botMessage} />}
+            </Stack>
+        );
+    }
+);

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

@@ -0,0 +1,39 @@
+import { MultilineText } from '@servicetitan/titan-chat-ui';
+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-y-half-i'),
+            }),
+            []
+        );
+
+        const chatbotMessageData = useMemo(
+            () => message?.data as Models.IBotMessageWithFeedback,
+            [message]
+        );
+
+        return (
+            <Fragment>
+                <MultilineText text={message.message} className="m-y-half-i" />
+                {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';
+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-y-half-i'),
+            }),
+            []
+        );
+
+        return (
+            <Fragment>
+                <MultilineText
+                    text={message.message}
+                    className="m-y-half-i"
+                    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';
+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,39 @@
+import { BodyText } from '@servicetitan/design-system';
+import { IMessageTypingProps, MessageAgent, MessageTyping } from '@servicetitan/titan-chat-ui';
+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}>
+            <BodyText>
+                {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>
+            </BodyText>
+        </MessageAgent>
+    );
+};

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

@@ -0,0 +1,16 @@
+import { BodyText } from '@servicetitan/design-system';
+import { FC } from 'react';
+
+export const ChatbotMessageWelcome: FC = () => (
+    <BodyText>
+        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?
+    </BodyText>
+);

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

@@ -0,0 +1,25 @@
+import { MessageAgent, MessageFooter, useAvatarProps } from '@servicetitan/titan-chat-ui';
+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';
+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';
+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';
+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/src/stores/__tests__/message-feedback-guardrail.store.test.ts

@@ -0,0 +1,61 @@
+import { expect } from '@jest/globals';
+import { Models } from '@servicetitan/titan-chatbot-api';
+import { initTestContainer } from '../../utils/test-utils';
+import { MessageFeedbackGuardrailStore } from '../message-feedback-guardrail.store';
+
+const initContainer = initTestContainer(MessageFeedbackGuardrailStore, () => {});
+
+describe('[MessageFeedbackGuardrailStore]', () => {
+    let store: MessageFeedbackGuardrailStore;
+
+    beforeEach(() => {
+        const container = initContainer();
+        store = container.get(MessageFeedbackGuardrailStore);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('should have correct default values', () => {
+        expect(store.isValid).toBe(false);
+        expect(store.formState.$.linkUrl.value).toBe('');
+        expect(store.formState.$.comment.value).toBe('');
+    });
+
+    test('should export feedback with linkUrl and comment', async () => {
+        store.formState.$.linkUrl.onChange('https://example.com');
+        store.formState.$.comment.onChange('This is a comment');
+
+        await store.formState.validate();
+        const feedback = store.export();
+
+        expect(feedback.rating).toBe(Models.FeedbackRatings.GuardrailFeedback);
+        expect(feedback.linkUrl).toBe('https://example.com');
+        expect(feedback.description).toBe('This is a comment');
+    });
+
+    test('should validate form state', async () => {
+        store.formState.$.linkUrl.onChange('');
+        store.formState.$.comment.onChange('');
+
+        await store.formState.validate();
+        expect(store.isValid).toBe(false);
+        expect(store.formState.error).toBe('At least one input must be provided.');
+
+        store.formState.$.linkUrl.onChange('https://example.com');
+        store.formState.$.comment.onChange('');
+        await store.formState.validate();
+        expect(store.isValid).toBe(true);
+
+        store.formState.$.linkUrl.onChange('');
+        store.formState.$.comment.onChange('This is a comment');
+        await store.formState.validate();
+        expect(store.isValid).toBe(true);
+
+        store.formState.$.linkUrl.onChange('https://example.com');
+        store.formState.$.comment.onChange('This is a comment');
+        await store.formState.validate();
+        expect(store.isValid).toBe(true);
+    });
+});