Skip to content

Commit 9e2c56d

Browse files
MatthieuJnonMatthieuJnon
authored
Merge pull request #84 from mrbot-ai/fix/css-scoping
Fix/css scoping
2 parents 6b21dd9 + 3fd9e7a commit 9e2c56d

File tree

10 files changed

+170
-145
lines changed

10 files changed

+170
-145
lines changed

‎CHANGELOG.md

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

‎README.md

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

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "rasa-webchat",
3-
"version": "0.5.7",
3+
"version": "0.5.8",
44
"description": "Chat web widget for React apps and Rasa Core chatbots",
55
"main": "lib/index.js",
66
"repository": "git@https://github.com/mrbot-ai/rasa-webchat.git",
77
"author": "Mr. Bot <[email protected]>",
88
"license": "MIT",
99
"scripts": {
1010
"dev": "webpack-dev-server --config webpack.dev.js",
11-
"build": "webpack --config ./webpack.prod.js",
11+
"build": "webpack --config ./webpack.prod.js -p",
1212
"test": "jest --coverage",
1313
"prepare": "npm run build"
1414
},

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

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
@import "variables.scss";
22
@import "common.scss";
33

4-
.image-details {
5-
object-fit: scale-down;
6-
max-width: 100%;
7-
margin-top: 10px;
4+
.conversation-container {
5+
.image-details {
6+
object-fit: scale-down;
7+
max-width: 100%;
8+
margin-top: 10px;
9+
}
10+
11+
.image-frame {
12+
object-position: 0 0;
13+
object-fit: cover;
14+
width: 100%;
15+
height: 100%;
16+
}
817
}
9-
10-
.image-frame {
11-
object-position: 0 0;
12-
object-fit: cover;
13-
width: 100%;
14-
height: 100%;
15-
}

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

+38-33
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,47 @@
11
@import "variables.scss";
22
@import "common.scss";
33

4-
.message {
5-
margin: 10px;
6-
display: flex;
7-
font-size: 14px;
8-
font-family: $roboto;
9-
10-
.markdown {
11-
p {
12-
margin: 0;
4+
.conversation-container {
5+
6+
.message {
7+
margin: 10px;
8+
display: flex;
9+
font-size: 14px;
10+
font-family: $roboto;
11+
12+
.markdown {
13+
p {
14+
margin: 0;
15+
}
1316
}
1417
}
15-
}
16-
17-
.client {
18-
@include message-bubble($blue-1, $white);
19-
margin-left: auto;
20-
overflow-wrap: break-word;
21-
22-
a {
23-
color: $turqois-1;
18+
19+
.client {
20+
@include message-bubble($blue-1, $white);
21+
margin-left: auto;
22+
overflow-wrap: break-word;
23+
24+
a {
25+
color: $turqois-1;
26+
}
27+
}
28+
29+
.response {
30+
@include message-bubble($grey-2, #000);
31+
overflow-wrap: break-word;
32+
}
33+
34+
/* For markdown elements created with default styles */
35+
.message-text {
36+
margin: 0;
37+
}
38+
39+
.avatar {
40+
width: 40px;
41+
height: 40px;
42+
border-radius: 100%;
43+
margin-right: 10px;
2444
}
25-
}
26-
27-
.response {
28-
@include message-bubble($grey-2, #000);
29-
overflow-wrap: break-word;
30-
}
3145

32-
/* For markdown elements created with default styles */
33-
.message-text {
34-
margin: 0;
3546
}
3647

37-
.avatar {
38-
width: 40px;
39-
height: 40px;
40-
border-radius: 100%;
41-
margin-right: 10px;
42-
}

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

+47-42
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,54 @@
11
@import "variables.scss";
22
@import "common.scss";
33

4-
.replies {
5-
margin: 10px;
6-
display: flex;
7-
flex-wrap: wrap;
8-
overflow: auto;
9-
font-size: 14px;
10-
font-family: $roboto;
11-
}
4+
.conversation-container {
125

13-
.reply {
14-
display: -webkit-box;
15-
display: -webkit-flex;
16-
display: -moz-box;
17-
display: -ms-flexbox;
18-
display: flex;
19-
-webkit-flex-align: center;
20-
-ms-flex-align: center;
21-
-webkit-align-items: center;
22-
align-items: center;
23-
border-color: $blue-2;
24-
border-radius: 15px;
25-
border-width: 1px;
26-
color: $blue-2;
27-
border-style: solid;
28-
padding-right: 8px;
29-
padding-left: 8px;
30-
padding-bottom: 4px;
31-
padding-top: 4px;
32-
max-width: 215px;
33-
min-height: 1.7em;
34-
text-align: center;
35-
font-family: $roboto;
36-
cursor: pointer;
37-
margin: 0.25em;
38-
}
6+
.replies {
7+
margin: 10px;
8+
display: flex;
9+
flex-wrap: wrap;
10+
overflow: auto;
11+
font-size: 14px;
12+
font-family: $roboto;
13+
}
14+
15+
.reply {
16+
display: -webkit-box;
17+
display: -webkit-flex;
18+
display: -moz-box;
19+
display: -ms-flexbox;
20+
display: flex;
21+
-webkit-flex-align: center;
22+
-ms-flex-align: center;
23+
-webkit-align-items: center;
24+
align-items: center;
25+
border-color: $blue-2;
26+
border-radius: 15px;
27+
border-width: 1px;
28+
color: $blue-2;
29+
border-style: solid;
30+
padding-right: 8px;
31+
padding-left: 8px;
32+
padding-bottom: 4px;
33+
padding-top: 4px;
34+
max-width: 215px;
35+
min-height: 1.7em;
36+
text-align: center;
37+
font-family: $roboto;
38+
cursor: pointer;
39+
margin: 0.25em;
40+
}
41+
42+
.response {
43+
@include message-bubble($grey-2, #000);
44+
}
45+
46+
.avatar {
47+
width: 40px;
48+
height: 40px;
49+
border-radius: 100%;
50+
margin-right: 10px;
51+
}
3952

40-
.response {
41-
@include message-bubble($grey-2, #000);
4253
}
4354

44-
.avatar {
45-
width: 40px;
46-
height: 40px;
47-
border-radius: 100%;
48-
margin-right: 10px;
49-
}

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

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
@import "variables.scss";
22
@import "common.scss";
33

4-
.snippet {
5-
@include message-bubble($grey-2, #000);
4+
.conversation-container {
5+
.snippet {
6+
@include message-bubble($grey-2, #000);
7+
}
8+
9+
.snippet-title {
10+
margin: 0;
11+
}
12+
13+
.snippet-details {
14+
border-left: 2px solid $green-1;
15+
margin-top: 5px;
16+
padding-left: 10px;
17+
}
18+
19+
.link {
20+
font-family: $roboto;
21+
}
622
}
723

8-
.snippet-title {
9-
margin: 0;
10-
}
11-
12-
.snippet-details {
13-
border-left: 2px solid $green-1;
14-
margin-top: 5px;
15-
padding-left: 10px;
16-
}
17-
18-
.link {
19-
font-family: $roboto;
20-
}

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

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
@import "variables.scss";
22
@import "common.scss";
33

4-
.videoFrame {
5-
width: 300px;
6-
height: 200px;
7-
margin-top: 10px;
8-
border: none;
4+
.conversation-container {
5+
.videoFrame {
6+
width: 300px;
7+
height: 200px;
8+
margin-top: 10px;
9+
border: none;
10+
}
911
}
12+

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

+39-35
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
11
@import "variables.scss";
22

3-
.sender {
4-
align-items: center;
5-
display: flex;
6-
background-color: $grey-2;
7-
height: 45px;
8-
padding: 5px;
9-
}
10-
11-
.new-message {
12-
font-size: 0.9em;
13-
width: 100%;
14-
border: 0;
15-
background-color: $grey-2;
16-
height: 30px;
17-
padding-left: 15px;
18-
19-
&:focus {
20-
outline: none;
3+
.conversation-container {
4+
.sender {
5+
align-items: center;
6+
display: flex;
7+
background-color: $grey-2;
8+
height: 45px;
9+
padding: 5px;
2110
}
11+
12+
.new-message {
13+
font-size: 0.9em;
14+
width: 100%;
15+
border: 0;
16+
background-color: $grey-2;
17+
height: 30px;
18+
padding-left: 15px;
19+
20+
&:focus {
21+
outline: none;
22+
}
23+
}
24+
25+
26+
.send {
27+
background: $grey-2;
28+
border: 0;
29+
30+
.send-icon {
31+
height: 25px;
32+
}
33+
}
34+
35+
@media screen and (max-width: 800px) {
36+
.sender {
37+
border-radius: 0;
38+
flex-shrink: 0;
39+
}
40+
}
41+
2242
}
2343

2444
.widget-embedded {
2545
.sender {
2646
flex: 0, 0, auto;
2747
height: 60px;
2848
}
29-
}
30-
31-
.send {
32-
background: $grey-2;
33-
border: 0;
34-
35-
.send-icon {
36-
height: 25px;
37-
}
38-
}
39-
40-
@media screen and (max-width: 800px) {
41-
.sender {
42-
border-radius: 0;
43-
flex-shrink: 0;
44-
}
45-
}
49+
}

0 commit comments

Comments
 (0)