@inploi/plugin-chatbot 1.0.7 → 2.0.0

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>
 	);
 };

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

@@ -1,11 +1,12 @@
-import { ApiClient, Logger } from '@inploi/sdk';
-import { useLayoutEffect, useRef } from 'react';
+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';
-import { JobApplication } from '~/chatbot.api';
+import { StartedJobApplication, application, inputHeight, viewState } from '~/chatbot.state';
 import { submissionsToPayload } from '~/chatbot.utils';
 
 import { ERROR_MESSAGES } from '../chatbot.constants';
-import { useApplicationLocalState, useLocalState } from '../chatbot.state';
 import { createFlowInterpreter } from '../interpreter/interpreter';
 import { ChatInput } from './chat-input/chat-input';
 import { JobApplicationMessages } from './job-application-messages';
@@ -13,31 +14,55 @@ import { useChatService } from './useChatService';
 
 type JobApplicationContentProps = {
 	apiClient: ApiClient;
-	logger?: Logger;
-	application: JobApplication;
+	logger: Logger;
+	currentApplication: StartedJobApplication;
+	analytics: AnalyticsService;
 };
 
-export const JobApplicationContent = ({ application, logger, apiClient }: JobApplicationContentProps) => {
-	const currentApplicationLocalState = useApplicationLocalState(application);
-	const chatRef = useRef<HTMLDivElement>(null);
-	const { chatService, isBotTyping, onSubmitSuccessFn, scrollToEnd } = useChatService({ application, chatRef, logger });
+export const JobApplicationContent = ({
+	currentApplication,
+	logger,
+	apiClient,
+	analytics,
+}: JobApplicationContentProps) => {
+	const { chatRef, chatService, isBotTyping, onSubmitSuccessFn, scrollToEnd } = useChatService({
+		logger,
+	});
+
+	useFocusGuards();
+
+	const view = viewState.value;
+	useLayoutEffect(() => {
+		// This significantly improves performance for maximising the view
+		if (view === 'maximised') scrollToEnd({ behavior: 'instant' });
+	}, [scrollToEnd, view]);
+
+	useEffect(() => {
+		scrollToEnd({ behavior: 'smooth' });
+	}, [currentApplication.data.messages, scrollToEnd]);
 
 	useLayoutEffect(() => {
-		const { getApplicationLocalState, setInput, updateApplicationLocalState, updateApplicationCurrentNode } =
-			useLocalState.getState();
-		const applicationLocalState = getApplicationLocalState(application);
 		scrollToEnd({ behavior: 'instant' });
-		if (applicationLocalState?.isFinished) return;
+		const currentApplication = application.current$.peek();
+		if (!currentApplication || currentApplication.data.isFinished) return;
 
 		const { interpret, abort } = createFlowInterpreter({
-			flow: application.flow.nodes,
+			flow: currentApplication.flow.nodes,
 			chatService,
-			getSubmissions: () => getApplicationLocalState(application)?.submissions,
-			beforeStart: async node => {
-				setInput({ application, data: null });
+			getSubmissions: () => application.current$.peek()?.data.submissions,
+			beforeStart: async () => {
+				application.setInput(undefined);
 
-				const isResuming = !node.isHead;
-				if (isResuming) {
+				const fromBeginning = currentApplication.data.messages.length === 0;
+				if (fromBeginning) {
+					analytics.log({
+						event: 'APPLY_START',
+						properties: { job_id: currentApplication.job.id },
+						customProperties: {
+							flow_id: currentApplication.flow.id,
+						},
+					});
+				} else {
 					await chatService.send({
 						message: {
 							type: 'system',
@@ -48,10 +73,10 @@ export const JobApplicationContent = ({ application, logger, apiClient }: JobApp
 				}
 			},
 			onInterpret: node => {
-				updateApplicationCurrentNode({ application, currentNodeId: node.id });
+				application.setCurrentNodeId(node.id);
 			},
 			onFlowEnd: async lastNode => {
-				updateApplicationLocalState({ application, data: { isFinished: true } });
+				application.markAsFinished();
 				return match(lastNode)
 					.with({ type: 'abandon-flow' }, () => {
 						chatService.send({
@@ -63,12 +88,12 @@ export const JobApplicationContent = ({ application, logger, apiClient }: JobApp
 						});
 					})
 					.with({ type: 'complete-flow' }, async () => {
-						const submissions = getApplicationLocalState(application)?.submissions;
+						const submissions = application.current$.peek()?.data.submissions;
 						if (!submissions) throw new Error(ERROR_MESSAGES.no_submissions);
 
-						const response = await apiClient.fetch(`/flow/job/${application.job.id}`, {
+						const response = await apiClient.fetch(`/flow/job/${currentApplication.job.id}`, {
 							method: 'POST',
-							body: JSON.stringify(submissionsToPayload(submissions)),
+							body: JSON.stringify(submissionsToPayload({ application: currentApplication, submissions })),
 						});
 
 						match(response)
@@ -82,7 +107,7 @@ export const JobApplicationContent = ({ application, logger, apiClient }: JobApp
 								});
 							})
 							.otherwise(response => {
-								logger?.error(response);
+								logger.error(response);
 								chatService.send({
 									message: {
 										type: 'system',
@@ -93,30 +118,28 @@ export const JobApplicationContent = ({ application, logger, apiClient }: JobApp
 							});
 					})
 					.otherwise(() => {
-						logger?.error(ERROR_MESSAGES.invalid_end_node, lastNode);
+						logger.error(ERROR_MESSAGES.invalid_end_node, lastNode);
 					});
 			},
 		});
 
-		interpret(applicationLocalState?.currentNodeId);
+		interpret(currentApplication.data.currentNodeId);
 
 		return abort;
-	}, [apiClient, application, chatService, logger, scrollToEnd]);
+	}, [analytics, apiClient, chatService, logger, scrollToEnd]);
 
 	return (
-		<div
-			ref={chatRef}
-			class="relative max-w-full flex-grow flex flex-col hide-scrollbars overflow-y-scroll"
-			style={{ WebkitOverflowScrolling: 'touch' }}
-		>
-			<JobApplicationMessages isBotTyping={isBotTyping} messages={currentApplicationLocalState?.messages ?? []} />
-			<div class="sticky bottom-0 w-full p-2 border-t border-neutral-5 rounded-b-3xl bg-neutral-4/80 backdrop-blur-md backdrop-saturate-150">
-				<ChatInput
-					onInputChange={() => scrollToEnd({ behavior: 'smooth' })}
-					application={application}
-					onSubmit={onSubmitSuccessFn}
-				/>
+		<>
+			<div
+				ref={chatRef}
+				className="relative max-w-full flex-grow flex flex-col hide-scrollbars overflow-y-scroll"
+				style={{ WebkitOverflowScrolling: 'touch', paddingBottom: inputHeight.value }}
+			>
+				<AnimatePresence>
+					<JobApplicationMessages isBotTyping={isBotTyping} messages={currentApplication.data.messages} />
+				</AnimatePresence>
 			</div>
-		</div>
+			<ChatInput onInputChange={() => scrollToEnd({ behavior: 'smooth' })} onSubmit={onSubmitSuccessFn} />
+		</>
 	);
 };

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

@@ -1,8 +1,10 @@
+import { AnimatePresence } from 'framer-motion';
 import { P, match } from 'ts-pattern';
 
 import { ChatMessage } from '../chatbot.state';
 import { ChatBubble } from './chat-bubble';
 import { FileThumbnail } from './chat-input/chat-input.file';
+// import { AnimatePresence } from './motion/animate-presence';
 import { TypingIndicator } from './typing-indicator';
 
 type JobApplicationMessagesProps = {
@@ -17,40 +19,46 @@ const authorToSide = {
 
 export const JobApplicationMessages = ({ messages, isBotTyping }: JobApplicationMessagesProps) => {
 	return (
-		<div class="p-2 pt-[calc(var(--header-height)+0.5rem)] flex flex-col gap-2 flex-grow">
-			{messages.map((message, i) =>
-				match(message)
-					.with({ type: 'system' }, message => (
-						<p key={i} class="uppercase text-[10px] text-neutral-10 tracking-widest text-center py-2">
-							{message.text}
-						</p>
-					))
-					.with({ type: 'text', author: P.union('bot', 'user') }, message => {
-						return (
-							<ChatBubble key={i} side={authorToSide[message.author]}>
-								{message.text}
-							</ChatBubble>
-						);
-					})
-					.with({ type: 'image' }, image => (
-						<img
-							key={i}
-							class="max-w-[min(100%,24rem)] w-full rounded-2xl shadow-surface-md"
-							src={image.url}
-							style={{ aspectRatio: image.width / image.height }}
-						/>
-					))
-					.with({ type: 'file' }, file => {
-						return (
-							<FileThumbnail
-								class={file.author === 'bot' ? 'self-start' : 'self-end'}
-								file={{ name: file.fileName, sizeKb: file.fileSizeKb }}
-							/>
-						);
-					})
-					.exhaustive(),
-			)}
+		<ol
+			aria-label="Chat messages"
+			class="p-2 justify-end pt-[calc(var(--header-height)+1rem)] flex flex-col gap-2 flex-grow"
+		>
+			<AnimatePresence initial={false}>
+				{messages.map((message, i) => (
+					<li class="flex" key={i}>
+						{match(message)
+							.with({ type: 'system' }, message => (
+								<p class="uppercase w-full drop-shadow-[0_1.5px_white] text-[10px] text-neutral-8 select-none tracking-widest text-center py-2">
+									{message.text}
+								</p>
+							))
+							.with({ type: 'text', author: P.union('bot', 'user') }, message => {
+								return (
+									<ChatBubble key={i} side={authorToSide[message.author]}>
+										{message.text}
+									</ChatBubble>
+								);
+							})
+							.with({ type: 'image' }, image => (
+								<img
+									class="max-w-[min(100%,24rem)] w-full rounded-2xl shadow-surface-md"
+									src={image.url}
+									style={{ aspectRatio: image.width / image.height }}
+								/>
+							))
+							.with({ type: 'file' }, file => {
+								return (
+									<FileThumbnail
+										class={file.author === 'bot' ? '' : 'ml-auto'}
+										file={{ name: file.fileName, sizeKb: file.fileSizeKb }}
+									/>
+								);
+							})
+							.exhaustive()}
+					</li>
+				))}
+			</AnimatePresence>
 			<aside aria-hidden>{isBotTyping && <TypingIndicator />}</aside>
-		</div>
+		</ol>
 	);
 };

package/src/ui/useChatService.ts

@@ -1,8 +1,7 @@
 import { Logger } from '@inploi/sdk';
-import { Ref, useMemo, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'preact/hooks';
 import { match } from 'ts-pattern';
-import { JobApplication } from '~/chatbot.api';
-import { useLocalState } from '~/chatbot.state';
+import { application } from '~/chatbot.state';
 import { ChatService } from '~/interpreter/interpreter';
 
 import { SubmitSuccessFn } from './chat-input/chat-input';
@@ -10,12 +9,11 @@ import { SubmitSuccessFn } from './chat-input/chat-input';
 const TYPING_SPEED_MS_PER_CHARACTER = 25;
 
 type UseChatServiceParams = {
-	chatRef: Ref<HTMLDivElement>;
-	application: JobApplication;
 	logger?: Logger;
 };
 
-export const useChatService = ({ logger, application, chatRef }: UseChatServiceParams) => {
+export const useChatService = ({ logger }: UseChatServiceParams) => {
+	const chatRef = useRef<HTMLDivElement>(null);
 	const [isBotTyping, setIsBotTyping] = useState(false);
 	const [onSubmitSuccessFn, setOnSubmitSuccessFn] = useState<SubmitSuccessFn>(() => () => {});
 	const scrollToEnd = useMemo(
@@ -25,7 +23,6 @@ export const useChatService = ({ logger, application, chatRef }: UseChatServiceP
 	);
 
 	const chatService = useMemo(() => {
-		const { setInput, updateSubmission, addMessage } = useLocalState.getState();
 		const chatService: ChatService = {
 			send: async ({ message, signal }) => {
 				await match(message)
@@ -49,20 +46,15 @@ export const useChatService = ({ logger, application, chatRef }: UseChatServiceP
 					logger?.info(`Aborted sending message`);
 					return;
 				}
-				addMessage({ application, data: message });
-				scrollToEnd({ behavior: 'smooth' });
+				application.addMessage(message);
 			},
 			input: async input => {
-				setInput({ application, data: input });
+				application.setInput(input);
 
 				return await new Promise(resolve => {
 					const submitFunction: SubmitSuccessFn = submission => {
-						setInput({ application, data: null });
-						updateSubmission({
-							application,
-							fieldKey: input.key,
-							data: submission,
-						});
+						application.setInput(undefined);
+						application.setSubmission(input.key, submission);
 						resolve(submission as any);
 					};
 					setOnSubmitSuccessFn(() => submitFunction);
@@ -71,9 +63,10 @@ export const useChatService = ({ logger, application, chatRef }: UseChatServiceP
 		};
 
 		return chatService;
-	}, [application, logger, scrollToEnd]);
+	}, [logger]);
 
 	return {
+		chatRef,
 		chatService,
 		isBotTyping,
 		onSubmitSuccessFn,

package/src/ui/useFocus.ts

@@ -0,0 +1,10 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+export const useFocusOnMount = () => {
+	const focusRef = useRef<any>(null);
+	useEffect(() => {
+		focusRef.current?.focus();
+	}, []);
+
+	return focusRef;
+};