Skip to content

Commit 504b05b

Browse files
committed
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.
1 parent 6e3f929 commit 504b05b

3 files changed

Lines changed: 82 additions & 0 deletions

File tree

doc/api/hooks_client-side.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,34 @@ Context properties:
354354

355355
* `message`: The message object that will be sent to the Etherpad server.
356356

357+
## `chatPrefillFromUser`
358+
359+
Called from: `src/static/js/pad_userlist.ts`
360+
361+
Called when the user clicks an entry in the user list. The default behavior is to
362+
open the chat panel and prefill the input with `@<name> `, where `<name>` is that
363+
user's display name (with whitespace replaced by underscores). Plugins can return
364+
a different prefill string from their callback — the first non-empty string
365+
returned wins.
366+
367+
Typical use is by AI/bot plugins whose author display name (e.g. "AI Assistant")
368+
isn't a useful @-mention; the plugin can substitute its trigger string instead.
369+
370+
Context properties:
371+
372+
* `authorId`: The clicked user's author id.
373+
* `name`: The clicked user's display name.
374+
* `prefill`: The default prefill string Etherpad would otherwise use.
375+
376+
Example:
377+
378+
```javascript
379+
exports.chatPrefillFromUser = (hookName, {authorId, name}, cb) => {
380+
if (authorId === window.clientVars.ep_my_bot.authorId) return cb('@bot ');
381+
return cb();
382+
};
383+
```
384+
357385
## collectContentPre
358386

359387
Called from: `src/static/js/contentcollector.js`

src/static/js/pad_userlist.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
import padutils from './pad_utils'
2121
const hooks = require('./pluginfw/hooks');
22+
const chat = require('./chat').chat;
2223
import html10n from './vendors/html10n';
2324
let myUserInfo = {};
2425

@@ -369,6 +370,46 @@ const paduserlist = (() => {
369370
}, 0);
370371
});
371372

373+
// Click any other user's row to open chat with @<their_name> prefilled.
374+
// Helps newcomers discover the chat panel and the @-mention convention
375+
// without having to be told. Plugins can transform the prefilled text
376+
// — for example ep_ai_chat replaces "@AI Assistant" with the
377+
// configured trigger ("@ai") — via the chatPrefillFromUser client
378+
// hook (see doc/api/hooks_client-side.md).
379+
$('#otheruserstable').on('click', 'tr[data-authorId]', async function (event) {
380+
// Skip clicks on the color swatch — that has its own click handler
381+
// (color-picker semantics) and shouldn't double up as a chat trigger.
382+
if ($(event.target).closest('.usertdswatch').length) return;
383+
const tr = $(this);
384+
const authorId = tr.attr('data-authorId');
385+
if (!authorId) return;
386+
const name = (tr.find('.usertdname').text() || '').trim();
387+
let prefill = name ? `@${name.replace(/\s+/g, '_')} ` : '';
388+
try {
389+
const transforms = await hooks.aCallAll(
390+
'chatPrefillFromUser', {authorId, name, prefill});
391+
if (Array.isArray(transforms)) {
392+
for (const tr2 of transforms) {
393+
if (typeof tr2 === 'string' && tr2.length > 0) { prefill = tr2; break; }
394+
}
395+
}
396+
} catch { /* never let a misbehaving plugin break the click */ }
397+
try { chat.show(); } catch { /* */ }
398+
setTimeout(() => {
399+
const $input = $('#chatinput');
400+
if (!$input.length) return;
401+
const current = ($input.val() || '') as string;
402+
if (!current.trim() || /^@\S+\s*$/.test(current.trim())) {
403+
$input.val(prefill);
404+
} else if (!current.includes(prefill.trim())) {
405+
$input.val(`${current.trimEnd()} ${prefill}`);
406+
}
407+
$input.trigger('focus');
408+
const elem = $input[0] as HTMLTextAreaElement;
409+
try { elem.setSelectionRange(elem.value.length, elem.value.length); } catch (_e) { /* */ }
410+
}, 50);
411+
});
412+
372413
// color picker
373414
$('#myswatchbox').on('click', showColorPicker);
374415
$('#mycolorpicker .pickerswatchouter').on('click', function () {

src/static/skins/colibris/src/components/users.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@ table#otheruserstable {
22
margin-top: 20px;
33
}
44

5+
/*
6+
* Clicking a row in the user list opens chat and prefills "@<name> ".
7+
* The pointer cursor on the name cell makes the affordance visible —
8+
* the swatch keeps its own (color-picker) click semantics, so leave
9+
* its cursor alone.
10+
*/
11+
#otheruserstable tr[data-authorId] .usertdname {
12+
cursor: pointer;
13+
}
14+
#otheruserstable tr[data-authorId]:hover .usertdname {
15+
text-decoration: underline;
16+
}
17+
518
.popup#users.chatAndUsers > .popup-content {
619
padding: 20px 10px;
720
height: 250px;

0 commit comments

Comments
 (0)