@inploi/plugin-chatbot 2.0.0 → 2.1.1

package/src/mocks/handlers.ts

@@ -1,28 +0,0 @@
-import { invariant } from '@inploi/core/common';
-import { http } from 'msw';
-
-import { exampleFlows } from './example.flows';
-
-export const handlers = [
-	http.get(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, ctx => {
-		invariant(typeof ctx.params.jobId === 'string', 'Missing job id');
-		const mockApplication = {
-			job: {
-				id: +ctx.params.jobId,
-				title: 'Test job',
-			},
-			company: {
-				name: 'Test company',
-			},
-			flow: {
-				id: 1,
-				nodes: ctx.params.jobId === '1' ? exampleFlows.fromAlex : exampleFlows.byClaude,
-				version: 1,
-			},
-		};
-		return new Response(JSON.stringify(mockApplication));
-	}),
-	http.post(`${import.meta.env.VITE_BASE_URL}/flow/job/:jobId`, () => {
-		return new Response(JSON.stringify({ message: 'Success' }));
-	}),
-];

package/src/ui/chat-bubble.tsx

@@ -1,52 +0,0 @@
-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-md py-2 px-3 rounded-[18px] min-h-[36px] break-words',
-	{
-		variants: {
-			side: {
-				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',
-				entered: 'opacity-100 translate-y-0',
-				exiting: 'opacity-0 scale-0',
-				exited: '',
-			},
-		},
-
-		defaultVariants: {
-			side: 'left',
-		},
-	},
-);
-
-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 (
-		<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}
-		</m.p>
-	);
-};

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

@@ -1,62 +0,0 @@
-import { P, match } from 'ts-pattern';
-import { parse, picklist } from 'valibot';
-
-import { useFocusOnMount } from '../useFocus';
-import { ChatInputProps } from './chat-input';
-
-export type BooleanChoicePayload = {
-	type: 'boolean';
-	config: { labels: { true: string; false: string } };
-	key: string;
-	value: 'true' | 'false';
-};
-
-const options = ['true', 'false'] as const;
-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();
-
-				/** nativeEvent is a hidden property not exposed by JSX's typings */
-				const value = match(e as any)
-					.with(
-						{
-							nativeEvent: {
-								submitter: P.select(P.union(P.instanceOf(HTMLButtonElement), P.instanceOf(HTMLInputElement))),
-							},
-						},
-						submitter => {
-							return submitter.value;
-						},
-					)
-					.otherwise(() => {
-						throw new Error('invalid form');
-					});
-				const answer = parse(AnswerSchema, value);
-				onSubmitSuccess(answer);
-			}}
-		>
-			{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-center text-base">{input.config.labels[value]}</p>
-					</button>
-				);
-			})}
-		</form>
-	);
-};

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

@@ -1,213 +0,0 @@
-import { invariant } from '@inploi/core/common';
-import clsx from 'clsx';
-import { ComponentProps } from 'preact';
-import { useState } from 'preact/hooks';
-import { FieldError } from 'react-hook-form';
-import { P, match } from 'ts-pattern';
-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 };
-export type FilePayload = {
-	type: 'file';
-	config: { extensions: string[]; fileSizeLimitKib?: number; allowMultiple: boolean };
-	key: string;
-	value: FileToUpload[];
-};
-
-const toBase64 = (file: File) =>
-	new Promise<string>((resolve, reject) => {
-		const reader = new FileReader();
-		reader.readAsDataURL(file);
-		reader.onload = () => {
-			if (!reader.result) return reject('No result from reader');
-			return resolve(reader.result.toString());
-		};
-		reader.onerror = reject;
-	});
-
-const kbToReadableSize = (kb: number) =>
-	match(kb)
-		.with(P.number.lte(1000), () => `${Math.round(kb)}KB`)
-		.with(P.number.lt(1000 * 10), () => `${(kb / 1000).toFixed(1)}MB`)
-		.otherwise(() => `${Math.round(kb / 1000)}MB`);
-
-const addFileSizesKb = (files: FileToUpload[]) => files.reduce((acc, cur) => acc + cur.sizeKb, 0);
-
-const isFileSubmission = isSubmissionOfType('file');
-
-const FILENAMES_TO_SHOW_QTY = 3;
-
-export const FileThumbnail = ({
-	file,
-	class: className,
-	...props
-}: ComponentProps<'div'> & { file: Pick<FileToUpload, 'name' | 'sizeKb'> }) => {
-	const extension = file.name.split('.').pop();
-	const fileName = file.name.replace(new RegExp(`.${extension}$`), '');
-
-	return (
-		<div
-			class={clsx(
-				'bg-accent-1 max-w-full flex gap-2 px-3 py-2 text-sm rounded-lg outline outline-neutral-4 overflow-hidden',
-				className,
-			)}
-			{...props}
-		>
-			<p aria-label="File name" class="overflow-hidden text-accent-12 flex flex-grow">
-				<span class="block truncate">{fileName}</span>
-				<span>.{extension}</span>
-			</p>
-
-			<p aria-label="File size" class="text-neutral-10">
-				{kbToReadableSize(file.sizeKb)}
-			</p>
-		</div>
-	);
-};
-
-const FilenameBadge = ({ class: className, ...props }: ComponentProps<'li'>) => (
-	<li
-		class={clsx(
-			'text-xs block outline outline-1 outline-neutral-6 text-neutral-11 bg-neutral-1 px-1 py-0.5 rounded-md',
-			className,
-		)}
-		{...props}
-	/>
-);
-1;
-
-export const ChatInputFile = ({ input, onSubmitSuccess }: ChatInputProps<'file'>) => {
-	const submission = application.current$.value?.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"
-			onSubmit={e => {
-				e.preventDefault();
-				setError(undefined);
-				if (files.length === 0) {
-					setError({ type: 'required', message: 'Please select a file' });
-				}
-				if (input.config.fileSizeLimitKib && totalSize > input.config.fileSizeLimitKib) {
-					setError({
-						type: 'max',
-						message: `File size exceeds limit of ${kbToReadableSize(input.config.fileSizeLimitKib)}`,
-					});
-				}
-				return onSubmitSuccess(files);
-			}}
-		>
-			<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"
-				>
-					{files.length > 0 ? (
-						<>
-							<ul class="max-w-full flex gap-1 flex-wrap justify-center overflow-hidden p-1">
-								{files.slice(0, FILENAMES_TO_SHOW_QTY).map(file => {
-									const extension = file.name.split('.').pop();
-									const fileName = file.name.replace(new RegExp(`.${extension}$`), '');
-									return (
-										<FilenameBadge class="flex overflow-hidden">
-											<span class="block truncate">{fileName}</span>
-											<span>.{extension}</span>
-										</FilenameBadge>
-									);
-								})}
-								{hiddenFileCount > 0 ? (
-									<FilenameBadge>
-										+{hiddenFileCount} file{hiddenFileCount !== 1 ? 's' : ''}
-									</FilenameBadge>
-								) : null}
-							</ul>
-
-							<p class="text-xs text-neutral-11">
-								{kbToReadableSize(totalSize)} {files.length > 1 ? 'total' : ''}
-							</p>
-						</>
-					) : (
-						<div class="flex flex-col justify-center pt-5 pb-6 gap-4">
-							<header class="flex flex-col gap-0 items-center">
-								<svg
-									class="w-8 h-8 text-neutral-11 mb-1"
-									aria-hidden="true"
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 20 16"
-								>
-									<path
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="1.5"
-										d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
-									/>
-								</svg>
-								<p class="tracking-[-0.01em] text-neutral-12 dark:text-gray-400">
-									{input.config.allowMultiple ? 'Select files' : 'Select a file'} to upload
-								</p>
-								{input.config.fileSizeLimitKib ? (
-									<p class="text-xs text-neutral-10">(max {kbToReadableSize(input.config.fileSizeLimitKib)})</p>
-								) : null}
-							</header>
-							<aside class="flex flex-col gap-2 items-center">
-								<p id="accepted-filetypes" class="sr-only">
-									Accepted file extensions
-								</p>
-								<ul aria-describedby="accepted-filetypes" class="flex gap-2 flex-wrap justify-center">
-									{input.config.extensions.map(ext => (
-										<li class="text-[11px] tracking-wide uppercase outline ring-2 ring-lowest outline-1 outline-neutral-6 text-neutral-9 bg-neutral-1 px-1 py-0.5 rounded-md">
-											{ext.replace('.', '')}
-										</li>
-									))}
-								</ul>
-							</aside>
-						</div>
-					)}
-
-					<input
-						id="dropzone-file"
-						onInput={async e => {
-							invariant(e.target instanceof HTMLInputElement);
-							const files = e.target.files ? Array.from(e.target.files) : [];
-							const filesToUpload = await Promise.allSettled(
-								files.map(async file => {
-									const data = await toBase64(file);
-									return {
-										name: file.name,
-										data: data,
-										sizeKb: file.size / 1000,
-									};
-								}),
-							);
-							if (filesToUpload.some(({ status }) => status === 'rejected')) {
-								return setError({ type: 'invalid', message: 'Invalid file' });
-							}
-							const validFiles = filesToUpload
-								.map(promise => (promise.status === 'fulfilled' ? promise.value : null))
-								.filter(Boolean) as FileToUpload[];
-							setFiles(validFiles);
-						}}
-						multiple={input.config.allowMultiple}
-						type="file"
-						class="sr-only"
-					/>
-				</label>
-				<SendButton disabled={files.length === 0} />
-			</div>
-			{error && <InputError error={error} />}
-		</form>
-	);
-};

package/src/ui/chat-input/chat-input.multiple-choice.tsx

@@ -1,117 +0,0 @@
-import { valibotResolver } from '@hookform/resolvers/valibot';
-import { useForm } from 'react-hook-form';
-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 = {
-	type: 'multiple-choice';
-	key: string;
-	config: { options: { value: string; label: string }[]; minSelected?: number; maxSelected?: number };
-	value: string[];
-};
-
-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 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),
-				[
-					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 }: ChatInputProps<'multiple-choice'>) => {
-	const submission = application.current$.value?.data.submissions[input.key];
-	const {
-		register,
-		handleSubmit,
-		formState: { errors },
-	} = useForm({
-		defaultValues: {
-			checked: isMultipleChoiceSubmission(submission)
-				? Object.fromEntries(submission.value.map(key => [key, true]))
-				: {},
-		},
-		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[];
-				onSubmitSuccess(checked);
-			})}
-		>
-			<div class="flex items-center gap-2">
-				<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}
-									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}
-								>
-									{option.label}
-								</label>
-							</div>
-						);
-					})}
-				</div>
-				{!isSingleChoice && <SendButton />}
-			</div>
-			<InputError error={errors.checked?.root} />
-		</form>
-	);
-};

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

@@ -1,111 +0,0 @@
-import { valibotResolver } from '@hookform/resolvers/valibot';
-import { useLayoutEffect, useRef } from 'preact/hooks';
-import { useForm } from 'react-hook-form';
-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';
-import { SendButton } from '../send-button';
-import { ChatInputProps } from './chat-input';
-
-export type TextPayload = {
-	type: 'text';
-	key: string;
-	config: { placeholder?: string; format: 'text' | 'email' | 'phone' | 'url' };
-	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, 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 = {
-	email: {
-		type: 'email',
-		inputMode: 'email',
-		formNoValidate: true,
-	},
-	phone: {
-		type: 'tel',
-		inputMode: 'tel',
-	},
-	text: {
-		type: 'text',
-		inputMode: 'text',
-	},
-	url: {
-		type: 'url',
-		inputMode: 'url',
-		formNoValidate: true,
-	},
-} satisfies Record<InputFormat, JSX.IntrinsicElements['input']>;
-
-const isTextSubmission = isSubmissionOfType('text');
-const getResolver = (config: TextPayload['config']) =>
-	valibotResolver(object({ text: inputFormatToSchema[config.format] }));
-
-export const ChatInputText = ({ input, onSubmitSuccess }: ChatInputProps<'text'>) => {
-	const submission = application.current$.value?.data.submissions[input.key];
-	const {
-		register,
-		handleSubmit,
-		formState: { errors },
-	} = useForm({
-		defaultValues: {
-			text: isTextSubmission(submission) ? submission.value : '',
-		},
-		resolver: getResolver(input.config),
-	});
-	const { ref: setRef, ...props } = register('text', { required: true });
-	const ref = useRef<HTMLInputElement>();
-	useLayoutEffect(() => {
-		if (ref.current) {
-			ref.current.focus();
-			ref.current.select();
-		}
-	}, []);
-
-	return (
-		<form
-			noValidate
-			class="flex flex-col gap-1"
-			onSubmit={handleSubmit(submission => {
-				onSubmitSuccess(submission.text);
-			})}
-		>
-			<div class="flex gap-2 items-center">
-				<input
-					id="chat-input"
-					{...props}
-					{...inputFormatToProps[input.config.format]}
-					autocomplete="off"
-					autoCapitalize="off"
-					autoCorrect="off"
-					autoFocus
-					ref={(e: HTMLInputElement | null) => {
-						if (e) {
-							ref.current = e;
-						}
-						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"
-					placeholder={input.config.placeholder}
-				/>
-				<SendButton />
-			</div>
-			<InputError error={errors.text} />
-		</form>
-	);
-};

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

@@ -1,81 +0,0 @@
-import { m } from 'framer-motion';
-import { useEffect, useRef } from 'preact/hooks';
-import { P, match } from 'ts-pattern';
-import { DistributivePick } from '~/chatbot.utils';
-
-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';
-import { ChatInputMultipleChoice, MultipleChoicePayload } from './chat-input.multiple-choice';
-import { ChatInputText, TextPayload } from './chat-input.text';
-
-export type SubmitSuccessFn = (submission: ApplicationSubmission) => void;
-
-export type ChatInputProps<T extends ChatInputType['type']> = {
-	onSubmitSuccess: (value: Extract<ApplicationSubmission, { type: T }>['value']) => void;
-	input: Extract<ChatInputType, { type: T }>;
-	localState?: ApplicationData;
-};
-
-export type ChatbotInput = TextPayload | MultipleChoicePayload | BooleanChoicePayload | FilePayload;
-export type ChatInput = DistributivePick<ChatbotInput, 'type' | 'config' | 'key'>;
-
-type ChatInputFactoryProps = {
-	onSubmit: SubmitSuccessFn;
-	onInputChange: (input?: ChatInputType['type']) => void;
-};
-export const ChatInput = ({ onSubmit, onInputChange }: ChatInputFactoryProps) => {
-	const input = application.current$.value?.data.currentInput;
-	const inputWrapperRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		if (inputWrapperRef.current) {
-			inputHeight.value = inputWrapperRef.current.getBoundingClientRect().height;
-		}
-		onInputChange(input?.type);
-	}, [input?.type, onInputChange]);
-
-	const handleSubmitSuccess =
-		<T extends ChatbotInput['type']>(type: T) =>
-		(value: (ChatbotInput & { type: T })['value']) =>
-			onSubmit({ type, value } as ApplicationSubmission);
-
-	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>
-	);
-};