Use chevron when chatterbox is loaded

src/parent-style.css

@@ -24,13 +24,16 @@
     bottom: 15px;
 }
 
-.start button {
+.start-chat-btn {
     width: 64px;
     height: 64px;
     border: none;
     border-radius: 100%;
-    background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
     cursor: pointer;
     background: no-repeat center url('./ui/res/chat-bubbles.svg'), linear-gradient(180deg, #7657F2 0%, #5C56F5 100%);
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 12px 32px -2px rgba(0, 0, 0, 0.2);
 }
+
+.start-background-minimized {
+    background: no-repeat center url("./ui/res/chevron-down-button.svg"), linear-gradient(180deg, #7657F2 0%, #5C56F5 100%);
+}

src/parent.ts

@@ -37,7 +37,7 @@ function renderStartButton() {
     const container = document.createElement("div");
     container.className = "start";
     const button = document.createElement("button");
-    button.className = "StartChat";
+    button.className = "start-chat-btn";
     button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe();
     container.appendChild(button);
     document.body.appendChild(container);
@@ -60,24 +60,27 @@ function loadChatterboxIframe() {
     iframe.className = "chatterbox-iframe";
     document.body.appendChild(iframe);
     isIframeLoaded = true;
+    document.querySelector(".start-chat-btn").classList.add("start-background-minimized");
     if (isMobile()) {
-        (document.querySelector(".start") as HTMLButtonElement).style.display = "none";
+        (document.querySelector(".start") as HTMLDivElement).style.display = "none";
     }
 }
 
 function minimizeIframe() {
     const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
-    const startButton = document.querySelector(".start") as HTMLButtonElement;
+    const startButtonDiv = document.querySelector(".start") as HTMLDivElement;
     if (iframeElement.style.display !== "none") {
         iframeElement.style.display = "none";
+        document.querySelector(".start-chat-btn").classList.remove("start-background-minimized");
         if (isMobile()) {
-            startButton.style.display = "block";
+            startButtonDiv.style.display = "block";
         }
     }
     else {
         iframeElement.style.display = "block";
+        document.querySelector(".start-chat-btn").classList.add("start-background-minimized");
         if (isMobile()) {
-            startButton.style.display = "none";
+            startButtonDiv.style.display = "none";
         }
     }
 }

src/ui/res/chevron-down-button.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_4136)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.56066 8.04481C3.14645 7.45902 4.09773 7.45748 4.68541 8.04137L12.134 15.4419L19.5586 8.01731C20.1444 7.43153 21.0957 7.42999 21.6834 8.01388C22.2711 8.59776 22.2726 9.54597 21.6868 10.1318L13.2015 18.617C12.6157 19.2028 11.6645 19.2044 11.0768 18.6205L2.56409 10.1627C1.97641 9.5788 1.97487 8.6306 2.56066 8.04481Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_102_4136">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>