Add two toolbar buttons for the send message textarea

converse.css

@@ -161,21 +161,6 @@ ul.participant-list li.moderator {
     line-height: 1.3em;
 }
 
-.chat-textarea {
-    border: 0;
-    height: 50px;
-}
-
-.chat-textarea-chatbox-selected {
-    border: 1px solid #578308;
-    margin:0;
-}
-
-.chat-textarea-chatroom-selected {
-    border: 2px solid #2D617A;
-    margin:0;
-}
-
 .chat-info {
     color:#666666;
 }
@@ -752,11 +737,38 @@ form.sendXMPPMessage {
     height: 54px;
 }
 
+form.sendXMPPMessage ul.chat-toolbar {
+    float: right;
+    padding: 0;
+}
+
+form.sendXMPPMessage ul.chat-toolbar li {
+    list-style: none;
+    padding: 2px 0 2px 2px;
+}
+
 form#set-custom-xmpp-status {
     float: left;
     padding: 0;
 }
 
+.chat-textarea {
+    border: 0;
+    height: 50px;
+    width: 160px;
+}
+
+.chat-textarea-chatbox-selected {
+    border: 1px solid #578308;
+    margin:0;
+}
+
+.chat-textarea-chatroom-selected {
+    border: 2px solid #2D617A;
+    margin:0;
+}
+
+
 #set-custom-xmpp-status button {
     padding: 1px 2px 1px 1px;
 }

index.html

@@ -6,8 +6,7 @@
     <meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
     <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
     <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
-    <script src="converse.min.js"></script>
-    <!-- For development <script data-main="main" src="components/requirejs/require.js"></script> -->
+    <script data-main="main" src="components/requirejs/require.js"></script>
     <title>Converse.js</title>
 </head>
 
@@ -168,7 +167,7 @@
             prebind: false,
             show_controlbox_by_default: true,
             xhr_user_search: false,
-            debug: false
+            debug: true
         });
     });
 </script>

mockup.html

@@ -205,7 +205,11 @@
             </div>
         </div>
         <form class="sendXMPPMessage" action="" method="post">
-            <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
+            <ul class="chat-toolbar">
+                <li class="icon-happy"></li>
+                <li class="icon-unlocked"></li>
+            </ul>
+            <textarea style="float: left" type="text" class="chat-textarea" placeholder="Personal message"></textarea>
         </form>
     </div>