@inploi/plugin-chatbot 2.1.0 → 2.1.1

package/src/mocks/handlers.ts

@@ -1,57 +0,0 @@
-import { invariant } from '@inploi/core/common';
-import { HttpResponse, http } from 'msw';
-import { match } from 'ts-pattern';
-
-import { automatedTestFlow, exampleFlows } from './example.flows';
-
-// 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: {
-				id: +ctx.params.jobId,
-				title: 'Test job',
-			},
-			company: {
-				name: 'Test company',
-			},
-			flow: {
-				id: 1,
-				nodes: match(ctx.params.jobId)
-					.with('1', () => exampleFlows.fromAlex)
-					.with('test', () => automatedTestFlow)
-					.otherwise(() => exampleFlows.helloWorld),
-				version: 1,
-			},
-		};
-		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(`${BASE_URL}/analytics/log`, () => {
-		return new HttpResponse(JSON.stringify({ message: 'Success' }));
-	}),
-];

package/src/style/palette.test.ts

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

@@ -1,69 +0,0 @@
-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,51 +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-accent-7 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.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"
-			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.application?.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>
-	);
-};