@meetelise/chat 1.21.0 → 1.21.2

package/.github/pull_request_template.md

@@ -0,0 +1,61 @@
+# Issue Checklist
+
+**this is important because webchat goes down far too frequently from a variety of sources (i.e. bad merges, chat provider issues, backend changes)**
+
+## Basic Popup Checks
+
+- [ ] On click 'Chat with us', talkjs popup opens
+- [ ] On click 'Email an Agent', email form pops up
+- [ ] On click 'Call or text us', call and/or text us popup opens
+- [ ] On click 'Book a tour', booking tour popup with calendar view opens
+
+## Email an Agent Form
+
+**Applies only if Email widget is enabled for building**
+
+- [ ] The form should require the lead's name, email address, and phone number. Message is optional.
+- [ ] Upon submission, the form should create a Guest Card (GC) with the lead's information.
+- [ ] The marketing source should be correctly logged on the GC (the source should ‘property-website’ AND whatever attribute the lead selected in the dropdown)
+
+## Web conversation
+
+**Applies only if webchat applied to building**
+
+- [ ] Chat widget should be responsive to questions asked
+- [ ] Chat widget should accept a text input
+- [ ] AI should provide appropiate responses based on the user's message
+- [ ] Typing indicator should appear while lead is waiting back for response
+
+## Booking a Tour
+
+**Applies only if scheduling widget is enabled for the building**
+
+- [ ] Chat widget should provide an option to book a tour
+- [ ] The available tour types should be displayed based on the community offerings.
+- [ ] If there is only a single tour type offered, then that should be automatically selected
+- [ ] The lead should be able to select a tour type, date, and time.
+- [ ] The lead's layout and unit preferences should be recorded and passed through on the GC.
+
+## Marketing Source Attribution
+
+**Behavior depends on this flag: https://app.launchdarkly.com/default/production/features/webchat-marketing-source-dropdown-configuration/targeting**
+
+- [ ] We grab the source from `utm_source` in the url’s query parameters. So if you want it to be “Zillow” add `utm_source=zillow` to query parameters
+- [ ] If flag set to “never”, marketing source dropdown should never appear
+- [ ] If flag set to “always”, marketing source dropdown should always appear
+- [ ] If flag set to “on-attribution-failure”, marketing source dropdown should appear if we fail to attribute the originating source.
+
+## Dynamic Number Insertion
+
+**Behavior depends on this flag: https://app.launchdarkly.com/default/production/features/webchat-marketing-source-dropdown-configuration/targeting**
+
+- [ ] We grab the source from `utm_source` in the url’s query parameters. So if you want it to be “Zillow” add `utm_source=zillow` to query parameters
+- [ ] If flag set to “never”, marketing source dropdown should never appear
+- [ ] If flag set to “always”, marketing source dropdown should always appear
+- [ ] If flag set to “on-attribution-failure”, marketing source dropdown should appear if we fail to attribute the originating source.
+
+## Misc Checks
+
+- [ ] The chat widget should adapt to various screen sizes and devices without compromising functionality or user experience.
+- [ ] The chat widget should follow web accessibility guidelines (WCAG and ADA) to ensure that users with disabilities can interact with it effectively.
+- [ ] The widget should support customization to match the company's branding and website design.

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,57 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.idea/workspace.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="8a49536e-718f-486f-a432-96e09a9aad1b" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/demo/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/demo/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/WebComponent/Scheduler/tour-scheduler.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/WebComponent/Scheduler/tour-scheduler.ts" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 0
+}</component>
+  <component name="ProjectId" id="2de4xc4cpejeyTqwsCfYp8zg99D" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "git-widget-placeholder": "add-tenant-occupied",
+    "last_opened_file_path": "/Users/colekingston/Desktop/chat-ui",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "ts.external.directory.path": "/Users/colekingston/Desktop/chat-ui/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="8a49536e-718f-486f-a432-96e09a9aad1b" name="Changes" comment="" />
+      <created>1710355459321</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1710355459321</updated>
+      <workItem from="1710355460813" duration="2821000" />
+      <workItem from="1713446762231" duration="3583000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+    <option name="exactExcludedFiles">
+      <list>
+        <option value="$PROJECT_DIR$/src/MEChat.d.ts" />
+      </list>
+    </option>
+  </component>
+</project>

package/README.md

@@ -14,7 +14,9 @@ To install MeetElise webchat on your site, add the following code:
 </script>
 ```
 
-For the mini widget:
+### Custom Positioning
+
+To _reposition_ your chat widget on the page, add the `position` object to your snippet.
 
 ```html
 <script type="module">
@@ -22,24 +24,37 @@ For the mini widget:
   Chat.start({
     organization: "{your org here}",
     building: "{your building here}",
-    mini: true,
+    position: {
+      bottom: 100, // Change these values to suit your needs
+      left: 0,
+    },
   });
 </script>
 ```
 
-### Custom Styles
+### Configure Settings
+
+To configure colors, options, and other settings you can navigate to https://app.meetelise.com/settings/widgets
+
+### Separate Call to Actions
+
+You can open any of the widgets via the functions given in the window.eliseAi namespace. The options given are
+
+`onOpenCallUsWindow`
+`onOpenChat`
+`onOpenEmailUsWindow`
+`onOpenSST`
+
+Example usage with an `<a>` tag would be:
+
+```html
+<a href="javacript:void(0)" onclick="window.eliseAi.onOpenChat()"
+  >Chat with us</a
+>
+```
 
-To customize the brand colors, title, and subtitle of your chat widget, configure your webchat through the MeetElise portal. To _reposition_ your chat widget on the page, add the following code to your web page.
+While an example with a `<button>` tag would be
 
 ```html
-<style>
-  .meetelise-chat.launcher {
-    bottom: 50px; /* change these values to suit your needs */
-    right: 40px;
-  }
-  .meetelise-chat.pane {
-    bottom: 70px;
-    right: 40px;
-  }
-</style>
+<button onclick="window.eliseAi.onOpenSst()">Open SST</button>
 ```

package/declarations.d.ts

@@ -2,3 +2,15 @@ declare module "*.scss" {
   const content: Record<string, string>;
   export default content;
 }
+
+// TODO: get the project to recognize these as valid types
+declare global {
+  interface Window {
+    eliseAi: {
+      onOpenSST?: (callback: () => void) => void;
+      onOpenChat?: (callback: () => void) => void;
+      onOpenCallUsWindow?: (callback: () => void) => void;
+      onOpenEmailUsWindow?: (callback: () => void) => void;
+    };
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.21.0",
+  "version": "1.21.2",
   "description": "",
   "main": "public/dist/index.js",
   "type": "module",
@@ -57,12 +57,16 @@
   },
   "dependencies": {
     "@meetelise/rest-sdk": "^0.0.161",
+    "@types/dompurify": "^3.0.5",
+    "@types/pubnub": "^7.2.1",
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
+    "dompurify": "^3.1.2",
     "dotenv": "^16.0.1",
     "lit": "^2.2.4",
     "lodash": "^4.17.21",
+    "pubnub": "^7.2.2",
     "react": "^17.0.2",
     "talkjs": "^0.14.5",
     "uuid": "^8.3.2"

package/public/demo/index.html

@@ -1,8 +1,25 @@
 <!DOCTYPE html>
 <html lang="en-GB">
   <head>
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != "dataLayer" ? "&l=" + l : "";
+        j.async = true;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, "script", "dataLayer", "GTM-PDVW5Q8");
+    </script>
+    <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1 user-scalable=1"
+    />
     <title>Chat Dev Page</title>
     <style>
       /* Uncomment this to check if changing the root font size interferes with any of our widget's styles */
@@ -87,13 +104,42 @@
     </style>
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-PDVW5Q8"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
     <!-- Webpack dev server will serve the bundle, index.js, at the path '/'  -->
     <script type="module" async>
       import MEChat from "/index.js";
+      // MEChat.healthcareStart({
+      //   id: "6a9e65e5-9699-4c96-af75-1741d0df79aa",
+
+      const buttonOfInterest = document.querySelector("#reset");
+      if (buttonOfInterest) {
+        buttonOfInterest.setAttribute("style", "visibility: hidden;");
+      }
+      const onWidgetLoaded = () => {
+        buttonOfInterest.setAttribute("style", "visibility: visible;");
+        buttonOfInterest.innerHTML = "You've been yeeted my boy";
+        console.log("Widget loaded");
+      };
+
       MEChat.start({
-        organization: "greystar",
-        building: "e7677f10-a645-11ed-9432-53d3fdbf30f6",
-        launcherStyles: { bottom: "300px" },
+        // organization: "avb",
+        // building: "ava-somerville-2",
+
+        organization: "elise-ai",
+        building: "930196d8-3527-11ee-a65a-b70940a36fe6",
+        // onWidgetLoaded: onWidgetLoaded,
+
+        // MEChat.healthcareStart({
+        //   id: "6a9e65e5-9699-4c96-af75-1741d0df79aa",
       });
     </script>
     <main>
@@ -102,9 +148,21 @@
         This is an example page for serving the chat widget locally. Source of
         truth
       </p>
+
       <button id="reset" type="button">Restart conversation</button>
       <button id="navigate" type="button">navigate</button>
       <button id="unnavigate" type="button">unnavigate</button>
+      <a href="/secret.html">
+        <button id="navigate" type="button">Show me a secret!</button>
+      </a>
+      <button onclick="window.eliseAi.onOpenChat()">
+        Open chat without widget
+      </button>
+      <div>
+        <a href="javascript:void(0);" onclick="window.eliseAi.onOpenSST()"
+          >Open SST without using widget</a
+        >
+      </div>
       <form id="theme">
         <label htmlFor="chatTitle">Title</label>
         <input type="text" id="chatTitle" name="chatTitle" />

package/public/demo/secret.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != "dataLayer" ? "&l=" + l : "";
+        j.async = true;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, "script", "dataLayer", "GTM-PDVW5Q8");
+    </script>
+    <!-- End Google Tag Manager -->
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1 user-scalable=1"
+    />
+    <title>Chat Dev Page</title>
+    <style>
+      body {
+        background: url("https://assets.dnainfo.com/photo/2016/9/1473799613-272887/original.jpg");
+        background-size: cover;
+        font-family: sans-serif;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        letter-spacing: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-PDVW5Q8"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <script type="module" async>
+      import MEChat from "/index.js";
+      MEChat.start({
+        organization: "elise-ai",
+        building: "the-cambridge-house-3",
+      });
+    </script>
+    <main>
+      <h1>Secret Page</h1>
+      <p>
+        This is an example page for serving the chat widget locally. Source of
+        truth
+      </p>
+      <a href="/">
+        <button id="navigate" type="button">Take me home</button>
+      </a>
+    </main>
+  </body>
+</html>