chore: updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",

public/locales/en/setting.json

@@ -232,6 +232,8 @@
     "clear_desc": "This will remove all the messages data stored on both the server and client side."
   },
   "firebase": {
+    "desc": "Message notification requires Google Firebase as the default method.",
+    "sub_desc": "We have provided an official configuration. Make sure google FCM is accessible from your server and device.",
     "disable": "Disable",
     "use_official": "Use Official Configuration",
     "custom": "Custom",
@@ -242,6 +244,8 @@
     "client_email": "Client Email"
   },
   "smtp": {
+    "desc": "For new message Email notification (advanced feature, upgrade to <0>VoceChat Pro</0>) and new sign-up email verification, we use SMTP. ",
+    "sub_desc": "Please set up your SMTP below.",
     "enable": "Enable",
     "host": "Host",
     "port": "Port",
@@ -252,6 +256,8 @@
     "send_test_email": "Send Test Email"
   },
   "agora": {
+    "desc": "For video and audio calls, we use Agora API. ",
+    "sub_desc": "Each Agora project will enjoy 10,000 mins free API usages per month. Please create a project by yourself. Follow the instruction below to configure your Agora correctly.",
     "enable": "Enable",
     "how_to": "How to setup Agora?"
   },

public/locales/zh/setting.json

@@ -232,6 +232,8 @@
     "clear_desc": "该频道内消息将在客户端和服务端彻底删除"
   },
   "firebase": {
+    "desc": "消息通知需要使用 Google Firebase 作为默认方法。",
+    "sub_desc": "我们提供了官方配置。请确保您的服务器和设备可以访问 Google FCM。",
     "disable": "禁用",
     "use_official": "使用官方配置",
     "custom": "自定义",
@@ -242,6 +244,8 @@
     "client_email": "客户端邮箱"
   },
   "smtp": {
+    "desc": "对于新消息电子邮件通知（高级功能，升级到 <0>VoceChat Pro</0>）和新注册电子邮件验证，我们使用 SMTP。",
+    "sub_desc": "请在下方设置您的 SMTP。",
     "enable": "开启",
     "host": "主机",
     "port": "端口",
@@ -252,6 +256,8 @@
     "send_test_email": "发送测试邮件"
   },
   "agora": {
+    "desc": "对于视频和音频通话，我们使用 Agora API。",
+    "sub_desc": "每个 Agora 项目每月可享受 10,000 分钟的免费 API 使用时间。请自行创建一个项目。按照以下说明正确配置您的 Agora。",
     "enable": "开启",
     "how_to": "如何配置 Agora？"
   },

src/components/ConfigTip.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+type TipProps = { title: ReactNode; desc: ReactNode };
+export const ConfigTip = ({ title, desc }: TipProps) => {
+  return (
+    <div className="flex flex-col text-sm">
+      <h2 className="font-semibold dark:text-white">{title}</h2>
+      <p className="text-gray-400 text-xs">{desc}</p>
+    </div>
+  );
+};

src/routes/setting/BotConfig/index.tsx

@@ -14,16 +14,8 @@ import NameEdit from "./NameEdit";
 import WebhookEdit from "./WebhookEdit";
 import WebhookModal from "./WebhookModal";
 import { shallowEqual } from "react-redux";
+import { ConfigTip } from "@/components/ConfigTip";
 
-type TipProps = { title: string; desc: string };
-const Tip = ({ title, desc }: TipProps) => {
-  return (
-    <div className="flex flex-col text-sm">
-      <h2 className="font-semibold dark:text-white">{title}</h2>
-      <p className="text-gray-400 text-xs">{desc}</p>
-    </div>
-  );
-};
 const tdClass =
   "p-6 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100 align-top";
 type WebhookParams = { webhook?: string; uid: number };
@@ -65,8 +57,8 @@ export default function BotConfig() {
     <>
       <div className="flex flex-col justify-start items-start gap-4">
         <div className="flex flex-col gap-4 max-w-[634px] mb-4">
-          <Tip title={t("bot_tip_title")} desc={t("bot_tip_desc")} />
-          <Tip title={t("webhook_tip_title")} desc={t("webhook_tip_desc")} />
+          <ConfigTip title={t("bot_tip_title")} desc={t("bot_tip_desc")} />
+          <ConfigTip title={t("webhook_tip_title")} desc={t("webhook_tip_desc")} />
         </div>
         <div className="flex flex-col gap-1">
           <h2 className="font-semibold flex gap-4 items-center dark:text-white">

src/routes/setting/config/Agora.tsx

@@ -8,6 +8,7 @@ import Label from "@/components/styled/Label";
 import Toggle from "@/components/styled/Toggle";
 import useConfig from "@/hooks/useConfig";
 import HowToTip from "./HowToTip";
+import { ConfigTip } from "@/components/ConfigTip";
 
 export default function ConfigAgora() {
   const { t } = useTranslation("setting", { keyPrefix: "agora" });
@@ -42,6 +43,7 @@ export default function ConfigAgora() {
   const _url = url || "https://api.agora.io";
   return (
     <div className="setting-container">
+      <ConfigTip title={t("desc")} desc={t("sub_desc")} />
       <div className="inputs">
         <div className="input row">
           <Label className="flex items-center gap-2">

src/routes/setting/config/Firebase.tsx

@@ -8,6 +8,7 @@ import Label from "@/components/styled/Label";
 import StyledRadio from "@/components/styled/Radio";
 import Textarea from "@/components/styled/Textarea";
 import useConfig from "@/hooks/useConfig";
+import { ConfigTip } from "@/components/ConfigTip";
 
 interface IOptions {
   disable: string;
@@ -72,6 +73,7 @@ export default function ConfigFirebase() {
   const { token_url, project_id, private_key, client_email } = values as FirebaseConfig;
   return (
     <div className="setting-container max-md:w-full max-md:h-auto">
+      <ConfigTip title={t("firebase.desc")} desc={t("firebase.sub_desc")} />
       <StyledRadio
         options={Object.values(Options)}
         values={Object.keys(Options)}

src/routes/setting/config/SMTP.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { useSendTestEmailMutation } from "@/app/services/server";
 import { SMTPConfig } from "@/types/server";
@@ -11,6 +11,8 @@ import Label from "@/components/styled/Label";
 import Toggle from "@/components/styled/Toggle";
 import useConfig from "@/hooks/useConfig";
 import HowToTip from "./HowToTip";
+import { ConfigTip } from "@/components/ConfigTip";
+import { Link } from "./Tooltip";
 
 export default function ConfigSMTP() {
   const { t } = useTranslation("setting", { keyPrefix: "smtp" });
@@ -55,6 +57,14 @@ export default function ConfigSMTP() {
   const { host, port, from, username, password, enabled = false } = values as SMTPConfig;
   return (
     <div className="setting-container max-md:w-full">
+      <ConfigTip
+        title={
+          <Trans ns="setting" i18nKey={"smtp.desc"}>
+            <Link newTab={false} to={"/#/setting/license"} />
+          </Trans>
+        }
+        desc={t("sub_desc")}
+      />
       <div className="inputs">
         <div className="input row">
           <Label className="flex items-center gap-2">

src/routes/setting/config/Tooltip.tsx

@@ -7,9 +7,13 @@ import { Trans } from "react-i18next";
 
 import IconQuestion from "@/assets/icons/question.svg";
 
-const Link = ({ to, children }: PropsWithChildren<{ to: string }>) => {
+export const Link = ({
+  to,
+  newTab = true,
+  children
+}: PropsWithChildren<{ to: string; newTab?: boolean }>) => {
   return (
-    <a href={to} className="text-primary-500" target="_blank" rel="noreferrer">
+    <a href={to} className="text-primary-500" target={newTab ? "_blank" : "_self"} rel="noreferrer">
       {children}
     </a>
   );