From c67f3ace6cca66cac53428c27e0f1daf0a6a8a61 Mon Sep 17 00:00:00 2001 From: jinmiaoluo <39730824+jinmiaoluo@users.noreply.github.com> Date: Fri, 28 Apr 2023 12:16:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BC=9A=E8=AF=9D=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E9=80=89=E4=B8=AD=E7=9A=84=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: #1130 #1131 删除会话后，默认选中的逻辑： 如果删除的会话是当前选中的会话，将下一个会话作为默认选中。 如果删除的会话不是当前选中的会话，保持当前会话的选中状态。 撤销删除后，默认选中的逻辑： 如果删除的会话删除前是选中状态，恢复会话的同时恢复选中的状态。 如果删除的会话删除前不是选中的状态，则恢复会话后，保持当前选中的会话窗口的选中状态不变。 --- app/components/chat-list.tsx | 14 ++++++++++- app/components/sidebar.tsx | 15 ++++++++---- app/store/chat.ts | 45 +++++++++++++++++++++++------------- 3 files changed, 53 insertions(+), 21 deletions(-) diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx index 2c7b95aa4..f3a396835 100644 --- a/app/components/chat-list.tsx +++ b/app/components/chat-list.tsx @@ -16,6 +16,7 @@ import { Link, useNavigate } from "react-router-dom"; import { Path } from "../constant"; import { MaskAvatar } from "./mask"; import { Mask } from "../store/mask"; +import { MouseEvent } from "react"; export function ChatItem(props: { onClick?: () => void; @@ -29,6 +30,14 @@ export function ChatItem(props: { narrow?: boolean; mask: Mask; }) { + const handleDeleteClick = (event: MouseEvent) => { + // Avoid triggering the onClick event of the parent component. + event.stopPropagation(); + if (props.onDelete) { + props.onDelete(); + } + }; + return ( {(provided) => ( @@ -67,7 +76,10 @@ export function ChatItem(props: { )} -
+
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx index 47a311725..5a3fd3d85 100644 --- a/app/components/sidebar.tsx +++ b/app/components/sidebar.tsx @@ -81,8 +81,13 @@ function useDragSideBar() { } export function SideBar(props: { className?: string }) { - const chatStore = useChatStore(); - + const [newSession, deleteSession, currentSessionIndex] = useChatStore( + (state) => [ + state.newSession, + state.deleteSession, + state.currentSessionIndex, + ], + ); // drag side bar const { onDragMouseDown, shouldNarrow } = useDragSideBar(); const navigate = useNavigate(); @@ -138,7 +143,9 @@ export function SideBar(props: { className?: string }) {
} - onClick={chatStore.deleteSession} + onClick={() => { + deleteSession(currentSessionIndex); + }} />
@@ -158,7 +165,7 @@ export function SideBar(props: { className?: string }) { text={shouldNarrow ? undefined : Locale.Home.NewChat} onClick={() => { if (config.dontShowMaskSplashScreen) { - chatStore.newSession(); + newSession(); } else { navigate(Path.NewChat); } diff --git a/app/store/chat.ts b/app/store/chat.ts index ca8625a5f..ed9bbd670 100644 --- a/app/store/chat.ts +++ b/app/store/chat.ts @@ -87,7 +87,7 @@ interface ChatStore { moveSession: (from: number, to: number) => void; selectSession: (index: number) => void; newSession: (mask?: Mask) => void; - deleteSession: (index?: number) => void; + deleteSession: (index: number) => void; currentSession: () => ChatSession; onNewMessage: (message: Message) => void; onUserInput: (content: string) => Promise; @@ -131,9 +131,9 @@ export const useChatStore = create()( }, removeSession(index: number) { - set((state) => { - let nextIndex = state.currentSessionIndex; - const sessions = state.sessions; + set(() => { + let selectedIndex = get().currentSessionIndex; + const sessions = get().sessions; if (sessions.length === 1) { return { @@ -142,14 +142,23 @@ export const useChatStore = create()( }; } - sessions.splice(index, 1); - - if (nextIndex === index) { - nextIndex -= 1; + // When one of the following conditions are met, the selected Index is reduced by one: + // + // 1. The selected Index is greater than the current deleted Index + // 2. The selected Index is equal with the current deleted index, and the current deleted index is the last one + // + // In other cases, the selected Index remains unchanged + if ( + selectedIndex > index || + (selectedIndex === index && selectedIndex === sessions.length - 1) + ) { + selectedIndex -= 1; } + sessions.splice(index, 1); + return { - currentSessionIndex: nextIndex, + currentSessionIndex: selectedIndex, sessions, }; }); @@ -197,9 +206,12 @@ export const useChatStore = create()( })); }, - deleteSession(i?: number) { - const deletedSession = get().currentSession(); - const index = i ?? get().currentSessionIndex; + deleteSession(index: number) { + const deletedSession = get().sessions[index]; + + // On the desktop, the deleted session index may not be the current session index + const seletedSessionIndex = get().currentSessionIndex; + const isLastSession = get().sessions.length === 1; if (!isMobileScreen() || confirm(Locale.Home.DeleteChat)) { get().removeSession(index); @@ -209,13 +221,14 @@ export const useChatStore = create()( { text: Locale.Home.Revert, onClick() { - set((state) => ({ - sessions: state.sessions - .slice(0, index) + set(() => ({ + sessions: get() + .sessions.slice(0, index) .concat([deletedSession]) .concat( - state.sessions.slice(index + Number(isLastSession)), + get().sessions.slice(index + Number(isLastSession)), ), + currentSessionIndex: seletedSessionIndex, })); }, },