Merge pull request #84 from mrbot-ai/fix/css-scoping

Fix/css scoping

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.5.8
+- Namespaced all css declarations so that they don't affect styles outside of the widget.
+
 ## 0.5.7
 - Fixed a bug where the connection would not close down when the component unmounted and continued polling indefinitely in the background.
 

README.md

@@ -20,7 +20,7 @@ A simple webchat widget to connect with a chatbot. Forked from [react-chat-widge
 In your `<body/>`:
 ```javascript
 <div id="webchat"/>
-<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.7.js"></script>
+<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.8.js"></script>
 <script>
   WebChat.default.init({
     selector: "#webchat",

package.json

@@ -1,14 +1,14 @@
 {
   "name": "rasa-webchat",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "Chat web widget for React apps and Rasa Core chatbots",
   "main": "lib/index.js",
   "repository": "git@https://github.com/mrbot-ai/rasa-webchat.git",
   "author": "Mr. Bot <human@mrbot.ai>",
   "license": "MIT",
   "scripts": {
     "dev": "webpack-dev-server --config webpack.dev.js",
-    "build": "webpack --config ./webpack.prod.js",
+    "build": "webpack --config ./webpack.prod.js -p",
     "test": "jest --coverage",
     "prepare": "npm run build"
   },

src/components/Widget/components/Conversation/components/Messages/components/ImgReply/styles.scss

@@ -1,15 +1,17 @@
 @import "variables.scss";
 @import "common.scss";
 
-.image-details {
-  object-fit: scale-down;
-  max-width: 100%;
-  margin-top: 10px;
+.conversation-container {
+  .image-details {
+    object-fit: scale-down;
+    max-width: 100%;
+    margin-top: 10px;
+  }
+
+  .image-frame {
+    object-position: 0 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
 }
-
-.image-frame {
-  object-position: 0 0;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}

src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss

@@ -1,42 +1,47 @@
 @import "variables.scss";
 @import "common.scss";
 
-.message {
-  margin: 10px;
-  display: flex;
-  font-size: 14px;
-  font-family: $roboto;
-
-  .markdown {
-    p {
-      margin: 0;
+.conversation-container {
+
+  .message {
+    margin: 10px;
+    display: flex;
+    font-size: 14px;
+    font-family: $roboto;
+
+    .markdown {
+      p {
+        margin: 0;
+      }
     }
   }
-}
-
-.client {
-  @include message-bubble($blue-1, $white);
-  margin-left: auto;
-  overflow-wrap: break-word;
-
-  a {
-    color: $turqois-1;
+
+  .client {
+    @include message-bubble($blue-1, $white);
+    margin-left: auto;
+    overflow-wrap: break-word;
+
+    a {
+      color: $turqois-1;
+    }
+  }
+
+  .response {
+    @include message-bubble($grey-2, #000);
+    overflow-wrap: break-word;
+  }
+
+  /* For markdown elements created with default styles */
+  .message-text {
+    margin: 0;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    margin-right: 10px;
   }
-}
-
-.response {
-  @include message-bubble($grey-2, #000);
-  overflow-wrap: break-word;
-}
 
-/* For markdown elements created with default styles */
-.message-text {
-  margin: 0;
 }
 
-.avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 100%;
-  margin-right: 10px;
-}

src/components/Widget/components/Conversation/components/Messages/components/QuickReply/styles.scss

@@ -1,49 +1,54 @@
 @import "variables.scss";
 @import "common.scss";
 
-.replies {
-  margin: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-  font-size: 14px;
-  font-family: $roboto;
-}
+.conversation-container {
 
-.reply {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  border-color: $blue-2;
-  border-radius: 15px;
-  border-width: 1px;
-  color: $blue-2;
-  border-style: solid;
-  padding-right: 8px;
-  padding-left: 8px;
-  padding-bottom: 4px;
-  padding-top: 4px;
-  max-width: 215px;
-  min-height: 1.7em;
-  text-align: center;
-  font-family: $roboto;
-  cursor: pointer;
-  margin: 0.25em;
-}
+  .replies {
+    margin: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    font-size: 14px;
+    font-family: $roboto;
+  }
+
+  .reply {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    border-color: $blue-2;
+    border-radius: 15px;
+    border-width: 1px;
+    color: $blue-2;
+    border-style: solid;
+    padding-right: 8px;
+    padding-left: 8px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+    max-width: 215px;
+    min-height: 1.7em;
+    text-align: center;
+    font-family: $roboto;
+    cursor: pointer;
+    margin: 0.25em;
+  }
+
+  .response {
+    @include message-bubble($grey-2, #000);
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    margin-right: 10px;
+  }
 
-.response {
-  @include message-bubble($grey-2, #000);
 }
 
-.avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 100%;
-  margin-right: 10px;
-}

src/components/Widget/components/Conversation/components/Messages/components/Snippet/styles.scss

@@ -1,20 +1,23 @@
 @import "variables.scss";
 @import "common.scss";
 
-.snippet {
-  @include message-bubble($grey-2, #000);
+.conversation-container {
+  .snippet {
+    @include message-bubble($grey-2, #000);
+  }
+
+  .snippet-title {
+    margin: 0;
+  }
+
+  .snippet-details {
+    border-left: 2px solid $green-1;
+    margin-top: 5px;
+    padding-left: 10px;
+  }
+
+  .link {
+    font-family: $roboto;
+  }
 }
 
-.snippet-title {
-  margin: 0;
-}
-
-.snippet-details {
-  border-left: 2px solid $green-1;
-  margin-top: 5px;
-  padding-left: 10px;
-}
-
-.link {
-  font-family: $roboto;
-}

src/components/Widget/components/Conversation/components/Messages/components/VidReply/styles.scss

@@ -1,9 +1,12 @@
 @import "variables.scss";
 @import "common.scss";
 
-.videoFrame {
-  width: 300px;
-  height: 200px;
-  margin-top: 10px;
-  border: none;
+.conversation-container {
+  .videoFrame {
+    width: 300px;
+    height: 200px;
+    margin-top: 10px;
+    border: none;
+  }
 }
+

src/components/Widget/components/Conversation/components/Sender/style.scss

@@ -1,45 +1,49 @@
 @import "variables.scss";
 
-.sender {
-  align-items: center;
-  display: flex;
-  background-color: $grey-2;
-  height: 45px;
-  padding: 5px;
-}
-
-.new-message {
-  font-size: 0.9em;
-  width: 100%;
-  border: 0;
-  background-color: $grey-2;
-  height: 30px;
-  padding-left: 15px;
-
-  &:focus {
-    outline: none;
+.conversation-container {
+  .sender {
+    align-items: center;
+    display: flex;
+    background-color: $grey-2;
+    height: 45px;
+    padding: 5px;
   }
+
+  .new-message {
+    font-size: 0.9em;
+    width: 100%;
+    border: 0;
+    background-color: $grey-2;
+    height: 30px;
+    padding-left: 15px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+
+  .send {
+    background: $grey-2;
+    border: 0;
+
+    .send-icon {
+      height: 25px;
+    }
+  }
+
+  @media screen and (max-width: 800px)  {
+    .sender {
+      border-radius: 0;
+      flex-shrink: 0;
+    }
+  }
+
 }
 
 .widget-embedded {
   .sender {
     flex: 0, 0, auto;
     height: 60px;
   }
-}
-
-.send {
-  background: $grey-2;
-  border: 0;
-
-  .send-icon {
-    height: 25px;
-  }
-}
-
-@media screen and (max-width: 800px)  {
-  .sender {
-    border-radius: 0;
-    flex-shrink: 0;
-  }
-}
+}