feat: add welcome param to widget sdk

src/routes/setting/Widget.tsx

@@ -16,7 +16,7 @@ const Row = ({ paramKey, paramDefault, remarks }: { paramKey: string, paramDefau
       {paramKey}
     </td>
     <td className="text-sm font-light px-6 py-4 whitespace-nowrap">
-      {paramDefault}
+      {paramKey == "theme-color" ? <span style={{ color: paramDefault as string }}> {paramDefault}</span> : paramDefault}
     </td>
     <td className="text-sm font-light px-6 py-4 whitespace-nowrap">
       {remarks}
@@ -27,6 +27,7 @@ export default function Widget() {
   const loginUid = useAppSelector(store => store.authData.user?.uid);
   const widgetLink = `${location.origin}/widget.html?host=${loginUid}`;
   const { t } = useTranslation("setting", { keyPrefix: "widget" });
+  const { t: wt } = useTranslation("widget");
   const { t: ct } = useTranslation();
   const { copied, copy } = useCopy({ enableToast: false });
   const copyLink = () => {
@@ -42,7 +43,7 @@ export default function Widget() {
         {t('code')}:
       </label>
       <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
-        {`<!-- ${t('code_comment')} -->\n<script \n  data-host-id="${loginUid}" \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  src="${location.origin}/widget.js" \n  async \n></script>`}
+        {`<!-- ${t('code_comment')} -->\n<script \n  data-host-id="${loginUid}" \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>
       <div className="text-gray-500 dark:text-white text-sm mt-5 mb-2">
         {t('config')}:
@@ -81,6 +82,10 @@ export default function Widget() {
               paramKey: "open-height",
               paramDefault: `680(px)`,
               remarks: t("param_open_height")
+            }, {
+              paramKey: "welcome",
+              paramDefault: wt("welcome"),
+              remarks: t("param_welcome")
             }
             ].map(row => <Row key={row.paramKey} {...row} />)}
           </tbody>

src/widget/Popup/Welcome.tsx

@@ -1,13 +1,14 @@
-// import clsx from 'clsx'
+import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
 import { useAppSelector } from '../../app/store';
 import Login from './Login';
-import { useTranslation } from 'react-i18next';
+import { useWidget } from '../WidgetContext';
 
 type Props = {
   needLogin?: boolean
 }
 const Index = ({ needLogin = false }: Props) => {
+  const { welcome } = useWidget();
   const { logo } = useAppSelector(store => store.server);
   const { t } = useTranslation("widget");
   // console.log("logooo", logo);
@@ -20,10 +21,7 @@ const Index = ({ needLogin = false }: Props) => {
         <div className="pl-14">
           <div className="rounded-lg" style={{ maxWidth: 'min(((100vw - 56px) - 20px) - 64px, 360px)' }}>
             <div className="text-md text-gray-900 dark:text-gray-100 px-3 py-1.5 bg-gray-100 dark:bg-gray-900 rounded-lg mb-1.5">
-              {needLogin ?
-                t("welcome_not_login")
-                :
-                t("welcome")}
+              {welcome || t("welcome")}
             </div>
           </div>
         </div>

src/widget/WidgetContext.tsx

@@ -4,12 +4,13 @@ import { useAppSelector } from '../app/store';
 import { getContrastColor } from '../common/utils';
 
 const query = new URLSearchParams(location.search);
+const welcome = decodeURIComponent(query.get("welcome") || "");
 const color = decodeURIComponent(query.get("themeColor") || "#1fe1f9");
 const from = decodeURIComponent(query.get("from") || "widget.link");
 const fgColor = getContrastColor(color);
 // 判断是否是iframe上下文
 const embed = window.location !== window.parent.location;
-const WidgetContext = createContext({ color, fgColor, embed, from, loading: true, inviteOnly: false, name: "", logo: "" });
+const WidgetContext = createContext({ color, fgColor, embed, from, loading: true, inviteOnly: false, name: "", logo: "", welcome });
 
 
 function WidgetProvider({ children }: { children: ReactNode }) {
@@ -19,7 +20,7 @@ function WidgetProvider({ children }: { children: ReactNode }) {
 
     const loading = loadingConfig || loadingServerData;
     // if(loading) return 
-    return <WidgetContext.Provider value={{ loading, color, fgColor, embed, from, inviteOnly: loginConfig?.who_can_sign_up == "InvitationOnly", name: serverData?.name, logo: serverData.logo }} >{children}</WidgetContext.Provider>;
+    return <WidgetContext.Provider value={{ welcome, loading, color, fgColor, embed, from, inviteOnly: loginConfig?.who_can_sign_up == "InvitationOnly", name: serverData?.name, logo: serverData.logo }} >{children}</WidgetContext.Provider>;
 }
 
 function useWidget() {