feat: more widget settings

src/routes/setting/Widget.tsx

@@ -57,7 +57,7 @@ export default function Widget() {
       <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
         {`<!-- ${t(
           "code_comment"
-        )} -->\n<script \n  data-host-id="${loginUid}" \n  data-auto-reg="true" \n  data-login-token="" \n  data-theme-color="#1fe1f9" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  data-welcome="Your custom welcome text" \n  src="${
+        )} -->\n<script \n  data-host-id="${loginUid}" \n  data-auto-reg="true" \n  data-login-token="" \n  data-title="" \n  data-logo="" \n  data-theme-color="#1fe1f9" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  data-welcome="Your custom welcome text" \n  src="${
           location.origin
         }/widget.js" \n  async \n></script>`}
       </SyntaxHighlighter>
@@ -108,6 +108,16 @@ export default function Widget() {
                 paramDefault: `-`,
                 remarks: t("param_login_token")
               },
+              {
+                paramKey: "title",
+                paramDefault: `[VoceChat Name]`,
+                remarks: t("param_title")
+              },
+              {
+                paramKey: "logo",
+                paramDefault: `[VoceChat Logo]`,
+                remarks: t("param_logo")
+              },
               {
                 paramKey: "theme-color",
                 paramDefault: "#1fe1f9",

src/widget/Popup/Header.tsx

@@ -8,22 +8,22 @@ type Props = {
 };
 
 const Index: FC<Props> = ({ handleClose }) => {
-  const { color, fgColor, embed, name, logo } = useWidget();
+  const { color, fgColor, embed, title, logo } = useWidget();
   return (
     <header
       className="relative flex justify-between items-center h-14 px-4 py-2"
       style={{ backgroundColor: color }}
     >
       <div className="relative w-8 h-8">
-        {logo && <img src={logo} alt="logo" className="w-full h-full rounded-full" />}
+        {logo && <img src={logo} alt="logo" className="size-full" />}
       </div>
       <div className="flex-1 px-4 pr-2 text-lg">
         <span className="text-lg font-bold truncate text-gray-50" style={{ color: fgColor }}>
-          {name}
+          {title}
         </span>
       </div>
       {embed && (
-        <button type="button" className="w-6 h-6">
+        <button type="button" className="size-6">
           <IconClose
             onClick={handleClose}
             className={fgColor == "black" ? `fill-black` : "fill-white"}

src/widget/WidgetContext.tsx

@@ -8,6 +8,8 @@ import { shallowEqual } from "react-redux";
 const query = new URLSearchParams(location.search);
 const id = decodeURIComponent(query.get("id") || "");
 const welcome = decodeURIComponent(query.get("welcome") || "");
+const title = decodeURIComponent(query.get("title") || "");
+const logo = decodeURIComponent(query.get("logo") || "");
 const autoReg = decodeURIComponent(query.get("autoReg") || "true") == "true";
 const token = decodeURIComponent(query.get("token") || "");
 const color = decodeURIComponent(query.get("themeColor") || "#1fe1f9");
@@ -25,8 +27,8 @@ const WidgetContext = createContext({
   from,
   loading: true,
   inviteOnly: false,
-  name: "",
-  logo: "",
+  title,
+  logo,
   welcome
 });
 
@@ -50,8 +52,8 @@ function WidgetProvider({ children }: { children: ReactNode }) {
         embed,
         from,
         inviteOnly: loginConfig?.who_can_sign_up == "InvitationOnly",
-        name: serverData?.name,
-        logo: serverData.logo
+        title: title ? title : serverData?.name,
+        logo: logo ? logo : serverData.logo
       }}
     >
       {children}