cobrowse-agent-ui 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 0.0.2 (2023-03-15)
+
+
+### Features
+
+* French translations ([#5](https://github.com/cobrowseio/cobrowse-agent-ui/issues/5)) ([8a6edea](https://github.com/cobrowseio/cobrowse-agent-ui/commit/8a6edea6b5d35f9419684f888dcb7a92deec366d))
+* **i18n:** add localization support ([427b3aa](https://github.com/cobrowseio/cobrowse-agent-ui/commit/427b3aab9e31f7d03a221da7542a4fa2fc635637))
+* **i18n:** expose i18n as part of the main API ([66e88d9](https://github.com/cobrowseio/cobrowse-agent-ui/commit/66e88d970d2289f2993520c9e5ae5dbece4ff801))
+
+
+### Bug Fixes
+
+* dependency updates ([ccbbffa](https://github.com/cobrowseio/cobrowse-agent-ui/commit/ccbbffa9d123d67e813d40a35618887f855ef7d6))
+* fix a possible race condition ([#7](https://github.com/cobrowseio/cobrowse-agent-ui/issues/7)) ([7bb8639](https://github.com/cobrowseio/cobrowse-agent-ui/commit/7bb8639af544283756063ca71bcf62d267b1a635))

package/README.md

@@ -0,0 +1,39 @@
+# Cobrowse Agent UI
+
+## Localization
+
+### Change active locale at runtime
+
+The project that's using the agent-ui can dictate which locale to use in our components. Below is an example of how to
+achieve this from an app that's also using `i18next` to handle localization.
+
+```js
+// i18n.js
+
+import i18n from 'i18next';
+import { i18n as i18nAgentUI } from 'cobrowse-agent-ui';
+
+i18n.init({
+  // ...
+});
+
+i18n.on('languageChanged', (language) => {
+  i18nAgentUI.changeLanguage(language);
+});
+
+export default i18n;
+```
+
+### Adding new locales
+
+To add a new locale follow these steps:
+
+- Add a new entry to the `locales` array inside `i18next-parser.config.js`.
+- Run the `npm run i18n` command to generate a new locale file.
+- Import the new locale JSON file inside `src/i18n.js` and add it to the `resources` object (in the i18n instance
+  configuration) keyed by the locale key.
+- Import the relevant `moment` locale inside `src/i18n.js`.
+- Add a new entry to the `SUPPORTED_LOCALES` constant inside `src/i18n.js`.
+
+**Note:** ensure the locale code matches the ones provided by the
+[moment library](https://github.com/moment/moment/tree/develop/locale) as these are used to localize dates as well.

package/dist/CodeEntry.css

@@ -0,0 +1,50 @@
+
+.CodeEntry {
+    text-align: center;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+.CodeEntry input[type=number] {
+    font-size: 1em;
+    width: 1.6em;
+    height: 2em;
+    margin: 0.2em;
+    text-align: center;
+    transition: all 0.1s linear;
+    -moz-appearance:textfield;
+}
+
+.CodeEntry input:nth-of-type(3) {
+    margin-right: 0.6em
+}
+
+.CodeEntry input[type=number]::-webkit-outer-spin-button,
+.CodeEntry input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0;
+}
+
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-2px, 0, 0);
+  }
+
+  20%, 80% {
+    transform: translate3d(3px, 0, 0);
+  }
+
+  30%, 50%, 70% {
+    transform: translate3d(-7px, 0, 0);
+  }
+
+  40%, 60% {
+    transform: translate3d(7px, 0, 0);
+  }
+}
+
+.CodeEntry .invalid {
+    animation: shake 1s cubic-bezier(.16,.07,.19,.97) both;
+    transform: translate3d(0, 0, 0);
+}

package/dist/CodeEntry.js

@@ -0,0 +1,298 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./CodeEntry.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var CodeEntry = /*#__PURE__*/function (_Component) {
+  _inherits(CodeEntry, _Component);
+
+  var _super = _createSuper(CodeEntry);
+
+  function CodeEntry() {
+    var _this;
+
+    _classCallCheck(this, CodeEntry);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "getCode", function () {
+      return _this.state.code.join('').substr(0, 6);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setDigit", function (digit, value) {
+      if (digit > 5) return;
+      var code = _this.state.code;
+      code[digit] = value;
+
+      _this.setState({
+        code: _toConsumableArray(code)
+      });
+
+      _this.tryComplete();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "focus", function () {
+      _this.firstDigit.focus();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isEditable", function () {
+      return !_this.state.validating;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "tryComplete", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var code;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (_this.isEditable()) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              code = _this.getCode();
+
+              if (!(code.length !== 6)) {
+                _context.next = 5;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 5:
+              _this.setState({
+                validating: true
+              });
+
+              _context.prev = 6;
+              _context.next = 9;
+              return _this.props.onCode(code);
+
+            case 9:
+              if (!_context.sent) {
+                _context.next = 15;
+                break;
+              }
+
+              _this.setState({
+                validating: false
+              });
+
+              _this.setState({
+                code: ['', '', '', '', '', '']
+              });
+
+              if (_this.firstDigit) _this.firstDigit.focus();
+              _context.next = 17;
+              break;
+
+            case 15:
+              _this.setState({
+                validating: false
+              });
+
+              if (_this.lastDigit) _this.lastDigit.focus();
+
+            case 17:
+              _context.next = 24;
+              break;
+
+            case 19:
+              _context.prev = 19;
+              _context.t0 = _context["catch"](6);
+
+              _this.setState({
+                validating: false
+              });
+
+              if (_this.lastDigit) _this.lastDigit.focus();
+              throw _context.t0;
+
+            case 24:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[6, 19]]);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "handlePaste", function (event) {
+      if (!_this.isEditable()) return false;
+      var clipboardData = event.clipboardData || window.clipboardData;
+      var pastedData = clipboardData.getData('Text').toString();
+      if (!parseInt(pastedData, 10)) return event.preventDefault();
+      var digits = pastedData.split('');
+      var digit = parseInt(event.target.getAttribute('data-digit'), 10);
+      var target = event.target;
+      digits.forEach(function (value) {
+        _this.setDigit(digit, value);
+
+        digit += 1;
+        if (target) target = target.nextSibling;
+      });
+      if (target) target.focus();
+      return event.preventDefault();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (event) {
+      var value = event.target.value.substr(-1); // validate text on any change
+
+      var digit = parseInt(event.target.getAttribute('data-digit'), 10);
+
+      _this.setDigit(digit, value);
+
+      if (!event.repeat && /[0-9]/.test(value)) {
+        event.target.value = '';
+        var nextSibling = event.target.nextSibling;
+        if (nextSibling) nextSibling.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      // on backspace on empty node go back to previous
+      if (event.target.value.length === 0 && event.keyCode === 8) {
+        if (event.target.previousSibling) event.target.previousSibling.focus(); // left arrow moves to previous
+      } else if (event.keyCode === 37) {
+        if (event.target.previousSibling) event.target.previousSibling.focus();
+        return event.preventDefault(); // right arrow moves to next
+      } else if (event.keyCode === 39) {
+        if (event.target.nextSibling) event.target.nextSibling.focus();
+        return event.preventDefault(); // prevent non-numeric characters that might appear in numbers (e.g 'e')
+        // but allow backspaces too
+      } else if (!event.metaKey && !event.ctrlKey && event.keyCode !== 8 && event.keyCode !== 9 && !/^[0-9]{1}$/.test(event.key)) {
+        return event.preventDefault();
+      }
+
+      return null;
+    });
+
+    _this.state = {
+      validating: false,
+      code: ['', '', '', '', '', '']
+    };
+    return _this;
+  }
+
+  _createClass(CodeEntry, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var keyHandlers = {
+        onKeyDown: this.handleKeyDown,
+        onChange: this.handleOnChange,
+        onPaste: this.handlePaste,
+        disabled: !this.isEditable()
+      };
+      var invalid = !this.state.validating && this.getCode().length === 6;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "CodeEntry"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: invalid ? 'invalid' : ''
+      }, /*#__PURE__*/_react.default.createElement("input", _extends({
+        className: "bordered",
+        type: "number"
+      }, keyHandlers, {
+        value: this.state.code[0],
+        "data-digit": 0,
+        ref: function ref(c) {
+          _this2.firstDigit = c;
+        }
+      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+        className: "bordered",
+        type: "number"
+      }, keyHandlers, {
+        value: this.state.code[1],
+        "data-digit": 1
+      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+        className: "bordered",
+        type: "number"
+      }, keyHandlers, {
+        value: this.state.code[2],
+        "data-digit": 2
+      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+        className: "bordered",
+        type: "number"
+      }, keyHandlers, {
+        value: this.state.code[3],
+        "data-digit": 3
+      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+        className: "bordered",
+        type: "number"
+      }, keyHandlers, {
+        value: this.state.code[4],
+        "data-digit": 4
+      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+        className: "bordered",
+        type: "number"
+      }, keyHandlers, {
+        value: this.state.code[5],
+        "data-digit": 5,
+        ref: function ref(c) {
+          _this2.lastDigit = c;
+        }
+      }))));
+    }
+  }]);
+
+  return CodeEntry;
+}(_react.Component);
+
+exports.default = CodeEntry;

package/dist/Device.css

@@ -0,0 +1,31 @@
+
+.Device {
+    padding: 7px;
+    border-left: 5px solid transparent;
+    display: flex;
+    align-items: center;
+}
+
+.Device.online {
+    border-left: 5px solid #3cc56e;
+}
+
+.Device .last-seen {
+    font-size: 0.8em;
+    color: #777;
+    margin-top: 3px;
+    white-space: nowrap;
+}
+
+.Device .platform-icon {
+    font-size: 30px;
+    max-height: 30px;
+    margin: 0px 4px;
+    pointer-events: none;
+    flex: 0 0 auto;
+}
+
+.Device .details {
+    flex:1;
+    margin-left: 7px;
+}

package/dist/Device.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Device;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+var _PlatformIcon = _interopRequireDefault(require("./PlatformIcon.js"));
+
+var _deviceType = _interopRequireDefault(require("./deviceType.js"));
+
+require("./Device.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Device(props) {
+  function renderLastSeen() {
+    if (props.device.online) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "last-seen"
+      }, _i18n.default.t('Online'));
+    } else {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "last-seen"
+      }, _i18n.default.t('Last seen {{date, dateRelative}}', {
+        date: props.device.last_active
+      }));
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: props.style,
+    className: "Device ".concat(props.device.online ? 'online' : '', " ").concat(props.device.connectable ? 'connectable' : '')
+  }, /*#__PURE__*/_react.default.createElement(_PlatformIcon.default, {
+    platform: props.device.device.platform,
+    className: "platform-icon"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "details"
+  }, (0, _deviceType.default)(props.device.device), renderLastSeen()), props.children);
+}

package/dist/PlatformIcon.css

@@ -0,0 +1,6 @@
+
+.PlatformIcon {
+    width: 0.9em;
+    height: 0.9em;
+    vertical-align: middle;
+}

package/dist/PlatformIcon.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PlatformIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./PlatformIcon.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var IconWeb = function IconWeb(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M534.75 49.965c-8.945-8.945-19.694-13.422-32.261-13.422H45.681c-12.562 0-23.313 4.477-32.264 13.422C4.471 58.913 0 69.663 0 82.226v310.633c0 12.566 4.471 23.315 13.417 32.265 8.951 8.945 19.702 13.414 32.264 13.414h155.318c0 7.231-1.524 14.661-4.57 22.269-3.044 7.614-6.09 14.273-9.136 19.981-3.042 5.715-4.565 9.897-4.565 12.56 0 4.948 1.807 9.24 5.424 12.847 3.615 3.621 7.898 5.435 12.847 5.435h146.179c4.949 0 9.233-1.813 12.848-5.435 3.62-3.606 5.427-7.898 5.427-12.847 0-2.468-1.526-6.611-4.571-12.415-3.046-5.801-6.092-12.566-9.134-20.267-3.046-7.71-4.569-15.085-4.569-22.128h155.318c12.56 0 23.309-4.469 32.254-13.414 8.949-8.949 13.422-19.698 13.422-32.265V82.226c.003-12.563-4.474-23.313-13.423-32.261zm-23.123 269.803c0 2.475-.903 4.613-2.711 6.424-1.81 1.804-3.952 2.707-6.427 2.707H45.681c-2.473 0-4.615-.903-6.423-2.707-1.807-1.817-2.712-3.949-2.712-6.424V82.226c0-2.475.902-4.615 2.712-6.423 1.809-1.805 3.951-2.712 6.423-2.712h456.815c2.471 0 4.617.904 6.42 2.712 1.808 1.809 2.711 3.949 2.711 6.423v237.542z"
+  }));
+};
+
+IconWeb.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 548.172 548.172",
+  xmlSpace: "preserve"
+};
+
+var IconApple = function IconApple(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M40.738 112.119c-25.785 44.745-9.393 112.648 19.121 153.82C74.092 286.523 88.502 305 108.239 305c.372 0 .745-.007 1.127-.022 9.273-.37 15.974-3.225 22.453-5.984 7.274-3.1 14.797-6.305 26.597-6.305 11.226 0 18.39 3.101 25.318 6.099 6.828 2.954 13.861 6.01 24.253 5.815 22.232-.414 35.882-20.352 47.925-37.941 12.567-18.365 18.871-36.196 20.998-43.01l.086-.271a2.5 2.5 0 0 0-1.328-3.066c-.032-.015-.15-.064-.183-.078-3.915-1.601-38.257-16.836-38.618-58.36-.335-33.736 25.763-51.601 30.997-54.839l.244-.152a2.498 2.498 0 0 0 .71-3.511c-18.014-26.362-45.624-30.335-56.74-30.813a50.043 50.043 0 0 0-4.95-.242c-13.056 0-25.563 4.931-35.611 8.893-6.936 2.735-12.927 5.097-17.059 5.097-4.643 0-10.668-2.391-17.645-5.159-9.33-3.703-19.905-7.899-31.1-7.899-.267 0-.53.003-.789.008-26.03.383-50.626 15.275-64.186 38.859z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M212.101.002c-15.763.642-34.672 10.345-45.974 23.583-9.605 11.127-18.988 29.679-16.516 48.379a2.499 2.499 0 0 0 2.284 2.164c1.064.083 2.15.125 3.232.126 15.413 0 32.04-8.527 43.395-22.257 11.951-14.498 17.994-33.104 16.166-49.77a2.515 2.515 0 0 0-2.587-2.225z"
+  }));
+};
+
+IconApple.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 305 305",
+  xmlSpace: "preserve"
+};
+
+var IconAndroid = function IconAndroid(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M76.774 179.141c-9.529 0-17.614 3.323-24.26 9.969-6.646 6.646-9.97 14.621-9.97 23.929v142.914c0 9.541 3.323 17.619 9.97 24.266 6.646 6.646 14.731 9.97 24.26 9.97 9.522 0 17.558-3.323 24.101-9.97 6.53-6.646 9.804-14.725 9.804-24.266V213.039c0-9.309-3.323-17.283-9.97-23.929-6.647-6.646-14.627-9.969-23.935-9.969zM351.972 50.847 375.57 7.315c1.549-2.882.998-5.092-1.658-6.646-2.883-1.34-5.098-.661-6.646 1.989l-23.928 43.88c-21.055-9.309-43.324-13.972-66.807-13.972-23.488 0-45.759 4.664-66.806 13.972l-23.929-43.88c-1.555-2.65-3.77-3.323-6.646-1.989-2.662 1.561-3.213 3.764-1.658 6.646l23.599 43.532c-23.929 12.203-42.987 29.198-57.167 51.022-14.18 21.836-21.273 45.698-21.273 71.628h307.426c0-25.924-7.094-49.787-21.273-71.628-14.181-21.824-33.129-38.819-56.832-51.022zm-136.433 63.318c-2.552 2.558-5.6 3.831-9.143 3.831-3.55 0-6.536-1.273-8.972-3.831-2.436-2.546-3.654-5.582-3.654-9.137 0-3.543 1.218-6.585 3.654-9.137 2.436-2.546 5.429-3.819 8.972-3.819s6.591 1.273 9.143 3.819c2.546 2.558 3.825 5.594 3.825 9.137-.007 3.549-1.285 6.591-3.825 9.137zm140.086 0c-2.441 2.558-5.434 3.831-8.971 3.831-3.551 0-6.598-1.273-9.145-3.831-2.551-2.546-3.824-5.582-3.824-9.137 0-3.543 1.273-6.585 3.824-9.137 2.547-2.546 5.594-3.819 9.145-3.819 3.543 0 6.529 1.273 8.971 3.819 2.438 2.558 3.654 5.594 3.654 9.137 0 3.549-1.217 6.591-3.654 9.137zM123.971 406.804c0 10.202 3.543 18.838 10.63 25.925 7.093 7.087 15.729 10.63 25.924 10.63h24.596l.337 75.454c0 9.528 3.323 17.619 9.969 24.266s14.627 9.97 23.929 9.97c9.523 0 17.613-3.323 24.26-9.97s9.97-14.737 9.97-24.266v-75.447h45.864v75.447c0 9.528 3.322 17.619 9.969 24.266s14.73 9.97 24.26 9.97c9.523 0 17.613-3.323 24.26-9.97s9.969-14.737 9.969-24.266v-75.447h24.928c9.969 0 18.494-3.544 25.594-10.631 7.086-7.087 10.631-15.723 10.631-25.924V185.45h-305.09v221.354zM476.275 179.141c-9.309 0-17.283 3.274-23.93 9.804-6.646 6.542-9.969 14.578-9.969 24.094v142.914c0 9.541 3.322 17.619 9.969 24.266s14.627 9.97 23.93 9.97c9.523 0 17.613-3.323 24.26-9.97s9.969-14.725 9.969-24.266V213.039c0-9.517-3.322-17.552-9.969-24.094-6.647-6.53-14.737-9.804-24.26-9.804z"
+  }));
+};
+
+IconAndroid.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 553.048 553.048",
+  xmlSpace: "preserve"
+};
+
+var IconWindows = function IconWindows(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 80v160h224V52zM256 48v192h256V16zM256 272v192l256 32V272zM0 272v160l224 28V272z"
+  }));
+};
+
+IconWindows.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512",
+  xmlSpace: "preserve"
+};
+
+var IconDefault = function IconDefault(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    style: {
+      fill: "#020202"
+    },
+    d: "M206.759 332.99H39.225c-3.894 0-7.065-3.173-7.065-7.067V53.353c0-3.893 3.172-7.065 7.065-7.065h401.631c3.895 0 7.065 3.172 7.065 7.065v59.696c11.763 1.389 22.785 5.244 32.159 11.581V53.353c0-21.63-17.602-39.225-39.225-39.225H39.225C17.602 14.128 0 31.722 0 53.353v272.569c0 21.631 17.602 39.227 39.225 39.227h134.62v52.581h-21.229c-13.316 0-24.12 10.796-24.12 24.12 0 13.324 10.804 24.12 24.12 24.12h67.71c-8.463-11.902-13.566-26.35-13.566-42.037V332.99z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    style: {
+      fill: "#020202"
+    },
+    d: "M341.739 441.645v-34.742h-70.662V184.999c0-4.681 3.8-8.489 8.479-8.489h159.887c4.679 0 8.478 3.808 8.478 8.489v68.676h12.046c7.364 0 14.179 2.127 20.113 5.597v-74.273c0-22.417-18.23-40.648-40.638-40.648H279.556c-22.407 0-40.638 18.231-40.638 40.648v238.933c0 22.417 18.23 40.647 40.638 40.647h69.438c-4.428-6.359-7.255-15.22-7.255-22.934z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    style: {
+      fill: "#020202"
+    },
+    d: "M459.967 273.775h-77.996c-11.104 0-20.132 9.037-20.132 20.138v147.732c0 11.101 9.028 20.131 20.132 20.131h77.996c11.102 0 20.13-9.03 20.13-20.131V293.912c0-11.101-9.029-20.137-20.13-20.137zm-74.009 24.119h70.019v127.703h-70.019V297.894zm35.019 154.099c-2.215 0-4.193-.896-5.7-2.277-1.713-1.555-2.812-3.739-2.812-6.228 0-4.694 3.801-8.495 8.512-8.495 4.679 0 8.479 3.801 8.479 8.495 0 2.489-1.1 4.672-2.795 6.228-1.509 1.382-3.487 2.277-5.684 2.277z"
+  }));
+};
+
+IconDefault.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 480.097 480.097",
+  xmlSpace: "preserve"
+};
+
+function icon(platform) {
+  switch (platform) {
+    case 'web':
+      return IconWeb;
+
+    case 'ios':
+      return IconApple;
+
+    case 'macos':
+      return IconApple;
+
+    case 'android':
+      return IconAndroid;
+
+    case 'windows':
+      return IconWindows;
+
+    default:
+      return IconDefault;
+  }
+}
+
+function PlatformIcon(props) {
+  var Icon = icon(props.platform);
+  return /*#__PURE__*/_react.default.createElement(Icon, _extends({
+    fill: "currentColor"
+  }, props, {
+    className: "PlatformIcon ".concat(props.className || '')
+  }));
+}

package/dist/Session.css

@@ -0,0 +1,60 @@
+
+.Session {
+    padding: 7px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.Session .agent {
+    font-size: 0.8em;
+    margin-right: 7px;
+}
+
+.Session .details {
+    flex:1;
+}
+
+.Session .subdetails {
+    display: flex;
+    margin-top: 4px;
+    align-items: baseline;
+    color: #777;
+}
+
+.Session .recorded {
+    text-transform: uppercase;
+    font-size: 10px;
+    margin-left: 15px;
+}
+
+.Session .active {
+    color: white;
+    font-size: 11px;
+    font-weight: bold;
+    text-transform: uppercase;
+    background-color: #3cc56e;
+    padding: 1px 3px 1px 3px;
+    border-radius: 3px;
+    display: inline-block;
+}
+
+.Session .activated {
+    font-size: 0.8em;
+    white-space: nowrap;
+}
+
+.Session .recorded:before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+    background: red;
+    border-radius: 100%;
+    display: inline-block;
+}
+
+.Session .duration {
+    font-weight: bold;
+    font-size: 12px;
+}

package/dist/Session.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Session;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _deviceType = _interopRequireDefault(require("./deviceType.js"));
+
+var _Stopwatch = _interopRequireDefault(require("./Stopwatch.js"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+var _reactI18next = require("react-i18next");
+
+require("./Session.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Session(props) {
+  function openRecording() {
+    if (props.openRecording) props.openRecording(props.session);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: props.style,
+    onClick: props.onClick,
+    className: "Session ".concat(props.className || '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "details"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactI18next.Trans, {
+    i18n: _i18n.default
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "device-prefix"
+  }, "Connected to "), {
+    deviceType: (0, _deviceType.default)(props.session.device)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "subdetails"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "activated"
+  }, _i18n.default.t('{{date, dateRelative}}', {
+    date: props.session.activated
+  })), props.session.state === 'ended' && props.session.recorded ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "recorded",
+    onClick: openRecording
+  }, _i18n.default.t('Recorded')) : null)), props.session.state === 'ended' ? /*#__PURE__*/_react.default.createElement(_Stopwatch.default, {
+    className: "duration",
+    start: props.session.activated,
+    end: props.session.ended || new Date()
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "active"
+  }, _i18n.default.t('Active')), props.children);
+}

package/dist/SmartConnectButton.css

@@ -0,0 +1,20 @@
+
+.SmartConnectButton {
+    margin: 3px;
+    display: inline-block;
+    border: 1px solid #ddd;
+    background: #f3f3f3;
+    padding: 7px 14px;
+    cursor: not-allowed;
+    border-radius: 100px;
+    font-weight: 600;
+    color: #aaa;
+    font-size: 0.9em;
+}
+
+.SmartConnectButton.connectable {
+    border: 1px solid #3cc56e;
+    background: #3cc56e;
+    color: white;
+    cursor: pointer;
+}

package/dist/SmartConnectButton.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SmartConnectButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./SmartConnectButton.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function SmartConnectButton(props) {
+  function onClick() {
+    if (props.device.connectable && props.onClick) props.onClick(props.device);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "SmartConnectButton ".concat(props.device.online ? 'online' : '', " ").concat(props.device.connectable ? 'connectable' : ''),
+    onClick: onClick
+  }, props.label || 'Connect');
+}

package/dist/Stopwatch.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Stopwatch;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Stopwatch(props) {
+  var start = (0, _moment.default)(props.start || 0);
+  var end = (0, _moment.default)(props.end || Date.now());
+  var ms = (0, _moment.default)(end).diff(start);
+
+  var delta = _moment.default.duration(ms);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: props.style,
+    className: "Stopwatch ".concat(props.className || '')
+  }, delta.hours() > 0 ? /*#__PURE__*/_react.default.createElement("span", null, delta.hours(), /*#__PURE__*/_react.default.createElement("span", null, ":")) : null, /*#__PURE__*/_react.default.createElement("span", null, _moment.default.utc(ms).format('mm:ss')));
+}

package/dist/UserIcon.css

@@ -0,0 +1,16 @@
+
+.UserIcon {
+    color: white;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-size: cover;
+    padding: 6px;
+    border-radius: 50%;
+    width: 1.5em;
+    height: 1.5em;
+    border: 2px solid #ddd;
+    flex: 0 0 auto;
+    white-space: nowrap;
+}

package/dist/UserIcon.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./UserIcon.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function UserIcon(props) {
+  function initials() {
+    if (!props.user) return '';
+    if (!props.user.name) return '';
+    if (props.user.picture) return '';
+    return props.user.name.split(' ').map(function (i) {
+      return i.toUpperCase().charAt(0);
+    }).join('').substr(0, 2);
+  }
+
+  if (!props.user) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "UserIcon ".concat(props.className || ''),
+    title: props.user.name || null,
+    style: {
+      backgroundImage: props.user.picture ? "url(".concat(props.user.picture || '', ")") : undefined,
+      backgroundColor: props.user.colour
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, initials()));
+}

package/dist/deviceType.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = deviceType;
+
+var _uaParserJs = _interopRequireDefault(require("ua-parser-js"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function deviceType(_ref) {
+  var platform = _ref.platform,
+      device = _ref.device;
+
+  var translateDevice = function translateDevice(device) {
+    return _i18n.default.t('{{device}} Device', {
+      device: device
+    });
+  };
+
+  switch (platform) {
+    case 'web':
+      {
+        var ua = (0, _uaParserJs.default)(device);
+        return _i18n.default.t('{{browser}} on {{os}}', {
+          browser: ua.browser.name,
+          os: ua.os.name
+        });
+      }
+
+    case 'ios':
+      return translateDevice('iOS');
+
+    case 'android':
+      return translateDevice('Android');
+
+    case 'windows':
+      return translateDevice('Windows');
+
+    case 'macos':
+      return translateDevice('Mac OS');
+
+    default:
+      return platform;
+  }
+}

package/dist/i18n.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _i18next = require("i18next");
+
+var _reactI18next = require("react-i18next");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+require("moment/locale/es");
+
+require("moment/locale/fr");
+
+var _translation = _interopRequireDefault(require("./locales/en-us/translation.json"));
+
+var _translation2 = _interopRequireDefault(require("./locales/es/translation.json"));
+
+var _translation3 = _interopRequireDefault(require("./locales/fr/translation.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var englishUS = 'en-us';
+var spanish = 'es';
+var french = 'fr';
+var SUPPORTED_LOCALES = [englishUS, spanish, french];
+var i18n = (0, _i18next.createInstance)({
+  fallbackLng: englishUS,
+  debug: process.env.NODE_ENV === 'development',
+  lowerCaseLng: true,
+  interpolation: {
+    escapeValue: false,
+    // not needed for react as it escapes by default
+    format: function format(value, _format) {
+      if (_format === 'dateRelative' && (0, _moment.default)(value).isValid()) {
+        return (0, _moment.default)(value).fromNow();
+      }
+    }
+  },
+  resources: {
+    'en-us': {
+      translation: _translation.default
+    },
+    es: {
+      translation: _translation2.default
+    },
+    fr: {
+      translation: _translation3.default
+    }
+  }
+});
+i18n.use(_reactI18next.initReactI18next).init();
+i18n.on('languageChanged', function (language) {
+  // Fall back to US English if we don't currently support the selected language
+  if (SUPPORTED_LOCALES.indexOf(language) === -1) {
+    _moment.default.locale(englishUS);
+
+    return;
+  }
+
+  _moment.default.locale(language);
+});
+var _default = i18n;
+exports.default = _default;

package/dist/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CodeEntry", {
+  enumerable: true,
+  get: function get() {
+    return _CodeEntry.default;
+  }
+});
+Object.defineProperty(exports, "Device", {
+  enumerable: true,
+  get: function get() {
+    return _Device.default;
+  }
+});
+Object.defineProperty(exports, "PlatformIcon", {
+  enumerable: true,
+  get: function get() {
+    return _PlatformIcon.default;
+  }
+});
+Object.defineProperty(exports, "Session", {
+  enumerable: true,
+  get: function get() {
+    return _Session.default;
+  }
+});
+Object.defineProperty(exports, "SmartConnectButton", {
+  enumerable: true,
+  get: function get() {
+    return _SmartConnectButton.default;
+  }
+});
+Object.defineProperty(exports, "i18n", {
+  enumerable: true,
+  get: function get() {
+    return _i18n.default;
+  }
+});
+
+var _CodeEntry = _interopRequireDefault(require("./CodeEntry"));
+
+var _PlatformIcon = _interopRequireDefault(require("./PlatformIcon"));
+
+var _Device = _interopRequireDefault(require("./Device"));
+
+var _Session = _interopRequireDefault(require("./Session"));
+
+var _SmartConnectButton = _interopRequireDefault(require("./SmartConnectButton"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/locales/en-us/translation.json

@@ -0,0 +1,10 @@
+{
+  "Online": "Online",
+  "Last seen {{date, dateRelative}}": "Last seen {{date, dateRelative}}",
+  "{{device}} Device": "{{device}} Device",
+  "{{browser}} on {{os}}": "{{browser}} on {{os}}",
+  "<0>Connected to </0>{{deviceType}}": "<0>Connected to </0>{{deviceType}}",
+  "{{date, dateRelative}}": "{{date, dateRelative}}",
+  "Recorded": "Recorded",
+  "Active": "Active"
+}

package/dist/locales/es/translation.json

@@ -0,0 +1,10 @@
+{
+  "Online": "En línea",
+  "Last seen {{date, dateRelative}}": "Visto {{date, dateRelative}}",
+  "{{device}} Device": "Dispositivo {{device}}",
+  "{{browser}} on {{os}}": "{{browser}} en {{os}}",
+  "<0>Connected to </0>{{deviceType}}": "<0>Conectado a </0>{{deviceType}}",
+  "{{date, dateRelative}}": "{{date, dateRelative}}",
+  "Recorded": "Grabada",
+  "Active": "Activa"
+}

package/dist/locales/fr/translation.json

@@ -0,0 +1,10 @@
+{
+  "Online": "En ligne",
+  "Last seen {{date, dateRelative}}": "Vu {{date, dateRelative}}",
+  "{{device}} Device": "Appareil {{device}}",
+  "{{browser}} on {{os}}": "{{browser}} sur {{os}}",
+  "<0>Connected to </0>{{deviceType}}": "<0>Connecté à </0>{{deviceType}}",
+  "{{date, dateRelative}}": "{{date, dateRelative}}",
+  "Recorded": "Enregistré",
+  "Active": "Actif"
+}

package/i18next-parser.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  locales: ['en-us', 'es', 'fr'],
+  namespaceSeparator: false,
+  keySeparator: false,
+  useKeysAsDefaultValue: true,
+  verbose: true,
+  output: 'src/locales/$LOCALE/$NAMESPACE.json',
+  lexers: {
+    js: ['JsxLexer']
+  }
+}

package/icons/android.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 553.048 553.048" xml:space="preserve">
+<g>
+	<g>
+		<path d="M76.774,179.141c-9.529,0-17.614,3.323-24.26,9.969c-6.646,6.646-9.97,14.621-9.97,23.929v142.914
+			c0,9.541,3.323,17.619,9.97,24.266c6.646,6.646,14.731,9.97,24.26,9.97c9.522,0,17.558-3.323,24.101-9.97
+			c6.53-6.646,9.804-14.725,9.804-24.266V213.039c0-9.309-3.323-17.283-9.97-23.929C94.062,182.464,86.082,179.141,76.774,179.141z"
+			/>
+		<path d="M351.972,50.847L375.57,7.315c1.549-2.882,0.998-5.092-1.658-6.646c-2.883-1.34-5.098-0.661-6.646,1.989l-23.928,43.88
+			c-21.055-9.309-43.324-13.972-66.807-13.972c-23.488,0-45.759,4.664-66.806,13.972l-23.929-43.88
+			c-1.555-2.65-3.77-3.323-6.646-1.989c-2.662,1.561-3.213,3.764-1.658,6.646l23.599,43.532
+			c-23.929,12.203-42.987,29.198-57.167,51.022c-14.18,21.836-21.273,45.698-21.273,71.628h307.426
+			c0-25.924-7.094-49.787-21.273-71.628C394.623,80.045,375.675,63.05,351.972,50.847z M215.539,114.165
+			c-2.552,2.558-5.6,3.831-9.143,3.831c-3.55,0-6.536-1.273-8.972-3.831c-2.436-2.546-3.654-5.582-3.654-9.137
+			c0-3.543,1.218-6.585,3.654-9.137c2.436-2.546,5.429-3.819,8.972-3.819s6.591,1.273,9.143,3.819
+			c2.546,2.558,3.825,5.594,3.825,9.137C219.357,108.577,218.079,111.619,215.539,114.165z M355.625,114.165
+			c-2.441,2.558-5.434,3.831-8.971,3.831c-3.551,0-6.598-1.273-9.145-3.831c-2.551-2.546-3.824-5.582-3.824-9.137
+			c0-3.543,1.273-6.585,3.824-9.137c2.547-2.546,5.594-3.819,9.145-3.819c3.543,0,6.529,1.273,8.971,3.819
+			c2.438,2.558,3.654,5.594,3.654,9.137C359.279,108.577,358.062,111.619,355.625,114.165z"/>
+		<path d="M123.971,406.804c0,10.202,3.543,18.838,10.63,25.925c7.093,7.087,15.729,10.63,25.924,10.63h24.596l0.337,75.454
+			c0,9.528,3.323,17.619,9.969,24.266s14.627,9.97,23.929,9.97c9.523,0,17.613-3.323,24.26-9.97s9.97-14.737,9.97-24.266v-75.447
+			h45.864v75.447c0,9.528,3.322,17.619,9.969,24.266s14.73,9.97,24.26,9.97c9.523,0,17.613-3.323,24.26-9.97
+			s9.969-14.737,9.969-24.266v-75.447h24.928c9.969,0,18.494-3.544,25.594-10.631c7.086-7.087,10.631-15.723,10.631-25.924V185.45
+			H123.971V406.804z"/>
+		<path d="M476.275,179.141c-9.309,0-17.283,3.274-23.93,9.804c-6.646,6.542-9.969,14.578-9.969,24.094v142.914
+			c0,9.541,3.322,17.619,9.969,24.266s14.627,9.97,23.93,9.97c9.523,0,17.613-3.323,24.26-9.97s9.969-14.725,9.969-24.266V213.039
+			c0-9.517-3.322-17.552-9.969-24.094C493.888,182.415,485.798,179.141,476.275,179.141z"/>
+	</g>
+</g>
+</svg>

package/icons/apple.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 305 305" xml:space="preserve">
+<g>
+	<path d="M40.738,112.119c-25.785,44.745-9.393,112.648,19.121,153.82C74.092,286.523,88.502,305,108.239,305
+		c0.372,0,0.745-0.007,1.127-0.022c9.273-0.37,15.974-3.225,22.453-5.984c7.274-3.1,14.797-6.305,26.597-6.305
+		c11.226,0,18.39,3.101,25.318,6.099c6.828,2.954,13.861,6.01,24.253,5.815c22.232-0.414,35.882-20.352,47.925-37.941
+		c12.567-18.365,18.871-36.196,20.998-43.01l0.086-0.271c0.405-1.211-0.167-2.533-1.328-3.066c-0.032-0.015-0.15-0.064-0.183-0.078
+		c-3.915-1.601-38.257-16.836-38.618-58.36c-0.335-33.736,25.763-51.601,30.997-54.839l0.244-0.152
+		c0.567-0.365,0.962-0.944,1.096-1.606c0.134-0.661-0.006-1.349-0.386-1.905c-18.014-26.362-45.624-30.335-56.74-30.813
+		c-1.613-0.161-3.278-0.242-4.95-0.242c-13.056,0-25.563,4.931-35.611,8.893c-6.936,2.735-12.927,5.097-17.059,5.097
+		c-4.643,0-10.668-2.391-17.645-5.159c-9.33-3.703-19.905-7.899-31.1-7.899c-0.267,0-0.53,0.003-0.789,0.008
+		C78.894,73.643,54.298,88.535,40.738,112.119z"/>
+	<path d="M212.101,0.002c-15.763,0.642-34.672,10.345-45.974,23.583c-9.605,11.127-18.988,29.679-16.516,48.379
+		c0.155,1.17,1.107,2.073,2.284,2.164c1.064,0.083,2.15,0.125,3.232,0.126c15.413,0,32.04-8.527,43.395-22.257
+		c11.951-14.498,17.994-33.104,16.166-49.77C214.544,0.921,213.395-0.049,212.101,0.002z"/>
+</g>
+</svg>

package/icons/default.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 480.097 480.097" xml:space="preserve">
+<g>
+	<path style="fill:#020202;" d="M206.759,332.99H39.225c-3.894,0-7.065-3.173-7.065-7.067V53.353c0-3.893,3.172-7.065,7.065-7.065
+		h401.631c3.895,0,7.065,3.172,7.065,7.065v59.696c11.763,1.389,22.785,5.244,32.159,11.581V53.353
+		c0-21.63-17.602-39.225-39.225-39.225H39.225C17.602,14.128,0,31.722,0,53.353v272.569c0,21.631,17.602,39.227,39.225,39.227
+		h134.62v52.581h-21.229c-13.316,0-24.12,10.796-24.12,24.12c0,13.324,10.804,24.12,24.12,24.12h67.71
+		c-8.463-11.902-13.566-26.35-13.566-42.037V332.99z"/>
+	<path style="fill:#020202;" d="M341.739,441.645v-34.742h-70.662V184.999c0-4.681,3.8-8.489,8.479-8.489h159.887
+		c4.679,0,8.478,3.808,8.478,8.489v68.676h12.046c7.364,0,14.179,2.127,20.113,5.597v-74.273c0-22.417-18.23-40.648-40.638-40.648
+		H279.556c-22.407,0-40.638,18.231-40.638,40.648v238.933c0,22.417,18.23,40.647,40.638,40.647h69.438
+		C344.566,458.22,341.739,449.359,341.739,441.645z"/>
+	<path style="fill:#020202;" d="M459.967,273.775h-77.996c-11.104,0-20.132,9.037-20.132,20.138v147.732
+		c0,11.101,9.028,20.131,20.132,20.131h77.996c11.102,0,20.13-9.03,20.13-20.131V293.912
+		C480.097,282.811,471.068,273.775,459.967,273.775z M385.958,297.894h70.019v127.703h-70.019V297.894z M420.977,451.993
+		c-2.215,0-4.193-0.896-5.7-2.277c-1.713-1.555-2.812-3.739-2.812-6.228c0-4.694,3.801-8.495,8.512-8.495
+		c4.679,0,8.479,3.801,8.479,8.495c0,2.489-1.1,4.672-2.795,6.228C425.152,451.098,423.174,451.993,420.977,451.993z"/>
+</g>
+</svg>

package/icons/web.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 548.172 548.172" xml:space="preserve">
+<g>
+	<path d="M534.75,49.965c-8.945-8.945-19.694-13.422-32.261-13.422H45.681c-12.562,0-23.313,4.477-32.264,13.422
+		C4.471,58.913,0,69.663,0,82.226v310.633c0,12.566,4.471,23.315,13.417,32.265c8.951,8.945,19.702,13.414,32.264,13.414h155.318
+		c0,7.231-1.524,14.661-4.57,22.269c-3.044,7.614-6.09,14.273-9.136,19.981c-3.042,5.715-4.565,9.897-4.565,12.56
+		c0,4.948,1.807,9.24,5.424,12.847c3.615,3.621,7.898,5.435,12.847,5.435h146.179c4.949,0,9.233-1.813,12.848-5.435
+		c3.62-3.606,5.427-7.898,5.427-12.847c0-2.468-1.526-6.611-4.571-12.415c-3.046-5.801-6.092-12.566-9.134-20.267
+		c-3.046-7.71-4.569-15.085-4.569-22.128h155.318c12.56,0,23.309-4.469,32.254-13.414c8.949-8.949,13.422-19.698,13.422-32.265
+		V82.226C548.176,69.663,543.699,58.913,534.75,49.965z M511.627,319.768c0,2.475-0.903,4.613-2.711,6.424
+		c-1.81,1.804-3.952,2.707-6.427,2.707H45.681c-2.473,0-4.615-0.903-6.423-2.707c-1.807-1.817-2.712-3.949-2.712-6.424V82.226
+		c0-2.475,0.902-4.615,2.712-6.423c1.809-1.805,3.951-2.712,6.423-2.712h456.815c2.471,0,4.617,0.904,6.42,2.712
+		c1.808,1.809,2.711,3.949,2.711,6.423V319.768L511.627,319.768z"/>
+</g>
+</svg>

package/icons/windows.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<polygon points="0,80 0,240 224,240 224,52"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="256,48 256,240 512,240 512,16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="256,272 256,464 512,496 512,272"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="0,272 0,432 224,460 224,272"/>
+	</g>
+</g>
+</svg>

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "cobrowse-agent-ui",
+  "version": "0.0.2",
+  "scripts": {
+    "start": "babel src --out-dir dist --watch --copy-files",
+    "build": "rm -rf dist && babel src --out-dir dist --copy-files",
+    "prepare": "npm run build",
+    "i18n": "i18next 'src/**/*{.js,.jsx}'",
+    "lint": "standard"
+  },
+  "main": "dist/index.js",
+  "dependencies": {
+    "i18next": "^21.10.0",
+    "i18next-resources-to-backend": "^1.0.0",
+    "moment": "^2.29.4",
+    "react-i18next": "^11.18.6",
+    "ua-parser-js": "^1.0.33"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "eslint": "^8.23.1",
+    "eslint-plugin-react": "^7.31.8",
+    "i18next-parser": "^6.5.0",
+    "standard": "^17.0.0"
+  }
+}