@inploi/plugin-chatbot 1.0.7 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @inploi/plugin-chatbot
 
+## 2.0.0
+
+### Patch Changes
+
+- 2975c09: Replace `zustand` with `idb-keyval` and `@preact/signals` to better utilise indexeddb and reduce bundle size
+- cc46781: Track started applications via the new `analytics` service exposed by sdk
+- Updated dependencies [d8dc36f]
+- Updated dependencies [d8dc36f]
+  - @inploi/sdk@1.5.0
+  - @inploi/core@1.5.6
+
 ## 1.0.7
 
 ### Patch Changes

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@inploi/plugin-chatbot",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "type": "module",
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
+    "@preact/signals": "^1.2.2",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-focus-guards": "^1.0.1",
+    "@radix-ui/react-focus-scope": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "framer-motion": "^10.16.5",
     "idb-keyval": "^6.2.1",
-    "immer": "^10.0.3",
     "preact": "^10.16.0",
     "react": "npm:@preact/compat",
     "react-dom": "npm:@preact/compat",
     "react-hook-form": "^7.48.2",
+    "react-remove-scroll": "^2.5.7",
     "react-transition-group": "^4.4.5",
     "swr": "^2.2.4",
     "tailwindcss-touch": "^1.0.1",
     "ts-pattern": "^5.0.5",
-    "vaul": "^0.7.8",
-    "zod": "^3.22.0",
-    "zustand": "^4.4.4",
-    "@inploi/core": "1.5.5"
+    "valibot": "^0.21.0",
+    "@inploi/core": "1.5.6"
   },
   "peerDependencies": {
     "@inploi/sdk": "*"
@@ -42,7 +46,7 @@
     "typescript": "^5.3.2",
     "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.1",
-    "@inploi/sdk": "1.4.6",
+    "@inploi/sdk": "1.5.0",
     "eslint-config-custom": "0.1.0",
     "tsconfig": "0.1.0"
   },

package/src/chatbot.api.ts

@@ -1,6 +1,6 @@
-import { FlowNode, FlowNodeSchema } from '@inploi/core/flows';
+import { FlowNode } from '@inploi/core/flows';
 import { ApiClient } from '@inploi/sdk';
-import z from 'zod';
+import { any, array, coerce, number, object, optional, parse, string } from 'valibot';
 
 export type JobApplication = {
 	job: {
@@ -18,19 +18,19 @@ export type JobApplication = {
 	};
 };
 
-const ApplicationFlowSchema = z.object({
-	job: z.object({
-		id: z.coerce.string(),
-		title: z.string(),
+const ApplicationSchema = object({
+	job: object({
+		id: coerce(string(), String),
+		title: string(),
 	}),
-	company: z.object({
-		name: z.string(),
-		logo: z.string().optional(),
+	company: object({
+		name: string(),
+		logo: optional(string()),
 	}),
-	flow: z.object({
-		id: z.coerce.string(),
-		nodes: z.array(FlowNodeSchema),
-		version: z.number(),
+	flow: object({
+		id: coerce(string(), String),
+		nodes: array(any()),
+		version: number(),
 	}),
 });
 
@@ -42,5 +42,5 @@ export async function getApplicationData({
 	apiClient: ApiClient;
 }): Promise<JobApplication> {
 	const rawData = await apiClient.fetch(`/flow/job/${jobId}`);
-	return ApplicationFlowSchema.parse(rawData);
+	return parse(ApplicationSchema, rawData);
 }

package/src/chatbot.constants.ts

@@ -1,6 +1,9 @@
 export const CHATBOT_ELEMENT_ID = 'isdk';
 
+export const HEADER_HEIGHT = 44;
+
 export const ERROR_MESSAGES = {
+	not_in_local_storage: 'Application not found in local storage',
 	invalid_end_node: 'Unexpected node type to finish flow',
 	no_submissions: 'Application ended without any fields submitted',
 };

package/src/chatbot.css

@@ -79,7 +79,7 @@
 			box-sizing: border-box;
 		}
 
-		:is(ul) {
+		:is(ul, ol) {
 			list-style: none;
 			padding: 0;
 			margin: 0;
@@ -90,11 +90,18 @@
 			padding: 0;
 		}
 
+		:is(li) {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
+
 		:is(button) {
 			margin: 0;
 			padding: 0;
 			border: unset;
 			background: unset;
+			text-align: unset;
 		}
 	}
 }

package/src/chatbot.dom.ts

@@ -1,8 +1,5 @@
 import { CHATBOT_ELEMENT_ID } from './chatbot.constants';
 
-export const overlayClassNames =
-	'data-[transition=entering]:opacity-0 data-[transition=exiting]:opacity-0 ease-expo-out duration-500 transition-opacity bg-neutral-12/60 fixed inset-0';
-
 export const createChatbotDomManager = () => {
 	let chatbotElement: HTMLDivElement | null = null;
 	return {
@@ -15,9 +12,6 @@ export const createChatbotDomManager = () => {
 			chatbotElement = newElement;
 			return newElement;
 		},
-		renderLoading: (element: HTMLElement) => {
-			element.innerHTML = `<div class="${overlayClassNames}" />`;
-		},
 	};
 };
 export type ChatbotDomManager = ReturnType<typeof createChatbotDomManager>;

package/src/chatbot.idb.ts

@@ -0,0 +1,17 @@
+import { createStore, get, set } from 'idb-keyval';
+
+import { JobApplication } from './chatbot.api';
+import { ApplicationData, getCacheKey } from './chatbot.state';
+
+const store = createStore('inploi', 'applications');
+
+export const idb = {
+	getApplicationData: async (application: JobApplication) => {
+		const key = getCacheKey(application);
+		return await get<ApplicationData>(key, store);
+	},
+	setApplicationData: async (params: { application: JobApplication; data: ApplicationData }) => {
+		const key = getCacheKey(params.application);
+		return await set(key, params.data, store);
+	},
+};

package/src/chatbot.state.ts

@@ -1,52 +1,59 @@
-import { del, get, set } from 'idb-keyval';
-import { produce } from 'immer';
-import { create } from 'zustand';
-import { StateStorage, createJSONStorage, persist } from 'zustand/middleware';
+import { invariant } from '@inploi/core/common';
+import { Signal, batch, signal } from '@preact/signals';
 
 import { JobApplication } from './chatbot.api';
+import { idb } from './chatbot.idb';
 import { DistributivePick, getHeadOrThrow } from './chatbot.utils';
 import { ChatInput } from './ui/chat-input/chat-input';
 import { ChatbotInput } from './ui/chat-input/chat-input';
 
-const storage: StateStorage = {
-	getItem: async (name: string): Promise<string | null> => {
-		return (await get(name)) || null;
-	},
-	setItem: async (name: string, value: string): Promise<void> => {
-		await set(name, value);
-	},
-	removeItem: async (name: string): Promise<void> => {
-		await del(name);
-	},
-};
+export const getCacheKey = (application: JobApplication) =>
+	[application.job.id, application.flow.id, application.flow.version].join('/');
 
 export type ViewState = 'maximised' | 'minimised';
+export const viewState = signal<ViewState>('maximised');
 
-type ChatbotStore = {
-	currentApplication: (JobApplication & { startedAt: string }) | null;
-	viewState: ViewState;
-	startApplication: (application: JobApplication) => void;
-	cancelCurrentApplication: () => void;
-	setViewState: (newViewState: ViewState) => void;
+export const inputHeight = signal(0);
+
+export type StartedJobApplication = JobApplication & { data: ApplicationData };
+const currentApplication: Signal<StartedJobApplication | null> = signal<StartedJobApplication | null>(null);
+export const cancelCurrentApplication = () => {
+	currentApplication.value = null;
 };
 
-export const useChatbotStore = create<ChatbotStore>((set, get) => ({
-	currentApplication: null,
-	viewState: 'maximised',
-	startApplication: application => {
-		// if the application is already running, just maximise it
-		if (get().currentApplication?.job.id === application.job.id) return set({ viewState: 'maximised' });
-		return set({ currentApplication: { ...application, startedAt: new Date().toISOString() }, viewState: 'maximised' });
-	},
-	cancelCurrentApplication: () => set({ currentApplication: null }),
-	setViewState: viewState => set({ viewState }),
-}));
+const updateApplicationData = async (updateFn: (data: ApplicationData) => ApplicationData) => {
+	const application = currentApplication.value;
+	invariant(application, 'No application to update');
+	const newData = updateFn(application.data);
+	currentApplication.value = { ...application, data: newData };
+	await idb.setApplicationData({ application, data: newData });
+};
 
-/** Returns the current application or throws if no application has been set. */
-export const useCurrentJobApplication = () => {
-	const application = useChatbotStore(s => s.currentApplication);
-	if (!application) throw new Error('No current application found');
-	return application;
+export const application = {
+	current$: currentApplication,
+	start: async (application: JobApplication) => {
+		const data = (await idb.getApplicationData(application)) ?? createNewApplicationData(application);
+		batch(() => {
+			viewState.value = 'maximised';
+			currentApplication.value = { ...application, data };
+		});
+		data.isFinished = false;
+		idb.setApplicationData({ application, data });
+	},
+	markAsFinished: () => updateApplicationData(data => ({ ...data, isFinished: true })),
+	setCurrentNodeId: (currentNodeId: string) => updateApplicationData(data => ({ ...data, currentNodeId })),
+	restart: () => {
+		const application = currentApplication.value;
+		invariant(application, 'No application to restart');
+		const data = createNewApplicationData(application);
+		currentApplication.value = { ...application, data };
+		idb.setApplicationData({ application, data });
+	},
+	addMessage: (message: ChatMessage) =>
+		updateApplicationData(data => ({ ...data, messages: [...data.messages, message] })),
+	setSubmission: (fieldKey: string, submission: ApplicationSubmission) =>
+		updateApplicationData(data => ({ ...data, submissions: { ...data.submissions, [fieldKey]: submission } })),
+	setInput: (input: ChatInput | undefined) => updateApplicationData(data => ({ ...data, currentInput: input })),
 };
 
 export type MessageAuthor = 'bot' | 'user';
@@ -63,8 +70,8 @@ export type KeyToSubmissionMap = {
 	[key: string]: ApplicationSubmission;
 };
 
-/** Local state saved for an application */
-export type ApplicationLocalState = {
+/** Dynamic part of an application */
+export type ApplicationData = {
 	/** History of messages left in the chat */
 	messages: ChatMessage[];
 	submissions: KeyToSubmissionMap;
@@ -74,107 +81,9 @@ export type ApplicationLocalState = {
 	isFinished: boolean;
 };
 
-type ApplicationsStore = {
-	applicationsLocalState: Record<string, ApplicationLocalState>;
-	getApplicationLocalState: (application: JobApplication) => ApplicationLocalState | undefined;
-	updateApplicationLocalState: (params: { application: JobApplication; data: Partial<ApplicationLocalState> }) => void;
-	updateApplicationCurrentNode: (params: { application: JobApplication; currentNodeId: string }) => void;
-	resetApplicationState: (application: JobApplication) => void;
-	updateSubmission: (params: { application: JobApplication; fieldKey: string; data: ApplicationSubmission }) => void;
-	addMessage: (params: { application: JobApplication; data: ChatMessage }) => void;
-	resetLocalState: () => void;
-	setInput: (params: { application: JobApplication; data: ChatInput | null }) => void;
-	resetInput: (params: { application: JobApplication }) => void;
-};
-
-const getOrCreateApplication = (params: { application: JobApplication }, state: ApplicationsStore) => {
-	const existingApplication = state.applicationsLocalState[getCacheKey(params.application)];
-	if (existingApplication) return existingApplication;
-	const newApplication: ApplicationLocalState = {
-		messages: [],
-		submissions: {},
-		currentNodeId: getHeadOrThrow(params.application.flow.nodes).id,
-		isFinished: false,
-	};
-	state.applicationsLocalState[getCacheKey(params.application)] = newApplication;
-	return newApplication;
-};
-
-export const getCacheKey = (application: JobApplication) =>
-	[application.job.id, application.flow.id, application.flow.version].join('/');
-
-export const useLocalState = create<ApplicationsStore>()(
-	persist(
-		(set, get) => ({
-			applicationsLocalState: {},
-			getApplicationLocalState: application => get().applicationsLocalState[getCacheKey(application)],
-			updateApplicationLocalState: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const existingApplication = state.applicationsLocalState[getCacheKey(params.application)];
-						if (!existingApplication) throw new Error('Application not found');
-						Object.assign(existingApplication, params.data);
-					}),
-				),
-			updateApplicationCurrentNode: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.currentNodeId = params.currentNodeId;
-					}),
-				),
-			resetApplicationState: application =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const cacheKey = getCacheKey(application);
-						delete state.applicationsLocalState[cacheKey];
-					}),
-				),
-			updateSubmission: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.submissions[params.fieldKey] = params.data;
-					}),
-				),
-			addMessage: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.messages.push(params.data);
-						state.applicationsLocalState[getCacheKey(params.application)] = application;
-					}),
-				),
-			resetLocalState: () => set({ applicationsLocalState: {} }),
-			resetInput: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.currentInput = undefined;
-					}),
-				),
-			setInput: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.currentInput = params.data ?? undefined;
-					}),
-				),
-		}),
-		{
-			name: 'inploi-chatbot-application',
-			storage: createJSONStorage(() => storage),
-			// only store the jobApplications part of the state
-			partialize: state => ({ applicationsLocalState: state.applicationsLocalState }),
-		},
-	),
-);
-
-export const useApplicationLocalState = (application: JobApplication) =>
-	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]);
-
-export const useApplicationInput = (application: JobApplication) =>
-	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]?.currentInput);
-
-export const useApplicationSubmission = (application: JobApplication, key: string) =>
-	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]?.submissions[key]);
+const createNewApplicationData = (application: JobApplication): ApplicationData => ({
+	messages: [],
+	submissions: {},
+	currentNodeId: getHeadOrThrow(application.flow.nodes).id,
+	isFinished: false,
+});

package/src/chatbot.ts

@@ -1,10 +1,11 @@
 import { createPlugin } from '@inploi/sdk';
 import { h, render } from 'preact';
+import { Chatbot } from '~/ui/chatbot';
 
 import { getApplicationData } from './chatbot.api';
 import './chatbot.css';
 import { ChatbotDomManager, createChatbotDomManager } from './chatbot.dom';
-import { useChatbotStore, useLocalState } from './chatbot.state';
+import { application, cancelCurrentApplication } from './chatbot.state';
 
 export const chatbotPlugin = ({
 	_internal_domManager: dom = createChatbotDomManager(),
@@ -12,15 +13,20 @@ export const chatbotPlugin = ({
 	geolocationApiKey?: string;
 	_internal_domManager?: ChatbotDomManager;
 }) =>
-	createPlugin(({ apiClient, logger }) => {
-		const { resetLocalState } = useLocalState.getState();
-		const { startApplication, cancelCurrentApplication } = useChatbotStore.getState();
+	createPlugin(({ apiClient, logger, analytics }) => {
+		let prepared = false;
+		const renderAndPrepare = () => {
+			const chatbotElement = dom.getOrCreateChatbotElement();
+			render(h(Chatbot, { apiClient, logger, analytics }), chatbotElement);
+			prepared = true;
+		};
 
 		return {
-			/** Optionally eagerly loads the code to handle applications. */
+			/** Optionally eagerly renders the interface ahead of application requests. */
 			prepare: async () => {
 				try {
-					await import('~/ui/chatbot');
+					if (prepared) return;
+					renderAndPrepare();
 					logger.info('Chatbot plugin prepared');
 				} catch (error) {
 					console.error(error);
@@ -29,40 +35,19 @@ export const chatbotPlugin = ({
 			},
 			startApplication: async ({ jobId }: { jobId: string }) => {
 				try {
-					const chatbotElement = dom.getOrCreateChatbotElement();
 					cancelCurrentApplication();
+					const applicationData = await getApplicationData({ jobId, apiClient });
 
-					dom.renderLoading(chatbotElement);
-
-					/** We concurrently lazy load the module and data */
-					const [dataPromise, chatbotPromise] = await Promise.allSettled([
-						getApplicationData({ jobId, apiClient }),
-						import('~/ui/chatbot').then(m => m.Chatbot),
-					]);
-
-					if (dataPromise.status === 'rejected') throw dataPromise.reason;
-					if (chatbotPromise.status === 'rejected') throw chatbotPromise.reason;
+					await application.start(applicationData);
 
-					const Chatbot = chatbotPromise.value;
-					const application = dataPromise.value;
-					startApplication(application);
-					logger.info(`Starting application for job "${application.job.id}" using flow "${application.flow.id}"`);
-					chatbotElement.innerHTML = '';
-
-					render(h(Chatbot, { apiClient, logger }), chatbotElement);
+					if (!prepared) renderAndPrepare();
 				} catch (error) {
 					console.error(error);
 					logger.error('Error starting application', error);
 				}
 			},
 			closeApplication: async () => {
-				const chatbotElement = dom.getOrCreateChatbotElement();
-				chatbotElement.innerHTML = '';
-				cancelCurrentApplication();
-			},
-			/** Resets the user saved data for every application. */
-			resetLocalState: async () => {
-				resetLocalState();
+				logger.info('Closing application from an external source');
 				cancelCurrentApplication();
 			},
 		};

package/src/chatbot.utils.ts

@@ -1,6 +1,6 @@
 import { FlowNode } from '@inploi/core/flows';
 
-import { ApplicationSubmission, KeyToSubmissionMap } from './chatbot.state';
+import { ApplicationSubmission, KeyToSubmissionMap, StartedJobApplication } from './chatbot.state';
 
 export type DistributivePick<T, K extends keyof T> = T extends unknown ? Pick<T, K> : never;
 
@@ -10,14 +10,26 @@ export const getHeadOrThrow = (nodes: FlowNode[]) => {
 	return head;
 };
 
-export const submissionsToPayload = (submissions: KeyToSubmissionMap) => {
-	return Object.entries(submissions).reduce(
-		(acc, [key, submission]) => {
-			acc[key] = submission.value;
-			return acc;
-		},
-		{} as Record<string, ApplicationSubmission['value']>,
-	);
+export const submissionsToPayload = ({
+	application,
+	submissions,
+}: {
+	application: StartedJobApplication;
+	submissions: KeyToSubmissionMap;
+}) => {
+	const payload = {
+		flowId: application.flow.id,
+		jobId: application.job.id,
+		submissions: Object.entries(submissions).reduce(
+			(acc, [key, submission]) => {
+				acc[key] = submission.value;
+				return acc;
+			},
+			{} as Record<string, ApplicationSubmission['value']>,
+		),
+	};
+
+	return payload;
 };
 
 export const isSubmissionOfType =

package/src/index.dev.ts

@@ -25,6 +25,12 @@ enableMocking().then(() => {
 			publishableKey: import.meta.env.VITE_PUBLISHABLE_KEY,
 		}),
 		logger: inploiBrandedLogger,
+		analytics: {
+			log: async params => {
+				inploiBrandedLogger.log('stub logging', params);
+				return { success: true, data: {} } as any;
+			},
+		},
 	});
 	window.chatbot.prepare();
 });

package/src/mocks/example.flows.ts

@@ -160,7 +160,7 @@ const fromAlex: FlowNode[] = [
 					value: '30+ hours',
 				},
 			],
-			maxSelected: 1,
+			maxSelected: 3,
 			minSelected: 1,
 		},
 	},

package/src/ui/chat-bubble.tsx

@@ -1,14 +1,16 @@
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
+import { Variants, m } from 'framer-motion';
 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',
+	'max-w-[min(100%,24rem)] flex-shrink-1 min-w-[2rem] text-md py-2 px-3 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',
+				left: 'bg-lowest text-neutral-12 shadow-surface-md outline outline-1 outline-accent-11/[.08] rounded-bl-md',
+				right:
+					'ml-auto bg-gradient-to-t from-[#2D51D2] to-[#4A7BEC] border border-[#405FCC] shadow-[inset_0_5px_3px_-3px_#6F99F1,inset_0_-5px_5px_-2px_#6F99F1DD,0_4px_6px_-1px_rgb(0_0_0_/_0.1),_0_2px_4px_-2px_rgb(0_0_0_/_0.1)] text-lowest rounded-br-md bubble-right',
 			},
 			transitionState: {
 				entering: 'opacity-0 translate-y-8',
@@ -26,11 +28,25 @@ const chatBubbleVariants = cva(
 
 type ChatBubbleVariants = VariantProps<typeof chatBubbleVariants>;
 
+const motionVariants: Variants = {
+	hidden: { y: '100%', scale: 0.75 },
+	shown: { y: 0, scale: 1 },
+};
+
 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}>
+		<m.p
+			variants={motionVariants}
+			initial="hidden"
+			animate="shown"
+			transition={{ type: 'spring', damping: 25, stiffness: 500 }}
+			data-transition={transitionState}
+			style={{ transformOrigin: side === 'left' ? '0% 50%' : '100% 50%' }}
+			class={chatBubbleVariants({ className, side, transitionState })}
+			{...props}
+		>
 			{children}
-		</p>
+		</m.p>
 	);
 };

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

@@ -1,6 +1,7 @@
 import { P, match } from 'ts-pattern';
-import { z } from 'zod';
+import { parse, picklist } from 'valibot';
 
+import { useFocusOnMount } from '../useFocus';
 import { ChatInputProps } from './chat-input';
 
 export type BooleanChoicePayload = {
@@ -11,12 +12,15 @@ export type BooleanChoicePayload = {
 };
 
 const options = ['true', 'false'] as const;
-const AnswerSchema = z.enum(options);
+const AnswerSchema = picklist(options);
 const FIELD_NAME = 'answer';
 
 export const ChatInputBoolean = ({ input, onSubmitSuccess }: ChatInputProps<'boolean'>) => {
+	const focusRef = useFocusOnMount();
+
 	return (
 		<form
+			noValidate
 			class="flex gap-2 items-center"
 			onSubmit={e => {
 				e.preventDefault();
@@ -36,19 +40,20 @@ export const ChatInputBoolean = ({ input, onSubmitSuccess }: ChatInputProps<'boo
 					.otherwise(() => {
 						throw new Error('invalid form');
 					});
-				const answer = AnswerSchema.parse(value);
+				const answer = parse(AnswerSchema, value);
 				onSubmitSuccess(answer);
 			}}
 		>
-			{options.map(value => {
+			{options.map((value, i) => {
 				return (
 					<button
+						ref={i === 0 ? focusRef : null}
 						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>
+						<p class="truncate text-center text-base">{input.config.labels[value]}</p>
 					</button>
 				);
 			})}