Start inline reply

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

@@ -1,11 +1,14 @@
 import { useState } from "react";
 import { RichTextArea } from "../core/RichTextArea";
+import type { Message } from "../../../core/types";
 
 interface ChatInputWrapperProps {
-    onSendMessage: (message: string) => void;
+    onSendMessage: (message: string) => void | ((message: string) => void);
+    replyTo?: Message | null;
+    onClearReply?: () => void;
 }
 
-export function ChatInputWrapper({ onSendMessage }: ChatInputWrapperProps) {
+export function ChatInputWrapper({ onSendMessage, replyTo, onClearReply }: ChatInputWrapperProps) {
     const [message, setMessage] = useState("");
 
     const handleSubmit = async (e: React.FormEvent | Event) => {
@@ -13,6 +16,7 @@ export function ChatInputWrapper({ onSendMessage }: ChatInputWrapperProps) {
         if (message.trim()) {
             onSendMessage(message);
             setMessage("");
+            if (onClearReply) onClearReply();
         }
     };
 
@@ -20,6 +24,17 @@ export function ChatInputWrapper({ onSendMessage }: ChatInputWrapperProps) {
         <div className="chat-input-wrapper">
             <form className="input-group" id="message-form" onSubmit={handleSubmit}>
                 <div className="chat-input">
+                    {replyTo && (
+                        <div className="reply-preview">
+                            <div className="reply-content">
+                                <span className="reply-username">{replyTo.username}</span>
+                                <span className="reply-text">{replyTo.content}</span>
+                            </div>
+                            <button type="button" className="reply-cancel" onClick={onClearReply}>
+                                <span className="material-symbols">close</span>
+                            </button>
+                        </div>
+                    )}
                     <RichTextArea
                         className="message-input" 
                         id="message-input" 

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

@@ -14,9 +14,10 @@ interface ChatMessagesProps {
     messages?: MessageType[];
     isDm?: boolean;
     children?: ReactNode;
+    onReplySelect?: (message: MessageType) => void;
 }
 
-export function ChatMessages({ messages: propMessages, children, isDm = false }: ChatMessagesProps) {
+export function ChatMessages({ messages: propMessages, children, isDm = false, onReplySelect }: ChatMessagesProps) {
     const { messages: hookMessages } = useChat();
     const { user } = useAppState();
     
@@ -87,25 +88,8 @@ export function ChatMessages({ messages: propMessages, children, isDm = false }:
         }
     };
 
-    const handleReply = async (message: MessageType) => {
-        // This will be called when the reply dialog is sent
-        if (!user.authToken) return;
-        
-        try {
-            await request({
-                type: "replyMessage",
-                data: {
-                    content: message.content, // This should be the reply content from the dialog
-                    reply_to_id: message.id
-                },
-                credentials: {
-                    scheme: "Bearer",
-                    credentials: user.authToken
-                }
-            });
-        } catch (error) {
-            console.error("Failed to send reply:", error);
-        }
+    const handleReply = (message: MessageType) => {
+        if (onReplySelect) onReplySelect(message);
     };
 
     const handleDelete = async (message: MessageType) => {

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

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import type { Message, Size2D } from "../../../core/types";
 import { EditMessageDialog } from "./EditMessageDialog";
-import { ReplyMessageDialog } from "./ReplyMessageDialog";
 
 interface MessageContextMenuProps {
     message: Message;
@@ -32,7 +31,6 @@ export function MessageContextMenu({
 }: MessageContextMenuProps) {
     // Internal state for dialogs and closing animation
     const [editDialogOpen, setEditDialogOpen] = useState(false);
-    const [replyDialogOpen, setReplyDialogOpen] = useState(false);
     const [isClosing, setIsClosing] = useState(false);
     const [calculatedPosition, setCalculatedPosition] = useState(position);
     const [animationClass, setAnimationClass] = useState('entering');
@@ -78,7 +76,7 @@ export function MessageContextMenu({
     // Effect to handle clicks outside the context menu
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
-            if (isOpen && !isClosing && !editDialogOpen && !replyDialogOpen) {
+            if (isOpen && !isClosing && !editDialogOpen) {
                 // Check if the click is on a context menu element
                 const target = event.target as Element;
                 if (!target.closest('.context-menu')) {
@@ -88,14 +86,14 @@ export function MessageContextMenu({
         };
 
         const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === 'Escape' && isOpen && !isClosing && !editDialogOpen && !replyDialogOpen) {
+            if (event.key === 'Escape' && isOpen && !isClosing && !editDialogOpen) {
                 handleClose();
             }
         };
 
         const handleWindowBlur = () => {
             // Close context menu when browser window loses focus
-            if (isOpen && !isClosing && !editDialogOpen && !replyDialogOpen) {
+            if (isOpen && !isClosing && !editDialogOpen) {
                 handleClose();
             }
         };
@@ -111,12 +109,13 @@ export function MessageContextMenu({
             document.removeEventListener('keydown', handleKeyDown);
             window.removeEventListener('blur', handleWindowBlur);
         };
-    }, [isOpen, isClosing, editDialogOpen, replyDialogOpen]);
+    }, [isOpen, isClosing, editDialogOpen]);
     
     const handleAction = (action: string) => {
         switch (action) {
             case "reply":
-                setReplyDialogOpen(true);
+                onReply(message);
+                handleClose();
                 break;
             case "edit":
                 if (isAuthor) {
@@ -153,14 +152,6 @@ export function MessageContextMenu({
         setEditDialogOpen(false);
     };
 
-    const handleSendReply = (content: string, replyToId: number) => {
-        // Create a temporary message object with the reply content
-        const replyMessage = { ...message, content, id: replyToId };
-        onReply(replyMessage);
-        setReplyDialogOpen(false);
-    };
-
-
 
     const content = (
         <div 
@@ -194,7 +185,7 @@ export function MessageContextMenu({
     )
 
     // Don't render if not open
-    if (!isOpen && !editDialogOpen && !replyDialogOpen) return null;
+    if (!isOpen && !editDialogOpen) return null;
 
     return (
         <>
@@ -207,14 +198,6 @@ export function MessageContextMenu({
                 message={message}
                 onSave={handleEditSave}
             />
-            
-            {/* Reply Dialog */}
-            <ReplyMessageDialog
-                isOpen={replyDialogOpen}
-                onOpenChange={setReplyDialogOpen}
-                replyToMessage={message}
-                onSendReply={handleSendReply}
-            />
         </>
     );
 }

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

@@ -3,6 +3,7 @@ import { MessagePanel, type MessagePanelState } from "../../panels/MessagePanel"
 import { ChatMessages } from "./ChatMessages";
 import { ChatInputWrapper } from "./ChatInputWrapper";
 import { setGlobalMessageHandler } from "../../../core/websocket";
+import type { Message } from "../../../core/types";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 
 interface MessagePanelRendererProps {
@@ -15,6 +16,7 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
     const [switchIn, setSwitchIn] = useState(false);
     const [switchOut, setSwitchOut] = useState(false);
     const messagesEndRef = useRef<HTMLDivElement>(null);
+    const [replyTo, setReplyTo] = useState<Message | null>(null);
 
     // Handle panel state changes
     useEffect(() => {
@@ -132,12 +134,19 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                         </div>
                     </div>
                 ): (
-                    <ChatMessages messages={panelState.messages} isDm={panel.isDm()}>
+                    <ChatMessages messages={panelState.messages} isDm={panel.isDm()} onReplySelect={(m) => setReplyTo(m)}>
                         <div ref={messagesEndRef} />
                     </ChatMessages>
                 )}
                 
-                <ChatInputWrapper onSendMessage={panel.handleSendMessage} />
+                <ChatInputWrapper 
+                    onSendMessage={(text) => {
+                        panel.handleSendMessage(text, replyTo?.id);
+                        setReplyTo(null);
+                    }} 
+                    replyTo={replyTo} 
+                    onClearReply={() => setReplyTo(null)}
+                />
             </div>
         </div>
     );