Reply keyboard draft

app/js/controllers.js

@@ -1369,6 +1369,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         AppMessagesManager.readHistory($scope.curDialog.inputPeer);
 
         updateStartBot();
+        updateReplyKeyboard();
 
       }, function () {
         safeReplaceObject($scope.state, {error: true});
@@ -1385,6 +1386,14 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       $scope.$broadcast('ui_history_change');
     }
 
+    function updateReplyKeyboard () {
+      var replyKeyboard = AppMessagesManager.getReplyKeyboard(peerID);
+      if (replyKeyboard) {
+        replyKeyboard = AppMessagesManager.wrapReplyMarkup(replyKeyboard);
+      }
+      $scope.historyState.replyKeyboard = replyKeyboard;
+    }
+
     function botStart () {
       AppMessagesManager.startBot(peerID, 0, $scope.curDialog.startParam);
       $scope.curDialog.startParam = false;
@@ -1508,7 +1517,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       }
     }
 
-
     function selectedForward () {
       if ($scope.selectedCount > 0) {
         var selectedMessageIDs = [];
@@ -1585,6 +1593,16 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       loadAfterSync = false;
     });
 
+    $scope.$on('reply_button_press', function (e, button) {
+      var replyKeyboard = $scope.historyState.replyKeyboard;
+      if (!replyKeyboard) {
+        return;
+      }
+      AppMessagesManager.sendText(peerID, button.text, {
+        replyToMsgID: replyKeyboard.id
+      });
+    });
+
 
     var typingTimeouts = {};
     $scope.$on('history_append', function (e, addedMessage) {
@@ -1783,6 +1801,13 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       }
     });
 
+    $scope.$on('history_reply_markup', function (e, peerData) {
+      if (peerData.peerID == $scope.curDialog.peerID) {
+        console.log('update reply markup');
+        updateReplyKeyboard();
+      }
+    });
+
     $scope.$on('history_focus', function (e, peerData) {
       if ($scope.historyFilter.mediaType) {
         toggleMedia();

app/js/directives.js

@@ -403,6 +403,25 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
+  .directive('myReplyMarkup', function(AppPhotosManager, AppMessagesManager, AppPeersManager, $rootScope) {
+
+    return {
+      templateUrl: templateUrl('reply_markup'),
+      scope: {
+        'replyMarkup': '=myReplyMarkup'
+      },
+      link: link
+    };
+
+    function link ($scope, element, attrs) {
+      $scope.buttonSend = function (button) {
+        console.log('buttonSend', button);
+        $scope.$emit('reply_button_press', button);
+      }
+    }
+
+  })
+
   .directive('myMessagePhoto', function(AppPhotosManager) {
     return {
       scope: {

app/js/services.js

@@ -1150,6 +1150,9 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 
       historyStorage.history.splice(offset, historyStorage.history.length - offset);
       angular.forEach(historyResult.messages, function (message) {
+        if (mergeReplyKeyboard(historyStorage, message)) {
+          $rootScope.$broadcast('history_reply_markup', {peerID: AppPeersManager.getPeerID(inputPeer)});
+        }
         historyStorage.history.push(message.id);
       });
 
@@ -1287,6 +1290,65 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     });
   }
 
+  function getReplyKeyboard (peerID) {
+    return (historiesStorage[peerID] || {}).reply_markup || false;
+  }
+
+  function mergeReplyKeyboard (historyStorage, message) {
+    console.log('merge', message.reply_markup, historyStorage.reply_markup);
+    if (!message.reply_markup &&
+        !(
+          historyStorage.reply_markup !== undefined &&
+          (message.out || message.action)
+        )
+    ) {
+      return false;
+    }
+    var messageReplyMarkup = message.reply_markup;
+    var lastReplyMarkup = historyStorage.reply_markup;
+    if (messageReplyMarkup) {
+      if (lastReplyMarkup && lastReplyMarkup.id >= message.id) {
+        return false;
+      }
+      if (messageReplyMarkup.pFlags.selective &&
+          !(message.flags & 16)) {
+        return false;
+      }
+      messageReplyMarkup = angular.extend({
+        id: message.id
+      }, messageReplyMarkup);
+      if (messageReplyMarkup._ != 'replyKeyboardHide') {
+        messageReplyMarkup.fromID = message.from_id;
+      }
+      historyStorage.reply_markup = messageReplyMarkup;
+      return true;
+    }
+
+    if (lastReplyMarkup &&
+        lastReplyMarkup.pFlags.one_time &&
+        !lastReplyMarkup.hidden &&
+        message.out &&
+        (message.id > lastReplyMarkup.id || message.id < 0) &&
+        message.message) {
+      lastReplyMarkup.hidden = true;
+      return true;
+    }
+
+    if (lastReplyMarkup &&
+        message.action &&
+        message.action._ == 'messageActionChatDeleteUser' &&
+        message.action.user_id == lastReplyMarkup.fromID) {
+      historyStorage.reply_markup = {
+        _: 'replyKeyboardHide',
+        id: message.id,
+        flags: 0
+      };
+      return true;
+    }
+
+    return false;
+  }
+
   function getSearch (inputPeer, query, inputFilter, maxID, limit) {
     var foundMsgs = [],
         useSearchCache = !query,
@@ -1588,6 +1650,13 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
       if (apiMessage.action && apiMessage.action._ == 'messageActionChatEditPhoto') {
         AppPhotosManager.savePhoto(apiMessage.action.photo);
       }
+      if (apiMessage.reply_markup) {
+        apiMessage.reply_markup.pFlags = {
+          resize: (apiMessage.reply_markup.flags & 1) > 0,
+          one_time: (apiMessage.reply_markup.flags & 2) > 0,
+          selective: (apiMessage.reply_markup.flags & 4) > 0
+        };
+      }
     });
   }
 
@@ -2339,6 +2408,18 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     return messagesForHistory[msgID] = message;
   }
 
+  function wrapReplyMarkup (replyMarkup) {
+    if (replyMarkup.wrapped) {
+      return replyMarkup;
+    }
+    replyMarkup.wrapped = true;
+    angular.forEach(replyMarkup.rows, function (markupRow) {
+      angular.forEach(markupRow.buttons, function (markupButton) {
+        markupButton.rText = RichTextProcessor.wrapRichText(markupButton.text, {noLinks: true, noLinebreaks: true});
+      })
+    })
+  }
+
   function fetchSingleMessages () {
     if (fetchSingleMessagesTimeout !== false) {
       clearTimeout(fetchSingleMessagesTimeout);
@@ -2679,6 +2760,10 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 
         saveMessages([message]);
 
+        if (mergeReplyKeyboard(historyStorage, message)) {
+          $rootScope.$broadcast('history_reply_markup', {peerID: peerID})
+        }
+
         if (!message.out) {
           AppUsersManager.forceUserOnline(message.from_id);
         }
@@ -2936,6 +3021,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     getHistory: getHistory,
     getSearch: getSearch,
     getMessage: getMessage,
+    getReplyKeyboard: getReplyKeyboard,
     readHistory: readHistory,
     readMessages: readMessages,
     flushHistory: flushHistory,
@@ -2950,6 +3036,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     getMessagePeer: getMessagePeer,
     wrapForDialog: wrapForDialog,
     wrapForHistory: wrapForHistory,
+    wrapReplyMarkup: wrapReplyMarkup,
     regroupWrappedHistory: regroupWrappedHistory
   }
 })

app/less/app.less

@@ -2060,6 +2060,35 @@ a.im_message_fwd_photo {
   /*font-weight: bold;*/
 }
 
+.reply_markup_wrap {
+  margin: 0 -2px 5px;
+}
+.reply_markup_button_wrap {
+  display: inline-block;
+  padding: 2px 2px;
+}
+.reply_markup_button {
+  display: block;
+  width: 100%;
+  background: #EEE;
+  margin: 0;
+}
+.reply_markup_button:hover {
+  background: #DDD;
+}
+.reply_markup_button_w1 {width: 100%;}
+.reply_markup_button_w2 {width: 50%;}
+.reply_markup_button_w3 {width: 33.3333333%;}
+.reply_markup_button_w4 {width: 25%;}
+.reply_markup_button_w5 {width: 20%;}
+.reply_markup_button_w6 {width: 16.6666666%;}
+.reply_markup_button_w7 {width: 14.2857142%;}
+.reply_markup_button_w8 {width: 12.5%;}
+.reply_markup_button_w9 {width: 11.1111111%;}
+.reply_markup_button_w10 {width: 10%;}
+.reply_markup_button_w11 {width: 9.09090909%;}
+.reply_markup_button_w12 {width: 8.33333333%;}
+
 .im_history_not_selected,
 .im_history_empty {
   visibility: hidden;

app/partials/desktop/im.html

@@ -172,6 +172,10 @@
                       <div my-reply-message="draftMessage.replyToMessage"></div>
                     </div>
 
+                    <div class="im_send_keyboard_wrap" ng-if="historyState.replyKeyboard._ == 'replyKeyboardMarkup'">
+                      <div my-reply-markup="historyState.replyKeyboard"></div>
+                    </div>
+
                     <div class="im_send_field_wrap">
                       <a class="composer_emoji_insert_btn"><i class="icon icon-emoji"></i></a>
 

app/partials/desktop/reply_markup.html

@@ -0,0 +1,7 @@
+<div class="reply_markup_wrap">
+  <div class="reply_markup_row" ng-repeat="row in replyMarkup.rows">
+    <div class="reply_markup_button_wrap" ng-class="'reply_markup_button_w' + row.buttons.length" ng-repeat="button in row.buttons">
+      <button class="btn reply_markup_button" ng-bind-html="::button.rText" ng-click="buttonSend(button)"></button>
+    </div>
+  </div>
+</div>

app/partials/desktop/user_modal.html

@@ -38,7 +38,7 @@
 
         <div class="md_modal_section_param_wrap" ng-if="user.pFlags.bot &amp;&amp; bot_info.rAbout">
           <div class="md_modal_section_param_value">
-            <span ng-bind="bot_info.rAbout"></span>
+            <span ng-bind-html="bot_info.rAbout"></span>
           </div>
           <div class="md_modal_section_param_name" my-i18n="user_modal_about"></div>
         </div>