7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(app): update styles in chat module

This commit is contained in:
dakai 2024-10-05 11:44:03 +08:00
parent 8878e238d2
commit 9de7a9e138
2 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/chat.module.scss
View File

@ -61,15 +61,25 @@
.attach-file { .attach-file {
cursor: default; cursor: default;
display: flex;
//flex-direction: row;
column-gap: 4px;
//justify-content: flex-start;
color: var(--black);
font-size: 14px;
//width: 64px; //width: 64px;
width: 14px; //width: 14px;
height: 14px; height: 14px;
//border: rgba($color: #888, $alpha: 0.2) 1px solid; //border: rgba($color: #888, $alpha: 0.2) 1px solid;
border-radius: 5px; border-radius: 5px;
margin-right: 10px; margin-right: 10px;
background-size: cover; //background-size: cover;
background-position: center; //background-position: center;
background-color: var(--white); //background-color: var(--white);
.attach-file-icon {
width: 32px;
}
.attach-image-mask { .attach-image-mask {
width: 100%; width: 100%;
@ -86,11 +96,11 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
cursor: pointer; cursor: pointer;
display: flex; //display: flex;
align-items: center; //align-items: center;
justify-content: center; //justify-content: center;
border-radius: 5px; border-radius: 5px;
float: right; float: left;
background-color: var(--white); background-color: var(--white);
} }
} }

16
app/components/chat.tsx
View File

@ -98,6 +98,7 @@ import {
} from "./ui-lib"; } from "./ui-lib";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { FileIcon, defaultStyles } from "react-file-icon"; import { FileIcon, defaultStyles } from "react-file-icon";
import type { DefaultExtensionType } from "react-file-icon";
import { import {
CHAT_PAGE_SIZE, CHAT_PAGE_SIZE,
DEFAULT_TTS_ENGINE, DEFAULT_TTS_ENGINE,
@ -2030,13 +2031,20 @@ function _Chat() {
{attachFiles.length != 0 && ( {attachFiles.length != 0 && (
<div className={styles["attach-files"]}> <div className={styles["attach-files"]}>
{attachFiles.map((file, index) => { {attachFiles.map((file, index) => {
const extension: DefaultExtensionType = file
.split(".")
.pop()
?.toLowerCase() as DefaultExtensionType;
const style = defaultStyles[extension];
return ( return (
<div key={index} className={styles["attach-file"]}>
<div <div
key={index} className={styles["attach-file-icon"]}
className={styles["attach-file"]} key={extension}
style={{ backgroundImage: `url("${file}")` }}
> >
<FileIcon extension="csv" {...defaultStyles["csv"]} /> <FileIcon {...style} />
</div>
<span>{extension}</span>
<div className={styles["attach-image-mask"]}> <div className={styles["attach-image-mask"]}>
<DeleteImageButton <DeleteImageButton
deleteImage={() => { deleteImage={() => {