@inploi/plugin-chatbot 1.0.7 → 2.1.0

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

@@ -1,11 +1,11 @@
-import { ApiClient, Logger } from '@inploi/sdk';
-import { useLayoutEffect, useRef } from 'react';
+import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
+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,45 +13,62 @@ 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();
+
+	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 { state, application: currentApplication } = application.current$.value;
+		if (state !== 'loaded' || currentApplication.data.isFinished) return;
 
 		const { interpret, abort } = createFlowInterpreter({
-			flow: application.flow.nodes,
+			flow: currentApplication.flow.nodes,
 			chatService,
-			getSubmissions: () => getApplicationLocalState(application)?.submissions,
+			getSubmissions: () => application.current$.peek().application?.data.submissions,
 			beforeStart: async node => {
-				setInput({ application, data: null });
+				application.setInput(undefined);
 
-				const isResuming = !node.isHead;
-				if (isResuming) {
-					await chatService.send({
-						message: {
-							type: 'system',
-							text: 'Restored in progress application',
-							variant: 'info',
+				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 {
+					// We restart the last node.
+					const restoredFromId = node.id;
+					application.removeLastGroupMessagesById(restoredFromId);
 				}
 			},
 			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({
@@ -60,15 +77,16 @@ export const JobApplicationContent = ({ application, logger, apiClient }: JobApp
 								text: 'Application ended',
 								variant: 'success',
 							},
+							groupId: 'system',
 						});
 					})
 					.with({ type: 'complete-flow' }, async () => {
-						const submissions = getApplicationLocalState(application)?.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/${application.job.id}`, {
+						const response = await apiClient.fetch(`/flow/apply`, {
 							method: 'POST',
-							body: JSON.stringify(submissionsToPayload(submissions)),
+							body: JSON.stringify(submissionsToPayload({ application: currentApplication, submissions })),
 						});
 
 						match(response)
@@ -79,44 +97,48 @@ export const JobApplicationContent = ({ application, logger, apiClient }: JobApp
 										text: 'Application submitted',
 										variant: 'success',
 									},
+									groupId: 'system',
 								});
 							})
 							.otherwise(response => {
-								logger?.error(response);
+								logger.error(response);
 								chatService.send({
 									message: {
 										type: 'system',
 										text: 'Error submitting application',
 										variant: 'error',
 									},
+									groupId: 'system',
 								});
 							});
 					})
 					.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
+				input={currentApplication.data.currentInput}
+				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/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,21 +1,15 @@
-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 { 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 = {
-	chatRef: Ref<HTMLDivElement>;
-	application: JobApplication;
-	logger?: Logger;
-};
-
-export const useChatService = ({ logger, application, chatRef }: UseChatServiceParams) => {
+export const useChatService = () => {
+	const chatRef = useRef<HTMLDivElement>(null);
 	const [isBotTyping, setIsBotTyping] = useState(false);
 	const [onSubmitSuccessFn, setOnSubmitSuccessFn] = useState<SubmitSuccessFn>(() => () => {});
 	const scrollToEnd = useMemo(
@@ -25,18 +19,14 @@ export const useChatService = ({ logger, application, chatRef }: UseChatServiceP
 	);
 
 	const chatService = useMemo(() => {
-		const { setInput, updateSubmission, addMessage } = useLocalState.getState();
 		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 });
 						});
@@ -45,24 +35,18 @@ export const useChatService = ({ logger, application, chatRef }: UseChatServiceP
 					.otherwise(async () => void 0);
 
 				/** The signal could have been aborted while typing */
-				if (signal?.aborted) {
-					logger?.info(`Aborted sending message`);
-					return;
-				}
-				addMessage({ application, data: message });
-				scrollToEnd({ behavior: 'smooth' });
+				if (signal?.aborted) throw new AbortedError();
+				application.addMessage(message, groupId);
 			},
-			input: async input => {
-				setInput({ application, data: input });
+			input: async ({ input, signal }) => {
+				if (signal?.aborted) throw new AbortedError();
+				application.setInput(input);
 
 				return await new Promise(resolve => {
 					const submitFunction: SubmitSuccessFn = submission => {
-						setInput({ application, data: null });
-						updateSubmission({
-							application,
-							fieldKey: input.key,
-							data: submission,
-						});
+						if (signal?.aborted) throw new AbortedError();
+						application.setInput(undefined);
+						application.setSubmission(input.key, submission);
 						resolve(submission as any);
 					};
 					setOnSubmitSuccessFn(() => submitFunction);
@@ -71,9 +55,10 @@ export const useChatService = ({ logger, application, chatRef }: UseChatServiceP
 		};
 
 		return chatService;
-	}, [application, logger, scrollToEnd]);
+	}, []);
 
 	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;
+};

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" }]
 }