diff --git a/.gitignore b/.gitignore
index 53f7466aca70031d07116439658b0b8a85af2cfe..96a35713fb52887181f7fc164119f0acdfe4085e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@ node_modules
.DS_Store
dist
dist-ssr
-*.local
\ No newline at end of file
+build
+*.local
diff --git a/index.html b/index.html
index a37274ad814779df4cb7a499a449a09e3230a256..333043348fb996169349ef30b1f358fbaa7a5056 100644
--- a/index.html
+++ b/index.html
@@ -4,26 +4,13 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
+ <link rel="stylesheet" href="/src/parent-style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatterbox</title>
</head>
<body>
- <embed src="./chatterbox.html?config=./config.json" class="chatterbox-iframe">
- <script src="/src/resize.ts"></script>
- <style>
- .chatterbox-iframe {
- position: absolute;
- right: 0;
- bottom: 0;
- height: 615px;
- width: 397px;
- }
-
- body {
- background-color: blanchedalmond;
- }
- </style>
+ <script src="/src/parent.ts" type="module"></script>
</body>
</html>
diff --git a/package.json b/package.json
index 9d92be9764b98023c16bd237ff0d6612dbc73273..fce7ed60f685276eb38c9be7cb1b31eac715ef2e 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"start": "vite",
- "build": "tsc && vite build",
+ "build": "tsc && vite build && vite --config parent-vite.config.js build",
"preview": "vite preview"
},
"devDependencies": {
diff --git a/parent-vite.config.js b/parent-vite.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ec3a40acf2fa1ed98f0ec4dc9f356ae34e66a2b
--- /dev/null
+++ b/parent-vite.config.js
@@ -0,0 +1,15 @@
+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/parent-style.css b/src/parent-style.css
new file mode 100644
index 0000000000000000000000000000000000000000..4b08c0ae1c4da6f475cbd04959de36e151641519
--- /dev/null
+++ b/src/parent-style.css
@@ -0,0 +1,27 @@
+.chatterbox-iframe {
+ position: absolute;
+ right: 0;
+ bottom: 50px;
+ height: 615px;
+ width: 397px;
+ border: none;
+}
+
+.start {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+}
+
+.start button {
+ width: 32px;
+ height: 32px;
+ border: none;
+ background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
+ border-radius: 2px;
+ cursor: pointer;
+}
+
+body {
+ background-color: blanchedalmond;
+}
diff --git a/src/parent.ts b/src/parent.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2bc08d179215cdf380cb27a455fdd2600f89bc5b
--- /dev/null
+++ b/src/parent.ts
@@ -0,0 +1,62 @@
+const configLocation = "./config.json";
+let isIframeLoaded = false;
+
+const sizeCollection = {
+ "desktop": {
+ "account-setup": { height: "160px", width: "360px" },
+ "timeline": {height: "600px", width: "400px"}
+ },
+ "mobile": {
+ "account-setup": { height: "100vh", width: "100vw" },
+ "timeline": {height: "100vh", width: "100vw"}
+ }
+}
+
+window.addEventListener("message", event => {
+ const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
+ const { action } = event.data;
+ switch (action) {
+ case "resize-iframe":
+ const { view } = event.data;
+ const size = sizeCollection.desktop[view];
+ if (!size) { return; }
+ const { height, width } = size;
+ if (height) { iframeElement.style.height = height; }
+ if (width) { iframeElement.style.width = width; }
+ break;
+ case "minimize":
+ minimizeIframe();
+ break;
+ }
+});
+
+function renderStartButton() {
+ const container = document.createElement("div");
+ container.className = "start";
+ const button = document.createElement("button");
+ button.className = "StartChat";
+ button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe();
+ container.appendChild(button);
+ document.body.appendChild(container);
+}
+
+function loadChatterboxIframe() {
+ const iframe = document.createElement("iframe");
+ iframe.src = `./chatterbox.html?config=${configLocation}`;
+ iframe.className = "chatterbox-iframe";
+ document.body.appendChild(iframe);
+ isIframeLoaded = true;
+}
+
+function minimizeIframe() {
+ const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
+ if (iframeElement.style.display !== "none") {
+ iframeElement.style.display = "none";
+ }
+ else {
+ iframeElement.style.display = "block";
+ }
+
+}
+
+renderStartButton();
diff --git a/src/resize.ts b/src/resize.ts
deleted file mode 100644
index f2b614674973c516b6a76411e8309378a6538e38..0000000000000000000000000000000000000000
--- a/src/resize.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
-This script will resize the iframe based on messages
-*/
-const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
-
-const sizeCollection = {
- "desktop": {
- "start": { height: "50px", width: "50px" },
- "account-setup": { height: "115px", width: "360px" },
- "timeline": {height: "600px", width: "400px"}
- }
-}
-
-window.addEventListener("message", event => {
- const view = event.data;
- const size = sizeCollection.desktop[view];
- const { height, width } = size;
- if (height) { iframeElement.style.height = height; }
- if (width) { iframeElement.style.width = width; }
-});
diff --git a/vite.config.js b/vite.config.js
index dd7dc2b70fd41bcd3ed15c5070f452ec9580ec0e..578d2b794d1a6369e49405b79ef52c05b6952a76 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,16 @@
const { defineConfig } = require('vite')
+const { resolve } = require("path");
module.exports = defineConfig({
+ build: {
+ rollupOptions: {
+ input: {
+ main: resolve(__dirname, 'chatterbox.html'),
+ parent: resolve(__dirname, '/src/parent-style.css')
+ }
+ },
+ outDir: "./build/chatterbox"
+ },
server: {
fs: {
// Allow serving files from hydrogen-web/target (for fonts and images)