use Chatbox in embeddable popup window

2020-02-01 00:30:58 -05:00 · 2020-02-01 00:30:58 -05:00 · ed68d08f9c
commit ed68d08f9c
parent 2e6151c048
12 changed files with 564 additions and 167 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -5251,7 +5251,6 @@
      "version": "6.10.0",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
      "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-      "dev": true,
      "requires": {
        "fast-deep-equal": "^2.0.1",
        "fast-json-stable-stringify": "^2.0.0",
@ -5277,6 +5276,11 @@
      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
      "dev": true
    },
+    "another-json": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/another-json/-/another-json-0.2.0.tgz",
+      "integrity": "sha1-tfQBnJc7bdXGUGotk0acttMq7tw="
+    },
    "ansi-align": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
@ -5888,7 +5892,6 @@
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "dev": true,
      "requires": {
        "safer-buffer": "~2.1.0"
      }
@ -5934,8 +5937,7 @@
    "assert-plus": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
    },
    "assign-symbols": {
      "version": "1.0.0",
@ -5991,8 +5993,7 @@
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
    },
    "atob": {
      "version": "2.1.2",
@ -6121,14 +6122,12 @@
    "aws-sign2": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
    },
    "aws4": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
-      "dev": true
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
    },
    "axobject-query": {
      "version": "2.0.2",
@ -7402,6 +7401,14 @@
        }
      }
    },
+    "base-x": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.7.tgz",
+      "integrity": "sha512-zAKJGuQPihXW22fkrfOclUUZXM2g92z5GzlSMHxhO6r6Qj+Nm0ccaGNBzDZojzwOMkpjAv4J0fOv1U4go+a4iw==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "base64-js": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@ -7424,7 +7431,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
      "requires": {
        "tweetnacl": "^0.14.3"
      }
@ -7638,6 +7644,11 @@
      "integrity": "sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==",
      "dev": true
    },
+    "browser-request": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/browser-request/-/browser-request-0.3.3.tgz",
+      "integrity": "sha1-ns5bWsqJopkyJC4Yv5M975h2zBc="
+    },
    "browser-resolve": {
      "version": "1.11.3",
      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
@ -7737,6 +7748,14 @@
        "node-releases": "^1.1.23"
      }
    },
+    "bs58": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
+      "integrity": "sha1-vhYedsNU9veIrkBx9j806MTwpCo=",
+      "requires": {
+        "base-x": "^3.0.2"
+      }
+    },
    "bser": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.0.tgz",
@ -7970,8 +7989,7 @@
    "caseless": {
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
    },
    "chalk": {
      "version": "1.1.3",
@ -8445,7 +8463,6 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
      "requires": {
        "delayed-stream": "~1.0.0"
      }
@ -8605,8 +8622,7 @@
    "content-type": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-      "dev": true
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
    },
    "convert-source-map": {
      "version": "1.6.0",
@ -8827,8 +8843,7 @@
    "core-util-is": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
    },
    "corejs-upgrade-webpack-plugin": {
      "version": "2.2.0",
@ -9202,7 +9217,6 @@
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
      "requires": {
        "assert-plus": "^1.0.0"
      }
@ -9374,8 +9388,7 @@
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
    },
    "delegate": {
      "version": "3.2.0",
@ -9674,7 +9687,6 @@
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
      "requires": {
        "jsbn": "~0.1.0",
        "safer-buffer": "^2.1.0"
@ -11192,8 +11204,7 @@
    "extend": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
    },
    "extend-shallow": {
      "version": "3.0.2",
@ -11301,14 +11312,12 @@
    "extsprintf": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
    },
    "fast-deep-equal": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
    },
    "fast-glob": {
      "version": "2.2.7",
@ -11327,8 +11336,7 @@
    "fast-json-stable-stringify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
    },
    "fast-levenshtein": {
      "version": "2.0.6",
@ -11676,8 +11684,7 @@
    "forever-agent": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
    },
    "fork-ts-checker-webpack-plugin": {
      "version": "1.5.0",
@ -11736,7 +11743,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
      "requires": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.6",
@ -12542,7 +12548,6 @@
      "version": "0.1.7",
      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
      "requires": {
        "assert-plus": "^1.0.0"
      }
@ -12775,14 +12780,12 @@
    "har-schema": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
    },
    "har-validator": {
      "version": "5.1.3",
      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "dev": true,
      "requires": {
        "ajv": "^6.5.5",
        "har-schema": "^2.0.0"
@ -13474,7 +13477,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
      "requires": {
        "assert-plus": "^1.0.0",
        "jsprim": "^1.2.2",
@ -14076,8 +14078,7 @@
    "is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
    },
    "is-utf8": {
      "version": "0.2.1",
@ -14134,8 +14135,7 @@
    "isstream": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
    },
    "istanbul-lib-coverage": {
      "version": "2.0.5",
@ -15574,8 +15574,7 @@
    "jsbn": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
    },
    "jsdom": {
      "version": "11.12.0",
@ -15640,14 +15639,12 @@
    "json-schema": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
    },
    "json-schema-traverse": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
    },
    "json-stable-stringify-without-jsonify": {
      "version": "1.0.1",
@ -15658,8 +15655,7 @@
    "json-stringify-safe": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
    },
    "json3": {
      "version": "3.3.3",
@ -15697,7 +15693,6 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
      "requires": {
        "assert-plus": "1.0.0",
        "extsprintf": "1.3.0",
@ -16167,8 +16162,7 @@
    "loglevel": {
      "version": "1.6.6",
      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.6.tgz",
-      "integrity": "sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==",
-      "dev": true
+      "integrity": "sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ=="
    },
    "loglevelnext": {
      "version": "3.0.1",
@ -16299,6 +16293,32 @@
        "unquote": "^1.1.0"
      }
    },
+    "matrix-js-sdk": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-4.0.0.tgz",
+      "integrity": "sha512-Xbe36xL443qtEBH4xk0k39JabolqZfloK7fwYGMb/PgWO26VOzvw94XWahnIr5w83oxBAF9nFmP+7EnPG6IHnA==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "another-json": "^0.2.0",
+        "browser-request": "^0.3.3",
+        "bs58": "^4.0.1",
+        "content-type": "^1.0.2",
+        "loglevel": "^1.6.4",
+        "qs": "^6.5.2",
+        "request": "^2.88.0",
+        "unhomoglyph": "^1.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
    "md5": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz",
@ -16526,14 +16546,12 @@
    "mime-db": {
      "version": "1.40.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
-      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
-      "dev": true
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
    },
    "mime-types": {
      "version": "2.1.24",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
-      "dev": true,
      "requires": {
        "mime-db": "1.40.0"
      }
@ -17148,8 +17166,7 @@
    "oauth-sign": {
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
    },
    "object-assign": {
      "version": "4.1.1",
@ -17775,8 +17792,7 @@
    "performance-now": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
    "picomatch": {
      "version": "2.0.7",
@ -18429,8 +18445,7 @@
    "psl": {
      "version": "1.1.31",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.31.tgz",
-      "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==",
-      "dev": true
+      "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw=="
    },
    "public-encrypt": {
      "version": "4.0.3",
@ -18482,8 +18497,7 @@
    "punycode": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
    },
    "q": {
      "version": "1.5.1",
@ -18494,8 +18508,7 @@
    "qs": {
      "version": "6.5.2",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
    },
    "query-string": {
      "version": "4.3.4",
@ -19727,7 +19740,6 @@
      "version": "2.88.0",
      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
-      "dev": true,
      "requires": {
        "aws-sign2": "~0.7.0",
        "aws4": "^1.8.0",
@ -19754,14 +19766,12 @@
        "punycode": {
          "version": "1.4.1",
          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
        },
        "tough-cookie": {
          "version": "2.4.3",
          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
          "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
-          "dev": true,
          "requires": {
            "psl": "^1.1.24",
            "punycode": "^1.4.1"
@ -20009,8 +20019,7 @@
    "safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
    "safe-regex": {
      "version": "1.1.0",
@ -20024,8 +20033,7 @@
    "safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "sane": {
      "version": "4.1.0",
@ -20898,7 +20906,6 @@
      "version": "1.16.1",
      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "dev": true,
      "requires": {
        "asn1": "~0.2.3",
        "assert-plus": "^1.0.0",
@ -22176,7 +22183,6 @@
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
      "requires": {
        "safe-buffer": "^5.0.1"
      }
@ -22184,8 +22190,7 @@
    "tweetnacl": {
      "version": "0.14.5",
      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
    },
    "type-check": {
      "version": "0.3.2",
@ -22235,6 +22240,7 @@
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz",
      "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==",
      "dev": true,
+      "optional": true,
      "requires": {
        "commander": "~2.20.0",
        "source-map": "~0.6.1"
@ -22255,6 +22261,11 @@
      "integrity": "sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==",
      "dev": true
    },
+    "unhomoglyph": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/unhomoglyph/-/unhomoglyph-1.0.3.tgz",
+      "integrity": "sha512-PC/OAHE8aiTK0Gfmy0PxOlePazRn+BeCM1r4kFtkHgEnkJZgJoI7yD2yUEjsfSdLXKU1FSt/EcIZvNoKazYUTw=="
+    },
    "unicode-canonical-property-names-ecmascript": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@ -22422,7 +22433,6 @@
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
      "requires": {
        "punycode": "^2.1.0"
      }
@ -22554,8 +22564,22 @@
    "uuid": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
-      "dev": true
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+    },
+    "uuidv4": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.0.2.tgz",
+      "integrity": "sha512-SHfZgAT2pz0TAXtclFMsTrT55U1/HTLg7xSZYDhX953sdcVIJ9lanIs8/BFSjxGmg4cEjc8P7HXPK7EPOD/nfA==",
+      "requires": {
+        "uuid": "3.4.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+        }
+      }
    },
    "v8-compile-cache": {
      "version": "2.0.3",
@ -22589,7 +22613,6 @@
      "version": "1.10.0",
      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
      "requires": {
        "assert-plus": "^1.0.0",
        "core-util-is": "1.0.2",
--- a/package.json
+++ b/package.json
@ -114,9 +114,11 @@
    "webpack-serve": "3.2.0"
  },
  "dependencies": {
+    "matrix-js-sdk": "^4.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
-    "react-transition-group": "^4.0.0"
+    "react-transition-group": "^4.0.0",
+    "uuidv4": "^6.0.2"
  }
 }
--- a/public/blank.html
+++ b/public/blank.html
@ -5,12 +5,10 @@
  </head>
  <body>
    <p>Note: Widget rendered in bottom-right of this screen.</p>
-    
+
    <script src="./widget.js"></script>
    <script>
-      EmbeddableWidget.mount({
-        bodyText: 'Body'
-      });
+      EmbeddableWidget.mount();
    </script>
  </body>
 </html>
--- a/public/index.html
+++ b/public/index.html
@ -1,20 +1,14 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <title>Embeddable Widget documentation</title>
+    <title>Embeddable Chatbox Demo</title>
  </head>
  <body>
-    <h1>Embeddable Widget documentation</h1>
-    <ul>
-      <li><a href="./blank.html">Widget on a blank page</a></li>
-      <li><a href="./widget.js">Latest version of the widget</a></li>
-      <li><a id="bookmarklet">Bookmarklet (Bookmark it for easy use)</a></li>
-      <li><a href="./bookmarklet.js">Bookmarklet Code</a></li>
-      <script>
-       var bookmarklet = "var s= document.createElement('script'); s.setAttribute('src', '"+window.location.href+"bookmarklet.js'); s.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(s);"
-       bookmarklet = '(function(){'+ bookmarklet +'})();'
-       document.querySelector('a#bookmarklet').setAttribute("href", "javascript:" + encodeURIComponent(bookmarklet));
-      </script>
-    </ul>
+    <p style="font-family:sans-serif; padding: 3rem 5rem;">Look down!</p>
+
+    <script src="./widget.js"></script>
+    <script>
+      EmbeddableWidget.mount();
+    </script>
  </body>
 </html>
--- a/src/components/_chat.scss
+++ b/src/components/_chat.scss
@ -0,0 +1,100 @@
+
+@import url('https://fonts.googleapis.com/css?family=Assistant&display=swap');
+
+
+#ocrcc-chatbox {
+  font-family: $theme-font;
+  display: flex;
+  flex-direction: column;
+  min-height: 50vh;
+  outline: 1px solid $theme-color;
+  outline-offset: -1px;
+
+  .message-window {
+    background-color: $light-color;
+    flex: 1 0 auto;
+    padding: 0.5rem;
+    height: 300px;
+    max-height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .message {
+    .sender {
+      font-weight: bold;
+      color: $theme-color;
+    }
+
+    .text {
+      padding: 0.5rem 0.75rem;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      width: fit-content;
+    }
+
+    &.from-me {
+      display: flex;
+      justify-content: flex-end;
+
+      .text {
+        background-color: $theme-color;
+        color: $white;
+        border-radius: 15px 15px 0 15px;
+        margin-left: 10%;
+      }
+    }
+
+    &.from-support {
+      display: flex;
+      justify-content: flex-start;
+
+      .text {
+        background-color: $white;
+        color: $dark-color;
+        border: 1px solid $theme-color;
+        border-radius: 15px 15px 15px 0;
+        margin-right: 10%;
+      }
+    }
+  }
+
+  .input-window {
+    flex: 0 0 auto;
+
+    form {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0;
+    }
+
+    input[type="text"] {
+      font-size: 1rem;
+      padding: 0.5rem 1rem;
+      border: none;
+      flex: 1 0 auto;
+      border: none;
+      outline: 1px solid $theme-color;
+      outline-offset: -1px;
+      color: $dark-color;
+      font-family: $theme-font;
+
+      &:focus {
+        border: none;
+      }
+    }
+
+    input[type="submit"] {
+      background-color: $theme-color;
+      height: 100%;
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+      color: $white;
+      font-weight: bold;
+      border: none;
+      font-family: $theme-font;
+      cursor: pointer;
+    }
+  }
+}
--- a/src/components/_loader.scss
+++ b/src/components/_loader.scss
@ -0,0 +1,48 @@
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation: load7 1.8s infinite ease-in-out;
+  animation: load7 1.8s infinite ease-in-out;
+}
+.loader {
+  color: $teal;  /*purple*/
+  font-size: 10px;
+  margin: 1rem auto;
+  margin-bottom: 2rem;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+.loader:before {
+  left: -3.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.loader:after {
+  left: 3.5em;
+}
+@keyframes load7 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em;
+  }
+  40% {
+    box-shadow: 0 2.5em 0 0;
+  }
+}
--- a/src/components/_variables.scss
+++ b/src/components/_variables.scss
@ -0,0 +1,8 @@
+$light-color: #FFF8F0;
+$dark-color: #22333B;
+$yellow: #FFFACD;
+$teal: #008080;
+$white: #ffffff;
+$highlight-color: $yellow;
+$theme-color: $teal;
+$theme-font: 'Assistant', 'Helvetica', sans-serif;
--- a/src/components/chatbox.jsx
+++ b/src/components/chatbox.jsx
@ -0,0 +1,203 @@
+import React from "react"
+import PropTypes from "prop-types"
+import * as sdk from "matrix-js-sdk";
+import {uuid} from "uuidv4"
+
+import Message from "./message";
+
+const MATRIX_SERVER_ADDRESS = "https://matrix.rhok.space"
+const FACILITATOR_USERNAME = "@anonymouscat:rhok.space"
+const CHATROOM_NAME = "Support Chat"
+
+
+class ChatBox extends React.Component {
+  constructor(props) {
+    super(props)
+    const client = sdk.createClient(MATRIX_SERVER_ADDRESS)
+    this.state = {
+      client: client,
+      ready: false,
+      rooms: { chunk: [] },
+      access_token: null,
+      user_id: null,
+      messages: [],
+      inputValue: "",
+    }
+    this.chatboxInput = React.createRef();
+  }
+
+  leaveRoom = () => {
+    if (this.state.room_id) {
+      this.state.client.leave(this.state.room_id).then(data => {
+        console.log("Left room", data)
+      })
+    }
+  }
+
+  createRoom = () => {
+    const currentDate = new Date()
+    const chatDate = currentDate.toLocaleDateString()
+    const chatTime = currentDate.toLocaleTimeString()
+    return this.state.client.createRoom({
+      room_alias_name: `private-support-chat-${uuid()}`,
+      invite: [FACILITATOR_USERNAME], // TODO: create bot user to add
+      visibility: 'private',
+      name: `${chatDate} - ${CHATROOM_NAME} - started at ${chatTime}`
+    }).then(data => {
+      this.setState({ room_id: data.room_id })
+    })
+  }
+
+  sendMessage = () => {
+    const content = {
+      "body": this.state.inputValue,
+      "msgtype": "m.text"
+    };
+
+    this.state.client.sendEvent(this.state.room_id, "m.room.message", content, "").then((res) => {
+      this.setState({ inputValue: "" })
+      this.chatboxInput.current.focus()
+    }).catch((err) => {
+      console.log(err);
+    })
+  }
+
+  componentDidMount() {
+    // empty registration request to get session
+    this.state.client.registerRequest({}).then(data => {
+      console.log("Empty registration request to get session", data)
+    }).catch(err => {
+      // actual registration request with randomly generated username and password
+      const username = uuid()
+      const password = uuid()
+      this.state.client.registerRequest({
+        auth: {session: err.data.session, type: "m.login.dummy"},
+        inhibit_login: false,
+        password: password,
+        username: username,
+        x_show_msisdn: true,
+      }).then(data => {
+        console.log("Registered user", data)
+        this.setState({
+          access_token: data.access_token,
+          user_id: data.user_id,
+          username: username,
+          client: sdk.createClient({
+            baseUrl: MATRIX_SERVER_ADDRESS,
+            accessToken: data.access_token,
+            userId: data.user_id
+          })
+        })
+        this.state.client.setDisplayName("Anonymous")
+      }).catch(err => {
+        console.log("Registration error", err)
+      })
+    })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.client !== this.state.client) {
+      this.state.client.startClient()
+
+      this.state.client.once('sync', (state, prevState, res) => {
+        if (state === "PREPARED") {
+          this.setState({ ready: true })
+        }
+      });
+
+      this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => {
+        if (event.getType() === "m.room.message") {
+          const messages = [...this.state.messages]
+          messages.push(event)
+          this.setState({ messages })
+        }
+      });
+    }
+
+    if (prevProps.status !== "entered" && this.props.status === "entered") {
+      this.chatboxInput.current.focus()
+    }
+  }
+
+  componentWillUnmount() {
+    this.leaveRoom();
+  }
+
+  handleInputChange = e => {
+    this.setState({ inputValue: e.currentTarget.value })
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+    if (!Boolean(this.state.inputValue)) return null;
+
+    if (!this.state.room_id) {
+      return this.createRoom().then(this.sendMessage)
+    }
+
+    this.sendMessage()
+  }
+
+  render() {
+    const { ready, messages, inputValue, user_id } = this.state;
+    const { opened, handleToggleOpen } = this.props;
+
+    if (!ready) {
+      return (
+        <div className="loader">loading...</div>
+      )
+    }
+
+    return (
+      <div id="ocrcc-chatbox">
+        <div className="widget-header">
+          <div className="widget-header-title">
+            Support Chat
+          </div>
+          <button
+            type="button"
+            className={`widget-header-icon`}
+            onClick={handleToggleOpen}
+            onKeyPress={handleToggleOpen}
+          >
+          <span className={`arrow ${opened ? "opened" : "closed"}`}>⌃</span>
+          </button>
+        </div>
+        <div className="message-window">
+          <div className="messages">
+          {
+            messages.map((message, index) => {
+              return(
+                <Message key={message.event.event_id} message={message} user_id={user_id} />
+              )
+            })
+          }
+        </div>
+        </div>
+        <div className="input-window">
+          <form onSubmit={this.handleSubmit}>
+            <input
+              type="text"
+              onChange={this.handleInputChange}
+              value={inputValue}
+              autoFocus={true}
+              ref={this.chatboxInput}
+            />
+            <input type="submit" value="Send" />
+          </form>
+        </div>
+      </div>
+    );
+  }
+};
+
+ChatBox.propTypes = {
+
+}
+
+ChatBox.defaultProps = {
+
+}
+
+export default ChatBox;
+
--- a/src/components/message.jsx
+++ b/src/components/message.jsx
@ -0,0 +1,14 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Message = ({ message, user_id }) => {
+  const fromMe = message.sender.userId === user_id;
+
+  return (
+    <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
+      <div className="text">{ message.event.content.body }</div>
+    </div>
+  )
+}
+
+export default Message;
--- a/src/components/widget.js
+++ b/src/components/widget.js
@ -1,12 +1,15 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
+import Chatbox from './chatbox';
 import './widget.scss';

 class Widget extends Component {
-  state = {
-    opened: false,
-    showDock: true,
+  constructor(props) {
+    super(props);
+    this.state = {
+      opened: false,
+      showDock: true,
+    };
  }

  handleToggleOpen = () => {
@ -28,71 +31,39 @@ class Widget extends Component {
    });
  }

-  renderBody = () => {
-    const { showDock } = this.state;
-
-    if (!showDock) return '';
-
-    return (
-      <button
-        type="button"
-        className="dock"
-        onClick={this.handleToggleOpen}
-        onKeyPress={this.handleToggleOpen}
-      >
-        ^ OPEN ^
-      </button>
-    );
-  }

  render() {
-    const { opened } = this.state;
-    const body = this.renderBody();
-    const { bodyText, headerText, footerText } = this.props;
+    const { opened, showDock } = this.state;

    return (
      <div className="docked-widget">
        <Transition in={opened} timeout={250} onExited={this.handleWidgetExit}>
-          {status => (
+          {(status) => (
            <div className={`widget widget-${status}`}>
-              <div className="widget-header">
-                <div className="widget-header-title">
-                  {headerText}
-                </div>
-                <button
-                  type="button"
-                  className="widget-header-icon"
-                  onClick={this.handleToggleOpen}
-                  onKeyPress={this.handleToggleOpen}
-                >
-                  X
-                </button>
-              </div>
-              <div className="widget-body">
-                {bodyText}
-              </div>
-              <div className="widget-footer">
-                {footerText}
-              </div>
+              <Chatbox handleToggleOpen={this.handleToggleOpen} opened={opened} status={status} />
            </div>
          )}
        </Transition>
-        {body}
+        {showDock && (
+          <button
+            type="button"
+            className="dock"
+            onClick={this.handleToggleOpen}
+            onKeyPress={this.handleToggleOpen}
+          >
+            <span>Open support chat</span>
+            <span className={`arrow ${opened ? 'opened' : 'closed'}`}>⌃</span>
+          </button>
+        )}
      </div>
    );
  }
 }

 Widget.propTypes = {
-  headerText: PropTypes.string,
-  bodyText: PropTypes.string,
-  footerText: PropTypes.string,
 };

 Widget.defaultProps = {
-  headerText: 'Header',
-  bodyText: 'Body',
-  footerText: 'Footer',
 };

 export default Widget;
--- a/src/components/widget.scss
+++ b/src/components/widget.scss
@ -1,3 +1,7 @@
+@import "variables";
+@import "loader";
+@import "chat";
+
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
@ -26,7 +30,6 @@
  position: fixed;
  bottom: 0px;
  right: 10px;
-  width: 200px;
  z-index: 9999;
 }

@ -34,17 +37,24 @@
  cursor: pointer;
  display: flex;
  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  width: 180px;
-  border: 1px solid grey;
-  background: white;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  width: 400px;
+  max-width: calc(100vw - 10px);
+  background: $theme-color;
+  color: $white;
+  font-family: $theme-font;
+  font-size: 1rem;
+  border: none;
+  color: $white;
+  font-size: 1rem;
+  line-height: 1;
 }


 .widget {
-  width: 200px;
-  border: 1px solid grey;
+  width: 400px;
+  max-width: calc(100vw - 10px);
  border-bottom: none;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
@ -65,14 +75,11 @@
  }

  &-header {
-    height: 30px;
-    line-height: 30px;
-    background: lightgrey;
-    color: grey;
-    padding-left: 10px;
-
+    background: $theme-color;
+    color: $white;
+    padding: 0.5rem 1rem;
    display: flex;
-    align-items: stretch;
+    align-items: center;

    &-title {
      display: flex;
@ -84,7 +91,8 @@
      display: flex;
      align-items: center;
      justify-content: center;
-      padding: .75rem;
+      background: transparent;
+      border: none;
    }
  }
  &-body {
@ -98,3 +106,31 @@
    padding-left: 10px;
  }
 }
+
+.arrow {
+  transform: rotateX(0deg);
+  transition: all 0.5s linear;
+  color: $white;
+  font-size: 1rem;
+  line-height: 1;
+
+  &.opened {
+    transform: rotateX(180deg);
+  }
+
+  &.closed {
+    transform: rotateX(0deg) translateY(25%);
+
+  }
+}
+
+@media screen and (max-width: 400px){
+  .docked-widget {
+    right: 0;
+    left: 0;
+  }
+
+  .dock, .widget {
+    max-width: 100vw;
+  }
+}
--- a/src/outputs/embeddable-widget.js
+++ b/src/outputs/embeddable-widget.js
@ -7,7 +7,7 @@ export default class EmbeddableWidget {
  static el;

  static mount({ parentElement = null, ...props } = {}) {
-    const component = <Widget {...props} />;
+    const component = <Widget {...props} />; // eslint-disable-line

    function doRender() {
      if (EmbeddableWidget.el) {