mirror of
https://github.com/Yidadaa/ChatGPT-Next-Web.git
synced 2025-08-21 02:36:19 +08:00
feat: improve components structure
This commit is contained in:
Dogtiti
1
app/components/new-chat/index.tsx
Normal file
1
app/components/new-chat/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./new-chat";
|
||||
125
app/components/new-chat/new-chat.module.scss
Normal file
125
app/components/new-chat/new-chat.module.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
@import "../../styles/animation.scss";
|
||||
|
||||
.new-chat {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.mask-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
animation: slide-in-from-top ease 0.3s;
|
||||
}
|
||||
|
||||
.mask-cards {
|
||||
display: flex;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 20px;
|
||||
animation: slide-in ease 0.3s;
|
||||
|
||||
.mask-card {
|
||||
padding: 20px 10px;
|
||||
border: var(--border-in-light);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: 14px;
|
||||
background-color: var(--white);
|
||||
transform: scale(1);
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(-15deg) translateY(5px);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
transform: rotate(15deg) translateY(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 1vh;
|
||||
animation: slide-in ease 0.35s;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
animation: slide-in ease 0.4s;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 2vh;
|
||||
animation: slide-in ease 0.45s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
|
||||
.skip {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.masks {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
|
||||
$linear: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 1),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
|
||||
-webkit-mask-image: $linear;
|
||||
mask-image: $linear;
|
||||
|
||||
animation: slide-in ease 0.5s;
|
||||
|
||||
.mask-row {
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
@for $i from 1 to 10 {
|
||||
&:nth-child(#{$i * 2}) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
border: var(--border-in-light);
|
||||
box-shadow: var(--card-shadow);
|
||||
background-color: var(--white);
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
max-width: 8em;
|
||||
transform: scale(1);
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px) scale(1.1);
|
||||
z-index: 999;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.mask-name {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
184
app/components/new-chat/new-chat.tsx
Normal file
184
app/components/new-chat/new-chat.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Path, SlotID } from "@/app/constant";
|
||||
import { IconButton } from "@/app/components/button";
|
||||
import { EmojiAvatar } from "@/app/components/emoji";
|
||||
import styles from "./new-chat.module.scss";
|
||||
|
||||
import LeftIcon from "@/app/icons/left.svg";
|
||||
import LightningIcon from "@/app/icons/lightning.svg";
|
||||
import EyeIcon from "@/app/icons/eye.svg";
|
||||
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { Mask, useMaskStore } from "@/app/store/mask";
|
||||
import Locale from "@/app/locales";
|
||||
import { useAppConfig, useChatStore } from "@/app/store";
|
||||
import { MaskAvatar } from "@/app/components/mask";
|
||||
import { useCommand } from "@/app/command";
|
||||
import { showConfirm } from "@/app/components/ui-lib";
|
||||
import { BUILTIN_MASK_STORE } from "@/app/masks";
|
||||
|
||||
function MaskItem(props: { mask: Mask; onClick?: () => void }) {
|
||||
return (
|
||||
<div className={styles["mask"]} onClick={props.onClick}>
|
||||
<MaskAvatar
|
||||
avatar={props.mask.avatar}
|
||||
model={props.mask.modelConfig.model}
|
||||
/>
|
||||
<div className={styles["mask-name"] + " one-line"}>{props.mask.name}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function useMaskGroup(masks: Mask[]) {
|
||||
const [groups, setGroups] = useState<Mask[][]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const computeGroup = () => {
|
||||
const appBody = document.getElementById(SlotID.AppBody);
|
||||
if (!appBody || masks.length === 0) return;
|
||||
|
||||
const rect = appBody.getBoundingClientRect();
|
||||
const maxWidth = rect.width;
|
||||
const maxHeight = rect.height * 0.6;
|
||||
const maskItemWidth = 120;
|
||||
const maskItemHeight = 50;
|
||||
|
||||
const randomMask = () => masks[Math.floor(Math.random() * masks.length)];
|
||||
let maskIndex = 0;
|
||||
const nextMask = () => masks[maskIndex++ % masks.length];
|
||||
|
||||
const rows = Math.ceil(maxHeight / maskItemHeight);
|
||||
const cols = Math.ceil(maxWidth / maskItemWidth);
|
||||
|
||||
const newGroups = new Array(rows)
|
||||
.fill(0)
|
||||
.map((_, _i) =>
|
||||
new Array(cols)
|
||||
.fill(0)
|
||||
.map((_, j) => (j < 1 || j > cols - 2 ? randomMask() : nextMask())),
|
||||
);
|
||||
|
||||
setGroups(newGroups);
|
||||
};
|
||||
|
||||
computeGroup();
|
||||
|
||||
window.addEventListener("resize", computeGroup);
|
||||
return () => window.removeEventListener("resize", computeGroup);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return groups;
|
||||
}
|
||||
|
||||
export function NewChat() {
|
||||
const chatStore = useChatStore();
|
||||
const maskStore = useMaskStore();
|
||||
|
||||
const masks = maskStore.getAll();
|
||||
const groups = useMaskGroup(masks);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const config = useAppConfig();
|
||||
|
||||
const maskRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { state } = useLocation();
|
||||
|
||||
const startChat = (mask?: Mask) => {
|
||||
setTimeout(() => {
|
||||
chatStore.newSession(mask);
|
||||
navigate(Path.Chat);
|
||||
}, 10);
|
||||
};
|
||||
|
||||
useCommand({
|
||||
mask: (id) => {
|
||||
try {
|
||||
const mask = maskStore.get(id) ?? BUILTIN_MASK_STORE.get(id);
|
||||
startChat(mask ?? undefined);
|
||||
} catch {
|
||||
console.error("[New Chat] failed to create chat from mask id=", id);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (maskRef.current) {
|
||||
maskRef.current.scrollLeft =
|
||||
(maskRef.current.scrollWidth - maskRef.current.clientWidth) / 2;
|
||||
}
|
||||
}, [groups]);
|
||||
|
||||
return (
|
||||
<div className={styles["new-chat"]}>
|
||||
<div className={styles["mask-header"]}>
|
||||
<IconButton
|
||||
icon={<LeftIcon />}
|
||||
text={Locale.NewChat.Return}
|
||||
onClick={() => navigate(Path.Home)}
|
||||
></IconButton>
|
||||
{!state?.fromHome && (
|
||||
<IconButton
|
||||
text={Locale.NewChat.NotShow}
|
||||
onClick={async () => {
|
||||
if (await showConfirm(Locale.NewChat.ConfirmNoShow)) {
|
||||
startChat();
|
||||
config.update(
|
||||
(config) => (config.dontShowMaskSplashScreen = true),
|
||||
);
|
||||
}
|
||||
}}
|
||||
></IconButton>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles["mask-cards"]}>
|
||||
<div className={styles["mask-card"]}>
|
||||
<EmojiAvatar avatar="1f606" size={24} />
|
||||
</div>
|
||||
<div className={styles["mask-card"]}>
|
||||
<EmojiAvatar avatar="1f916" size={24} />
|
||||
</div>
|
||||
<div className={styles["mask-card"]}>
|
||||
<EmojiAvatar avatar="1f479" size={24} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["title"]}>{Locale.NewChat.Title}</div>
|
||||
<div className={styles["sub-title"]}>{Locale.NewChat.SubTitle}</div>
|
||||
|
||||
<div className={styles["actions"]}>
|
||||
<IconButton
|
||||
text={Locale.NewChat.More}
|
||||
onClick={() => navigate(Path.Masks)}
|
||||
icon={<EyeIcon />}
|
||||
bordered
|
||||
shadow
|
||||
/>
|
||||
|
||||
<IconButton
|
||||
text={Locale.NewChat.Skip}
|
||||
onClick={() => startChat()}
|
||||
icon={<LightningIcon />}
|
||||
type="primary"
|
||||
shadow
|
||||
className={styles["skip"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles["masks"]} ref={maskRef}>
|
||||
{groups.map((masks, i) => (
|
||||
<div key={i} className={styles["mask-row"]}>
|
||||
{masks.map((mask, index) => (
|
||||
<MaskItem
|
||||
key={index}
|
||||
mask={mask}
|
||||
onClick={() => startChat(mask)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user