@botpress/webchat 0.3.0 → 0.3.3

package/assets/fonts/roboto.css

@@ -0,0 +1,128 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/components/Composer.js

@@ -21,6 +21,12 @@ const VoiceRecorder_1 = __importDefault(require("./VoiceRecorder"));
 class Composer extends react_1.default.Component {
     constructor(props) {
         super(props);
+        this.focus = () => {
+            setTimeout(() => {
+                var _a;
+                (_a = this.textInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 50);
+        };
         this.handleKeyPress = (e) => __awaiter(this, void 0, void 0, function* () {
             if (e.key === 'Enter') {
                 e.preventDefault();
@@ -51,13 +57,18 @@ class Composer extends react_1.default.Component {
         this.state = { isRecording: false };
     }
     componentDidMount() {
-        setTimeout(() => {
-            this.textInput.current.focus();
-        }, 50);
+        this.focus();
         (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
-            focus.newValue === 'input' && this.textInput.current.focus();
+            var _a;
+            focus.newValue === 'input' && ((_a = this.textInput.current) === null || _a === void 0 ? void 0 : _a.focus());
         });
     }
+    componentWillReceiveProps(newProps) {
+        // Focus on the composer when it's unlocked
+        if (this.props.composerLocked === true && newProps.composerLocked === false) {
+            this.focus();
+        }
+    }
     render() {
         if (this.props.composerHidden) {
             return null;

package/dist/components/common/BotInfo/style.scss

@@ -0,0 +1,88 @@
+// TODO: This seems completely outdated. Does not match classes used by the component
+
+@mixin bottomBorder() {
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+
+$charcoal: #1e1e1e;
+
+// Fix for IE which has trouble with the max-width property
+@media only screen and (min-width: 800px) {
+  .bot-info-container {
+    width: 800px;
+  }
+}
+
+.bot-info-container {
+  margin: 0 auto;
+  max-width: 800px;
+  text-align: center;
+  color: $charcoal;
+  overflow-y: auto;
+  svg {
+    fill: $charcoal;
+  }
+  & > img {
+    width: 100%;
+  }
+  p,
+  a,
+  button {
+    font-size: 0.9em;
+    color: rgb(102, 102, 102);
+    text-decoration: none;
+  }
+}
+
+.summary {
+  margin-top: -32px;
+  @include bottomBorder();
+  box-shadow: 0px 4px 5px -5px #ccc;
+  h3 {
+    margin: 0;
+  }
+  p {
+    margin-top: 0.4em;
+    margin-block-end: 1em;
+  }
+}
+
+.links {
+  @include bottomBorder();
+}
+
+.icon-link {
+  padding-left: 25%;
+  display: flex;
+  margin: 20px 0;
+  i {
+    margin-right: 10px;
+  }
+}
+
+.terms {
+  padding: 0px 20px;
+  text-align: left;
+  a {
+    display: inline-block;
+    width: 100%;
+    line-height: 2.5;
+    @include bottomBorder();
+  }
+}
+
+.startBtn {
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: 20px;
+  line-height: 24px;
+  padding: 5px 10px;
+  margin-top: 25px;
+  border: 1px solid rgb(100, 100, 100);
+  &:focus {
+    border: 1px solid black;
+    color: black;
+  }
+}

package/dist/components/common/ConfirmDialog/style.module.scss

@@ -0,0 +1,48 @@
+@import '../variables.scss';
+
+.ConfirmDialogContainer > div {
+  z-index: 9999;
+
+  :global {
+    .bp3-button-text {
+      font-size: 12px !important;
+    }
+
+    .bp3-dialog-body {
+      display: flex;
+    }
+
+    .bp3-button {
+      box-shadow: unset !important;
+      background-image: unset !important;
+      border-radius: 5px !important;
+      padding-top: 6px;
+    }
+
+    .bp3-button.bp3-intent-warning {
+      background-color: var(--lighthouse);
+
+      &:hover {
+        background-color: var(--hover-lighthouse);
+      }
+
+      &:focus {
+        background-color: var(--focus-lighthouse);
+      }
+    }
+
+    .bp3-button:not([class*='bp3-intent']) {
+      background-color: white;
+
+      &:hover,
+      &:focus {
+        background-color: var(--seashell);
+      }
+    }
+  }
+}
+
+.icon {
+  margin-right: 16px;
+  color: var(--lighthouse) !important;
+}

package/dist/components/common/Dialog/style.module.scss

@@ -0,0 +1,29 @@
+:global(.bp3-dialog-container) {
+  height: 100%;
+}
+
+.dialog {
+  max-height: 90%;
+  background-color: white !important;
+  overflow-y: auto;
+
+  .form,
+  :global(.bp3-dialog-body) {
+    overflow: auto;
+    height: calc(100% - 34px);
+  }
+
+  :global {
+    .bp3-button {
+      transition: color 0.3s, background 0.3s;
+    }
+  }
+}
+
+.dialogBody {
+  position: relative;
+  margin: 0 !important;
+  padding: 20px !important;
+  padding-bottom: 6px !important;
+  overflow: auto;
+}

package/dist/components/common/ToolTip/style.module.scss

@@ -0,0 +1,108 @@
+@import '../variables.scss';
+
+.tooltip {
+  position: fixed;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  line-height: 1.25;
+  text-align: left;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  font-size: 12px;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 99999999;
+  transition: opacity 0.3s, visibility 0.3s;
+
+  &.visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &:global {
+    &.right:not(.top):not(.bottom) {
+      margin-left: 5px;
+
+      .tooltipArrow {
+        top: 50%;
+        left: auto;
+        margin-left: -5px;
+        border-width: 5px 5px 5px 0;
+        border-right-color: var(--reef);
+      }
+    }
+
+    &.left:not(.top):not(.bottom) {
+      margin-left: -5px;
+
+      .tooltipArrow {
+        top: 50%;
+        margin-top: -5px;
+        border-width: 5px 0 5px 5px;
+        border-left-color: var(--reef);
+        right: -5px;
+        left: auto;
+      }
+    }
+
+    &.top {
+      margin-top: -5px;
+
+      .tooltipArrow {
+        top: auto;
+        bottom: -5px;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px 5px 0;
+        border-top-color: var(--reef);
+      }
+    }
+
+    &.bottom {
+      margin-top: 5px;
+
+      .tooltipArrow {
+        top: 0;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 0 5px 5px;
+        border-bottom-color: var(--reef);
+      }
+    }
+  }
+  :global {
+    .tooltipArrow {
+      top: 50%;
+      left: 0;
+      margin-top: -5px;
+      border-width: 5px 5px 5px 0;
+      border-right-color: var(--reef);
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-right-color: transparent;
+      border-style: solid;
+    }
+
+    .tooltipInner {
+      background: var(--reef);
+      border-radius: 3px;
+      color: #fff;
+      max-width: 400px;
+      padding: 5px 8px !important;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+}

package/dist/components/common/variables.scss

@@ -0,0 +1,38 @@
+:root {
+  --main-bg-color: #ffffff;
+  --main-bg-color-hover: rgba(255, 255, 255, 0.9);
+  --main-fg-color: #000000;
+  --main-fg-color-hover: rgba(0, 0, 0, 0.07);
+
+  --white: #ffffff;
+  --bg: #f5f6f8;
+  --seashell: #e2e2e2;
+  --gray: #bec5c9;
+  --reef: #5c7080;
+  --shark: #1a1e22;
+  --overlay: rgba(26, 30, 34, 0.8);
+  --success: #019d90;
+  --say: #a4ded0;
+  --trigger: #ffe5b4;
+  --execute: #b0c4de;
+  --listen: #ffe699;
+  --prompt: #e2c7e0;
+  --standard: #000000;
+  --skill-call: #0000ff;
+  --if-else: #febbad;
+  --lighthouse: #f66f48;
+  --focus-lighthouse: #e06542;
+  --hover-lighthouse: #f39c82;
+  --hover-lighthouse-30: #f9ddd5;
+  --ocean: #3276ea;
+  --hover-ocean: #cad7f5;
+
+  --spacing-x-small: 2px;
+  --spacing-small: 4px;
+  --spacing-medium: 8px;
+  --spacing-large: 12px;
+  --spacing-x-large: 16px;
+  --spacing-xx-large: 20px;
+  --spacing-xxx-large: 24px;
+  --spacing-xxxx-large: 28px;
+}

package/dist/components/messages/Message.js

@@ -63,7 +63,8 @@ class Message extends react_1.Component {
                 shouldPlay: this.props.shouldPlay,
                 intl: this.props.store.intl,
                 escapeHTML: true,
-                showTimestamp: this.props.store.config.showTimestamp
+                showTimestamp: this.props.store.config.showTimestamp,
+                googleMapsAPIKey: this.props.store.config.googleMapsAPIKey
             } }));
         if (rendered === null) {
             return null;

package/dist/core/socket.js

@@ -18,6 +18,7 @@ class BpSocket {
         };
         this.chatId = config.chatId;
         this.socket = new messaging_socket_1.MessagingSocket({ url: config.messagingUrl, clientId: config.clientId });
+        window.websocket = this.socket;
     }
     setup() {
         this.socket.on('message', this.onMessage);

package/dist/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

package/dist/declaration.js

@@ -0,0 +1 @@
+"use strict";

package/dist/globals.d.ts

@@ -0,0 +1,7 @@
+import { MessagingSocket } from '@botpress/messaging-socket';
+declare global {
+    interface Window {
+        websocket: MessagingSocket;
+    }
+}
+declare module '*.scss';

package/dist/globals.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/store/composer.js

@@ -56,7 +56,7 @@ class ComposerStore {
         this._sentHistoryIndex = newIndex;
     }
     setLocked(locked) {
-        this.locked = locked;
+        this.locked = !!locked;
     }
     setHidden(hidden) {
         this.hidden = hidden;

package/dist/typings.d.ts

@@ -268,9 +268,15 @@ export interface Config {
     chatId?: string;
     /**
      * CSS class to be applied to iframe
-     * @default '''
+     * @default ''
      */
     className?: string;
+    /**
+     * Google Maps API Key required to display the map.
+     * Will display a link to Google Maps otherwise
+     * @default ''
+     */
+    googleMapsAPIKey?: string;
 }
 export interface BotDetails {
     website?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -8,10 +8,13 @@
   "scripts": {
     "build": "yarn && yarn run -T tsc --build",
     "watch": "yarn && yarn run -T tsc --build --watch",
-    "prepublish": "yarn run -T rimraf dist && yarn --immutable && yarn run -T tsc --build && yarn run -T rimraf dist/.tsbuildinfo"
+    "dev": "yarn run -T parcel test/index.html",
+    "copy:scss": "yarn run -T copyfiles -u 1 ./src/**/*.scss dist",
+    "prepublish": "yarn run -T rimraf dist && yarn --immutable && yarn run -T tsc --build && yarn run -T rimraf dist/.tsbuildinfo && yarn copy:scss"
   },
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "devDependencies": {
     "@types/crypto-js": "^4.1.1",
@@ -27,7 +30,7 @@
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
     "@botpress/messaging-components": "0.3.0",
-    "@botpress/messaging-socket": "1.1.0",
+    "@botpress/messaging-socket": "1.1.1",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
     "@juggle/resize-observer": "^3.0.2",