duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Mention Now in UI-Config and UITexts and not hardcoded

Browse Source
This commit is contained in:
duckietm
2026-06-04 11:32:55 +02:00
parent a4137af4fe
commit 7007752e91
8 changed files with 182 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
-3
View File
@@ -7,7 +7,6 @@ import { LoginView } from './components/login/LoginView';
import { MainView } from './components/MainView';
import { ReconnectView } from './components/reconnect/ReconnectView';
import { useMessageEvent, useNitroEvent } from './hooks';
import { ensureChatCommandListener } from './hooks/rooms/widgets/useChatCommandSelector';
NitroVersion.UI_VERSION = GetUIVersion();
@@ -563,9 +562,7 @@ export const App: FC<{}> = props =>
bumpProgress(85, taskLabel('loading.task.rooms', 'Loading rooms...'));
await GetRoomEngine().init();
bumpProgress(92, taskLabel('loading.task.engine', 'Loading graphics engine...'));
ensureChatCommandListener();
await GetCommunication().init();
ensureChatCommandListener();
bumpProgress(98, taskLabel('generic.reconnecting', 'Connecting to server...'));
})();
}
src/api/room/events/RoomWidgetUpdateChatInputContentEvent.ts
-1
View File
@@ -5,7 +5,6 @@ export class RoomWidgetUpdateChatInputContentEvent extends RoomWidgetUpdateEvent
public static CHAT_INPUT_CONTENT: string = 'RWUCICE_CHAT_INPUT_CONTENT';
public static WHISPER: string = 'whisper';
public static SHOUT: string = 'shout';
public static TEXT: string = 'text';
private _chatMode: string = '';
private _userName: string = '';
src/components/room/widgets/chat-input/ChatInputCommandSelectorView.tsx
+8 -10
View File
@@ -1,10 +1,9 @@
import { FC, useEffect, useRef } from 'react';
import type { CommandDefinition } from '../../../../api';
import type { RankedCommandDefinition } from '../../../../hooks/rooms/widgets/useChatCommandSelector.helpers';
import { CommandDefinition } from '../../../../api';
interface ChatInputCommandSelectorViewProps
{
commands: RankedCommandDefinition[];
commands: CommandDefinition[];
selectedIndex: number;
onSelect: (command: CommandDefinition) => void;
onHover: (index: number) => void;
@@ -25,18 +24,17 @@ export const ChatInputCommandSelectorView: FC<ChatInputCommandSelectorViewProps>
}, [ selectedIndex ]);
return (
<div ref={ listRef } className="absolute bottom-full left-0 z-[1070] max-h-[238px] w-full overflow-y-auto rounded-t-[8px] border-2 border-b-0 border-black bg-[#f2f2eb] shadow-[0_-4px_14px_rgba(0,0,0,0.22)]">
<div ref={ listRef } className="absolute bottom-full left-0 w-full bg-[#e8e8e8] border-2 border-black border-b-0 rounded-t-lg max-h-[240px] overflow-y-auto z-[1070]">
{ commands.map((cmd, index) => (
<button
<div
key={ cmd.key }
className={ `flex min-h-[34px] w-full cursor-pointer items-center gap-2 border-b border-[#c6c6bd] px-3 py-1.5 text-left last:border-b-0 ${ index === selectedIndex ? 'bg-[#255d72] text-white' : 'text-black hover:bg-[#dceaf0]' }` }
type="button"
className={ `px-3 py-1.5 cursor-pointer text-sm flex items-center gap-2 ${ index === selectedIndex ? 'bg-[#283F5D] text-white' : 'hover:bg-gray-300' }` }
onClick={ () => onSelect(cmd) }
onMouseEnter={ () => onHover(index) }
>
<span className={ `shrink-0 rounded-[4px] border px-1.5 py-[1px] font-bold ${ index === selectedIndex ? 'border-white/60 bg-white/15' : 'border-[#8ca6b1] bg-white text-[#123b4c]' }` }>:{ cmd.key }</span>
<span className={ `min-w-0 flex-1 truncate text-[12px] ${ index === selectedIndex ? 'text-white/85' : 'text-[#525252]' }` }>{ cmd.description }</span>
</button>
<span className="font-bold">:{ cmd.key }</span>
<span className={ `text-xs ${ index === selectedIndex ? 'text-gray-300' : 'text-gray-500' }` }>{ cmd.description }</span>
</div>
)) }
</div>
);
src/components/room/widgets/chat-input/ChatInputView.tsx
+68 -36
View File
@@ -12,15 +12,40 @@ import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
const USER_TYPE_REAL_USER = 1;
const MAX_MENTION_SUGGESTIONS = 8;
const MENTION_ALIASES: ReadonlyArray<{ key: string; label: string; description?: string }> = [
{ key: 'all', label: 'all', description: 'Everyone in the hotel' },
{ key: 'everyone', label: 'everyone', description: 'Everyone in the hotel' },
{ key: 'tutti', label: 'tutti', description: 'Everyone in the hotel' },
{ key: 'friends', label: 'friends', description: 'Your online friends' },
{ key: 'amici', label: 'amici', description: 'Your online friends' },
{ key: 'room', label: 'room', description: 'Everyone in this room' },
{ key: 'stanza', label: 'stanza', description: 'Everyone in this room' }
];
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 =>
{
@@ -30,6 +55,7 @@ export const ChatInputView: FC<{}> = props =>
const { roomSession = null } = useRoom();
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);
@@ -46,12 +72,38 @@ export const ChatInputView: FC<{}> = props =>
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 [];
@@ -76,14 +128,14 @@ export const ChatInputView: FC<{}> = props =>
if(out.length >= MAX_MENTION_SUGGESTIONS) break;
}
for(const alias of MENTION_ALIASES)
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.label,
name: alias.key,
insertToken: alias.key,
description: alias.description
});
@@ -92,7 +144,7 @@ export const ChatInputView: FC<{}> = props =>
}
return out;
}, [ mentionContext, roomUserList ]);
}, [ mentionContext, roomUserList, mentionAliases ]);
const mentionSelectorVisible = mentionSuggestions.length > 0;
@@ -148,23 +200,6 @@ export const ChatInputView: FC<{}> = props =>
inputRef.current.setSelectionRange((inputRef.current.value.length * 2), (inputRef.current.value.length * 2));
}, [ inputRef ]);
const setChatInputValue = useCallback((value: string, markTyping: boolean = true) =>
{
setChatValue(value);
if(markTyping)
{
setIsTyping(!!value.length);
setIsIdle(!!value.length);
}
requestAnimationFrame(() =>
{
inputRef.current?.focus();
inputRef.current?.setSelectionRange(value.length, value.length);
});
}, [ setIsTyping, setIsIdle ]);
const checkSpecialKeywordForInput = useCallback(() =>
{
setChatValue(prevValue =>
@@ -279,7 +314,7 @@ export const ChatInputView: FC<{}> = props =>
if(selected)
{
event.preventDefault();
setChatInputValue(':' + selected.key + ' ');
setChatValue(':' + selected.key + ' ');
return;
}
break;
@@ -319,7 +354,7 @@ export const ChatInputView: FC<{}> = props =>
case 'Escape':
event.preventDefault();
setMentionSelectedIndex(0);
if(mentionContext)
{
const before = chatValue.slice(0, mentionContext.replaceFrom);
@@ -361,9 +396,6 @@ export const ChatInputView: FC<{}> = props =>
{
switch(event.chatMode)
{
case RoomWidgetUpdateChatInputContentEvent.TEXT:
setChatInputValue(event.userName);
return;
case RoomWidgetUpdateChatInputContentEvent.WHISPER: {
setChatValue(`${ chatModeIdWhisper } ${ event.userName } `);
return;
@@ -450,7 +482,7 @@ export const ChatInputView: FC<{}> = props =>
selectedIndex={ selectedIndex }
onSelect={ (cmd) =>
{
setChatInputValue(':' + cmd.key + ' ');
setChatValue(':' + cmd.key + ' '); inputRef.current?.focus();
} }
onHover={ setSelectedIndex }
/> }
src/hooks/rooms/widgets/useChatCommandSelector.ts
+33 -30
View File
@@ -3,9 +3,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
import { CommandDefinition, LocalizeText } from '../../../api';
import { createNitroStore } from '../../../state/createNitroStore';
import { useMessageEvent } from '../../events';
import { getChatCommandQuery, getRankedCommandSuggestions } from './useChatCommandSelector.helpers';
const MAX_VISIBLE_COMMANDS = 8;
// Client-only commands are static; safe to keep at module scope. The
// `descriptionKey` is a LocalizeText slot resolved at merge time so
@@ -65,7 +62,7 @@ const useChatCommandStore = createNitroStore<ChatCommandStore>()((set) => ({
markListenerRegistered: () => set({ isListenerRegistered: true })
}));
export const ensureChatCommandListener = (): void =>
const ensureGlobalListener = (): void =>
{
if(useChatCommandStore.getState().isListenerRegistered) return;
@@ -89,20 +86,20 @@ export const ensureChatCommandListener = (): void =>
// Try once at module load so the server's response landing before any
// React mount still hits the cache.
ensureChatCommandListener();
ensureGlobalListener();
export const useChatCommandSelector = (chatValue: string) =>
{
const serverCommands = useChatCommandStore(s => s.serverCommands);
const setServerCommands = useChatCommandStore(s => s.setServerCommands);
const [ selectedIndex, setSelectedIndex ] = useState(0);
const [ dismissedQuery, setDismissedQuery ] = useState<string | null>(null);
const [ dismissed, setDismissed ] = useState(false);
useEffect(() =>
{
// Cover the case where the module-level registration failed
// because GetCommunication() wasn't ready at import time.
ensureChatCommandListener();
ensureGlobalListener();
}, []);
// Late updates (rank change, etc.) — go through the store so all
@@ -126,55 +123,61 @@ export const useChatCommandSelector = (chatValue: string) =>
return merged.sort((a, b) => a.key.localeCompare(b.key));
}, [ serverCommands ]);
const filterText = useMemo(() => getChatCommandQuery(chatValue), [ chatValue ]);
const filterText = useMemo(() =>
{
if(!chatValue.startsWith(':') || chatValue.includes(' ')) return '';
return chatValue.slice(1).toLowerCase();
}, [ chatValue ]);
const filteredCommands = useMemo(() =>
{
if(filterText === null) return [];
if(!filterText && !chatValue.startsWith(':')) return [];
return getRankedCommandSuggestions(allCommands, filterText, MAX_VISIBLE_COMMANDS);
}, [ allCommands, filterText ]);
return allCommands.filter(cmd => cmd.key.toLowerCase().startsWith(filterText));
}, [ allCommands, filterText, chatValue ]);
const isVisible = useMemo(() =>
{
return filterText !== null && filteredCommands.length > 0 && dismissedQuery !== filterText;
}, [ filterText, filteredCommands, dismissedQuery ]);
const boundedSelectedIndex = useMemo(() =>
{
if(!filteredCommands.length) return 0;
return Math.min(selectedIndex, filteredCommands.length - 1);
}, [ filteredCommands.length, selectedIndex ]);
return chatValue.startsWith(':') && !chatValue.includes(' ') && filteredCommands.length > 0 && !dismissed;
}, [ chatValue, filteredCommands, dismissed ]);
const moveUp = useCallback(() =>
{
if(!filteredCommands.length) return;
setSelectedIndex(prev => ((prev <= 0 || prev >= filteredCommands.length) ? filteredCommands.length - 1 : prev - 1));
setSelectedIndex(prev => (prev <= 0 ? filteredCommands.length - 1 : prev - 1));
}, [ filteredCommands.length ]);
const moveDown = useCallback(() =>
{
if(!filteredCommands.length) return;
setSelectedIndex(prev => (prev >= filteredCommands.length - 1 ? 0 : prev + 1));
}, [ filteredCommands.length ]);
const selectCurrent = useCallback((): CommandDefinition | null =>
{
if(boundedSelectedIndex >= 0 && boundedSelectedIndex < filteredCommands.length)
if(selectedIndex >= 0 && selectedIndex < filteredCommands.length)
{
return filteredCommands[boundedSelectedIndex];
return filteredCommands[selectedIndex];
}
return null;
}, [ boundedSelectedIndex, filteredCommands ]);
}, [ selectedIndex, filteredCommands ]);
const close = useCallback(() =>
{
setDismissedQuery(filterText);
setDismissed(true);
}, []);
// Reset dismissed when chatValue changes to a new command start
useEffect(() =>
{
if(chatValue === ':' || chatValue === '') setDismissed(false);
}, [ chatValue ]);
// Reset selectedIndex when filtered list changes
useEffect(() =>
{
setSelectedIndex(0);
}, [ filterText ]);
return { isVisible, filteredCommands, selectedIndex: boundedSelectedIndex, setSelectedIndex, moveUp, moveDown, selectCurrent, close };
return { isVisible, filteredCommands, selectedIndex, setSelectedIndex, moveUp, moveDown, selectCurrent, close };
};