From f920f79869bf8586886395a034d11e3c94416ac1 Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Fri, 2 Feb 2024 19:35:48 +0800
Subject: [PATCH] Refactor input message and chat panel components

---
 src/views/components/InputMessage/index.tsx |  9 ------
 src/views/pages/ChatPanel.tsx               | 34 +++++++++++++--------
 src/views/stores/InputStore.ts              | 33 ++++++++++----------
 3 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/views/components/InputMessage/index.tsx b/src/views/components/InputMessage/index.tsx
index 2779663..2d8e8da 100644
--- a/src/views/components/InputMessage/index.tsx
+++ b/src/views/components/InputMessage/index.tsx
@@ -188,15 +188,6 @@ const InputMessage = observer((props: any) => {
   };
 
   useEffect(() => {
-    input.fetchContextMenus().then();
-    input.fetchCommandMenus().then();
-    input.fetchModelMenus().then();
-    messageUtil.registerHandler(
-      "regCommandList",
-      (message: { result: object[] }) => {
-        input.updateCommands(message.result);
-      }
-    );
     messageUtil.registerHandler(
       "chatWithDevChat",
       (message: { command: string; message: string }) => {
diff --git a/src/views/pages/ChatPanel.tsx b/src/views/pages/ChatPanel.tsx
index 9b2f6a4..c456815 100644
--- a/src/views/pages/ChatPanel.tsx
+++ b/src/views/pages/ChatPanel.tsx
@@ -44,6 +44,9 @@ const chatPanel = observer(() => {
       key1: "devchat",
       key2: "defaultModel",
     });
+    messageUtil.sendMessage({
+      command: "getUserAccessKey",
+    });
   };
 
   const getFeatureToggles = () => {
@@ -78,18 +81,25 @@ const chatPanel = observer(() => {
     }
   };
 
-  useEffect(() => {
-    getSettings();
-    getFeatureToggles();
-    messageUtil.registerHandler("getUserAccessKey", (message: any) => {
-      chat.setKey(message.accessKey);
-	  // The history records need to be obtained after setting the key,
-	  // as the display information in the history record requires adjustment 
-	  // based on whether the key is present.
-	  chat.fetchHistoryMessages({ pageIndex: 0 }).then();
-    });
-    messageUtil.registerHandler("reloadMessage", (message: any) => {
-      chat.reloadMessage(message);
+  useEffect(() => {   
+    // Fetch the command menus, before history records are obtained,
+    // because the display information in the history record requires adjustment
+    input.fetchCommandMenus().then(()=>{
+      messageUtil.registerHandler("reloadMessage", (message: any) => {
+        chat.reloadMessage(message);
+      });
+       // The history records need to be obtained after setting the key,
+      // as the display information in the history record requires adjustment 
+      // based on whether the key is present.
+      messageUtil.registerHandler("getUserAccessKey", (message: any) => {
+        chat.setKey(message.accessKey);
+        chat.fetchHistoryMessages({ pageIndex: 0 }).then();
+      });
+      // The history records need to be obtained after setting the key,
+      input.fetchContextMenus().then();
+      input.fetchModelMenus().then();
+      getFeatureToggles();
+      getSettings();
     });
     messageUtil.registerHandler(
       "receiveMessagePartial",
diff --git a/src/views/stores/InputStore.ts b/src/views/stores/InputStore.ts
index c8998c5..5bbc3d3 100644
--- a/src/views/stores/InputStore.ts
+++ b/src/views/stores/InputStore.ts
@@ -33,6 +33,19 @@ const regModelMenus = async () => {
     });
 };
 
+const regCommandMenus = async () => {
+    return new Promise<Item[]>((resolve, reject) => {
+        try {
+            messageUtil.sendMessage({ command: 'regCommandList' });
+            messageUtil.registerHandler("regCommandList",(message: { result: Item[] }) => {
+                resolve(message.result);
+            });
+        } catch (e) {
+            reject(e);
+        }
+    });
+};
+
 export const ChatContext = types.model({
     file: types.maybe(types.string),
     path: types.maybe(types.string),
@@ -88,11 +101,6 @@ export const InputStore = types
         setCurrentMenuIndex(index: number) {
             self.currentMenuIndex = index;
         },
-        updateCommands(items) {
-            self.commandMenus.clear();
-			self.commandMenus.push(...items);
-			self.commandMenus.push({ name: 'help', description: 'View the DevChat documentation.', pattern: 'help' });
-        },
         fetchContextMenus: flow(function* () {
             try {
                 const items = yield regContextMenus();
@@ -110,18 +118,11 @@ export const InputStore = types
             }
         }),
         fetchCommandMenus: flow(function* () {
-			const regCommandMenus = async () => {
-				return new Promise<Item[]>((resolve, reject) => {
-					try {
-						messageUtil.sendMessage({ command: 'regCommandList' });
-					} catch (e) {
-						reject(e);
-					}
-				});
-			};
-
 			try {
-				yield regCommandMenus();
+				const items = yield regCommandMenus();
+                self.commandMenus.clear();
+                self.commandMenus.push(...items);
+                self.commandMenus.push({ name: 'help', description: 'View the DevChat documentation.', pattern: 'help' });
 			} catch (error) {
 				console.error("Failed to fetch command menus", error);
 			}