Merge pull request #669 from wireapp/staging

release 2017-01-23

.gitignore

@@ -11,6 +11,7 @@
 /aws/static
 /aws/templates/**/*.html
 /aws/templates/auth
+/aws/templates/sw.js
 /aws/version
 /bower_components
 /deploy
@@ -19,6 +20,7 @@
 /keys
 /nbproject
 /node_modules
+/tags
 /temp
 /test/_SpecRunner.html
 /test/coverage

.travis.yml

@@ -8,11 +8,11 @@ env:
     # RAYGUN_USERNAME
     - secure: "F+G6JgvLfvXjSmbDrV7VWefMbAD1qaA3aSIRF2OIwJMa9h6h4F3jYaX7w3+5BVBZnoMwl7XJC7tL732aIN4rr7l+VgAB8YjAzwbnTk19LS2/g4DrIBz6GVfBOFQtG9gMtpdJJmW8Xo3bDBuOXrGE2dZipz0E46NrHIp7JtEmqnv2DSLD0RwuCS+KMwtKzO8j9ZePrdNB66IxF/hPAeHOcyQg9t/7+szxXzX58rvqjVdgbLWyt16ZoVgNInuOrECricBJ8k7A5NzCjunvOsSE3YnNe86FRycpQd+XLvozqq3ZGvwuWKHzx6PfnqEEPKVNRun9deiv08BvTVxaqr4bK8pDMZEtqlL83WQcucB1uR+ldOYnG/DVfjgoGJ5kVmEyuUJu4CwTP1GkG0+vl/Bezkvzwt00k2d22x2jdKcdICAfzSXi2cz2SqeSSxF+L4n7Eml+G8a0NyIi/ZzVLQvaW4uZc+AK+Skz2q1HCp3POU0rX9I3cQKvq703oBRmkZjZLO16gySW9DMnlwIqDrIDOAYKG8ETwYIRPqm0juwAC7WkRgGJK+DWDwv2EEJbSD1urUMRUiuJkcXa8fWTPHV5/tA89JRsAqrgYPh+u6GjV9P00u/3boZqnMDPMtPUZVxfKUjcWA0HimfvP/Z+98i40Pg2GF6yUlpy1pMypfrp5jI="
     # RAYGUN_PASSWORD
-    - secure: "EfmwyVuqyg1KkB4Zdnm7GGBV9f7aBK2ZmKvDJH8avBhDCynyxCGh3aQ8gW1fpUdtEwA7J6d7ZY71SNugiPzCuhM/P9mUMrHXYvQ+ENun1RFRhVqYXx1f4LYNcN9nuOTWnpupdAmy13+qa/4tPorkCey3GwlqmB+n0Gx22gMGf2H/RqDQd0yApkffEdCjQiTFkTmqpNhW1Y9mqr6RoWsOYibOVT9Zh07l+yX17KzBkEzMYTCZrzRE45TP6dHPgN4faBAZS3L50K+VAJzqwPUecfsNHKufHvHj6CdniE9FdDZ1YtwQXY9HEzvJtyqLPogq+FWNJoiQgQqZZtkJctRX07jcL0GZIOsrirIlfAln8Kh+lcAa0cqpOERvxxBE2m+y97JzAak2gFEYMt9x6nfQKemr8ILJX83VgOG22/OgXls1gSR2VnBag6rjR0foXNwKmjX7HDnRLGO+bwzvthtcHjgOE1b7jLl/3YrBNFxuy+XY/jOSJSVBRGwBCBBSNZZRfY8XwMOgaIvuR3P7dJ+QHUzBjkO1JI05yQhTcp9aXfud2MevhZNDwfCNjoemy2b5JUPyKP1/dnBttm0fOmXu+2bk7nmz0XKm0bsQQ94aL3bq6fg5J8nSafX8L4K5LacovUHt/i1H90fvuMuSZ7uhg+cEmSj6VrclA4qFwL6cvtk="
-    # JENKINSBOT_URL
-    - secure: "UPMMBeWnHOWicDzMnY4VQe985dPFVGRbNJvjMhkIIxukJ6cNY7LMjBycxZw2D8/X78Qoh0/DZa2SSrqbs38DaNSc9xVLq4tSY0Rl/TriNM0F/PzTJkSrMXeFecbWEFWhTI48RIjNG/d0RdINI+cXEkIk9ZPMRhR3SpRm6KYBTcAMKSMe4WYN7DonNlNrgjec+8lZ8NqLaz4mq1KqPqcTdyyAPXeoiFJ3uYIJ20qy5zcATeLGLF+5avnh+/npSJZWAokYdixqKeokTIii0Dv12+eJHM7/55fmVlZlwAFWGq0mLHkXsp+vOC+7QdkXklvPghciP/B8/EcUp/20iU3/z9gNae6FGRdZorrJMt3CDQW22+iScEfLzGw2MFJaJUzWhCF5lEZ6OeG2TNkliC8vD9UTpeon1arYJfi8AMjDNXUHFMYFBqgM9AWkoawhwV07Vi2As0035UjFDHiKhNRkFQjKNUsOLH1yFoSWYVqTfV8ZzJEzSc2hHkHeK5Yhpk9gGP0GknEBfEEMoWLk2UulmMsYDDdxri5HHIQhgx5vcblckRzkuPk2u1w7vJDHLng6UhwjT7Cc+08JUcmVMghugmC943+VK/DQTiebW9m8SpavA9S8qNhGOGzJRmWbdpYlG3lSKxIp/Oai7mwwnA+Ub98nFKL5fDtes8Kz3Ko4Eu0="
-    # JENKINSBOT_SECRET_FOR_RELEASES
-    - secure: "IQtG8HFlSGbXBW/9tmxTBS8mQqaKUA4RqNQz0DM/nNk3vHqN/i5emiGqaALoTCNMM0IqLOcfx/J9PgGvMUTXto84DXPN2PTqhhs5W9tRcS6zYWt7CJoOxyUUjZ30Xy5OBUji9/56518Bgtg+4Oqeo5JYOFm9XIprVqnUY3zUWXAJVIsBiPQrzBE+hk4OvGGV4cXMW67Zu6TpTP+SoY4fqxyhsyJXhQYGyqPzKYMYP5bKH75pHm/ohzrRNeCHPFtoRU3fNS2aZg2Fr75tgD8D6S1BR5JV71CvqTY+BDekjs2MM4jXJhDBtNJt2Z3aFPcKs32RVoB+KRj8xEqVfD5943eoMiOrTbDBz7GlyZM5ttp1VSTEKA1VfgwX7irRE+3na02pXSU8Gf/wQBpQuqktgig5sZi1t5Ksgd0Amwoz+QiZ6AVo1Cc79ir31hRk8EIhQ8pLB+PIU+cdLdKI3YcbzTxjGlcyqi8yO5C/vBku3kICNUhP3+HIcJe3MAwj62UIrTyt/VL59ekkxX66ryCDW70Z6UkoMPJyb8ADVP96AakreE0OhtqZwRHFvVagiAE65lOvLPc8rFTuh7o+oGSBTkzWp7b8YJyWMCUH30/ih1zef+2hOHEUPjdcYQDRsH4AsRTjxgkkaZCAumJIekvzrA89axPLxADRQlorB/hX2z8="
+    - secure: "voLf9KMrK+9bO3z19nhKkTXMxaGtIazachYW1LT2kTTPQ3atu2bUZAemJBPN2VxOcaCUUi59Bpsxa0DO2QsjpuRsqjD8+meDuKv43WpMxxPDKFyDVAnX6DqdDz1fO9wDa4kTGhwTQONFENlH23BiVQhRhJFV2QL6F9Sv/nVMqFciReYnkkuhfmp2D5aYeZlRQ968JRV0awpY6D2jJ/A77JF79uKMh41bMFCmjW3qkdTZevxfYPRU4MN7QPQS3TD/WGNz/HSdUmBqLSi6VGuqRZqMoiAbLeM+NbYEoQ3XzTAT+5Tw+ipc/0rI20aeeot1m/b432guvdWuuEM4MNfrOMeyCdDdZnjG2VQJO3VT+Gl53qmObsF8EyT4AJbieYpjVhrxcoVRHTBjO5qZJX+CO+Xmoa+BpA5NGsvOn02MJU9RkbAsC3QpB6ClEABcVnFr1fdeHfWV/FBkeQrdHZlAbIsANMKJzn+7FNZlDe9IW9rrxY+j1iAwUuappvZctA3Ceu9c7SC8T8uTgKLHEkIMsl63pTDf9r/HzdrLszIFVG8hsSThzXt6TdQLTbnr8D0zjjGRZ4Cogw/2RuqY+icQQXWeYv1zpsYqPMV4F4yDEz8WFpOFNcIYiyFQX2uOfp/bsEGSoC9SP7suzYI93Kf9szJurfIdmLYmCnEMts8NMiw="
+    # WIRE_WEBAPP_BOT_EMAIL
+    - secure: "cRgk2yvpezpf2/Z/49wgJ1rm8i3e7h7nAOkbF8ykOcka9VanaGy5pn2JJs9/EMEBbKK8+tUkD9MKm1k4xd2qotxXZsOeonvzMV5yBcF/XZ887vW7FByvfFQ9iqSq+VA7sgUr6qr6+N51Wp4DZh++ojFBh6D8LB1hHqKCCRnM2PFECrMG03CXVc0rbSNLdGh7xm11pCteLxANciQv9xCUAVCyQNy3QorEczTyY50k/0nT29Axqn2FFjaLnLtG+nM7ufLaySPfOVAnWX7sb2yf08yC38bBktwnpbWKjJlveK6aFA4LVuj7eXLTfA1DF/0AUmlk0MNmUPCHz7Xo+YLLIua8+Rms6bzLCeUswJyDp69/2WdidrTUDNtRjNQ2BkNowfhOOuSrsf/3WLP/Sli9fX7G70RBHICBNZ3qJ40V8PkQJTKTQYUtVL7cmnH94OjBxy/rwmBfHQSa4zx8JNFn+IDHCATVb7RIPARTHBiAK+C0kne/Ito0k59MLbWiic+y+1Y2CtDHJqlgxYMMSnrPd3+4z0/LFbkMwnyL3QQlt1U4kFn4XOlOSp6aHg5ke2HGueQBiUJcfj52rbLRceBay9A+HrNLfVhzDTiUUbkfx544sdUv8PyITpZxYXKrGSqvIvDUFOA5rwj90NwwokTi+tHzPTbbDFYRn0IvNdHCJbo="
+    # WIRE_WEBAPP_BOT_PASSWORD
+    - secure: "U9Fq+z04H9EbI55M6VDAVelLtETVSS9oNNCJo5llDSij0pjrNZpxj3MeKhRZQc8yiZ4hOC5nUbNPHpvIKBkw+xD/Pg32t6SVZl4ZSDPm3XZTFYpWj/U/NB+/l/ivK4bNmx62hLOL8Dhr5A67UlwwCr4tYVmLu7wcUNwgtkyAii1mqoAC0yT4qzDQBalGAk/Q+ZatmjAZM/5ZU8H3jags0+bubJlJKlU0YOmSzXFdFSQLFMQSwEeVEH7vMIkOmFIK6L6qveSDJDmNj2tvgn8ZLr6p7TvOLovGbfPiNKcrEyeADJQrG0J3IQ6dHYOCIN1SzibdJEWqluk6T/N0mNq27AKEzXsV8VHl6VAnswxAq1pljlGF5Nj0OUt5JAUzavbt7tw3TBwC96+55YJdvPZ9ESg2S4afj94nEUISLldNDVEQPBUt4qfkTznKMOeBNzVItO9IhSQK65wUQ07//nxHsV38GMMKMWhtujFrqhAdtC6TCBGVxdCYQziCKW3xsmt2nNosxIkxESF9Osw7A5YbjwoREu7nIZOA0TYrJxZRz0AlV1D1WfNv/7KP5J0LQCR90jdoAnTvkTP4+WfX7C8UkyowpxpBUKvbe9d65cYTCzN69eT/lEQBmQz06Y8Wh+ou5q4BeNQmfgwUK7tYr1/vY9DqNskpaLyJsXKPO+gkTm4="
 
 # https://docs.travis-ci.com/user/installing-dependencies/#Installing-Packages-with-the-APT-Addon
 addons:
@@ -25,7 +25,7 @@ addons:
 # http://docs.travis-ci.com/user/languages/javascript-with-nodejs/
 language: node_js
 node_js:
-  - 6
+  - "6"
 
 # https://blog.travis-ci.com/2013-12-05-speed-up-your-builds-cache-your-dependencies
 cache:
@@ -103,5 +103,8 @@ deploy:
       branch: prod
 
 after_deploy:
-  - chmod ugo+x ./bin/deployment_notification.sh
-  - ./bin/deployment_notification.sh
+  - "AUTHOR_OF_LAST_COMMIT=$(git log | grep Author: | cut -d' ' -f2- | uniq | head -n1)"
+  - "SUMMARY_OF_LAST_COMMIT=$(git log -1 --pretty=%s)"
+  - npm install [email protected]
+  - chmod ugo+x ./bin/deployment_notification.js
+  - node ./bin/deployment_notification.js "$AUTHOR_OF_LAST_COMMIT" "$SUMMARY_OF_LAST_COMMIT"

README.md

@@ -34,3 +34,7 @@ Run `yarn start` and Wire's web app will be available at:
 ### Status
 
 [![Build Status](https://travis-ci.org/wireapp/wire-webapp.svg?branch=dev)](https://travis-ci.org/wireapp/wire-webapp)
+
+### Translations
+
+All Wire translations are crowdsourced via [Crowdin](https://crowdin.com/projects/wire).

app/page/template/_dist/app.htm

@@ -9,7 +9,9 @@
 <script src="/script/util/protobuf.js"></script>
 <script src="/script/util/keycode.js"></script>
 <script src="/script/util/KeyUtil.js"></script>
+<script src="/script/util/LocalizerUtil.js"></script>
 <script src="/script/util/marked.js"></script>
+<script src="/script/util/moment.js"></script>
 <script src="/script/util/confirm.js"></script>
 <script src="/script/util/PromiseQueue.js"></script>
 <script src="/script/util/scroll-helpers.js"></script>
@@ -49,6 +51,7 @@
 <!-- Localization -->
 <script src="/script/localization/strings-init.js"></script>
 <script src="/script/localization/strings-cs.js"></script>
+<script src="/script/localization/strings-da.js"></script>
 <script src="/script/localization/strings-de.js"></script>
 <script src="/script/localization/strings-es.js"></script>
 <script src="/script/localization/strings-fi.js"></script>
@@ -131,14 +134,16 @@
 <script src="/script/location/GeoLocation.js"></script>
 <!-- Conversation -->
 <script src="/script/conversation/ConversationError.js"></script>
-<script src="/script/conversation/ConversationType.js"></script>
+<script src="/script/conversation/ConversationMapper.js"></script>
+<script src="/script/conversation/ConversationRepository.js"></script>
+<script src="/script/conversation/ConversationService.js"></script>
+<script src="/script/conversation/ConversationServiceNoCompound.js"></script>
 <script src="/script/conversation/ConversationStatus.js"></script>
+<script src="/script/conversation/ConversationType.js"></script>
 <script src="/script/conversation/ConversationUnreadType.js"></script>
 <script src="/script/conversation/ConversationUpdateType.js"></script>
-<script src="/script/conversation/ConversationService.js"></script>
+<script src="/script/conversation/ConversationVerificationState.js"></script>
 <script src="/script/conversation/EventMapper.js"></script>
-<script src="/script/conversation/ConversationMapper.js"></script>
-<script src="/script/conversation/ConversationRepository.js"></script>
 <!-- Extensions -->
 <script src="/script/extension/GiphyService.js"></script>
 <script src="/script/extension/GiphyRepository.js"></script>
@@ -193,6 +198,8 @@
 <script src="/script/view_model/GiphyViewModel.js"></script>
 <script src="/script/view_model/ImageDetailViewViewModel.js"></script>
 <script src="/script/view_model/VideoCallingViewModel.js"></script>
+<script src="/script/view_model/content/CollectionViewModel.js"></script>
+<script src="/script/view_model/content/CollectionDetailsViewModel.js"></script>
 <script src="/script/view_model/content/ConnectRequestsViewModel.js"></script>
 <script src="/script/view_model/content/ContentState.js"></script>
 <script src="/script/view_model/content/ContentViewModel.js"></script>
@@ -224,13 +231,15 @@
 <script src="/script/components/deviceRemove.js"></script>
 <script src="/script/components/ephemeralTimer.js"></script>
 <script src="/script/components/groupList.js"></script>
+<script src="/script/components/image.js"></script>
 <script src="/script/components/inputElement.js"></script>
 <script src="/script/components/inputLevel.js"></script>
 <script src="/script/components/topPeople.js"></script>
 <script src="/script/components/userAvatar.js"></script>
 <script src="/script/components/userProfile.js"></script>
 <script src="/script/components/userInput.js"></script>
 <script src="/script/components/userList.js"></script>
+<script src="/script/components/asset/assetHeader.js"></script>
 <script src="/script/components/asset/videoAsset.js"></script>
 <script src="/script/components/asset/audioAsset.js"></script>
 <script src="/script/components/asset/fileAsset.js"></script>
@@ -243,6 +252,8 @@
 <script src="/script/components/calling/deviceToggleButton.js"></script>
 <!-- Entities -->
 <script src="/script/message/CallMessageType.js"></script>
+<script src="/script/message/MessageCategory.js"></script>
+<script src="/script/message/MessageCategorization.js"></script>
 <script src="/script/message/EphemeralStatusType.js"></script>
 <script src="/script/message/StatusType.js"></script>
 <script src="/script/message/PingMessageType.js"></script>

app/page/template/content/collection-details.htm

@@ -0,0 +1,37 @@
+<div id="collection-details"
+     class="collection-details content"
+     data-bind="with: $root.collection_details, removed_from_view: $root.collection_details.removed_from_view">
+
+  <!-- ko if: conversation_et() -->
+
+    <div class="content-titlebar">
+      <div class="content-titlebar-items-left">
+        <span class="content-titlebar-icon icon-back" data-uie-name="do-collection-details-close" data-bind="click: click_on_back_button"></span>
+      </div>
+      <span class="content-titlebar-items-center" data-uie-name="collection-details-conversation-name" data-bind="text: conversation_et().display_name()"></span>
+    </div>
+
+    <div class="content-list-wrapper">
+      <div class="content-list collection-list" data-bind="antiscroll: true">
+        <div class="collection-images">
+          <!-- ko foreach: {data: items(), as: 'message_et'} -->
+            <!-- ko if: $parent.should_show_header(message_et) -->
+              <header class="collection-date-separator" data-bind="text: $parent.get_title_for_header(message_et)"></header>
+            <!-- /ko -->
+            <!-- ko if: message_et.category & z.message.MessageCategory.IMAGE -->
+              <image-component class="collection-image" params="asset: message_et.get_first_asset().resource, click: function() {$parent.click_on_image(message_et)}"></image-component>
+            <!-- /ko -->
+            <!-- ko if: message_et.category & z.message.MessageCategory.LINK -->
+              <link-preview-asset params="message: message_et, header: true"></link-preview-asset>
+            <!-- /ko -->
+            <!-- ko if: message_et.category & z.message.MessageCategory.FILE -->
+              <file-asset class="collection-file" params="message: message_et, header: true"></file-asset>
+            <!-- /ko -->
+          <!-- /ko -->
+        </div>
+      </div>
+    </div>
+
+  <!-- /ko -->
+
+</div>

app/page/template/content/collection.htm

@@ -0,0 +1,82 @@
+<div id="collection"
+     class="collection content"
+     data-bind="with: $root.collection, added_to_view: $root.collection.added_to_view, removed_from_view: $root.collection.removed_from_view">
+
+  <!-- ko if: conversation_et() -->
+
+    <div class="content-titlebar">
+      <div class="content-titlebar-items-left">
+        <span class="content-titlebar-icon icon-close" data-bind="click: click_on_back_button"></span>
+      </div>
+      <span class="content-titlebar-items-center" data-bind="text: conversation_et().display_name()"></span>
+    </div>
+
+    <div class="content-list-wrapper">
+      <div class="content-list collection-list" data-bind="antiscroll: true">
+
+        <!-- ko ifnot: no_items_found() -->
+          <!-- ko if: images().length -->
+            <section class="collection-section" data-uie-name="collection-section-image" data-bind="attr: {'data-uie-collection-size': images().length}">
+              <header>
+                <span class="collection-header-icon icon-library"></span>
+                <span class="label-bold-xs" data-bind="l10n_text: z.string.collection_section_images"></span>
+                <!-- ko if: images().length > 12 -->
+                  <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('images', images()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': images().length}}" data-uie-name="collection-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
+                <!-- /ko -->
+              </header>
+              <div class="collection-images">
+                <!-- ko foreach: {data: images.slice(0, 12), as: 'message_et'} -->
+                  <image-component class="collection-image" data-bind="click: $parent.click_on_image" params="asset: message_et.get_first_asset().resource"></image-component>
+                <!-- /ko -->
+              </div>
+            </section>
+          <!-- /ko -->
+
+          <!-- ko if: links().length -->
+            <section class="collection-section" data-uie-name="collection-section-link" data-bind="attr: {'data-uie-collection-size': links().length}">
+              <header>
+                <span class="collection-header-icon icon-link"></span>
+                <span class="label-bold-xs" data-bind="l10n_text: z.string.collection_section_links"></span>
+                <!-- ko if: links().length > 4 -->
+                  <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('links', links()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': links().length}}" data-uie-name="collection-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
+                <!-- /ko -->
+              </header>
+              <div class="collection-images">
+                <!-- ko foreach: {data: links.slice(0, 4), as: 'message_et'} -->
+                  <link-preview-asset params="message: message_et, header: true"></link-preview-asset>
+                <!-- /ko -->
+              </div>
+            </section>
+          <!-- /ko -->
+
+          <!-- ko if: files().length -->
+            <section class="collection-section" data-uie-name="collection-section-file" data-bind="attr: {'data-uie-collection-size': files().length}">
+              <header>
+                <span class="collection-header-icon icon-file"></span>
+                <span class="label-bold-xs" data-bind="l10n_text: z.string.collection_section_files"></span>
+                <!-- ko if: files().length > 4 -->
+                  <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('files', files()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': files().length}}" data-uie-name="collection-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
+                <!-- /ko -->
+              </header>
+              <div class="collection-images">
+                <!-- ko foreach: {data: files.slice(0, 4), as: 'message_et'} -->
+                  <file-asset class="collection-file" params="message: message_et, header: true"></file-asset>
+                <!-- /ko -->
+              </div>
+            </section>
+          <!-- /ko -->
+        <!-- /ko -->
+
+        <!-- ko if: no_items_found() -->
+          <div class="absolute-center" data-uie-name="collection-no-items">
+            <div class="collection-no-items-icon icon-collection"></div>
+            <div class="label-bold-xs text-graphite text-center">No items</div>
+          </div>
+        <!-- /ko -->
+
+      </div>
+    </div>
+
+  <!-- /ko -->
+
+</div>

app/page/template/content/conversation.htm

@@ -13,7 +13,6 @@
       #include('content/conversation/message-list.htm')
       #include('content/conversation/conversation-input.htm')
       #include('content/conversation/participants.htm')
-      #include('content/conversation/detail-view.htm')
       #include('content/conversation/giphy.htm')
     <!-- /ko -->
 

app/page/template/content/conversation/conversation-input.htm

@@ -26,7 +26,8 @@
                              resize: input,
                              resize_callback: scroll_message_list,
                              click: on_input_click,
-                             attr: {'placeholder': input_tooltip}"
+                             attr: {'placeholder': input_tooltip},
+                             paste_file: on_paste_files"
                   data-uie-name="input-message"
                   dir="auto">
         </textarea>
@@ -97,5 +98,24 @@
       </div>
     <!-- /ko -->
   <!-- /ko -->
+
+  <!-- ko if: pasted_file() -->
+    <div class="conversation-input-paste-modal">
+      <div class="controls-left"></div>
+      <div class="controls-center">
+        <!-- ko ifnot: pasted_file_preview_url() -->
+          <span class="conversation-input-paste-icon icon-file"></span>
+        <!-- /ko -->
+        <!-- ko if: pasted_file_preview_url() -->
+          <img class="conversation-input-paste-image conversation-input-paste-icon" data-bind="attr: {'src': pasted_file_preview_url()}">
+        <!-- /ko -->
+        <span data-bind="text: pasted_file_name"></span>
+      </div>
+      <div class="controls-right">
+        <span class="conversation-input-paste-cancel button-icon-large icon-close" data-bind="click: on_cancel_pasted_files"></span>
+        <span class="conversation-input-paste-send bg-theme icon-send" data-bind="click: on_send_pasted_files"></span>
+      </div>
+    </div>
+  <!-- /ko -->
 </div>
 <!--@formatter:on-->

app/page/template/content/conversation/conversation-titlebar.htm

@@ -1,6 +1,12 @@
 <div id="conversation-titlebar" class="conversation-titlebar" data-bind="with: $root.conversation_titlebar">
   <!-- ko if: conversation_et() -->
 
+    <div class="conversation-titlebar-library">
+      <span class="conversation-titlebar-icon button-icon-large icon-collection"
+            data-bind="click: click_on_collection_button"
+            data-uie-name="do-collections"></span>
+    </div>
+
     <!-- ko if: conversation_et().is_verified() -->
       <svg class="conversation-verified-icon" width="16" height="16">
         <use xlink:href="#icon-verified"></use>
@@ -35,7 +41,7 @@
     <!-- ko if: has_ongoing_call() -->
       <div class="conversation-titlebar-icons">
         <!-- ko if: show_maximize_control() -->
-          <span class="conversation-titlebar-icon button-icon-large icon-fullscreen "
+          <span class="conversation-titlebar-icon button-icon-large icon-fullscreen"
                 data-bind="click: click_on_maximize"
                 data-uie-name="do-maximize-call">
           </span>