Skip to content

Add slash command menu #5813

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wca4a wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Add slash command menu #5813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
83285d1
Add slash command menu
wca4a May 1, 2026
02f1820
Treat whitespace as slash command terminator
wca4a May 1, 2026
8ab796e
Fix slash command key handling and mention offsets
patosullivan May 5, 2026
ee7e4f0
Merge branch 'develop' into feature/slash-command-menu
patosullivan May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 153 additions & 23 deletions packages/app/ui/components/BareChatInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,60 @@ import {
MessageInputProps,
} from '../MessageInput/MessageInputBase';
import { hydrateEditPost } from '../MessageInput/helpers';
import { type SlashCommandController } from '../SlashCommandPopup';
import type { DraftInputHandle } from '../draftInputs/shared';
import { contentToTextAndMentions, textAndMentionsToContent } from './helpers';
import {
MentionOption,
createMentionRoleOptions,
useMentions,
} from './useMentions';
import { type SlashCommandOption, useSlashCommands } from './useSlashCommands';

const bareChatInputLogger = createDevLogger('bareChatInput', false);

const DEFAULT_KEYBOARD_HEIGHT = 300;

type WebTextInputRef = TextInput & { selectionStart?: number };

type TextInputSizeEvent = {
target?: unknown;
};

type ResizableTextInputTarget = {
style: { height: string | number };
offsetHeight: number;
clientHeight: number;
scrollHeight: number;
};

type ComposerKeyPressEvent = {
preventDefault?: () => void;
nativeEvent: {
key: string;
shiftKey?: boolean;
metaKey?: boolean;
ctrlKey?: boolean;
};
};

function isResizableTextInputTarget(
target: unknown
): target is ResizableTextInputTarget {
if (typeof target !== 'object' || target === null) {
return false;
}

const candidate = target as Partial<ResizableTextInputTarget>;
return (
typeof candidate.style === 'object' &&
candidate.style !== null &&
typeof candidate.offsetHeight === 'number' &&
typeof candidate.clientHeight === 'number' &&
typeof candidate.scrollHeight === 'number'
);
}

function useKeyboardHeight(maxInputHeightBasic: number) {
const [maxInputHeight, setMaxInputHeight] = useState(maxInputHeightBasic);

Expand Down Expand Up @@ -296,6 +338,14 @@ function BareChatInput(
handleSelectMention,
handleMentionEscape,
} = useMentions({ chatId: groupId ?? channelId, roleOptions });
const {
validSlashCommands,
isSlashCommandModeActive,
hasSlashCommandCandidates,
handleSlashCommand,
handleSelectSlashCommand,
handleSlashCommandEscape,
} = useSlashCommands();
const maxInputHeight = useKeyboardHeight(maxInputHeightBasic);
const inputRef = useRef<TextInput>(null);

Expand Down Expand Up @@ -346,6 +396,17 @@ function BareChatInput(

const lastProcessedRef = useRef('');
const mentionRef = useRef<MentionController>(null);
const slashCommandRef = useRef<SlashCommandController>(null);

const getWebSelectionStart = useCallback(() => {
if (!isWeb) {
return undefined;
}

const selectionStart = (inputRef.current as WebTextInputRef | null)
?.selectionStart;
return typeof selectionStart === 'number' ? selectionStart : undefined;
}, []);

const handleTextChange = useCallback(
(newText: string) => {
Expand All @@ -361,15 +422,14 @@ function BareChatInput(
if (REF_REGEX.test(newText) && lastProcessedRef.current !== newText) {
lastProcessedRef.current = newText;
const textWithoutRefs = processReferences(newText);
const cursorPos = isWeb
? (inputRef.current as any)?.selectionStart
: undefined;
const cursorPos = getWebSelectionStart();
const adjustedCursorPos =
cursorPos != null
? Math.max(0, cursorPos - (newText.length - textWithoutRefs.length))
: undefined;
setControlledText(textWithoutRefs);
handleMention(oldText, textWithoutRefs, adjustedCursorPos);
handleSlashCommand(oldText, textWithoutRefs, adjustedCursorPos);

const jsonContent = textAndMentionsToContent(textWithoutRefs, mentions);
bareChatInputLogger.log('setting draft', jsonContent);
Expand All @@ -386,18 +446,25 @@ function BareChatInput(
}
} else if (!REF_REGEX.test(newText)) {
// if there's no reference to process, just update normally
const cursorPos = isWeb
? (inputRef.current as any)?.selectionStart
: undefined;
const cursorPos = getWebSelectionStart();
setControlledText(newText);
handleMention(oldText, newText, cursorPos);
handleSlashCommand(oldText, newText, cursorPos);

const jsonContent = textAndMentionsToContent(newText, mentions);
bareChatInputLogger.log('setting draft', jsonContent);
storeDraft(jsonContent);
}
},
[controlledText, processReferences, handleMention, mentions, storeDraft]
[
controlledText,
processReferences,
getWebSelectionStart,
handleMention,
handleSlashCommand,
mentions,
storeDraft,
]
);

const onMentionSelect = useCallback(
Expand All @@ -416,6 +483,47 @@ function BareChatInput(
[handleSelectMention, controlledText]
);

const onSlashCommandSelect = useCallback(
(option: SlashCommandOption) => {
const selection = handleSelectSlashCommand(option, controlledText);

if (!selection) {
return;
}

const newText = selection.text;
const updatedMentions =
selection.delta === 0
? mentions
: mentions.map((mention) =>
mention.start >= selection.startIndex
? {
...mention,
start: mention.start + selection.delta,
end: mention.end + selection.delta,
}
: mention
);

setControlledText(newText);
setMentions(updatedMentions);

const jsonContent = textAndMentionsToContent(newText, updatedMentions);
bareChatInputLogger.log('setting draft', jsonContent);
storeDraft(jsonContent);

// Force focus back to input after slash command selection
inputRef.current?.focus();
},
Comment thread
patosullivan marked this conversation as resolved.
[
handleSelectSlashCommand,
controlledText,
mentions,
setMentions,
storeDraft,
]
);

const sendMessage = useCallback(
async (isEdit?: boolean) => {
const jsonContent = textAndMentionsToContent(controlledText, mentions);
Expand Down Expand Up @@ -813,14 +921,14 @@ function BareChatInput(
};
const inputTextColor = getVariableValue(theme.primaryText);

const adjustTextInputSize = (e: any) => {
const adjustTextInputSize = (e: TextInputSizeEvent) => {
if (!isWeb) {
return;
}

const el = e?.target;
if (el && 'style' in el && 'height' in el.style) {
el.style.height = 0;
const el = e.target;
if (isResizableTextInputTarget(el)) {
el.style.height = '0px';
const newHeight = el.offsetHeight - el.clientHeight + el.scrollHeight;
el.style.height = `${newHeight}px`;
setInputHeight(newHeight);
Expand Down Expand Up @@ -850,38 +958,53 @@ function BareChatInput(
}, [channelId]);

const handleKeyPress = useCallback(
(e: any) => {
const keyEvent = e.nativeEvent as unknown as KeyboardEvent;
(e: ComposerKeyPressEvent) => {
const keyEvent = e.nativeEvent;
if (!isWeb) return;

if (
(keyEvent.metaKey || keyEvent.ctrlKey) &&
keyEvent.key.toLowerCase() === 'k'
) {
e.preventDefault();
e.preventDefault?.();
inputRef.current?.blur();
setIsOpen(true);
return;
}

if (
(keyEvent.key === 'ArrowUp' || keyEvent.key === 'ArrowDown') &&
isMentionModeActive
) {
e.preventDefault();
mentionRef.current?.handleMentionKey(keyEvent.key);
if (keyEvent.key === 'ArrowUp' || keyEvent.key === 'ArrowDown') {
if (isSlashCommandModeActive && hasSlashCommandCandidates) {
e.preventDefault?.();
slashCommandRef.current?.handleSlashCommandKey(keyEvent.key);
return;
}

if (isMentionModeActive) {
e.preventDefault?.();
mentionRef.current?.handleMentionKey(keyEvent.key);
return;
}
}
Comment thread
patosullivan marked this conversation as resolved.

if (keyEvent.key === 'Escape') {
if (isSlashCommandModeActive && hasSlashCommandCandidates) {
e.preventDefault?.();
handleSlashCommandEscape();
return;
}

if (isMentionModeActive) {
e.preventDefault();
e.preventDefault?.();
handleMentionEscape();
return;
}
}

if (keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
e.preventDefault();
if (isMentionModeActive && hasMentionCandidates) {
e.preventDefault?.();
if (isSlashCommandModeActive && hasSlashCommandCandidates) {
slashCommandRef.current?.handleSlashCommandKey('Enter');
} else if (isMentionModeActive && hasMentionCandidates) {
mentionRef.current?.handleMentionKey('Enter');
} else if (editingPost) {
handleEdit();
Expand All @@ -892,9 +1015,12 @@ function BareChatInput(
},
[
isMentionModeActive,
isSlashCommandModeActive,
setIsOpen,
handleMentionEscape,
handleSlashCommandEscape,
hasMentionCandidates,
hasSlashCommandCandidates,
editingPost,
disableSend,
handleEdit,
Expand All @@ -912,10 +1038,14 @@ function BareChatInput(
showWayfindingTooltip={showWayfindingTooltip}
showBotMentionTooltip={showBotMentionTooltip}
isMentionModeActive={isMentionModeActive}
isSlashCommandModeActive={isSlashCommandModeActive}
mentionText={mentionSearchText}
mentionOptions={validOptions}
slashCommandOptions={validSlashCommands}
mentionRef={mentionRef}
slashCommandRef={slashCommandRef}
onSelectMention={onMentionSelect}
onSelectSlashCommand={onSlashCommandSelect}
showAttachmentButton={showAttachmentButton}
isEditing={!!editingPost}
cancelEditing={handleCancelEditing}
Expand Down
Loading
Loading