Hide the profile picture and username in DMs

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

@@ -12,10 +12,11 @@ import { request } from "../../../websocket";
 
 interface ChatMessagesProps {
     messages?: MessageType[];
+    isDm?: boolean;
     children?: ReactNode;
 }
 
-export function ChatMessages({ messages: propMessages, children }: ChatMessagesProps) {
+export function ChatMessages({ messages: propMessages, children, isDm = false }: ChatMessagesProps) {
     const { messages: hookMessages } = useChat();
     const { user } = useAppState();
     
@@ -136,7 +137,7 @@ export function ChatMessages({ messages: propMessages, children }: ChatMessagesP
                         onProfileClick={handleProfileClick}
                         onContextMenu={handleContextMenu}
                         isLoadingProfile={isLoadingProfile}
-                    />
+                        isDm={isDm} />
                 ))}
                 {children}
             </div>

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

@@ -8,9 +8,10 @@ interface MessageProps {
     onProfileClick: (username: string) => void;
     onContextMenu: (e: React.MouseEvent, message: MessageType) => void;
     isLoadingProfile?: boolean;
+    isDm?: boolean;
 }
 
-export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLoadingProfile = false }: MessageProps) {
+export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLoadingProfile = false, isDm = false }: MessageProps) {
     const handleContextMenu = (e: React.MouseEvent) => {
         console.log("Message context menu event triggered for message:", message.id);
         e.preventDefault();
@@ -26,7 +27,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
         >
             <div className="message-inner">
                 {/* Add profile picture for received messages */}
-                {!isAuthor && (
+                {!isAuthor && !isDm && (
                     <div className="message-profile-pic">
                         <img
                             src={message.profile_picture || defaultAvatar}
@@ -42,7 +43,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
                     </div>
                 )}
 
-                {!isAuthor && (
+                {!isAuthor && !isDm && (
                     <div 
                         className={`message-username ${isLoadingProfile ? "loading" : ""}`}
                         onClick={() => !isLoadingProfile && onProfileClick(message.username)} 

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

@@ -118,7 +118,7 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                         </div>
                     </div>
                 ): (
-                    <ChatMessages messages={panelState.messages}>
+                    <ChatMessages messages={panelState.messages} isDm={panel.isDm()}>
                         <div ref={messagesEndRef} />
                     </ChatMessages>
                 )}

frontend/src/ui/panels/DMPanel.ts

@@ -28,6 +28,10 @@ export class DMPanel extends MessagePanel {
         super("dm", user, callbacks, onStateChange);
     }
 
+    isDm(): boolean {
+        return true;
+    }
+
     async activate(): Promise<void> {
         if (this.dmData && !this.messagesLoaded) {
             await this.loadMessages();

frontend/src/ui/panels/MessagePanel.ts

@@ -49,6 +49,7 @@ export abstract class MessagePanel {
     abstract deactivate(): void;
     abstract loadMessages(): Promise<void>;
     abstract sendMessage(content: string): Promise<void>;
+    abstract isDm(): boolean;
 
     // Common methods
     protected updateState(updates: Partial<MessagePanelState>): void {

frontend/src/ui/panels/PublicChatPanel.ts

@@ -23,6 +23,10 @@ export class PublicChatPanel extends MessagePanel {
         });
     }
 
+    isDm(): boolean {
+        return false;
+    }
+
     async activate(): Promise<void> {
         if (!this.messagesLoaded) {
             await this.loadMessages();