├── Chat.js
├── README.md
├── app.js
├── chat.css
├── example
    ├── app.js
    ├── assets
    │   ├── css
    │   │   ├── chat.css
    │   │   └── typing.css
    │   └── js
    │   │   └── Chat.js
    ├── images
    │   ├── icons
    │   │   ├── attachment.svg
    │   │   ├── chatbox-icon.svg
    │   │   ├── emojis.svg
    │   │   └── microphone.svg
    │   ├── image.png
    │   └── thumbnail.png
    ├── index.html
    └── style.css
├── index.html
└── typing.css


/Chat.js:
--------------------------------------------------------------------------------
 1 | class InteractiveChatbox {
 2 |     constructor(a, b, c) {
 3 |         this.args = {
 4 |             button: a,
 5 |             chatbox: b
 6 |         }
 7 |         this.icons = c;
 8 |         this.state = false; 
 9 |     }
10 | 
11 |     display() {
12 |         const {button, chatbox} = this.args;
13 |         
14 |         button.addEventListener('click', () => this.toggleState(chatbox))
15 |     }
16 | 
17 |     toggleState(chatbox) {
18 |         this.state = !this.state;
19 |         this.showOrHideChatBox(chatbox, this.args.button);
20 |     }
21 | 
22 |     showOrHideChatBox(chatbox, button) {
23 |         if(this.state) {
24 |             chatbox.classList.add('chatbox--active')
25 |             this.toggleIcon(true, button);
26 |         } else if (!this.state) {
27 |             chatbox.classList.remove('chatbox--active')
28 |             this.toggleIcon(false, button);
29 |         }
30 |     }
31 | 
32 |     toggleIcon(state, button) {
33 |         const { isClicked, isNotClicked } = this.icons;
34 |         let b = button.children[0].innerHTML;
35 | 
36 |         if(state) {
37 |             button.children[0].innerHTML = isClicked; 
38 |         } else if(!state) {
39 |             button.children[0].innerHTML = isNotClicked;
40 |         }
41 |     }
42 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Chat.js Front-end Starter
 2 | 
 3 | ### 1). HTML Minimum setup: 
 4 | 
 5 | ``` 
 6 | <div class="chatbox">
 7 |     <div class="chatbox__support">
 8 |         <div class="chatbox__header">
 9 |             Chat support!
10 |         </div>
11 |         <div class="messages">
12 |             <div>
13 |                 <div class="messages__item--visitor">
14 |                     Hi!
15 |                 </div>
16 |                 <div class="messages__item--operator">
17 |                     What is it?
18 |                 </div>
19 |                 .<div class="messages__item--typing">
20 |                     <span class="messages__dot"></span>
21 |                     <span class="messages__dot"></span>
22 |                     <span class="messages__dot"></span>
23 |                 </div>
24 |             </div>
25 |         </div>
26 |         <div class="chatbox__footer">
27 |             <input type="text" placeholder="Write a message">
28 |         </div>
29 |     </div>
30 |     <div class="chatbox__button">
31 |         <button>I'm a button!</button>
32 |     </div>
33 | </div>
34 | ```
35 | 
36 | ### 2). Copy the Chat.css
37 | ### 3). Copy Chat.js
38 | ### 4). JS Minimum Setup
39 | ```
40 | const chatButton = document.querySelector('.chatbox__button');
41 | const chatContent = document.querySelector('.chatbox__support');
42 | const icons = {
43 |     isClicked: 'Clicked',
44 |     isNotClicked: 'Not Clicked" />'
45 | }
46 | const chatbox = new InteractiveChatbox(chatButton, chatContent, icons);
47 | chatbox.display();
48 | chatbox.toggleIcon(false, chatButton);
49 | ``` 
50 | 
51 | ### 5). Linked all CSS and JS files in index.html
52 | ### Sample output after setting up
53 | ![Sample Setup](http://g.recordit.co/r3vIKlmdYc.gif)
54 | 
55 | # Example Customization
56 | ![Example Outout](http://g.recordit.co/wvNlpakfKl.gif)
57 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | const chatButton = document.querySelector('.chatbox__button');
 2 | const chatContent = document.querySelector('.chatbox__support');
 3 | const icons = {
 4 |     isClicked: '</p>Clicked!</p>',
 5 |     isNotClicked: '<p>Not clicked!</p>'
 6 | }
 7 | const chatbox = new InteractiveChatbox(chatButton, chatContent, icons);
 8 | chatbox.display();
 9 | chatbox.toggleIcon(false, chatButton);
10 | 


--------------------------------------------------------------------------------
/chat.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | /* CHATBOX
 4 | =============== */
 5 | .chatbox {
 6 |     position: absolute;
 7 |     bottom: 30px;
 8 |     right: 30px;
 9 | }
10 | 
11 | /* CONTENT IS CLOSE */
12 | .chatbox__support {
13 |     display: flex;
14 |     flex-direction: column;
15 |     background: #eee;
16 |     width: 300px;
17 |     height: 350px;
18 |     z-index: -123456;
19 |     opacity: 0;
20 |     transition: all .5s ease-in-out;
21 | }
22 | 
23 | /* CONTENT ISOPEN */
24 | .chatbox--active {
25 |     transform: translateY(-40px);
26 |     z-index: 123456;
27 |     opacity: 1;
28 |     
29 | }
30 | 
31 | /* BUTTON */
32 | .chatbox__button {
33 |     text-align: right;
34 | }
35 | 
36 | 
37 | /* HEADER */
38 | .chatbox__header {
39 |     position: sticky;
40 |     top: 0;
41 |     background: orange;
42 | }
43 | 
44 | /* MESSAGES */
45 | .chatbox__messages {
46 |     margin-top: auto;
47 |     display: flex;
48 |     flex-direction: column;
49 |     overflow-y: scroll;
50 |     flex-direction: column-reverse;
51 | }
52 | 
53 | .messages__item {
54 |     background: orange;
55 |     max-width: 60.6%;
56 |     width: fit-content;
57 | }
58 | 
59 | .messages__item--operator {
60 |     margin-left: auto;
61 | }
62 | 
63 | .messages__item--visitor {
64 |     margin-right: auto;
65 | }
66 | 
67 | /* FOOTER */
68 | .chatbox__footer {
69 |     position: sticky;
70 |     bottom: 0;
71 | }
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/example/app.js:
--------------------------------------------------------------------------------
1 | const chatButton = document.querySelector('.chatbox__button');
2 | const chatContent = document.querySelector('.chatbox__support');
3 | const icons = {
4 |     isClicked: '<img src="./images/icons/chatbox-icon.svg" />',
5 |     isNotClicked: '<img src="./images/icons/chatbox-icon.svg" />'
6 | }
7 | const chatbox = new InteractiveChatbox(chatButton, chatContent, icons);
8 | chatbox.display();
9 | chatbox.toggleIcon(false, chatButton);


--------------------------------------------------------------------------------
/example/assets/css/chat.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | /* CHATBOX
 4 | =============== */
 5 | .chatbox {
 6 |     position: absolute;
 7 |     bottom: 30px;
 8 |     right: 30px;
 9 | }
10 | 
11 | /* CONTENT IS CLOSE */
12 | .chatbox__support {
13 |     display: flex;
14 |     flex-direction: column;
15 |     background: #eee;
16 |     width: 300px;
17 |     height: 350px;
18 |     z-index: -123456;
19 |     opacity: 0;
20 |     transition: all .5s ease-in-out;
21 | }
22 | 
23 | /* CONTENT ISOPEN */
24 | .chatbox--active {
25 |     transform: translateY(-40px);
26 |     z-index: 123456;
27 |     opacity: 1;
28 |     
29 | }
30 | 
31 | /* BUTTON */
32 | .chatbox__button {
33 |     text-align: right;
34 | }
35 | 
36 | 
37 | /* HEADER */
38 | .chatbox__header {
39 |     position: sticky;
40 |     top: 0;
41 |     background: orange;
42 | }
43 | 
44 | /* MESSAGES */
45 | .chatbox__messages {
46 |     margin-top: auto;
47 |     display: flex;
48 |     flex-direction: column;
49 |     overflow-y: scroll;
50 |     flex-direction: column-reverse;
51 | }
52 | 
53 | .messages__item {
54 |     background: orange;
55 |     max-width: 60.6%;
56 |     width: fit-content;
57 | }
58 | 
59 | .messages__item--operator {
60 |     margin-left: auto;
61 | }
62 | 
63 | .messages__item--visitor {
64 |     margin-right: auto;
65 | }
66 | 
67 | /* FOOTER */
68 | .chatbox__footer {
69 |     position: sticky;
70 |     bottom: 0;
71 | }
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/example/assets/css/typing.css:
--------------------------------------------------------------------------------
 1 | .messages__item--typing {
 2 |     will-change: transform;
 3 |     width: auto;
 4 |     border-top-right-radius: 20px;
 5 |     border-top-left-radius: 20px;
 6 |     border-bottom-right-radius: 20px;
 7 |     padding: 15px 20px;
 8 |     display: table;
 9 |     margin-right: auto;
10 |     position: relative;
11 |     animation: 2s bulge infinite ease-out;
12 | }
13 | 
14 | .messages__item--typing::before,
15 | .messages__item--typing::after {
16 |       content: '';
17 |       position: absolute;
18 |       bottom: -2px;
19 |       left: -2px;
20 |       height: 10px;
21 |       width: 10px;
22 |       border-radius: 50%;
23 | }
24 | .messages__item--typing::after {
25 |       height: 10px;
26 |       width: 10px;
27 |       left: -10px;
28 |       bottom: -10px;
29 | }
30 | span.messages__dot {
31 |     height: 8px;
32 |     width: 8px;
33 |     float: left;
34 |     margin: 0 1px;
35 |     background-color: #9E9EA1;
36 |     display: block;
37 |     border-radius: 50%;
38 |     opacity: 0.4;
39 |     animation: 1s blink infinite;
40 | }
41 |   
42 | @keyframes blink {
43 |     50% {
44 |         opacity: 1;
45 |     }
46 | }
47 |   
48 | @keyframes bulge {
49 |     50% {
50 |         transform: scale(1.05);
51 |     }
52 | }
53 |   


--------------------------------------------------------------------------------
/example/assets/js/Chat.js:
--------------------------------------------------------------------------------
 1 | class InteractiveChatbox {
 2 |     constructor(a, b, c) {
 3 |         this.args = {
 4 |             button: a,
 5 |             chatbox: b
 6 |         }
 7 |         this.icons = c;
 8 |         this.state = false; 
 9 |     }
10 | 
11 |     display() {
12 |         const {button, chatbox} = this.args;
13 |         
14 |         button.addEventListener('click', () => this.toggleState(chatbox))
15 |     }
16 | 
17 |     toggleState(chatbox) {
18 |         this.state = !this.state;
19 |         this.showOrHideChatBox(chatbox, this.args.button);
20 |     }
21 | 
22 |     showOrHideChatBox(chatbox, button) {
23 |         if(this.state) {
24 |             chatbox.classList.add('chatbox--active')
25 |             this.toggleIcon(true, button);
26 |         } else if (!this.state) {
27 |             chatbox.classList.remove('chatbox--active')
28 |             this.toggleIcon(false, button);
29 |         }
30 |     }
31 | 
32 |     toggleIcon(state, button) {
33 |         const { isClicked, isNotClicked } = this.icons;
34 |         let b = button.children[0].innerHTML;
35 | 
36 |         if(state) {
37 |             button.children[0].innerHTML = isClicked; 
38 |         } else if(!state) {
39 |             button.children[0].innerHTML = isNotClicked;
40 |         }
41 |     }
42 | }


--------------------------------------------------------------------------------
/example/images/icons/attachment.svg:
--------------------------------------------------------------------------------
1 | <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0.247767 10.736C0.247767 9.99944 0.557477 9.28795 1.08482 8.76897L5.9481 3.90569C6.27455 3.57087 6.72656 3.37835 7.19531 3.37835C8.11607 3.37835 8.83594 4.09821 8.83594 5.01897C8.83594 5.47935 8.64342 5.93973 8.30859 6.26618L4.87667 9.6981C4.82645 9.74833 4.75949 9.78181 4.69252 9.78181C4.51674 9.78181 4.03962 9.30469 4.03962 9.12891C4.03962 9.06194 4.0731 8.99498 4.12333 8.94475L7.55525 5.51283C7.6808 5.37891 7.76451 5.20312 7.76451 5.01897C7.76451 4.69252 7.52176 4.45815 7.20368 4.45815C7.01953 4.45815 6.83538 4.53348 6.70145 4.65904L1.83817 9.52232C1.52009 9.8404 1.31083 10.2757 1.31083 10.736C1.31083 11.4475 1.83817 11.9749 2.54966 11.9749C3.00167 11.9749 3.44531 11.7656 3.76339 11.4475L10.2589 4.94364C10.6607 4.54185 10.8951 3.99777 10.8951 3.42857C10.8951 2.24833 9.97433 1.28571 8.78571 1.28571C8.21652 1.28571 7.67243 1.53683 7.27065 1.93025L2.1981 7.01116C2.14788 7.06138 2.08091 7.09487 2.00558 7.09487C1.8298 7.09487 1.36105 6.62612 1.36105 6.45033C1.36105 6.38337 1.39453 6.31641 1.44475 6.26618L6.50893 1.19364C7.11998 0.590959 7.94029 0.247767 8.79408 0.247767C10.5686 0.247767 11.9665 1.66239 11.9665 3.43694C11.9665 4.28237 11.615 5.10268 11.0206 5.70536L4.51674 12.2009C3.99777 12.7199 3.28627 13.0379 2.54966 13.0379C1.24386 13.0379 0.247767 12.0419 0.247767 10.736Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/example/images/icons/chatbox-icon.svg:
--------------------------------------------------------------------------------
1 | <svg width="36" height="29" viewBox="0 0 36 29" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M28.2857 10.5714C28.2857 4.88616 21.9576 0.285714 14.1429 0.285714C6.32813 0.285714 0 4.88616 0 10.5714C0 13.8259 2.08929 16.7388 5.34375 18.6272C4.66071 20.2946 3.77679 21.0781 2.9933 21.9621C2.77232 22.2232 2.51116 22.4643 2.59152 22.846C2.65179 23.1875 2.93304 23.4286 3.23438 23.4286C3.25446 23.4286 3.27455 23.4286 3.29464 23.4286C3.89732 23.3482 4.47991 23.2478 5.02232 23.1071C7.05134 22.5848 8.93973 21.721 10.6071 20.5357C11.7321 20.7366 12.9174 20.8571 14.1429 20.8571C21.9576 20.8571 28.2857 16.2567 28.2857 10.5714ZM36 15.7143C36 12.3594 33.7902 9.38616 30.3951 7.51786C30.6964 8.50223 30.8571 9.52679 30.8571 10.5714C30.8571 14.1674 29.0089 17.4821 25.654 19.933C22.5402 22.183 18.4621 23.4286 14.1429 23.4286C13.5603 23.4286 12.9576 23.3884 12.375 23.3482C14.8862 24.9955 18.221 26 21.8571 26C23.0826 26 24.2679 25.8795 25.3929 25.6786C27.0603 26.8638 28.9487 27.7277 30.9777 28.25C31.5201 28.3906 32.1027 28.4911 32.7054 28.5714C33.0268 28.6116 33.3281 28.3504 33.4085 27.9888C33.4888 27.6071 33.2277 27.3661 33.0067 27.1049C32.2232 26.221 31.3393 25.4375 30.6563 23.7701C33.9107 21.8817 36 18.9888 36 15.7143Z" fill="#581B98"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/example/images/icons/emojis.svg:
--------------------------------------------------------------------------------
1 | <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M2.10938 2.24805C3.53516 0.822266 5.25391 0.109375 7.26562 0.109375C9.27734 0.109375 10.9863 0.822266 12.3926 2.24805C13.8184 3.6543 14.5312 5.36328 14.5312 7.375C14.5312 9.38672 13.8184 11.1055 12.3926 12.5312C10.9863 13.9375 9.27734 14.6406 7.26562 14.6406C5.25391 14.6406 3.53516 13.9375 2.10938 12.5312C0.703125 11.1055 0 9.38672 0 7.375C0 5.36328 0.703125 3.6543 2.10938 2.24805ZM7.26562 13.2344C8.88672 13.2344 10.2637 12.668 11.3965 11.5352C12.5488 10.3828 13.125 8.99609 13.125 7.375C13.125 5.75391 12.5488 4.37695 11.3965 3.24414C10.2637 2.0918 8.88672 1.51562 7.26562 1.51562C5.64453 1.51562 4.25781 2.0918 3.10547 3.24414C1.97266 4.37695 1.40625 5.75391 1.40625 7.375C1.40625 8.99609 1.97266 10.3828 3.10547 11.5352C4.25781 12.668 5.64453 13.2344 7.26562 13.2344ZM10.2539 6.17383C10.0781 6.34961 9.86328 6.4375 9.60938 6.4375C9.35547 6.4375 9.13086 6.34961 8.93555 6.17383C8.75977 5.97852 8.67188 5.75391 8.67188 5.5C8.67188 5.24609 8.75977 5.03125 8.93555 4.85547C9.13086 4.66016 9.35547 4.5625 9.60938 4.5625C9.86328 4.5625 10.0781 4.66016 10.2539 4.85547C10.4492 5.03125 10.5469 5.24609 10.5469 5.5C10.5469 5.75391 10.4492 5.97852 10.2539 6.17383ZM5.56641 6.17383C5.39062 6.34961 5.17578 6.4375 4.92188 6.4375C4.66797 6.4375 4.44336 6.34961 4.24805 6.17383C4.07227 5.97852 3.98438 5.75391 3.98438 5.5C3.98438 5.24609 4.07227 5.03125 4.24805 4.85547C4.44336 4.66016 4.66797 4.5625 4.92188 4.5625C5.17578 4.5625 5.39062 4.66016 5.56641 4.85547C5.76172 5.03125 5.85938 5.24609 5.85938 5.5C5.85938 5.75391 5.76172 5.97852 5.56641 6.17383ZM10.6055 8.3125C10.7422 8.3125 10.8496 8.36133 10.9277 8.45898C11.0059 8.53711 11.0352 8.63477 11.0156 8.75195C10.8984 9.63086 10.498 10.3633 9.81445 10.9492C9.15039 11.5352 8.36914 11.8281 7.4707 11.8281H7.06055C6.16211 11.8281 5.37109 11.5352 4.6875 10.9492C4.02344 10.3633 3.63281 9.63086 3.51562 8.75195C3.49609 8.63477 3.52539 8.53711 3.60352 8.45898C3.68164 8.36133 3.78906 8.3125 3.92578 8.3125H10.6055Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/example/images/icons/microphone.svg:
--------------------------------------------------------------------------------
1 | <svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M9.64286 6.03571C9.64286 5.74275 9.40011 5.5 9.10714 5.5C8.81417 5.5 8.57143 5.74275 8.57143 6.03571V7.10714C8.57143 9.17466 6.88895 10.8571 4.82143 10.8571C2.75391 10.8571 1.07143 9.17466 1.07143 7.10714V6.03571C1.07143 5.74275 0.828683 5.5 0.535714 5.5C0.242746 5.5 0 5.74275 0 6.03571V7.10714C0 9.58482 1.875 11.6272 4.28571 11.8951V13H2.14286C1.84989 13 1.60714 13.2427 1.60714 13.5357C1.60714 13.8287 1.84989 14.0714 2.14286 14.0714H7.5C7.79297 14.0714 8.03571 13.8287 8.03571 13.5357C8.03571 13.2427 7.79297 13 7.5 13H5.35714V11.8951C7.76786 11.6272 9.64286 9.58482 9.64286 7.10714V6.03571ZM7.5 2.82143C7.5 1.34821 6.29464 0.142856 4.82143 0.142856C3.34821 0.142856 2.14286 1.34821 2.14286 2.82143V7.10714C2.14286 8.58036 3.34821 9.78571 4.82143 9.78571C6.29464 9.78571 7.5 8.58036 7.5 7.10714V2.82143Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/example/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hitchcliff/front-end-chatjs/22ea095d7736011239f969b447621d5d4f4a8cf1/example/images/image.png


--------------------------------------------------------------------------------
/example/images/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hitchcliff/front-end-chatjs/22ea095d7736011239f969b447621d5d4f4a8cf1/example/images/thumbnail.png


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;1,300&display=swap" rel="stylesheet">
 7 |     <link rel="stylesheet" href="./assets/css/chat.css">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="./assets/css/typing.css">
10 |     <title>Chatbox</title>
11 | </head>
12 | <body>
13 |     <div class="container">
14 |         <div class="chatbox">
15 |             <div class="chatbox__support">
16 |                 <div class="chatbox__header">
17 |                     <div class="chatbox__image--header">
18 |                         <img src="./images/image.png" alt="image">
19 |                     </div>
20 |                     <div class="chatbox__content--header">
21 |                         <h4 class="chatbox__heading--header">Chat support</h4>
22 |                         <p class="chatbox__description--header">There are many variations of passages of Lorem Ipsum available</p>
23 |                     </div>
24 |                 </div>
25 |                 <div class="chatbox__messages">
26 |                     <div>
27 |                         <div class="messages__item messages__item--visitor">
28 |                             Can you let me talk to the support?
29 |                         </div>
30 |                         <div class="messages__item messages__item--operator">
31 |                             Sure!
32 |                         </div>
33 |                         <div class="messages__item messages__item--visitor">
34 |                             Need your help, I need a developer in my site.
35 |                         </div>
36 |                         <div class="messages__item messages__item--operator">
37 |                             Hi... What is it? I'm a front-end developer, yay!
38 |                         </div>
39 |                         <div class="messages__item messages__item--typing">
40 |                             <span class="messages__dot"></span>
41 |                             <span class="messages__dot"></span>
42 |                             <span class="messages__dot"></span>
43 |                         </div>
44 |                     </div>
45 |                 </div>
46 |                 <div class="chatbox__footer">
47 |                     <img src="./images/icons/emojis.svg" alt="">
48 |                     <img src="./images/icons/microphone.svg" alt="">
49 |                     <input type="text" placeholder="Write a message...">
50 |                     <p class="chatbox__send--footer">Send</p>
51 |                     <img src="./images/icons/attachment.svg" alt="">
52 |                 </div>
53 |             </div>
54 |             <div class="chatbox__button">
55 |                 <button>button</button>
56 |             </div>
57 |         </div>
58 |     </div>
59 |     <script src="./assets/js/Chat.js"></script>
60 |     <script src="./app.js"></script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/example/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 |     margin: 0;
  4 |     padding: 0;
  5 | }
  6 | 
  7 | *, html {
  8 |     --primaryGradient: linear-gradient(93.12deg, #581B98 0.52%, #9C1DE7 100%);
  9 |     --secondaryGradient: linear-gradient(268.91deg, #581B98 -2.14%, #9C1DE7 99.69%);
 10 |     --primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
 11 |     --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
 12 |     --light: 300;
 13 |     --regular: 400;
 14 |     --semiBold: 600;
 15 |     --extraLight: 300;
 16 |     --italic: 300;
 17 |     --primary: #581B98;
 18 | }
 19 | 
 20 | /* 300;0,400;0,600;1,300 */
 21 | 
 22 | body {
 23 |     font-family: 'Nunito', sans-serif;
 24 |     font-weight: 400;
 25 |     font-size: 100%;
 26 |     background: #F1F1F1;
 27 | }
 28 | 
 29 | .chatbox__support {
 30 |     background: #f9f9f9;
 31 |     height: 450px;
 32 |     width: 350px;
 33 |     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
 34 |     border-top-left-radius: 20px;
 35 |     border-top-right-radius: 20px;
 36 | }
 37 | 
 38 | /* HEADER */
 39 | .chatbox__header {
 40 |     background: var(--primaryGradient);
 41 |     display: flex;
 42 |     flex-direction: row;
 43 |     align-items: center;
 44 |     justify-content: center;
 45 |     padding: 15px 20px;
 46 |     border-top-left-radius: 20px;
 47 |     border-top-right-radius: 20px;
 48 |     box-shadow: var(--primaryBoxShadow);
 49 | }
 50 | 
 51 | .chatbox__image--header {
 52 |     margin-right: 10px;
 53 | }
 54 | 
 55 | .chatbox__heading--header {
 56 |     font-size: 1.2rem;
 57 |     color: white;
 58 | }
 59 | 
 60 | .chatbox__description--header {
 61 |     font-size: .9rem;
 62 |     color: white;
 63 | }
 64 | 
 65 | /* Messages */
 66 | .chatbox__messages {
 67 |     padding: 0 20px;
 68 | }
 69 | 
 70 | .messages__item {
 71 |     margin-top: 10px;
 72 |     background: #E0E0E0; 
 73 |     padding: 8px 12px;
 74 |     max-width: 70%;
 75 | }
 76 | 
 77 | .messages__item--visitor,
 78 | .messages__item--typing {
 79 |     border-top-left-radius: 20px;
 80 |     border-top-right-radius: 20px;
 81 |     border-bottom-right-radius: 20px;
 82 | }
 83 | 
 84 | .messages__item--operator {
 85 |     border-top-left-radius: 20px;
 86 |     border-top-right-radius: 20px;
 87 |     border-bottom-left-radius: 20px;
 88 |     background: var(--primary);
 89 |     color: white;
 90 | }
 91 | 
 92 | /* FOOTER */
 93 | .chatbox__footer {
 94 |     display: flex;
 95 |     flex-direction: row;
 96 |     align-items: center;
 97 |     justify-content: space-between;
 98 |     padding: 20px 20px;
 99 |     background: var(--secondaryGradient);
100 |     box-shadow: var(--secondaryBoxShadow);
101 |     border-bottom-right-radius: 10px;
102 |     border-bottom-left-radius: 10px;
103 |     margin-top: 20px;
104 | }
105 | 
106 | .chatbox__footer input {
107 |     border: none;
108 |     padding: 10px 10px;
109 |     border-radius: 30px;
110 |     text-align: center;
111 | }
112 | 
113 | .chatbox__send--footer {
114 |     color: white;
115 | }
116 | 
117 | .chatbox__button button,
118 | .chatbox__button button:focus,
119 | .chatbox__button button:visited {
120 |     padding: 10px;
121 |     background: white;
122 |     border: none;
123 |     outline: none;
124 |     border-top-left-radius: 50px;
125 |     border-top-right-radius: 50px;
126 |     border-bottom-left-radius: 50px;
127 |     box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
128 |     cursor: pointer;
129 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="chat.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div class="chatbox">
11 |         <div class="chatbox__support">
12 |             <div class="chatbox__header">
13 |                 Chat support!
14 |             </div>
15 |             <div class="chatbox__messages">
16 |                 <div>
17 |                     <div class="messages__item messages__item--visitor">
18 |                         Hi!
19 |                     </div>
20 |                     <div class="messages__item messages__item--operator">
21 |                         What is it?
22 |                     </div>
23 |                     .<div class="messages__item messages__item--typing">
24 |                         <span class="messages__dot"></span>
25 |                         <span class="messages__dot"></span>
26 |                         <span class="messages__dot"></span>
27 |                     </div>
28 |                 </div>
29 |             </div>
30 |             <div class="chatbox__footer">
31 |                 <input type="text" placeholder="Write a message">
32 |             </div>
33 |         </div>
34 |         <div class="chatbox__button">
35 |             <button>Branch-1</button>
36 |         </div>
37 |     </div>
38 |     
39 |     <script src="./Chat.js"></script>
40 |     <script src="./app.js"></script>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/typing.css:
--------------------------------------------------------------------------------
 1 | .messages__item--typing {
 2 |     will-change: transform;
 3 |     width: auto;
 4 |     border-top-right-radius: 20px;
 5 |     border-top-left-radius: 20px;
 6 |     border-bottom-right-radius: 20px;
 7 |     padding: 15px 20px;
 8 |     display: table;
 9 |     margin-right: auto;
10 |     position: relative;
11 |     animation: 2s bulge infinite ease-out;
12 | }
13 | 
14 | .messages__item--typing::before,
15 | .messages__item--typing::after {
16 |       content: '';
17 |       position: absolute;
18 |       bottom: -2px;
19 |       left: -2px;
20 |       height: 10px;
21 |       width: 10px;
22 |       border-radius: 50%;
23 | }
24 | .messages__item--typing::after {
25 |       height: 10px;
26 |       width: 10px;
27 |       left: -10px;
28 |       bottom: -10px;
29 | }
30 | span.messages__dot {
31 |     height: 8px;
32 |     width: 8px;
33 |     float: left;
34 |     margin: 0 1px;
35 |     background-color: #9E9EA1;
36 |     display: block;
37 |     border-radius: 50%;
38 |     opacity: 0.4;
39 |     animation: 1s blink infinite;
40 | }
41 |   
42 | @keyframes blink {
43 |     50% {
44 |         opacity: 1;
45 |     }
46 | }
47 |   
48 | @keyframes bulge {
49 |     50% {
50 |         transform: scale(1.05);
51 |     }
52 | }
53 |   


--------------------------------------------------------------------------------