feat: improve chat realtime and media composer UX

- add media preview and upload confirmation for image/video

- add upload progress tracking for presigned uploads

- keep voice recording/upload flow with better UI states

- include related realtime/chat updates currently in working tree

web/src/api/chats.ts

@@ -1,5 +1,6 @@
 import { http } from "./http";
 import type { Chat, ChatType, Message, MessageType } from "../chat/types";
+import axios from "axios";
 
 export async function getChats(): Promise<Chat[]> {
   const { data } = await http.get<Chat[]>("/chats");
@@ -51,6 +52,23 @@ export async function requestUploadUrl(file: File): Promise<UploadUrlResponse> {
   return data;
 }
 
+export async function uploadToPresignedUrl(
+  uploadUrl: string,
+  requiredHeaders: Record<string, string>,
+  file: File,
+  onProgress?: (percent: number) => void
+): Promise<void> {
+  await axios.put(uploadUrl, file, {
+    headers: requiredHeaders,
+    onUploadProgress: (progressEvent) => {
+      if (!onProgress || !progressEvent.total) {
+        return;
+      }
+      onProgress(Math.round((progressEvent.loaded * 100) / progressEvent.total));
+    }
+  });
+}
+
 export async function attachFile(messageId: number, fileUrl: string, fileType: string, fileSize: number): Promise<void> {
   await http.post("/media/attachments", {
     message_id: messageId,