@inploi/plugin-chatbot 2.0.0 → 2.1.1

package/{public → cdn}/mockServiceWorker.js

@@ -2,13 +2,13 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.0.5).
+ * Mock Service Worker (2.0.10).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '0877fcdc026242810f5bfde0d7178db4'
+const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -121,11 +121,6 @@ async function handleRequest(event, requestId) {
   if (client && activeClientIds.has(client.id)) {
     ;(async function () {
       const responseClone = response.clone()
-      // When performing original requests, response body will
-      // always be a ReadableStream, even for 204 responses.
-      // But when creating a new Response instance on the client,
-      // the body for a 204 response must be null.
-      const responseBody = response.status === 204 ? null : responseClone.body
 
       sendToClient(
         client,
@@ -137,11 +132,11 @@ async function handleRequest(event, requestId) {
             type: responseClone.type,
             status: responseClone.status,
             statusText: responseClone.statusText,
-            body: responseBody,
+            body: responseClone.body,
             headers: Object.fromEntries(responseClone.headers.entries()),
           },
         },
-        [responseBody],
+        [responseClone.body],
       )
     })()
   }

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@inploi/plugin-chatbot",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "type": "module",
+  "files": [
+    "/dist",
+    "/cdn"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
     "@preact/signals": "^1.2.2",
@@ -11,6 +22,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "culori": "^3.3.0",
     "framer-motion": "^10.16.5",
     "idb-keyval": "^6.2.1",
     "preact": "^10.16.0",
@@ -30,14 +42,19 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^12.6.0",
+    "@playwright/test": "^1.40.1",
     "@preact/preset-vite": "^2.5.0",
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/culori": "^2.0.4",
+    "@types/node": "^20.10.0",
     "@types/react-transition-group": "^4.4.9",
     "autoprefixer": "^10.4.16",
+    "dotenv": "^16.3.1",
     "eslint": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "happy-dom": "^12.6.0",
-    "msw": "^2.0.5",
+    "msw": "^2.0.10",
+    "playwright-msw": "^3.0.0",
     "postcss": "^8.4.31",
     "postcss-nesting": "^12.0.1",
     "rollup-plugin-visualizer": "^5.9.2",
@@ -46,9 +63,9 @@
     "typescript": "^5.3.2",
     "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.1",
-    "@inploi/sdk": "1.5.0",
-    "eslint-config-custom": "0.1.0",
-    "tsconfig": "0.1.0"
+    "@inploi/sdk": "1.5.1",
+    "tsconfig": "0.1.0",
+    "eslint-config-custom": "0.1.0"
   },
   "msw": {
     "workerDirectory": "public"
@@ -58,6 +75,9 @@
     "build": "tsc && vite build",
     "setup-local": "cp -n .env.example .env || true",
     "check": "eslint src --fix --max-warnings 0 && tsc",
+    "test:unit": "bun test",
+    "test:int": "playwright test",
+    "test:ui": "playwright test --ui",
     "preview": "vite preview"
   }
 }

package/.env

@@ -1,3 +0,0 @@
-VITE_BASE_URL='https://preview.api.inploi.com'
-VITE_PUBLISHABLE_KEY='pk_edce29b92c2773898c482851'
-VITE_MOCKS=true

package/.env.example

@@ -1,3 +0,0 @@
-VITE_BASE_URL='https://preview.api.inploi.com'
-VITE_PUBLISHABLE_KEY=''
-VITE_MOCKS=true

package/.eslintrc.cjs

@@ -1,10 +0,0 @@
-/*eslint-env node */
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-	root: true,
-	// This tells ESLint to load the config from the package `eslint-config-custom`
-	extends: ['custom', 'plugin:react-hooks/recommended'],
-	plugins: ['react-hooks'],
-	env: { browser: true, es2020: true },
-	parserOptions: { project: ['./tsconfig.json'], tsconfigRootDir: __dirname },
-};

package/CHANGELOG.md

@@ -1,85 +0,0 @@
-# @inploi/plugin-chatbot
-
-## 2.0.0
-
-### Patch Changes
-
-- 2975c09: Replace `zustand` with `idb-keyval` and `@preact/signals` to better utilise indexeddb and reduce bundle size
-- cc46781: Track started applications via the new `analytics` service exposed by sdk
-- Updated dependencies [d8dc36f]
-- Updated dependencies [d8dc36f]
-  - @inploi/sdk@1.5.0
-  - @inploi/core@1.5.6
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies
-  - @inploi/core@1.5.5
-  - @inploi/sdk@1.4.6
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies [3cbdf6b]
-  - @inploi/core@1.5.4
-  - @inploi/sdk@1.4.5
-
-## 1.0.5
-
-### Patch Changes
-
-- Implement map of node types
-- Updated dependencies
-  - @inploi/core@1.5.3
-  - @inploi/sdk@1.4.4
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies
-  - @inploi/core@1.5.2
-  - @inploi/sdk@1.4.3
-
-## 1.0.3
-
-### Patch Changes
-
-- Updated dependencies
-  - @inploi/core@1.5.1
-  - @inploi/sdk@1.4.2
-
-## 1.0.2
-
-### Patch Changes
-
-- Updated dependencies [ba05115]
-  - @inploi/core@1.5.0
-  - @inploi/sdk@1.4.1
-
-## 1.0.1
-
-### Patch Changes
-
-- e9c1677: (Following 1.0) rewrite exports to new plugin format
-- Updated dependencies [d0f1d33]
-  - @inploi/sdk@1.0.1
-
-## 1.0.0
-
-### Patch Changes
-
-- d8a904e: Split SDK plugins into their own packages
-- Updated dependencies [5a34b5a]
-- Updated dependencies [5d1e92b]
-- Updated dependencies [5d1e92b]
-- Updated dependencies [df4f06d]
-- Updated dependencies [d5caf7e]
-- Updated dependencies [a582965]
-- Updated dependencies [d8a904e]
-- Updated dependencies [553e630]
-  - @inploi/core@1.4.0
-  - @inploi/sdk@1.0.0

package/bunfig.toml

@@ -1,2 +0,0 @@
-[test]
-preload = "./happydom.ts"

package/happydom.ts

@@ -1,10 +0,0 @@
-import { GlobalRegistrator } from '@happy-dom/global-registrator';
-import { IWindow } from 'happy-dom';
-
-GlobalRegistrator.register();
-
-declare global {
-	interface Window {
-		happyDOM: IWindow['happyDOM'];
-	}
-}

package/index.html

@@ -1,28 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Vite + Preact + TS</title>
-	</head>
-	<body
-		style="
-			font-family: 'Courier New', Courier, monospace;
-			height: 100vh;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		"
-	>
-		<div>
-			<h1 style="font-size: 2rem; letter-spacing: -0.02em; text-align: center">Super legit careers hub</h1>
-			<p>Welcome, start applying by clicking on one of the buttons below</p>
-
-			<button onclick="chatbot.startApplication({ jobId: '1' })">Apply for Wagamama job</button>
-			<button onclick="chatbot.startApplication({ jobId: '2' })">Apply for job Test flow</button>
-		</div>
-
-		<script type="module" src="/src/index.dev.ts"></script>
-	</body>
-</html>

package/postcss.config.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-		'tailwindcss/nesting': {},
-	},
-};

package/src/chatbot.api.ts

@@ -1,46 +0,0 @@
-import { FlowNode } from '@inploi/core/flows';
-import { ApiClient } from '@inploi/sdk';
-import { any, array, coerce, number, object, optional, parse, string } from 'valibot';
-
-export type JobApplication = {
-	job: {
-		id: string; // internal inploi job id
-		title: string; //job title
-	};
-	company: {
-		name: string; // company name
-		logo?: string; // company logo
-	};
-	flow: {
-		id: string; // flow id
-		version: number; // hardcode the version as 0 until we have versioning
-		nodes: FlowNode[]; // new jsonb flow nodes, no need for the legacy parser to run
-	};
-};
-
-const ApplicationSchema = object({
-	job: object({
-		id: coerce(string(), String),
-		title: string(),
-	}),
-	company: object({
-		name: string(),
-		logo: optional(string()),
-	}),
-	flow: object({
-		id: coerce(string(), String),
-		nodes: array(any()),
-		version: number(),
-	}),
-});
-
-export async function getApplicationData({
-	jobId,
-	apiClient,
-}: {
-	jobId: string;
-	apiClient: ApiClient;
-}): Promise<JobApplication> {
-	const rawData = await apiClient.fetch(`/flow/job/${jobId}`);
-	return parse(ApplicationSchema, rawData);
-}

package/src/chatbot.constants.ts

@@ -1,9 +0,0 @@
-export const CHATBOT_ELEMENT_ID = 'isdk';
-
-export const HEADER_HEIGHT = 44;
-
-export const ERROR_MESSAGES = {
-	not_in_local_storage: 'Application not found in local storage',
-	invalid_end_node: 'Unexpected node type to finish flow',
-	no_submissions: 'Application ended without any fields submitted',
-};

package/src/chatbot.css

@@ -1,107 +0,0 @@
-#isdk {
-	font-size: 16px;
-	font-family: sans-serif;
-
-	/* Lowest colour */
-	--i-lowest: 0 0% 100%;
-
-	/* Neutral colors */
-	--i-n-1: 206 30% 98.8%;
-	--i-n-2: 210 16.7% 97.6%;
-	--i-n-3: 209 13.3% 95.3%;
-	--i-n-4: 209 12.2% 93.2%;
-	--i-n-5: 208 11.7% 91.1%;
-	--i-n-6: 208 11.3% 88.9%;
-	--i-n-7: 207 11.1% 85.9%;
-	--i-n-8: 205 10.7% 78%;
-	--i-n-9: 206 6% 56.1%;
-	--i-n-10: 206 5.8% 52.3%;
-	--i-n-11: 206 6% 43.5%;
-	--i-n-12: 206 24% 9%;
-
-	/* Accent colors */
-	--i-a-1: 240 33% 99%;
-	--i-a-2: 225 100% 98%;
-	--i-a-3: 222 89% 96%;
-	--i-a-4: 224 100% 94%;
-	--i-a-5: 224 100% 91%;
-	--i-a-6: 225 100% 88%;
-	--i-a-7: 226 87% 82%;
-	--i-a-8: 226 75% 75%;
-	--i-a-9: 226 70% 55%;
-	--i-a-10: 226 65% 52%;
-	--i-a-11: 226 56% 50%;
-	--i-a-12: 226 50% 24%;
-
-	/** Error colours */
-	--i-e-1: 340 100% 99%;
-	--i-e-2: 353 100% 98%;
-	--i-e-3: 351 91% 96%;
-	--i-e-4: 351 100% 93%;
-	--i-e-5: 350 100% 90%;
-	--i-e-6: 351 80% 86%;
-	--i-e-7: 349 68% 81%;
-	--i-e-8: 348 61% 74%;
-	--i-e-9: 348 75% 59%;
-	--i-e-10: 347 70% 55%;
-	--i-e-11: 345 70% 47%;
-	--i-e-12: 344 63% 24%;
-
-	@tailwind base;
-	@tailwind components;
-	@tailwind utilities;
-	@tailwind variants;
-
-	@layer base {
-		--tw-content: '';
-		font-family:
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			Segoe UI,
-			Roboto,
-			Oxygen,
-			Ubuntu,
-			Cantarell,
-			Open Sans,
-			Helvetica Neue,
-			sans-serif;
-
-		* {
-			box-sizing: border-box;
-			border-style: solid;
-			border-width: 0;
-			-webkit-tap-highlight-color: transparent;
-		}
-
-		::before,
-		::after {
-			box-sizing: border-box;
-		}
-
-		:is(ul, ol) {
-			list-style: none;
-			padding: 0;
-			margin: 0;
-		}
-
-		:is(p) {
-			margin: 0;
-			padding: 0;
-		}
-
-		:is(li) {
-			margin: 0;
-			padding: 0;
-			list-style: none;
-		}
-
-		:is(button) {
-			margin: 0;
-			padding: 0;
-			border: unset;
-			background: unset;
-			text-align: unset;
-		}
-	}
-}

package/src/chatbot.dom.ts

@@ -1,17 +0,0 @@
-import { CHATBOT_ELEMENT_ID } from './chatbot.constants';
-
-export const createChatbotDomManager = () => {
-	let chatbotElement: HTMLDivElement | null = null;
-	return {
-		getOrCreateChatbotElement: () => {
-			if (chatbotElement) return chatbotElement;
-
-			const newElement = document.createElement('div');
-			document.body.appendChild(newElement);
-			newElement.id = CHATBOT_ELEMENT_ID;
-			chatbotElement = newElement;
-			return newElement;
-		},
-	};
-};
-export type ChatbotDomManager = ReturnType<typeof createChatbotDomManager>;

package/src/chatbot.idb.ts

@@ -1,17 +0,0 @@
-import { createStore, get, set } from 'idb-keyval';
-
-import { JobApplication } from './chatbot.api';
-import { ApplicationData, getCacheKey } from './chatbot.state';
-
-const store = createStore('inploi', 'applications');
-
-export const idb = {
-	getApplicationData: async (application: JobApplication) => {
-		const key = getCacheKey(application);
-		return await get<ApplicationData>(key, store);
-	},
-	setApplicationData: async (params: { application: JobApplication; data: ApplicationData }) => {
-		const key = getCacheKey(params.application);
-		return await set(key, params.data, store);
-	},
-};

package/src/chatbot.state.ts

@@ -1,89 +0,0 @@
-import { invariant } from '@inploi/core/common';
-import { Signal, batch, signal } from '@preact/signals';
-
-import { JobApplication } from './chatbot.api';
-import { idb } from './chatbot.idb';
-import { DistributivePick, getHeadOrThrow } from './chatbot.utils';
-import { ChatInput } from './ui/chat-input/chat-input';
-import { ChatbotInput } from './ui/chat-input/chat-input';
-
-export const getCacheKey = (application: JobApplication) =>
-	[application.job.id, application.flow.id, application.flow.version].join('/');
-
-export type ViewState = 'maximised' | 'minimised';
-export const viewState = signal<ViewState>('maximised');
-
-export const inputHeight = signal(0);
-
-export type StartedJobApplication = JobApplication & { data: ApplicationData };
-const currentApplication: Signal<StartedJobApplication | null> = signal<StartedJobApplication | null>(null);
-export const cancelCurrentApplication = () => {
-	currentApplication.value = null;
-};
-
-const updateApplicationData = async (updateFn: (data: ApplicationData) => ApplicationData) => {
-	const application = currentApplication.value;
-	invariant(application, 'No application to update');
-	const newData = updateFn(application.data);
-	currentApplication.value = { ...application, data: newData };
-	await idb.setApplicationData({ application, data: newData });
-};
-
-export const application = {
-	current$: currentApplication,
-	start: async (application: JobApplication) => {
-		const data = (await idb.getApplicationData(application)) ?? createNewApplicationData(application);
-		batch(() => {
-			viewState.value = 'maximised';
-			currentApplication.value = { ...application, data };
-		});
-		data.isFinished = false;
-		idb.setApplicationData({ application, data });
-	},
-	markAsFinished: () => updateApplicationData(data => ({ ...data, isFinished: true })),
-	setCurrentNodeId: (currentNodeId: string) => updateApplicationData(data => ({ ...data, currentNodeId })),
-	restart: () => {
-		const application = currentApplication.value;
-		invariant(application, 'No application to restart');
-		const data = createNewApplicationData(application);
-		currentApplication.value = { ...application, data };
-		idb.setApplicationData({ application, data });
-	},
-	addMessage: (message: ChatMessage) =>
-		updateApplicationData(data => ({ ...data, messages: [...data.messages, message] })),
-	setSubmission: (fieldKey: string, submission: ApplicationSubmission) =>
-		updateApplicationData(data => ({ ...data, submissions: { ...data.submissions, [fieldKey]: submission } })),
-	setInput: (input: ChatInput | undefined) => updateApplicationData(data => ({ ...data, currentInput: input })),
-};
-
-export type MessageAuthor = 'bot' | 'user';
-
-type SystemMessage = { type: 'system'; text: string; variant: 'info' | 'warning' | 'error' | 'success' };
-type TextMessage = { author: MessageAuthor; type: 'text'; text: string };
-type ImageMessage = { author: MessageAuthor; type: 'image'; url: string; width: number; height: number };
-type FileMessage = { author: MessageAuthor; type: 'file'; fileName: string; fileSizeKb: number };
-export type ChatMessage = TextMessage | ImageMessage | SystemMessage | FileMessage;
-
-export type ApplicationSubmission = DistributivePick<ChatbotInput, 'type' | 'value'>;
-
-export type KeyToSubmissionMap = {
-	[key: string]: ApplicationSubmission;
-};
-
-/** Dynamic part of an application */
-export type ApplicationData = {
-	/** History of messages left in the chat */
-	messages: ChatMessage[];
-	submissions: KeyToSubmissionMap;
-	currentNodeId: string;
-	/** Needs to be separate because a node can have many inputs */
-	currentInput?: ChatInput;
-	isFinished: boolean;
-};
-
-const createNewApplicationData = (application: JobApplication): ApplicationData => ({
-	messages: [],
-	submissions: {},
-	currentNodeId: getHeadOrThrow(application.flow.nodes).id,
-	isFinished: false,
-});

package/src/chatbot.ts

@@ -1,54 +0,0 @@
-import { createPlugin } from '@inploi/sdk';
-import { h, render } from 'preact';
-import { Chatbot } from '~/ui/chatbot';
-
-import { getApplicationData } from './chatbot.api';
-import './chatbot.css';
-import { ChatbotDomManager, createChatbotDomManager } from './chatbot.dom';
-import { application, cancelCurrentApplication } from './chatbot.state';
-
-export const chatbotPlugin = ({
-	_internal_domManager: dom = createChatbotDomManager(),
-}: {
-	geolocationApiKey?: string;
-	_internal_domManager?: ChatbotDomManager;
-}) =>
-	createPlugin(({ apiClient, logger, analytics }) => {
-		let prepared = false;
-		const renderAndPrepare = () => {
-			const chatbotElement = dom.getOrCreateChatbotElement();
-			render(h(Chatbot, { apiClient, logger, analytics }), chatbotElement);
-			prepared = true;
-		};
-
-		return {
-			/** Optionally eagerly renders the interface ahead of application requests. */
-			prepare: async () => {
-				try {
-					if (prepared) return;
-					renderAndPrepare();
-					logger.info('Chatbot plugin prepared');
-				} catch (error) {
-					console.error(error);
-					logger.error('Error preparing chatbot plugin', error);
-				}
-			},
-			startApplication: async ({ jobId }: { jobId: string }) => {
-				try {
-					cancelCurrentApplication();
-					const applicationData = await getApplicationData({ jobId, apiClient });
-
-					await application.start(applicationData);
-
-					if (!prepared) renderAndPrepare();
-				} catch (error) {
-					console.error(error);
-					logger.error('Error starting application', error);
-				}
-			},
-			closeApplication: async () => {
-				logger.info('Closing application from an external source');
-				cancelCurrentApplication();
-			},
-		};
-	});

package/src/chatbot.utils.ts

@@ -1,50 +0,0 @@
-import { FlowNode } from '@inploi/core/flows';
-
-import { ApplicationSubmission, KeyToSubmissionMap, StartedJobApplication } from './chatbot.state';
-
-export type DistributivePick<T, K extends keyof T> = T extends unknown ? Pick<T, K> : never;
-
-export const getHeadOrThrow = (nodes: FlowNode[]) => {
-	const head = nodes.find(n => n.isHead);
-	if (!head) throw new Error('No head node found');
-	return head;
-};
-
-export const submissionsToPayload = ({
-	application,
-	submissions,
-}: {
-	application: StartedJobApplication;
-	submissions: KeyToSubmissionMap;
-}) => {
-	const payload = {
-		flowId: application.flow.id,
-		jobId: application.job.id,
-		submissions: Object.entries(submissions).reduce(
-			(acc, [key, submission]) => {
-				acc[key] = submission.value;
-				return acc;
-			},
-			{} as Record<string, ApplicationSubmission['value']>,
-		),
-	};
-
-	return payload;
-};
-
-export const isSubmissionOfType =
-	<T extends ApplicationSubmission['type']>(type: T) =>
-	(submission?: ApplicationSubmission): submission is Extract<ApplicationSubmission, { type: T }> => {
-		if (!submission) return false;
-		return submission.type === type;
-	};
-
-export function gzip(string: string) {
-	if (!('CompressionStream' in window)) return string;
-	const byteArray = new TextEncoder().encode(string);
-	const cs = new CompressionStream('gzip');
-	const writer = cs.writable.getWriter();
-	writer.write(byteArray);
-	writer.close();
-	return new Response(cs.readable).text();
-}

package/src/index.cdn.ts

@@ -1,12 +0,0 @@
-import { chatbotPlugin } from './chatbot';
-
-declare global {
-	interface Window {
-		inploi?: {
-			chatbotPlugin?: typeof chatbotPlugin;
-		};
-	}
-}
-
-if (!window.inploi) throw new Error('Please insert the SDK script tag above the plugins.');
-window.inploi.chatbotPlugin = chatbotPlugin;