@inploi/plugin-chatbot 2.0.0 → 2.1.0

package/src/mocks/handlers.ts

@@ -1,10 +1,15 @@
 import { invariant } from '@inploi/core/common';
-import { http } from 'msw';
+import { HttpResponse, http } from 'msw';
+import { match } from 'ts-pattern';
 
-import { exampleFlows } from './example.flows';
+import { automatedTestFlow, exampleFlows } from './example.flows';
 
-export const handlers = [
-	http.get(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, ctx => {
+// sandbox URL
+const BASE_URL = 'https://preview.api.inploi.com';
+
+export const flowHandler = {
+	/** Returns a valid flow. */
+	success: http.get(`${BASE_URL}/flow/job/:jobId`, ctx => {
 		invariant(typeof ctx.params.jobId === 'string', 'Missing job id');
 		const mockApplication = {
 			job: {
@@ -16,13 +21,37 @@ export const handlers = [
 			},
 			flow: {
 				id: 1,
-				nodes: ctx.params.jobId === '1' ? exampleFlows.fromAlex : exampleFlows.byClaude,
+				nodes: match(ctx.params.jobId)
+					.with('1', () => exampleFlows.fromAlex)
+					.with('test', () => automatedTestFlow)
+					.otherwise(() => exampleFlows.helloWorld),
 				version: 1,
 			},
 		};
-		return new Response(JSON.stringify(mockApplication));
+		return new HttpResponse(JSON.stringify(mockApplication));
+	}),
+
+	/** Returns an invalid payload with a 200 code.
+	 *  E.g.: if the backend returns something incompatible with the frontend.
+	 */
+	invalid_payload: http.get(`${BASE_URL}/flow/job/:jobId`, () => {
+		return new HttpResponse(JSON.stringify({ foo: 'bar' }), { status: 200 });
+	}),
+
+	/** Returns a laravel-structured error */
+	exception: http.get(`${BASE_URL}/flow/job/:jobId`, () => {
+		return new HttpResponse(JSON.stringify({ exception: 'server_error', message: 'Something bad happened' }), {
+			status: 400,
+		});
+	}),
+};
+
+export const browserHandlers = [
+	flowHandler.success,
+	http.post(`${BASE_URL}/flow/job/:jobId`, () => {
+		return new HttpResponse(JSON.stringify({ message: 'Success' }));
 	}),
-	http.post(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, () => {
-		return new Response(JSON.stringify({ message: 'Success' }));
+	http.post(`${BASE_URL}/analytics/log`, () => {
+		return new HttpResponse(JSON.stringify({ message: 'Success' }));
 	}),
 ];

package/src/style/palette.test.ts

@@ -0,0 +1,20 @@
+import { expect, test } from 'bun:test';
+
+import { PaletteShade, generatePalette } from './palette';
+
+test('returns palette when given valid shade and hue', () => {
+	const palette = generatePalette(50);
+
+	for (const shade in palette) {
+		expect(palette[shade as PaletteShade]).toMatch(/\d+\.*\d* \d+\.*\d*% \d+\.*\d*%/);
+	}
+});
+
+test('returns different palettes with different hues', () => {
+	const palette1 = generatePalette(25);
+	const palette2 = generatePalette(26);
+
+	for (const shade in palette1) {
+		expect(palette1[shade as PaletteShade]).not.toEqual(palette2[shade as PaletteShade]);
+	}
+});

package/src/style/palette.ts

@@ -0,0 +1,69 @@
+import { Mode, converter, differenceEuclidean, formatCss, toGamut } from 'culori';
+import { DiffFn } from 'culori/src/difference';
+
+declare module 'culori' {
+	export function toGamut(from: Mode, to: Mode, distance: DiffFn, tolerance: number): (color: string) => string;
+}
+
+const hsl = converter('hsl');
+const oklch = converter('oklch');
+
+export type PaletteShade = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+const colorLevels: Record<PaletteShade, true> = {
+	'1': true,
+	'2': true,
+	'3': true,
+	'4': true,
+	'5': true,
+	'6': true,
+	'7': true,
+	'8': true,
+	'9': true,
+	'10': true,
+	'11': true,
+	'12': true,
+};
+
+const COLOR_LEVELS = Object.keys(colorLevels) as PaletteShade[];
+const CHROMA_MULTIPLIER = 1.5;
+
+const colorPresets: Record<PaletteShade, { l: number; c: number }> = {
+	'1': { l: 97.78, c: 0.0108 },
+	'2': { l: 93.56, c: 0.0321 },
+	'3': { l: 88.11, c: 0.0609 },
+	'4': { l: 82.67, c: 0.0908 },
+	'5': { l: 74.22, c: 0.1398 },
+	'6': { l: 64.78, c: 0.1472 },
+	'7': { l: 57.33, c: 0.1299 },
+	'8': { l: 46.89, c: 0.1067 },
+	'9': { l: 39.44, c: 0.0898 },
+	'10': { l: 32, c: 0.0726 },
+	'11': { l: 23.78, c: 0.054 },
+	'12': { l: 15.56, c: 0.0353 },
+};
+
+const getPaletteColor = (hueAngle: number) => (i: PaletteShade) => {
+	const { c, l } = colorPresets[i];
+	const color = 'oklch(' + l + '% ' + c * CHROMA_MULTIPLIER + ' ' + hueAngle + ')';
+	const oklchColor = oklch(toGamut('p3', 'oklch', differenceEuclidean('oklch'), 0)(color));
+
+	return formatCss(hsl(oklchColor)) as unknown as string;
+};
+
+export const generatePalette = (hueAngle: number) =>
+	Object.fromEntries(COLOR_LEVELS.map(level => [level, getPaletteColor(hueAngle)(level)] as const)) as Record<
+		PaletteShade,
+		string
+	>;
+
+// gets the hue saturation and lightness from a `hsl()` string. Includes % signs.
+const extractHsl = (color: string) => {
+	return color.replace('hsl(', '').replace(')', '');
+};
+
+export const formatCssVariables = (palette: Record<PaletteShade, string>) => {
+	const cssVariables = Object.entries(palette)
+		.map(([level, color]) => `--i-a-${level}: ${extractHsl(color)};`)
+		.join('\n');
+	return `#isdk {\n${cssVariables}\n}`;
+};

package/src/ui/chat-bubble.tsx

@@ -9,8 +9,7 @@ const chatBubbleVariants = cva(
 		variants: {
 			side: {
 				left: 'bg-lowest text-neutral-12 shadow-surface-md outline outline-1 outline-accent-11/[.08] rounded-bl-md',
-				right:
-					'ml-auto bg-gradient-to-t from-[#2D51D2] to-[#4A7BEC] border border-[#405FCC] shadow-[inset_0_5px_3px_-3px_#6F99F1,inset_0_-5px_5px_-2px_#6F99F1DD,0_4px_6px_-1px_rgb(0_0_0_/_0.1),_0_2px_4px_-2px_rgb(0_0_0_/_0.1)] text-lowest rounded-br-md bubble-right',
+				right: 'ml-auto bg-accent-7 text-lowest rounded-br-md bubble-right',
 			},
 			transitionState: {
 				entering: 'opacity-0 translate-y-8',

package/src/ui/chat-input/chat-input.file.tsx

@@ -83,7 +83,7 @@ const FilenameBadge = ({ class: className, ...props }: ComponentProps<'li'>) =>
 1;
 
 export const ChatInputFile = ({ input, onSubmitSuccess }: ChatInputProps<'file'>) => {
-	const submission = application.current$.value?.data.submissions[input.key];
+	const submission = application.current$.value.application?.data.submissions[input.key];
 	const [files, setFiles] = useState<FileToUpload[]>(isFileSubmission(submission) ? submission.value : []);
 	const [error, setError] = useState<FieldError>();
 	const hiddenFileCount = files.length - FILENAMES_TO_SHOW_QTY;

package/src/ui/chat-input/chat-input.multiple-choice.tsx

@@ -48,7 +48,7 @@ const getResolver = (config: MultipleChoicePayload['config']) => {
 };
 
 export const ChatInputMultipleChoice = ({ input, onSubmitSuccess }: ChatInputProps<'multiple-choice'>) => {
-	const submission = application.current$.value?.data.submissions[input.key];
+	const submission = application.current$.value.application?.data.submissions[input.key];
 	const {
 		register,
 		handleSubmit,

package/src/ui/chat-input/chat-input.text.tsx

@@ -57,7 +57,7 @@ const getResolver = (config: TextPayload['config']) =>
 	valibotResolver(object({ text: inputFormatToSchema[config.format] }));
 
 export const ChatInputText = ({ input, onSubmitSuccess }: ChatInputProps<'text'>) => {
-	const submission = application.current$.value?.data.submissions[input.key];
+	const submission = application.current$.value.application?.data.submissions[input.key];
 	const {
 		register,
 		handleSubmit,
@@ -100,7 +100,7 @@ export const ChatInputText = ({ input, onSubmitSuccess }: ChatInputProps<'text'>
 						}
 						setRef(e);
 					}}
-					class="flex-grow outline outline-2 outline-neutral-6 px-3 py-1 rounded-full text-base placeholder:text-neutral-10 focus-visible:outline-accent-9 caret-accent-9"
+					class="flex-grow outline outline-2 outline-neutral-6 px-3 py-1 rounded-full text-base placeholder:text-neutral-8 focus-visible:outline-accent-9 caret-accent-9"
 					placeholder={input.config.placeholder}
 				/>
 				<SendButton />

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

@@ -24,10 +24,10 @@ export type ChatInput = DistributivePick<ChatbotInput, 'type' | 'config' | 'key'
 
 type ChatInputFactoryProps = {
 	onSubmit: SubmitSuccessFn;
+	input: ChatInputType | undefined;
 	onInputChange: (input?: ChatInputType['type']) => void;
 };
-export const ChatInput = ({ onSubmit, onInputChange }: ChatInputFactoryProps) => {
-	const input = application.current$.value?.data.currentInput;
+export const ChatInput = ({ onSubmit, onInputChange, input }: ChatInputFactoryProps) => {
 	const inputWrapperRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {

package/src/ui/chatbot-header.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import { ComponentProps } from 'preact';
+import { ComponentChildren, ComponentProps } from 'preact';
 
-import { StartedJobApplication, application, cancelCurrentApplication, viewState } from '../chatbot.state';
+import { application, viewState } from '../chatbot.state';
 
 const HeaderIconButton = ({ class: className, children, ...props }: ComponentProps<'button'>) => {
 	return (
@@ -29,16 +29,13 @@ const HeaderIconButton = ({ class: className, children, ...props }: ComponentPro
 	);
 };
 
-export const ChatbotHeader = ({ currentApplication }: { currentApplication?: StartedJobApplication }) => {
+export const ChatbotHeader = ({ children }: { children?: ComponentChildren }) => {
 	const view = viewState.value;
-	const headerText = currentApplication
-		? `Applying for “${currentApplication.job.title}” at ${currentApplication.company.name}`
-		: 'Applying';
 
 	return (
 		<header class="z-20 flex gap-2 h-[var(--header-height)] rounded-t-2xl left-0 outline outline-1 outline-neutral-5 right-0 mx-auto items-center absolute top-0 bg-neutral-1/90 backdrop-blur-md backdrop-saturate-150">
 			<p id="chatbot-header" class="sr-only">
-				{headerText}
+				{children}
 			</p>
 			<button
 				tabIndex={-1}
@@ -53,7 +50,7 @@ export const ChatbotHeader = ({ currentApplication }: { currentApplication?: Sta
 				class="flex-grow h-full overflow-hidden py-1 px-4"
 			>
 				<p aria-hidden class="font-bold text-sm tracking-tight text-neutral-12 truncate">
-					{headerText}
+					{children}
 				</p>
 			</button>
 
@@ -67,7 +64,7 @@ export const ChatbotHeader = ({ currentApplication }: { currentApplication?: Sta
 						>
 							<path d="M12.5 9.5L8 5L3.5 9.5" />
 						</HeaderIconButton>
-						<HeaderIconButton key="close" aria-label="Close application" onClick={cancelCurrentApplication}>
+						<HeaderIconButton key="close" aria-label="Close application" onClick={application.cancel}>
 							<path d="M12.5 6.5L8 11L3.5 6.5" />
 						</HeaderIconButton>
 					</>

package/src/ui/chatbot.tsx

@@ -1,8 +1,9 @@
 import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
-import { FocusScope } from '@radix-ui/react-focus-scope';
+import * as Dialog from '@radix-ui/react-dialog';
 import { LazyMotion, domAnimation } from 'framer-motion';
 import { AnimatePresence, Variants, m } from 'framer-motion';
 import { Suspense, lazy, useRef } from 'preact/compat';
+import { P, match } from 'ts-pattern';
 import { HEADER_HEIGHT } from '~/chatbot.constants';
 
 import { application, viewState } from '../chatbot.state';
@@ -28,78 +29,66 @@ type ChatbotProps = {
 	analytics: AnalyticsService;
 };
 export const Chatbot = ({ logger, apiClient, analytics }: ChatbotProps) => {
-	const currentApplication = application.current$.value;
-	const isApplying = currentApplication !== null;
+	const { state, application: currentApplication } = application.current$.value;
 	const view = viewState.value;
-
+	const isApplying = state === 'loaded' && view === 'maximised';
 	const drawerRef = useRef<HTMLDivElement>(null);
-	// useEffect(() => {
-	// 	function onVisualViewportChange() {
-	// 		if (!drawerRef.current) return;
-	// 		const visualViewportHeight = window.visualViewport?.height ?? 0;
-	// 		const keyboardHeight = window.innerHeight - visualViewportHeight;
-
-	// 		// Difference between window height and height excluding the keyboard
-	// 		const diffFromInitial = window.innerHeight - visualViewportHeight;
-
-	// 		const drawerHeight = drawerRef.current.getBoundingClientRect().height;
-	// 		const offset = keyboardHeight - drawerHeight;
-
-	// 		drawerRef.current.style.height = `${visualViewportHeight - offset}px`;
-	// 		drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
-	// 	}
-
-	// 	window.visualViewport?.addEventListener('resize', onVisualViewportChange);
-
-	// 	return () => window.visualViewport?.removeEventListener('resize', onVisualViewportChange);
-	// }, []);
 
 	return (
 		<MotionProvider>
-			<AnimatePresence>
-				{isApplying && viewState.value === 'maximised' ? (
-					<m.div
-						key="bg"
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						class="bg-neutral-12/60 fixed inset-0"
-					/>
-				) : null}
+			<Dialog.Root open={isApplying} modal={isApplying}>
+				<AnimatePresence>
+					<Dialog.Overlay key="bg" forceMount asChild>
+						{isApplying && (
+							<m.div
+								initial={{ opacity: 0 }}
+								animate={{ opacity: 1 }}
+								exit={{ opacity: 0 }}
+								class="bg-neutral-12/60 fixed inset-0"
+							/>
+						)}
+					</Dialog.Overlay>
 
-				{isApplying ? (
-					<m.div
-						key="content"
-						ref={drawerRef}
-						aria-modal="true"
-						role="dialog"
-						aria-labelledby="chatbot-header"
-						variants={chatbotVariants}
-						initial="closed"
-						animate={view}
-						exit="closed"
-						style={{ '--header-height': `${HEADER_HEIGHT}px` }}
-						class="isolate fixed left-2 right-2 mx-auto max-w-[450px] bottom-2 max-h-full focus:outline-none"
-					>
-						<FocusScope
-							class="outline outline-1 h-full outline-neutral-5 relative flex flex-col bg-neutral-2 rounded-3xl overflow-hidden"
-							loop
-							trapped={false}
+					<Dialog.Content forceMount asChild>
+						<m.div
+							key="content"
+							ref={drawerRef}
+							aria-modal="true"
+							role="dialog"
+							aria-labelledby="chatbot-header"
+							variants={chatbotVariants}
+							initial="closed"
+							animate={match({ state, view })
+								.with({ state: 'idle' }, () => 'closed')
+								.with({ state: 'error' }, () => 'minimised')
+								.with({ state: P.union('loaded', 'loading') }, ({ view }) => view)
+								.exhaustive()}
+							exit="closed"
+							style={{ '--header-height': `${HEADER_HEIGHT}px` }}
+							class="isolate fixed left-2 right-2 mx-auto max-w-[450px] bottom-2 max-h-full focus:outline-none"
 						>
-							<ChatbotHeader currentApplication={currentApplication} />
+							<div class="outline outline-1 h-full outline-neutral-5 relative flex flex-col bg-neutral-2 rounded-3xl overflow-hidden">
+								<ChatbotHeader>
+									{currentApplication
+										? `Applying for “${currentApplication.job.title}” at ${currentApplication.company.name}`
+										: 'inploi chatbot'}
+								</ChatbotHeader>
 
-							<Suspense fallback={<div>loading…</div>}>
-								<JobApplicationContent
-									analytics={analytics}
-									currentApplication={currentApplication}
-									apiClient={apiClient}
-									logger={logger}
-								/>
-							</Suspense>
-						</FocusScope>
-					</m.div>
-				) : null}
-			</AnimatePresence>
+								<Suspense fallback={<div>loading…</div>}>
+									{view === 'maximised' && state === 'loaded' && (
+										<JobApplicationContent
+											analytics={analytics}
+											currentApplication={currentApplication}
+											apiClient={apiClient}
+											logger={logger}
+										/>
+									)}
+								</Suspense>
+							</div>
+						</m.div>
+					</Dialog.Content>
+				</AnimatePresence>
+			</Dialog.Root>
 		</MotionProvider>
 	);
 };

package/src/ui/job-application-content.tsx

@@ -1,5 +1,4 @@
 import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
-import { useFocusGuards } from '@radix-ui/react-focus-guards';
 import { AnimatePresence } from 'framer-motion';
 import { useEffect, useLayoutEffect } from 'react';
 import { match } from 'ts-pattern';
@@ -25,11 +24,7 @@ export const JobApplicationContent = ({
 	apiClient,
 	analytics,
 }: JobApplicationContentProps) => {
-	const { chatRef, chatService, isBotTyping, onSubmitSuccessFn, scrollToEnd } = useChatService({
-		logger,
-	});
-
-	useFocusGuards();
+	const { chatRef, chatService, isBotTyping, onSubmitSuccessFn, scrollToEnd } = useChatService();
 
 	const view = viewState.value;
 	useLayoutEffect(() => {
@@ -43,14 +38,15 @@ export const JobApplicationContent = ({
 
 	useLayoutEffect(() => {
 		scrollToEnd({ behavior: 'instant' });
-		const currentApplication = application.current$.peek();
-		if (!currentApplication || currentApplication.data.isFinished) return;
+
+		const { state, application: currentApplication } = application.current$.value;
+		if (state !== 'loaded' || currentApplication.data.isFinished) return;
 
 		const { interpret, abort } = createFlowInterpreter({
 			flow: currentApplication.flow.nodes,
 			chatService,
-			getSubmissions: () => application.current$.peek()?.data.submissions,
-			beforeStart: async () => {
+			getSubmissions: () => application.current$.peek().application?.data.submissions,
+			beforeStart: async node => {
 				application.setInput(undefined);
 
 				const fromBeginning = currentApplication.data.messages.length === 0;
@@ -63,13 +59,9 @@ export const JobApplicationContent = ({
 						},
 					});
 				} else {
-					await chatService.send({
-						message: {
-							type: 'system',
-							text: 'Restored in progress application',
-							variant: 'info',
-						},
-					});
+					// We restart the last node.
+					const restoredFromId = node.id;
+					application.removeLastGroupMessagesById(restoredFromId);
 				}
 			},
 			onInterpret: node => {
@@ -85,13 +77,14 @@ export const JobApplicationContent = ({
 								text: 'Application ended',
 								variant: 'success',
 							},
+							groupId: 'system',
 						});
 					})
 					.with({ type: 'complete-flow' }, async () => {
-						const submissions = application.current$.peek()?.data.submissions;
+						const submissions = application.current$.peek().application?.data.submissions;
 						if (!submissions) throw new Error(ERROR_MESSAGES.no_submissions);
 
-						const response = await apiClient.fetch(`/flow/job/${currentApplication.job.id}`, {
+						const response = await apiClient.fetch(`/flow/apply`, {
 							method: 'POST',
 							body: JSON.stringify(submissionsToPayload({ application: currentApplication, submissions })),
 						});
@@ -104,6 +97,7 @@ export const JobApplicationContent = ({
 										text: 'Application submitted',
 										variant: 'success',
 									},
+									groupId: 'system',
 								});
 							})
 							.otherwise(response => {
@@ -114,6 +108,7 @@ export const JobApplicationContent = ({
 										text: 'Error submitting application',
 										variant: 'error',
 									},
+									groupId: 'system',
 								});
 							});
 					})
@@ -139,7 +134,11 @@ export const JobApplicationContent = ({
 					<JobApplicationMessages isBotTyping={isBotTyping} messages={currentApplication.data.messages} />
 				</AnimatePresence>
 			</div>
-			<ChatInput onInputChange={() => scrollToEnd({ behavior: 'smooth' })} onSubmit={onSubmitSuccessFn} />
+			<ChatInput
+				input={currentApplication.data.currentInput}
+				onInputChange={() => scrollToEnd({ behavior: 'smooth' })}
+				onSubmit={onSubmitSuccessFn}
+			/>
 		</>
 	);
 };

package/src/ui/send-button.tsx

@@ -4,7 +4,7 @@ import { ComponentProps } from 'preact';
 export const SendButton = ({ class: className, ...props }: ComponentProps<'button'>) => (
 	<button
 		class={clsx(
-			'p-2 flex-shrink-0 bg-accent-9 active:bg-accent-12 active:text-accent-6 rounded-full text-lowest pointer-coarse:touch-hitbox disabled:opacity-50 disabled:cursor-not-allowed',
+			'p-2 flex-shrink-0 bg-accent-7 active:bg-accent-10 active:text-accent-4 rounded-full text-lowest pointer-coarse:touch-hitbox disabled:opacity-50 disabled:cursor-not-allowed',
 			className,
 		)}
 		{...props}

package/src/ui/typing-indicator.tsx

@@ -5,7 +5,7 @@ export const TypingIndicator = ({ className, ...props }: ComponentProps<'div'>)
 	return (
 		<div class={clsx('flex gap-1 p-4', className)} {...props}>
 			{Array.from({ length: 3 }, (_, i) => (
-				<div class="h-1.5 w-1.5 rounded-full bg-accent-9 animate-bounce" style={{ animationDelay: `${-i * 200}ms` }} />
+				<div class="h-1.5 w-1.5 rounded-full bg-accent-7 animate-bounce" style={{ animationDelay: `${-i * 200}ms` }} />
 			))}
 		</div>
 	);

package/src/ui/useChatService.ts

@@ -1,18 +1,14 @@
-import { Logger } from '@inploi/sdk';
 import { useMemo, useRef, useState } from 'preact/hooks';
 import { match } from 'ts-pattern';
 import { application } from '~/chatbot.state';
+import { AbortedError } from '~/chatbot.utils';
 import { ChatService } from '~/interpreter/interpreter';
 
 import { SubmitSuccessFn } from './chat-input/chat-input';
 
 const TYPING_SPEED_MS_PER_CHARACTER = 25;
 
-type UseChatServiceParams = {
-	logger?: Logger;
-};
-
-export const useChatService = ({ logger }: UseChatServiceParams) => {
+export const useChatService = () => {
 	const chatRef = useRef<HTMLDivElement>(null);
 	const [isBotTyping, setIsBotTyping] = useState(false);
 	const [onSubmitSuccessFn, setOnSubmitSuccessFn] = useState<SubmitSuccessFn>(() => () => {});
@@ -24,16 +20,13 @@ export const useChatService = ({ logger }: UseChatServiceParams) => {
 
 	const chatService = useMemo(() => {
 		const chatService: ChatService = {
-			send: async ({ message, signal }) => {
+			send: async ({ message, signal, groupId }) => {
 				await match(message)
 					/** Delay sending and add typing indicator if bot is sending a message */
 					.with({ author: 'bot', type: 'text' }, async message => {
-						if (signal?.aborted) {
-							logger?.info(`Aborted sending message`);
-							return;
-						}
+						if (signal?.aborted) throw new AbortedError();
 						setIsBotTyping(true);
-						const typingTime = message.text.length * TYPING_SPEED_MS_PER_CHARACTER;
+						const typingTime = Math.max(20, message.text.length) * TYPING_SPEED_MS_PER_CHARACTER;
 						await new Promise(resolve => {
 							return setTimeout(resolve, typingTime, { signal });
 						});
@@ -42,17 +35,16 @@ export const useChatService = ({ logger }: UseChatServiceParams) => {
 					.otherwise(async () => void 0);
 
 				/** The signal could have been aborted while typing */
-				if (signal?.aborted) {
-					logger?.info(`Aborted sending message`);
-					return;
-				}
-				application.addMessage(message);
+				if (signal?.aborted) throw new AbortedError();
+				application.addMessage(message, groupId);
 			},
-			input: async input => {
+			input: async ({ input, signal }) => {
+				if (signal?.aborted) throw new AbortedError();
 				application.setInput(input);
 
 				return await new Promise(resolve => {
 					const submitFunction: SubmitSuccessFn = submission => {
+						if (signal?.aborted) throw new AbortedError();
 						application.setInput(undefined);
 						application.setSubmission(input.key, submission);
 						resolve(submission as any);
@@ -63,7 +55,7 @@ export const useChatService = ({ logger }: UseChatServiceParams) => {
 		};
 
 		return chatService;
-	}, [logger]);
+	}, []);
 
 	return {
 		chatRef,

package/tests/integration.spec.ts

@@ -0,0 +1,19 @@
+import { flowHandler } from '~/mocks/handlers';
+
+import { expect, test } from './test';
+
+test('when backend responds with correct data, can start application', async ({ page, worker }) => {
+	await worker.use(flowHandler.success);
+	await page.goto('/', { waitUntil: 'domcontentloaded' });
+
+	await page.getByRole('button', { name: 'Apply for job Test flow' }).click();
+	await expect(page.getByText('Text node')).toBeVisible();
+});
+
+test('when backend responds with malformed data, user sees error message', async ({ page, worker }) => {
+	await worker.use(flowHandler.invalid_payload);
+	await page.goto('/', { waitUntil: 'domcontentloaded' });
+
+	await page.getByRole('button', { name: 'Apply for job Test flow' }).click();
+	await expect(page.getByText('Text node')).toBeVisible();
+});

package/tests/test.ts

@@ -0,0 +1,22 @@
+import { test as base, expect } from '@playwright/test';
+import { http } from 'msw';
+import type { Config, MockServiceWorker } from 'playwright-msw';
+import { createWorkerFixture } from 'playwright-msw';
+
+const testFactory = (config?: Config) =>
+	base.extend<{
+		worker: MockServiceWorker;
+		http: typeof http;
+	}>({
+		worker: createWorkerFixture(
+			[
+				// default handlers go here
+			],
+			config,
+		),
+		http,
+	});
+
+const test = testFactory();
+
+export { test, expect };

package/tsconfig.json

@@ -28,6 +28,6 @@
 			"~/*": ["./src/*"]
 		}
 	},
-	"include": ["src", ".eslintrc.cjs", "tailwind.config.ts", "vite.config.ts"],
+	"include": ["src", "tests", "playwright.config.ts", ".eslintrc.cjs", "tailwind.config.ts", "vite.config.ts"],
 	"references": [{ "path": "./tsconfig.node.json" }]
 }