refactor: add missing keys to list items and improve structure in APIListMenu and MessageBubble components

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

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

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