Merge pull request #179 from n4ze3m/next

v1.5.2
n4ze3m · Dec 24, 2023 · 809e06c · 809e06c
2 parents f4f2a40 + 6f297c4
commit 809e06c
Show file tree

Hide file tree

Showing 18 changed files with 467 additions and 276 deletions.
diff --git a/app/script/src/button.ts b/app/script/src/button.ts
@@ -1,15 +1,15 @@
 import { CLOSE_SVG, OPEN_SVG } from "./svg";
 import { ButtonContainerStyle, ChatButtonStyle } from "./types";
 
-export function createChatButton(
-  scriptElement: HTMLScriptElement,
-): void {
+export function createChatButton(scriptElement: HTMLScriptElement): void {
   let buttonContainer: HTMLDivElement = document.createElement("div");
   let buttonContainerStyle: ButtonContainerStyle = buttonContainer.style;
   buttonContainerStyle.display = "block";
   buttonContainerStyle.position = "fixed";
+  const widgetIcon = scriptElement.getAttribute("data-widget-icon");
 
   const position = scriptElement.getAttribute("data-btn-position");
+  const color = scriptElement.getAttribute("data-widget-btn-color") || "#9b59b6";
 
   if (position === "bottom-left") {
     buttonContainerStyle.bottom = "20px";
@@ -31,27 +31,31 @@ export function createChatButton(
   buttonContainerStyle.zIndex = "999999";
   let chatButton: HTMLButtonElement = document.createElement("button");
   chatButton.setAttribute("id", "dialoq-btn");
-  chatButton.innerHTML = OPEN_SVG;
+  chatButton.innerHTML = widgetIcon
+    ? `<img src="${widgetIcon}" style="width: 30px; height: 30px; margin: 0 auto;" />`
+    : OPEN_SVG;
 
   chatButton.onclick = function () {
     let widgetContainer: HTMLDivElement = document.querySelector(
-      "#dialoq",
+      "#dialoq"
     ) as HTMLDivElement;
     if (widgetContainer) {
       if (widgetContainer.style.display === "none") {
         widgetContainer.style.display = "block";
         chatButton.innerHTML = CLOSE_SVG;
       } else {
         widgetContainer.style.display = "none";
-        chatButton.innerHTML = OPEN_SVG;
+        chatButton.innerHTML = widgetIcon
+          ? `<img src="${widgetIcon}" style="width: 30px; height: 30px; margin: 0 auto;" />`
+          : OPEN_SVG;
       }
     } else {
       console.log("widgetContainer not found");
     }
   };
 
   let chatButtonStyle: ChatButtonStyle = chatButton.style;
-  chatButtonStyle.backgroundColor = "#9b59b6";
+  chatButtonStyle.backgroundColor = color;
   chatButtonStyle.color = "white";
   chatButtonStyle.width = "50px";
   chatButtonStyle.height = "50px";

diff --git a/app/script/src/index.ts b/app/script/src/index.ts
@@ -2,8 +2,10 @@ import { createChatButton } from "./button";
 import { OPEN_SVG } from "./svg";
 import { createChatWidget } from "./widget";
 function setupChatWidget(): void {
-  let scriptElement: HTMLScriptElement = document
-    .currentScript as HTMLScriptElement;
+  let scriptElement: HTMLScriptElement =
+    document.currentScript as HTMLScriptElement;
+
+  const widgetIcon = scriptElement.getAttribute("data-widget-icon");
 
   if (document.readyState === "complete") {
     createChatButton(scriptElement);
@@ -21,16 +23,18 @@ function setupChatWidget(): void {
     // close dailoq widget
     if (event.data === "db-iframe-close") {
       let widgetContainer: HTMLDivElement = document.querySelector(
-        "#dialoq",
+        "#dialoq"
       ) as HTMLDivElement;
       let chatButton: HTMLButtonElement = document.querySelector(
-        "#dialoq-btn",
+        "#dialoq-btn"
       ) as HTMLButtonElement;
       if (widgetContainer) {
         widgetContainer.style.display = "none";
       }
       if (chatButton) {
-        chatButton.innerHTML = OPEN_SVG;
+        chatButton.innerHTML = widgetIcon
+          ? `<img src="${widgetIcon}" style="width: 30px; height: 30px; margin: 0 auto;" />`
+          : OPEN_SVG;
       }
     }
   });

diff --git a/app/script/src/widget.ts b/app/script/src/widget.ts
@@ -4,11 +4,10 @@ import {
   WindowWithMatchMedia,
 } from "./types";
 
-export function createChatWidget(
-  scriptElement: HTMLScriptElement,
-): void {
-  let mediaQuery: MediaQueryList = (window as WindowWithMatchMedia)
-    .matchMedia("(min-width: 768px)");
+export function createChatWidget(scriptElement: HTMLScriptElement): void {
+  let mediaQuery: MediaQueryList = (window as WindowWithMatchMedia).matchMedia(
+    "(min-width: 768px)"
+  );
   let widgetContainer: HTMLDivElement = document.createElement("div");
   widgetContainer.setAttribute("id", "dialoq");
   let widgetContainerStyle: WidgetContainerStyle = widgetContainer.style;
@@ -70,28 +69,49 @@ export function createChatWidget(
     widgetContainerStyle.height = "100%";
     iframeStyle.borderRadius = "0";
     iframeStyle.border = "0";
-    if (position === "bottom-left") {
-      widgetContainerStyle.bottom = "80px";
-      widgetContainerStyle.left = "20px";
-    } else if (position === "bottom-right") {
-      widgetContainerStyle.bottom = "80px";
-      widgetContainerStyle.right = "20px";
-    } else if (position === "top-left") {
-      widgetContainerStyle.top = "80px";
-      widgetContainerStyle.left = "20px";
-    } else if (position === "top-right") {
-      widgetContainerStyle.top = "80px";
-      widgetContainerStyle.right = "20px";
-    } else {
-      widgetContainerStyle.bottom = "80px";
-      widgetContainerStyle.right = "20px";
-    }
+    //  make iframe full screen
+    iframeStyle.position = "fixed";
+    iframeStyle.top = "0";
+    iframeStyle.left = "0";
+    iframeStyle.right = "0";
+    iframeStyle.bottom = "0";
+    // make it fit the screen
+    iframeStyle.width = "100%";
+    iframeStyle.height = "100%";
   }
   widgetContainer.appendChild(iframe);
   let chatbotUrl: string = scriptElement.getAttribute(
-    "data-chat-url",
+    "data-chat-url"
   ) as string;
   let iframeSource: string = `${chatbotUrl}?mode=iframe`;
   iframe.src = iframeSource;
   document.body.appendChild(widgetContainer);
+
+  // listen to media query changes
+  mediaQuery.addEventListener("change", (e) => {
+    if (e.matches) {
+      widgetContainerStyle.width = "400px";
+      // make it not full screen
+      iframeStyle.position = "absolute";
+      iframeStyle.right = "0";
+      iframeStyle.top = "0";
+      iframeStyle.width = "100%";
+      iframeStyle.height = "100%";
+
+    } else {
+      widgetContainerStyle.width = "100%";
+      widgetContainerStyle.height = "100%";
+      iframeStyle.borderRadius = "0";
+      iframeStyle.border = "0";
+      //  make iframe full screen
+      iframeStyle.position = "fixed";
+      iframeStyle.top = "0";
+      iframeStyle.left = "0";
+      iframeStyle.right = "0";
+      iframeStyle.bottom = "0";
+      // make it fit the screen
+      iframeStyle.width = "100%";
+      iframeStyle.height = "100%";
+    }
+  });
 }
diff --git a/app/ui/package.json b/app/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/app/ui/src/components/Bot/Appearance/AppearancePreview.tsx b/app/ui/src/components/Bot/Appearance/AppearancePreview.tsx
@@ -19,22 +19,42 @@ export const AppearancePreview = ({ form }: { form: FormInstance }) => {
       <div className="sticky top-0 z-10 ">
         <div className="flex justify-between bg-white border-b border-gray-100 p-4 items-center">
           <p className="font-bold text-lg">{botName}</p>
-          <button>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="w-6 h-6"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"
-              />
-            </svg>
-          </button>
+          <div className="flex items-center">
+            <span className="mr-3">
+              <button type="button">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="h-6 w-6 text-gray-600"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                  />
+                </svg>
+              </button>
+            </span>
+            <button>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-6 h-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
       <div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
@@ -79,58 +99,34 @@ export const AppearancePreview = ({ form }: { form: FormInstance }) => {
         </div>
       </div>
       <div className="sticky bottom-0">
-        <div className="p-3 border-t">
-          <div className="flex-grow space-y-6">
+        <div className="p-3 md:p-6 bg-white border rounded-t-xl text-black border-black/10 ">
+          <div className="flex-grow space-y-6 ">
             <div className="flex">
-              <span className="mr-3">
-                <button
-                  className="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 h-11 text-sm font-medium text-gray-700  hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
-                  type="button"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={1.5}
-                    stroke="currentColor"
-                    className="h-5 w-5 text-gray-600"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-                    />
-                  </svg>
-                </button>
-              </span>
-              <form className="shrink-0 flex-grow  flex items-center ">
-                <div className="relative w-full">
+              <form className="flex-grow  flex items-center">
+                <div className="flex items-cente rounded-full border   bg-gray-100 w-full">
                   <textarea
-                    className="block w-full h-11 resize-none  appearance-none bg-white text-md text-gray-900 caret-blue-600 rounded-lg border-gray-300  pl-3 pr-24 placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-600"
+                    className="rounded-full p-3 text-black  pl-4 pr-2 w-full resize-none bg-transparent focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
                     required
+                    rows={1}
+                    tabIndex={0}
                     placeholder="Type your message…"
                   />
-                  <div className="absolute flex items-center bottom-0.5 right-0.5">
-                    <button
-                      type="button"
-                      className="inline-flex items-center justify-center gap-2 text-sm font-semibold text-blue-600 shadow-sm transition-all duration-150 rounded-md border border-transparent p-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
+                  <button className="mx-3">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth={1.5}
+                      stroke="currentColor"
+                      className="h-6 w-6"
                     >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        strokeWidth={1.5}
-                        stroke="currentColor"
-                        className="h-6 w-6 m-1 md:m-0"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+                      />
+                    </svg>
+                  </button>
                 </div>
               </form>
             </div>