@inploi/plugin-chatbot 1.0.0

package/src/ui/chatbot.tsx

@@ -0,0 +1,53 @@
+import { ApiClient, Logger } from '@inploi/sdk';
+import { useRef } from 'preact/hooks';
+import { Transition } from 'react-transition-group';
+import { overlayClassNames } from '~/chatbot.dom';
+
+import { useChatbotStore } from '../chatbot.state';
+import { ChatbotHeader } from './chatbot-header';
+import { JobApplicationContent } from './job-application-content';
+import { TransitionState } from './transition';
+
+type ChatbotProps = {
+	apiClient: ApiClient;
+	logger?: Logger;
+};
+export const Chatbot = ({ logger, apiClient }: ChatbotProps) => {
+	const { currentApplication, viewState } = useChatbotStore();
+	const isOpen = currentApplication !== null;
+	const overlayRef = useRef<HTMLDivElement>(null);
+	const chatRef = useRef<HTMLDivElement>(null);
+	return (
+		<>
+			<Transition nodeRef={overlayRef} in={isOpen && viewState === 'maximised'} timeout={100}>
+				{(state: TransitionState) => {
+					if (state === 'exited') return null;
+					return <div ref={overlayRef} data-transition={state} class={overlayClassNames} />;
+				}}
+			</Transition>
+			<Transition appear={true} nodeRef={chatRef} in={isOpen} timeout={0}>
+				{(state: TransitionState) => {
+					if (state === 'exited') return null;
+					return (
+						<div
+							ref={chatRef}
+							style={{ '--header-height': '44px' }}
+							data-transition={state}
+							data-state={viewState}
+							class="isolate h-[75vh] h-[75lvh] data-[transition=entered]:translate-y-0 data-[transition=entered]:data-[state=minimised]:translate-y-[calc(100%-var(--header-height)-0.5rem)] transition-transform ease-expo-out duration-500 translate-y-full fixed left-0 right-0 mx-auto w-full max-w-[450px] bottom-0 p-2 max-h-full overflow-hidden focus:outline-none"
+						>
+							<div class="outline outline-1 h-full outline-neutral-5 max-h-full relative flex flex-col bg-neutral-2 rounded-3xl overflow-hidden">
+								{currentApplication && (
+									<>
+										<ChatbotHeader application={currentApplication} />
+										<JobApplicationContent application={currentApplication} apiClient={apiClient} logger={logger} />
+									</>
+								)}
+							</div>
+						</div>
+					);
+				}}
+			</Transition>
+		</>
+	);
+};

package/src/ui/input-error.tsx

@@ -0,0 +1,39 @@
+import { Ref } from 'preact';
+import type { FieldError } from 'react-hook-form';
+import { Transition } from 'react-transition-group';
+
+import { TransitionState } from './transition';
+
+export const InputError = ({ error }: { error?: FieldError }) => {
+	return (
+		<Transition in={Boolean(error)} timeout={15}>
+			{(state: TransitionState) => {
+				if (!error) return null;
+
+				return (
+					<div
+						ref={error.ref as Ref<HTMLDivElement> | undefined}
+						data-transition={state}
+						role="alert"
+						class="transition-all opacity-0 ease-expo-out duration-300 translate-y-1/2 data-[transition=entered]:opacity-100 data-[transition=entered]:translate-y-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>
+					</div>
+				);
+			}}
+		</Transition>
+	);
+};

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

@@ -0,0 +1,122 @@
+import { ApiClient, Logger } from '@inploi/sdk';
+import { useLayoutEffect, useRef } from 'react';
+import { match } from 'ts-pattern';
+import { JobApplication } from '~/chatbot.api';
+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';
+import { useChatService } from './useChatService';
+
+type JobApplicationContentProps = {
+	apiClient: ApiClient;
+	logger?: Logger;
+	application: JobApplication;
+};
+
+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 });
+
+	useLayoutEffect(() => {
+		const { getApplicationLocalState, setInput, updateApplicationLocalState, updateApplicationCurrentNode } =
+			useLocalState.getState();
+		const applicationLocalState = getApplicationLocalState(application);
+		scrollToEnd({ behavior: 'instant' });
+		if (applicationLocalState?.isFinished) return;
+
+		const { interpret, abort } = createFlowInterpreter({
+			flow: application.flow.nodes,
+			chatService,
+			getSubmissions: () => getApplicationLocalState(application)?.submissions,
+			beforeStart: async node => {
+				setInput({ application, data: null });
+
+				const isResuming = !node.isHead;
+				if (isResuming) {
+					await chatService.send({
+						message: {
+							type: 'system',
+							text: 'Restored in progress application',
+							variant: 'info',
+						},
+					});
+				}
+			},
+			onInterpret: node => {
+				updateApplicationCurrentNode({ application, currentNodeId: node.id });
+			},
+			onFlowEnd: async lastNode => {
+				updateApplicationLocalState({ application, data: { isFinished: true } });
+				return match(lastNode)
+					.with({ type: 'abandon-flow' }, () => {
+						chatService.send({
+							message: {
+								type: 'system',
+								text: 'Application ended',
+								variant: 'success',
+							},
+						});
+					})
+					.with({ type: 'complete-flow' }, async () => {
+						const submissions = getApplicationLocalState(application)?.submissions;
+						if (!submissions) throw new Error(ERROR_MESSAGES.no_submissions);
+
+						const response = await apiClient.fetch(`/flow/job/${application.job.id}`, {
+							method: 'POST',
+							body: JSON.stringify(submissionsToPayload(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(applicationLocalState?.currentNodeId);
+
+		return abort;
+	}, [apiClient, application, 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>
+		</div>
+	);
+};

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

@@ -0,0 +1,56 @@
+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 { 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 (
+		<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(),
+			)}
+			<aside aria-hidden>{isBotTyping && <TypingIndicator />}</aside>
+		</div>
+	);
+};

package/src/ui/loading-indicator.tsx

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,27 @@
+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

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

package/src/ui/typing-indicator.tsx

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,82 @@
+import { Logger } from '@inploi/sdk';
+import { Ref, useMemo, useState } from 'preact/hooks';
+import { match } from 'ts-pattern';
+import { JobApplication } from '~/chatbot.api';
+import { useLocalState } from '~/chatbot.state';
+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) => {
+	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 { setInput, updateSubmission, addMessage } = useLocalState.getState();
+		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;
+				}
+				addMessage({ application, data: message });
+				scrollToEnd({ behavior: 'smooth' });
+			},
+			input: async input => {
+				setInput({ application, data: input });
+
+				return await new Promise(resolve => {
+					const submitFunction: SubmitSuccessFn = submission => {
+						setInput({ application, data: null });
+						updateSubmission({
+							application,
+							fieldKey: input.key,
+							data: submission,
+						});
+						resolve(submission as any);
+					};
+					setOnSubmitSuccessFn(() => submitFunction);
+				});
+			},
+		};
+
+		return chatService;
+	}, [application, logger, scrollToEnd]);
+
+	return {
+		chatService,
+		isBotTyping,
+		onSubmitSuccessFn,
+		scrollToEnd,
+	};
+};

package/src/vite-env.d.ts

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

package/tailwind.config.ts

@@ -0,0 +1,119 @@
+// @ts-expect-error - there aren't any typings for this
+import touchPlugin from 'tailwindcss-touch';
+import plugin from 'tailwindcss/plugin';
+import { Config } from 'tailwindcss/types/config';
+
+const config: Config = {
+	content: ['./**/*.{tsx,ts}'],
+	theme: {
+		colors: {
+			transparent: 'transparent',
+			lowest: 'hsl(var(--i-lowest) / <alpha-value>)',
+			neutral: {
+				1: 'hsl(var(--i-n-1) / <alpha-value>)',
+				2: 'hsl(var(--i-n-2) / <alpha-value>)',
+				3: 'hsl(var(--i-n-3) / <alpha-value>)',
+				4: 'hsl(var(--i-n-4) / <alpha-value>)',
+				5: 'hsl(var(--i-n-5) / <alpha-value>)',
+				6: 'hsl(var(--i-n-6) / <alpha-value>)',
+				7: 'hsl(var(--i-n-7) / <alpha-value>)',
+				8: 'hsl(var(--i-n-8) / <alpha-value>)',
+				9: 'hsl(var(--i-n-9) / <alpha-value>)',
+				10: 'hsl(var(--i-n-10) / <alpha-value>)',
+				11: 'hsl(var(--i-n-11) / <alpha-value>)',
+				12: 'hsl(var(--i-n-12) / <alpha-value>)',
+			},
+
+			accent: {
+				1: 'hsl(var(--i-a-1) / <alpha-value>)',
+				2: 'hsl(var(--i-a-2) / <alpha-value>)',
+				3: 'hsl(var(--i-a-3) / <alpha-value>)',
+				4: 'hsl(var(--i-a-4) / <alpha-value>)',
+				5: 'hsl(var(--i-a-5) / <alpha-value>)',
+				6: 'hsl(var(--i-a-6) / <alpha-value>)',
+				7: 'hsl(var(--i-a-7) / <alpha-value>)',
+				8: 'hsl(var(--i-a-8) / <alpha-value>)',
+				9: 'hsl(var(--i-a-9) / <alpha-value>)',
+				10: 'hsl(var(--i-a-10) / <alpha-value>)',
+				11: 'hsl(var(--i-a-11) / <alpha-value>)',
+				12: 'hsl(var(--i-a-12) / <alpha-value>)',
+			},
+
+			error: {
+				1: 'hsl(var(--i-e-1) / <alpha-value>)',
+				2: 'hsl(var(--i-e-2) / <alpha-value>)',
+				3: 'hsl(var(--i-e-3) / <alpha-value>)',
+				4: 'hsl(var(--i-e-4) / <alpha-value>)',
+				5: 'hsl(var(--i-e-5) / <alpha-value>)',
+				6: 'hsl(var(--i-e-6) / <alpha-value>)',
+				7: 'hsl(var(--i-e-7) / <alpha-value>)',
+				8: 'hsl(var(--i-e-8) / <alpha-value>)',
+				9: 'hsl(var(--i-e-9) / <alpha-value>)',
+				10: 'hsl(var(--i-e-10) / <alpha-value>)',
+				11: 'hsl(var(--i-e-11) / <alpha-value>)',
+				12: 'hsl(var(--i-e-12) / <alpha-value>)',
+			},
+		},
+
+		extend: {
+			boxShadow: {
+				'surface-sm': '0px 3px 3px 0px hsl(var(--i-a-12) / 0.03), 0px 4px 4px 0px hsl(var(--i-a-12) / 0.02)',
+				'surface-md':
+					'0px 3px 3px 0px hsl(var(--i-a-12) / 0.03), 0px 6px 4px 0px hsl(var(--i-a-12) / 0.02), 0px 6px 4px 0px hsl(var(--i-a-12) / 0.01)',
+				'surface-lg':
+					'0px 3px 3px 0px hsl(var(--i-a-12) / 0.03), 0px 6px 4px 0px hsl(var(--i-a-12) / 0.02), 0px 11px 4px 0px hsl(var(--i-a-12) / 0.01), 0px 32px 24px -12px hsl(var(--i-a-12) / 0.06)',
+			},
+
+			keyframes: {
+				overlayShow: {
+					from: { opacity: '0' },
+					to: { opacity: '1' },
+				},
+			},
+			transitionTimingFunction: {
+				'expo-out': 'cubic-bezier(0.16, 1, 0.3, 1)',
+			},
+			animation: {
+				overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+			},
+		},
+	},
+	corePlugins: {
+		preflight: false,
+	},
+
+	plugins: [
+		touchPlugin(),
+		plugin(({ addUtilities }) => {
+			addUtilities({
+				'.gutter-stable': {
+					'scrollbar-gutter': 'stable',
+				},
+				'.hide-scrollbars': {
+					'&::-webkit-scrollbar': {
+						display: 'none',
+					},
+					scrollbarWidth: 'none',
+					'-ms-overflow-style': 'none',
+				},
+				'.touch-hitbox': {
+					'&::before': {
+						content: "''",
+						position: 'absolute',
+						display: 'block',
+						top: '50%',
+						left: '50%',
+						transform: 'translate(-50%, -50%)',
+						width: '100%',
+						height: '100%',
+						minHeight: '44px',
+						minWidth: '44px',
+						zIndex: '9999',
+					},
+				},
+			});
+		}),
+	],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+
+		/* Linting */
+		"strict": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"types": ["bun-types"],
+
+		"baseUrl": ".",
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"],
+			"~/*": ["./src/*"]
+		}
+	},
+	"include": ["src", ".eslintrc.cjs", "tailwind.config.ts", "vite.config.ts"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/types.d.ts

@@ -0,0 +1,2 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />

package/vite.config.ts

@@ -0,0 +1,18 @@
+import preact from '@preact/preset-vite';
+import { resolve } from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	build: {
+		lib: {
+			formats: ['es'],
+			entry: resolve(__dirname, 'src/index.cdn.ts'),
+			name: 'inploi.chatbotPlugin',
+		},
+		rollupOptions: {},
+	},
+	plugins: [preact(), visualizer(), tsconfigPaths()],
+});