From 0e1529a4d25906c6b91228aaba5fcc5113c4d534 Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Sun, 5 Jan 2025 20:42:36 +0800
Subject: [PATCH] refactor: add missing keys to list items and improve
 structure in APIListMenu and MessageBubble components

---
 src/components/ListAPI.tsx       | 10 ++++++++--
 src/components/MessageBubble.tsx |  1 +
 src/pages/Chatbox.tsx            |  2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/ListAPI.tsx b/src/components/ListAPI.tsx
index ee61de4..259d9fb 100644
--- a/src/components/ListAPI.tsx
+++ b/src/components/ListAPI.tsx
@@ -65,7 +65,7 @@ function APIsDropdownList({
       <NavigationMenuContent>
         <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
           {API.map((t: TemplateAPI, index: number) => (
-            <li>
+            <li key={index}>
               <NavigationMenuLink asChild>
                 <a
                   onClick={() => {
@@ -258,9 +258,15 @@ const APIListMenu: React.FC = () => {
               keyField="image_gen_key"
             />
           )}
-          {ctx.templateTools.length > 0 && <ToolsDropdownList />}
         </NavigationMenuList>
       </NavigationMenu>
+      {ctx.templateTools.length > 0 && (
+        <NavigationMenu>
+          <NavigationMenuList>
+            <ToolsDropdownList />
+          </NavigationMenuList>
+        </NavigationMenu>
+      )}
     </div>
   );
 };
diff --git a/src/components/MessageBubble.tsx b/src/components/MessageBubble.tsx
index cf5d05e..17553cd 100644
--- a/src/components/MessageBubble.tsx
+++ b/src/components/MessageBubble.tsx
@@ -67,6 +67,7 @@ function MessageDetail({ chat, renderMarkdown }: MessageDetailProps) {
           <img
             className="my-2 rounded-md max-w-64 max-h-64"
             src={mdt.image_url?.url}
+            key={mdt.image_url?.url}
             onClick={() => {
               window.open(mdt.image_url?.url, "_blank");
             }}
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index 46ed68e..1891531 100644
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -463,7 +463,7 @@ export default function ChatBOX() {
             </ChatBubble>
           )}
           {chatStore.history.map((_, messageIndex) => (
-            <Message messageIndex={messageIndex} />
+            <Message messageIndex={messageIndex} key={messageIndex} />
           ))}
           {showGenerating && (
             <ChatBubble variant="received">