refactor: widget

public/locales/en/setting.json

@@ -246,6 +246,7 @@
     "param_key": "Parameter Key",
     "default_value": "Default Value",
     "remark": "Remarks",
+    "custom_style_tip": "if you want customize the widget position more precisely, use the widget element ID in your HTML or CSS file, like this",
     "param_host": "Assign the user chatting with visitor(User ID)",
     "param_theme_color": "The theme color of widget",
     "param_close_width": "The width while widget closed",
@@ -253,6 +254,7 @@
     "param_open_width": "The width while widget opened",
     "param_open_height": "The height while widget opened",
     "param_welcome": "Custom welcome message",
+    "param_position": "Widget position: left/right",
     "share_link": "Share the widget link so that people can chat with you directly",
     "widget_faq": "Enable Let Everyone Join First"
   },

public/locales/zh/setting.json

@@ -239,6 +239,7 @@
     "param_key": "参数",
     "default_value": "默认值",
     "remark": "备注",
+    "custom_style_tip": "如果你想更精确控制挂件的样式，可以借助widget元素的ID，自行写CSS样式，加到自己的html或者css文件中，如下所示：",
     "param_host": "指定和谁聊天(用户ID)",
     "param_theme_color": "挂件的主题色",
     "param_close_width": "挂件关闭态的宽度",
@@ -246,6 +247,7 @@
     "param_open_width": "挂件打开态的宽度",
     "param_open_height": "挂件打开态的高度",
     "param_welcome": "自定义欢迎语",
+    "param_position": "设置挂件位置，居左(left)或居右(right)",
     "share_link": "分享此链接，别人可以通过该地址直接与你对话",
     "widget_faq": "允许公开注册"
   },

public/widget.js

@@ -1,60 +1,63 @@
-const {
+// IIFC
-  hostId = 1,
+((w, d) => {
-  closeWidth = 48,
+  const {
-  closeHeight = 48,
+    hostId = 1,
-  openWidth = 380,
+    closeWidth = 48,
-  openHeight = 680,
+    closeHeight = 48,
-  themeColor = "#1fe1f9",
+    openWidth = 380,
-  position = "right",
+    openHeight = 680,
-  welcome = ""
+    themeColor = "#1fe1f9",
-} = document.currentScript.dataset;
+    position = "right",
-const _src = document.currentScript.src;
+    welcome = ""
-const wrapper = document.createElement("iframe");
+  } = d.currentScript.dataset;
-wrapper.id = "VOCECHAT_WIDGET";
+  const _src = d.currentScript.src;
-const styles = {
+  const wrapper = d.createElement("iframe");
-  position: "fixed",
+  wrapper.id = "VOCECHAT_WIDGET";
-  borderRadius: "8px",
+  const styles = {
-  right: "16px",
+    position: "fixed",
-  [position]: "16px", // [position] = [right] or [left]
+    borderRadius: "8px",
-  bottom: "16px",
+    right: "16px",
-  border: "none",
+    [position]: "16px", // [position] = [right] or [left]
-  zIndex: 9999,
+    bottom: "16px",
-  boxShadow: `rgb(0 0 0 / 25%) 0px 25px 50px -12px`
+    border: "none",
-};
+    zIndex: 9999,
-Object.assign(wrapper.style, styles);
+    boxShadow: `rgb(0 0 0 / 25%) 0px 25px 50px -12px`
-wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${encodeURIComponent(
+  };
-  themeColor
+  Object.assign(wrapper.style, styles);
-)}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`;
+  wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${encodeURIComponent(
-wrapper.width = closeWidth;
+    themeColor
-wrapper.height = closeHeight;
+  )}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`;
-wrapper.frameborder = 0;
+  wrapper.width = closeWidth;
-window.addEventListener(
+  wrapper.height = closeHeight;
-  "message",
+  wrapper.frameborder = 0;
-  (event) => {
+  w.addEventListener(
-    const { data: CMD } = event;
+    "message",
-    switch (CMD) {
+    (event) => {
-      case "OPEN":
+      const { data: CMD } = event;
-        wrapper.setAttribute("width", openWidth);
+      switch (CMD) {
-        wrapper.setAttribute("height", openHeight);
+        case "OPEN":
-        break;
-      case "CLOSE":
-        wrapper.setAttribute("width", closeWidth);
-        wrapper.setAttribute("height", closeHeight);
-        break;
-      case "RELOAD_WITH_OPEN":
-        {
-          const url = new URL(wrapper.src);
-          url.searchParams.append("open", new Date().getTime());
-          console.log("new src", url.href);
-          wrapper.src = url.href;
           wrapper.setAttribute("width", openWidth);
           wrapper.setAttribute("height", openHeight);
-        }
+          break;
-        break;
+        case "CLOSE":
-      default:
+          wrapper.setAttribute("width", closeWidth);
-        break;
+          wrapper.setAttribute("height", closeHeight);
-    }
+          break;
-  },
+        case "RELOAD_WITH_OPEN":
-  false
+          {
-);
+            const url = new URL(wrapper.src);
-document.body.appendChild(wrapper);
+            url.searchParams.append("open", new Date().getTime());
+            console.log("new src", url.href);
+            wrapper.src = url.href;
+            wrapper.setAttribute("width", openWidth);
+            wrapper.setAttribute("height", openHeight);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    false
+  );
+  d.body.appendChild(wrapper);
+})(window, document);

src/assets/index.css

@@ -138,7 +138,9 @@
     gap: 2px;
     padding: 4px;
     background-color: #fff;
-    box-shadow: 0 20px 25px 20px rgba(31, 41, 55, 0.1), 0 10px 10px rgba(31, 41, 55, 0.04);
+    box-shadow:
+      0 20px 25px 20px rgba(31, 41, 55, 0.1),
+      0 10px 10px rgba(31, 41, 55, 0.04);
     border-radius: 12px;
     min-width: 200px;
   }

src/routes/setting/Widget.tsx

@@ -57,6 +57,15 @@ export default function Widget() {
           location.origin
         }/widget.js" \n  async \n></script>`}
       </SyntaxHighlighter>
+      <div className="text-sm dark:text-white">{t("custom_style_tip")}:</div>
+      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
+        {`<style>
+  #VOCECHAT_WIDGET {
+    left:10px  /* left position */
+    bottom: 5px /* bottom position */
+  }
+</style>`}
+      </SyntaxHighlighter>
       <div className="font-semibold dark:text-white mt-5 mb-2">{t("config")}:</div>
       <div className="w-full md:w-[700px] border border-solid border-gray-300 dark:border-gray-400 rounded overflow-auto md:overflow-hidden">
         <table className="min-w-full table-auto">
@@ -105,6 +114,11 @@ export default function Widget() {
                 paramDefault: `680(px)`,
                 remarks: t("param_open_height")
               },
+              {
+                paramKey: "position",
+                paramDefault: `right`,
+                remarks: t("param_position")
+              },
               {
                 paramKey: "welcome",
                 paramDefault: wt("welcome"),