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

feat(chat): improve command autocomplete and command alerts

Browse Source
This commit is contained in:
simoleo89
2026-06-02 18:31:49 +02:00
parent 4ba2d25c85
commit f506b83387
9 changed files with 316 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/room/widgets/chat-input/ChatInputView.tsx
+24 -4
View File
@@ -8,7 +8,7 @@ import { ChatInputCommandSelectorView } from './ChatInputCommandSelectorView';
import { ChatInputEmojiSelectorView } from './ChatInputEmojiSelectorView';
import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
export const ChatInputView: FC<{}> = props =>
export const ChatInputView: FC = () =>
{
const [ chatValue, setChatValue ] = useState<string>('');
const { chatStyleId = 0, updateChatStyleId = null } = useSessionInfo();
@@ -42,6 +42,23 @@ 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 =>
@@ -157,7 +174,7 @@ export const ChatInputView: FC<{}> = props =>
if(selected)
{
event.preventDefault();
setChatValue(':' + selected.key + ' ');
setChatInputValue(':' + selected.key + ' ');
return;
}
break;
@@ -194,12 +211,15 @@ export const ChatInputView: FC<{}> = props =>
return;
}
}, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, closeCommandSelector ]);
}, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, setChatInputValue, closeCommandSelector ]);
useUiEvent<RoomWidgetUpdateChatInputContentEvent>(RoomWidgetUpdateChatInputContentEvent.CHAT_INPUT_CONTENT, event =>
{
switch(event.chatMode)
{
case RoomWidgetUpdateChatInputContentEvent.TEXT:
setChatInputValue(event.userName);
return;
case RoomWidgetUpdateChatInputContentEvent.WHISPER: {
setChatValue(`${ chatModeIdWhisper } ${ event.userName } `);
return;
@@ -286,7 +306,7 @@ export const ChatInputView: FC<{}> = props =>
selectedIndex={ selectedIndex }
onSelect={ (cmd) =>
{
setChatValue(':' + cmd.key + ' '); inputRef.current?.focus();
setChatInputValue(':' + cmd.key + ' ');
} }
onHover={ setSelectedIndex }
/> }