mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
feat(mentions): overhaul, refactor, notification bubble & window update
Chat tagging: - Any @user is a visible tag in chat bubbles (the .mention-tag CSS never existed, so highlighting was invisible); self/alias mentions get a gold emphasis. Fixes cross-room tags not being highlighted. Mentions window: - Redesigned: unread count in the header, restyled filter chips + a refresh button, CSS-driven list/date-groups, adaptive height (compact when few, capped + scroll when many), polished empty state. - Rows: framed avatar (friends-list head crop so the face is never clipped), per-row unread dot, type marker, icon action buttons (goto / remove). - Re-requests from the server each time it opens. Autocomplete: - Never suggests the viewer themselves; suggests room users + online friends + aliases. Notifications: - Mention toast removed; mentions flow through the client's standard notification stream via a dedicated mention bubble (avatar + actions) in the default position. EVERY received mention surfaces (independent of the generic info-feed toggle, gated only by mentions_ui.enabled). Refactor (behaviour-preserving): - Centralised @-token classification in api/mentions/mentionTokens. - Moved mentionsFormat -> api/mentions, useMentionActions -> hooks/mentions. - Extracted ChatInputView @-autocomplete into a tested useChatMentions hook + pure helper; removed the dead duplicate useMentionAutocomplete.
This commit is contained in:
simoleo89
@@ -1,2 +1,4 @@
|
||||
export * from './MentionType';
|
||||
export * from './IMentionEntry';
|
||||
export * from './mentionTokens';
|
||||
export * from './mentionsFormat';
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { classifyMentionToken, MENTION_ROOM_ALIASES, tokenIsMention } from './mentionTokens';
|
||||
|
||||
describe('classifyMentionToken', () =>
|
||||
{
|
||||
it('returns "self" for the own nick', () =>
|
||||
{
|
||||
expect(classifyMentionToken('@Bob', 'Bob')).toBe('self');
|
||||
});
|
||||
|
||||
it('returns "self" for a broadcast alias', () =>
|
||||
{
|
||||
expect(classifyMentionToken('@all', 'Bob')).toBe('self');
|
||||
|
||||
for(const alias of MENTION_ROOM_ALIASES)
|
||||
{
|
||||
expect(classifyMentionToken(`@${ alias }`, 'Bob')).toBe('self');
|
||||
}
|
||||
});
|
||||
|
||||
it('returns "tag" for any other @user', () =>
|
||||
{
|
||||
expect(classifyMentionToken('@Charlie', 'Bob')).toBe('tag');
|
||||
});
|
||||
|
||||
it('matches the own nick case-insensitively', () =>
|
||||
{
|
||||
expect(classifyMentionToken('@bOb', 'BOB')).toBe('self');
|
||||
});
|
||||
|
||||
it('returns "" for non-mentions and a bare @', () =>
|
||||
{
|
||||
expect(classifyMentionToken('@', 'Bob')).toBe('');
|
||||
expect(classifyMentionToken('nothing', 'Bob')).toBe('');
|
||||
});
|
||||
|
||||
it('still tags others when the own username is empty', () =>
|
||||
{
|
||||
expect(classifyMentionToken('@Charlie', '')).toBe('tag');
|
||||
});
|
||||
});
|
||||
|
||||
describe('tokenIsMention', () =>
|
||||
{
|
||||
it('is true only for self/alias mentions', () =>
|
||||
{
|
||||
expect(tokenIsMention('@Bob', 'Bob')).toBe(true);
|
||||
expect(tokenIsMention('@everyone', 'Bob')).toBe(true);
|
||||
expect(tokenIsMention('@Charlie', 'Bob')).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
// Shared @-mention token classification, used by both the chat-bubble
|
||||
// highlighter and the mentions panel so the two can't diverge.
|
||||
|
||||
export const MENTION_ROOM_ALIASES: ReadonlyArray<string> = [
|
||||
'all', 'everyone', 'tutti',
|
||||
'friends', 'amici',
|
||||
'room', 'stanza'
|
||||
];
|
||||
|
||||
const NON_NICK_CHARS = /[^A-Za-z0-9_]/g;
|
||||
|
||||
const normalizeToken = (token: string): string =>
|
||||
{
|
||||
if(!token || (token.length < 2) || (token.charAt(0) !== '@')) return '';
|
||||
|
||||
return token.substring(1).replace(NON_NICK_CHARS, '').toLowerCase();
|
||||
};
|
||||
|
||||
const normalizeNick = (value: string): string => (value || '').replace(NON_NICK_CHARS, '').toLowerCase();
|
||||
|
||||
// '' = not a mention; 'tag' = any @user (subtle chip); 'self' = the token
|
||||
// targets the viewer (own nick) or is a broadcast alias (strong highlight).
|
||||
export type MentionKind = '' | 'tag' | 'self';
|
||||
|
||||
export const classifyMentionToken = (
|
||||
token: string,
|
||||
ownUsername: string,
|
||||
aliases: ReadonlyArray<string> = MENTION_ROOM_ALIASES
|
||||
): MentionKind =>
|
||||
{
|
||||
const nick = normalizeToken(token);
|
||||
|
||||
if(!nick) return '';
|
||||
|
||||
const ownLower = normalizeNick(ownUsername);
|
||||
|
||||
if((ownLower && (nick === ownLower)) || aliases.some(alias => alias.toLowerCase() === nick)) return 'self';
|
||||
|
||||
return 'tag';
|
||||
};
|
||||
|
||||
/**
|
||||
* Back-compat boolean — true only when the token targets the viewer or a
|
||||
* broadcast alias (i.e. "I was mentioned"), not for generic @user tags.
|
||||
*/
|
||||
export const tokenIsMention = (
|
||||
token: string,
|
||||
ownUsername: string,
|
||||
aliases: ReadonlyArray<string> = MENTION_ROOM_ALIASES
|
||||
): boolean => (classifyMentionToken(token, ownUsername, aliases) === 'self');
|
||||
@@ -0,0 +1,25 @@
|
||||
import { IMentionEntry } from '../mentions';
|
||||
import { NotificationBubbleItem } from './NotificationBubbleItem';
|
||||
import { NotificationBubbleType } from './NotificationBubbleType';
|
||||
|
||||
/**
|
||||
* A notification bubble that carries a full mention entry, so the dedicated
|
||||
* mention bubble layout can render the sender's avatar (from the figure) and
|
||||
* the go-to-room action — data the plain NotificationBubbleItem can't hold.
|
||||
*/
|
||||
export class MentionNotificationBubbleItem extends NotificationBubbleItem
|
||||
{
|
||||
private _mention: IMentionEntry;
|
||||
|
||||
constructor(mention: IMentionEntry)
|
||||
{
|
||||
super(mention.message, NotificationBubbleType.MENTION, null, null, mention.senderUsername);
|
||||
|
||||
this._mention = mention;
|
||||
}
|
||||
|
||||
public get mention(): IMentionEntry
|
||||
{
|
||||
return this._mention;
|
||||
}
|
||||
}
|
||||
@@ -16,4 +16,5 @@ export class NotificationBubbleType
|
||||
public static BUYFURNI: string = 'buyfurni';
|
||||
public static VIP: string = 'vip';
|
||||
public static ROOMMESSAGESPOSTED: string = 'roommessagesposted';
|
||||
public static MENTION: string = 'mention';
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export * from './NotificationAlertItem';
|
||||
export * from './NotificationAlertType';
|
||||
export * from './MentionNotificationBubbleItem';
|
||||
export * from './NotificationBubbleItem';
|
||||
export * from './NotificationBubbleType';
|
||||
export * from './NotificationConfirmItem';
|
||||
|
||||
@@ -48,7 +48,7 @@ import { UserAccountSettingsView } from './user-settings/UserAccountSettingsView
|
||||
import { UserSettingsView } from './user-settings/UserSettingsView';
|
||||
import { WiredView } from './wired/WiredView';
|
||||
import { WiredCreatorToolsView } from './wired-tools/WiredCreatorToolsView';
|
||||
import { MentionsView, MentionToastsView } from './mentions';
|
||||
import { MentionsView } from './mentions';
|
||||
|
||||
export const MainView: FC<{}> = props =>
|
||||
{
|
||||
@@ -242,8 +242,6 @@ export const MainView: FC<{}> = props =>
|
||||
{ GetConfigurationValue<boolean>('radio_ui.enabled', false) && <RadioView /> }
|
||||
{ (GetConfigurationValue<boolean>('mentions_ui.enabled', true) && mentionsVisible) &&
|
||||
<MentionsView onClose={ () => setMentionsVisible(false) } /> }
|
||||
{ GetConfigurationValue<boolean>('mentions_ui.enabled', true) &&
|
||||
<MentionToastsView /> }
|
||||
<ExternalPluginLoader />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -2,10 +2,10 @@ import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '
|
||||
import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ChatEntryType, LocalizeText } from '../../api';
|
||||
import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common';
|
||||
import { useChatHistory, useMentionsSnapshot, useOnClickChat } from '../../hooks';
|
||||
import { useChatHistory, useMentionActions, useMentionsSnapshot, useOnClickChat } from '../../hooks';
|
||||
import { useUserDataSnapshot } from '../../hooks/session/useSessionSnapshots';
|
||||
import { NitroInput } from '../../layout';
|
||||
import { MentionRowView, useMentionActions } from '../mentions';
|
||||
import { MentionRowView } from '../mentions';
|
||||
|
||||
const TAB_CHAT = 'chat';
|
||||
const TAB_MENTIONS = 'mentions';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { FC, Fragment, ReactNode } from 'react';
|
||||
import { tokenIsMention } from '../room/widgets/chat/highlightMentions';
|
||||
import { classifyMentionToken } from '../../api/mentions/mentionTokens';
|
||||
|
||||
interface MentionMessageViewProps
|
||||
{
|
||||
@@ -9,10 +9,11 @@ interface MentionMessageViewProps
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a mention's message text as React nodes, wrapping the token(s) that
|
||||
* mention the local user or a room-broadcast alias in a `.mention-highlight`
|
||||
* span. Pure text segmentation (no innerHTML) → no XSS risk from other users'
|
||||
* chat content. Original spacing is preserved verbatim.
|
||||
* Renders a mention's message text as React nodes, wrapping every @user token
|
||||
* in a `.mention-tag` span (with the `.mention-tag--self` modifier when the
|
||||
* token targets the local user or a broadcast alias). Pure text segmentation
|
||||
* (no innerHTML) → no XSS risk from other users' chat content. Original spacing
|
||||
* is preserved verbatim.
|
||||
*/
|
||||
export const MentionMessageView: FC<MentionMessageViewProps> = props =>
|
||||
{
|
||||
@@ -24,12 +25,11 @@ export const MentionMessageView: FC<MentionMessageViewProps> = props =>
|
||||
{
|
||||
if(segment.length === 0) return null;
|
||||
|
||||
if(/^\s+$/.test(segment) || !tokenIsMention(segment, ownUsername))
|
||||
{
|
||||
return <Fragment key={ index }>{ segment }</Fragment>;
|
||||
}
|
||||
const kind = (/^\s+$/.test(segment)) ? '' : classifyMentionToken(segment, ownUsername);
|
||||
|
||||
return <span key={ index } className="mention-highlight">{ segment }</span>;
|
||||
if(!kind) return <Fragment key={ index }>{ segment }</Fragment>;
|
||||
|
||||
return <span key={ index } className={ (kind === 'self') ? 'mention-tag mention-tag--self' : 'mention-tag' }>{ segment }</span>;
|
||||
});
|
||||
|
||||
return <span className={ className }>{ nodes }</span>;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { FC, MouseEvent } from 'react';
|
||||
import { IMentionEntry, LocalizeText, MentionType } from '../../api';
|
||||
import { Flex, Text } from '../../common';
|
||||
import { FaArrowRight, FaTimes } from 'react-icons/fa';
|
||||
import { formatMentionTime, IMentionEntry, LocalizeText, MentionType } from '../../api';
|
||||
import { LayoutAvatarImageView } from '../../common';
|
||||
import { MentionMessageView } from './MentionMessageView';
|
||||
import { formatMentionTime } from './mentionsFormat';
|
||||
|
||||
interface MentionRowViewProps
|
||||
{
|
||||
@@ -28,39 +28,31 @@ export const MentionRowView: FC<MentionRowViewProps> = props =>
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex pointer alignItems="center" className="group relative px-1 py-[3px] rounded hover:bg-black/5" gap={ 2 } onClick={ () => onOpen(mention) }>
|
||||
<span
|
||||
className={ `inline-block w-[8px] h-[8px] rounded-full shrink-0 ${ mention.read ? 'bg-transparent' : 'bg-[#1e7295]' }` }
|
||||
title={ mention.read ? '' : LocalizeText('mentions.filter.unread') } />
|
||||
<span
|
||||
title={ typeTitle }
|
||||
className={ `flex items-center justify-center shrink-0 w-[18px] h-[18px] rounded text-[10px] font-bold leading-none text-white ${ isRoom ? 'bg-[#d08a1e]' : 'bg-[#1e7295]' }` }>
|
||||
{ isRoom ? '@∗' : '@' }
|
||||
</span>
|
||||
<Flex grow column className="min-w-0" gap={ 0 }>
|
||||
<Flex alignItems="center" gap={ 1 } className="min-w-0">
|
||||
<Text bold={ !mention.read } truncate variant="primary">{ mention.senderUsername }</Text>
|
||||
{ (mention.roomName && mention.roomName.length > 0) &&
|
||||
<Text small truncate variant="gray">· { mention.roomName }</Text> }
|
||||
</Flex>
|
||||
<MentionMessageView className="block truncate text-black text-sm" ownUsername={ ownUsername } text={ mention.message } />
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 1 } className="shrink-0">
|
||||
<div className={ `mention-row ${ mention.read ? '' : 'is-unread' }` } onClick={ () => onOpen(mention) }>
|
||||
{ !mention.read &&
|
||||
<span className="mention-row-unread-dot" aria-hidden /> }
|
||||
<div className="mention-row-avatar" title={ typeTitle }>
|
||||
<LayoutAvatarImageView headOnly direction={ 2 } figure={ mention.senderFigure } />
|
||||
<span className={ `mention-row-type ${ isRoom ? 'is-room' : 'is-direct' }` }>{ isRoom ? '∗' : '@' }</span>
|
||||
</div>
|
||||
<div className="mention-row-body">
|
||||
<div className="mention-row-head">
|
||||
<span className="mention-row-name">{ mention.senderUsername }</span>
|
||||
{ (mention.roomName && (mention.roomName.length > 0)) &&
|
||||
<span className="mention-row-room">· { mention.roomName }</span> }
|
||||
</div>
|
||||
<MentionMessageView className="mention-row-msg" ownUsername={ ownUsername } text={ mention.message } />
|
||||
</div>
|
||||
<div className="mention-row-meta">
|
||||
{ (time.length > 0) &&
|
||||
<Text small variant="gray" className="tabular-nums group-hover:hidden">{ time }</Text> }
|
||||
<Flex alignItems="center" gap={ 1 } className="hidden group-hover:flex">
|
||||
<span className="mention-row-time">{ time }</span> }
|
||||
<div className="mention-row-actions">
|
||||
{ onGoto &&
|
||||
<span
|
||||
title={ LocalizeText('mentions.action.goto') }
|
||||
className="flex items-center justify-center w-[18px] h-[18px] rounded bg-black/10 hover:bg-black/20 text-[12px] leading-none"
|
||||
onClick={ event => stop(event, () => onGoto(mention)) }>→</span> }
|
||||
<button type="button" className="mention-row-action" title={ LocalizeText('mentions.action.goto') } onClick={ event => stop(event, () => onGoto(mention)) }><FaArrowRight /></button> }
|
||||
{ onRemove &&
|
||||
<span
|
||||
title={ LocalizeText('mentions.action.remove') }
|
||||
className="flex items-center justify-center w-[18px] h-[18px] rounded bg-black/10 hover:bg-red-500 hover:text-white text-[11px] leading-none"
|
||||
onClick={ event => stop(event, () => onRemove(mention)) }>✕</span> }
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<button type="button" className="mention-row-action is-remove" title={ LocalizeText('mentions.action.remove') } onClick={ event => stop(event, () => onRemove(mention)) }><FaTimes /></button> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
import { CreateLinkEvent, MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, MouseEvent, useEffect } from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import { LocalizeText, SendMessageComposer } from '../../api';
|
||||
import { LayoutAvatarImageView } from '../../common';
|
||||
import { useExternalSnapshot } from '../../hooks/events/useExternalSnapshot';
|
||||
import { markRead } from '../../hooks/mentions/mentionsStore';
|
||||
import { dismissMentionToast, getMentionToasts, MentionToast, subscribeMentionToasts } from '../../hooks/mentions/mentionToastsStore';
|
||||
|
||||
// Quanto resta visibile un toast prima di nascondersi da solo (resta non-letto).
|
||||
const AUTO_DISMISS_MS = 8000;
|
||||
|
||||
const MentionToastItemView: FC<{ toast: MentionToast }> = ({ toast }) =>
|
||||
{
|
||||
useEffect(() =>
|
||||
{
|
||||
const timer = window.setTimeout(() => dismissMentionToast(toast.mentionId), AUTO_DISMISS_MS);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [ toast.mentionId ]);
|
||||
|
||||
// Dismiss esplicito: segna letta (badge toolbar si aggiorna) + persiste sul server + chiude.
|
||||
const onDismiss = (event: MouseEvent) =>
|
||||
{
|
||||
event.stopPropagation();
|
||||
markRead(toast.mentionId);
|
||||
SendMessageComposer(new MarkMentionsReadComposer(1, toast.mentionId));
|
||||
dismissMentionToast(toast.mentionId);
|
||||
};
|
||||
|
||||
const onOpen = () =>
|
||||
{
|
||||
CreateLinkEvent('mentions/toggle');
|
||||
dismissMentionToast(toast.mentionId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mention-toast" onClick={ onOpen }>
|
||||
<div className="mention-toast-avatar">
|
||||
<LayoutAvatarImageView headOnly direction={ 2 } figure={ toast.senderFigure } />
|
||||
</div>
|
||||
<div className="mention-toast-body">
|
||||
<div className="mention-toast-title">{ toast.senderUsername }</div>
|
||||
<div className="mention-toast-message">{ toast.message }</div>
|
||||
</div>
|
||||
<button className="mention-toast-dismiss" title={ LocalizeText('generic.cancel') } type="button" onClick={ onDismiss }>
|
||||
<FaTimes />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MentionToastsView: FC = () =>
|
||||
{
|
||||
const toasts = useExternalSnapshot(subscribeMentionToasts, getMentionToasts);
|
||||
|
||||
if(!toasts || !toasts.length) return null;
|
||||
|
||||
return (
|
||||
<div className="mention-toasts">
|
||||
{ toasts.map(toast => <MentionToastItemView key={ toast.mentionId } toast={ toast } />) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,13 +1,12 @@
|
||||
import { MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useMemo, useState } from 'react';
|
||||
import { IMentionEntry, LocalizeText, MentionType, SendMessageComposer } from '../../api';
|
||||
import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
|
||||
import { useMentionsSnapshot } from '../../hooks';
|
||||
import { MarkMentionsReadComposer, RequestMentionsComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { FaSearch, FaSync } from 'react-icons/fa';
|
||||
import { getMentionDateGroup, IMentionEntry, LocalizeText, MentionDateGroup, MentionType, SendMessageComposer } from '../../api';
|
||||
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
|
||||
import { useMentionActions, useMentionsSnapshot } from '../../hooks';
|
||||
import { markAllRead } from '../../hooks/mentions/mentionsStore';
|
||||
import { useUserDataSnapshot } from '../../hooks/session/useSessionSnapshots';
|
||||
import { MentionRowView } from './MentionRowView';
|
||||
import { getMentionDateGroup, MentionDateGroup } from './mentionsFormat';
|
||||
import { useMentionActions } from './useMentionActions';
|
||||
|
||||
interface MentionsViewProps
|
||||
{
|
||||
@@ -41,6 +40,17 @@ const matchesFilter = (mention: IMentionEntry, filter: MentionFilter): boolean =
|
||||
}
|
||||
};
|
||||
|
||||
const matchesQuery = (mention: IMentionEntry, query: string): boolean =>
|
||||
{
|
||||
if(!query) return true;
|
||||
|
||||
const q = query.toLowerCase();
|
||||
|
||||
return ((mention.senderUsername || '').toLowerCase().includes(q)
|
||||
|| (mention.roomName || '').toLowerCase().includes(q)
|
||||
|| (mention.message || '').toLowerCase().includes(q));
|
||||
};
|
||||
|
||||
export const MentionsView: FC<MentionsViewProps> = props =>
|
||||
{
|
||||
const { onClose } = props;
|
||||
@@ -48,6 +58,15 @@ export const MentionsView: FC<MentionsViewProps> = props =>
|
||||
const { userName: ownUsername = '' } = useUserDataSnapshot();
|
||||
const { open, goto, remove } = useMentionActions();
|
||||
const [ filter, setFilter ] = useState<MentionFilter>('all');
|
||||
const [ query, setQuery ] = useState('');
|
||||
|
||||
// Re-request from the server: once on open, and on the manual refresh button.
|
||||
const refresh = useCallback(() => SendMessageComposer(new RequestMentionsComposer()), []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
refresh();
|
||||
}, [ refresh ]);
|
||||
|
||||
const onMarkAll = useCallback(() =>
|
||||
{
|
||||
@@ -62,48 +81,57 @@ export const MentionsView: FC<MentionsViewProps> = props =>
|
||||
for(const mention of mentions)
|
||||
{
|
||||
if(!matchesFilter(mention, filter)) continue;
|
||||
if(!matchesQuery(mention, query)) continue;
|
||||
buckets[getMentionDateGroup(mention.timestamp)].push(mention);
|
||||
}
|
||||
|
||||
return GROUP_ORDER
|
||||
.map(key => ({ key, items: buckets[key] }))
|
||||
.filter(group => group.items.length > 0);
|
||||
}, [ mentions, filter ]);
|
||||
}, [ mentions, filter, query ]);
|
||||
|
||||
const hasAny = groups.length > 0;
|
||||
const title = `${ LocalizeText('mentions.window.title') }${ (unreadCount > 0) ? ` (${ unreadCount })` : '' }`;
|
||||
|
||||
return (
|
||||
<NitroCardView className="w-[360px] h-[440px] has-classic-scrollbar" theme="primary-slim" uniqueKey="mentions">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('mentions.window.title') } onCloseClick={ onClose } />
|
||||
<NitroCardView className="mentions-window w-[360px] has-classic-scrollbar" theme="primary-slim" uniqueKey="mentions">
|
||||
<NitroCardHeaderView headerText={ title } onCloseClick={ onClose } />
|
||||
<NitroCardContentView gap={ 1 }>
|
||||
<Flex alignItems="center" className="flex-wrap" gap={ 1 }>
|
||||
{ FILTERS.map(({ key, label }) =>
|
||||
{
|
||||
const active = (filter === key);
|
||||
const showCount = ((key === 'unread') && (unreadCount > 0));
|
||||
<div className="mentions-search">
|
||||
<FaSearch className="mentions-search-icon" />
|
||||
<input
|
||||
type="text"
|
||||
value={ query }
|
||||
placeholder={ LocalizeText('generic.search') }
|
||||
onChange={ event => setQuery(event.target.value) } />
|
||||
</div>
|
||||
<div className="mentions-toolbar">
|
||||
<div className="mentions-filters">
|
||||
{ FILTERS.map(({ key, label }) =>
|
||||
{
|
||||
const active = (filter === key);
|
||||
const showCount = ((key === 'unread') && (unreadCount > 0));
|
||||
|
||||
return (
|
||||
<button
|
||||
key={ key }
|
||||
type="button"
|
||||
onClick={ () => setFilter(key) }
|
||||
className={ `px-2 py-[2px] rounded-full text-xs border transition-colors ${ active ? 'bg-[#1e7295] text-white border-[#1e7295]' : 'bg-black/5 text-black/70 border-transparent hover:bg-black/10' }` }>
|
||||
{ LocalizeText(label) }{ showCount ? ` (${ unreadCount })` : '' }
|
||||
</button>
|
||||
);
|
||||
}) }
|
||||
</Flex>
|
||||
<Flex grow column className="min-h-0 overflow-y-auto" gap={ 0 }>
|
||||
return (
|
||||
<button key={ key } type="button" className={ `mentions-filter ${ active ? 'is-active' : '' }` } onClick={ () => setFilter(key) }>
|
||||
{ LocalizeText(label) }{ showCount ? ` ${ unreadCount }` : '' }
|
||||
</button>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<button type="button" className="mentions-refresh" title="Aggiorna" onClick={ refresh }>
|
||||
<FaSync />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mentions-list">
|
||||
{ !hasAny &&
|
||||
<Flex grow column center gap={ 2 } className="py-6 text-center">
|
||||
<span className="flex items-center justify-center w-[44px] h-[44px] rounded-full bg-black/5 text-[#1e7295] text-[22px] font-bold">@</span>
|
||||
<Text center variant="gray">{ LocalizeText('mentions.window.empty') }</Text>
|
||||
</Flex> }
|
||||
<div className="mentions-empty">
|
||||
<span className="mentions-empty-glyph">@</span>
|
||||
<span className="mentions-empty-text">{ LocalizeText('mentions.window.empty') }</span>
|
||||
</div> }
|
||||
{ hasAny && groups.map(group => (
|
||||
<Flex key={ group.key } column gap={ 0 }>
|
||||
<Text small bold variant="gray" className="px-1 pt-2 pb-[2px] uppercase tracking-wide">
|
||||
{ LocalizeText(GROUP_LABEL[group.key]) }
|
||||
</Text>
|
||||
<div key={ group.key } className="mentions-group">
|
||||
<div className="mentions-group-label">{ LocalizeText(GROUP_LABEL[group.key]) }</div>
|
||||
{ group.items.map(mention => (
|
||||
<MentionRowView
|
||||
key={ mention.mentionId }
|
||||
@@ -113,9 +141,9 @@ export const MentionsView: FC<MentionsViewProps> = props =>
|
||||
onRemove={ remove }
|
||||
ownUsername={ ownUsername } />
|
||||
)) }
|
||||
</Flex>
|
||||
</div>
|
||||
)) }
|
||||
</Flex>
|
||||
</div>
|
||||
{ (unreadCount > 0) &&
|
||||
<Button variant="primary" onClick={ onMarkAll }>{ LocalizeText('mentions.window.markall') }</Button> }
|
||||
</NitroCardContentView>
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
export * from './MentionMessageView';
|
||||
export * from './MentionRowView';
|
||||
export * from './MentionsView';
|
||||
export * from './MentionToastsView';
|
||||
export * from './mentionsFormat';
|
||||
export * from './useMentionActions';
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { NotificationBubbleItem, NotificationBubbleType } from '../../../../api';
|
||||
import { MentionNotificationBubbleItem, NotificationBubbleItem, NotificationBubbleType } from '../../../../api';
|
||||
import { NotificationBadgeReceivedBubbleView } from './NotificationBadgeReceivedBubbleView';
|
||||
import { NotificationClubGiftBubbleView } from './NotificationClubGiftBubbleView';
|
||||
import { NotificationDefaultBubbleView } from './NotificationDefaultBubbleView';
|
||||
import { NotificationMentionBubbleView } from './NotificationMentionBubbleView';
|
||||
|
||||
export const GetBubbleLayout = (item: NotificationBubbleItem, onClose: () => void) =>
|
||||
{
|
||||
@@ -15,6 +16,8 @@ export const GetBubbleLayout = (item: NotificationBubbleItem, onClose: () => voi
|
||||
return <NotificationBadgeReceivedBubbleView key={ item.id } { ...props } />;
|
||||
case NotificationBubbleType.CLUBGIFT:
|
||||
return <NotificationClubGiftBubbleView key={ item.id } { ...props } />;
|
||||
case NotificationBubbleType.MENTION:
|
||||
return <NotificationMentionBubbleView key={ item.id } item={ item as MentionNotificationBubbleItem } onClose={ onClose } />;
|
||||
default:
|
||||
return <NotificationDefaultBubbleView key={ item.id } { ...props } />;
|
||||
}
|
||||
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
import { CreateLinkEvent, MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, MouseEvent } from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import { formatMentionTime, LocalizeText, MentionNotificationBubbleItem, MentionType, SendMessageComposer } from '../../../../api';
|
||||
import { Flex, LayoutAvatarImageView, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps, Text } from '../../../../common';
|
||||
import { markRead } from '../../../../hooks/mentions/mentionsStore';
|
||||
import { useUserDataSnapshot } from '../../../../hooks/session/useSessionSnapshots';
|
||||
import { MentionMessageView } from '../../../mentions/MentionMessageView';
|
||||
|
||||
export interface NotificationMentionBubbleViewProps extends LayoutNotificationBubbleViewProps
|
||||
{
|
||||
item: MentionNotificationBubbleItem;
|
||||
}
|
||||
|
||||
export const NotificationMentionBubbleView: FC<NotificationMentionBubbleViewProps> = props =>
|
||||
{
|
||||
const { item = null, onClose = null, ...rest } = props;
|
||||
const { userName: ownUsername = '' } = useUserDataSnapshot();
|
||||
|
||||
const mention = item.mention;
|
||||
const isRoom = (mention.mentionType === MentionType.ROOM);
|
||||
const time = formatMentionTime(mention.timestamp);
|
||||
|
||||
const markReadOnServer = () =>
|
||||
{
|
||||
markRead(mention.mentionId);
|
||||
SendMessageComposer(new MarkMentionsReadComposer(1, mention.mentionId));
|
||||
};
|
||||
|
||||
// Whole-bubble click opens the mentions panel (and dismisses the bubble).
|
||||
const open = () =>
|
||||
{
|
||||
CreateLinkEvent('mentions/toggle');
|
||||
onClose();
|
||||
};
|
||||
|
||||
const goto = () =>
|
||||
{
|
||||
markReadOnServer();
|
||||
if(mention.roomId > 0) CreateLinkEvent(`navigator/goto/${ mention.roomId }`);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const act = (event: MouseEvent, fn: () => void) =>
|
||||
{
|
||||
event.stopPropagation();
|
||||
fn();
|
||||
};
|
||||
|
||||
return (
|
||||
<LayoutNotificationBubbleView
|
||||
alignItems="start"
|
||||
gap={ 2 }
|
||||
classNames={ [ 'w-[330px]', 'max-w-[92vw]', 'cursor-pointer' ] }
|
||||
onClick={ open }
|
||||
onClose={ onClose }
|
||||
{ ...rest }>
|
||||
<div className="mention-toast-avatar">
|
||||
<LayoutAvatarImageView headOnly direction={ 2 } figure={ mention.senderFigure } />
|
||||
</div>
|
||||
<Flex column gap={ 0 } className="min-w-0 flex-1">
|
||||
<Flex alignItems="center" gap={ 1 } className="min-w-0">
|
||||
<Text bold truncate variant="white">{ mention.senderUsername }</Text>
|
||||
<span className={ `mention-toast-chip ${ isRoom ? 'is-room' : 'is-direct' }` }>
|
||||
{ LocalizeText(isRoom ? 'mentions.type.room' : 'mentions.type.direct') }
|
||||
</span>
|
||||
<span className="mention-toast-spacer" />
|
||||
{ (time.length > 0) &&
|
||||
<span className="mention-toast-time">{ time }</span> }
|
||||
<button type="button" className="mention-toast-dismiss" title={ LocalizeText('generic.cancel') } onClick={ event => act(event, onClose) }>
|
||||
<FaTimes />
|
||||
</button>
|
||||
</Flex>
|
||||
{ (mention.roomName && (mention.roomName.length > 0)) &&
|
||||
<span className="mention-toast-room">· { mention.roomName }</span> }
|
||||
<MentionMessageView className="mention-toast-message" ownUsername={ ownUsername } text={ mention.message } />
|
||||
<Flex gap={ 1 } className="mention-toast-actions">
|
||||
<button type="button" className="mention-toast-btn" onClick={ event => act(event, open) }>
|
||||
{ LocalizeText('mentions.window.title') }
|
||||
</button>
|
||||
{ (mention.roomId > 0) &&
|
||||
<button type="button" className="mention-toast-btn" onClick={ event => act(event, goto) }>
|
||||
{ LocalizeText('mentions.action.goto') }
|
||||
</button> }
|
||||
</Flex>
|
||||
</Flex>
|
||||
</LayoutNotificationBubbleView>
|
||||
);
|
||||
};
|
||||
@@ -1,17 +1,6 @@
|
||||
import { FC, useEffect, useRef } from 'react';
|
||||
import { LayoutAvatarImageView } from '../../../../common';
|
||||
|
||||
export type MentionSuggestionKind = 'user' | 'alias';
|
||||
|
||||
export interface MentionSuggestion
|
||||
{
|
||||
key: string;
|
||||
kind: MentionSuggestionKind;
|
||||
name: string;
|
||||
insertToken: string;
|
||||
figure?: string;
|
||||
description?: string;
|
||||
}
|
||||
import { MentionSuggestion } from '../../../../hooks/rooms/widgets/useChatMentions.helpers';
|
||||
|
||||
interface ChatInputMentionSelectorViewProps
|
||||
{
|
||||
|
||||
@@ -3,50 +3,12 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { ChatMessageTypeEnum, GetClubMemberLevel, GetConfigurationValue, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
|
||||
import { Text } from '../../../../common';
|
||||
import { useCatalogClassicStyle, useChatCommandSelector, useChatInputWidget, useRoom, useSessionInfo, useUiEvent } from '../../../../hooks';
|
||||
import { useRoomUserListSnapshot } from '../../../../hooks/session/useSessionSnapshots';
|
||||
import { useCatalogClassicStyle, useChatCommandSelector, useChatInputWidget, useChatMentions, useRoom, useSessionInfo, useUiEvent } from '../../../../hooks';
|
||||
import { ChatInputCommandSelectorView } from './ChatInputCommandSelectorView';
|
||||
import { ChatInputEmojiSelectorView } from './ChatInputEmojiSelectorView';
|
||||
import { ChatInputMentionSelectorView, MentionSuggestion } from './ChatInputMentionSelectorView';
|
||||
import { ChatInputMentionSelectorView } from './ChatInputMentionSelectorView';
|
||||
import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
|
||||
|
||||
const USER_TYPE_REAL_USER = 1;
|
||||
const MAX_MENTION_SUGGESTIONS = 8;
|
||||
|
||||
type MentionAliasScope = 'everyone' | 'friends' | 'room';
|
||||
|
||||
const MENTION_ALIAS_CONFIG_KEY: Record<MentionAliasScope, string> = {
|
||||
everyone: 'mentions_ui.aliases.everyone',
|
||||
friends: 'mentions_ui.aliases.friends',
|
||||
room: 'mentions_ui.aliases.room'
|
||||
};
|
||||
|
||||
const MENTION_ALIAS_DEFAULTS: Record<MentionAliasScope, string[]> = {
|
||||
everyone: [ 'all', 'everyone', 'tutti' ],
|
||||
friends: [ 'friends', 'amici' ],
|
||||
room: [ 'room', 'stanza' ]
|
||||
};
|
||||
|
||||
const MENTION_ALIAS_DESCRIPTION_KEY: Record<MentionAliasScope, string> = {
|
||||
everyone: 'mentions.alias.description.everyone',
|
||||
friends: 'mentions.alias.description.friends',
|
||||
room: 'mentions.alias.description.room'
|
||||
};
|
||||
|
||||
const sanitizeAliasList = (raw: unknown, fallback: string[]): string[] =>
|
||||
{
|
||||
if(!Array.isArray(raw)) return fallback;
|
||||
const out: string[] = [];
|
||||
for(const entry of raw)
|
||||
{
|
||||
if(typeof entry !== 'string') continue;
|
||||
const trimmed = entry.trim();
|
||||
if(!trimmed) continue;
|
||||
out.push(trimmed);
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
export const ChatInputView: FC<{}> = props =>
|
||||
{
|
||||
const [ chatValue, setChatValue ] = useState<string>('');
|
||||
@@ -56,129 +18,13 @@ export const ChatInputView: FC<{}> = props =>
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const { isVisible: commandSelectorVisible, filteredCommands, selectedIndex, setSelectedIndex, moveUp, moveDown, selectCurrent, close: closeCommandSelector } = useChatCommandSelector(chatValue);
|
||||
|
||||
const roomUserList = useRoomUserListSnapshot();
|
||||
const [ mentionSelectedIndex, setMentionSelectedIndex ] = useState<number>(0);
|
||||
// The "New style" user-setting (memenu.settings.other.catalog.classic.style)
|
||||
// drives BOTH the catalog layout and the mention-picker chrome:
|
||||
// false (default) = Habbo old-school NitroCard cardstock look
|
||||
// true = flat minimalist gray look
|
||||
const [ newStyle ] = useCatalogClassicStyle();
|
||||
|
||||
const mentionContext = useMemo(() =>
|
||||
{
|
||||
if(!chatValue) return null;
|
||||
if(commandSelectorVisible) return null;
|
||||
|
||||
const caret = inputRef.current?.selectionStart ?? chatValue.length;
|
||||
const upToCaret = chatValue.slice(0, caret);
|
||||
const at = upToCaret.lastIndexOf('@');
|
||||
if(at < 0) return null;
|
||||
|
||||
if(at > 0 && !/\s/.test(upToCaret.charAt(at - 1))) return null;
|
||||
|
||||
const query = upToCaret.slice(at + 1);
|
||||
if(/\s/.test(query)) return null;
|
||||
|
||||
return { atIndex: at, replaceFrom: at, replaceTo: caret, query };
|
||||
}, [ chatValue, commandSelectorVisible ]);
|
||||
|
||||
const mentionAliases = useMemo<ReadonlyArray<{ key: string; scope: MentionAliasScope; description: string }>>(() =>
|
||||
{
|
||||
const out: { key: string; scope: MentionAliasScope; description: string }[] = [];
|
||||
const seen = new Set<string>();
|
||||
|
||||
const scopes: MentionAliasScope[] = [ 'everyone', 'friends', 'room' ];
|
||||
for(const scope of scopes)
|
||||
{
|
||||
const list = sanitizeAliasList(
|
||||
GetConfigurationValue<unknown>(MENTION_ALIAS_CONFIG_KEY[scope], MENTION_ALIAS_DEFAULTS[scope]),
|
||||
MENTION_ALIAS_DEFAULTS[scope]
|
||||
);
|
||||
|
||||
for(const key of list)
|
||||
{
|
||||
const lower = key.toLowerCase();
|
||||
|
||||
if(seen.has(lower)) continue;
|
||||
seen.add(lower);
|
||||
|
||||
out.push({ key, scope, description: LocalizeText(MENTION_ALIAS_DESCRIPTION_KEY[scope]) });
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
}, []);
|
||||
|
||||
const mentionSuggestions = useMemo<MentionSuggestion[]>(() =>
|
||||
{
|
||||
if(!mentionContext) return [];
|
||||
|
||||
const query = mentionContext.query.toLowerCase();
|
||||
const out: MentionSuggestion[] = [];
|
||||
|
||||
for(const user of roomUserList)
|
||||
{
|
||||
if(!user || user.type !== USER_TYPE_REAL_USER) continue;
|
||||
if(!user.name) continue;
|
||||
if(query.length > 0 && !user.name.toLowerCase().startsWith(query)) continue;
|
||||
|
||||
out.push({
|
||||
key: `user:${ user.webID }`,
|
||||
kind: 'user',
|
||||
name: user.name,
|
||||
insertToken: user.name,
|
||||
figure: user.figure || ''
|
||||
});
|
||||
|
||||
if(out.length >= MAX_MENTION_SUGGESTIONS) break;
|
||||
}
|
||||
|
||||
for(const alias of mentionAliases)
|
||||
{
|
||||
if(query.length > 0 && !alias.key.toLowerCase().startsWith(query)) continue;
|
||||
|
||||
out.push({
|
||||
key: `alias:${ alias.key }`,
|
||||
kind: 'alias',
|
||||
name: alias.key,
|
||||
insertToken: alias.key,
|
||||
description: alias.description
|
||||
});
|
||||
|
||||
if(out.length >= MAX_MENTION_SUGGESTIONS) break;
|
||||
}
|
||||
|
||||
return out;
|
||||
}, [ mentionContext, roomUserList, mentionAliases ]);
|
||||
|
||||
const mentionSelectorVisible = mentionSuggestions.length > 0;
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(mentionSelectedIndex >= mentionSuggestions.length) setMentionSelectedIndex(0);
|
||||
}, [ mentionSuggestions.length, mentionSelectedIndex ]);
|
||||
|
||||
const applyMentionSuggestion = useCallback((suggestion: MentionSuggestion) =>
|
||||
{
|
||||
if(!suggestion || !mentionContext) return;
|
||||
|
||||
const before = chatValue.slice(0, mentionContext.replaceFrom);
|
||||
const after = chatValue.slice(mentionContext.replaceTo);
|
||||
const inserted = `@${ suggestion.insertToken } `;
|
||||
const next = `${ before }${ inserted }${ after }`;
|
||||
|
||||
setChatValue(next);
|
||||
|
||||
requestAnimationFrame(() =>
|
||||
{
|
||||
if(!inputRef.current) return;
|
||||
const caret = before.length + inserted.length;
|
||||
inputRef.current.focus();
|
||||
inputRef.current.setSelectionRange(caret, caret);
|
||||
});
|
||||
|
||||
setMentionSelectedIndex(0);
|
||||
}, [ chatValue, mentionContext ]);
|
||||
const mention = useChatMentions(chatValue, setChatValue, inputRef, commandSelectorVisible);
|
||||
|
||||
const chatModeIdWhisper = useMemo(() => LocalizeText('widgets.chatinput.mode.whisper'), []);
|
||||
const chatModeIdShout = useMemo(() => LocalizeText('widgets.chatinput.mode.shout'), []);
|
||||
@@ -331,41 +177,30 @@ export const ChatInputView: FC<{}> = props =>
|
||||
}
|
||||
}
|
||||
|
||||
if(mentionSelectorVisible)
|
||||
if(mention.visible)
|
||||
{
|
||||
switch(event.key)
|
||||
{
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
setMentionSelectedIndex(prev => (prev <= 0) ? (mentionSuggestions.length - 1) : (prev - 1));
|
||||
mention.moveUp();
|
||||
return;
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
setMentionSelectedIndex(prev => (prev >= mentionSuggestions.length - 1) ? 0 : (prev + 1));
|
||||
mention.moveDown();
|
||||
return;
|
||||
case 'Tab':
|
||||
case 'NumpadEnter':
|
||||
case 'Enter': {
|
||||
const picked = mentionSuggestions[mentionSelectedIndex] ?? mentionSuggestions[0];
|
||||
|
||||
if(picked)
|
||||
case 'Enter':
|
||||
if(mention.applyCurrent())
|
||||
{
|
||||
event.preventDefault();
|
||||
applyMentionSuggestion(picked);
|
||||
return;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Escape':
|
||||
event.preventDefault();
|
||||
setMentionSelectedIndex(0);
|
||||
|
||||
if(mentionContext)
|
||||
{
|
||||
const before = chatValue.slice(0, mentionContext.replaceFrom);
|
||||
const after = chatValue.slice(mentionContext.replaceTo);
|
||||
setChatValue(before + after);
|
||||
}
|
||||
mention.cancel();
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -395,7 +230,7 @@ export const ChatInputView: FC<{}> = props =>
|
||||
return;
|
||||
}
|
||||
|
||||
}, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, closeCommandSelector, mentionSelectorVisible, mentionSuggestions, mentionSelectedIndex, applyMentionSuggestion, mentionContext, chatValue ]);
|
||||
}, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, closeCommandSelector, mention, chatValue ]);
|
||||
|
||||
useUiEvent<RoomWidgetUpdateChatInputContentEvent>(RoomWidgetUpdateChatInputContentEvent.CHAT_INPUT_CONTENT, event =>
|
||||
{
|
||||
@@ -492,12 +327,12 @@ export const ChatInputView: FC<{}> = props =>
|
||||
onHover={ setSelectedIndex }
|
||||
newStyle={ newStyle }
|
||||
/> }
|
||||
{ mentionSelectorVisible && !commandSelectorVisible &&
|
||||
{ mention.visible && !commandSelectorVisible &&
|
||||
<ChatInputMentionSelectorView
|
||||
suggestions={ mentionSuggestions }
|
||||
selectedIndex={ mentionSelectedIndex }
|
||||
onSelect={ applyMentionSuggestion }
|
||||
onHover={ setMentionSelectedIndex }
|
||||
suggestions={ mention.suggestions }
|
||||
selectedIndex={ mention.selectedIndex }
|
||||
onSelect={ mention.apply }
|
||||
onHover={ mention.setSelectedIndex }
|
||||
newStyle={ newStyle }
|
||||
/> }
|
||||
<div className="flex-1 items-center input-sizer">
|
||||
|
||||
@@ -1,35 +1,51 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { highlightMentions, MENTION_ROOM_ALIASES } from './highlightMentions';
|
||||
import { MENTION_ROOM_ALIASES } from '../../../../api/mentions/mentionTokens';
|
||||
import { highlightMentions } from './highlightMentions';
|
||||
|
||||
const OPEN = '<span class="mention-highlight">';
|
||||
const CLOSE = '</span>';
|
||||
// A generic @user tag, and a self/alias mention (strong).
|
||||
const TAG = (s: string) => `<span class="mention-tag">${ s }</span>`;
|
||||
const SELF = (s: string) => `<span class="mention-tag mention-tag--self">${ s }</span>`;
|
||||
|
||||
describe('highlightMentions', () =>
|
||||
{
|
||||
it('highlights the own-nick token', () =>
|
||||
it('marks the own-nick token as a self mention', () =>
|
||||
{
|
||||
const out = highlightMentions('hello @Bob how are you', 'Bob');
|
||||
|
||||
expect(out).toBe(`hello ${ OPEN }@Bob${ CLOSE } how are you`);
|
||||
expect(out).toBe(`hello ${ SELF('@Bob') } how are you`);
|
||||
});
|
||||
|
||||
it('highlights a room-broadcast alias token', () =>
|
||||
it('marks a room-broadcast alias token as a self mention', () =>
|
||||
{
|
||||
const out = highlightMentions('@all party time', 'Bob');
|
||||
|
||||
expect(out).toBe(`${ OPEN }@all${ CLOSE } party time`);
|
||||
expect(out).toBe(`${ SELF('@all') } party time`);
|
||||
});
|
||||
|
||||
it('highlights every configured room alias', () =>
|
||||
it('marks every configured room alias as a self mention', () =>
|
||||
{
|
||||
for(const alias of MENTION_ROOM_ALIASES)
|
||||
{
|
||||
const out = highlightMentions(`hey @${ alias }!`, 'Bob');
|
||||
|
||||
expect(out).toBe(`hey ${ OPEN }@${ alias }!${ CLOSE }`);
|
||||
expect(out).toBe(`hey ${ SELF(`@${ alias }!`) }`);
|
||||
}
|
||||
});
|
||||
|
||||
it('tags other users (not me, not an alias) as generic mentions', () =>
|
||||
{
|
||||
const out = highlightMentions('hi @Charlie and @Dave', 'Bob');
|
||||
|
||||
expect(out).toBe(`hi ${ TAG('@Charlie') } and ${ TAG('@Dave') }`);
|
||||
});
|
||||
|
||||
it('tags a cross-room user even when own username is empty', () =>
|
||||
{
|
||||
const out = highlightMentions('hi @Charlie', '');
|
||||
|
||||
expect(out).toBe(`hi ${ TAG('@Charlie') }`);
|
||||
});
|
||||
|
||||
it('leaves non-mention text untouched', () =>
|
||||
{
|
||||
const text = 'just a normal sentence with no at signs';
|
||||
@@ -37,42 +53,32 @@ describe('highlightMentions', () =>
|
||||
expect(highlightMentions(text, 'Bob')).toBe(text);
|
||||
});
|
||||
|
||||
it('returns the message unchanged when there is no mention of me or an alias', () =>
|
||||
{
|
||||
const text = 'hi @Charlie and @Dave';
|
||||
|
||||
// Neither @Charlie nor @Dave is the local user or a room alias.
|
||||
expect(highlightMentions(text, 'Bob')).toBe(text);
|
||||
});
|
||||
|
||||
it('matches a token with trailing punctuation (mirrors server stripping)', () =>
|
||||
it('keeps trailing punctuation inside the span (mirrors server stripping)', () =>
|
||||
{
|
||||
const out = highlightMentions('watch out @Bob! seriously', 'Bob');
|
||||
|
||||
// The original token text (including the `!`) is kept inside the span.
|
||||
expect(out).toBe(`watch out ${ OPEN }@Bob!${ CLOSE } seriously`);
|
||||
expect(out).toBe(`watch out ${ SELF('@Bob!') } seriously`);
|
||||
});
|
||||
|
||||
it('matches case-insensitively but preserves the original casing', () =>
|
||||
{
|
||||
const out = highlightMentions('yo @bOb whatup', 'BOB');
|
||||
|
||||
expect(out).toBe(`yo ${ OPEN }@bOb${ CLOSE } whatup`);
|
||||
expect(out).toBe(`yo ${ SELF('@bOb') } whatup`);
|
||||
});
|
||||
|
||||
it('preserves the original spacing verbatim', () =>
|
||||
{
|
||||
const out = highlightMentions('a @Bob\tb', 'Bob');
|
||||
|
||||
expect(out).toBe(`a ${ OPEN }@Bob${ CLOSE }\tb`);
|
||||
expect(out).toBe(`a ${ SELF('@Bob') }\tb`);
|
||||
});
|
||||
|
||||
it('does not highlight inside HTML tags produced by the formatter', () =>
|
||||
it('does not tag inside HTML tags produced by the formatter', () =>
|
||||
{
|
||||
// Formatter output: wired bold markup around a mention.
|
||||
const out = highlightMentions('<strong>hi @Bob</strong>', 'Bob');
|
||||
|
||||
expect(out).toBe(`<strong>hi ${ OPEN }@Bob${ CLOSE }</strong>`);
|
||||
expect(out).toBe(`<strong>hi ${ SELF('@Bob') }</strong>`);
|
||||
});
|
||||
|
||||
it('leaves font-colour spans and line breaks intact', () =>
|
||||
@@ -80,14 +86,14 @@ describe('highlightMentions', () =>
|
||||
const html = '<span style="color:red">hi @Bob</span><br />bye';
|
||||
const out = highlightMentions(html, 'Bob');
|
||||
|
||||
expect(out).toBe(`<span style="color:red">hi ${ OPEN }@Bob${ CLOSE }</span><br />bye`);
|
||||
expect(out).toBe(`<span style="color:red">hi ${ SELF('@Bob') }</span><br />bye`);
|
||||
});
|
||||
|
||||
it('highlights multiple distinct mentions in one message', () =>
|
||||
it('handles a self mention and a generic tag in one message', () =>
|
||||
{
|
||||
const out = highlightMentions('@Bob and @all listen', 'Bob');
|
||||
const out = highlightMentions('@Bob and @Charlie listen', 'Bob');
|
||||
|
||||
expect(out).toBe(`${ OPEN }@Bob${ CLOSE } and ${ OPEN }@all${ CLOSE } listen`);
|
||||
expect(out).toBe(`${ SELF('@Bob') } and ${ TAG('@Charlie') } listen`);
|
||||
});
|
||||
|
||||
it('ignores a bare @ with no nick', () =>
|
||||
@@ -103,18 +109,4 @@ describe('highlightMentions', () =>
|
||||
|
||||
expect(highlightMentions(text, 'Bob')).toBe(text);
|
||||
});
|
||||
|
||||
it('returns input verbatim when own username is empty and no alias matches', () =>
|
||||
{
|
||||
const text = 'hi @Charlie';
|
||||
|
||||
expect(highlightMentions(text, '')).toBe(text);
|
||||
});
|
||||
|
||||
it('still highlights aliases when own username is empty', () =>
|
||||
{
|
||||
const out = highlightMentions('@everyone hi', '');
|
||||
|
||||
expect(out).toBe(`${ OPEN }@everyone${ CLOSE } hi`);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,44 +1,9 @@
|
||||
export const MENTION_ROOM_ALIASES: ReadonlyArray<string> = [
|
||||
'all', 'everyone', 'tutti',
|
||||
'friends', 'amici',
|
||||
'room', 'stanza'
|
||||
];
|
||||
import { classifyMentionToken, MENTION_ROOM_ALIASES } from '../../../../api/mentions/mentionTokens';
|
||||
|
||||
const NON_NICK_CHARS = /[^A-Za-z0-9_]/g;
|
||||
const TAG_CLASS = 'mention-tag';
|
||||
const SELF_CLASS = 'mention-tag mention-tag--self';
|
||||
|
||||
const normalizeToken = (token: string): string =>
|
||||
{
|
||||
if(!token || token.length < 2 || token.charAt(0) !== '@') return '';
|
||||
|
||||
return token.substring(1).replace(NON_NICK_CHARS, '').toLowerCase();
|
||||
};
|
||||
|
||||
|
||||
const isMentionToken = (token: string, ownUsernameLower: string, aliases: ReadonlySet<string>): boolean =>
|
||||
{
|
||||
const nick = normalizeToken(token);
|
||||
|
||||
if(!nick) return false;
|
||||
|
||||
if(ownUsernameLower && nick === ownUsernameLower) return true;
|
||||
|
||||
return aliases.has(nick);
|
||||
};
|
||||
|
||||
export const tokenIsMention = (
|
||||
token: string,
|
||||
ownUsername: string,
|
||||
aliases: ReadonlyArray<string> = MENTION_ROOM_ALIASES
|
||||
): boolean =>
|
||||
{
|
||||
const ownUsernameLower = (ownUsername || '').replace(NON_NICK_CHARS, '').toLowerCase();
|
||||
return isMentionToken(token, ownUsernameLower, new Set(aliases.map(a => a.toLowerCase())));
|
||||
};
|
||||
|
||||
const HIGHLIGHT_OPEN = '<span class="mention-highlight">';
|
||||
const HIGHLIGHT_CLOSE = '</span>';
|
||||
|
||||
const highlightTextChunk = (chunk: string, ownUsernameLower: string, aliases: ReadonlySet<string>): string =>
|
||||
const highlightTextChunk = (chunk: string, ownUsername: string, aliases: ReadonlyArray<string>): string =>
|
||||
{
|
||||
if(chunk.indexOf('@') < 0) return chunk;
|
||||
|
||||
@@ -50,18 +15,26 @@ const highlightTextChunk = (chunk: string, ownUsernameLower: string, aliases: Re
|
||||
{
|
||||
if(segment.length === 0) continue;
|
||||
|
||||
if(/^\s+$/.test(segment) || !isMentionToken(segment, ownUsernameLower, aliases))
|
||||
const kind = (/^\s+$/.test(segment)) ? '' : classifyMentionToken(segment, ownUsername, aliases);
|
||||
|
||||
if(!kind)
|
||||
{
|
||||
result += segment;
|
||||
continue;
|
||||
}
|
||||
|
||||
result += `${ HIGHLIGHT_OPEN }${ segment }${ HIGHLIGHT_CLOSE }`;
|
||||
result += `<span class="${ (kind === 'self') ? SELF_CLASS : TAG_CLASS }">${ segment }</span>`;
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Wrap every @mention token in chat HTML with a `.mention-tag` span. Tokens
|
||||
* that target the viewer or a broadcast alias additionally get the
|
||||
* `.mention-tag--self` modifier so "I was mentioned" stands out. Walks around
|
||||
* formatter HTML (`<...>`) so tags inside markup are never touched.
|
||||
*/
|
||||
export const highlightMentions = (
|
||||
formattedHtml: string,
|
||||
ownUsername: string,
|
||||
@@ -70,11 +43,6 @@ export const highlightMentions = (
|
||||
{
|
||||
if(!formattedHtml || formattedHtml.indexOf('@') < 0) return formattedHtml;
|
||||
|
||||
const ownUsernameLower = (ownUsername || '').replace(NON_NICK_CHARS, '').toLowerCase();
|
||||
const aliasSet = new Set(aliases.map(a => a.toLowerCase()));
|
||||
|
||||
if(!ownUsernameLower && aliasSet.size === 0) return formattedHtml;
|
||||
|
||||
let result = '';
|
||||
let cursor = 0;
|
||||
|
||||
@@ -84,13 +52,13 @@ export const highlightMentions = (
|
||||
|
||||
if(tagStart < 0)
|
||||
{
|
||||
result += highlightTextChunk(formattedHtml.slice(cursor), ownUsernameLower, aliasSet);
|
||||
result += highlightTextChunk(formattedHtml.slice(cursor), ownUsername, aliases);
|
||||
break;
|
||||
}
|
||||
|
||||
if(tagStart > cursor)
|
||||
{
|
||||
result += highlightTextChunk(formattedHtml.slice(cursor, tagStart), ownUsernameLower, aliasSet);
|
||||
result += highlightTextChunk(formattedHtml.slice(cursor, tagStart), ownUsername, aliases);
|
||||
}
|
||||
|
||||
const tagEnd = formattedHtml.indexOf('>', tagStart);
|
||||
|
||||
@@ -1811,3 +1811,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* @-mention tags inside chat bubbles and the mentions panel.
|
||||
`.mention-tag` styles ANY @user as a chip (colour inherits so it stays
|
||||
readable on both light and dark bubble backgrounds); `.mention-tag--self`
|
||||
marks a mention of the viewer / a broadcast alias with a gold highlight so
|
||||
"you were mentioned" stands out. */
|
||||
.mention-tag {
|
||||
display: inline;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
padding: 0 3px;
|
||||
background: rgba(30, 114, 149, 0.18);
|
||||
box-shadow: inset 0 0 0 1px rgba(30, 114, 149, 0.40);
|
||||
}
|
||||
|
||||
.mention-tag.mention-tag--self {
|
||||
color: #4a3300;
|
||||
background: #ffd24d;
|
||||
box-shadow: inset 0 0 0 1px rgba(150, 105, 0, 0.55);
|
||||
}
|
||||
|
||||
@@ -1,72 +1,88 @@
|
||||
.mention-toasts {
|
||||
position: fixed;
|
||||
top: 130px;
|
||||
right: 12px;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: 320px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mention-toast {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 300px;
|
||||
padding: 8px 10px;
|
||||
background: #2b2f3a;
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-left: 3px solid #1e7295;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
|
||||
cursor: pointer;
|
||||
animation: mention-toast-in 0.22s ease;
|
||||
}
|
||||
|
||||
@keyframes mention-toast-in {
|
||||
from { opacity: 0; transform: translateX(22px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Mention notification bubble — rendered through the client's standard
|
||||
notification stream (LayoutNotificationBubbleView, NotificationMentionBubbleView),
|
||||
so it inherits the default chrome/position. Only the mention-specific bits
|
||||
live here: the avatar head crop, type chip, time, room, message clamp and
|
||||
action buttons. */
|
||||
.mention-toast-avatar {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 32px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* ricetta testa headOnly: l'avatar-image riempie il box (inset-0) e si croppa
|
||||
sulla testa via background-position (come l'avatar-testa della toolbar),
|
||||
invece di scalare il corpo. */
|
||||
/* Exact friends-list head crop — a matched set: 32x36 box + 66px width-scale +
|
||||
-16/-21 offset (deterministic, starts above the hairline) so the full head
|
||||
shows and isn't clipped. */
|
||||
.mention-toast-avatar .avatar-image {
|
||||
position: absolute !important;
|
||||
inset: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background-size: auto !important;
|
||||
background-position: -23px -32px !important;
|
||||
background-size: 66px auto !important;
|
||||
background-position: -16px -21px !important;
|
||||
}
|
||||
|
||||
.mention-toast-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mention-toast-title {
|
||||
.mention-toast-chip {
|
||||
flex: none;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: #6cb6e0;
|
||||
line-height: 1.4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mention-toast-chip.is-direct { background: #1e7295; }
|
||||
.mention-toast-chip.is-room { background: #d08a1e; }
|
||||
|
||||
.mention-toast-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.mention-toast-time {
|
||||
flex: none;
|
||||
font-size: 11px;
|
||||
color: #aeb3bd;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.mention-toast-dismiss {
|
||||
flex: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
color: #c9ccd3;
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mention-toast-dismiss:hover {
|
||||
background: rgba(255, 255, 255, 0.20);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mention-toast-room {
|
||||
margin-top: 1px;
|
||||
font-size: 11px;
|
||||
color: #aeb3bd;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-toast-message {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
color: #e6e8ec;
|
||||
@@ -78,24 +94,26 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.mention-toast-dismiss {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #c9ccd3;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
.mention-toast-actions {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.mention-toast-dismiss:hover {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
.mention-toast-btn {
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 7px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #eef0f4;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.mention-toast-btn:hover {
|
||||
background: #1e7295;
|
||||
border-color: #2a90bd;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,323 @@
|
||||
/* ============================================================================
|
||||
Mentions panel — search bar, list rows, avatar framing.
|
||||
The avatar tile mirrors the @-autocomplete tile (bordered cream chrome +
|
||||
`background-size: auto` / `-22px -32px` head crop) so the head is framed the
|
||||
same proven way instead of a finicky bare crop.
|
||||
============================================================================ */
|
||||
|
||||
.mentions-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #b9b6aa;
|
||||
border-radius: 8px;
|
||||
background: #fbfbf6;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.mentions-search-icon {
|
||||
flex: none;
|
||||
color: #8a8a82;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mentions-search input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.mention-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 6px 5px 11px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background 0.08s linear, border-color 0.08s linear;
|
||||
}
|
||||
|
||||
.mention-row-unread-dot {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #1e7295;
|
||||
}
|
||||
|
||||
.mention-row:hover {
|
||||
background: rgba(48, 114, 140, 0.10);
|
||||
border-color: rgba(48, 114, 140, 0.25);
|
||||
}
|
||||
|
||||
.mention-row.is-unread {
|
||||
background: rgba(255, 210, 77, 0.16);
|
||||
}
|
||||
|
||||
.mention-row.is-unread:hover {
|
||||
background: rgba(255, 210, 77, 0.24);
|
||||
}
|
||||
|
||||
.mention-row-avatar {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.28);
|
||||
background: #e3e0d6;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Exact friends-list head crop — a matched set: 32x36 box + 66px width-scale +
|
||||
-16/-21 offset. The explicit 66px width is deterministic (not native-size
|
||||
dependent) and the -21 vertical offset starts above the hairline, so the full
|
||||
head shows and isn't clipped. */
|
||||
.mention-row-avatar .avatar-image {
|
||||
position: absolute !important;
|
||||
inset: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 66px auto !important;
|
||||
background-position: -16px -21px !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.mention-row-type {
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #f2f2eb;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mention-row-type.is-direct { background: #1e7295; }
|
||||
.mention-row-type.is-room { background: #d08a1e; }
|
||||
|
||||
.mention-row-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.mention-row-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mention-row-name {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: #232323;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.mention-row-room {
|
||||
font-size: 11px;
|
||||
color: #7a7a72;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mention-row-msg {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #4a4a45;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-row-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
min-width: 38px;
|
||||
}
|
||||
|
||||
.mention-row-time {
|
||||
font-size: 11px;
|
||||
color: #8a8a82;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.mention-row-actions {
|
||||
display: none;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mention-row:hover .mention-row-time { display: none; }
|
||||
.mention-row:hover .mention-row-actions { display: flex; }
|
||||
|
||||
.mention-row-action {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
color: #4a4a45;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
||||
}
|
||||
|
||||
.mention-row-action:hover { background: #1e7295; color: #fff; border-color: #185b76; }
|
||||
.mention-row-action.is-remove:hover { background: #d64545; color: #fff; border-color: #b53636; }
|
||||
|
||||
.mentions-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 28px 12px;
|
||||
text-align: center;
|
||||
color: #7a7a72;
|
||||
}
|
||||
|
||||
.mentions-empty-glyph {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(30, 114, 149, 0.10);
|
||||
color: #1e7295;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mentions-empty-text {
|
||||
font-size: 13px;
|
||||
color: #6f6f67;
|
||||
}
|
||||
|
||||
/* --- toolbar: filter chips + refresh --- */
|
||||
.mentions-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mentions-filters {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.mentions-filter {
|
||||
padding: 2px 9px;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid #b9b6aa;
|
||||
background: #f3f1ea;
|
||||
color: #5a5a52;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
||||
}
|
||||
|
||||
.mentions-filter:hover {
|
||||
background: #e9e6dc;
|
||||
}
|
||||
|
||||
.mentions-filter.is-active {
|
||||
background: #1e7295;
|
||||
border-color: #185b76;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mentions-refresh {
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #b9b6aa;
|
||||
background: #f3f1ea;
|
||||
color: #6a6a62;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
.mentions-refresh:hover {
|
||||
background: #e9e6dc;
|
||||
color: #1e7295;
|
||||
}
|
||||
|
||||
.mentions-refresh:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* --- list + date groups --- */
|
||||
.mentions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-height: 96px;
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mentions-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.mentions-group-label {
|
||||
padding: 8px 4px 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
color: #9a978c;
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './useMentionsSnapshot';
|
||||
export * from './useMentionMessages';
|
||||
export * from './useMentionAutocomplete';
|
||||
export * from './useMentionActions';
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import { IMentionEntry } from '../../api';
|
||||
|
||||
// Toast laterali per le menzioni appena ricevute (avatar + messaggio + dismiss).
|
||||
// Separato da mentionsStore: i toast sono effimeri, le menzioni persistono nel pannello.
|
||||
export interface MentionToast
|
||||
{
|
||||
mentionId: number;
|
||||
senderId: number;
|
||||
senderUsername: string;
|
||||
senderFigure: string;
|
||||
message: string;
|
||||
roomName: string;
|
||||
}
|
||||
|
||||
const MAX_TOASTS = 4;
|
||||
|
||||
let toasts: MentionToast[] = [];
|
||||
const listeners = new Set<() => void>();
|
||||
|
||||
const emit = (): void =>
|
||||
{
|
||||
for(const listener of listeners) listener();
|
||||
};
|
||||
|
||||
export const subscribeMentionToasts = (callback: () => void): (() => void) =>
|
||||
{
|
||||
listeners.add(callback);
|
||||
return () => { listeners.delete(callback); };
|
||||
};
|
||||
|
||||
export const getMentionToasts = (): ReadonlyArray<MentionToast> => toasts;
|
||||
|
||||
export const pushMentionToast = (entry: IMentionEntry): void =>
|
||||
{
|
||||
toasts = [
|
||||
{
|
||||
mentionId: entry.mentionId,
|
||||
senderId: entry.senderId,
|
||||
senderUsername: entry.senderUsername,
|
||||
senderFigure: entry.senderFigure,
|
||||
message: entry.message,
|
||||
roomName: entry.roomName
|
||||
},
|
||||
...toasts.filter(toast => toast.mentionId !== entry.mentionId)
|
||||
].slice(0, MAX_TOASTS);
|
||||
|
||||
emit();
|
||||
};
|
||||
|
||||
export const dismissMentionToast = (mentionId: number): void =>
|
||||
{
|
||||
const next = toasts.filter(toast => toast.mentionId !== mentionId);
|
||||
|
||||
if(next.length === toasts.length) return;
|
||||
|
||||
toasts = next;
|
||||
emit();
|
||||
};
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
import { CreateLinkEvent, DeleteMentionComposer, MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
|
||||
import { useMemo } from 'react';
|
||||
import { IMentionEntry, SendMessageComposer } from '../../api';
|
||||
import { markRead, removeMention } from '../../hooks/mentions/mentionsStore';
|
||||
import { markRead, removeMention } from './mentionsStore';
|
||||
|
||||
export interface MentionActions
|
||||
{
|
||||
@@ -1,89 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { MENTION_ROOM_ALIASES } from '../../components/room/widgets/chat/highlightMentions';
|
||||
import { useFriendsState } from '../friends/useFriends';
|
||||
import { useRoomUserListSnapshot } from '../session/useSessionSnapshots';
|
||||
|
||||
export interface MentionSuggestion
|
||||
{
|
||||
name: string;
|
||||
figure: string;
|
||||
isAlias: boolean;
|
||||
}
|
||||
|
||||
const MAX_SUGGESTIONS = 8;
|
||||
|
||||
// Trova il token @<parziale> che si sta digitando alla FINE del valore.
|
||||
// Restituisce il parziale (anche '' subito dopo @) oppure null se non si è in un @mention.
|
||||
const activeMentionPartial = (value: string): string | null =>
|
||||
{
|
||||
if(!value || value.indexOf('@') < 0) return null;
|
||||
|
||||
const match = /(?:^|\s)@([A-Za-z0-9_]*)$/.exec(value);
|
||||
|
||||
return match ? match[1] : null;
|
||||
};
|
||||
|
||||
export interface MentionAutocompleteState
|
||||
{
|
||||
isVisible: boolean;
|
||||
suggestions: MentionSuggestion[];
|
||||
selectedIndex: number;
|
||||
setSelectedIndex: (index: number) => void;
|
||||
moveUp: () => void;
|
||||
moveDown: () => void;
|
||||
current: () => MentionSuggestion | null;
|
||||
// Inserisce il nome scelto sostituendo il parziale @... alla fine del valore.
|
||||
applyTo: (value: string, name: string) => string;
|
||||
}
|
||||
|
||||
export const useMentionAutocomplete = (chatValue: string): MentionAutocompleteState =>
|
||||
{
|
||||
const roomUsers = useRoomUserListSnapshot();
|
||||
const { onlineFriends } = useFriendsState();
|
||||
const [ selectedIndex, setSelectedIndex ] = useState(0);
|
||||
|
||||
const partial = useMemo(() => activeMentionPartial(chatValue), [ chatValue ]);
|
||||
|
||||
const suggestions = useMemo<MentionSuggestion[]>(() =>
|
||||
{
|
||||
if(partial === null) return [];
|
||||
|
||||
const query = partial.toLowerCase();
|
||||
const seen = new Set<string>();
|
||||
const out: MentionSuggestion[] = [];
|
||||
|
||||
const add = (name: string, figure: string, isAlias: boolean) =>
|
||||
{
|
||||
if(!name || out.length >= MAX_SUGGESTIONS) return;
|
||||
|
||||
const key = name.toLowerCase();
|
||||
|
||||
if(seen.has(key)) return;
|
||||
if(query && !key.startsWith(query)) return;
|
||||
|
||||
seen.add(key);
|
||||
out.push({ name, figure: figure || '', isAlias });
|
||||
};
|
||||
|
||||
for(const user of (roomUsers || [])) add(user?.name, (user as any)?.figure, false);
|
||||
for(const friend of (onlineFriends || [])) add(friend?.name, friend?.figure, false);
|
||||
for(const alias of MENTION_ROOM_ALIASES) add(alias, '', true);
|
||||
|
||||
return out;
|
||||
}, [ partial, roomUsers, onlineFriends ]);
|
||||
|
||||
useEffect(() => { setSelectedIndex(0); }, [ partial ]);
|
||||
|
||||
const isVisible = (partial !== null) && (suggestions.length > 0);
|
||||
|
||||
return {
|
||||
isVisible,
|
||||
suggestions,
|
||||
selectedIndex,
|
||||
setSelectedIndex,
|
||||
moveUp: () => setSelectedIndex(index => (index <= 0 ? suggestions.length - 1 : index - 1)),
|
||||
moveDown: () => setSelectedIndex(index => (index >= suggestions.length - 1 ? 0 : index + 1)),
|
||||
current: () => suggestions[selectedIndex] ?? null,
|
||||
applyTo: (value: string, name: string) => value.replace(/@([A-Za-z0-9_]*)$/, '@' + name + ' ')
|
||||
};
|
||||
};
|
||||
@@ -2,14 +2,16 @@ import { MentionReceivedEvent, MentionsListEvent, RequestMentionsComposer } from
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { GetConfigurationValue, IMentionEntry, PlaySound, SendMessageComposer } from '../../api';
|
||||
import { useMessageEvent } from '../events';
|
||||
import { useNotification } from '../notification/useNotification';
|
||||
import { addMention, setMentions } from './mentionsStore';
|
||||
import { pushMentionToast } from './mentionToastsStore';
|
||||
|
||||
// Dedicated mention chime served from nitro-assets/sounds/<sample>.mp3.
|
||||
const MENTION_SOUND_SAMPLE = 'mentions_notification';
|
||||
|
||||
export const useMentionMessages = (): void =>
|
||||
{
|
||||
const { showMentionBubble } = useNotification();
|
||||
|
||||
const onMentionsList = useCallback((event: MentionsListEvent) =>
|
||||
{
|
||||
const list = event.getParser().mentions;
|
||||
@@ -51,9 +53,10 @@ export const useMentionMessages = (): void =>
|
||||
|
||||
if(GetConfigurationValue<boolean>('mentions_ui.sound', true)) PlaySound(MENTION_SOUND_SAMPLE);
|
||||
|
||||
// Notifica laterale custom (avatar + messaggio + dismiss) invece del bubble generico.
|
||||
pushMentionToast(entry);
|
||||
}, []);
|
||||
// Surface it through the client's standard notification stream, using the
|
||||
// dedicated mention bubble layout (avatar + actions).
|
||||
showMentionBubble(entry);
|
||||
}, [ showMentionBubble ]);
|
||||
|
||||
useMessageEvent<MentionsListEvent>(MentionsListEvent, onMentionsList);
|
||||
useMessageEvent<MentionReceivedEvent>(MentionReceivedEvent, onMentionReceived);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { AchievementNotificationMessageEvent, ActivityPointNotificationMessageEvent, BadgeReceivedEvent, ClubGiftNotificationEvent, ClubGiftSelectedEvent, ConnectionErrorEvent, GetLocalizationManager, GetRoomEngine, GetSessionDataManager, HabboBroadcastMessageEvent, HotelClosedAndOpensEvent, HotelClosesAndWillOpenAtEvent, HotelWillCloseInMinutesEvent, InfoFeedEnableMessageEvent, MaintenanceStatusMessageEvent, ModeratorCautionEvent, ModeratorMessageEvent, MOTDNotificationEvent, NotificationDialogMessageEvent, PetLevelNotificationEvent, PetReceivedMessageEvent, RespectReceivedEvent, RoomEnterEffect, RoomEnterEvent, SimpleAlertMessageEvent, UserBannedMessageEvent, Vector3d, WiredRewardResultMessageEvent } from '@nitrots/nitro-renderer';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useBetween } from 'use-between';
|
||||
import { GetConfigurationValue, LocalizeBadgeName, LocalizeText, NotificationAlertItem, NotificationAlertType, NotificationBubbleItem, NotificationBubbleType, NotificationConfirmItem, PlaySound, ProductImageUtility, TradingNotificationType } from '../../api';
|
||||
import { GetConfigurationValue, IMentionEntry, LocalizeBadgeName, LocalizeText, MentionNotificationBubbleItem, NotificationAlertItem, NotificationAlertType, NotificationBubbleItem, NotificationBubbleType, NotificationConfirmItem, PlaySound, ProductImageUtility, TradingNotificationType } from '../../api';
|
||||
import { useMessageEvent } from '../events';
|
||||
|
||||
const cleanText = (text: string) => (text && text.length) ? text.replace(/\\r/g, '\r') : '';
|
||||
@@ -86,6 +86,16 @@ const useNotificationStore = () =>
|
||||
});
|
||||
}, [ bubblesDisabled ]);
|
||||
|
||||
const showMentionBubble = useCallback((mention: IMentionEntry) =>
|
||||
{
|
||||
// Mentions always surface: they have their own `mentions_ui.enabled` gate
|
||||
// (checked in useMentionMessages) and are intentionally independent of the
|
||||
// generic info-feed toggle, so EVERY received mention shows a bubble.
|
||||
const item = new MentionNotificationBubbleItem(mention);
|
||||
|
||||
setBubbleAlerts(prevValue => [ item, ...prevValue ]);
|
||||
}, []);
|
||||
|
||||
const showNotification = (type: string, options: Map<string, string> = null) =>
|
||||
{
|
||||
if(!options) options = new Map();
|
||||
@@ -490,7 +500,7 @@ const useNotificationStore = () =>
|
||||
|
||||
useMessageEvent<RoomEnterEvent>(RoomEnterEvent, onRoomEnterEvent);
|
||||
|
||||
return { alerts, bubbleAlerts, confirms, simpleAlert, showNitroAlert, showTradeAlert, showConfirm, showSingleBubble, closeAlert, closeBubbleAlert, closeConfirm };
|
||||
return { alerts, bubbleAlerts, confirms, simpleAlert, showNitroAlert, showTradeAlert, showConfirm, showSingleBubble, showMentionBubble, closeAlert, closeBubbleAlert, closeConfirm };
|
||||
};
|
||||
|
||||
export const useNotificationState = () =>
|
||||
@@ -508,6 +518,7 @@ export const useNotificationActions = () =>
|
||||
showTradeAlert,
|
||||
showConfirm,
|
||||
showSingleBubble,
|
||||
showMentionBubble,
|
||||
closeAlert,
|
||||
closeBubbleAlert,
|
||||
closeConfirm
|
||||
@@ -519,6 +530,7 @@ export const useNotificationActions = () =>
|
||||
showTradeAlert,
|
||||
showConfirm,
|
||||
showSingleBubble,
|
||||
showMentionBubble,
|
||||
closeAlert,
|
||||
closeBubbleAlert,
|
||||
closeConfirm
|
||||
|
||||
@@ -2,6 +2,7 @@ export * from './furniture';
|
||||
export * from './useAvatarInfoWidget';
|
||||
export * from './useChatCommandSelector';
|
||||
export * from './useChatInputWidget';
|
||||
export * from './useChatMentions';
|
||||
export * from './useChatWidget';
|
||||
export * from './useDoorbellActions';
|
||||
export * from './useDoorbellState';
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { buildChatMentionSuggestions, computeMentionContext, MentionAlias } from './useChatMentions.helpers';
|
||||
|
||||
const ALIASES: MentionAlias[] = [
|
||||
{ key: 'all', scope: 'everyone', description: '' },
|
||||
{ key: 'room', scope: 'room', description: '' }
|
||||
];
|
||||
|
||||
const ROOM = [
|
||||
{ webID: 1, type: 1, name: 'tester', figure: 'a' },
|
||||
{ webID: 2, type: 1, name: 'alice', figure: 'b' },
|
||||
{ webID: 3, type: 1, name: 'bob', figure: 'c' },
|
||||
{ webID: 9, type: 2, name: 'petbot', figure: 'd' } // non-real user (pet/bot)
|
||||
];
|
||||
|
||||
describe('computeMentionContext', () =>
|
||||
{
|
||||
it('detects a trailing @query', () =>
|
||||
{
|
||||
expect(computeMentionContext('hi @al', false)).toEqual({ atIndex: 3, replaceFrom: 3, replaceTo: 6, query: 'al' });
|
||||
});
|
||||
|
||||
it('detects @ at the very start', () =>
|
||||
{
|
||||
expect(computeMentionContext('@al', false)).toEqual({ atIndex: 0, replaceFrom: 0, replaceTo: 3, query: 'al' });
|
||||
});
|
||||
|
||||
it('returns null when a command popover is open', () =>
|
||||
{
|
||||
expect(computeMentionContext('hi @al', true)).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null when @ is glued to a previous word (e.g. an email)', () =>
|
||||
{
|
||||
expect(computeMentionContext('mail me@al', false)).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null when the @token is not at the end', () =>
|
||||
{
|
||||
expect(computeMentionContext('@al ready', false)).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null when there is no @', () =>
|
||||
{
|
||||
expect(computeMentionContext('plain text', false)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('buildChatMentionSuggestions', () =>
|
||||
{
|
||||
it('excludes the viewer by id and keeps the other real users + aliases', () =>
|
||||
{
|
||||
const names = buildChatMentionSuggestions('', ROOM, ALIASES, 1, 'tester').map(s => s.name);
|
||||
|
||||
expect(names).not.toContain('tester'); // own user (webID 1)
|
||||
expect(names).toContain('alice');
|
||||
expect(names).toContain('bob');
|
||||
expect(names).toContain('all');
|
||||
expect(names).toContain('room');
|
||||
});
|
||||
|
||||
it('excludes the viewer by name when the id does not line up', () =>
|
||||
{
|
||||
const names = buildChatMentionSuggestions('', ROOM, ALIASES, -1, 'TESTER').map(s => s.name);
|
||||
|
||||
expect(names).not.toContain('tester');
|
||||
});
|
||||
|
||||
it('skips non-real users (pets/bots)', () =>
|
||||
{
|
||||
const names = buildChatMentionSuggestions('', ROOM, [], 1, 'tester').map(s => s.name);
|
||||
|
||||
expect(names).not.toContain('petbot');
|
||||
});
|
||||
|
||||
it('prefix-filters users and aliases by the query', () =>
|
||||
{
|
||||
const names = buildChatMentionSuggestions('al', ROOM, ALIASES, 1, 'tester').map(s => s.name);
|
||||
|
||||
expect(names).toContain('alice');
|
||||
expect(names).toContain('all');
|
||||
expect(names).not.toContain('bob');
|
||||
expect(names).not.toContain('room');
|
||||
});
|
||||
|
||||
it('tags user vs alias kinds', () =>
|
||||
{
|
||||
const out = buildChatMentionSuggestions('', ROOM, ALIASES, 1, 'tester');
|
||||
|
||||
expect(out.find(s => s.name === 'alice')?.kind).toBe('user');
|
||||
expect(out.find(s => s.name === 'all')?.kind).toBe('alias');
|
||||
});
|
||||
|
||||
it('caps the total at max', () =>
|
||||
{
|
||||
const many = Array.from({ length: 20 }, (_, i) => ({ webID: 100 + i, type: 1, name: `u${ i }`, figure: '' }));
|
||||
const out = buildChatMentionSuggestions('', many, ALIASES, -1, 'me', 5);
|
||||
|
||||
expect(out).toHaveLength(5);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,143 @@
|
||||
// Pure helpers for the chat-input @-mention autocomplete. Kept framework-free
|
||||
// so the suggestion building and the caret-context detection are unit-testable.
|
||||
|
||||
export type MentionSuggestionKind = 'user' | 'alias';
|
||||
|
||||
export interface MentionSuggestion
|
||||
{
|
||||
key: string;
|
||||
kind: MentionSuggestionKind;
|
||||
name: string;
|
||||
insertToken: string;
|
||||
figure?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export type MentionAliasScope = 'everyone' | 'friends' | 'room';
|
||||
|
||||
export interface MentionAlias
|
||||
{
|
||||
key: string;
|
||||
scope: MentionAliasScope;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface MentionContext
|
||||
{
|
||||
atIndex: number;
|
||||
replaceFrom: number;
|
||||
replaceTo: number;
|
||||
query: string;
|
||||
}
|
||||
|
||||
export const MAX_MENTION_SUGGESTIONS = 8;
|
||||
|
||||
const USER_TYPE_REAL_USER = 1;
|
||||
|
||||
export const MENTION_ALIAS_CONFIG_KEY: Record<MentionAliasScope, string> = {
|
||||
everyone: 'mentions_ui.aliases.everyone',
|
||||
friends: 'mentions_ui.aliases.friends',
|
||||
room: 'mentions_ui.aliases.room'
|
||||
};
|
||||
|
||||
export const MENTION_ALIAS_DEFAULTS: Record<MentionAliasScope, string[]> = {
|
||||
everyone: [ 'all', 'everyone', 'tutti' ],
|
||||
friends: [ 'friends', 'amici' ],
|
||||
room: [ 'room', 'stanza' ]
|
||||
};
|
||||
|
||||
export const MENTION_ALIAS_DESCRIPTION_KEY: Record<MentionAliasScope, string> = {
|
||||
everyone: 'mentions.alias.description.everyone',
|
||||
friends: 'mentions.alias.description.friends',
|
||||
room: 'mentions.alias.description.room'
|
||||
};
|
||||
|
||||
export const sanitizeAliasList = (raw: unknown, fallback: string[]): string[] =>
|
||||
{
|
||||
if(!Array.isArray(raw)) return fallback;
|
||||
|
||||
const out: string[] = [];
|
||||
|
||||
for(const entry of raw)
|
||||
{
|
||||
if(typeof entry !== 'string') continue;
|
||||
|
||||
const trimmed = entry.trim();
|
||||
|
||||
if(!trimmed) continue;
|
||||
|
||||
out.push(trimmed);
|
||||
}
|
||||
|
||||
return out;
|
||||
};
|
||||
|
||||
/**
|
||||
* Detect an in-progress `@partial` token at the END of the input. Returns the
|
||||
* token bounds + the query (text after `@`), or null when not in a mention (no
|
||||
* trailing `@token`, `@` glued to a previous word, or a command popover open).
|
||||
* End-anchored (no caret read) so it stays a pure render-safe computation.
|
||||
*/
|
||||
export const computeMentionContext = (value: string, commandSelectorVisible: boolean): MentionContext | null =>
|
||||
{
|
||||
if(!value) return null;
|
||||
if(commandSelectorVisible) return null;
|
||||
|
||||
const match = /(?:^|\s)@([A-Za-z0-9_]*)$/.exec(value);
|
||||
|
||||
if(!match) return null;
|
||||
|
||||
const query = match[1];
|
||||
const atIndex = value.length - query.length - 1;
|
||||
|
||||
return { atIndex, replaceFrom: atIndex, replaceTo: value.length, query };
|
||||
};
|
||||
|
||||
interface MentionRoomUser
|
||||
{
|
||||
webID?: number;
|
||||
type?: number;
|
||||
name?: string;
|
||||
figure?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the suggestion list for the current query: real room users (minus the
|
||||
* viewer themselves — match by id, name as fallback) then the broadcast
|
||||
* aliases, prefix-filtered and capped.
|
||||
*/
|
||||
export const buildChatMentionSuggestions = (
|
||||
query: string,
|
||||
roomUserList: ReadonlyArray<MentionRoomUser>,
|
||||
aliases: ReadonlyArray<MentionAlias>,
|
||||
ownUserId: number,
|
||||
ownUsername: string,
|
||||
max: number = MAX_MENTION_SUGGESTIONS
|
||||
): MentionSuggestion[] =>
|
||||
{
|
||||
const q = (query || '').toLowerCase();
|
||||
const ownNameLower = (ownUsername || '').toLowerCase();
|
||||
const out: MentionSuggestion[] = [];
|
||||
|
||||
for(const user of (roomUserList || []))
|
||||
{
|
||||
if(out.length >= max) break;
|
||||
if(!user || (user.type !== USER_TYPE_REAL_USER)) continue;
|
||||
if(!user.name) continue;
|
||||
// You can't mention yourself — skip the own user (match by id, name as fallback).
|
||||
if((user.webID === ownUserId) || (ownNameLower && (user.name.toLowerCase() === ownNameLower))) continue;
|
||||
if((q.length > 0) && !user.name.toLowerCase().startsWith(q)) continue;
|
||||
|
||||
out.push({ key: `user:${ user.webID }`, kind: 'user', name: user.name, insertToken: user.name, figure: user.figure || '' });
|
||||
}
|
||||
|
||||
for(const alias of aliases)
|
||||
{
|
||||
if(out.length >= max) break;
|
||||
if((q.length > 0) && !alias.key.toLowerCase().startsWith(q)) continue;
|
||||
|
||||
out.push({ key: `alias:${ alias.key }`, kind: 'alias', name: alias.key, insertToken: alias.key, description: alias.description });
|
||||
}
|
||||
|
||||
return out;
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
import { GetSessionDataManager } from '@nitrots/nitro-renderer';
|
||||
import { RefObject, useCallback, useMemo, useState } from 'react';
|
||||
import { GetConfigurationValue, LocalizeText } from '../../../api';
|
||||
import { useRoomUserListSnapshot } from '../../session/useSessionSnapshots';
|
||||
import { buildChatMentionSuggestions, computeMentionContext, MentionAlias, MentionAliasScope, MentionSuggestion, MENTION_ALIAS_CONFIG_KEY, MENTION_ALIAS_DEFAULTS, MENTION_ALIAS_DESCRIPTION_KEY, sanitizeAliasList } from './useChatMentions.helpers';
|
||||
|
||||
export type { MentionSuggestion, MentionSuggestionKind } from './useChatMentions.helpers';
|
||||
|
||||
export interface ChatMentionsState
|
||||
{
|
||||
visible: boolean;
|
||||
suggestions: MentionSuggestion[];
|
||||
selectedIndex: number;
|
||||
setSelectedIndex: (index: number) => void;
|
||||
moveUp: () => void;
|
||||
moveDown: () => void;
|
||||
/** Apply the highlighted suggestion (or the first). Returns true if one was applied. */
|
||||
applyCurrent: () => boolean;
|
||||
apply: (suggestion: MentionSuggestion) => void;
|
||||
/** Escape: reset selection and strip the in-progress @query from the input. */
|
||||
cancel: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Chat-input @-mention autocomplete. Owns the caret-context detection, the
|
||||
* config-driven broadcast aliases, the room-user suggestion list (minus the
|
||||
* viewer), keyboard navigation and the insert/cancel actions — so ChatInputView
|
||||
* just wires its keydown handler and the selector view to this hook.
|
||||
*/
|
||||
export const useChatMentions = (
|
||||
chatValue: string,
|
||||
setChatValue: (value: string) => void,
|
||||
inputRef: RefObject<HTMLInputElement>,
|
||||
commandSelectorVisible: boolean
|
||||
): ChatMentionsState =>
|
||||
{
|
||||
const roomUserList = useRoomUserListSnapshot();
|
||||
const [ selectedIndex, setSelectedIndex ] = useState(0);
|
||||
|
||||
const mentionContext = useMemo(() => computeMentionContext(chatValue, commandSelectorVisible), [ chatValue, commandSelectorVisible ]);
|
||||
|
||||
const aliases = useMemo<MentionAlias[]>(() =>
|
||||
{
|
||||
const out: MentionAlias[] = [];
|
||||
const seen = new Set<string>();
|
||||
const scopes: MentionAliasScope[] = [ 'everyone', 'friends', 'room' ];
|
||||
|
||||
for(const scope of scopes)
|
||||
{
|
||||
const list = sanitizeAliasList(GetConfigurationValue<unknown>(MENTION_ALIAS_CONFIG_KEY[scope], MENTION_ALIAS_DEFAULTS[scope]), MENTION_ALIAS_DEFAULTS[scope]);
|
||||
|
||||
for(const key of list)
|
||||
{
|
||||
const lower = key.toLowerCase();
|
||||
|
||||
if(seen.has(lower)) continue;
|
||||
|
||||
seen.add(lower);
|
||||
out.push({ key, scope, description: LocalizeText(MENTION_ALIAS_DESCRIPTION_KEY[scope]) });
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
}, []);
|
||||
|
||||
const suggestions = useMemo<MentionSuggestion[]>(() =>
|
||||
{
|
||||
if(!mentionContext) return [];
|
||||
|
||||
const session = GetSessionDataManager();
|
||||
|
||||
return buildChatMentionSuggestions(mentionContext.query, roomUserList, aliases, session?.userId ?? -1, session?.userName || '');
|
||||
}, [ mentionContext, roomUserList, aliases ]);
|
||||
|
||||
const visible = (suggestions.length > 0);
|
||||
// Clamp the selection to the current list (derived, no effect) so a
|
||||
// shrinking list never leaves the highlight out of range.
|
||||
const safeIndex = (selectedIndex < suggestions.length) ? selectedIndex : 0;
|
||||
|
||||
const apply = useCallback((suggestion: MentionSuggestion) =>
|
||||
{
|
||||
if(!suggestion || !mentionContext) return;
|
||||
|
||||
const before = chatValue.slice(0, mentionContext.replaceFrom);
|
||||
const after = chatValue.slice(mentionContext.replaceTo);
|
||||
const inserted = `@${ suggestion.insertToken } `;
|
||||
|
||||
setChatValue(`${ before }${ inserted }${ after }`);
|
||||
|
||||
requestAnimationFrame(() =>
|
||||
{
|
||||
if(!inputRef.current) return;
|
||||
|
||||
const caret = before.length + inserted.length;
|
||||
|
||||
inputRef.current.focus();
|
||||
inputRef.current.setSelectionRange(caret, caret);
|
||||
});
|
||||
|
||||
setSelectedIndex(0);
|
||||
}, [ chatValue, mentionContext, setChatValue, inputRef ]);
|
||||
|
||||
const moveUp = useCallback(() => setSelectedIndex((safeIndex <= 0) ? (suggestions.length - 1) : (safeIndex - 1)), [ safeIndex, suggestions.length ]);
|
||||
const moveDown = useCallback(() => setSelectedIndex((safeIndex >= (suggestions.length - 1)) ? 0 : (safeIndex + 1)), [ safeIndex, suggestions.length ]);
|
||||
|
||||
const applyCurrent = useCallback(() =>
|
||||
{
|
||||
const picked = suggestions[safeIndex] ?? suggestions[0];
|
||||
|
||||
if(!picked) return false;
|
||||
|
||||
apply(picked);
|
||||
|
||||
return true;
|
||||
}, [ suggestions, safeIndex, apply ]);
|
||||
|
||||
const cancel = useCallback(() =>
|
||||
{
|
||||
setSelectedIndex(0);
|
||||
|
||||
if(!mentionContext) return;
|
||||
|
||||
const before = chatValue.slice(0, mentionContext.replaceFrom);
|
||||
const after = chatValue.slice(mentionContext.replaceTo);
|
||||
|
||||
setChatValue(before + after);
|
||||
}, [ mentionContext, chatValue, setChatValue ]);
|
||||
|
||||
return { visible, suggestions, selectedIndex: safeIndex, setSelectedIndex, moveUp, moveDown, applyCurrent, apply, cancel };
|
||||
};
|
||||
@@ -25,6 +25,7 @@ import './css/emustats/EmuStatsView.css';
|
||||
import './css/chat/Chats.css';
|
||||
import './css/chat/ChatInputMentionSelectorView.css';
|
||||
import './css/mentions/MentionToasts.css';
|
||||
import './css/mentions/MentionsPanel.css';
|
||||
|
||||
import './css/common/Buttons.css';
|
||||
import './css/common/ClassicScrollbar.css';
|
||||
|
||||
Reference in New Issue
Block a user