diff --git a/packages/web/src/components/ChatComposer.tsx b/packages/web/src/components/ChatComposer.tsx index ebecc8922..4168a20f7 100644 --- a/packages/web/src/components/ChatComposer.tsx +++ b/packages/web/src/components/ChatComposer.tsx @@ -12,7 +12,7 @@ import SessionStatusBar from './SessionStatusBar.tsx'; import { borderColors } from '../lib/design-tokens.ts'; import { cn } from '../lib/utils.ts'; -interface ChatComposerProps { +export interface ChatComposerProps { sessionId: string; readonly: boolean; sessionStatus?: string; @@ -44,10 +44,15 @@ interface ChatComposerProps { content: string, images?: MessageImage[], deliveryMode?: MessageDeliveryMode - ) => Promise; + ) => Promise; onOpenTools: () => void; onEnterRewindMode: () => void; onExitRewindMode: () => void; + agentMentionCandidates?: Array<{ id: string; name: string }>; + /** Override the default placeholder text in the message input */ + inputPlaceholder?: string; + /** Optional inline error message rendered above the status bar (used by task sessions) */ + errorMessage?: string | null; } export function ChatComposer({ @@ -82,9 +87,19 @@ export function ChatComposer({ onOpenTools, onEnterRewindMode, onExitRewindMode, + agentMentionCandidates, + inputPlaceholder, + errorMessage, }: ChatComposerProps) { return (
+ {errorMessage && ( +
+

+ {errorMessage} +

+
+ )} ) )} diff --git a/packages/web/src/components/InputTextarea.tsx b/packages/web/src/components/InputTextarea.tsx index 16b4606be..405fe0849 100644 --- a/packages/web/src/components/InputTextarea.tsx +++ b/packages/web/src/components/InputTextarea.tsx @@ -31,6 +31,7 @@ import { cn } from '../lib/utils.ts'; import { borderColors } from '../lib/design-tokens.ts'; import CommandAutocomplete from './CommandAutocomplete.tsx'; import ReferenceAutocomplete from './ReferenceAutocomplete.tsx'; +import MentionAutocomplete from './space/MentionAutocomplete.tsx'; import type { ReferenceSearchResult } from '@neokai/shared'; import { REFERENCE_PATTERN } from '@neokai/shared'; @@ -54,6 +55,12 @@ export interface InputTextareaProps { selectedReferenceIndex?: number; onReferenceSelect?: (result: ReferenceSearchResult) => void; onReferenceClose?: () => void; + // Agent mention autocomplete + showAgentMentionAutocomplete?: boolean; + agentMentionCandidates?: Array<{ id: string; name: string }>; + selectedAgentMentionIndex?: number; + onAgentMentionSelect?: (name: string) => void; + onAgentMentionClose?: () => void; // Agent state - passed as prop to avoid direct signal reads that cause re-renders isAgentWorking?: boolean; onStop?: () => void; @@ -79,6 +86,11 @@ export function InputTextarea({ disabled, maxChars = 10000, placeholder = 'Ask or make anything...', + showAgentMentionAutocomplete = false, + agentMentionCandidates = [], + selectedAgentMentionIndex = 0, + onAgentMentionSelect, + onAgentMentionClose, showCommandAutocomplete = false, filteredCommands = [], selectedCommandIndex = 0, @@ -181,8 +193,15 @@ export function InputTextarea({ return (
- {/* Autocomplete menus — only one shown at a time; reference takes priority */} - {showReferenceAutocomplete && onReferenceSelect && onReferenceClose ? ( + {/* Autocomplete menus — only one shown at a time; agent mention takes highest priority */} + {showAgentMentionAutocomplete && onAgentMentionSelect && onAgentMentionClose ? ( + + ) : showReferenceAutocomplete && onReferenceSelect && onReferenceClose ? ( Promise; + ) => Promise; disabled?: boolean; autoScroll?: boolean; onAutoScrollChange?: (autoScroll: boolean) => void; @@ -78,6 +78,9 @@ interface MessageInputProps { onEnterRewindMode?: () => void; rewindMode?: boolean; onExitRewindMode?: () => void; + agentMentionCandidates?: Array<{ id: string; name: string }>; + /** Override the default placeholder derived from sessionType */ + placeholder?: string; } interface QueuedOverlayMessage { @@ -99,6 +102,8 @@ export default function MessageInput({ onEnterRewindMode, rewindMode, onExitRewindMode, + agentMentionCandidates, + placeholder: placeholderProp, }: MessageInputProps) { // Cache touch device detection — computed once on first render, stable thereafter. // Using useRef (not a module constant) so tests can mock matchMedia before render. @@ -167,6 +172,72 @@ export default function MessageInput({ content, onSelect: handleReferenceSelect, }); + + // Agent mention autocomplete (for workflow agent @-mentions) + const [agentMentionQuery, setAgentMentionQuery] = useState(null); + const [agentMentionSelectedIndex, setAgentMentionSelectedIndex] = useState(0); + const lastCursorRef = useRef(0); + + const filteredAgentMentionCandidates = useMemo(() => { + if (agentMentionQuery === null || !agentMentionCandidates) return []; + return agentMentionCandidates.filter((a) => + a.name.toLowerCase().startsWith(agentMentionQuery.toLowerCase()) + ); + }, [agentMentionCandidates, agentMentionQuery]); + + const showAgentMentionAutocomplete = + agentMentionQuery !== null && filteredAgentMentionCandidates.length > 0; + + // Wrap setContent to detect @-mentions + const handleContentChange = useCallback( + (value: string) => { + // Track cursor position via the textarea ref + const cursor = textareaInputRef.current?.selectionStart ?? value.length; + lastCursorRef.current = cursor; + setContent(value); + + if (agentMentionCandidates && agentMentionCandidates.length > 0) { + const textBeforeCursor = value.slice(0, cursor); + const match = textBeforeCursor.match(/@(\w*)$/); + if (match) { + setAgentMentionQuery(match[1]); + setAgentMentionSelectedIndex(0); + } else { + setAgentMentionQuery(null); + } + } + }, + [setContent, agentMentionCandidates] + ); + + const handleAgentMentionSelect = useCallback( + (name: string) => { + const cursor = textareaInputRef.current?.selectionStart ?? lastCursorRef.current; + const textBeforeCursor = content.slice(0, cursor); + const textAfterCursor = content.slice(cursor); + const match = textBeforeCursor.match(/@(\w*)$/); + if (!match) return; + const start = cursor - match[0].length; + const newValue = content.slice(0, start) + '@' + name + ' ' + textAfterCursor; + setContent(newValue); + setAgentMentionQuery(null); + setAgentMentionSelectedIndex(0); + setTimeout(() => { + if (textareaInputRef.current) { + const newCursor = start + name.length + 2; + textareaInputRef.current.focus(); + textareaInputRef.current.setSelectionRange(newCursor, newCursor); + } + }, 0); + }, + [content, setContent] + ); + + const handleAgentMentionClose = useCallback(() => { + setAgentMentionQuery(null); + setAgentMentionSelectedIndex(0); + }, []); + const agentWorking = isAgentWorking.value; const [queuedForCurrentTurn, setQueuedForCurrentTurn] = useState([]); const [queuedForNextTurn, setQueuedForNextTurn] = useState([]); @@ -265,12 +336,20 @@ export default function MessageInput({ const outgoing = extractOutgoingMessage(); if (!outgoing) return; - // Clear UI + // Save content before clearing so we can restore it if the send fails. + const savedContent = outgoing.content; + + // Clear UI optimistically clearDraft(); clearAttachments(); - // Send message with images - await onSend(outgoing.content, outgoing.images, deliveryMode); + // Send message with images; a boolean false return signals failure + const result = await onSend(savedContent, outgoing.images, deliveryMode); + if (result === false) { + // Restore the draft so the user doesn't lose their message + setContent(savedContent); + return; + } if ( agentWorking || deliveryMode === 'defer' || @@ -285,6 +364,7 @@ export default function MessageInput({ extractOutgoingMessage, clearDraft, clearAttachments, + setContent, onSend, agentWorking, queuedForCurrentTurn.length, @@ -302,6 +382,35 @@ export default function MessageInput({ // Keyboard handler const handleKeyDown = useCallback( (e: KeyboardEvent) => { + // Agent mention autocomplete takes highest precedence when visible + if (showAgentMentionAutocomplete) { + if (e.key === 'ArrowDown') { + e.preventDefault(); + setAgentMentionSelectedIndex((i) => + Math.min(i + 1, filteredAgentMentionCandidates.length - 1) + ); + return; + } + if (e.key === 'ArrowUp') { + e.preventDefault(); + setAgentMentionSelectedIndex((i) => Math.max(i - 1, 0)); + return; + } + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + const candidate = filteredAgentMentionCandidates[agentMentionSelectedIndex]; + if (candidate) { + handleAgentMentionSelect(candidate.name); + } + return; + } + if (e.key === 'Escape') { + e.preventDefault(); + handleAgentMentionClose(); + return; + } + } + // Reference autocomplete takes precedence when visible if (refHandleKeyDown(e)) { return; @@ -333,7 +442,17 @@ export default function MessageInput({ } } }, - [refHandleKeyDown, cmdHandleKeyDown, handleSubmit, agentWorking] + [ + refHandleKeyDown, + cmdHandleKeyDown, + handleSubmit, + agentWorking, + showAgentMentionAutocomplete, + filteredAgentMentionCandidates, + agentMentionSelectedIndex, + handleAgentMentionSelect, + handleAgentMentionClose, + ] ); // Model switch handler @@ -515,21 +634,30 @@ export default function MessageInput({ {/* Input Textarea */} { void handleSubmit('immediate'); }} disabled={disabled} - placeholder={getPlaceholderForSessionType(sessionType)} + placeholder={placeholderProp ?? getPlaceholderForSessionType(sessionType)} + showAgentMentionAutocomplete={showAgentMentionAutocomplete} + agentMentionCandidates={filteredAgentMentionCandidates} + selectedAgentMentionIndex={agentMentionSelectedIndex} + onAgentMentionSelect={handleAgentMentionSelect} + onAgentMentionClose={handleAgentMentionClose} showCommandAutocomplete={ - commandAutocomplete.showAutocomplete && !referenceAutocomplete.showAutocomplete + !showAgentMentionAutocomplete && + commandAutocomplete.showAutocomplete && + !referenceAutocomplete.showAutocomplete } filteredCommands={commandAutocomplete.filteredCommands} selectedCommandIndex={commandAutocomplete.selectedIndex} onCommandSelect={commandAutocomplete.handleSelect} onCommandClose={commandAutocomplete.close} - showReferenceAutocomplete={referenceAutocomplete.showAutocomplete} + showReferenceAutocomplete={ + !showAgentMentionAutocomplete && referenceAutocomplete.showAutocomplete + } referenceResults={referenceAutocomplete.results} selectedReferenceIndex={referenceAutocomplete.selectedIndex} onReferenceSelect={referenceAutocomplete.handleSelect} diff --git a/packages/web/src/components/space/SpaceTaskPane.tsx b/packages/web/src/components/space/SpaceTaskPane.tsx index 45a753233..bddbf7d63 100644 --- a/packages/web/src/components/space/SpaceTaskPane.tsx +++ b/packages/web/src/components/space/SpaceTaskPane.tsx @@ -16,7 +16,7 @@ import { TaskBlockedBanner } from './TaskBlockedBanner'; import { PendingGateBanner } from './PendingGateBanner'; import { PendingCompletionActionBanner } from './PendingCompletionActionBanner'; import { PendingTaskCompletionBanner } from './PendingTaskCompletionBanner'; -import { ThreadedChatComposer } from './ThreadedChatComposer'; +import { TaskSessionChatComposer } from './TaskSessionChatComposer'; import { ReadOnlyWorkflowCanvas } from './ReadOnlyWorkflowCanvas'; import { Dropdown, type DropdownMenuItem } from '../ui/Dropdown'; @@ -471,17 +471,16 @@ export function SpaceTaskPane({ taskId, spaceId, onClose }: SpaceTaskPaneProps)
{showInlineComposer && ( -
- -
+ )}
)} diff --git a/packages/web/src/components/space/TaskSessionChatComposer.tsx b/packages/web/src/components/space/TaskSessionChatComposer.tsx new file mode 100644 index 000000000..e8af431ea --- /dev/null +++ b/packages/web/src/components/space/TaskSessionChatComposer.tsx @@ -0,0 +1,86 @@ +import type { MessageDeliveryMode, MessageImage } from '@neokai/shared'; +import { ChatComposer } from '../ChatComposer.tsx'; +import { useModelSwitcher } from '../../hooks'; + +interface TaskSessionChatComposerProps { + sessionId: string; + mentionCandidates: Array<{ id: string; name: string }>; + hasTaskAgentSession: boolean; + canSend: boolean; + isSending: boolean; + isProcessing: boolean; + errorMessage?: string | null; + onSend: (message: string) => Promise; +} + +export function TaskSessionChatComposer({ + sessionId, + mentionCandidates, + hasTaskAgentSession, + canSend, + isSending, + isProcessing, + errorMessage, + onSend, +}: TaskSessionChatComposerProps) { + const { + currentModel, + currentModelInfo, + availableModels, + switching: modelSwitching, + loading: modelLoading, + switchModel, + } = useModelSwitcher(sessionId); + + // Return the boolean so MessageInput can restore the draft when sending fails + const handleSend = async ( + content: string, + _images?: MessageImage[], + _deliveryMode?: MessageDeliveryMode + ): Promise => { + return onSend(content); + }; + + return ( +
+ {}} + onCoordinatorModeChange={() => {}} + onSandboxModeChange={() => {}} + onSend={handleSend} + onOpenTools={() => {}} + onEnterRewindMode={() => {}} + onExitRewindMode={() => {}} + agentMentionCandidates={mentionCandidates} + inputPlaceholder={ + hasTaskAgentSession ? 'Message task agent...' : 'Message task agent (auto-start)...' + } + errorMessage={errorMessage} + /> +
+ ); +} diff --git a/packages/web/src/components/space/ThreadedChatComposer.tsx b/packages/web/src/components/space/ThreadedChatComposer.tsx deleted file mode 100644 index a29cec828..000000000 --- a/packages/web/src/components/space/ThreadedChatComposer.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { useCallback, useMemo, useRef, useState } from 'preact/hooks'; -import { InputTextarea } from '../InputTextarea'; -import { isAgentWorking } from '../../lib/state.ts'; -import { useInterrupt } from '../../hooks'; -import MentionAutocomplete from './MentionAutocomplete'; - -interface MentionAgent { - id: string; - name: string; -} - -interface ThreadedChatComposerProps { - taskSessionId: string; - mentionCandidates: MentionAgent[]; - hasTaskAgentSession: boolean; - canSend: boolean; - isSending: boolean; - errorMessage?: string | null; - onSend: (message: string) => Promise; -} - -export function ThreadedChatComposer({ - taskSessionId, - mentionCandidates, - hasTaskAgentSession, - canSend, - isSending, - errorMessage, - onSend, -}: ThreadedChatComposerProps) { - const [draft, setDraft] = useState(''); - const [mentionQuery, setMentionQuery] = useState(null); - const [mentionSelectedIndex, setMentionSelectedIndex] = useState(0); - const textareaRef = useRef(null); - const lastCursorRef = useRef(0); - const agentWorking = isAgentWorking.value; - const { handleInterrupt } = useInterrupt({ sessionId: taskSessionId }); - - const mentionAgents = useMemo(() => { - if (mentionQuery === null) return []; - return mentionCandidates.filter((agent) => - agent.name.toLowerCase().startsWith(mentionQuery.toLowerCase()) - ); - }, [mentionCandidates, mentionQuery]); - - const handleDraftChange = useCallback((value: string) => { - const cursor = textareaRef.current?.selectionStart ?? value.length; - lastCursorRef.current = cursor; - setDraft(value); - - const textBeforeCursor = value.slice(0, cursor); - const match = textBeforeCursor.match(/@(\w*)$/); - if (match) { - setMentionQuery(match[1]); - setMentionSelectedIndex(0); - } else { - setMentionQuery(null); - } - }, []); - - const handleMentionSelect = useCallback( - (name: string) => { - if (!textareaRef.current) return; - const textarea = textareaRef.current; - const cursor = textarea.selectionStart ?? lastCursorRef.current; - const textBeforeCursor = draft.slice(0, cursor); - const textAfterCursor = draft.slice(cursor); - const match = textBeforeCursor.match(/@(\w*)$/); - if (!match) return; - const start = cursor - match[0].length; - const newValue = draft.slice(0, start) + '@' + name + ' ' + textAfterCursor; - setDraft(newValue); - setMentionQuery(null); - setMentionSelectedIndex(0); - setTimeout(() => { - if (textareaRef.current) { - const newCursor = start + name.length + 2; - textareaRef.current.focus(); - textareaRef.current.setSelectionRange(newCursor, newCursor); - } - }, 0); - }, - [draft] - ); - - const handleMentionClose = useCallback(() => { - setMentionQuery(null); - setMentionSelectedIndex(0); - }, []); - - const submitDraft = useCallback(async () => { - if (!canSend) return; - const nextMessage = draft.trim(); - if (!nextMessage) return; - const sent = await onSend(nextMessage); - if (sent) { - setDraft(''); - setMentionQuery(null); - setMentionSelectedIndex(0); - } - }, [canSend, draft, onSend]); - - const handleFormSubmit = useCallback( - (e: Event) => { - e.preventDefault(); - void submitDraft(); - }, - [submitDraft] - ); - - return ( -
- {errorMessage && ( -

- {errorMessage} -

- )} -
-
- {mentionQuery !== null && mentionAgents.length > 0 && ( - - )} - { - if (mentionQuery !== null && mentionAgents.length > 0) { - if (e.key === 'ArrowDown') { - e.preventDefault(); - setMentionSelectedIndex((i) => Math.min(i + 1, mentionAgents.length - 1)); - return; - } - if (e.key === 'ArrowUp') { - e.preventDefault(); - setMentionSelectedIndex((i) => Math.max(i - 1, 0)); - return; - } - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - if (mentionAgents[mentionSelectedIndex]) { - handleMentionSelect(mentionAgents[mentionSelectedIndex].name); - } - return; - } - if (e.key === 'Escape') { - e.preventDefault(); - handleMentionClose(); - return; - } - } - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - void submitDraft(); - } - }} - onSubmit={() => { - void submitDraft(); - }} - disabled={isSending} - placeholder={ - hasTaskAgentSession ? 'Message task agent...' : 'Message task agent (auto-start)...' - } - textareaRef={textareaRef} - transparent={true} - isAgentWorking={agentWorking} - onStop={handleInterrupt} - /> -
-
-
- ); -} diff --git a/packages/web/src/components/space/__tests__/TaskSessionChatComposer.test.tsx b/packages/web/src/components/space/__tests__/TaskSessionChatComposer.test.tsx new file mode 100644 index 000000000..fcc459723 --- /dev/null +++ b/packages/web/src/components/space/__tests__/TaskSessionChatComposer.test.tsx @@ -0,0 +1,129 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import { cleanup, render } from '@testing-library/preact'; +import type { ChatComposerProps } from '../../ChatComposer'; + +// Mock useModelSwitcher — avoids real WebSocket/RPC calls in unit tests +vi.mock('../../../hooks', () => ({ + useModelSwitcher: () => ({ + currentModel: 'claude-sonnet-4-6', + currentModelInfo: null, + availableModels: [], + switching: false, + loading: false, + switchModel: vi.fn(async () => {}), + }), +})); + +// Mock ChatComposer — it depends on MessageInput, SessionStatusBar, and other +// components that require WebSocket connections and complex browser APIs. +// Capture the props passed to it so tests can inspect them. +let lastChatComposerProps: ChatComposerProps | null = null; +vi.mock('../../ChatComposer', () => ({ + ChatComposer: (props: ChatComposerProps) => { + lastChatComposerProps = props; + return ( +
+ ); + }, +})); + +import { TaskSessionChatComposer } from '../TaskSessionChatComposer'; + +const mentionCandidates = [ + { id: 'a1', name: 'Coder' }, + { id: 'a2', name: 'Reviewer' }, +]; + +function renderComposer(overrides: Partial[0]> = {}) { + const onSend = vi.fn().mockResolvedValue(true); + const view = render( + + ); + return { ...view, onSend }; +} + +describe('TaskSessionChatComposer', () => { + beforeEach(() => { + cleanup(); + lastChatComposerProps = null; + }); + + afterEach(() => { + cleanup(); + }); + + it('renders the wrapper with correct data-testid', () => { + const { getByTestId } = renderComposer(); + expect(getByTestId('task-session-chat-composer')).toBeTruthy(); + }); + + it('renders the inner ChatComposer', () => { + const { getByTestId } = renderComposer(); + expect(getByTestId('mock-chat-composer')).toBeTruthy(); + }); + + it('passes sessionId to ChatComposer', () => { + renderComposer({ sessionId: 'my-session' }); + expect(lastChatComposerProps?.sessionId).toBe('my-session'); + }); + + it('passes agentMentionCandidates to ChatComposer', () => { + renderComposer(); + expect(lastChatComposerProps?.agentMentionCandidates).toEqual(mentionCandidates); + }); + + it('passes errorMessage to ChatComposer when provided', () => { + renderComposer({ errorMessage: 'Something went wrong' }); + expect(lastChatComposerProps?.errorMessage).toBe('Something went wrong'); + }); + + it('passes null errorMessage to ChatComposer when not provided', () => { + renderComposer({ errorMessage: null }); + expect(lastChatComposerProps?.errorMessage).toBeNull(); + }); + + it('disables input when canSend is false', () => { + renderComposer({ canSend: false, isSending: false }); + expect(lastChatComposerProps?.isWaitingForInput).toBe(true); + }); + + it('disables input when isSending is true', () => { + renderComposer({ canSend: true, isSending: true }); + expect(lastChatComposerProps?.isWaitingForInput).toBe(true); + }); + + it('enables input when canSend is true and not sending', () => { + renderComposer({ canSend: true, isSending: false }); + expect(lastChatComposerProps?.isWaitingForInput).toBe(false); + }); + + it('uses task agent session placeholder when hasTaskAgentSession is true', () => { + renderComposer({ hasTaskAgentSession: true }); + expect(lastChatComposerProps?.inputPlaceholder).toBe('Message task agent...'); + }); + + it('uses auto-start placeholder when hasTaskAgentSession is false', () => { + renderComposer({ hasTaskAgentSession: false }); + expect(lastChatComposerProps?.inputPlaceholder).toBe('Message task agent (auto-start)...'); + }); + + it('forwards isProcessing to ChatComposer', () => { + renderComposer({ isProcessing: true }); + expect(lastChatComposerProps?.isProcessing).toBe(true); + }); +}); diff --git a/packages/web/src/components/space/__tests__/ThreadedChatComposer.test.tsx b/packages/web/src/components/space/__tests__/ThreadedChatComposer.test.tsx deleted file mode 100644 index 3134ab024..000000000 --- a/packages/web/src/components/space/__tests__/ThreadedChatComposer.test.tsx +++ /dev/null @@ -1,143 +0,0 @@ -// @ts-nocheck -import { signal } from '@preact/signals'; -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { cleanup, fireEvent, render, waitFor } from '@testing-library/preact'; - -const mockAgentWorking = signal(false); -const mockHandleInterrupt = vi.fn(async () => {}); - -vi.mock('../../../lib/state.ts', () => ({ - get isAgentWorking() { - return { - get value() { - return mockAgentWorking.value; - }, - }; - }, -})); - -vi.mock('../../../hooks', () => ({ - useInterrupt: () => ({ - interrupting: false, - handleInterrupt: mockHandleInterrupt, - }), -})); - -import { ThreadedChatComposer } from '../ThreadedChatComposer'; - -const mentionCandidates = [ - { id: 'a1', name: 'Coder' }, - { id: 'a2', name: 'Reviewer' }, -]; - -function renderComposer(overrides: Partial[0]> = {}) { - const onSend = vi.fn().mockResolvedValue(true); - const view = render( - - ); - return { ...view, onSend }; -} - -function setTextareaValue(textarea: HTMLTextAreaElement, value: string) { - Object.defineProperty(textarea, 'selectionStart', { - get: () => value.length, - configurable: true, - }); - fireEvent.input(textarea, { target: { value } }); -} - -describe('ThreadedChatComposer', () => { - beforeEach(() => { - cleanup(); - mockAgentWorking.value = false; - mockHandleInterrupt.mockClear(); - }); - - afterEach(() => { - cleanup(); - }); - - it('renders MessageInput-style send button and session placeholder', () => { - const { getByPlaceholderText, getByTestId } = renderComposer(); - expect(getByPlaceholderText('Message task agent...')).toBeTruthy(); - expect(getByTestId('send-button')).toBeTruthy(); - }); - - it('renders auto-ensure placeholder when no task session exists', () => { - const { getByPlaceholderText } = renderComposer({ hasTaskAgentSession: false }); - expect(getByPlaceholderText('Message task agent (auto-start)...')).toBeTruthy(); - }); - - it('submits with send button and clears draft on success', async () => { - const { getByPlaceholderText, getByTestId, onSend } = renderComposer(); - const textarea = getByPlaceholderText('Message task agent...') as HTMLTextAreaElement; - - setTextareaValue(textarea, 'Ship it'); - fireEvent.click(getByTestId('send-button')); - - await waitFor(() => expect(onSend).toHaveBeenCalledWith('Ship it')); - await waitFor(() => expect(textarea.value).toBe('')); - }); - - it('does not clear draft when send returns false', async () => { - const onSend = vi.fn().mockResolvedValue(false); - const { getByPlaceholderText, getByTestId } = renderComposer({ onSend }); - const textarea = getByPlaceholderText('Message task agent...') as HTMLTextAreaElement; - - setTextareaValue(textarea, 'Needs retry'); - fireEvent.click(getByTestId('send-button')); - - await waitFor(() => expect(onSend).toHaveBeenCalledWith('Needs retry')); - expect(textarea.value).toBe('Needs retry'); - }); - - it('uses Enter to select mention when mention list is open', async () => { - const { getByPlaceholderText, getByTestId, queryByTestId, onSend } = renderComposer(); - const textarea = getByPlaceholderText('Message task agent...') as HTMLTextAreaElement; - - setTextareaValue(textarea, '@Co'); - await waitFor(() => expect(getByTestId('mention-autocomplete')).toBeTruthy()); - - fireEvent.keyDown(textarea, { key: 'Enter' }); - await waitFor(() => expect(queryByTestId('mention-autocomplete')).toBeNull()); - expect(textarea.value).toContain('@Coder'); - expect(onSend).not.toHaveBeenCalled(); - }); - - it('does not submit on Shift+Enter', () => { - const { getByPlaceholderText, onSend } = renderComposer(); - const textarea = getByPlaceholderText('Message task agent...'); - - setTextareaValue(textarea as HTMLTextAreaElement, 'line one'); - fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true }); - expect(onSend).not.toHaveBeenCalled(); - }); - - it('should show stop button when agent is working and textarea is empty', () => { - mockAgentWorking.value = true; - const { getByTestId, queryByTestId } = renderComposer(); - - expect(getByTestId('stop-button')).toBeTruthy(); - expect(queryByTestId('send-button')).toBeNull(); - }); - - it('should show send button when agent is working but has content', () => { - mockAgentWorking.value = true; - const { getByPlaceholderText, getByTestId, queryByTestId } = renderComposer(); - const textarea = getByPlaceholderText('Message task agent...') as HTMLTextAreaElement; - - setTextareaValue(textarea, 'Queued follow-up'); - - expect(getByTestId('send-button')).toBeTruthy(); - expect(queryByTestId('stop-button')).toBeNull(); - }); -});