Skip to content

Conversation

@RingoMar
Copy link
Contributor

@RingoMar RingoMar commented Aug 22, 2025

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
Copy link
Contributor

ftwpala commented Aug 23, 2025

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

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

<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
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?

// 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
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
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?

return;
}

this.source.emit("MSGREPLY", { data: replyText, nick: this.user.nick, target: targetNick, prev: prevMessage.message, prevMessageId: prevMessage.msgid });
Copy link
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
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

}
});

// Cancel a repl to someone
Copy link
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
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