@inploi/plugin-chatbot 2.0.0 → 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,11 @@
 # @inploi/plugin-chatbot
 
+## 2.1.0
+
+### Minor Changes
+
+- Support hues for colouring the chatbot
+
 ## 2.0.0
 
 ### 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,6 +1,6 @@
 {
   "name": "@inploi/plugin-chatbot",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
@@ -11,6 +11,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 +31,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,7 +52,7 @@
     "typescript": "^5.3.2",
     "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.1",
-    "@inploi/sdk": "1.5.0",
+    "@inploi/sdk": "1.5.1",
     "eslint-config-custom": "0.1.0",
     "tsconfig": "0.1.0"
   },
@@ -58,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.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%;

package/src/chatbot.dom.ts

@@ -2,6 +2,8 @@ import { CHATBOT_ELEMENT_ID } from './chatbot.constants';
 
 export const createChatbotDomManager = () => {
 	let chatbotElement: HTMLDivElement | null = null;
+	const styleElements: HTMLStyleElement[] = [];
+
 	return {
 		getOrCreateChatbotElement: () => {
 			if (chatbotElement) return chatbotElement;
@@ -12,6 +14,15 @@ export const createChatbotDomManager = () => {
 			chatbotElement = newElement;
 			return newElement;
 		},
+		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);
+		},
 	};
 };
 export type ChatbotDomManager = ReturnType<typeof createChatbotDomManager>;

package/src/chatbot.state.ts

@@ -1,5 +1,5 @@
 import { invariant } from '@inploi/core/common';
-import { Signal, batch, signal } from '@preact/signals';
+import { batch, signal } from '@preact/signals';
 
 import { JobApplication } from './chatbot.api';
 import { idb } from './chatbot.idb';
@@ -13,19 +13,25 @@ export const getCacheKey = (application: JobApplication) =>
 export type ViewState = 'maximised' | 'minimised';
 export const viewState = signal<ViewState>('maximised');
 
-export const inputHeight = signal(0);
+export const inputHeight = signal(53);
 
 export type StartedJobApplication = JobApplication & { data: ApplicationData };
-const currentApplication: Signal<StartedJobApplication | null> = signal<StartedJobApplication | null>(null);
-export const cancelCurrentApplication = () => {
-	currentApplication.value = null;
-};
+
+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 application = currentApplication.value;
+	const { state, application } = currentApplication.value;
+	if (state !== 'loaded') return;
 	invariant(application, 'No application to update');
 	const newData = updateFn(application.data);
-	currentApplication.value = { ...application, data: newData };
+	const newApplication = { ...application, data: newData };
+	currentApplication.value = { state, application: newApplication };
 	await idb.setApplicationData({ application, data: newData });
 };
 
@@ -35,22 +41,41 @@ export const application = {
 		const data = (await idb.getApplicationData(application)) ?? createNewApplicationData(application);
 		batch(() => {
 			viewState.value = 'maximised';
-			currentApplication.value = { ...application, data };
+			currentApplication.value = { state: 'loaded', application: { ...application, data } };
 		});
 		data.isFinished = false;
 		idb.setApplicationData({ application, data });
 	},
+	cancel: () => {
+		currentApplication.value = { state: 'idle' };
+	},
 	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 { state, application } = currentApplication.value;
+		if (state !== 'loaded') throw new Error('Application cannot be restarted: not in valid state');
 		const data = createNewApplicationData(application);
-		currentApplication.value = { ...application, data };
+		currentApplication.value = { state, application: { ...application, data } };
 		idb.setApplicationData({ application, data });
 	},
-	addMessage: (message: ChatMessage) =>
-		updateApplicationData(data => ({ ...data, messages: [...data.messages, message] })),
+	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 })),
@@ -73,7 +98,7 @@ export type KeyToSubmissionMap = {
 /** 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 */

package/src/chatbot.ts

@@ -3,20 +3,27 @@ import { h, render } from 'preact';
 import { Chatbot } from '~/ui/chatbot';
 
 import { getApplicationData } from './chatbot.api';
-import './chatbot.css';
+import tailwind from './chatbot.css?inline';
 import { ChatbotDomManager, createChatbotDomManager } from './chatbot.dom';
-import { application, cancelCurrentApplication } from './chatbot.state';
+import { application } from './chatbot.state';
+import { formatCssVariables, generatePalette } from './style/palette';
 
 export const chatbotPlugin = ({
 	_internal_domManager: dom = createChatbotDomManager(),
+	hue,
 }: {
 	geolocationApiKey?: string;
+	hue: number;
 	_internal_domManager?: ChatbotDomManager;
 }) =>
 	createPlugin(({ apiClient, logger, analytics }) => {
 		let prepared = false;
 		const renderAndPrepare = () => {
 			const chatbotElement = dom.getOrCreateChatbotElement();
+			// Add styles generated by tailwind
+			dom.addStyle(tailwind, 'inploi-chatbot-style');
+			// Add dynamic styles generated by the plugin
+			dom.addStyle(formatCssVariables(generatePalette(hue)), 'inploi-chatbot-theme');
 			render(h(Chatbot, { apiClient, logger, analytics }), chatbotElement);
 			prepared = true;
 		};
@@ -35,10 +42,8 @@ export const chatbotPlugin = ({
 			},
 			startApplication: async ({ jobId }: { jobId: string }) => {
 				try {
-					cancelCurrentApplication();
-					const applicationData = await getApplicationData({ jobId, apiClient });
-
-					await application.start(applicationData);
+					application.cancel();
+					getApplicationData({ jobId, apiClient }).then(application.start);
 
 					if (!prepared) renderAndPrepare();
 				} catch (error) {
@@ -48,7 +53,7 @@ export const chatbotPlugin = ({
 			},
 			closeApplication: async () => {
 				logger.info('Closing application from an external source');
-				cancelCurrentApplication();
+				application.cancel();
 			},
 		};
 	});

package/src/chatbot.utils.ts

@@ -48,3 +48,9 @@ export function gzip(string: string) {
 	writer.close();
 	return new Response(cs.readable).text();
 }
+
+export class AbortedError extends Error {
+	constructor() {
+		super('Aborted');
+	}
+}

package/src/index.dev.ts

@@ -1,5 +1,5 @@
 /** This file is only used for dev mode. The build output is index.ts */
-import { createApiClient, inploiBrandedLogger } from '@inploi/sdk';
+import { initialiseSdk, inploiBrandedLogger } from '@inploi/sdk';
 
 import { chatbotPlugin } from './chatbot';
 
@@ -19,18 +19,13 @@ async function enableMocking() {
 }
 
 enableMocking().then(() => {
-	window.chatbot = chatbotPlugin({})({
-		apiClient: createApiClient({
-			baseUrl: import.meta.env.VITE_BASE_URL,
-			publishableKey: import.meta.env.VITE_PUBLISHABLE_KEY,
-		}),
+	const sdk = initialiseSdk({
+		env: 'sandbox',
 		logger: inploiBrandedLogger,
-		analytics: {
-			log: async params => {
-				inploiBrandedLogger.log('stub logging', params);
-				return { success: true, data: {} } as any;
-			},
-		},
+		publishableKey: import.meta.env.VITE_PUBLISHABLE_KEY,
 	});
+
+	// inploi’s hue: 265
+	window.chatbot = sdk.registerPlugin(chatbotPlugin({ hue: 372 }));
 	window.chatbot.prepare();
 });

package/src/interpreter/interpreter.ts

@@ -1,16 +1,17 @@
 import { FlowNode, FlowNodeType, IfBlockNode } from '@inploi/core/flows';
 import { P, match } from 'ts-pattern';
-import { getHeadOrThrow } from '~/chatbot.utils';
+import { AbortedError, getHeadOrThrow } from '~/chatbot.utils';
 import { ChatInput } from '~/ui/chat-input/chat-input';
 
 import { ApplicationSubmission, ChatMessage, KeyToSubmissionMap } from '../chatbot.state';
 
-export type ChatServiceSendParams = { signal?: AbortSignal; message: ChatMessage };
+export type ChatServiceSendParams = { signal?: AbortSignal; groupId?: string; message: ChatMessage };
 export type ChatService = {
 	send: (params: ChatServiceSendParams) => Promise<void>;
-	input: <TType extends ChatInput['type']>(
-		params: Extract<ChatInput, { type: TType }>,
-	) => Promise<Extract<ApplicationSubmission, { type: TType }>>;
+	input: <TType extends ChatInput['type']>(params: {
+		input: Extract<ChatInput, { type: TType }>;
+		signal?: AbortSignal;
+	}) => Promise<Extract<ApplicationSubmission, { type: TType }>>;
 };
 
 type ChatbotInterpreterParams = {
@@ -33,24 +34,31 @@ export const createFlowInterpreter = ({
 	onInterpret,
 }: ChatbotInterpreterParams) => {
 	const controller = new AbortController();
+
 	const interpretNode = async (node: FlowNode) => {
 		const submissions = getSubmissions();
 		onInterpret?.(node);
-		await interpret({
-			node,
-			submissions,
-			chat: {
-				sendMessage: async message => chatService.send({ message, signal: controller.signal }),
-				userInput: async input => chatService.input(input),
-			},
-			next: () => {
-				const nextNodeId = getNextNodeId(node, getSubmissions());
-				const nextNode = flow.find(node => node.id === nextNodeId);
-				if (nextNode) {
-					return interpretNode(nextNode);
-				} else onFlowEnd?.(node);
-			},
-		});
+		try {
+			await interpret({
+				node,
+				submissions,
+				chat: {
+					sendMessage: async message => chatService.send({ groupId: node.id, message, signal: controller.signal }),
+					userInput: async input => chatService.input({ input, signal: controller.signal }),
+				},
+				next: () => {
+					const nextNodeId = getNextNodeId(node, getSubmissions());
+					const nextNode = flow.find(node => node.id === nextNodeId);
+					if (nextNode) {
+						return interpretNode(nextNode);
+					} else onFlowEnd?.(node);
+				},
+			});
+		} catch (e) {
+			// we let aborting the flow be silent
+			if (e instanceof AbortedError) return;
+			throw e;
+		}
 	};
 
 	return {

package/src/mocks/browser.ts

@@ -1,5 +1,5 @@
 import { setupWorker } from 'msw/browser';
 
-import { handlers } from './handlers';
+import { browserHandlers } from './handlers';
 
-export const worker = setupWorker(...handlers);
+export const worker = setupWorker(...browserHandlers);

package/src/mocks/example.flows.ts

@@ -1,44 +1,82 @@
 import { FlowNode } from '@inploi/core/flows';
 
-const textOnly: FlowNode[] = [
+export const automatedTestFlow: FlowNode[] = [
 	{
-		id: 'intro',
+		id: '1',
 		type: 'text',
 		data: {
-			text: 'Welcome to our chef application flow!',
+			text: 'Text node',
 		},
 		isHead: true,
-		nextId: 'name',
 	},
+];
+
+const textOnly: FlowNode[] = [
 	{
-		id: 'name',
-		type: 'text',
+		id: '443c2374-13d1-4b02-b2ed-17f148d2a3da',
+		isHead: true,
+		nextId: '5df04ee2-b786-4df6-874b-9d1c740363d9',
+		type: 'question-boolean',
 		data: {
-			text: 'What is your full name?',
+			key: 'like',
+			question: 'do u hate cats',
+			trueLabel: 'Yes',
+			falseLabel: 'No',
 		},
-		nextId: 'experience',
 	},
 	{
-		id: 'experience',
-		type: 'text',
+		id: '5df04ee2-b786-4df6-874b-9d1c740363d9',
+		nextId: 'b6060696-ebb5-4b17-9d88-470394ccd1d3',
+		type: 'if-block',
 		data: {
-			text: 'How many years of chef experience do you have?',
+			compareKey: 'like',
+			compareValue: 'true',
+			compare: 'equals',
 		},
-		nextId: 'cuisine',
+		branchId: 'f94662b2-5229-4602-bc4e-d84666a56a25',
 	},
 	{
-		id: 'cuisine',
+		id: '801ccc8c-d5db-4864-9b89-1465c014e20e',
+		nextId: '042a8657-132d-4eb7-be4e-c1d300ecc538',
 		type: 'text',
 		data: {
-			text: 'What cuisine do you specialize in?',
+			text: 'nice',
 		},
-		nextId: 'end',
 	},
 	{
-		id: 'end',
+		id: 'fec23e69-ef6c-4ae5-b10a-11104d36158c',
+		nextId: '801ccc8c-d5db-4864-9b89-1465c014e20e',
+		type: 'question-boolean',
+		data: {
+			key: 'free-will',
+			question: 'do you have free will?',
+			trueLabel: 'Yes',
+			falseLabel: 'No',
+		},
+	},
+	{
+		id: 'b6060696-ebb5-4b17-9d88-470394ccd1d3',
+		nextId: 'fec23e69-ef6c-4ae5-b10a-11104d36158c',
 		type: 'text',
 		data: {
-			text: 'Thanks for applying! We will review your application soon.',
+			text: 'nice youre a decent person',
+		},
+	},
+	{
+		id: 'f94662b2-5229-4602-bc4e-d84666a56a25',
+		type: 'abandon-flow',
+		data: {
+			text: 'you cant hate cats to work here',
+			redirectUrl: '',
+			cta: '',
+		},
+	},
+	{
+		id: '042a8657-132d-4eb7-be4e-c1d300ecc538',
+		type: 'complete-flow',
+		data: {
+			text: "we'll hire you",
+			submitCta: 'submit',
 		},
 	},
 ];