From e361ec0ceefd1cfcd35ba69bf2ed7026bc6c26f2 Mon Sep 17 00:00:00 2001
From: AprilNEA <github@sku.moe>
Date: Fri, 31 Mar 2023 03:33:17 +0800
Subject: [PATCH] fix: fix new chat title subscription

---
 app/components/home.tsx | 31 +++++++++++++++----------------
 app/store/app.ts        | 17 +++++------------
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 3f569bfc9..0d10c8724 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -82,20 +82,25 @@ export function Avatar(props: { role: Message["role"] }) {
 export function ChatItem(props: {
   onClick?: () => void;
   onDelete?: () => void;
-  onEdit?: (title: string) => void;
   title: string;
   count: number;
   time: string;
   selected: boolean;
 }) {
+  const updateTitle = useChatStore((state) => state.updateTitle);
+
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [title, setTitle] = useState(props.title);
 
+  useEffect(() => {
+    setTitle(props.title);
+  }, [props.title]);
+
   function editCompleted() {
     setIsEditingTitle(false);
     // Blank will be restored to its original state
     if (!title) setTitle(props.title);
-    props.onEdit && props.onEdit(title);
+    updateTitle(title);
   }
 
   return (
@@ -146,19 +151,14 @@ export function ChatItem(props: {
 }
 
 export function ChatList() {
-  const [
-    sessions,
-    selectedIndex,
-    selectSession,
-    removeSession,
-    editDialogTitle,
-  ] = useChatStore((state) => [
-    state.sessions,
-    state.currentSessionIndex,
-    state.selectSession,
-    state.removeSession,
-    state.updateSessionTitle,
-  ]);
+  const [sessions, selectedIndex, selectSession, removeSession] = useChatStore(
+    (state) => [
+      state.sessions,
+      state.currentSessionIndex,
+      state.selectSession,
+      state.removeSession,
+    ],
+  );
 
   return (
     <div className={styles["chat-list"]}>
@@ -171,7 +171,6 @@ export function ChatList() {
           selected={i === selectedIndex}
           onClick={() => selectSession(i)}
           onDelete={() => removeSession(i)}
-          onEdit={(title: string) => editDialogTitle(i, title)}
         />
       ))}
     </div>
diff --git a/app/store/app.ts b/app/store/app.ts
index 11d33d8c7..9eb48197e 100644
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -188,13 +188,13 @@ interface ChatStore {
   removeSession: (index: number) => void;
   selectSession: (index: number) => void;
   newSession: () => 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,
@@ -269,17 +269,6 @@ export const useChatStore = create<ChatStore>()(
         });
       },
 
-      updateSessionTitle(index: number, title: string) {
-        set((state) => {
-          const sessions = state.sessions;
-          sessions[index].topic = title;
-
-          return {
-            sessions,
-          };
-        });
-      },
-
       newSession() {
         set((state) => ({
           currentSessionIndex: 0,
@@ -408,6 +397,10 @@ export const useChatStore = create<ChatStore>()(
         set(() => ({ sessions }));
       },
 
+      updateTitle(title: string) {
+        get().updateCurrentSession((session) => (session.topic = title));
+      },
+
       summarizeSession() {
         const session = get().currentSession();