Fix the context menu

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

@@ -1,21 +1,60 @@
-export function ReplyMessageDialog() {
+import { useState, useEffect } from "react";
+import type { Message } from "../../../core/types";
+import { MaterialDialog } from "../Dialog";
+
+interface ReplyMessageDialogProps {
+    isOpen: boolean;
+    onOpenChange: (value: boolean) => void;
+    replyToMessage: Message | null;
+    onSendReply: (content: string, replyToId: number) => void;
+}
+
+export function ReplyMessageDialog({ isOpen, onOpenChange, replyToMessage, onSendReply }: ReplyMessageDialogProps) {
+    const [replyContent, setReplyContent] = useState("");
+
+    useEffect(() => {
+        if (replyToMessage) {
+            setReplyContent("");
+        }
+    }, [replyToMessage]);
+
+    const handleSendReply = () => {
+        if (replyToMessage && replyContent.trim()) {
+            onSendReply(replyContent.trim(), replyToMessage.id);
+            onOpenChange(false);
+        }
+    };
+
+    const handleCancel = () => {
+        onOpenChange(false);
+        setReplyContent("");
+    };
+
+    if (!replyToMessage) return null;
+
     return (
-        <mdui-dialog id="reply-message-dialog" close-on-overlay-click close-on-esc>
+        <MaterialDialog open={isOpen} onOpenChange={onOpenChange} close-on-overlay-click close-on-esc>
             <div className="dialog-content">
                 <h3>Reply to Message</h3>
-                <div className="reply-preview" id="reply-preview"></div>
+                <div className="reply-preview">
+                    <div className="reply-content">
+                        <span className="reply-username">{replyToMessage.username}</span>
+                        <span className="reply-text">{replyToMessage.content}</span>
+                    </div>
+                </div>
                 <mdui-text-field 
-                    id="reply-message-input"
+                    value={replyContent}
+                    onInput={(e) => setReplyContent((e.target as HTMLInputElement).value)}
                     label="Reply" 
                     variant="outlined" 
                     placeholder="Type your reply..."
                     maxlength={1000}>
                 </mdui-text-field>
                 <div className="dialog-actions">
-                    <mdui-button id="reply-cancel" variant="outlined">Cancel</mdui-button>
-                    <mdui-button id="reply-send">Send Reply</mdui-button>
+                    <mdui-button onClick={handleCancel} variant="outlined">Cancel</mdui-button>
+                    <mdui-button onClick={handleSendReply}>Send Reply</mdui-button>
                 </div>
             </div>
-        </mdui-dialog>
+        </MaterialDialog>
     );
 }