Skip to content

Commit 7f3f6f1

Browse files
DogtitiDogtiti
authored
Merge pull request #5528 from ChatGPTNextWeb/add_tip_top
fix url i18
2 parents 68702bf + ea04595 commit 7f3f6f1

33 files changed

+654
-76
lines changed

‎app/components/auth.module.scss‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,78 @@
11
.auth-page {
22
display: flex;
3-
justify-content: center;
3+
justify-content: flex-start;
44
align-items: center;
55
height: 100%;
66
width: 100%;
77
flex-direction: column;
8+
.top-banner {
9+
position: relative;
10+
width: 100%;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
padding: 12px 64px;
15+
box-sizing: border-box;
16+
background: var(--second);
17+
.top-banner-inner {
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
font-size: 14px;
22+
line-height: 150%;
23+
span {
24+
gap: 8px;
25+
a {
26+
display: inline-flex;
27+
align-items: center;
28+
text-decoration: none;
29+
margin-left: 8px;
30+
color: var(--primary);
31+
}
32+
}
33+
}
34+
.top-banner-close {
35+
cursor: pointer;
36+
position: absolute;
37+
top: 50%;
38+
right: 48px;
39+
transform: translateY(-50%);
40+
}
41+
}
42+
43+
@media (max-width: 600px) {
44+
.top-banner {
45+
padding: 12px 24px 12px 12px;
46+
.top-banner-close {
47+
right: 10px;
48+
}
49+
.top-banner-inner {
50+
.top-banner-logo {
51+
margin-right: 8px;
52+
}
53+
}
54+
}
55+
}
56+
57+
.auth-header {
58+
display: flex;
59+
justify-content: space-between;
60+
width: 100%;
61+
padding: 10px;
62+
box-sizing: border-box;
63+
animation: slide-in-from-top ease 0.3s;
64+
}
865

966
.auth-logo {
67+
margin-top: 10vh;
1068
transform: scale(1.4);
1169
}
1270

1371
.auth-title {
1472
font-size: 24px;
1573
font-weight: bold;
1674
line-height: 2;
75+
margin-bottom: 1vh;
1776
}
1877

1978
.auth-tips {
@@ -24,6 +83,10 @@
2483
margin: 3vh 0;
2584
}
2685

86+
.auth-input-second {
87+
margin: 0 0 3vh 0;
88+
}
89+
2790
.auth-actions {
2891
display: flex;
2992
justify-content: center;

‎app/components/auth.tsx‎

Lines changed: 91 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
import styles from "./auth.module.scss";
22
import { IconButton } from "./button";
3-
3+
import { useState, useEffect } from "react";
44
import { useNavigate } from "react-router-dom";
5-
import { Path } from "../constant";
5+
import { Path, SAAS_CHAT_URL } from "../constant";
66
import { useAccessStore } from "../store";
77
import Locale from "../locales";
8-
8+
import Delete from "../icons/close.svg";
9+
import Arrow from "../icons/arrow.svg";
10+
import Logo from "../icons/logo.svg";
11+
import { useMobileScreen } from "@/app/utils";
912
import BotIcon from "../icons/bot.svg";
10-
import { useEffect } from "react";
1113
import { getClientConfig } from "../config/client";
14+
import LeftIcon from "@/app/icons/left.svg";
15+
import { safeLocalStorage } from "@/app/utils";
16+
import {
17+
trackSettingsPageGuideToCPaymentClick,
18+
trackAuthorizationPageButtonToCPaymentClick,
19+
} from "../utils/auth-settings-events";
20+
const storage = safeLocalStorage();
1221

1322
export function AuthPage() {
1423
const navigate = useNavigate();
1524
const accessStore = useAccessStore();
16-
1725
const goHome = () => navigate(Path.Home);
1826
const goChat = () => navigate(Path.Chat);
27+
const goSaas = () => {
28+
trackAuthorizationPageButtonToCPaymentClick();
29+
window.location.href = SAAS_CHAT_URL;
30+
};
31+
1932
const resetAccessCode = () => {
2033
accessStore.update((access) => {
2134
access.openaiApiKey = "";
@@ -32,6 +45,14 @@ export function AuthPage() {
3245

3346
return (
3447
<div className={styles["auth-page"]}>
48+
<TopBanner></TopBanner>
49+
<div className={styles["auth-header"]}>
50+
<IconButton
51+
icon={<LeftIcon />}
52+
text={Locale.Auth.Return}
53+
onClick={() => navigate(Path.Home)}
54+
></IconButton>
55+
</div>
3556
<div className={`no-dark ${styles["auth-logo"]}`}>
3657
<BotIcon />
3758
</div>
@@ -65,7 +86,7 @@ export function AuthPage() {
6586
}}
6687
/>
6788
<input
68-
className={styles["auth-input"]}
89+
className={styles["auth-input-second"]}
6990
type="password"
7091
placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
7192
value={accessStore.googleApiKey}
@@ -85,13 +106,74 @@ export function AuthPage() {
85106
onClick={goChat}
86107
/>
87108
<IconButton
88-
text={Locale.Auth.Later}
109+
text={Locale.Auth.SaasTips}
89110
onClick={() => {
90-
resetAccessCode();
91-
goHome();
111+
goSaas();
92112
}}
93113
/>
94114
</div>
95115
</div>
96116
);
97117
}
118+
119+
function TopBanner() {
120+
const [isHovered, setIsHovered] = useState(false);
121+
const [isVisible, setIsVisible] = useState(true);
122+
const isMobile = useMobileScreen();
123+
useEffect(() => {
124+
// 检查 localStorage 中是否有标记
125+
const bannerDismissed = storage.getItem("bannerDismissed");
126+
// 如果标记不存在，存储默认值并显示横幅
127+
if (!bannerDismissed) {
128+
storage.setItem("bannerDismissed", "false");
129+
setIsVisible(true); // 显示横幅
130+
} else if (bannerDismissed === "true") {
131+
// 如果标记为 "true"，则隐藏横幅
132+
setIsVisible(false);
133+
}
134+
}, []);
135+
136+
const handleMouseEnter = () => {
137+
setIsHovered(true);
138+
};
139+
140+
const handleMouseLeave = () => {
141+
setIsHovered(false);
142+
};
143+
144+
const handleClose = () => {
145+
setIsVisible(false);
146+
storage.setItem("bannerDismissed", "true");
147+
};
148+
149+
if (!isVisible) {
150+
return null;
151+
}
152+
return (
153+
<div
154+
className={styles["top-banner"]}
155+
onMouseEnter={handleMouseEnter}
156+
onMouseLeave={handleMouseLeave}
157+
>
158+
<div className={`${styles["top-banner-inner"]} no-dark`}>
159+
<Logo className={styles["top-banner-logo"]}></Logo>
160+
<span>
161+
{Locale.Auth.TopTips}
162+
<a
163+
href={SAAS_CHAT_URL}
164+
rel="stylesheet"
165+
onClick={() => {
166+
trackSettingsPageGuideToCPaymentClick();
167+
}}
168+
>
169+
{Locale.Settings.Access.SaasStart.ChatNow}
170+
<Arrow style={{ marginLeft: "4px" }} />
171+
</a>
172+
</span>
173+
</div>
174+
{(isHovered || isMobile) && (
175+
<Delete className={styles["top-banner-close"]} onClick={handleClose} />
176+
)}
177+
</div>
178+
);
179+
}

‎app/components/button.module.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
align-items: center;
66
justify-content: center;
77
padding: 10px;
8-
98
cursor: pointer;
109
transition: all 0.3s ease;
1110
overflow: hidden;

‎app/components/markdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
} from "./artifacts";
2222
import { useChatStore } from "../store";
2323
import { IconButton } from "./button";
24+
2425
import { useAppConfig } from "../store/config";
2526

2627
export function Mermaid(props: { code: string }) {

‎app/components/model-config.module.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.select-compress-model {
2+
width: 60%;
3+
select {
4+
max-width: 100%;
5+
white-space: normal;
6+
}
7+
}

‎app/components/model-config.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { InputRange } from "./input-range";
66
import { ListItem, Select } from "./ui-lib";
77
import { useAllModels } from "../utils/hooks";
88
import { groupBy } from "lodash-es";
9+
import styles from "./model-config.module.scss";
910

1011
export function ModelConfigList(props: {
1112
modelConfig: ModelConfig;
@@ -242,6 +243,7 @@ export function ModelConfigList(props: {
242243
subTitle={Locale.Settings.CompressModel.SubTitle}
243244
>
244245
<Select
246+
className={styles["select-compress-model"]}
245247
aria-label={Locale.Settings.CompressModel.Title}
246248
value={compressModelValue}
247249
onChange={(e) => {

‎app/components/settings.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,9 @@
7272
}
7373
}
7474
}
75+
76+
.subtitle-button {
77+
button {
78+
overflow:visible ;
79+
}
80+
}

‎app/components/settings.tsx‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import CopyIcon from "../icons/copy.svg";
99
import ClearIcon from "../icons/clear.svg";
1010
import LoadingIcon from "../icons/three-dots.svg";
1111
import EditIcon from "../icons/edit.svg";
12+
import FireIcon from "../icons/fire.svg";
1213
import EyeIcon from "../icons/eye.svg";
1314
import DownloadIcon from "../icons/download.svg";
1415
import UploadIcon from "../icons/upload.svg";
@@ -18,7 +19,7 @@ import ConfirmIcon from "../icons/confirm.svg";
1819
import ConnectionIcon from "../icons/connection.svg";
1920
import CloudSuccessIcon from "../icons/cloud-success.svg";
2021
import CloudFailIcon from "../icons/cloud-fail.svg";
21-
22+
import { trackSettingsPageGuideToCPaymentClick } from "../utils/auth-settings-events";
2223
import {
2324
Input,
2425
List,
@@ -69,6 +70,7 @@ import {
6970
UPDATE_URL,
7071
Stability,
7172
Iflytek,
73+
SAAS_CHAT_URL,
7274
} from "../constant";
7375
import { Prompt, SearchService, usePromptStore } from "../store/prompt";
7476
import { ErrorBoundary } from "./error";
@@ -686,6 +688,31 @@ export function Settings() {
686688
</ListItem>
687689
);
688690

691+
const saasStartComponent = (
692+
<ListItem
693+
className={styles["subtitle-button"]}
694+
title={
695+
Locale.Settings.Access.SaasStart.Title +
696+
`${Locale.Settings.Access.SaasStart.Label}`
697+
}
698+
subTitle={Locale.Settings.Access.SaasStart.SubTitle}
699+
>
700+
<IconButton
701+
aria={
702+
Locale.Settings.Access.SaasStart.Title +
703+
Locale.Settings.Access.SaasStart.ChatNow
704+
}
705+
icon={<FireIcon />}
706+
type={"primary"}
707+
text={Locale.Settings.Access.SaasStart.ChatNow}
708+
onClick={() => {
709+
trackSettingsPageGuideToCPaymentClick();
710+
window.location.href = SAAS_CHAT_URL;
711+
}}
712+
/>
713+
</ListItem>
714+
);
715+
689716
const useCustomConfigComponent = // Conditionally render the following ListItem based on clientConfig.isApp
690717
!clientConfig?.isApp && ( // only show if isApp is false
691718
<ListItem
@@ -1558,6 +1585,7 @@ export function Settings() {
15581585
</List>
15591586

15601587
<List id={SlotID.CustomModel}>
1588+
{saasStartComponent}
15611589
{accessCodeComponent}
15621590

15631591
{!accessStore.hideUserApiKey && (

‎app/components/ui-lib.module.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,14 @@
6262
}
6363
}
6464

65-
&.vertical{
65+
&.vertical {
6666
flex-direction: column;
6767
align-items: start;
68-
.list-header{
69-
.list-item-title{
68+
.list-header {
69+
.list-item-title {
7070
margin-bottom: 5px;
7171
}
72-
.list-item-sub-title{
72+
.list-item-sub-title {
7373
margin-bottom: 2px;
7474
}
7575
}
@@ -310,7 +310,7 @@
310310
justify-content: center;
311311
z-index: 999;
312312

313-
.selector-item-disabled{
313+
.selector-item-disabled {
314314
opacity: 0.6;
315315
}
316316

@@ -336,3 +336,4 @@
336336
}
337337
}
338338
}
339+

‎app/constant.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -501,3 +501,6 @@ export const PLUGINS = [
501501
{ name: "Stable Diffusion", path: Path.Sd },
502502
{ name: "Search Chat", path: Path.SearchChat },
503503
];
504+
505+
export const SAAS_CHAT_URL = "https://nextchat.dev/chat";
506+
export const SAAS_CHAT_UTM_URL = "https://nextchat.dev/chat?utm=github";

0 commit comments

Comments
 (0)