merged with next

Remove topic.videoCall('accept') error handling.

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
+  "comments": false,
+  "plugins": [
+    [
+      "formatjs",
+      {
+        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
+        "ast": true
+      }
+    ]
+  ]
+}

.gitattributes

@@ -0,0 +1,8 @@
+index.dev.js binary
+index.dev.js.map binary
+index.prod.js binary
+index.prod.js.map binary
+base.min.css binary
+tinode.dev.js binary
+tinode.prod.js binary
+package-lock.json binary

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve TinodeWeb
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+If you want to ask a question, please post to https://groups.google.com/d/forum/tinode instead.
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+ - OS: [e.g. Mac OS, Windows 10 Home]
+ - Browser [e.g. Chrome, Safari]
+ - TinodeWeb Version [e.g. 0.16.6]
+
+**Console log**
+Please attach or insert console log which illustrates the problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature request
+assignees: ''
+
+---
+
+If you want to ask a question, please post to https://groups.google.com/d/forum/tinode instead.
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.gitignore

@@ -1,138 +1,4 @@
-# ---> Node
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
+.DS_Store
+node_modules
+src/i18n/srci/
+webapp.code-workspace.code-workspace

.well-known/assetlinks.json

@@ -0,0 +1,25 @@
+[{
+  "relation": ["delegate_permission/common.handle_all_urls"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "co.tinode.tindroidx",
+    "sha256_cert_fingerprints":
+    ["5B:BE:6A:C4:A7:66:A8:BB:4B:C1:52:66:E5:A4:BD:66:3C:33:50:04:11:CB:17:44:45:89:5E:3C:8D:55:77:7A"]
+  }
+},
+{
+  "relation": ["delegate_permission/common.get_login_creds"],
+  "target": {
+    "namespace": "web",
+    "site": "https://web.tinode.co"
+  }
+},
+{
+  "relation": ["delegate_permission/common.get_login_creds"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "co.tinode.tindroidx",
+    "sha256_cert_fingerprints":
+    ["5B:BE:6A:C4:A7:66:A8:BB:4B:C1:52:66:E5:A4:BD:66:3C:33:50:04:11:CB:17:44:45:89:5E:3C:8D:55:77:7A"]
+  }
+}]

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,2 +1,72 @@
-# im_webapp
+# Tinode Web
 
+## Briefing
+
+Single-page web chat application for [Tinode](https://github.com/tinode/chat/). The app is built on
+[React](https://reactjs.org/). The [Tinode javascript SDK](https://github.com/tinode/tinode-js/) has no external dependencies.
+Overall, it's a lot like open source WhatsApp or Telegram web apps.
+
+Although the app is generally usable, keep in mind that this is work in progress. Some bugs probably exist, some features are missing. The app was tested in the latest Chrome & Firefox only. NPM package is [available](https://www.npmjs.com/package/tinode-webapp).
+
+Try possibly newer or older version live at https://sandbox.tinode.co/.
+
+<a href="https://web.tinode.co/"><img src="web-app.svg" height=36></a>
+
+For demo access and other instructions [see here](https://github.com/tinode/chat/#demosandbox).
+
+## Installing and running
+
+This is _NOT_ a standalone app, this is just a frontend, a client. It requires a [backend](https://github.com/tinode/chat/). See [installation instructions](https://github.com/tinode/chat/blob/master/INSTALL.md). See instructions for [enabling push notifications](push.md).
+
+## Getting support
+
+* Read [client-side](http://tinode.github.io/js-api/) and [server-side](https://github.com/tinode/chat/blob/master/docs/API.md) API documentation.
+* For support, general questions, discussions post to [https://groups.google.com/d/forum/tinode](https://groups.google.com/d/forum/tinode).
+* For bugs and feature requests [open an issue](https://github.com/tinode/webchat/issues/new).
+* Use https://tinode.co/contact for commercial inquiries.
+
+## Internationalization
+
+The app is fully internationalized using [React-Intl](https://github.com/formatjs/react-intl). The UI language is selected automatically from the language specified by the browser. A specific language can be forced by adding `#?hl=XX` parameter to the URL when starting the app, e.g. https://web.tinode.co/#?hl=ru.
+
+The app is currently available in the following languages:
+ * English
+ * Chinese (simplified)
+ * Chinese (traditional)
+ * German
+ * Korean
+ * Romanian
+ * Russian
+ * Spanish
+
+More translations are welcome. See [instructions](https://github.com/tinode/chat/blob/devel/docs/translations.md#webapp).
+
+
+## Not done yet
+
+* Video or audio calling.
+* End-to-End encryption.
+* Emoji support is weak.
+* Mentions, hashtags.
+* Previews not generated for videos, links or docs.
+
+## Other
+
+* Demo avatars and some other graphics are from https://www.pexels.com/ under [CC0 license](https://www.pexels.com/photo-license/).
+* Background patterns from http://subtlepatterns.com/, commercial and non-commercial use allowed with attribution.
+* [Fonts](https://fonts.google.com/) and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-web) from Google under [license](https://developers.google.com/terms) which permits commercial and non-commercial use.
+* Push notifications built with https://firebase.google.com/.
+
+## Responsive design
+
+### Desktop screenshot
+
+<p align="center">
+  <img src="web-desktop.jpg" alt="Desktop web: full app" width=810 />
+</p>
+
+### Mobile screenshots
+
+<p align="center">
+  <kbd><img src="web-mob-contacts.png" alt="Mobile web: contacts" width=250 /></kbd> <kbd><img src="web-mob-chat.png" alt="Mobile web: chat" width=250 /></kbd> <kbd><img src="web-mob-info.png" alt="Mobile web: topic info" width=250 /></kbd> <kbd><img src="web-mob-forward.png" alt="Mobile web: forward message" width=250 /></kbd> <kbd><img src="web-mob-acc-settings.png" alt="Mobile web: account settings" width=250 /></kbd> <kbd><img src="web-mob-avatar.png" alt="Mobile web: change avatar" width=250 /></kbd>
+</p>

firebase-init.js

@@ -0,0 +1,13 @@
+// Get these values for your project from the https://console.firebase.google.com/
+const FIREBASE_INIT = {
+  // Set up a web application in console then get the config object.
+  // The following keys are copied from the object:
+  apiKey: "AIzaSyD6X4ULR-RUsobvs1zZ2bHdJuPz39q2tbQ",
+  messagingSenderId: "114126160546",
+  projectId: "tinode-1000",
+  appId: "1:114126160546:web:aca6ea2981feb81fb44dfb",
+  // Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates.
+  // This value IS NOT included in the generated js config you get from
+  // the firebase console. It needs to be added separately.
+  messagingVapidKey: "BOgQVPOMzIMXUpsYGpbVkZoEBc0ifKY_f2kSU5DNDGYI6i6CoKqqxDd7w7PJ3FaGRBgVGJffldETumOx831jl58"
+};

img/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="192"><defs><filter id="f" color-interpolation-filters="sRGB"><feFlood flood-opacity=".251" flood-color="#000" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-1" result="offset"/><feComposite in="SourceGraphic" in2="offset" result="fbSourceGraphic"/><feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feFlood flood-opacity=".251" flood-color="#000" result="flood"/><feComposite in2="fbSourceGraphic" in="flood" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-3" result="offset"/><feComposite in2="offset" in="fbSourceGraphic" result="composite2"/></filter><filter id="d" color-interpolation-filters="sRGB"><feFlood flood-opacity=".196" flood-color="#FFF" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="out" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="2" result="offset"/><feComposite in="offset" in2="SourceGraphic" operator="atop" result="composite2"/></filter><filter id="b" color-interpolation-filters="sRGB"><feFlood flood-opacity=".196" flood-color="#000" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="out" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-2" result="offset"/><feComposite in="offset" in2="SourceGraphic" operator="atop" result="composite2"/></filter><filter id="c" color-interpolation-filters="sRGB"><feFlood flood-opacity=".196" flood-color="#000" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="out" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-2" result="offset"/><feComposite in="offset" in2="SourceGraphic" operator="atop" result="composite2"/></filter><linearGradient id="a"><stop offset="0" stop-opacity=".251"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient xlink:href="#a" id="e" x1="102.814" y1="97.076" x2="219.019" y2="170.481" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.29306 0 0 1.00596 -43.959 .807)"/></defs><g fill-rule="evenodd"><path d="M14.102 64A88 87.925 0 008 95.924c-.012 44.455 18.485 70.138 1.863 79.822-12.733 7.419 43.153 8.258 70.137 8.248V64H14.102z" fill="#fc5d3e" filter="url(#b)"/><path d="M80 64v119.994c8.24-.003 14.055-.08 14.055-.08L96 183.85a88 87.925 0 0088-87.926A88 87.925 0 00177.99 64H80z" fill="#45ae49" filter="url(#c)"/><path d="M96 8A88 87.925 0 009.52 80h172.978A88 87.925 0 0096 8z" fill="#2d526b" filter="url(#d)"/></g><path d="M88.002 40.975l-8.6 112.808 39.791 26.94c34.169-9.369 59.381-38.298 63.971-73.4z" fill="url(#e)" fill-rule="evenodd" opacity=".5"/><text y="153.195" x="53.125" style="line-height:125%;-inkscape-font-specification:'Arial, Bold';text-align:start" font-weight="700" font-size="160" font-family="Arial" letter-spacing="0" word-spacing="0"><tspan style="line-height:125%;-inkscape-font-specification:'Arial, Bold';text-align:start" y="153.195" x="53.125" fill="#fff">t</tspan></text></svg>

index-dev.html

@@ -0,0 +1,50 @@
+<!-- DEVELOPMENT version of the web app. -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tinode</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="application-name" content="Tinode Web, version for developers" />
+    <meta name="description" content="Tinode instant messenger, development version" />
+    <meta name="application-url" content="https://web.tinode.co/">
+    <!-- Browser styling for Chrome, FF, Opera -->
+    <meta name="theme-color" content="#3949AB" />
+    <!-- Ask Google not to offer page translation -->
+    <meta name="google" value="notranslate" />
+    <!-- Open Graph description -->
+    <meta name="og:url" content="https://web.tinode.co/">
+    <meta name="og:title" content="Tinode Web Development">
+    <meta name="og:image" content="img/og-logo.jpeg">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="manifest" href="manifest.json" />
+    <link rel="shortcut icon" id="shortcut-icon" href="img/logo32x32.png" type="image/png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="img/logo192.png" type="image/png" />
+    <link rel="canonical" href="https://web.tinode.co/" />
+    <!-- Google's Roboto font -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i" />
+    <!-- Google's material design icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <!-- Styles for local elements -->
+    <link rel="stylesheet" href="css/base.css" />
+    <!-- ReactJS -->
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
+    <!-- React-Intl for translations -->
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@5/react-intl.iife.js"></script>
+  </head>
+
+  <body>
+    <noscript><div id="noscript-message"><div id="noscript-title">Javascript support is required.</div>
+      <div id="noscript-content">It appears JavaScript is turned off or is not supported by your browser.
+        TinodeWeb does not work without JavaScript. Please enable JavaScript by changing your browser options,
+        then <a href="">try again</a>.
+      </div>
+    </div></noscript>
+    <div id="mountPoint"></div>
+    <script src="firebase-init.js"></script>
+    <script src="umd/tinode.dev.js"></script>
+    <script src="umd/index.dev.js"></script>
+  </body>
+</html>

index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Tinode</title>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="application-name" content="Tinode Web" />
+<meta name="description" content="Tinode instant messaging in a browser" />
+<meta name="application-url" content="https://web.tinode.co/">
+<meta name="theme-color" content="#3949AB" />
+<meta name="google" value="notranslate" />
+<meta name="format-detection" content="telephone=no" />
+<meta name="og:url" content="https://web.tinode.co/">
+<meta name="og:title" content="Tinode Web">
+<meta name="og:image" content="img/og-logo.jpeg">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<link rel="manifest" href="manifest.json" />
+<link rel="shortcut icon" id="shortcut-icon" href="img/logo32x32.png" type="image/png" />
+<link rel="apple-touch-icon" sizes="192x192" href="img/logo192.png" type="image/png" />
+<link rel="canonical" href="https://web.tinode.co/" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link rel="stylesheet" href="css/base.min.css" />
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@5.20.7/react-intl.iife.min.js"></script>
+</head>
+<body>
+<noscript><div id="noscript-message"><div id="noscript-title">Javascript support is required.</div>
+<div id="noscript-content">It appears JavaScript is turned off or is not supported by your browser.
+TinodeWeb does not work without JavaScript. Please enable JavaScript by changing your browser options,
+then <a href="">try again</a>.</div></div></noscript>
+<div id="mountPoint"></div>
+<script src="firebase-init.js"></script>
+<script src="umd/tinode.prod.js"></script>
+<script src="umd/index.prod.js"></script>
+</body>
+</html>

manifest.json

@@ -0,0 +1,45 @@
+{
+  "name": "Tinode",
+  "short_name": "Tinode",
+  "description": "Tinode Web App.\nSee more at https://tinode.co/",
+  "categories": ["chat", "communication", "productivity"],
+  "icons": [
+    {
+      "src":"img/logo96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src":"img/logo192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/logo.svg",
+      "type": "image/svg+xml",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "silver",
+  "theme_color": "#3949AB",
+  "display": "standalone",
+  "gcm_sender_id": "103953800507",
+  "prefer_related_applications": true,
+  "related_applications": [
+    {
+      "platform": "play",
+      "url": "https://play.google.com/store/apps/details?id=co.tinode.tindroidx",
+      "id": "co.tinode.tindroidx"
+    },
+    {
+      "platform": "itunes",
+      "url": "https://apps.apple.com/us/app/tinode/id1483763538"
+    }
+  ],
+  "permissions": {
+    "audio-capture": {
+      "description": "Required for recording voice messages"
+    }
+  }
+}

package.json

@@ -0,0 +1,94 @@
+{
+  "name": "tinode-webapp",
+  "description": "Tinode messenger for the web",
+  "version": "0.20.0-alpha1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tinode/example-react-js.git"
+  },
+  "scripts": {
+    "build": "npm run vers && npm run build:css && npm run extract && npm run build:i18n && npm run build:prod && npm run build:dev",
+    "build:css": "postcss css/base.css > css/base.min.css",
+    "build:dev": "webpack --mode development",
+    "build:prod": "webpack --mode production",
+    "build:i18n": "node scripts/i18n.js",
+    "i18n:missing": "node scripts/i18n.js missing",
+    "i18n:obsolete": "node scripts/i18n.js obsolete",
+    "vers": "node scripts/gen-version.js",
+    "extract": "formatjs extract \"src/**/*.{js,jsx}\" --out-file src/i18n/ex/base-en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
+    "compile": "formatjs compile"
+  },
+  "browserslist": "> 0.5%, not IE 11, not op_mini all, not and_uc >0",
+  "files": [
+    "umd/index.prod.js",
+    "umd/index.prod.js.map",
+    "umd/index.dev.js",
+    "umd/index.dev.js.map",
+    "umd/tinode.prod.js",
+    "umd/tinode.dev.js",
+    "audio/msg.mp3",
+    "css/base.css",
+    "css/base.min.css",
+    "img/*.png",
+    "img/*.svg",
+    "img/*.jpeg",
+    "index-dev.html",
+    "index.html",
+    "manifest.json",
+    "service-worker.js",
+    "firebase-init.js",
+    "version.js"
+  ],
+  "keywords": [
+    "chat",
+    "instant-messenger",
+    "message",
+    "messenger",
+    "react",
+    "web"
+  ],
+  "locales": [
+    "de",
+    "en",
+    "es",
+    "ko",
+    "ro",
+    "ru",
+    "zh",
+    "zh-TW"
+  ],
+  "main": "umd/index.prod.js",
+  "bugs": {
+    "url": "https://github.com/tinode/example-react-js/issues"
+  },
+  "homepage": "https://github.com/tinode/chat",
+  "email": "info@tinode.co",
+  "author": "Tinode Authors <info@tinode.co>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "firebase": "^9.6.7",
+    "fix-webm-duration": "^1.0.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-intl": "^5.20.2",
+    "tinode-sdk": "^0.20.0-alpha1",
+    "webrtc-adapter": "^8.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@formatjs/cli": "^4.2.20",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-formatjs": "^10.2.19",
+    "browserslist": "^4.16.5",
+    "copy-webpack-plugin": "^10.0.0",
+    "cssnano": "^5.0.6",
+    "glob": "^7.1.7",
+    "mkdirp": "^1.0.4",
+    "postcss": "^8.3.2",
+    "postcss-cli": "^9.0.2",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('cssnano')({
+            preset: 'default',
+        }),
+    ],
+};

push.md

@@ -0,0 +1,11 @@
+# Push notifications
+
+If you want to use the app with your own server and want web push notification to work you have to set them up:
+
+* Register at https://firebase.google.com/, set up the project if you have not done so already.
+* Follow instructions to create a web application https://support.google.com/firebase/answer/9326094 in your project.
+* Follow instructions at https://support.google.com/firebase/answer/7015592 to get a Firebase configuration object ("Firebase SDK snippet").
+* Locate `firebase-init.js` in the root folder of your copy of TinodeWeb app. Copy-paste the following keys from the configuration object to `firebase-init.js`: `apiKey`, `messagingSenderId`, `projectId`, `appId` (you may copy all keys).
+* Copy `Web Push certificate` (Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates) to `messagingVapidKey` field in `firebase-init.js`.
+* Double check that `firebase-init.js` contains the following keys: `apiKey`, `messagingSenderId`, `projectId`, `appId`, `messagingVapidKey`. The file may contain other optional keys.
+* Copy Google-provided server key to `tinode.conf`, see details [here](https://github.com/tinode/chat/blob/master/docs/faq.md#q-how-to-setup-fcm-push-notifications).

scripts/gen-version.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const version = require('../package.json').version;
+
+function writeVersion(fileName, useExport) {
+  fs.writeFile(fileName,
+    '// This is a generated file. Don\'t edit.\n\n'+
+    `${useExport ? 'export ' : ''}const PACKAGE_VERSION = "${version}";\n`,
+    { flag: 'w' },
+    (err) => {
+      if (err) {
+          return console.log(err);
+      }
+    }
+  );
+}
+
+writeVersion('./src/version.js', true);
+writeVersion('./version.js', false);

scripts/i18n.js

@@ -0,0 +1,127 @@
+// 1. Updates translations files with new messages, mark no longer needed translations as obsolete.
+// 2. Takes all translations and groups them into a single file.
+// 3. When called with parameters 'missing' or 'obsolete' writes missing and obsolete translations to console.
+
+const fs = require('fs');
+const path = require('path');
+const globSync = require('glob').sync;
+const mkdirpSync = require('mkdirp').sync;
+
+const EXTRACTED_STRINGS = './src/i18n/ex/base-en.json';
+const BASE_LANG        = 'en';
+const LANG_DIR         = './src/i18n/';
+const LANG_PATTERN     = './src/i18n/*.json';
+const LANG_PATTERN_ONE = './src/i18n/%s.json';
+const FINAL_FILE       = './src/messages.json';
+
+const args = process.argv.slice(2);
+
+function getLocaleFromFileName(filename) {
+  const parts = filename.split('/');
+  return parts[parts.length - 1].split('.json')[0];
+}
+
+function printf(str) {
+  const args = [].slice.call(arguments, 1);
+  let i = 0;
+  return str.replace(/%s/g, () => args[i++]);
+}
+
+// Called with one or two parameters?
+if (args[0] == 'missing' || args[0] == 'obsolete') {
+  // Extract missing or obsolete translations as requested.
+  // Read either all or just one translation.
+  const pattern = args[1] ? printf(LANG_PATTERN_ONE, args[1]) : LANG_PATTERN;
+  const extracted = globSync(pattern)
+    .map((filename) => {
+      const locale = getLocaleFromFileName(filename);
+      const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+
+      const dest = {};
+      // Copy messages while skipping missing and obsolete ones.
+      for (let key in translated) {
+        if ((args[0] == 'missing' && translated[key].missing) ||
+          (args[0] == 'obsolete' && translated[key].obsolete)) {
+          dest[key] = translated[key];
+        }
+      }
+
+      return { [locale]: dest };
+    })
+    .reduce((collection, descriptors) => {
+      return { ...collection, ...descriptors };
+    }, {});
+
+  console.log(JSON.stringify(extracted, null, 2)+"\n");
+  return;
+}
+
+// The formatjs/cli saves extracted messages into a file {'message_id': {defaultMessage: 'default message text', description: '...'}, ...}.
+// Rewrite them into a single file en.json {'message_id': 'default message text', }.
+
+// Read master-set of messages in default language.
+const baseMessages = JSON.parse(fs.readFileSync(EXTRACTED_STRINGS, 'utf8'));
+
+// Find messages present in baseMessages but missing in translations and vice versa.
+// Mark missing or obsolete messages as such.
+globSync(LANG_PATTERN)
+  .map((filename) => {
+    const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+    const locale = getLocaleFromFileName(filename);
+
+    // Refresh existing entries with possible new descriptions and default messages, add missing.
+    Object.entries(baseMessages).forEach((ent) => {
+      const [key, value] = ent;
+      let translation = translated[key] ? translated[key].translation : "";
+      if (!translation && locale == BASE_LANG) {
+        translation = value.defaultMessage;
+      }
+
+      translated[key] = {
+        translation: translation,
+        defaultMessage: value.defaultMessage,
+        description: value.description,
+        missing: !translation,
+        obsolete: false
+      };
+    });
+
+    // Find no longer needed messages.
+    Object.entries(translated).forEach((ent) => {
+      const [key, value] = ent;
+      if (!baseMessages[key] && translated[key]) {
+        // Obsolete, no longer missing.
+        translated[key].missing = !translated[key].translation;
+        translated[key].obsolete = true;
+      }
+    });
+
+    fs.writeFileSync(filename, JSON.stringify(translated, null, 2)+"\n");
+  });
+
+// Combine all translations into a single json {"lang_1": {...}, "lang_2: {...}"}
+// while removing messages marked as missing or obsolete.
+
+// Read all translations.
+const messages = globSync(LANG_PATTERN)
+  .map((filename) => {
+    const locale = getLocaleFromFileName(filename);
+    const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+
+    const dest = {};
+    // Copy messages while skipping missing and obsolete ones.
+    for (let key in translated) {
+      if (!translated[key].missing && !translated[key].obsolete) {
+        dest[key] = translated[key].translation;
+      }
+    }
+
+    return { [locale]: dest };
+  })
+  .reduce((collection, descriptors) => {
+    return { ...collection, ...descriptors };
+  }, {});
+
+// Write a file with all translations combined.
+mkdirpSync(path.dirname(FINAL_FILE));
+fs.writeFileSync(FINAL_FILE, JSON.stringify(messages));

service-worker.js

@@ -0,0 +1,177 @@
+// Must be located at the root.
+// FIXME: update Firebase version.
+importScripts('https://cdn.jsdelivr.net/npm/firebase@8.10.1/firebase-app.js');
+importScripts('https://cdn.jsdelivr.net/npm/firebase@8.10.1/firebase-messaging.js');
+importScripts('firebase-init.js');
+importScripts('version.js');
+
+// Channel to notify the webapp. There is no BroadcastChannel in Safari.
+const webAppChannel = (typeof BroadcastChannel == 'function') ?
+  new BroadcastChannel('tinode-sw') : null;
+
+// Basic internationalization.
+const i18n = {
+  'de': {
+    'new_message': "Neue Nachricht",
+    'new_chat': "Neuer Chat",
+  },
+  'en': {
+    'new_message': "New message",
+    'new_chat': "New chat",
+  },
+  'es': {
+    'new_message': "Nuevo mensaje",
+    'new_chat': "Nueva conversación",
+  },
+  'ko': {
+    'new_message': "새로운 메시지",
+    'new_chat': "새로운 채팅",
+  },
+  'ro': {
+    'new_message': "Mesaj nou",
+    'new_chat': "Chat nou",
+  },
+  'ru': {
+    'new_message': "Новое сообщение",
+    'new_chat': "Новый чат",
+  },
+  'zh': {
+    'new_message': "新讯息",
+    'new_chat': "新聊天",
+  },
+  'zh-TW': {
+    'new_message': "新訊息",
+    'new_chat': "新聊天",
+  }
+};
+
+self.i18nMessage = function(id) {
+  if (!id) {
+    return null;
+  }
+  // Choose translations: given something like 'de-CH', try 'de-CH' then 'de' then 'en'.
+  const lang = i18n[self.locale] || i18n[self.baseLocale] || i18n['en'];
+  // Try finding string by id in the specified language, if missing try English, otherwise use the id itself
+  // as the last resort.
+  return lang[id] || i18n['en'][id] || id;
+}
+
+firebase.initializeApp(FIREBASE_INIT);
+const fbMessaging = firebase.messaging();
+
+// This method shows the push notifications while the window is in background.
+fbMessaging.onBackgroundMessage((payload) => {
+  if (payload.data.silent == 'true') {
+    // TODO: if this is an 'msg', fetch the new message in the background.
+    return;
+  }
+
+  // Notify webapp that a message was received.
+  if (webAppChannel) {
+    webAppChannel.postMessage(payload.data);
+  }
+
+  const titles = {'msg': 'new_message', 'sub': 'new_chat'};
+  const pushType = payload.data.what || 'msg';
+  const title = payload.data.title || self.i18nMessage(titles[pushType]);
+  if (title) {
+    const options = {
+      body: payload.data.content || '', // TODO: content for 'sub' should be topic's or user's title.
+      icon: '/img/logo96.png', // TODO: use topic's or user's avatar (would have to fetch for 'sub', read from db for 'msg').
+      badge: '/img/badge96.png',
+      tag: payload.data.topic || undefined,
+      data: {
+        topic: payload.data.topic
+      }
+    };
+    return self.registration.showNotification(title, options);
+  }
+});
+
+// Update service worker immediately for both the current client
+// and all other active clients.
+self.addEventListener('install', event => {
+  self.skipWaiting();
+});
+
+// This code handles a click on notification: takes
+// the user to the browser tab with the chat or opens a new tab.
+self.addEventListener('notificationclick', event => {
+  const data = event.notification.data;
+  event.notification.close();
+  if (!data) {
+    console.info("Missing 'data' in notification", event.notification);
+    return;
+  }
+
+  const urlHash = '#/' + data.topic;
+
+  event.waitUntil(self.clients.matchAll({
+    type: 'window',
+    includeUncontrolled: true
+  }).then((windowClients) => {
+    let anyClient = null;
+    for (let i = 0; i < windowClients.length; i++) {
+      const url = new URL(windowClients[i].url);
+      if (url.hash.includes(data.topic)) {
+        // Found the Tinode tab with the right topic open.
+        return windowClients[i].focus();
+      } else {
+        // This will be the least recently used tab.
+        anyClient = windowClients[i];
+      }
+    }
+
+    // Found tab with Tinode on a different topic,
+    // navigate to the right topic.
+    if (anyClient) {
+      const url = new URL(anyClient.url);
+      url.hash = urlHash;
+      return anyClient.focus().then(thisClient => {
+        return thisClient.navigate(url);
+      });
+    }
+
+    // Did not find a Tinode browser tab. Open one.
+    const url = new URL(self.location.origin);
+    url.hash = urlHash;
+    return clients.openWindow(url);
+  }));
+});
+
+// This is needed for 'Add to Home Screen'.
+self.addEventListener('fetch', event => {
+  if (event.request.method != 'GET') {
+    return;
+  }
+
+  event.respondWith((async () => {
+    //  Try to find the response in the cache.
+    const cache = await caches.open(PACKAGE_VERSION);
+
+    const reqUrl = new URL(event.request.url);
+    // Using ignoreSearch=true to read cached images and docs despite different auth signatures.
+    const cachedResponse = await cache.match(event.request, {ignoreSearch: (self.location.origin == reqUrl.origin)});
+    if (cachedResponse) {
+      return cachedResponse;
+    }
+    // Not found in cache.
+    const response = await fetch(event.request);
+    if (!response || response.status != 200 || response.type != 'basic') {
+      return response;
+    }
+    if (reqUrl.protocol == 'http:' || reqUrl.protocol == 'https:') {
+      await cache.put(event.request, response.clone());
+    }
+    return response;
+  })());
+});
+
+// This code gets the human language from the webapp.
+self.addEventListener('message', event => {
+  const data = JSON.parse(event.data);
+
+  // The locale is used for selecting strings in an appropriate language.
+  self.locale = data.locale || '';
+  self.baseLocale = self.locale.toLowerCase().split(/[-_]/)[0];
+});

src/config.js

@@ -0,0 +1,131 @@
+import { PACKAGE_VERSION } from './version.js';
+
+// Name of this application, used in the User-Agent.
+export const APP_NAME = 'TinodeWeb/' + (PACKAGE_VERSION || '0.17');
+
+// API key. Use https://github.com/tinode/chat/tree/master/keygen to generate your own
+export const API_KEY = 'AQEAAAABAAD_rAp4DJh05a1HAwFT3A6K';
+
+// The array of possible hosts to connect to.
+export const KNOWN_HOSTS = {hosted: 'web.tinode.co', local: 'localhost:6060'};
+
+// Default host name and port to connect to.
+export const DEFAULT_HOST = KNOWN_HOSTS.hosted;
+
+// Enable console logging.
+export const LOGGING_ENABLED = true;
+
+// Minimum time between two keypress notifications, milliseconds.
+export const KEYPRESS_DELAY = 3_000;
+// Delay before sending a {note} for reciving a message, milliseconds.
+export const RECEIVED_DELAY = 500;
+// Delay before sending a read notification, milliseconds.
+export const READ_DELAY = 1000;
+
+// The default shortest allowed tag length. Matches the value on the server.
+export const MIN_TAG_LENGTH = 2;
+// The default greatest allowed tag length. Matches the value on the server.
+export const MAX_TAG_LENGTH = 96;
+// The default maximum number of tags allowed. Matches the value on the server.
+export const MAX_TAG_COUNT = 16;
+
+// Access mode for P2P subscriptions initiated by the current user.
+export const DEFAULT_P2P_ACCESS_MODE = 'JRWPS';
+// Access mode for new group topics created by the current user.
+export const NEW_GRP_ACCESS_MODE = 'JRWPSAO';
+// Access mode for a channel.
+export const CHANNEL_ACCESS_MODE = 'JR';
+
+// Access mode for no access.
+export const NO_ACCESS_MODE = 'N';
+
+// Mediaquery breakpoint between desktop and mobile, in px. Should match the value
+// in @media (max-size: 640px) in base.css
+export const MEDIA_BREAKPOINT = 640;
+// Size of css 'rem' unit in pixels. Default 1rem = 10pt = 13px.
+export const REM_SIZE = 13;
+
+// Size of the avatar image: when image dimensions are greater or the image is not square, it's resized to
+// a square of this size or less.
+export const AVATAR_SIZE = 384;
+
+// Maximum size of an avatar in bytes for sending in-band. Bigger avatars will be sent out of band (as uploads).
+export const MAX_AVATAR_BYTES = 4096;
+
+// Size of the broken_image shown in MessagesView
+export const BROKEN_IMAGE_SIZE = 32;
+
+// Number of chat messages to fetch in one call.
+export const MESSAGES_PAGE = 24;
+
+// Default maximum in-band (included directly into the message) attachment size which fits into
+// a message of 256K in size. Used when the server-provided value is unavailable. The actual
+// binary size of the attachment should be smaller due to base64 encoding expansion and some overhead,
+// for instance 1024 bytes.
+// Increase this limit to a greater value in production, if desired. Also increase
+// max_message_size in the server config.
+export const MAX_INBAND_ATTACHMENT_SIZE = 262_144;
+
+// Default absolute maximum attachment size to be used with the server = 8MB.
+// Used when the server-provided value is unavailable. Increase to something like 100MB in production.
+export const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
+
+// Maximum allowed linear dimension (pixels) of an image sent inline. Larger images will be shrunk
+// to make the larger dimension fit under this size. You may want to adjust it to 1600 or
+// 2400 for production.
+export const MAX_IMAGE_DIM = 1024;
+
+// Linear dimensions of image preview: shrink image under this size for previews.
+export const IMAGE_PREVIEW_DIM = 64;
+
+// Linear dimensions of image thumbnail: shrink image under this size for thumbnails in reply quote previews.
+export const IMAGE_THUMBNAIL_DIM = 36;
+
+// Maximum number of online users to be shown in a topic title bar. Others will be
+// hidden under "+X more"
+export const MAX_ONLINE_IN_TOPIC = 4;
+
+// Maximum length of user name, topic title, and private comment.
+export const MAX_TITLE_LENGTH = 60;
+// Maximum length of topic description.
+export const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
+
+// Length of message previews in chat list, in characters.
+export const MESSAGE_PREVIEW_LENGTH = 80;
+
+// Length of a quote in quoted reply (for outgoing messages).
+export const QUOTED_REPLY_LENGTH = 30;
+// Length of a preview of a forwarded message.
+export const FORWARDED_PREVIEW_LENGTH = 84;
+
+// Minimum duration of an audio recording in milliseconds (2 sec).
+export const MIN_DURATION = 2_000;
+// Maximum duration of an audio recording in milliseconds (10 min).
+export const MAX_DURATION = 600_000;
+
+// Link for "Contact Us".
+export const LINK_CONTACT_US = 'mailto:support@tinode.co';
+
+// Link to Privacy Policy.
+export const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html';
+
+// Link to Terms of Service.
+export const LINK_TERMS_OF_SERVICE = 'https://tinode.co/terms.html';
+
+// Video calls/WebRTC configuration.
+export const CALL_WEBRTC_CONFIG = {
+  iceServers: [
+    { urls: [ "stun:bn-turn1.xirsys.com" ] },
+    {
+      username: "0kYXFmQL9xojOrUy4VFemlTnNPVFZpp7jfPjpB3AjxahuRe4QWrCs6Ll1vDc7TTjAAAAAGAG2whXZWJUdXRzUGx1cw==",
+      credential: "285ff060-5a58-11eb-b269-0242ac140004",
+      urls: [
+        "turn:bn-turn1.xirsys.com:80?transport=udp",
+        "turn:bn-turn1.xirsys.com:3478?transport=udp",
+        "turn:bn-turn1.xirsys.com:80?transport=tcp",
+        "turn:bn-turn1.xirsys.com:3478?transport=tcp",
+        "turns:bn-turn1.xirsys.com:443?transport=tcp",
+        "turns:bn-turn1.xirsys.com:5349?transport=tcp"
+       ]
+    }
+ ]};

src/constants.js

@@ -0,0 +1,8 @@
+// Video call states.
+export const CALL_STATE_NONE = 0;
+export const CALL_STATE_OUTGOING_INITATED = 1;
+export const CALL_STATE_INCOMING_RECEIVED = 2;
+export const CALL_STATE_IN_PROGRESS = 3;
+
+// Mime type used for video call messages.
+export const CALL_MESSAGE_MIME_TYPE = 'application/x-tinode-webrtc';

src/i18n/ex/base-en.json

@@ -0,0 +1,803 @@
+{
+  "action_block_contact": {
+    "defaultMessage": "Block Contact",
+    "description": "Flat button [Block Contact]"
+  },
+  "action_cancel": {
+    "defaultMessage": "cancel",
+    "description": "Call to action [cancel]"
+  },
+  "action_clear_messages": {
+    "defaultMessage": "Clear Messages",
+    "description": "Flat button [Clear Messages] (soft-delete messages)"
+  },
+  "action_delete_messages": {
+    "defaultMessage": "Clear Messages for All",
+    "description": "Flat button [Clear for All] (hard-delete all messages)"
+  },
+  "action_leave_chat": {
+    "defaultMessage": "Leave Conversation",
+    "description": "Flat button [Leave Conversation]"
+  },
+  "action_report_chat": {
+    "defaultMessage": "Report Conversation",
+    "description": "Flat button [Report Group]"
+  },
+  "archived_contacts": {
+    "defaultMessage": "Archived contacts ({count})",
+    "description": "Label for archived chats"
+  },
+  "badge_danger": {
+    "defaultMessage": "Untrustworthy",
+    "description": "Suspicious or untrustworthy account or topic badge"
+  },
+  "badge_owner": {
+    "defaultMessage": "owner",
+    "description": "Badge for indicating the owner"
+  },
+  "badge_staff": {
+    "defaultMessage": "Staff-managed",
+    "description": "Explanation of a staff-managed account or topic badge"
+  },
+  "badge_verified": {
+    "defaultMessage": "Verified/official",
+    "description": "Explanation of a verified account or topic badge"
+  },
+  "badge_you": {
+    "defaultMessage": "you",
+    "description": "Badge for indicating the current user"
+  },
+  "block_contact_warning": {
+    "defaultMessage": "Are you sure you want to block this contact?",
+    "description": "Alert dialog warning when blocking a contact."
+  },
+  "blocked_contacts_link": {
+    "defaultMessage": "Blocked contacts ({count})",
+    "description": "Blocked contacts link"
+  },
+  "button_add_another": {
+    "defaultMessage": "Add another",
+    "description": "Call to action [+ add another]"
+  },
+  "button_add_members": {
+    "defaultMessage": "Add members",
+    "description": "Flat button [Add members] (to topic)"
+  },
+  "button_cancel": {
+    "defaultMessage": "Cancel",
+    "description": "Button [Cancel]"
+  },
+  "button_confirm": {
+    "defaultMessage": "Confirm",
+    "description": "Button [Confirm]"
+  },
+  "button_create": {
+    "defaultMessage": "Create",
+    "description": "Button [Create]"
+  },
+  "button_delete_account": {
+    "defaultMessage": "Delete account",
+    "description": "Button [Delete account]"
+  },
+  "button_edit": {
+    "defaultMessage": "Edit",
+    "description": "Call to action [Edit]"
+  },
+  "button_logout": {
+    "defaultMessage": "Logout",
+    "description": "Button [Logout]"
+  },
+  "button_ok": {
+    "defaultMessage": "OK",
+    "description": "Button [OK]"
+  },
+  "button_reset": {
+    "defaultMessage": "Reset",
+    "description": "Button [Reset]"
+  },
+  "button_security": {
+    "defaultMessage": "Security",
+    "description": "Navigaton button for security panel."
+  },
+  "button_send_request": {
+    "defaultMessage": "Send request",
+    "description": "Button [Send request]"
+  },
+  "button_sign_in": {
+    "defaultMessage": "Sign in",
+    "description": "Button [Sign In]"
+  },
+  "button_sign_up": {
+    "defaultMessage": "Sign up",
+    "description": "Create account button [Sign Up]"
+  },
+  "button_subscribe": {
+    "defaultMessage": "Subscribe",
+    "description": "Button [Subscribe]"
+  },
+  "button_update": {
+    "defaultMessage": "Update",
+    "description": "Button [Update]"
+  },
+  "calls_incoming": {
+    "defaultMessage": "Incoming Call",
+    "description": "Incoming call label"
+  },
+  "calls_incoming_title": {
+    "defaultMessage": "Incoming Call",
+    "description": "Incoming call title (Incoming call view)"
+  },
+  "calls_outgoing": {
+    "defaultMessage": "Outgoing Call",
+    "description": "Outgoing call label"
+  },
+  "calls_you_label": {
+    "defaultMessage": "You",
+    "description": "Shown over the local video screen"
+  },
+  "cannot_initiate_file_upload": {
+    "defaultMessage": "Cannot initiate file upload.",
+    "description": "Generic error messagewhen attachment fails"
+  },
+  "channel": {
+    "defaultMessage": "channel",
+    "description": "Subtitle shown for channels in MessagesView instead of last seen"
+  },
+  "channel_prompt": {
+    "defaultMessage": "This is a channel",
+    "description": "Checkbox label when creating a channel"
+  },
+  "chat_invitation": {
+    "defaultMessage": "You are invited to start a new chat. What would you like to do?",
+    "description": "New chat invitation message: [Accept] [Ignore] [Block]."
+  },
+  "chat_invitation_accept": {
+    "defaultMessage": "Accept",
+    "description": "Action [Accept] for chat invitation."
+  },
+  "chat_invitation_block": {
+    "defaultMessage": "Block",
+    "description": "Action [Block] for chat invitation."
+  },
+  "chat_invitation_ignore": {
+    "defaultMessage": "Ignore",
+    "description": "Action [Ignore] for chat invitation."
+  },
+  "clear_messages_warning": {
+    "defaultMessage": "Are you sure you want to clear all messages? It cannot be undone.",
+    "description": "Alert dialog warning when deleting all messages."
+  },
+  "code_doesnot_match": {
+    "defaultMessage": "Code does not match",
+    "description": "Error message when the credential validation code is incorrect."
+  },
+  "contacts_not_found": {
+    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "description": "HTML message shown in ContactList when no contacts are found"
+  },
+  "contacts_not_found_short": {
+    "defaultMessage": "No contacts match ''{query}''",
+    "description": "Shown in ContactsView when search returned no results"
+  },
+  "credential_email_prompt": {
+    "defaultMessage": "Your registration email",
+    "description": "Placeholder for entering email"
+  },
+  "delete_account": {
+    "defaultMessage": "Delete account",
+    "description": "Title for delete account warning"
+  },
+  "delete_account_warning": {
+    "defaultMessage": "Are you sure you want to delete your account? It cannot be undone.",
+    "description": "Warning message when deleting an account"
+  },
+  "delete_messages_warning": {
+    "defaultMessage": "Are you sure you want to delete all messages for everyone? It cannot be undone.",
+    "description": "Alert dialog warning when hard-deleting all messages."
+  },
+  "deleted_content": {
+    "defaultMessage": "content deleted",
+    "description": "Shown when messages are deleted"
+  },
+  "description_editing_placeholder": {
+    "defaultMessage": "Description (optional)",
+    "description": "Placeholder for editing topic description"
+  },
+  "download_action": {
+    "defaultMessage": "download",
+    "description": "Call to action [download]"
+  },
+  "drafty_attachment": {
+    "defaultMessage": "Attachment",
+    "description": "Comment for attachment in drafty"
+  },
+  "drafty_form": {
+    "defaultMessage": "Form:",
+    "description": "Comment for form in drafty"
+  },
+  "drafty_image": {
+    "defaultMessage": "Picture",
+    "description": "Comment for embedded images in drafty"
+  },
+  "drafty_unknown": {
+    "defaultMessage": "Unsupported",
+    "description": "Unsupported entity in drafty"
+  },
+  "email_dative": {
+    "defaultMessage": "email",
+    "description": "Dative case of 'email', i.e. 'email' in 'by email'"
+  },
+  "email_prompt": {
+    "defaultMessage": "Email, e.g. jdoe@example.com",
+    "description": "Input placeholder for email entry"
+  },
+  "enable_peers_messaging": {
+    "defaultMessage": "Enable",
+    "description": "Call to action to enable peer's messaging"
+  },
+  "enter_confirmation_code_prompt": {
+    "defaultMessage": "Enter confirmation code sent to you by {method}:",
+    "description": "Request to enter confirmation code"
+  },
+  "error_invalid_id": {
+    "defaultMessage": "Invalid ID",
+    "description": "Error message"
+  },
+  "file_attachment_too_large": {
+    "defaultMessage": "The file size {size} exceeds the {limit} limit.",
+    "description": "Error message when attachment is too large"
+  },
+  "forgot_password_link": {
+    "defaultMessage": "Forgot password?",
+    "description": "Link to Reset password form"
+  },
+  "forward_to": {
+    "defaultMessage": "Forward to"
+  },
+  "forward_to_search_placeholder": {
+    "defaultMessage": "Search contacts",
+    "description": "Contact search prompt when forwarding a message."
+  },
+  "full_name_prompt": {
+    "defaultMessage": "Full name, e.g. John Doe",
+    "description": "Input placeholder for person's full name"
+  },
+  "granted_permissions": {
+    "defaultMessage": "Granted",
+    "description": "Title for permissions"
+  },
+  "group_has_no_members": {
+    "defaultMessage": "No members",
+    "description": "Shown in place of group members"
+  },
+  "group_user_id_prompt": {
+    "defaultMessage": "Group or User ID",
+    "description": "Prompt for entering user or group ID"
+  },
+  "image_caption_prompt": {
+    "defaultMessage": "Image caption",
+    "description": "Prompt in SendMessage for attached image"
+  },
+  "invalid_content": {
+    "defaultMessage": "invalid content",
+    "description": "Shown when the message is unreadable"
+  },
+  "invalid_security_token": {
+    "defaultMessage": "Invalid security token",
+    "description": "Error message when resetting password."
+  },
+  "label_client": {
+    "defaultMessage": "Client:",
+    "description": "Label for a client version"
+  },
+  "label_content_type": {
+    "defaultMessage": "Content type:",
+    "description": "Label for file content type (mime)"
+  },
+  "label_default_access_mode": {
+    "defaultMessage": "Default access mode:",
+    "description": "Label for default access mode"
+  },
+  "label_description": {
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description"
+  },
+  "label_file_name": {
+    "defaultMessage": "File name:",
+    "description": "Label for a file name"
+  },
+  "label_group_members": {
+    "defaultMessage": "Group members:",
+    "description": "Section title or label"
+  },
+  "label_incognito_mode": {
+    "defaultMessage": "Incognito mode:",
+    "description": "Label for incognito mode toggle"
+  },
+  "label_message_sound": {
+    "defaultMessage": "Message sound:",
+    "description": "Label for message sounds toggle"
+  },
+  "label_muting_topic": {
+    "defaultMessage": "Muted:",
+    "description": "Label for Muting/unmuting the topic"
+  },
+  "label_new_password": {
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password"
+  },
+  "label_other_user": {
+    "defaultMessage": "Other",
+    "description": "Label for the other user when the user is unnamed"
+  },
+  "label_password": {
+    "defaultMessage": "Password",
+    "description": "Label for password editing"
+  },
+  "label_permissions": {
+    "defaultMessage": "Permissions:",
+    "description": "Section title"
+  },
+  "label_private": {
+    "defaultMessage": "Private comment",
+    "description": "Label for editing 'private'"
+  },
+  "label_push_notifications": {
+    "defaultMessage": "Notification alerts:",
+    "description": "Label for push notifications switch"
+  },
+  "label_push_notifications_disabled": {
+    "defaultMessage": "Notification alerts (requires HTTPS):",
+    "description": "Label for push notifications switch"
+  },
+  "label_reset_password": {
+    "defaultMessage": "Send a password reset email:",
+    "description": "Label for password reset field"
+  },
+  "label_sdk": {
+    "defaultMessage": "SDK:"
+  },
+  "label_server": {
+    "defaultMessage": "Server:",
+    "description": "Label for a server version"
+  },
+  "label_server_address": {
+    "defaultMessage": "Server address:"
+  },
+  "label_server_to_use": {
+    "defaultMessage": "Server to use:",
+    "description": "Label for server selector in SettingsView"
+  },
+  "label_size": {
+    "defaultMessage": "Size:",
+    "description": "Label for file size"
+  },
+  "label_topic_name": {
+    "defaultMessage": "Name",
+    "description": "Label for editing topic name"
+  },
+  "label_unarchive_topic": {
+    "defaultMessage": "Archived:",
+    "description": "Label for unarchiving the topic"
+  },
+  "label_user_contacts": {
+    "defaultMessage": "Contacts:",
+    "description": "Label for user contacts"
+  },
+  "label_user_id": {
+    "defaultMessage": "ID:",
+    "description": "Label for user address (ID)"
+  },
+  "label_wire_transport": {
+    "defaultMessage": "Wire transport:",
+    "description": "Label for wire transport selection in SettingsView"
+  },
+  "label_you": {
+    "defaultMessage": "You:",
+    "description": "Label for the current user"
+  },
+  "label_your_name": {
+    "defaultMessage": "Your name",
+    "description": "Label for full name editing"
+  },
+  "label_your_permissions": {
+    "defaultMessage": "Your permissions:",
+    "description": "Label for current user permissions"
+  },
+  "last_seen_timestamp": {
+    "defaultMessage": "Last seen",
+    "description": "Label for the timestamp of when the user or topic was last online"
+  },
+  "leave_chat_warning": {
+    "defaultMessage": "Are you sure you want to leave this conversation?",
+    "description": "Alert dialog warning when unsubscribing from a chat."
+  },
+  "link_contact_us": {
+    "defaultMessage": "Contact Us",
+    "description": "Ancor text for contacting us by email"
+  },
+  "link_privacy_policy": {
+    "defaultMessage": "Privacy Policy",
+    "description": "Ancor text for privacy policy link"
+  },
+  "link_terms_of_service": {
+    "defaultMessage": "Terms of Service",
+    "description": "Ancor text for terms of service link"
+  },
+  "login_prompt": {
+    "defaultMessage": "Login",
+    "description": "Placeholer for username/login"
+  },
+  "menu_item_archive_topic": {
+    "defaultMessage": "Archive",
+    "description": "Move topic from the list of active chats to archive"
+  },
+  "menu_item_block": {
+    "defaultMessage": "Block",
+    "description": "Block topic or user"
+  },
+  "menu_item_clear_messages": {
+    "defaultMessage": "Clear messages",
+    "description": "Delete all messages"
+  },
+  "menu_item_clear_messages_for_all": {
+    "defaultMessage": "Clear for All",
+    "description": "Delete all message(s) for all members"
+  },
+  "menu_item_delete": {
+    "defaultMessage": "Delete",
+    "description": "Delete selected messages"
+  },
+  "menu_item_delete_for_all": {
+    "defaultMessage": "Delete for All",
+    "description": "Delete selected message(s) for all members"
+  },
+  "menu_item_delete_topic": {
+    "defaultMessage": "Delete",
+    "description": "Delete entire topic"
+  },
+  "menu_item_edit_permissions": {
+    "defaultMessage": "Edit permissions",
+    "description": "Menu item [Edit permissions]"
+  },
+  "menu_item_forward": {
+    "defaultMessage": "Forward",
+    "description": "Forward message"
+  },
+  "menu_item_info": {
+    "defaultMessage": "Info",
+    "description": "Show extended topic information"
+  },
+  "menu_item_member_delete": {
+    "defaultMessage": "Remove",
+    "description": "Remove user from topic"
+  },
+  "menu_item_mute": {
+    "defaultMessage": "Mute",
+    "description": "Turn off notifications"
+  },
+  "menu_item_reply": {
+    "defaultMessage": "Reply",
+    "description": "Reply to message"
+  },
+  "menu_item_restore_topic": {
+    "defaultMessage": "Restore",
+    "description": "Restore topic from archive"
+  },
+  "menu_item_send_retry": {
+    "defaultMessage": "Retry",
+    "description": "Retry sending message"
+  },
+  "menu_item_unblock": {
+    "defaultMessage": "Unblock",
+    "description": "Unblock topic or user"
+  },
+  "menu_item_unmute": {
+    "defaultMessage": "Unmute",
+    "description": "Turn notifications on"
+  },
+  "menu_item_video_call": {
+    "defaultMessage": "Video Call",
+    "description": "Start video call"
+  },
+  "message_sending": {
+    "defaultMessage": "sending...",
+    "description": "Message being sent, in place of time stamp"
+  },
+  "message_sending_failed": {
+    "defaultMessage": "failed",
+    "description": "Failed to send message, in place of time stamp"
+  },
+  "messages_not_readable": {
+    "defaultMessage": "no access to messages",
+    "description": "Message shown in topic without the read access"
+  },
+  "messaging_disabled_prompt": {
+    "defaultMessage": "Messaging disabled",
+    "description": "Prompt in SendMessage in read-only topic"
+  },
+  "more_online_members": {
+    "defaultMessage": "+{overflow} more",
+    "description": "Shown in MessagesView title bar when the number of online subscribers exceeds MAX_ONLINE_IN_TOPIC"
+  },
+  "new_message_prompt": {
+    "defaultMessage": "New message",
+    "description": "Prompt in send message field"
+  },
+  "new_password_placeholder": {
+    "defaultMessage": "Enter new password",
+    "description": "Placeholder for entering new password"
+  },
+  "no_connection": {
+    "defaultMessage": "No connection",
+    "description": "Warning that the user is offline."
+  },
+  "no_contacts": {
+    "defaultMessage": "You have no contacts :-(",
+    "description": "Shown in ContactsView when the user has no contacts"
+  },
+  "numeric_confirmation_code_prompt": {
+    "defaultMessage": "Numbers only",
+    "description": "Prompt for numeric conformation code"
+  },
+  "online_now": {
+    "defaultMessage": "online now",
+    "description": "Indicator that the user or topic is currently online"
+  },
+  "panel_title_crop": {
+    "defaultMessage": "Drag to Adjust",
+    "description": "Title for AvatarCropView."
+  },
+  "panel_title_general": {
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon."
+  },
+  "panel_title_info": {
+    "defaultMessage": "Info",
+    "description": "Title for InfoView"
+  },
+  "panel_title_members": {
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view."
+  },
+  "panel_title_security": {
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity."
+  },
+  "password_prompt": {
+    "defaultMessage": "Password",
+    "description": "Placeholder/prompt for entering password"
+  },
+  "password_reset_email_sent": {
+    "defaultMessage": "An email has been sent to {email}. Follow the directions in the email to reset your password.",
+    "description": "Notification that the email with password reset instructions has been sent"
+  },
+  "password_unchanged_prompt": {
+    "defaultMessage": "Unchanged",
+    "description": "Message in editor while password is unchanged"
+  },
+  "peers_messaging_disabled": {
+    "defaultMessage": "Peer's messaging is disabled.",
+    "description": "Shown when the p2p peer's messaging is disabled"
+  },
+  "permission_admin": {
+    "defaultMessage": "Approve ({val})",
+    "description": "Name of A permission"
+  },
+  "permission_delete": {
+    "defaultMessage": "Delete ({val})",
+    "description": "Name of D permission"
+  },
+  "permission_join": {
+    "defaultMessage": "Join ({val})",
+    "description": "Name of J permission"
+  },
+  "permission_owner": {
+    "defaultMessage": "Owner ({val})",
+    "description": "Name of O permission"
+  },
+  "permission_pres": {
+    "defaultMessage": "Get notified ({val})",
+    "description": "Name of P permission"
+  },
+  "permission_read": {
+    "defaultMessage": "Read ({val})",
+    "description": "Name of R permission"
+  },
+  "permission_share": {
+    "defaultMessage": "Share ({val})",
+    "description": "Name of S permission"
+  },
+  "permission_write": {
+    "defaultMessage": "Write ({val})",
+    "description": "Name of W permission"
+  },
+  "permissions_anonymous": {
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions"
+  },
+  "permissions_authenticated": {
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions"
+  },
+  "permissions_user": {
+    "defaultMessage": "User's Permissions",
+    "description": "Title for editing user's permissions"
+  },
+  "phone_dative": {
+    "defaultMessage": "phone",
+    "description": "Dative case of 'phone', i.e. 'phone' in 'by phone'"
+  },
+  "private_editing_placeholder": {
+    "defaultMessage": "Visible to you only",
+    "description": "Placeholder for editing 'private'"
+  },
+  "push_init_failed": {
+    "defaultMessage": "Failed to initialize push notifications",
+    "description": "Error message when push notifications have failed to initialize."
+  },
+  "reconnect_countdown": {
+    "defaultMessage": "Disconnected. Reconnecting in {seconds}…",
+    "description": "Message shown when an app update is available."
+  },
+  "reconnect_now": {
+    "defaultMessage": "Try now",
+    "description": "Prompt for reconnecting now"
+  },
+  "reload_update": {
+    "defaultMessage": "Reload",
+    "description": "Call to action to reload application when update is available."
+  },
+  "report_chat_warning": {
+    "defaultMessage": "Are you sure you want to block and report this conversation?",
+    "description": "Alert dialog warning when reporting a conversation for abuse"
+  },
+  "requested_permissions": {
+    "defaultMessage": "Requested",
+    "description": "Title for permissions"
+  },
+  "save_attachment": {
+    "defaultMessage": "save",
+    "description": "Call to save an attachment"
+  },
+  "search_for_contacts": {
+    "defaultMessage": "Use search to find contacts",
+    "description": "Text shown in contacts view when user entered no search query."
+  },
+  "search_no_results": {
+    "defaultMessage": "Search returned no results",
+    "description": "Text shown in contacts view when query returned no results."
+  },
+  "search_placeholder": {
+    "defaultMessage": "List like email:alice@example.com, tel:17025550003...",
+    "description": "Placeholder in contacts search field"
+  },
+  "sidepanel_title_acc_notifications": {
+    "defaultMessage": "Notifications",
+    "description": "Sidepanel title for AccNotificationsView."
+  },
+  "sidepanel_title_acc_support": {
+    "defaultMessage": "Support",
+    "description": "Sidepanel title for AccSupportView."
+  },
+  "sidepanel_title_account_settings": {
+    "defaultMessage": "Account Settings",
+    "description": "Sidepanel title for AccountSettingsView."
+  },
+  "sidepanel_title_archive": {
+    "defaultMessage": "Archived Chats",
+    "description": "Sidepanel title for ContactsView-Archive."
+  },
+  "sidepanel_title_blocked": {
+    "defaultMessage": "Blocked Chats",
+    "description": "Sidepanel title for ContactsView-Blocked."
+  },
+  "sidepanel_title_cred": {
+    "defaultMessage": "Confirm Credentials",
+    "description": "Sidepanel title for ValidationView."
+  },
+  "sidepanel_title_login": {
+    "defaultMessage": "Sign In",
+    "description": "Sidepanel title for LoginView."
+  },
+  "sidepanel_title_newtpk": {
+    "defaultMessage": "Start New Chat",
+    "description": "Sidepanel title for NewTopicView."
+  },
+  "sidepanel_title_register": {
+    "defaultMessage": "Create Account",
+    "description": "Sidepanel title for CreateAccountView."
+  },
+  "sidepanel_title_reset": {
+    "defaultMessage": "Reset Password",
+    "description": "Sidepanel title for PasswordResetView."
+  },
+  "sidepanel_title_settings": {
+    "defaultMessage": "Settings",
+    "description": "Sidepanel title for SettingsView."
+  },
+  "stay_logged_in": {
+    "defaultMessage": "Stay logged in",
+    "description": "Label for a checkbox"
+  },
+  "tabtitle_find_user": {
+    "defaultMessage": "find",
+    "description": "Tab title Find"
+  },
+  "tabtitle_group_by_id": {
+    "defaultMessage": "by id",
+    "description": "Tab title Find topic by ID"
+  },
+  "tabtitle_new_group": {
+    "defaultMessage": "new group",
+    "description": "Tab title New Group"
+  },
+  "tags_editor_no_tags": {
+    "defaultMessage": "Add some tags",
+    "description": "Tag editor prompt when no tags are found."
+  },
+  "tags_not_found": {
+    "defaultMessage": "No tags defined. Add some.",
+    "description": ""
+  },
+  "title_all_contacts": {
+    "defaultMessage": "All Contacts",
+    "description": "Section title [All Contacts]"
+  },
+  "title_group_members": {
+    "defaultMessage": "Group Members",
+    "description": "Section title"
+  },
+  "title_manage_tags": {
+    "defaultMessage": "Manage",
+    "description": "Section title for the list of tags"
+  },
+  "title_not_found": {
+    "defaultMessage": "Not found",
+    "description": "Title shown when topic is not found"
+  },
+  "title_permissions": {
+    "defaultMessage": "Permissions",
+    "description": "Section title"
+  },
+  "title_tag_manager": {
+    "defaultMessage": "Tags (search & discovery)",
+    "description": "Section title for TagManager"
+  },
+  "topic_block_warning": {
+    "defaultMessage": "Are you sure you want to block this conversation?",
+    "description": "Alert warning when blocking a topic."
+  },
+  "topic_delete": {
+    "defaultMessage": "Delete Conversation",
+    "description": "Alert title when deleting the topic."
+  },
+  "topic_delete_warning": {
+    "defaultMessage": "Are you sure you want to delete this conversation? It cannot be undone.",
+    "description": "Alert warning when deleting entire topic"
+  },
+  "topic_name_editing_placeholder": {
+    "defaultMessage": "Freeform name of the group",
+    "description": "Prompt for entering topic name"
+  },
+  "unnamed_topic": {
+    "defaultMessage": "Unnamed",
+    "description": "Title shown when the topic has no name"
+  },
+  "update_available": {
+    "defaultMessage": "Update available.",
+    "description": "Message shown when an app update is available."
+  },
+  "upload_finishing": {
+    "defaultMessage": "finishing...",
+    "description": "Notification that upload is finishing"
+  },
+  "user_not_found": {
+    "defaultMessage": "Not found",
+    "description": "In place of a user's full name when the user is not found."
+  },
+  "validate_credential_action": {
+    "defaultMessage": "confirm",
+    "description": "Validate credentail call to action"
+  }
+}

src/index.js

@@ -0,0 +1,39 @@
+// Put all packages together.
+// Used to generate umd/index.prod.js
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { IntlProvider } from 'react-intl';
+
+import allMessages from './messages.json';
+import TinodeWeb from './views/tinode-web.jsx';
+import HashNavigation from './lib/navigation.js';
+
+// Detect human language to use in the UI:
+//  Check parameters from URL hash #?hl=ru, then browser, then use 'en' as a fallback.
+const { params } = HashNavigation.parseUrlHash(window.location.hash);
+const language = (params && params.hl) ||
+  (navigator.languages && navigator.languages[0]) ||
+  navigator.language ||
+  navigator.userLanguage ||
+  'en';
+
+// Get the base language 'en' from a more specific 'en_GB' or 'en-US' as a partial fallback.
+const baseLanguage = language.toLowerCase().split(/[-_]/)[0];
+
+// Try the full locale first, then the locale without the region code, fallback to 'en'.
+const htmlLang = allMessages[language] ? language : allMessages[baseLanguage] ? baseLanguage : 'en';
+const messages = allMessages[htmlLang];
+
+// Set lang attribute of the HTML element: <html lang="XX">
+document.getElementsByTagName('html')[0].setAttribute('lang', htmlLang);
+
+ReactDOM.render(
+  <React.StrictMode>
+    <IntlProvider locale={language} messages={messages} textComponent={React.Fragment}>
+      <TinodeWeb />
+    </IntlProvider>
+  </React.StrictMode>,
+  document.getElementById('mountPoint')
+);

src/lib/blob-helpers.js

@@ -0,0 +1,307 @@
+// File and image helper functions.
+
+// Supported image MIME types and corresponding file extensions.
+export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
+export const MIME_EXTENSIONS         = ['jpg',        'gif',       'png',       'svg',       'svg'];
+
+// Get an URL from a theCard photo: either create a data: URL or return reference URL.
+export function makeImageUrl(photo) {
+  if (photo && typeof photo == 'object') {
+    if (photo.ref) {
+      return photo.ref
+    }
+    if (photo.data && photo.type) {
+      const mime = photo.type.startsWith('image/') ? photo.type : ('image/' + photo.type);
+      return 'data:' + mime + ';base64,' + photo.data;
+    }
+  }
+  return null;
+}
+
+// Calculate linear dimensions for scaling image down to fit under a certain size.
+// Returns an object which contains destination sizes, source sizes, and offsets
+// into source (when making square images).
+export function fitImageSize(width, height, maxWidth, maxHeight, forceSquare) {
+  // Sanitize input
+  width = width | 0;
+  height = height | 0;
+  maxWidth = maxWidth | 0;
+  maxHeight = maxHeight | 0;
+
+  if (width <= 0 || height <= 0 || maxWidth <= 0 || maxHeight <= 0) {
+    return null;
+  }
+
+  if (forceSquare) {
+    maxWidth = maxHeight = Math.min(maxWidth, maxHeight);
+  }
+
+  const scale = Math.min(
+    Math.min(width, maxWidth) / width,
+    Math.min(height, maxHeight) / height
+  );
+
+  const size = {
+    dstWidth: (width * scale) | 0,
+    dstHeight: (height * scale) | 0,
+  };
+
+  if (forceSquare) {
+    // Also calculate parameters for making the image square.
+    size.dstWidth = size.dstHeight = Math.min(size.dstWidth, size.dstHeight);
+    size.srcWidth = size.srcHeight = Math.min(width, height);
+    size.xoffset = ((width - size.srcWidth) / 2) | 0;
+    size.yoffset = ((height - size.srcWidth) / 2) | 0;
+  } else {
+    size.xoffset = size.yoffset = 0;
+    size.srcWidth = width;
+    size.srcHeight = height;
+  }
+  return size;
+}
+
+// Ensure file's extension matches mime content type
+export function fileNameForMime(fname, mime) {
+  const idx = SUPPORTED_IMAGE_FORMATS.indexOf(mime);
+  if (idx < 0 || !fname) {
+    // Unknown mime or empty name.
+    return fname;
+  }
+  const ext = MIME_EXTENSIONS[idx];
+
+  const at = fname.lastIndexOf('.');
+  if (at >= 0) {
+    fname = fname.substring(0, at);
+  }
+  return fname + '.' + ext;
+}
+
+// Scale uploaded image to fit under certain dimensions and byte size, optionally constraining to a square.
+// Returns a promise which is resolven on success or rejected on failure.
+export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquare) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onerror = function(err) {
+      reject(new Error("Image format unrecognized"));
+    }
+    img.onload = async function() {
+      // Once the image is loaded, the URL is no longer needed.
+      URL.revokeObjectURL(img.src);
+
+      // Calculate the desired image dimensions.
+      const dim = fitImageSize(img.width, img.height, maxWidth, maxHeight, forceSquare);
+      if (!dim) {
+        reject(new Error("Invalid image"));
+        return;
+      }
+      let canvas = document.createElement('canvas');
+      canvas.width = dim.dstWidth;
+      canvas.height = dim.dstHeight;
+      let ctx = canvas.getContext('2d');
+      ctx.imageSmoothingEnabled = true;
+      ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
+        0, 0, dim.dstWidth, dim.dstHeight);
+
+      const mime = SUPPORTED_IMAGE_FORMATS.includes(fileOrBlob.type) ? fileOrBlob.type : 'image/jpeg';
+      // Generate blob to check size of the image.
+      let blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
+      if (!blob) {
+        reject(new Error("Unsupported image format"));
+        return;
+      }
+      // Ensure the image is not too large. Shrink the image keeping the aspect ratio.
+      // Do nothing if maxsize is <= 0.
+      while (maxSize > 0 && blob.length > maxSize) {
+        dim.dstWidth = (dim.dstWidth * 0.70710678118) | 0;
+        dim.dstHeight = (dim.dstHeight * 0.70710678118) | 0;
+        canvas.width = dim.dstWidth;
+        canvas.height = dim.dstHeight;
+        ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
+          0, 0, dim.dstWidth, dim.dstHeight);
+        blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
+      }
+
+      canvas = null;
+      resolve({mime: mime, blob: blob, width: dim.dstWidth, height: dim.dstHeight, name: fileNameForMime(fileOrBlob.name, mime)});
+    };
+    img.src = URL.createObjectURL(fileOrBlob);
+  });
+}
+
+// Scale and crop image according to specified dimensions.
+// The coordinates are in unscaled image pixels, i.e. cut the rectangle first then scale it.
+// returns a promise.
+export function imageCrop(mime, objURL, left, top, width, height, scale) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onerror = (err) => {
+      reject(new Error("Image format unrecognized"));
+    };
+    img.onload = () => {
+      // Once the image is loaded, the URL is no longer needed.
+      URL.revokeObjectURL(img.src);
+
+      let canvas = document.createElement('canvas');
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      let ctx = canvas.getContext('2d');
+      ctx.imageSmoothingEnabled = true;
+      ctx.drawImage(img, left, top, width, height, 0, 0, canvas.width, canvas.height);
+
+      mime = SUPPORTED_IMAGE_FORMATS.includes(mime) ? mime : 'image/jpeg';
+      // Generate blob to check size of the image.
+      canvas.toBlob((blob) => {
+        // Allow GC.
+        canvas = null;
+        if (blob) {
+          resolve({mime: mime, blob: blob, width: width, height: height});
+        } else {
+          reject(new Error("Unsupported image format"));
+        }
+      }, mime);
+    };
+    img.src = objURL;
+  });
+}
+
+// Convert file to base64 string.
+export function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = (evt) => {
+      reject(reader.error);
+    };
+    reader.onload = () => {
+      resolve({mime: file.type, bits: reader.result.split(',')[1], name: file.name});
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+// Convert Blob to base64 string. Returns a promise resolved with the base64 string and mime.
+export function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = _ => {
+      reject(reader.error);
+    };
+    reader.onload = () => {
+      resolve({mime: blob.type, bits: reader.result.split(',')[1]});
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+// File pasted from the clipboard. It's either an inline image or a file attachment.
+export function filePasted(event, onImageSuccess, onAttachmentSuccess, onError) {
+  const items = (event.clipboardData || event.originalEvent.clipboardData || {}).items;
+  if (!items || !items.length) {
+    return false;
+  }
+
+  for (let i in items) {
+    const item = items[i];
+    if (item.kind === 'file') {
+      const file = item.getAsFile();
+      if (!file) {
+        console.error("Failed to get file object from pasted file item", item.kind, item.type);
+        onError("Failed to get file object from pasted file item");
+        continue;
+      }
+      if (file.type && file.type.split('/')[0] == 'image') {
+        onImageSuccess(file);
+      } else {
+        onAttachmentSuccess(file);
+      }
+      // Indicate that the pasted data contains a file.
+      return true;
+    }
+  }
+  // No file found.
+  return false;
+}
+
+// Get mime type from data URL header.
+export function getMimeType(header) {
+  var mime = /^data:(image\/[-+a-z0-9.]+);base64/.exec(header);
+  return (mime && mime.length > 1) ? mime[1] : null;
+}
+
+// Given length of a binary object in bytes, calculate the length after
+// base64 encoding.
+export function base64EncodedLen(n) {
+  return Math.floor((n + 2) / 3) * 4;
+}
+
+// Given length of a base64-encoded object, calculate decoded size of the
+// pbject in bytes.
+export function base64DecodedLen(n) {
+  return Math.floor(n / 4) * 3;
+}
+
+// Re-encode string to standard base64 encoding with padding.
+// The string may be base64-URL encoded without the padding.
+export function base64ReEncode(str) {
+  if (str) {
+    str = str.replace(/-/g, '+').replace(/_/g, '/');
+    try {
+      str = btoa(atob(str));
+    } catch(err) {
+      console.error("Failed to base64 re-encode string.", err);
+      str = null;
+    }
+  }
+  return str;
+}
+
+// Convert a base64 encoded string with the provided mime type into a Blob.
+export function base64ToBlob(str, mime) {
+  if (!str) {
+    return null;
+  }
+
+  try {
+    // Make blob.
+    const bin = atob(str);
+    const length = bin.length;
+    const buf = new ArrayBuffer(length);
+    const arr = new Uint8Array(buf);
+    for (let i = 0; i < length; i++) {
+      arr[i] = bin.charCodeAt(i);
+    }
+
+    return new Blob([buf], { type: mime });
+  } catch(err) {
+    console.error("Failed to convert base64 to blob: ", err);
+  }
+
+  return null;
+}
+
+export function intArrayToBase64(arr) {
+  if (!Array.isArray(arr)) {
+    return null;
+  }
+  try {
+    let bin = '';
+    new Uint8Array(arr).forEach(b => bin += String.fromCharCode(b));
+    return window.btoa(bin);
+  } catch (err) {}
+  return null;
+}
+
+export function base64ToIntArray(b64) {
+  const arr = [];
+  try {
+    const bin =  window.atob(b64);
+    [...bin].forEach(c => {
+      arr.push(c.charCodeAt(0));
+    });
+    return arr;
+  } catch (err) {}
+  return null;
+}

src/lib/formatters.js

@@ -0,0 +1,412 @@
+import React from 'react';
+import { defineMessages } from 'react-intl';
+
+import { Drafty } from 'tinode-sdk';
+
+import AudioPlayer from '../widgets/audio-player.jsx'
+import LazyImage from '../widgets/lazy-image.jsx'
+import UploadingImage from '../widgets/uploading-image.jsx'
+
+import { IMAGE_THUMBNAIL_DIM, BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
+import { base64ToBlob, blobToBase64, fitImageSize, imageScaled } from './blob-helpers.js';
+import { idToColorClass, secondsToTime, shortenFileName } from './strformat.js';
+import { cancelablePromise, sanitizeUrlForMime } from './utils.js';
+
+const messages = defineMessages({
+  drafty_form: {
+    id: 'drafty_form',
+    defaultMessage: 'Form: ',
+    description: 'Comment for form in drafty'
+  },
+  drafty_attachment: {
+    id: 'drafty_attachment',
+    defaultMessage: 'Attachment',
+    description: 'Comment for attachment in drafty'
+  },
+  drafty_image: {
+    id: 'drafty_image',
+    defaultMessage: 'Picture',
+    description: 'Comment for embedded images in drafty'
+  },
+  drafty_unknown: {
+    id: 'drafty_unknown',
+    defaultMessage: 'Unsupported',
+    description: 'Unsupported entity in drafty'
+  }
+});
+
+// Additional processing of image data.
+function handleImageData(el, data, attr) {
+  if (!data) {
+    attr.src = 'img/broken_image.png';
+    attr.style = {
+      width: IMAGE_THUMBNAIL_DIM + 'px',
+      height: IMAGE_THUMBNAIL_DIM + 'px',
+    };
+    return el;
+  }
+
+  attr.className = 'inline-image';
+  const dim = fitImageSize(data.width, data.height,
+    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
+      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
+      {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+  attr.style = {
+    width: dim.dstWidth + 'px',
+    height: dim.dstHeight + 'px',
+    // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
+    minWidth: dim.dstWidth + 'px',
+    minHeight: dim.dstHeight + 'px'
+  };
+  if (!Drafty.isProcessing(data)) {
+    attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'image'));
+    attr.alt = data.name;
+    if (attr.src) {
+      if (Math.max(data.width || 0, data.height || 0) > IMAGE_THUMBNAIL_DIM) {
+        // Allow previews for large enough images.
+        attr.onClick = this.onImagePreview;
+        attr.className += ' image-clickable';
+      }
+      attr.loading = 'lazy';
+    } else {
+      attr.src = 'img/broken_image.png';
+    }
+  } else {
+    // Use custom element instead of <img>.
+    el = UploadingImage;
+  }
+
+  return el;
+}
+
+// The main Drafty formatter: converts Drafty elements into React classes. 'this' is set by the caller.
+// 'this' must contain:
+//    viewportWidth: this.props.viewportWidth;
+//    authorizeURL: this.props.tinode.authorizeURL
+//    onImagePreview: this.handleImagePreview
+//    onFormButtonClick: this.handleFormButtonClick
+//    onQuoteClick: this.handleQuoteClick (optional)
+export function fullFormatter(style, data, values, key, stack) {
+  if (stack.includes('QQ')) {
+    return quoteFormatter.call(this, style, data, values, key);
+  }
+
+  if (!style) {
+    // Unformatted.
+    return values;
+  }
+
+  let el = Drafty.tagName(style);
+  let attr = Drafty.attrValue(style, data) || {};
+  attr.key = key;
+  switch (style) {
+    case 'AU':
+      // Show audio player.
+      if (attr.src) {
+        attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'audio'));
+        attr.duration = data.duration > 0 ? (data.duration | 0) : undefined;
+        attr.preview = data.preview;
+        attr.loading = 'lazy';
+      }
+      el = AudioPlayer;
+      // Audio element cannot have content.
+      values = null;
+      break;
+    case 'BR':
+      values = null;
+      break;
+    case 'EX':
+      // Ignore.
+      break;
+    case 'HL':
+      // Highlighted text. Assign class name.
+      attr.className = 'highlight';
+      break;
+    case 'HD':
+      el = null;
+      values = null;
+      break;
+    case 'IM':
+      // Additional processing for images
+      el = handleImageData.call(this, el, data, attr);
+      // Image element cannot have content.
+      values = null;
+      break;
+    case 'BN':
+      // Button
+      attr.onClick = this.onFormButtonClick;
+      let inner = React.Children.map(values, (child) => {
+        return typeof child == 'string' ? child : undefined;
+      });
+      if (!inner || inner.length == 0) {
+        inner = [attr.name]
+      }
+      // Get text which will be sent back when the button is clicked.
+      attr['data-title'] = inner.join('');
+      break;
+    case 'MN':
+      // Mention
+      attr.className = 'mention'
+      if (data) {
+        attr.className += ' ' + idToColorClass(data.val, false, true);
+      }
+      break;
+    case 'FM':
+      // Form
+      attr.className = 'bot-form';
+      break;
+    case 'RW':
+      // Form element formatting is dependent on element content.
+      break;
+    case 'QQ':
+      // Quote/citation.
+      attr.className = 'reply-quote'
+      attr.onClick = this.onQuoteClick;
+      break;
+    default:
+      if (!el) {
+        // Unknown element.
+        el = React.Fragment;
+        attr = {key: key};
+        // Generate comment for unknown element.
+        let body = values;
+        if (!Array.isArray(values) || !values.join('').trim()) {
+          body = [<span key="x1" className="gray">{this.formatMessage(messages.drafty_unknown)}</span>];
+        }
+        values = [<i key="x0" className="material-icons gray">extension</i>, ' '].concat(body);
+      }
+      break;
+  }
+  if (!el) {
+    return values;
+  }
+  return React.createElement(el, attr, values);
+}
+
+// Converts Drafty object into a one-line preview. 'this' is set by the caller.
+// 'this' must contain:
+//    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
+export function previewFormatter(style, data, values, key) {
+  if (!style) {
+    // Unformatted.
+    return values;
+  }
+
+  let el = Drafty.tagName(style);
+  const attr = { key: key };
+  switch (style) {
+    case 'AU':
+      // Voicemail as '[mic] 0:00'.
+      el = React.Fragment;
+      values = [<i key="au" className="material-icons">mic</i>, ' ', secondsToTime(data.duration/1000)];
+      break;
+    case 'BR':
+      // Replace new line with a space.
+      el = React.Fragment;
+      values = [' '];
+      break;
+    case 'HL':
+      // Make highlight less prominent in preview.
+      attr.className = 'highlight preview';
+      break;
+    case 'LN':
+    case 'MN':
+      // Disable links in previews.
+      el = 'span';
+      break;
+    case 'IM':
+      // Replace image with '[icon] Image'.
+      el = React.Fragment;
+      values = [<i key="im" className="material-icons">photo</i>, ' ', this.formatMessage(messages.drafty_image)];
+      break;
+    case 'BN':
+      el = 'span';
+      attr.className = 'flat-button faux';
+      break;
+    case 'FM':
+      el = React.Fragment;
+      values = [<i key="fm" className="material-icons">dashboard</i>,
+        this.formatMessage(messages.drafty_form)].concat(' ', values || []);
+      break;
+    case 'RW':
+      el = React.Fragment;
+      break;
+    case 'EX':
+      if (data) {
+        if (data.mime == 'application/json') {
+          // Ignore JSON attachments: they are form response payloads.
+          return null;
+        }
+        // Clear payload.
+        delete data.val;
+        delete data.ref;
+      }
+      el = React.Fragment;
+      values = [<i key="ex" className="material-icons">attachment</i>, ' ', this.formatMessage(messages.drafty_attachment)];
+      break;
+    case 'QQ':
+    case 'HD':
+      el = null;
+      values = null;
+      break;
+    default:
+      if (!el) {
+        // Unknown element.
+        el = React.Fragment;
+        values = [<i key="x0" className="material-icons gray">extension</i>, ' ', this.formatMessage(messages.drafty_unknown)];
+      }
+      break;
+  }
+  if (!el) {
+    return values;
+  }
+  return React.createElement(el, attr, values);
+};
+
+// Converts Drafty object into a quoted reply. 'this' is set by the caller.
+function inlineImageAttr(attr, data) {
+  attr.style = {
+    width: IMAGE_THUMBNAIL_DIM + 'px',
+    height: IMAGE_THUMBNAIL_DIM + 'px',
+    maxWidth: IMAGE_THUMBNAIL_DIM + 'px',
+    maxHeight: IMAGE_THUMBNAIL_DIM + 'px',
+  }
+  attr.className = 'inline-image';
+  attr.alt = this.formatMessage(messages.drafty_image);
+  if (!data) {
+    attr.src = 'img/broken_image.png';
+  }
+  attr.title = attr.alt;
+  return attr;
+}
+
+// Displays a portion of Drafty within 'QQ' quotes. 'this' is set by the caller.
+// 'this' must contain:
+//    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
+//    authorizeURL: this.props.tinode.authorizeURL
+//    onQuoteClick: this.handleQuoteClick (optional)
+function quoteFormatter(style, data, values, key) {
+  if (['BR', 'EX', 'IM', 'MN'].includes(style)) {
+    let el = Drafty.tagName(style);
+    let attr = Drafty.attrValue(style, data) || {};
+    attr.key = key;
+    switch(style) {
+      case 'BR':
+        values = null;
+        break;
+      case 'IM':
+        attr = inlineImageAttr.call(this, attr, data);
+        values = [React.createElement('img', attr, null), ' ', attr.alt];
+        el = React.Fragment;
+        // Fragment attributes.
+        attr = {key: key};
+        break;
+      case 'MN':
+        el = 'span';
+        attr.className = 'mention'
+        if (data) {
+          attr.className += ' ' + idToColorClass(data.val, false, true);
+        }
+        break;
+      case 'EX':
+        let fname;
+        if (data) {
+          if (data.mime == 'application/json') {
+            // Ignore JSON attachments: they are form response payloads.
+            return null;
+          }
+          fname = data.name;
+          // Clear payload.
+          delete data.val;
+          delete data.ref;
+        }
+        el = React.Fragment;
+        values = [<i key="ex" className="material-icons">attachment</i>,
+          shortenFileName(fname, 16) || this.formatMessage(messages.drafty_attachment)];
+        break;
+    }
+    return React.createElement(el, attr, values);
+  }
+  return previewFormatter.call(this, style, data, values, key);
+}
+
+// Create image thumbnail suitable for inclusion in a quote.
+function quoteImage(data) {
+  let promise;
+  // Get the blob from the image data.
+  if (data.val) {
+    const blob = base64ToBlob(data.val, data.mime);
+    if (!blob) {
+      throw new Error("Invalid image");
+    }
+    promise = Promise.resolve(blob);
+  } else if (data.ref) {
+    promise = fetch(this.authorizeURL(sanitizeUrlForMime(data.ref, 'image')))
+      .then(evt => {
+        if (evt.ok) {
+          return evt.blob();
+        } else {
+          throw new Error(`Image fetch unsuccessful: ${evt.status} ${evt.statusText}`);
+        }
+      });
+  } else {
+    throw new Error("Missing image data");
+  }
+
+  // Scale the blob.
+  return promise
+    .then(blob => {
+      // Cut the square from the center of the image and shrink it.
+      return imageScaled(blob, IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, true)
+    }).then(scaled => {
+      data.mime = scaled.mime;
+      data.size = scaled.blob.size;
+      data.width = scaled.width;
+      data.height = scaled.height;
+      delete data.ref;
+      // Keeping the original file name, if provided: ex.data.name;
+
+      data.src = URL.createObjectURL(scaled.blob);
+      return blobToBase64(scaled.blob);
+    }).then(b64 => {
+      data.val = b64.bits;
+      return data;
+    }).catch(err => {
+      delete data.val;
+      delete data.src;
+      data.width = IMAGE_THUMBNAIL_DIM;
+      data.height = IMAGE_THUMBNAIL_DIM;
+      // Rethrow.
+      throw err;
+    });
+}
+
+// Create a preview of a reply.
+export function replyFormatter(style, data, values, key, stack) {
+  if (style == 'IM') {
+    const attr = inlineImageAttr.call(this, {key: key}, data);
+    let loadedPromise;
+    try {
+      loadedPromise = cancelablePromise(quoteImage.call(this, data));
+    } catch (error) {
+      loadedPromise = cancelablePromise(error);
+    }
+    attr.whenDone = loadedPromise;
+    values = [React.createElement(LazyImage, attr, null), ' ', attr.alt];
+    return React.createElement(React.Fragment, {key: key}, values);
+  } else if (style == 'QQ') {
+    if (stack.includes('QQ')) {
+      // Quote inside quote when forwarding a message.
+      return React.createElement('span', {key: key},
+        [<i key="qq" className="material-icons">format_quote</i>, ' ']);
+    }
+
+    const attr = Drafty.attrValue('QQ', data) || {};
+    attr.key = key;
+    attr.className = 'reply-quote'
+    return React.createElement(Drafty.tagName('QQ'), attr, values);
+  }
+  return quoteFormatter.call(this, style, data, values, key);
+}

src/lib/host-name.js

@@ -0,0 +1,29 @@
+import { KNOWN_HOSTS, DEFAULT_HOST } from '../config.js';
+
+// Detect server address from the URL
+export function detectServerAddress() {
+  let host = DEFAULT_HOST;
+  if (typeof window.location == 'object') {
+    if (window.location.protocol == 'file:' || window.location.hostname == 'localhost') {
+      host = KNOWN_HOSTS.local;
+    } else if (window.location.hostname) {
+      host = window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+    }
+  }
+  return host;
+}
+
+// Detect if the page is served over HTTPS.
+export function isSecureConnection() {
+  if (typeof window.location == 'object') {
+    return window.location.protocol == 'https:';
+  }
+  return false;
+}
+
+export function isLocalHost() {
+  if (typeof window.location == 'object') {
+    return window.location.hostname == 'localhost';
+  }
+  return false;
+}

src/lib/local-storage.js

@@ -0,0 +1,26 @@
+// Helper functions for storing values in localStorage.
+// By default localStorage can store only strings, not objects or other types.
+
+export default class LocalStorageUtil {
+  // Replace old object with the new one.
+  static setObject(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+
+  // Get stored object.
+  static getObject(key) {
+    const value = localStorage.getItem(key);
+    return value && JSON.parse(value);
+  }
+
+  // Partially or wholly update stored object.
+  static updateObject(key, value) {
+    const oldVal = this.getObject(key);
+    this.setObject(key, Object.assign(oldVal || {}, value));
+  }
+
+  // Just a wrapper.
+  static removeItem(key) {
+    localStorage.removeItem(key);
+  }
+}

src/lib/navigation.js

@@ -0,0 +1,78 @@
+// Utility class for hash navigation.
+
+// Parse hash as in http://www.example.com/path#hash as if it were
+// path and arguments.
+export default class HashNavigation {
+  static parseUrlHash(hash) {
+    // Split path from args, path -> parts[0], args->path[1]
+    const parts = hash.split('?', 2);
+    const params = {};
+    let path = [];
+    if (parts[0]) {
+      path = parts[0].replace('#', '').split('/');
+    }
+    if (parts[1]) {
+      parts[1].split('&').forEach(function(part) {
+        const item = part.split('=');
+        if (item[0]) {
+          params[decodeURIComponent(item[0])] = decodeURIComponent(item[1]);
+        }
+      });
+    }
+    return {path: path, params: params};
+  }
+
+  static navigateTo(url) {
+    window.location.hash = url;
+  }
+
+  static composeUrlHash(path, params) {
+    let url = path.join('/');
+    const args = [];
+    for (const key in params) {
+      if (params.hasOwnProperty(key)) {
+        args.push(key + '=' + params[key]);
+      }
+    }
+    if (args.length > 0) {
+      url += '?' + args.join('&');
+    }
+    return url;
+  }
+
+  static addUrlParam(hash, key, value) {
+    const parsed = this.parseUrlHash(hash);
+    parsed.params[key] = value;
+    return this.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static removeUrlParam(hash, key) {
+    const parsed = this.parseUrlHash(hash);
+    delete parsed.params[key];
+    return this.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static setUrlSidePanel(hash, sidepanel) {
+    const parsed = this.parseUrlHash(hash);
+    parsed.path[0] = sidepanel;
+    return this.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static setUrlInfoPanel(hash, infopanel) {
+    const parsed = this.parseUrlHash(hash);
+    if (infopanel) {
+      parsed.params.info = infopanel;
+    } else {
+      delete parsed.params.info;
+    }
+    return this.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static setUrlTopic(hash, topic) {
+    const parsed = this.parseUrlHash(hash);
+    parsed.path[1] = topic;
+    // Close InfoView on topic change.
+    delete parsed.params.info;
+    return this.composeUrlHash(parsed.path, parsed.params);
+  }
+}

src/lib/strformat.js

@@ -0,0 +1,82 @@
+// Short representation of time in the past.
+export function shortDateFormat(then, locale) {
+  locale = locale || window.navigator.userLanguage || window.navigator.language;
+  const now = new Date();
+  if (then.getFullYear() == now.getFullYear()) {
+    // Same year.
+    if (then.getMonth() == now.getMonth() && then.getDate() == now.getDate()) {
+      // Same month and day, show time only.
+      return then.toLocaleTimeString(locale, {hour12: false, hour: '2-digit', minute: '2-digit'});
+    }
+    // Different month and/or day, show month day, time.
+    return then.toLocaleDateString(locale,
+      {hour12: false, month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
+  }
+  // Different year: just show the date.
+  return then.toLocaleDateString(locale, {year: 'numeric', month: 'short', day: 'numeric'});
+}
+
+// Convert seconds to [hours:]minutes:seconds, i.e. 156 sec -> 2:36, 3756 sec -> 1:02:36.
+// If <code>fixedMins</code> is true, then minutes are represented by at least two digits.
+export function secondsToTime(seconds, fixedMin) {
+  let min = Math.floor(seconds / 60) | 0;
+  let hours = Math.floor(min / 60) | 0;
+
+  if (fixedMin || hours > 0) {
+    min = min < 10 ? `0${min}` : min;
+  }
+  let sec = (seconds % 60) | 0;
+  sec = sec < 10 ? `0${sec}` : sec;
+  if (hours == 0) {
+    return `${min}:${sec}`;
+  }
+  return `${hours}:${min}:${sec}`;
+}
+
+// Convert a number of bytes to human-readable format.
+export function bytesToHumanSize(bytes) {
+  if (!bytes || bytes == 0) {
+    return '0 Bytes';
+  }
+
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  const bucket = Math.min(Math.floor(Math.log2(bytes) / 10) | 0, sizes.length-1);
+  const count = bytes / Math.pow(1024, bucket);
+  const round = bucket > 0 ? (count < 3 ? 2 : (count < 30 ? 1 : 0)) : 0;
+  return count.toFixed(round) + ' ' + sizes[bucket];
+}
+
+// Shorten a file name to be under maxLength by clipping out the middle.
+export function shortenFileName(filename, maxLength) {
+  if (typeof filename != 'string') {
+    return filename;
+  }
+  return filename.length > maxLength ?
+    filename.slice(0, maxLength/2 - 1) + '…' + filename.slice(1 - maxLength/2) : filename;
+}
+
+// Get 32 bit integer hash value for a string. Ideally it should produce the same value
+// as Java's String#hash().
+function stringToColorHash(value) {
+  let hash = 0;
+  value = '' + value;
+  for (let i = 0; i < value.length; i++) {
+    hash = ((hash << 5) - hash) + value.charCodeAt(i);
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash;
+}
+
+// User avatar letter color id.
+export function letterTileColorId(userId) {
+  return Math.abs(stringToColorHash(userId)) % 16;
+}
+
+// Converts user or topic ID to a CSS color class. Ideally it should produce the same color value as Java version.
+// params:
+// - {string} id: user or topic ID
+// - {boolean} light: light or dark version of the color.
+// - {boolean} fg: foreground (text) or background color.
+export function idToColorClass(id, light, fg) {
+  return (light ? 'lt-' : 'dk-') + (fg ? 'fg-' : 'bg-') + letterTileColorId(id);
+}

src/lib/utils.js

@@ -0,0 +1,219 @@
+// Odds and ends
+
+import { Tinode } from 'tinode-sdk';
+
+import { CALL_MESSAGE_MIME_TYPE } from '../constants.js'
+
+// Make shortcut icon appear with a green dot + show unread count in title.
+export function updateFavicon(count) {
+  const oldIcon = document.getElementById('shortcut-icon');
+  const head = document.head || document.getElementsByTagName('head')[0];
+  const newIcon = document.createElement('link');
+  newIcon.type = 'image/png';
+  newIcon.id = 'shortcut-icon';
+  newIcon.rel = 'shortcut icon';
+  newIcon.href = 'img/logo32x32' + (count > 0 ? 'a' : '') + '.png';
+  if (oldIcon) {
+    head.removeChild(oldIcon);
+  }
+  head.appendChild(newIcon);
+
+  document.title = (count > 0 ? '('+count+') ' : '') + 'Tinode';
+}
+
+// Create theCard which represents user's or topic's "public" info.
+export function theCard(fn, imageUrl, imageMimeType, note) {
+  let card = null;
+  fn = fn && fn.trim();
+  note = note && note.trim();
+
+  if (fn) {
+    card = {
+      fn: fn
+    };
+  }
+
+  if (typeof note == 'string') {
+    card = card || {};
+    card.note = note ? note : Tinode.DEL_CHAR;
+  }
+
+  if (imageUrl) {
+    card = card || {};
+    let mimeType = imageMimeType;
+    // Is this a data URL "data:[<mediatype>][;base64],<data>"?
+    const matches = /^data:(image\/[-a-z0-9+.]+)?(;base64)?,/i.exec(imageUrl);
+    if (matches) {
+      mimeType = matches[1];
+      card.photo = {
+        data: imageUrl.substring(imageUrl.indexOf(',') + 1),
+        ref: Tinode.DEL_CHAR
+      };
+    } else {
+      card.photo = {
+        data: Tinode.DEL_CHAR,
+        ref: imageUrl
+      };
+    }
+    card.photo.type = (mimeType || 'image/jpeg').substring('image/'.length);
+  }
+
+  return card;
+}
+
+// Deep-shallow compare two arrays: shallow compare each element.
+export function arrayEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+
+  if (!Array.isArray(a) || !Array.isArray(b)) {
+    return false;
+  }
+
+  // Compare lengths first.
+  if (a.length != b.length) {
+    return false;
+  }
+  // Order of elements is ignored.
+  a.sort();
+  b.sort();
+  for (let i = 0, l = a.length; i < l; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// Checks (loosely) if the given string is a phone. If so, returns the phone number in a format
+// as close to E.164 as possible.
+export function asPhone(val) {
+  val = val.trim();
+  if (/^(?:\+?(\d{1,3}))?[- (.]*(\d{3})[- ).]*(\d{3})[- .]*(\d{2})[- .]*(\d{2})?$/.test(val)) {
+    return val.replace(/[- ().]*/, '');
+  }
+  return null;
+}
+
+// Checks (loosely) if the given string is an email. If so returns the email.
+export function asEmail(val) {
+  val = val.trim();
+  if (/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(val)) {
+    return val;
+  }
+  return null;
+}
+
+// Checks if URL is a relative url, i.e. has no 'scheme://', including the case of missing scheme '//'.
+// The scheme is expected to be RFC-compliant, e.g. [a-z][a-z0-9+.-]*
+// example.html - ok
+// https:example.com - not ok.
+// http:/example.com - not ok.
+// ' ↲ https://example.com' - not ok. (↲ means carriage return)
+export function isUrlRelative(url) {
+  return url && !/^\s*([a-z][a-z0-9+.-]*:|\/\/)/im.test(url);
+}
+
+// Ensure URL does not present an XSS risk. Optional allowedSchemes may contain an array of
+// strings with permitted URL schemes, such as ['ftp', 'ftps']; otherwise accept http and https only.
+export function sanitizeUrl(url, allowedSchemes) {
+  if (typeof url != 'string') {
+    return url;
+  }
+
+  // Strip control characters and whitespace. They are not valid URL characters anyway.
+  url = url.replace(/[^\x20-\x7E]/gmi, '').trim();
+
+  // Relative URLs are safe.
+  // Relative URL does not start with ':', abcd123: or '//'.
+  if (!/^([a-z][a-z0-9+.-]*:|\/\/)/i.test(url)) {
+    return url;
+  }
+
+  // Blob URLs are safe.
+  if (/^blob:http/.test(url)) {
+    return url;
+  }
+
+  // Absolute URL. Accept only safe schemes, or no scheme.
+  const schemes = Array.isArray(allowedSchemes) ? allowedSchemes.join('|') : 'http|https';
+  const re = new RegExp('^((' + schemes + '):|//)', 'i');
+  if (!re.test(url)) {
+    return null;
+  }
+
+  return url;
+}
+
+// Ensure URL is suitable as a source like <img src="url"> field: the URL must be a relative URL or
+// have http:, https:, blob: or data: scheme.
+// In case of data: scheme, the URL must must be of the right MIME type such as 'data:{mimeMajor}/XXXX;base64,'.
+export function sanitizeUrlForMime(url, mimeMajor) {
+  if (!url) {
+    return null;
+  }
+
+  const sanitizedUrl = sanitizeUrl(url);
+  if (sanitizedUrl) {
+    return sanitizedUrl;
+  }
+
+  // Is this a data: URL of the appropriate mime type?
+  const re = new RegExp(`data:${mimeMajor}\/[a-z0-9.-]+;base64,`, 'i');
+  if (re.test(url.trim())) {
+    return url;
+  }
+
+  return null;
+}
+
+// Given message's received status, return name and color of a delivery indicator icon.
+export function deliveryMarker(received) {
+  switch (received) {
+    case Tinode.MESSAGE_STATUS_SENDING:
+      return { name: 'access_time' }; // watch face
+    case Tinode.MESSAGE_STATUS_FAILED:
+      return { name: 'warning', color: 'danger-color' }; // yellow icon /!\
+    case Tinode.MESSAGE_STATUS_SENT:
+      return { name: 'done' }; // checkmark
+    case Tinode.MESSAGE_STATUS_RECEIVED:
+      return { name: 'done_all' }; // double checkmark
+    case Tinode.MESSAGE_STATUS_READ:
+      return { name: 'done_all', color: 'blue' }; // blue double checkmark
+  }
+  return null;
+}
+
+// Wraps a promise to make it cancelable.
+// The parameter can be either a promise or an error. If it's an error, the wrapped promise is
+// created in a rejected state.
+export function cancelablePromise(promise) {
+  let hasCanceled = false;
+
+  const wrappedPromise = promise instanceof Error ?
+    Promise.reject(promise) :
+    new Promise((resolve, reject) => {
+      promise.then(
+        result => hasCanceled ? reject({isCanceled: true}) : resolve(result),
+        error => hasCanceled ? reject({isCanceled: true}) : reject(error)
+      );
+    });
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled = true;
+    },
+  };
+};
+
+// Returns true if specified mime type represents a Tinode video call.
+export function isVideoCall(mime) {
+  return mime == CALL_MESSAGE_MIME_TYPE;
+}
+
+// Clips string to the specified length.
+export function clipStr(str, length) {
+  return str && str.substring(0, length);
+}

src/version.js

@@ -0,0 +1,3 @@
+// This is a generated file. Don't edit.
+
+export const PACKAGE_VERSION = "0.20.0-alpha1";

src/views/acc-notifications-view.jsx

@@ -0,0 +1,61 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CheckBox from '../widgets/checkbox.jsx';
+
+export default class EditAccountView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
+  }
+
+  handleCheckboxClick(what, checked) {
+    if (what == 'sound') {
+      this.props.onToggleMessageSounds(checked);
+    } else if (what == 'alert') {
+      this.props.onTogglePushNotifications(checked);
+    } else if (what == 'incognito') {
+      this.props.onToggleIncognitoMode(checked);
+    }
+  }
+
+  render() {
+    return (
+        <div className="scrollable-panel">
+          <div className="panel-form-row">
+            <label htmlFor="message-sound">
+              <FormattedMessage id="label_message_sound" defaultMessage="Message sound:"
+                description="Label for message sounds toggle" />
+            </label>
+            <CheckBox name="sound" id="message-sound"
+              checked={this.props.messageSounds} onChange={this.handleCheckboxClick} />
+          </div>
+          <div className="panel-form-row">
+            <label htmlFor="desktop-alerts">
+            {this.props.desktopAlertsEnabled ?
+              <FormattedMessage id="label_push_notifications" defaultMessage="Notification alerts:"
+                description="Label for push notifications switch" />
+              :
+              <FormattedMessage id="label_push_notifications_disabled"
+                defaultMessage="Notification alerts (requires HTTPS):"
+                description="Label for push notifications switch" />
+            }
+            </label>
+            <CheckBox name="alert" id="desktop-alerts"
+              checked={this.props.desktopAlerts}
+              onChange={this.props.desktopAlertsEnabled ? this.handleCheckboxClick : null} />
+          </div>
+          <div className="panel-form-row">
+            <label htmlFor="incognito-mode">
+              <FormattedMessage id="label_incognito_mode" defaultMessage="Incognito mode:"
+                description="Label for incognito mode toggle" />
+            </label>
+            <CheckBox name="incognito" id="incognito-mode"
+              checked={this.props.incognitoMode} onChange={this.handleCheckboxClick} />
+          </div>
+        </div>
+    );
+  }
+};

src/views/acc-security-view.jsx

@@ -0,0 +1,155 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import InPlaceEdit from '../widgets/in-place-edit.jsx';
+import PermissionsEditor from '../widgets/permissions-editor.jsx';
+
+const messages = defineMessages({
+  delete_account: {
+    id: 'delete_account',
+    defaultMessage: 'Delete account',
+    description: 'Title for delete account warning'
+  },
+  delete_account_warning: {
+    id: 'delete_account_warning',
+    defaultMessage: 'Are you sure you want to delete your account? It cannot be undone.',
+    description: 'Warning message when deleting an account'
+  }
+});
+
+class AccSecurityView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const me = this.props.tinode.getMeTopic();
+    let blockedCount = 0;
+    me.contacts((c) => {
+      if (c.acs && !c.acs.isJoiner()) {
+        blockedCount ++;
+      }
+    });
+    const defacs = me.getDefaultAccess();
+    this.state = {
+      auth: defacs ? defacs.auth : null,
+      anon: defacs ? defacs.anon : null,
+      showPermissionEditorFor: undefined,
+      blockedCount: blockedCount,
+    };
+
+    this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);
+    this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
+    this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
+    this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
+    this.handleDeleteAccount = this.handleDeleteAccount.bind(this);
+  }
+
+  handlePasswordUpdate(pwd) {
+    this.setState({password: pwd});
+    this.props.onUpdatePassword(pwd);
+  }
+
+  handleLaunchPermissionsEditor(which) {
+    this.setState({
+      showPermissionEditorFor: which,
+      editedPermissions: this.state[which]
+    });
+  }
+
+  handleHidePermissionsEditor() {
+    this.setState({showPermissionEditorFor: undefined});
+  }
+
+  handlePermissionsChanged(perm) {
+    let defacs = {};
+    defacs[this.state.showPermissionEditorFor] = perm;
+    this.props.onUpdateAccountDesc('me', undefined, undefined, defacs);
+
+    let newState = {showPermissionEditorFor: undefined};
+    newState[this.state.showPermissionEditorFor] = perm;
+    this.setState(newState);
+  }
+
+  handleDeleteAccount(e) {
+    e.preventDefault();
+    const {formatMessage} = this.props.intl;
+    this.props.onShowAlert(
+      formatMessage(messages.delete_account), // title
+      formatMessage(messages.delete_account_warning), // content
+      (() => { this.props.onDeleteAccount(); }), // onConfirm
+      null, // use default text "OK"
+      true, // Show Reject button
+      null  // use default text "Cancel"
+    );
+  }
+
+  render() {
+    return (
+      <>{this.state.showPermissionEditorFor ?
+        <PermissionsEditor
+          mode={this.state.editedPermissions}
+          skip="O"
+          onSubmit={this.handlePermissionsChanged}
+          onCancel={this.handleHidePermissionsEditor} />
+        :
+        <div className="scrollable-panel">
+          <div className="panel-form-column">
+            <label className="small">
+              <FormattedMessage id="label_password" defaultMessage="Password"
+                  description="Label for password editing" />
+            </label>
+            <div>
+              <FormattedMessage id="password_unchanged_prompt" defaultMessage="Unchanged"
+                description="Message in editor while password is unchanged">{
+                (password_unchanged) => <InPlaceEdit
+                  placeholder={password_unchanged}
+                  type="password"
+                  onFinished={this.handlePasswordUpdate} />
+              }</FormattedMessage>
+            </div>
+          </div>
+          <div className="hr" />
+          <div className="panel-form-column">
+            <a href="#" className="danger flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
+              <i className="material-icons">exit_to_app</i> &nbsp;<FormattedMessage id="button_logout"
+                defaultMessage="Logout" description="Button [Logout]" />
+            </a>
+            <a href="#" className="danger flat-button" onClick={(e) => {this.handleDeleteAccount(e);}}>
+              <i className="material-icons">delete</i> &nbsp;<FormattedMessage id="button_delete_account"
+                defaultMessage="Delete account" description="Button [Delete account]" />
+            </a>
+          </div>
+          <div className="hr" />
+          <div className="panel-form-column">
+            <div>
+              <label className="small">
+                <FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
+                  description="Label for default access mode" />
+              </label>
+            </div>
+            <div className="quoted">
+              <div>Auth: <tt className="clickable"
+                onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>{this.state.auth}</tt></div>
+              <div>Anon: <tt className="clickable"
+                onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>{this.state.anon}</tt></div>
+            </div>
+          </div>
+          {this.state.blockedCount > 0 ?
+            <>
+              <div className="hr" />
+              <div className="panel-form-row">
+                <i className="material-icons">block</i>&nbsp;
+                <a href="#" className="gray" onClick={(e) => {e.preventDefault(); this.props.onShowBlocked();}}>
+                  <FormattedMessage id="blocked_contacts_link" defaultMessage="Blocked contacts ({count})"
+                    values={{ count: this.state.blockedCount }} description="Blocked contacts link" />
+                </a>
+              </div>
+            </>
+            : null }
+        </div>
+      }</>
+    );
+  }
+};
+
+export default injectIntl(AccSecurityView);

src/views/acc-support-view.jsx

@@ -0,0 +1,51 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import { APP_NAME, LINK_CONTACT_US, LINK_PRIVACY_POLICY, LINK_TERMS_OF_SERVICE } from '../config.js';
+
+export default class AccSupportView extends React.PureComponent {
+  render() {
+    return (
+      <div className="scrollable-panel">
+        <div className="panel-form-column">
+          <a href={LINK_CONTACT_US} className="flat-button" target="_blank">
+            <i className="material-icons">email</i> &nbsp;<FormattedMessage id="link_contact_us"
+              defaultMessage="Contact Us" description="Ancor text for contacting us by email" />
+          </a>
+          <a href={LINK_TERMS_OF_SERVICE} className="flat-button" target="_blank">
+            <i className="material-icons">description</i> &nbsp;<FormattedMessage id="link_terms_of_service"
+              defaultMessage="Terms of Service" description="Ancor text for terms of service link" />
+          </a>
+          <a href={LINK_PRIVACY_POLICY} className="flat-button" target="_blank">
+            <i className="material-icons">policy</i> &nbsp;<FormattedMessage id="link_privacy_policy"
+              defaultMessage="Privacy Policy" description="Ancor text for privacy policy link" />
+          </a>
+        </div>
+        <div className="hr" />
+        <div className="panel-form-column">
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_client" defaultMessage="Client:"
+              description="Label for a client version" /></label>
+            {APP_NAME}
+          </div>
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_sdk" defaultMessage="SDK:" /></label>
+            {Tinode.getLibrary()}
+          </div>
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_server" defaultMessage="Server:"
+              description="Label for a server version" /></label>
+            {this.props.serverVersion}
+          </div>
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_server_address" defaultMessage="Server address:" /></label>
+            {this.props.serverAddress}
+          </div>
+        </div>
+      </div>
+    );
+  }
+};

src/views/account-settings-view.jsx

@@ -0,0 +1,85 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
+
+function _clip(str, length) {
+  return str && str.substring(0, length);
+}
+
+export default class AccountSettingsView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const me = this.props.tinode.getMeTopic();
+    this.state = {
+      fullName: _clip(me.public ? me.public.fn : undefined, MAX_TITLE_LENGTH),
+      description: _clip(me.public ? me.public.note : undefined, MAX_TOPIC_DESCRIPTION_LENGTH),
+      avatar: makeImageUrl(me.public ? me.public.photo : null)
+    };
+  }
+
+  render() {
+    return (
+      <div className="scrollable-panel">
+        <div className="panel-form-column">
+          <a href="#" className="flat-button float-right" onClick={(e) => {e.preventDefault(); this.props.onNavigate('general');}}>
+            <i className="material-icons">edit</i>&nbsp;
+            <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
+          </a>
+          <center>
+            <AvatarUpload
+              tinode={this.props.tinode}
+              avatar={this.state.avatar}
+              readOnly={true}
+              uid={this.props.myUserId}
+              title={this.state.fullName} />
+          </center>
+          <div className="group">
+            <label className="small">
+              <FormattedMessage id="label_your_name" defaultMessage="Your name"
+                description="Label for full name editing" />
+            </label>
+            <div className="large ellipsized">{this.state.fullName}</div>
+          </div>
+          <div className="group">
+            <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
+              description="Label for user address (ID)" /></label>&nbsp;
+            <tt>{this.props.myUserId}</tt>
+          </div>
+          <div className="group">
+            <BadgeList trustedBadges={this.props.trustedBadges} />
+          </div>
+          {this.state.description ?
+            <div className="group">
+              <label className="small">
+                <FormattedMessage id="label_description" defaultMessage="Description"
+                  description="Label for editing topic description" />
+              </label>
+              <div>{this.state.description}</div>
+            </div> : null}
+        </div>
+        <div className="hr" />
+        <div className="panel-form-column">
+          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('notif');}}>
+            <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
+              defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />
+          </a>
+          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
+            <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
+              defaultMessage="Security" description="Navigaton button for security panel." />
+          </a>
+          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('support');}}>
+            <i className="material-icons">contact_support</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_support"
+              defaultMessage="Support" description="Sidepanel title for AccSupportView." />
+          </a>
+        </div>
+      </div>
+    );
+  }
+};

src/views/contacts-view.jsx

@@ -0,0 +1,106 @@
+/* ContactsView holds all contacts-related stuff */
+import React from 'react';
+import { FormattedMessage, defineMessages } from 'react-intl';
+
+import ContactList from '../widgets/contact-list.jsx';
+
+import { updateFavicon } from '../lib/utils.js';
+
+const messages = defineMessages({
+  archived_contacts_title: {
+    id: "archived_contacts",
+    defaultMessage: "Archived contacts ({count})",
+    description: "Label for archived chats"
+  }
+});
+
+export default class ContactsView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleAction = this.handleAction.bind(this);
+
+    this.state = ContactsView.deriveStateFromProps(props);
+  }
+
+  static deriveStateFromProps(props) {
+    const contacts = [];
+    let unreadThreads = 0;
+    let archivedCount = 0;
+    props.chatList.map((c) => {
+      const blocked = c.acs && !c.acs.isJoiner();
+      // Show only blocked contacts only when props.blocked == true.
+      if (blocked && props.blocked) {
+        contacts.push(c);
+      }
+      if (blocked || props.blocked) {
+        return;
+      }
+
+      if (c.private && c.private.arch) {
+        if (props.archive) {
+          contacts.push(c);
+        } else {
+          archivedCount ++;
+        }
+      } else if (!props.archive) {
+        contacts.push(c);
+        unreadThreads += c.unread > 0 ? 1 : 0;
+      }
+    });
+
+    contacts.sort((a, b) => {
+      return (b.touched || 0) - (a.touched || 0);
+    });
+
+    if (archivedCount > 0) {
+      contacts.push({
+        action: 'archive',
+        title: messages.archived_contacts_title,
+        values: {count: archivedCount}
+      });
+    }
+
+    return {
+      contactList: contacts,
+      unreadThreads: unreadThreads
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.chatList != this.props.chatList ||
+        prevProps.archive != this.props.archive ||
+        prevProps.blocked != this.props.blocked) {
+      const newState = ContactsView.deriveStateFromProps(this.props);
+      this.setState(newState);
+      if (newState.unreadThreads != prevState.unreadThreads) {
+        updateFavicon(newState.unreadThreads);
+      }
+    }
+  }
+
+  handleAction(action_ignored) {
+    this.props.onShowArchive();
+  }
+
+  render() {
+    return (
+      <FormattedMessage id="contacts_not_found"
+        defaultMessage="You have no chats<br />¯∖_(ツ)_/¯"
+        description="HTML message shown in ContactList when no contacts are found">{
+        (no_contacts) => <ContactList
+          tinode={this.props.tinode}
+          connected={this.props.connected}
+          contacts={this.state.contactList}
+          emptyListMessage={no_contacts}
+          topicSelected={this.props.topicSelected}
+          myUserId={this.props.myUserId}
+          showOnline={true}
+          showUnread={true}
+          onTopicSelected={this.props.onTopicSelected}
+          showContextMenu={this.props.showContextMenu}
+          onAction={this.handleAction} />
+      }</FormattedMessage>
+    );
+  }
+};

src/views/create-account-view.jsx

@@ -0,0 +1,130 @@
+// Account registration.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import CheckBox from '../widgets/checkbox.jsx';
+import VisiblePassword from '../widgets/visible-password.jsx';
+
+import LocalStorageUtil from '../lib/local-storage.js';
+import { theCard } from '../lib/utils.js';
+
+import { MAX_TITLE_LENGTH } from '../config.js';
+
+export default class CreateAccountView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      login: '',
+      password: '',
+      email: '',
+      fn: '', // full/formatted name
+      imageDataUrl: null,
+      errorCleared: false,
+      saveToken: LocalStorageUtil.getObject('keep-logged-in')
+    };
+
+    this.handleLoginChange = this.handleLoginChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleEmailChange = this.handleEmailChange.bind(this);
+    this.handleFnChange = this.handleFnChange.bind(this);
+    this.handleImageChanged = this.handleImageChanged.bind(this);
+    this.handleToggleSaveToken = this.handleToggleSaveToken.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleLoginChange(e) {
+    this.setState({login: e.target.value});
+  }
+
+  handlePasswordChange(password) {
+    this.setState({password: password});
+  }
+
+  handleEmailChange(e) {
+    this.setState({email: e.target.value})
+  }
+
+  handleFnChange(e) {
+    this.setState({fn: e.target.value});
+  }
+
+  handleImageChanged(img) {
+    this.setState({imageDataUrl: img});
+  }
+
+  handleToggleSaveToken() {
+    LocalStorageUtil.setObject('keep-logged-in', !this.state.saveToken);
+    this.setState({saveToken: !this.state.saveToken});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.setState({errorCleared: false});
+    this.props.onCreateAccount(
+      this.state.login.trim(),
+      this.state.password.trim(),
+      theCard(this.state.fn.trim().substring(0, MAX_TITLE_LENGTH), this.state.imageDataUrl),
+      {'meth': 'email', 'val': this.state.email});
+  }
+
+  render() {
+    let submitClasses = 'primary';
+    if (this.props.disabled) {
+      submitClasses += ' disabled';
+    }
+
+    return (
+      <form className="panel-form-column" onSubmit={this.handleSubmit}>
+        <div className="panel-form-row">
+          <div className="panel-form-column">
+            <FormattedMessage id="login_prompt" defaultMessage="Login"
+              description="Placeholer for username/login">{
+              (login_prompt) => <input type="text" placeholder={login_prompt} autoComplete="user-name"
+                value={this.state.login} onChange={this.handleLoginChange} required autoFocus />
+            }</FormattedMessage>
+            <FormattedMessage id="password_prompt" defaultMessage="Password"
+              description="Placeholder/prompt for entering password">{
+              (password_prompt) => <VisiblePassword placeholder={password_prompt} autoComplete="new-password"
+                value={this.state.password} onFinished={this.handlePasswordChange}
+                required={true} />
+            }</FormattedMessage>
+          </div>
+          <AvatarUpload
+            tinode={this.props.tinode}
+            onImageChanged={this.handleImageChanged}
+            onError={this.props.onError} />
+        </div>
+        <div  className="panel-form-row">
+          <FormattedMessage id="full_name_prompt" defaultMessage="Full name, e.g. John Doe"
+            description="Input placeholder for person's full name">{
+            (full_name_prompt) => <input type="text" placeholder={full_name_prompt} autoComplete="name"
+              value={this.state.fn} onChange={this.handleFnChange} required/>
+          }</FormattedMessage>
+        </div>
+        <div className="panel-form-row">
+          <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
+            description="Input placeholder for email entry">{
+            (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
+              value={this.state.email} onChange={this.handleEmailChange} required/>
+          }</FormattedMessage>
+        </div>
+        <div className="panel-form-row">
+          <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
+            onChange={this.handleToggleSaveToken} />
+          <FormattedMessage id="stay_logged_in" defaultMessage="Stay logged in"
+            description="Label for a checkbox">{
+            (stay_logged_in) => <label htmlFor="save-token">&nbsp;{stay_logged_in}</label>
+          }</FormattedMessage>
+        </div>
+        <div className="dialog-buttons">
+          <button className={submitClasses} type="submit">
+            <FormattedMessage id="button_sign_up" defaultMessage="Sign up"
+              description="Create account button [Sign Up]" />
+          </button>
+        </div>
+      </form>
+    );
+  }
+};

src/views/incoming-call-view.jsx

@@ -0,0 +1,167 @@
+// IncomingCallView: displays Accept & Reject buttons for incoming calls.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
+import MenuCancel from '../widgets/menu-cancel.jsx';
+
+import { MAX_TITLE_LENGTH } from '../config.js';
+import { CALL_STATE_INCOMING_RECEIVED } from '../constants.js';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { clipStr } from '../lib/utils.js'
+
+const RING_SOUND = new Audio('audio/phone_ring.mp3');
+
+export default class IncomingCallView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      topic: null,
+      fullName: undefined,
+      avatar: null,
+      trustedBadges: [],
+      previousMetaDesc: undefined,
+    };
+
+    this.resetDesc = this.resetDesc.bind(this);
+    this.onMetaDesc = this.onMetaDesc.bind(this);
+    this.handleRejectCall = this.handleRejectCall.bind(this);
+    this.handleAcceptCall = this.handleAcceptCall.bind(this);
+    this.ringTimer = null;
+  }
+
+  componentDidMount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.resetDesc(topic, this.props);
+    if (this.props.callState == CALL_STATE_INCOMING_RECEIVED) {
+      RING_SOUND.play();
+      this.ringTimer = setInterval(() => RING_SOUND.play(), 2000);
+      this.props.onRinging(this.props.topic, this.props.seq);
+    }
+  }
+
+  // No need to separately handle component mount.
+  componentDidUpdate(props) {
+    const topic = this.props.tinode.getTopic(props.topic);
+    if (!topic) {
+      return;
+    }
+
+    if (this.onMetaDesc != topic.onMetaDesc) {
+      this.previousMetaDesc = topic.onMetaDesc;
+      topic.onMetaDesc = this.onMetaDesc;
+    }
+
+    if (this.state.topic != props.topic) {
+      this.setState({topic: props.topic});
+      this.resetDesc(topic, props);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.ringTimer != null) {
+      clearInterval(this.ringTimer);
+      RING_SOUND.pause();
+    }
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.setState({topic: null});
+    topic.onMetaDesc = this.previousMetaDesc;
+  }
+
+  resetDesc(topic, props) {
+    const defacs = topic.getDefaultAccess() || {};
+    const acs = topic.getAccessMode();
+    const badges = [];
+    if (topic.trusted) {
+      for (const [key, val] of Object.entries(topic.trusted)) {
+        if (val) {
+          badges.push(key);
+        }
+      }
+    }
+
+    this.setState({
+      fullName: clipStr(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
+      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      trustedBadges: badges,
+    });
+  }
+
+  onMetaDesc(desc) {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.resetDesc(topic, this.props);
+
+    if (this.previousMetaDesc && this.previousMetaDesc != this.onMetaDesc) {
+      this.previousMetaDesc(desc);
+    }
+  }
+
+  handleAcceptCall() {
+    this.props.onAcceptCall(this.props.topic);
+  }
+
+  handleRejectCall() {
+    this.props.onReject(this.props.topic, this.props.seq);
+    this.props.onClose();
+  }
+
+  render() {
+    let panelTitle = <FormattedMessage id="calls_incoming_title"
+        defaultMessage="Incoming Call" description="Incoming call title (Incoming call view)" />;
+
+    return (
+      <div id="info-view">
+        <div className="caption-panel" id="info-caption-panel">
+          <div className="panel-title" id="info-title">{panelTitle}</div>
+          <div>
+            <MenuCancel onCancel={this.handleRejectCall} />
+          </div>
+        </div>
+        <div id="info-view-content" className="scrollable-panel">
+          <div className="panel-form-column">
+            <center>
+              <AvatarUpload
+                tinode={this.props.tinode}
+                avatar={this.state.avatar}
+                readOnly={true}
+                uid={this.props.topic}
+                title={this.state.fullName} />
+            </center>
+            <div className="group incoming-call-title">
+              <div className="large ellipsized">{clipStr(this.state.fullName)}</div>
+            </div>
+            <div className="group incoming-call-badges">
+              <BadgeList trustedBadges={this.state.trustedBadges} />
+            </div>
+            <div id="actions" className="group incoming-call-actions">
+              {this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
+                <>
+                  <button className="video-call-hangup" onClick={this.handleRejectCall}>
+                    <i className="material-icons">call_end</i>
+                  </button>
+                  <button className="video-call-accept" onClick={this.handleAcceptCall}>
+                    <i className="material-icons">call</i>
+                  </button>
+                </>
+                :
+                null
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};

src/views/info-view.jsx

@@ -0,0 +1,634 @@
+// InfoView: panel with topic/user info.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
+import CheckBox from '../widgets/checkbox.jsx';
+import ContactList from '../widgets/contact-list.jsx';
+import ErrorPanel from '../widgets/error-panel.jsx';
+import GroupManager from '../widgets/group-manager.jsx';
+import MenuCancel from '../widgets/menu-cancel.jsx';
+import PermissionsEditor from '../widgets/permissions-editor.jsx';
+import TopicCommon from '../widgets/topic-common.jsx';
+import TopicSecurity from '../widgets/topic-security.jsx';
+
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH, NO_ACCESS_MODE } from '../config.js';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { theCard, clipStr } from '../lib/utils.js';
+
+const messages = defineMessages({
+  info: {
+    id: 'panel_title_info',
+    description: 'Title for InfoView',
+    defaultMessage: 'Info'
+  },
+  general: {
+    id: 'panel_title_general',
+    description: 'Title for TopicCommon.',
+    defaultMessage: 'General'
+  },
+  security: {
+    id: 'panel_title_security',
+    description: 'Title for TopicSecirity and AccSecurity.',
+    defaultMessage: 'Security'
+  },
+  members: {
+    id: 'panel_title_members',
+    description: 'Title for managing group members view.',
+    defaultMessage: 'Members'
+  },
+  crop: {
+    id: 'panel_title_crop',
+    description: 'Title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
+  perm_want: {
+    id: 'requested_permissions',
+    defaultMessage: 'Requested',
+    description: 'Title for permissions'
+  },
+  perm_given: {
+    id: 'granted_permissions',
+    defaultMessage: 'Granted',
+    description: 'Title for permissions'
+  },
+  perm_auth: {
+    id: 'permissions_authenticated',
+    defaultMessage: 'Authenticated',
+    description: 'Title for editing default authenticated permissions'
+  },
+  perm_anon: {
+    id: 'permissions_anonymous',
+    defaultMessage: 'Anonymous',
+    description: 'Title for editing default anonymous permissions'
+  },
+  perm_user: {
+    id: 'permissions_user',
+    defaultMessage: 'User\'s Permissions',
+    description: 'Title for editing user\'s permissions'
+  },
+  edit_permissions: {
+    id: 'menu_item_edit_permissions',
+    defaultMessage: 'Edit permissions',
+    description: 'Menu item [Edit permissions]'
+  },
+});
+
+class InfoView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      topic: null,
+      owner: false,
+      admin: false,
+      sharer: false,
+      deleter: false,
+      muted: false,
+      address: null,
+      groupTopic: undefined,
+      channel: undefined,
+      fullName: undefined,
+      description: undefined,
+      avatar: null,
+      private: null,
+      selectedContact: null,
+      access: null,
+      modeGiven: null,
+      modeWant: null,
+      modeGiven2: null, // P2P topic, the other user mode given
+      modeWant2: null,  // P2P topic, the other user mode want
+      auth: null,
+      anon: null,
+      contactList: [],
+      trustedBadges: [],
+      previousMetaDesc: undefined,
+      previousSubsUpdated: undefined,
+    };
+
+    this.resetSubs = this.resetSubs.bind(this);
+    this.resetDesc = this.resetDesc.bind(this);
+    this.resetTags = this.resetTags.bind(this);
+    this.onMetaDesc = this.onMetaDesc.bind(this);
+    this.onSubsUpdated = this.onSubsUpdated.bind(this);
+    this.handleImageChanged = this.handleImageChanged.bind(this);
+    this.handleMuted = this.handleMuted.bind(this);
+    this.handleUnarchive = this.handleUnarchive.bind(this);
+    this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
+    this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
+    this.handleShowAddMembers = this.handleShowAddMembers.bind(this);
+    this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
+    this.handleMemberSelected = this.handleMemberSelected.bind(this);
+    this.handleContextMenu = this.handleContextMenu.bind(this);
+    this.handleBackNavigate = this.handleBackNavigate.bind(this);
+  }
+
+  // No need to separately handle component mount.
+  componentDidUpdate(props) {
+    const topic = this.props.tinode.getTopic(props.topic);
+    if (!topic) {
+      return;
+    }
+
+    if (this.onMetaDesc != topic.onMetaDesc) {
+      this.previousMetaDesc = topic.onMetaDesc;
+      topic.onMetaDesc = this.onMetaDesc;
+
+      this.previousSubsUpdated = topic.onSubsUpdated;
+      topic.onSubsUpdated = this.onSubsUpdated;
+    }
+
+    if (this.state.topic != props.topic) {
+      this.setState({topic: props.topic});
+      this.resetDesc(topic, props);
+      this.resetSubs(topic, props);
+      this.resetTags(topic);
+    }
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.setState({topic: null});
+    topic.onMetaDesc = this.previousMetaDesc;
+    topic.onSubsUpdated = this.previousSubsUpdated;
+  }
+
+  resetSubs(topic, props) {
+    const newState = {contactList: []};
+    if (topic.getType() == 'p2p') {
+      // Fetch the other party in the p2p conversation.
+      // Topic may not be ready yet, so check if user is found.
+      const user2 = topic.subscriber(props.topic);
+      if (user2) {
+        newState.modeGiven2 = user2.acs.getGiven();
+        newState.modeWant2 = user2.acs.getWant();
+      } else {
+        newState.modeGiven2 = NO_ACCESS_MODE;
+        newState.modeWant2 = NO_ACCESS_MODE;
+      }
+    } else {
+      topic.subscribers((sub) => {
+        newState.contactList.push(sub);
+      }, this);
+    }
+
+    this.setState(newState);
+  }
+
+  resetDesc(topic, props) {
+    const defacs = topic.getDefaultAccess() || {};
+    const acs = topic.getAccessMode();
+
+    const badges = [];
+    if (topic.trusted) {
+      for (const [key, val] of Object.entries(topic.trusted)) {
+        if (val) {
+          badges.push(key);
+        }
+      }
+    }
+
+    this.setState({
+      owner: acs && acs.isOwner(),
+      admin: acs && acs.isAdmin(),
+      sharer: acs && acs.isSharer(),
+      deleter: acs && acs.isDeleter(),
+      muted: acs && acs.isMuted(),
+
+      fullName: clipStr(topic.public && topic.public.fn, MAX_TITLE_LENGTH),
+      description: clipStr(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),
+      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      trustedBadges: badges,
+      private: clipStr(topic.private && topic.private.comment, MAX_TITLE_LENGTH),
+      archived: topic.isArchived(),
+      address: topic.name,
+      groupTopic: topic.isGroupType(),
+      channel: topic.isChannelType() || topic.chan,
+      access: acs ? acs.getMode() : undefined,
+      modeGiven: acs ? acs.getGiven() : undefined,
+      modeWant: acs ? acs.getWant() : undefined,
+      auth: defacs.auth,
+      anon: defacs.anon
+    });
+  }
+
+  resetTags(topic) {
+    if (topic.getType() != 'grp') {
+      return;
+    }
+
+    const acs = topic.getAccessMode();
+    if (acs && acs.isOwner()) {
+      // Requesting tags: owner is editing the topic.
+      topic.getMeta(topic.startMetaQuery().withTags().build());
+    }
+  }
+
+  onMetaDesc(desc) {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.resetDesc(topic, this.props);
+
+    if (this.previousMetaDesc && this.previousMetaDesc != this.onMetaDesc) {
+      this.previousMetaDesc(desc);
+    }
+  }
+
+  onSubsUpdated(subs) {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.resetSubs(topic, this.props);
+
+    if (this.previousSubsUpdated && this.previousSubsUpdated != this.onSubsUpdated) {
+      this.previousSubsUpdated(subs);
+    }
+  }
+
+  handleImageChanged(img) {
+    this.setState({avatar: img});
+    this.props.onTopicDescUpdate(this.props.topic, theCard(null, img || Tinode.DEL_CHAR), null);
+  }
+
+  handleMuted(ignored, checked) {
+    this.setState({muted: checked});
+    this.props.onChangePermissions(this.props.topic, checked ? '-P' : '+P');
+  }
+
+  handleUnarchive(ignored, ignored2) {
+    this.props.onTopicUnArchive(this.props.topic);
+  }
+
+  handlePermissionsChanged(which, perm) {
+    switch (which) {
+      case 'auth':
+        this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {auth: perm});
+        break;
+      case 'anon':
+        this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {anon: perm});
+        break;
+      case 'mode':
+      case 'want':
+        this.props.onChangePermissions(this.props.topic, perm);
+        break;
+      case 'given':
+        this.props.onChangePermissions(this.props.topic, perm, this.props.topic);
+        break;
+      case 'user':
+        this.props.onChangePermissions(this.props.topic, perm, this.state.userPermissionsEdited);
+        break;
+    }
+
+    this.handleBackNavigate();
+  }
+
+  handleLaunchPermissionsEditor(which, uid) {
+    const {formatMessage} = this.props.intl;
+    let toEdit, toCompare, toSkip, titleEdit, titleCompare, userTitle, userAvatar;
+    switch (which) {
+      case 'mode':
+        toEdit = this.state.access;
+        break;
+      case 'want':
+        toEdit = this.state.modeWant;
+        toCompare = this.state.modeGiven;
+        if (this.state.owner) {
+          // Don't allow owner to unset 'O' permission. All other permissions are OK.
+          toSkip = 'O';
+        } else {
+          // Allow accepting any of 'ASDO' permissions but don't allow asking for them.
+          toSkip = Tinode.AccessMode.encode(Tinode.AccessMode.diff('ASDO', this.state.modeGiven));
+          if (this.state.channel) {
+            // Channels are read-only.
+            toSkip += 'W';
+          }
+        }
+        titleEdit = formatMessage(messages.perm_want);
+        titleCompare = formatMessage(messages.perm_given);
+        break;
+      case 'given':
+        toEdit = this.state.modeGiven2;
+        toCompare = this.state.modeWant2;
+        toSkip = this.state.groupTopic ? (this.state.owner ? '' : 'O') : 'ASDO';
+        titleEdit = formatMessage(messages.perm_given);
+        titleCompare = formatMessage(messages.perm_want);
+        break;
+      case 'auth':
+        toEdit = this.state.auth;
+        toSkip = 'O';
+        break;
+      case 'anon':
+        toEdit = this.state.anon;
+        toSkip = 'O';
+        break;
+      case 'user': {
+        const topic = this.props.tinode.getTopic(this.props.topic);
+        if (!topic) {
+          return;
+        }
+        const user = topic.subscriber(uid);
+        if (!user || !user.acs) {
+          return;
+        }
+        toEdit = user.acs.getGiven();
+        toCompare = user.acs.getWant();
+        toSkip = this.state.owner ? '' : 'O';
+        titleEdit = formatMessage(messages.perm_given);
+        titleCompare = formatMessage(messages.perm_want);
+        if (user.public) {
+          userTitle = user.public.fn;
+          userAvatar = user.public.photo;
+        }
+        break;
+      }
+      default:
+        console.error("Unknown permission editing mode '" + which + "'");
+        return;
+    }
+    this.setState({
+      userPermissionsEdited: uid,
+      userPermissionsTitle: userTitle,
+      userPermissionsAvatar: userAvatar,
+      editedPermissions: toEdit,
+      immutablePermissions: toCompare,
+      editedPermissionsTitle: titleEdit,
+      immutablePermissionsTitle: titleCompare,
+      editedPermissionsSkipped: toSkip,
+    });
+    this.props.onNavigate(`perm/${which}`);
+  }
+
+  handleShowAddMembers(e) {
+    e.preventDefault();
+    this.props.onInitFind();
+    this.props.onNavigate('members');
+  }
+
+  handleMemberUpdateRequest(members, added, removed) {
+    this.props.onMemberUpdateRequest(this.props.topic, added, removed);
+    this.props.onNavigate('info');
+  }
+
+  handleMemberSelected(uid) {
+    this.setState({selectedContact: uid});
+  }
+
+  handleBackNavigate() {
+    const args = (this.props.panel || 'info').split('/');
+    if (args[0] == 'info') {
+      this.props.onNavigate(null);
+    } else if (args[0] == 'perm') {
+      if (args[1] == 'user') {
+        this.props.onNavigate('info');
+      } else {
+        this.props.onNavigate('security');
+      }
+    } else {
+      this.props.onNavigate('info');
+    }
+  }
+
+  handleContextMenu(params) {
+    const {formatMessage} = this.props.intl;
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    const user = topic.subscriber(params.topicName);
+    if (!user || !user.acs) {
+      return;
+    }
+
+    const isMe = this.props.tinode.isMe(params.topicName);
+    const menuItems = [
+      {title: formatMessage(messages.edit_permissions), handler: () => {
+        this.handleLaunchPermissionsEditor(isMe ? 'want' : 'user', params.topicName);
+      }}
+    ];
+    if (!isMe) {
+      menuItems.push('member_delete');
+    }
+    menuItems.push(user.acs.isMuted() ? 'member_unmute' : 'member_mute');
+    if (!isMe) {
+      menuItems.push(user.acs.isJoiner() ? 'member_block' : 'member_unblock');
+    }
+    this.props.showContextMenu({
+      topicName: this.props.topic,
+      x: params.x,
+      y: params.y,
+      user: params.topicName}, menuItems);
+  }
+
+  render() {
+    const args = (this.props.panel || 'info').split('/');
+    const view = args[0];
+    args.shift();
+
+    const {formatMessage} = this.props.intl;
+    const panelTitle = formatMessage((view == 'perm' ? messages['perm_' + args[0]] : messages[view])
+      || messages['info']);
+
+    return (
+      <div id="info-view">
+        <div className="caption-panel" id="info-caption-panel">
+          <div className="panel-title" id="info-title">{panelTitle}</div>
+          <div>
+            <MenuCancel onCancel={this.handleBackNavigate} />
+          </div>
+        </div>
+        {this.props.displayMobile ?
+          <ErrorPanel
+            level={this.props.errorLevel}
+            text={this.props.errorText}
+            onClearError={this.props.onError} /> : null}
+        {view == 'members' ?
+          <GroupManager
+            tinode={this.props.tinode}
+            members={this.state.contactList}
+            requiredMember={this.props.myUserId}
+            keepInitialMembers={!this.state.admin && !this.state.owner}
+            myUserId={this.props.myUserId}
+            contacts={this.props.searchableContacts}
+            onCancel={this.handleBackNavigate}
+            onSubmit={this.handleMemberUpdateRequest} />
+          :
+        view == 'perm' && args.length > 0 ?
+          <PermissionsEditor
+            tinode={this.props.tinode}
+            mode={this.state.editedPermissions}
+            compare={this.state.immutablePermissions}
+            skip={this.state.editedPermissionsSkipped}
+            modeTitle={this.state.editedPermissionsTitle}
+            compareTitle={this.state.immutablePermissionsTitle}
+            userTitle={this.state.userPermissionsTitle}
+            item={this.state.userPermissionsEdited}
+            userAvatar={this.state.userPermissionsAvatar}
+            onSubmit={(mode) => this.handlePermissionsChanged(args[0], mode)}
+            onCancel={this.handleBackNavigate} />
+          :
+        view == 'general' ?
+          <TopicCommon
+            tinode={this.props.tinode}
+            topic={this.props.topic}
+            onCredAdd={this.props.onCredAdd}
+            onTopicTagsUpdateRequest={this.props.onTopicTagsUpdateRequest}
+            onCredConfirm={this.props.onCredConfirm}
+            onCredDelete={this.props.onCredDelete}
+            onUpdateTopicDesc={this.props.onTopicDescUpdateRequest}
+            onError={this.props.onError} />
+          :
+        view == 'security' ?
+          <TopicSecurity
+            topic={this.props.topic}
+            owner={this.state.owner}
+            admin={this.state.admin}
+            sharer={this.state.sharer}
+            deleter={this.state.deleter}
+            muted={this.state.muted}
+
+            groupTopic={this.state.groupTopic}
+            channel={this.state.channel}
+            access={this.state.access}
+            modeGiven={this.state.modeGiven}
+            modeWant={this.state.modeWant}
+            modeGiven2={this.state.modeGiven2}
+            modeWant2={this.state.modeWant2}
+            auth={this.state.auth}
+            anon={this.state.anon}
+
+            onShowAlert={this.props.onShowAlert}
+            onDeleteMessages={this.props.onDeleteMessages}
+            onLeaveTopic={this.props.onLeaveTopic}
+            onBlockTopic={this.props.onBlockTopic}
+            onReportTopic={this.props.onReportTopic}
+            onLaunchPermissionsEditor={this.handleLaunchPermissionsEditor}
+            onNavigate={this.props.onNavigate} />
+          :
+          <div id="info-view-content" className="scrollable-panel">
+            <div className="panel-form-column">
+              <a href="#" className="flat-button float-right" onClick={(e) => {e.preventDefault(); this.props.onNavigate('general');}}>
+                <i className="material-icons">edit</i>&nbsp;
+                <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
+              </a>
+              <center>
+                <AvatarUpload
+                  tinode={this.props.tinode}
+                  avatar={this.state.avatar}
+                  readOnly={true}
+                  uid={this.props.topic}
+                  title={this.state.fullName} />
+              </center>
+              <div className="group">
+                <div><label className="small">
+                  <FormattedMessage id="label_topic_name" defaultMessage="Name"
+                    description="Label for editing topic name" />
+                </label></div>
+                <div className="large ellipsized">{this.state.fullName}
+                {this.state.channel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}</div>
+              </div>
+              {this.state.private ?
+                <div className="group">
+                  <div><label className="small">
+                    <FormattedMessage id="label_private" defaultMessage="Private comment"
+                      description="Label for editing 'private'" />
+                  </label></div>
+                  <div className="large ellipsized">{this.state.private}</div>
+                </div>
+                : null
+              }
+              <div className="group">
+                <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
+                  description="Label for user address (ID)" /></label>&nbsp;
+                <tt>{this.state.address}</tt>
+              </div>
+              <div className="group">
+                <BadgeList trustedBadges={this.state.trustedBadges} />
+              </div>
+              {this.state.description ?
+                <div className="group">
+                  <label className="small">
+                    <FormattedMessage id="label_description" defaultMessage="Description"
+                      description="Label for editing topic description" />
+                  </label>
+                  <div>{this.state.description}</div>
+                </div> : null}
+            </div>
+            <div className="hr" />
+            <div className="panel-form-row">
+              <label>
+                <FormattedMessage id="label_muting_topic" defaultMessage="Muted:"
+                  description="Label for Muting/unmuting the topic" />
+              </label>
+              <CheckBox name="P" checked={this.state.muted} onChange={this.handleMuted} />
+            </div>
+            {this.state.archived ?
+              <div className="panel-form-row">
+                <label>
+                  <FormattedMessage id="label_unarchive_topic" defaultMessage="Archived:"
+                    description="Label for unarchiving the topic" />
+                </label>
+                <CheckBox name="archived" checked={true} onChange={this.handleUnarchive} />
+              </div>
+              :
+              null
+            }
+            <div className="hr" />
+            <div className="panel-form-row">
+              <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
+                <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
+                  defaultMessage="Security" description="Navigaton button for security panel." />
+              </a>
+            </div>
+            {this.state.groupTopic && this.state.sharer ?
+              <>
+                <div className="hr" />
+                <div className="panel-form-row">
+                  <label className="small">
+                    <FormattedMessage id="label_group_members" defaultMessage="Group members:"
+                      description="Section title or label" />
+                  </label>
+                </div>
+                <div className="panel-form-row">
+                  <a href="#" className="flat-button" onClick={this.handleShowAddMembers}>
+                    <i className="material-icons">person_add</i> &nbsp;<FormattedMessage id="button_add_members"
+                      defaultMessage="Add members" description="Flat button [Add members] (to topic)" />
+                  </a>
+                </div>
+                <FormattedMessage id="group_has_no_members" defaultMessage="No members"
+                  description="Shown in place of group members">{
+                  (no_members) => <ContactList
+                    tinode={this.props.tinode}
+                    contacts={this.state.contactList}
+                    myUserId={this.props.myUserId}
+                    emptyListMessage={no_members}
+                    topicSelected={this.state.selectedContact}
+                    showOnline={false}
+                    showUnread={false}
+                    showMode={true}
+                    noScroll={true}
+                    onTopicSelected={this.handleMemberSelected}
+                    showContextMenu={this.state.admin ? this.handleContextMenu : false}
+                  />
+                }</FormattedMessage>
+              </>
+              :
+              null
+            }
+          </div>
+        }
+      </div>
+    );
+  }
+};
+
+export default injectIntl(InfoView);

src/views/login-view.jsx

@@ -0,0 +1,98 @@
+// Login form.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CheckBox from '../widgets/checkbox.jsx';
+import VisiblePassword from '../widgets/visible-password.jsx';
+
+import LocalStorageUtil from '../lib/local-storage.js';
+
+export default class LoginView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      login: props.login,
+      password: '',
+      hostName: props.serverAddress,
+      saveToken: props.persist
+    };
+    this.handleLoginChange = this.handleLoginChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleToggleSaveToken = this.handleToggleSaveToken.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleLoginChange(e) {
+    this.setState({login: e.target.value});
+  }
+
+  handlePasswordChange(e) {
+    this.setState({password: e.target.value});
+  }
+
+  handleToggleSaveToken() {
+    this.props.onPersistenceChange(!this.state.saveToken);
+    this.setState({saveToken: !this.state.saveToken});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.onLogin(this.state.login.trim(), this.state.password.trim());
+  }
+
+  render() {
+    let submitClasses = 'primary';
+    if (this.props.disabled) {
+      submitClasses += ' disabled';
+    }
+
+    return (
+      <form id="login-form" onSubmit={this.handleSubmit}>
+        <FormattedMessage id="login_prompt" defaultMessage="Login"
+          description="Placeholer for username/login">
+        {
+          (login_prompt) => <input type="text" id="inputLogin"
+            placeholder={login_prompt}
+            autoComplete="username"
+            autoCorrect="off"
+            autoCapitalize="none"
+            value={this.state.login}
+            onChange={this.handleLoginChange}
+            required autoFocus />
+        }
+        </FormattedMessage>
+        <FormattedMessage id="password_prompt" defaultMessage="Password"
+          description="Placeholder/prompt for entering password">
+        {
+          (password_prompt) => <VisiblePassword type="password" id="inputPassword"
+            placeholder={password_prompt}
+            autoComplete="current-password"
+            value={this.state.password}
+            onChange={this.handlePasswordChange}
+            required={true} />
+        }
+        </FormattedMessage>
+        <div className="panel-form-row">
+          <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
+            onChange={this.handleToggleSaveToken} />
+          <label htmlFor="save-token">&nbsp;
+            <FormattedMessage id="stay_logged_in" defaultMessage="Stay logged in"
+              description="Label for a checkbox" />
+          </label>
+          <a href="#reset">
+            <FormattedMessage id="forgot_password_link" defaultMessage="Forgot password?"
+              description="Link to Reset password form" />
+          </a>
+        </div>
+        <div className="dialog-buttons">
+          <button className={submitClasses} type="submit">
+            <FormattedMessage id="button_sign_in" defaultMessage="Sign in"
+              description="Button [Sign In]" />
+          </button>
+        </div>
+      </form>
+    );
+  }
+};
+/* END Login */

src/views/logo-view.jsx

@@ -0,0 +1,27 @@
+/* This is just a static page to display when no conversation is selected. */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import { APP_NAME } from '../config.js';
+
+export default class LogoView extends React.PureComponent {
+  render() {
+    const version = APP_NAME + ' (' + Tinode.getLibrary() + ')';
+    return (
+      <div id="dummy-view">
+        <div>
+          <a href="https://github.com/tinode/chat/">
+            <img id="logo" alt="logo" src="img/logo.svg" />
+            <h2>Tinode Web</h2>
+          </a>
+          <p><FormattedMessage id="label_client" defaultMessage="Client:"
+            description="Label for a client version" /> {version}</p>
+          <p><FormattedMessage id="label_server" defaultMessage="Server:"
+            description="Label for a server version" /> {this.props.serverVersion} ({this.props.serverAddress})</p>
+        </div>
+      </div>
+    );
+  }
+};

src/views/new-topic-view.jsx

@@ -0,0 +1,136 @@
+// Create new topic and invite users or send an invite.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import ContactList from '../widgets/contact-list.jsx';
+import NewTopicById from '../widgets/new-topic-by-id.jsx';
+import NewTopicGroup from '../widgets/new-topic-group.jsx';
+import SearchContacts from '../widgets/search-contacts.jsx';
+
+import HashNavigation from '../lib/navigation.js';
+import { theCard } from '../lib/utils.js';
+
+const messages = defineMessages({
+  search_for_contacts: {
+    id: "search_for_contacts",
+    defaultMessage: "Use search to find contacts",
+    description: "Text shown in contacts view when user entered no search query."
+  },
+  search_no_results: {
+    id: "search_no_results",
+    defaultMessage: "Search returned no results",
+    description: "Text shown in contacts view when query returned no results."
+  },
+  search_placeholder: {
+    id: "search_placeholder",
+    defaultMessage: "List like email:alice@example.com, tel:17025550003...",
+    description: "Placeholder in contacts search field"
+  },
+});
+
+class NewTopicView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tabSelected: 'find',
+      searchQuery: null
+    };
+
+    this.handleTabClick = this.handleTabClick.bind(this);
+    this.handleSearchContacts = this.handleSearchContacts.bind(this);
+    this.handleSearchResultSelected = this.handleSearchResultSelected.bind(this);
+    this.handleNewGroupSubmit = this.handleNewGroupSubmit.bind(this);
+    this.handleGroupByID = this.handleGroupByID.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.onInitFind();
+  }
+
+  handleTabClick(e) {
+    e.preventDefault();
+    HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'tab', e.currentTarget.dataset.id));
+    this.setState({tabSelected: e.currentTarget.dataset.id});
+  }
+
+  handleSearchContacts(query) {
+    this.props.onSearchContacts(query);
+    this.setState({searchQuery: Tinode.isNullValue(query) ? null : query});
+  }
+
+  handleSearchResultSelected(name) {
+    if (this.state.tabSelected == 'find') {
+      HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
+      this.props.onCreateTopic(name);
+    }
+  }
+
+  handleNewGroupSubmit(name, description, dataUrl, priv, tags, isChannel) {
+    HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
+    this.props.onCreateTopic(undefined,
+      {public: theCard(name, dataUrl, null, description), private: priv, tags: tags}, isChannel);
+  }
+
+  handleGroupByID(topicName) {
+    HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
+    this.props.onCreateTopic(topicName);
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    const no_contacts_placeholder = formatMessage(this.state.searchQuery ?
+      messages.search_no_results : messages.search_for_contacts);
+    const search_placeholder = formatMessage(messages.search_placeholder);
+    return (
+      <div className="flex-column">
+        <ul className="tabbar">
+          <li className={this.state.tabSelected === "find" ? "active" : null}>
+            <a href="#" data-id="find" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_find_user" defaultMessage="find"
+                description="Tab title Find" />
+            </a>
+          </li>
+          <li className={this.state.tabSelected === "grp" ? "active" : null}>
+            <a href="#" data-id="grp" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_new_group" defaultMessage="new group"
+                description="Tab title New Group" />
+            </a>
+          </li>
+          <li className={this.state.tabSelected === "byid" ? "active" : null}>
+            <a href="#" data-id="byid" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_group_by_id" defaultMessage="by id"
+                description="Tab title Find topic by ID" />
+            </a>
+          </li>
+        </ul>
+        {this.state.tabSelected === 'grp' ?
+          <NewTopicGroup
+            tinode={this.props.tinode}
+            onSubmit={this.handleNewGroupSubmit} /> :
+          this.state.tabSelected === 'byid' ?
+            <NewTopicById
+              onSubmit={this.handleGroupByID}
+              onError={this.props.onError} /> :
+            <div className="flex-column">
+              <SearchContacts
+                placeholder={search_placeholder}
+                onSearchContacts={this.handleSearchContacts} />
+              <ContactList
+                tinode={this.props.tinode}
+                contacts={this.props.searchResults}
+                myUserId={this.props.myUserId}
+                emptyListMessage={no_contacts_placeholder}
+                showOnline={false}
+                showUnread={false}
+                showContextMenu={false}
+                onTopicSelected={this.handleSearchResultSelected} />
+            </div>}
+      </div>
+    );
+  }
+};
+
+export default injectIntl(NewTopicView);

src/views/password-reset-view.jsx

@@ -0,0 +1,114 @@
+// A password reset form.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import VisiblePassword from '../widgets/visible-password.jsx';
+
+import HashNavigation from '../lib/navigation.js';
+
+export default class PasswordResetView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      email: '',
+      password: '',
+      sent: false
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleEmailChange = this.handleEmailChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+  }
+
+  componentDidMount() {
+    const parsed = HashNavigation.parseUrlHash(window.location.hash);
+    this.setState({token: parsed.params.token, scheme: parsed.params.scheme});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if (this.state.token) {
+      this.props.onReset(this.state.scheme, this.state.password.trim(), this.state.token);
+    } else if (this.state.sent) {
+      this.props.onCancel();
+    } else {
+      const email = this.state.email.trim();
+      this.setState({email: email});
+      this.props.onRequest('email', email).then(() => {
+        this.setState({sent: true});
+      });
+    }
+  }
+
+  handleEmailChange(e) {
+    this.setState({email: e.target.value});
+  }
+
+  handlePasswordChange(e) {
+    this.setState({password: e.target.value});
+  }
+
+  render() {
+    return (
+      <form id="password-reset-form" onSubmit={this.handleSubmit}>
+        {(this.state.token && this.state.scheme) ?
+          <><label htmlFor="new-password">
+            <FormattedMessage id="label_new_password"
+              defaultMessage="New password"
+              description="Label for entering a new password" />
+          </label>
+          <FormattedMessage id="new_password_placeholder" defaultMessage="Enter new password"
+            description="Placeholder for entering new password">{
+            (placeholder) => <VisiblePassword
+              id="new-password"
+              placeholder={placeholder}
+              autoComplete="new-password"
+              value={this.state.password}
+              required={true} autoFocus={true}
+              onChange={this.handlePasswordChange} />
+          }</FormattedMessage></>
+        : this.state.sent ?
+          <>
+            <br/>
+            <center><i className="material-icons huge green">task_alt</i></center>
+            <br/>
+            <center><FormattedMessage id="password_reset_email_sent"
+              defaultMessage="An email has been sent to {email}. Follow the directions in the email to reset your password."
+              values={{ email: <tt>{this.state.email}</tt> }}
+              description="Notification that the email with password reset instructions has been sent" /></center>
+          </>
+        :
+          <>
+            <label htmlFor="inputEmail">
+              <FormattedMessage id="label_reset_password"
+                defaultMessage="Send a password reset email:"
+                description="Label for password reset field" />
+            </label>
+            <FormattedMessage id="credential_email_prompt" defaultMessage="Your registration email"
+              description="Placeholder for entering email">{
+              (placeholder) => <input type="email" id="inputEmail"
+                placeholder={placeholder}
+                autoComplete="email"
+                value={this.state.email}
+                onChange={this.handleEmailChange}
+                required autoFocus />
+            }</FormattedMessage>
+          </>
+        }
+        <div className="dialog-buttons">
+          <button className="primary" type="submit">{
+            (this.state.token && this.state.scheme) ?
+            <FormattedMessage id="button_reset" defaultMessage="Reset" description="Button [Reset]" />
+            : this.state.sent ?
+            <FormattedMessage id="button_ok" defaultMessage="OK"
+              description="Button [OK]" />
+            :
+            <FormattedMessage id="button_send_request" defaultMessage="Send request"
+              description="Button [Send request]" />
+          }</button>
+        </div>
+      </form>
+    );
+  }
+}

src/views/settings-view.jsx

@@ -0,0 +1,83 @@
+// Tinode config panel.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import HostSelector from '../widgets/host-selector.jsx';
+
+export default class SettingsView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      transport: props.transport || 'def',
+      serverAddress: props.serverAddress,
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleTransportSelected = this.handleTransportSelected.bind(this);
+    this.handleServerAddressChange = this.handleServerAddressChange.bind(this);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.onUpdate({
+      transport: this.state.transport,
+      serverAddress: this.state.serverAddress
+    });
+  }
+
+  handleTransportSelected(e) {
+    this.setState({transport: e.currentTarget.value});
+  }
+
+  handleServerAddressChange(name) {
+    this.setState({serverAddress: name});
+  }
+
+  render() {
+    const names = {def: "default", ws: "websocket", lp: "long polling"};
+    const transportOptions = [];
+    ['def', 'ws', 'lp'].map((item) => {
+      const id = 'transport-' + item;
+      const name = names[item];
+      transportOptions.push(
+        <li key={item}>
+          <input type="radio" id={id} name="transport-select" value={item}
+            checked={this.state.transport === item}
+            onChange={this.handleTransportSelected} />
+          <label htmlFor={id}>{name}</label>
+        </li>
+      );
+    });
+
+    return (
+      <form id="settings-form" className="panel-form" onSubmit={this.handleSubmit}>
+        <div className="panel-form-row">
+          <label className="small">
+            <FormattedMessage id="label_server_to_use" defaultMessage="Server to use:"
+              description="Label for server selector in SettingsView" />
+          </label>
+        </div>
+        <HostSelector serverAddress={this.state.serverAddress}
+          onServerAddressChange={this.handleServerAddressChange} />
+        <div className="panel-form-row">
+          <label className="small">
+            <FormattedMessage id="label_wire_transport" defaultMessage="Wire transport:"
+              description="Label for wire transport selection in SettingsView" />
+          </label>
+        </div>
+        <div className="panel-form-row">
+          <ul className="quoted">
+            {transportOptions}
+          </ul>
+        </div>
+        <div className="dialog-buttons">
+          <button type="submit" className="primary">
+            <FormattedMessage id="button_update" defaultMessage="Update"
+              description="Button [Update]" />
+          </button>
+        </div>
+      </form>
+    );
+  }
+};

src/views/sidepanel-view.jsx

@@ -0,0 +1,256 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import ErrorPanel from '../widgets/error-panel.jsx';
+import LoadSpinner from '../widgets/load-spinner.jsx';
+import SideNavbar from '../widgets/side-navbar.jsx';
+import TopicCommon from '../widgets/topic-common.jsx';
+
+import AccountSettingsView from './account-settings-view.jsx';
+import ContactsView from './contacts-view.jsx';
+import CreateAccountView from './create-account-view.jsx';
+import AccNotificationsView from './acc-notifications-view.jsx';
+import AccSecurityView from './acc-security-view.jsx';
+import AccSupportView from './acc-support-view.jsx';
+import LoginView from './login-view.jsx';
+import NewTopicView from './new-topic-view.jsx';
+import PasswordResetView from './password-reset-view.jsx';
+import SettingsView from './settings-view.jsx';
+import ValidationView from './validation-view.jsx';
+
+// Panel titles for translation.
+const messages = defineMessages({
+  login: {
+    id: 'sidepanel_title_login',
+    description: 'Sidepanel title for LoginView.',
+    defaultMessage: 'Sign In'
+  },
+  register: {
+    id: 'sidepanel_title_register',
+    description: 'Sidepanel title for CreateAccountView.',
+    defaultMessage: 'Create Account'
+  },
+  settings: {
+    id: 'sidepanel_title_settings',
+    description: 'Sidepanel title for SettingsView.',
+    defaultMessage: 'Settings'
+  },
+  edit: {
+    id: 'sidepanel_title_account_settings',
+    description: 'Sidepanel title for AccountSettingsView.',
+    defaultMessage: 'Account Settings'
+  },
+  general: {
+    id: 'panel_title_general',
+    description: 'Title for TopicCommon.',
+    defaultMessage: 'General'
+  },
+  security: {
+    id: 'panel_title_security',
+    description: 'Title for TopicSecirity and AccSecurity.',
+    defaultMessage: 'Security'
+  },
+  crop: {
+    id: 'panel_title_crop',
+    description: 'Title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
+  notif: {
+    id: 'sidepanel_title_acc_notifications',
+    description: 'Sidepanel title for AccNotificationsView.',
+    defaultMessage: 'Notifications'
+  },
+  support: {
+    id: 'sidepanel_title_acc_support',
+    description: 'Sidepanel title for AccSupportView.',
+    defaultMessage: 'Support'
+  },
+  newtpk: {
+    id: 'sidepanel_title_newtpk',
+    description: 'Sidepanel title for NewTopicView.',
+    defaultMessage: 'Start New Chat'
+  },
+  cred: {
+    id: 'sidepanel_title_cred',
+    description: 'Sidepanel title for ValidationView.',
+    defaultMessage: 'Confirm Credentials'
+  },
+  reset: {
+    id: 'sidepanel_title_reset',
+    description: 'Sidepanel title for PasswordResetView.',
+    defaultMessage: 'Reset Password'
+  },
+  archive: {
+    id: 'sidepanel_title_archive',
+    description: 'Sidepanel title for ContactsView-Archive.',
+    defaultMessage: 'Archived Chats'
+  },
+  blocked: {
+    id: 'sidepanel_title_blocked',
+    description: 'Sidepanel title for ContactsView-Blocked.',
+    defaultMessage: 'Blocked Chats'
+  }
+});
+
+class SidepanelView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleNewTopic = this.handleNewTopic.bind(this);
+  }
+
+  handleNewTopic() {
+    this.props.onNavigate('newtpk');
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    const view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
+
+    let title, avatar, badges;
+    if (view == 'contacts') {
+      title = this.props.title;
+      avatar = this.props.avatar ? this.props.avatar : true;
+      badges = this.props.trustedBadges;
+    } else {
+      title = formatMessage(messages[view]);
+      avatar = false;
+      badges = null;
+    }
+
+    let onCancel;
+    if (['login', 'contacts'].indexOf(view) == -1) {
+      onCancel = this.props.onCancel;
+    }
+
+    return (
+      <div id="sidepanel" className={this.props.hideSelf ? 'nodisplay' : null}>
+        <SideNavbar
+          state={view}
+          title={title}
+          avatar={avatar}
+          tinode={this.props.tinode}
+          trustedBadges={badges}
+          myUserId={this.props.myUserId}
+          onSignUp={this.props.onSignUp}
+          onSettings={this.props.onSettings}
+          onNewTopic={this.handleNewTopic}
+          onCancel={onCancel} />
+
+        <ErrorPanel
+          level={this.props.errorLevel}
+          text={this.props.errorText}
+          action={this.props.errorAction}
+          actionText={this.props.errorActionText}
+          onClearError={this.props.onError} />
+
+        <LoadSpinner show={this.props.loadSpinnerVisible} />
+
+        {view === 'login' ?
+          <LoginView
+            login={this.props.login}
+            disabled={this.props.loginDisabled}
+            persist={this.props.persist}
+            onLogin={this.props.onLoginRequest}
+            onPersistenceChange={this.props.onPersistenceChange} /> :
+
+          view === 'register' ?
+          <CreateAccountView
+            tinode={this.props.tinode}
+            onCreateAccount={this.props.onCreateAccount}
+            onCancel={this.props.onCancel}
+            onError={this.props.onError} /> :
+
+          view === 'settings' ?
+          <SettingsView
+            transport={this.props.transport}
+            serverAddress={this.props.serverAddress}
+            onCancel={this.props.onCancel}
+            onUpdate={this.props.onGlobalSettings} /> :
+
+          view === 'edit' ?
+          <AccountSettingsView
+            tinode={this.props.tinode}
+            myUserId={this.props.myUserId}
+            trustedBadges={this.props.trustedBadges}
+            onNavigate={this.props.onNavigate} /> :
+
+          (view === 'general' || view === 'crop') ?
+          <TopicCommon
+            topic="me"
+            tinode={this.props.tinode}
+            myUserId={this.props.myUserId}
+            onUpdateTopicDesc={this.props.onUpdateAccountDesc}
+            onUpdateTags={this.props.onUpdateAccountTags}
+            onCredAdd={this.props.onCredAdd}
+            onCredDelete={this.props.onCredDelete}
+            onCredConfirm={this.props.onCredConfirm}
+            onError={this.props.onError} /> :
+
+          view === 'notif' ?
+          <AccNotificationsView
+            messageSounds={this.props.messageSounds}
+            desktopAlerts={this.props.desktopAlerts}
+            desktopAlertsEnabled={this.props.desktopAlertsEnabled}
+            incognitoMode={this.props.incognitoMode}
+            onTogglePushNotifications={this.props.onTogglePushNotifications}
+            onToggleMessageSounds={this.props.onToggleMessageSounds}
+            onToggleIncognitoMode={this.props.onToggleIncognitoMode} /> :
+
+          view === 'security' ?
+          <AccSecurityView
+            tinode={this.props.tinode}
+            onUpdateAccountDesc={this.props.onUpdateAccountDesc}
+            onUpdatePassword={this.props.onUpdatePassword}
+            onLogout={this.props.onLogout}
+            onDeleteAccount={this.props.onDeleteAccount}
+            onShowAlert={this.props.onShowAlert}
+            onShowBlocked={this.props.onShowBlocked} /> :
+
+          view === 'support' ?
+          <AccSupportView
+            serverAddress={this.props.serverAddress}
+            serverVersion={this.props.serverVersion} /> :
+
+          (view === 'contacts' || view == 'archive' || view == 'blocked') ?
+          <ContactsView
+            tinode={this.props.tinode}
+            myUserId={this.props.myUserId}
+            connected={this.props.connected}
+            topicSelected={this.props.topicSelected}
+            archive={view == 'archive'}
+            blocked={view == 'blocked'}
+            chatList={this.props.chatList}
+            showContextMenu={this.props.showContextMenu}
+            onTopicSelected={this.props.onTopicSelected}
+            onShowArchive={this.props.onShowArchive} /> :
+
+          view === 'newtpk' ?
+          <NewTopicView
+            tinode={this.props.tinode}
+            searchResults={this.props.searchResults}
+            onInitFind={this.props.onInitFind}
+            onSearchContacts={this.props.onSearchContacts}
+            onCreateTopic={this.props.onCreateTopic}
+            onError={this.props.onError} /> :
+
+          view === 'cred' ?
+          <ValidationView
+            credCode={this.props.credCode}
+            credMethod={this.props.credMethod}
+            onSubmit={this.props.onValidateCredentials}
+            onCancel={this.props.onCancel}
+            onError={this.props.onError} /> :
+
+          view === 'reset' ?
+          <PasswordResetView
+            onRequest={this.props.onPasswordResetRequest}
+            onReset={this.props.onResetPassword}
+            onCancel={this.props.onCancel} /> :
+          null}
+      </div>
+    );
+  }
+};
+
+export default injectIntl(SidepanelView);

src/views/validation-view.jsx

@@ -0,0 +1,93 @@
+// ValidationView: panel for confirming credentials, like email or phone.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  phone: {
+    id: 'phone_dative',
+    defaultMessage: 'phone',
+    description: "Dative case of 'phone', i.e. 'phone' in 'by phone'",
+  },
+  email: {
+    id: 'email_dative',
+    defaultMessage: 'email',
+    description: "Dative case of 'email', i.e. 'email' in 'by email'",
+  }
+});
+
+class ValidationView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      code: props.credCode || ''
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  handleChange(e) {
+    this.setState({code: e.target.value});
+  }
+
+  handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      this.handleSubmit(e);
+    } else if (e.key == 'Escape') {
+      this.handleCancel(e);
+    }
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if (this.state.code && this.state.code.trim()) {
+      this.props.onSubmit(this.props.credMethod, this.state.code.trim());
+    }
+  }
+
+  handleCancel(e) {
+    e.preventDefault();
+    this.props.onCancel();
+  }
+
+
+  render() {
+    const { formatMessage } = this.props.intl;
+    const methods = {'email': formatMessage(messages.email), 'tel': formatMessage(messages.phone)};
+    let method = methods[this.props.credMethod] || this.props.credMethod;
+    return (
+      <div className="panel-form">
+        <div className="panel-form-row">
+          <label className="small" htmlFor="enter-confirmation-code">
+            <FormattedMessage id="enter_confirmation_code_prompt"
+              defaultMessage="Enter confirmation code sent to you by {method}:"
+              description="Request to enter confirmation code"
+              values={{method: method}} />
+          </label>
+        </div>
+        <div className="panel-form-row">
+        <FormattedMessage id="numeric_confirmation_code_prompt"
+          defaultMessage="Numbers only" description="Prompt for numeric conformation code">{
+          (numbers_only) => <input type="text" id="enter-confirmation-code"
+            placeholder={numbers_only}
+            value={this.state.code} onChange={this.handleChange}
+            onKeyPress={this.handleKeyPress} required />
+        }</FormattedMessage>
+        </div>
+        <div className="dialog-buttons">
+          <button className="secondary" onClick={this.handleCancel}>
+            <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
+          </button>
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_confirm" defaultMessage="Confirm" description="Button [Confirm]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default injectIntl(ValidationView);

src/widgets/alert.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default class Alert extends React.PureComponent {
+  render() {
+    return this.props.visible ?
+      <div className="alert-container">
+        <div className="alert">
+          <div className="title">{this.props.title}</div>
+          <div className="content">{this.props.content}</div>
+          <div className="dialog-buttons">
+            {this.props.onReject ?
+              <button className="outline" onClick={this.props.onReject}>
+                {this.props.reject || <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />}
+              </button>
+              :
+              null
+            }
+            <button className="primary" onClick={this.props.onConfirm}>
+              {this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]"  />}
+            </button>
+          </div>
+        </div>
+      </div>
+    :
+    null;
+  }
+};

src/widgets/attachment.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import FileProgress from './file-progress.jsx';
+import { bytesToHumanSize } from '../lib/strformat.js';
+import { isUrlRelative, sanitizeUrl } from '../lib/utils.js';
+
+export default class Attachment extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      downloader: null,
+      progress: 0
+    };
+
+    this.downloadFile = this.downloadFile.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  downloadFile(url, filename, mimetype) {
+    if (!url) {
+      this.props.onError("Invalid download URL '" + url + "'");
+      return;
+    }
+
+    const downloader = this.props.tinode.getLargeFileHelper();
+    this.setState({downloader: downloader});
+    downloader.download(url, filename, mimetype,
+      (loaded) => {
+        this.setState({progress: loaded / this.props.size});
+      },
+      (err) => {
+        this.props.onError(err, 'err');
+      }
+    ).then(() => {
+      this.setState({downloader: null, progress: 0});
+    }).catch((err) => {
+      if (err) {
+        this.props.onError("Error downloading file: " + err.message, 'err');
+      }
+      this.setState({downloader: null, progress: 0});
+    });
+  }
+
+  handleCancel() {
+    if (this.props.uploading) {
+      this.props.onCancelUpload();
+    } else if (this.state.downloader) {
+      this.state.downloader.cancel();
+    }
+  }
+
+  render() {
+    let filename = this.props.filename || 'file_attachment';
+    if (filename.length > 36) {
+      filename = filename.substr(0, 16) + '...' + filename.substr(-16);
+    }
+    let size = this.props.size > 0 ?
+      <span className="small gray">({bytesToHumanSize(this.props.size)})</span> :
+      null;
+
+    // Detect if the download URL is relative or absolute.
+    // If the URL is relative use LargeFileHelper to attach authentication
+    // credentials to the request.
+    let url, helperFunc;
+    if (!this.props.uploading && !this.state.downloader && isUrlRelative(this.props.downloadUrl)) {
+      // Relative URL. Use download helper.
+      url = '#';
+      helperFunc = (e) => {
+        e.preventDefault();
+        this.downloadFile(this.props.downloadUrl, this.props.filename, this.props.mimetype);
+      };
+    } else {
+      url = sanitizeUrl(this.props.downloadUrl);
+      helperFunc = null;
+    }
+    const downloadWidget = <><i className="material-icons">file_download</i> <FormattedMessage id="save_attachment"
+      defaultMessage="save" description="Call to save an attachment" /></>;
+    return (
+      <div className="attachment">
+        <div><i className="material-icons big gray">insert_drive_file</i></div>
+        <div className="flex-column">
+          <div>{filename} {size}</div>
+          {this.props.uploading || this.state.downloader ?
+            <FileProgress progress={this.props.uploading ? this.props.progress : this.state.progress}
+              onCancel={this.handleCancel} />
+            :
+            <div>{url ?
+              <a href={url} download={this.props.filename} onClick={helperFunc}>{downloadWidget}</a>
+              :
+              <span className="light-gray">{downloadWidget}</span>
+            }</div>
+          }
+        </div>
+      </div>
+    );
+  }
+};

src/widgets/audio-player.jsx

@@ -0,0 +1,260 @@
+// Audio recorder widget.
+
+import React from 'react';
+
+import { secondsToTime } from '../lib/strformat';
+import { base64ToIntArray } from '../lib/blob-helpers';
+
+// Make canvas bigger than the element size to reduce blurring.
+const CANVAS_UPSCALING = 2.0;
+// Thickness of a visualization bar.
+const LINE_WIDTH = 3 * CANVAS_UPSCALING;
+// Spacing between two visualization bars.
+const SPACING = 2 * CANVAS_UPSCALING;
+// Color of histogram bars.
+const BAR_COLOR = '#888A';
+const BAR_COLOR_DARK = '#666C';
+const THUMB_COLOR = '#444E';
+// Minimum number of amplitude bars to draw.
+const MIN_PREVIEW_LENGTH = 16;
+
+export default class AudioPlayer extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    let preview = base64ToIntArray(this.props.preview);
+    if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {
+      preview = null;
+    }
+
+    this.state = {
+      canPlay: false,
+      playing: false,
+      currentTime: '0:00',
+      duration: this.props.duration > 0 ? secondsToTime(this.props.duration / 1000) : '-:--',
+      longMin: this.props.duration >= 600000,
+      preview: preview
+    };
+
+    this.initAudio = this.initAudio.bind(this);
+    this.initCanvas = this.initCanvas.bind(this);
+    this.resampleBars = this.resampleBars.bind(this);
+    this.visualize = this.visualize.bind(this);
+
+    this.handlePlay = this.handlePlay.bind(this);
+    this.handleSeek = this.handleSeek.bind(this);
+    this.handleError = this.handleError.bind(this);
+
+    this.audioPlayer = null;
+
+    this.viewBuffer = [];
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    if (this.props.src) {
+      this.initAudio();
+    }
+
+    this.initCanvas();
+  }
+
+  componentWillUnmount() {
+    if (this.audioPlayer) {
+      this.audioPlayer.oncanplay = null;
+      this.audioPlayer.ontimeupdate = null;
+      this.audioPlayer.onended = null;
+      this.audioPlayer.pause();
+      this.audioPlayer = null;
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.src != prevProps.src) {
+      this.initAudio();
+    }
+
+    if (this.props.preview != prevProps.preview) {
+      let preview = base64ToIntArray(this.props.preview);
+      if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {
+        preview = null;
+      }
+      this.setState({preview: preview}, this.initCanvas);
+    }
+  }
+
+  initAudio() {
+    this.audioPlayer = new Audio(this.props.src);
+    this.audioPlayer.oncanplay = _ => this.setState({canPlay: true});
+    this.audioPlayer.ontimeupdate = _ => this.setState({
+      currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)
+    });
+    this.audioPlayer.onended = _ => {
+      this.audioPlayer.currentTime = 0;
+      this.setState({playing: false, currentTime: secondsToTime(0, this.state.longMin)})
+    }
+  }
+
+  initCanvas() {
+    // Force canvas aspect ratio to match one of the element + upscale canvas to reduce blurring.
+    this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
+    this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
+
+    this.canvasContext = this.canvasRef.current.getContext('2d');
+    this.canvasContext.lineCap = 'round';
+
+    this.viewBuffer = this.resampleBars(this.state.preview);
+    this.visualize();
+  }
+
+  // Draw amplitude of sound.
+  visualize() {
+    if (!this.canvasRef.current) {
+      return;
+    }
+
+    const width = this.effectiveWidth;
+    const height = this.canvasRef.current.height;
+
+    this.canvasContext.lineWidth = LINE_WIDTH;
+
+    const drawFrame = () => {
+      if (!this.canvasRef.current || !this.audioPlayer) {
+        // The component is unmounted.
+        return;
+      }
+
+      this.canvasContext.clearRect(0, 0, this.canvasRef.current.width, height);
+
+      if (this.viewBuffer) {
+        if (this.state.playing) {
+          window.requestAnimationFrame(drawFrame);
+        }
+
+        // Current playback position.
+        const thumbAt = this.props.duration ?
+          Math.max(0, Math.min(this.audioPlayer.currentTime * 1000 / this.props.duration, 1)) * (width - LINE_WIDTH * 2) : -1;
+
+        // Draw amplitude bars.
+        this.canvasContext.beginPath();
+        this.canvasContext.strokeStyle = BAR_COLOR_DARK;
+        for (let i = 0; i < this.viewBuffer.length; i++) {
+          let x = 1 + i * (LINE_WIDTH + SPACING) + LINE_WIDTH * 0.5;
+          let y = this.viewBuffer[i] * height * 0.9;
+
+          const color = x < thumbAt ? BAR_COLOR_DARK : BAR_COLOR;
+          if (this.canvasContext.strokeStyle != color) {
+            this.canvasContext.stroke();
+            this.canvasContext.beginPath();
+            this.canvasContext.strokeStyle = color;
+          }
+
+          this.canvasContext.moveTo(x, (height - y) * 0.5);
+          this.canvasContext.lineTo(x, height * 0.5 + y * 0.5);
+        }
+        // Actually draw the bars on canvas.
+        this.canvasContext.stroke();
+
+        // Draw thumb.
+        if (this.props.duration) {
+          this.canvasContext.beginPath();
+          this.canvasContext.arc(thumbAt + LINE_WIDTH * 2, height * 0.5, LINE_WIDTH * 2, 0, 2 * Math.PI);
+          this.canvasContext.fillStyle = THUMB_COLOR;
+          this.canvasContext.fill();
+        }
+      }
+    }
+
+    drawFrame();
+  }
+
+  // Quick and dirty downsampling of the original preview bars into a smaller (or equal) number of bars we can display here.
+  resampleBars(original) {
+    const dstCount = ((this.canvasRef.current.width - SPACING) / (LINE_WIDTH + SPACING)) | 0;
+    // Remove extra padding on the right due to fractional bar which is not drawn.
+    this.effectiveWidth = dstCount * (LINE_WIDTH + SPACING) + SPACING;
+
+    if (!Array.isArray(original) || original.length == 0) {
+      return Array.apply(null, Array(dstCount)).map(_ => 0.01);
+    }
+
+    const factor = original.length / dstCount;
+    let amps = [];
+    let maxAmp = -1;
+    for (let i=0; i<dstCount; i++) {
+      let lo = (i * factor) | 0; // low bound;
+      let hi = ((i + 1) * factor) | 0; // high bound;
+      if (hi == lo) {
+        amps[i] = original[lo];
+      } else {
+        let amp = 0.0;
+        for (let j=lo; j<hi; j++) {
+          amp += original[j]
+        }
+        amps[i] = Math.max(0, amp / (hi - lo));
+      }
+      maxAmp = Math.max(amps[i], maxAmp);
+    }
+
+    if (maxAmp > 0) {
+      return amps.map(a => a / maxAmp);
+    }
+    return Array.apply(null, Array(dstCount)).map(_ => 0.01);
+  }
+
+  handlePlay(e) {
+    e.preventDefault();
+    if (!this.state.canPlay) {
+      return;
+    }
+    if (this.state.playing) {
+      this.audioPlayer.pause();
+      this.setState({playing: false});
+    } else {
+      this.audioPlayer.play();
+      this.setState({playing: true}, this.visualize);
+    }
+  }
+
+  handleError(err) {
+    console.error(err);
+  }
+
+  handleSeek(e) {
+    e.preventDefault();
+    if (e.target && this.props.duration) {
+      const rect = e.target.getBoundingClientRect();
+      const offset = (e.clientX - rect.left) / this.effectiveWidth * CANVAS_UPSCALING;
+      this.audioPlayer.currentTime = this.props.duration * offset / 1000;
+      this.setState({currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)});
+      if (!this.state.playing) {
+        this.visualize();
+      }
+    }
+  }
+
+  render() {
+    const playClass = 'material-icons' +
+      (this.props.short ? '' : ' large') +
+      (this.state.canPlay ? '' : ' disabled');
+    const play = (<a href="#" onClick={this.handlePlay} title="Play">
+        <i className={playClass}>{this.state.playing ? 'pause_circle' :
+          (this.state.canPlay ? 'play_circle' : 'not_interested')}</i>
+      </a>);
+    return (<div className="audio-player">{this.props.short ?
+      <>
+        <canvas className="playback" ref={this.canvasRef} onClick={this.handleSeek} />
+        {play}
+      </>
+    :
+      <>
+        {play}
+        <div>
+          <canvas className="playback" ref={this.canvasRef} onClick={this.handleSeek} />
+          <div className="timer">{this.state.currentTime}/{this.state.duration}</div>
+        </div>
+      </>
+    }
+    </div>);
+  }
+}

src/widgets/audio-recorder.jsx

@@ -0,0 +1,346 @@
+// Audio recorder widget.
+
+import React from 'react';
+
+import AudioPlayer from './audio-player.jsx';
+// Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=642012
+import fixWebmDuration from 'fix-webm-duration';
+
+import { intArrayToBase64 } from '../lib/blob-helpers.js'
+import { secondsToTime } from '../lib/strformat';
+import { MAX_DURATION, MIN_DURATION } from '../config.js';
+
+// FFT resolution.
+const BUFFER_SIZE = 256;
+// Make canvas bigger than the element size to reduce blurring.
+const CANVAS_UPSCALING = 2.0;
+// Thickness of a visualization bar.
+const LINE_WIDTH = 3 * CANVAS_UPSCALING;
+// Spacing between two visualization bars.
+const SPACING = 2 * CANVAS_UPSCALING;
+// Duration represented by one visualization bar.
+const MILLIS_PER_BAR = 100;
+// Color of histogram bars
+const BAR_COLOR = '#BBBD';
+// Vertical scaling for visualization bars.
+const BAR_SCALE = 64.0;
+// Number of bars in preview.
+const VISUALIZATION_BARS = 96;
+// Maximum number of samples per bar.
+const MAX_SAMPLES_PER_BAR = 10;
+
+// Recording format.
+const AUDIO_MIME_TYPE = 'audio/webm';
+
+export default class AudioRecorder extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      enabled: true,
+      audioRecord: null,
+      recording: true,
+      paused: false,
+      duration: '0:00',
+      blobUrl: null,
+      preview: null
+    };
+
+    this.visualize = this.visualize.bind(this);
+    this.initMediaRecording = this.initMediaRecording.bind(this);
+    this.initCanvas = this.initCanvas.bind(this);
+    this.getRecording = this.getRecording.bind(this);
+    this.cleanUp = this.cleanUp.bind(this);
+
+    this.handleResume = this.handleResume.bind(this);
+    this.handlePause = this.handlePause.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleDone = this.handleDone.bind(this);
+
+    this.durationMillis = 0;
+    this.startedOn = null;
+    this.viewBuffer = [];
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.stream = null;
+    this.mediaRecorder = null;
+    this.audioContext = null;
+    this.audioInput = null;
+    this.analyser = null;
+
+    this.audioChunks = [];
+
+    // Start recorder right away.
+    try {
+      navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(this.initMediaRecording, this.props.onError);
+    } catch (err) {
+      this.props.onError(err);
+    }
+  }
+
+  componentWillUnmount() {
+    this.startedOn = null;
+    if (this.stream) {
+      this.cleanUp();
+    }
+  }
+
+  // Draw amplitude of sound.
+  visualize() {
+    this.initCanvas();
+
+    const pcmData = new Uint8Array(this.analyser.frequencyBinCount);
+    const width = this.canvasWidth;
+    const height = this.canvasHeight;
+    // Number of bars.
+    const viewLength = (width / (LINE_WIDTH + SPACING)) | 0;
+    // Duration of audio which fits onto the screen.
+    const viewDuration = MILLIS_PER_BAR * viewLength;
+
+    this.canvasContext.lineWidth = LINE_WIDTH;
+    this.canvasContext.strokeStyle = BAR_COLOR;
+
+    let prevBarCount = 0;
+    let volume = 0.0;
+    let countPerBar = 0;
+    const drawFrame = () => {
+      if (!this.startedOn) {
+        return;
+      }
+      window.requestAnimationFrame(drawFrame);
+
+      const duration = this.durationMillis + (Date.now() - this.startedOn);
+      // Update record length timer.
+      this.setState({duration: secondsToTime(duration / 1000)});
+
+      // Check if record is too long.
+      if (duration > MAX_DURATION) {
+        this.startedOn = null;
+        this.mediaRecorder.pause();
+        this.durationMillis += Date.now() - this.startedOn;
+        this.setState({enabled: false, recording: false, duration: secondsToTime(this.durationMillis / 1000)});
+      }
+
+      // Draw histogram.
+
+      // Get current waveform and calculate its amplitude.
+      this.analyser.getByteTimeDomainData(pcmData);
+      let amp = 0.0;
+      for (const amplitude of pcmData) {
+        amp += (amplitude - 127) ** 2;
+      }
+
+      // Sum the amplitude.
+      volume += Math.sqrt(amp/pcmData.length);
+      countPerBar ++;
+
+      let barCount = (duration / MILLIS_PER_BAR) | 0;
+      // Shift of the histogram along x-axis to make scrolling smooth. No need to shift if recording is too short.
+      const dx = viewDuration > duration ? 0 :
+        (duration - MILLIS_PER_BAR * barCount) / MILLIS_PER_BAR * (LINE_WIDTH + SPACING);
+
+      if (prevBarCount != barCount) {
+        prevBarCount = barCount;
+        // Add new amplitude visualization bar.
+        this.viewBuffer.push(volume/countPerBar);
+        volume = 0.0;
+        countPerBar = 0;
+        if (this.viewBuffer.length > viewLength) {
+          // Keep at most 'viewLength' amplitude bars.
+          this.viewBuffer.shift();
+        }
+      }
+
+      // Clear canvas.
+      this.canvasContext.clearRect(0, 0, width, height);
+
+      // Draw amplitude bars.
+      this.canvasContext.beginPath();
+      for (let i = 0; i < this.viewBuffer.length; i++) {
+        let x = i * (LINE_WIDTH + SPACING) - dx;
+        let y = Math.min(this.viewBuffer[i] / BAR_SCALE, 0.9) * height;
+
+        this.canvasContext.moveTo(x, (height - y) * 0.5);
+        this.canvasContext.lineTo(x, height * 0.5 + y * 0.5);
+      }
+      // Actually draw the bars on canvas.
+      this.canvasContext.stroke();
+    }
+
+    drawFrame();
+  }
+
+  handlePause(e) {
+    e.preventDefault();
+    this.mediaRecorder.pause();
+    this.mediaRecorder.requestData();
+    this.durationMillis += Date.now() - this.startedOn;
+    this.startedOn = null;
+    this.setState({recording: false});
+  }
+
+  handleResume(e) {
+    e.preventDefault();
+    if (this.state.enabled) {
+      this.startedOn = Date.now();
+      this.mediaRecorder.resume();
+      this.setState({recording: true}, this.visualize);
+    }
+  }
+
+  handleDelete(e) {
+    e.preventDefault();
+    this.durationMillis = 0;
+    this.startedOn = null;
+    this.mediaRecorder.stop();
+    this.cleanUp();
+    this.setState({recording: false});
+  }
+
+  handleDone(e) {
+    e.preventDefault();
+    this.setState({recording: false});
+    if (this.startedOn) {
+      this.durationMillis += Date.now() - this.startedOn;
+      this.startedOn = null;
+    }
+    // Stop recording and return data.
+    if (this.mediaRecorder) {
+      this.mediaRecorder.stop();
+    }
+  }
+
+  initCanvas() {
+    this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
+    this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
+
+    this.canvasContext = this.canvasRef.current.getContext('2d');
+    this.canvasContext.lineCap = 'round';
+    // To reduce line blurring.
+    this.canvasContext.translate(0.5, 0.5);
+    this.canvasWidth = this.canvasRef.current.width;
+    this.canvasHeight = this.canvasRef.current.height;
+  }
+
+  initMediaRecording(stream) {
+    this.stream = stream;
+    this.mediaRecorder = new MediaRecorder(stream, {mimeType: AUDIO_MIME_TYPE});
+
+    // The following code is needed for visualization.
+    this.audioContext = new AudioContext();
+    this.audioInput = this.audioContext.createMediaStreamSource(stream);
+    this.analyser = this.audioContext.createAnalyser();
+    this.analyser.fftSize = BUFFER_SIZE;
+    this.audioInput.connect(this.analyser);
+
+    this.mediaRecorder.onstop = _ => {
+      if (this.durationMillis > MIN_DURATION) {
+        this.getRecording(this.mediaRecorder.mimeType, this.durationMillis)
+          .then(result => this.props.onFinished(result.url, result.preview, this.durationMillis));
+      } else {
+        this.props.onDeleted();
+      }
+      this.cleanUp();
+    }
+
+    this.mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) {
+        this.audioChunks.push(e.data);
+      }
+
+      if (this.mediaRecorder.state != 'inactive') {
+        this.getRecording(this.mediaRecorder.mimeType).then(result => {
+          this.setState({
+            blobUrl: result.url,
+            preview: result.preview
+          });
+        });
+      }
+    }
+
+    this.durationMillis = 0;
+    this.startedOn = Date.now();
+    this.mediaRecorder.start();
+    this.visualize();
+  }
+
+  // Obtain data in a form sutable for sending or playing back.
+  // If duration is valid, apply fix for Chrome's WebM duration bug.
+  getRecording(mimeType, duration) {
+    let blob = new Blob(this.audioChunks, {type: mimeType || AUDIO_MIME_TYPE});
+    return (duration > 0 ? fixWebmDuration(blob, duration, {logger: false}) : Promise.resolve(blob))
+      .then(fixedBlob => { blob = fixedBlob; return fixedBlob.arrayBuffer(); })
+      .then(arrayBuff => this.audioContext.decodeAudioData(arrayBuff))
+      .then(decoded => this.createPreview(decoded))
+      .then(preview => ({url: window.URL.createObjectURL(blob), preview: intArrayToBase64(preview)}));
+  }
+
+  // Preview must be calculated at the source: Chrome does not allow background AudioContext.
+  createPreview(audio) {
+    const data = audio.getChannelData(0);
+    // Number of amplitude bars in preview.
+    const viewLength = Math.min(data.length, VISUALIZATION_BARS);
+    // The number of samples in each bar.
+    const totalSPB = (data.length / viewLength) | 0;
+    // Distance between samples: we are going to take just a fracton of samples.
+    const samplingRate = Math.max(1, (totalSPB / MAX_SAMPLES_PER_BAR) | 0);
+
+    let buffer = [];
+    let max = -1;
+    for (let i = 0; i < viewLength; i++) {
+      let amplitude = 0;
+      let count = 0;
+      for (let j = 0; j < totalSPB; j += samplingRate) {
+        amplitude += data[totalSPB * i + j] ** 2;
+        count ++;
+      }
+      const val = Math.sqrt(amplitude / count);
+      buffer.push(val);
+      max = Math.max(max, val);
+    }
+    // Normalize amplitude to 0..100.
+    if (max > 0) {
+      buffer = buffer.map(a => (100 * a / max) | 0);
+    }
+    return buffer;
+  }
+
+  cleanUp() {
+    this.audioInput.disconnect();
+    this.stream.getTracks().forEach(track => track.stop());
+  }
+
+  render() {
+    const resumeClass = 'material-icons ' + (this.state.enabled ? 'red' : 'gray');
+    return (
+      <div className="audio">
+        <a href="#" onClick={this.handleDelete} title="Delete">
+          <i className="material-icons gray">delete_outline</i>
+        </a>
+        {this.state.recording ?
+          <canvas ref={this.canvasRef} />
+          :
+          <AudioPlayer
+            src={this.state.blobUrl}
+            preview={this.state.preview}
+            duration={this.durationMillis}
+            short={true} />
+        }
+        <div className="duration">{this.state.duration}</div>
+        {this.state.recording ?
+          <a href="#" onClick={this.handlePause} title="Pause">
+            <i className="material-icons">pause_circle_outline</i>
+          </a> :
+          <a href="#" onClick={this.handleResume} title="Resume">
+            <i className={resumeClass}>radio_button_checked</i>
+          </a>
+        }
+        <a href="#" onClick={this.handleDone} title="Send">
+          <i className="material-icons">send</i>
+        </a>
+      </div>
+    );
+  }
+}

src/widgets/avatar-crop.jsx

@@ -0,0 +1,68 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Cropper from './cropper.jsx';
+import { imageCrop } from '../lib/blob-helpers.js';
+
+export default class AvatarCrop extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      scale: 1
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  // Cut out in image coordinates and desired scale factor.
+  handleChange(left, top, width, height, scale) {
+    this.setState({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      scale: scale
+    });
+  }
+
+  handleSubmit() {
+    imageCrop(this.props.mime, this.props.avatar,
+      this.state.left, this.state.top, this.state.width, this.state.height,
+      this.state.scale)
+      .then(img => {
+        this.props.onSubmit(img.mime, img.blob, img.width, img.height);
+      })
+      .catch(err => {
+        this.props.onError(err);
+      });
+  }
+
+  render() {
+    return (
+      <div className="panel-form">
+        <div className="panel-form-row">
+          <Cropper
+            source={this.props.avatar}
+            onChange={this.handleChange} />
+        </div>
+        <div className="dialog-buttons">
+          {this.props.onCancel ?
+            <button className="secondary" onClick={this.props.onCancel}>
+              <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
+            </button>
+            : null}
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};

src/widgets/avatar-upload.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import LetterTile from './letter-tile.jsx';
+import LoadSpinner from './load-spinner.jsx';
+
+import { sanitizeUrlForMime } from '../lib/utils.js';
+
+import { AVATAR_SIZE } from '../config.js';
+
+export default class AvatarUpload extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      source: props.avatar
+    };
+
+    this.handleFileReceived = this.handleFileReceived.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.avatar != prevProps.avatar) {
+      this.setState({source: this.props.avatar});
+    }
+  }
+
+  handleFileReceived(e) {
+    const image = e.target.files[0];
+    this.props.onImageUpdated(image.type, URL.createObjectURL(image), image.name);
+    // Clear the value so the same file can be uploaded again.
+    e.target.value = '';
+  }
+
+  render() {
+    // Randomize id value in case more than one AvatarUpload is shown
+    // at the same time.
+    const randId = 'file-input-avatar-' + ('' + Math.random()).substring(0, 4);
+    const className = 'avatar-upload' + (this.props.readOnly ? ' read-only' : '');
+    return (
+      <div className={className}>
+        {this.props.readOnly || !this.state.source ?
+          null :
+          <a href="#" className="clear-avatar" onClick={(e) => {e.preventDefault(); this.props.onImageUpdated();}}>
+            <i className="material-icons">clear</i>
+          </a>}
+        {this.state.source ?
+          <img src={this.props.tinode.authorizeURL(sanitizeUrlForMime(this.state.source, 'image'))} className="preview" /> :
+          this.props.readOnly && this.props.uid ?
+            <div className="avatar-box">
+              <LetterTile
+                tinode={this.props.tinode}
+                avatar={true}
+                topic={this.props.uid}
+                title={this.props.title} />
+            </div>
+            :
+            <div className="blank">{AVATAR_SIZE}&times;{AVATAR_SIZE}</div>}
+        {this.props.readOnly ? null :
+          <input type="file" id={randId} className="inputfile hidden"
+            accept="image/*" onChange={this.handleFileReceived} />}
+        {this.props.readOnly ? null :
+        <label htmlFor={randId} className="round">
+          <i className="material-icons">file_upload</i>
+        </label>}
+        <LoadSpinner show={this.props.uploading} large={true} clear={true} centered={true} />
+      </div>
+    );
+  }
+};

src/widgets/badge-list.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const icon_mapping = {'staff': 'verified_user'};
+
+const messages = defineMessages({
+  badge_verified: {
+    id: 'badge_verified',
+    defaultMessage: 'Verified/official',
+    description: 'Explanation of a verified account or topic badge'
+  },
+  badge_staff: {
+    id: 'badge_staff',
+    defaultMessage: 'Staff-managed',
+    description: 'Explanation of a staff-managed account or topic badge'
+  },
+  badge_danger: {
+    id: 'badge_danger',
+    defaultMessage: 'Untrustworthy',
+    description: 'Suspicious or untrustworthy account or topic badge'
+  },
+});
+
+
+/* Trusted badges with labels: verified, staff, danger */
+class BadgeList extends React.PureComponent {
+  render() {
+    const {formatMessage} = this.props.intl;
+    let badges = null;
+    if (this.props.trustedBadges && this.props.trustedBadges.length > 0) {
+      badges = [];
+      this.props.trustedBadges.map((b) => {
+        const comment = 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>);
+      });
+      return <>{badges}</>;
+    }
+    return null;
+  }
+};
+
+export default injectIntl(BadgeList);

src/widgets/button-back.jsx

@@ -0,0 +1,12 @@
+// The <- button to be displayed in title bars.
+import React from 'react';
+
+export default class ButtonBack extends React.PureComponent {
+  render() {
+    return (
+      <a href="#" onClick={(e) => {e.preventDefault(); this.props.onBack();}}>
+        <i className="material-icons">arrow_back</i>
+      </a>
+    );
+  }
+}

src/widgets/call-panel.jsx

@@ -0,0 +1,381 @@
+// CallPanel: displays local and remote viewports and controls.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import LetterTile from '../widgets/letter-tile.jsx';
+
+import { CALL_WEBRTC_CONFIG, MAX_TITLE_LENGTH } from '../config.js';
+import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';
+
+import { clipStr } from '../lib/utils.js'
+
+export default class CallPanel extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      localStream: undefined,
+      pc: undefined,
+
+      previousOnInfo: undefined
+    };
+
+    this.localStreamConstraints = {
+      audio: true,
+      video: true
+    };
+
+    this.localRef = React.createRef();
+    this.remoteRef = React.createRef();
+
+    this.onInfo = this.onInfo.bind(this);
+    this.start = this.start.bind(this);
+
+    this.createPeerConnection = this.createPeerConnection.bind(this);
+
+    this.handleNegotiationNeededEvent = this.handleNegotiationNeededEvent.bind(this);
+    this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);
+    this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);
+    this.handleICEConnectionStateChangeEvent = this.handleICEConnectionStateChangeEvent.bind(this);
+    this.handleSignalingStateChangeEvent = this.handleSignalingStateChangeEvent.bind(this);
+    this.handleICEGatheringStateChangeEvent = this.handleICEGatheringStateChangeEvent.bind(this);
+    this.handleTrackEvent = this.handleTrackEvent.bind(this);
+
+    this.handleVideoOfferMsg = this.handleVideoOfferMsg.bind(this);
+    this.handleVideoAnswerMsg = this.handleVideoAnswerMsg.bind(this);
+    this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);
+
+    this.reportError = this.reportError.bind(this);
+    this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
+
+    this.stop = this.stop.bind(this);
+    this.stopTracks = this.stopTracks.bind(this);
+
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);
+    this.handleToggleMicClick = this.handleToggleMicClick.bind(this);
+    this.toggleMedia = this.toggleMedia.bind(this);
+
+    this.handleRemoteHangup = this.handleRemoteHangup.bind(this);
+    this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this);
+  }
+
+  handleVideoCallAccepted(info) { 
+    const pc = this.createPeerConnection();
+    const stream = this.state.localStream;
+    stream.getTracks().forEach(track => {
+      pc.addTrack(track, stream);
+    });
+  }
+
+  onInfo(info) {
+    if (info.what != 'call') {
+      return;
+    }
+    switch (info.event) {
+      case 'accept':
+        this.handleVideoCallAccepted(info);
+        break;
+      case 'offer':
+        this.handleVideoOfferMsg(info);
+        break;
+      case 'answer':
+        this.handleVideoAnswerMsg(info);
+        break;
+      case 'ice-candidate':
+        this.handleNewICECandidateMsg(info);
+        break;
+      case 'hang-up':
+        this.handleRemoteHangup(info);
+        break;
+    }
+  }
+
+  componentDidMount() {
+    const topic = this.props.topic;
+    this.previousOnInfo = topic.onInfo;
+    topic.onInfo = this.onInfo;
+    if ((this.props.callState == CALL_STATE_OUTGOING_INITATED ||
+         this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
+      this.start();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.topic.onInfo = this.previousOnInfo;
+    this.stop();
+  }
+
+  start() {
+    if (this.state.localStream) {
+      console.log("You can't start a call because you already have one open!");
+    } else {
+      if (this.props.callState == CALL_STATE_IN_PROGRESS) {
+        // We apparently just accepted the call.
+        this.props.onInvite(this.props.topic.name, this.props.seq, this.props.callState);
+        return;
+      }
+      // This is an outgoing call waiting for the other side to pick up.
+      // Start local video.
+      navigator.mediaDevices.getUserMedia(this.localStreamConstraints)
+        .then(stream => {
+          this.setState({localStream: stream});
+          this.localRef.current.srcObject = stream;
+          // Send call invitation.
+          this.props.onInvite(this.props.topic.name, this.props.seq, this.props.callState);
+        })
+        .catch(this.handleGetUserMediaError);
+    }
+  }
+
+  createPeerConnection() {
+    var pc = new RTCPeerConnection(CALL_WEBRTC_CONFIG);
+
+    pc.onicecandidate = this.handleICECandidateEvent;
+    pc.oniceconnectionstatechange = this.handleICEConnectionStateChangeEvent;
+    pc.onicegatheringstatechange = this.handleICEGatheringStateChangeEvent;
+    pc.onsignalingstatechange = this.handleSignalingStateChangeEvent;
+    pc.onnegotiationneeded = this.handleNegotiationNeededEvent;
+    pc.ontrack = this.handleTrackEvent;
+
+    this.setState({pc: pc});
+    return pc;
+  }
+
+  handleVideoAnswerMsg(info) {
+    // Configure the remote description, which is the SDP payload
+    // in 'info' message.
+    var desc = new RTCSessionDescription(info.payload);
+    this.state.pc.setRemoteDescription(desc).catch(this.reportError);
+  }
+
+  reportError(err) {
+    this.props.onError(err.message, 'err');
+  }
+
+  handleNegotiationNeededEvent() {
+    this.state.pc.createOffer().then(offer => {
+      return this.state.pc.setLocalDescription(offer);
+    })
+    .then(_ => {
+      this.props.onSendOffer(this.props.topic.name, this.props.seq, this.state.pc.localDescription.toJSON());
+    })
+    .catch(this.reportError);
+  }
+
+  handleICECandidateEvent(event) {
+    if (event.candidate) {
+      this.props.onIceCandidate(this.props.topic.name, this.props.seq, event.candidate.toJSON());
+    }
+  }
+
+  handleNewICECandidateMsg(info) {
+    var candidate = new RTCIceCandidate(info.payload);
+
+    this.state.pc.addIceCandidate(candidate)
+      .catch(this.reportError);
+  }
+
+  handleICEConnectionStateChangeEvent(event) {
+    switch (this.state.pc.iceConnectionState) {
+      case 'closed':
+      case 'failed':
+        this.handleCloseClick();
+        break;
+    }
+  }
+
+  handleSignalingStateChangeEvent(event) {
+    if (this.state.pc.signalingState == 'closed') {
+      this.handleCloseClick();
+    }
+  }
+
+  handleICEGatheringStateChangeEvent(event) {
+    console.log('ICE gathering change state: ', event);
+  }
+
+  handleTrackEvent(event) {
+    // Remote video becomes available.
+    this.remoteRef.current.srcObject = event.streams[0];
+    // Make sure we display the title (peer's name) over the remote video.
+    this.forceUpdate();
+  }
+
+  handleGetUserMediaError(e) {
+    switch(e.name) {
+      case 'NotFoundError':
+        // Cannot start the call b/c no camera and/or microphone found. 
+        this.reportError(e);
+        break;
+      case 'SecurityError':
+      case 'PermissionDeniedError':
+        // Do nothing; this is the same as the user canceling the call.
+        break;
+      default:
+        console.log('Error opening your camera and/or microphone: ' + e.message);
+        break;
+    }
+
+    // Make sure we shut down our end of the RTCPeerConnection so we're
+    // ready to try again.
+    this.handleCloseClick();
+  }
+
+  handleVideoOfferMsg(info) {
+    var localStream = null;
+
+    const pc = this.createPeerConnection();
+
+    var desc = new RTCSessionDescription(info.payload);
+
+    pc.setRemoteDescription(desc).then(() => {
+      return navigator.mediaDevices.getUserMedia(this.localStreamConstraints);
+    })
+    .then(stream => {
+      localStream = stream;
+      this.localRef.current.srcObject = stream;
+      this.setState({localStream: stream});
+
+      localStream.getTracks().forEach(track => {
+        pc.addTrack(track, localStream);
+      });
+    })
+    .then(() => {
+      return pc.createAnswer();
+    })
+    .then(answer => {
+      return pc.setLocalDescription(answer);
+    })
+    .then(() => {
+      this.props.onSendAnswer(this.props.topic.name, this.props.seq, pc.localDescription.toJSON());
+    })
+    .catch(this.handleGetUserMediaError);
+  }
+
+  handleRemoteHangup() {
+    this.handleCloseClick();
+  }
+
+  stopTracks(el) {
+    if (el == null) { return; }
+    let stream = el.srcObject;
+    if (stream == null) { return; }
+    let tracks = stream.getTracks();
+
+    if (tracks != null) {
+      tracks.forEach((track) => {
+        track.stop();
+        track.enabled = false;
+      });
+    }
+    el.srcObject = null;
+    el.src = '';
+  }
+
+  stop() {
+    this.stopTracks(this.localRef.current);
+    this.stopTracks(this.remoteRef.current);
+    if (this.state.pc != null) {
+      this.state.pc.ontrack = null;
+      this.state.pc.onremovetrack = null;
+      this.state.pc.onremovestream = null;
+      this.state.pc.onicecandidate = null;
+      this.state.pc.oniceconnectionstatechange = null;
+      this.state.pc.onsignalingstatechange = null;
+      this.state.pc.onicegatheringstatechange = null;
+      this.state.pc.onnegotiationneeded = null;
+
+      this.state.pc.close();
+    }
+    this.setState({pc: null});
+  }
+
+  handleCloseClick() {
+    this.stop();
+    this.props.onHangup(this.props.topic.name, this.props.seq);
+  }
+
+  // Mute/unmute audio/video (specified by kind).
+  toggleMedia(kind) {
+    const stream = this.state.localStream;
+    stream.getTracks().forEach(track => {
+      if (track.kind != kind) {
+        return;
+      }
+      track.enabled = !track.enabled;
+    });
+    // Make sure we redraw the mute/unmute icons (e.g. mic -> mic_off).
+    this.forceUpdate();
+  }
+
+  handleToggleCameraClick() {
+    this.toggleMedia('video');
+  }
+
+  handleToggleMicClick() {
+    this.toggleMedia('audio');
+  }
+
+  render() {
+    if (!this.props.topic) {
+      return null;
+    }
+
+    const remoteActive = this.remoteRef.current != null && this.remoteRef.current.srcObject != null;
+    const audioIcon = this.state.localStream != null && this.state.localStream.getAudioTracks()[0].enabled ? 'mic' : 'mic_off';
+    const videoIcon = this.state.localStream != null && this.state.localStream.getVideoTracks()[0].enabled ? 'videocam' : 'videocam_off';
+
+    return (
+      <>
+        <div id="topic-caption-panel" className="caption-panel">
+          {this.props.displayMobile ?
+            <a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
+              <i className="material-icons">arrow_back</i>
+            </a>
+            :
+            null}
+          <div className="avatar-box">
+            <LetterTile
+              tinode={this.props.tinode}
+              avatar={this.props.avatar}
+              topic={this.props.topic}
+              title={this.props.title} />
+          </div>
+          <div id="topic-title-group">
+            <div id="topic-title" className="panel-title">{
+              this.props.title ||
+              <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
+                description="Title shown when the topic has no name" /></i>
+            }</div>
+          </div>
+        </div>
+        <div id="video-container">
+          <div className="video-container-panel">
+            <div className="video-elem">
+              <video id="localVideo" ref={this.localRef} autoPlay muted playsInline></video>
+              <div className="video-title">
+                <FormattedMessage id="calls_you_label"
+                  defaultMessage="You" description="Shown over the local video screen" />
+              </div>
+            </div>
+            <div className="video-elem">
+              <video id="remoteVideo" ref={this.remoteRef} autoPlay playsInline></video>
+              {remoteActive ?
+                <div className="video-title">{clipStr(this.props.title, MAX_TITLE_LENGTH)}</div>
+                :
+                null}
+            </div>
+          </div>
+          <div id="video-container-controls">
+            <button className="video-call-hangup" onClick={this.handleCloseClick}>
+              <i className="material-icons">call_end</i>
+            </button>
+            <button className="video-call-toggle-media" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
+            <button className="video-call-toggle-media" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>
+          </div>
+        </div>
+      </>
+    );
+  }
+};

src/widgets/chat-message.jsx

@@ -0,0 +1,220 @@
+// Single chat message bubble, sent or received.
+
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { Drafty, Tinode } from 'tinode-sdk';
+
+import Attachment from './attachment.jsx';
+import LetterTile from './letter-tile.jsx';
+import ReceivedMarker from './received-marker.jsx'
+
+import { fullFormatter } from '../lib/formatters.js';
+import { isVideoCall, sanitizeUrl } from '../lib/utils.js';
+import { secondsToTime } from '../lib/strformat.js';
+
+class BaseChatMessage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      progress: 0
+    };
+
+    if (props.uploader) {
+      props.uploader.onProgress = this.handleProgress.bind(this);
+    }
+
+    this.handleImagePreview = this.handleImagePreview.bind(this);
+    this.handleFormButtonClick = this.handleFormButtonClick.bind(this);
+    this.handleContextClick = this.handleContextClick.bind(this);
+    this.handleCancelUpload = this.handleCancelUpload.bind(this);
+    this.handleQuoteClick = this.handleQuoteClick.bind(this);
+
+    this.formatterContext = {
+      formatMessage: props.intl.formatMessage.bind(props.intl),
+      viewportWidth: props.viewportWidth,
+      authorizeURL: props.tinode.authorizeURL.bind(props.tinode),
+      onImagePreview: this.handleImagePreview,
+      onFormButtonClick: this.handleFormButtonClick,
+      onQuoteClick: this.handleQuoteClick
+    };
+  }
+
+  handleImagePreview(e) {
+    e.preventDefault();
+    this.props.onImagePreview({
+      url: e.target.src,
+      filename: e.target.title,
+      width: e.target.dataset.width,
+      height: e.target.dataset.height,
+      size: e.target.dataset.size,
+      type: e.target.dataset.mime
+    });
+  }
+
+  handleFormButtonClick(e) {
+    e.preventDefault();
+    const data = {
+      seq: this.props.seq
+    };
+    data.resp = {};
+    if (e.target.dataset.name) {
+      data.resp[e.target.dataset.name] = e.target.dataset.val ? e.target.dataset.val :
+        e.target.dataset.val === undefined ? 1 : '' + e.target.dataset.val;
+    }
+    if (e.target.dataset.act == 'url') {
+      data.ref = sanitizeUrl(e.target.dataset.ref) || 'about:blank';
+    }
+    const text = e.target.dataset.title || 'unknown';
+    this.props.onFormResponse(e.target.dataset.act, text, data);
+  }
+
+  handleContextClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const menuItems = [];
+    if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
+      menuItems.push('menu_item_send_retry');
+    }
+    if (this.props.userIsWriter &&
+        this.props.received > Tinode.MESSAGE_STATUS_FAILED &&
+        this.props.received < Tinode.MESSAGE_STATUS_DEL_RANGE) {
+      menuItems.push('menu_item_reply');
+    }
+    menuItems.push('menu_item_forward');
+
+    this.props.showContextMenu({
+      seq: this.props.seq,
+      content: this.props.content,
+      userFrom: this.props.userFrom,
+      userName: this.props.userName,
+      y: e.pageY,
+      x: e.pageX,
+      pickReply: this.props.pickReply
+    }, menuItems);
+  }
+
+  handleProgress(ratio) {
+    this.setState({progress: ratio});
+  }
+
+  handleCancelUpload() {
+    this.props.onCancelUpload(this.props.seq, this.props.uploader);
+  }
+
+  handleQuoteClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const replyToSeq = this.props.replyToSeq;
+    if (replyToSeq) {
+      this.props.onQuoteClick(replyToSeq);
+    }
+  }
+
+  render() {
+    const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
+    const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
+    const avatar = this.props.userAvatar || true;
+    const fullDisplay = (this.props.isGroup && this.props.response &&
+      (this.props.sequence == 'single' || this.props.sequence == 'last'));
+
+    let content = this.props.content;
+    const attachments = [];
+    if (this.props.mimeType == Drafty.getContentType() && Drafty.isValid(content)) {
+      Drafty.attachments(content, (att, i) => {
+        if (att.mime == 'application/json') {
+          // Don't show json objects as attachments.
+          // They are not meant for users.
+          return;
+        }
+        attachments.push(<Attachment
+          tinode={this.props.tinode}
+          downloadUrl={Drafty.getDownloadUrl(att)}
+          filename={att.name}
+          uploading={Drafty.isProcessing(att)}
+          mimetype={att.mime}
+          size={Drafty.getEntitySize(att)}
+          progress={this.state.progress}
+          onCancelUpload={this.handleCancelUpload}
+          onError={this.props.onError}
+          key={i} />);
+      }, this);
+      const tree = Drafty.format(content, fullFormatter, this.formatterContext);
+      content = React.createElement(React.Fragment, null, tree);
+    } else if (this.props.deleted) {
+      // Message represents a range of deleted messages.
+      content = <><i className="material-icons gray">block</i> <i className="gray">
+        <FormattedMessage id="deleted_content"
+          defaultMessage="content deleted" description="Shown when messages are deleted" />
+      </i></>
+    } else if (isVideoCall(this.props.mimeType)) {
+      // Video calls.
+      const direction = this.props.response ? 'call_received' : 'call_made';
+      const text = this.props.response ?
+        <FormattedMessage id="calls_incoming"
+          defaultMessage="Incoming Call" description="Incoming call label" /> :
+        <FormattedMessage id="calls_outgoing"
+          defaultMessage="Outgoing Call" description="Outgoing call label" />;
+      const isCallDropped = this.props.content == 'disconnected';
+      content = <><i className="material-icons" style={{color: isCallDropped ? 'red' : 'green'}}>{direction}</i>{text}
+        { !isCallDropped && this.props.duration ? [' (', secondsToTime(this.props.duration / 1000), ')'] : null}
+      </>
+    } else if (typeof content != 'string') {
+      content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
+        <FormattedMessage id="invalid_content"
+          defaultMessage="invalid content" description="Shown when the message is unreadable" /></i></>
+    }
+
+    return (
+      <li ref={this.props.innerRef} className={sideClass}>
+        {this.props.isGroup && this.props.response ?
+          <div className="avatar-box">
+            {fullDisplay ?
+              <LetterTile
+                tinode={this.props.tinode}
+                topic={this.props.userFrom}
+                title={this.props.userName}
+                avatar={avatar} /> :
+              null}
+          </div> :
+          null}
+        <div>
+          <div className={bubbleClass}>
+            <div className="content-meta">
+              <div className="message-content">
+                {content}
+                {attachments}
+              </div>
+              {this.props.timestamp ?
+                <ReceivedMarker
+                  timestamp={this.props.timestamp}
+                  received={this.props.received} />
+                : null}
+            </div>
+            {this.props.showContextMenu ?
+              <span className="menuTrigger">
+                <a href="#" onClick={this.handleContextClick}>
+                  <i className="material-icons">expand_more</i>
+                </a>
+              </span> : null
+            }
+          </div>
+          {fullDisplay ?
+            <div className="author">
+              {this.props.userName ||
+                <i><FormattedMessage id="user_not_found" defaultMessage="Not found"
+                description="In place of a user's full name when the user is not found." /></i>
+              }
+            </div>
+            : null
+          }
+        </div>
+      </li>
+    );
+  }
+};
+
+const IntlChatMessage = injectIntl(BaseChatMessage);
+const ChatMessage = React.forwardRef((props, ref) => <IntlChatMessage innerRef = {ref} {...props} />);
+
+export default ChatMessage;

src/widgets/checkbox.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+/* BEGIN CheckBox: styled checkbox */
+export default class CheckBox extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange() {
+    this.props.onChange(this.props.name, !this.props.checked);
+  }
+
+  render() {
+    return (
+      this.props.onChange ? (
+        this.props.checked === true ?
+          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box</i> :
+        this.props.checked === false ?
+          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box_outline_blank</i> :
+          <i className="material-icons lt-blue">indeterminate_check_box</i>
+        ) : (
+          this.props.checked ?
+            <i className="material-icons">check_box</i> :
+            <i className="material-icons">check_box_outline_blank</i>
+        )
+    );
+  }
+}
+/* END CheckBox */

src/widgets/chip-input.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+
+import Chip from './chip.jsx';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+
+/* BEGIN ChipInput: group membership widget */
+export default class ChipInput extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = ChipInput.deriveStateFromProps(props);
+    this.state.input = '';
+    this.state.focused = false;
+
+    this.handleTextInput = this.handleTextInput.bind(this);
+    this.removeChipAt = this.removeChipAt.bind(this);
+    this.handleChipCancel = this.handleChipCancel.bind(this);
+    this.handleFocusGained = this.handleFocusGained.bind(this);
+    this.handleFocusLost = this.handleFocusLost.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  static deriveStateFromProps(props) {
+    return {
+      placeholder: props.chips ? '' : props.prompt,
+      sortedChips: ChipInput.sortChips(props.chips, props.staticMembers),
+      chipIndex: ChipInput.indexChips(props.chips)
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.chips != this.props.chips ||
+      prevProps.staticMembers != this.props.staticMembers ||
+      prevProps.prompt != this.props.prompt) {
+      this.setState(ChipInput.deriveStateFromProps(this.props));
+    }
+    if (!prevState || this.props.chips.length > prevState.sortedChips.length) {
+      this.setState({input: ''});
+    }
+  }
+
+  // Map chip index to user name
+  static indexChips(chips) {
+    const index = {};
+    let count = 0;
+    chips.map((item) => {
+      index[item.user] = count;
+      count ++;
+    });
+    return index;
+  }
+
+  // Have non-removable chips appear before all other chips.
+  static sortChips(chips, keep) {
+    const required = [];
+    const normal = [];
+    chips.map((item) => {
+      if (keep && keep.includes(item.user)) {
+        required.push(item);
+      } else {
+        normal.push(item);
+      }
+    });
+    return required.concat(normal);
+  }
+
+  handleTextInput(e) {
+    this.setState({input: e.target.value});
+    if (this.props.filterFunc) {
+      this.props.filterFunc(e.target.value);
+    }
+  }
+
+  removeChipAt(idx) {
+    const removed = this.state.sortedChips[idx];
+    this.props.onChipRemoved(removed.user, this.state.chipIndex[removed.user]);
+  }
+
+  handleChipCancel(item, idx) {
+    this.removeChipAt(idx);
+  }
+
+  handleFocusGained() {
+    this.setState({focused: true});
+  }
+
+  handleFocusLost() {
+    this.setState({focused: false});
+    if (this.props.onFocusLost) {
+      this.props.onFocusLost(this.state.input);
+    }
+  }
+
+  handleKeyDown(e) {
+    if (e.key === 'Backspace') {
+      if (this.state.input.length == 0 && this.state.sortedChips.length > 0) {
+        const at = this.state.sortedChips.length - 1;
+        if (this.state.sortedChips[at].user !== this.props.staticMembers) {
+          this.removeChipAt(at);
+        }
+      }
+    } else if (e.key === 'Enter') {
+      if (this.props.onEnter) {
+        this.props.onEnter(this.state.input);
+      }
+    } else if (e.key === 'Escape') {
+      if (this.props.onCancel) {
+        this.props.onCancel();
+      }
+    }
+  }
+
+  render() {
+    const chips = [];
+    let count = 0;
+    const staticMembers = this.props.staticMembers || [];
+    this.state.sortedChips.map((item) => {
+      chips.push(
+        <Chip
+          tinode={this.props.tinode}
+          onCancel={this.handleChipCancel}
+          avatar={makeImageUrl(item.public ? item.public.photo : null)}
+          title={item.public ? item.public.fn : undefined}
+          noAvatar={this.props.avatarDisabled}
+          topic={item.user}
+          required={staticMembers.includes(item.user)}
+          invalid={item.invalid}
+          index={count}
+          key={item.user} />
+      );
+      count++;
+    });
+    const className = "chip-input" + (this.state.focused ? ' focused' : '');
+    const autoFocus = !(this.props.tabIndex > 0);
+    return (
+      <div className={className}>
+        {chips}
+        <input type="text"
+          placeholder={this.state.placeholder}
+          onChange={this.handleTextInput}
+          onFocus={this.handleFocusGained}
+          onBlur={this.handleFocusLost}
+          onKeyDown={this.handleKeyDown}
+          value={this.state.input}
+          tabIndex={this.props.tabIndex}
+          autoFocus={autoFocus} />
+      </div>
+    );
+  }
+};

src/widgets/chip.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import LetterTile from './letter-tile.jsx';
+
+export default class Chip extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  handleCancel(e) {
+    e.preventDefault();
+    this.props.onCancel(this.props.topic, this.props.index);
+  }
+
+  render() {
+    const title = this.props.title || this.props.topic;
+    const className = this.props.invalid ? 'chip invalid' : 'chip';
+    return (
+      <div className={className}>
+        {this.props.noAvatar ?
+          <span className="spacer" /> :
+          <div className="avatar-box">
+            <LetterTile
+              tinode={this.props.tinode}
+              avatar={this.props.avatar || true}
+              topic={this.props.topic}
+              title={this.props.title} />
+          </div>
+        }
+        <span>{title}</span>
+        {this.props.onCancel && !this.props.required ?
+          <a href="#" onClick={this.handleCancel} >&times;</a>
+          : <span className="spacer" />}
+      </div>
+    );
+  }
+};

src/widgets/contact-action.jsx

@@ -0,0 +1,28 @@
+// A panel included into a list of contacts with an action text.
+import React from 'react';
+import { injectIntl } from 'react-intl';
+
+class ContactAction extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.onAction(this.props.action);
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    return (
+      <li onClick={this.handleClick} className="action">
+        <div className="action-text">{formatMessage(this.props.title, this.props.values)}</div>
+      </li>
+    );
+  }
+};
+
+export default injectIntl(ContactAction);

src/widgets/contact-badges.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const icon_mapping = {'muted': 'notifications_off', 'banned': 'block', 'staff': 'verified_user'};
+
+/* Contact's labels: [you], or icons [muted], [blocked] */
+export default class ContactBadges extends React.PureComponent {
+  render() {
+    let badges = null;
+    if (this.props.badges && this.props.badges.length > 0) {
+      badges = [];
+      this.props.badges.map((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>);
+        } else {
+          badges.push(<span className={'badge' + color} key={b.key || b.name}>{b.name}</span>);
+        }
+      });
+      return <>{badges}</>;
+    }
+    return null;
+  }
+};

src/widgets/contact-list.jsx

@@ -0,0 +1,154 @@
+// ContactList: component for showing a list of contacts,
+// such as a list of group members in a group chat.
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { Drafty, Tinode } from 'tinode-sdk';
+
+import Contact from './contact.jsx';
+import ContactAction from './contact-action.jsx';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { isVideoCall } from '../lib/utils.js'
+
+import { MESSAGE_PREVIEW_LENGTH } from '../config.js';
+
+const messages = defineMessages({
+  badge_you: {
+    id: 'badge_you',
+    defaultMessage: 'you',
+    description: 'Badge for indicating the current user'
+  },
+  badge_owner: {
+    id: 'badge_owner',
+    defaultMessage: 'owner',
+    description: 'Badge for indicating the owner'
+  }
+});
+
+class ContactList extends React.Component {
+  render() {
+    const { formatMessage } = this.props.intl;
+    const showCheckmark = Array.isArray(this.props.topicSelected);
+    const contactNodes = [];
+    let contactsCount = 0;
+    if (this.props.contacts && this.props.contacts.length > 0) {
+      this.props.contacts.map((c) => {
+        if (c.action) {
+          // Action item
+          contactNodes.push(
+            <ContactAction
+              title={c.title} action={c.action} values={c.values}
+              key={c.action}
+              onAction={this.props.onAction}
+              />);
+        } else {
+          // Normal contact
+          const key = this.props.showMode ? c.user : (c.topic || c.user);
+          // If filter function is provided, filter out the items
+          // which don't satisfy the condition.
+          if (this.props.filterFunc && this.props.filter) {
+            const filterOn = [key];
+            if (c.private && c.private.comment) {
+              filterOn.push(('' + c.private.comment).toLowerCase());
+            }
+            if (c.public && c.public.fn) {
+              filterOn.push(('' + c.public.fn).toLowerCase());
+            }
+            if (!this.props.filterFunc(this.props.filter, filterOn)) {
+              return;
+            }
+          }
+
+          const isChannel = Tinode.isChannelTopicName(key);
+          const selected = showCheckmark ?
+            (this.props.topicSelected.indexOf(key) > -1) :
+            (this.props.topicSelected === key);
+          const badges = [];
+          if (this.props.showMode) {
+            if (key == this.props.myUserId) {
+              badges.push({name: formatMessage(messages.badge_you), color: 'green'});
+            }
+            if (c.acs && c.acs.isOwner()) {
+              badges.push({name: formatMessage(messages.badge_owner), color: 'blue'});
+            }
+          }
+
+          const comment = Array.isArray(c.private) ?
+            c.private.join(',') : (c.private ? c.private.comment : null);
+          let preview;
+          let forwarded;
+          let previewIsVideoCall;
+          let previewIsResponse;
+          let deliveryStatus;
+          if (!this.props.showMode && c.latestMessage) {
+            const msg = c.latestMessage(true);
+            if (msg) {
+              forwarded = msg.head ? msg.head.forwarded : null;
+              deliveryStatus = msg._status || c.msgStatus(msg, true);
+              previewIsVideoCall = msg.head ? isVideoCall(msg.head.mime) : null;
+              previewIsResponse = msg.from != this.props.myUserId;
+              if (msg.content) {
+                preview = typeof msg.content == 'string' ?
+                  msg.content.substr(0, MESSAGE_PREVIEW_LENGTH) :
+                  Drafty.preview(msg.content, MESSAGE_PREVIEW_LENGTH);
+              }
+            }
+          }
+
+          contactNodes.push(
+            <Contact
+              tinode={this.props.tinode}
+              title={c.public ? c.public.fn : null}
+              avatar={makeImageUrl(c.public ? c.public.photo : null)}
+              comment={comment}
+              preview={preview}
+              previewIsVideoCall={previewIsVideoCall}
+              previewIsResponse={previewIsResponse}
+              forwarded={forwarded}
+              received={deliveryStatus}
+              unread={this.props.showUnread ? c.unread : 0}
+              now={c.online && this.props.connected}
+              acs={c.acs}
+              showMode={this.props.showMode}
+              badges={badges}
+              showCheckmark={showCheckmark}
+              selected={selected}
+              showOnline={this.props.showOnline && !isChannel}
+              isChannel={isChannel}
+              showContextMenu={this.props.showContextMenu}
+              isVerified={c.trusted && c.trusted.verified}
+              isStaff={c.trusted && c.trusted.staff}
+              isDangerous={c.trusted && c.trusted.danger}
+              deleted={c._deleted}
+              onSelected={this.props.onTopicSelected}
+              item={key}
+              index={contactNodes.length}
+              key={key} />
+          );
+          contactsCount ++;
+        }
+      }, this);
+    }
+
+    return (
+      <div className={this.props.noScroll ? null : "scrollable-panel"}>
+        {contactsCount == 0 ?
+          <div className="center-medium-text"
+            dangerouslySetInnerHTML={{__html: this.props.emptyListMessage}} />
+          :
+          null
+        }
+        {contactNodes.length > 0 ?
+          <ul className="contact-box">
+            {contactNodes}
+          </ul>
+          :
+          null
+        }
+      </div>
+    );
+  }
+};
+
+export default injectIntl(ContactList);

src/widgets/contact.jsx

@@ -0,0 +1,130 @@
+// A single topic or user.
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+import ContactBadges from './contact-badges.jsx';
+import LetterTile from './letter-tile.jsx';
+import UnreadBadge from './unread-badge.jsx';
+
+import { Drafty } from 'tinode-sdk';
+
+import { previewFormatter } from '../lib/formatters.js';
+import { deliveryMarker } from '../lib/utils.js';
+
+class Contact extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleContextClick = this.handleContextClick.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.props.onSelected) {
+      // Index this.props.index is used by GroupManager.
+      this.props.onSelected(this.props.item, this.props.index);
+    }
+  }
+
+  handleContextClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.showContextMenu({ topicName: this.props.item, y: e.pageY, x: e.pageX });
+  }
+
+  render() {
+    let title = this.props.title;
+    if (!title) {
+      title = <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
+        description="Title shown when the topic has no name" /></i>;
+    } else if (title.length > 30) {
+      // FIXME: this is probably wrong for RTL languages.
+      title = title.substring(0, 28) + '…';
+    }
+    const online = this.props.now ? 'online' : 'offline';
+    const avatar = this.props.avatar ? this.props.avatar : true;
+    const badges = this.props.badges ? this.props.badges.slice() : [];
+    const icon_badges = [];
+    if (this.props.isVerified) {
+      icon_badges.push({icon: 'verified', color: 'verified-color'});
+    }
+    if (this.props.isStaff) {
+      icon_badges.push({icon: 'staff', color: 'staff-color'});
+    }
+    if (this.props.isDangerous) {
+      icon_badges.push({icon: 'dangerous', color: 'danger-color'});
+    }
+    if (this.props.acs) {
+      if (this.props.showMode) {
+        badges.push({name: this.props.acs.getMode(), key: 'mode'});
+      }
+      if (this.props.acs.isMuted()) {
+        icon_badges.push({icon: 'muted'});
+      }
+      if (!this.props.acs.isJoiner()) {
+        icon_badges.push({icon: 'banned'});
+      }
+    }
+
+    // The this.props.preview contains alreay shortened Drafty or string.
+    let preview;
+    if (this.props.previewIsVideoCall) {
+      preview = <><i className="material-icons">{this.props.previewIsResponse ? 'call_received' : 'call_made'}</i>
+                  <i className="material-icons">video_call</i></>;
+    } else if (typeof this.props.preview == 'string') {
+      preview = this.props.preview;
+    } else if (Drafty.isValid(this.props.preview)) {
+      preview = React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
+        {formatMessage: this.props.intl.formatMessage}));
+    } else if (this.props.preview) {
+      preview =
+        <><i className="material-icons gray">warning_amber</i> <i className="gray">
+          <FormattedMessage id="invalid_content"
+            defaultMessage="invalid content" description="Shown when the message is unreadable" /></i>
+        </>;
+    }
+
+    const icon = deliveryMarker(this.props.received);
+    const marker = icon ? <i className={'material-icons small space-right' +
+      (icon.color ? ' ' + icon.color : '')}>{icon.name}</i> : null;
+    const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
+
+    return (
+      <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
+        <div className="avatar-box">
+          <LetterTile
+            tinode={this.props.tinode}
+            avatar={avatar}
+            title={this.props.title}
+            topic={this.props.item}
+            deleted={this.props.deleted} />
+          {this.props.deleted ? <i className="deleted material-icons">cancel</i> :
+            this.props.showOnline ? <span className={online} /> :
+            (this.props.showCheckmark && this.props.selected) ?
+            <i className="checkmark material-icons">check_circle</i>
+            : null}
+        </div>
+        <div className="text-box">
+          <div><span className={titleClass}>{title}</span>
+            {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
+            <ContactBadges badges={icon_badges} />
+            {!this.props.deleted ? <UnreadBadge count={this.props.unread} /> : null}
+          </div>
+          {this.props.showMode ?
+            <span><ContactBadges badges={badges} /></span> :
+            this.props.small ? null : <div className="contact-comment">{marker}<span>{preview || this.props.comment || '\u00A0'}</span></div>}
+        </div>
+        {this.props.showContextMenu ?
+          <span className="menuTrigger">
+            <a href="#" onClick={this.handleContextClick}>
+              <i className="material-icons">expand_more</i>
+            </a>
+          </span> : null}
+      </li>
+    );
+  }
+};
+
+export default injectIntl(Contact);

src/widgets/context-menu.jsx

@@ -0,0 +1,481 @@
+// Context Menu: popup/dropdown menu.
+import React from 'react';
+import { injectIntl, defineMessages } from 'react-intl';
+
+import { REM_SIZE } from '../config.js';
+
+const messages = defineMessages({
+  info: {
+    id: 'menu_item_info',
+    defaultMessage: 'Info',
+    description: 'Show extended topic information'
+  },
+  clear_messages: {
+    id: 'menu_item_clear_messages',
+    defaultMessage: 'Clear messages',
+    description: 'Delete all messages'
+  },
+  clear_for_all: {
+    id: 'menu_item_clear_messages_for_all',
+    defaultMessage: 'Clear for All',
+    description: 'Delete all message(s) for all members'
+  },
+  delete: {
+    id: 'menu_item_delete',
+    defaultMessage: 'Delete',
+    description: 'Delete selected messages'
+  },
+  delete_for_all: {
+    id: 'menu_item_delete_for_all',
+    defaultMessage: 'Delete for All',
+    description: 'Delete selected message(s) for all members'
+  },
+  send_retry: {
+    id: 'menu_item_send_retry',
+    defaultMessage: 'Retry',
+    description: 'Retry sending message'
+  },
+  mute: {
+    id: 'menu_item_mute',
+    defaultMessage: 'Mute',
+    description: 'Turn off notifications'
+  },
+  unmute: {
+    id: 'menu_item_unmute',
+    defaultMessage: 'Unmute',
+    description: 'Turn notifications on'
+  },
+  reply: {
+    id: 'menu_item_reply',
+    defaultMessage: 'Reply',
+    description: 'Reply to message'
+  },
+  forward: {
+    id: 'menu_item_forward',
+    defaultMessage: 'Forward',
+    description: 'Forward message'
+  },
+  topic_delete: {
+    id: 'menu_item_delete_topic',
+    defaultMessage: 'Delete',
+    description: 'Delete entire topic'
+  },
+  topic_delete_warning: {
+    id: 'topic_delete_warning',
+    defaultMessage: 'Are you sure you want to delete this conversation? It cannot be undone.',
+    description: 'Alert warning when deleting entire topic'
+  },
+  delete_messages_warning: {
+    id: 'delete_messages_warning',
+    defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',
+    description: 'Alert dialog warning when hard-deleting all messages.'
+  },
+  unblock: {
+    id: 'menu_item_unblock',
+    defaultMessage: 'Unblock',
+    description: 'Unblock topic or user'
+  },
+  // Generic string suitable for either topic or user.
+  block: {
+    id: 'menu_item_block',
+    defaultMessage: 'Block',
+    description: 'Block topic or user'
+  },
+  topic_block_warning: {
+    id: 'topic_block_warning',
+    defaultMessage: 'Are you sure you want to block this conversation?',
+    description: 'Alert warning when blocking a topic.'
+  },
+  member_delete: {
+    id: 'menu_item_member_delete',
+    defaultMessage: 'Remove',
+    description: 'Remove user from topic'
+  },
+  archive: {
+    id: 'menu_item_archive_topic',
+    defaultMessage: 'Archive',
+    description: 'Move topic from the list of active chats to archive'
+  },
+  unarchive: {
+    id: 'menu_item_restore_topic',
+    defaultMessage: 'Restore',
+    description: 'Restore topic from archive'
+  },
+  edit_permissions: {
+    id: 'menu_item_edit_permissions',
+    defaultMessage: 'Edit permissions',
+    description: 'Menu item [Edit permissions]'
+  },
+  clear_messages_warning: {
+    id: 'clear_messages_warning',
+    defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',
+    description: 'Alert dialog warning when deleting all messages.'
+  },
+});
+
+class ContextMenu extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.selfRef = React.createRef();
+
+    const {formatMessage} = props.intl;
+
+    this.handlePageClick = this.handlePageClick.bind(this);
+    this.handleEscapeKey = this.handleEscapeKey.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+
+    // Preconfigured menu items.
+    this.MenuItems = {
+      'topic_info': {
+        id: 'topic_info',
+        title: formatMessage(messages.info),
+        handler: null
+      },
+      'messages_clear': {
+        id: 'messages_clear',
+        title: formatMessage(messages.clear_messages),
+        handler: (params, errorHandler) => {
+          return props.onShowAlert(
+            formatMessage(messages.clear_messages), // title
+            formatMessage(messages.clear_messages_warning), // content
+            (() => { this.deleteMessages(true, false, params, errorHandler); }), // onConfirm
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
+        }
+      },
+      'messages_clear_hard': {
+        id: 'messages_clear_hard',
+        title: formatMessage(messages.clear_for_all),
+        handler: (params, errorHandler) => {
+          return props.onShowAlert(
+            formatMessage(messages.clear_for_all), // title
+            formatMessage(message.delete_messages_warning), // content
+            (() => { return this.deleteMessages(true, true, params, errorHandler); }),
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
+        }
+      },
+      'message_delete': {
+        id: 'message_delete',
+        title: formatMessage(messages.delete),
+        handler: (params, errorHandler) => {
+          return this.deleteMessages(false, false, params, errorHandler);
+        }
+      },
+      'message_delete_hard': {
+        id: 'message_delete_hard',
+        title: formatMessage(messages.delete_for_all),
+        handler: (params, errorHandler) => {
+          return this.deleteMessages(false, true, params, errorHandler);
+        }
+      },
+      'menu_item_send_retry': {
+        id: 'menu_item_send_retry',
+        title: formatMessage(messages.send_retry),
+        handler: (params, errorHandler) => {
+          return this.retryMessage(params, errorHandler);
+        }
+      },
+      'menu_item_reply': {
+        id: 'menu_item_reply',
+        title: formatMessage(messages.reply),
+        handler: (params, errorHandler) => {
+          return this.replyToMessage(params, errorHandler);
+        }
+      },
+      'menu_item_forward': {
+        id: 'menu_item_forward',
+        title: formatMessage(messages.forward),
+        handler: () => {} /* the action is taken directly in tinode-web */
+      },
+      'topic_unmute': {
+        id: 'topic_unmute',
+        title: formatMessage(messages.unmute),
+        handler: this.topicPermissionSetter.bind(this, '+P')
+      },
+      'topic_mute': {
+        id: 'topic_mute',
+        title: formatMessage(messages.mute),
+        handler: this.topicPermissionSetter.bind(this, '-P')
+      },
+      'topic_unblock': {
+        id: 'topic_unblock',
+        title: formatMessage(messages.unblock),
+        handler: this.topicPermissionSetter.bind(this, '+JP')
+      },
+      'topic_block': {
+        id: 'topic_block',
+        title: formatMessage(messages.block),
+        handler: (params, errorHandler) => {
+          return props.onShowAlert(
+            formatMessage(messages.block), // title
+            formatMessage(messages.topic_block_warning), // content
+            (() => {
+              return this.topicPermissionSetter('-JP', params, errorHandler).then((ctrl) => {
+                this.props.onTopicRemoved(params.topicName);
+                return ctrl;
+              });
+            }),
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
+        }
+      },
+      'topic_delete': {
+        id: 'topic_delete',
+        title: formatMessage(messages.topic_delete),
+        handler: (params, errorHandler) => {
+          return props.onShowAlert(
+            formatMessage(messages.topic_delete), // title
+            formatMessage(messages.topic_delete_warning), // content
+            (() => {
+              const topic = this.props.tinode.getTopic(params.topicName);
+              if (!topic) {
+                console.warn("Topic not found: ", params.topicName);
+                return;
+              }
+              return topic.delTopic(true).catch((err) => {
+                if (errorHandler) {
+                  errorHandler(err.message, 'err');
+                }
+              });
+            }),
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
+        }
+      },
+      'topic_archive': {
+        id: 'topic_archive',
+        title: formatMessage(messages.archive),
+        handler: (params, errorHandler) => {
+          const topic = this.props.tinode.getTopic(params.topicName);
+          if (!topic) {
+            console.warn("Topic not found: ", params.topicName);
+            return;
+          }
+          return topic.archive(true).catch((err) => {
+            if (errorHandler) {
+              errorHandler(err.message, 'err');
+            }
+          });
+        }
+      },
+      'topic_restore': {
+        id: 'topic_restore',
+        title: formatMessage(messages.unarchive),
+        handler: (params, errorHandler) => {
+          const topic = this.props.tinode.getTopic(params.topicName);
+          if (!topic) {
+            console.warn("Topic not found: ", params.topicName);
+            return;
+          }
+          return topic.archive(false).catch((err) => {
+            if (errorHandler) {
+              errorHandler(err.message, 'err');
+            }
+          });
+        }
+      },
+      // menu_item_edit_permissions is defined elsewhere.
+      'permissions': {
+        id: 'permissions',
+        title: formatMessage(messages.edit_permissions),
+        handler: null
+      },
+      'member_delete': {
+        id: 'member_delete',
+        title: formatMessage(messages.member_delete),
+        handler: (params, errorHandler) => {
+          const topic = this.props.tinode.getTopic(params.topicName);
+          if (!topic || !params.user) {
+            console.warn("Topic or user not found: '" + params.topicName + "', '" + params.user + "'");
+            return;
+          }
+          return topic.delSubscription(params.user).catch((err) => {
+            if (errorHandler) {
+              errorHandler(err.message, 'err');
+            }
+          });
+        }
+      },
+      'member_mute': {
+        id: 'member_mute',
+        title: formatMessage(messages.mute),
+        handler: this.topicPermissionSetter.bind(this, '-P')
+      },
+      'member_unmute': {
+        id: 'member_unmute',
+        title: formatMessage(messages.unmute),
+        handler: this.topicPermissionSetter.bind(this, '+P')
+      },
+      'member_block': {
+        id: 'member_block',
+        title: formatMessage(messages.block),
+        handler: this.topicPermissionSetter.bind(this, '-JP')
+      },
+      'member_unblock': {
+        id: 'member_unblock',
+        title: formatMessage(messages.unblock),
+        handler: this.topicPermissionSetter.bind(this, '+JP')
+      },
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handlePageClick, false);
+    document.addEventListener('keyup', this.handleEscapeKey, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handlePageClick, false);
+    document.removeEventListener('keyup', this.handleEscapeKey, false);
+  }
+
+  handlePageClick(e) {
+    if (this.selfRef.current.contains(e.target)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.hide();
+  }
+
+  handleEscapeKey(e) {
+    if (e.keyCode === 27) {
+      this.props.hide();
+    }
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.hide();
+    let item = this.props.items[e.currentTarget.dataset.id];
+    if (typeof item == 'string') {
+      item = this.MenuItems[item];
+    }
+
+    if (!item) {
+      console.error("Invalid menu item ID", e.currentTarget.dataset.id);
+    } else {
+      this.props.onAction(
+        item.id,
+        item.handler(this.props.params, this.props.onError),
+        this.props.params);
+    }
+  }
+
+  // Menu Actions
+
+  deleteMessages(all, hard, params, errorHandler) {
+    const topic = this.props.tinode.getTopic(params.topicName);
+    if (!topic) {
+      console.warn("Topic not found: ", params.topicName);
+      return;
+    }
+
+    // We don't know if the message is still pending (e.g. attachment is being uploaded),
+    // so try cancelling first. No harm if we can't cancel.
+    // The message can be cancelled if transmission to the server has not
+    // started yet or if the message send has failed.
+    if (!all && topic.cancelSend(params.seq)) {
+      return;
+    }
+    // Can't cancel. Delete instead.
+    const promise = all ?
+      topic.delMessagesAll(hard) :
+      topic.delMessagesList([params.seq], hard);
+
+    return promise.catch((err) => {
+      if (errorHandler) {
+        errorHandler(err.message, 'err');
+      }
+    });
+  }
+
+  // Retries sending failed message.
+  retryMessage(params, errorHandler) {
+    const topic = this.props.tinode.getTopic(params.topicName);
+    // Remove the existing message entry.
+    if (!topic || !topic.flushMessage(params.seq)) {
+      return;
+    }
+    const msg = topic.createMessage(params.content, false);
+    return topic.publishDraft(msg).catch((err) => {
+      if (errorHandler) {
+        errorHandler(err.message, 'err');
+      }
+    });
+  }
+
+  // Function is used by context menu to set permissions.
+  topicPermissionSetter(mode, params, errorHandler) {
+    const topic = this.props.tinode.getTopic(params.topicName);
+    if (!topic) {
+      console.warn("Topic not found", params.topicName);
+      return;
+    }
+
+    let result = topic.updateMode(params.user, mode);
+    if (errorHandler) {
+      result = result.catch((err) => {
+        errorHandler(err.message, 'err');
+      });
+    }
+    return result;
+  }
+
+  replyToMessage(params, errorHandler) {
+    params.pickReply(params.seq, params.content, params.userFrom, params.userName, errorHandler);
+  }
+
+  render() {
+    const menu = [];
+    let count = 0;
+    this.props.items.map((item) => {
+      if (typeof item == 'string') {
+        item = this.MenuItems[item];
+      }
+      if (item && item.title) {
+        menu.push(
+          item.title == '-' ?
+            <li className="separator" key={count} />
+            :
+            <li onClick={this.handleClick} data-id={count} key={count}>{item.title}</li>
+        );
+      }
+      count++;
+    });
+
+    // Ensure that menu is inside the app-container.
+    const hSize = 12 * REM_SIZE;
+    const vSize = REM_SIZE * (0.7 + menu.length * 2.5);
+    const left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?
+        (this.props.clickAt.x - this.props.bounds.left - hSize) :
+        (this.props.clickAt.x - this.props.bounds.left);
+    const top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?
+        (this.props.clickAt.y - this.props.bounds.top - vSize) :
+        (this.props.clickAt.y - this.props.bounds.top);
+
+    const position = {
+      left: left + 'px',
+      top: top + 'px'
+    };
+
+    return (
+      <ul className="menu" style={position} ref={this.selfRef}>
+        {menu}
+      </ul>
+    );
+  }
+}
+
+export default injectIntl(ContextMenu);

src/widgets/cropper.jsx

@@ -0,0 +1,279 @@
+// Image zoom and crop widget.
+
+import React from 'react';
+
+const DEFAULT_MAX_ZOOM = 2.5;
+
+export default class Cropper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Coordinates of the top left corner of the image in container coordinates.
+      panX: 0,
+      panY: 0,
+      // Origin of the zoom in image coordinates.
+      originX: 0,
+      originY: 0,
+      // Zoom scale.
+      zoom: 1,
+      // Zoom min and max.
+      minZoom: 0,
+      maxZoom: DEFAULT_MAX_ZOOM,
+    };
+
+    // References to DOM elements for hooking up events and getting screen dimensions.
+    // The transparent element which captures mouse moves (moves with the image).
+    this.overlay = React.createRef();
+    // The image cutout window or view port (static).
+    this.cutout = React.createRef();
+    // Scaled and translated image preview.
+    this.preview = React.createRef();
+    // The main container (static).
+    this.boundingBox = React.createRef();
+
+    // The original image width and height before any scaling.
+    this.imageWidth = 0;
+    this.imageHeight = 0;
+
+    // Mouse position when dragging.
+    this.mouseX = 0
+    this.mouseY = 0;
+    // Length of the previous mouse move when dragging.
+    this.prevDistance = 0;
+
+    // Bounding rectangles of static elements.
+    this.cutoutRect = {};
+    this.bBoxRect = {};
+    // Center of the bounding box.
+    this.originX = 0;
+    this.originY = 0;
+
+    this.initScaling = this.initScaling.bind(this);
+    this.onZoom = this.onZoom.bind(this);
+    this.handleZoom = this.handleZoom.bind(this);
+    this.mouseDown = this.mouseDown.bind(this);
+    this.mouseUp = this.mouseUp.bind(this);
+    this.mouseMove = this.mouseMove.bind(this);
+    this.mouseTouch = this.mouseTouch.bind(this);
+    this.positionAll = this.positionAll.bind(this);
+    this.translate = this.translate.bind(this);
+  }
+
+  componentDidMount() {
+    this.overlay.current.addEventListener('mousedown', this.mouseDown, { passive: true });
+    this.overlay.current.addEventListener('touchstart', this.mouseDown, { passive: true });
+
+    // The rectangle position is in viewport coordinates.
+    this.bBoxRect = this.boundingBox.current.getBoundingClientRect();
+    // Center of the bounding box in container coordinates.
+    this.originX = this.bBoxRect.width / 2;
+    this.originY = this.bBoxRect.height / 2;
+
+    // The rectangle position is in viewport coordinates.
+    this.cutoutRect = this.cutout.current.getBoundingClientRect();
+  }
+
+  componentWillUnmount() {
+    this.overlay.current.removeEventListener('mousedown', this.mouseDown);
+    this.overlay.current.removeEventListener('touchstart', this.mouseDown);
+  }
+
+  // Position all elements.
+  positionAll(panX, panY, zoom) {
+    // Zoom origin in image preview coordinates.
+    this.setState({
+      panX: panX,
+      panY: panY,
+      zoom: zoom,
+      originX: this.originX - panX,
+      originY: this.originY - panY,
+    });
+
+    // Pass cut out coordinates to caller.
+    const left = (this.originX - panX) * zoom - this.originX;
+    const top = (this.originY - panY) * zoom - this.originY;
+    this.props.onChange(
+      (left + this.cutoutRect.left - this.bBoxRect.left) / zoom,
+      (top + this.cutoutRect.top - this.bBoxRect.top) / zoom,
+      this.cutoutRect.width / zoom,
+      this.cutoutRect.height / zoom,
+      zoom);
+  }
+
+  // Check if new location is within the limits.
+  static checkBound(currPan, img, cutout, delta) {
+    let nextDiff = Math.min(0, cutout[0] - img[0] - delta, img[1] - cutout[1] + delta);
+    if (nextDiff == 0) {
+      // Cutout is completely within the image.
+      currPan += delta;
+    } else if (Math.min(0, cutout[0] - img[0], img[1] - cutout[1]) < nextDiff) {
+      // Cutout is outside of the range but closer to the bound.
+      currPan += delta;
+    }
+    return currPan;
+  }
+
+  initScaling() {
+    // Initialize components.
+    const imgRect = this.preview.current.getBoundingClientRect();
+
+    this.imageWidth = imgRect.width;
+    this.imageHeight = imgRect.height;
+
+    // Set zoom slider's min and max values. Make sure the scaled image cannot be smaller than the cutout.
+    const minZoom = Math.max(this.cutoutRect.width / imgRect.width, this.cutoutRect.height / imgRect.height);
+    this.setState({
+      minZoom: minZoom,
+      maxZoom: Math.max(DEFAULT_MAX_ZOOM, minZoom + 1)
+    });
+
+    // Initial zoom level fills the bounding box at the smallest image dimension and overflows the largest, i.e. "fill" not "fit".
+    const zoom = Math.max(this.bBoxRect.width / imgRect.width, this.bBoxRect.height / imgRect.height);
+    // Converting from viewport coordinates to container, then panning.
+    const panX = this.cutoutRect.left - this.bBoxRect.left -
+      (imgRect.width - this.cutoutRect.width) / 2;
+    const panY = this.cutoutRect.top - this.bBoxRect.top -
+      (imgRect.height - this.cutoutRect.height) / 2;
+
+    this.positionAll(panX, panY, zoom);
+  }
+
+  onZoom(e) {
+    this.handleZoom(e.target.value);
+  }
+
+  handleZoom(zoom) {
+    let panX = this.state.panX;
+    let panY = this.state.panY;
+
+    // Ensure that the image at the new zoom is not outside of the cutout boundaries.
+    // Calculate image coordinates at the new zoom.
+    const imgLeft = this.originX - (this.originX - panX) * zoom;
+    const imgRight = imgLeft + this.imageWidth * zoom;
+    // Cutout in the same coordinates as the image.
+    const coLeft = this.cutoutRect.left - this.bBoxRect.left;
+    const coRight = coLeft + this.cutoutRect.width;
+    if (coLeft < imgLeft) {
+      panX -= imgLeft - coLeft;
+    } else if (coRight > imgRight) {
+      panX += coRight - imgRight;
+    }
+    const imgTop = this.originY - (this.originY - panY) * zoom;
+    const imgBottom = imgTop + this.imageHeight * zoom;
+    const coTop = this.cutoutRect.top - this.bBoxRect.top;
+    const coBottom = coTop + this.cutoutRect.height;
+    if (coTop < imgTop) {
+      panY -= imgTop - coTop;
+    } else if (coBottom > imgBottom) {
+      panY += coBottom - imgBottom;
+    }
+
+    this.positionAll(panX, panY, zoom);
+  }
+
+  mouseDown(e) {
+    if (e.touches) {
+      this.mouseX = e.touches[0].pageX;
+      this.mouseY = e.touches[0].pageY;
+    } else {
+      this.mouseX = e.pageX;
+      this.mouseY = e.pageY;
+    }
+
+    window.addEventListener('mousemove', this.mouseMove, { passive: false });
+    window.addEventListener('touchmove', this.mouseTouch, { passive: false });
+    window.addEventListener('mouseup', this.mouseUp, { passive: true });
+    window.addEventListener('touchend', this.mouseUp, { passive: true });
+    // Disable text selection in the entire document.
+    document.body.style['userSelect'] = 'none';
+  }
+
+  // Perform image panning.
+  translate(pageX, pageY) {
+    const dX = pageX - this.mouseX;
+    const dY = pageY - this.mouseY;
+
+    this.mouseX = pageX;
+    this.mouseY = pageY;
+
+    // Make sure the image is within the cutout window.
+    const imgRect = this.preview.current.getBoundingClientRect();
+
+    // Check if the new position is within the boundaries, and if not if it's closer to them.
+    let panX = Cropper.checkBound(this.state.panX, [imgRect.left, imgRect.right],
+      [this.cutoutRect.left, this.cutoutRect.right], dX);
+    let panY = Cropper.checkBound(this.state.panY, [imgRect.top, imgRect.bottom],
+      [this.cutoutRect.top, this.cutoutRect.bottom], dY);
+
+    this.positionAll(panX, panY, this.state.zoom);
+  }
+
+  // Image panning.
+  mouseMove(e) {
+    e.preventDefault();
+    this.translate(e.pageX, e.pageY);
+  }
+
+  mouseTouch(e) {
+    e.preventDefault();
+
+    if (e.touches.length == 1) {
+      this.translate(e.touches[0].pageX, e.touches[0].pageY);
+      return;
+    }
+
+    // Image zooming by pinching.
+    const [touch0, touch1] = e.touches;
+    const distance = Math.sqrt((touch0.pageX - touch1.pageX) * (touch0.pageX - touch1.pageX) +
+      (touch0.pageY - touch1.pageY) * (touch0.pageY - touch1.pageY));
+
+    if (!this.prevDistance) {
+        this.prevDistance = distance / this.state.zoom;
+    }
+
+    let scale = (distance / this.prevDistance);
+    this.handleZoom(Math.max(this.minZoom, Math.min(this.maxZoom, scale)));
+  }
+
+  mouseUp(e) {
+    window.removeEventListener('mousemove', this.mouseMove);
+    window.removeEventListener('touchmove', this.mouseTouch);
+    window.removeEventListener('mouseup', this.mouseUp);
+    window.removeEventListener('touchend', this.mouseUp);
+    // Re-enable text selection.
+    document.body.style['userSelect'] = '';
+
+    this.positionAll(this.state.panX, this.state.panY, this.state.zoom);
+  }
+
+  render() {
+    // transform3d: position and scale.
+    const t3d = `translate3d(${this.state.panX}px, ${this.state.panY}px, 0) scale(${this.state.zoom})`;
+    // transformOrigin: zoom origin.
+    const orig = `${this.state.originX}px ${this.state.originY}px`;
+
+    // Overlay position and size are exactly equal to the position and size of the transformed image
+    // except it uses different coordinates.
+    const overlay = {
+      top: `${this.originY - this.state.originY * this.state.zoom}px`,
+      left: `${this.originX - this.state.originX * this.state.zoom}px`,
+      width: `${this.imageWidth * this.state.zoom}px`,
+      height: `${this.imageHeight * this.state.zoom}px`
+    };
+    return (
+      <div className="cropper">
+        <div className="bounding-box" ref={this.boundingBox}>
+          <img src={this.props.source} className="preview" alt=""
+            style={{transform: t3d, transformOrigin: orig}} ref={this.preview} onLoad={this.initScaling} />
+          <div className="cutout circle" ref={this.cutout} />
+          <div className="overlay" style={overlay} ref={this.overlay} />
+        </div>
+        <div className="zoom-wrapper">
+          <input type="range" className="zoomer"
+            step="0.001" min={this.state.minZoom} max={this.state.maxZoom} value={this.state.zoom} onChange={this.onZoom} />
+        </div>
+      </div>
+    );
+  }
+}

src/widgets/doc-preview.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import SendMessage from '../widgets/send-message.jsx';
+
+import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
+
+// Get material icon name from mime type.
+function iconFromMime(mime) {
+  // If more icons become available in material icons, add them to this mime-to-icon mapping.
+  const mimeToIcon = {default: 'insert_drive_file', image: 'image', text: 'description', video: 'theaters'};
+
+  return mimeToIcon[mime] || mimeToIcon[(mime || '').split('/')[0]] || mimeToIcon['default'];
+}
+
+export default class DocPreview extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleSendDoc = this.handleSendDoc.bind(this);
+  }
+
+  handleSendDoc(caption) {
+    this.props.onClose();
+    this.props.onSendMessage(this.props.content.file);
+  }
+
+  render() {
+    if (!this.props.content) {
+      return null;
+    }
+    return (
+      <div id="image-preview">
+        <div id="image-preview-caption-panel">
+          <span>{this.props.content.name}</span>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
+        </div>
+        <div id="image-preview-container">
+          <div className="flex-column narrow">
+            <i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
+            <div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
+              description="Label for a file name" /></b> {shortenFileName(this.props.content.name, 24) || '-'}</div>
+            <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
+              description="Label for file content type (mime)" /></b> {this.props.content.type || 'application/octet-stream'}</div>
+            <div><b><FormattedMessage id="label_size" defaultMessage="Size:"
+              description="Label for file size" /></b> {bytesToHumanSize(this.props.content.size)}</div>
+          </div>
+        </div>
+        <SendMessage
+          noInput={true}
+          tinode={this.props.tinode}
+          reply={this.props.reply}
+          onCancelReply={this.props.onCancelReply}
+          onSendMessage={this.handleSendDoc}
+          onError={this.props.onError} />
+      </div>
+    );
+  }
+};

src/widgets/error-panel.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import MenuCancel from './menu-cancel.jsx';
+
+export default class ErrorPanel extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      show: false,
+    };
+
+    this.hide = this.hide.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.level !== this.props.level) {
+      this.setState({
+        show: !(!this.props.level)
+      });
+    }
+  }
+
+  hide() {
+    this.setState({show: false});
+    if (this.props.onClearError) {
+      this.props.onClearError();
+    }
+  }
+
+  render() {
+    const icons = {err: 'error', warn: 'warning', info: 'info'}
+    const level = icons[this.props.level] || '';
+    const className = 'info-box ' + level;
+    return (
+      <div className={className}>
+        <div className="icon"><i className="material-icons">{level}</i></div>
+        <span>
+          {this.props.text}
+          {this.props.action ?
+            <>
+              &#32;<a href="#"
+                style={{ whiteSpace: 'nowrap' }}
+                onClick={(e) => {e.preventDefault(); this.props.action();}}>
+                {this.props.actionText}
+              </a>
+            </>
+          : null}
+        </span>
+        <div className="cancel"><MenuCancel onCancel={this.hide} /></div>
+      </div>
+    );
+  }
+};

src/widgets/file-progress.jsx

@@ -0,0 +1,22 @@
+// File uload/download progress indicator with a cancel inside.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default class FileProgress extends React.PureComponent {
+  render() {
+    return (
+      <div className="uploader">
+        <div><span style={{width: (this.props.progress * 100) + "%"}}></span></div>
+        {this.props.progress < 0.999 ?
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancel();}}>
+            <i className="material-icons">close</i> <FormattedMessage id="action_cancel"
+              defaultMessage="cancel" description="Call to action [cancel]" />
+          </a>
+          :
+          <FormattedMessage id="upload_finishing" defaultMessage="finishing..."
+            description="Notification that upload is finishing" />
+        }
+      </div>
+    );
+  }
+}

src/widgets/forward-dialog.jsx

@@ -0,0 +1,88 @@
+// Forward Menu: message forwarding popup/dropdown menu.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import ContactList from './contact-list.jsx';
+import SearchContacts from './search-contacts.jsx';
+
+export default class ForwardDialog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      query: null
+    };
+
+    this.handleEscapeKey = this.handleEscapeKey.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+
+    this.handleSearchContacts = this.handleSearchContacts.bind(this);
+    this.handleContactSelected = this.handleContactSelected.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.onInitFind();
+  }
+
+  handleEscapeKey(e) {
+    if (e.keyCode === 27) {
+      // Not forwarding the message.
+      this.props.hide(false);
+    }
+  }
+
+  handleClose(e) {
+    e.preventDefault();
+    this.props.hide(false);
+  }
+
+  handleSearchContacts(query) {
+    this.setState({ query: Tinode.isNullValue(query) ? null : query });
+    this.props.onSearchContacts(query);
+  }
+
+  handleContactSelected(uid) {
+    this.props.onTopicSelected(uid);
+    this.props.hide(true);
+  }
+
+  render() {
+    let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
+    // Filter out contacts without a 'W' or 'J' permissions as well as the current topic.
+    contacts = contacts.filter((c) => {
+      return (c.name != this.props.topicSelected) && c.acs.isJoiner() && c.acs.isWriter();
+    });
+
+    return (
+      <div className="alert-container">
+        <div className="forward-dialog">
+          <div className="title with-control">
+            <div><FormattedMessage id="forward_to" defaultMessage="Forward to"
+              desription="Title of the contact selector dialog when forwarding a message" /></div>
+            <div><a href="#" onClick={this.handleClose}><i className="material-icons">close</i></a></div>
+          </div>
+          <FormattedMessage id="forward_to_search_placeholder" defaultMessage="Search contacts"
+            description="Contact search prompt when forwarding a message.">{
+            (search_placeholder) => <SearchContacts
+              placeholder={search_placeholder}
+              onSearchContacts={this.handleSearchContacts} />
+          }</FormattedMessage>
+          <FormattedMessage id="search_no_results" defaultMessage="Search returned no results"
+              description="Text shown in contacts view when query returned no results.">{
+            (not_found_placeholder) => <ContactList
+              tinode={this.props.tinode}
+              contacts={contacts}
+              myUserId={this.props.myUserId}
+              emptyListMessage={not_found_placeholder}
+              showOnline={false}
+              showUnread={false}
+              showContextMenu={false}
+              onTopicSelected={this.handleContactSelected} />
+          }</FormattedMessage>
+        </div>
+      </div>
+    );
+  }
+}

src/widgets/group-manager.jsx

@@ -0,0 +1,205 @@
+// GroupMembers: control for managing a list of group members.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import ChipInput from './chip-input.jsx';
+import ContactList from './contact-list.jsx';
+
+const messages = defineMessages({
+  no_contacts: {
+    id: 'no_contacts',
+    defaultMessage: 'You have no contacts :-(',
+    description: 'Shown in ContactsView when the user has no contacts'
+  },
+  contacts_not_found_short: {
+    id: 'contacts_not_found_short',
+    defaultMessage: "No contacts match ''{query}''",
+    description: 'Shown in ContactsView when search returned no results'
+  }
+});
+
+class GroupManager extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Array of topic members
+      members: props.members,
+      index: GroupManager.indexMembers(props.members),
+      staticMembers: GroupManager.staticMembers(props.members, props.keepInitialMembers, props.requiredMember),
+      contactFilter: '',
+      noContactsMessage: props.intl.formatMessage(messages.no_contacts),
+      selectedContacts: GroupManager.selectedContacts(props.members)
+    };
+
+    this.handleContactSelected = this.handleContactSelected.bind(this);
+    this.handleMemberRemoved = this.handleMemberRemoved.bind(this);
+    this.handleContactFilter = this.handleContactFilter.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  static indexMembers(members) {
+    let index = {};
+    members.map((m) => {
+      index[m.user] = {delta: 0, present: true}; // Delta: 0 unchanged, +1 added, -1 removed
+    });
+    return index;
+  }
+
+  static staticMembers(members, keepInitial, requiredMember) {
+    let stat = [];
+    members.map((m) => {
+      if (keepInitial || m.user == requiredMember) {
+        stat.push(m.user);
+      }
+    });
+    return stat;
+  }
+
+  static selectedContacts(members) {
+    let sel = [];
+    members.map((m) => {
+      sel.push(m.user);
+    });
+    return sel;
+  }
+
+  handleContactSelected(userId, index) {
+    let status = this.state.index[userId];
+    if (status) {
+      if (status.present) {
+        // Prevent duplicate members
+        return;
+      }
+      status.delta += 1;
+      status.present = true;
+    } else {
+      status = {delta: 1, present: true};
+    }
+
+    let m = this.state.members.slice();
+    m.push(this.props.contacts[index]);
+
+    const sel = GroupManager.selectedContacts(m);
+
+    const i = this.state.index;
+    i[userId] = status;
+
+    this.setState({members: m, index: i, selectedContacts: sel});
+  }
+
+  handleMemberRemoved(userId, index) {
+    const status = this.state.index[userId];
+    if (!status || !status.present) {
+      return;
+    }
+    status.present = false;
+    status.delta -= 1;
+
+    let m = this.state.members.slice();
+    m.splice(index, 1);
+
+    const sel = GroupManager.selectedContacts(m);
+
+    const i = this.state.index;
+    i[userId] = status;
+
+    this.setState({members: m, index: i, selectedContacts: sel});
+  }
+
+  handleContactFilter(val) {
+    const {formatMessage} = this.props.intl;
+    const msg = !val ?
+      formatMessage(messages.no_contacts) :
+      formatMessage(messages.contacts_not_found_short, {query: val});
+
+    this.setState({contactFilter: val, noContactsMessage: msg});
+  }
+
+  static doContactFiltering(filter, values) {
+    if (filter) {
+      for (let i=0; i<values.length; i++) {
+        if (values[i].indexOf(filter) >= 0) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return true;
+  }
+
+  handleSubmit() {
+    var instance = this;
+    var members = [];
+    var added = [];
+    var removed = [];
+
+    var keys = Object.keys(this.state.index);
+    keys.map(function(k) {
+      if (instance.state.index[k].present) {
+        members.push(k);
+      }
+
+      if (instance.state.index[k].delta > 0) {
+        added.push(k);
+      } else if (instance.state.index[k].delta < 0) {
+        removed.push(k);
+      }
+    });
+    this.props.onSubmit(members, added, removed);
+  }
+
+  handleCancel() {
+    this.props.onCancel();
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    return (
+      <div id="group-manager">
+        <div className="panel-form-row">
+          <label className="small">
+            <FormattedMessage id="title_group_members" defaultMessage="Group Members" description="Section title" />
+          </label>
+        </div>
+        <div className="panel-form-row">
+          <ChipInput
+            tinode={this.props.tinode}
+            chips={this.state.members}
+            staticMembers={this.state.staticMembers}
+            prompt="add members"
+            filterFunc={this.handleContactFilter}
+            onChipRemoved={this.handleMemberRemoved} />
+        </div>
+        <div className="panel-form-row">
+          <label className="small">
+            <FormattedMessage id="title_all_contacts" defaultMessage="All Contacts"
+              description="Section title [All Contacts]" />
+          </label>
+        </div>
+        <ContactList
+          tinode={this.props.tinode}
+          contacts={this.props.contacts}
+          myUserId={this.props.myUserId}
+          topicSelected={this.state.selectedContacts}
+          filter={this.state.contactFilter}
+          filterFunc={GroupManager.doContactFiltering}
+          emptyListMessage={this.state.noContactsMessage}
+          showOnline={false}
+          showUnread={false}
+          onTopicSelected={this.handleContactSelected} />
+        <div id="group-manager-buttons" className="panel-form-row">
+          <button className="secondary" onClick={this.handleCancel}>
+            <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
+          </button>
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default injectIntl(GroupManager);

src/widgets/group-subs.jsx

@@ -0,0 +1,44 @@
+// GroupSubs: a list of group subscribers currently online.
+// Show in the topic title bar
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { MAX_ONLINE_IN_TOPIC } from '../config.js'
+
+import LetterTile from './letter-tile.jsx';
+import { makeImageUrl } from '../lib/blob-helpers.js';
+
+export default class GroupSubs extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const usersOnline = [];
+    const totalCount = (this.props.subscribers || []).length;
+    const countToShow = Math.min(MAX_ONLINE_IN_TOPIC, totalCount);
+
+    (this.props.subscribers || []).some((sub) => {
+      usersOnline.push(
+        <div className="avatar-box" key={sub.user}>
+          <LetterTile
+            tinode={this.props.tinode}
+            topic={sub.user}
+            avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
+            title={sub.public ? sub.public.fn : null} />
+        </div>
+      );
+      return usersOnline.length == countToShow;
+    });
+
+    return (
+      <div id="topic-users">{usersOnline} {totalCount > countToShow ?
+        <span>
+          <FormattedMessage id="more_online_members" defaultMessage="+{overflow} more"
+              description="Shown in MessagesView title bar when the number of online subscribers exceeds MAX_ONLINE_IN_TOPIC"
+              values={{ overflow: (totalCount - countToShow) }} />
+        </span> : null}
+      </div>
+    );
+  }
+};

src/widgets/host-selector.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { KNOWN_HOSTS } from '../config.js';
+
+/* Combobox for selecting host name */
+
+export default class HostSelector extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hostName: props.serverAddress,
+      changed: false
+    };
+
+    this.handleHostNameChange = this.handleHostNameChange.bind(this);
+    this.handleEditingFinished = this.handleEditingFinished.bind(this);
+  }
+
+  handleHostNameChange(e) {
+    this.setState({hostName: e.target.value, changed: true});
+  }
+
+  handleEditingFinished() {
+    if (this.state.changed) {
+      this.setState({changed: false});
+      this.props.onServerAddressChange(this.state.hostName.trim());
+    }
+  }
+
+  render() {
+    var hostOptions = [];
+    for (let key in KNOWN_HOSTS) {
+      let item = KNOWN_HOSTS[key];
+      hostOptions.push(
+        <option key={item} value={item} />
+      );
+    }
+    return (
+      <div className="panel-form-row">
+        <input type="search" id="host-name" placeholder={this.props.hostName} list="known-hosts"
+          className="quoted" value={this.state.hostName} onChange={this.handleHostNameChange}
+          onBlur={this.handleEditingFinished} required />
+        <datalist id="known-hosts">
+          {hostOptions}
+        </datalist>
+      </div>
+    );
+  }
+}

src/widgets/image-preview.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import SendMessage from '../widgets/send-message.jsx';
+
+import { REM_SIZE } from '../config.js';
+import { fitImageSize } from '../lib/blob-helpers.js';
+import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
+
+export default class ImagePreview extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      width: 0,
+      height: 0
+    };
+
+    this.handleSendImage = this.handleSendImage.bind(this);
+  }
+
+  assignWidth(node) {
+    if (node && !this.state.width) {
+      const bounds = node.getBoundingClientRect();
+      this.setState({
+        width: bounds.width | 0,
+        height: bounds.height | 0
+      });
+    }
+  }
+
+  handleSendImage(caption) {
+    this.props.onClose();
+    this.props.onSendMessage(caption, this.props.content.blob);
+  }
+
+  render() {
+    if (!this.props.content) {
+      return null;
+    }
+
+    const dim = fitImageSize(this.props.content.width, this.props.content.height,
+      this.state.width, this.state.height, false);
+    const size = dim ? { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' } :
+      ((this.props.content.width > this.props.content.height) ? {width: '100%'} : {height: '100%'});
+    size.maxWidth = '100%';
+    size.maxHeight = '100%';
+
+    // Average font aspect ratio is ~0.5; File name takes 1/3 of the viewport width.
+    const maxlength = Math.max(((this.state.width / REM_SIZE / 1.5) | 0) - 2, 12);
+    const fname = shortenFileName(this.props.content.name, maxlength) || '-';
+
+    const width = this.props.content.width || '-';
+    const height = this.props.content.height || '-';
+    return (
+      <div id="image-preview">
+        <div id="image-preview-caption-panel">
+          {!this.props.onSendMessage ?
+            <a href={this.props.content.url} download={true}>
+              <i className="material-icons">file_download</i> <FormattedMessage
+                id="download_action" defaultMessage="download" description="Call to action [download]" />
+            </a>
+            :
+            <span>{fname}</span>
+          }
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
+        </div>
+        <div id="image-preview-container" ref={(node) => this.assignWidth(node)}>
+          <img src={this.props.content.url} style={size} className="image-preview" alt={this.props.content.name} />
+        </div>
+        {this.props.onSendMessage ?
+          <SendMessage
+            messagePrompt="add_image_caption"
+            acceptBlank={true}
+            tinode={this.props.tinode}
+            reply={this.props.reply}
+            onCancelReply={this.props.onCancelReply}
+            onSendMessage={this.handleSendImage}
+            onError={this.props.onError} />
+          :
+          <div id="image-preview-footer">
+            <div>
+              <div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
+                description="Label for a file name" /></b></div>
+              <div><span title={this.props.content.name}>{fname}</span></div>
+            </div>
+            <div>
+              <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
+                description="Label for file content type (mime)" /></b></div>
+              <div>{this.props.content.type}</div>
+            </div>
+            <div>
+              <div><b><FormattedMessage id="label_size" defaultMessage="Size:"
+                description="Label for file size" /></b></div>
+              <div>{width} &times; {height} px; {bytesToHumanSize(this.props.content.size)}</div>
+            </div>
+          </div>}
+      </div>
+    );
+  }
+};

src/widgets/in-place-edit.jsx

@@ -0,0 +1,125 @@
+// In-place text editor. Shows text with an icon which toggles it into an input field.
+import React from 'react';
+
+import VisiblePassword from './visible-password.jsx';
+
+export default class InPlaceEdit extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.selfRef = React.createRef();
+
+    this.state = {
+      active: props.active,
+      initialValue: props.value || '',
+      value: props.value || ''
+    };
+
+    this.handeTextChange = this.handeTextChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleStartEditing = this.handleStartEditing.bind(this);
+    this.handleEditingFinished = this.handleEditingFinished.bind(this);
+    this.handlePasswordFinished = this.handlePasswordFinished.bind(this);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // If text has changed while in read mode, update text and discard changes.
+    // Ignore update if in edit mode.
+    const newValue = this.props.value || '';
+    if (prevState.initialValue != newValue && !prevState.active) {
+      this.setState({
+        initialValue: newValue,
+        value: newValue
+      });
+    }
+  }
+
+  handeTextChange(e) {
+    this.setState({value: e.target.value || ''});
+  }
+
+  handleKeyDown(e) {
+    if (e.keyCode === 27) {
+      // Escape pressed
+      this.setState({value: this.props.value, active: false});
+    } else if (e.keyCode === 13) {
+      // Enter pressed
+      this.handleEditingFinished(e);
+    }
+  }
+
+   handleStartEditing() {
+    if (!this.props.readOnly) {
+      this.setState({active: true}, () => {
+        if (this.selfRef.current) {
+          this.selfRef.current.focus();
+        }
+      });
+    }
+  }
+
+  handleEditingFinished(event) {
+    const value = this.state.value.trim();
+    if (this.props.required && (!event.target.checkValidity() || !value)) {
+      // Empty input
+      this.setState({value: this.props.value, active: false});
+      return;
+    }
+    this.setState({active: false});
+    if ((value || this.props.value) && (value !== this.props.value)) {
+      this.props.onFinished(value);
+    }
+  }
+
+  handlePasswordFinished(value) {
+    this.setState({active: false});
+    if (value && (value !== this.props.value)) {
+      this.props.onFinished(value);
+    }
+  }
+
+  render() {
+    if (!this.state.active) {
+      let spanText = this.props.type == 'password' ? '••••••••' : this.state.value;
+      let spanClass = 'in-place-edit' + (this.props.readOnly ? ' disabled' : '');
+      if (!spanText) {
+        spanText = this.props.placeholder;
+        spanClass += ' placeholder';
+      }
+      if (!this.props.multiline || this.props.multiline == 1) {
+        spanClass += ' short';
+      }
+
+      return (<span className={spanClass} onClick={this.handleStartEditing}>
+        <span>{spanText}</span>
+      </span>);
+    }
+
+    let element;
+    const attr = {};
+    if (this.props.type == 'password') {
+      element = VisiblePassword;
+      attr.onFinished = this.handlePasswordFinished;
+    } else {
+      if (this.props.multiline > 1) {
+        element = 'textarea';
+        attr.rows = this.props.multiline;
+        attr.className = 'inplace-edit';
+      } else {
+        element = 'input';
+        attr.type = this.props.type || 'text';
+      }
+      attr.value = this.state.value;
+      attr.onChange = this.handeTextChange;
+      attr.onKeyDown = this.handleKeyDown;
+      attr.onBlur = this.handleEditingFinished;
+    }
+    attr.placeholder = this.props.placeholder;
+    attr.required = this.props.required ? 'required' : '';
+    attr.autoComplete = this.props.autoComplete;
+    attr.autoFocus = true;
+    attr.ref = this.selfRef;
+
+    return React.createElement(element, attr, null);
+  }
+};