@nlxai/touchpoint-ui 1.0.4-alpha.0

package/lib/types.d.ts

@@ -0,0 +1,138 @@
+import { BotMessage } from '@nlxai/chat-core';
+import { FC } from 'react';
+/**
+ * Window size configuration
+ */
+export type WindowSize = "half" | "full";
+/**
+ * Color mode configuration (light/dark modes)
+ */
+export type ColorMode = "light" | "dark";
+/**
+ * Logo URL if applicable. May be specified as a single image URL or as an object by color mode (light/dark)
+ */
+export type LogoUrl = string | Record<ColorMode, string>;
+/**
+ * Choice message with metadata
+ */
+export interface ChoiceMessage {
+    /**
+     * Message contents
+     */
+    message: BotMessage;
+    /**
+     * Index in the response transcript history
+     */
+    responseIndex: number;
+    /**
+     * Message index in the current response
+     */
+    messageIndex: number;
+}
+/**
+ * Custom Modalities allow rendering of rich components from nodes.
+ * See: https://docs.studio.nlx.ai/intentflows/documentation-flows/flows-build-mode/advanced-messaging-+-functionality#modalities
+ */
+export type CustomModalityComponent<Data> = FC<{
+    /**
+     * The payload of the Custom Modality. The schema is defined in Dialog Studio settings.
+     */
+    data: Data;
+}>;
+/**
+ * The full theme expressed as CSS custom properties
+ */
+export interface Theme {
+    /**
+     * Font family
+     */
+    fontFamily: string;
+    /**
+     * Primary color with 80% opacity
+     */
+    primary80: string;
+    /**
+     * Primary color with 60% opacity
+     */
+    primary60: string;
+    /**
+     * Primary color with 40% opacity
+     */
+    primary40: string;
+    /**
+     * Primary color with 20% opacity
+     */
+    primary20: string;
+    /**
+     * Primary color with 10% opacity
+     */
+    primary10: string;
+    /**
+     * Primary color with 5% opacity
+     */
+    primary5: string;
+    /**
+     * Primary color with 1% opacity
+     */
+    primary1: string;
+    /**
+     * Secondary color with 80% opacity
+     */
+    secondary80: string;
+    /**
+     * Secondary color with 60% opacity
+     */
+    secondary60: string;
+    /**
+     * Secondary color with 40% opacity
+     */
+    secondary40: string;
+    /**
+     * Secondary color with 20% opacity
+     */
+    secondary20: string;
+    /**
+     * Secondary color with 10% opacity
+     */
+    secondary10: string;
+    /**
+     * Secondary color with 5% opacity
+     */
+    secondary5: string;
+    /**
+     * Secondary color with 1% opacity
+     */
+    secondary1: string;
+    /**
+     * Accent color used e.g. for prominent buttons, the loader animation as well as selected card outlines
+     */
+    accent: string;
+    /**
+     * Accent color with 20% opacity
+     */
+    accent20: string;
+    /**
+     * The background color of the main Touchpoint interface
+     */
+    background: string;
+    /**
+     * The color of the overlay covering the visible portion of the website when the Touchpoint interface does not cover the full screen
+     */
+    overlay: string;
+    /**
+     * Primary warning color
+     */
+    warningPrimary: string;
+    /**
+     * Secondary warning color
+     */
+    warningSecondary: string;
+    /**
+     * Primary error color
+     */
+    errorPrimary: string;
+    /**
+     * Secondary error color
+     */
+    errorSecondary: string;
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@nlxai/touchpoint-ui",
+  "version": "1.0.4-alpha.0",
+  "description": "Web UI for Touchpoint",
+  "type": "module",
+  "main": "lib/index.js",
+  "license": "MIT",
+  "author": "Peter Szerzo <peter@nlx.ai>",
+  "module": "lib/index.js",
+  "browser": "lib/index.umd.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "design-system": "vite --mode design-system",
+    "build": "tsc && vite build",
+    "docs": "echo \"todo\"",
+    "lint:check": "eslint src/ --ext .ts,.tsx,.js,.jsx --max-warnings 0",
+    "lint": "eslint src/ --ext .ts,.tsx,.js,.jsx --fix",
+    "format": "git ls-files | grep -E '\\.(js|jsx|ts|tsx|css|html)$' | xargs prettier --write",
+    "preview-docs": "echo \"todo\"",
+    "publish-docs": "echo \"todo\"",
+    "test": "echo \"todo\"",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "@nlxai/chat-core": "^1.0.4-alpha.0",
+    "@react-hookz/web": "^25.0.1",
+    "@react-input/mask": "^2.0.4",
+    "clsx": "^2.1.1",
+    "htm": "^3.1.1",
+    "marked": "^15.0.4",
+    "ramda": "^0.30.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-indiana-drag-scroll": "^2.2.0",
+    "react-textarea-autosize": "^8.5.6"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.2",
+    "@types/node": "^20.12.8",
+    "@types/ramda": "^0.30.2",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint-config-nlx": "*",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "89c742910b9622c992ce0579769c12dba6ed7557"
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/tailwind.config.js

@@ -0,0 +1,50 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    fontFamily: {
+      sans: ["var(--font-family)"],
+    },
+    extend: {
+      backdropBlur: {
+        overlay: "48px",
+      },
+      maxWidth: {
+        content: "608px",
+      },
+      borderRadius: {
+        base: "12px",
+        plus: "20px",
+      },
+      zIndex: {
+        touchpoint: 1000,
+        launchButton: 100,
+      },
+      colors: {
+        "primary-80": "var(--primary-80)",
+        "primary-60": "var(--primary-60)",
+        "primary-40": "var(--primary-40)",
+        "primary-20": "var(--primary-20)",
+        "primary-10": "var(--primary-10)",
+        "primary-5": "var(--primary-5)",
+        "primary-1": "var(--primary-1)",
+        "secondary-80": "var(--secondary-80)",
+        "secondary-60": "var(--secondary-60)",
+        "secondary-40": "var(--secondary-40)",
+        "secondary-20": "var(--secondary-20)",
+        "secondary-10": "var(--secondary-10)",
+        "secondary-5": "var(--secondary-5)",
+        "secondary-1": "var(--secondary-1)",
+        accent: "var(--accent)",
+        "accent-20": "var(--accent-20)",
+        background: "var(--background)",
+        overlay: "var(--overlay)",
+        "warning-primary": "var(--warning-primary)",
+        "warning-secondary": "var(--warning-secondary)",
+        "error-primary": "var(--error-primary)",
+        "error-secondary": "var(--error-secondary)",
+      },
+    },
+  },
+};

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["dom"],
+    "outDir": "./lib",
+    "rootDir": "./src"
+  },
+  "include": ["./src/**/*"]
+}

package/vite.config.ts

@@ -0,0 +1,47 @@
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+import replace from "@rollup/plugin-replace";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+/**
+ * Adjust the JS entry point if the app is run in prototype or review modes
+ */
+const adjustJsEntryPoint = ({ mode }: { mode: string }): any => {
+  return {
+    name: "html-transform",
+    order: "pre",
+    transformIndexHtml: (html: string) => {
+      const entryPoint = "/src/index.tsx";
+      if (mode === "design-system") {
+        return html.replace(entryPoint, "/src/design-system.tsx");
+      }
+      return html;
+    },
+  };
+};
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode, command }) => ({
+  plugins: [
+    react(),
+    replace(
+      command === "serve"
+        ? {}
+        : {
+            "process.env.NODE_ENV": JSON.stringify("production"),
+          },
+    ),
+    adjustJsEntryPoint({ mode }),
+    dts(),
+  ],
+  resolve: {},
+  build: {
+    outDir: "lib",
+    lib: {
+      entry: resolve(__dirname, "./src/index.tsx"),
+      name: "nlxai.touchpointUi",
+      fileName: "index",
+    },
+  },
+}));