@inploi/plugin-chatbot 1.0.0

package/src/chatbot.state.ts

@@ -0,0 +1,180 @@
+import { del, get, set } from 'idb-keyval';
+import { produce } from 'immer';
+import { create } from 'zustand';
+import { StateStorage, createJSONStorage, persist } from 'zustand/middleware';
+
+import { JobApplication } from './chatbot.api';
+import { DistributivePick, getHeadOrThrow } from './chatbot.utils';
+import { ChatInput } from './ui/chat-input/chat-input';
+import { ChatbotInput } from './ui/chat-input/chat-input';
+
+const storage: StateStorage = {
+	getItem: async (name: string): Promise<string | null> => {
+		return (await get(name)) || null;
+	},
+	setItem: async (name: string, value: string): Promise<void> => {
+		await set(name, value);
+	},
+	removeItem: async (name: string): Promise<void> => {
+		await del(name);
+	},
+};
+
+export type ViewState = 'maximised' | 'minimised';
+
+type ChatbotStore = {
+	currentApplication: (JobApplication & { startedAt: string }) | null;
+	viewState: ViewState;
+	startApplication: (application: JobApplication) => void;
+	cancelCurrentApplication: () => void;
+	setViewState: (newViewState: ViewState) => void;
+};
+
+export const useChatbotStore = create<ChatbotStore>((set, get) => ({
+	currentApplication: null,
+	viewState: 'maximised',
+	startApplication: application => {
+		// if the application is already running, just maximise it
+		if (get().currentApplication?.job.id === application.job.id) return set({ viewState: 'maximised' });
+		return set({ currentApplication: { ...application, startedAt: new Date().toISOString() }, viewState: 'maximised' });
+	},
+	cancelCurrentApplication: () => set({ currentApplication: null }),
+	setViewState: viewState => set({ viewState }),
+}));
+
+/** Returns the current application or throws if no application has been set. */
+export const useCurrentJobApplication = () => {
+	const application = useChatbotStore(s => s.currentApplication);
+	if (!application) throw new Error('No current application found');
+	return application;
+};
+
+export type MessageAuthor = 'bot' | 'user';
+
+type SystemMessage = { type: 'system'; text: string; variant: 'info' | 'warning' | 'error' | 'success' };
+type TextMessage = { author: MessageAuthor; type: 'text'; text: string };
+type ImageMessage = { author: MessageAuthor; type: 'image'; url: string; width: number; height: number };
+type FileMessage = { author: MessageAuthor; type: 'file'; fileName: string; fileSizeKb: number };
+export type ChatMessage = TextMessage | ImageMessage | SystemMessage | FileMessage;
+
+export type ApplicationSubmission = DistributivePick<ChatbotInput, 'type' | 'value'>;
+
+export type KeyToSubmissionMap = {
+	[key: string]: ApplicationSubmission;
+};
+
+/** Local state saved for an application */
+export type ApplicationLocalState = {
+	/** History of messages left in the chat */
+	messages: ChatMessage[];
+	submissions: KeyToSubmissionMap;
+	currentNodeId: string;
+	/** Needs to be separate because a node can have many inputs */
+	currentInput?: ChatInput;
+	isFinished: boolean;
+};
+
+type ApplicationsStore = {
+	applicationsLocalState: Record<string, ApplicationLocalState>;
+	getApplicationLocalState: (application: JobApplication) => ApplicationLocalState | undefined;
+	updateApplicationLocalState: (params: { application: JobApplication; data: Partial<ApplicationLocalState> }) => void;
+	updateApplicationCurrentNode: (params: { application: JobApplication; currentNodeId: string }) => void;
+	resetApplicationState: (application: JobApplication) => void;
+	updateSubmission: (params: { application: JobApplication; fieldKey: string; data: ApplicationSubmission }) => void;
+	addMessage: (params: { application: JobApplication; data: ChatMessage }) => void;
+	resetLocalState: () => void;
+	setInput: (params: { application: JobApplication; data: ChatInput | null }) => void;
+	resetInput: (params: { application: JobApplication }) => void;
+};
+
+const getOrCreateApplication = (params: { application: JobApplication }, state: ApplicationsStore) => {
+	const existingApplication = state.applicationsLocalState[getCacheKey(params.application)];
+	if (existingApplication) return existingApplication;
+	const newApplication: ApplicationLocalState = {
+		messages: [],
+		submissions: {},
+		currentNodeId: getHeadOrThrow(params.application.flow.nodes).id,
+		isFinished: false,
+	};
+	state.applicationsLocalState[getCacheKey(params.application)] = newApplication;
+	return newApplication;
+};
+
+export const getCacheKey = (application: JobApplication) =>
+	[application.job.id, application.flow.id, application.flow.version].join('/');
+
+export const useLocalState = create<ApplicationsStore>()(
+	persist(
+		(set, get) => ({
+			applicationsLocalState: {},
+			getApplicationLocalState: application => get().applicationsLocalState[getCacheKey(application)],
+			updateApplicationLocalState: params =>
+				set(
+					produce((state: ApplicationsStore) => {
+						const existingApplication = state.applicationsLocalState[getCacheKey(params.application)];
+						if (!existingApplication) throw new Error('Application not found');
+						Object.assign(existingApplication, params.data);
+					}),
+				),
+			updateApplicationCurrentNode: params =>
+				set(
+					produce((state: ApplicationsStore) => {
+						const application = getOrCreateApplication(params, state);
+						application.currentNodeId = params.currentNodeId;
+					}),
+				),
+			resetApplicationState: application =>
+				set(
+					produce((state: ApplicationsStore) => {
+						const cacheKey = getCacheKey(application);
+						delete state.applicationsLocalState[cacheKey];
+					}),
+				),
+			updateSubmission: params =>
+				set(
+					produce((state: ApplicationsStore) => {
+						const application = getOrCreateApplication(params, state);
+						application.submissions[params.fieldKey] = params.data;
+					}),
+				),
+			addMessage: params =>
+				set(
+					produce((state: ApplicationsStore) => {
+						const application = getOrCreateApplication(params, state);
+						application.messages.push(params.data);
+						state.applicationsLocalState[getCacheKey(params.application)] = application;
+					}),
+				),
+			resetLocalState: () => set({ applicationsLocalState: {} }),
+			resetInput: params =>
+				set(
+					produce((state: ApplicationsStore) => {
+						const application = getOrCreateApplication(params, state);
+						application.currentInput = undefined;
+					}),
+				),
+			setInput: params =>
+				set(
+					produce((state: ApplicationsStore) => {
+						const application = getOrCreateApplication(params, state);
+						application.currentInput = params.data ?? undefined;
+					}),
+				),
+		}),
+		{
+			name: 'inploi-chatbot-application',
+			storage: createJSONStorage(() => storage),
+			// only store the jobApplications part of the state
+			partialize: state => ({ applicationsLocalState: state.applicationsLocalState }),
+		},
+	),
+);
+
+export const useApplicationLocalState = (application: JobApplication) =>
+	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]);
+
+export const useApplicationInput = (application: JobApplication) =>
+	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]?.currentInput);
+
+export const useApplicationSubmission = (application: JobApplication, key: string) =>
+	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]?.submissions[key]);

package/src/chatbot.ts

@@ -0,0 +1,77 @@
+import { ApiClient, Logger, createPlugin } from '@inploi/sdk';
+import { h, render } from 'preact';
+
+import { getApplicationData } from './chatbot.api';
+import './chatbot.css';
+import { ChatbotDomManager, createChatbotDomManager } from './chatbot.dom';
+import { useChatbotStore, useLocalState } from './chatbot.state';
+
+type CreateChatbotActionsParams = {
+	apiClient: ApiClient;
+	dom: ChatbotDomManager;
+	logger?: Logger;
+};
+const createChatbotActions = ({ apiClient, dom, logger }: CreateChatbotActionsParams) => {
+	const { resetLocalState } = useLocalState.getState();
+	const { startApplication, cancelCurrentApplication } = useChatbotStore.getState();
+
+	return {
+		/** Optionally eagerly loads the code to handle applications. */
+		prepare: async () => {
+			try {
+				await import('~/ui/chatbot');
+				logger?.info('Chatbot plugin prepared');
+			} catch (error) {
+				console.error(error);
+				logger?.error('Error preparing chatbot plugin', error);
+			}
+		},
+		startApplication: async ({ jobId }: { jobId: string }) => {
+			try {
+				const chatbotElement = dom.getOrCreateChatbotElement();
+				cancelCurrentApplication();
+
+				dom.renderLoading(chatbotElement);
+
+				/** We concurrently lazy load the module and data */
+				const [dataPromise, chatbotPromise] = await Promise.allSettled([
+					getApplicationData({ jobId, apiClient }),
+					import('~/ui/chatbot').then(m => m.Chatbot),
+				]);
+
+				if (dataPromise.status === 'rejected') throw dataPromise.reason;
+				if (chatbotPromise.status === 'rejected') throw chatbotPromise.reason;
+
+				const Chatbot = chatbotPromise.value;
+				const application = dataPromise.value;
+				startApplication(application);
+				logger?.info(`Starting application for job "${application.job.id}" using flow "${application.flow.id}"`);
+				chatbotElement.innerHTML = '';
+
+				render(h(Chatbot, { apiClient, logger }), chatbotElement);
+			} catch (error) {
+				console.error(error);
+				logger?.error('Error starting application', error);
+			}
+		},
+		closeApplication: async () => {
+			const chatbotElement = dom.getOrCreateChatbotElement();
+			chatbotElement.innerHTML = '';
+			cancelCurrentApplication();
+		},
+		/** Resets the user saved data for every application. */
+		resetLocalState: async () => {
+			resetLocalState();
+			cancelCurrentApplication();
+		},
+	};
+};
+
+export const chatbotPlugin = createPlugin('chatbot', {
+	pure_createActions: ({ apiClient, logger }) =>
+		createChatbotActions({
+			apiClient,
+			dom: createChatbotDomManager(),
+			logger,
+		}),
+});

package/src/chatbot.utils.ts

@@ -0,0 +1,38 @@
+import { FlowNode } from '@inploi/core/flows';
+
+import { ApplicationSubmission, KeyToSubmissionMap } from './chatbot.state';
+
+export type DistributivePick<T, K extends keyof T> = T extends unknown ? Pick<T, K> : never;
+
+export const getHeadOrThrow = (nodes: FlowNode[]) => {
+	const head = nodes.find(n => n.isHead);
+	if (!head) throw new Error('No head node found');
+	return head;
+};
+
+export const submissionsToPayload = (submissions: KeyToSubmissionMap) => {
+	return Object.entries(submissions).reduce(
+		(acc, [key, submission]) => {
+			acc[key] = submission.value;
+			return acc;
+		},
+		{} as Record<string, ApplicationSubmission['value']>,
+	);
+};
+
+export const isSubmissionOfType =
+	<T extends ApplicationSubmission['type']>(type: T) =>
+	(submission?: ApplicationSubmission): submission is Extract<ApplicationSubmission, { type: T }> => {
+		if (!submission) return false;
+		return submission.type === type;
+	};
+
+export function gzip(string: string) {
+	if (!('CompressionStream' in window)) return string;
+	const byteArray = new TextEncoder().encode(string);
+	const cs = new CompressionStream('gzip');
+	const writer = cs.writable.getWriter();
+	writer.write(byteArray);
+	writer.close();
+	return new Response(cs.readable).text();
+}

package/src/index.cdn.ts

@@ -0,0 +1,12 @@
+import { chatbotPlugin } from './chatbot';
+
+declare global {
+	interface Window {
+		inploi?: {
+			chatbotPlugin?: typeof chatbotPlugin;
+		};
+	}
+}
+
+if (!window.inploi) throw new Error('Please insert the SDK script tag above the plugins.');
+window.inploi.chatbotPlugin = chatbotPlugin;

package/src/index.dev.ts

@@ -0,0 +1,32 @@
+/** This file is only used for dev mode. The build output is index.ts */
+import { createApiClient, inploiBrandedLogger } from '@inploi/sdk';
+
+import { chatbotPlugin } from './chatbot';
+
+export { chatbotPlugin } from './chatbot';
+
+declare global {
+	interface Window {
+		chatbot: ReturnType<typeof chatbotPlugin.pure_createActions>;
+	}
+}
+
+async function enableMocking() {
+	if (import.meta.env.VITE_MOCKS === 'false') return;
+	const { worker } = await import('./mocks/browser');
+
+	// `worker.start()` returns a Promise that resolves
+	// once the Service Worker is up and ready to intercept requests.
+	return worker.start({ onUnhandledRequest: 'bypass' });
+}
+
+enableMocking().then(() => {
+	window.chatbot = chatbotPlugin.pure_createActions({
+		apiClient: createApiClient({
+			baseUrl: import.meta.env.VITE_BASE_URL,
+			publishableKey: import.meta.env.VITE_PUBLISHABLE_KEY,
+		}),
+		logger: inploiBrandedLogger,
+	});
+	window.chatbot.prepare();
+});

package/src/index.ts

@@ -0,0 +1 @@
+export { chatbotPlugin } from './chatbot';

package/src/interpreter/interpreter.test.ts

@@ -0,0 +1,69 @@
+import { FlowNode } from '@inploi/core/flows';
+import { expect, mock, test } from 'bun:test';
+
+import { ChatService, createFlowInterpreter } from './interpreter';
+
+const chatServiceStub: ChatService = {
+	input: () => new Promise(resolve => resolve({ type: 'text', value: 'lol' } as any)),
+	send: async () => void 0,
+};
+
+test('throws if no head', async () => {
+	const interpreter = createFlowInterpreter({
+		chatService: chatServiceStub,
+		flow: [],
+		getSubmissions: () => ({}),
+		onFlowEnd: () => void 0,
+	});
+
+	try {
+		await interpreter.interpret();
+		expect().toThrow();
+	} catch (error) {
+		expect(error).toBeInstanceOf(Error);
+		if (error instanceof Error) {
+			expect(error.message).toEqual('No head node found');
+		}
+	}
+});
+
+test('calls onFinish with nodeType when there are no more nodes to interpret', async () => {
+	const onFinish = mock(() => void 0);
+	const flowNode: FlowNode = { id: '1', type: 'text', isHead: true, data: { text: 'Node one' } };
+	const interpreter = createFlowInterpreter({
+		chatService: chatServiceStub,
+		flow: [flowNode],
+		getSubmissions: () => ({}),
+		onFlowEnd: onFinish,
+	});
+
+	await interpreter.interpret();
+
+	expect(onFinish).toHaveBeenCalled();
+	expect(onFinish.mock.calls[0]).toEqual([flowNode]);
+});
+
+test("moves on to next node when 'next' is called", async () => {
+	const messageFn = mock((str: string) => {
+		str;
+	});
+
+	const interpreter = createFlowInterpreter({
+		chatService: {
+			input: () => new Promise(resolve => resolve({ type: 'text', value: 'lol' } as any)),
+			send: async ({ message }) => (message.type === 'text' ? messageFn(message.text) : void 0),
+		},
+		flow: [
+			{ id: '1', type: 'text', isHead: true, nextId: '2', data: { text: 'Node one' } },
+			{ id: '2', type: 'text', data: { text: 'Node two' } },
+		],
+		getSubmissions: () => ({}),
+		onFlowEnd: () => void 0,
+	});
+
+	await interpreter.interpret();
+
+	expect(messageFn.mock.calls).toHaveLength(2);
+	expect(messageFn.mock.calls[0]).toEqual(['Node one']);
+	expect(messageFn.mock.calls[1]).toEqual(['Node two']);
+});

package/src/interpreter/interpreter.ts

@@ -0,0 +1,241 @@
+import { FlowNode, FlowNodeType, IfBlockNode } from '@inploi/core/flows';
+import { P, match } from 'ts-pattern';
+import { getHeadOrThrow } from '~/chatbot.utils';
+import { ChatInput } from '~/ui/chat-input/chat-input';
+
+import { ApplicationSubmission, ChatMessage, KeyToSubmissionMap } from '../chatbot.state';
+
+export type ChatServiceSendParams = { signal?: AbortSignal; message: ChatMessage };
+export type ChatService = {
+	send: (params: ChatServiceSendParams) => Promise<void>;
+	input: <TType extends ChatInput['type']>(
+		params: Extract<ChatInput, { type: TType }>,
+	) => Promise<Extract<ApplicationSubmission, { type: TType }>>;
+};
+
+type ChatbotInterpreterParams = {
+	flow: FlowNode[];
+	getSubmissions: () => KeyToSubmissionMap | undefined;
+	chatService: ChatService;
+	/** When interpreter starts */
+	beforeStart?: (firstNode: FlowNode) => Promise<void>;
+	/** When flow has no more nodes to interpret */
+	onFlowEnd?: (lastNode: FlowNode) => void;
+	/** When node is interpreted */
+	onInterpret?: (node: FlowNode) => void;
+};
+export const createFlowInterpreter = ({
+	flow,
+	getSubmissions,
+	chatService,
+	beforeStart,
+	onFlowEnd,
+	onInterpret,
+}: ChatbotInterpreterParams) => {
+	const controller = new AbortController();
+	const interpretNode = async (node: FlowNode) => {
+		const submissions = getSubmissions();
+		onInterpret?.(node);
+		await interpret({
+			node,
+			submissions,
+			chat: {
+				sendMessage: async message => chatService.send({ message, signal: controller.signal }),
+				userInput: async input => chatService.input(input),
+			},
+			next: () => {
+				const nextNodeId = getNextNodeId(node, getSubmissions());
+				const nextNode = flow.find(node => node.id === nextNodeId);
+				if (nextNode) {
+					return interpretNode(nextNode);
+				} else onFlowEnd?.(node);
+			},
+		});
+	};
+
+	return {
+		interpret: async (startFromNodeId?: string) => {
+			const startNode = flow.find(node => node.id === startFromNodeId) ?? getHeadOrThrow(flow);
+			await beforeStart?.(startNode);
+			return interpretNode(startNode);
+		},
+		abort: () => {
+			controller.abort();
+		},
+	};
+};
+
+type InterpretNodeParams<TNodeType extends FlowNodeType> = {
+	node: Extract<FlowNode, { type: TNodeType }>;
+	submissions?: KeyToSubmissionMap;
+	chat: {
+		sendMessage: (message: ChatMessage) => Promise<void>;
+		userInput: <TType extends ChatInput['type']>(
+			params: Extract<ChatInput, { type: TType }>,
+		) => Promise<Extract<ApplicationSubmission, { type: TType }>>;
+	};
+	next: () => void;
+};
+
+async function interpret(params: InterpretNodeParams<FlowNodeType>) {
+	return await match(params)
+		.with({ node: { type: 'text' } }, interpretTextNode)
+		.with({ node: { type: 'image' } }, interpretImageNode)
+		.with({ node: { type: 'question-text' } }, interpretQuestionTextNode)
+		.with({ node: { type: 'question-enum' } }, interpretQuestionEnumNode)
+		.with({ node: { type: 'question-number' } }, interpretQuestionNumberNode)
+		.with({ node: { type: 'question-boolean' } }, interpretQuestionBooleanNode)
+		.with({ node: { type: 'question-file' } }, interpretQuestionFileNode)
+		.with({ node: { type: 'question-address' } }, interpretQuestionAddressNode)
+		.with({ node: { type: 'abandon-flow' } }, interpretAbandonFlowNode)
+		.with({ node: { type: 'complete-flow' } }, interpretCompleteFlowNode)
+		.with({ node: { type: P.union('jump', 'if-block') } }, ({ next }) => next())
+		.exhaustive();
+}
+
+async function interpretTextNode({ chat, next, node }: InterpretNodeParams<'text'>) {
+	await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.text });
+	next();
+}
+
+async function interpretImageNode({ chat, next, node }: InterpretNodeParams<'image'>) {
+	await chat.sendMessage({
+		author: 'bot',
+		type: 'image',
+		url: node.data.url,
+		height: node.data.height,
+		width: node.data.width,
+	});
+	next();
+}
+
+async function interpretQuestionTextNode({ chat, next, node }: InterpretNodeParams<'question-text'>) {
+	await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.question });
+	const reply = await chat.userInput({
+		key: node.data.key,
+		type: 'text',
+		config: { placeholder: node.data.placeholder, format: node.data.format },
+	});
+	await chat.sendMessage({ author: 'user', type: 'text', text: reply.value });
+	next();
+}
+
+async function interpretQuestionNumberNode({ chat, next, node }: InterpretNodeParams<'question-number'>) {
+	await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.question });
+	const reply = await chat.userInput({
+		key: node.data.key,
+		type: 'text',
+		config: { placeholder: node.data.placeholder, format: 'text' },
+	});
+	await chat.sendMessage({ author: 'user', type: 'text', text: reply.value });
+	next();
+}
+
+async function interpretQuestionEnumNode({ chat, next, node }: InterpretNodeParams<'question-enum'>) {
+	await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.question });
+	const reply = await chat.userInput({
+		key: node.data.key,
+		type: 'multiple-choice',
+		config: node.data,
+	});
+	await chat.sendMessage({ author: 'user', type: 'text', text: reply.value.join(', ') });
+	next();
+}
+
+async function interpretQuestionBooleanNode({ chat, next, node }: InterpretNodeParams<'question-boolean'>) {
+	await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.question });
+	const input = await chat.userInput({
+		key: node.data.key,
+		type: 'boolean',
+		config: {
+			labels: {
+				true: node.data.trueLabel,
+				false: node.data.falseLabel,
+			},
+		},
+	});
+	const reply = input.value;
+	const labelMap = {
+		true: node.data.trueLabel,
+		false: node.data.falseLabel,
+	};
+	await chat.sendMessage({ author: 'user', type: 'text', text: labelMap[reply] });
+	next();
+}
+
+async function interpretQuestionAddressNode({ chat, next }: InterpretNodeParams<'question-address'>) {
+	await chat.sendMessage({ author: 'bot', type: 'text', text: 'Address questions are not implemented yet' });
+	next();
+}
+
+async function interpretQuestionFileNode({ node, chat, next }: InterpretNodeParams<'question-file'>) {
+	await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.question });
+	const files = await chat.userInput({
+		key: node.data.key,
+		type: 'file',
+		config: {
+			extensions: node.data.extensions,
+			fileSizeLimitKib: node.data.maxSizeKb,
+			allowMultiple: node.data.multiple === true,
+		},
+	});
+	for await (const file of files.value) {
+		await chat.sendMessage({ author: 'user', type: 'file', fileName: file.name, fileSizeKb: file.sizeKb });
+	}
+	next();
+}
+
+async function interpretAbandonFlowNode({ chat, next, node }: InterpretNodeParams<'abandon-flow'>) {
+	if (node.data.text) {
+		await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.text });
+	}
+	next();
+}
+
+async function interpretCompleteFlowNode({ chat, next, node }: InterpretNodeParams<'complete-flow'>) {
+	if (node.data.text) {
+		await chat.sendMessage({ author: 'bot', type: 'text', text: node.data.text });
+	}
+	next();
+}
+
+const stringOrStringArray = P.union(P.string, P.array(P.string));
+
+const isIfBlockConditionMet = (ifBlock: IfBlockNode, submissions?: KeyToSubmissionMap) => {
+	const answer = submissions?.[ifBlock.data.compareKey];
+	if (!answer) return false;
+
+	return (
+		match({ ...ifBlock.data, answer })
+			.with({ compare: 'equals' }, ({ compareValue }) => {
+				if (typeof answer.value === 'string' || typeof answer.value === 'boolean')
+					return compareValue === answer.value.toString();
+				return false;
+			})
+			.with({ compare: 'notEquals' }, ({ compareValue }) => {
+				if (typeof answer.value === 'string' || typeof answer.value === 'boolean')
+					return compareValue !== answer.value.toString();
+				return false;
+			})
+			.with({ compare: 'contains', answer: { value: stringOrStringArray } }, ({ compareValue, answer }) =>
+				answer.value.includes(compareValue),
+			)
+			.with(
+				{ compare: 'notContains', answer: { value: stringOrStringArray } },
+				({ compareValue, answer }) => !answer.value.includes(compareValue),
+			)
+			// There cannot be conditions for files yet
+			.with({ answer: { type: 'file' } }, () => false)
+			.exhaustive()
+	);
+};
+
+export function getNextNodeId(fromNode: FlowNode, submissions?: KeyToSubmissionMap) {
+	return match(fromNode)
+		.with({ type: 'jump' }, jumpNode => jumpNode.data.targetId)
+		.with({ type: 'if-block' }, ifBlockNode => {
+			if (isIfBlockConditionMet(ifBlockNode, submissions)) return ifBlockNode.branchId;
+			return ifBlockNode.nextId;
+		})
+		.otherwise(node => node.nextId);
+}

package/src/mocks/browser.ts

@@ -0,0 +1,5 @@
+import { setupWorker } from 'msw/browser';
+
+import { handlers } from './handlers';
+
+export const worker = setupWorker(...handlers);