Skip to content

Message Reply Feature#531

Merged
slugalisk merged 8 commits into
MemeLabs:masterfrom
RingoMar:feat/reply
Sep 2, 2025
Merged

Message Reply Feature#531
slugalisk merged 8 commits into
MemeLabs:masterfrom
RingoMar:feat/reply

Conversation

@RingoMar

@RingoMar RingoMar commented Aug 22, 2025

Copy link
Copy Markdown
Contributor

Enhance chat UI with a flexible reply system (right-click, slash command, and banner support).

  • Preview
    preview

Added Features

  • Reply Functionality in Chat

    • Core reply system with metadata that tags each message with a ID (user, message, IDs).
    • Displays a reply container above the chat input when active.
  • Reply Options

    • Right click a user's name to start a reply and target a messae.
    • Right click a reply banner target to scroll the original message into view.
    • Added /reply to quickly reply to the latest message from that user.

### Feature Needing Help!

Mentions / Highlights in Reply Container
+ show mentions (e.g. @username / username) inside the reply preview container.

Need to understand how mentions are currently constructed & rendered in chat to replicate them in the reply UI.

Edit: Working!

Note

Full disclosure, a bit of chatgpt was used to create the initial reply functions to get me start.

@ftwpala

ftwpala commented Aug 23, 2025

Copy link
Copy Markdown
Contributor

You can probably look at this place, to help with setting the proper mention tag:

message.mentioned = Chat.extractNicks(message.message).reduce((m, a) => {

Comment thread assets/index.html Outdated
<span> Replying to </span>
<span id="chat-reply-user"></span>
</div>
<span class="chat-reply-cancel"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there a font awesome glyph that will work here?

Comment thread assets/chat/js/messages.js Outdated
// Cuts the message limit into a quater
const prevPreview = this.prevMessage.length > 128 ? this.prevMessage.substring(0, 128) + "…" : this.prevMessage;
// Previous message block
// Possable problem getting the traget username here

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: target

if (this.historical) classes.push("msg-historical");
if (this.highlighted) classes.push("msg-highlight");
// Cuts the message limit into a quater
const prevPreview = this.prevMessage.length > 128 ? this.prevMessage.substring(0, 128) + "…" : this.prevMessage;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use white-space: nowrap; text-overflow: ellipsis to make this responsive?

Comment thread assets/chat/js/chat.js
return;
}

this.source.emit("MSGREPLY", { data: replyText, nick: this.user.nick, target: targetNick, prev: prevMessage.message, prevMessageId: prevMessage.msgid });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does the server handle this command?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't able to fully get the chat WebSocket server to connect to the gui for a full on production test but from testing with the mock server I was able to emit the reply like a message would and get the client to store it in its dom and render / show it in chat

Comment thread assets/chat/js/chat.js Outdated
}
});

// Cancel a repl to someone

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: reply

@slugalisk slugalisk merged commit 1e59018 into MemeLabs:master Sep 2, 2025
1 check passed
slugalisk added a commit that referenced this pull request Sep 2, 2025
slugalisk added a commit that referenced this pull request Sep 2, 2025
@slugalisk

Copy link
Copy Markdown
Member

we need to add server support before merging this...

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants