Fix build

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && vite build --config parent-vite.config.js",
     "preview": "vite preview"
   },
   "devDependencies": {

parent-vite.config.js

+const { defineConfig } = require("vite")
+const { resolve } = require("path");
+import manifestJSON from "./target/manifest.json";
+
+const cssLink = manifestJSON["index.html"]["css"][0];
+module.exports = defineConfig({
+    build: {
+        rollupOptions: {
+            input: {
+                parent: resolve(__dirname, "index.html"),
+            },
+        },
+        outDir: "./target/parent",
+        target: 'esnext',
+        assetsInlineLimit: 0,
+    },
+    define: {
+        cssFileName: cssLink.replace(/assets\//, ""),
+    }
+});

src/parent-style.css

@@ -11,7 +11,7 @@
     width: 0;
 }
 
-@media (max-width: 800px)  {
+@media (max-width: 800px) {
     .chatterbox-iframe {
         bottom: 0;
         right: 0;
@@ -28,7 +28,7 @@
     width: 32px;
     height: 32px;
     border: none;
-    background: no-repeat center #295dbd;
+    background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
     border-radius: 2px;
     cursor: pointer;
 }

src/parent.ts

-import startButtonIcon from "./ui/res/chat-bubbles.svg";
+import "./parent-style.css";
 
 let isIframeLoaded = false;
-const rootHost = (document.querySelector("#chatterbox-script") as HTMLScriptElement).src;
+const parentRootHost = (document.querySelector("#chatterbox-script") as HTMLScriptElement).src;
+const parentRootHostURL = new URL(parentRootHost);
+const rootHost = `${parentRootHostURL.protocol}${parentRootHostURL.host}`;
 
 const sizeCollection = {
     "desktop": {
@@ -37,8 +39,6 @@ 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);
 }
@@ -46,8 +46,7 @@ function renderStartButton() {
 function loadCSS() {
     const linkElement = document.createElement("link") as HTMLLinkElement;
     linkElement.rel = "stylesheet";
-    const url = new URL("./parent-style.css", import.meta.url);
-    const urlFixed = new URL(url.pathname, rootHost);
+    const urlFixed = new URL("cssFileName", parentRootHost);
     linkElement.href = urlFixed.href;
     document.head.appendChild(linkElement);
 }
@@ -58,7 +57,7 @@ function loadChatterboxIframe() {
     if (!configLocation) {
         throw new Error("CONFIG_LOCATION is not set");
     }
-    iframe.src = new URL("../chatterbox.html?config=" + configLocation, import.meta.url).href;
+    iframe.src = new URL("../chatterbox.html?config=" + configLocation, rootHost).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"),
+module.exports = defineConfig(({ command }) => {
+    if (command === "serve") {
+        return {
+            // dev specific config
+            define: {
+                cssFileName: JSON.stringify("parent-style.css"),
             },
-        },
-        outDir: "./target",
-        target: 'esnext',
-        assetsInlineLimit: 0,
+        };
+    } else {
+        return {
+            // build specific config
+            build: {
+                rollupOptions: {
+                    input: {
+                        main: resolve(__dirname, "chatterbox.html"),
+                        parent: resolve(__dirname, "index.html"),
+                    },
+                },
+                outDir: "./target",
+                target: "esnext",
+                assetsInlineLimit: 0,
+                manifest: true,
+            },
+        };
     }
 });