chat 0.0.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3adb97d2c92c6e3b15eb9ccac6d510c46f5663a6
-  data.tar.gz: 9d0f5bba612617f79dab6c65595ee2ca4aed81d8
+  metadata.gz: 6bcdf0fb7ca57a7f9a8e9c8be615fc159f088842
+  data.tar.gz: ecffe773589c5a3eec5c0d3eb60bf4cc8b0bf381
 SHA512:
-  metadata.gz: 06f1b20cb5aa5b12d394ff54b9fdd79845e7116964a0ea85ab99a5570f616d7a115d470db6437ba02497499678f3a8f955563c00778e68e3da79279944082c89
-  data.tar.gz: c3ef4022f16441ea5059b96a89c4252f8d4c9853818d6d03cf7435e56fe6bcc876a9043d5f2bab6c21eb852d79730e9fb4c16fad286aeb14940cfb1b42f27271
+  metadata.gz: a9a9b349a7d5a088d991da1120af2ad9c706dbbe1489a487f10c9b2921bbd3766acd30be7928bbd9ee482df1900a6182492fe78f86374799f5ce9e41f8106fea
+  data.tar.gz: e891fd403f4c3756fe340f9d2259c9e835bf059dd967516a01e8907a6a16768e9da758478401ce1076d9063580d5458ff1f584ebc1a43cfcb4768ab66fd16e55

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2016 npezza93
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -1,40 +1,65 @@
 # Chat
-
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/chat`. To experiment with that code, run `bin/console` for an interactive prompt.
-
-TODO: Delete this and the text above, and describe your gem
-
-## Installation
-
-Add this line to your application's Gemfile:
+Simple Rails chat plugin that allows users to talk to one or more people at a
+time that leverages ActionCable.
+
+## Getting Started
+
+#### Prerequisites
+1. This gem relies on ActionCable therefore Rails 5.0.0 is a minimum.
+1. For help setting up ActionCable when coming from an older version of Rails, view
+[this](https://github.com/npezza93/chat/wiki/Setting-up-ActionCable).
+1. An authentication system must be setup before installing `chat`, like
+Devise, Clearance, or your own custom solution. The generator will only run
+unless a users table exists.
+1. Chat assumes that a `current_user` view helper
+method exists.
+1. Your connection should be identified by `current_user`. You can learn
+more about how to set this up by reading
+[here](http://edgeguides.rubyonrails.org/action_cable_overview.html#server-side-components-connections).
+
+#### Installation
+Add Chat to your application's Gemfile:
 
 ```ruby
 gem 'chat'
 ```
 
 And then execute:
+```bash
+❯ bundle
+```
 
-    $ bundle
-
-Or install it yourself as:
+Run the installer to setup migrations and helpers and then migrate:
+```bash
+❯ rails generate chat:install
+❯ rails db:migrate
+```
 
-    $ gem install chat
+Require chat in your app/assets/javascripts/application.js file:
 
-## Usage
+```
+//= require chat
+```
 
-TODO: Write usage instructions here
+Require chat in your app/assets/stylesheets/application.css file
 
-## Development
+```
+ *= require chat
+```
 
-After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+Finally the following line to your application.html.erb file or any view file
+you'd like Chat available from:
+```html
+<!--  background is the background color of the launch fab -->
+<!--  color is the icon color on the launch fab. Can be light or dark -->
+<%= render_chat(background, color) %>
+```
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+### Dot Commands
 
 ## Contributing
-
-Bug reports and pull requests are welcome on GitHub at https://github.com/npezza93/chat.
-
+Contribution directions go here.
 
 ## License
-
-The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the
+[MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -1,2 +1,28 @@
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+require "rdoc/task"
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title    = "Chat"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.md")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
 require "bundler/gem_tasks"
-task :default => :spec
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "lib"
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/chat_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/chat .js
+//= link_directory ../stylesheets/chat .css

data/app/assets/javascripts/chat.js

@@ -0,0 +1,16 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require jquery-fileupload/basic
+//= require_tree './chat'

data/app/assets/javascripts/chat/cable.js

@@ -0,0 +1,13 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the rails generate channel command.
+//
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+  this.App || (this.App = {});
+
+  App.cable = ActionCable.createConsumer();
+
+}).call(this);

data/app/assets/javascripts/chat/channels/message.coffee

@@ -0,0 +1,75 @@
+App.chat_message =
+  App.cable.subscriptions.create 'Chat::MessagesChannel',
+    collection: -> $("[data-channel='messages']")
+
+    connected: ->
+      @followCurrentChat()
+
+    received: (data) ->
+      @collection().append @generateMessage(data)
+      height = $('.chat__transcript').prop('scrollHeight')
+      $('.chat__transcript').animate { scrollTop: height }, 'slow'
+
+    followCurrentChat: ->
+      if chatId = @current_chat()
+        @perform 'follow', chat_id: chatId
+      else
+        @perform 'unfollow'
+
+    current_user: ->
+      if @collection().length > 0
+        @collection().data().currentUser
+
+    current_chat: ->
+      if @collection().length > 0
+        @collection().data().currentChat
+
+    div: ->
+      document.createElement('div')
+
+    flex: ->
+      element = @div()
+      element.classList += 'chat__flex'
+      element.outerHTML
+
+    text_message_container: ->
+      element = @div()
+      element.classList += 'chat__message'
+      element
+
+    image_message_container: ->
+      element = @div()
+      element.classList += 'chat__image-message'
+      element
+
+    image_message: (data) ->
+      element = @image_message_container()
+      if data.user == @current_user()
+        element.classList += ' current'
+      element.innerHTML = data.message
+      element.outerHTML
+
+    message: (data) ->
+      element = @div()
+      element.classList += 'text'
+      if data.user == @current_user()
+        element.classList += ' right'
+      else
+        element.classList += ' left'
+      element.innerHTML = data.message
+      element.outerHTML
+
+    text_message: (data) ->
+      msg = [data.avatar, @message(data), @flex()]
+      msg = msg.reverse() if data.user == @current_user()
+
+      message = @text_message_container()
+      message.innerHTML = msg.join('')
+      message.outerHTML
+
+
+    generateMessage: (data) ->
+      if data.image
+        @image_message(data)
+      else
+        @text_message(data)

data/app/assets/javascripts/chat/channels/notification.coffee

@@ -0,0 +1,44 @@
+App.chat_notification =
+  App.cable.subscriptions.create "Chat::NotificationChannel",
+    connected: ->
+      @perform 'follow', user_id: @current_user()
+
+    disconnected: ->
+
+    received: (data) ->
+      if @current_chat() != data.chat_id || !@viewing_transcript()
+        @add_notification(data.chat_id)
+        $("#chat__show-#{data.chat_id}").addClass("chat__has_new_message")
+
+    current_user: ->
+      if $(".chat__launch").length > 0
+        $(".chat__launch").data().currentUser
+
+    current_chat: ->
+      App.chat_message.current_chat()
+
+    viewing_transcript: ->
+      $(".current_chat").css("display") == "flex"
+
+    add_notification: (id) ->
+      classes = "#chat .chat__settings, .chat__launch"
+      $(classes).addClass('chat__badge')
+      $(classes).attr('data-badge', @new_notification_count(id))
+
+    new_notification_count: (id) ->
+      @notification_count() + @notification_increment(id)
+
+    notification_count: ->
+      parseInt($("#chat .chat__settings").data('badge') || 0)
+
+    notification_increment: (id) ->
+      if $("#chat__show-#{id}").hasClass('chat__has_new_message')
+        0
+      else
+        1
+
+    decrement: ->
+      classes = "#chat .chat__settings, .chat__launch"
+      if @notification_count() == 1
+        $(classes).removeClass('chat__badge')
+      $(classes).attr('data-badge', @notification_count() - 1)

data/app/assets/javascripts/chat/channels/status.coffee

@@ -0,0 +1,13 @@
+App.chat_status =
+  App.cable.subscriptions.create "Chat::StatusChannel",
+    connected: ->
+      @perform 'online', user_id: App.chat_notification.current_user()
+
+    disconnected: ->
+      @perform 'unsubscribed', user_id: App.chat_notification.current_user()
+
+    received: (data) ->
+      label = $("label[for='conversation_user_ids_#{data.user_id}'] .chat__status")
+      label.removeClass("offline")
+      label.removeClass("online")
+      label.addClass(data.status)

data/app/assets/javascripts/chat/emojionearea.min.js

@@ -0,0 +1 @@
+!function(a,b,c){"use strict";function i(a){g?a():h.push(a)}function o(a,b,d){var f=!0,g=1;if(b){b=b.toLowerCase();do{var h=1==g?"@"+b:b;e[a.id][h]&&e[a.id][h].length&&c.each(e[a.id][h],function(b,c){return f=c.apply(a,d||[])!==!1})}while(f&&g--)}return f}function p(a,b,d,e){e=e||function(a,b){return c(b.currentTarget)},c.each(d,function(g,h){g=c.isArray(d)?h:g,(f[a.id][h]||(f[a.id][h]=[])).push([b,g,e])})}function q(a,b,c){var e,d=g.imageType;return e="svg"==d?g.imagePathSVG:g.imagePathPNG,a.replace("{name}",c||"").replace("{img}",e+(m<2?b.toUpperCase():b)+"."+d).replace("{uni}",b).replace("{alt}",g.convert(b))}function r(a,b,c){return a.replace(/:?\+?[\w_\-]+:?/g,function(a){a=":"+a.replace(/:$/,"").replace(/^:/,"")+":";var d=g.emojioneList[a];return d?(m>3&&(d=d.unicode),q(b,d[d.length-1],a)):c?"":a})}function s(c){var d,e;if(b.getSelection){if(d=b.getSelection(),d.getRangeAt&&d.rangeCount){e=d.getRangeAt(0),e.deleteContents();var f=a.createElement("div");f.innerHTML=c;for(var h,i,g=a.createDocumentFragment();h=f.firstChild;)i=g.appendChild(h);e.insertNode(g),i&&(e=e.cloneRange(),e.setStartAfter(i),e.collapse(!0),d.removeAllRanges(),d.addRange(e))}}else a.selection&&"Control"!=a.selection.type&&a.selection.createRange().pasteHTML(c)}function u(a){return"object"==typeof a}function v(a){var b=t();if(a&&a.filters){var d=b.filters;c.each(a.filters,function(a,b){return!u(b)||c.isEmptyObject(b)?void delete d[a]:void c.each(b,function(b,c){d[a][b]=c})}),a.filters=d}return c.extend({},b,a)}function z(a,b){return a.replace(y,function(a){var c=g[0===m?"jsecapeMap":"jsEscapeMap"];return"undefined"!=typeof a&&a in c?q(b,c[a]):a})}function A(a,b){return a=a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;").replace(/`/g,"&#x60;").replace(/(?:\r\n|\r|\n)/g,"\n").replace(/(\n+)/g,"<div>$1</div>").replace(/\n/g,"<br/>").replace(/<br\/><\/div>/g,"</div>"),b.shortnames&&(a=g.shortnameToUnicode(a)),z(a,b.emojiTemplate).replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;").replace(/  /g,"&nbsp;&nbsp;")}function B(a,b){switch(a=a.replace(/<img[^>]*alt="([^"]+)"[^>]*>/gi,"$1").replace(/\n|\r/g,"").replace(/<br[^>]*>/gi,"\n").replace(/(?:<(?:div|p|ol|ul|li|pre|code|object)[^>]*>)+/gi,"<div>").replace(/(?:<\/(?:div|p|ol|ul|li|pre|code|object)>)+/gi,"</div>").replace(/\n<div><\/div>/gi,"\n").replace(/<div><\/div>\n/gi,"\n").replace(/(?:<div>)+<\/div>/gi,"\n").replace(/([^\n])<\/div><div>/gi,"$1\n").replace(/(?:<\/div>)+/gi,"</div>").replace(/([^\n])<\/div>([^\n])/gi,"$1\n$2").replace(/<\/div>/gi,"").replace(/([^\n])<div>/gi,"$1\n").replace(/\n<div>/gi,"\n").replace(/<div>\n/gi,"\n\n").replace(/<(?:[^>]+)?>/g,"").replace(new RegExp(n,"g"),"").replace(/&nbsp;/g," ").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&quot;/g,'"').replace(/&#x27;/g,"'").replace(/&#x60;/g,"`").replace(/&amp;/g,"&"),b.saveEmojisAs){case"image":a=z(a,b.emojiTemplate);break;case"shortname":a=g.toShort(a)}return a}function C(){var a=this,b=a.editor[0].offsetWidth-a.editor[0].clientWidth,c=parseInt(a.button.css("marginRight"));c!==b&&(a.button.css({marginRight:b}),a.floatingPicker&&a.picker.css({right:parseInt(a.picker.css("right"))-c+b}))}function D(){var a=this;if(!a.sprite&&a.lasyEmoji[0]){var b=a.picker.offset().top,d=b+a.picker.height()+20;a.lasyEmoji.each(function(){var a=c(this),e=a.offset().top;e>b&&e<d&&a.attr("src",a.data("src")).removeClass("lazy-emoji")}),a.lasyEmoji=a.lasyEmoji.filter(".lazy-emoji")}}function E(a,b){return(b?"":".")+l+(a?"-"+a:"")}function F(a){var b=c("<div/>",u(a)?a:{class:E(a,!0)});return c.each(k.call(arguments).slice(1),function(a,d){c.isFunction(d)&&(d=d.call(b)),d&&c(d).appendTo(b)}),b}function G(){return localStorage.getItem("recent_emojis")||""}function H(a){var b=G();if(!a.recent||a.recent!==b){if(b.length){var e,f,d=a.scrollArea.is(".skinnable");d||(e=a.scrollArea.scrollTop(),f=a.recentCategory.is(":visible")?a.recentCategory.height():0);var g=r(b,a.emojiBtnTemplate,!0).split("|").join("");if(a.recentCategory.children(".emojibtn").remove(),c(g).insertAfter(a.recentCategory.children("h1")),a.recentCategory.children(".emojibtn").on("click",function(){a.trigger("emojibtn.click",c(this))}),a.recentFilter.show(),!d){a.recentCategory.show();var h=a.recentCategory.height();f!==h&&a.scrollArea.scrollTop(e+h-f)}}else a.recentFilter.hasClass("active")&&a.recentFilter.removeClass("active").next().addClass("active"),a.recentCategory.hide(),a.recentFilter.hide();a.recent=b}}function I(a,b){var c=G(),d=c.split("|"),e=d.indexOf(b);e!==-1&&d.splice(e,1),d.unshift(b),d.length>9&&d.pop(),localStorage.setItem("recent_emojis",d.join("|")),H(a)}function J(){var a="test";try{return localStorage.setItem(a,a),localStorage.removeItem(a),!0}catch(a){return!1}}function K(d,e,f){f=v(f),d.sprite=f.sprite&&m<3,d.inline=null===f.inline?e.is("INPUT"):f.inline,d.shortnames=f.shortnames,d.saveEmojisAs=f.saveEmojisAs,d.standalone=f.standalone,d.emojiTemplate='<img alt="{alt}" class="emojione'+(d.sprite?'-{uni}" src="'+j+'"/>':'emoji" src="{img}"/>'),d.emojiTemplateAlt=d.sprite?'<i class="emojione-{uni}"/>':'<img class="emojioneemoji" src="{img}"/>',d.emojiBtnTemplate='<i class="emojibtn" role="button" data-name="{name}">'+d.emojiTemplateAlt+"</i>",d.recentEmojis=f.recentEmojis&&J();var h=f.pickerPosition;d.floatingPicker="top"===h||"bottom"===h;var k,q,t,y,z,K,L,M,N,O,i=e.is("TEXTAREA")||e.is("INPUT")?"val":"text",P=F({class:l+(d.standalone?" "+l+"-standalone ":" ")+(e.attr("class")||""),role:"application"},k=d.editor=F("editor").attr({contenteditable:!d.standalone,placeholder:f.placeholder||e.data("placeholder")||e.attr("placeholder")||"",tabindex:0}),N=d.bar=F("bar"),q=d.button=F("button",F("button-open"),F("button-close")).attr("title",f.buttonTitle),t=d.picker=F("picker",F("wrapper",z=F("filters"),O=F("scroll-area",L=F("emojis-list"),y=F("tones",function(){if(f.tones){this.addClass(E("tones-"+f.tonesStyle,!0));for(var a=0;a<=5;a++)this.append(c("<i/>",{class:"btn-tone btn-tone-"+a+(a?"":" active"),"data-skin":a,role:"button"}))}})))).addClass(E("picker-position-"+f.pickerPosition,!0)).addClass(E("filters-position-"+f.filtersPosition,!0)).addClass("hidden"));if(k.data(e.data()),c.each(f.attributes,function(a,b){k.attr(a,b)}),c.each(f.filters,function(a,b){var e=0;if("recent"!==a||d.recentEmojis){if("tones"!==a)c("<i/>",{class:E("filter",!0)+" "+E("filter-"+a,!0),"data-filter":a,title:b.title}).wrapInner(r(b.icon,d.emojiTemplateAlt)).appendTo(z);else{if(!f.tones)return;e=5}do{var g=F("category").attr({name:a,"data-tone":e}).appendTo(L),h=b.emoji.replace(/[\s,;]+/g,"|");e>0&&(g.hide(),h=h.split("|").join("_tone"+e+"|")+"_tone"+e),"recent"===a&&(h=G()),h=r(h,d.sprite?'<i class="emojibtn" role="button" data-name="{name}"><i class="emojione-{uni}"></i></i>':'<i class="emojibtn" role="button" data-name="{name}"><img class="emojioneemoji lazy-emoji" data-src="{img}"/></i>',!0).split("|").join(""),g.html(h),c("<h1/>").text(b.title).prependTo(g)}while(--e>0)}}),f.filters=null,d.sprite||(d.lasyEmoji=L.find(".lazy-emoji")),K=z.find(E("filter")),K.eq(0).addClass("active"),M=L.find(E("category")),d.recentFilter=K.filter('[data-filter="recent"]'),d.recentCategory=M.filter("[name=recent]"),d.scrollArea=O,f.container?c(f.container).wrapInner(P):P.insertAfter(e),f.hideSource&&e.hide(),d.setText(e[i]()),e[i](d.getText()),C.apply(d),d.standalone&&!d.getText().length){var Q=c(e).data("emoji-placeholder")||f.emojiPlaceholder;d.setText(Q),k.addClass("has-placeholder")}p(d,L.find(".emojibtn"),{click:"emojibtn.click"}),p(d,b,{resize:"!resize"}),p(d,y.children(),{click:"tone.click"}),p(d,[t,q],{mousedown:"!mousedown"},k),p(d,q,{click:"button.click"}),p(d,k,{paste:"!paste"},k),p(d,k,["focus","blur"],function(){return!d.stayFocused&&k}),p(d,t,{mousedown:"picker.mousedown",mouseup:"picker.mouseup",click:"picker.click",keyup:"picker.keyup",keydown:"picker.keydown",keypress:"picker.keypress"}),p(d,k,["mousedown","mouseup","click","keyup","keydown","keypress"]),p(d,t.find(".emojionearea-filter"),{click:"filter.click"});var R=!1;if(O.on("scroll",function(){if(!R&&(D.call(d),O.is(":not(.skinnable)"))){var a=M.eq(0),b=O.offset().top;M.each(function(d,e){return!(c(e).offset().top-b>=10)&&void(a=c(e))});var e=K.filter('[data-filter="'+a.attr("name")+'"]');e[0]&&!e.is(".active")&&(K.removeClass("active"),e.addClass("active"))}}),d.on("@filter.click",function(a){var b=a.is(".active");if(O.is(".skinnable")){if(b)return;y.children().eq(0).click()}R=!0,b||(K.filter(".active").removeClass("active"),a.addClass("active"));var c=M.filter('[name="'+a.data("filter")+'"]').offset().top,e=O.scrollTop(),f=O.offset().top;O.stop().animate({scrollTop:c+e-f-2},200,"swing",function(){D.call(d),R=!1})}).on("@picker.show",function(){d.recentEmojis&&H(d),D.call(this)}).on("@tone.click",function(a){y.children().removeClass("active");var b=a.addClass("active").data("skin");b?(O.addClass("skinnable"),M.hide().filter("[data-tone="+b+"]").show(),K.eq(0).is('.active[data-filter="recent"]')&&K.eq(0).removeClass("active").next().addClass("active")):(O.removeClass("skinnable"),M.hide().filter("[data-tone=0]").show(),K.eq(0).click()),D.call(d)}).on("@button.click",function(a){a.is(".active")?d.hidePicker():d.showPicker()}).on("@!paste",function(a,e){var f=function(b){var e="caret-"+(new Date).getTime(),f=A(b,d);s(f),s('<i id="'+e+'"></i>'),a.scrollTop(i);var g=c("#"+e),h=g.offset().top-a.offset().top,j=a.height();(i+h>=j||i>h)&&a.scrollTop(i+h-2*j/3),g.remove(),d.stayFocused=!1,C.apply(d),o(d,"paste",[a,b,f])};if(e.originalEvent.clipboardData){var g=e.originalEvent.clipboardData.getData("text/plain");return f(g),e.preventDefault?e.preventDefault():e.stop(),e.returnValue=!1,e.stopPropagation(),!1}d.stayFocused=!0,s("<span>"+n+"</span>");var h=w(a[0]),i=a.scrollTop(),j=c("<div/>",{contenteditable:!0}).css({position:"fixed",left:"-999px",width:"1px",height:"1px",top:"20px",overflow:"hidden"}).appendTo(c("BODY")).focus();b.setTimeout(function(){a.focus(),x(a[0],h);var b=B(j.html().replace(/\r\n|\n|\r/g,"<br>"),d);j.remove(),f(b)},200)}).on("@emojibtn.click",function(a){k.removeClass("has-placeholder"),P.is(".focused")||k.focus(),d.standalone?(k.html(r(a.data("name"),d.emojiTemplate)),d.trigger("blur")):(w(k[0]),s(r(a.data("name"),d.emojiTemplate))),d.recentEmojis&&I(d,a.data("name"))}).on("@!resize @keyup @emojibtn.click",C).on("@!mousedown",function(a,b){return P.is(".focused")||a.focus(),b.preventDefault(),!1}).on("@change",function(){var a=d.editor.html().replace(/<\/?(?:div|span|p)[^>]*>/gi,"");a.length&&!/^<br[^>]*>$/i.test(a)||d.editor.html(d.content=""),e[i](d.getText())}).on("@focus",function(){P.addClass("focused")}).on("@blur",function(){P.removeClass("focused"),f.hidePickerOnBlur&&d.hidePicker();var a=d.editor.html();d.content!==a?(d.content=a,o(d,"change",[d.editor]),e.blur().trigger("change")):e.blur()}),f.shortcuts&&d.on("@keydown",function(a,b){b.ctrlKey||(9==b.which?(b.preventDefault(),q.click()):27==b.which&&(b.preventDefault(),q.is(".active")&&d.hidePicker()))}),u(f.events)&&!c.isEmptyObject(f.events)&&c.each(f.events,function(a,b){d.on(a.replace(/_/g,"."),b)}),f.autocomplete){var S=function(){var a={maxCount:f.textcomplete.maxCount,placement:f.textcomplete.placement};f.shortcuts&&(a.onKeydown=function(a,b){if(!a.ctrlKey&&13==a.which)return b.KEY_ENTER});var b=c.map(g.emojioneList,function(a,b){return f.autocompleteTones?b:/_tone[12345]/.test(b)?null:b});b.sort(),k.textcomplete([{id:l,match:/\B(:[\-+\w]*)$/,search:function(a,d){d(c.map(b,function(b){return 0===b.indexOf(a)?b:null}))},template:function(a){return r(a,d.emojiTemplate)+" "+a.replace(/:/g,"")},replace:function(a){return r(a,d.emojiTemplate)},cache:!0,index:1}],a),f.textcomplete.placement&&"static"==k.data("textComplete").option.appendTo.css("position")&&k.data("textComplete").option.appendTo.css("position","relative")};c.fn.textcomplete?S():c.getScript("https://cdn.rawgit.com/yuku-t/jquery-textcomplete/v1.3.4/dist/jquery.textcomplete.js",S)}d.inline&&(P.addClass(E("inline",!0)),d.on("@keydown",function(a,b){13==b.which&&b.preventDefault()})),/firefox/i.test(navigator.userAgent)&&a.execCommand("enableObjectResizing",!1,!1)}function N(d){function e(a){var b=a.cacheBustParam;return u(a.jsEscapeMap)?"?v=1.2.4"===b?"2.0.0":"?v=2.0.1"===b?"2.1.0":"?v=2.1.1"===b?"2.1.1":"?v=2.1.2"===b?"2.1.2":"?v=2.1.3"===b?"2.1.3":"2.1.4":"1.5.2"}function f(a){switch(a){case"1.5.2":return 0;case"2.0.0":return 1;case"2.1.0":case"2.1.1":return 2;case"2.1.2":return 3;case"2.1.3":case"2.1.4":default:return 4}}d=v(d),M.isLoading||(!g||f(e(g))<2?(M.isLoading=!0,c.getScript(M.defaultBase+L+"/lib/js/emojione.min.js",function(){if(g=b.emojione,L=e(g),m=f(L),M.base=M.defaultBase+L+"/assets",d.sprite){var i=M.base+"/sprites/emojione.sprites.css";a.createStyleSheet?a.createStyleSheet(i):c("<link/>",{rel:"stylesheet",href:i}).appendTo("head")}for(;h.length;)h.shift().call();M.isLoading=!1})):(L=e(g),m=f(L),M.base=M.defaultBase+L+"/assets")),i(function(){d.useInternalCDN&&(g.imagePathPNG=M.base+"/png/",g.imagePathSVG=M.base+"/svg/",g.imagePathSVGSprites=M.base+"/sprites/emojione.sprites.svg",g.imageType=d.imageType),y=new RegExp("<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|("+g.unicodeRegexp+")","gi")})}function P(a,b){b=b.replace(/^@/,"");var d=a.id;f[d][b]&&(c.each(f[d][b],function(d,e){c.each(c.isArray(e[0])?e[0]:[e[0]],function(d,f){c(f).on(e[1],function(){var d=k.call(arguments),f=c.isFunction(e[2])?e[2].apply(a,[b].concat(d)):e[2];f&&o(a,b,[f].concat(d))})})}),f[d][b]=null)}var w,x,d=0,e={},f={},g=b.emojione,h=[],j="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==",k=[].slice,l="emojionearea",m=0,n="&#8203;",t=function(){return c.fn.emojioneArea&&c.fn.emojioneArea.defaults?c.fn.emojioneArea.defaults:{attributes:{dir:"ltr",spellcheck:!1,autocomplete:"off",autocorrect:"off",autocapitalize:"off"},placeholder:null,emojiPlaceholder:":smiley:",container:null,hideSource:!0,shortnames:!0,sprite:!0,pickerPosition:"top",filtersPosition:"top",hidePickerOnBlur:!0,buttonTitle:"Use the TAB key to insert emoji faster",tones:!0,tonesStyle:"bullet",inline:null,saveEmojisAs:"unicode",shortcuts:!0,autocomplete:!0,autocompleteTones:!1,standalone:!1,useInternalCDN:!0,imageType:"png",recentEmojis:!0,textcomplete:{maxCount:15,placement:null},filters:{tones:{title:"Diversity",emoji:"santa runner surfer swimmer lifter ear nose point_up_2 point_down point_left point_right punch wave ok_hand thumbsup thumbsdown clap open_hands boy girl man woman cop bride_with_veil person_with_blond_hair man_with_gua_pi_mao man_with_turban older_man grandma baby construction_worker princess angel information_desk_person guardsman dancer nail_care massage haircut muscle spy hand_splayed middle_finger vulcan no_good ok_woman bow raising_hand raised_hands person_frowning person_with_pouting_face pray rowboat bicyclist mountain_bicyclist walking bath metal point_up basketball_player fist raised_hand v writing_hand"},recent:{icon:"clock3",title:"Recent",emoji:""},smileys_people:{icon:"yum",title:"Smileys & People",emoji:"grinning grimacing grin joy smiley smile sweat_smile laughing innocent wink blush slight_smile upside_down relaxed yum relieved heart_eyes kissing_heart kissing kissing_smiling_eyes kissing_closed_eyes stuck_out_tongue_winking_eye stuck_out_tongue_closed_eyes stuck_out_tongue money_mouth nerd sunglasses hugging smirk no_mouth neutral_face expressionless unamused rolling_eyes thinking flushed disappointed worried angry rage pensive confused slight_frown frowning2 persevere confounded tired_face weary triumph open_mouth scream fearful cold_sweat hushed frowning anguished cry disappointed_relieved sleepy sweat sob dizzy_face astonished zipper_mouth mask thermometer_face head_bandage sleeping zzz poop smiling_imp imp japanese_ogre japanese_goblin skull ghost alien robot smiley_cat smile_cat joy_cat heart_eyes_cat smirk_cat kissing_cat scream_cat crying_cat_face pouting_cat raised_hands clap wave thumbsup thumbsdown punch fist v ok_hand raised_hand open_hands muscle pray point_up point_up_2 point_down point_left point_right middle_finger hand_splayed metal vulcan writing_hand nail_care lips tongue ear nose eye eyes bust_in_silhouette busts_in_silhouette speaking_head baby boy girl man woman person_with_blond_hair older_man older_woman man_with_gua_pi_mao man_with_turban cop construction_worker guardsman spy santa angel princess bride_with_veil walking runner dancer dancers couple two_men_holding_hands two_women_holding_hands bow information_desk_person no_good ok_woman raising_hand person_with_pouting_face person_frowning haircut massage couple_with_heart couple_ww couple_mm couplekiss kiss_ww kiss_mm family family_mwg family_mwgb family_mwbb family_mwgg family_wwb family_wwg family_wwgb family_wwbb family_wwgg family_mmb family_mmg family_mmgb family_mmbb family_mmgg womans_clothes shirt jeans necktie dress bikini kimono lipstick kiss footprints high_heel sandal boot mans_shoe athletic_shoe womans_hat tophat helmet_with_cross mortar_board crown school_satchel pouch purse handbag briefcase eyeglasses dark_sunglasses ring closed_umbrella"},animals_nature:{icon:"hamster",title:"Animals & Nature",emoji:"dog cat mouse hamster rabbit bear panda_face koala tiger lion_face cow pig pig_nose frog octopus monkey_face see_no_evil hear_no_evil speak_no_evil monkey chicken penguin bird baby_chick hatching_chick hatched_chick wolf boar horse unicorn bee bug snail beetle ant spider scorpion crab snake turtle tropical_fish fish blowfish dolphin whale whale2 crocodile leopard tiger2 water_buffalo ox cow2 dromedary_camel camel elephant goat ram sheep racehorse pig2 rat mouse2 rooster turkey dove dog2 poodle cat2 rabbit2 chipmunk feet dragon dragon_face cactus christmas_tree evergreen_tree deciduous_tree palm_tree seedling herb shamrock four_leaf_clover bamboo tanabata_tree leaves fallen_leaf maple_leaf ear_of_rice hibiscus sunflower rose tulip blossom cherry_blossom bouquet mushroom chestnut jack_o_lantern shell spider_web earth_americas earth_africa earth_asia full_moon waning_gibbous_moon last_quarter_moon waning_crescent_moon new_moon waxing_crescent_moon first_quarter_moon waxing_gibbous_moon new_moon_with_face full_moon_with_face first_quarter_moon_with_face last_quarter_moon_with_face sun_with_face crescent_moon star star2 dizzy sparkles comet sunny white_sun_small_cloud partly_sunny white_sun_cloud white_sun_rain_cloud cloud cloud_rain thunder_cloud_rain cloud_lightning zap fire boom snowflake cloud_snow snowman2 snowman wind_blowing_face dash cloud_tornado fog umbrella2 umbrella droplet sweat_drops ocean"},food_drink:{icon:"pizza",title:"Food & Drink",emoji:"green_apple apple pear tangerine lemon banana watermelon grapes strawberry melon cherries peach pineapple tomato eggplant hot_pepper corn sweet_potato honey_pot bread cheese poultry_leg meat_on_bone fried_shrimp egg hamburger fries hotdog pizza spaghetti taco burrito ramen stew fish_cake sushi bento curry rice_ball rice rice_cracker oden dango shaved_ice ice_cream icecream cake birthday custard candy lollipop chocolate_bar popcorn doughnut cookie beer beers wine_glass cocktail tropical_drink champagne sake tea coffee baby_bottle fork_and_knife fork_knife_plate"},activity:{icon:"basketball",title:"Activity",emoji:"soccer basketball football baseball tennis volleyball rugby_football 8ball golf golfer ping_pong badminton hockey field_hockey cricket ski skier snowboarder ice_skate bow_and_arrow fishing_pole_and_fish rowboat swimmer surfer bath basketball_player lifter bicyclist mountain_bicyclist horse_racing levitate trophy running_shirt_with_sash medal military_medal reminder_ribbon rosette ticket tickets performing_arts art circus_tent microphone headphones musical_score musical_keyboard saxophone trumpet guitar violin clapper video_game space_invader dart game_die slot_machine bowling"},travel_places:{icon:"rocket",title:"Travel & Places",emoji:"red_car taxi blue_car bus trolleybus race_car police_car ambulance fire_engine minibus truck articulated_lorry tractor motorcycle bike rotating_light oncoming_police_car oncoming_bus oncoming_automobile oncoming_taxi aerial_tramway mountain_cableway suspension_railway railway_car train monorail bullettrain_side bullettrain_front light_rail mountain_railway steam_locomotive train2 metro tram station helicopter airplane_small airplane airplane_departure airplane_arriving sailboat motorboat speedboat ferry cruise_ship rocket satellite_orbital seat anchor construction fuelpump busstop vertical_traffic_light traffic_light checkered_flag ship ferris_wheel roller_coaster carousel_horse construction_site foggy tokyo_tower factory fountain rice_scene mountain mountain_snow mount_fuji volcano japan camping tent park motorway railway_track sunrise sunrise_over_mountains desert beach island city_sunset city_dusk cityscape night_with_stars bridge_at_night milky_way stars sparkler fireworks rainbow homes european_castle japanese_castle stadium statue_of_liberty house house_with_garden house_abandoned office department_store post_office european_post_office hospital bank hotel convenience_store school love_hotel wedding classical_building church mosque synagogue kaaba shinto_shrine"},objects:{icon:"bulb",title:"Objects",emoji:"watch iphone calling computer keyboard desktop printer mouse_three_button trackball joystick compression minidisc floppy_disk cd dvd vhs camera camera_with_flash video_camera movie_camera projector film_frames telephone_receiver telephone pager fax tv radio microphone2 level_slider control_knobs stopwatch timer alarm_clock clock hourglass_flowing_sand hourglass satellite battery electric_plug bulb flashlight candle wastebasket oil money_with_wings dollar yen euro pound moneybag credit_card gem scales wrench hammer hammer_pick tools pick nut_and_bolt gear chains gun bomb knife dagger crossed_swords shield smoking skull_crossbones coffin urn amphora crystal_ball prayer_beads barber alembic telescope microscope hole pill syringe thermometer label bookmark toilet shower bathtub key key2 couch sleeping_accommodation bed door bellhop frame_photo map beach_umbrella moyai shopping_bags balloon flags ribbon gift confetti_ball tada dolls wind_chime crossed_flags izakaya_lantern envelope envelope_with_arrow incoming_envelope e-mail love_letter postbox mailbox_closed mailbox mailbox_with_mail mailbox_with_no_mail package postal_horn inbox_tray outbox_tray scroll page_with_curl bookmark_tabs bar_chart chart_with_upwards_trend chart_with_downwards_trend page_facing_up date calendar calendar_spiral card_index card_box ballot_box file_cabinet clipboard notepad_spiral file_folder open_file_folder dividers newspaper2 newspaper notebook closed_book green_book blue_book orange_book notebook_with_decorative_cover ledger books book link paperclip paperclips scissors triangular_ruler straight_ruler pushpin round_pushpin triangular_flag_on_post flag_white flag_black closed_lock_with_key lock unlock lock_with_ink_pen pen_ballpoint pen_fountain black_nib pencil pencil2 crayon paintbrush mag mag_right"},symbols:{icon:"heartpulse",title:"Symbols",emoji:"heart yellow_heart green_heart blue_heart purple_heart broken_heart heart_exclamation two_hearts revolving_hearts heartbeat heartpulse sparkling_heart cupid gift_heart heart_decoration peace cross star_and_crescent om_symbol wheel_of_dharma star_of_david six_pointed_star menorah yin_yang orthodox_cross place_of_worship ophiuchus aries taurus gemini cancer leo virgo libra scorpius sagittarius capricorn aquarius pisces id atom u7a7a u5272 radioactive biohazard mobile_phone_off vibration_mode u6709 u7121 u7533 u55b6 u6708 eight_pointed_black_star vs accept white_flower ideograph_advantage secret congratulations u5408 u6e80 u7981 a b ab cl o2 sos no_entry name_badge no_entry_sign x o anger hotsprings no_pedestrians do_not_litter no_bicycles non-potable_water underage no_mobile_phones exclamation grey_exclamation question grey_question bangbang interrobang 100 low_brightness high_brightness trident fleur-de-lis part_alternation_mark warning children_crossing beginner recycle u6307 chart sparkle eight_spoked_asterisk negative_squared_cross_mark white_check_mark diamond_shape_with_a_dot_inside cyclone loop globe_with_meridians m atm sa passport_control customs baggage_claim left_luggage wheelchair no_smoking wc parking potable_water mens womens baby_symbol restroom put_litter_in_its_place cinema signal_strength koko ng ok up cool new free zero one two three four five six seven eight nine ten 1234 arrow_forward pause_button play_pause stop_button record_button track_next track_previous fast_forward rewind twisted_rightwards_arrows repeat repeat_one arrow_backward arrow_up_small arrow_down_small arrow_double_up arrow_double_down arrow_right arrow_left arrow_up arrow_down arrow_upper_right arrow_lower_right arrow_lower_left arrow_upper_left arrow_up_down left_right_arrow arrows_counterclockwise arrow_right_hook leftwards_arrow_with_hook arrow_heading_up arrow_heading_down hash asterisk information_source abc abcd capital_abcd symbols musical_note notes wavy_dash curly_loop heavy_check_mark arrows_clockwise heavy_plus_sign heavy_minus_sign heavy_division_sign heavy_multiplication_x heavy_dollar_sign currency_exchange copyright registered tm end back on top soon ballot_box_with_check radio_button white_circle black_circle red_circle large_blue_circle small_orange_diamond small_blue_diamond large_orange_diamond large_blue_diamond small_red_triangle black_small_square white_small_square black_large_square white_large_square small_red_triangle_down black_medium_square white_medium_square black_medium_small_square white_medium_small_square black_square_button white_square_button speaker sound loud_sound mute mega loudspeaker bell no_bell black_joker mahjong spades clubs hearts diamonds flower_playing_cards thought_balloon anger_right speech_balloon clock1 clock2 clock3 clock4 clock5 clock6 clock7 clock8 clock9 clock10 clock11 clock12 clock130 clock230 clock330 clock430 clock530 clock630 clock730 clock830 clock930 clock1030 clock1130 clock1230 eye_in_speech_bubble"},flags:{icon:"flag_gb",title:"Flags",emoji:"ac af al dz ad ao ai ag ar am aw au at az bs bh bd bb by be bz bj bm bt bo ba bw br bn bg bf bi cv kh cm ca ky cf td flag_cl cn co km cg flag_cd cr hr cu cy cz dk dj dm do ec eg sv gq er ee et fk fo fj fi fr pf ga gm ge de gh gi gr gl gd gu gt gn gw gy ht hn hk hu is in flag_id ir iq ie il it ci jm jp je jo kz ke ki xk kw kg la lv lb ls lr ly li lt lu mo mk mg mw my mv ml mt mh mr mu mx fm md mc mn me ms ma mz mm na nr np nl nc nz ni ne flag_ng nu kp no om pk pw ps pa pg py pe ph pl pt pr qa ro ru rw sh kn lc vc ws sm st flag_sa sn rs sc sl sg sk si sb so za kr es lk sd sr sz se ch sy tw tj tz th tl tg to tt tn tr flag_tm flag_tm ug ua ae gb us vi uy uz vu va ve vn wf eh ye zm zw re ax ta io bq cx cc gg im yt nf pn bl pm gs tk bv hm sj um ic ea cp dg as aq vg ck cw eu gf tf gp mq mp sx ss tc "}}}};b.getSelection&&a.createRange?(w=function(a){var c=b.getSelection&&b.getSelection();if(c&&c.rangeCount>0){var d=c.getRangeAt(0),e=d.cloneRange();return e.selectNodeContents(a),e.setEnd(d.startContainer,d.startOffset),e.toString().length}},x=function(c,d){var e=0,f=a.createRange();f.setStart(c,0),f.collapse(!0);for(var h,g=[c],i=!1,j=!1;!j&&(h=g.pop());)if(3==h.nodeType){var k=e+h.length;!i&&d>=e&&d<=k&&(f.setStart(h,d-e),f.setEnd(h,d-e),j=!0),e=k}else for(var l=h.childNodes.length;l--;)g.push(h.childNodes[l]);d=b.getSelection(),d.removeAllRanges(),d.addRange(f)}):a.selection&&a.body.createTextRange&&(w=function(b){var c=a.selection.createRange(),d=a.body.createTextRange();d.moveToElementText(b),d.setEndPoint("EndToStart",c);var e=d.text.length;return e+c.text.length},x=function(b,c){var d=a.body.createTextRange();d.moveToElementText(b),d.collapse(!0),d.moveEnd("character",c),d.moveStart("character",c),d.select()});var y,L=b.emojioneVersion||"2.1.4",M={defaultBase:"https://cdnjs.cloudflare.com/ajax/libs/emojione/",base:null,isLoading:!1},O=function(a,b){var c=this;N(b),e[c.id=++d]={},f[c.id]={},i(function(){K(c,a,b)})};O.prototype.on=function(a,b){if(a&&c.isFunction(b)){var d=this;c.each(a.toLowerCase().split(" "),function(a,c){P(d,c),(e[d.id][c]||(e[d.id][c]=[])).push(b)})}return this},O.prototype.off=function(a,b){if(a){var d=this.id;c.each(a.toLowerCase().replace(/_/g,".").split(" "),function(a,f){e[d][f]&&!/^@/.test(f)&&(b?c.each(e[d][f],function(a,c){c===b&&(e[d][f]=e[d][f].splice(a,1))}):e[d][f]=[])})}return this},O.prototype.trigger=function(){var a=k.call(arguments),b=[this].concat(a.slice(0,1));return b.push(a.slice(1)),o.apply(this,b)},O.prototype.setFocus=function(){var a=this;return i(function(){a.editor.focus()}),a},O.prototype.setText=function(a){var b=this;return i(function(){b.editor.html(A(a,b)),b.content=b.editor.html(),o(b,"change",[b.editor]),C.apply(b)}),b},O.prototype.getText=function(){return B(this.editor.html(),this)},O.prototype.showPicker=function(){var a=this;return a._sh_timer&&b.clearTimeout(a._sh_timer),a.picker.removeClass("hidden"),a._sh_timer=b.setTimeout(function(){a.button.addClass("active")},50),o(a,"picker.show",[a.picker]),a},O.prototype.hidePicker=function(){var a=this;return a._sh_timer&&b.clearTimeout(a._sh_timer),a.button.removeClass("active"),a._sh_timer=b.setTimeout(function(){a.picker.addClass("hidden")},500),o(a,"picker.hide",[a.picker]),a},c.fn.emojioneArea=function(a){return this.each(function(){return this.emojioneArea?this.emojioneArea:(c.data(this,"emojioneArea",this.emojioneArea=new O(c(this),a)),this.emojioneArea)})},c.fn.emojioneArea.defaults=t()}(document,window,jQuery);

data/app/assets/javascripts/chat/messages.coffee

@@ -0,0 +1,44 @@
+event =
+  if typeof(Turbolinks) == "undefined"
+    'DOMContentLoaded'
+  else
+    'turbolinks:load'
+
+document.addEventListener event, ->
+  $('.chat__launch').click ->
+    $('#chat').addClass('active')
+    show_chats()
+    return
+
+  $('.chat__close').click ->
+    $('#chat').removeClass('active')
+    return
+
+  $('.chat__settings').click ->
+    show_chats()
+    return
+
+  $(document).on 'click', '.chat__start-new', (e) ->
+    e.preventDefault()
+    $('.chat__list').css('display', 'none')
+    $('.new_conversation').css('display', 'flex')
+    return
+
+  $(document).on 'click', '.chat__insert-image', ->
+    $(".new_message input[type='file']").click()
+    return
+
+  $(document).on 'keyup', '.new_message .emojionearea-editor', (e) ->
+    if e.keyCode == 13 && !e.shiftKey
+      $('.new_message textarea').val($('.new_message .emojionearea-editor').html())
+      $('.new_message').submit()
+      $('#message_text').prop('value', '')
+      el = $('.new_message textarea').emojioneArea()
+      el[0].emojioneArea.setText('')
+    return
+
+  show_chats = ->
+    $('.chat__list').css('display', 'flex')
+    $('.current_chat').css('display', 'none')
+    $('.new_conversation').css('display', 'none')
+    return

data/app/assets/stylesheets/chat.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require material_icons
+ *= require_tree ./chat
+ */

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

@@ -0,0 +1,25 @@
+@import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
+
+#chat
+  font-family: "Lato" !important
+  letter-spacing: 1.5px !important
+  width: 375px
+  height: 100%
+  position: fixed
+  right: 0
+  top: 0
+  opacity: 0
+  background: rgb(245, 245, 245)
+  visibility: hidden
+  transform: scale(0)
+  transform-origin: bottom right
+  transition: transform .3s ease-in-out, opacity .1s linear .15s
+  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)
+  @media (max-width: 450px)
+    width: 100%
+  &.active
+    visibility: visible
+    opacity: 1
+    transform: scale(1)
+  .chat__flex
+    flex: 1

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

@@ -0,0 +1,80 @@
+.new_conversation
+  [type="checkbox"]:not(:checked), [type="checkbox"]:checked
+    position: absolute
+    left: -9999px
+    opacity: 0
+
+  [type="checkbox"] + label
+    position: relative
+    padding-left: 35px
+    cursor: pointer
+    display: inline-block
+    height: 25px
+    line-height: 25px
+    font-size: 1rem
+    -webkit-user-select: none
+    -moz-user-select: none
+    -khtml-user-select: none
+    -ms-user-select: none
+
+  [type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after
+    content: ''
+    position: absolute
+    top: -2px
+    left: 0
+    width: 21px
+    height: 21px
+    z-index: 0
+    border: 2px solid #5a5a5a
+    border-radius: 1px
+    margin-top: 2px
+    transition: .2s
+
+  [type="checkbox"]:not(.filled-in) + label:after
+    border: 0
+    -webkit-transform: scale(0)
+    transform: scale(0)
+
+  [type="checkbox"]:not(:checked):disabled + label:before
+    border: none
+    background-color: rgba(0, 0, 0, 0.26)
+
+  [type="checkbox"]:checked + label:before
+    top: -8px
+    left: -5px
+    width: 14px
+    height: 26px
+    border-top: 2px solid transparent
+    border-left: 2px solid transparent
+    border-right: 2px solid #26a69a
+    border-bottom: 2px solid #26a69a
+    -webkit-transform: rotate(40deg)
+    transform: rotate(40deg)
+    -webkit-backface-visibility: hidden
+    backface-visibility: hidden
+    -webkit-transform-origin: 100% 100%
+    transform-origin: 100% 100%
+
+  [type="checkbox"]:checked:disabled + label:before
+    border-right: 2px solid rgba(0, 0, 0, 0.26)
+    border-bottom: 2px solid rgba(0, 0, 0, 0.26)
+
+  [type="checkbox"]:indeterminate + label:before
+    top: -11px
+    left: -12px
+    width: 10px
+    height: 22px
+    border-top: none
+    border-left: none
+    border-right: 2px solid #e50000
+    border-bottom: none
+    -webkit-transform: rotate(90deg)
+    transform: rotate(90deg)
+    -webkit-backface-visibility: hidden
+    backface-visibility: hidden
+    -webkit-transform-origin: 100% 100%
+    transform-origin: 100% 100%
+
+  [type="checkbox"]:indeterminate:disabled + label:before
+    border-right: 2px solid rgba(0, 0, 0, 0.26)
+    background-color: transparent