@inploi/plugin-chatbot 2.1.0 → 2.1.2

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.application?.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-8 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;
-	input: ChatInputType | undefined;
-	onInputChange: (input?: ChatInputType['type']) => void;
-};
-export const ChatInput = ({ onSubmit, onInputChange, input }: ChatInputFactoryProps) => {
-	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>
-	);
-};

package/src/ui/chatbot-header.tsx

@@ -1,95 +0,0 @@
-import clsx from 'clsx';
-import { ComponentChildren, ComponentProps } from 'preact';
-
-import { application, 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 = ({ children }: { children?: ComponentChildren }) => {
-	const view = viewState.value;
-
-	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">
-				{children}
-			</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">
-					{children}
-				</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={application.cancel}>
-							<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,94 +0,0 @@
-import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
-import * as Dialog from '@radix-ui/react-dialog';
-import { LazyMotion, domAnimation } from 'framer-motion';
-import { AnimatePresence, Variants, m } from 'framer-motion';
-import { Suspense, lazy, useRef } from 'preact/compat';
-import { P, match } from 'ts-pattern';
-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 { state, application: currentApplication } = application.current$.value;
-	const view = viewState.value;
-	const isApplying = state === 'loaded' && view === 'maximised';
-	const drawerRef = useRef<HTMLDivElement>(null);
-
-	return (
-		<MotionProvider>
-			<Dialog.Root open={isApplying} modal={isApplying}>
-				<AnimatePresence>
-					<Dialog.Overlay key="bg" forceMount asChild>
-						{isApplying && (
-							<m.div
-								initial={{ opacity: 0 }}
-								animate={{ opacity: 1 }}
-								exit={{ opacity: 0 }}
-								class="bg-neutral-12/60 fixed inset-0"
-							/>
-						)}
-					</Dialog.Overlay>
-
-					<Dialog.Content forceMount asChild>
-						<m.div
-							key="content"
-							ref={drawerRef}
-							aria-modal="true"
-							role="dialog"
-							aria-labelledby="chatbot-header"
-							variants={chatbotVariants}
-							initial="closed"
-							animate={match({ state, view })
-								.with({ state: 'idle' }, () => 'closed')
-								.with({ state: 'error' }, () => 'minimised')
-								.with({ state: P.union('loaded', 'loading') }, ({ view }) => view)
-								.exhaustive()}
-							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"
-						>
-							<div class="outline outline-1 h-full outline-neutral-5 relative flex flex-col bg-neutral-2 rounded-3xl overflow-hidden">
-								<ChatbotHeader>
-									{currentApplication
-										? `Applying for “${currentApplication.job.title}” at ${currentApplication.company.name}`
-										: 'inploi chatbot'}
-								</ChatbotHeader>
-
-								<Suspense fallback={<div>loading…</div>}>
-									{view === 'maximised' && state === 'loaded' && (
-										<JobApplicationContent
-											analytics={analytics}
-											currentApplication={currentApplication}
-											apiClient={apiClient}
-											logger={logger}
-										/>
-									)}
-								</Suspense>
-							</div>
-						</m.div>
-					</Dialog.Content>
-				</AnimatePresence>
-			</Dialog.Root>
-		</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,144 +0,0 @@
-import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
-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();
-
-	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 { state, application: currentApplication } = application.current$.value;
-		if (state !== 'loaded' || currentApplication.data.isFinished) return;
-
-		const { interpret, abort } = createFlowInterpreter({
-			flow: currentApplication.flow.nodes,
-			chatService,
-			getSubmissions: () => application.current$.peek().application?.data.submissions,
-			beforeStart: async node => {
-				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 {
-					// We restart the last node.
-					const restoredFromId = node.id;
-					application.removeLastGroupMessagesById(restoredFromId);
-				}
-			},
-			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',
-							},
-							groupId: 'system',
-						});
-					})
-					.with({ type: 'complete-flow' }, async () => {
-						const submissions = application.current$.peek().application?.data.submissions;
-						if (!submissions) throw new Error(ERROR_MESSAGES.no_submissions);
-
-						const response = await apiClient.fetch(`/flow/apply`, {
-							method: 'POST',
-							body: JSON.stringify(submissionsToPayload({ application: currentApplication, submissions })),
-						});
-
-						match(response)
-							.with({ message: 'Success' }, () => {
-								chatService.send({
-									message: {
-										type: 'system',
-										text: 'Application submitted',
-										variant: 'success',
-									},
-									groupId: 'system',
-								});
-							})
-							.otherwise(response => {
-								logger.error(response);
-								chatService.send({
-									message: {
-										type: 'system',
-										text: 'Error submitting application',
-										variant: 'error',
-									},
-									groupId: 'system',
-								});
-							});
-					})
-					.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
-				input={currentApplication.data.currentInput}
-				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>
-);