feat(frontend): add attachment_ids to message creation flow and types

src/client/types.gen.ts

@@ -4434,6 +4434,7 @@ export type RoomMessageCreateRequest = {
     content_type?: string | null;
     thread_id?: string | null;
     in_reply_to?: string | null;
+    attachment_ids?: string[];
 };
 
 export type RoomMessageListResponse = {
@@ -4456,6 +4457,7 @@ export type RoomMessageResponse = {
     send_at: string;
     revoked?: string | null;
     revoked_by?: string | null;
+    attachment_ids?: string[];
 };
 
 export type RoomMessageUpdateRequest = {

src/components/room/message/MessageInput.tsx

@@ -5,14 +5,15 @@
  * Supports @mentions, file uploads, emoji picker, and rich message AST.
  */
 
-import { forwardRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { IMEditor } from './editor/IMEditor';
 import { useRoom } from '@/contexts';
 import type { MessageAST } from './editor/types';
+import type { IMEditorHandle } from './editor/IMEditor';
 
 export interface MessageInputProps {
   roomName: string;
-  onSend: (content: string) => void;
+  onSend: (content: string, attachmentIds?: string[]) => void;
   replyingTo?: { id: string; display_name?: string; content: string } | null;
   onCancelReply?: () => void;
 }
@@ -22,13 +23,27 @@ export interface MessageInputHandle {
   clearContent: () => void;
   getContent: () => string;
   insertMention: (type: string, id: string, label: string) => void;
+  getAttachmentIds: () => string[];
 }
 
 export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(function MessageInput(
   { roomName, onSend, replyingTo, onCancelReply },
   ref,
 ) {
-  const { members } = useRoom();
+  const { members, activeRoomId } = useRoom();
+
+  // Ref passed to the inner IMEditor
+  const innerEditorRef = useRef<IMEditorHandle | null>(null);
+
+  // Expose a subset of IMEditorHandle (plus getAttachmentIds) as MessageInputHandle
+  useImperativeHandle(ref, () => ({
+    focus: () => innerEditorRef.current?.focus(),
+    clearContent: () => innerEditorRef.current?.clearContent(),
+    getContent: () => innerEditorRef.current?.getContent() ?? '',
+    insertMention: (type: string, id: string, label: string) =>
+      innerEditorRef.current?.insertMention(type, id, label),
+    getAttachmentIds: () => innerEditorRef.current?.getAttachmentIds() ?? [],
+  }), []);
 
   // Transform room data into MentionItems
   const mentionItems = {
@@ -43,11 +58,12 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
     commands: [],   // TODO: add slash commands
   };
 
-  // File upload handler — integrate with your upload API
+  // File upload handler — POST to /rooms/{room_id}/upload
   const handleUploadFile = async (file: File): Promise<{ id: string; url: string }> => {
+    if (!activeRoomId) throw new Error('No active room');
     const formData = new FormData();
     formData.append('file', file);
-    const res = await fetch('/api/upload', { method: 'POST', body: formData });
+    const res = await fetch(`/rooms/${activeRoomId}/upload`, { method: 'POST', body: formData });
     if (!res.ok) throw new Error('Upload failed');
     return res.json();
   };
@@ -59,7 +75,7 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
 
   return (
     <IMEditor
-      ref={ref}
+      ref={innerEditorRef}
       replyingTo={replyingTo}
       onCancelReply={onCancelReply}
       onSend={handleSend}

src/components/room/message/editor/IMEditor.tsx

@@ -6,12 +6,12 @@
  */
 
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import { useEditor, EditorContent, Extension } from '@tiptap/react';
+import {EditorContent, Extension, useEditor} from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import {CustomEmojiNode} from './EmojiNode';
-import type { MentionItem, MessageAST, MentionType } from './types';
+import type {MentionItem, MentionType, MessageAST} from './types';
-import { Paperclip, Smile, Send, X } from 'lucide-react';
+import {Paperclip, Send, Smile, X} from 'lucide-react';
 import {cn} from '@/lib/utils';
 import {COMMON_EMOJIS} from '../../shared';
 import {useTheme} from '@/contexts';
@@ -36,6 +36,7 @@ export interface IMEditorHandle {
     clearContent: () => void;
     getContent: () => string;
     insertMention: (type: string, id: string, label: string) => void;
+    getAttachmentIds: () => string[];
 }
 
 // ─── Color System (Google AI Studio / Linear palette, no Discord) ────────────
@@ -114,7 +115,9 @@ function EmojiPicker({ onClose, onSelect, p }: { onClose: () => void; onSelect:
         <span className="text-[11px] font-semibold tracking-wide uppercase" style={{color: p.textMuted}}>
           Emoji
         </span>
-        <button onClick={onClose} className="flex items-center justify-center w-5 h-5 rounded cursor-pointer transition-colors" style={{ color: p.icon }}>
+                <button onClick={onClose}
+                        className="flex items-center justify-center w-5 h-5 rounded cursor-pointer transition-colors"
+                        style={{color: p.icon}}>
                     <X size={11}/>
                 </button>
             </div>
@@ -223,7 +226,8 @@ function MentionDropdown({
                   {item.label}
                 </span>
                                 {badge && (
-                  <span className={cn('shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-full', badge.cls)}>
+                                    <span
+                                        className={cn('shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-full', badge.cls)}>
                     {badge.label}
                   </span>
                                 )}
@@ -305,7 +309,10 @@ export const IMEditor = forwardRef<IMEditorHandle, IMEditorProps>(function IMEdi
             let ts = from;
             for (let i = from - 1; i >= 1; i--) {
                 const c = text[i - 1];
-        if (c === '@') { ts = i; break; }
+                if (c === '@') {
+                    ts = i;
+                    break;
+                }
                 if (/\s/.test(c)) break;
             }
             const q = text.slice(ts - 1, from);
@@ -347,8 +354,19 @@ export const IMEditor = forwardRef<IMEditorHandle, IMEditorProps>(function IMEdi
                 uploadFile = result.file;
             }
             const res = await onUploadFile(uploadFile);
-      editor.chain().focus().insertContent({ type: 'file', attrs: { id: res.id, name: uploadFile.name, url: res.url, size: uploadFile.size, type: uploadFile.type, status: 'done' } }).insertContent(' ').run();
+            editor.chain().focus().insertContent({
-    } catch { /* ignore */ }
+                type: 'file',
+                attrs: {
+                    id: res.id,
+                    name: uploadFile.name,
+                    url: res.url,
+                    size: uploadFile.size,
+                    type: uploadFile.type,
+                    status: 'done'
+                }
+            }).insertContent(' ').run();
+        } catch { /* ignore */
+        }
     };
 
     const send = () => {
@@ -368,6 +386,21 @@ export const IMEditor = forwardRef<IMEditorHandle, IMEditorProps>(function IMEdi
             const mentionStr = `@[${type}:${id}:${label}] `;
             editor.chain().focus().insertContent(mentionStr).run();
         },
+        getAttachmentIds: () => {
+            if (!editor) return [];
+            const json = editor.getJSON();
+            const ids: string[] = [];
+            const walk = (node: Record<string, unknown>) => {
+                if (node['type'] === 'file' && node['attrs']) {
+                    const attrs = node['attrs'] as Record<string, unknown>;
+                    if (attrs['id']) ids.push(String(attrs['id']));
+                }
+                const children = node['content'] as Record<string, unknown>[] | undefined;
+                if (children) children.forEach(walk);
+            };
+            walk(json as Record<string, unknown>);
+            return ids;
+        },
     }));
 
     const hasContent = !!editor && !editor.isEmpty;
@@ -379,20 +412,28 @@ export const IMEditor = forwardRef<IMEditorHandle, IMEditorProps>(function IMEdi
         : 'none';
 
     return (
-    <div className="relative flex flex-col" ref={wrapRef}>
+        <div className="relative flex flex-col mt-2 ml-3 mr-3 mb-1" ref={wrapRef}>
-      {/* Reply strip */}
             {replyingTo && (
                 <div
                     className="flex items-center gap-3 px-4 py-2.5"
-          style={{ background: p.replyBg, borderRadius: '12px 12px 0 0', borderBottom: `1px solid ${p.border}` }}
+                    style={{
+                        background: p.replyBg,
+                        borderRadius: '12px 12px 0 0',
+                        borderBottom: `1px solid ${p.border}`
+                    }}
                 >
                     <div className="flex-1 min-w-0 flex items-center gap-2">
-            <span className="text-[11px] font-semibold shrink-0" style={{ color: p.borderFocus }}>Replying to</span>
+                        <span className="text-[11px] font-semibold shrink-0"
-            <span className="truncate text-sm font-medium" style={{ color: p.text }}>{replyingTo.display_name}</span>
+                              style={{color: p.borderFocus}}>Replying to</span>
-            <span className="truncate shrink-1 text-sm" style={{ color: p.textMuted }}>— {replyingTo.content}</span>
+                        <span className="truncate text-sm font-medium"
+                              style={{color: p.text}}>{replyingTo.display_name}</span>
+                        <span className="truncate shrink-1 text-sm"
+                              style={{color: p.textMuted}}>— {replyingTo.content}</span>
                     </div>
                     {onCancelReply && (
-            <button onClick={onCancelReply} className="flex items-center justify-center w-6 h-6 rounded-full cursor-pointer shrink-0 transition-colors" style={{ color: p.icon }}>
+                        <button onClick={onCancelReply}
+                                className="flex items-center justify-center w-6 h-6 rounded-full cursor-pointer shrink-0 transition-colors"
+                                style={{color: p.icon}}>
                             <X size={13}/>
                         </button>
                     )}
@@ -435,14 +476,23 @@ export const IMEditor = forwardRef<IMEditorHandle, IMEditorProps>(function IMEdi
                     <div className="flex items-center gap-0.5">
                         <div className="relative">
                             <button
-                onClick={(e) => { e.stopPropagation(); setShowEmoji(v => !v); }}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setShowEmoji(v => !v);
+                                }}
                                 className="flex items-center justify-center w-8 h-8 rounded-lg transition-colors cursor-pointer"
-                style={{ color: showEmoji ? p.iconHover : p.icon, background: showEmoji ? p.bgActive : 'transparent' }}
+                                style={{
+                                    color: showEmoji ? p.iconHover : p.icon,
+                                    background: showEmoji ? p.bgActive : 'transparent'
+                                }}
                                 title="Emoji"
                             >
                                 <Smile size={18}/>
                             </button>
-              {showEmoji && <EmojiPicker onClose={() => setShowEmoji(false)} onSelect={(emoji) => { editor?.chain().focus().insertContent(emoji).insertContent(' ').run(); setShowEmoji(false); }} p={p} />}
+                            {showEmoji && <EmojiPicker onClose={() => setShowEmoji(false)} onSelect={(emoji) => {
+                                editor?.chain().focus().insertContent(emoji).insertContent(' ').run();
+                                setShowEmoji(false);
+                            }} p={p}/>}
                         </div>
 
                         <label
@@ -451,7 +501,12 @@ export const IMEditor = forwardRef<IMEditorHandle, IMEditorProps>(function IMEdi
                             title="Attach file"
                         >
                             <Paperclip size={18}/>
-              <input type="file" className="hidden" onChange={e => { e.stopPropagation(); const f = e.target.files?.[0]; if (f && onUploadFile) void doUpload(f); e.target.value = ''; }} />
+                            <input type="file" className="hidden" onChange={e => {
+                                e.stopPropagation();
+                                const f = e.target.files?.[0];
+                                if (f && onUploadFile) void doUpload(f);
+                                e.target.value = '';
+                            }}/>
                         </label>
                     </div>
 
@@ -459,7 +514,10 @@ export const IMEditor = forwardRef<IMEditorHandle, IMEditorProps>(function IMEdi
                     <div className="flex items-center gap-2.5">
                         <span className="text-[11px]" style={{color: p.textSubtle}}>↵ send</span>
                         <button
-              onClick={(e) => { e.stopPropagation(); send(); }}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                send();
+                            }}
                             disabled={!hasContent}
                             className="flex items-center justify-center w-8 h-8 rounded-full transition-all duration-150 cursor-pointer"
                             style={{

src/contexts/room-context.tsx

@@ -63,6 +63,8 @@ export type MessageWithMeta = RoomMessageResponse & {
   /** True for messages sent by the current user that haven't been confirmed by the server */
   isOptimistic?: boolean;
   reactions?: ReactionGroup[];
+  /** Attachment IDs for files uploaded with this message */
+  attachment_ids?: string[];
 };
 
 export type RoomWithCategory = RoomResponse & {
@@ -119,7 +121,7 @@ interface RoomContextValue {
   isTransitioningRoom: boolean;
   nextCursor: number | null;
   loadMore: (cursor?: number | null) => void;
-  sendMessage: (content: string, contentType?: string, inReplyTo?: string) => Promise<void>;
+  sendMessage: (content: string, contentType?: string, inReplyTo?: string, attachmentIds?: string[]) => Promise<void>;
   editMessage: (messageId: string, content: string) => Promise<void>;
   revokeMessage: (messageId: string) => Promise<void>;
   updateReadSeq: (seq: number) => Promise<void>;
@@ -837,7 +839,7 @@ export function RoomProvider({
   const sendingRef = useRef(false);
 
   const sendMessage = useCallback(
-    async (content: string, contentType = 'text', inReplyTo?: string) => {
+    async (content: string, contentType = 'text', inReplyTo?: string, attachmentIds?: string[]) => {
       const client = wsClientRef.current;
       if (!activeRoomId || !client) return;
       if (sendingRef.current) return;
@@ -861,6 +863,7 @@ export function RoomProvider({
         thread_id: inReplyTo,
         in_reply_to: inReplyTo,
         reactions: [],
+        attachment_ids: attachmentIds,
       };
 
       setMessages((prev) => [...prev, optimisticMsg]);
@@ -869,6 +872,7 @@ export function RoomProvider({
         const confirmedMsg = await client.messageCreate(activeRoomId, content, {
           contentType,
           inReplyTo,
+          attachmentIds,
         });
         // Replace optimistic message with server-confirmed one
         setMessages((prev) => {

src/lib/room-ws-client.ts

@@ -622,6 +622,7 @@ export class RoomWsClient {
       contentType?: string;
       threadId?: string;
       inReplyTo?: string;
+      attachmentIds?: string[];
     },
   ): Promise<RoomMessageResponse> {
     return this.request<RoomMessageResponse>('message.create', {
@@ -630,6 +631,7 @@ export class RoomWsClient {
       content_type: options?.contentType,
       thread_id: options?.threadId,
       in_reply_to: options?.inReplyTo,
+      attachment_ids: options?.attachmentIds,
     });
   }
 

src/lib/ws-protocol.ts

@@ -91,6 +91,7 @@ export interface WsRequestParams {
   min_score?: number;
   query?: string;
   message_ids?: string[];
+  attachment_ids?: string[];
 }
 
 export interface WsResponse {