@servicetitan/titan-chatbot-api 3.0.0

package/src/stores/filter.store.ts

@@ -0,0 +1,250 @@
+import cloneDeep from 'lodash/cloneDeep';
+import { action, makeObservable, observable } from 'mobx';
+import { nanoid } from 'nanoid';
+import { Models, ModelsUtils } from '../api-client';
+
+interface IOption extends Models.IOption {
+    uid?: string;
+    parentKeys?: string[];
+}
+
+export class FilterStore {
+    @observable selectedOptions: Record<string, string[]> = {};
+    @observable filters: IOption[] = [];
+
+    private model?: Models.IFrontendModel;
+    private originalFilters: IOption[] = [];
+
+    constructor() {
+        makeObservable(this);
+    }
+
+    @action
+    initFilters(model: Models.IFrontendModel) {
+        const setUids = (o?: IOption[]) => {
+            o?.forEach(x => {
+                x.uid = nanoid();
+                setUids(x.subOptions as IOption[]);
+            });
+        };
+
+        this.model = model;
+        this.originalFilters = cloneDeep(
+            model!.options.subOptions?.filter(x => x.type === Models.OptionType.Group) ?? []
+        );
+        setUids(this.originalFilters);
+        this.filters = this.originalFilters;
+    }
+
+    @action
+    selectOption = (filterKey: string, optionKey: string) => {
+        const allFilterOptions = this.getExistingFilterOptions(filterKey);
+        const option = allFilterOptions.find(o => o.key === optionKey);
+        if (!option) {
+            throw new Error(`Option "${optionKey}" does not exist in the filter "${filterKey}".`);
+        }
+        if (!this.selectedOptions[filterKey]) {
+            this.selectedOptions[filterKey] = [];
+        }
+        this.selectedOptions[filterKey] = [...this.selectedOptions[filterKey], option.key];
+        this.addSubSequentFilters(filterKey);
+    };
+
+    @action
+    selectAll = (filterKey: string) => {
+        this.selectedOptions[filterKey] = this.getExistingFilterOptions(filterKey).map(o => o.key);
+        this.addSubSequentFilters(filterKey);
+    };
+
+    @action
+    deselectOption = (filterKey: string, optionKey: string) => {
+        this.selectedOptions[filterKey] = this.selectedOptions[filterKey].filter(
+            o => o !== optionKey
+        );
+        this.cleanUpFilterOptions(filterKey, optionKey);
+        this.removeSubSequentFilters(filterKey);
+        this.addSubSequentFilters(filterKey);
+    };
+
+    @action
+    deselectAll = (filterKey: string) => {
+        for (const selectedKey of this.selectedOptions[filterKey]) {
+            this.deselectOption(filterKey, selectedKey);
+        }
+    };
+
+    getFilterLabel = (key: string) => {
+        // transform camel case key to human-readable label
+        return key.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+            return str.toUpperCase();
+        });
+    };
+
+    export(): Models.Selections | undefined {
+        return ModelsUtils.createSelectionsModel(this.originalFilters, this.selectedOptions);
+    }
+
+    @action
+    private removeSubSequentFilters = (filterKey: string) => {
+        const filter = this.getExistingFilterByKey(filterKey);
+        const subFilters = this.getSubFilters(filter);
+        this.filters = this.filters.filter(x => !subFilters.some(f => f.key === x.key));
+    };
+
+    @action
+    private addSubSequentFilters = (filterKey: string) => {
+        const filter = this.getExistingFilterByKey(filterKey);
+        if (!filter.subOptions) {
+            return;
+        }
+
+        // Get selected items for the filter
+        const filterSelectedKeys = this.selectedOptions[filterKey] ?? [];
+        const filterSelectedOptions: IOption[] = filter.subOptions.filter(
+            x => x.type === Models.OptionType.Selectable && filterSelectedKeys.includes(x.key!)
+        );
+
+        // Find all sub-filters for the selected options
+        const allSubFilters: IOption[] =
+            filterSelectedOptions.flatMap<IOption>(selectedOption => {
+                // For each selected option, collect its sub-filters
+                const subFilters: IOption[] = [];
+                for (const subFilter of selectedOption.subOptions ?? []) {
+                    const originalFilter = cloneDeep(
+                        this.getOriginalFilter((subFilter as IOption).uid)
+                    );
+                    originalFilter.parentKeys = [selectedOption.uid!];
+                    subFilters.push(originalFilter);
+                }
+                return subFilters;
+            }) ?? [];
+
+        // Merge sub-filters with the same key and their options (with parent keys merging)
+        const mergedSubFilters = allSubFilters.reduce<IOption[]>((acc, subFilter) => {
+            if (!subFilter.subOptions) {
+                return acc;
+            }
+            const subfilterOptions = (subFilter.subOptions ?? []) as IOption[];
+            const subfilterParentKeys = subFilter.parentKeys;
+
+            // Merge filters with the same key and their options if they already exist
+            subfilterOptions.forEach(subfilterOption => {
+                subfilterOption.parentKeys = this.mergeParentKeys(
+                    subfilterOption.parentKeys,
+                    subfilterParentKeys
+                );
+            });
+
+            // Check if the filter already exists in the accumulator
+            const existingFilter = acc.find(x => x.key === subFilter.key);
+            if (!existingFilter) {
+                return [...acc, subFilter];
+            }
+
+            // Merge options for subfilters by key
+            existingFilter.subOptions = subfilterOptions.reduce(
+                (acc2, subfilterOption) => {
+                    const existing = acc2.find(o => o.key === subfilterOption.key) as
+                        | IOption
+                        | undefined;
+                    if (!existing) {
+                        return [...acc2, subfilterOption];
+                    }
+                    existing.parentKeys = this.mergeParentKeys(
+                        existing.parentKeys,
+                        subfilterOption.parentKeys
+                    );
+
+                    return acc2;
+                },
+                [...(existingFilter.subOptions ?? [])]
+            ) as Models.Option[];
+            return acc;
+        }, []);
+
+        // Update the filters with the merged sub-filters
+        for (const newFilter of mergedSubFilters) {
+            const existingFilterIdx = this.filters.findIndex(f => f.key === newFilter.key);
+            if (existingFilterIdx < 0) {
+                this.filters.push(newFilter);
+            } else {
+                this.filters[existingFilterIdx] = newFilter;
+            }
+            this.addSubSequentFilters(newFilter.key);
+        }
+    };
+
+    private mergeParentKeys = (keys1?: string[], keys2?: string[]): string[] => {
+        if (!keys1 && !keys2) {
+            return [];
+        }
+        if (!keys1) {
+            return keys2 ?? [];
+        }
+        if (!keys2) {
+            return keys1;
+        }
+        const mergedKeys = new Set<string>([...keys1, ...keys2]);
+        return Array.from(mergedKeys);
+    };
+
+    private cleanUpFilterOptions = (filterKey: string, parentKeyToRemove: string) => {
+        const filter = this.getExistingFilterByKey(filterKey);
+        const filterSubOptionToRemove = filter.subOptions?.find(x => x.key === parentKeyToRemove);
+        const filterSubOptionToRemoveUid = (filterSubOptionToRemove as IOption)?.uid;
+        const filterIdx = this.filters.findIndex(f => f.key === filterKey);
+        for (let i = filterIdx + 1; i < this.filters.length; i++) {
+            const subFilter = this.filters[i];
+            subFilter.subOptions?.forEach((o: IOption) => {
+                o.parentKeys = (o.parentKeys ?? []).filter(p => p !== filterSubOptionToRemoveUid);
+                // Uncheck sub-filter options if they no longer have parent keys
+                if (!o.parentKeys?.length) {
+                    this.selectedOptions[subFilter.key] = this.selectedOptions[
+                        subFilter.key
+                    ]?.filter(x => x !== o.key);
+                }
+            });
+            subFilter.subOptions = subFilter.subOptions?.filter((o: IOption) =>
+                Boolean(o.parentKeys?.length)
+            );
+        }
+    };
+
+    private getSubFilters = (filter: IOption): IOption[] => {
+        const result: IOption[] = [];
+        filter.subOptions?.forEach(filterSelectable => {
+            filterSelectable.subOptions?.forEach(subFilter => {
+                result.push(subFilter, ...this.getSubFilters(subFilter));
+            });
+        });
+        return result;
+    };
+
+    private getOriginalFilters = (): IOption[] => {
+        return this.originalFilters.reduce<IOption[]>((acc, next) => {
+            return [...acc, next, ...this.getSubFilters(next)];
+        }, []);
+    };
+
+    private getOriginalFilter = (uid?: string): IOption => {
+        const originalFilters = this.getOriginalFilters();
+        const filter = originalFilters.find(f => f.uid === uid);
+        if (!filter) {
+            throw new Error(`Filter with key "${uid}" does not exist.`);
+        }
+        return filter;
+    };
+
+    private getExistingFilterOptions = (filterKey: string): IOption[] => {
+        const filter = this.getExistingFilterByKey(filterKey);
+        return filter.subOptions?.filter(x => x.type === Models.OptionType.Selectable) ?? [];
+    };
+
+    private getExistingFilterByKey = (filterKey: string): IOption => {
+        const filter = this.filters.find(f => f.key === filterKey);
+        if (!filter) {
+            throw new Error(`Filter with key "${filterKey}" does not exist.`);
+        }
+        return filter;
+    };
+}

package/src/stores/index.ts

@@ -0,0 +1,12 @@
+export {
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    IChatbotUiBackendStore,
+    ChatbotUiBackendStore,
+} from './chatbot-ui-backend.store';
+export {
+    CHATBOT_UI_STORE_TOKEN,
+    IChatbotUiStore,
+    ChatbotUiStore,
+    ChatbotUiEvent,
+} from './chatbot-ui.store';
+export { InitializeStore, InitializeStoreStatus } from './initialize.store';

package/src/stores/initialize.store.ts

@@ -0,0 +1,62 @@
+import { injectable } from '@servicetitan/react-ioc';
+import { action, computed, makeObservable, observable } from 'mobx';
+
+export enum InitializeStoreStatus {
+    None = 'None',
+    Pending = 'Pending',
+    Success = 'Success',
+    Error = 'Error',
+}
+
+@injectable()
+export class InitializeStore {
+    @observable
+    initializeStatus = InitializeStoreStatus.None;
+
+    @observable.ref
+    private initializePromiseInner?: Promise<void>;
+
+    @computed
+    get isInitialized() {
+        return this.initializeStatus === InitializeStoreStatus.Success;
+    }
+
+    constructor() {
+        makeObservable(this);
+    }
+
+    async initialize(force = false): Promise<void> {
+        if (force) {
+            this.resetInitialization();
+        }
+        if (this.initializePromiseInner) {
+            return this.initializePromiseInner;
+        }
+
+        try {
+            this.setInitializeStatus(InitializeStoreStatus.Pending);
+            this.initializePromiseInner = this.initializeInternal();
+            await this.initializePromiseInner;
+            this.setInitializeStatus(InitializeStoreStatus.Success);
+        } catch (e) {
+            this.setInitializeStatus(InitializeStoreStatus.Error);
+            throw e;
+        }
+        return this.initializePromiseInner;
+    }
+
+    protected initializeInternal(): Promise<void> {
+        return Promise.resolve();
+    }
+
+    @action
+    private setInitializeStatus(initializeStatus: InitializeStoreStatus) {
+        this.initializeStatus = initializeStatus;
+    }
+
+    @action
+    private resetInitialization() {
+        this.initializeStatus = InitializeStoreStatus.None;
+        this.initializePromiseInner = undefined;
+    }
+}

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,19 @@
+{
+    "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-common"
+        }
+    ]
+}