From cf41cb1874458ef9d137ae37cdbfef5b58de6070 Mon Sep 17 00:00:00 2001
From: AprilNEA <github@sku.moe>
Date: Fri, 31 Mar 2023 03:16:54 +0800
Subject: [PATCH] fix: prevent the title from being empty, optimization Logic

---
 app/components/home.tsx | 46 +++++++++++++++++------------------------
 app/store/app.ts        |  9 ++------
 2 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 875fb8058..3f569bfc9 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -88,10 +88,16 @@ export function ChatItem(props: {
   time: string;
   selected: boolean;
 }) {
-  const [dialog, setDialog] = useState({
-    isEdit: false,
-    title: props.title,
-  });
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [title, setTitle] = useState(props.title);
+
+  function editCompleted() {
+    setIsEditingTitle(false);
+    // Blank will be restored to its original state
+    if (!title) setTitle(props.title);
+    props.onEdit && props.onEdit(title);
+  }
+
   return (
     <div
       className={`${styles["chat-item"]} ${
@@ -100,17 +106,14 @@ export function ChatItem(props: {
       onClick={props.onClick}
     >
       <div className={styles["chat-item-title"]}>
-        {dialog.isEdit ? (
+        {isEditingTitle ? (
           <input
             autoFocus
             type="text"
             className={styles["chat-item-edit-input"]}
-            value={dialog.title}
+            value={title}
             onChange={(data) => {
-              setDialog({
-                ...dialog,
-                title: data.target.value,
-              });
+              setTitle(data.target.value);
             }}
             onBlur={editCompleted}
             onKeyDown={(event) => {
@@ -120,7 +123,7 @@ export function ChatItem(props: {
             }}
           />
         ) : (
-          <div>{dialog.title}</div>
+          title
         )}
       </div>
       <div className={styles["chat-item-info"]}>
@@ -132,25 +135,14 @@ export function ChatItem(props: {
       <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
         <DeleteIcon />
       </div>
-      <div className={styles["chat-item-edit"]} onClick={editStart}>
+      <div
+        className={styles["chat-item-edit"]}
+        onClick={() => setIsEditingTitle(true)}
+      >
         <EditIcon />
       </div>
     </div>
   );
-
-  function editStart() {
-    setDialog({
-      ...dialog,
-      isEdit: true,
-    });
-  }
-  function editCompleted() {
-    setDialog({
-      ...dialog,
-      isEdit: false,
-    });
-    props.onEdit && props.onEdit(dialog.title);
-  }
 }
 
 export function ChatList() {
@@ -165,7 +157,7 @@ export function ChatList() {
     state.currentSessionIndex,
     state.selectSession,
     state.removeSession,
-    state.editDialogTitle,
+    state.updateSessionTitle,
   ]);
 
   return (
diff --git a/app/store/app.ts b/app/store/app.ts
index 435f3c018..11d33d8c7 100644
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -188,14 +188,13 @@ interface ChatStore {
   removeSession: (index: number) => void;
   selectSession: (index: number) => void;
   newSession: () => void;
-  editDialogTitle: (index: number, title: string) => void;
+  updateSessionTitle: (index: number, title: string) => void;
   currentSession: () => ChatSession;
   onNewMessage: (message: Message) => void;
   onUserInput: (content: string) => Promise<void>;
   summarizeSession: () => void;
   updateStat: (message: Message) => void;
   updateCurrentSession: (updater: (session: ChatSession) => void) => void;
-  updateTitle: (title: string) => void;
   updateMessage: (
     sessionIndex: number,
     messageIndex: number,
@@ -270,7 +269,7 @@ export const useChatStore = create<ChatStore>()(
         });
       },
 
-      editDialogTitle(index: number, title: string) {
+      updateSessionTitle(index: number, title: string) {
         set((state) => {
           const sessions = state.sessions;
           sessions[index].topic = title;
@@ -409,10 +408,6 @@ export const useChatStore = create<ChatStore>()(
         set(() => ({ sessions }));
       },
 
-      updateTitle(title: string) {
-        get().updateCurrentSession((session) => (session.topic = title));
-      },
-
       summarizeSession() {
         const session = get().currentSession();