widget for showing pinned messages (wip)

css/base.css

@@ -1387,6 +1387,7 @@ img.channel {
 #topic-users {
   margin-left: auto;
   margin-right: 1rem;
+  width: min-content;
 }
 
 #topic-users .avatar-box {
@@ -3020,6 +3021,70 @@ ul.tabbar li.active > a {
   color: #666C;
 }
 
+/* Pinned messages */
+#pinned-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-left: auto;
+  margin-right: 1rem;
+}
+
+.pinned {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0.15rem 0.5rem 0.25rem 0.5rem;
+  background-color: #fafafa;
+  background-position: center;
+  line-height: 1.5em;
+  font-weight: lighter;
+  border-radius: 0 0.25rem 0.25rem 0;
+  color: #666;
+  height: 100%;
+  width: 100%;
+  min-width: 24rem;
+  cursor: pointer;
+  transition: background 0.8s;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.pinned:active {
+  background-color: #bdd8f7;
+  background-size: 200%;
+  transition: background 0s;
+}
+
+
+.pinned-scroll {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 0.25rem 0 0 0.25rem;
+  background-color: #eeee;
+  justify-content: space-evenly;
+  height: 100%;
+  padding: 0.1rem;
+  margin-left: 0.35rem;
+}
+
+.pinned-scroll .dot {
+  width: 0.3rem;
+  height: 0.3rem;
+  border-radius: 50%;
+  background-color: #999;
+}
+
+.pinned-scroll .adot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background-color: #039be5;
+}
+
 /*
  Drag-and-drop area.
  */

src/lib/blob-helpers.js

@@ -227,7 +227,7 @@ export function filePasted(event, onImageSuccess, onAttachmentSuccess, onError)
 
 // Get mime type from data URL header.
 export function getMimeType(header) {
-  var mime = /^data:(image\/[-+a-z0-9.]+);base64/.exec(header);
+  const mime = /^data:(image\/[-+a-z0-9.]+);base64/.exec(header);
   return (mime && mime.length > 1) ? mime[1] : null;
 }
 

src/views/contacts-view.jsx

@@ -27,7 +27,7 @@ export default class ContactsView extends React.Component {
     const contacts = [];
     let unreadThreads = 0;
     let archivedCount = 0;
-    props.chatList.map((c) => {
+    props.chatList.forEach(c => {
       const blocked = c.acs && !c.acs.isJoiner();
       // Show only blocked contacts only when props.blocked == true.
       if (blocked && props.blocked) {

src/views/messages-view.jsx

@@ -17,6 +17,7 @@ import LetterTile from '../widgets/letter-tile.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import LogoView from './logo-view.jsx';
 import MetaMessage from '../widgets/meta-message.jsx';
+import PinnedMessages from '../widgets/pinned-messages.jsx';
 import SendMessage from '../widgets/send-message.jsx';
 import VideoPreview from '../widgets/video-preview.jsx';
 
@@ -145,6 +146,7 @@ class MessagesView extends React.Component {
     this.handleEditMessage = this.handleEditMessage.bind(this);
     this.handleCancelReply = this.handleCancelReply.bind(this);
     this.handleQuoteClick = this.handleQuoteClick.bind(this);
+    this.handleUnpinMessage = this.handleUnpinMessage.bind(this);
     this.handleCallHangup = this.handleCallHangup.bind(this);
 
     this.isDragEnabled = this.isDragEnabled.bind(this);
@@ -235,7 +237,7 @@ class MessagesView extends React.Component {
         topic.onMetaDesc = this.handleDescChange;
         topic.onSubsUpdated = this.handleSubsUpdated;
         topic.onPres = this.handleSubsUpdated;
-        topic.onAux = this.handleAuxUpdate;
+        topic.onAuxUpdated = this.handleAuxUpdate;
       }
     }
 
@@ -445,7 +447,7 @@ class MessagesView extends React.Component {
 
     // Don't request the tags. They are useless unless the user
     // is the owner and is editing the topic.
-    let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
+    let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub().withAux();
     if (this.state.isReader || newTopic) {
       // Reading is either permitted or we don't know because it's a new topic. Ask for messages.
       getQuery = getQuery.withLaterData(MESSAGES_PAGE);
@@ -516,6 +518,7 @@ class MessagesView extends React.Component {
           oldTopic.onMetaDesc = undefined;
           oldTopic.onSubsUpdated = undefined;
           oldTopic.onPres = undefined;
+          oldTopic.onAuxUpdated = undefined;
         });
     }
   }
@@ -789,7 +792,7 @@ class MessagesView extends React.Component {
           params.set(key, data.resp[key]);
         }
       }
-      ['name', 'seq'].map((key) => {
+      ['name', 'seq'].forEach(key => {
         if (data[key]) {
           params.set(key, data[key]);
         }
@@ -1277,6 +1280,11 @@ class MessagesView extends React.Component {
     }
   }
 
+  handleUnpinMessage(seq) {
+    const topic = this.props.tinode.getTopic(this.state.topic);
+    topic.pinMessage(seq, false);
+  }
+
   isDragEnabled() {
     return this.state.isWriter && !this.state.unconfirmed && !this.props.forwardMessage && !this.state.peerMessagingDisabled;
   }
@@ -1417,6 +1425,9 @@ class MessagesView extends React.Component {
           }
         }
 
+        const pinnedMessages = [];
+        (this.state.pins || []).forEach(seq => pinnedMessages.push(topic.findMessage(seq)));
+
         const messageNodes = [];
         let previousFrom = null;
         let prevDate = null;
@@ -1494,6 +1505,7 @@ class MessagesView extends React.Component {
                 uploader={msg._uploader}
                 userIsWriter={this.state.isWriter}
                 userIsAdmin={this.state.isAdmin}
+                pinned={(this.state.pins || []).includes(msg.seq)}
                 viewportWidth={this.props.viewportWidth}  // Used by `formatter`.
                 showContextMenu={this.handleShowMessageContextMenu}
                 onExpandMedia={this.handleExpandMedia}
@@ -1609,12 +1621,17 @@ class MessagesView extends React.Component {
                 }<ContactBadges badges={icon_badges} /></div>
                 <div id="topic-last-seen">{lastSeen}</div>
               </div>
-              <div>{this.state.pins}</div>
+              <PinnedMessages
+                tinode={this.props.tinode}
+                messages={pinnedMessages}
+                selected={0}
+                onSelected={this.handleQuoteClick}
+                onCancel={this.handleUnpinMessage} />
               {groupTopic ?
                 <GroupSubs
                   tinode={this.props.tinode}
                   subscribers={this.state.onlineSubs} /> :
-                <div id="topic-users" />
+                null
               }
               <div>
                 <a href="#" onClick={this.handleContextClick}>

src/views/settings-view.jsx

@@ -46,7 +46,7 @@ export default class SettingsView extends React.PureComponent {
   render() {
     const names = {def: "default", ws: "websocket", lp: "long polling"};
     const transportOptions = [];
-    ['def', 'ws', 'lp'].map((item) => {
+    ['def', 'ws', 'lp'].forEach(item => {
       const id = 'transport-' + item;
       const name = names[item];
       transportOptions.push(

src/views/tinode-web.jsx

@@ -1686,14 +1686,14 @@ class TinodeWeb extends React.Component {
     }
 
     if (added && added.length > 0) {
-      added.map((uid) => {
+      added.forEach(uid => {
         topic.invite(uid, null)
           .catch(err => this.handleError(err.message, 'err'));
       });
     }
 
     if (removed && removed.length > 0) {
-      removed.map((uid) => {
+      removed.forEach(uid => {
         topic.delSubscription(uid)
           .catch(err => this.handleError(err.message, 'err'));
       });

src/widgets/badge-list.jsx

@@ -29,7 +29,7 @@ class BadgeList extends React.PureComponent {
     let badges = null;
     if (this.props.trustedBadges && this.props.trustedBadges.length > 0) {
       badges = [];
-      this.props.trustedBadges.map((b) => {
+      this.props.trustedBadges.forEach(b => {
         const comment = this.props.short ? null : formatMessage(messages['badge_' + b]);
         const style = 'material-icons ' + b + '-color';
         badges.push(<div className="trusted-badge" key={b}><i className={style}>{icon_mapping[b] || b}</i> {comment}</div>);

src/widgets/chat-message.jsx

@@ -114,7 +114,7 @@ class BaseChatMessage extends React.PureComponent {
         }
       }
       if (this.props.userIsAdmin) {
-        menuItems.push('menu_item_pin');
+        menuItems.push(this.props.pinned ? 'menu_item_unpin' : 'menu_item_pin');
       }
     }
     menuItems.push('menu_item_forward');

src/widgets/chip-input.jsx

@@ -44,7 +44,7 @@ export default class ChipInput extends React.Component {
   static indexChips(chips) {
     const index = {};
     let count = 0;
-    chips.map((item) => {
+    chips.forEach(item => {
       index[item.user] = count;
       count ++;
     });
@@ -55,7 +55,7 @@ export default class ChipInput extends React.Component {
   static sortChips(chips, keep) {
     const required = [];
     const normal = [];
-    chips.map((item) => {
+    chips.forEach(item => {
       if (keep && keep.includes(item.user)) {
         required.push(item);
       } else {
@@ -115,7 +115,7 @@ export default class ChipInput extends React.Component {
     const chips = [];
     let count = 0;
     const staticMembers = this.props.staticMembers || [];
-    this.state.sortedChips.map((item) => {
+    this.state.sortedChips.forEach(item => {
       chips.push(
         <Chip
           tinode={this.props.tinode}

src/widgets/contact-badges.jsx

@@ -8,7 +8,7 @@ export default class ContactBadges extends React.PureComponent {
     let badges = null;
     if (this.props.badges && this.props.badges.length > 0) {
       badges = [];
-      this.props.badges.map((b) => {
+      this.props.badges.forEach(b => {
         const color = (b.color ? ' ' + b.color : '');
         if (b.icon) {
           badges.push(<i className={'material-icons as-badge' + color} key={b.key || b.icon}>{icon_mapping[b.icon] || b.icon}</i>);

src/widgets/contact-list.jsx

@@ -32,7 +32,7 @@ class ContactList extends React.Component {
     const contactNodes = [];
     let contactsCount = 0;
     if (this.props.contacts && this.props.contacts.length > 0) {
-      this.props.contacts.map((c) => {
+      this.props.contacts.forEach(c => {
         if (c.action) {
           // Action item
           contactNodes.push(

src/widgets/context-menu.jsx

@@ -458,29 +458,8 @@ class ContextMenu extends React.Component {
     if (!topic) {
       return;
     }
-
+    topic.pinMessage(params.seq, pin)
-    let pinned = topic.aux('pins');
+      .catch(err => errorHandler ? errorHandler(err.message, 'err') : null);
-    console.log("topic.aux[pins]=", pinned);
-    if (!Array.isArray(pinned)) {
-      pinned = [];
-    }
-    let changed = false;
-    if (pin) {
-      if (!pinned.includes(params.seq)) {
-        changed = true;
-        pinned.push(params.seq);
-      }
-    } else {
-      if (pinned.includes(params.seq)) {
-        changed = true;
-        pinned = pinned.filter(seq => seq != params.seq)
-      }
-    }
-    if (changed) {
-      console.log("sending pins=", pinned);
-      topic.setMeta({aux: {pins: pinned}})
-        .catch(err => errorHandler ? errorHandler(err.message, 'err') : null);
-    }
   }
 
   // Function is used by context menu to set permissions.
@@ -509,7 +488,7 @@ class ContextMenu extends React.Component {
   render() {
     const menu = [];
     let count = 0;
-    this.props.items.map((item) => {
+    this.props.items.forEach(item => {
       if (typeof item == 'string') {
         item = this.MenuItems[item];
       }

src/widgets/group-manager.jsx

@@ -41,7 +41,7 @@ class GroupManager extends React.Component {
 
   static indexMembers(members) {
     let index = {};
-    members.map((m) => {
+    members.forEach(m => {
       index[m.user] = {delta: 0, present: true}; // Delta: 0 unchanged, +1 added, -1 removed
     });
     return index;
@@ -49,7 +49,7 @@ class GroupManager extends React.Component {
 
   static staticMembers(members, keepInitial, requiredMember) {
     let stat = [];
-    members.map((m) => {
+    members.forEach(m => {
       if (keepInitial || m.user == requiredMember) {
         stat.push(m.user);
       }
@@ -59,7 +59,7 @@ class GroupManager extends React.Component {
 
   static selectedContacts(members) {
     let sel = [];
-    members.map((m) => {
+    members.forEach(m => {
       sel.push(m.user);
     });
     return sel;
@@ -130,20 +130,19 @@ class GroupManager extends React.Component {
   }
 
   handleSubmit() {
-    var instance = this;
+    const members = [];
-    var members = [];
+    const added = [];
-    var added = [];
+    const removed = [];
-    var removed = [];
 
-    var keys = Object.keys(this.state.index);
+    const keys = Object.keys(this.state.index);
-    keys.map(function(k) {
+    keys.forEach(k => {
-      if (instance.state.index[k].present) {
+      if (this.state.index[k].present) {
         members.push(k);
       }
 
-      if (instance.state.index[k].delta > 0) {
+      if (this.state.index[k].delta > 0) {
         added.push(k);
-      } else if (instance.state.index[k].delta < 0) {
+      } else if (this.state.index[k].delta < 0) {
         removed.push(k);
       }
     });
@@ -155,7 +154,6 @@ class GroupManager extends React.Component {
   }
 
   render() {
-    const {formatMessage} = this.props.intl;
     return (
       <div id="group-manager">
         <div className="panel-form-row">

src/widgets/group-subs.jsx

@@ -30,7 +30,9 @@ export default class GroupSubs extends React.Component {
       );
       return usersOnline.length == countToShow;
     });
-
+    if (usersOnline.length == 0) {
+      return null;
+    }
     return (
       <div id="topic-users">{usersOnline} {totalCount > countToShow ?
         <span>

src/widgets/host-selector.jsx

@@ -36,7 +36,7 @@ export default class HostSelector extends React.PureComponent {
   }
 
   render() {
-    var hostOptions = [];
+    const hostOptions = [];
     for (let key in KNOWN_HOSTS) {
       let item = KNOWN_HOSTS[key];
       hostOptions.push(

src/widgets/side-navbar.jsx

@@ -12,7 +12,7 @@ export default class SideNavbar extends React.PureComponent {
   render() {
     const icon_badges = [];
     if (this.props.trustedBadges) {
-      this.props.trustedBadges.map((b) => {
+      this.props.trustedBadges.forEach(b => {
         icon_badges.push({icon: b, color: 'badge-inv'});
       });
     }

src/widgets/tag-manager.jsx

@@ -92,11 +92,11 @@ export default class TagManager extends React.Component {
 
     let tags = [];
     if (this.state.activated) {
-      this.state.tags.map((tag) => {
+      this.state.tags.forEach(tag => {
         tags.push({user: tag, invalid: (tag.length < minTagLength || tag.length > maxTagLength)});
       });
     } else {
-      this.state.tags.map((tag) => {
+      this.state.tags.forEach(tag => {
         tags.push(<span className="badge" key={tags.length}>{tag}</span>);
       });
       if (tags.length == 0) {

umd/index.dev.js

@@ -2531,7 +2531,7 @@ function filePasted(event, onImageSuccess, onAttachmentSuccess, onError) {
   return false;
 }
 function getMimeType(header) {
-  var mime = /^data:(image\/[-+a-z0-9.]+);base64/.exec(header);
+  const mime = /^data:(image\/[-+a-z0-9.]+);base64/.exec(header);
   return mime && mime.length > 1 ? mime[1] : null;
 }
 function base64EncodedLen(n) {
@@ -4055,7 +4055,7 @@ class ContactsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     const contacts = [];
     let unreadThreads = 0;
     let archivedCount = 0;
-    props.chatList.map(c => {
+    props.chatList.forEach(c => {
       const blocked = c.acs && !c.acs.isJoiner();
       if (blocked && props.blocked) {
         contacts.push(c);
@@ -5056,13 +5056,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _widgets_load_spinner_jsx__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../widgets/load-spinner.jsx */ "./src/widgets/load-spinner.jsx");
 /* harmony import */ var _logo_view_jsx__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./logo-view.jsx */ "./src/views/logo-view.jsx");
 /* harmony import */ var _widgets_meta_message_jsx__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../widgets/meta-message.jsx */ "./src/widgets/meta-message.jsx");
-/* harmony import */ var _widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../widgets/send-message.jsx */ "./src/widgets/send-message.jsx");
+/* harmony import */ var _widgets_pinned_messages_jsx__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../widgets/pinned-messages.jsx */ "./src/widgets/pinned-messages.jsx");
-/* harmony import */ var _widgets_video_preview_jsx__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../widgets/video-preview.jsx */ "./src/widgets/video-preview.jsx");
+/* harmony import */ var _widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../widgets/send-message.jsx */ "./src/widgets/send-message.jsx");
-/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
+/* harmony import */ var _widgets_video_preview_jsx__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../widgets/video-preview.jsx */ "./src/widgets/video-preview.jsx");
-/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../constants.js */ "./src/constants.js");
+/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
-/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
+/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../constants.js */ "./src/constants.js");
-/* harmony import */ var _lib_navigation_js__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../lib/navigation.js */ "./src/lib/navigation.js");
+/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
-/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+/* harmony import */ var _lib_navigation_js__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../lib/navigation.js */ "./src/lib/navigation.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+
 
 
 
@@ -5173,7 +5175,7 @@ function isPeerRestricted(acs) {
   return false;
 }
 function shouldPresentCallPanel(callState) {
-  return callState == _constants_js__WEBPACK_IMPORTED_MODULE_18__.CALL_STATE_OUTGOING_INITATED || callState == _constants_js__WEBPACK_IMPORTED_MODULE_18__.CALL_STATE_IN_PROGRESS;
+  return callState == _constants_js__WEBPACK_IMPORTED_MODULE_19__.CALL_STATE_OUTGOING_INITATED || callState == _constants_js__WEBPACK_IMPORTED_MODULE_19__.CALL_STATE_IN_PROGRESS;
 }
 class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
   constructor(props) {
@@ -5215,6 +5217,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     this.handleEditMessage = this.handleEditMessage.bind(this);
     this.handleCancelReply = this.handleCancelReply.bind(this);
     this.handleQuoteClick = this.handleQuoteClick.bind(this);
+    this.handleUnpinMessage = this.handleUnpinMessage.bind(this);
     this.handleCallHangup = this.handleCallHangup.bind(this);
     this.isDragEnabled = this.isDragEnabled.bind(this);
     this.handleDragStart = this.handleDragStart.bind(this);
@@ -5278,7 +5281,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         topic.onMetaDesc = this.handleDescChange;
         topic.onSubsUpdated = this.handleSubsUpdated;
         topic.onPres = this.handleSubsUpdated;
-        topic.onAux = this.handleAuxUpdate;
+        topic.onAuxUpdated = this.handleAuxUpdate;
       }
     }
     if (!this.props.applicationVisible) {
@@ -5366,7 +5369,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         if (topic.public) {
           Object.assign(nextState, {
             title: topic.public.fn,
-            avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.makeImageUrl)(topic.public.photo)
+            avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.makeImageUrl)(topic.public.photo)
           });
         } else {
           Object.assign(nextState, {
@@ -5457,9 +5460,9 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       return;
     }
     const newTopic = this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic;
-    let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
+    let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub().withAux();
     if (this.state.isReader || newTopic) {
-      getQuery = getQuery.withLaterData(_config_js__WEBPACK_IMPORTED_MODULE_17__.MESSAGES_PAGE);
+      getQuery = getQuery.withLaterData(_config_js__WEBPACK_IMPORTED_MODULE_18__.MESSAGES_PAGE);
       if (this.state.isReader) {
         getQuery = getQuery.withLaterDel();
       }
@@ -5470,7 +5473,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     const setQuery = newTopic ? this.props.newTopicParams : undefined;
     topic.subscribe(getQuery.build(), setQuery).then(ctrl => {
       if (ctrl.code == 303) {
-        _lib_navigation_js__WEBPACK_IMPORTED_MODULE_20__["default"].navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_20__["default"].setUrlTopic('', ctrl.params.topic));
+        _lib_navigation_js__WEBPACK_IMPORTED_MODULE_21__["default"].navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_21__["default"].setUrlTopic('', ctrl.params.topic));
         return;
       }
       if (this.state.topic != ctrl.topic) {
@@ -5519,6 +5522,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         oldTopic.onMetaDesc = undefined;
         oldTopic.onSubsUpdated = undefined;
         oldTopic.onPres = undefined;
+        oldTopic.onAuxUpdated = undefined;
       });
     }
   }
@@ -5544,7 +5548,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         this.setState({
           fetchingMessages: true
         }, _ => {
-          topic.getMessagesPage(_config_js__WEBPACK_IMPORTED_MODULE_17__.MESSAGES_PAGE).catch(err => this.props.onError(err.message, 'err')).finally(_ => this.setState({
+          topic.getMessagesPage(_config_js__WEBPACK_IMPORTED_MODULE_18__.MESSAGES_PAGE).catch(err => this.props.onError(err.message, 'err')).finally(_ => this.setState({
             fetchingMessages: false
           }));
         });
@@ -5573,7 +5577,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     if (desc.public) {
       this.setState({
         title: desc.public.fn,
-        avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.makeImageUrl)(desc.public.photo)
+        avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.makeImageUrl)(desc.public.photo)
       });
     } else {
       this.setState({
@@ -5629,7 +5633,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     this.readNotificationQueue.push({
       topicName: this.state.topic,
       seq: seq,
-      sendAt: now.setMilliseconds(now.getMilliseconds() + _config_js__WEBPACK_IMPORTED_MODULE_17__.READ_DELAY)
+      sendAt: now.setMilliseconds(now.getMilliseconds() + _config_js__WEBPACK_IMPORTED_MODULE_18__.READ_DELAY)
     });
   }
   clearNotificationQueue() {
@@ -5720,7 +5724,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           clearTimeout(this.keyPressTimer);
           this.keyPressTimer = setTimeout(_ => this.setState({
             typingIndicator: false
-          }), _config_js__WEBPACK_IMPORTED_MODULE_17__.KEYPRESS_DELAY + 1000);
+          }), _config_js__WEBPACK_IMPORTED_MODULE_18__.KEYPRESS_DELAY + 1000);
           if (!this.state.typingIndicator) {
             this.setState({
               typingIndicator: true
@@ -5776,7 +5780,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           params.set(key, data.resp[key]);
         }
       }
-      ['name', 'seq'].map(key => {
+      ['name', 'seq'].forEach(key => {
         if (data[key]) {
           params.set(key, data[key]);
         }
@@ -5822,7 +5826,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
   handleEnablePeer(e) {
     e.preventDefault();
-    this.props.onChangePermissions(this.state.topic, _config_js__WEBPACK_IMPORTED_MODULE_17__.DEFAULT_P2P_ACCESS_MODE, this.state.topic);
+    this.props.onChangePermissions(this.state.topic, _config_js__WEBPACK_IMPORTED_MODULE_18__.DEFAULT_P2P_ACCESS_MODE, this.state.topic);
   }
   sendKeyPress(audio) {
     const topic = this.props.tinode.getTopic(this.state.topic);
@@ -5869,7 +5873,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     });
   }
   sendFileAttachment(file) {
-    const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024 | 0;
+    const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024 | 0;
     if (file.size > maxInbandAttachmentSize) {
       const uploader = this.props.tinode.getLargeFileHelper();
       if (!uploader) {
@@ -5885,7 +5889,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       });
       this.sendMessage(msg, uploadCompletionPromise, uploader);
     } else {
-      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.fileToBase64)(file).then(b64 => this.sendMessage(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.attachFile(null, {
+      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.fileToBase64)(file).then(b64 => this.sendMessage(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.attachFile(null, {
         mime: b64.mime,
         data: b64.bits,
         filename: b64.name,
@@ -5894,11 +5898,11 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }
   }
   handleAttachFile(file) {
-    const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_EXTERN_ATTACHMENT_SIZE);
+    const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_EXTERN_ATTACHMENT_SIZE);
     if (file.size > maxExternAttachmentSize) {
       this.props.onError(this.props.intl.formatMessage(messages.file_attachment_too_large, {
-        size: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_21__.bytesToHumanSize)(file.size),
+        size: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_22__.bytesToHumanSize)(file.size),
-        limit: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_21__.bytesToHumanSize)(maxExternAttachmentSize)
+        limit: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_22__.bytesToHumanSize)(maxExternAttachmentSize)
       }), 'err');
     } else {
       this.setState({
@@ -5923,7 +5927,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     const width = this.state.imagePreview.width;
     const height = this.state.imagePreview.height;
     const fname = this.state.imagePreview.filename;
-    const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024 | 0;
+    const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024 | 0;
     if (blob.size > maxInbandAttachmentSize) {
       const uploader = this.props.tinode.getLargeFileHelper();
       if (!uploader) {
@@ -5931,7 +5935,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         return;
       }
       const uploadCompletionPromise = uploader.upload(blob);
-      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.imageScaled)(blob, _config_js__WEBPACK_IMPORTED_MODULE_17__.IMAGE_PREVIEW_DIM, _config_js__WEBPACK_IMPORTED_MODULE_17__.IMAGE_PREVIEW_DIM, -1, false).then(scaled => (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(scaled.blob)).then(b64 => {
+      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.imageScaled)(blob, _config_js__WEBPACK_IMPORTED_MODULE_18__.IMAGE_PREVIEW_DIM, _config_js__WEBPACK_IMPORTED_MODULE_18__.IMAGE_PREVIEW_DIM, -1, false).then(scaled => (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(scaled.blob)).then(b64 => {
         let msg = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.insertImage(null, 0, {
           mime: mime,
           _tempPreview: b64.bits,
@@ -5950,7 +5954,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       }).catch(err => this.props.onError(err, 'err'));
       return;
     }
-    (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(blob).then(b64 => {
+    (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(blob).then(b64 => {
       let msg = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.insertImage(null, 0, {
         mime: b64.mime,
         bits: b64.bits,
@@ -5969,7 +5973,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   sendVideoAttachment(caption, videoBlob, previewBlob, params) {
     const width = params.width;
     const height = params.height;
-    const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024 | 0;
+    const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024 | 0;
     const uploads = [];
     let uploader;
     if (videoBlob.size + previewBlob.size > maxInbandAttachmentSize) {
@@ -5982,7 +5986,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       uploads[1] = previewBlob.size > maxInbandAttachmentSize * 0.275 ? uploader.upload(previewBlob) : null;
     }
     if (uploads.length == 0) {
-      Promise.all([(0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(videoBlob), (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(previewBlob)]).then(b64s => {
+      Promise.all([(0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(videoBlob), (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(previewBlob)]).then(b64s => {
         const [v64, i64] = b64s;
         let msg = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.insertVideo(null, 0, {
           mime: v64.mime,
@@ -6005,9 +6009,9 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }
     const uploadCompletionPromise = Promise.all(uploads);
     const b64conv = [];
-    b64conv[0] = uploads[0] ? null : (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(videoBlob);
+    b64conv[0] = uploads[0] ? null : (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(videoBlob);
-    b64conv[1] = uploads[1] ? null : (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.imageScaled)(previewBlob, _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_IMAGE_DIM, _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_IMAGE_DIM, -1, false).then(scaled => (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(scaled.blob));
+    b64conv[1] = uploads[1] ? null : (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.imageScaled)(previewBlob, _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_IMAGE_DIM, _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_IMAGE_DIM, -1, false).then(scaled => (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(scaled.blob));
-    b64conv[2] = (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.imageScaled)(previewBlob, _config_js__WEBPACK_IMPORTED_MODULE_17__.VIDEO_PREVIEW_DIM, _config_js__WEBPACK_IMPORTED_MODULE_17__.VIDEO_PREVIEW_DIM, -1, false).then(scaled => (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(scaled.blob));
+    b64conv[2] = (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.imageScaled)(previewBlob, _config_js__WEBPACK_IMPORTED_MODULE_18__.VIDEO_PREVIEW_DIM, _config_js__WEBPACK_IMPORTED_MODULE_18__.VIDEO_PREVIEW_DIM, -1, false).then(scaled => (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(scaled.blob));
     Promise.all(b64conv).then(b64s => {
       const [video, img, preview] = b64s;
       let msg = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.insertVideo(null, 0, {
@@ -6031,7 +6035,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }).catch(err => this.props.onError(err.message, 'err'));
   }
   handleAttachImageOrVideo(file) {
-    const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_EXTERN_ATTACHMENT_SIZE);
+    const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_EXTERN_ATTACHMENT_SIZE);
     if (file.type.startsWith('video/')) {
       this.setState({
         videoPreview: {
@@ -6044,7 +6048,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       });
       return;
     }
-    (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.imageScaled)(file, _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_IMAGE_DIM, _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_IMAGE_DIM, maxExternAttachmentSize, false).then(scaled => {
+    (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.imageScaled)(file, _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_IMAGE_DIM, _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_IMAGE_DIM, maxExternAttachmentSize, false).then(scaled => {
       this.setState({
         imagePreview: {
           url: URL.createObjectURL(scaled.blob),
@@ -6073,7 +6077,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
   sendAudioAttachment(url, preview, duration) {
     fetch(url).then(result => result.blob()).then(blob => {
-      const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_17__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024;
+      const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', _config_js__WEBPACK_IMPORTED_MODULE_18__.MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024;
       if (blob.size > maxInbandAttachmentSize) {
         const uploader = this.props.tinode.getLargeFileHelper();
         if (!uploader) {
@@ -6090,7 +6094,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         });
         this.sendMessage(msg, uploadCompletionPromise, uploader);
       } else {
-        (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.blobToBase64)(blob).then(b64 => {
+        (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.blobToBase64)(blob).then(b64 => {
           this.sendMessage(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.appendAudio(null, {
             mime: b64.mime,
             bits: b64.bits,
@@ -6122,7 +6126,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }
     content = typeof content == 'string' ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.init(content) : content;
     if (tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.isValid(content)) {
-      content = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.replyContent(content, _config_js__WEBPACK_IMPORTED_MODULE_17__.QUOTED_REPLY_LENGTH);
+      content = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.replyContent(content, _config_js__WEBPACK_IMPORTED_MODULE_18__.QUOTED_REPLY_LENGTH);
     } else {
       content = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.append(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.init('\u26A0 '), tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
     }
@@ -6144,7 +6148,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     content = typeof content == 'string' ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.init(content) : content;
     const editable = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.toMarkdown(content);
     if (tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.isValid(content)) {
-      content = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.replyContent(content, _config_js__WEBPACK_IMPORTED_MODULE_17__.EDIT_PREVIEW_LENGTH);
+      content = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.replyContent(content, _config_js__WEBPACK_IMPORTED_MODULE_18__.EDIT_PREVIEW_LENGTH);
     } else {
       content = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.append(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.init('\u26A0 '), tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
     }
@@ -6180,6 +6184,10 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       console.error("Unresolved message ref", replyToSeq);
     }
   }
+  handleUnpinMessage(seq) {
+    const topic = this.props.tinode.getTopic(this.state.topic);
+    topic.pinMessage(seq, false);
+  }
   isDragEnabled() {
     return this.state.isWriter && !this.state.unconfirmed && !this.props.forwardMessage && !this.state.peerMessagingDisabled;
   }
@@ -6245,7 +6253,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           onSendMessage: this.sendImageAttachment
         });
       } else if (this.state.videoPreview) {
-        component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_video_preview_jsx__WEBPACK_IMPORTED_MODULE_16__["default"], {
+        component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_video_preview_jsx__WEBPACK_IMPORTED_MODULE_17__["default"], {
           content: this.state.videoPreview,
           tinode: this.props.tinode,
           reply: this.state.reply,
@@ -6260,7 +6268,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           onClose: this.handleClosePreview
         });
       } else if (this.state.videoPostview) {
-        component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_video_preview_jsx__WEBPACK_IMPORTED_MODULE_16__["default"], {
+        component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_video_preview_jsx__WEBPACK_IMPORTED_MODULE_17__["default"], {
           content: this.state.videoPostview,
           tinode: this.props.tinode,
           onError: this.props.onError,
@@ -6316,6 +6324,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
             });
           }
         }
+        const pinnedMessages = [];
+        (this.state.pins || []).forEach(seq => pinnedMessages.push(topic.findMessage(seq)));
         const messageNodes = [];
         let previousFrom = null;
         let prevDate = null;
@@ -6342,7 +6352,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           const user = topic.userDesc(thisFrom);
           if (user && user.public) {
             userName = user.public.fn;
-            userAvatar = (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_19__.makeImageUrl)(user.public.photo);
+            userAvatar = (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_20__.makeImageUrl)(user.public.photo);
           }
           chatBoxClass = groupTopic ? 'chat-box group' : 'chat-box';
           const ref = this.getOrCreateMessageRef(msg.seq);
@@ -6359,7 +6369,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
             const thisDate = new Date(msg.ts);
             if (!prevDate || prevDate.toDateString() != thisDate.toDateString()) {
               messageNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_meta_message_jsx__WEBPACK_IMPORTED_MODULE_14__["default"], {
-                date: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_21__.relativeDateFormat)(msg.ts),
+                date: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_22__.relativeDateFormat)(msg.ts),
                 locale: this.props.intl.locale,
                 key: 'date-' + msg.seq
               }));
@@ -6384,6 +6394,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
               uploader: msg._uploader,
               userIsWriter: this.state.isWriter,
               userIsAdmin: this.state.isAdmin,
+              pinned: (this.state.pins || []).includes(msg.seq),
               viewportWidth: this.props.viewportWidth,
               showContextMenu: this.handleShowMessageContextMenu,
               onExpandMedia: this.handleExpandMedia,
@@ -6407,7 +6418,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
             if (cont.online) {
               lastSeen = formatMessage(messages.online_now);
             } else if (cont.seen) {
-              lastSeen = formatMessage(messages.last_seen) + ": " + (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_21__.shortDateFormat)(cont.seen.when, this.props.intl.locale);
+              lastSeen = formatMessage(messages.last_seen) + ": " + (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_22__.shortDateFormat)(cont.seen.when, this.props.intl.locale);
             }
           }
         }
@@ -6458,7 +6469,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           }]
         })), ".") : null, this.state.unconfirmed ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_invitation_jsx__WEBPACK_IMPORTED_MODULE_10__["default"], {
           onAction: this.handleNewChatAcceptance
-        }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_15__["default"], {
+        }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_16__["default"], {
           tinode: this.props.tinode,
           topicName: this.state.topic,
           noInput: !!this.props.forwardMessage,
@@ -6512,12 +6523,16 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           badges: icon_badges
         })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
           id: "topic-last-seen"
-        }, lastSeen)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, this.state.pins), groupTopic ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_group_subs_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
+        }, lastSeen)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_pinned_messages_jsx__WEBPACK_IMPORTED_MODULE_15__["default"], {
+          tinode: this.props.tinode,
+          messages: pinnedMessages,
+          selected: 0,
+          onSelected: this.handleQuoteClick,
+          onCancel: this.handleUnpinMessage
+        }), groupTopic ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_group_subs_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
           tinode: this.props.tinode,
           subscribers: this.state.onlineSubs
-        }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+        }) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-          id: "topic-users"
-        }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
           href: "#",
           onClick: this.handleContextClick
         }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
@@ -6784,7 +6799,7 @@ class SettingsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       lp: "long polling"
     };
     const transportOptions = [];
-    ['def', 'ws', 'lp'].map(item => {
+    ['def', 'ws', 'lp'].forEach(item => {
       const id = 'transport-' + item;
       const name = names[item];
       transportOptions.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
@@ -8711,12 +8726,12 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       return;
     }
     if (added && added.length > 0) {
-      added.map(uid => {
+      added.forEach(uid => {
         topic.invite(uid, null).catch(err => this.handleError(err.message, 'err'));
       });
     }
     if (removed && removed.length > 0) {
-      removed.map(uid => {
+      removed.forEach(uid => {
         topic.delSubscription(uid).catch(err => this.handleError(err.message, 'err'));
       });
     }
@@ -9993,7 +10008,7 @@ class BadgeList extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     let badges = null;
     if (this.props.trustedBadges && this.props.trustedBadges.length > 0) {
       badges = [];
-      this.props.trustedBadges.map(b => {
+      this.props.trustedBadges.forEach(b => {
         const comment = this.props.short ? null : formatMessage(messages['badge_' + b]);
         const style = 'material-icons ' + b + '-color';
         badges.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -11115,7 +11130,7 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
         }
       }
       if (this.props.userIsAdmin) {
-        menuItems.push('menu_item_pin');
+        menuItems.push(this.props.pinned ? 'menu_item_unpin' : 'menu_item_pin');
       }
     }
     menuItems.push('menu_item_forward');
@@ -11344,7 +11359,7 @@ class ChipInput extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
   static indexChips(chips) {
     const index = {};
     let count = 0;
-    chips.map(item => {
+    chips.forEach(item => {
       index[item.user] = count;
       count++;
     });
@@ -11353,7 +11368,7 @@ class ChipInput extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
   static sortChips(chips, keep) {
     const required = [];
     const normal = [];
-    chips.map(item => {
+    chips.forEach(item => {
       if (keep && keep.includes(item.user)) {
         required.push(item);
       } else {
@@ -11412,7 +11427,7 @@ class ChipInput extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     const chips = [];
     let count = 0;
     const staticMembers = this.props.staticMembers || [];
-    this.state.sortedChips.map(item => {
+    this.state.sortedChips.forEach(item => {
       chips.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chip_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
         tinode: this.props.tinode,
         onCancel: this.handleChipCancel,
@@ -11564,7 +11579,7 @@ class ContactBadges extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
     let badges = null;
     if (this.props.badges && this.props.badges.length > 0) {
       badges = [];
-      this.props.badges.map(b => {
+      this.props.badges.forEach(b => {
         const color = b.color ? ' ' + b.color : '';
         if (b.icon) {
           badges.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
@@ -11639,7 +11654,7 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
     const contactNodes = [];
     let contactsCount = 0;
     if (this.props.contacts && this.props.contacts.length > 0) {
-      this.props.contacts.map(c => {
+      this.props.contacts.forEach(c => {
         if (c.action) {
           contactNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_action_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
             title: c.title,
@@ -12388,31 +12403,7 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
     if (!topic) {
       return;
     }
-    let pinned = topic.aux('pins');
+    topic.pinMessage(params.seq, pin).catch(err => errorHandler ? errorHandler(err.message, 'err') : null);
-    console.log("topic.aux[pins]=", pinned);
-    if (!Array.isArray(pinned)) {
-      pinned = [];
-    }
-    let changed = false;
-    if (pin) {
-      if (!pinned.includes(params.seq)) {
-        changed = true;
-        pinned.push(params.seq);
-      }
-    } else {
-      if (pinned.includes(params.seq)) {
-        changed = true;
-        pinned = pinned.filter(seq => seq != params.seq);
-      }
-    }
-    if (changed) {
-      console.log("sending pins=", pinned);
-      topic.setMeta({
-        aux: {
-          pins: pinned
-        }
-      }).catch(err => errorHandler ? errorHandler(err.message, 'err') : null);
-    }
   }
   topicPermissionSetter(mode, params, errorHandler) {
     const topic = this.props.tinode.getTopic(params.topicName);
@@ -12435,7 +12426,7 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
   render() {
     const menu = [];
     let count = 0;
-    this.props.items.map(item => {
+    this.props.items.forEach(item => {
       if (typeof item == 'string') {
         item = this.MenuItems[item];
       }
@@ -13098,7 +13089,7 @@ class GroupManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
   static indexMembers(members) {
     let index = {};
-    members.map(m => {
+    members.forEach(m => {
       index[m.user] = {
         delta: 0,
         present: true
@@ -13108,7 +13099,7 @@ class GroupManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
   static staticMembers(members, keepInitial, requiredMember) {
     let stat = [];
-    members.map(m => {
+    members.forEach(m => {
       if (keepInitial || m.user == requiredMember) {
         stat.push(m.user);
       }
@@ -13117,7 +13108,7 @@ class GroupManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
   static selectedContacts(members) {
     let sel = [];
-    members.map(m => {
+    members.forEach(m => {
       sel.push(m.user);
     });
     return sel;
@@ -13189,18 +13180,17 @@ class GroupManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     return true;
   }
   handleSubmit() {
-    var instance = this;
+    const members = [];
-    var members = [];
+    const added = [];
-    var added = [];
+    const removed = [];
-    var removed = [];
+    const keys = Object.keys(this.state.index);
-    var keys = Object.keys(this.state.index);
+    keys.forEach(k => {
-    keys.map(function (k) {
+      if (this.state.index[k].present) {
-      if (instance.state.index[k].present) {
         members.push(k);
       }
-      if (instance.state.index[k].delta > 0) {
+      if (this.state.index[k].delta > 0) {
         added.push(k);
-      } else if (instance.state.index[k].delta < 0) {
+      } else if (this.state.index[k].delta < 0) {
         removed.push(k);
       }
     });
@@ -13210,9 +13200,6 @@ class GroupManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     this.props.onCancel();
   }
   render() {
-    const {
-      formatMessage
-    } = this.props.intl;
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "group-manager"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -13326,6 +13313,9 @@ class GroupSubs extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       })));
       return usersOnline.length == countToShow;
     });
+    if (usersOnline.length == 0) {
+      return null;
+    }
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "topic-users"
     }, usersOnline, " ", totalCount > countToShow ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
@@ -13396,7 +13386,7 @@ class HostSelector extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
     }
   }
   render() {
-    var hostOptions = [];
+    const hostOptions = [];
     for (let key in _config_js__WEBPACK_IMPORTED_MODULE_1__.KNOWN_HOSTS) {
       let item = _config_js__WEBPACK_IMPORTED_MODULE_1__.KNOWN_HOSTS[key];
       hostOptions.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {
@@ -14775,6 +14765,76 @@ class PermissionsEditor extends (react__WEBPACK_IMPORTED_MODULE_0___default().Co
 
 /***/ }),
 
+/***/ "./src/widgets/pinned-messages.jsx":
+/*!*****************************************!*\
+  !*** ./src/widgets/pinned-messages.jsx ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! tinode-sdk */ "tinode-sdk");
+/* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _lib_formatters_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/formatters.js */ "./src/lib/formatters.js");
+
+
+
+
+class PinnedMessages extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+  constructor(props) {
+    super(props);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handleSelected = this.handleSelected.bind(this);
+  }
+  handleCancel(e) {
+    e.preventDefault();
+    this.props.onCancel(this.props.messages[this.props.selected].seq);
+  }
+  handleSelected(e) {
+    e.preventDefault();
+    this.props.onSelected(this.props.messages[this.props.selected].seq);
+  }
+  render() {
+    let shown = (this.props.messages || [])[this.props.selected];
+    shown = shown ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.format(shown.content, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_3__.previewFormatter, {
+      formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
+      authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
+    }) : null;
+    const dots = [];
+    this.props.messages.forEach(_ => {
+      const cn = dots.length == this.props.selected ? 'adot' : 'dot';
+      dots.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+        key: dots.length,
+        className: cn
+      }));
+    });
+    return shown ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      id: "pinned-wrapper"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "cancel"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+      href: "#",
+      onClick: this.handleCancel
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons gray"
+    }, "close"))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "pinned-scroll"
+    }, dots), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "pinned",
+      onClick: this.handleSelected
+    }, shown)) : null;
+  }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,react_intl__WEBPACK_IMPORTED_MODULE_1__.injectIntl)(PinnedMessages));
+
+/***/ }),
+
 /***/ "./src/widgets/received-marker.jsx":
 /*!*****************************************!*\
   !*** ./src/widgets/received-marker.jsx ***!
@@ -15342,7 +15402,7 @@ class SideNavbar extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
   render() {
     const icon_badges = [];
     if (this.props.trustedBadges) {
-      this.props.trustedBadges.map(b => {
+      this.props.trustedBadges.forEach(b => {
         icon_badges.push({
           icon: b,
           color: 'badge-inv'
@@ -15492,14 +15552,14 @@ class TagManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component
     const maxTagLength = this.props.tinode.getServerParam('maxTagLength', _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_TAG_LENGTH);
     let tags = [];
     if (this.state.activated) {
-      this.state.tags.map(tag => {
+      this.state.tags.forEach(tag => {
         tags.push({
           user: tag,
           invalid: tag.length < minTagLength || tag.length > maxTagLength
         });
       });
     } else {
-      this.state.tags.map(tag => {
+      this.state.tags.forEach(tag => {
         tags.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
           className: "badge",
           key: tags.length

umd/tinode.dev.js

@@ -1306,7 +1306,7 @@ function _serializeMessage(dst, msg) {
 }
 var _topic_fields = {
   writable: true,
-  value: ['created', 'updated', 'deleted', 'touched', 'read', 'recv', 'seq', 'clear', 'defacs', 'creds', 'public', 'trusted', 'private', 'tags', 'aux', '_deleted']
+  value: ['created', 'updated', 'deleted', 'touched', 'read', 'recv', 'seq', 'clear', 'defacs', 'creds', 'public', 'trusted', 'private', '_aux', '_deleted']
 };
 
 /***/ }),
@@ -3321,6 +3321,10 @@ class MetaGetBuilder {
     }
     return this;
   }
+  withAux() {
+    this.what['aux'] = true;
+    return this;
+  }
   withDel(since, limit) {
     if (since || limit) {
       this.what['del'] = {
@@ -3339,7 +3343,7 @@ class MetaGetBuilder {
   build() {
     const what = [];
     let params = {};
-    ['data', 'sub', 'desc', 'tags', 'cred', 'del'].forEach(key => {
+    ['data', 'sub', 'desc', 'tags', 'cred', 'aux', 'del'].forEach(key => {
       if (this.what.hasOwnProperty(key)) {
         what.push(key);
         if (Object.getOwnPropertyNames(this.what[key]).length > 0) {
@@ -3685,7 +3689,7 @@ class Topic {
         this._processMetaCreds([params.cred], true);
       }
       if (params.aux) {
-        this._processMetaAux(params.aux, true);
+        this._processMetaAux(params.aux);
       }
       return ctrl;
     });
@@ -3720,6 +3724,35 @@ class Topic {
       }
     });
   }
+  pinMessage(seq, pin) {
+    let pinned = this.aux('pins');
+    if (!Array.isArray(pinned)) {
+      pinned = [];
+    }
+    let changed = false;
+    if (pin) {
+      if (!pinned.includes(seq)) {
+        changed = true;
+        pinned.push(seq);
+      }
+    } else {
+      if (pinned.includes(seq)) {
+        changed = true;
+        pinned = pinned.filter(id => id != seq);
+        if (pinned.length == 0) {
+          pinned = _config_js__WEBPACK_IMPORTED_MODULE_3__.DEL_CHAR;
+        }
+      }
+    }
+    if (changed) {
+      return this.setMeta({
+        aux: {
+          pins: pinned
+        }
+      });
+    }
+    return Promise.resolve();
+  }
   delMessages(ranges, hard) {
     if (!this._attached) {
       return Promise.reject(new Error("Cannot delete messages in inactive topic"));
@@ -4282,6 +4315,9 @@ class Topic {
           this.getMeta(this.startMetaQuery().withLaterOneSub(pres.src).build());
         }
         break;
+      case 'aux':
+        this.getMeta(this.startMetaQuery().withAux().build());
+        break;
       case 'acs':
         uid = pres.src || this._tinode.getCurrentUserID();
         user = this._users[uid];
@@ -4400,6 +4436,7 @@ class Topic {
       tags = [];
     }
     this._tags = tags;
+    this._tinode._db.updTopic(this);
     if (this.onTagsUpdated) {
       this.onTagsUpdated(tags);
     }
@@ -4408,6 +4445,7 @@ class Topic {
   _processMetaAux(aux) {
     aux = !aux || aux == _config_js__WEBPACK_IMPORTED_MODULE_3__.DEL_CHAR ? {} : aux;
     this._aux = (0,_utils_js__WEBPACK_IMPORTED_MODULE_6__.mergeObj)(this._aux, aux);
+    this._tinode._db.updTopic(this);
     if (this.onAuxUpdated) {
       this.onAuxUpdated(this._aux);
     }
@@ -4940,7 +4978,7 @@ function normalizeArray(arr) {
         }
       }
     }
-    out.sort().filter(function (item, pos, ary) {
+    out.sort().filter((item, pos, ary) => {
       return !pos || item != ary[pos - 1];
     });
   }