feat(threads): add basic message thread API and web thread panel
All checks were successful
CI / test (push) Successful in 21s

This commit is contained in:
2026-03-08 13:37:53 +03:00
parent cf1a77ae76
commit c6e8b779b0
7 changed files with 145 additions and 1 deletions

View File

@@ -124,6 +124,34 @@ async def search_messages(
return list(result.scalars().all())
async def list_message_thread(
db: AsyncSession,
*,
root_message_id: int,
user_id: int,
limit: int = 100,
) -> list[Message]:
root = await get_message_by_id(db, root_message_id)
if not root:
return []
stmt = (
select(Message)
.outerjoin(
MessageHidden,
(MessageHidden.message_id == Message.id) & (MessageHidden.user_id == user_id),
)
.where(
Message.chat_id == root.chat_id,
MessageHidden.id.is_(None),
(Message.id == root_message_id) | (Message.reply_to_message_id == root_message_id),
)
.order_by(Message.id.asc())
.limit(max(1, min(limit, 200)))
)
result = await db.execute(stmt)
return list(result.scalars().all())
async def delete_message(db: AsyncSession, message: Message) -> None:
await db.delete(message)

View File

@@ -20,6 +20,7 @@ from app.messages.service import (
delete_message_for_all,
forward_message,
forward_message_bulk,
get_message_thread,
get_messages,
list_message_reactions,
search_messages,
@@ -59,6 +60,16 @@ async def search_messages_endpoint(
return await search_messages(db, user_id=current_user.id, query=query, chat_id=chat_id, limit=limit)
@router.get("/{message_id}/thread", response_model=list[MessageRead])
async def message_thread(
message_id: int,
limit: int = 100,
db: AsyncSession = Depends(get_db),
current_user: User = Depends(get_current_user),
) -> list[MessageRead]:
return await get_message_thread(db, message_id=message_id, user_id=current_user.id, limit=limit)
@router.get("/{chat_id}", response_model=list[MessageRead])
async def list_messages(
chat_id: int,

View File

@@ -177,6 +177,20 @@ async def search_messages(
)
async def get_message_thread(
db: AsyncSession,
*,
message_id: int,
user_id: int,
limit: int = 100,
) -> list[Message]:
root = await repository.get_message_by_id(db, message_id)
if not root:
raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Message not found")
await ensure_chat_membership(db, chat_id=root.chat_id, user_id=user_id)
return await repository.list_message_thread(db, root_message_id=message_id, user_id=user_id, limit=limit)
async def update_message(
db: AsyncSession,
*,

View File

@@ -829,6 +829,12 @@ Response: `200` + `MessageRead[]`
Auth required.
Response: `200` + `MessageRead[]`
### GET `/api/v1/messages/{message_id}/thread?limit=100`
Auth required.
Returns root message + direct replies (basic thread view).
Response: `200` + `MessageRead[]`
### PUT `/api/v1/messages/{message_id}`
Auth required.

View File

@@ -16,7 +16,7 @@ Legend:
7. Chat Creation - `DONE` (private/group/channel)
8. Messages (base) - `DONE` (send/read/edit/delete/delete for all)
9. Message Types - `PARTIAL` (text/photo/video/docs/audio/voice/circle; GIF/stickers via dedicated system missing)
10. Reply/Quote/Threads - `PARTIAL` (reply + quote-like UI, no full thread model)
10. Reply/Quote/Threads - `PARTIAL` (reply + quote-like UI + basic thread panel, no deep nested thread model)
11. Forwarding - `PARTIAL` (single + bulk; "without author" missing)
12. Pinning - `DONE` (message/chat pin-unpin)
13. Reactions - `DONE`

View File

@@ -76,6 +76,13 @@ export async function searchMessages(query: string, chatId?: number): Promise<Me
return data;
}
export async function getMessageThread(messageId: number, limit = 100): Promise<Message[]> {
const { data } = await http.get<Message[]>(`/messages/${messageId}/thread`, {
params: { limit }
});
return data;
}
export async function sendMessage(chatId: number, text: string, type: MessageType = "text"): Promise<Message> {
const { data } = await http.post<Message>("/messages", { chat_id: chatId, text, type });
return data;

View File

@@ -4,6 +4,7 @@ import {
deleteMessage,
forwardMessageBulk,
getChatAttachments,
getMessageThread,
listMessageReactions,
pinMessage,
toggleMessageReaction
@@ -71,6 +72,10 @@ export function MessageList() {
const [reactionsByMessage, setReactionsByMessage] = useState<Record<number, MessageReaction[]>>({});
const [attachmentsByMessage, setAttachmentsByMessage] = useState<Record<number, ChatAttachment[]>>({});
const [mediaViewer, setMediaViewer] = useState<MediaViewerState>(null);
const [threadRootId, setThreadRootId] = useState<number | null>(null);
const [threadMessages, setThreadMessages] = useState<Message[]>([]);
const [threadLoading, setThreadLoading] = useState(false);
const [threadError, setThreadError] = useState<string | null>(null);
const [showScrollToBottom, setShowScrollToBottom] = useState(false);
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -115,6 +120,7 @@ export function MessageList() {
setDeleteMessageId(null);
setSelectedIds(new Set());
setMediaViewer(null);
setThreadRootId(null);
};
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
@@ -129,6 +135,9 @@ export function MessageList() {
if (activeChatId) {
setEditingMessage(activeChatId, null);
}
setThreadRootId(null);
setThreadMessages([]);
setThreadError(null);
setReactionsByMessage({});
setAttachmentsByMessage({});
}, [activeChatId, setEditingMessage]);
@@ -361,6 +370,21 @@ export function MessageList() {
setPendingDelete(null);
}
async function openThread(messageId: number) {
setThreadRootId(messageId);
setThreadLoading(true);
setThreadError(null);
try {
const rows = await getMessageThread(messageId, 150);
setThreadMessages(rows);
} catch {
setThreadMessages([]);
setThreadError("Failed to load thread");
} finally {
setThreadLoading(false);
}
}
return (
<div className="flex h-full flex-col" onClick={() => { setCtx(null); }}>
{activeChat?.pinned_message_id ? (
@@ -618,6 +642,15 @@ export function MessageList() {
>
Forward
</button>
<button
className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
onClick={() => {
void openThread(ctx.messageId);
setCtx(null);
}}
>
View thread
</button>
<button
className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
onClick={() => {
@@ -754,6 +787,51 @@ export function MessageList() {
/>
) : null}
{threadRootId ? (
<div className="absolute inset-0 z-[120] flex items-end justify-center bg-slate-950/60 p-3" onClick={() => setThreadRootId(null)}>
<div className="tg-scrollbar max-h-[72vh] w-full overflow-auto rounded-xl border border-slate-700/80 bg-slate-900 p-3" onClick={(event) => event.stopPropagation()}>
<div className="mb-2 flex items-center justify-between">
<p className="text-sm font-semibold">Thread</p>
<button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={() => setThreadRootId(null)} type="button">
Close
</button>
</div>
{threadLoading ? <p className="text-xs text-slate-400">Loading...</p> : null}
{threadError ? <p className="text-xs text-red-400">{threadError}</p> : null}
{!threadLoading && !threadError && threadMessages.length === 0 ? <p className="text-xs text-slate-400">No replies yet</p> : null}
<div className="space-y-2">
{threadMessages.map((threadMessage) => {
const own = threadMessage.sender_id === me?.id;
const isRoot = threadMessage.id === threadRootId;
return (
<div
className={`rounded-xl border px-3 py-2 ${isRoot ? "border-sky-400/60 bg-sky-500/10" : "border-slate-700/70 bg-slate-800/60"}`}
key={`thread-${threadMessage.id}`}
>
<p className={`mb-1 text-[11px] ${own ? "text-sky-300" : "text-slate-400"}`}>
{isRoot ? "Original message" : "Reply"} {formatTime(threadMessage.created_at)}
</p>
<div className={own ? "text-slate-100" : "text-slate-200"}>
{renderMessageContent(threadMessage, {
attachments: attachmentsByMessage[threadMessage.id] ?? [],
onAttachmentContextMenu: () => {},
onOpenMedia: (url, type) => {
const items = collectMediaItems(messages, attachmentsByMessage);
const idx = items.findIndex((i) => i.url === url && i.type === type);
if (items.length) {
setMediaViewer({ items, index: idx >= 0 ? idx : 0 });
}
},
})}
</div>
</div>
);
})}
</div>
</div>
</div>
) : null}
{deleteMessageId ? (
<div className="absolute inset-0 z-50 flex items-end justify-center bg-slate-950/55 p-3" onClick={() => setDeleteMessageId(null)}>
<div className="w-full rounded-xl border border-slate-700/80 bg-slate-900 p-3" onClick={(event) => event.stopPropagation()}>