From d7472f3947349d99af082529ec4a8dcd1f268a78 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Fri, 5 May 2023 15:53:50 +0800 Subject: [PATCH] feat: add welcome param to widget sdk --- public/locales/en/setting.json | 1 + public/locales/en/widget.json | 1 - public/locales/zh/setting.json | 1 + public/locales/zh/widget.json | 1 - public/widget.js | 5 +++-- src/routes/setting/Widget.tsx | 9 +++++++-- src/widget/Popup/Welcome.tsx | 10 ++++------ src/widget/WidgetContext.tsx | 5 +++-- 8 files changed, 19 insertions(+), 14 deletions(-) diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json index 058791c3..96514eb6 100644 --- a/public/locales/en/setting.json +++ b/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" }, diff --git a/public/locales/en/widget.json b/public/locales/en/widget.json index c3af99dc..26cfbec2 100644 --- a/public/locales/en/widget.json +++ b/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" diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json index 0b446dce..dcff370e 100644 --- a/public/locales/zh/setting.json +++ b/public/locales/zh/setting.json @@ -201,6 +201,7 @@ "param_close_height": "挂件关闭态的高度", "param_open_width": "挂件打开态的宽度", "param_open_height": "挂件打开态的高度", + "param_welcome": "自定义欢迎语", "share_link": "分享此链接，别人可以通过该地址直接与你对话", "widget_faq": "允许公开注册" }, diff --git a/public/locales/zh/widget.json b/public/locales/zh/widget.json index 526c9658..c7bc4a9b 100644 --- a/public/locales/zh/widget.json +++ b/public/locales/zh/widget.json @@ -1,5 +1,4 @@ { - "welcome_not_login": "👋 你好，请先输入你的用户名👇", "welcome": "👋 你好，很高兴认识你！", "placeholder_send": "请输入消息", "start_chat": "开始聊天" diff --git a/public/widget.js b/public/widget.js index 0236aaf4..7734a50b 100644 --- a/public/widget.js +++ b/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; diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx index 2b2fb57e..73108134 100644 --- a/src/routes/setting/Widget.tsx +++ b/src/routes/setting/Widget.tsx @@ -16,7 +16,7 @@ const Row = ({ paramKey, paramDefault, remarks }: { paramKey: string, paramDefau {paramKey} - {paramDefault} + {paramKey == "theme-color" ? {paramDefault} : paramDefault} {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')}: - {`\n`} + {`\n`}
{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 => )} diff --git a/src/widget/Popup/Welcome.tsx b/src/widget/Popup/Welcome.tsx index 6e9a5103..756421a0 100644 --- a/src/widget/Popup/Welcome.tsx +++ b/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) => {
- {needLogin ? - t("welcome_not_login") - : - t("welcome")} + {welcome || t("welcome")}
diff --git a/src/widget/WidgetContext.tsx b/src/widget/WidgetContext.tsx index ddf92f27..77567890 100644 --- a/src/widget/WidgetContext.tsx +++ b/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 {children}; + return {children}; } function useWidget() {