Skip to content

Commit 8ee7ea5

Browse files
MatthieuJnonMatthieuJnon
committed
style: css scoping
1 parent c050ee5 commit 8ee7ea5

33 files changed

+3235
-1455
lines changed

‎.babelrc

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"presets": [
3-
"env",
4-
"react"
3+
"@babel/preset-env",
4+
"@babel/preset-react"
55
],
66
"plugins": [
77
"transform-class-properties",
8-
"transform-object-rest-spread",
8+
"@babel/plugin-proposal-object-rest-spread",
99
["module-resolver", {
1010
"root": ["./src"],
1111
"alias": {

‎README.md

+41-39
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ emit('bot_uttered', message, room=socket_id)
270270
```
271271
###### sending a message to be displayed as a tooltip
272272

273-
You first need to set a tooltipPayload in the props of the component, then, for the answer to that payload, you should define a response with a
273+
You first need to set a tooltipPayload in the props of the component, then, for the answer to that payload, you should define a response with an
274274

275275
object and a property `tooltip = true`. This message will then be displayed as a tooltip before the widget is opened.
276276
This works with Botfront, but not yet with vanilla Rasa.
@@ -290,50 +290,52 @@ emit('bot_uttered', message, room=socket_id)
290290

291291
## Styles
292292

293+
From version 0.8 we started prefixing all css classes, if you already had css styling for the widget, just prepend `rw-` to all the classes you changed.
294+
293295
hierarchy:
294296
```
295-
.conversation-container
296-
|-- .header
297-
|-- .title
298-
|-- .close-function
299-
|-- .loading
300-
|-- .messages-container
301-
|-- .message
302-
|-- .client
303-
|-- .response
304-
|-- .replies
305-
|-- .reply
306-
|-- .response
307-
|-- .snippet
308-
|-- .snippet-title
309-
|-- .snippet-details
310-
|-- .link
311-
|-- .imageFrame
312-
|-- .videoFrame
313-
|-- .sender
314-
|-- .new-message
315-
|-- .send
297+
.rw-conversation-container
298+
|-- .rw-header
299+
|-- .rw-title
300+
|-- .rw-close-function
301+
|-- .rw-loading
302+
|-- .rw-messages-container
303+
|-- .rw-message
304+
|-- .rw-client
305+
|-- .rw-response
306+
|-- .rw-replies
307+
|-- .rw-reply
308+
|-- .rw-response
309+
|-- .rw-snippet
310+
|-- .rw-snippet-title
311+
|-- .rw-snippet-details
312+
|-- .rw-link
313+
|-- .rw-imageFrame
314+
|-- .rw-videoFrame
315+
|-- .rw-sender
316+
|-- .rw-new-message
317+
|-- .rw-send
316318
```
317319

318320
| Class | Description |
319321
|-------------------------|---------------------------------------------------------------------|
320-
| .widget-container | The div containing the chatbox of the default version |
321-
| .widget-embedded | div of the embedded chatbox (using embedded prop) |
322-
| .full-screen | div of the fullscreen chatbox (using fullScreenMode prop) |
323-
| .conversation-container | the parent div containing the header, message-container and sender |
324-
| .messages-container | the central area where the messages appear |
325-
| .sender | div of the bottom area which prompts user input |
326-
| .new-message | the text input element of sender |
327-
| .send | the send icon element of sender |
328-
| .header | div of the top area with the chatbox header |
329-
| .title | the title element of the header |
330-
| .close-button | the close icon of the header |
331-
| .loading | the loading status element of the header |
332-
| .message | the boxes holding the messages of client and response |
333-
| .replies | the area that gives quick reply options |
334-
| .snippet | a component for describing links |
335-
| .imageFrame | a container for sending images |
336-
| .videoFrame | a container for sending video |
322+
| .rw-widget-container | The div containing the chatbox of the default version |
323+
| .rw-widget-embedded | div of the embedded chatbox (using embedded prop) |
324+
| .rw-full-screen | div of the fullscreen chatbox (using fullScreenMode prop) |
325+
| .rw-conversation-container | the parent div containing the header, message-container and sender |
326+
| .rw-messages-container | the central area where the messages appear |
327+
| .rw-sender | div of the bottom area which prompts user input |
328+
| .rw-new-message | the text input element of sender |
329+
| .rw-send | the send icon element of sender |
330+
| .rw-header | div of the top area with the chatbox header |
331+
| .rw-title | the title element of the header |
332+
| .rw-close-button | the close icon of the header |
333+
| .rw-loading | the loading status element of the header |
334+
| .rw-message | the boxes holding the messages of client and response |
335+
| .rw-replies | the area that gives quick reply options |
336+
| .rw-snippet | a component for describing links |
337+
| .rw-imageFrame | a container for sending images |
338+
| .rw-videoFrame | a container for sending video |
337339

338340

339341
## Contributors

0 commit comments

Comments
 (0)