add simple button to start a thread on reply

This commit is contained in:
Filipe Medeiros 2025-04-21 17:01:38 +02:00
parent 225894d327
commit 214b96c18b
No known key found for this signature in database
GPG key ID: D1033E18FD2682C2
2 changed files with 21 additions and 3 deletions

View file

@ -932,7 +932,7 @@ export function RoomTimeline({
); );
const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback( const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
(evt) => { (evt, startThread = false) => {
const replyId = evt.currentTarget.getAttribute('data-event-id'); const replyId = evt.currentTarget.getAttribute('data-event-id');
if (!replyId) { if (!replyId) {
console.warn('Button should have "data-event-id" attribute!'); console.warn('Button should have "data-event-id" attribute!');
@ -943,7 +943,9 @@ export function RoomTimeline({
const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet()); const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent(); const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
const { body, formatted_body: formattedBody } = content; const { body, formatted_body: formattedBody } = content;
const { 'm.relates_to': relation } = replyEvt.getWireContent(); const { 'm.relates_to': relation } = startThread
? { 'm.relates_to': { rel_type: 'm.thread', event_id: replyId } }
: replyEvt.getWireContent();
const senderId = replyEvt.getSender(); const senderId = replyEvt.getSender();
if (senderId && typeof body === 'string') { if (senderId && typeof body === 'string') {
setReplyDraft({ setReplyDraft({

View file

@ -669,7 +669,10 @@ export type MessageProps = {
messageSpacing: MessageSpacing; messageSpacing: MessageSpacing;
onUserClick: MouseEventHandler<HTMLButtonElement>; onUserClick: MouseEventHandler<HTMLButtonElement>;
onUsernameClick: MouseEventHandler<HTMLButtonElement>; onUsernameClick: MouseEventHandler<HTMLButtonElement>;
onReplyClick: MouseEventHandler<HTMLButtonElement>; onReplyClick: (
ev: Parameters<MouseEventHandler<HTMLButtonElement>>[0],
startThread?: boolean
) => void;
onEditId?: (eventId?: string) => void; onEditId?: (eventId?: string) => void;
onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void; onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
reply?: ReactNode; reply?: ReactNode;
@ -857,6 +860,8 @@ export const Message = as<'div', MessageProps>(
}, 100); }, 100);
}; };
const isThreadedMessage = mEvent.threadRootId !== undefined;
return ( return (
<MessageBase <MessageBase
className={classNames(css.MessageBase, className)} className={classNames(css.MessageBase, className)}
@ -919,6 +924,17 @@ export const Message = as<'div', MessageProps>(
> >
<Icon src={Icons.ReplyArrow} size="100" /> <Icon src={Icons.ReplyArrow} size="100" />
</IconButton> </IconButton>
{!isThreadedMessage && (
<IconButton
onClick={(ev) => onReplyClick(ev, true)}
data-event-id={mEvent.getId()}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon src={Icons.Message} size="100" />
</IconButton>
)}
{canEditEvent(mx, mEvent) && onEditId && ( {canEditEvent(mx, mEvent) && onEditId && (
<IconButton <IconButton
onClick={() => onEditId(mEvent.getId())} onClick={() => onEditId(mEvent.getId())}