add fanyi add top tip

app/components/auth.module.scss

@@ -5,6 +5,54 @@
   height: 100%;
   width: 100%;
   flex-direction: column;
+  .top-banner {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 12px 64px;
+    box-sizing: border-box;
+    background: var(--second);
+    .top-banner-inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      line-height: 150%;
+      span {
+        gap: 8px;
+        a {
+          display: inline-flex;
+          align-items: center;
+          text-decoration: none;
+          margin-left: 8px;
+          color: var(--primary);
+        }
+      }
+    }
+    .top-banner-close {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      right: 48px;
+      transform: translateY(-50%);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .top-banner {
+      padding: 12px 24px 12px 12px;
+      .top-banner-close {
+        right: 10px;
+      }
+      .top-banner-inner {
+        .top-banner-logo {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
 
   .auth-header {
     display: flex;

app/components/auth.tsx

@@ -1,25 +1,34 @@
 import styles from "./auth.module.scss";
 import { IconButton } from "./button";
-
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Path, SAAS_CHAT_URL } from "../constant";
 import { useAccessStore } from "../store";
 import Locale from "../locales";
-
+import Delete from "../icons/close.svg";
+import Arrow from "../icons/arrow.svg";
+import Logo from "../icons/logo.svg";
+import { useMobileScreen } from "@/app/utils";
 import BotIcon from "../icons/bot.svg";
-import { useEffect } from "react";
 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() {
   const navigate = useNavigate();
   const accessStore = useAccessStore();
-
   const goHome = () => navigate(Path.Home);
   const goChat = () => navigate(Path.Chat);
   const goSaas = () => {
+    trackAuthorizationPageButtonToCPaymentClick();
     window.location.href = SAAS_CHAT_URL;
   };
+
   const resetAccessCode = () => {
     accessStore.update((access) => {
       access.openaiApiKey = "";
@@ -36,6 +45,7 @@ export function AuthPage() {
 
   return (
     <div className={styles["auth-page"]}>
+      <TopBanner></TopBanner>
       <div className={styles["auth-header"]}>
         <IconButton
           icon={<LeftIcon />}
@@ -105,3 +115,65 @@ export function AuthPage() {
     </div>
   );
 }
+
+function TopBanner() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const isMobile = useMobileScreen();
+  useEffect(() => {
+    // 检查 localStorage 中是否有标记
+    const bannerDismissed = storage.getItem("bannerDismissed");
+    // 如果标记不存在，存储默认值并显示横幅
+    if (!bannerDismissed) {
+      storage.setItem("bannerDismissed", "false");
+      setIsVisible(true); // 显示横幅
+    } else if (bannerDismissed === "true") {
+      // 如果标记为 "true"，则隐藏横幅
+      setIsVisible(false);
+    }
+  }, []);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const handleClose = () => {
+    setIsVisible(false);
+    storage.setItem("bannerDismissed", "true");
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+  return (
+    <div
+      className={styles["top-banner"]}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <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"
+            onClick={() => {
+              trackSettingsPageGuideToCPaymentClick();
+            }}
+          >
+            {Locale.Settings.Access.SaasStart.ChatNow}
+            <Arrow style={{ marginLeft: "4px" }} />
+          </a>
+        </span>
+      </div>
+      {(isHovered || isMobile) && (
+        <Delete className={styles["top-banner-close"]} onClick={handleClose} />
+      )}
+    </div>
+  );
+}

app/components/button.module.scss

@@ -5,7 +5,6 @@
   align-items: center;
   justify-content: center;
   padding: 10px;
-
   cursor: pointer;
   transition: all 0.3s ease;
   overflow: hidden;

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,6 +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 "./model-config.module.scss";
 
 export function ModelConfigList(props: {
   modelConfig: ModelConfig;
@@ -242,6 +243,7 @@ export function ModelConfigList(props: {
         subTitle={Locale.Settings.CompressModel.SubTitle}
       >
         <Select
+          className={styles["select-compress-model"]}
           aria-label={Locale.Settings.CompressModel.Title}
           value={compressModelValue}
           onChange={(e) => {

app/components/settings.module.scss

@@ -72,3 +72,9 @@
     }
   }
 }
+
+.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,6 +690,7 @@ export function Settings() {
 
   const saasStartComponent = (
     <ListItem
+      className={styles["subtitle-button"]}
       title={
         Locale.Settings.Access.SaasStart.Title +
         `${Locale.Settings.Access.SaasStart.Label}`
@@ -705,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

@@ -62,14 +62,14 @@
     }
   }
 
-  &.vertical{
+  &.vertical {
     flex-direction: column;
     align-items: start;
-    .list-header{
-      .list-item-title{
+    .list-header {
+      .list-item-title {
         margin-bottom: 5px;
       }
-      .list-item-sub-title{
+      .list-item-sub-title {
         margin-bottom: 2px;
       }
     }
@@ -310,7 +310,7 @@
   justify-content: center;
   z-index: 999;
 
-  .selector-item-disabled{
+  .selector-item-disabled {
     opacity: 0.6;
   }
 
@@ -336,3 +336,4 @@
     }
   }
 }
+

app/constant.ts

@@ -502,4 +502,4 @@ export const PLUGINS = [
   { name: "Search Chat", path: Path.SearchChat },
 ];
 
-export const SAAS_CHAT_URL = "https://nextchat.dev";
+export const SAAS_CHAT_URL = "https://nextchat.dev/chat";

app/locales/ar.ts

@@ -1,15 +1,21 @@
 import { SubmitKey } from "../store/config";
 import type { PartialLocaleType } from "./index";
 import { getClientConfig } from "../config/client";
-
+import { SAAS_CHAT_URL } from "@/app/constant";
 const isApp = !!getClientConfig()?.isApp;
 
 const ar: PartialLocaleType = {
   WIP: "قريبًا...",
   Error: {
     Unauthorized: isApp
-      ? "تم اكتشاف مفتاح API غير صالح، يرجى الذهاب إلى [الإعدادات](/#/settings) للتحقق من صحة مفتاح API."
-      : "كلمة المرور غير صحيحة أو فارغة، يرجى الذهاب إلى [تسجيل الدخول](/#/auth) لإدخال كلمة مرور صحيحة، أو أدخل مفتاح OpenAI API الخاص بك في [الإعدادات](/#/settings).",
+      ? `😆 واجهت المحادثة بعض المشكلات، لا داعي للقلق:
+    \\ 1️⃣ إذا كنت ترغب في تجربة دون إعداد، [انقر هنا لبدء المحادثة فورًا 🚀](${SAAS_CHAT_URL})
+    \\ 2️⃣ إذا كنت تريد استخدام موارد OpenAI الخاصة بك، انقر [هنا](/#/settings) لتعديل الإعدادات ⚙️`
+      : `😆 واجهت المحادثة بعض المشكلات، لا داعي للقلق:
+    \ 1️⃣ إذا كنت ترغب في تجربة دون إعداد، [انقر هنا لبدء المحادثة فورًا 🚀](${SAAS_CHAT_URL})
+    \ 2️⃣ إذا كنت تستخدم إصدار النشر الخاص، انقر [هنا](/#/auth) لإدخال مفتاح الوصول 🔑
+    \ 3️⃣ إذا كنت تريد استخدام موارد OpenAI الخاصة بك، انقر [هنا](/#/settings) لتعديل الإعدادات ⚙️
+ `,
   },
   Auth: {
     Title: "تحتاج إلى كلمة مرور",
@@ -18,6 +24,10 @@ const ar: PartialLocaleType = {
     Input: "أدخل رمز الوصول هنا",
     Confirm: "تأكيد",
     Later: "في وقت لاحق",
+    Return: "عودة",
+    SaasTips: "الإعدادات معقدة، أريد استخدامه على الفور",
+    TopTips:
+      "🥳 عرض NextChat AI الأول، افتح الآن OpenAI o1, GPT-4o, Claude-3.5 وأحدث النماذج الكبيرة",
   },
   ChatItem: {
     ChatItemCount: (count: number) => `${count} محادثة`,
@@ -281,6 +291,13 @@ const ar: PartialLocaleType = {
     },
 
     Access: {
+      SaasStart: {
+        Title: "استخدام NextChat AI",
+        Label: "(أفضل حل من حيث التكلفة)",
+        SubTitle:
+          "مدعوم رسميًا من NextChat، جاهز للاستخدام بدون إعداد، يدعم أحدث النماذج الكبيرة مثل OpenAI o1 و GPT-4o و Claude-3.5",
+        ChatNow: "الدردشة الآن",
+      },
       AccessCode: {
         Title: "كلمة المرور للوصول",
         SubTitle: "قام المشرف بتمكين الوصول المشفر",