feat: add welcome param to widget sdk

public/locales/en/setting.json

@@ -208,6 +208,7 @@
     "param_close_height": "The height while widget closed",
     "param_open_width": "The width while widget opened",
     "param_open_height": "The height while widget opened",
+    "param_welcome": "Custom welcome message",
     "share_link": "Share the widget link so that people can chat with you directly",
     "widget_faq": "Enable Let Everyone Join First"
   },

public/locales/en/widget.json

@@ -1,5 +1,4 @@
 {
-  "welcome_not_login": "👋 Hi there, Nice to meet you! Please login before we have a nice talk 👇",
   "welcome": "👋 Hi there, Nice to meet you!",
   "placeholder_send": "Type and press enter",
   "start_chat": "Start Chat"

public/locales/zh/setting.json

@@ -201,6 +201,7 @@
     "param_close_height": "挂件关闭态的高度",
     "param_open_width": "挂件打开态的宽度",
     "param_open_height": "挂件打开态的高度",
+    "param_welcome": "自定义欢迎语",
     "share_link": "分享此链接，别人可以通过该地址直接与你对话",
     "widget_faq": "允许公开注册"
   },

public/locales/zh/widget.json

@@ -1,5 +1,4 @@
 {
-  "welcome_not_login": "👋 你好，请先输入你的用户名👇",
   "welcome": "👋 你好，很高兴认识你！",
   "placeholder_send": "请输入消息",
   "start_chat": "开始聊天"

public/widget.js

@@ -5,7 +5,8 @@ const {
   openWidth = 380,
   openHeight = 680,
   themeColor = "#1fe1f9",
-  position = "right"
+  position = "right",
+  welcome = ""
 } = document.currentScript.dataset;
 const _src = document.currentScript.src;
 const wrapper = document.createElement("iframe");
@@ -23,7 +24,7 @@ const styles = {
 Object.assign(wrapper.style, styles);
 wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${encodeURIComponent(
   themeColor
-)}&from=${encodeURIComponent(location.hostname)}`;
+)}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`;
 wrapper.width = closeWidth;
 wrapper.height = closeHeight;
 wrapper.frameborder = 0;

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 ?
+              {welcome || t("welcome")}
-                t("welcome_not_login")
-                :
-                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() {