xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-11-15 13:33:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: support other type file upload

Browse Source
This commit is contained in:
Hk-Gosuto
2024-03-31 23:07:17 +08:00
parent aea5bedb68
commit 80a077a3db
9 changed files with 223 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,66 @@
@import "../styles/animation.scss";
.attach-files {
position: absolute;
left: 30px;
bottom: 32px;
display: flex;
}
.attach-file {
cursor: default;
width: 64px;
height: 64px;
border: rgba($color: #888, $alpha: 0.2) 1px solid;
border-radius: 5px;
margin-right: 10px;
background-size: cover;
background-position: center;
background-color: var(--second);
.attach-file-mask {
width: 100%;
height: 100%;
opacity: 0;
transition: all ease 0.2s;
}
.attach-file-mask:hover {
opacity: 1;
}
.delete-file {
width: 24px;
height: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
float: right;
background-color: var(--white);
}
.attach-file-name {
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
padding: 4px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
// line-height: 1.2;
// max-height: 2.4em;
position: absolute;
top: 0;
left: 0;
}
}
.attach-images {
position: absolute;
left: 30px;
@@ -232,10 +293,12 @@
animation: slide-in ease 0.3s;
$linear: linear-gradient(to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0));
$linear: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0)
);
mask-image: $linear;
@mixin show {
@@ -368,7 +431,7 @@
}
}
.chat-message-user>.chat-message-container {
.chat-message-user > .chat-message-container {
align-items: flex-end;
}
@@ -482,23 +545,27 @@
border: rgba($color: #888, $alpha: 0.2) 1px solid;
}
@media only screen and (max-width: 600px) {
$calc-image-width: calc(100vw/3*2/var(--image-count));
$calc-image-width: calc(100vw / 3 * 2 / var(--image-count));
.chat-message-item-image-multi {
width: $calc-image-width;
height: $calc-image-width;
}
.chat-message-item-image {
max-width: calc(100vw/3*2);
max-width: calc(100vw / 3 * 2);
}
}
@media screen and (min-width: 600px) {
$max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
$image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
$max-image-width: calc(
calc(1200px - var(--sidebar-width)) / 3 * 2 / var(--image-count)
);
$image-width: calc(
calc(var(--window-width) - var(--sidebar-width)) / 3 * 2 /
var(--image-count)
);
.chat-message-item-image-multi {
width: $image-width;
@@ -508,7 +575,7 @@
}
.chat-message-item-image {
max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
max-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2);
}
}
@@ -526,7 +593,7 @@
z-index: 1;
}
.chat-message-user>.chat-message-container>.chat-message-item {
.chat-message-user > .chat-message-container > .chat-message-item {
background-color: var(--second);
&:hover {
@@ -637,7 +704,8 @@
min-height: 68px;
}
.chat-input:focus {}
.chat-input:focus {
}
.chat-input-send {
background-color: var(--primary);
@@ -656,4 +724,4 @@
.chat-input-send {
bottom: 30px;
}
}
}