Merge pull request #5470 from ChatGPTNextWeb/add_tip_top

add fanyi add top tip

app/components/auth.tsx

@@ -13,7 +13,10 @@ import BotIcon from "../icons/bot.svg";
 import { getClientConfig } from "../config/client";
 import LeftIcon from "@/app/icons/left.svg";
 import { safeLocalStorage } from "@/app/utils";
-
+import {
+  trackSettingsPageGuideToCPaymentClick,
+  trackAuthorizationPageButtonToCPaymentClick,
+} from "../utils/auth-settings-events";
 const storage = safeLocalStorage();
 
 export function AuthPage() {
@@ -22,6 +25,7 @@ export function AuthPage() {
   const goHome = () => navigate(Path.Home);
   const goChat = () => navigate(Path.Chat);
   const goSaas = () => {
+    trackAuthorizationPageButtonToCPaymentClick();
     window.location.href = SAAS_CHAT_URL;
   };
 
@@ -151,11 +155,17 @@ function TopBanner() {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <div className={styles["top-banner-inner"]}>
+      <div className={`${styles["top-banner-inner"]} no-dark`}>
         <Logo className={styles["top-banner-logo"]}></Logo>
         <span>
           {Locale.Auth.TopTips}
-          <a href={SAAS_CHAT_URL} rel="stylesheet">
+          <a
+            href={SAAS_CHAT_URL}
+            rel="stylesheet"
+            onClick={() => {
+              trackSettingsPageGuideToCPaymentClick();
+            }}
+          >
             {Locale.Settings.Access.SaasStart.ChatNow}
             <Arrow style={{ marginLeft: "4px" }} />
           </a>

app/components/markdown.tsx

@@ -21,7 +21,6 @@ import {
 } from "./artifacts";
 import { useChatStore } from "../store";
 import { IconButton } from "./button";
-
 export function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);
   const [hasError, setHasError] = useState(false);

app/components/model-config.module.scss

@@ -0,0 +1,7 @@
+.select-compress-model {
+  width: 60%;
+  select {
+    max-width: 100%;
+    white-space: normal;
+  }
+}

app/components/model-config.tsx

@@ -6,7 +6,7 @@ import { InputRange } from "./input-range";
 import { ListItem, Select } from "./ui-lib";
 import { useAllModels } from "../utils/hooks";
 import { groupBy } from "lodash-es";
-import styles from "./ui-lib.module.scss";
+import styles from "./model-config.module.scss";
 
 export function ModelConfigList(props: {
   modelConfig: ModelConfig;
@@ -243,7 +243,7 @@ export function ModelConfigList(props: {
         subTitle={Locale.Settings.CompressModel.SubTitle}
       >
         <Select
-          className={styles["select-model"]}
+          className={styles["select-compress-model"]}
           aria-label={Locale.Settings.CompressModel.Title}
           value={compressModelValue}
           onChange={(e) => {

app/components/settings.module.scss

@@ -73,7 +73,7 @@
   }
 }
 
-.SubTitle-button {
+.subtitle-button {
   button {
     overflow:visible ;
   }

app/components/settings.tsx

@@ -19,7 +19,7 @@ import ConfirmIcon from "../icons/confirm.svg";
 import ConnectionIcon from "../icons/connection.svg";
 import CloudSuccessIcon from "../icons/cloud-success.svg";
 import CloudFailIcon from "../icons/cloud-fail.svg";
-
+import { trackSettingsPageGuideToCPaymentClick } from "../utils/auth-settings-events";
 import {
   Input,
   List,
@@ -690,7 +690,7 @@ export function Settings() {
 
   const saasStartComponent = (
     <ListItem
-      className={styles["SubTitle-button"]}
+      className={styles["subtitle-button"]}
       title={
         Locale.Settings.Access.SaasStart.Title +
         `${Locale.Settings.Access.SaasStart.Label}`
@@ -706,6 +706,7 @@ export function Settings() {
         type={"primary"}
         text={Locale.Settings.Access.SaasStart.ChatNow}
         onClick={() => {
+          trackSettingsPageGuideToCPaymentClick();
           window.location.href = SAAS_CHAT_URL;
         }}
       />

app/components/ui-lib.module.scss

@@ -260,11 +260,9 @@
 
   .select-with-icon-select {
     height: 100%;
-    max-width: 100%;
     border: var(--border-in-light);
     padding: 10px 35px 10px 10px;
     border-radius: 10px;
-    white-space: normal;
     appearance: none;
     cursor: pointer;
     background-color: var(--white);
@@ -281,15 +279,6 @@
   }
 }
 
-.select-model {
-  width: 60%;
-  .select-with-icon-select {
-    max-width: 100%;
-    white-space: normal;
-  }
-}
-
-
 .modal-input {
   height: 100%;
   width: 100%;

app/locales/cn.ts

@@ -2,6 +2,7 @@ import { getClientConfig } from "../config/client";
 import { SubmitKey } from "../store/config";
 import { SAAS_CHAT_URL } from "@/app/constant";
 
+const SAAS_CHAT_URL_WITH_PARAM = `${SAAS_CHAT_URL}?data=title`;
 const isApp = !!getClientConfig()?.isApp;
 
 const cn = {
@@ -9,10 +10,10 @@ const cn = {
   Error: {
     Unauthorized: isApp
       ? `😆 对话遇到了一些问题，不用慌:
-       \\ 1️⃣ 想要零配置开箱即用，[点击这里立刻开启对话 🚀](${SAAS_CHAT_URL})
+       \\ 1️⃣ 想要零配置开箱即用，[点击这里立刻开启对话 🚀](${SAAS_CHAT_URL_WITH_PARAM})
        \\ 2️⃣ 如果你想消耗自己的 OpenAI 资源，点击[这里](/#/settings)修改设置 ⚙️`
       : `😆 对话遇到了一些问题，不用慌:
-       \ 1️⃣ 想要零配置开箱即用，[点击这里立刻开启对话 🚀](${SAAS_CHAT_URL})
+       \ 1️⃣ 想要零配置开箱即用，[点击这里立刻开启对话 🚀](${SAAS_CHAT_URL_WITH_PARAM})
        \ 2️⃣ 如果你正在使用私有部署版本，点击[这里](/#/auth)输入访问秘钥 🔑
        \ 3️⃣ 如果你想消耗自己的 OpenAI 资源，点击[这里](/#/settings)修改设置 ⚙️
        `,

app/utils/auth-settings-events.ts

@@ -0,0 +1,19 @@
+import { sendGAEvent } from "@next/third-parties/google";
+
+export function trackConversationGuideToCPaymentClick() {
+  sendGAEvent("event", "ConversationGuideToCPaymentClick", { value: 1 });
+}
+
+export function trackAuthorizationPageButtonToCPaymentClick() {
+  sendGAEvent("event", "AuthorizationPageButtonToCPaymentClick", { value: 1 });
+}
+
+export function trackAuthorizationPageBannerToCPaymentClick() {
+  sendGAEvent("event", "AuthorizationPageBannerToCPaymentClick", {
+    value: 1,
+  });
+}
+
+export function trackSettingsPageGuideToCPaymentClick() {
+  sendGAEvent("event", "SettingsPageGuideToCPaymentClick", { value: 1 });
+}