singlexyz/ChatGPT-Next-Web
1
0
Fork 0
forked from XiaoMo/ChatGPT-Next-Web
Code Pull Requests Activity

feat: replace window.confirm with showConfirm

Browse Source
This commit is contained in:
Yidadaa 2023-06-28 23:40:39 +08:00
parent 0140f771c6
commit 3298961748
8 changed files with 89 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/chat-list.tsx
View File

@ -17,6 +17,7 @@ import { Path } from "../constant";
import { MaskAvatar } from "./mask"; import { MaskAvatar } from "./mask";
import { Mask } from "../store/mask"; import { Mask } from "../store/mask";
import { useRef, useEffect } from "react"; import { useRef, useEffect } from "react";
import { showConfirm } from "./ui-lib";
export function ChatItem(props: { export function ChatItem(props: {
onClick?: () => void; onClick?: () => void;
@ -139,8 +140,11 @@ export function ChatList(props: { narrow?: boolean }) {
navigate(Path.Chat); navigate(Path.Chat);
selectSession(i); selectSession(i);
}} }}
onDelete={() => { onDelete={async () => {
if (!props.narrow || confirm(Locale.Home.DeleteChat)) { if (
!props.narrow ||
(await showConfirm(Locale.Home.DeleteChat))
) {
chatStore.deleteSession(i); chatStore.deleteSession(i);
} }
}} }}

6
app/components/chat.tsx
View File

@ -61,7 +61,7 @@ import Locale from "../locales";
import { IconButton } from "./button"; import { IconButton } from "./button";
import styles from "./chat.module.scss"; import styles from "./chat.module.scss";
import { ListItem, Modal, showToast } from "./ui-lib"; import { ListItem, Modal, showConfirm, showToast } from "./ui-lib";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant"; import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant";
import { Avatar } from "./emoji"; import { Avatar } from "./emoji";
@ -93,8 +93,8 @@ export function SessionConfigModel(props: { onClose: () => void }) {
icon={<ResetIcon />} icon={<ResetIcon />}
bordered bordered
text={Locale.Chat.Config.Reset} text={Locale.Chat.Config.Reset}
onClick={() => { onClick={async () => {
if (confirm(Locale.Memory.ResetConfirm)) { if (await showConfirm(Locale.Memory.ResetConfirm)) {
chatStore.updateCurrentSession( chatStore.updateCurrentSession(
(session) => (session.memoryPrompt = ""), (session) => (session.memoryPrompt = ""),
); );

12
app/components/error.tsx
View File

@ -5,6 +5,7 @@ import ResetIcon from "../icons/reload.svg";
import { ISSUE_URL } from "../constant"; import { ISSUE_URL } from "../constant";
import Locale from "../locales"; import Locale from "../locales";
import { downloadAs } from "../utils"; import { downloadAs } from "../utils";
import { showConfirm } from "./ui-lib";
interface IErrorBoundaryState { interface IErrorBoundaryState {
hasError: boolean; hasError: boolean;
@ -57,10 +58,13 @@ export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
<IconButton <IconButton
icon={<ResetIcon />} icon={<ResetIcon />}
text="Clear All Data" text="Clear All Data"
onClick={() => onClick={async () => {
confirm(Locale.Settings.Actions.ConfirmClearAll) && if (
this.clearAndSaveData() await showConfirm(Locale.Settings.Actions.ConfirmClearAll)
} ) {
this.clearAndSaveData();
}
}}
bordered bordered
/> />
</div> </div>

18
app/components/mask.tsx
View File

@ -15,7 +15,15 @@ import CopyIcon from "../icons/copy.svg";
import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask"; import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
import { ChatMessage, ModelConfig, useAppConfig, useChatStore } from "../store"; import { ChatMessage, ModelConfig, useAppConfig, useChatStore } from "../store";
import { ROLES } from "../client/api"; import { ROLES } from "../client/api";
import { Input, List, ListItem, Modal, Popover, Select } from "./ui-lib"; import {
Input,
List,
ListItem,
Modal,
Popover,
Select,
showConfirm,
} from "./ui-lib";
import { Avatar, AvatarPicker } from "./emoji"; import { Avatar, AvatarPicker } from "./emoji";
import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales"; import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@ -125,10 +133,10 @@ export function MaskConfig(props: {
<input <input
type="checkbox" type="checkbox"
checked={props.mask.syncGlobalConfig} checked={props.mask.syncGlobalConfig}
onChange={(e) => { onChange={async (e) => {
if ( if (
e.currentTarget.checked && e.currentTarget.checked &&
confirm(Locale.Mask.Config.Sync.Confirm) (await showConfirm(Locale.Mask.Config.Sync.Confirm))
) { ) {
props.updateMask((mask) => { props.updateMask((mask) => {
mask.syncGlobalConfig = e.currentTarget.checked; mask.syncGlobalConfig = e.currentTarget.checked;
@ -439,8 +447,8 @@ export function MaskPage() {
<IconButton <IconButton
icon={<DeleteIcon />} icon={<DeleteIcon />}
text={Locale.Mask.Item.Delete} text={Locale.Mask.Item.Delete}
onClick={() => { onClick={async () => {
if (confirm(Locale.Mask.Item.DeleteConfirm)) { if (await showConfirm(Locale.Mask.Item.DeleteConfirm)) {
maskStore.delete(m.id); maskStore.delete(m.id);
} }
}} }}

5
app/components/new-chat.tsx
View File

@ -14,6 +14,7 @@ import Locale from "../locales";
import { useAppConfig, useChatStore } from "../store"; import { useAppConfig, useChatStore } from "../store";
import { MaskAvatar } from "./mask"; import { MaskAvatar } from "./mask";
import { useCommand } from "../command"; import { useCommand } from "../command";
import { showConfirm } from "./ui-lib";
function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) { function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) {
const xmin = Math.max(aRect.x, bRect.x); const xmin = Math.max(aRect.x, bRect.x);
@ -125,8 +126,8 @@ export function NewChat() {
{!state?.fromHome && ( {!state?.fromHome && (
<IconButton <IconButton
text={Locale.NewChat.NotShow} text={Locale.NewChat.NotShow}
onClick={() => { onClick={async () => {
if (confirm(Locale.NewChat.ConfirmNoShow)) { if (await showConfirm(Locale.NewChat.ConfirmNoShow)) {
startChat(); startChat();
config.update( config.update(
(config) => (config.dontShowMaskSplashScreen = true), (config) => (config.dontShowMaskSplashScreen = true),

13
app/components/settings.tsx
View File

@ -18,6 +18,7 @@ import {
PasswordInput, PasswordInput,
Popover, Popover,
Select, Select,
showConfirm,
} from "./ui-lib"; } from "./ui-lib";
import { ModelConfigList } from "./model-config"; import { ModelConfigList } from "./model-config";
@ -377,8 +378,10 @@ export function Settings() {
<div className="window-action-button"> <div className="window-action-button">
<IconButton <IconButton
icon={<ClearIcon />} icon={<ClearIcon />}
onClick={() => { onClick={async () => {
if (confirm(Locale.Settings.Actions.ConfirmClearAll)) { if (
await showConfirm(Locale.Settings.Actions.ConfirmClearAll)
) {
chatStore.clearAllData(); chatStore.clearAllData();
} }
}} }}
@ -389,8 +392,10 @@ export function Settings() {
<div className="window-action-button"> <div className="window-action-button">
<IconButton <IconButton
icon={<ResetIcon />} icon={<ResetIcon />}
onClick={() => { onClick={async () => {
if (confirm(Locale.Settings.Actions.ConfirmResetAll)) { if (
await showConfirm(Locale.Settings.Actions.ConfirmResetAll)
) {
resetConfig(); resetConfig();
} }
}} }}

6
app/components/sidebar.tsx
View File

@ -26,7 +26,7 @@ import {
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { useMobileScreen } from "../utils"; import { useMobileScreen } from "../utils";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { showToast } from "./ui-lib"; import { showConfirm, showToast } from "./ui-lib";
const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, { const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
loading: () => null, loading: () => null,
@ -160,8 +160,8 @@ export function SideBar(props: { className?: string }) {
<div className={styles["sidebar-action"] + " " + styles.mobile}> <div className={styles["sidebar-action"] + " " + styles.mobile}>
<IconButton <IconButton
icon={<CloseIcon />} icon={<CloseIcon />}
onClick={() => { onClick={async () => {
if (confirm(Locale.Home.DeleteChat)) { if (await showConfirm(Locale.Home.DeleteChat)) {
chatStore.deleteSession(chatStore.currentSessionIndex); chatStore.deleteSession(chatStore.currentSessionIndex);
} }
}} }}

45
app/components/ui-lib.tsx
View File

@ -4,6 +4,7 @@ import CloseIcon from "../icons/close.svg";
import EyeIcon from "../icons/eye.svg"; import EyeIcon from "../icons/eye.svg";
import EyeOffIcon from "../icons/eye-off.svg"; import EyeOffIcon from "../icons/eye-off.svg";
import DownIcon from "../icons/down.svg"; import DownIcon from "../icons/down.svg";
import Locale from "../locales";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import React, { HTMLProps, useEffect, useState } from "react"; import React, { HTMLProps, useEffect, useState } from "react";
@ -87,7 +88,7 @@ export function Loading() {
interface ModalProps { interface ModalProps {
title: string; title: string;
children?: JSX.Element | JSX.Element[]; children?: any;
actions?: JSX.Element[]; actions?: JSX.Element[];
onClose?: () => void; onClose?: () => void;
} }
@ -262,3 +263,45 @@ export function Select(
</div> </div>
); );
} }
export function showConfirm(content: any) {
const div = document.createElement("div");
div.className = "modal-mask";
document.body.appendChild(div);
const root = createRoot(div);
const closeModal = () => {
root.unmount();
div.remove();
};
return new Promise<boolean>((resolve) => {
root.render(
<Modal
title={Locale.UI.Confirm}
actions={[
<IconButton
key="cancel"
text={Locale.UI.Cancel}
onClick={() => {
resolve(false);
closeModal();
}}
></IconButton>,
<IconButton
key="confirm"
text={Locale.UI.Confirm}
type="primary"
onClick={() => {
resolve(true);
closeModal();
}}
></IconButton>,
]}
onClose={closeModal}
>
{content}
</Modal>,
);
});
}