@inploi/plugin-chatbot 1.0.7 → 2.1.0

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.application?.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.application?.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"
@@ -94,7 +100,7 @@ export const ChatInputText = ({ input, onSubmitSuccess, application }: ChatInput
 						}
 						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

@@ -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;
+	input: ChatInputType | undefined;
 	onInputChange: (input?: ChatInputType['type']) => void;
 };
-export const ChatInput = ({ onSubmit, application, onInputChange }: ChatInputFactoryProps) => {
-	const input = useApplicationInput(application);
+export const ChatInput = ({ onSubmit, onInputChange, input }: ChatInputFactoryProps) => {
+	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 { ComponentChildren, ComponentProps } from 'preact';
 
-import { useChatbotStore, useLocalState } from '../chatbot.state';
+import { application, 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,36 +29,42 @@ 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 = ({ children }: { children?: ComponentChildren }) => {
+	const view = viewState.value;
 
 	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">
+				{children}
+			</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">
+					{children}
 				</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>
-						<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>
 					</>
@@ -70,15 +74,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,94 @@
-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 * 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 { 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 { state, application: currentApplication } = application.current$.value;
+	const view = viewState.value;
+	const isApplying = state === 'loaded' && view === 'maximised';
+	const drawerRef = useRef<HTMLDivElement>(null);
+
 	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>
+			<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>
+
+					<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"
 						>
-							<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 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>}>
+									{view === 'maximised' && state === 'loaded' && (
+										<JobApplicationContent
+											analytics={analytics}
+											currentApplication={currentApplication}
+											apiClient={apiClient}
+											logger={logger}
+										/>
+									)}
+								</Suspense>
 							</div>
-						</div>
-					);
-				}}
-			</Transition>
-		</>
+						</m.div>
+					</Dialog.Content>
+				</AnimatePresence>
+			</Dialog.Root>
+		</MotionProvider>
 	);
 };

package/src/ui/input-error.tsx

@@ -1,39 +1,33 @@
-import { Ref } from 'preact';
+import { AnimatePresence, m } from 'framer-motion';
 import type { FieldError } from 'react-hook-form';
-import { Transition } from 'react-transition-group';
-
-import { TransitionState } from './transition';
 
 export const InputError = ({ error }: { error?: FieldError }) => {
 	return (
-		<Transition in={Boolean(error)} timeout={15}>
-			{(state: TransitionState) => {
-				if (!error) return null;
-
-				return (
-					<div
-						ref={error.ref as Ref<HTMLDivElement> | undefined}
-						data-transition={state}
-						role="alert"
-						class="transition-all opacity-0 ease-expo-out duration-300 translate-y-1/2 data-[transition=entered]:opacity-100 data-[transition=entered]:translate-y-0 p-0.5 px-1 rounded-full overflow-hidden flex items-center max-w-full gap-1 text-error-11"
+		<AnimatePresence>
+			{error && (
+				<m.div
+					initial={{ scale: 0.5, opacity: 0 }}
+					animate={{ scale: 1, opacity: 1 }}
+					exit={{ scale: 0, opacity: 0 }}
+					role="alert"
+					class="opacity-0 p-0.5 px-1 rounded-full overflow-hidden flex items-center max-w-full gap-1 text-error-11"
+				>
+					<svg
+						class="text-error-10"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
 					>
-						<svg
-							class="text-error-10"
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<circle cx="8" cy="8" r="6.3" stroke="currentColor" stroke-width="1.4" />
-							<rect x="7" y="4" width="2" height="5" fill="currentColor" />
-							<rect x="7" y="10" width="2" height="2" fill="currentColor" />
-						</svg>
+						<circle cx="8" cy="8" r="6.3" stroke="currentColor" stroke-width="1.4" />
+						<rect x="7" y="4" width="2" height="5" fill="currentColor" />
+						<rect x="7" y="10" width="2" height="2" fill="currentColor" />
+					</svg>
 
-						<p class="text-sm truncate pr-1">{error.message}</p>
-					</div>
-				);
-			}}
-		</Transition>
+					<p class="text-sm truncate pr-1">{error.message}</p>
+				</m.div>
+			)}
+		</AnimatePresence>
 	);
 };