feat(userlist): click a user to open chat with @<name> prefilled

Newcomers to a multi-user pad regularly fail to discover the chat
panel and the @-mention convention. Make the user list itself the
discovery affordance: clicking another user's row opens chat (if
hidden) and prefills the input with "@<their_name> ", ready to send.

The skin gets a small visual cue — pointer cursor on .usertdname and
an underline on hover — so the affordance is visible without
requiring a redesign. The color swatch keeps its own click semantics
(color picker), so the swatch cell is excluded from the new handler.

To let bot/AI plugins substitute their trigger string for an
otherwise-useless @-mention of the bot's display name (e.g.
"@AI Assistant" → "@ai"), this adds a new client-side hook,
chatPrefillFromUser, that takes {authorId, name, prefill} and lets
the first plugin to return a non-empty string override the default
prefill. Documented in doc/api/hooks_client-side.md alongside
chatSendMessage.

Plugin errors in the hook are caught — a misbehaving plugin can't
break the click. If chat is hidden by pad settings, chat.show() is
a no-op and the click effectively does nothing, which matches the
existing behavior of "no chat means no chat-related affordances".

The new prefill never clobbers a real partial message in the input;
if the user was mid-typing something, the @-mention is appended
rather than replacing.
This commit is contained in:
John McLear 2026-05-02 20:04:57 +01:00
parent 6e3f929896
commit 504b05bc11
3 changed files with 82 additions and 0 deletions

View file

@ -354,6 +354,34 @@ Context properties:
* `message`: The message object that will be sent to the Etherpad server.
## `chatPrefillFromUser`
Called from: `src/static/js/pad_userlist.ts`
Called when the user clicks an entry in the user list. The default behavior is to
open the chat panel and prefill the input with `@<name> `, where `<name>` is that
user's display name (with whitespace replaced by underscores). Plugins can return
a different prefill string from their callback — the first non-empty string
returned wins.
Typical use is by AI/bot plugins whose author display name (e.g. "AI Assistant")
isn't a useful @-mention; the plugin can substitute its trigger string instead.
Context properties:
* `authorId`: The clicked user's author id.
* `name`: The clicked user's display name.
* `prefill`: The default prefill string Etherpad would otherwise use.
Example:
```javascript
exports.chatPrefillFromUser = (hookName, {authorId, name}, cb) => {
if (authorId === window.clientVars.ep_my_bot.authorId) return cb('@bot ');
return cb();
};
```
## collectContentPre
Called from: `src/static/js/contentcollector.js`

View file

@ -19,6 +19,7 @@
import padutils from './pad_utils'
const hooks = require('./pluginfw/hooks');
const chat = require('./chat').chat;
import html10n from './vendors/html10n';
let myUserInfo = {};
@ -369,6 +370,46 @@ const paduserlist = (() => {
}, 0);
});
// Click any other user's row to open chat with @<their_name> prefilled.
// Helps newcomers discover the chat panel and the @-mention convention
// without having to be told. Plugins can transform the prefilled text
// — for example ep_ai_chat replaces "@AI Assistant" with the
// configured trigger ("@ai") — via the chatPrefillFromUser client
// hook (see doc/api/hooks_client-side.md).
$('#otheruserstable').on('click', 'tr[data-authorId]', async function (event) {
// Skip clicks on the color swatch — that has its own click handler
// (color-picker semantics) and shouldn't double up as a chat trigger.
if ($(event.target).closest('.usertdswatch').length) return;
const tr = $(this);
const authorId = tr.attr('data-authorId');
if (!authorId) return;
const name = (tr.find('.usertdname').text() || '').trim();
let prefill = name ? `@${name.replace(/\s+/g, '_')} ` : '';
try {
const transforms = await hooks.aCallAll(
'chatPrefillFromUser', {authorId, name, prefill});
if (Array.isArray(transforms)) {
for (const tr2 of transforms) {
if (typeof tr2 === 'string' && tr2.length > 0) { prefill = tr2; break; }
}
}
} catch { /* never let a misbehaving plugin break the click */ }
try { chat.show(); } catch { /* */ }
setTimeout(() => {
const $input = $('#chatinput');
if (!$input.length) return;
const current = ($input.val() || '') as string;
if (!current.trim() || /^@\S+\s*$/.test(current.trim())) {
$input.val(prefill);
} else if (!current.includes(prefill.trim())) {
$input.val(`${current.trimEnd()} ${prefill}`);
}
$input.trigger('focus');
const elem = $input[0] as HTMLTextAreaElement;
try { elem.setSelectionRange(elem.value.length, elem.value.length); } catch (_e) { /* */ }
}, 50);
});
// color picker
$('#myswatchbox').on('click', showColorPicker);
$('#mycolorpicker .pickerswatchouter').on('click', function () {

View file

@ -2,6 +2,19 @@ table#otheruserstable {
margin-top: 20px;
}
/*
* Clicking a row in the user list opens chat and prefills "@<name> ".
* The pointer cursor on the name cell makes the affordance visible
* the swatch keeps its own (color-picker) click semantics, so leave
* its cursor alone.
*/
#otheruserstable tr[data-authorId] .usertdname {
cursor: pointer;
}
#otheruserstable tr[data-authorId]:hover .usertdname {
text-decoration: underline;
}
.popup#users.chatAndUsers > .popup-content {
padding: 20px 10px;
height: 250px;