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

6
app/components/chat.tsx
View File

@ -61,7 +61,7 @@ import Locale from "../locales";
import { IconButton } from "./button";
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 { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant";
import { Avatar } from "./emoji";
@ -93,8 +93,8 @@ export function SessionConfigModel(props: { onClose: () => void }) {
icon={<ResetIcon />}
bordered
text={Locale.Chat.Config.Reset}
onClick={() => {
if (confirm(Locale.Memory.ResetConfirm)) {
onClick={async () => {
if (await showConfirm(Locale.Memory.ResetConfirm)) {
chatStore.updateCurrentSession(
(session) => (session.memoryPrompt = ""),
);

10
app/components/error.tsx
View File

@ -5,6 +5,7 @@ import ResetIcon from "../icons/reload.svg";
import { ISSUE_URL } from "../constant";
import Locale from "../locales";
import { downloadAs } from "../utils";
import { showConfirm } from "./ui-lib";
interface IErrorBoundaryState {
hasError: boolean;
@ -57,10 +58,13 @@ export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
<IconButton
icon={<ResetIcon />}
text="Clear All Data"
onClick={() =>
confirm(Locale.Settings.Actions.ConfirmClearAll) &&
this.clearAndSaveData()
onClick={async () => {
if (
await showConfirm(Locale.Settings.Actions.ConfirmClearAll)
) {
this.clearAndSaveData();
}
}}
bordered
/>
</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 { ChatMessage, ModelConfig, useAppConfig, useChatStore } from "../store";
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 Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
import { useNavigate } from "react-router-dom";
@ -125,10 +133,10 @@ export function MaskConfig(props: {
<input
type="checkbox"
checked={props.mask.syncGlobalConfig}
onChange={(e) => {
onChange={async (e) => {
if (
e.currentTarget.checked &&
confirm(Locale.Mask.Config.Sync.Confirm)
(await showConfirm(Locale.Mask.Config.Sync.Confirm))
) {
props.updateMask((mask) => {
mask.syncGlobalConfig = e.currentTarget.checked;
@ -439,8 +447,8 @@ export function MaskPage() {
<IconButton
icon={<DeleteIcon />}
text={Locale.Mask.Item.Delete}
onClick={() => {
if (confirm(Locale.Mask.Item.DeleteConfirm)) {
onClick={async () => {
if (await showConfirm(Locale.Mask.Item.DeleteConfirm)) {
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 { MaskAvatar } from "./mask";
import { useCommand } from "../command";
import { showConfirm } from "./ui-lib";
function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) {
const xmin = Math.max(aRect.x, bRect.x);
@ -125,8 +126,8 @@ export function NewChat() {
{!state?.fromHome && (
<IconButton
text={Locale.NewChat.NotShow}
onClick={() => {
if (confirm(Locale.NewChat.ConfirmNoShow)) {
onClick={async () => {
if (await showConfirm(Locale.NewChat.ConfirmNoShow)) {
startChat();
config.update(
(config) => (config.dontShowMaskSplashScreen = true),

13
app/components/settings.tsx
View File

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

6
app/components/sidebar.tsx
View File

@ -26,7 +26,7 @@ import {
import { Link, useNavigate } from "react-router-dom";
import { useMobileScreen } from "../utils";
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, {
loading: () => null,
@ -160,8 +160,8 @@ export function SideBar(props: { className?: string }) {
<div className={styles["sidebar-action"] + " " + styles.mobile}>
<IconButton
icon={<CloseIcon />}
onClick={() => {
if (confirm(Locale.Home.DeleteChat)) {
onClick={async () => {
if (await showConfirm(Locale.Home.DeleteChat)) {
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 EyeOffIcon from "../icons/eye-off.svg";
import DownIcon from "../icons/down.svg";
import Locale from "../locales";
import { createRoot } from "react-dom/client";
import React, { HTMLProps, useEffect, useState } from "react";
@ -87,7 +88,7 @@ export function Loading() {
interface ModalProps {
title: string;
children?: JSX.Element | JSX.Element[];
children?: any;
actions?: JSX.Element[];
onClose?: () => void;
}
@ -262,3 +263,45 @@ export function Select(
</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>,
);
});
}