@servicetitan/titan-chatbot-ui 3.0.0

package/src/stores/__tests__/message-feedback.store.test.ts

@@ -0,0 +1,121 @@
+import { expect } from '@jest/globals';
+import { Container } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN, IChatbotUiStore, Models } from '@servicetitan/titan-chatbot-api';
+import { initTestContainer } from '../../utils/test-utils';
+import { MessageFeedbackStore } from '../message-feedback.store';
+
+const initContainer = initTestContainer(MessageFeedbackStore, container => {
+    class ChatbotUiStoreMock {
+        customizations = {
+            feedback: {
+                isCommentAlwaysRequired: false,
+            },
+        };
+        setCustomizationContext(context: any) {
+            this.customizations = context;
+        }
+    }
+    container
+        .bind<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN)
+        .toConstantValue(new ChatbotUiStoreMock() as IChatbotUiStore);
+});
+
+describe('[MessageFeedbackStore]', () => {
+    let container: Container;
+    let store: MessageFeedbackStore;
+
+    beforeEach(() => {
+        container = initContainer();
+        store = container.get(MessageFeedbackStore);
+    });
+
+    test('should have proper form state', async () => {
+        expect(store.isValid).toBe(false);
+        expect(store.formState.$.notFull.value).toBe(false);
+        expect(store.formState.$.unclear.value).toBe(false);
+        expect(store.formState.$.unrelated.value).toBe(false);
+        expect(store.formState.$.incorrect.value).toBe(false);
+        expect(store.formState.$.other.value).toBe(false);
+        expect(store.formState.$.otherComment.value).toBe('');
+        expect(store.export()).toEqual({
+            description: undefined,
+            linkUrl: undefined,
+            options: [],
+            rating: Models.FeedbackRatings.ThumbsDown,
+        });
+
+        await store.formState.validate();
+        expect(store.formState.error).toBe('At least one item has to be selected.');
+    });
+
+    test('should export form state', async () => {
+        store.formState.$.unclear.onChange(true);
+        store.formState.$.notFull.onChange(true);
+        store.formState.$.unrelated.onChange(true);
+        store.formState.$.incorrect.onChange(true);
+        store.formState.$.other.onChange(true);
+        store.formState.$.otherComment.onChange('Some comment');
+        await store.formState.validate();
+
+        expect(store.export()).toEqual({
+            description: 'Some comment',
+            linkUrl: undefined,
+            options: expect.arrayContaining([
+                Models.FeedbackOptions.Unclear,
+                Models.FeedbackOptions.Incomplete,
+                Models.FeedbackOptions.Unrelated,
+                Models.FeedbackOptions.Incorrect,
+                Models.FeedbackOptions.Other,
+            ]),
+            rating: Models.FeedbackRatings.ThumbsDown,
+        });
+    });
+
+    test('should validate comment for non-internal users', async () => {
+        // Other is selected and comment is empty, validation should fail
+        store.formState.$.other.onChange(true);
+        store.formState.$.otherComment.onChange('');
+        await store.formState.validate();
+        expect(store.formState.$.otherComment.error).toBe('Enter details.');
+
+        // If "Other" is not selected, comment should not be required
+        store.formState.$.other.onChange(false);
+        store.formState.$.otherComment.onChange('');
+        await store.formState.validate();
+        expect(store.formState.$.otherComment.error).toBeFalsy();
+
+        // If "Other" is selected and comment is provided, validation should pass
+        store.formState.$.other.onChange(true);
+        store.formState.$.otherComment.onChange('Some comment');
+        await store.formState.validate();
+        expect(store.formState.$.otherComment.error).toBeFalsy();
+    });
+
+    test('should validate comment for internal users', async () => {
+        const chatbotUiStore = container.get<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        chatbotUiStore.setCustomizationContext({
+            feedback: {
+                isCommentAlwaysRequired: true,
+            },
+        });
+        expect(store.isCommentAlwaysRequired).toBe(true);
+
+        // If "Other" is not selected, comment should be required
+        store.formState.$.other.onChange(false);
+        store.formState.$.otherComment.onChange('');
+        await store.formState.validate();
+        expect(store.formState.$.otherComment.error).toBe('Enter details.');
+
+        // If "Other" is selected, comment should be required
+        store.formState.$.other.onChange(true);
+        store.formState.$.otherComment.onChange('');
+        await store.formState.validate();
+        expect(store.formState.$.otherComment.error).toBe('Enter details.');
+
+        // If "Other" is selected and comment is provided, validation should pass
+        store.formState.$.other.onChange(true);
+        store.formState.$.otherComment.onChange('Some comment');
+        await store.formState.validate();
+        expect(store.formState.$.otherComment.error).toBeFalsy();
+    });
+});

package/src/stores/__tests__/session-feedback.store.test.ts

@@ -0,0 +1,47 @@
+import { expect } from '@jest/globals';
+import { Container } from '@servicetitan/react-ioc';
+import { initTestContainer } from '../../utils/test-utils';
+import { SessionFeedbackStore } from '../session-feedback.store';
+
+const initContainer = initTestContainer(SessionFeedbackStore, () => {});
+
+describe('[SessionFeedbackStore]', () => {
+    let container: Container;
+    let store: SessionFeedbackStore;
+
+    beforeEach(() => {
+        container = initContainer();
+        store = container.get(SessionFeedbackStore);
+    });
+
+    test('should have proper form state', () => {
+        expect(store.isValid).toBe(false);
+        expect(store.formState.$.thumbs.value).toBe(0);
+        expect(store.formState.$.comment.value).toBe('');
+        expect(store.feedback).toEqual({
+            rating: 0,
+            description: undefined,
+        });
+    });
+
+    test('should export feedback', async () => {
+        store.formState.$.thumbs.onChange(1);
+        store.formState.$.comment.onChange('Great service!');
+        await store.formState.validate();
+
+        expect(store.feedback).toEqual({
+            rating: 1,
+            description: 'Great service!',
+        });
+    });
+
+    test('should validate thumbs up and down', () => {
+        store.formState.$.thumbs.onChange(1);
+        expect(store.isThumbsUp).toBe(true);
+        expect(store.isThumbsDown).toBe(false);
+
+        store.formState.$.thumbs.onChange(-1);
+        expect(store.isThumbsUp).toBe(false);
+        expect(store.isThumbsDown).toBe(true);
+    });
+});

package/src/stores/message-feedback-base.store.ts

@@ -0,0 +1,8 @@
+import { Models } from '@servicetitan/titan-chatbot-api';
+import { FormState } from 'formstate';
+
+export interface IMessageFeedbackBaseStore<T extends FormState<{}> = FormState<{}>> {
+    isValid: boolean;
+    formState: T;
+    export(): Models.IFeedback;
+}

package/src/stores/message-feedback-guardrail.store.ts

@@ -0,0 +1,60 @@
+import { InputFieldState, TextAreaFieldState, formStateToJS } from '@servicetitan/form';
+import { injectable } from '@servicetitan/react-ioc';
+import { Models } from '@servicetitan/titan-chatbot-api';
+import { FormState } from 'formstate';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { IMessageFeedbackBaseStore } from './message-feedback-base.store';
+
+export type FeedbackFormState = FormState<{
+    linkUrl: InputFieldState<string>;
+    comment: TextAreaFieldState<string>;
+}>;
+
+@injectable()
+export class MessageFeedbackGuardrailStore implements IMessageFeedbackBaseStore<FeedbackFormState> {
+    @observable formState!: FeedbackFormState;
+
+    @computed get isValid() {
+        return Boolean(this.formState.$.linkUrl.value) || Boolean(this.formState.$.comment.value);
+    }
+
+    constructor() {
+        this.createFormState();
+        makeObservable(this);
+    }
+
+    export(): Models.Feedback {
+        const state = formStateToJS(this.formState);
+        let feedback: Models.IFeedback = {
+            rating: Models.FeedbackRatings.GuardrailFeedback,
+        };
+        if (state.linkUrl) {
+            feedback = {
+                ...feedback,
+                linkUrl: state.linkUrl,
+            };
+        }
+        if (state.comment) {
+            feedback = {
+                ...feedback,
+                description: state.comment,
+            };
+        }
+        return new Models.Feedback(feedback);
+    }
+
+    @action
+    private createFormState = () => {
+        const formState = new FormState({
+            linkUrl: new InputFieldState(''),
+            comment: new TextAreaFieldState(''),
+        });
+        formState.validators($ => {
+            const nothingSelected = !$.linkUrl.value && !$.comment.value;
+            const result = nothingSelected ? 'At least one input must be provided.' : false;
+            return result;
+        });
+        formState.disableAutoValidation();
+        this.formState = formState;
+    };
+}

package/src/stores/message-feedback.store.ts

@@ -0,0 +1,113 @@
+import {
+    CheckboxFieldState,
+    FormValidators,
+    TextAreaFieldState,
+    formStateToJS,
+} from '@servicetitan/form';
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { CHATBOT_UI_STORE_TOKEN, IChatbotUiStore, Models } from '@servicetitan/titan-chatbot-api';
+import { FormState } from 'formstate';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { IMessageFeedbackBaseStore } from './message-feedback-base.store';
+
+export type MessageFeedbackFormState = FormState<{
+    unrelated: CheckboxFieldState;
+    unclear: CheckboxFieldState;
+    notFull: CheckboxFieldState;
+    incorrect: CheckboxFieldState;
+    other: CheckboxFieldState;
+    otherComment: TextAreaFieldState<string>;
+}>;
+
+@injectable()
+export class MessageFeedbackStore implements IMessageFeedbackBaseStore<MessageFeedbackFormState> {
+    @observable formState!: MessageFeedbackFormState;
+
+    @computed get isCommentAlwaysRequired() {
+        return this.chatbotUiStore.customizations.feedback?.isCommentAlwaysRequired ?? false;
+    }
+
+    @computed get isTextAreaVisible() {
+        return this.isCommentAlwaysRequired || this.formState.$.other.value;
+    }
+
+    @computed get isValid() {
+        return (
+            this.formState.$.unrelated.value ||
+            this.formState.$.unclear.value ||
+            this.formState.$.notFull.value ||
+            this.formState.$.incorrect.value ||
+            this.formState.$.other.value
+        );
+    }
+
+    constructor(@inject(CHATBOT_UI_STORE_TOKEN) private readonly chatbotUiStore: IChatbotUiStore) {
+        this.formState = this.createFormState();
+        makeObservable(this);
+    }
+
+    export(): Models.IFeedback {
+        const state = formStateToJS(this.formState);
+        const options: Models.FeedbackOptions[] = [];
+        if (state.unrelated) {
+            options.push(Models.FeedbackOptions.Unrelated);
+        }
+        if (state.unclear) {
+            options.push(Models.FeedbackOptions.Unclear);
+        }
+        if (state.notFull) {
+            options.push(Models.FeedbackOptions.Incomplete);
+        }
+        if (state.incorrect) {
+            options.push(Models.FeedbackOptions.Incorrect);
+        }
+        if (state.other) {
+            options.push(Models.FeedbackOptions.Other);
+        }
+        let feedback: Models.IFeedback = {
+            rating: Models.FeedbackRatings.ThumbsDown,
+            options,
+        };
+        if (state.otherComment) {
+            feedback = {
+                ...feedback,
+                description: state.otherComment,
+            };
+        }
+        return new Models.Feedback(feedback);
+    }
+
+    @action
+    private createFormState = (): MessageFeedbackFormState => {
+        const formState = new FormState({
+            unrelated: new CheckboxFieldState(false),
+            unclear: new CheckboxFieldState(false),
+            notFull: new CheckboxFieldState(false),
+            incorrect: new CheckboxFieldState(false),
+            other: new CheckboxFieldState(false),
+            otherComment: new TextAreaFieldState('')
+                .validators($ => {
+                    if (this.isCommentAlwaysRequired) {
+                        // Internal users can't submit empty feedback
+                        return FormValidators.requiredWithCustomMessage('Enter details.')($);
+                    }
+                    // External users can submit empty feedback if "Other" is not selected
+                    if (!this.formState.$.other.value) {
+                        return false;
+                    }
+                    return FormValidators.requiredWithCustomMessage('Enter details.')($);
+                })
+                .disableAutoValidation(),
+        }).validators($ => {
+            const nothingSelected =
+                !$.unrelated.value &&
+                !$.unclear.value &&
+                !$.notFull.value &&
+                !$.incorrect.value &&
+                !$.other.value;
+            return nothingSelected ? 'At least one item has to be selected.' : false;
+        });
+        formState.disableAutoValidation();
+        return formState;
+    };
+}

package/src/stores/session-feedback.store.ts

@@ -0,0 +1,44 @@
+import { InputFieldState, TextAreaFieldState } from '@servicetitan/form';
+import { injectable } from '@servicetitan/react-ioc';
+import { Models } from '@servicetitan/titan-chatbot-api';
+import { FormState } from 'formstate';
+import { computed, makeObservable, observable } from 'mobx';
+
+@injectable()
+export class SessionFeedbackStore {
+    @observable
+    formState = new FormState({
+        thumbs: new InputFieldState<number>(0),
+        comment: new TextAreaFieldState<string>(''),
+    });
+
+    @computed
+    get isValid() {
+        return this.formState.$.thumbs.value !== 0;
+    }
+
+    @computed
+    get feedback(): Models.Feedback {
+        return new Models.Feedback({
+            rating:
+                this.formState.$.thumbs.value > 0
+                    ? Models.FeedbackRatings.ThumbsUp
+                    : Models.FeedbackRatings.ThumbsDown,
+            description: this.formState.$.comment.value || undefined,
+        });
+    }
+
+    @computed
+    get isThumbsUp() {
+        return this.formState.$.thumbs.value > 0;
+    }
+
+    @computed
+    get isThumbsDown() {
+        return this.formState.$.thumbs.value < 0;
+    }
+
+    constructor() {
+        makeObservable(this);
+    }
+}

package/src/utils/__tests__/axios-utils.test.ts

@@ -0,0 +1,40 @@
+import { expect } from '@jest/globals';
+import { withTimeout } from '../axios-utils';
+
+describe('axios-utils', () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        jest.setSystemTime(new Date('2000-01-01T00:00:00.000Z'));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+        jest.useRealTimers();
+    });
+
+    test('should withTimeout (timeout first)', async () => {
+        const abortController = new AbortController();
+        const spyAbort = jest.spyOn(abortController, 'abort');
+        const action = new Promise(resolve => setTimeout(() => resolve('done'), 100));
+        const timeoutMs = 50;
+
+        const p = expect(withTimeout(action, timeoutMs, abortController)).rejects.toThrow(
+            'The request is timed out'
+        );
+        await jest.advanceTimersByTimeAsync(50);
+        await p;
+        expect(spyAbort).toHaveBeenCalledWith('The request is timed out');
+    });
+
+    test('should withTimeout (resolves first)', async () => {
+        const abortController = new AbortController();
+        const spyAbort = jest.spyOn(abortController, 'abort');
+        const action = new Promise(resolve => setTimeout(() => resolve('done'), 100));
+        const timeoutMs = 150;
+
+        const p = expect(withTimeout(action, timeoutMs, abortController)).resolves.toEqual('done');
+        await jest.advanceTimersByTimeAsync(100);
+        await p;
+        expect(spyAbort).not.toHaveBeenCalled();
+    });
+});

package/src/utils/axios-utils.ts

@@ -0,0 +1,25 @@
+/**
+ * Aborts the action if it takes longer than the specified timeout.
+ */
+export async function withTimeout<T>(
+    action: Promise<T>,
+    timeoutMs: number,
+    abortController: AbortController
+): Promise<T> {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined = undefined;
+    const timeoutPromise = new Promise<T>((_, reject) => {
+        timeoutId = setTimeout(() => {
+            abortController.abort('The request is timed out');
+            reject(new Error('The request is timed out'));
+        }, timeoutMs);
+    });
+    const promise = Promise.race([action, timeoutPromise]);
+    try {
+        return await promise;
+    } finally {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = undefined;
+        }
+    }
+}

package/src/utils/test-utils.ts

@@ -0,0 +1,22 @@
+import { Container } from '@servicetitan/react-ioc';
+
+type Newable<T> = new (...args: never[]) => T;
+
+export const initTestContainer = (
+    serviceIdentifier: Newable<unknown> | Newable<unknown>[],
+    initDependenciesFn: (container: Container) => void
+) => {
+    const rootContainer = new Container();
+    if (Array.isArray(serviceIdentifier)) {
+        serviceIdentifier.forEach(identifier => rootContainer.bind(identifier).toSelf());
+    } else {
+        rootContainer.bind(serviceIdentifier).toSelf();
+    }
+
+    return () => {
+        const container = new Container();
+        container.parent = rootContainer;
+        initDependenciesFn(container);
+        return container;
+    };
+};

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"
+        },
+        {
+            "path": "../titan-chatbot-ui-cypress"
+        },
+        {
+            "path": "../titan-chat-ui-common"
+        }
+    ]
+}