diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..4bbeeb86dc4fe88023641d1aa538c7582fab8608
--- /dev/null
+++ b/README.md
@@ -0,0 +1,26 @@
+Chatterbox lets you securely embed [Hydrogen](https://github.com/vector-im/hydrogen-web) within any website.
+
+### Develop Instructions
+---
+1) Clone the repo.
+2) Install dependencies (you only need to do this once):
+ ```properties
+ yarn install
+ ```
+3) Modify config.json in `public` directory with your homeserver details.
+(See `types/IChatterboxConfig.ts`)
+4) Start develop server:
+ ```properties
+ yarn start
+ ```
+
+### Build Instructions
+---
+Follow the develop instructions above (steps 1-3), then:
+- Build chatterbox app into `/target` directory:
+ ```properties
+ yarn build
+ ```
+
+### Embed Instructions
+---
diff --git a/index.html b/index.html
index 95ba55a7a454119a6715a23f09773163e4e9f872..e1dbe9a54e8323d3785ad5f4a9f9543b4c325ecb 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,10 @@
<div class="para">Elit aute occaecat do labore ea mollit cupidatat. Eiusmod non mollit excepteur adipisicing deserunt et do fugiat ea. Sit commodo laborum labore dolor ad nulla dolore aute sit occaecat irure magna. Cupidatat dolore sint Lorem sint id laboris pariatur dolore laborum ullamco ad. Cillum ut ea nisi proident in cillum. Pariatur esse dolor est laborum ad nostrud. Exercitation esse commodo minim ipsum aute duis pariatur dolore culpa.</div>
</div>
</div>
- <script src="/src/parent.ts" type="module"></script>
+ <script>
+ window.CONFIG_LOCATION = "./config.json";
+ </script>
+ <script src="./src/parent.ts" type="module"></script>
</body>
</html>
diff --git a/parent-vite.config.js b/parent-vite.config.js
deleted file mode 100644
index 1ec3a40acf2fa1ed98f0ec4dc9f356ae34e66a2b..0000000000000000000000000000000000000000
--- a/parent-vite.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const { defineConfig } = require('vite')
-const { resolve } = require("path");
-
-module.exports = defineConfig({
- build: {
- outDir: "./build/parent",
- rollupOptions: {
- input: {
- main: resolve(__dirname, "/src/parent.ts"),
- parent: resolve(__dirname, "/src/parent-style.css"),
- },
- },
- },
-});
-
diff --git a/src/main.ts b/src/main.ts
index 8bb132635d01195056c3f08e6fe8fa3115ac3185..91460d5322be5a05250758919749e3bfd6478202 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -60,11 +60,11 @@ function allowsChild(parent, child) {
window.parent?.postMessage({
action: "resize-iframe",
view
- });
+ }, "*");
};
(window as any).sendMinimizeToParent = function () {
- window.parent?.postMessage({ action: "minimize" });
+ window.parent?.postMessage({ action: "minimize" }, "*");
};
main();
diff --git a/src/parent-style.css b/src/parent-style.css
index 0c58d4ebd3cc5806c7fdbccf0ece8719d7abd5fa..0bac34b0e12bb92f8547e24ead3407d0edb88384 100644
--- a/src/parent-style.css
+++ b/src/parent-style.css
@@ -28,7 +28,7 @@
width: 32px;
height: 32px;
border: none;
- background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
+ background: no-repeat center #295dbd;
border-radius: 2px;
cursor: pointer;
}
diff --git a/src/parent.ts b/src/parent.ts
index 6c4d3c029f05bd128cbce462e38e81d146bb9294..40fc6811a38afdd5f4caa7eb9f50c2ec5d7d19d4 100644
--- a/src/parent.ts
+++ b/src/parent.ts
@@ -1,7 +1,7 @@
-import cssLink from "./parent-style.css";
+import startButtonIcon from "./ui/res/chat-bubbles.svg";
-const configLocation = "./config.json";
let isIframeLoaded = false;
+const rootHost = (document.querySelector("#chatterbox-script") as HTMLScriptElement).src;
const sizeCollection = {
"desktop": {
@@ -37,6 +37,8 @@ function renderStartButton() {
const button = document.createElement("button");
button.className = "StartChat";
button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe();
+ const fixedStartButtonIcon = new URL(startButtonIcon, rootHost).href;
+ button.style.backgroundImage = `url(${fixedStartButtonIcon})`;
container.appendChild(button);
document.body.appendChild(container);
}
@@ -44,12 +46,19 @@ function renderStartButton() {
function loadCSS() {
const linkElement = document.createElement("link") as HTMLLinkElement;
linkElement.rel = "stylesheet";
- linkElement.href = cssLink;
+ const url = new URL("./parent-style.css", import.meta.url);
+ const urlFixed = new URL(url.pathname, rootHost);
+ linkElement.href = urlFixed.href;
+ document.head.appendChild(linkElement);
}
function loadChatterboxIframe() {
const iframe = document.createElement("iframe");
- iframe.src = `./chatterbox.html?config=${configLocation}`;
+ const configLocation = (window as any).CONFIG_LOCATION;
+ if (!configLocation) {
+ throw new Error("CONFIG_LOCATION is not set");
+ }
+ iframe.src = new URL("../chatterbox.html?config=" + configLocation, import.meta.url).href;
iframe.className = "chatterbox-iframe";
document.body.appendChild(iframe);
isIframeLoaded = true;
diff --git a/vite.config.js b/vite.config.js
index 5d515481ad550981cc51ff9dac111554eded5c77..d93f3ba5b77a299a1e539b2de5b8720ba01c03aa 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,14 +1,16 @@
-const { defineConfig } = require('vite')
+const { defineConfig } = require("vite")
const { resolve } = require("path");
module.exports = defineConfig({
build: {
- rollupOptions: {
- input: {
- main: resolve(__dirname, 'chatterbox.html'),
- parent: resolve(__dirname, 'index.html')
- }
+ rollupOptions: {
+ input: {
+ main: resolve(__dirname, "chatterbox.html"),
+ parent: resolve(__dirname, "index.html"),
+ },
},
- outDir: "./target"
- },
+ outDir: "./target",
+ target: 'esnext',
+ assetsInlineLimit: 0,
+ }
});
diff --git a/yarn.lock b/yarn.lock
index b8e1f0c92a3fb1d2b8da402c70f6a66a46593bbe..88ddd633fa4b19542989fa16db57e708d8bc0801 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -213,9 +213,9 @@ typescript@^4.4.4:
integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
vite@^2.7.2:
- version "2.7.7"
- resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.7.tgz#f2f1af5f9fc409053130261416000447347bc203"
- integrity sha512-Nm4ingl//gMSj/p1aCBHuTc5Fd8W8Mwdci/HUvqCVq8xaJqF7z08S/LRq1M9kS0jRfJk1/f/CwUyQAr6YgsOLw==
+ version "2.7.13"
+ resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.13.tgz#99b56e27dfb1e4399e407cf94648f5c7fb9d77f5"
+ integrity sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==
dependencies:
esbuild "^0.13.12"
postcss "^8.4.5"