refactor: widget

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"),