feat(seer): Wire MentionInput into the Explorer chat input

Replace the plain InputGroup.TextArea in InputSection's enabled state with
MentionInput, wired to useOrgMentionSources() so @-mentioning a user or team
works the same way it does in issue activity notes.

The draft persisted via useDeferredSessionStorage moves from a plain
string to MentionInputValue ({text, mentions}); the storage key prefix is
bumped so stale string-shaped drafts from the old format are never read
back into the new shape.

Adds MentionInput.onOpenChange, a small addition to the core primitive:
Seer needs plain Enter to submit the message (unlike the note composer,
which sidesteps the ambiguity by requiring Cmd/Ctrl+Enter), so it needs to
know when the suggestion popup is open in order to defer to suggestion
selection instead of sending early.

explorerMenu's textAreaRef, slash-command detection, and PR-widget
anchor positioning are unaffected (previous commit already widened the ref
type; slash commands operate on inputValue.text, which is unchanged in
shape). The read-only/disabled input state is untouched, still a plain
disabled InputGroup.TextArea.

Known follow-up: the warning-colored placeholder text (shown when a
run is interrupted or times out) isn't replicated on MentionInput yet --
styling a generic component's ::before pseudo-element through emotion's
styled() fights the component's type parameter. The placeholder text
itself is unchanged, just not in the warning color.

Author: natemoo-re

static/app/components/core/mentionInput/mentionInput.spec.tsx

@@ -36,9 +36,11 @@ function ControlledMentionInput({
   sources = [MEMBER_SOURCE],
   initialValue = '',
   initialMentions = [],
+  onOpenChange,
 }: {
   initialMentions?: readonly Mention[];
   initialValue?: string;
+  onOpenChange?: (isOpen: boolean) => void;
   sources?: readonly TestMentionSource[];
 }) {
   const [value, setValue] = useState<MentionInputValue>({
@@ -53,6 +55,7 @@ function ControlledMentionInput({
         sources={sources}
         value={value}
         onChange={setValue}
+        onOpenChange={onOpenChange}
       />
       <output aria-label="Editor value">
         {value.text}|{value.mentions.map(mention => mention.id).join(',')}
@@ -160,6 +163,23 @@ describe('MentionInput', () => {
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   });
 
+  it('notifies onOpenChange as suggestions open and close', async () => {
+    const onOpenChange = jest.fn();
+    render(<ControlledMentionInput onOpenChange={onOpenChange} />);
+
+    const textbox = getEditor();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    onOpenChange.mockClear();
+
+    await userEvent.type(textbox, '@al');
+    await screen.findByRole('listbox', {name: 'Members suggestions'});
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+
+    onOpenChange.mockClear();
+    await userEvent.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
   it('selects the current suggestion with Tab', async () => {
     render(<ControlledMentionInput />);
 

static/app/components/core/mentionInput/mentionInput.tsx

@@ -142,6 +142,7 @@ export function MentionInput<TSuggestion>({
   sources,
   onChange,
   minHeight,
+  onOpenChange,
   placeholder,
   style,
   ...editorProps
@@ -159,6 +160,10 @@ export function MentionInput<TSuggestion>({
     : undefined;
   const isOpen = activeSource !== undefined;
 
+  useLayoutEffect(() => {
+    onOpenChange?.(isOpen);
+  }, [isOpen, onOpenChange]);
+
   const {
     activeDescendant,
     collectionProps,

static/app/components/core/mentionInput/types.ts

@@ -45,6 +45,12 @@ export interface MentionInputProps<TSuggestion> extends Omit<
   /** Controlled editor text and structured mention ranges. */
   value: MentionInputValue;
   minHeight?: number;
+  /**
+   * Called when the suggestion list opens or closes. Useful for consumers
+   * that bind Enter to something else (e.g. submitting a form) and need to
+   * defer to suggestion selection while the list is open.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
   placeholder?: string;
   ref?: React.Ref<HTMLDivElement>;
   size?: FormSize;

static/app/views/seerExplorer/components/inputSection.tsx

@@ -5,10 +5,12 @@ import {motion} from 'framer-motion';
 import {Button} from '@sentry/scraps/button';
 import {InputGroup} from '@sentry/scraps/input';
 import {Container, Flex, Grid} from '@sentry/scraps/layout';
+import {MentionInput, type MentionInputValue} from '@sentry/scraps/mentionInput';
 import {Text} from '@sentry/scraps/text';
 
 import {IconArrow, IconPause} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import {useOrgMentionSources} from 'sentry/utils/mentions/useOrgMentionSources';
 import {PRWidget} from 'sentry/views/seerExplorer/components/prWidget';
 import type {Block, RepoPRState} from 'sentry/views/seerExplorer/types';
 
@@ -32,20 +34,21 @@ interface QuestionActions {
 interface InputSectionProps {
   blocks: Block[];
   enabled: boolean;
-  inputValue: string;
+  inputValue: MentionInputValue;
   onCreatePR: (repoName?: string) => void;
-  onInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onInputChange: (value: MentionInputValue) => void;
   onInputClick: () => void;
   onInterrupt: () => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
   onPRWidgetClick: () => void;
   onSend: () => void;
   prWidgetButtonRef: React.RefObject<HTMLButtonElement | null>;
   repoPRStates: Record<string, RepoPRState>;
-  textAreaRef: React.RefObject<HTMLTextAreaElement | null>;
+  textAreaRef: React.RefObject<HTMLDivElement | null>;
   canSendMessage?: boolean;
   fileApprovalActions?: FileApprovalActions;
   interruptState?: 'can-interrupt' | 'requested' | 'completed' | 'disabled';
+  onSuggestionsOpenChange?: (isOpen: boolean) => void;
   questionActions?: QuestionActions;
 }
 
@@ -66,8 +69,11 @@ export function InputSection({
   repoPRStates,
   textAreaRef,
   fileApprovalActions,
+  onSuggestionsOpenChange,
   questionActions,
 }: InputSectionProps) {
+  const mentionSources = useOrgMentionSources();
+
   // Check if there are any file patches for showing the PR widget
   const hasCodeChanges = useMemo(() => {
     return blocks.some(b => b.merged_file_patches && b.merged_file_patches.length > 0);
@@ -255,25 +261,29 @@ export function InputSection({
   return (
     <InputBlock>
       <InputRow>
-        <StyledInputGroup isWarningPlaceholder={interruptState === 'completed'}>
-          <InputGroup.TextArea
-            ref={textAreaRef}
-            value={inputValue}
-            onChange={onInputChange}
-            onKeyDown={onKeyDown}
-            onClick={onInputClick}
-            placeholder={
-              interruptState === 'completed'
-                ? t('Interrupted. What should Seer do instead?')
-                : t('Ask Seer a question, or press / for commands.')
-            }
-            rows={1}
-            maxRows={5}
-            autosize
-            size="md"
-            data-test-id="seer-explorer-input"
-          />
-        </StyledInputGroup>
+        <MentionInput
+          ref={textAreaRef}
+          aria-label={t('Ask Seer a question')}
+          sources={mentionSources}
+          value={inputValue}
+          onChange={onInputChange}
+          onOpenChange={onSuggestionsOpenChange}
+          onKeyDown={onKeyDown}
+          onClick={onInputClick}
+          placeholder={
+            interruptState === 'completed'
+              ? t('Interrupted. What should Seer do instead?')
+              : t('Ask Seer a question, or press / for commands.')
+          }
+          // TODO(mention-input): match the warning color used for the
+          // disabled/interrupted textarea placeholder above (needs a way to
+          // style :empty::before on a generic MentionInput without fighting
+          // emotion's `styled()` over its generic type parameter).
+          minHeight={20}
+          style={{flex: 1, maxHeight: 120}}
+          size="md"
+          data-test-id="seer-explorer-input"
+        />
         {interruptState === 'can-interrupt' || interruptState === 'requested' ? (
           <Button
             icon={<IconPause />}

static/app/views/seerExplorer/components/seerExplorerContent.spec.tsx

@@ -18,6 +18,17 @@ import type {SeerExplorerResponse} from 'sentry/views/seerExplorer/types';
 
 const mockGetPageReferrer = jest.fn().mockReturnValue('/issues/');
 
+/**
+ * Grabs the Seer Explorer's mention-aware input. userEvent does not yet
+ * recognize contenteditable="plaintext-only", so this switches it to
+ * "true" first (matching the workaround used by MentionInput's own tests).
+ */
+async function getSeerExplorerInput() {
+  const editor = await screen.findByTestId('seer-explorer-input');
+  editor.setAttribute('contenteditable', 'true');
+  return editor;
+}
+
 const defaultHookReturn: ReturnType<typeof useSeerExplorerModule.useSeerExplorer> = {
   sessionData: null,
   isPolling: false,
@@ -133,11 +144,10 @@ describe('SeerExplorerContent', () => {
           organization,
         }
       );
-      expect(
-        await screen.findByPlaceholderText(
-          'Ask Seer a question, or press / for commands.'
-        )
-      ).toBeInTheDocument();
+      expect(await screen.findByTestId('seer-explorer-input')).toHaveAttribute(
+        'data-placeholder',
+        'Ask Seer a question, or press / for commands.'
+      );
     });
 
     it('sends the suggested question when a suggestion button is clicked', async () => {
@@ -320,9 +330,9 @@ describe('SeerExplorerContent', () => {
           organization,
         }
       );
-      const textarea = await screen.findByTestId('seer-explorer-input');
+      const textarea = await getSeerExplorerInput();
       await userEvent.type(textarea, 'Test message');
-      expect(textarea).toHaveValue('Test message');
+      expect(textarea).toHaveTextContent('Test message');
     });
 
     it('calls sendMessage and clears input when send button is clicked', async () => {
@@ -346,12 +356,12 @@ describe('SeerExplorerContent', () => {
         }
       );
 
-      const textarea = await screen.findByTestId('seer-explorer-input');
+      const textarea = await getSeerExplorerInput();
       await userEvent.type(textarea, 'Test message');
       await userEvent.click(screen.getByRole('button', {name: 'Send message'}));
 
       expect(sendMessage).toHaveBeenCalledWith('Test message', 0);
-      expect(textarea).toHaveValue('');
+      expect(textarea).toBeEmptyDOMElement();
     });
 
     it('calls sendMessage and clears input when Enter is pressed', async () => {
@@ -375,12 +385,12 @@ describe('SeerExplorerContent', () => {
         }
       );
 
-      const textarea = await screen.findByTestId('seer-explorer-input');
+      const textarea = await getSeerExplorerInput();
       await userEvent.type(textarea, 'Test message');
       await userEvent.keyboard('{Enter}');
 
       expect(sendMessage).toHaveBeenCalledWith('Test message', 0);
-      expect(textarea).toHaveValue('');
+      expect(textarea).toBeEmptyDOMElement();
     });
 
     it('[Integration] sends message to the API when Enter is pressed', async () => {
@@ -451,7 +461,7 @@ describe('SeerExplorerContent', () => {
         }
       );
 
-      const textarea = await screen.findByTestId('seer-explorer-input');
+      const textarea = await getSeerExplorerInput();
       await userEvent.type(textarea, 'What is this error?');
       await userEvent.keyboard('{Enter}');
 
@@ -513,7 +523,7 @@ describe('SeerExplorerContent', () => {
         }
       );
 
-      const textarea = await screen.findByTestId('seer-explorer-input');
+      const textarea = await getSeerExplorerInput();
       await userEvent.type(textarea, 'Test message');
       await userEvent.keyboard('{Enter}');
 
@@ -566,7 +576,7 @@ describe('SeerExplorerContent', () => {
         }
       );
 
-      const textarea = await screen.findByTestId('seer-explorer-input');
+      const textarea = await getSeerExplorerInput();
       await userEvent.type(textarea, 'New message');
       await userEvent.keyboard('{Enter}');
 
@@ -622,7 +632,7 @@ describe('SeerExplorerContent', () => {
 
       expect(await screen.findByText('Response timed out.')).toBeInTheDocument();
       expect(screen.getByTestId('seer-explorer-input')).toHaveAttribute(
-        'placeholder',
+        'data-placeholder',
         'Ask Seer a question, or press / for commands.'
       );
 
@@ -653,10 +663,7 @@ describe('SeerExplorerContent', () => {
         {organization}
       );
 
-      await userEvent.type(
-        await screen.findByTestId('seer-explorer-input'),
-        'draft message'
-      );
+      await userEvent.type(await getSeerExplorerInput(), 'draft message');
       unmount();
 
       render(
@@ -671,7 +678,7 @@ describe('SeerExplorerContent', () => {
         {organization}
       );
 
-      expect(await screen.findByTestId('seer-explorer-input')).toHaveValue(
+      expect(await screen.findByTestId('seer-explorer-input')).toHaveTextContent(
         'draft message'
       );
     });
@@ -692,10 +699,7 @@ describe('SeerExplorerContent', () => {
         {organization}
       );
 
-      await userEvent.type(
-        await screen.findByTestId('seer-explorer-input'),
-        'draft for run 1'
-      );
+      await userEvent.type(await getSeerExplorerInput(), 'draft for run 1');
 
       useSeerExplorerSpy.mockReturnValue({...defaultHookReturn, runId: 2});
       rerender(
@@ -710,11 +714,11 @@ describe('SeerExplorerContent', () => {
       );
 
       await waitFor(() =>
-        expect(screen.getByTestId('seer-explorer-input')).toHaveValue('')
+        expect(screen.getByTestId('seer-explorer-input')).toBeEmptyDOMElement()
       );
       expect(
         JSON.parse(sessionStorage.getItem(`${INPUT_STORAGE_KEY_PREFIX}:1`) ?? '')
-      ).toBe('draft for run 1');
+      ).toEqual({text: 'draft for run 1', mentions: []});
 
       useSeerExplorerSpy.mockReturnValue({...defaultHookReturn, runId: 1});
       rerender(
@@ -729,7 +733,9 @@ describe('SeerExplorerContent', () => {
       );
 
       await waitFor(() =>
-        expect(screen.getByTestId('seer-explorer-input')).toHaveValue('draft for run 1')
+        expect(screen.getByTestId('seer-explorer-input')).toHaveTextContent(
+          'draft for run 1'
+        )
       );
     });
 
@@ -748,10 +754,7 @@ describe('SeerExplorerContent', () => {
         {organization}
       );
 
-      await userEvent.type(
-        await screen.findByTestId('seer-explorer-input'),
-        'unsaved draft'
-      );
+      await userEvent.type(await getSeerExplorerInput(), 'unsaved draft');
       unmount();
 
       const draftWrites = setItemSpy.mock.calls.filter(([k]) =>
@@ -780,12 +783,12 @@ describe('SeerExplorerContent', () => {
         {organization}
       );
 
-      const textarea = await screen.findByTestId('seer-explorer-input');
+      const textarea = await getSeerExplorerInput();
       await userEvent.type(textarea, 'hello');
       await userEvent.keyboard('{Enter}');
 
       expect(sendMessage).toHaveBeenCalledWith('hello', 0);
-      expect(textarea).toHaveValue('');
+      expect(textarea).toBeEmptyDOMElement();
       expect(sessionStorage.getItem(`${INPUT_STORAGE_KEY_PREFIX}:42`)).toBeNull();
     });
   });
@@ -856,7 +859,7 @@ describe('SeerExplorerContent', () => {
       const textarea = await screen.findByTestId('seer-explorer-input');
       await waitFor(() => expect(textarea).toBeEnabled());
       expect(textarea).toHaveAttribute(
-        'placeholder',
+        'data-placeholder',
         'Ask Seer a question, or press / for commands.'
       );
     });