@inploi/plugin-chatbot 2.0.0 → 2.1.1

package/src/ui/chatbot-header.tsx

@@ -1,98 +0,0 @@
-import clsx from 'clsx';
-import { ComponentProps } from 'preact';
-
-import { StartedJobApplication, application, cancelCurrentApplication, viewState } from '../chatbot.state';
-
-const HeaderIconButton = ({ class: className, children, ...props }: ComponentProps<'button'>) => {
-	return (
-		<button
-			class={clsx(
-				'p-2 touch-hitbox relative rounded-full text-neutral-11 hover:text-neutral-12 active:text-neutral-12 hover:bg-neutral-12/5 active:bg-neutral-12/10',
-				className,
-			)}
-			{...props}
-		>
-			<svg
-				class="block"
-				width="16"
-				height="16"
-				viewBox="0 0 16 16"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.5"
-				stroke-linecap="round"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				{children}
-			</svg>
-		</button>
-	);
-};
-
-export const ChatbotHeader = ({ currentApplication }: { currentApplication?: StartedJobApplication }) => {
-	const view = viewState.value;
-	const headerText = currentApplication
-		? `Applying for “${currentApplication.job.title}” at ${currentApplication.company.name}`
-		: 'Applying';
-
-	return (
-		<header class="z-20 flex gap-2 h-[var(--header-height)] rounded-t-2xl left-0 outline outline-1 outline-neutral-5 right-0 mx-auto items-center absolute top-0 bg-neutral-1/90 backdrop-blur-md backdrop-saturate-150">
-			<p id="chatbot-header" class="sr-only">
-				{headerText}
-			</p>
-			<button
-				tabIndex={-1}
-				aria-hidden
-				onClick={() => {
-					if (view === 'minimised') {
-						viewState.value = 'maximised';
-					} else {
-						viewState.value = 'minimised';
-					}
-				}}
-				class="flex-grow h-full overflow-hidden py-1 px-4"
-			>
-				<p aria-hidden class="font-bold text-sm tracking-tight text-neutral-12 truncate">
-					{headerText}
-				</p>
-			</button>
-
-			<div class="flex-shrink-0 flex items-center gap-3 p-1.5">
-				{viewState.value === 'minimised' ? (
-					<>
-						<HeaderIconButton
-							key="minmax"
-							aria-label="Maximise job application"
-							onClick={() => (viewState.value = 'maximised')}
-						>
-							<path d="M12.5 9.5L8 5L3.5 9.5" />
-						</HeaderIconButton>
-						<HeaderIconButton key="close" aria-label="Close application" onClick={cancelCurrentApplication}>
-							<path d="M12.5 6.5L8 11L3.5 6.5" />
-						</HeaderIconButton>
-					</>
-				) : (
-					<>
-						<HeaderIconButton
-							key="restart"
-							aria-label="Restart"
-							onClick={() => {
-								application.restart();
-							}}
-						>
-							<path d="M12 8.5C12 9.29113 11.7654 10.0645 11.3259 10.7223C10.8864 11.3801 10.2616 11.8928 9.53073 12.1955C8.79983 12.4983 7.99556 12.5775 7.21964 12.4231C6.44371 12.2688 5.73098 11.8878 5.17157 11.3284C4.61216 10.769 4.2312 10.0563 4.07686 9.28036C3.92252 8.50444 4.00173 7.70017 4.30448 6.96927C4.60723 6.23836 5.11992 5.61365 5.77772 5.17412C6.43552 4.7346 7.20887 4.5 8 4.5H9" />
-							<path d="M8 7L10 4.5L8 2.5" />
-						</HeaderIconButton>
-						<HeaderIconButton
-							key="minmax"
-							aria-label="Minimise application"
-							onClick={() => (viewState.value = 'minimised')}
-						>
-							<path d="M12.5 6.5L8 11L3.5 6.5" />
-						</HeaderIconButton>
-					</>
-				)}
-			</div>
-		</header>
-	);
-};

package/src/ui/chatbot.tsx

@@ -1,105 +0,0 @@
-import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
-import { FocusScope } from '@radix-ui/react-focus-scope';
-import { LazyMotion, domAnimation } from 'framer-motion';
-import { AnimatePresence, Variants, m } from 'framer-motion';
-import { Suspense, lazy, useRef } from 'preact/compat';
-import { HEADER_HEIGHT } from '~/chatbot.constants';
-
-import { application, viewState } from '../chatbot.state';
-import { ChatbotHeader } from './chatbot-header';
-
-const JobApplicationContent = lazy(() =>
-	import('./job-application-content').then(module => module.JobApplicationContent),
-);
-
-const MotionProvider = ({ children }: { children: JSX.Element }) => {
-	return <LazyMotion features={domAnimation}>{children}</LazyMotion>;
-};
-
-const chatbotVariants: Variants = {
-	closed: { y: 'calc(100% + 1rem)', height: HEADER_HEIGHT },
-	maximised: { y: 0, height: '75vh' },
-	minimised: { y: 0, height: HEADER_HEIGHT },
-};
-
-type ChatbotProps = {
-	apiClient: ApiClient;
-	logger: Logger;
-	analytics: AnalyticsService;
-};
-export const Chatbot = ({ logger, apiClient, analytics }: ChatbotProps) => {
-	const currentApplication = application.current$.value;
-	const isApplying = currentApplication !== null;
-	const view = viewState.value;
-
-	const drawerRef = useRef<HTMLDivElement>(null);
-	// useEffect(() => {
-	// 	function onVisualViewportChange() {
-	// 		if (!drawerRef.current) return;
-	// 		const visualViewportHeight = window.visualViewport?.height ?? 0;
-	// 		const keyboardHeight = window.innerHeight - visualViewportHeight;
-
-	// 		// Difference between window height and height excluding the keyboard
-	// 		const diffFromInitial = window.innerHeight - visualViewportHeight;
-
-	// 		const drawerHeight = drawerRef.current.getBoundingClientRect().height;
-	// 		const offset = keyboardHeight - drawerHeight;
-
-	// 		drawerRef.current.style.height = `${visualViewportHeight - offset}px`;
-	// 		drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
-	// 	}
-
-	// 	window.visualViewport?.addEventListener('resize', onVisualViewportChange);
-
-	// 	return () => window.visualViewport?.removeEventListener('resize', onVisualViewportChange);
-	// }, []);
-
-	return (
-		<MotionProvider>
-			<AnimatePresence>
-				{isApplying && viewState.value === 'maximised' ? (
-					<m.div
-						key="bg"
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						class="bg-neutral-12/60 fixed inset-0"
-					/>
-				) : null}
-
-				{isApplying ? (
-					<m.div
-						key="content"
-						ref={drawerRef}
-						aria-modal="true"
-						role="dialog"
-						aria-labelledby="chatbot-header"
-						variants={chatbotVariants}
-						initial="closed"
-						animate={view}
-						exit="closed"
-						style={{ '--header-height': `${HEADER_HEIGHT}px` }}
-						class="isolate fixed left-2 right-2 mx-auto max-w-[450px] bottom-2 max-h-full focus:outline-none"
-					>
-						<FocusScope
-							class="outline outline-1 h-full outline-neutral-5 relative flex flex-col bg-neutral-2 rounded-3xl overflow-hidden"
-							loop
-							trapped={false}
-						>
-							<ChatbotHeader currentApplication={currentApplication} />
-
-							<Suspense fallback={<div>loading…</div>}>
-								<JobApplicationContent
-									analytics={analytics}
-									currentApplication={currentApplication}
-									apiClient={apiClient}
-									logger={logger}
-								/>
-							</Suspense>
-						</FocusScope>
-					</m.div>
-				) : null}
-			</AnimatePresence>
-		</MotionProvider>
-	);
-};

package/src/ui/input-error.tsx

@@ -1,33 +0,0 @@
-import { AnimatePresence, m } from 'framer-motion';
-import type { FieldError } from 'react-hook-form';
-
-export const InputError = ({ error }: { error?: FieldError }) => {
-	return (
-		<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"
-					>
-						<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>
-				</m.div>
-			)}
-		</AnimatePresence>
-	);
-};

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

@@ -1,145 +0,0 @@
-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 { StartedJobApplication, application, inputHeight, viewState } from '~/chatbot.state';
-import { submissionsToPayload } from '~/chatbot.utils';
-
-import { ERROR_MESSAGES } from '../chatbot.constants';
-import { createFlowInterpreter } from '../interpreter/interpreter';
-import { ChatInput } from './chat-input/chat-input';
-import { JobApplicationMessages } from './job-application-messages';
-import { useChatService } from './useChatService';
-
-type JobApplicationContentProps = {
-	apiClient: ApiClient;
-	logger: Logger;
-	currentApplication: StartedJobApplication;
-	analytics: AnalyticsService;
-};
-
-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(() => {
-		scrollToEnd({ behavior: 'instant' });
-		const currentApplication = application.current$.peek();
-		if (!currentApplication || currentApplication.data.isFinished) return;
-
-		const { interpret, abort } = createFlowInterpreter({
-			flow: currentApplication.flow.nodes,
-			chatService,
-			getSubmissions: () => application.current$.peek()?.data.submissions,
-			beforeStart: async () => {
-				application.setInput(undefined);
-
-				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',
-							text: 'Restored in progress application',
-							variant: 'info',
-						},
-					});
-				}
-			},
-			onInterpret: node => {
-				application.setCurrentNodeId(node.id);
-			},
-			onFlowEnd: async lastNode => {
-				application.markAsFinished();
-				return match(lastNode)
-					.with({ type: 'abandon-flow' }, () => {
-						chatService.send({
-							message: {
-								type: 'system',
-								text: 'Application ended',
-								variant: 'success',
-							},
-						});
-					})
-					.with({ type: 'complete-flow' }, async () => {
-						const submissions = application.current$.peek()?.data.submissions;
-						if (!submissions) throw new Error(ERROR_MESSAGES.no_submissions);
-
-						const response = await apiClient.fetch(`/flow/job/${currentApplication.job.id}`, {
-							method: 'POST',
-							body: JSON.stringify(submissionsToPayload({ application: currentApplication, submissions })),
-						});
-
-						match(response)
-							.with({ message: 'Success' }, () => {
-								chatService.send({
-									message: {
-										type: 'system',
-										text: 'Application submitted',
-										variant: 'success',
-									},
-								});
-							})
-							.otherwise(response => {
-								logger.error(response);
-								chatService.send({
-									message: {
-										type: 'system',
-										text: 'Error submitting application',
-										variant: 'error',
-									},
-								});
-							});
-					})
-					.otherwise(() => {
-						logger.error(ERROR_MESSAGES.invalid_end_node, lastNode);
-					});
-			},
-		});
-
-		interpret(currentApplication.data.currentNodeId);
-
-		return abort;
-	}, [analytics, apiClient, chatService, logger, scrollToEnd]);
-
-	return (
-		<>
-			<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>
-			<ChatInput onInputChange={() => scrollToEnd({ behavior: 'smooth' })} onSubmit={onSubmitSuccessFn} />
-		</>
-	);
-};

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

@@ -1,64 +0,0 @@
-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 = {
-	messages: ChatMessage[];
-	isBotTyping: boolean;
-};
-
-const authorToSide = {
-	bot: 'left',
-	user: 'right',
-} as const;
-
-export const JobApplicationMessages = ({ messages, isBotTyping }: JobApplicationMessagesProps) => {
-	return (
-		<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>
-		</ol>
-	);
-};

package/src/ui/loading-indicator.tsx

@@ -1,37 +0,0 @@
-export const LoadingIndicator = () => (
-	<svg viewBox="0 0 24 24">
-		<style>
-			{`#s1{animation:3s linear infinite forwards s1__to}@keyframes s1__to{0%{transform:translate(12px,0)}66.666667%{transform:translate(12px,0);animation-timing-function:cubic-bezier(0.77,0,0.175,1)}100%{transform:translate(12px,12px)}}#s2{animation:3s linear infinite forwards s2__ts}@keyframes s2__ts{0%{transform:scale(0,0)}70%{transform:scale(0,0);animation-timing-function:cubic-bezier(0.86,0,0.07,1)}100%{transform:scale(1,1)}}#s3{animation:3s linear infinite forwards s3__to}@keyframes s3__to{0%{transform:translate(12px,12px);animation-timing-function:cubic-bezier(0.77,0,0.175,1)}100%,33.333333%{transform:translate(12px,24px)}}#s4{animation:3s linear infinite forwards s4__ts}@keyframes s4__ts{0%{transform:scale(1,1);animation-timing-function:cubic-bezier(0.86,0,0.07,1)}100%,30%{transform:scale(0,0)}}#s5{animation:3s linear infinite forwards s5__to}@keyframes s5__to{0%{transform:translate(12px,0);animation-timing-function:cubic-bezier(0.77,0,0.175,1)}33.333333%{transform:translate(12px,12.045742px);animation-timing-function:cubic-bezier(0.77,0,0.175,1)}100%,66.666667%{transform:translate(12px,24px)}}#s6{animation:3s linear infinite forwards s6__ts}@keyframes s6__ts{0%,100%,63.333333%{transform:scale(0,0)}3.333333%{transform:scale(0,0);animation-timing-function:cubic-bezier(0.86,0,0.07,1)}33.333333%{transform:scale(1,1);animation-timing-function:cubic-bezier(0.86,0,0.07,1)}}#s7{animation:3s linear infinite forwards s7__to}@keyframes s7__to{0%{transform:translate(12px,0)}33.333333%{transform:translate(12px,0);animation-timing-function:cubic-bezier(0.77,0,0.175,1)}66.666667%{transform:translate(12px,12px);animation-timing-function:cubic-bezier(0.77,0,0.175,1)}100%{transform:translate(12px,24px)}}#s8{animation:3s linear infinite forwards s8__ts}@keyframes s8__ts{0%,100%,96.666667%{transform:scale(0,0)}36.666667%{transform:scale(0,0);animation-timing-function:cubic-bezier(0.86,0,0.07,1)}66.666667%{transform:scale(1,1);animation-timing-function:cubic-bezier(0.86,0,0.07,1)}}`}
-		</style>
-		<g id="s1" transform="translate(12,0)">
-			<g id="s2" transform="scale(0,0)">
-				<circle r="6.5" transform="translate(0,0)" fill="hsl(226, 70.0%, 55.5%)" />
-			</g>
-		</g>
-		<g id="s3" transform="translate(12,12)">
-			<g id="s4" transform="scale(1,1)">
-				<circle r="6.5" transform="translate(0,0)" fill="hsl(226, 70.0%, 55.5%)" />
-			</g>
-		</g>
-		<g id="s5" transform="translate(12,0)">
-			<g id="s6" transform="scale(0,0)">
-				<path
-					d="M6.5,13c3.5899,0,6.5-2.9101,6.5-6.5s-2.9101-6.5-6.5-6.5-6.5,2.91015-6.5,6.5s2.91015,6.5,6.5,6.5Zm0-4C7.88071,9,9,7.88071,9,6.5s-1.11929-2.5-2.5-2.5-2.5,1.11929-2.5,2.5s1.11929,2.5,2.5,2.5Z"
-					transform="translate(-6.5,-6.5)"
-					clip-rule="evenodd"
-					fill="hsl(226, 70.0%, 55.5%)"
-					fill-rule="evenodd"
-				/>
-			</g>
-		</g>
-		<g id="s7" transform="translate(12,0)">
-			<g id="s8" transform="scale(0,0)">
-				<path
-					d="M0,6c0,3.58984,2.91016,6.5,6.5,6.5s6.5-2.91016,6.5-6.5h-4C9,7.38086,7.88086,8.5,6.5,8.5s-2.5-1.11914-2.5-2.5h-4Z"
-					transform="translate(-6.5,-9.25)"
-					fill="hsl(226, 70.0%, 55.5%)"
-				/>
-			</g>
-		</g>
-	</svg>
-);

package/src/ui/send-button.tsx

@@ -1,27 +0,0 @@
-import clsx from 'clsx';
-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',
-			className,
-		)}
-		{...props}
-	>
-		<svg
-			class="block"
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			fill="transparent"
-			stroke="currentColor"
-			stroke-linecap="round"
-			stroke-width="2"
-		>
-			<title>Send</title>
-			<path d="M3.5 7.5L8 3L12.5 7.5" />
-			<path d="M8 4V13" />
-		</svg>
-	</button>
-);

package/src/ui/transition.tsx

@@ -1 +0,0 @@
-export type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';

package/src/ui/typing-indicator.tsx

@@ -1,12 +0,0 @@
-import clsx from 'clsx';
-import { ComponentProps } from 'react';
-
-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>
-	);
-};

package/src/ui/useChatService.ts

@@ -1,75 +0,0 @@
-import { Logger } from '@inploi/sdk';
-import { useMemo, useRef, useState } from 'preact/hooks';
-import { match } from 'ts-pattern';
-import { application } from '~/chatbot.state';
-import { ChatService } from '~/interpreter/interpreter';
-
-import { SubmitSuccessFn } from './chat-input/chat-input';
-
-const TYPING_SPEED_MS_PER_CHARACTER = 25;
-
-type UseChatServiceParams = {
-	logger?: Logger;
-};
-
-export const useChatService = ({ logger }: UseChatServiceParams) => {
-	const chatRef = useRef<HTMLDivElement>(null);
-	const [isBotTyping, setIsBotTyping] = useState(false);
-	const [onSubmitSuccessFn, setOnSubmitSuccessFn] = useState<SubmitSuccessFn>(() => () => {});
-	const scrollToEnd = useMemo(
-		() => (options?: Omit<ScrollToOptions, 'top'>) =>
-			chatRef.current?.scrollTo({ top: chatRef.current.scrollHeight, ...options }),
-		[chatRef],
-	);
-
-	const chatService = useMemo(() => {
-		const chatService: ChatService = {
-			send: async ({ message, signal }) => {
-				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;
-						}
-						setIsBotTyping(true);
-						const typingTime = message.text.length * TYPING_SPEED_MS_PER_CHARACTER;
-						await new Promise(resolve => {
-							return setTimeout(resolve, typingTime, { signal });
-						});
-						setIsBotTyping(false);
-					})
-					.otherwise(async () => void 0);
-
-				/** The signal could have been aborted while typing */
-				if (signal?.aborted) {
-					logger?.info(`Aborted sending message`);
-					return;
-				}
-				application.addMessage(message);
-			},
-			input: async input => {
-				application.setInput(input);
-
-				return await new Promise(resolve => {
-					const submitFunction: SubmitSuccessFn = submission => {
-						application.setInput(undefined);
-						application.setSubmission(input.key, submission);
-						resolve(submission as any);
-					};
-					setOnSubmitSuccessFn(() => submitFunction);
-				});
-			},
-		};
-
-		return chatService;
-	}, [logger]);
-
-	return {
-		chatRef,
-		chatService,
-		isBotTyping,
-		onSubmitSuccessFn,
-		scrollToEnd,
-	};
-};

package/src/ui/useFocus.ts

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

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />