@inploi/plugin-chatbot 1.0.7 → 2.0.0

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

@@ -4,11 +4,12 @@ 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 { application } from '~/chatbot.state';
+import { isSubmissionOfType } from '~/chatbot.utils';
 
 import { InputError } from '../input-error';
 import { SendButton } from '../send-button';
+import { useFocusOnMount } from '../useFocus';
 import { ChatInputProps } from './chat-input';
 
 export type FileToUpload = { name: string; data: string; sizeKb: number };
@@ -81,13 +82,13 @@ const FilenameBadge = ({ class: className, ...props }: ComponentProps<'li'>) =>
 );
 1;
 
-export const ChatInputFile = ({ input, onSubmitSuccess, application }: ChatInputProps<'file'>) => {
-	const submission = useApplicationSubmission(application, input.key);
+export const ChatInputFile = ({ input, onSubmitSuccess }: ChatInputProps<'file'>) => {
+	const submission = application.current$.value?.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;
 	const totalSize = addFileSizesKb(files);
-
+	const focusRef = useFocusOnMount();
 	return (
 		<form
 			class="flex flex-col gap-1"
@@ -108,6 +109,7 @@ export const ChatInputFile = ({ input, onSubmitSuccess, application }: ChatInput
 		>
 			<div class="flex gap-2 items-center">
 				<label
+					ref={focusRef}
 					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"
 				>
@@ -182,7 +184,7 @@ export const ChatInputFile = ({ input, onSubmitSuccess, application }: ChatInput
 							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);
+									const data = await toBase64(file);
 									return {
 										name: file.name,
 										data: data,

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

@@ -1,11 +1,12 @@
-import { zodResolver } from '@hookform/resolvers/zod';
+import { valibotResolver } from '@hookform/resolvers/valibot';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useApplicationSubmission } from '~/chatbot.state';
+import { boolean, maxLength, minLength, object, record, transform } from 'valibot';
+import { application } from '~/chatbot.state';
 import { isSubmissionOfType } from '~/chatbot.utils';
 
 import { InputError } from '../input-error';
 import { SendButton } from '../send-button';
+import { useFocusOnMount } from '../useFocus';
 import { ChatInputProps } from './chat-input';
 
 export type MultipleChoicePayload = {
@@ -15,36 +16,39 @@ export type MultipleChoicePayload = {
 	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 submitIfSingleChecked = (form: HTMLFormElement) => {
+	const formObj = Object.fromEntries(new FormData(form).entries());
+	const isSingleChecked = Object.keys(formObj).length;
+	if (!isSingleChecked) return;
+	form.dispatchEvent(new Event('submit', { bubbles: true }));
 };
 
-const getResolver = (config: MultipleChoicePayload['config']) =>
-	zodResolver(
-		z.object({
-			checked: z
-				.record(z.boolean())
-				.transform(o =>
+const isMultipleChoiceSubmission = isSubmissionOfType('multiple-choice');
+
+const getResolver = (config: MultipleChoicePayload['config']) => {
+	const length = {
+		min: config.minSelected ?? 0,
+		max: config.maxSelected ?? config.options.length,
+	};
+	return valibotResolver(
+		object({
+			checked: transform(
+				record(boolean()),
+				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),
-				),
+				[
+					maxLength(length.max, `Please select at most ${length.max} option${length.max !== 1 ? 's' : ''}`),
+					minLength(length.min, `Please select at least ${length.min} option${length.min !== 1 ? 's' : ''}`),
+				],
+			),
 		}),
 	);
+};
 
-export const ChatInputMultipleChoice = ({ input, onSubmitSuccess, application }: ChatInputProps<'multiple-choice'>) => {
-	const submission = useApplicationSubmission(application, input.key);
+export const ChatInputMultipleChoice = ({ input, onSubmitSuccess }: ChatInputProps<'multiple-choice'>) => {
+	const submission = application.current$.value?.data.submissions[input.key];
 	const {
 		register,
 		handleSubmit,
@@ -57,10 +61,18 @@ export const ChatInputMultipleChoice = ({ input, onSubmitSuccess, application }:
 		},
 		resolver: getResolver(input.config),
 	});
+	const focusRef = useFocusOnMount();
+	const isSingleChoice = input.config.minSelected === 1 && input.config.maxSelected === 1;
 
 	return (
 		<form
+			noValidate
 			class="flex flex-col gap-1"
+			onChange={e => {
+				if (isSingleChoice) {
+					submitIfSingleChecked(e.currentTarget);
+				}
+			}}
 			onSubmit={handleSubmit(submission => {
 				// react-hook-form does not play well with zod's transform
 				const checked = submission.checked as unknown as string[];
@@ -71,9 +83,22 @@ export const ChatInputMultipleChoice = ({ input, onSubmitSuccess, application }:
 				<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;
+						const { ref: setRef, ...props } = register(id);
 						return (
 							<div key={option.value}>
-								<input autoFocus={i === 0} id={id} {...register(id)} class="peer sr-only" type="checkbox"></input>
+								<input
+									autoFocus={i === 0}
+									ref={(e: HTMLInputElement | null) => {
+										if (e && i === 0) {
+											focusRef.current = e;
+										}
+										setRef(e);
+									}}
+									id={id}
+									{...props}
+									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}
@@ -84,7 +109,7 @@ export const ChatInputMultipleChoice = ({ input, onSubmitSuccess, application }:
 						);
 					})}
 				</div>
-				<SendButton />
+				{!isSingleChoice && <SendButton />}
 			</div>
 			<InputError error={errors.checked?.root} />
 		</form>

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

@@ -1,8 +1,8 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect, useRef } from 'preact/hooks';
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import { useLayoutEffect, useRef } from 'preact/hooks';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useApplicationSubmission } from '~/chatbot.state';
+import { StringSchema, email, minLength, object, regex, string, transform, url } from 'valibot';
+import { application } from '~/chatbot.state';
 import { isSubmissionOfType } from '~/chatbot.utils';
 
 import { InputError } from '../input-error';
@@ -16,15 +16,19 @@ export type TextPayload = {
 	value: string;
 };
 
+const errors = {
+	email: 'That doesn’t look like a valid email address',
+	phone: 'That doesn’t look like a valid phone number',
+};
+
+const PhoneSchema = string(errors.phone, [regex(/^\+?[0-9 -]+$/, errors.phone)]);
+
 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 inputFormatToSchema: Record<InputFormat, StringSchema> = {
+	email: string(errors.email, [email(errors.email)]),
+	phone: transform(PhoneSchema, value => value.replace(/[^0-9]/g, '')),
+	text: string([minLength(1, 'Please enter some text')]),
+	url: string([url('That doesn’t look like a valid URL')]),
 };
 
 const inputFormatToProps = {
@@ -50,10 +54,10 @@ const inputFormatToProps = {
 
 const isTextSubmission = isSubmissionOfType('text');
 const getResolver = (config: TextPayload['config']) =>
-	zodResolver(z.object({ text: inputFormatToSchema[config.format] }));
+	valibotResolver(object({ text: inputFormatToSchema[config.format] }));
 
-export const ChatInputText = ({ input, onSubmitSuccess, application }: ChatInputProps<'text'>) => {
-	const submission = useApplicationSubmission(application, input.key);
+export const ChatInputText = ({ input, onSubmitSuccess }: ChatInputProps<'text'>) => {
+	const submission = application.current$.value?.data.submissions[input.key];
 	const {
 		register,
 		handleSubmit,
@@ -66,7 +70,7 @@ export const ChatInputText = ({ input, onSubmitSuccess, application }: ChatInput
 	});
 	const { ref: setRef, ...props } = register('text', { required: true });
 	const ref = useRef<HTMLInputElement>();
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (ref.current) {
 			ref.current.focus();
 			ref.current.select();
@@ -75,6 +79,7 @@ export const ChatInputText = ({ input, onSubmitSuccess, application }: ChatInput
 
 	return (
 		<form
+			noValidate
 			class="flex flex-col gap-1"
 			onSubmit={handleSubmit(submission => {
 				onSubmitSuccess(submission.text);
@@ -82,6 +87,7 @@ export const ChatInputText = ({ input, onSubmitSuccess, application }: ChatInput
 		>
 			<div class="flex gap-2 items-center">
 				<input
+					id="chat-input"
 					{...props}
 					{...inputFormatToProps[input.config.format]}
 					autocomplete="off"

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

@@ -1,9 +1,10 @@
-import { useEffect } from 'preact/hooks';
+import { m } from 'framer-motion';
+import { useEffect, useRef } 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 { ApplicationData, ApplicationSubmission, application, inputHeight } from '../../chatbot.state';
+import { SendButton } from '../send-button';
 import { ChatInput as ChatInputType } from './chat-input';
 import { BooleanChoicePayload, ChatInputBoolean } from './chat-input.boolean';
 import { ChatInputFile, FilePayload } from './chat-input.file';
@@ -13,10 +14,9 @@ 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;
+	localState?: ApplicationData;
 };
 
 export type ChatbotInput = TextPayload | MultipleChoicePayload | BooleanChoicePayload | FilePayload;
@@ -24,13 +24,16 @@ 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);
+export const ChatInput = ({ onSubmit, onInputChange }: ChatInputFactoryProps) => {
+	const input = application.current$.value?.data.currentInput;
+	const inputWrapperRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
+		if (inputWrapperRef.current) {
+			inputHeight.value = inputWrapperRef.current.getBoundingClientRect().height;
+		}
 		onInputChange(input?.type);
 	}, [input?.type, onInputChange]);
 
@@ -39,19 +42,40 @@ export const ChatInput = ({ onSubmit, application, onInputChange }: ChatInputFac
 		(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();
+	return (
+		<m.div
+			initial={{ height: 0 }}
+			animate={{ height: inputHeight.value }}
+			exit={{ height: 0, opacity: 0 }}
+			class="absolute bottom-0 w-full overflow-hidden rounded-b-3xl bg-neutral-4/80 backdrop-blur-md backdrop-saturate-150"
+		>
+			<div ref={inputWrapperRef} class="p-2.5 border-t border-neutral-5">
+				{match({ application, input })
+					.with({ input: P.nullish }, () => (
+						<div class="flex gap-2 items-center">
+							<input
+								aria-hidden="true"
+								id="chat-input"
+								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"
+								disabled
+							/>
+							<SendButton disabled aria-hidden="true" tabIndex={-1} />
+						</div>
+					))
+					.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()}
+			</div>
+		</m.div>
+	);
 };

package/src/ui/chatbot-header.tsx

@@ -1,15 +1,13 @@
 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';
+import { StartedJobApplication, application, cancelCurrentApplication, viewState } 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',
+				'p-2 touch-hitbox relative 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}
@@ -31,32 +29,41 @@ const HeaderIconButton = ({ class: className, children, ...props }: ComponentPro
 	);
 };
 
-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,
-		})),
-	);
+export const ChatbotHeader = ({ currentApplication }: { currentApplication?: StartedJobApplication }) => {
+	const view = viewState.value;
+	const headerText = currentApplication
+		? `Applying for “${currentApplication.job.title}” at ${currentApplication.company.name}`
+		: 'Applying';
 
 	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}
+		<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}
+			</p>
+			<button
+				tabIndex={-1}
+				aria-hidden
+				onClick={() => {
+					if (view === 'minimised') {
+						viewState.value = 'maximised';
+					} else {
+						viewState.value = 'minimised';
+					}
+				}}
+				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}
 				</p>
-			</div>
+			</button>
 
-			<div class="flex-shrink-0 flex items-center gap-1">
-				{viewState === 'minimised' ? (
+			<div class="flex-shrink-0 flex items-center gap-3 p-1.5">
+				{viewState.value === 'minimised' ? (
 					<>
 						<HeaderIconButton
 							key="minmax"
 							aria-label="Maximise job application"
-							onClick={() => setViewState('maximised')}
+							onClick={() => (viewState.value = 'maximised')}
 						>
 							<path d="M12.5 9.5L8 5L3.5 9.5" />
 						</HeaderIconButton>
@@ -70,15 +77,17 @@ export const ChatbotHeader = ({ application }: { application: JobApplication })
 							key="restart"
 							aria-label="Restart"
 							onClick={() => {
-								cancelCurrentApplication();
-								resetApplicationState(application);
-								startApplication(application);
+								application.restart();
 							}}
 						>
 							<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')}>
+						<HeaderIconButton
+							key="minmax"
+							aria-label="Minimise application"
+							onClick={() => (viewState.value = 'minimised')}
+						>
 							<path d="M12.5 6.5L8 11L3.5 6.5" />
 						</HeaderIconButton>
 					</>

package/src/ui/chatbot.tsx

@@ -1,53 +1,105 @@
-import { ApiClient, Logger } from '@inploi/sdk';
-import { useRef } from 'preact/hooks';
-import { Transition } from 'react-transition-group';
-import { overlayClassNames } from '~/chatbot.dom';
+import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
+import { FocusScope } from '@radix-ui/react-focus-scope';
+import { LazyMotion, domAnimation } from 'framer-motion';
+import { AnimatePresence, Variants, m } from 'framer-motion';
+import { Suspense, lazy, useRef } from 'preact/compat';
+import { HEADER_HEIGHT } from '~/chatbot.constants';
 
-import { useChatbotStore } from '../chatbot.state';
+import { application, viewState } from '../chatbot.state';
 import { ChatbotHeader } from './chatbot-header';
-import { JobApplicationContent } from './job-application-content';
-import { TransitionState } from './transition';
+
+const JobApplicationContent = lazy(() =>
+	import('./job-application-content').then(module => module.JobApplicationContent),
+);
+
+const MotionProvider = ({ children }: { children: JSX.Element }) => {
+	return <LazyMotion features={domAnimation}>{children}</LazyMotion>;
+};
+
+const chatbotVariants: Variants = {
+	closed: { y: 'calc(100% + 1rem)', height: HEADER_HEIGHT },
+	maximised: { y: 0, height: '75vh' },
+	minimised: { y: 0, height: HEADER_HEIGHT },
+};
 
 type ChatbotProps = {
 	apiClient: ApiClient;
-	logger?: Logger;
+	logger: Logger;
+	analytics: AnalyticsService;
 };
-export const Chatbot = ({ logger, apiClient }: ChatbotProps) => {
-	const { currentApplication, viewState } = useChatbotStore();
-	const isOpen = currentApplication !== null;
-	const overlayRef = useRef<HTMLDivElement>(null);
-	const chatRef = useRef<HTMLDivElement>(null);
+export const Chatbot = ({ logger, apiClient, analytics }: ChatbotProps) => {
+	const currentApplication = application.current$.value;
+	const isApplying = currentApplication !== null;
+	const view = viewState.value;
+
+	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 (
-		<>
-			<Transition nodeRef={overlayRef} in={isOpen && viewState === 'maximised'} timeout={100}>
-				{(state: TransitionState) => {
-					if (state === 'exited') return null;
-					return <div ref={overlayRef} data-transition={state} class={overlayClassNames} />;
-				}}
-			</Transition>
-			<Transition appear={true} nodeRef={chatRef} in={isOpen} timeout={0}>
-				{(state: TransitionState) => {
-					if (state === 'exited') return null;
-					return (
-						<div
-							ref={chatRef}
-							style={{ '--header-height': '44px' }}
-							data-transition={state}
-							data-state={viewState}
-							class="isolate h-[75vh] h-[75lvh] data-[transition=entered]:translate-y-0 data-[transition=entered]:data-[state=minimised]:translate-y-[calc(100%-var(--header-height)-0.5rem)] transition-transform ease-expo-out duration-500 translate-y-full fixed left-0 right-0 mx-auto w-full max-w-[450px] bottom-0 p-2 max-h-full overflow-hidden focus:outline-none"
+		<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}
+
+				{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}
 						>
-							<div class="outline outline-1 h-full outline-neutral-5 max-h-full relative flex flex-col bg-neutral-2 rounded-3xl overflow-hidden">
-								{currentApplication && (
-									<>
-										<ChatbotHeader application={currentApplication} />
-										<JobApplicationContent application={currentApplication} apiClient={apiClient} logger={logger} />
-									</>
-								)}
-							</div>
-						</div>
-					);
-				}}
-			</Transition>
-		</>
+							<ChatbotHeader currentApplication={currentApplication} />
+
+							<Suspense fallback={<div>loading…</div>}>
+								<JobApplicationContent
+									analytics={analytics}
+									currentApplication={currentApplication}
+									apiClient={apiClient}
+									logger={logger}
+								/>
+							</Suspense>
+						</FocusScope>
+					</m.div>
+				) : null}
+			</AnimatePresence>
+		</MotionProvider>
 	);
 };