@inploi/plugin-chatbot 1.0.7 → 2.1.0

package/.env

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

package/.env.example

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

package/.env.test

@@ -0,0 +1,2 @@
+VITE_PUBLISHABLE_KEY='fake_key'
+VITE_MOCKS=false # mocking is handled by the spec

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @inploi/plugin-chatbot
 
+## 2.1.0
+
+### Minor Changes
+
+- Support hues for colouring the 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

package/index.html

@@ -19,8 +19,9 @@
 			<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: '150153' })">Apply for Compass job</button>
 			<button onclick="chatbot.startApplication({ jobId: '1' })">Apply for Wagamama job</button>
-			<button onclick="chatbot.startApplication({ jobId: '2' })">Apply for job Test flow</button>
+			<button onclick="chatbot.startApplication({ jobId: 'test' })">Apply for job Test flow</button>
 		</div>
 
 		<script type="module" src="/src/index.dev.ts"></script>

package/package.json

@@ -1,39 +1,49 @@
 {
   "name": "@inploi/plugin-chatbot",
-  "version": "1.0.7",
+  "version": "2.1.0",
   "type": "module",
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
+    "@preact/signals": "^1.2.2",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-focus-guards": "^1.0.1",
+    "@radix-ui/react-focus-scope": "^1.0.4",
+    "@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",
-    "immer": "^10.0.3",
     "preact": "^10.16.0",
     "react": "npm:@preact/compat",
     "react-dom": "npm:@preact/compat",
     "react-hook-form": "^7.48.2",
+    "react-remove-scroll": "^2.5.7",
     "react-transition-group": "^4.4.5",
     "swr": "^2.2.4",
     "tailwindcss-touch": "^1.0.1",
     "ts-pattern": "^5.0.5",
-    "vaul": "^0.7.8",
-    "zod": "^3.22.0",
-    "zustand": "^4.4.4",
-    "@inploi/core": "1.5.5"
+    "valibot": "^0.21.0",
+    "@inploi/core": "1.5.6"
   },
   "peerDependencies": {
     "@inploi/sdk": "*"
   },
   "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",
@@ -42,7 +52,7 @@
     "typescript": "^5.3.2",
     "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.1",
-    "@inploi/sdk": "1.4.6",
+    "@inploi/sdk": "1.5.1",
     "eslint-config-custom": "0.1.0",
     "tsconfig": "0.1.0"
   },
@@ -54,6 +64,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/playwright.config.ts

@@ -0,0 +1,82 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+dotenv.config({ path: path.resolve(process.cwd(), '.env.test') });
+
+const PORT = 3333;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './tests',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: process.env.BASE_URL || `http://localhost:${PORT}`,
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		// {
+		// 	name: 'firefox',
+		// 	use: { ...devices['Desktop Firefox'] },
+		// },
+
+		// {
+		// 	name: 'webkit',
+		// 	use: { ...devices['Desktop Safari'] },
+		// },
+
+		/* Test against mobile viewports. */
+		{
+			name: 'Mobile Chrome',
+			use: { ...devices['Pixel 5'] },
+		},
+		{
+			name: 'Mobile Safari',
+			use: { ...devices['iPhone 12'] },
+		},
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: process.env.BASE_URL
+		? undefined
+		: {
+				command: `pnpm dev --port ${PORT} --mode test`,
+				port: PORT,
+		  },
+});

package/public/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/src/chatbot.api.ts

@@ -1,6 +1,6 @@
-import { FlowNode, FlowNodeSchema } from '@inploi/core/flows';
+import { FlowNode } from '@inploi/core/flows';
 import { ApiClient } from '@inploi/sdk';
-import z from 'zod';
+import { any, array, coerce, number, object, optional, parse, string } from 'valibot';
 
 export type JobApplication = {
 	job: {
@@ -18,19 +18,19 @@ export type JobApplication = {
 	};
 };
 
-const ApplicationFlowSchema = z.object({
-	job: z.object({
-		id: z.coerce.string(),
-		title: z.string(),
+const ApplicationSchema = object({
+	job: object({
+		id: coerce(string(), String),
+		title: string(),
 	}),
-	company: z.object({
-		name: z.string(),
-		logo: z.string().optional(),
+	company: object({
+		name: string(),
+		logo: optional(string()),
 	}),
-	flow: z.object({
-		id: z.coerce.string(),
-		nodes: z.array(FlowNodeSchema),
-		version: z.number(),
+	flow: object({
+		id: coerce(string(), String),
+		nodes: array(any()),
+		version: number(),
 	}),
 });
 
@@ -42,5 +42,5 @@ export async function getApplicationData({
 	apiClient: ApiClient;
 }): Promise<JobApplication> {
 	const rawData = await apiClient.fetch(`/flow/job/${jobId}`);
-	return ApplicationFlowSchema.parse(rawData);
+	return parse(ApplicationSchema, rawData);
 }

package/src/chatbot.constants.ts

@@ -1,6 +1,9 @@
 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

@@ -19,20 +19,6 @@
 	--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%;
@@ -79,7 +65,7 @@
 			box-sizing: border-box;
 		}
 
-		:is(ul) {
+		:is(ul, ol) {
 			list-style: none;
 			padding: 0;
 			margin: 0;
@@ -90,11 +76,18 @@
 			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,10 +1,9 @@
 import { CHATBOT_ELEMENT_ID } from './chatbot.constants';
 
-export const overlayClassNames =
-	'data-[transition=entering]:opacity-0 data-[transition=exiting]:opacity-0 ease-expo-out duration-500 transition-opacity bg-neutral-12/60 fixed inset-0';
-
 export const createChatbotDomManager = () => {
 	let chatbotElement: HTMLDivElement | null = null;
+	const styleElements: HTMLStyleElement[] = [];
+
 	return {
 		getOrCreateChatbotElement: () => {
 			if (chatbotElement) return chatbotElement;
@@ -15,8 +14,14 @@ export const createChatbotDomManager = () => {
 			chatbotElement = newElement;
 			return newElement;
 		},
-		renderLoading: (element: HTMLElement) => {
-			element.innerHTML = `<div class="${overlayClassNames}" />`;
+		addStyle: (css: string, id: string) => {
+			const head = document.head;
+			const element = document.createElement('style');
+			element.id = id;
+			element.innerHTML = css;
+
+			styleElements.push(element);
+			head.appendChild(element);
 		},
 	};
 };

package/src/chatbot.idb.ts

@@ -0,0 +1,17 @@
+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,52 +1,84 @@
-import { del, get, set } from 'idb-keyval';
-import { produce } from 'immer';
-import { create } from 'zustand';
-import { StateStorage, createJSONStorage, persist } from 'zustand/middleware';
+import { invariant } from '@inploi/core/common';
+import { 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';
 
-const storage: StateStorage = {
-	getItem: async (name: string): Promise<string | null> => {
-		return (await get(name)) || null;
-	},
-	setItem: async (name: string, value: string): Promise<void> => {
-		await set(name, value);
-	},
-	removeItem: async (name: string): Promise<void> => {
-		await del(name);
-	},
-};
+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');
 
-type ChatbotStore = {
-	currentApplication: (JobApplication & { startedAt: string }) | null;
-	viewState: ViewState;
-	startApplication: (application: JobApplication) => void;
-	cancelCurrentApplication: () => void;
-	setViewState: (newViewState: ViewState) => void;
+export const inputHeight = signal(53);
+
+export type StartedJobApplication = JobApplication & { data: ApplicationData };
+
+type CurrentApplication =
+	| { state: 'idle'; application?: never }
+	| { state: 'loading'; application?: never }
+	| { state: 'loaded'; application: StartedJobApplication }
+	| { state: 'error'; application?: never; error: string };
+
+const currentApplication = signal<CurrentApplication>({ state: 'idle' });
+
+const updateApplicationData = async (updateFn: (data: ApplicationData) => ApplicationData) => {
+	const { state, application } = currentApplication.value;
+	if (state !== 'loaded') return;
+	invariant(application, 'No application to update');
+	const newData = updateFn(application.data);
+	const newApplication = { ...application, data: newData };
+	currentApplication.value = { state, application: newApplication };
+	await idb.setApplicationData({ application, data: newData });
 };
 
-export const useChatbotStore = create<ChatbotStore>((set, get) => ({
-	currentApplication: null,
-	viewState: 'maximised',
-	startApplication: application => {
-		// if the application is already running, just maximise it
-		if (get().currentApplication?.job.id === application.job.id) return set({ viewState: 'maximised' });
-		return set({ currentApplication: { ...application, startedAt: new Date().toISOString() }, viewState: 'maximised' });
+export const application = {
+	current$: currentApplication,
+	start: async (application: JobApplication) => {
+		const data = (await idb.getApplicationData(application)) ?? createNewApplicationData(application);
+		batch(() => {
+			viewState.value = 'maximised';
+			currentApplication.value = { state: 'loaded', application: { ...application, data } };
+		});
+		data.isFinished = false;
+		idb.setApplicationData({ application, data });
+	},
+	cancel: () => {
+		currentApplication.value = { state: 'idle' };
 	},
-	cancelCurrentApplication: () => set({ currentApplication: null }),
-	setViewState: viewState => set({ viewState }),
-}));
-
-/** Returns the current application or throws if no application has been set. */
-export const useCurrentJobApplication = () => {
-	const application = useChatbotStore(s => s.currentApplication);
-	if (!application) throw new Error('No current application found');
-	return application;
+	markAsFinished: () => updateApplicationData(data => ({ ...data, isFinished: true })),
+	setCurrentNodeId: (currentNodeId: string) => updateApplicationData(data => ({ ...data, currentNodeId })),
+	restart: () => {
+		const { state, application } = currentApplication.value;
+		if (state !== 'loaded') throw new Error('Application cannot be restarted: not in valid state');
+		const data = createNewApplicationData(application);
+		currentApplication.value = { state, application: { ...application, data } };
+		idb.setApplicationData({ application, data });
+	},
+	addMessage: (message: ChatMessage, groupId?: string) => {
+		const newMessage = { ...message, groupId };
+		return updateApplicationData(data => ({ ...data, messages: [...data.messages, newMessage] }));
+	},
+	/** Removes from the last message backwards, all the messages that have the groupId passed, until it reaches one that doesn't  */
+	removeLastGroupMessagesById: (groupId: string) => {
+		const { state, application } = currentApplication.value;
+		if (state !== 'loaded') throw new Error('Application cannot be restarted: not in valid state');
+
+		const messages = [...application.data.messages];
+		let i = messages.length - 1;
+		while (i >= 0 && messages[i] && messages[i]?.groupId === groupId) {
+			messages.pop();
+			i--;
+		}
+		application.data.messages = messages;
+		idb.setApplicationData({ application, data: application.data });
+	},
+	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';
@@ -63,10 +95,10 @@ export type KeyToSubmissionMap = {
 	[key: string]: ApplicationSubmission;
 };
 
-/** Local state saved for an application */
-export type ApplicationLocalState = {
+/** Dynamic part of an application */
+export type ApplicationData = {
 	/** History of messages left in the chat */
-	messages: ChatMessage[];
+	messages: (ChatMessage & { groupId?: string })[];
 	submissions: KeyToSubmissionMap;
 	currentNodeId: string;
 	/** Needs to be separate because a node can have many inputs */
@@ -74,107 +106,9 @@ export type ApplicationLocalState = {
 	isFinished: boolean;
 };
 
-type ApplicationsStore = {
-	applicationsLocalState: Record<string, ApplicationLocalState>;
-	getApplicationLocalState: (application: JobApplication) => ApplicationLocalState | undefined;
-	updateApplicationLocalState: (params: { application: JobApplication; data: Partial<ApplicationLocalState> }) => void;
-	updateApplicationCurrentNode: (params: { application: JobApplication; currentNodeId: string }) => void;
-	resetApplicationState: (application: JobApplication) => void;
-	updateSubmission: (params: { application: JobApplication; fieldKey: string; data: ApplicationSubmission }) => void;
-	addMessage: (params: { application: JobApplication; data: ChatMessage }) => void;
-	resetLocalState: () => void;
-	setInput: (params: { application: JobApplication; data: ChatInput | null }) => void;
-	resetInput: (params: { application: JobApplication }) => void;
-};
-
-const getOrCreateApplication = (params: { application: JobApplication }, state: ApplicationsStore) => {
-	const existingApplication = state.applicationsLocalState[getCacheKey(params.application)];
-	if (existingApplication) return existingApplication;
-	const newApplication: ApplicationLocalState = {
-		messages: [],
-		submissions: {},
-		currentNodeId: getHeadOrThrow(params.application.flow.nodes).id,
-		isFinished: false,
-	};
-	state.applicationsLocalState[getCacheKey(params.application)] = newApplication;
-	return newApplication;
-};
-
-export const getCacheKey = (application: JobApplication) =>
-	[application.job.id, application.flow.id, application.flow.version].join('/');
-
-export const useLocalState = create<ApplicationsStore>()(
-	persist(
-		(set, get) => ({
-			applicationsLocalState: {},
-			getApplicationLocalState: application => get().applicationsLocalState[getCacheKey(application)],
-			updateApplicationLocalState: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const existingApplication = state.applicationsLocalState[getCacheKey(params.application)];
-						if (!existingApplication) throw new Error('Application not found');
-						Object.assign(existingApplication, params.data);
-					}),
-				),
-			updateApplicationCurrentNode: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.currentNodeId = params.currentNodeId;
-					}),
-				),
-			resetApplicationState: application =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const cacheKey = getCacheKey(application);
-						delete state.applicationsLocalState[cacheKey];
-					}),
-				),
-			updateSubmission: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.submissions[params.fieldKey] = params.data;
-					}),
-				),
-			addMessage: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.messages.push(params.data);
-						state.applicationsLocalState[getCacheKey(params.application)] = application;
-					}),
-				),
-			resetLocalState: () => set({ applicationsLocalState: {} }),
-			resetInput: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.currentInput = undefined;
-					}),
-				),
-			setInput: params =>
-				set(
-					produce((state: ApplicationsStore) => {
-						const application = getOrCreateApplication(params, state);
-						application.currentInput = params.data ?? undefined;
-					}),
-				),
-		}),
-		{
-			name: 'inploi-chatbot-application',
-			storage: createJSONStorage(() => storage),
-			// only store the jobApplications part of the state
-			partialize: state => ({ applicationsLocalState: state.applicationsLocalState }),
-		},
-	),
-);
-
-export const useApplicationLocalState = (application: JobApplication) =>
-	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]);
-
-export const useApplicationInput = (application: JobApplication) =>
-	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]?.currentInput);
-
-export const useApplicationSubmission = (application: JobApplication, key: string) =>
-	useLocalState(s => s.applicationsLocalState[getCacheKey(application)]?.submissions[key]);
+const createNewApplicationData = (application: JobApplication): ApplicationData => ({
+	messages: [],
+	submissions: {},
+	currentNodeId: getHeadOrThrow(application.flow.nodes).id,
+	isFinished: false,
+});