inline bots wip

app/js/controllers.js

@@ -2099,6 +2099,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     };
     $scope.mentions = {};
     $scope.commands = {};
+    $scope.inlineResults = {};
     $scope.$watch('draftMessage.text', onMessageChange);
     $scope.$watch('draftMessage.files', onFilesSelected);
     $scope.$watch('draftMessage.sticker', onStickerSelected);
@@ -2389,7 +2390,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       return cancelEvent($event);
     }
 
-    var inlineUsernameRegex = /^@([a-zA-Z\d_]{1,32}) /;
+    var inlineUsernameRegex = /^@([a-zA-Z\d_]{1,32}) ([\s\S]*)$/;
     var lastInlineBot = false;
     function onMessageChange(newVal) {
       // console.log('ctrl text changed', newVal);
@@ -2405,16 +2406,27 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         Storage.set(backupDraftObj);
         // console.log(dT(), 'draft save', backupDraftObj);
 
-        var matches;
+        var matches = newVal.match(inlineUsernameRegex);
-        if (matches = newVal.match(inlineUsernameRegex)) {
+        if (matches) {
-          AppPeersManager.resolveInlineMention(matches[1]).then(function (placeholder) {
+          $scope.draftMessage.inlineProgress = true;
-            $scope.draftMessage.inlinePlaceholder = placeholder;
+          AppPeersManager.resolveInlineMention(matches[1]).then(function (inlineBot) {
+            $scope.draftMessage.inlinePlaceholder = inlineBot.placeholder;
+            AppMessagesManager.getInlineResults(inlineBot.id, matches[2], '').then(function (botResults) {
+              $scope.inlineResults = botResults;
+              console.log('results', botResults);
+              delete $scope.draftMessage.inlineProgress;
+            }, function () {
+              delete $scope.draftMessage.inlineProgress;
+            });
           }, function () {
-
+            delete $scope.draftMessage.inlinePlaceholder;
-          })
+            delete $scope.draftMessage.inlineProgress;
+          });
         }
       } else {
         Storage.remove('draft' + $scope.curDialog.peerID);
+        delete $scope.draftMessage.inlinePlaceholder;
+        delete $scope.draftMessage.inlineProgress;
         // console.log(dT(), 'draft delete', 'draft' + $scope.curDialog.peerID);
       }
     }

app/js/directives.js

@@ -1517,16 +1517,11 @@ angular.module('myApp.directives', ['myApp.filters'])
         getSendOnEnter: function () {
           return sendOnEnter;
         },
-        getPeerImage: function (element, peerID, noReplace) {
+        dropdownDirective: function (element, callback) {
-          if (cachedPeerPhotos[peerID] && !noReplace) {
-            element.replaceWith(cachedPeerPhotos[peerID]);
-            return;
-          }
           var scope = $scope.$new(true);
-          scope.peerID = peerID;
+          $compile('<div my-composer-dropdown></div>')(scope, function (clonedElement) {
-          peerPhotoCompiled(scope, function (clonedElement) {
-            cachedPeerPhotos[peerID] = clonedElement;
             element.replaceWith(clonedElement);
+            callback(scope, clonedElement);
           });
         },
         mentions: $scope.mentions,
@@ -3289,7 +3284,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         var width = attrs.width || element.width() || 40;
         var stroke = attrs.stroke || (width / 2 * 0.14);
         var center = width / 2;
-        var radius = center - stroke;
+        var radius = center - (stroke / 2);
 
         // Doesn't work without unique id for every gradient
         var curNum = ++num;
@@ -3345,3 +3340,63 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
 
   })
+
+  .directive('myComposerDropdown', function () {
+
+    return {
+      templateUrl: templateUrl('composer_dropdown')
+    }
+  })
+
+  .directive('myEmojiSuggestions', function () {
+
+    return {
+      link: function($scope, element, attrs) {
+        $scope.$watchCollection('emojiCodes', function (codes) {
+          // var codes = $scope.$eval(attrs.myEmojiSuggestions);
+          var html = [];
+          var iconSize = Config.Mobile ? 26 : 20;
+
+          var emoticonCode, emoticonData, spritesheet, pos, categoryIndex;
+          var count = Math.min(5, codes.length);
+          var i, x, y;
+
+          for (i = 0; i < count; i++) {
+            emoticonCode = codes[i];
+            if (emoticonCode.code) {
+              emoticonCode = emoticonCode.code;
+            }
+            if (emoticonData = Config.Emoji[emoticonCode]) {
+              spritesheet = EmojiHelper.spritesheetPositions[emoticonCode];
+              categoryIndex = spritesheet[0];
+              pos = spritesheet[1];
+              x = iconSize * spritesheet[3];
+              y = iconSize * spritesheet[2];
+              html.push('<li><a class="composer_emoji_option" data-code="' + encodeEntities(emoticonCode) + '"><i class="emoji emoji-w', iconSize, ' emoji-spritesheet-' + categoryIndex + '" style="background-position: -' + x + 'px -' + y + 'px;"></i><span class="composer_emoji_shortcut">:' + encodeEntities(emoticonData[1][0]) + ':</span></a></li>');
+            }
+          }
+          onContentLoaded(function () {
+            element.html(html);
+          });
+        });
+      }
+    };
+
+  })
+
+  .directive('myInlineResults', function () {
+
+    return {
+      templateUrl: templateUrl('inline_results'),
+      scope: {
+        botResults: '=myInlineResults'
+      },
+
+      link: function  ($scope, element, attrs) {
+        $scope.$watch('botResults.results.length', function (show) {
+          console.log($scope.botResults, show);
+        });
+      }
+    }
+  })
+

app/js/message_composer.js

@@ -674,13 +674,51 @@ EmojiPanel.prototype.update = function () {
 
 
 function MessageComposer (textarea, options) {
+  var self = this;
+
   this.textareaEl = $(textarea);
 
   this.setUpInput();
 
   this.autoCompleteWrapEl = $('<div class="composer_dropdown_wrap"></div>').appendTo(document.body);
-  this.autoCompleteEl = $('<ul class="composer_dropdown dropdown-menu"></ul>').appendTo(this.autoCompleteWrapEl);
+  var autoCompleteEl = $('<div></div>').appendTo(this.autoCompleteWrapEl);
 
+  options.dropdownDirective(div, function (scope, autoCompleteEl) {
+    self.autoCompleteEl = autoCompleteEl;
+    self.autoCompleteScope = scope;
+    self.setUpAutoComplete();
+  });
+
+  this.isActive = false;
+
+  this.onTyping = options.onTyping;
+  this.onMessageSubmit = options.onMessageSubmit;
+  this.getSendOnEnter = options.getSendOnEnter;
+  this.onFilePaste = options.onFilePaste;
+  this.onCommandSend = options.onCommandSend;
+  this.mentions = options.mentions;
+  this.commands = options.commands;
+}
+
+MessageComposer.autoCompleteRegEx = /(\s|^)(:|@|\/)([A-Za-z0-9\-\+\*@_]*)$/;
+
+
+MessageComposer.prototype.setUpInput = function () {
+  if ('contentEditable' in document.body) {
+    this.setUpRich();
+  } else {
+    this.setUpPlaintext();
+  }
+
+  if (!Config.Mobile) {
+    var sbWidth = getScrollWidth();
+    if (sbWidth) {
+      (this.richTextareaEl || this.textareaEl).css({marginRight: -sbWidth});
+    }
+  }
+}
+
+MessageComposer.prototype.setUpAutoComplete = function () {
   this.scroller = new Scroller(this.autoCompleteEl, {maxHeight: 180});
 
   var self = this;
@@ -707,35 +745,6 @@ function MessageComposer (textarea, options) {
     }
     return cancelEvent(e);
   });
-
-  this.isActive = false;
-
-  this.onTyping = options.onTyping;
-  this.onMessageSubmit = options.onMessageSubmit;
-  this.getSendOnEnter = options.getSendOnEnter;
-  this.onFilePaste = options.onFilePaste;
-  this.mentions = options.mentions;
-  this.commands = options.commands;
-  this.getPeerImage = options.getPeerImage;
-  this.onCommandSend = options.onCommandSend;
-}
-
-MessageComposer.autoCompleteRegEx = /(\s|^)(:|@|\/)([A-Za-z0-9\-\+\*@_]*)$/;
-
-
-MessageComposer.prototype.setUpInput = function () {
-  if ('contentEditable' in document.body) {
-    this.setUpRich();
-  } else {
-    this.setUpPlaintext();
-  }
-
-  if (!Config.Mobile) {
-    var sbWidth = getScrollWidth();
-    if (sbWidth) {
-      (this.richTextareaEl || this.textareaEl).css({marginRight: -sbWidth});
-    }
-  }
 }
 
 MessageComposer.prototype.setUpRich = function () {
@@ -1353,8 +1362,7 @@ MessageComposer.prototype.blur = function () {
   }
 }
 
-MessageComposer.prototype.renderSuggestions = function (html) {
+MessageComposer.prototype.renderSuggestions = function () {
-  this.autoCompleteEl.html(html.join(''));
   this.autoCompleteWrapEl.show();
   this.scroller.reinit();
   this.updatePosition();
@@ -1362,72 +1370,35 @@ MessageComposer.prototype.renderSuggestions = function (html) {
 }
 
 MessageComposer.prototype.showEmojiSuggestions = function (codes) {
-  var html = [];
+  var self = this;
-  var iconSize = Config.Mobile ? 26 : 20;
+  this.autoCompleteScope.$apply(function () {
-
+    self.autoCompleteScope.type = 'emoji';
-  var emoticonCode, emoticonData, spritesheet, pos, categoryIndex;
+    self.autoCompleteScope.emojiCodes = codes;
-  var count = Math.min(5, codes.length);
+  });
-  var i, x, y;
+  onContentLoaded(function () {
-
+    self.renderSuggestions();
-  for (i = 0; i < count; i++) {
+  });
-    emoticonCode = codes[i];
-    if (emoticonCode.code) {
-      emoticonCode = emoticonCode.code;
-    }
-    if (emoticonData = Config.Emoji[emoticonCode]) {
-      spritesheet = EmojiHelper.spritesheetPositions[emoticonCode];
-      categoryIndex = spritesheet[0];
-      pos = spritesheet[1];
-      x = iconSize * spritesheet[3];
-      y = iconSize * spritesheet[2];
-      html.push('<li><a class="composer_emoji_option" data-code="' + encodeEntities(emoticonCode) + '"><i class="emoji emoji-w', iconSize, ' emoji-spritesheet-' + categoryIndex + '" style="background-position: -' + x + 'px -' + y + 'px;"></i><span class="composer_emoji_shortcut">:' + encodeEntities(emoticonData[1][0]) + ':</span></a></li>');
-    }
-  }
-
-  this.renderSuggestions(html);
 }
 
 MessageComposer.prototype.showMentionSuggestions = function (users) {
-  var html = [];
-  var user;
-  var count = users.length;
-  var i;
-
-  for (i = 0; i < count; i++) {
-    user = users[i];
-    html.push('<li><a class="composer_mention_option" data-mention="' + user.username + '"><span class="composer_user_photo" data-user-id="' + user.id + '"></span><span class="composer_user_name">' + user.rFullName + '</span><span class="composer_user_mention">@' + user.username + '</span></a></li>');
-  }
-
-  this.renderSuggestions(html);
   var self = this;
-  this.autoCompleteEl.find('.composer_user_photo').each(function (k, element) {
+  this.autoCompleteScope.$apply(function () {
-    self.getPeerImage($(element), element.getAttribute('data-user-id'));
+    self.autoCompleteScope.type = 'mentions';
+    self.autoCompleteScope.mentionUsers = users;
+  });
+  onContentLoaded(function () {
+    self.renderSuggestions();
   });
 }
 
 MessageComposer.prototype.showCommandsSuggestions = function (commands) {
-  var html = [];
-  var command;
-  var count = Math.min(200, commands.length);
-  var i;
-
-  for (i = 0; i < count; i++) {
-    command = commands[i];
-    html.push('<li><a class="composer_command_option" data-command="' + encodeEntities(command.value) + '"><span class="composer_user_photo" data-user-id="' + command.botID + '"></span><span class="composer_command_value">' + encodeEntities(command.value) + '</span><span class="composer_command_desc">' + command.rDescription + '</span></a></li>');
-  }
-
-  this.renderSuggestions(html);
-
   var self = this;
-  var usedImages = {};
+  this.autoCompleteScope.$apply(function () {
-  this.autoCompleteEl.find('.composer_user_photo').each(function (k, element) {
+    self.autoCompleteScope.type = 'commands';
-    var noReplace = true;
+    self.autoCompleteScope.commands = commands;
-    var botID = element.getAttribute('data-user-id');
+  });
-    if (!usedImages[botID]) {
+  onContentLoaded(function () {
-      usedImages[botID] = true;
+    self.renderSuggestions();
-      noReplace = false;
-    }
-    self.getPeerImage($(element), botID, noReplace);
   });
 }
 

app/js/messages_manager.js

@@ -3010,7 +3010,31 @@ angular.module('myApp.services')
         };
       }
     })
-  })
+  });
+
+  var inlineResults = {};
+  function getInlineResults (botID, query, offset) {
+    return MtpApiManager.invokeApi('messages.getInlineBotResults', {
+      bot: AppUsersManager.getUserInput(botID),
+      query: query,
+      offset: offset
+    }).then(function(botResults) {
+      var queryID = botResults.query_id;
+      delete botResults._;
+      delete botResults.flags;
+      delete botResults.query_id;
+      angular.forEach(botResults.results, function (result) {
+        var qID = queryID + '_' + result.id;
+        result.qID = qID;
+
+        result.rTitle = RichTextProcessor.wrapRichText(result.title, {noLinebreaks: true, noLinks: true});
+        result.rDescription = RichTextProcessor.wrapRichText(result.description, {noLinebreaks: true, noLinks: true});
+
+        inlineResults[qID] = result;
+      });
+      return botResults;
+    });
+  }
 
   return {
     getConversations: getConversations,
@@ -3033,6 +3057,7 @@ angular.module('myApp.services')
     getMessagePeer: getMessagePeer,
     getMessageThumb: getMessageThumb,
     clearDialogCache: clearDialogCache,
+    getInlineResults: getInlineResults,
     wrapForDialog: wrapForDialog,
     wrapForHistory: wrapForHistory,
     wrapReplyMarkup: wrapReplyMarkup,

app/js/services.js

@@ -949,7 +949,10 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
       if (peerID > 0) {
         var bot = AppUsersManager.getUser(peerID);
         if (bot.pFlags.bot && bot.bot_inline_placeholder !== undefined) {
-          return bot.bot_inline_placeholder;
+          return qSync.when({
+            id: peerID,
+            placeholder: bot.bot_inline_placeholder
+          });
         }
       }
       return $q.reject();

app/less/app.less

@@ -434,6 +434,10 @@ a {
     animation:          infinite_rotation 0.8s linear infinite;
   }
 
+  .composer_progress_icon & {
+    stroke: rgba(0,0,0,0.3);
+  }
+
   .progress-arc-percent & {
     stroke: #FFF;
     stroke: rgba(255,255,255,0.95);
@@ -449,14 +453,23 @@ a {
 .stop0 {
   stop-opacity: 1.0;
   stop-color: #68a4d1;
+  .composer_progress_icon & {
+    stop-color: rgba(0,0,0,0.3);
+  }
 }
 .stop60 {
   stop-opacity: 1.0;
   stop-color: #68a4d1;
+  .composer_progress_icon & {
+    stop-color: rgba(0,0,0,0.3);
+  }
 }
 .stop100 {
   stop-opacity: 0.0;
   stop-color: #68a4d1;
+  .composer_progress_icon & {
+    stop-color: rgba(0,0,0,0.3);
+  }
 }
 
 /* Infinite rotation */
@@ -2485,7 +2498,27 @@ img.img_fullsize {
 }
 
 /* Message composer */
+.composer_progress_icon {
+  display: block;
+  opacity: 0;
+  position: absolute;
+  right: 3px;
+  top: 2px;
+  cursor: pointer;
+  padding: 0;
+
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
+  transition: opacity cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
+  pointer-events: none;
+
+  .composer_progress_enabled & {
+    opacity: 1;
+  }
+}
 .composer_emoji_insert_btn {
+  opacity: 1;
   display: block;
   position: absolute;
   right: 3px;
@@ -2496,7 +2529,13 @@ img.img_fullsize {
   width: 22px;
   height: 22px;
   margin-top: 1px;
+  transition: opacity cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
+
+  .composer_progress_enabled & {
+    opacity: 0;
+  }
 }
+
 .icon-emoji {
   display: inline-block;
   width: 22px;
@@ -3093,6 +3132,46 @@ _:-ms-lang(x), .composer_rich_textarea:empty:focus:before {
   }
 }
 
+.im_send_form_inline_results {
+  position: relative;
+  display: none;
+}
+.inline_results_wrap {
+  position: absolute;
+  bottom: 0;
+  background: #FFF;
+  border: 0;
+
+  .box-shadow(0px 1px 1px 0px rgba(60,75,87,0.27));
+
+  // margin-top: -5px;
+  // margin-left: -1px;
+  // position: static;
+  display: block;
+  float: none;
+  top: auto;
+  left: auto;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  z-index: auto;
+}
+
+.inline_result_wrap {
+  display: block;
+  font-size: 13px;
+  line-height: 15px;
+  padding: 4px 10px;
+  color: #52719a;
+
+  &:hover,
+  &.composer_autocomplete_option_active {
+    color: #52719a;
+    background: #f2f6fa;
+  }
+}
+
 
 .error_modal_window {
   .modal-dialog {

app/partials/desktop/composer_dropdown.html

@@ -0,0 +1,27 @@
+<div ng-switch="type">
+
+  <ul ng-switch-when="mentions" class="composer_dropdown">
+    <li ng-repeat="user in users">
+      <a class="composer_mention_option" data-mention="{{user.username}}">
+        <span class="composer_user_photo" my-peer-photolink="user.id" img-class="composer_user_photo"></span>
+        <span class="composer_user_name" ng-bind-html="user.rFullName"></span>
+        <span class="composer_user_mention" ng-bind="'@' + user.username"></span>
+      </a>
+    </li>
+  </ul>
+
+  <ul ng-switch-when="commands" class="composer_dropdown">
+    <li ng-repeat="command in commands track by (command.botID + command.value)">
+      <a class="composer_command_option" data-command="{{command.value}}">
+        <span class="composer_user_photo" my-peer-photolink="command.botID" img-class="composer_user_photo"></span>
+        <span class="composer_command_value" ng-bind="command.value"></span>
+        <span class="composer_command_desc" ng-bind-html="command.rDescription"></span>
+      </a>
+    </li>
+  </ul>
+
+  <ul ng-switch-when="emoji" my-emoji-suggestions="emojiCodes" class="composer_dropdown"></ul>
+
+  <div ng-switch-when="inline" my-inline-results="botResults"></div>
+
+</div>

app/partials/desktop/im.html

@@ -182,7 +182,9 @@
                   </a>
                   <a class="pull-left im_panel_own_photo" my-peer-photolink="draftMessage.isBroadcast ? historyPeer.id : ownID" img-class="im_panel_own_photo" watch="true" ng-click="openSettings()" no-open="true"></a>
 
-                  <form my-send-form draft-message="draftMessage" mentions="mentions" commands="commands" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}">
+                  <form my-send-form draft-message="draftMessage" mentions="mentions" commands="commands" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length, composer_progress_enabled: draftMessage.inlineProgress}">
+
+                    <div class="im_send_form_inline_results" my-inline-results="inlineResults"></div>
 
                     <div class="im_send_reply_wrap" ng-if="draftMessage.replyToMessage != null">
                       <a class="im_send_reply_cancel" ng-mousedown="draftMessage.replyClear()"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
@@ -196,6 +198,7 @@
 
                     <div class="im_send_field_wrap" ng-class="historyState.replyKeyboard._ == 'replyKeyboardMarkup' ? 'im_send_field_wrap_2ndbtn' : ''">
                       <a class="composer_emoji_insert_btn"><i class="icon icon-emoji"></i></a>
+                      <div class="composer_progress_icon" my-arc-progress width="22" stroke="2.5"></div>
                       <a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && (!draftMessage.text.length || draftMessage.text[0] == '/')" ng-mousedown="toggleSlash($event)" ng-class="draftMessage.text[0] == '/' ? 'active' : ''"><i class="icon icon-slash"></i></a>
                       <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-mousedown="replyKeyboardToggle($event)" ng-class="!historyState.replyKeyboard.pFlags.hidden ? 'active' : ''"><i class="icon icon-keyboard"></i></a>
 

app/partials/desktop/inline_results.html

@@ -0,0 +1,15 @@
+<div class="inline_results_wrap">
+  <div class="inline_result_wrap" ng-repeat="result in botResults.results track by result.qID" ng-switch="result.type">
+    <div ng-switch-default class="inline_result_">
+      <div class="inline_article_thumb_wrap pull-left" ng-switch="result.thumbUrl.length > 0">
+        <img ng-switch-when="true" ng-src="{{result.thumbUrl}}"/>
+        <div ng-switch-default class="inline_article_thumb_initials" ng-bind="result.initials"></div>
+      </div>
+      <div class="inline_article_content_wrap">
+        <div class="inline_article_title" ng-if="::result.title.length > 0" ng-bind-html="::result.rTitle"></div>
+        <div class="inline_article_description" ng-if="::result.description.length > 0" ng-bind-html="::result.rDescription"></div>
+        <div class="inline_article_url" ng-if="::result.url.length > 0" ng-bind="::result.url"></div>
+      </div>
+    </div>
+  </div>
+</div>