diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json index 61b8c263..6722d2bb 100644 --- a/public/locales/en/setting.json +++ b/public/locales/en/setting.json @@ -247,6 +247,7 @@ "default_value": "Default Value", "remark": "Remarks", "custom_style_tip": "if you want customize the widget position more precisely, use the widget element ID in your HTML or CSS file, like this", + "param_id": "Widget ID (server version>=v0.3.12)", "param_host": "Assign the user chatting with visitor(User ID)", "param_auto_reg": "true: Auto register a new user if not exist, false: need visitor to input email and name to register", "param_login_token": "If you are using your own platform's existing user info to generate VoceChat new account, this is the login token generated by your platform, for more details, please refer to: https://doc.voce.chat/zh-cn/login-with-other-account. Don't fill this out for default scenarios (no 3-rd party user system)!", diff --git a/public/locales/jp/setting.json b/public/locales/jp/setting.json index df2badf8..dd4adcd3 100644 --- a/public/locales/jp/setting.json +++ b/public/locales/jp/setting.json @@ -17,7 +17,7 @@ "widget": "ウィジェット", "license": "ライセンス", "about": "このアプリについて", - "api_doc": "APIドキュメント", + "api_doc": "API ドキュメント", "version": "Version" }, "channel": { @@ -37,7 +37,7 @@ "overview": { "name": "サーバー名", "desc": "サーバーの説明", - "upload_desc": "画像サイズとして、128x128は必須、512x512はおすすめ。大きさは5Mを超えないでください。", + "upload_desc": "画像サイズとして、128x128 は必須、512x512 はおすすめ。大きさは 5M を超えないでください。", "sign_up": { "title": "登録方法", @@ -76,8 +76,8 @@ }, "firebase": { "enable": "有効にする", - "token_url": "トークンURL", - "project_id": "プロジェクトID", + "token_url": "トークン URL", + "project_id": "プロジェクト ID", "private_key": "秘密鍵", "client_email": "クライアントメール" }, @@ -88,40 +88,41 @@ "from": "from", "username": "ユーザー名", "password": "パスワード", - "how_to": "SMTPの設定方法？", + "how_to": "SMTP の設定方法？", "send_test_email": "テストメールを送信する" }, "third_app": { "key": "API key", - "update": "API keyを更新する", - "update_tip": "API keyを更新すると、以前発行するkeyは無効になります。", - "key_tip": "API keyはサーバとサードパーティーとの安全な通信に使用されますので、大切に保管してください。" + "update": "API key を更新する", + "update_tip": "API key を更新すると、以前発行する key は無効になります。", + "key_tip": "API key はサーバとサードパーティーとの安全な通信に使用されますので、大切に保管してください。" }, "login": { "password": "パスワードでログイン可能", "password_desc": "パスワードでログイン可能にする", "magic_link": "招待リンクでログイン可能", "magic_link_desc": "招待リンクでログイン可能にする", - "google": "Googleでログイン可能", - "google_desc": "Googleでログイン可能にする", - "github": "GitHubでログイン可能", - "github_desc": "GitHubでログイン可能にする", - "metamask": "MetaMaskでログイン可能", - "metamask_desc": "MetaMaskでログイン可能にする", - "oidc": "OIDCでログイン可能", - "oidc_desc": "OIDCでログイン可能にする", + "google": "Google でログイン可能", + "google_desc": "Google でログイン可能にする", + "github": "GitHub でログイン可能", + "github_desc": "GitHub でログイン可能にする", + "metamask": "MetaMask でログイン可能", + "metamask_desc": "MetaMask でログイン可能にする", + "oidc": "OIDC でログイン可能", + "oidc_desc": "OIDC でログイン可能にする", "oidc_custom": "カスタマイズ", - "more_details": "<0>ドキュメント を参照してください." + "more_details": "<0>ドキュメント を参照してください。" }, "widget": { - "tip": "ストラップSDKをwebページに埋め込み、VoceChat拡張を実現できます！", + "tip": "ストラップ SDK を web ページに埋め込み、VoceChat 拡張を実現できます！", "code": "コード", - "code_comment": "コードをコピーして、webページに貼り付けてください。", + "code_comment": "コードをコピーして、web ページに貼り付けてください。", "config": "説明", "param_key": "パラメータ", "default_value": "デフォルト値", "remark": "メモ", - "param_host": "ユーザーIDでチットの相手を指定する", + "param_id": "Widget ID (server version>=v0.3.12)", + "param_host": "ユーザーID でチットの相手を指定する", "param_close_width": "ウィジェット閉じたままの幅", "param_close_height": "ウィジェット閉じたままの高さ", "param_open_width": "ウィジェット開きままの幅", @@ -133,12 +134,12 @@ "build_time": "ビルド時間" }, "api_doc": { - "desc": "VoceChat APIドキュメントを参照しで、VoceChatをカスタマイズできます。", - "access": "アクセス:", - "use_method": "使用方法:", + "desc": "VoceChat API ドキュメントを参照しで、VoceChat をカスタマイズできます。", + "access": "アクセス：", + "use_method": "使用方法：", "step_1": "1. 自分のサーバーに切り替えください", "step_2": "2. 登録済みのトークンを入力してください", - "step_2_desc": "トークンを取得するには、http headerのX-API-Keyにアクセスしてください、もしくは以下のテキストを直接コピーで使用してください👇", - "last": "3. 最後に各APIにはTry it Outオプションが付いてる、あれを使ってAPIを試すことができます" + "step_2_desc": "トークンを取得するには、http header の X-API-Key にアクセスしてください、もしくは以下のテキストを直接コピーで使用してください👇", + "last": "3. 最後に各 API には Try it Out オプションが付いてる、あれを使って API を試すことができます" } } diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json index 4eaa826a..7b135bd9 100644 --- a/public/locales/zh/setting.json +++ b/public/locales/zh/setting.json @@ -240,6 +240,7 @@ "default_value": "默认值", "remark": "备注", "custom_style_tip": "如果你想更精确控制挂件的样式，可以借助 widget 元素的 ID，自行写 CSS 样式，加到自己的 html 或者 css 文件中，如下所示：", + "param_id": "挂件 ID，可选设置 (服务器版本不低于 v0.3.12)", "param_host": "指定和谁聊天 (用户 ID)", "param_auto_reg": "true:访客无需输入邮箱，直接注册;false:访客需要输入邮箱和用户名注册", "param_login_token": "仅在用您的自有平台账号生成 voce 账号时需要，普通场景请不要填写，详见:https://doc.voce.chat/zh-cn/login-with-other-account", diff --git a/public/widget.js b/public/widget.js index 4f6529a9..0a31d824 100644 --- a/public/widget.js +++ b/public/widget.js @@ -1,6 +1,7 @@ // IIFC ((w, d) => { const { + id = "", hostId = 1, autoReg = "true", loginToken = "", @@ -28,7 +29,7 @@ Object.assign(wrapper.style, styles); wrapper.src = `${ new URL(_src).origin - }/widget.html?host=${hostId}&autoReg=${autoReg}&token=${loginToken}&themeColor=${encodeURIComponent( + }/widget.html?id=${id}&host=${hostId}&autoReg=${autoReg}&token=${loginToken}&themeColor=${encodeURIComponent( themeColor )}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`; wrapper.width = closeWidth; diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx index 16aac2bf..d58db40b 100644 --- a/src/routes/setting/Widget.tsx +++ b/src/routes/setting/Widget.tsx @@ -88,6 +88,11 @@ export default function Widget() { {[ + { + paramKey: "id", + paramDefault: "-", + remarks: t("param_id") + }, { paramKey: "host-id", paramDefault: 1, diff --git a/src/types/user.ts b/src/types/user.ts index 759106ed..6a5feb56 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -18,6 +18,7 @@ export interface User { webhook_url?: string; is_bot?: boolean; log_id?: number; + widget_id?: string; } export type ContactAction = "add" | "remove" | "block" | "unblock"; export type ContactStatus = "added" | "blocked" | ""; diff --git a/src/widget/Popup/Login/index.tsx b/src/widget/Popup/Login/index.tsx index 06741440..e7619cdc 100644 --- a/src/widget/Popup/Login/index.tsx +++ b/src/widget/Popup/Login/index.tsx @@ -23,7 +23,7 @@ const randomText = () => (Math.random() + 1).toString(36).substring(7); const Login = () => { const { t } = useTranslation("widget"); const dispatch = useDispatch(); - const { color, fgColor, from, autoReg, token } = useWidget(); + const { color, fgColor, from, autoReg, token, id } = useWidget(); const { clientId } = useGoogleAuthConfig(); const { config: githubAuthConfig } = useGithubAuthConfig(); const [register, { isLoading, isSuccess, data, error }] = useRegisterMutation(); diff --git a/src/widget/WidgetContext.tsx b/src/widget/WidgetContext.tsx index e77c784b..36dbfb26 100644 --- a/src/widget/WidgetContext.tsx +++ b/src/widget/WidgetContext.tsx @@ -6,6 +6,7 @@ import { getContrastColor, isInIframe } from "../utils"; import { shallowEqual } from "react-redux"; const query = new URLSearchParams(location.search); +const id = decodeURIComponent(query.get("id") || ""); const welcome = decodeURIComponent(query.get("welcome") || ""); const autoReg = decodeURIComponent(query.get("autoReg") || "true") == "true"; const token = decodeURIComponent(query.get("token") || ""); @@ -14,6 +15,7 @@ const from = decodeURIComponent(query.get("from") || "widget.link"); const fgColor = getContrastColor(color); const embed = isInIframe(); const WidgetContext = createContext({ + id, token, autoReg, color, @@ -38,6 +40,7 @@ function WidgetProvider({ children }: { children: ReactNode }) { return (