Skip to content

Commit fbb9385

Browse files
lloydzhoulloydzhou
authored
Merge pull request ChatGPTNextWeb#5782 from ConnectAI-E/style/classname
style: improve classname by clsx
2 parents 6ded4e9 + 18144c3 commit fbb9385

18 files changed

+136
-86
lines changed

‎app/components/auth.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import {
1818
trackSettingsPageGuideToCPaymentClick,
1919
trackAuthorizationPageButtonToCPaymentClick,
2020
} from "../utils/auth-settings-events";
21+
import clsx from "clsx";
22+
2123
const storage = safeLocalStorage();
2224

2325
export function AuthPage() {
@@ -54,7 +56,7 @@ export function AuthPage() {
5456
onClick={() => navigate(Path.Home)}
5557
></IconButton>
5658
</div>
57-
<div className={`no-dark ${styles["auth-logo"]}`}>
59+
<div className={clsx("no-dark", styles["auth-logo"])}>
5860
<BotIcon />
5961
</div>
6062

@@ -163,7 +165,7 @@ function TopBanner() {
163165
onMouseEnter={handleMouseEnter}
164166
onMouseLeave={handleMouseLeave}
165167
>
166-
<div className={`${styles["top-banner-inner"]} no-dark`}>
168+
<div className={clsx(styles["top-banner-inner"], "no-dark")}>
167169
<Logo className={styles["top-banner-logo"]}></Logo>
168170
<span>
169171
{Locale.Auth.TopTips}

‎app/components/button.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from "react";
22

33
import styles from "./button.module.scss";
44
import { CSSProperties } from "react";
5+
import clsx from "clsx";
56

67
export type ButtonType = "primary" | "danger" | null;
78

@@ -22,12 +23,16 @@ export function IconButton(props: {
2223
}) {
2324
return (
2425
<button
25-
className={
26-
styles["icon-button"] +
27-
` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
28-
props.className ?? ""
29-
} clickable ${styles[props.type ?? ""]}`
30-
}
26+
className={clsx(
27+
"clickable",
28+
styles["icon-button"],
29+
{
30+
[styles.border]: props.bordered,
31+
[styles.shadow]: props.shadow,
32+
},
33+
styles[props.type ?? ""],
34+
props.className,
35+
)}
3136
onClick={props.onClick}
3237
title={props.title}
3338
disabled={props.disabled}
@@ -40,10 +45,9 @@ export function IconButton(props: {
4045
{props.icon && (
4146
<div
4247
aria-label={props.text || props.title}
43-
className={
44-
styles["icon-button-icon"] +
45-
` ${props.type === "primary" && "no-dark"}`
46-
}
48+
className={clsx(styles["icon-button-icon"], {
49+
"no-dark": props.type === "primary",
50+
})}
4751
>
4852
{props.icon}
4953
</div>

‎app/components/chat-list.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { Mask } from "../store/mask";
1818
import { useRef, useEffect } from "react";
1919
import { showConfirm } from "./ui-lib";
2020
import { useMobileScreen } from "../utils";
21+
import clsx from "clsx";
2122

2223
export function ChatItem(props: {
2324
onClick?: () => void;
@@ -45,11 +46,11 @@ export function ChatItem(props: {
4546
<Draggable draggableId={`${props.id}`} index={props.index}>
4647
{(provided) => (
4748
<div
48-
className={`${styles["chat-item"]} ${
49-
props.selected &&
50-
(currentPath === Path.Chat || currentPath === Path.Home) &&
51-
styles["chat-item-selected"]
52-
}`}
49+
className={clsx(styles["chat-item"], {
50+
[styles["chat-item-selected"]]:
51+
props.selected &&
52+
(currentPath === Path.Chat || currentPath === Path.Home),
53+
})}
5354
onClick={props.onClick}
5455
ref={(ele) => {
5556
draggableRef.current = ele;
@@ -63,7 +64,7 @@ export function ChatItem(props: {
6364
>
6465
{props.narrow ? (
6566
<div className={styles["chat-item-narrow"]}>
66-
<div className={styles["chat-item-avatar"] + " no-dark"}>
67+
<div className={clsx(styles["chat-item-avatar"], "no-dark")}>
6768
<MaskAvatar
6869
avatar={props.mask.avatar}
6970
model={props.mask.modelConfig.model}

‎app/components/chat.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ import { MsEdgeTTS, OUTPUT_FORMAT } from "../utils/ms_edge_tts";
121121

122122
import { isEmpty } from "lodash-es";
123123
import { getModelProvider } from "../utils/model";
124+
import clsx from "clsx";
124125

125126
const localStorage = safeLocalStorage();
126127

@@ -211,7 +212,7 @@ function PromptToast(props: {
211212
<div className={styles["prompt-toast"]} key="prompt-toast">
212213
{props.showToast && context.length > 0 && (
213214
<div
214-
className={styles["prompt-toast-inner"] + " clickable"}
215+
className={clsx(styles["prompt-toast-inner"], "clickable")}
215216
role="button"
216217
onClick={() => props.setShowModal(true)}
217218
>
@@ -332,10 +333,9 @@ export function PromptHints(props: {
332333
{props.prompts.map((prompt, i) => (
333334
<div
334335
ref={i === selectIndex ? selectedRef : null}
335-
className={
336-
styles["prompt-hint"] +
337-
` ${i === selectIndex ? styles["prompt-hint-selected"] : ""}`
338-
}
336+
className={clsx(styles["prompt-hint"], {
337+
[styles["prompt-hint-selected"]]: i === selectIndex,
338+
})}
339339
key={prompt.title + i.toString()}
340340
onClick={() => props.onPromptSelect(prompt)}
341341
onMouseEnter={() => setSelectIndex(i)}
@@ -395,7 +395,7 @@ export function ChatAction(props: {
395395

396396
return (
397397
<div
398-
className={`${styles["chat-input-action"]} clickable`}
398+
className={clsx(styles["chat-input-action"], "clickable")}
399399
onClick={() => {
400400
props.onClick();
401401
setTimeout(updateWidth, 1);
@@ -1596,9 +1596,12 @@ function _Chat() {
15961596
</div>
15971597
)}
15981598

1599-
<div className={`window-header-title ${styles["chat-body-title"]}`}>
1599+
<div className={clsx("window-header-title", styles["chat-body-title"])}>
16001600
<div
1601-
className={`window-header-main-title ${styles["chat-body-main-title"]}`}
1601+
className={clsx(
1602+
"window-header-main-title",
1603+
styles["chat-body-main-title"],
1604+
)}
16021605
onClickCapture={() => setIsEditingMessage(true)}
16031606
>
16041607
{!session.topic ? DEFAULT_TOPIC : session.topic}
@@ -1872,7 +1875,7 @@ function _Chat() {
18721875
)}
18731876
{getMessageImages(message).length > 1 && (
18741877
<div
1875-
className={styles["chat-message-item-images"]}
1878+
className={clsx(styles["chat-message-item-images"])}
18761879
style={
18771880
{
18781881
"--image-count": getMessageImages(message).length,
@@ -1934,11 +1937,10 @@ function _Chat() {
19341937
setUserInput={setUserInput}
19351938
/>
19361939
<label
1937-
className={`${styles["chat-input-panel-inner"]} ${
1938-
attachImages.length != 0
1939-
? styles["chat-input-panel-inner-attach"]
1940-
: ""
1941-
}`}
1940+
className={clsx(styles["chat-input-panel-inner"], {
1941+
[styles["chat-input-panel-inner-attach"]]:
1942+
attachImages.length !== 0,
1943+
})}
19421944
htmlFor="chat-input"
19431945
>
19441946
<textarea

‎app/components/exporter.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
4040
import { getClientConfig } from "../config/client";
4141
import { type ClientApi, getClientApi } from "../client/api";
4242
import { getMessageTextContent } from "../utils";
43+
import clsx from "clsx";
4344

4445
const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
4546
loading: () => <LoadingIcon />,
@@ -118,9 +119,10 @@ function Steps<
118119
return (
119120
<div
120121
key={i}
121-
className={`${styles["step"]} ${
122-
styles[i <= props.index ? "step-finished" : ""]
123-
} ${i === props.index && styles["step-current"]} clickable`}
122+
className={clsx("clickable", styles["step"], {
123+
[styles["step-finished"]]: i <= props.index,
124+
[styles["step-current"]]: i === props.index,
125+
})}
124126
onClick={() => {
125127
props.onStepChange?.(i);
126128
}}
@@ -525,11 +527,11 @@ export function ImagePreviewer(props: {
525527
messages={props.messages}
526528
/>
527529
<div
528-
className={`${styles["preview-body"]} ${styles["default-theme"]}`}
530+
className={clsx(styles["preview-body"], styles["default-theme"])}
529531
ref={previewRef}
530532
>
531533
<div className={styles["chat-info"]}>
532-
<div className={styles["logo"] + " no-dark"}>
534+
<div className={clsx(styles["logo"], "no-dark")}>
533535
<NextImage
534536
src={ChatGptIcon.src}
535537
alt="logo"
@@ -570,7 +572,7 @@ export function ImagePreviewer(props: {
570572
{props.messages.map((m, i) => {
571573
return (
572574
<div
573-
className={styles["message"] + " " + styles["message-" + m.role]}
575+
className={clsx(styles["message"], styles["message-" + m.role])}
574576
key={i}
575577
>
576578
<div className={styles["avatar"]}>

‎app/components/home.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
require("../polyfill");
44

55
import { useState, useEffect } from "react";
6-
76
import styles from "./home.module.scss";
87

98
import BotIcon from "../icons/bot.svg";
@@ -29,10 +28,11 @@ import { AuthPage } from "./auth";
2928
import { getClientConfig } from "../config/client";
3029
import { type ClientApi, getClientApi } from "../client/api";
3130
import { useAccessStore } from "../store";
31+
import clsx from "clsx";
3232

3333
export function Loading(props: { noLogo?: boolean }) {
3434
return (
35-
<div className={styles["loading-content"] + " no-dark"}>
35+
<div className={clsx("no-dark", styles["loading-content"])}>
3636
{!props.noLogo && <BotIcon />}
3737
<LoadingIcon />
3838
</div>
@@ -179,7 +179,11 @@ function Screen() {
179179
if (isSdNew) return <Sd />;
180180
return (
181181
<>
182-
<SideBar className={isHome ? styles["sidebar-show"] : ""} />
182+
<SideBar
183+
className={clsx({
184+
[styles["sidebar-show"]]: isHome,
185+
})}
186+
/>
183187
<WindowContent>
184188
<Routes>
185189
<Route path={Path.Home} element={<Chat />} />
@@ -197,9 +201,10 @@ function Screen() {
197201

198202
return (
199203
<div
200-
className={`${styles.container} ${
201-
shouldTightBorder ? styles["tight-container"] : styles.container
202-
} ${getLang() === "ar" ? styles["rtl-screen"] : ""}`}
204+
className={clsx(styles.container, {
205+
[styles["tight-container"]]: shouldTightBorder,
206+
[styles["rtl-screen"]]: getLang() === "ar",
207+
})}
203208
>
204209
{renderContent()}
205210
</div>

‎app/components/input-range.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from "react";
22
import styles from "./input-range.module.scss";
3+
import clsx from "clsx";
34

45
interface InputRangeProps {
56
onChange: React.ChangeEventHandler<HTMLInputElement>;
@@ -23,7 +24,7 @@ export function InputRange({
2324
aria,
2425
}: InputRangeProps) {
2526
return (
26-
<div className={styles["input-range"] + ` ${className ?? ""}`}>
27+
<div className={clsx(styles["input-range"], className)}>
2728
{title || value}
2829
<input
2930
aria-label={aria}

‎app/components/markdown.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { useChatStore } from "../store";
2323
import { IconButton } from "./button";
2424

2525
import { useAppConfig } from "../store/config";
26+
import clsx from "clsx";
2627

2728
export function Mermaid(props: { code: string }) {
2829
const ref = useRef<HTMLDivElement>(null);
@@ -57,7 +58,7 @@ export function Mermaid(props: { code: string }) {
5758

5859
return (
5960
<div
60-
className="no-dark mermaid"
61+
className={clsx("no-dark", "mermaid")}
6162
style={{
6263
cursor: "pointer",
6364
overflow: "auto",
@@ -193,7 +194,12 @@ function CustomCode(props: { children: any; className?: string }) {
193194
const renderShowMoreButton = () => {
194195
if (showToggle && enableCodeFold && collapsed) {
195196
return (
196-
<div className={`show-hide-button ${collapsed ? "collapsed" : "expanded"}`}>
197+
<div
198+
className={clsx("show-hide-button", {
199+
collapsed,
200+
expanded: !collapsed,
201+
})}
202+
>
197203
<button onClick={toggleCollapsed}>{Locale.NewChat.More}</button>
198204
</div>
199205
);
@@ -203,7 +209,7 @@ function CustomCode(props: { children: any; className?: string }) {
203209
return (
204210
<>
205211
<code
206-
className={props?.className}
212+
className={clsx(props?.className)}
207213
ref={ref}
208214
style={{
209215
maxHeight: enableCodeFold && collapsed ? "400px" : "none",

‎app/components/mask.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import {
5555
OnDragEndResponder,
5656
} from "@hello-pangea/dnd";
5757
import { getMessageTextContent } from "../utils";
58+
import clsx from "clsx";
5859

5960
// drag and drop helper function
6061
function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {
@@ -588,7 +589,7 @@ export function MaskPage() {
588589
</div>
589590
<div className={styles["mask-title"]}>
590591
<div className={styles["mask-name"]}>{m.name}</div>
591-
<div className={styles["mask-info"] + " one-line"}>
592+
<div className={clsx(styles["mask-info"], "one-line")}>
592593
{`${Locale.Mask.Item.Info(m.context.length)} / ${
593594
ALL_LANG_OPTIONS[m.lang]
594595
} / ${m.modelConfig.model}`}

0 commit comments

Comments
 (0)