Basic message forwarding.

src/widgets/chat-message.jsx

@@ -76,8 +76,10 @@ class BaseChatMessage extends React.PureComponent {
         this.props.received > Tinode.MESSAGE_STATUS_FAILED &&
         this.props.received < Tinode.MESSAGE_STATUS_DEL_RANGE) {
       menuItems.push('menu_item_reply');
+      menuItems.push('menu_item_forward');
     }
     this.props.showContextMenu({ seq: this.props.seq, content: this.props.content,
+                                 userFrom: this.props.userFrom, userName: this.props.userName,
                                  y: e.pageY, x: e.pageX, pickReply: this.props.pickReply }, menuItems);
   }
 
@@ -103,7 +105,7 @@ class BaseChatMessage extends React.PureComponent {
       (this.props.sequence + ' ' + (this.props.response ? 'left' : 'right'));
     const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
     const avatar = this.props.deleted ? null : (this.props.userAvatar || true);
-    const fullDisplay = (this.props.userFrom && this.props.response && !this.props.deleted &&
+    const fullDisplay = (this.props.isGroup && this.props.response && !this.props.deleted &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
     let content = this.props.content;
@@ -143,7 +145,7 @@ class BaseChatMessage extends React.PureComponent {
 
     return (
       <li ref={this.props.innerRef} className={sideClass}>
-        {this.props.userFrom && this.props.response ?
+        {this.props.isGroup && this.props.response ?
           <div className="avatar-box">
             {fullDisplay ?
               <LetterTile

src/widgets/context-menu.jsx

@@ -50,6 +50,11 @@ const messages = defineMessages({
     defaultMessage: 'Reply',
     description: 'Reply to message'
   },
+  forward: {
+    id: 'menu_item_forward',
+    defaultMessage: 'Forward',
+    description: 'Forward message'
+  },
   topic_delete: {
     id: 'menu_item_delete_topic',
     defaultMessage: 'Delete',
@@ -183,6 +188,13 @@ class ContextMenu extends React.Component {
           return this.replyToMessage(params, errorHandler);
         }
       },
+      'menu_item_forward': {
+        id: 'menu_item_forward',
+        title: formatMessage(messages.forward),
+        handler: (params, errorHandler) => {
+          return this.forwardMessage(params, errorHandler);
+        }
+      },
       'topic_unmute': {
         id: 'topic_unmute',
         title: formatMessage(messages.unmute),
@@ -428,7 +440,13 @@ class ContextMenu extends React.Component {
   }
 
   replyToMessage(params, errorHandler) {
-    params.pickReply(params.seq, params.content, errorHandler);
+    params.pickReply(params.seq, params.content, params.userFrom, params.userName, errorHandler);
+  }
+
+  forwardMessage(params, errorHandler) {
+    //params.pickReply({ seq: params.seq, content: params.content });
+    //this.props.
+    console.log('forwarding msg ', params);
   }
 
   render() {

src/widgets/forward-menu.jsx

@@ -0,0 +1,97 @@
+// Forward Menu: message forwarding popup/dropdown menu.
+import React from 'react';
+
+import Tinode from 'tinode-sdk';
+
+import ContactList from './contact-list.jsx';
+import SearchContacts from './search-contacts.jsx';
+
+import HashNavigation from '../lib/navigation.js';
+import { REM_SIZE } from '../config.js';
+
+export default class ForwardMenu extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.selfRef = React.createRef();
+    this.handlePageClick = this.handlePageClick.bind(this);
+    this.handleEscapeKey = this.handleEscapeKey.bind(this);
+
+    this.handleSearchContacts = this.handleSearchContacts.bind(this);
+    this.handleContactSelected = this.handleContactSelected.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handlePageClick, false);
+    document.addEventListener('keyup', this.handleEscapeKey, false);
+
+    this.props.onInitFind();
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handlePageClick, false);
+    document.removeEventListener('keyup', this.handleEscapeKey, false);
+  }
+
+  handlePageClick(e) {
+    if (this.selfRef.current.contains(e.target)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    // Not forwarding the message.
+    this.props.hide(false);
+  }
+
+  handleEscapeKey(e) {
+    if (e.keyCode === 27) {
+      // Not forwarding the message.
+      this.props.hide(false);
+    }
+  }
+
+  handleSearchContacts(query) {
+    this.props.onSearchContacts(query);
+  }
+
+  handleContactSelected(uid) {
+    this.props.onCreateTopic(uid);
+    this.props.hide(true);
+  }
+
+  render() {
+    // Ensure that menu is inside the app-container.
+    const hSize = 20 * REM_SIZE;
+    const vSize = REM_SIZE * (0.7 + this.props.contacts.length * 3);
+    const left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?
+        (this.props.clickAt.x - this.props.bounds.left - hSize) :
+        (this.props.clickAt.x - this.props.bounds.left);
+    const top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?
+        (this.props.clickAt.y - this.props.bounds.top - vSize) :
+        (this.props.clickAt.y - this.props.bounds.top);
+
+    const style = {
+      left: left + 'px',
+      top: top + 'px',
+      maxWidth: hSize + 'px'
+    };
+
+    return (
+      <div className="forward-menu" style={style} ref={this.selfRef}>
+        <div className="flex-column">
+          <SearchContacts
+            onSearchContacts={this.handleSearchContacts} />
+          <ContactList
+            tinode={this.props.tinode}
+            contacts={this.props.searchResults}
+            myUserId={this.props.myUserId}
+            emptyListMessage={null}
+            showOnline={false}
+            showUnread={false}
+            showContextMenu={false}
+            onTopicSelected={this.handleContactSelected} />
+        </div>
+      </div>
+    );
+  }
+}