add source maps, forms rendered ok now

css/base.css

@@ -548,6 +548,32 @@ table.permission-editor td.checkbox {
   flex-shrink: 0;
 }
 
+.bot-form, .bot-form.vlist {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid #999;
+  border-radius: 0.25rem;
+  background-color: #eef;
+}
+
+.bot-form.hlist {
+  flex-direction: column;
+}
+
+.bot-form button {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #FFF;
+  color: #2196f3; /* blue 500 */
+}
+
+.bot-form  button:focus, button:hover, button:active {
+  outline: 0;
+  background-color: #e3f2fd;
+}
+
 #side-caption-panel {
   background-color: #2196f3; /* blue 500 */
   color: #bbdefb; /* light-blue 100 */

src/views/contacts-view.jsx

@@ -1,21 +1,12 @@
 /* ContactsView holds all contacts-related stuff */
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { FormattedHTMLMessage } from 'react-intl';
 
 import ContactList from '../widgets/contact-list.jsx';
 
 import { updateFavicon } from '../lib/utils.js';
 
-// Panel titles for translation.
-const messages = defineMessages({
-  'contacts_not_found': {
-    id: 'contacts_not_found',
-    description: 'HTML message shown in ContactList when no contacts are found',
-    defaultMessage: 'You have no chats<br />¯\\\\_(ツ)_/¯'
-  }
-});
-
-class ContactsView extends React.Component {
+export default class ContactsView extends React.Component {
   constructor(props) {
     super(props);
 
@@ -39,20 +30,21 @@ class ContactsView extends React.Component {
   }
 
   render() {
-    const {formatHTMLMessage} = this.props.intl;
     return (
-      <ContactList
+      <FormattedHTMLMessage id="contacts_not_found"
+        defaultMesage="You have no chats<br />¯\\\\_(ツ)_/¯"
+        description="HTML message shown in ContactList when no contacts are found">{
+        (no_contacts) => <ContactList
           connected={this.props.connected}
           contacts={this.state.contactList}
-        emptyListMessage={<span>{formatHTMLMessage(messages.contacts_not_found)}</span>}
+          emptyListMessage={no_contacts}
           topicSelected={this.props.topicSelected}
           myUserId={this.props.myUserId}
           showOnline={true}
           showUnread={true}
           onTopicSelected={this.props.onTopicSelected}
           showContextMenu={this.props.showContextMenu} />
+      }</FormattedHTMLMessage>
     );
   }
 };
-
-export default injectIntl(ContactsView);

src/widgets/chat-message.jsx

@@ -7,9 +7,6 @@ import Attachment from './attachment.jsx';
 import LetterTile from './letter-tile.jsx';
 import ReceivedMarker from './received-marker.jsx'
 
-import { REM_SIZE } from '../config.js';
-import { fitImageSize } from '../lib/blob-helpers.js';
-
 export default class ChatMessage extends React.Component {
   constructor(props) {
     super(props);
@@ -23,6 +20,7 @@ export default class ChatMessage extends React.Component {
     }
 
     this.handlePreviewImage = this.handlePreviewImage.bind(this);
+    this.handleFormButtonClick = this.handleFormButtonClick.bind(this);
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleCancelUpload = this.handleCancelUpload.bind(this);
   }
@@ -39,6 +37,11 @@ export default class ChatMessage extends React.Component {
     });
   }
 
+  handleFormButtonClick(e) {
+    e.preventDefault();
+    console.log(e.target);
+  }
+
   handleContextClick(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -54,36 +57,15 @@ export default class ChatMessage extends React.Component {
   }
 
   render() {
-    let elementKey = 0;
-    const formatter = function(style, data, values) {
-      elementKey += 1;
-      let el = Drafty.tagName(style);
-      if (el) {
-        let attr = Drafty.attrValue(style, data) || {};
-        attr.key = elementKey;
-        if (style == 'IM') {
-          // Additional processing for images
-          let dim = fitImageSize(data.width, data.height,
-            Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false);
-          attr.className = 'inline-image';
-          attr.style = dim ? { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' } : null;
-          attr.onClick = this.handlePreviewImage;
-        }
-        return React.createElement(el, attr, values);
-      } else {
-        return values;
-      }
-    };
-
-    var sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
-    var bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ?
+    const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
+    const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ?
       'bubble tip' : 'bubble';
-    var avatar = this.props.userAvatar || true;
-    var fullDisplay = (this.props.userFrom && this.props.response &&
+    const avatar = this.props.userAvatar || true;
+    const fullDisplay = (this.props.userFrom && this.props.response &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
-    var content = this.props.content;
-    var attachments = [];
+    let content = this.props.content;
+    const attachments = [];
     if (this.props.mimeType == Drafty.getContentType()) {
       Drafty.attachments(content, function(att, i) {
         attachments.push(<Attachment
@@ -96,7 +78,7 @@ export default class ChatMessage extends React.Component {
           onError={this.props.onError}
           key={i} />);
       }, this);
-      content = React.createElement('span', null, Drafty.format(content, formatter, this));
+      content = React.createElement('span', null, Drafty.format(content, draftyFormatter, this));
     } else if (typeof content != 'string') {
       content = <span><i className="material-icons">error_outline</i> <i>
         <FormattedMessage id="invalid_content"
@@ -137,3 +119,38 @@ export default class ChatMessage extends React.Component {
     );
   }
 };
+
+// Convert Drafty object to a tree of React elements.
+import { REM_SIZE } from '../config.js';
+import { fitImageSize } from '../lib/blob-helpers.js';
+
+function draftyFormatter(style, data, values, key) {
+  let el = Drafty.tagName(style);
+  if (el) {
+    let attr = Drafty.attrValue(style, data) || {};
+    attr.key = key;
+    switch (style) {
+      case 'IM':
+        // Additional processing for images
+        if (data) {
+          attr.className = 'inline-image';
+          attr.onClick = this.handlePreviewImage;
+          let dim = fitImageSize(data.width, data.height,
+            Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false);
+          attr.style = dim ? { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' } : null;
+        }
+        break;
+      case 'BN':
+        // Button
+        attr.onClick = this.handleFormButtonClick;
+        break;
+      case 'FM':
+        // Form
+        attr.className = 'bot-form' + ((data && data.layout) ? ' ' + data.layout : '');
+        break;
+    }
+    return React.createElement(el, attr, values);
+  } else {
+    return values;
+  }
+};

webpack.config.js

@@ -4,6 +4,7 @@ module.exports = config = {
   entry: [
     './src/index.js',
   ],
+  devtool: 'source-map',
   module: {
     rules: [
       {