fixes

css/base.css

@@ -1546,7 +1546,7 @@ img.channel {
   margin-bottom: 0.5rem;
 }
 
-.chat-box .bubble {
+.bubble {
   position: relative;
   display: flex;
   max-width: 36rem;
@@ -1559,6 +1559,23 @@ img.channel {
   box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12);
 }
 
+/*
+NEW BUBBLE TIP STYLE 
+
+.left .bubble .tip::before {
+  content: ' ';
+  position: absolute;
+  width: 0.8rem;
+  height: 0.8rem;
+  left: -0.8rem;
+  bottom: 0;
+  background-color: inherit;
+  clip-path: polygon(100% 0, 0 110%, 100% 110%);
+  box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
+  border-bottom-left-radius: 0.3rem;
+}
+*/
+
 .chat-box li.single {
   margin-top: 0.25rem;
   margin-bottom: 0.75rem;
@@ -1579,17 +1596,25 @@ img.channel {
   margin-bottom: 0.75rem;
 }
 
-.chat-box .left .bubble {
+.left .bubble {
   background-color: #c5e1a5;
   margin-right: 0.5rem;
 }
 
-.chat-box .right .bubble {
+.left .bubble .tip {
+  border-bottom-left-radius: 0;
+}
+
+.right .bubble {
   background-color: #fafafa;
   margin-left: 1.75rem;
 }
 
-.chat-box .center .bubble {
+.right .bubble .tip {
+  border-bottom-right-radius: 0;
+}
+
+.center .bubble {
   background-color: #e3f2fd;
   padding: 0.75rem 0.75rem 0.5rem 0.75rem;
 }
@@ -1642,11 +1667,11 @@ img.channel {
 }
 
 /* Message text + timestamp and delivery marker */
-.chat-box .bubble div.content-meta {
+.bubble div.content-meta {
   width: 100%;
 }
 
-.chat-box .bubble div.message-content {
+.bubble div.message-content {
   position: relative;
   color: #212121;
   margin: 0;
@@ -1658,7 +1683,7 @@ img.channel {
 
 /* The timestamp is a floating element. Need to ensure div.message-content is expanded
  * to accomodate it. It's usually called clearfix. */
-.chat-box .bubble div.message-content:after {
+.bubble div.message-content:after {
   content: ".";
   display: block;
   height: 0;

src/views/messages-view.jsx

@@ -93,6 +93,7 @@ class MessagesView extends React.Component {
 
     this.leave = this.leave.bind(this);
     this.sendMessage = this.sendMessage.bind(this);
+    this.retrySend = this.retrySend.bind(this);
     this.sendImageAttachment = this.sendImageAttachment.bind(this);
     this.sendFileAttachment = this.sendFileAttachment.bind(this);
     this.sendKeyPress = this.sendKeyPress.bind(this);
@@ -365,7 +366,7 @@ class MessagesView extends React.Component {
         // If there are unsent messages, try sending them now.
         topic.queuedMessages((pub) => {
           if (!pub._sending && topic.isSubscribed()) {
-            this.sendMessage(pub);
+            this.retrySend(pub);
           }
         });
       })
@@ -684,6 +685,11 @@ class MessagesView extends React.Component {
     this.props.sendMessage(msg, uploadCompletionPromise, uploader, head);
   }
 
+  // Retry sending a message.
+  retrySend(pub) {
+    this.props.sendMessage(pub.content, undefined, undefined, pub.head);
+  }
+
   // Send attachment as Drafty message:
   // - if file is too large, upload it and send a s link.
   // - if file is small enough, just send it in-band.
@@ -1315,6 +1321,8 @@ function draftyFormatter(style, data, values, key) {
             el = UploadingImage;
           }
         }
+        // Image element cannot have content.
+        values = null;
         break;
       case 'BN':
         // Button

umd/index.dev.js

@@ -4185,6 +4185,7 @@ function draftyFormatter(style, data, values, key) {
           }
         }
 
+        values = null;
         break;
 
       case 'BN':