npm - @inploi/plugin-chatbot - Versions diffs - 1.0.0 - Mend

@inploi/plugin-chatbot 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/.env.example +3 -0
package/.eslintrc.cjs +10 -0
package/CHANGELOG.md +17 -0
package/bunfig.toml +2 -0
package/happydom.ts +10 -0
package/index.html +28 -0
package/package.json +58 -0
package/postcss.config.cjs +7 -0
package/public/mockServiceWorker.js +292 -0
package/src/chatbot.api.ts +46 -0
package/src/chatbot.constants.ts +6 -0
package/src/chatbot.css +100 -0
package/src/chatbot.dom.ts +27 -0
package/src/chatbot.state.ts +180 -0
package/src/chatbot.ts +77 -0
package/src/chatbot.utils.ts +38 -0
package/src/index.cdn.ts +12 -0
package/src/index.dev.ts +32 -0
package/src/index.ts +1 -0
package/src/interpreter/interpreter.test.ts +69 -0
package/src/interpreter/interpreter.ts +241 -0
package/src/mocks/browser.ts +5 -0
package/src/mocks/example.flows.ts +763 -0
package/src/mocks/handlers.ts +28 -0
package/src/ui/chat-bubble.tsx +36 -0
package/src/ui/chat-input/chat-input.boolean.tsx +57 -0
package/src/ui/chat-input/chat-input.file.tsx +211 -0
package/src/ui/chat-input/chat-input.multiple-choice.tsx +92 -0
package/src/ui/chat-input/chat-input.text.tsx +105 -0
package/src/ui/chat-input/chat-input.tsx +57 -0
package/src/ui/chatbot-header.tsx +89 -0
package/src/ui/chatbot.tsx +53 -0
package/src/ui/input-error.tsx +39 -0
package/src/ui/job-application-content.tsx +122 -0
package/src/ui/job-application-messages.tsx +56 -0
package/src/ui/loading-indicator.tsx +37 -0
package/src/ui/send-button.tsx +27 -0
package/src/ui/transition.tsx +1 -0
package/src/ui/typing-indicator.tsx +12 -0
package/src/ui/useChatService.ts +82 -0
package/src/vite-env.d.ts +1 -0
package/tailwind.config.ts +119 -0
package/tsconfig.json +33 -0
package/tsconfig.node.json +10 -0
package/types.d.ts +2 -0
package/vite.config.ts +18 -0

package/.env.example ADDED Viewed

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

package/.eslintrc.cjs ADDED Viewed

@@ -0,0 +1,10 @@
+/*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: ['./packages/plugin-chatbot/tsconfig.json'] },
+};

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,17 @@
+# @inploi/plugin-chatbot
+## 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 ADDED Viewed

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

package/happydom.ts ADDED Viewed

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

package/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!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/package.json ADDED Viewed

@@ -0,0 +1,58 @@
+{
+  "name": "@inploi/plugin-chatbot",
+  "version": "1.0.0",
+  "type": "module",
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "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-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.4.0"
+  },
+  "peerDependencies": {
+    "@inploi/sdk": "*"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^12.6.0",
+    "@preact/preset-vite": "^2.5.0",
+    "@total-typescript/ts-reset": "^0.5.1",
+    "@types/react-transition-group": "^4.4.9",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "happy-dom": "^12.6.0",
+    "msw": "^2.0.5",
+    "postcss": "^8.4.31",
+    "postcss-nesting": "^12.0.1",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "tailwindcss": "^3.3.5",
+    "ts-toolbelt": "^9.6.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.5",
+    "vite-tsconfig-paths": "^4.2.1",
+    "@inploi/sdk": "1.0.0",
+    "eslint-config-custom": "0.1.0",
+    "tsconfig": "0.1.0"
+  },
+  "msw": {
+    "workerDirectory": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "setup-local": "cp -n .env.example .env || true",
+    "preview": "vite preview"
+  }
+}

package/postcss.config.cjs ADDED Viewed

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

package/public/mockServiceWorker.js ADDED Viewed

@@ -0,0 +1,292 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * Mock Service Worker (2.0.5).
+ * @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 IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+  if (!clientId || !self.clients) {
+    return
+  }
+  const client = await self.clients.get(clientId)
+  if (!client) {
+    return
+  }
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+      break
+    }
+  }
+})
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  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,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseBody,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseBody],
+      )
+    })()
+  }
+  return response
+}
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+async function getResponse(event, client, requestId) {
+  const { request } = event
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+  function passthrough() {
+    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
+    return fetch(requestClone, { headers })
+  }
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  const mswIntention = request.headers.get('x-msw-intention')
+  if (['bypass', 'passthrough'].includes(mswIntention)) {
+    return passthrough()
+  }
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+  }
+  return passthrough()
+}
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+      resolve(event.data)
+    }
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
+  })
+}
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+  const mockedResponse = new Response(response.body, response)
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+  return mockedResponse
+}

package/src/chatbot.api.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { FlowNode, FlowNodeSchema } from '@inploi/core/flows';
+import { ApiClient } from '@inploi/sdk';
+import z from 'zod';
+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 ApplicationFlowSchema = z.object({
+	job: z.object({
+		id: z.coerce.string(),
+		title: z.string(),
+	}),
+	company: z.object({
+		name: z.string(),
+		logo: z.string().optional(),
+	}),
+	flow: z.object({
+		id: z.coerce.string(),
+		nodes: z.array(FlowNodeSchema),
+		version: z.number(),
+	}),
+});
+export async function getApplicationData({
+	jobId,
+	apiClient,
+}: {
+	jobId: string;
+	apiClient: ApiClient;
+}): Promise<JobApplication> {
+	const rawData = await apiClient.fetch(`/flow/job/${jobId}`);
+	return ApplicationFlowSchema.parse(rawData);
+}

package/src/chatbot.constants.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export const CHATBOT_ELEMENT_ID = 'isdk';
+export const ERROR_MESSAGES = {
+	invalid_end_node: 'Unexpected node type to finish flow',
+	no_submissions: 'Application ended without any fields submitted',
+};

package/src/chatbot.css ADDED Viewed

@@ -0,0 +1,100 @@
+#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) {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+		}
+		:is(p) {
+			margin: 0;
+			padding: 0;
+		}
+		:is(button) {
+			margin: 0;
+			padding: 0;
+			border: unset;
+			background: unset;
+		}
+	}
+}

package/src/chatbot.dom.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { CHATBOT_ELEMENT_ID } from './chatbot.constants';
+function assertElementExists(chatbotElement: HTMLDivElement | null): asserts chatbotElement is HTMLDivElement {
+	if (!chatbotElement) throw new Error('Chatbot element not found');
+}
+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;
+	return {
+		getOrCreateChatbotElement: () => {
+			if (chatbotElement) return chatbotElement;
+			const newElement = document.createElement('div');
+			document.body.appendChild(newElement);
+			newElement.id = CHATBOT_ELEMENT_ID;
+			chatbotElement = newElement;
+			return newElement;
+		},
+		renderLoading: (element: HTMLElement) => {
+			element.innerHTML = `<div class="${overlayClassNames}" />`;
+		},
+	};
+};
+export type ChatbotDomManager = ReturnType<typeof createChatbotDomManager>;