@inploi/plugin-chatbot 1.0.7 → 2.1.0

package/src/chatbot.ts

@@ -1,26 +1,39 @@
 import { createPlugin } from '@inploi/sdk';
 import { h, render } from 'preact';
+import { Chatbot } from '~/ui/chatbot';
 
 import { getApplicationData } from './chatbot.api';
-import './chatbot.css';
+import tailwind from './chatbot.css?inline';
 import { ChatbotDomManager, createChatbotDomManager } from './chatbot.dom';
-import { useChatbotStore, useLocalState } from './chatbot.state';
+import { application } from './chatbot.state';
+import { formatCssVariables, generatePalette } from './style/palette';
 
 export const chatbotPlugin = ({
 	_internal_domManager: dom = createChatbotDomManager(),
+	hue,
 }: {
 	geolocationApiKey?: string;
+	hue: number;
 	_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();
+			// Add styles generated by tailwind
+			dom.addStyle(tailwind, 'inploi-chatbot-style');
+			// Add dynamic styles generated by the plugin
+			dom.addStyle(formatCssVariables(generatePalette(hue)), 'inploi-chatbot-theme');
+			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,41 +42,18 @@ export const chatbotPlugin = ({
 			},
 			startApplication: async ({ jobId }: { jobId: string }) => {
 				try {
-					const chatbotElement = dom.getOrCreateChatbotElement();
-					cancelCurrentApplication();
-
-					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),
-					]);
+					application.cancel();
+					getApplicationData({ jobId, apiClient }).then(application.start);
 
-					if (dataPromise.status === 'rejected') throw dataPromise.reason;
-					if (chatbotPromise.status === 'rejected') throw chatbotPromise.reason;
-
-					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();
-				cancelCurrentApplication();
+				logger.info('Closing application from an external source');
+				application.cancel();
 			},
 		};
 	});

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 =
@@ -36,3 +48,9 @@ export function gzip(string: string) {
 	writer.close();
 	return new Response(cs.readable).text();
 }
+
+export class AbortedError extends Error {
+	constructor() {
+		super('Aborted');
+	}
+}

package/src/index.dev.ts

@@ -1,5 +1,5 @@
 /** This file is only used for dev mode. The build output is index.ts */
-import { createApiClient, inploiBrandedLogger } from '@inploi/sdk';
+import { initialiseSdk, inploiBrandedLogger } from '@inploi/sdk';
 
 import { chatbotPlugin } from './chatbot';
 
@@ -19,12 +19,13 @@ async function enableMocking() {
 }
 
 enableMocking().then(() => {
-	window.chatbot = chatbotPlugin({})({
-		apiClient: createApiClient({
-			baseUrl: import.meta.env.VITE_BASE_URL,
-			publishableKey: import.meta.env.VITE_PUBLISHABLE_KEY,
-		}),
+	const sdk = initialiseSdk({
+		env: 'sandbox',
 		logger: inploiBrandedLogger,
+		publishableKey: import.meta.env.VITE_PUBLISHABLE_KEY,
 	});
+
+	// inploi’s hue: 265
+	window.chatbot = sdk.registerPlugin(chatbotPlugin({ hue: 372 }));
 	window.chatbot.prepare();
 });

package/src/interpreter/interpreter.ts

@@ -1,16 +1,17 @@
 import { FlowNode, FlowNodeType, IfBlockNode } from '@inploi/core/flows';
 import { P, match } from 'ts-pattern';
-import { getHeadOrThrow } from '~/chatbot.utils';
+import { AbortedError, getHeadOrThrow } from '~/chatbot.utils';
 import { ChatInput } from '~/ui/chat-input/chat-input';
 
 import { ApplicationSubmission, ChatMessage, KeyToSubmissionMap } from '../chatbot.state';
 
-export type ChatServiceSendParams = { signal?: AbortSignal; message: ChatMessage };
+export type ChatServiceSendParams = { signal?: AbortSignal; groupId?: string; message: ChatMessage };
 export type ChatService = {
 	send: (params: ChatServiceSendParams) => Promise<void>;
-	input: <TType extends ChatInput['type']>(
-		params: Extract<ChatInput, { type: TType }>,
-	) => Promise<Extract<ApplicationSubmission, { type: TType }>>;
+	input: <TType extends ChatInput['type']>(params: {
+		input: Extract<ChatInput, { type: TType }>;
+		signal?: AbortSignal;
+	}) => Promise<Extract<ApplicationSubmission, { type: TType }>>;
 };
 
 type ChatbotInterpreterParams = {
@@ -33,24 +34,31 @@ export const createFlowInterpreter = ({
 	onInterpret,
 }: ChatbotInterpreterParams) => {
 	const controller = new AbortController();
+
 	const interpretNode = async (node: FlowNode) => {
 		const submissions = getSubmissions();
 		onInterpret?.(node);
-		await interpret({
-			node,
-			submissions,
-			chat: {
-				sendMessage: async message => chatService.send({ message, signal: controller.signal }),
-				userInput: async input => chatService.input(input),
-			},
-			next: () => {
-				const nextNodeId = getNextNodeId(node, getSubmissions());
-				const nextNode = flow.find(node => node.id === nextNodeId);
-				if (nextNode) {
-					return interpretNode(nextNode);
-				} else onFlowEnd?.(node);
-			},
-		});
+		try {
+			await interpret({
+				node,
+				submissions,
+				chat: {
+					sendMessage: async message => chatService.send({ groupId: node.id, message, signal: controller.signal }),
+					userInput: async input => chatService.input({ input, signal: controller.signal }),
+				},
+				next: () => {
+					const nextNodeId = getNextNodeId(node, getSubmissions());
+					const nextNode = flow.find(node => node.id === nextNodeId);
+					if (nextNode) {
+						return interpretNode(nextNode);
+					} else onFlowEnd?.(node);
+				},
+			});
+		} catch (e) {
+			// we let aborting the flow be silent
+			if (e instanceof AbortedError) return;
+			throw e;
+		}
 	};
 
 	return {

package/src/mocks/browser.ts

@@ -1,5 +1,5 @@
 import { setupWorker } from 'msw/browser';
 
-import { handlers } from './handlers';
+import { browserHandlers } from './handlers';
 
-export const worker = setupWorker(...handlers);
+export const worker = setupWorker(...browserHandlers);

package/src/mocks/example.flows.ts

@@ -1,44 +1,82 @@
 import { FlowNode } from '@inploi/core/flows';
 
-const textOnly: FlowNode[] = [
+export const automatedTestFlow: FlowNode[] = [
 	{
-		id: 'intro',
+		id: '1',
 		type: 'text',
 		data: {
-			text: 'Welcome to our chef application flow!',
+			text: 'Text node',
 		},
 		isHead: true,
-		nextId: 'name',
 	},
+];
+
+const textOnly: FlowNode[] = [
 	{
-		id: 'name',
-		type: 'text',
+		id: '443c2374-13d1-4b02-b2ed-17f148d2a3da',
+		isHead: true,
+		nextId: '5df04ee2-b786-4df6-874b-9d1c740363d9',
+		type: 'question-boolean',
 		data: {
-			text: 'What is your full name?',
+			key: 'like',
+			question: 'do u hate cats',
+			trueLabel: 'Yes',
+			falseLabel: 'No',
 		},
-		nextId: 'experience',
 	},
 	{
-		id: 'experience',
-		type: 'text',
+		id: '5df04ee2-b786-4df6-874b-9d1c740363d9',
+		nextId: 'b6060696-ebb5-4b17-9d88-470394ccd1d3',
+		type: 'if-block',
 		data: {
-			text: 'How many years of chef experience do you have?',
+			compareKey: 'like',
+			compareValue: 'true',
+			compare: 'equals',
 		},
-		nextId: 'cuisine',
+		branchId: 'f94662b2-5229-4602-bc4e-d84666a56a25',
 	},
 	{
-		id: 'cuisine',
+		id: '801ccc8c-d5db-4864-9b89-1465c014e20e',
+		nextId: '042a8657-132d-4eb7-be4e-c1d300ecc538',
 		type: 'text',
 		data: {
-			text: 'What cuisine do you specialize in?',
+			text: 'nice',
 		},
-		nextId: 'end',
 	},
 	{
-		id: 'end',
+		id: 'fec23e69-ef6c-4ae5-b10a-11104d36158c',
+		nextId: '801ccc8c-d5db-4864-9b89-1465c014e20e',
+		type: 'question-boolean',
+		data: {
+			key: 'free-will',
+			question: 'do you have free will?',
+			trueLabel: 'Yes',
+			falseLabel: 'No',
+		},
+	},
+	{
+		id: 'b6060696-ebb5-4b17-9d88-470394ccd1d3',
+		nextId: 'fec23e69-ef6c-4ae5-b10a-11104d36158c',
 		type: 'text',
 		data: {
-			text: 'Thanks for applying! We will review your application soon.',
+			text: 'nice youre a decent person',
+		},
+	},
+	{
+		id: 'f94662b2-5229-4602-bc4e-d84666a56a25',
+		type: 'abandon-flow',
+		data: {
+			text: 'you cant hate cats to work here',
+			redirectUrl: '',
+			cta: '',
+		},
+	},
+	{
+		id: '042a8657-132d-4eb7-be4e-c1d300ecc538',
+		type: 'complete-flow',
+		data: {
+			text: "we'll hire you",
+			submitCta: 'submit',
 		},
 	},
 ];
@@ -160,7 +198,7 @@ const fromAlex: FlowNode[] = [
 					value: '30+ hours',
 				},
 			],
-			maxSelected: 1,
+			maxSelected: 3,
 			minSelected: 1,
 		},
 	},

package/src/mocks/handlers.ts

@@ -1,10 +1,15 @@
 import { invariant } from '@inploi/core/common';
-import { http } from 'msw';
+import { HttpResponse, http } from 'msw';
+import { match } from 'ts-pattern';
 
-import { exampleFlows } from './example.flows';
+import { automatedTestFlow, exampleFlows } from './example.flows';
 
-export const handlers = [
-	http.get(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, ctx => {
+// sandbox URL
+const BASE_URL = 'https://preview.api.inploi.com';
+
+export const flowHandler = {
+	/** Returns a valid flow. */
+	success: http.get(`${BASE_URL}/flow/job/:jobId`, ctx => {
 		invariant(typeof ctx.params.jobId === 'string', 'Missing job id');
 		const mockApplication = {
 			job: {
@@ -16,13 +21,37 @@ export const handlers = [
 			},
 			flow: {
 				id: 1,
-				nodes: ctx.params.jobId === '1' ? exampleFlows.fromAlex : exampleFlows.byClaude,
+				nodes: match(ctx.params.jobId)
+					.with('1', () => exampleFlows.fromAlex)
+					.with('test', () => automatedTestFlow)
+					.otherwise(() => exampleFlows.helloWorld),
 				version: 1,
 			},
 		};
-		return new Response(JSON.stringify(mockApplication));
+		return new HttpResponse(JSON.stringify(mockApplication));
+	}),
+
+	/** Returns an invalid payload with a 200 code.
+	 *  E.g.: if the backend returns something incompatible with the frontend.
+	 */
+	invalid_payload: http.get(`${BASE_URL}/flow/job/:jobId`, () => {
+		return new HttpResponse(JSON.stringify({ foo: 'bar' }), { status: 200 });
+	}),
+
+	/** Returns a laravel-structured error */
+	exception: http.get(`${BASE_URL}/flow/job/:jobId`, () => {
+		return new HttpResponse(JSON.stringify({ exception: 'server_error', message: 'Something bad happened' }), {
+			status: 400,
+		});
+	}),
+};
+
+export const browserHandlers = [
+	flowHandler.success,
+	http.post(`${BASE_URL}/flow/job/:jobId`, () => {
+		return new HttpResponse(JSON.stringify({ message: 'Success' }));
 	}),
-	http.post(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, () => {
-		return new Response(JSON.stringify({ message: 'Success' }));
+	http.post(`${BASE_URL}/analytics/log`, () => {
+		return new HttpResponse(JSON.stringify({ message: 'Success' }));
 	}),
 ];

package/src/style/palette.test.ts

@@ -0,0 +1,20 @@
+import { expect, test } from 'bun:test';
+
+import { PaletteShade, generatePalette } from './palette';
+
+test('returns palette when given valid shade and hue', () => {
+	const palette = generatePalette(50);
+
+	for (const shade in palette) {
+		expect(palette[shade as PaletteShade]).toMatch(/\d+\.*\d* \d+\.*\d*% \d+\.*\d*%/);
+	}
+});
+
+test('returns different palettes with different hues', () => {
+	const palette1 = generatePalette(25);
+	const palette2 = generatePalette(26);
+
+	for (const shade in palette1) {
+		expect(palette1[shade as PaletteShade]).not.toEqual(palette2[shade as PaletteShade]);
+	}
+});

package/src/style/palette.ts

@@ -0,0 +1,69 @@
+import { Mode, converter, differenceEuclidean, formatCss, toGamut } from 'culori';
+import { DiffFn } from 'culori/src/difference';
+
+declare module 'culori' {
+	export function toGamut(from: Mode, to: Mode, distance: DiffFn, tolerance: number): (color: string) => string;
+}
+
+const hsl = converter('hsl');
+const oklch = converter('oklch');
+
+export type PaletteShade = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+const colorLevels: Record<PaletteShade, true> = {
+	'1': true,
+	'2': true,
+	'3': true,
+	'4': true,
+	'5': true,
+	'6': true,
+	'7': true,
+	'8': true,
+	'9': true,
+	'10': true,
+	'11': true,
+	'12': true,
+};
+
+const COLOR_LEVELS = Object.keys(colorLevels) as PaletteShade[];
+const CHROMA_MULTIPLIER = 1.5;
+
+const colorPresets: Record<PaletteShade, { l: number; c: number }> = {
+	'1': { l: 97.78, c: 0.0108 },
+	'2': { l: 93.56, c: 0.0321 },
+	'3': { l: 88.11, c: 0.0609 },
+	'4': { l: 82.67, c: 0.0908 },
+	'5': { l: 74.22, c: 0.1398 },
+	'6': { l: 64.78, c: 0.1472 },
+	'7': { l: 57.33, c: 0.1299 },
+	'8': { l: 46.89, c: 0.1067 },
+	'9': { l: 39.44, c: 0.0898 },
+	'10': { l: 32, c: 0.0726 },
+	'11': { l: 23.78, c: 0.054 },
+	'12': { l: 15.56, c: 0.0353 },
+};
+
+const getPaletteColor = (hueAngle: number) => (i: PaletteShade) => {
+	const { c, l } = colorPresets[i];
+	const color = 'oklch(' + l + '% ' + c * CHROMA_MULTIPLIER + ' ' + hueAngle + ')';
+	const oklchColor = oklch(toGamut('p3', 'oklch', differenceEuclidean('oklch'), 0)(color));
+
+	return formatCss(hsl(oklchColor)) as unknown as string;
+};
+
+export const generatePalette = (hueAngle: number) =>
+	Object.fromEntries(COLOR_LEVELS.map(level => [level, getPaletteColor(hueAngle)(level)] as const)) as Record<
+		PaletteShade,
+		string
+	>;
+
+// gets the hue saturation and lightness from a `hsl()` string. Includes % signs.
+const extractHsl = (color: string) => {
+	return color.replace('hsl(', '').replace(')', '');
+};
+
+export const formatCssVariables = (palette: Record<PaletteShade, string>) => {
+	const cssVariables = Object.entries(palette)
+		.map(([level, color]) => `--i-a-${level}: ${extractHsl(color)};`)
+		.join('\n');
+	return `#isdk {\n${cssVariables}\n}`;
+};

package/src/ui/chat-bubble.tsx

@@ -1,14 +1,15 @@
 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-accent-7 text-lowest rounded-br-md bubble-right',
 			},
 			transitionState: {
 				entering: 'opacity-0 translate-y-8',
@@ -26,11 +27,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>
 				);
 			})}

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.application?.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,