Fix the structure

frontend/src/ui/components/chat/ChatMessages.tsx

@@ -6,15 +6,16 @@ import type { UserProfile } from "../../../core/types";
 import { UserProfileDialog } from "./UserProfileDialog";
 import { MessageContextMenu, type ContextMenuState } from "./MessageContextMenu";
 import { fetchUserProfile } from "../../api/profileApi";
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { delay } from "../../../utils/utils";
 import { request } from "../../../websocket";
 
 interface ChatMessagesProps {
     messages?: MessageType[];
+    children?: ReactNode;
 }
 
-export function ChatMessages({ messages: propMessages }: ChatMessagesProps) {
+export function ChatMessages({ messages: propMessages, children }: ChatMessagesProps) {
     const { messages: hookMessages } = useChat();
     const { user } = useAppState();
     
@@ -137,6 +138,7 @@ export function ChatMessages({ messages: propMessages }: ChatMessagesProps) {
                         isLoadingProfile={isLoadingProfile}
                     />
                 ))}
+                {children}
             </div>
             
             <UserProfileDialog

frontend/src/ui/components/chat/MessagePanelRenderer.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
 import { MessagePanel, type MessagePanelState } from "../../panels/MessagePanel";
-import { ChatMainHeader } from "./ChatMainHeader";
 import { ChatMessages } from "./ChatMessages";
 import { ChatInputWrapper } from "./ChatInputWrapper";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
@@ -106,8 +105,8 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                     </div>
                 </div>
 
-                <div className="chat-messages" id="chat-messages">
                 {panelState.isLoading ? (
+                    <div className="chat-messages" id="chat-messages">
                         <div style={{ 
                             display: "flex", 
                             justifyContent: "center", 
@@ -117,13 +116,12 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                         }}>
                             Loading messages...
                         </div>
-                    ) : (
-                        <>
-                            <ChatMessages messages={panelState.messages} />
-                            <div ref={messagesEndRef} />
-                        </>
-                    )}
                     </div>
+                ): (
+                    <ChatMessages messages={panelState.messages}>
+                        <div ref={messagesEndRef} />
+                    </ChatMessages>
+                )}
                 
                 <ChatInputWrapper onSendMessage={panel.handleSendMessage} />
             </div>