@inploi/plugin-chatbot 1.0.0

package/src/mocks/handlers.ts

@@ -0,0 +1,28 @@
+import { invariant } from '@inploi/core/common';
+import { http } from 'msw';
+
+import { exampleFlows } from './example.flows';
+
+export const handlers = [
+	http.get(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, ctx => {
+		invariant(typeof ctx.params.jobId === 'string', 'Missing job id');
+		const mockApplication = {
+			job: {
+				id: +ctx.params.jobId,
+				title: 'Test job',
+			},
+			company: {
+				name: 'Test company',
+			},
+			flow: {
+				id: 1,
+				nodes: ctx.params.jobId === '1' ? exampleFlows.fromAlex : exampleFlows.byClaude,
+				version: 1,
+			},
+		};
+		return new Response(JSON.stringify(mockApplication));
+	}),
+	http.post(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, ctx => {
+		return new Response(JSON.stringify({ message: 'Success' }));
+	}),
+];

package/src/ui/chat-bubble.tsx

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+const chatBubbleVariants = cva(
+	'max-w-[min(100%,24rem)] flex-shrink-1 min-w-[2rem] text-sm py-2 px-3 transition-all duration-500 ease-expo-out rounded-[18px] min-h-[36px] break-words',
+	{
+		variants: {
+			side: {
+				left: 'self-start bg-lowest text-neutral-12 shadow-surface-md outline outline-1 outline-accent-11/[.08] rounded-bl-sm',
+				right: 'self-end bg-accent-9 text-lowest shadow-surface-md rounded-br-sm bubble-right',
+			},
+			transitionState: {
+				entering: 'opacity-0 translate-y-8',
+				entered: 'opacity-100 translate-y-0',
+				exiting: 'opacity-0 scale-0',
+				exited: '',
+			},
+		},
+
+		defaultVariants: {
+			side: 'left',
+		},
+	},
+);
+
+type ChatBubbleVariants = VariantProps<typeof chatBubbleVariants>;
+
+type ChatBubbleProps = ComponentProps<'p'> & ChatBubbleVariants;
+export const ChatBubble = ({ children, className, transitionState, side, ...props }: ChatBubbleProps) => {
+	return (
+		<p data-transition={transitionState} class={chatBubbleVariants({ className, side, transitionState })} {...props}>
+			{children}
+		</p>
+	);
+};

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

@@ -0,0 +1,57 @@
+import { P, match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { ChatInputProps } from './chat-input';
+
+export type BooleanChoicePayload = {
+	type: 'boolean';
+	config: { labels: { true: string; false: string } };
+	key: string;
+	value: 'true' | 'false';
+};
+
+const options = ['true', 'false'] as const;
+const AnswerSchema = z.enum(options);
+const FIELD_NAME = 'answer';
+
+export const ChatInputBoolean = ({ input, onSubmitSuccess }: ChatInputProps<'boolean'>) => {
+	return (
+		<form
+			class="flex gap-2 items-center"
+			onSubmit={e => {
+				e.preventDefault();
+
+				/** nativeEvent is a hidden property not exposed by JSX's typings */
+				const value = match(e as any)
+					.with(
+						{
+							nativeEvent: {
+								submitter: P.select(P.union(P.instanceOf(HTMLButtonElement), P.instanceOf(HTMLInputElement))),
+							},
+						},
+						submitter => {
+							return submitter.value;
+						},
+					)
+					.otherwise(() => {
+						throw new Error('invalid form');
+					});
+				const answer = AnswerSchema.parse(value);
+				onSubmitSuccess(answer);
+			}}
+		>
+			{options.map(value => {
+				return (
+					<button
+						type="submit"
+						name={FIELD_NAME}
+						value={value}
+						class="flex-1 overflow-hidden rounded-2xl block px-2.5 py-2.5 selection:bg-transparent transition-all bg-lowest ring-transparent ring-0 focus-visible:ring-offset-2 focus-visible:ring-4 focus-visible:ring-accent-7 ease-expo-out duration-300 outline outline-2 outline-neutral-12/5 text-neutral-12 active:outline-accent-9 active:bg-accent-4 active:text-accent-11"
+					>
+						<p class="truncate text-base">{input.config.labels[value]}</p>
+					</button>
+				);
+			})}
+		</form>
+	);
+};

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

@@ -0,0 +1,211 @@
+import { invariant } from '@inploi/core/common';
+import clsx from 'clsx';
+import { ComponentProps } from 'preact';
+import { useState } from 'preact/hooks';
+import { FieldError } from 'react-hook-form';
+import { P, match } from 'ts-pattern';
+import { useApplicationSubmission } from '~/chatbot.state';
+import { gzip, isSubmissionOfType } from '~/chatbot.utils';
+
+import { InputError } from '../input-error';
+import { SendButton } from '../send-button';
+import { ChatInputProps } from './chat-input';
+
+export type FileToUpload = { name: string; data: string; sizeKb: number };
+export type FilePayload = {
+	type: 'file';
+	config: { extensions: string[]; fileSizeLimitKib?: number; allowMultiple: boolean };
+	key: string;
+	value: FileToUpload[];
+};
+
+const toBase64 = (file: File) =>
+	new Promise<string>((resolve, reject) => {
+		const reader = new FileReader();
+		reader.readAsDataURL(file);
+		reader.onload = () => {
+			if (!reader.result) return reject('No result from reader');
+			return resolve(reader.result.toString());
+		};
+		reader.onerror = reject;
+	});
+
+const kbToReadableSize = (kb: number) =>
+	match(kb)
+		.with(P.number.lte(1000), () => `${Math.round(kb)}KB`)
+		.with(P.number.lt(1000 * 10), () => `${(kb / 1000).toFixed(1)}MB`)
+		.otherwise(() => `${Math.round(kb / 1000)}MB`);
+
+const addFileSizesKb = (files: FileToUpload[]) => files.reduce((acc, cur) => acc + cur.sizeKb, 0);
+
+const isFileSubmission = isSubmissionOfType('file');
+
+const FILENAMES_TO_SHOW_QTY = 3;
+
+export const FileThumbnail = ({
+	file,
+	class: className,
+	...props
+}: ComponentProps<'div'> & { file: Pick<FileToUpload, 'name' | 'sizeKb'> }) => {
+	const extension = file.name.split('.').pop();
+	const fileName = file.name.replace(new RegExp(`.${extension}$`), '');
+
+	return (
+		<div
+			class={clsx(
+				'bg-accent-1 max-w-full flex gap-2 px-3 py-2 text-sm rounded-lg outline outline-neutral-4 overflow-hidden',
+				className,
+			)}
+			{...props}
+		>
+			<p aria-label="File name" class="overflow-hidden text-accent-12 flex flex-grow">
+				<span class="block truncate">{fileName}</span>
+				<span>.{extension}</span>
+			</p>
+
+			<p aria-label="File size" class="text-neutral-10">
+				{kbToReadableSize(file.sizeKb)}
+			</p>
+		</div>
+	);
+};
+
+const FilenameBadge = ({ class: className, ...props }: ComponentProps<'li'>) => (
+	<li
+		class={clsx(
+			'text-xs block outline outline-1 outline-neutral-6 text-neutral-11 bg-neutral-1 px-1 py-0.5 rounded-md',
+			className,
+		)}
+		{...props}
+	/>
+);
+1;
+
+export const ChatInputFile = ({ input, onSubmitSuccess, application }: ChatInputProps<'file'>) => {
+	const submission = useApplicationSubmission(application, input.key);
+	const [files, setFiles] = useState<FileToUpload[]>(isFileSubmission(submission) ? submission.value : []);
+	const [error, setError] = useState<FieldError>();
+	const hiddenFileCount = files.length - FILENAMES_TO_SHOW_QTY;
+	const totalSize = addFileSizesKb(files);
+
+	return (
+		<form
+			class="flex flex-col gap-1"
+			onSubmit={e => {
+				e.preventDefault();
+				setError(undefined);
+				if (files.length === 0) {
+					setError({ type: 'required', message: 'Please select a file' });
+				}
+				if (input.config.fileSizeLimitKib && totalSize > input.config.fileSizeLimitKib) {
+					setError({
+						type: 'max',
+						message: `File size exceeds limit of ${kbToReadableSize(input.config.fileSizeLimitKib)}`,
+					});
+				}
+				return onSubmitSuccess(files);
+			}}
+		>
+			<div class="flex gap-2 items-center">
+				<label
+					for="dropzone-file"
+					class="p-4 flex flex-col overflow-hidden items-center justify-center w-full h-48 border border-neutral-8 border-dashed rounded-2xl bg-neutral-2 cursor-pointer"
+				>
+					{files.length > 0 ? (
+						<>
+							<ul class="max-w-full flex gap-1 flex-wrap justify-center overflow-hidden p-1">
+								{files.slice(0, FILENAMES_TO_SHOW_QTY).map(file => {
+									const extension = file.name.split('.').pop();
+									const fileName = file.name.replace(new RegExp(`.${extension}$`), '');
+									return (
+										<FilenameBadge class="flex overflow-hidden">
+											<span class="block truncate">{fileName}</span>
+											<span>.{extension}</span>
+										</FilenameBadge>
+									);
+								})}
+								{hiddenFileCount > 0 ? (
+									<FilenameBadge>
+										+{hiddenFileCount} file{hiddenFileCount !== 1 ? 's' : ''}
+									</FilenameBadge>
+								) : null}
+							</ul>
+
+							<p class="text-xs text-neutral-11">
+								{kbToReadableSize(totalSize)} {files.length > 1 ? 'total' : ''}
+							</p>
+						</>
+					) : (
+						<div class="flex flex-col justify-center pt-5 pb-6 gap-4">
+							<header class="flex flex-col gap-0 items-center">
+								<svg
+									class="w-8 h-8 text-neutral-11 mb-1"
+									aria-hidden="true"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 20 16"
+								>
+									<path
+										stroke="currentColor"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="1.5"
+										d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+									/>
+								</svg>
+								<p class="tracking-[-0.01em] text-neutral-12 dark:text-gray-400">
+									{input.config.allowMultiple ? 'Select files' : 'Select a file'} to upload
+								</p>
+								{input.config.fileSizeLimitKib ? (
+									<p class="text-xs text-neutral-10">(max {kbToReadableSize(input.config.fileSizeLimitKib)})</p>
+								) : null}
+							</header>
+							<aside class="flex flex-col gap-2 items-center">
+								<p id="accepted-filetypes" class="sr-only">
+									Accepted file extensions
+								</p>
+								<ul aria-describedby="accepted-filetypes" class="flex gap-2 flex-wrap justify-center">
+									{input.config.extensions.map(ext => (
+										<li class="text-[11px] tracking-wide uppercase outline ring-2 ring-lowest outline-1 outline-neutral-6 text-neutral-9 bg-neutral-1 px-1 py-0.5 rounded-md">
+											{ext.replace('.', '')}
+										</li>
+									))}
+								</ul>
+							</aside>
+						</div>
+					)}
+
+					<input
+						id="dropzone-file"
+						onInput={async e => {
+							invariant(e.target instanceof HTMLInputElement);
+							const files = e.target.files ? Array.from(e.target.files) : [];
+							const filesToUpload = await Promise.allSettled(
+								files.map(async file => {
+									const data = await toBase64(file).then(gzip);
+									return {
+										name: file.name,
+										data: data,
+										sizeKb: file.size / 1000,
+									};
+								}),
+							);
+							if (filesToUpload.some(({ status }) => status === 'rejected')) {
+								return setError({ type: 'invalid', message: 'Invalid file' });
+							}
+							const validFiles = filesToUpload
+								.map(promise => (promise.status === 'fulfilled' ? promise.value : null))
+								.filter(Boolean) as FileToUpload[];
+							setFiles(validFiles);
+						}}
+						multiple={input.config.allowMultiple}
+						type="file"
+						class="sr-only"
+					/>
+				</label>
+				<SendButton disabled={files.length === 0} />
+			</div>
+			{error && <InputError error={error} />}
+		</form>
+	);
+};

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

@@ -0,0 +1,92 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useApplicationSubmission } from '~/chatbot.state';
+import { isSubmissionOfType } from '~/chatbot.utils';
+
+import { InputError } from '../input-error';
+import { SendButton } from '../send-button';
+import { ChatInputProps } from './chat-input';
+
+export type MultipleChoicePayload = {
+	type: 'multiple-choice';
+	key: string;
+	config: { options: { value: string; label: string }[]; minSelected?: number; maxSelected?: number };
+	value: string[];
+};
+
+const isMultipleChoiceSubmission = isSubmissionOfType('multiple-choice');
+const errorMap: z.ZodErrorMap = (issue, ctx) => {
+	if (issue.code === z.ZodIssueCode.too_small)
+		return { message: `Please select at least ${issue.minimum} option${issue.minimum !== 1 ? 's' : ''}` };
+	if (issue.code === z.ZodIssueCode.too_big)
+		return { message: `Please select at most ${issue.maximum} option${issue.maximum !== 1 ? 's' : ''}` };
+	return { message: ctx.defaultError };
+};
+
+const getResolver = (config: MultipleChoicePayload['config']) =>
+	zodResolver(
+		z.object({
+			checked: z
+				.record(z.boolean())
+				.transform(o =>
+					Object.entries(o)
+						.filter(([_, v]) => v)
+						.map(([k, _]) => k),
+				)
+				.pipe(
+					z
+						.array(z.string(), { errorMap })
+						.max(config.maxSelected ?? config.options.length)
+						.min(config.minSelected ?? 0),
+				),
+		}),
+	);
+
+export const ChatInputMultipleChoice = ({ input, onSubmitSuccess, application }: ChatInputProps<'multiple-choice'>) => {
+	const submission = useApplicationSubmission(application, input.key);
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm({
+		defaultValues: {
+			checked: isMultipleChoiceSubmission(submission)
+				? Object.fromEntries(submission.value.map(key => [key, true]))
+				: {},
+		},
+		resolver: getResolver(input.config),
+	});
+
+	return (
+		<form
+			class="flex flex-col gap-1"
+			onSubmit={handleSubmit(submission => {
+				// react-hook-form does not play well with zod's transform
+				const checked = submission.checked as unknown as string[];
+				onSubmitSuccess(checked);
+			})}
+		>
+			<div class="flex items-center gap-2">
+				<div class="flex flex-wrap gap-3 flex-1 p-1 w-full">
+					{input.config.options.map((option, i) => {
+						const id = `checked.${option.value}` as const;
+						return (
+							<div key={option.value}>
+								<input autoFocus={i === 0} id={id} {...register(id)} class="peer sr-only" type="checkbox"></input>
+								<label
+									class="rounded-2xl block px-2.5 py-1 selection:bg-transparent transition-all bg-lowest ring-transparent ring-0 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-4 peer-focus-visible:ring-accent-7 active:outline-neutral-10 ease-expo-out duration-300 outline outline-2 outline-neutral-12/5 text-neutral-11 peer-checked:outline-accent-9 peer-checked:bg-accent-4 peer-checked:text-accent-11"
+									htmlFor={id}
+								>
+									{option.label}
+								</label>
+							</div>
+						);
+					})}
+				</div>
+				<SendButton />
+			</div>
+			<InputError error={errors.checked?.root} />
+		</form>
+	);
+};

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

@@ -0,0 +1,105 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect, useRef } from 'preact/hooks';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useApplicationSubmission } from '~/chatbot.state';
+import { isSubmissionOfType } from '~/chatbot.utils';
+
+import { InputError } from '../input-error';
+import { SendButton } from '../send-button';
+import { ChatInputProps } from './chat-input';
+
+export type TextPayload = {
+	type: 'text';
+	key: string;
+	config: { placeholder?: string; format: 'text' | 'email' | 'phone' | 'url' };
+	value: string;
+};
+
+type InputFormat = ChatInputProps<'text'>['input']['config']['format'];
+const inputFormatToSchema: Record<InputFormat, z.ZodType<string>> = {
+	email: z.string().email('That doesn’t look like a valid email address'),
+	phone: z
+		.string()
+		.regex(/^\+?[0-9 -]+$/, 'That doesn’t look like a valid phone number')
+		.transform(value => value.replace(/[^0-9]/g, '')),
+	text: z.string().min(1, 'Please enter some text'),
+	url: z.string().url("That doesn't look like a valid URL"),
+};
+
+const inputFormatToProps = {
+	email: {
+		type: 'email',
+		inputMode: 'email',
+		formNoValidate: true,
+	},
+	phone: {
+		type: 'tel',
+		inputMode: 'tel',
+	},
+	text: {
+		type: 'text',
+		inputMode: 'text',
+	},
+	url: {
+		type: 'url',
+		inputMode: 'url',
+		formNoValidate: true,
+	},
+} satisfies Record<InputFormat, JSX.IntrinsicElements['input']>;
+
+const isTextSubmission = isSubmissionOfType('text');
+const getResolver = (config: TextPayload['config']) =>
+	zodResolver(z.object({ text: inputFormatToSchema[config.format] }));
+
+export const ChatInputText = ({ input, onSubmitSuccess, application }: ChatInputProps<'text'>) => {
+	const submission = useApplicationSubmission(application, input.key);
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm({
+		defaultValues: {
+			text: isTextSubmission(submission) ? submission.value : '',
+		},
+		resolver: getResolver(input.config),
+	});
+	const { ref: setRef, ...props } = register('text', { required: true });
+	const ref = useRef<HTMLInputElement>();
+	useEffect(() => {
+		if (ref.current) {
+			ref.current.focus();
+			ref.current.select();
+		}
+	}, []);
+
+	return (
+		<form
+			class="flex flex-col gap-1"
+			onSubmit={handleSubmit(submission => {
+				onSubmitSuccess(submission.text);
+			})}
+		>
+			<div class="flex gap-2 items-center">
+				<input
+					{...props}
+					{...inputFormatToProps[input.config.format]}
+					autocomplete="off"
+					autoCapitalize="off"
+					autoCorrect="off"
+					autoFocus
+					ref={(e: HTMLInputElement | null) => {
+						if (e) {
+							ref.current = e;
+						}
+						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"
+					placeholder={input.config.placeholder}
+				/>
+				<SendButton />
+			</div>
+			<InputError error={errors.text} />
+		</form>
+	);
+};

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

@@ -0,0 +1,57 @@
+import { useEffect } from 'preact/hooks';
+import { P, match } from 'ts-pattern';
+import { JobApplication } from '~/chatbot.api';
+import { DistributivePick } from '~/chatbot.utils';
+
+import { ApplicationLocalState, ApplicationSubmission, useApplicationInput } from '../../chatbot.state';
+import { ChatInput as ChatInputType } from './chat-input';
+import { BooleanChoicePayload, ChatInputBoolean } from './chat-input.boolean';
+import { ChatInputFile, FilePayload } from './chat-input.file';
+import { ChatInputMultipleChoice, MultipleChoicePayload } from './chat-input.multiple-choice';
+import { ChatInputText, TextPayload } from './chat-input.text';
+
+export type SubmitSuccessFn = (submission: ApplicationSubmission) => void;
+
+export type ChatInputProps<T extends ChatInputType['type']> = {
+	application: JobApplication;
+	onSubmitSuccess: (value: Extract<ApplicationSubmission, { type: T }>['value']) => void;
+	input: Extract<ChatInputType, { type: T }>;
+	localState?: ApplicationLocalState;
+};
+
+export type ChatbotInput = TextPayload | MultipleChoicePayload | BooleanChoicePayload | FilePayload;
+export type ChatInput = DistributivePick<ChatbotInput, 'type' | 'config' | 'key'>;
+
+type ChatInputFactoryProps = {
+	onSubmit: SubmitSuccessFn;
+	application: JobApplication;
+	onInputChange: (input?: ChatInputType['type']) => void;
+};
+export const ChatInput = ({ onSubmit, application, onInputChange }: ChatInputFactoryProps) => {
+	const input = useApplicationInput(application);
+
+	useEffect(() => {
+		onInputChange(input?.type);
+	}, [input?.type, onInputChange]);
+
+	const handleSubmitSuccess =
+		<T extends ChatbotInput['type']>(type: T) =>
+		(value: (ChatbotInput & { type: T })['value']) =>
+			onSubmit({ type, value } as ApplicationSubmission);
+
+	return match({ application, input })
+		.with({ input: P.nullish }, () => <div class="h-8" />)
+		.with({ input: { type: 'text' } }, props => (
+			<ChatInputText onSubmitSuccess={handleSubmitSuccess(props.input.type)} {...props} />
+		))
+		.with({ input: { type: 'multiple-choice' } }, props => (
+			<ChatInputMultipleChoice onSubmitSuccess={handleSubmitSuccess(props.input.type)} {...props} />
+		))
+		.with({ input: { type: 'boolean' } }, props => (
+			<ChatInputBoolean onSubmitSuccess={handleSubmitSuccess(props.input.type)} {...props} />
+		))
+		.with({ input: { type: 'file' } }, props => (
+			<ChatInputFile onSubmitSuccess={handleSubmitSuccess(props.input.type)} {...props} />
+		))
+		.exhaustive();
+};

package/src/ui/chatbot-header.tsx

@@ -0,0 +1,89 @@
+import clsx from 'clsx';
+import { ComponentProps } from 'preact';
+import { useShallow } from 'zustand/react/shallow';
+import { JobApplication } from '~/chatbot.api';
+
+import { useChatbotStore, useLocalState } from '../chatbot.state';
+
+const HeaderIconButton = ({ class: className, children, ...props }: ComponentProps<'button'>) => {
+	return (
+		<button
+			class={clsx(
+				'p-1.5 rounded-full text-neutral-11 hover:text-neutral-12 active:text-neutral-12 hover:bg-neutral-12/5 active:bg-neutral-12/10',
+				className,
+			)}
+			{...props}
+		>
+			<svg
+				class="block"
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				{children}
+			</svg>
+		</button>
+	);
+};
+
+export const ChatbotHeader = ({ application }: { application: JobApplication }) => {
+	const resetApplicationState = useLocalState(s => s.resetApplicationState);
+	const { viewState, setViewState, cancelCurrentApplication, startApplication } = useChatbotStore(
+		useShallow(s => ({
+			viewState: s.viewState,
+			setViewState: s.setViewState,
+			cancelCurrentApplication: s.cancelCurrentApplication,
+			startApplication: s.startApplication,
+		})),
+	);
+
+	return (
+		<header class="z-20 p-1 px-2 flex gap-2 h-[var(--header-height)] rounded-t-3xl 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">
+			<div class="flex-grow overflow-hidden pl-2">
+				<p class="font-bold text-sm tracking-tight text-neutral-12 truncate">
+					Applying for “{application.job.title}” at {application.company.name}
+				</p>
+			</div>
+
+			<div class="flex-shrink-0 flex items-center gap-1">
+				{viewState === 'minimised' ? (
+					<>
+						<HeaderIconButton
+							key="minmax"
+							aria-label="Maximise job application"
+							onClick={() => setViewState('maximised')}
+						>
+							<path d="M12.5 9.5L8 5L3.5 9.5" />
+						</HeaderIconButton>
+						<HeaderIconButton key="close" aria-label="Close application" onClick={cancelCurrentApplication}>
+							<path d="M12.5 6.5L8 11L3.5 6.5" />
+						</HeaderIconButton>
+					</>
+				) : (
+					<>
+						<HeaderIconButton
+							key="restart"
+							aria-label="Restart"
+							onClick={() => {
+								cancelCurrentApplication();
+								resetApplicationState(application);
+								startApplication(application);
+							}}
+						>
+							<path d="M12 8.5C12 9.29113 11.7654 10.0645 11.3259 10.7223C10.8864 11.3801 10.2616 11.8928 9.53073 12.1955C8.79983 12.4983 7.99556 12.5775 7.21964 12.4231C6.44371 12.2688 5.73098 11.8878 5.17157 11.3284C4.61216 10.769 4.2312 10.0563 4.07686 9.28036C3.92252 8.50444 4.00173 7.70017 4.30448 6.96927C4.60723 6.23836 5.11992 5.61365 5.77772 5.17412C6.43552 4.7346 7.20887 4.5 8 4.5H9" />
+							<path d="M8 7L10 4.5L8 2.5" />
+						</HeaderIconButton>
+						<HeaderIconButton key="minmax" aria-label="Minimise application" onClick={() => setViewState('minimised')}>
+							<path d="M12.5 6.5L8 11L3.5 6.5" />
+						</HeaderIconButton>
+					</>
+				)}
+			</div>
+		</header>
+	);
+};