Implement file sending

frontend/src/ui/panels/DMPanel.ts

@@ -2,7 +2,8 @@ import { MessagePanel, type MessagePanelCallbacks, type MessagePanelState } from
 import { 
     fetchDMHistory, 
     decryptDm, 
-    sendDMViaWebSocket 
+    sendDMViaWebSocket,
+    sendDmWithFiles
 } from "../../api/dmApi";
 import type { Message, WebSocketMessage } from "../../core/types";
 import type { UserState } from "../state";
@@ -88,16 +89,27 @@ export class DMPanel extends MessagePanel {
         }
     }
 
-    async sendMessage(content: string, _replyToId?: number): Promise<void> {
+    async sendMessage(content: string, _replyToId?: number, files: File[] = []): Promise<void> {
         if (!this.currentUser.authToken || !this.dmData || !content.trim()) return;
 
         try {
-            await sendDMViaWebSocket(
-                this.dmData.userId, 
-                this.dmData.publicKey, 
-                content, 
-                this.currentUser.authToken
-            );
+            if (files.length === 0) {
+                await sendDMViaWebSocket(
+                    this.dmData.userId, 
+                    this.dmData.publicKey, 
+                    content, 
+                    this.currentUser.authToken
+                );
+            } else {
+                const json = JSON.stringify({ type: "text", data: { content: content.trim() } });
+                await sendDmWithFiles(
+                    this.dmData.userId,
+                    this.dmData.publicKey,
+                    json,
+                    files,
+                    this.currentUser.authToken
+                );
+            }
         } catch (error) {
             console.error("Failed to send DM:", error);
         }

frontend/src/ui/panels/MessagePanel.ts

@@ -12,7 +12,7 @@ export interface MessagePanelState {
 }
 
 export interface MessagePanelCallbacks {
-    onSendMessage: (content: string) => void;
+    onSendMessage: (content: string, files: File[]) => void;
     onEditMessage: (messageId: number, content: string) => void;
     onDeleteMessage: (messageId: number) => void;
     onReplyToMessage: (messageId: number, content: string) => void;
@@ -48,7 +48,7 @@ export abstract class MessagePanel {
     abstract activate(): Promise<void>;
     abstract deactivate(): void;
     abstract loadMessages(): Promise<void>;
-    abstract sendMessage(content: string, replyToId?: number): Promise<void>;
+    abstract sendMessage(content: string, replyToId?: number, files?: File[]): Promise<void>;
     abstract isDm(): boolean;
     
     // Optional WebSocket message handler (can be overridden by subclasses)
@@ -115,8 +115,8 @@ export abstract class MessagePanel {
     }
 
     // Event handlers
-    handleSendMessage = (content: string, replyToId?: number): void => {
-        this.sendMessage(content, replyToId);
+    handleSendMessage = (content: string, replyToId?: number, files: File[] = []): void => {
+        this.sendMessage(content, replyToId, files);
     };
 
     handleEditMessage = (messageId: number, content: string): void => {

frontend/src/ui/panels/PublicChatPanel.ts

@@ -61,24 +61,37 @@ export class PublicChatPanel extends MessagePanel {
         }
     }
 
-    async sendMessage(content: string, replyToId?: number): Promise<void> {
+    async sendMessage(content: string, replyToId?: number, files: File[] = []): Promise<void> {
         if (!this.currentUser.authToken || !content.trim()) return;
 
         try {
-            const response = await request({
-                data: { 
-                    content: content.trim(), 
-                    reply_to_id: replyToId ?? null
-                },
-                credentials: {
-                    scheme: "Bearer",
-                    credentials: this.currentUser.authToken
-                },
-                type: "sendMessage"
-            });
-
-            if (response.error) {
-                console.error("Error sending message:", response.error);
+            if (files.length === 0) {
+                const response = await request({
+                    data: { 
+                        content: content.trim(), 
+                        reply_to_id: replyToId ?? null
+                    },
+                    credentials: {
+                        scheme: "Bearer",
+                        credentials: this.currentUser.authToken
+                    },
+                    type: "sendMessage"
+                });
+                if (response.error) {
+                    console.error("Error sending message:", response.error);
+                }
+            } else {
+                const form = new FormData();
+                form.append("payload", JSON.stringify({ type: "text", data: { content: content.trim() }, reply_to_id: replyToId ?? null }));
+                for (const f of files) form.append("files", f, f.name);
+                const res = await fetch(`${API_BASE_URL}/send_message`, {
+                    method: "POST",
+                    headers: getAuthHeaders(this.currentUser.authToken, false),
+                    body: form
+                });
+                if (!res.ok) {
+                    console.error("Error sending message with files", await res.text());
+                }
             }
         } catch (error) {
             console.error("Error sending message:", error);