Refactor input message and chat panel components

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 }) => {

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",

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);
 			}