chore: Mount React component in web component

.github/workflows/deploy-pages-site.yml

@@ -19,7 +19,7 @@ jobs:
           npm run build
 
       - name: Build Page Script
-        run: npm run buildDocs
+        run: npm run buildDocs --prefix docs/
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4

.github/workflows/deploy-pr-preview.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - run: npm i && npm run build && npm run buildDocs
+      - run: npm i && npm run build && npm i --prefix docs/ && npm run buildDocs --prefix docs/
         if: github.event.action != 'closed'
       - uses: rossjrw/pr-preview-action@v1
         with:

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /lib
+/docs/node_modules/
 /docs/public/script.js
 /docs/public/script.js.map
 /coverage

build.js

@@ -1,5 +1,4 @@
 const { build } = require("esbuild");
-const { esm, cjs } = require("./buildConfigs");
+const { esm } = require("./buildConfigs");
 
 build(esm);
-build(cjs);

buildConfigs.js

@@ -7,11 +7,11 @@ const sharedConfig = {
   entryPoints: ["src/index.tsx", "src/useChat.ts"],
   logLevel: "info",
   treeShaking: true,
-  minify: true,
-  sourcemap: true,
+  minify: false,
+  sourcemap: false,
   external: [...Object.keys(dependencies), ...Object.keys(devDependencies), ...Object.keys(peerDependencies)],
   target: ["esnext", "node12.22.0"],
-  plugins: [cssPlugin(), sassPlugin({ type: "style" })],
+  plugins: [cssPlugin(), sassPlugin({ type: "css-text" })],
   outdir: "./lib",
   outbase: "./src"
 };

docs/buildConfigs.js

@@ -7,9 +7,9 @@ module.exports = {
     define: {
       "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development")
     },
-    entryPoints: ["docs/src/index.tsx"],
-    outfile: "docs/public/script.js",
-    sourcemap: true,
+    entryPoints: ["src/index.tsx"],
+    outfile: "public/script.js",
+    sourcemap: false,
     plugins: [cssPlugin(), sassPlugin({ type: "style" })]
   }
 };

docs/docsServer.js

@@ -1,25 +1,38 @@
 const esbuild = require("esbuild");
 const chokidar = require("chokidar");
 const liveServer = require("live-server");
-const { config: devScriptBuildConfig } = require("./buildConfigs");
+const { config: docsBuildConfig } = require("./buildConfigs");
+const { esm: packageBuildConfig } = require("../buildConfigs");
+
+// Update chat package entry points since this script is executing in a subdirectory
+const normalizedPackageBuildConfig = {
+  ...packageBuildConfig,
+  entryPoints: ["../src/index.tsx", "../src/useChat.ts"],
+  outdir: "../lib",
+  outbase: "../src"
+};
 
 (async () => {
+  // Builder for the component package
+  const packageBuilder = await esbuild.context(normalizedPackageBuildConfig);
+
   // Builder for the development page
-  const devPageBuilder = await esbuild.context(devScriptBuildConfig);
+  const docsPageBuilder = await esbuild.context(docsBuildConfig);
 
   chokidar
-    // Watch for changes to dev env code or react-search src
-    .watch(["docs/src/*.{ts,tsx,scss}", "docs/src/**/*.{ts,tsx,scss}", "src/**/*.{ts,tsx,scss}"], {
+    // Watch for changes to docs code or react-search src
+    .watch(["src/*.{ts,tsx,scss}", "../src/**/*.{ts,tsx,scss}"], {
       interval: 0 // No delay
     })
-    .on("all", () => {
-      devPageBuilder.rebuild();
+    .on("all", async () => {
+      await packageBuilder.rebuild();
+      docsPageBuilder.rebuild();
     });
 
   // `liveServer` local server for hot reload.
   liveServer.start({
     open: true,
     port: +process.env.PORT || 8080,
-    root: "docs/public"
+    root: "public"
   });
 })();

docs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "docs",
+  "version": "0.0.1",
+  "description": "Docs page for React-Chatbot",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs": "node docsServer.js",
+    "buildDocs": "node build.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vectara/react-chatbot": "file:.."
+  }
+}

docs/src/index.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, ReactNode, useCallback, useState } from "react";
 import ReactDOM from "react-dom";
 import { BiLogoGithub } from "react-icons/bi";
 import JsxParser from "react-jsx-parser";
-import { ReactChatbot } from "../../src";
+import { ReactChatbot } from "@vectara/react-chatbot";
 import {
   VuiAppContent,
   VuiAppHeader,
@@ -43,7 +43,7 @@ const generateCodeSnippet = (
   const props = [
     `customerId="${customerId === "" ? "<Your Vectara customer ID>" : customerId}"`,
     `corpusIds=${
-      corpusIds?.length === 0 ? '"<Your Vectara corpus IDs>"' : `["${corpusIds?.join('","').replace(/\s/g, "")}"]`
+      corpusIds?.length === 0 ? '"<Your Vectara corpus IDs>"' : `{["${corpusIds?.join('","').replace(/\s/g, "")}"]}`
     }`,
     `apiKey="${apiKey === "" ? "<Your Vectara API key>" : apiKey}"`
   ];
@@ -61,21 +61,21 @@ const generateCodeSnippet = (
   }
 
   if (emptyStateDisplay) {
-    props.push(`emptyStateDisplay={${emptyStateDisplay.replace(/\s/g, "")}}`);
+    props.push(`emptyStateDisplay={${emptyStateDisplay.replace(/\n/g, "").replace(/\s+/g, " ")}}`);
   }
 
   props.push(`isInitiallyOpen={ /* (optional) true, if the component should be initially opened */ }`);
   props.push(`zIndex={ /* (optional) number representing the z-index the component should have */ }`);
 
   return `import { ReactChatbot } from "@vectara/react-chatbot";
 
-  export const App = () => (
-    <div>
-      <ReactChatbot
-        ${props.join("\n        ")}
-      />
-    </div>
-  );`;
+export const App = () => (
+  <div>
+    <ReactChatbot
+      ${props.join("\n      ")}
+    />
+  </div>
+);`;
 };
 
 const DEFAULT_CORPUS_IDS = ["1"];
@@ -96,7 +96,13 @@ const App = () => {
   const [emptyStateJsx, setEmptyStateJsx] = useState<string>("");
 
   const onUpdateCorpusIds = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setCorpusIds(e.target.value.split(","));
+    const sanitizedValue = e.target.value.trim();
+
+    if (sanitizedValue === "") {
+      setCorpusIds([]);
+      return;
+    }
+    setCorpusIds(sanitizedValue.split(","));
   }, []);
 
   const onUpdateCustomerId = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -138,7 +144,7 @@ const App = () => {
             <VuiFlexItem grow={false} shrink={false}>
               <VuiTitle size="xs">
                 <h1>
-                  <strong>Vectara React-Chatbot</strong>
+                  <strong></strong>
                 </h1>
               </VuiTitle>
             </VuiFlexItem>

package.json

@@ -2,13 +2,11 @@
   "name": "@vectara/react-chatbot",
   "version": "0.0.1",
   "description": "A Vectara-powered Chatbot component",
-  "main": "lib/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "build": "npm run clean && node build.js && tsc --emitDeclarationOnly --outDir lib",
-    "buildDocs": "node docs/build.js",
-    "docs": "node docs/docsServer.js",
     "clean": "rimraf dist",
     "lint": "eslint .",
     "test": "jest --coverage"

src/components/ChatView.tsx

@@ -5,7 +5,6 @@ import { ChatItem } from "./ChatItem";
 import { useChat } from "../useChat";
 import { Loader } from "./Loader";
 import { ChatBubbleIcon, MinimizeIcon } from "./Icons";
-import "./chatView.scss";
 
 const inputSizeToQueryInputSize = {
   large: "l",

src/index.scss

@@ -0,0 +1,3 @@
+@import "./components/chatView.scss";
+@import "./components/loader.scss";
+@import "./vui/_index.scss";