chat 0.0.1 → 0.2.0

data/app/assets/stylesheets/chat/emojionearea.min.css

@@ -0,0 +1 @@
+.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea]{position:absolute;z-index:1000;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item{font-size:14px;padding:1px 3px;border:0}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a{text-decoration:none;display:block;height:100%;line-height:1.8em;padding:0 1.54em 0 .615em;color:#4f4f4f}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover{background-color:#e4e4e4}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active a,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover a{color:#333}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item .emojioneemoji{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:0 5px .2ex 0;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea,.emojionearea *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.emojionearea,.emojionearea.form-control{display:block;position:relative!important;width:100%;height:auto;padding:0;font-size:14px}.emojionearea .emojionearea-editor{display:block;height:auto;max-height:80px;overflow:auto;padding:6px 57px 6px 0;line-height:1.42857143;font-size:17px;color:#212121;background-color:transparent;border:0;cursor:text;margin-right:1px;border-bottom:1px solid rgba(0,0,0,.26);word-wrap:break-word}.emojionearea .emojionearea-editor:empty:before{content:attr(placeholder);display:block;color:#bbb}.emojionearea .emojionearea-editor:focus{border:0;outline:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.emojionearea .emojionearea-editor .emojioneemoji,.emojionearea .emojionearea-editor [class*=emojione-]{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea.emojionearea-inline{height:34px}.emojionearea.emojionearea-inline>.emojionearea-editor{height:32px;min-height:20px;overflow:hidden;white-space:nowrap;position:absolute;top:0;left:12px;right:24px;padding:6px 0}.emojionearea.emojionearea-inline>.emojionearea-button{top:4px}.emojionearea .emojionearea-button{z-index:5;position:absolute;right:3px;top:3px;width:24px;height:24px;opacity:.6;cursor:pointer;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.emojionearea .emojionearea-button:hover{opacity:1}.emojionearea .emojionearea-button>div{display:block;width:24px;height:24px;position:absolute;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.emojionearea .emojionearea-button>div.emojionearea-button-open{background-position:0 -24px;filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button>div.emojionearea-button-close{background-position:0 0;-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-open{-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-close{-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-picker{background:#fff;position:absolute;-moz-box-shadow:0 1px 5px rgba(0,0,0,.32);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.32);box-shadow:0 1px 5px rgba(0,0,0,.32);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:236px;width:316px;top:-15px;right:-15px;z-index:90;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;filter:alpha(Opacity=0);opacity:0;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.emojionearea .emojionearea-picker.hidden{display:none}.emojionearea .emojionearea-picker .emojionearea-wrapper{position:relative;height:236px;width:316px}.emojionearea .emojionearea-picker .emojionearea-wrapper:after{content:"";display:block;position:absolute;background-repeat:no-repeat;z-index:91}.emojionearea .emojionearea-picker .emojionearea-filters{width:100%;position:absolute;background:#F5F7F9;padding:0 0 0 7px;height:40px;z-index:95}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter{display:block;float:left;height:40px;width:32px;padding:7px 1px 0;cursor:pointer;-webkit-filter:grayscale(1);filter:grayscale(1)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active{background:#fff}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>i{width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img{width:24px;height:24px;margin:0 3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area{height:196px;overflow:auto;overflow-x:hidden;width:100%;position:absolute;padding:0 0 5px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list{z-index:1}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones{position:absolute;top:6px;right:10px;height:22px;z-index:2}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone{display:inline-block;padding:0;border:0;vertical-align:middle;outline:0;background:0 0;cursor:pointer;position:relative}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0:after{background-color:#ffcf3e}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1:after{background-color:#fae3c5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2:after{background-color:#e2cfa5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3:after{background-color:#daa478}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4:after{background-color:#a78058}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5:after{background-color:#5e4d43}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone{width:20px;height:20px;margin:0;background-color:transparent}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{content:"";position:absolute;display:block;top:4px;left:4px;width:12px;height:12px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone.active:after{top:0;left:0;width:20px;height:20px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone{width:16px;height:16px;margin:0 2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone.active:after{content:"";position:absolute;display:block;background-color:transparent;border:2px solid #fff;width:8px;height:8px;top:2px;left:2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:before,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:before{content:" ";clear:both;display:block}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone:after{-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.emojionearea .emojionearea-picker .emojionearea-scroll-area h1{display:block;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;font-weight:400;color:#b2b2b2;background:#fff;line-height:20px;margin:0;padding:7px 0 5px 6px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category{padding:0 0 0 7px}.emojionearea .emojionearea-picker .emojionearea-scroll-area [class*=emojione-]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;width:24px;height:24px;float:left;display:block;margin:1px;padding:3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:#e4e4e4;cursor:pointer}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn i,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img{float:left;display:block;width:24px;height:24px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img.lazy-emoji{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters{top:0;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-scroll-area{bottom:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-filters{bottom:0;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-scroll-area{top:0}.emojionearea .emojionearea-picker.emojionearea-picker-position-top{margin-top:-246px;right:-14px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -49px;bottom:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -80px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left,.emojionearea .emojionearea-picker.emojionearea-picker-position-right{margin-right:-326px;top:-8px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{width:10px;height:19px;background-position:0 -60px;top:13px;left:-10px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left.emojionearea-filters-position-bottom .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:right -60px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom{margin-top:10px;right:-14px;top:47px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -100px;top:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -90px}.emojionearea .emojionearea-button.active+.emojionearea-picker{filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top{margin-top:-229px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-left,.emojionearea .emojionearea-button.active+.emojionearea-picker-position-right{margin-right:-309px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-bottom{margin-top:-7px}.emojionearea.emojionearea-standalone{display:inline-block;width:auto;box-shadow:none}.emojionearea.emojionearea-standalone .emojionearea-editor{min-height:33px;position:relative;padding:6px 42px 6px 6px}.emojionearea.emojionearea-standalone .emojionearea-editor::before{content:"";position:absolute;top:4px;left:50%;bottom:4px;border-left:1px solid #e6e6e6}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder .emojioneemoji{opacity:.4}.emojionearea.emojionearea-standalone .emojionearea-button{top:0;right:0;bottom:0;left:0;width:auto;height:auto}.emojionearea.emojionearea-standalone .emojionearea-button>div{right:6px;top:5px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{right:23px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{top:15px}.emojionearea .emojionearea-button>div,.emojionearea .emojionearea-picker .emojionearea-wrapper:after{background-image:url(data:image/png;base64,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)!important}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder{background-repeat:no-repeat;background-position:20px 4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAC/v79T5hyIAAAAAXRSTlMAQObYZgAAABNJREFUCNdjYGNgQEb/P4AQqiAASiUEG6Vit44AAAAASUVORK5CYII=)!important}

data/app/assets/stylesheets/chat/header.sass

@@ -0,0 +1,50 @@
+@import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
+
+#chat .chat__header
+  font-family: 'Lato' !important
+  letter-spacing: 1.5px !important
+  height: 48px
+  background-color: #fff
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2)
+  display: flex
+  flex-direction: row
+  align-items: center
+  h6
+    font-family: 'Lato' !important
+    letter-spacing: 1.5px !important
+    margin: 0
+    font-weight: 300
+    font-size: 19px
+  i
+    margin: 0 10px 0 10px
+    color: #BDBDBD
+    transition: all .3s ease
+    cursor: pointer
+    &:hover
+      color: #212121
+
+#chat .chat__badge
+  position: relative
+#chat .chat__badge[data-badge]:after, .chat__launch.chat__badge[data-badge]:after
+  content: attr(data-badge)
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-content: center
+  align-items: center
+  position: absolute
+  top: -7px
+  right: -10px
+  font-size: 12px
+  width: 22px
+  height: 22px
+  border-radius: 50%
+  background: #ff4081
+  color: #fff
+  font-family: 'Lato' !important
+.chat__launch.chat__badge[data-badge]:after
+  position: fixed
+  bottom: 51px
+  right: 14px
+  top: initial

data/app/assets/stylesheets/chat/launch.sass

@@ -0,0 +1,26 @@
+.chat__launch
+  position: fixed
+  right: 15px
+  bottom: 15px
+  border-radius: 50%
+  height: 56px
+  margin: auto
+  min-width: 56px
+  width: 56px
+  padding: 0
+  overflow: hidden
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)
+  line-height: normal
+  border: none
+  will-change: box-shadow
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  outline: none
+  cursor: pointer
+  text-decoration: none
+  i
+    position: fixed
+    right: 28px
+    bottom: 28px
+    font-size: 30px
+  &:active
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2)

data/app/assets/stylesheets/chat/list.sass

@@ -0,0 +1,45 @@
+@keyframes pulse
+  50%
+    background-color: #C8E6C9
+
+#chat .chat__list
+  height: calc(100% - 58px)
+  display: flex
+  flex-direction: column
+  padding-top: 10px
+  a
+    padding: 10px
+    text-align: center
+    transition: all 0.3s ease
+    text-decoration: none
+    color: #212121
+    &:hover
+      background: #BDBDBD
+  .chat__index
+    display: flex
+    flex-direction: column
+    overflow-y: auto
+    &::-webkit-scrollbar
+      display: none
+  .chat__has_new_message
+    animation: pulse 1s ease-out infinite
+
+#chat .chat__start-new
+  font-weight: 300
+  border-top: 1px solid #BDBDBD
+  margin: 0 !important
+  font-size: 17px
+
+#chat .chat__none-available
+  height: 100%
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  color: #bdbdbd
+  h5
+    font-weight: 400
+    font-size: 15px
+    margin: 5px 0px 5px 0px
+  i
+    font-size: 60px

data/app/assets/stylesheets/chat/message_form.sass

@@ -0,0 +1,50 @@
+@import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
+
+#chat .new_message
+  margin: 0px 40px 36px 40px
+  flex-direction: column
+  display: flex
+  position: relative
+  .chat__insert-image
+    position: absolute
+    right: 28px
+    top: 4px
+    color: #bdbdbd
+    transition: all 0.3s ease
+    z-index: 10
+    cursor: pointer
+    font-size: 22px
+    &:hover
+      color: #212121
+  input[type='text'], textarea
+    font-size: 17px
+    font-family: "Lato" !important
+    letter-spacing: 1.5px !important
+    background: transparent
+    border: none
+    font-weight: 300
+    border-bottom: 1px solid rgba(0,0,0,.26)
+    height: 28px
+    outline: none
+    resize: none
+  .bar, .emojionearea-bar
+    position: relative
+    &:before, &:after
+      content: ''
+      height: 2px
+      width: 0
+      bottom: 0px
+      position: absolute
+      background: #3f51b5
+      transition: 0.2s ease all
+      -moz-transition: 0.2s ease all
+      -webkit-transition: 0.2s ease all
+    &:before
+      left: 50%
+    &:after
+      right: 50%
+  input[type='text']:focus ~ .bar:before, input[type='text']:focus ~ .bar:after,
+  textarea:focus ~ .bar:before, textarea:focus ~ .bar:after, .emojionearea-editor:focus ~ .emojionearea-bar:before, .emojionearea-editor:focus ~ .emojionearea-bar:after
+    width: 50%
+  input[type='file']
+    display: none !important

data/app/assets/stylesheets/chat/new.sass

@@ -0,0 +1,53 @@
+@import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
+
+#chat .new_conversation
+  height: calc(100% - 48px)
+  display: none
+  flex-direction: column
+  .chat__user-check-boxes
+    margin: 10px 20px 0px 20px
+    display: flex
+    flex-direction: column
+    height: calc(100% - 48px)
+    overflow-y: auto
+    &::-webkit-scrollbar
+      display: none
+  label
+    position: relative
+    margin: 1rem
+    line-height: 135%
+    cursor: pointer
+    font-size: 18px
+    font-family: "Lato" !important
+    letter-spacing: 1.5px !important
+    padding-left: 40px
+  .chat__status
+    &:after
+      content: "\2022"
+    &.offline
+      &:after
+        color: #EF5350
+    &.online
+      &:after
+        color: #AED581
+
+  input[type='submit']
+    border-top: 1px solid #BDBDBD
+    border-left: none
+    border-bottom: none
+    border-right: none
+    font-family: "Lato" !important
+    letter-spacing: 1.5px !important
+    font-size: 17px
+    background: transparent
+    width: 100%
+    padding: 10px 0 10px 0
+    cursor: pointer
+    transition: all 0.3s ease
+    z-index: 10
+    &:hover
+      background: #BDBDBD
+
+#chat .chat__errors
+  text-align: center
+  color: #F44336

data/app/assets/stylesheets/chat/transcript.sass

@@ -0,0 +1,76 @@
+#chat .current_chat
+  height: calc(100% - 48px)
+  flex-direction: column
+  img.chat__user-avatar
+    width: 50px
+    height: 50px
+    object-fit: cover
+    border-radius: 50%
+  i.chat__user-avatar
+    font-size: 50px
+  .chat__transcript
+    max-height: calc(100% - 78px)
+    overflow-y: auto
+    &::-webkit-scrollbar
+      display: none
+  .chat__image-message
+    width: 100%
+    padding-top: 10px
+    padding-bottom: 10px
+    img
+      width: 100%
+      border-bottom: 4px solid #C8E6C9
+    &.current img
+      border-bottom: 4px solid #B2EBF2
+  .chat__message
+    padding: 10px
+    display: flex
+    flex-direction: row
+    img
+      font-size: inherit
+      height: 2ex
+      width: 2.1ex
+      min-height: 20px
+      min-width: 20px
+      display: inline-block
+      margin: -.2ex .15em .2ex
+      line-height: normal
+      vertical-align: middle
+      max-width: 100%
+      top: 0
+    .text
+      padding: 5px
+      flex: 1
+      position: relative
+      &.right
+        margin-right: 10px
+        border-radius: 5px 0px 5px 5px
+        background: #B2EBF2
+        border: none
+        &:after
+          content: ""
+          position: absolute
+          border-style: solid
+          border-width: 0px 0 13px 15px
+          border-color: transparent #B2EBF2
+          display: block
+          width: 0
+          z-index: 1
+          right: -15px
+          top: 0px
+      &.left
+        margin-left: 10px
+        border-radius: 0px 5px 5px 5px
+        background: #C8E6C9
+        border: none
+        &:after
+          content: ""
+          position: absolute
+          border-style: solid
+          border-width: 0px 15px 13px 0px
+          border-color: transparent #C8E6C9
+          display: block
+          width: 0
+          z-index: 1
+          left: -15px
+          top: 0px

data/app/channels/chat/messages_channel.rb

@@ -0,0 +1,11 @@
+class Chat::MessagesChannel < ApplicationCable::Channel
+  def follow(data)
+    stop_all_streams
+    stream_from "chats::#{data['chat_id']}::messages"
+  end
+
+  def unfollow
+    stop_all_streams
+  end
+  alias unsubscribed unfollow
+end

data/app/channels/chat/notification_channel.rb

@@ -0,0 +1,10 @@
+class Chat::NotificationChannel < ApplicationCable::Channel
+  def follow(data)
+    stop_all_streams
+    stream_from "users::#{data['user_id']}::chats"
+  end
+
+  def unsubscribed
+    stop_all_streams
+  end
+end

data/app/channels/chat/status_channel.rb

@@ -0,0 +1,12 @@
+  class Chat::StatusChannel < ApplicationCable::Channel
+    def online
+      stop_all_streams
+      stream_from "chat::status"
+      current_user.online
+    end
+
+    def unsubscribed
+      current_user.offline
+      stop_all_streams
+    end
+  end

data/app/controllers/chat/application_controller.rb

@@ -0,0 +1,5 @@
+module Chat
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+  end
+end

data/app/controllers/chat/conversations_controller.rb

@@ -0,0 +1,30 @@
+module Chat
+  class ConversationsController < ApplicationController
+    before_action Chat.logged_in_check
+    before_action :set_conversation, only: :show
+
+    def show
+    end
+
+    def create
+      @conversation = Chat::Conversation.create(conversation_params)
+    end
+
+    private
+
+    def set_conversation
+      @conversation = Chat::Conversation.includes(
+        :users, messages: :user
+      ).find(params[:id])
+    end
+
+    def conversation_params
+      chat_params = params.require(:conversation).permit(user_ids: [])
+      if chat_params[:user_ids].reject(&:blank?).present?
+        chat_params[:user_ids] << current_user.id
+      end
+
+      chat_params
+    end
+  end
+end

data/app/controllers/chat/messages_controller.rb

@@ -0,0 +1,28 @@
+module Chat
+  class MessagesController < ApplicationController
+    before_action Chat.logged_in_check
+    before_action :set_conversation
+
+    def create
+      @conversation.messages.create(message_params)
+
+      head :ok
+    end
+
+    def destroy
+      @conversation.destroy
+    end
+
+    private
+
+    def set_conversation
+      @conversation = Chat::Conversation.find(params[:conversation_id])
+    end
+
+    def message_params
+      params.require(:message).permit(:text, :image).merge(
+        user_id: current_user.id
+      )
+    end
+  end
+end

data/app/helpers/chat/application_helper.rb

@@ -0,0 +1,62 @@
+module Chat
+  module ApplicationHelper
+    def render_chat(background = nil, color = nil)
+      return unless send Chat.signed_in
+
+      render "chat/chat", background: background, color: color
+    end
+
+    def launch_chat_fab(background = "#4CAF50", color = "light")
+      attrs = {
+        class: "chat__launch", style: "background: #{background}",
+        data: { "current-user" => current_user.id }
+      }
+      button_tag(attrs) do
+        material_icon.forum.css_class("md-#{color}").to_s.html_safe
+      end
+    end
+
+    def chatable_users
+      @chatable_users ||= ::User.where.not(id: current_user.id)
+    end
+
+    def chatable_user_check_boxes(f)
+      f.collection_check_boxes(:user_ids, chatable_users, :id, :name) do |b|
+        b.check_box + b.label(class: b.object.chat_status) do
+          content_tag(
+            :div, b.text,
+            class: "chat__status #{b.object.chat_status}"
+          )
+        end
+      end
+    end
+
+    def chat_avatar(user)
+      if user.send(Chat.user_avatar.to_s + "?")
+        image_tag(user.send(Chat.user_avatar), class: "chat__user-avatar")
+      else
+        MaterialIcon.new.css_class("chat__user-avatar").person
+      end
+    end
+
+    def chat_list
+      @chat_list ||=
+        Chat::Conversation.joins(:users)
+                          .group("chat_sessions.conversation_id")
+                          .select(:id, group_concat)
+                          .merge(current_user.conversations)
+                          .order(created_at: :desc)
+    end
+
+    private
+
+    def group_concat
+      if ActiveRecord::Base.connection.adapter_name == "SQLite"
+        "GROUP_CONCAT(users.#{::User.first_name} || ' ' || users.#{::User.last_name}, ', ') as names"
+      elsif ActiveRecord::Base.connection.adapter_name == "MySQL"
+        "GROUP_CONCAT(CONCAT(\"users.#{User.first_name}\",\" \", \"users.#{User.last_name}\") "\
+        "SEPARATOR ', ') as names"
+      end
+    end
+  end
+end