GithubProxy/ChatGPT-Next-Web
1
0
Fork 1
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-05-26 07:30:18 +09:00
Code Issues Packages Projects Releases Wiki Activity

feat: add upload animation

Browse Source
This commit is contained in:
Hk-Gosuto 2024-01-20 16:51:34 +08:00
parent a54a4bc31d
commit 2e8c90fb21
1 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/chat.tsx
View File

@ -337,6 +337,7 @@ function ClearContextDivider() {
function ChatAction(props: { function ChatAction(props: {
text: string; text: string;
icon?: JSX.Element; icon?: JSX.Element;
loding?: boolean;
innerNode?: JSX.Element; innerNode?: JSX.Element;
onClick: () => void; onClick: () => void;
style?: React.CSSProperties; style?: React.CSSProperties;
@ -363,28 +364,38 @@ function ChatAction(props: {
<div <div
className={`${styles["chat-input-action"]} clickable`} className={`${styles["chat-input-action"]} clickable`}
onClick={() => { onClick={() => {
if (props.loding) return;
props.onClick(); props.onClick();
iconRef ? setTimeout(updateWidth, 1) : undefined; iconRef ? setTimeout(updateWidth, 1) : undefined;
}} }}
onMouseEnter={props.icon ? updateWidth : undefined} onMouseEnter={props.icon ? updateWidth : undefined}
onTouchStart={props.icon ? updateWidth : undefined} onTouchStart={props.icon ? updateWidth : undefined}
style={ style={
props.icon props.icon && !props.loding
? ({ ? ({
"--icon-width": `${width.icon}px`, "--icon-width": `${width.icon}px`,
"--full-width": `${width.full}px`, "--full-width": `${width.full}px`,
...props.style, ...props.style,
} as React.CSSProperties) } as React.CSSProperties)
: props.loding
? ({
"--icon-width": `30px`,
"--full-width": `30px`,
...props.style,
} as React.CSSProperties)
: props.style : props.style
} }
> >
{props.icon ? ( {props.icon ? (
<div ref={iconRef} className={styles["icon"]}> <div ref={iconRef} className={styles["icon"]}>
{props.icon} {props.loding ? <LoadingIcon /> : props.icon}
</div> </div>
) : null} ) : null}
<div className={props.icon ? styles["text"] : undefined} ref={textRef}> <div
{props.text} className={props.icon && !props.loding ? styles["text"] : undefined}
ref={textRef}
>
{!props.loding && props.text}
</div> </div>
{props.innerNode} {props.innerNode}
</div> </div>
@ -432,6 +443,8 @@ export function ChatActions(props: {
const navigate = useNavigate(); const navigate = useNavigate();
const chatStore = useChatStore(); const chatStore = useChatStore();
const [uploadLoading, setUploadLoading] = useState(false);
// switch Plugins // switch Plugins
const usePlugins = chatStore.currentSession().mask.usePlugins; const usePlugins = chatStore.currentSession().mask.usePlugins;
function switchUsePlugins() { function switchUsePlugins() {
@ -464,8 +477,16 @@ export function ChatActions(props: {
const onImageSelected = async (e: any) => { const onImageSelected = async (e: any) => {
const file = e.target.files[0]; const file = e.target.files[0];
if (!file) return;
const api = new ClientApi(); const api = new ClientApi();
const uploadFile = await api.file.upload(file); setUploadLoading(true);
const uploadFile = await api.file
.upload(file)
.catch((e) => {
console.error("[Upload]", e);
showToast(prettyObject(e));
})
.finally(() => setUploadLoading(false));
props.imageSelected({ props.imageSelected({
fileName: uploadFile.fileName, fileName: uploadFile.fileName,
fileUrl: uploadFile.filePath, fileUrl: uploadFile.filePath,
@ -595,6 +616,7 @@ export function ChatActions(props: {
<ChatAction <ChatAction
onClick={selectImage} onClick={selectImage}
text="选择图片" text="选择图片"
loding={uploadLoading}
icon={<UploadIcon />} icon={<UploadIcon />}
innerNode={ innerNode={
<input <input