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

refactor(client): update file handling in file upload functions

Browse Source
This commit is contained in:
dakai
2024-10-06 15:30:24 +08:00
parent 1f2dea448a
commit e6ef10e96e
5 changed files with 42 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,37 +71,32 @@
border-radius: 5px;
margin-right: 10px;
.attach-file-name-full {
max-width:calc(62vw);
display:flex;
%attach-file-name-common {
display:flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attach-file-name-full {
@extend %attach-file-name-common;
max-width:calc(62vw);
}
.attach-file-name-half {
@extend %attach-file-name-common;
max-width:calc(45vw);
display:flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attach-file-name-less {
@extend %attach-file-name-common;
max-width:calc(28vw);
display:flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attach-file-name-min {
@extend %attach-file-name-common;
max-width:calc(12vw);
display:flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.attach-file-icon {
min-width: 16px;
max-width: 16px;

31
app/components/chat.tsx
View File

@@ -80,6 +80,7 @@ import {
import type { UploadFile } from "../client/api";
import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
import { uploadImage as uploadFileRemote } from "@/app/utils/chat";
import dynamic from "next/dynamic";
@@ -1193,7 +1194,9 @@ function _Chat() {
setIsLoading(true);
const textContent = getMessageTextContent(userMessage);
const images = getMessageImages(userMessage);
chatStore.onUserInput(textContent, images).then(() => setIsLoading(false));
chatStore
.onUserInput(textContent, images, attachFiles)
.then(() => setIsLoading(false));
inputRef.current?.focus();
};
@@ -1488,20 +1491,20 @@ function _Chat() {
fileInput.multiple = true;
fileInput.onchange = (event: any) => {
setUploading(true);
const files = event.target.files;
const inputFiles = event.target.files;
const imagesData: UploadFile[] = [];
(async () => {
for (let i = 0; i < files.length; i++) {
const file = files[i];
for (let i = 0; i < inputFiles.length; i++) {
const file = inputFiles[i];
try {
const dataUrl = await uploadImageRemote(file);
const dataUrl = await uploadFileRemote(file);
const fileData: UploadFile = { name: file.name, url: dataUrl };
const tokenCount = await countTokens(fileData);
const tokenCount: number = await countTokens(fileData);
fileData.tokenCount = tokenCount;
imagesData.push(fileData);
if (
imagesData.length === 3 ||
imagesData.length === files.length
imagesData.length === inputFiles.length
) {
setUploading(false);
res(imagesData);
@@ -1945,7 +1948,7 @@ function _Chat() {
{getMessageFiles(message).length > 0 && (
<div className={styles["chat-message-item-files"]}>
{getMessageFiles(message).map((file, index) => {
const extension: DefaultExtensionType = file.url
const extension: DefaultExtensionType = file.name
.split(".")
.pop()
?.toLowerCase() as DefaultExtensionType;
@@ -1970,7 +1973,7 @@ function _Chat() {
styles["chat-message-item-file-name"]
}
>
{file.name} {file.tokenCount}
{file.name} {file.tokenCount}K
</div>
</a>
);
@@ -2072,7 +2075,7 @@ function _Chat() {
{attachFiles.length != 0 && (
<div className={styles["attach-files"]}>
{attachFiles.map((file, index) => {
const extension: DefaultExtensionType = file.url
const extension: DefaultExtensionType = file.name
.split(".")
.pop()
?.toLowerCase() as DefaultExtensionType;
@@ -2087,22 +2090,22 @@ function _Chat() {
</div>
{attachImages.length == 0 && (
<div className={styles["attach-file-name-full"]}>
{file.name} {file.tokenCount}
{file.name} {file.tokenCount}K
</div>
)}
{attachImages.length == 1 && (
<div className={styles["attach-file-name-half"]}>
{file.name} {file.tokenCount}
{file.name} {file.tokenCount}K
</div>
)}
{attachImages.length == 2 && (
<div className={styles["attach-file-name-less"]}>
{file.name} {file.tokenCount}
{file.name} {file.tokenCount}K
</div>
)}
{attachImages.length == 3 && (
<div className={styles["attach-file-name-min"]}>
{file.name} {file.tokenCount}
{file.name} {file.tokenCount}K
</div>
)}