Live Chat

app.js

let transitiontime = 1000;
let setuptimer;

$(document).on("click", "*[action]", function(){
	switch($(this).attr("action")) {
		case "open chat":
            $("#chatbox").addClass("open");
            setuptimer = setTimeout(() => {
                $("#chatbox").addClass("setup");
            }, transitiontime);
			break;
		case "close chat":
            clearTimeout(setuptimer);
			$("#chatbox").removeClass("open").removeClass("setup");
			break;
	}
})

index.pug

div#app
    div#chatbox(style="--theme:#ED5565; --themealt:#DA4453")
        div.container
            div.title
                div.main-icon
                    div.container
                        div(action="open chat")
                            div.fas.fa-comments-alt.fa-fw
                            div.text
                        div
                            div.fas.fa-robot.fa-fw
                            div.text Bot
                        div
                            div.fas.fa-user.fa-fw
                            div.text Zoë
                div.more.far.fa-ellipsis-v(action="toggle options")
                div.close.far.fa-times(action="close chat")
            div.main
            div.chin

playground.json

{
    "scripts": [
      "jquery",
      "react",
      "react-dom"
    ],
    "styles": [
      "https://pro.fontawesome.com/releases/v5.12.0/css/all.css",
      "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    ]
  }

style.scss

@import url('https://fonts.googleapis.com/css?family=Kulim+Park&display=swap');
$transitiontime:1s;
:root {
	--theme:#5D9CEC;
	--themealt:#4A89DC;
    --themeText:white;
}

body {
    #app {
        min-height:100vh;
        background:white;
        font-family: 'Kulim Park', sans-serif;
        [action] {
            cursor: pointer;
        }
        #chatbox {
            --width:20rem;
            --height:calc(100vh - 4rem);
            --maxheight:calc(50vh - 4rem);
            position: fixed;
            bottom:2rem;
            right:2rem;
            overflow: hidden;
            width:4rem;
            height:4rem;
            border-radius: .5rem;
            box-shadow:0 0 0.25rem -.125rem rgba(0,0,0,0.2), 0rem 0rem 2rem -0.5rem rgba(0,0,0,0.1);
            transition:$transitiontime cubic-bezier(0.5, 0, 0, 1);
            >.container {
                display:flex;
                flex-direction: column;
                position: absolute;
                width:var(--width);
                height:var(--height);
                .title {
                    display: flex;
                    flex-direction: row;
                    height:4rem;
                    padding-right:.75rem;
                    border-radius: .5rem .5rem 0rem 0rem;
                    background:var(--theme);
                    color:var(--themeText);
                    .main-icon {
                        flex-grow: 1;
                        position: relative;
                        top:0;
                        left:0;
                        >.container {
                            position: absolute;
                            left:0;
                            top:calc(var(--main-icon-position, 1) * -4rem);
                            transition:$transitiontime cubic-bezier(0.5, 0, 0, 1);
                            >div {
                                display: flex;
                                align-items:center;
                                height:4rem;
                                >div {
                                    &.fas {
                                        width:4rem;
                                        text-align:center;
                                    }
                                    &.text {
                                        //margin-left:.75rem;
                                    }
                                }
                            }
                        }
                    }
                    >div {
                        font-size:1.5rem;
                        padding:0 .75rem;
                        &.more, &.close {
                            display: grid;
                            place-items: center;
                        }
                        &.more {
                            margin-right:.15rem;
                        }
                    }
                }
                .main {

                }
                .chin {
                    border-radius: 0rem 0rem .5rem .5rem;
                }
            }
            &:not(.open) {
                --main-icon-position:0 !important;
            }
            &.open {
                width:var(--width);
                height:var(--height);
                &.setup {
                    transition:unset;
                    overflow:unset;
                }
            }
        }
    }
}