@botpress/webchat 0.3.2 → 0.4.0

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/core/socket.d.ts

@@ -1,6 +1,7 @@
 import { Message, MessagingSocket } from '@botpress/messaging-socket';
 import { Config } from '../typings';
 export default class BpSocket {
+    private config;
     socket: MessagingSocket;
     private chatId;
     onMessage: (event: any) => void;
@@ -9,4 +10,6 @@ export default class BpSocket {
     sendPayload(payload: any): Promise<Message>;
     postToParent: (_type: string, payload: any) => void;
     connect(): Promise<void>;
+    reload(config: Config): Promise<void>;
+    private getCreds;
 }

package/dist/core/socket.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const messaging_socket_1 = require("@botpress/messaging-socket");
 class BpSocket {
     constructor(config) {
+        this.config = config;
         this.postToParent = (_type, payload) => {
             var _a;
             (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign(Object.assign({}, payload), { chatId: this.chatId }), '*');
@@ -32,7 +33,7 @@ class BpSocket {
     }
     connect() {
         return __awaiter(this, void 0, void 0, function* () {
-            const creds = window.BP_STORAGE.get('creds');
+            const creds = this.getCreds();
             yield this.socket.connect(creds);
             if (this.socket.userId) {
                 const userId = this.socket.userId;
@@ -41,5 +42,19 @@ class BpSocket {
             }
         });
     }
+    reload(config) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.config = config;
+            const creds = this.getCreds();
+            if ((creds === null || creds === void 0 ? void 0 : creds.userId) !== this.socket.userId || (creds === null || creds === void 0 ? void 0 : creds.userToken) !== ((_a = this.socket.creds) === null || _a === void 0 ? void 0 : _a.userToken)) {
+                yield this.socket.disconnect();
+                yield this.connect();
+            }
+        });
+    }
+    getCreds() {
+        return this.config.customUser || window.BP_STORAGE.get('creds');
+    }
 }
 exports.default = BpSocket;

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/main.d.ts

@@ -10,4 +10,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
 export default _default;
 declare type MainProps = {
     store?: RootStore;
-} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'sendData' | 'intl' | 'updateTyping' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage' | 'fetchConversation' | 'setIntlProvider' | 'setSocket' | 'currentConversationId'>;
+} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'sendData' | 'intl' | 'updateTyping' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage' | 'fetchConversation' | 'setIntlProvider' | 'setSocket' | 'currentConversationId' | 'resetConversation'>;

package/dist/main.js

@@ -68,7 +68,14 @@ class Web extends react_1.default.Component {
                 case 'configure':
                     return this.props.updateConfig(Object.assign({}, constants_1.default.DEFAULT_CONFIG, data.payload));
                 case 'mergeConfig':
-                    return this.props.mergeConfig(data.payload);
+                    this.props.mergeConfig(data.payload);
+                    const oldUserId = this.socket.socket.userId;
+                    yield this.socket.reload(data.payload);
+                    if (this.socket.socket.userId !== oldUserId) {
+                        this.props.resetConversation();
+                        yield this.props.initializeChat();
+                    }
+                    return;
                 case 'sendPayload':
                     return this.props.sendData(data.payload);
                 case 'event':
@@ -318,5 +325,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     fetchConversation: store.fetchConversation,
     setIntlProvider: store.setIntlProvider,
     setSocket: store.setSocket,
-    currentConversationId: store.currentConversationId
+    currentConversationId: store.currentConversationId,
+    resetConversation: store.resetConversation
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Web)));

package/dist/typings.d.ts

@@ -277,6 +277,13 @@ export interface Config {
      * @default ''
      */
     googleMapsAPIKey?: string;
+    /**
+     * Allows setting a custom user id
+     */
+    customUser?: {
+        userId: string;
+        userToken: string;
+    };
 }
 export interface BotDetails {
     website?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -9,7 +9,8 @@
     "build": "yarn && yarn run -T tsc --build",
     "watch": "yarn && yarn run -T tsc --build --watch",
     "dev": "yarn run -T parcel test/index.html",
-    "prepublish": "yarn run -T rimraf dist && yarn --immutable && yarn run -T tsc --build && yarn run -T rimraf dist/.tsbuildinfo"
+    "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",
@@ -28,8 +29,8 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.3.0",
-    "@botpress/messaging-socket": "1.1.1",
+    "@botpress/messaging-components": "0.4.0",
+    "@botpress/messaging-socket": "1.2.0",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
     "@juggle/resize-observer": "^3.0.2",