Add hint buttons to messages (like Telegram does)

res/css/_components.scss

@@ -68,6 +68,7 @@
 @import "./views/login/_InteractiveAuthEntryComponents.scss";
 @import "./views/login/_ServerConfig.scss";
 @import "./views/messages/_DateSeparator.scss";
+@import "./views/messages/_HintButton.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";

res/css/views/messages/_HintButton.scss

@@ -0,0 +1,27 @@
+.mx_HintsContainer {
+    padding-top: 5pt;
+    padding-bottom: 5pt;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+
+.mx_HintButton {
+    min-width: 16%;
+    max-width: 46%;
+    margin: 1%;
+    padding: 1%;
+    background: #76cfa6;
+    color: #3b4d45;
+    border-radius: 5px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.mx_HintButton img {
+    display: block;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+    float: left;
+}

src/components/views/messages/HintButton.js

@@ -0,0 +1,56 @@
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import * as HtmlUtils from '../../../HtmlUtils';
+
+
+export default class HintButton extends React.Component {
+
+    static propTypes = {
+        mxEvent: PropTypes.object.isRequired, // event with hints
+        hint: PropTypes.any
+    }
+
+    constructor(props) {
+        super(props);
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick() {
+        const client = MatrixClientPeg.get();
+        let txtToSend, msgType;
+        txtToSend = this.props.hint.reply ? this.props.hint.reply : this.props.hint.body;
+        msgType = this.props.hint.replynotify ? "m.notice" : "m.text";
+        client.sendMessage(this.props.mxEvent.getRoomId(), {body:txtToSend,  msgtype: msgType});
+    }
+
+    render() {
+        const client = MatrixClientPeg.get();
+        const hint = this.props.hint;
+        let body;
+        let img;
+        let url;
+        if(hint.formatted_body){
+            body = HtmlUtils.bodyToHtml(hint)
+        }
+        else if(hint.body) {
+            body = hint.body
+        }
+        if(hint.img){
+            if (hint.img.startsWith("mxc://")) {
+                url = client.mxcUrlToHttp(hint.img)
+                img = <img src={url}/>
+            }
+            else if (hint.img.startsWith("data:")) {
+                img = <img src={hint.img}/>
+            }
+        }
+
+        return (
+            <div className="mx_HintButton" onClick={this.onClick}>{img}{body}</div>
+        )
+    }
+}

src/components/views/messages/TextualBody.js

@@ -431,6 +431,7 @@ module.exports = React.createClass({
 
     render: function() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
+        const HintButton = sdk.getComponent('messages.HintButton');
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
 
@@ -459,7 +460,16 @@ module.exports = React.createClass({
                             onWidgetLoad={this.props.onWidgetLoad} />;
             });
         }
-
+
+        let hints;
+        if(content.hints && content.hints.length > 0){
+            hints = content.hints.map((hint)=> {
+                return <HintButton
+                    mxEvent={this.props.mxEvent}
+                    hint={hint} />;
+            })
+        }
+
         switch (content.msgtype) {
             case "m.emote":
                 const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
@@ -475,6 +485,7 @@ module.exports = React.createClass({
                         &nbsp;
                         { body }
                         { widgets }
+                        <div className="mx_HintsContainer">{ hints }</div>
                     </span>
                 );
             case "m.notice":
@@ -489,6 +500,7 @@ module.exports = React.createClass({
                     <span ref="content" className="mx_MTextBody mx_EventTile_content">
                         { body }
                         { widgets }
+                        <div className="mx_HintsContainer">{ hints }</div>
                     </span>
                 );
         }