WIP

README.md

+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
+---

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>

parent-vite.config.js

-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"),
-            },
-        },
-    },
-});
-

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();

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;
 }

src/parent.ts

-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;

vite.config.js

-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,
+    }
 });

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"