From 4c182f367369391ddb103f7f672753374e369b19 Mon Sep 17 00:00:00 2001
From: Coki <92775570+HashCookie@users.noreply.github.com>
Date: Fri, 9 Aug 2024 19:54:31 +0800
Subject: [PATCH] feat: add buttonPosition option to chat configuration (#9)

* feat: add buttonPosition option to chat configuration

* Update example.html

* Update casibase.js

* Update README.md

---------

Co-authored-by: Yang Luo <hsluoyz@qq.com>
---
 README.md   |  4 +++-
 casibase.js | 29 ++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 62ba566..914de5f 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@ Put the following tracking code (HTML tag) into your main HTML file like index.h
 - `buttonText` (optional): The text displayed on the chat button (default: "Chat with AI")
 - `popupTitle` (optional): The title of the chat popup, used as the iframe title attribute (default: "Chat with AI")
 - `popupTime` (optional): The time in seconds after which the chat window automatically opens. Set to -1 to disable auto-opening (default: -1)
+- `buttonPosition` (optional): The position of the chat button. Possible values are "TopLeft", "MiddleLeft", "BottomLeft", "TopRight", "MiddleRight", "BottomRight" (default: "BottomRight")
 
 An example to use the parameters is:
 
@@ -66,7 +67,8 @@ An example to use the parameters is:
         popupHeight: "600px",
         buttonText: "Chat with AI",
         popupTitle: "Casibase AI Assistant",
-        popupTime: 5
+        popupTime: -1,
+        buttonPosition: "BottomRight"
       });
     };
     var f = d.getElementsByTagName(s)[0];
diff --git a/casibase.js b/casibase.js
index 3968466..62180d1 100644
--- a/casibase.js
+++ b/casibase.js
@@ -6,7 +6,8 @@
     popupHeight: "min(600px, calc(100vh - 100px))",
     buttonText: "Chat with AI",
     popupTitle: "Casibase AI Assistant",
-    popupTime: -1
+    popupTime: -1,
+    buttonPosition: "BottomRight"
   };
 
   let userConfig = { ...defaultConfig };
@@ -41,11 +42,21 @@
   function applyStyles() {
     const animationStyles = userConfig.enableAnimations ? `transition: all 0.3s ease;` : `transition: none;`;
 
+    const buttonPositionStyles = {
+      TopLeft: "top: 20px; left: 20px;",
+      MiddleLeft: "top: 50%; left: 20px; transform: translateY(-50%);",
+      BottomLeft: "bottom: 20px; left: 20px;",
+      TopRight: "top: 20px; right: 20px;",
+      MiddleRight: "top: 50%; right: 20px; transform: translateY(-50%);",
+      BottomRight: "bottom: 20px; right: 20px;"
+    };
+
+    const buttonPosition = buttonPositionStyles[userConfig.buttonPosition] || buttonPositionStyles.BottomRight;
+
     const styles = `
       .chat-button {
         position: fixed;
-        bottom: 20px;
-        right: 20px;
+        ${buttonPosition}
         background-color: ${userConfig.themeColor} !important;
         color: white;
         border: none;
@@ -162,6 +173,18 @@
     const container = document.createElement("div");
     container.className = "chat-container";
 
+    const containerPositions = {
+      TopLeft: "top: 80px; left: 20px;",
+      MiddleLeft: "top: 50%; left: 80px; transform: translateY(-50%);",
+      BottomLeft: "bottom: 80px; left: 20px;",
+      TopRight: "top: 80px; right: 20px;",
+      MiddleRight: "top: 50%; right: 80px; transform: translateY(-50%);",
+      BottomRight: "bottom: 80px; right: 20px;"
+    };
+
+    const containerPosition = containerPositions[userConfig.buttonPosition] || containerPositions.BottomRight;
+    container.style.cssText = containerPosition;
+
     if (userConfig.endpoint) {
       const iframe = document.createElement("iframe");
       iframe.src = userConfig.endpoint + "/?isRaw=1";;