Skip to content

compose: Add new UI for replying to a message. #36956

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Vector73 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

compose: Add new UI for replying to a message. #36956

Vector73 wants to merge 1 commit into from
+643 −27

Conversation

@Vector73
Copy link
Collaborator

@Vector73 Vector73 commented Dec 8, 2025 •
edited
Loading

This PR adds a new way to reply to a message. It adds a new option in the message actions popover "Reply to message" which inserts new reply UI over textarea where the user is composing the message. The reply UI includes:

  • User pill of the user who sent the referenced message.
  • Link to referenced message
  • Reply action buttons: Mention toggle button and remove reply button
  • Optionally link to the topic containing the referenced message, if the location of the referenced message is different the reply message.

The main logic to render reply UI for messages exists in postprocess_content. If the first block of the rendered content of the message contains both a mention and link to a message, it is converted to a reply block.

The text of the message link is computed by extracting text from the first non reply node of rendered HTML content.

There is a technical issue related to showing topic link in the reply UI for moved messages. If the referenced message has been moved, the topic link is determined by message ID of referenced message. But if the message is not locally fetched, topic link is determined from the link present in message content. This might result in incorrect topic link in reply UI.

Fixes: #36404

CZO: #design > message reply feature

How changes were tested:

Screenshots

Dark theme

image image image image image image

Light theme

image image image image

Self-review checklist
  • Self-reviewed the changes for clarity and maintainability
    (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

  • Explains differences from previous plans (e.g., issue description).
  • Highlights technical choices and bugs encountered.
  • Calls out remaining decisions and concerns.
  • Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

  • Each commit is a coherent idea.
  • Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

  • Visual appearance of the changes.
  • Responsiveness and internationalization.
  • Strings and tooltips.
  • End-to-end functionality of buttons, interactions and flows.
  • Corner cases, error conditions, and easily imagined bugs.

@alya
Copy link
Contributor

alya commented Dec 11, 2025 •
edited
Loading

This is cool, thanks!

The spacing around the reply icon is off: it's not left-aligned with the sender's name, and there's too much space on the right. I think there may also be too much space between the reply line and the message body.
Screenshot 2025-12-10 at 16 42 03@2x

@alya
Copy link
Contributor

alya commented Dec 11, 2025

It looks like @terpimost 's design had the reply line in a smaller font than regular message text. Did we discuss doing something different? They look sized the same on this PR.

@alya
Copy link
Contributor

alya commented Dec 11, 2025

For some reason the @-slash icon is missing for me (just an empty, clickable space); not sure why.

@alya
Copy link
Contributor

alya commented Dec 11, 2025

I'm not sure the message link in the compose box should be clickable. It's kind of confusing if you do end up clicking it.

@alya
Copy link
Contributor

alya commented Dec 11, 2025

Should we think about what to render in the "reply" line? I haven't really explored this, but seems like it would be nice to render emoji, at least.
Screenshot 2025-12-10 at 16 51 14@2x

@Vector73 Vector73 force-pushed the message-reply-2 branch 5 times, most recently from 70f2594 to 4e0ebbe Compare December 17, 2025 16:16
@Vector73
Copy link
Collaborator Author

Vector73 commented Dec 17, 2025

For some reason the @-slash icon is missing for me (just an empty, clickable space); not sure why.

Hmm, it shouldn't happen. Could you try again after rebasing?

@Vector73
Copy link
Collaborator Author

Vector73 commented Dec 17, 2025

I have made some updates:

Fixed the reply UI

image

  • The message link in composebox is not clickable now.
  • Fixed padding around reply icon and reply line.
  • The topic URL is live-updated in compose box when the recipient is changed.
  • Fixed underline (offset and opacity) below links in reply line.
  • Reply line is made slightly smaller than the actual content.

Does the above screenshot look good? I have not updated the screenshots yet.

@Vector73 Vector73 force-pushed the message-reply-2 branch 3 times, most recently from 1a7c3bd to fa61ded Compare December 18, 2025 07:54
@Vector73 Vector73 marked this pull request as ready for review December 18, 2025 08:42
@Vector73
compose: Add new UI for replying to a message.
784205d 
This PR adds a new way to reply to a message. It adds a new option in
the message actions popover "Reply to message" which inserts new
reply UI over textarea where the user is composing the message.

Fixes zulip#36404.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

size: XL

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add new UI to reply to a message without quoting it in the message body.

3 participants

@Vector73 @alya @zulipbot