new drafty formatting seems to work as expected

css/base.css

@@ -548,38 +548,19 @@ table.permission-editor td.checkbox {
   flex-shrink: 0;
 }
 
-.bot-form, .bot-form.vlist {
+.bot-form {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border: 1px solid #ccc;
-  border-radius: 0.25rem;
-  background-color: #eee;
   min-width: 8rem;
-}
-.bot-form.hlist {
-  flex-direction: row;
+  line-height: 2rem;
 }
 .bot-form div {
   min-height: 2rem;
   vertical-align: middle;
 }
-/* Nested bot forms should have not border */
-.bot-form .bot-form {
-  border: none;
-}
-
-/*
-Form element with non-interactive content
-needs padding.
-*/
-.bot-form div.dft {
-  padding: 0.25rem 1rem;
-  min-height: 2rem;
-  vertical-align: middle;
-}
-
 .bot-form button {
+  display: inline-block;
   margin: 0;
   width: 100%;
   background-color: #eef;
@@ -589,7 +570,9 @@ needs padding.
   height: 2rem;
   line-height: 2rem;
 }
-
+.bot-form > div > button {
+  width: auto;
+}
 .bot-form button:focus, button:hover, button:active {
   outline: 0;
   background-color: #e3f2fd;

src/widgets/chat-message.jsx

@@ -163,15 +163,16 @@ function draftyFormatter(style, data, values, key) {
       case 'BN':
         // Button
         attr.onClick = this.handleFormButtonClick;
+        // Get text which will be sent back when the button is clicked.
+        attr['data-title'] = (React.Children.map(values, (child) => {return child;}) || [attr.name]).join('');
         break;
       case 'FM':
         // Form
-        attr.className = 'bot-form' + ((data && data.layout) ? ' ' + data.layout : '');
+        attr.className = 'bot-form';
         // console.log(data, attr);
         break;
       case 'FE':
         // Form element formatting is dependent on element content.
-        attr.className = data && data.dftp ? data.dftp : '';
         break;
     }
     return React.createElement(el, attr, values);