@meetelise/chat 1.11.0 → 1.12.2

package/.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:lit/recommended",
     "prettier",
   ],
   parser: "@typescript-eslint/parser",

package/.github/workflows/release.yml

@@ -20,3 +20,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           LAUNCHDARKLY_CLIENT_ID: "6119b3a2ceeceb24f45c7e66"
+          X_SECURITY_HEADER: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG"

package/.vscode/settings.json

@@ -4,5 +4,10 @@
   "[typescript]": {
     "editor.formatOnSave": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  // Turn Emmet on when writing Lit
+  "emmet.includeLanguages": {
+    "javascript": "html",
+    "typescript": "html"
+  }
 }

package/CONTRIBUTING.md

@@ -15,6 +15,14 @@ Run `npm start` to run the dev server, Ctrl+C to stop it.
 
 To test the build on a static test page, run `npx serve public`, optionally supplying a port number with the `-p` flag.
 
+We use:
+
+- Lit, a framework for developing web components: https://lit.dev/
+- TypeScript: https://www.typescriptlang.org/
+- Webpack: https://webpack.js.org/
+- ESLint: https://eslint.org/
+- Prettier: https://prettier.io/
+
 ## Unit tests
 
 Run `npm test` to run unit tests via [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) in a headless browser.

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.11.0",
+  "version": "1.12.2",
   "description": "",
   "type": "module",
   "main": "public/dist/index.js",
   "module": "public/dist/index.js",
   "types": "public/dist/index.d.ts",
   "scripts": {
-    "start": "webpack serve --mode=development --env isDemoApp --open",
+    "start": "webpack serve --mode=development --open",
     "test": "npm run build; web-test-runner",
     "test:watch": "web-test-runner --watch",
     "build": "webpack --mode=production",
@@ -28,28 +28,23 @@
   "homepage": "https://github.com/MeetElise/chat-ui#readme",
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@rollup/plugin-replace": "^3.0.1",
     "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/sass": "^1.43.1",
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
+    "@web/dev-server": "^0.1.30",
     "@web/dev-server-esbuild": "^0.2.16",
     "@web/test-runner": "^0.13.17",
     "css-loader": "^6.5.1",
-    "css-modules-typescript-loader": "^4.0.1",
-    "cz-conventional-changelog": "^3.3.0",
     "dotenv-webpack": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-lit": "^1.6.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
     "prettier": "^2.4.1",
-    "sass": "^1.45.2",
-    "sass-loader": "^12.4.0",
     "semantic-release": "^18.0.0",
     "sinon": "^11.1.2",
     "style-loader": "^3.3.1",
@@ -61,10 +56,14 @@
     "webpack-dev-server": "^4.7.2"
   },
   "dependencies": {
+    "@meetelise/rest-sdk": "^0.0.129",
+    "axios": "^0.27.2",
     "classnames": "^2.3.1",
+    "date-fns": "^2.28.0",
+    "dotenv": "^16.0.1",
+    "lit": "^2.2.4",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "talkjs": "^0.14.5",
     "uuid": "^8.3.2"
   },

package/public/demo/index.html

@@ -13,9 +13,6 @@
         /* Complex background image so we can evaluate transparency and blur effects */
         background: url("https://assets.dnainfo.com/photo/2016/9/1473799613-272887/original.jpg");
         background-size: cover;
-        margin: 0;
-        min-height: 100vh;
-        width: 100%;
         font-family: sans-serif;
         display: flex;
         flex-direction: column;
@@ -28,6 +25,10 @@
         max-width: 600px;
         background-color: #fff;
       }
+      form#theme {
+        display: flex;
+        flex-direction: column;
+      }
       button {
         padding: 0.5rem 1rem;
         border-radius: 0.25rem;
@@ -45,21 +46,87 @@
       button:active {
         background-color: #bbb;
       }
-      .meetelise-chat.launcher {
-        bottom: 10vh;
-        right: 10vh;
+      #bottomBanner {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 20vh;
+        background-color: lightpink;
+        text-align: center;
+      }
+      #bannerText {
+        margin-top: 5em;
+      }
+      #bannerCloseButton {
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+        cursor: pointer;
       }
-      .meetelise-chat.pane {
-        bottom: calc(10vh + 60px);
-        right: calc(10vh - 25px);
+      #bannerCloseButton:hover::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: lightgray;
+        height: 100%;
+        aspect-ratio: 1 / 1;
+        border-radius: 50%;
+        z-index: -1;
+        user-select: none;
       }
       /* Test CSS isolation: this padding will make the launcher look terrible unless it has taken defensive measures against host page styles */
-      div {
+      /* (the exclusions are for the banner and the Guru extension's stuff. padding them causes scrollbars) */
+      div:not(#bottomBanner, .ghq-ext-app) {
         padding: 10px;
       }
     </style>
   </head>
   <body>
-    <main id="root"></main>
+    <!-- Webpack dev server will serve the bundle, index.js, at the path '/'  -->
+    <script type="module" async>
+      import MEChat from "/index.js";
+      MEChat.start({
+        organization: "test-company",
+        building: "e2e-test-yardi-building",
+      });
+    </script>
+    <main>
+      <h1>Example Page</h1>
+      <p>This is an example page for serving the chat widget locally.</p>
+      <button id="reset" type="button">Restart conversation</button>
+      <form id="theme">
+        <label htmlFor="chatTitle">Title</label>
+        <input type="text" id="chatTitle" name="chatTitle" />
+        <label htmlFor="chatSubtitle">Subtitle</label>
+        <input type="text" id="chatSubtitle" name="chatSubtitle" />
+        <label htmlFor="bannerColor">Banner Color</label>
+        <input type="text" id="bannerColor" name="bannerColor" />
+        <label htmlFor="bannerTextColor">Banner Text Color</label>
+        <input type="text" id="bannerTextColor" name="bannerTextColor" />
+        <label htmlFor="launchButtonColor">Launch Button Color</label>
+        <input type="text" id="launchButtonColor" name="launchButtonColor" />
+        <label htmlFor="launchButtonIconColor">Launch Button Icon Color</label>
+        <input
+          type="text"
+          id="launchButtonIconColor"
+          name="launchButtonIconColor"
+        />
+      </form>
+      <div id="bottomBanner">
+        <p id="bannerText">
+          Hi, I'm a banner that appears at the bottom of the screen! I eat chat
+          widgets for breakfast and I'll eat yours if you aren't careful!
+        </p>
+        <div
+          id="bannerCloseButton"
+          onclick="document.querySelector('#bottomBanner')?.remove()"
+        >
+          ✕
+        </div>
+      </div>
+    </main>
   </body>
 </html>