import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-ui/core' import { ComposerPrimitive, useAui, useAuiState } from '@assistant-ui/react' import { useStore } from '@nanostores/react' import { type ClipboardEvent, type FormEvent, type KeyboardEvent, type DragEvent as ReactDragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { hermesDirectiveFormatter, type SlashChipKind } from '@/components/assistant-ui/directive-text' import { composerFill, composerSurfaceGlass } from '@/components/chat/composer-dock' import { Button } from '@/components/ui/button' import { useMediaQuery } from '@/hooks/use-media-query' import { useResizeObserver } from '@/hooks/use-resize-observer' import { useI18n } from '@/i18n' import { chatMessageText } from '@/lib/chat-messages' import { SLASH_COMMAND_RE } from '@/lib/chat-runtime' import { desktopSlashCommandTakesArgs } from '@/lib/desktop-slash-commands' import { DATA_IMAGE_URL_RE } from '@/lib/embedded-images' import { triggerHaptic } from '@/lib/haptics' import { cn } from '@/lib/utils' import { $composerAttachments, clearComposerAttachments, clearSessionDraft, type ComposerAttachment, stashSessionDraft, takeSessionDraft } from '@/store/composer' import { browseBackward, browseForward, deriveUserHistory, isBrowsingHistory, resetBrowseState } from '@/store/composer-input-history' import { $queuedPromptsBySession, enqueueQueuedPrompt, MAX_AUTO_DRAIN_ATTEMPTS, migrateQueuedPrompts, promoteQueuedPrompt, type QueuedPromptEntry, removeQueuedPrompt, shouldAutoDrain, updateQueuedPrompt } from '@/store/composer-queue' import { $statusItemsBySession } from '@/store/composer-status' import { notify } from '@/store/notifications' import { $gatewayState, $messages, setSessionPickerOpen } from '@/store/session' import { $threadScrolledUp } from '@/store/thread-scroll' import { useTheme } from '@/themes' import { extractDroppedFiles, HERMES_PATHS_MIME, partitionDroppedFiles } from '../hooks/use-composer-actions' import { AttachmentList } from './attachments' import { ContextMenu } from './context-menu' import { ComposerControls } from './controls' import { COMPOSER_DROP_ACTIVE_CLASS, COMPOSER_DROP_FADE_CLASS } from './drop-affordance' import { type ComposerInsertMode, focusComposerInput, markActiveComposer, onComposerFocusRequest, onComposerInsertRefsRequest, onComposerInsertRequest } from './focus' import { HelpHint } from './help-hint' import { useAtCompletions } from './hooks/use-at-completions' import { useSlashCompletions } from './hooks/use-slash-completions' import { useVoiceConversation } from './hooks/use-voice-conversation' import { useVoiceRecorder } from './hooks/use-voice-recorder' import { dragHasAttachments, droppedFileInlineRefs, type InlineRefInput, insertInlineRefsIntoEditor } from './inline-refs' import { QueuePanel } from './queue-panel' import { composerPlainText, deleteSelectionInEditor, insertPlainTextAtCaret, normalizeComposerEditorDom, placeCaretEnd, refChipElement, renderComposerContents, RICH_INPUT_SLOT, slashChipElement } from './rich-editor' import { ComposerStatusStack } from './status-stack' import { detectTrigger, extractClipboardImageBlobs, textBeforeCaret, type TriggerState } from './text-utils' import { ComposerTriggerPopover } from './trigger-popover' import type { ChatBarProps } from './types' import { UrlDialog } from './url-dialog' import { VoiceActivity, VoicePlaybackActivity } from './voice-activity' const COMPOSER_STACK_BREAKPOINT_PX = 320 // A single editor line is ~28px (--composer-input-min-height 1.625rem + 0.5rem // vertical padding). Anything taller means the text wrapped to a second line, // which is when the composer should expand to the stacked layout. const COMPOSER_SINGLE_LINE_MAX_PX = 36 const COMPOSER_FADE_BACKGROUND = 'linear-gradient(to bottom, transparent, color-mix(in srgb, var(--dt-background) 10%, transparent))' const pickPlaceholder = (pool: readonly string[]) => pool[Math.floor(Math.random() * pool.length)] /** Completion items can carry an `action` (set in use-slash-completions) that * runs a side effect on pick instead of inserting a chip — e.g. the session * picker's "Browse all…" entry opens the overlay. Table-driven so new action * items are a registry row, not a composer branch. */ const COMPLETION_ACTIONS: Record void> = { 'session-picker': () => setSessionPickerOpen(true) } /** Map a picked `/` completion to its pill accent. Driven by the completion * group set in use-slash-completions (Skills / Themes / Commands|Options). */ function slashChipKindForItem(item: Unstable_TriggerItem): SlashChipKind { const group = (item.metadata as { group?: unknown } | undefined)?.group if (group === 'Skills') { return 'skill' } if (group === 'Themes') { return 'theme' } return 'command' } /** A `/` query is at its arg stage once it's past the command name. */ const slashArgStage = (query: string) => query.includes(' ') /** The `/command` token of a slash query (`personality x` → `/personality`). */ const slashCommandToken = (query: string) => `/${query.split(/\s+/, 1)[0]?.toLowerCase() ?? ''}` interface QueueEditState { attachments: ComposerAttachment[] draft: string entryId: string sessionKey: string } const cloneAttachments = (attachments: ComposerAttachment[]) => attachments.map(a => ({ ...a })) // Quiet period after the last keystroke before persisting the draft; // unmount/pagehide flushes bypass it. const DRAFT_PERSIST_DEBOUNCE_MS = 400 export function ChatBar({ busy, cwd, disabled, focusKey, gateway, maxRecordingSeconds = 120, queueSessionKey, sessionId, state, onCancel, onAddUrl, onAttachDroppedItems, onAttachImageBlob, onPasteClipboardImage, onPickFiles, onPickFolders, onPickImages, onRemoveAttachment, onSteer, onSubmit, onTranscribeAudio }: ChatBarProps) { const aui = useAui() const draft = useAuiState(s => s.composer.text) const attachments = useStore($composerAttachments) const queuedPromptsBySession = useStore($queuedPromptsBySession) const statusItemsBySession = useStore($statusItemsBySession) const scrolledUp = useStore($threadScrolledUp) const activeQueueSessionKey = queueSessionKey || sessionId || null const queuedPrompts = useMemo( () => (activeQueueSessionKey ? (queuedPromptsBySession[activeQueueSessionKey] ?? []) : []), [activeQueueSessionKey, queuedPromptsBySession] ) // Status items (subagents, background processes) are keyed by the RUNTIME // session id — gateway events and process.list both speak that id. Only the // queue uses the stored-session fallback key (prompts can queue pre-resume). const statusSessionId = sessionId ?? null const statusStackVisible = useMemo( () => queuedPrompts.length > 0 || (statusSessionId ? (statusItemsBySession[statusSessionId]?.length ?? 0) > 0 : false), [queuedPrompts.length, statusItemsBySession, statusSessionId] ) const composerRef = useRef(null) const composerSurfaceRef = useRef(null) const editorRef = useRef(null) const draftRef = useRef(draft) const pendingDraftPersistRef = useRef<{ scope: string | null; text: string } | null>(null) const activeQueueSessionKeyRef = useRef(activeQueueSessionKey) activeQueueSessionKeyRef.current = activeQueueSessionKey const prevQueueKeyRef = useRef(activeQueueSessionKey) const drainingQueueRef = useRef(false) // Per-entry auto-drain failure counts; bounds retries so a persistent 404 // can't spin-loop. Cleared on success; reset naturally on remount/reconnect. const drainFailuresRef = useRef(new Map()) const urlInputRef = useRef(null) const [urlOpen, setUrlOpen] = useState(false) const [urlValue, setUrlValue] = useState('') const [expanded, setExpanded] = useState(false) const [voiceConversationActive, setVoiceConversationActive] = useState(false) const [tight, setTight] = useState(false) const [dragActive, setDragActive] = useState(false) const [queueEdit, setQueueEdit] = useState(null) const [focusRequestId, setFocusRequestId] = useState(0) const queueEditRef = useRef(queueEdit) queueEditRef.current = queueEdit const dragDepthRef = useRef(0) const composingRef = useRef(false) // true during IME composition (CJK input) const lastSpokenIdRef = useRef(null) const narrow = useMediaQuery('(max-width: 30rem)') const { availableThemes, themeName } = useTheme() const at = useAtCompletions({ gateway: gateway ?? null, sessionId: sessionId ?? null, cwd: cwd ?? null }) const slash = useSlashCompletions({ activeSkin: themeName, gateway: gateway ?? null, skinThemes: availableThemes }) const stacked = expanded || narrow || tight const trimmedDraft = draft.trim() const hasComposerPayload = trimmedDraft.length > 0 || attachments.length > 0 const canSubmit = busy || hasComposerPayload const editingQueuedPrompt = queueEdit ? (queuedPrompts.find(entry => entry.id === queueEdit.entryId) ?? null) : null const busyAction = busy && hasComposerPayload ? 'queue' : 'stop' // Steer only makes sense mid-turn, text-only (the gateway can't carry images // into a tool result) and never for a slash command (those execute inline). const canSteer = busy && !!onSteer && attachments.length === 0 && trimmedDraft.length > 0 && !SLASH_COMMAND_RE.test(trimmedDraft) const showHelpHint = draft === '?' const { t } = useI18n() const gatewayState = useStore($gatewayState) const newSessionPlaceholders = t.composer.newSessionPlaceholders const followUpPlaceholders = t.composer.followUpPlaceholders const reconnecting = gatewayState === 'closed' || gatewayState === 'error' const inputDisabled = disabled && !reconnecting // Resting placeholder: a starter for brand-new sessions, a continuation for // existing ones. Picked once and only re-rolled when we genuinely move to a // *different* conversation. Critically, the first id assignment of a freshly // started session (null → id, on the first send) is treated as the same // conversation so the placeholder doesn't visibly flip mid-stream. const [restingPlaceholder, setRestingPlaceholder] = useState(() => pickPlaceholder(sessionId ? followUpPlaceholders : newSessionPlaceholders) ) const prevSessionIdRef = useRef(sessionId) useEffect(() => { const prev = prevSessionIdRef.current prevSessionIdRef.current = sessionId if (prev === sessionId) { return } // null → id: the new session we're already in just got persisted. Keep the // starter we showed instead of swapping to a follow-up under the user. if (prev == null && sessionId) { return } resetBrowseState(prev) setRestingPlaceholder(pickPlaceholder(sessionId ? followUpPlaceholders : newSessionPlaceholders)) }, [followUpPlaceholders, newSessionPlaceholders, sessionId]) // When the transport is disabled it's because the gateway isn't open. // Distinguish a cold start ("Starting Hermes...") from a dropped connection // we're trying to restore. During reconnect, keep the textbox editable so a // flaky network doesn't block drafting; only submit/backend actions stay // disabled until the gateway is open again. const placeholder = disabled ? reconnecting ? t.composer.placeholderReconnecting : t.composer.placeholderStarting : restingPlaceholder const focusInput = useCallback(() => { focusComposerInput(editorRef.current) markActiveComposer('main') }, []) const requestMainFocus = useCallback(() => { setFocusRequestId(id => id + 1) }, []) const appendExternalText = useCallback( (text: string, mode: ComposerInsertMode) => { const value = text.trim() if (!value) { return } const base = mode === 'inline' ? draftRef.current.trimEnd() : draftRef.current const sep = mode === 'inline' ? (base ? ' ' : '') : base && !base.endsWith('\n') ? '\n\n' : '' const next = `${base}${sep}${value}` draftRef.current = next aui.composer().setText(next) const editor = editorRef.current if (editor) { renderComposerContents(editor, next) placeCaretEnd(editor) } setFocusRequestId(id => id + 1) }, [aui] ) useEffect(() => { if (!inputDisabled) { focusInput() } }, [focusInput, focusKey, focusRequestId, inputDisabled]) useEffect(() => { if (inputDisabled) { return undefined } const offFocus = onComposerFocusRequest(target => { if (target === 'main') { setFocusRequestId(id => id + 1) } }) const offInsert = onComposerInsertRequest(({ mode, target, text }) => { if (target === 'main') { appendExternalText(text, mode) } }) return () => { offFocus() offInsert() } }, [appendExternalText, inputDisabled]) // Keep draftRef in sync with the assistant-ui composer state for callers // that read the latest text outside the React render cycle. We don't push // to `$composerDraft` per keystroke any more — nobody outside the composer // subscribes to it (verified by grep), and the round-trip // `setText` ⇄ `subscribe` ⇄ `setText` was adding two useEffects to the per- // keystroke critical path. `reconcileComposerTerminalSelections` only // matters when the draft is submitted; we now call it from the submit // path instead. useEffect(() => { draftRef.current = draft const editor = editorRef.current if (editor && document.activeElement !== editor && composerPlainText(editor) !== draft) { renderComposerContents(editor, draft) } }, [draft]) useEffect(() => { if (urlOpen) { window.requestAnimationFrame(() => urlInputRef.current?.focus({ preventScroll: true })) } }, [urlOpen]) // Expansion (input on its own full-width row, controls below) is driven by // the editor's *actual* rendered height via the ResizeObserver in // syncComposerMetrics — it only fires when the text genuinely wraps to a // second line, so the layout flips exactly at the wrap point rather than at // a guessed character count. We only handle the two cases the observer // can't: an explicit newline (expand before layout settles) and an emptied // draft (collapse back). We never read scrollHeight per keystroke. useEffect(() => { if (!draft) { setExpanded(false) return } if (expanded) { return } if (draft.includes('\n')) { setExpanded(true) } }, [draft, expanded]) // Bucket measured heights so we only invalidate the global CSS var when // the size crosses a meaningful threshold. Without bucketing, the editor // grows ~1px per character → setProperty fires every keystroke → entire // tree's computed style is invalidated → next paint forces a full // recalculate-style pass. With an 8px bucket, the invalidation rate drops // ~8× and small char-by-char typing produces no style invalidation at all // until a wrap or row change actually happens. const lastBucketedHeightRef = useRef(0) const lastBucketedSurfaceHeightRef = useRef(0) const lastTightRef = useRef(null) const syncComposerMetrics = useCallback(() => { const composer = composerRef.current if (!composer) { return } const { height, width } = composer.getBoundingClientRect() const surfaceHeight = composerSurfaceRef.current?.getBoundingClientRect().height const root = document.documentElement if (width > 0) { const nextTight = width < COMPOSER_STACK_BREAKPOINT_PX if (nextTight !== lastTightRef.current) { lastTightRef.current = nextTight setTight(nextTight) } } // Expand once the input has actually wrapped past a single line. The // observer only fires on real size changes, so this reads scrollHeight at // most once per wrap (not per keystroke). One line ≈ 28px (1.625rem // min-height + padding); a second line clears ~36px. We only ever expand // here — collapse is handled by the emptied-draft effect to avoid // oscillating across the wrap boundary as the input switches widths. const editor = editorRef.current if (editor && editor.scrollHeight > COMPOSER_SINGLE_LINE_MAX_PX) { setExpanded(true) } if (height > 0) { const bucket = Math.round(height / 8) * 8 if (bucket !== lastBucketedHeightRef.current) { lastBucketedHeightRef.current = bucket root.style.setProperty('--composer-measured-height', `${bucket}px`) } } if (surfaceHeight && surfaceHeight > 0) { const bucket = Math.round(surfaceHeight / 8) * 8 if (bucket !== lastBucketedSurfaceHeightRef.current) { lastBucketedSurfaceHeightRef.current = bucket root.style.setProperty('--composer-surface-measured-height', `${bucket}px`) } } }, []) useResizeObserver(syncComposerMetrics, composerRef, composerSurfaceRef, editorRef) useEffect(() => { return () => { const root = document.documentElement root.style.removeProperty('--composer-measured-height') root.style.removeProperty('--composer-surface-measured-height') } }, []) const insertText = (text: string) => { const currentDraft = draftRef.current const sep = currentDraft && !currentDraft.endsWith('\n') ? '\n' : '' const nextDraft = `${currentDraft}${sep}${text}` draftRef.current = nextDraft aui.composer().setText(nextDraft) // Push the new text into the contentEditable editor directly. Setting the // assistant-ui composer state alone is not enough: the draft→editor sync // effect only re-renders the editor when it is NOT focused // (document.activeElement !== editor), and the dictation/insert paths // typically run while the editor has (or immediately regains) focus — so // the store would hold the text but the visible editor would stay empty // and there'd be nothing to send. Mirror appendExternalText here. const editor = editorRef.current if (editor) { renderComposerContents(editor, nextDraft) placeCaretEnd(editor) } requestMainFocus() } const insertInlineRefs = (refs: InlineRefInput[]) => { const editor = editorRef.current if (!editor) { return false } const nextDraft = insertInlineRefsIntoEditor(editor, refs) if (nextDraft === null) { return false } draftRef.current = nextDraft aui.composer().setText(nextDraft) requestMainFocus() return true } // Latest-closure ref so the (once-only) subscription always calls the current // insertInlineRefs without re-subscribing every render. const insertInlineRefsRef = useRef(insertInlineRefs) insertInlineRefsRef.current = insertInlineRefs useEffect(() => { return onComposerInsertRefsRequest(({ refs, target }) => { if (target === 'main') { insertInlineRefsRef.current(refs) } }) }, []) const [trigger, setTrigger] = useState(null) const [triggerActive, setTriggerActive] = useState(0) const [triggerItems, setTriggerItems] = useState([]) // Set synchronously in keydown when the open trigger popover consumes a // navigation/control key (Arrow/Enter/Tab/Escape). The subsequent keyup must // NOT run refreshTrigger for that keypress: it never edits text, and for // Escape the keydown has already set trigger=null, so a keyup refresh would // re-detect the still-present `/` and instantly reopen the menu. A ref is // used instead of reading `trigger` in keyup because by keyup time React has // re-rendered and the handler closure sees the post-keydown state. const triggerKeyConsumedRef = useRef(false) const refreshTrigger = useCallback(() => { const editor = editorRef.current if (!editor) { return } // Fast-bail: if neither `@` nor `/` appears in the current draft, there's // nothing for `detectTrigger` to match. Use `textContent` (cheap browser- // native walk) for the precondition check rather than `composerPlainText` // (recursive child walk with chip-aware logic). Only when a trigger char // is present do we pay the cost of the full walk + DOM range work. const rawText = editor.textContent ?? '' if (!rawText.includes('@') && !rawText.includes('/')) { if (trigger) { setTrigger(null) setTriggerActive(0) } return } const before = textBeforeCaret(editor) const found = detectTrigger(before ?? composerPlainText(editor)) // The arg-stage popover is only useful for commands with an options screen. // For a no-arg command it would dead-end on "No matches", so drop it — the // directive is already complete. const detected = found?.kind === '/' && slashArgStage(found.query) && !desktopSlashCommandTakesArgs(slashCommandToken(found.query)) ? null : found setTrigger(detected) // Only reset the highlight when the trigger actually changed (opened, or // the query/kind differs). Re-detecting the *same* trigger — e.g. on a // caret move (mouseup) or a stray refresh — must preserve the user's // current selection instead of snapping back to the first item. if (detected?.kind !== trigger?.kind || detected?.query !== trigger?.query) { setTriggerActive(0) } }, [trigger]) // Pull the live contentEditable text into draftRef + the AUI composer state // (which drives `hasComposerPayload` → the send button). Shared by the input // and compositionend paths so committed IME text reaches state through either. const flushEditorToDraft = (editor: HTMLDivElement) => { normalizeComposerEditorDom(editor) const nextDraft = composerPlainText(editor) if (nextDraft !== draftRef.current) { draftRef.current = nextDraft aui.composer().setText(nextDraft) } window.setTimeout(refreshTrigger, 0) } const handleEditorInput = (event: FormEvent) => { // During IME composition the DOM contains uncommitted preedit text // mixed with real content. Skip state writes — compositionend flushes // the finalized text (see onCompositionEnd). if (composingRef.current) { return } flushEditorToDraft(event.currentTarget) } const handlePaste = (event: ClipboardEvent) => { const imageBlobs = extractClipboardImageBlobs(event.clipboardData) if (imageBlobs.length > 0) { event.preventDefault() if (onAttachImageBlob) { triggerHaptic('selection') for (const blob of imageBlobs) { void onAttachImageBlob(blob) } } return } // Trim surrounding whitespace so a copy that dragged along leading/trailing // blank lines (common when selecting from terminals, code blocks, web pages) // doesn't dump multiline padding into the composer. Internal newlines are // preserved — only the edges are cleaned up. const pastedText = event.clipboardData.getData('text').trim() if (!pastedText) { event.preventDefault() return } if (DATA_IMAGE_URL_RE.test(pastedText)) { event.preventDefault() return } event.preventDefault() insertPlainTextAtCaret(event.currentTarget, pastedText) flushEditorToDraft(event.currentTarget) } const triggerAdapter: Unstable_TriggerAdapter | null = trigger?.kind === '@' ? at.adapter : trigger?.kind === '/' ? slash.adapter : null useEffect(() => { if (!trigger || !triggerAdapter?.search) { setTriggerItems([]) return } setTriggerItems(triggerAdapter.search(trigger.query)) }, [trigger, triggerAdapter]) const triggerLoading = trigger?.kind === '@' ? at.loading : trigger?.kind === '/' ? slash.loading : false // Suppress the "No matches" empty state once a slash command is past its name: // a no-arg command has nothing to offer, and a fully-typed arg commits on // Space/Tab — neither should dead-end on a popover. const argStageEmpty = trigger?.kind === '/' && slashArgStage(trigger.query) && !triggerLoading && !triggerItems.length const closeTrigger = () => { setTrigger(null) setTriggerItems([]) setTriggerActive(0) } useEffect(() => { setTriggerActive(idx => Math.min(idx, Math.max(0, triggerItems.length - 1))) }, [triggerItems.length]) // Commit the literally-typed `/command arg` as a directive chip — used when // the completion list is empty because the arg is already fully typed (the // backend completer drops exact matches). Reuses the chip path via a // synthetic item whose serialized form is the verbatim text. const commitTypedSlashDirective = () => { if (trigger?.kind !== '/') { return } const text = `/${trigger.query.trimEnd()}` replaceTriggerWithChip({ id: text, type: 'slash', label: text.slice(1), metadata: { command: slashCommandToken(trigger.query), display: text, meta: '', group: '', action: '', rawText: text } }) } const replaceTriggerWithChip = (item: Unstable_TriggerItem) => { const editor = editorRef.current if (!editor || !trigger) { return } // Action items (e.g. "Browse all sessions…") run a side effect instead of // inserting a chip: strip the typed trigger token, then fire the action. const completionAction = (item.metadata as { action?: unknown } | undefined)?.action const runAction = typeof completionAction === 'string' ? COMPLETION_ACTIONS[completionAction] : undefined if (runAction) { const current = composerPlainText(editor) const prefix = current.slice(0, Math.max(0, current.length - trigger.tokenLength)) renderComposerContents(editor, prefix) placeCaretEnd(editor) draftRef.current = composerPlainText(editor) aui.composer().setText(draftRef.current) closeTrigger() runAction() requestMainFocus() return } const serialized = hermesDirectiveFormatter.serialize(item) const starter = serialized.endsWith(':') // Picking a bare arg-taking command (e.g. `/personality`) shouldn't commit // it — expand to its options step so the popover shows the inline list, just // as typing `/personality ` by hand would. A serialized value with a space is // already an arg pick (`/personality alice`), so it commits normally. const command = (item.metadata as { command?: string } | undefined)?.command ?? '' const expandsToArgs = trigger.kind === '/' && !serialized.includes(' ') && desktopSlashCommandTakesArgs(command) const text = starter || serialized.endsWith(' ') ? serialized : `${serialized} ` const directive = !starter && serialized.match(/^@([^:]+):(.+)$/) // No pill while expanding — the bare command stays plain text until an arg // is picked, at which point a single pill is emitted for the full command. const slashKind = !expandsToArgs && trigger.kind === '/' ? slashChipKindForItem(item) : null const keepTriggerOpen = starter || expandsToArgs const finish = () => { draftRef.current = composerPlainText(editor) aui.composer().setText(draftRef.current) requestMainFocus() keepTriggerOpen ? window.setTimeout(refreshTrigger, 0) : closeTrigger() } const sel = window.getSelection() const range = sel?.rangeCount ? sel.getRangeAt(0) : null const node = range?.startContainer const offset = range?.startOffset ?? 0 if (!sel || !range || node?.nodeType !== Node.TEXT_NODE || offset < trigger.tokenLength) { const current = composerPlainText(editor) const prefix = current.slice(0, Math.max(0, current.length - trigger.tokenLength)) if (slashKind) { // Two-step arg picks (e.g. `/handoff` pill already inserted, now picking // the platform) land here because the caret sits past a contenteditable // chip. Rebuild the prefix and re-emit a single pill for the full command. renderComposerContents(editor, prefix) editor.append(slashChipElement(serialized, slashKind), document.createTextNode(' ')) placeCaretEnd(editor) return finish() } renderComposerContents(editor, `${prefix}${text}`) placeCaretEnd(editor) return finish() } const replaceRange = document.createRange() replaceRange.setStart(node, offset - trigger.tokenLength) replaceRange.setEnd(node, offset) replaceRange.deleteContents() const chip = slashKind ? slashChipElement(serialized, slashKind) : directive ? refChipElement(directive[1], directive[2]) : null if (chip) { const space = document.createTextNode(' ') const fragment = document.createDocumentFragment() fragment.append(chip, space) replaceRange.insertNode(fragment) const caret = document.createRange() caret.setStart(space, 1) caret.collapse(true) sel.removeAllRanges() sel.addRange(caret) return finish() } document.execCommand('insertText', false, text) finish() } const handleEditorKeyDown = (event: KeyboardEvent) => { // IME composition: Enter confirms composed text, not a message submission. // We check both composingRef (set by compositionstart/compositionend, robust // across browsers) and nativeEvent.isComposing (Chromium fallback). Without // this guard, pressing Enter to finalise a Korean/Japanese/Chinese IME // preedit fires submitDraft() and splits the message mid-word. if (composingRef.current || event.nativeEvent.isComposing) { return } // Non-collapsed Backspace/Delete: native selection-delete is ~O(n²) on large // drafts (Ctrl+A → Delete froze ~1.3s). Collapsed carets fall through. if ( (event.key === 'Backspace' || event.key === 'Delete') && deleteSelectionInEditor(event.currentTarget) ) { event.preventDefault() flushEditorToDraft(event.currentTarget) return } // Cmd/Ctrl+Shift+K drains the next queued message. Plain Cmd/Ctrl+K is // reserved for the global command palette. if ((event.metaKey || event.ctrlKey) && !event.altKey && event.shiftKey && event.key.toLowerCase() === 'k') { event.preventDefault() if (!busy) { void drainNextQueued() } return } if (trigger && triggerItems.length > 0) { if (event.key === 'ArrowDown') { event.preventDefault() triggerKeyConsumedRef.current = true setTriggerActive(idx => (idx + 1) % triggerItems.length) return } if (event.key === 'ArrowUp') { event.preventDefault() triggerKeyConsumedRef.current = true setTriggerActive(idx => (idx - 1 + triggerItems.length) % triggerItems.length) return } // Enter / Tab / Space all accept the highlighted item: a no-arg command // commits its directive chip, an arg-taking command expands to its // options step, and an arg option commits the full `/cmd arg` chip. Space // is slash-only (an `@` mention takes a literal space) and gated to a // non-empty query so a bare `/ ` still types a space. const acceptOnSpace = event.key === ' ' && trigger.kind === '/' && Boolean(trigger.query.trim()) const accept = event.key === 'Enter' || event.key === 'Tab' || acceptOnSpace if (accept) { event.preventDefault() triggerKeyConsumedRef.current = true const item = triggerItems[triggerActive] if (item) { replaceTriggerWithChip(item) } return } if (event.key === 'Escape') { event.preventDefault() triggerKeyConsumedRef.current = true closeTrigger() return } } // Arg stage with nothing left to suggest — a fully-typed arg the backend // completer no longer echoes (it drops the exact match), e.g. // `/personality creative`. Space/Tab still commit what's typed as a single // directive chip; Enter falls through to submit (send it as-is). if ( trigger?.kind === '/' && !triggerItems.length && (event.key === ' ' || event.key === 'Tab') && slashArgStage(trigger.query) && trigger.query.trim() ) { event.preventDefault() triggerKeyConsumedRef.current = true commitTypedSlashDirective() return } // ArrowUp/ArrowDown navigate, in priority order: the queue (edit entries in // place) then sent-message history. The history ring is derived from live // session messages each press — single source of truth, no mirror. if (event.key === 'ArrowUp') { const currentDraft = draftRef.current // Editing a queued turn → walk to the older entry. if (queueEdit && stepQueuedEdit(-1)) { event.preventDefault() triggerKeyConsumedRef.current = true return } // Empty composer + a queued turn → open the newest queued entry for edit // (the row's pencil), not a text recall. Enter saves it back to the queue. if (!currentDraft.trim() && !queueEdit && queuedPrompts.length > 0) { event.preventDefault() triggerKeyConsumedRef.current = true beginQueuedEdit(queuedPrompts[queuedPrompts.length - 1]!) return } // Don't hijack a typed draft unless already browsing — they'd lose it. if (currentDraft.trim() && !isBrowsingHistory(sessionId)) { return } event.preventDefault() triggerKeyConsumedRef.current = true // $messages is read imperatively (not subscribed) so the composer // doesn't re-render on every streaming delta flush. const history = deriveUserHistory($messages.get(), chatMessageText) const entry = browseBackward(sessionId, currentDraft, history) if (entry !== null) { loadIntoComposer(entry, $composerAttachments.get()) } return } if (event.key === 'ArrowDown') { // Editing a queued turn → walk to the newer entry (past the newest exits). if (queueEdit) { event.preventDefault() triggerKeyConsumedRef.current = true stepQueuedEdit(1) return } // Browsing sent history → step toward the present, restoring the draft. if (isBrowsingHistory(sessionId)) { event.preventDefault() triggerKeyConsumedRef.current = true const history = deriveUserHistory($messages.get(), chatMessageText) const result = browseForward(sessionId, history) if (result !== null) { loadIntoComposer(result.text, $composerAttachments.get()) } } return } // Cmd/Ctrl+Enter is reserved for steering the live run — never a send. // Steer when there's a steerable draft, otherwise swallow it so it can't // surprise-send. (Plain Enter still queues while busy / sends when idle.) if (event.key === 'Enter' && (event.metaKey || event.ctrlKey) && !event.shiftKey) { event.preventDefault() if (canSteer) { steerDraft() } return } if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault() // Decide from the DOM, not React state. `hasComposerPayload` is derived // from the AUI composer state, which lags the latest keystroke by a // render, so on fast typing / IME the just-typed text isn't in state yet. // Without the live read, a real message typed while prompts are queued // would drain the queue instead of sending. submitDraft() re-syncs and // sends the live editor text. const editorText = editorRef.current ? composerPlainText(editorRef.current) : draftRef.current const hasLivePayload = editorText.trim().length > 0 || attachments.length > 0 if (disabled) { return } if (!busy && !hasLivePayload && queuedPrompts.length > 0) { void drainNextQueued() return } // Empty Enter while busy is a no-op — interrupting is explicit (Stop/Esc), // never a stray Enter after sending. With a payload, submitDraft queues it. // Gate on the live DOM payload (not the render-lagged composer state) so a // message typed fast / via IME while busy still reaches submitDraft() and // gets queued instead of being mistaken for an empty Enter. if (busy && !hasLivePayload) { return } submitDraft() return } if (event.key === 'Escape') { // Editing a queued turn → Esc cancels the edit, restoring the prior draft. if (queueEdit) { event.preventDefault() exitQueuedEdit('cancel') return } // Otherwise Esc interrupts the running turn (Stop-button parity). if (busy) { event.preventDefault() triggerHaptic('cancel') void Promise.resolve(onCancel()) } } } const handleEditorKeyUp = () => { // If this keyup belongs to a key the open trigger popover already consumed // in keydown (Arrow/Enter/Tab/Escape), skip the refresh. Those keys never // edit text, and for Escape the keydown already closed the menu — a refresh // here would re-detect the still-present `/` and instantly reopen it. We // read a ref set during keydown rather than `trigger`, because by keyup // time React has re-rendered and `trigger` may already be null. if (triggerKeyConsumedRef.current) { triggerKeyConsumedRef.current = false return } window.setTimeout(refreshTrigger, 0) } const resetDragState = () => { dragDepthRef.current = 0 setDragActive(false) } const handleDragEnter = (event: ReactDragEvent) => { if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) { return } event.preventDefault() dragDepthRef.current += 1 if (!dragActive) { setDragActive(true) } } const handleDragOver = (event: ReactDragEvent) => { if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) { return } event.preventDefault() event.dataTransfer.dropEffect = 'copy' } const handleDragLeave = (event: ReactDragEvent) => { if (!onAttachDroppedItems) { return } event.preventDefault() dragDepthRef.current = Math.max(0, dragDepthRef.current - 1) if (dragDepthRef.current === 0) { setDragActive(false) } } const handleDrop = (event: ReactDragEvent) => { if (!onAttachDroppedItems) { return } event.preventDefault() resetDragState() const candidates = extractDroppedFiles(event.dataTransfer) if (candidates.length === 0) { return } // In-app drags (project tree / gutter) are workspace-relative paths the // gateway resolves directly, so they stay inline @file:/@line: refs. OS // drops are absolute local paths a remote gateway can't read (and images // need byte upload for vision), so route them through the upload pipeline. const { inAppRefs, osDrops } = partitionDroppedFiles(candidates) const refs = droppedFileInlineRefs(inAppRefs, cwd) if (refs.length && insertInlineRefs(refs)) { triggerHaptic('selection') } if (osDrops.length) { void Promise.resolve(onAttachDroppedItems(osDrops)).then(attached => { if (attached) { triggerHaptic('selection') requestMainFocus() } }) } } const handleInputDragOver = (event: ReactDragEvent) => { if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) { return } event.preventDefault() event.stopPropagation() event.dataTransfer.dropEffect = 'copy' } const handleInputDrop = (event: ReactDragEvent) => { if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) { return } const candidates = extractDroppedFiles(event.dataTransfer) if (!candidates.length) { return } event.preventDefault() event.stopPropagation() resetDragState() // Dropping straight onto the text box used to inline-ref *every* file — // including OS/Finder drops, whose absolute local path a remote gateway // can't read and whose image bytes never reached vision. Split by origin: // in-app drags stay inline refs; OS drops go through the upload pipeline. // (When no upload handler is wired, fall back to inline refs for all.) const attach = onAttachDroppedItems const { inAppRefs, osDrops } = partitionDroppedFiles(candidates) const refs = droppedFileInlineRefs(attach ? inAppRefs : candidates, cwd) if (refs.length && insertInlineRefs(refs)) { triggerHaptic('selection') } if (attach && osDrops.length) { void Promise.resolve(attach(osDrops)).then(attached => { if (attached) { triggerHaptic('selection') requestMainFocus() } }) } } const clearDraft = useCallback(() => { aui.composer().setText('') draftRef.current = '' if (editorRef.current) { editorRef.current.replaceChildren() } }, [aui]) const loadIntoComposer = (text: string, attachments: ComposerAttachment[]) => { draftRef.current = text aui.composer().setText(text) $composerAttachments.set(cloneAttachments(attachments)) const editor = editorRef.current if (editor) { renderComposerContents(editor, text) placeCaretEnd(editor) } } const stashAt = (scope: string | null, text = draftRef.current, attachments = $composerAttachments.get()) => stashSessionDraft(scope, text, attachments) // Per-thread draft swap — the composer's only session coupling. Lifecycle // never clears composer state; this effect alone stashes on leave, restores // on enter. Keyed writes are idempotent, so no skip-sentinel. useEffect(() => { const { attachments, text } = takeSessionDraft(activeQueueSessionKey) loadIntoComposer(text, attachments) return () => { const editing = queueEditRef.current if (editing?.sessionKey === activeQueueSessionKey) { stashAt(activeQueueSessionKey, editing.draft, editing.attachments) } else if (!isBrowsingHistory(sessionId)) { stashAt(activeQueueSessionKey) } } }, [activeQueueSessionKey]) // eslint-disable-line react-hooks/exhaustive-deps // Debounced stash into the active scope. Skipped while browsing history or // editing a queued prompt — recalled text must not clobber the real draft. useEffect(() => { if (isBrowsingHistory(sessionId) || queueEdit) { return } pendingDraftPersistRef.current = { scope: activeQueueSessionKey, text: draft } const handle = window.setTimeout(() => { pendingDraftPersistRef.current = null stashAt(activeQueueSessionKey, draft) }, DRAFT_PERSIST_DEBOUNCE_MS) return () => window.clearTimeout(handle) }, [activeQueueSessionKey, draft, queueEdit, sessionId]) // pagehide is load-bearing: React skips effect cleanups on reload, so Cmd+R // inside the debounce window would drop trailing keystrokes without this. useEffect(() => { const flushPendingDraftPersist = () => { const pending = pendingDraftPersistRef.current if (!pending) { return } pendingDraftPersistRef.current = null stashAt(pending.scope, pending.text) } window.addEventListener('pagehide', flushPendingDraftPersist) return () => { window.removeEventListener('pagehide', flushPendingDraftPersist) flushPendingDraftPersist() } }, []) const beginQueuedEdit = (entry: QueuedPromptEntry) => { if (!activeQueueSessionKey || queueEdit) { return } setQueueEdit({ attachments: cloneAttachments($composerAttachments.get()), draft: draftRef.current, entryId: entry.id, sessionKey: activeQueueSessionKey }) loadIntoComposer(entry.text, entry.attachments) triggerHaptic('selection') focusInput() } // Walk queued entries while editing (ArrowUp = older, ArrowDown = newer), // saving the in-progress edit on each step. Stepping newer past the last // entry exits edit mode and restores the pre-edit draft. const stepQueuedEdit = (direction: -1 | 1) => { if (!queueEdit) { return false } const index = queuedPrompts.findIndex(e => e.id === queueEdit.entryId) const target = index + direction if (index < 0 || target < 0) { return index >= 0 // at the oldest: swallow; missing entry: let it fall through } const saved = updateQueuedPrompt(queueEdit.sessionKey, queueEdit.entryId, { attachments: cloneAttachments($composerAttachments.get()), text: draftRef.current }) const next = queuedPrompts[target] if (next) { setQueueEdit({ ...queueEdit, entryId: next.id }) loadIntoComposer(next.text, next.attachments) } else { setQueueEdit(null) loadIntoComposer(queueEdit.draft, queueEdit.attachments) } triggerHaptic(saved ? 'success' : 'selection') focusInput() return true } const exitQueuedEdit = (action: 'cancel' | 'save'): boolean => { if (!queueEdit) { return false } if (action === 'save') { const text = draftRef.current const next = cloneAttachments($composerAttachments.get()) if (!text.trim() && next.length === 0) { return false } const saved = updateQueuedPrompt(queueEdit.sessionKey, queueEdit.entryId, { attachments: next, text }) triggerHaptic(saved ? 'success' : 'selection') } else { triggerHaptic('cancel') } loadIntoComposer(queueEdit.draft, queueEdit.attachments) setQueueEdit(null) focusInput() return true } const queueCurrentDraft = useCallback(() => { if (!activeQueueSessionKey || (!draft.trim() && attachments.length === 0)) { return false } if (!enqueueQueuedPrompt(activeQueueSessionKey, { text: draft, attachments })) { return false } clearDraft() clearComposerAttachments() triggerHaptic('selection') return true }, [activeQueueSessionKey, attachments, clearDraft, draft]) // Steer the live turn (nudge without interrupting). Clears the draft up front // for snappy feedback; if the gateway rejects (no live tool window) the words // are re-queued so nothing is lost — same safety net as a plain queue. const steerDraft = useCallback(() => { if (!onSteer || !canSteer) { return } const text = draftRef.current.trim() triggerHaptic('submit') clearDraft() void Promise.resolve(onSteer(text)).then(accepted => { if (!accepted && activeQueueSessionKey) { enqueueQueuedPrompt(activeQueueSessionKey, { text, attachments: [] }) } }) }, [activeQueueSessionKey, canSteer, clearDraft, onSteer]) // All queue drain paths share one lock + send-then-remove sequence. // `pickEntry` lets each caller choose head, by-id, or skip-edited. const runDrain = useCallback( async (pickEntry: (entries: QueuedPromptEntry[]) => QueuedPromptEntry | undefined): Promise => { if (drainingQueueRef.current || !activeQueueSessionKey) { return false } const entry = pickEntry(queuedPrompts) if (!entry) { return false } drainingQueueRef.current = true try { const accepted = await Promise.resolve( onSubmit(entry.text, { attachments: entry.attachments, fromQueue: true }) ) if (accepted === false) { return false } drainFailuresRef.current.delete(entry.id) removeQueuedPrompt(activeQueueSessionKey, entry.id) resetBrowseState(sessionId) return true } finally { drainingQueueRef.current = false } }, [activeQueueSessionKey, onSubmit, queuedPrompts, sessionId] ) const pickDrainHead = useCallback( (entries: QueuedPromptEntry[]) => { const skip = queueEditRef.current?.entryId return skip ? entries.find(e => e.id !== skip) : entries[0] }, [] // reads the edit id off a ref so the lock-holder always sees the latest ) const drainNextQueued = useCallback(() => runDrain(pickDrainHead), [pickDrainHead, runDrain]) const sendQueuedNow = useCallback( (id: string) => { if (!activeQueueSessionKey || id === queueEdit?.entryId) { return false } if (busy) { // Promote to the head, then interrupt. The gateway always emits a // settle (message.complete + session.info running:false) when the // turn unwinds, and the busy→false auto-drain below sends this entry. promoteQueuedPrompt(activeQueueSessionKey, id) triggerHaptic('selection') void Promise.resolve(onCancel()) return true } // A manual send clears the auto-drain backoff so a stuck entry the user // taps gets a fresh attempt (and re-enables auto-retry on success). drainFailuresRef.current.delete(id) return runDrain(entries => entries.find(e => e.id === id)) }, [activeQueueSessionKey, busy, onCancel, queueEdit, runDrain] ) // Edge-independent auto-drain: send the head whenever the session is idle and // the queue is non-empty, bounding retries so a thrown/rejected onSubmit (e.g. // a stale-session 404) can't strand the entry permanently nor spin-loop. The // drain lock serializes sends; a remount/reconnect resets the failure counts. const autoDrainNext = useCallback(() => { if (busy || drainingQueueRef.current || !activeQueueSessionKey) { return } const entry = pickDrainHead(queuedPrompts) if (!entry || (drainFailuresRef.current.get(entry.id) ?? 0) >= MAX_AUTO_DRAIN_ATTEMPTS) { return } const onFail = () => { const fails = (drainFailuresRef.current.get(entry.id) ?? 0) + 1 drainFailuresRef.current.set(entry.id, fails) if (fails >= MAX_AUTO_DRAIN_ATTEMPTS) { notify({ id: 'composer-queue-stuck', kind: 'error', title: t.composer.queueStuckTitle, message: t.composer.queueStuckBody }) } } void runDrain(() => entry) .then(sent => { if (!sent) { onFail() } }) .catch(onFail) }, [activeQueueSessionKey, busy, pickDrainHead, queuedPrompts, runDrain, t]) // Re-key on a runtime session-id change. A stable stored id (queueSessionKey) // never churns, so a change there is a real session switch and must NOT // migrate; only the runtime-derived key (queueSessionKey falsy → key is // sessionId) churns on a backend bounce/resume of the same conversation. useEffect(() => { const prev = prevQueueKeyRef.current prevQueueKeyRef.current = activeQueueSessionKey if (queueSessionKey || !prev || !activeQueueSessionKey || prev === activeQueueSessionKey) { return } migrateQueuedPrompts(prev, activeQueueSessionKey) }, [activeQueueSessionKey, queueSessionKey]) // Queued turns flow whenever the session is idle — on the busy→false settle // edge, on mount/reconnect, and after a re-key — so a swallowed edge can't // strand them. To cancel queued turns, the user deletes them from the panel. useEffect(() => { if (shouldAutoDrain({ isBusy: busy, queueLength: queuedPrompts.length })) { autoDrainNext() } }, [autoDrainNext, busy, queuedPrompts.length]) // Queue-edit cleanup: on session swap the scope effect already stashed the // edit snapshot; only restore into the composer when still on the same scope. useEffect(() => { if (!queueEdit) { return } if (queueEdit.sessionKey === activeQueueSessionKey) { if (editingQueuedPrompt) { return } loadIntoComposer(queueEdit.draft, queueEdit.attachments) } setQueueEdit(null) }, [activeQueueSessionKey, editingQueuedPrompt, queueEdit]) // eslint-disable-line react-hooks/exhaustive-deps const dispatchSubmit = (text: string, attachments?: ComposerAttachment[]) => { const submittedScope = activeQueueSessionKeyRef.current const submittedAttachments = attachments ?? [] const restore = () => { loadIntoComposer(text, submittedAttachments) stashAt(activeQueueSessionKeyRef.current, text, submittedAttachments) } void Promise.resolve(attachments ? onSubmit(text, { attachments }) : onSubmit(text)) .then(accepted => void (accepted === false ? restore() : clearSessionDraft(submittedScope))) .catch(restore) } const submitDraft = () => { if (disabled) { return } // Source the text from the DOM editor, not React state. The AUI composer // state (`draft`) and the derived `hasComposerPayload` lag the DOM by a // render, so on fast typing or IME composition the final keystroke(s) may // not have synced yet — reading state here drops the message (Enter looks // like it does nothing; typing a trailing space only "fixes" it because the // extra input event forces a state sync). draftRef is updated on every // input event; refresh it from the editor once more to also cover an // in-flight keystroke that hasn't fired its input event yet. const editor = editorRef.current if (editor) { const domText = composerPlainText(editor) if (domText !== draftRef.current) { draftRef.current = domText aui.composer().setText(domText) } } const text = draftRef.current const payloadPresent = text.trim().length > 0 || attachments.length > 0 if (queueEdit) { exitQueuedEdit('save') } else if (busy) { // Slash commands should execute immediately even while the agent is // busy — they're client-side operations (/yolo, /skin, /new, /help, // etc.) or self-contained gateway RPCs (/status, /compress). onSubmit // routes them to executeSlashCommand, which has its own per-command // busy guard for commands that genuinely need an idle session (skill // /send directives). Queuing them would make every slash command wait // for the current turn to finish, which is how the TUI never behaves. if (!attachments.length && SLASH_COMMAND_RE.test(text.trim())) { triggerHaptic('submit') clearDraft() dispatchSubmit(text) } else if (payloadPresent) { queueCurrentDraft() } else { // Stop button (the only way to reach here while busy with an empty // composer — empty Enter is short-circuited in the keydown handler). triggerHaptic('cancel') void Promise.resolve(onCancel()) } } else if (!payloadPresent && queuedPrompts.length > 0) { void drainNextQueued() } else if (payloadPresent) { const submittedAttachments = cloneAttachments(attachments) triggerHaptic('submit') resetBrowseState(sessionId) clearDraft() clearComposerAttachments() dispatchSubmit(text, submittedAttachments) } focusInput() } const submitUrl = () => { const url = urlValue.trim() if (!url) { return } if (onAddUrl) { onAddUrl(url) } else { insertText(`@url:${url}`) } triggerHaptic('success') setUrlValue('') setUrlOpen(false) } const { dictate, voiceActivityState, voiceStatus } = useVoiceRecorder({ focusInput, maxRecordingSeconds, onTranscript: insertText, onTranscribeAudio }) const pendingResponse = () => { const messages = $messages.get() const last = messages.findLast(m => m.role === 'assistant' && !m.hidden) if (!last || last.id === lastSpokenIdRef.current) { return null } const text = chatMessageText(last).trim() if (!text) { return null } return { id: last.id, pending: Boolean(last.pending), text } } const consumePendingResponse = () => { const messages = $messages.get() const last = messages.findLast(m => m.role === 'assistant' && !m.hidden) if (last) { lastSpokenIdRef.current = last.id } } const submitVoiceTurn = async (text: string) => { if (busy) { return } triggerHaptic('submit') resetBrowseState(sessionId) clearDraft() await onSubmit(text) } const conversation = useVoiceConversation({ busy, consumePendingResponse, enabled: voiceConversationActive, onFatalError: () => setVoiceConversationActive(false), onSubmit: submitVoiceTurn, onTranscribeAudio, pendingResponse }) const contextMenu = ( { triggerHaptic('open') setUrlOpen(true) }} onPasteClipboardImage={onPasteClipboardImage} onPickFiles={onPickFiles} onPickFolders={onPickFolders} onPickImages={onPickImages} state={state} /> ) const controls = ( { setVoiceConversationActive(false) void conversation.end() }, onStart: () => setVoiceConversationActive(true), onStopTurn: conversation.stopTurn, onToggleMute: conversation.toggleMute, status: conversation.status }} disabled={disabled} hasComposerPayload={hasComposerPayload} onDictate={dictate} onSteer={steerDraft} state={state} voiceStatus={voiceStatus} /> ) const input = (

window.setTimeout(closeTrigger, 80)} onCompositionEnd={event => { composingRef.current = false // The input events fired *during* composition were skipped (they // carried uncommitted preedit text), and Chromium does NOT reliably // emit a trailing input event after compositionend on Windows IMEs. // Without flushing here, committed multi-character IME input (e.g. // Chinese "你好", Japanese, Korean) never reaches composer state, so // `hasComposerPayload` stays false and the send button stays hidden // until an unrelated edit forces a sync (#39614). flushEditorToDraft(event.currentTarget) }} onCompositionStart={() => { composingRef.current = true }} onDragOver={handleInputDragOver} onDrop={handleInputDrop} onFocus={() => markActiveComposer('main')} onInput={handleEditorInput} onKeyDown={handleEditorKeyDown} onKeyUp={handleEditorKeyUp} onMouseUp={refreshTrigger} onPaste={handlePaste} ref={editorRef} role="textbox" spellCheck={false} suppressContentEditableWarning /> {/* assistant-ui requires ComposerPrimitive.Input somewhere in the tree so the composer-state binding (text + IME + paste + form-submit hookup) wires up. We render the real input UI ourselves above via the contentEditable, so the primitive is invisible (sr-only). IMPORTANT: don't let it render its default . That component runs `useLayoutEffect(resizeTextarea)` on every value change and reads `node.scrollHeight` against a hidden measurement textarea, forcing two synchronous layouts per keystroke for an element the user can't see. Profiling 400-char synthetic typing showed >900ms cumulative cost in getHeight2/calculateNodeHeight alone (~2.3ms/key) on top of the per-keystroke React commit. `asChild` swaps TextareaAutosize for a Radix Slot wrapping our plain

, which carries the binding but skips autosize. */}
      <ComposerPrimitive.Input asChild submitMode="ctrlEnter" tabIndex={-1} unstable_focusOnScrollToBottom={false}>
        <textarea
          aria-hidden
          autoCapitalize="off"
          autoComplete="off"
          autoCorrect="off"
          className="sr-only"
          spellCheck={false}
          tabIndex={-1}
        />
      </ComposerPrimitive.Input>
    </div>
  )

return (
    <>
      <ComposerPrimitive.Unstable_TriggerPopoverRoot>
        <ComposerPrimitive.Root
          className="group/composer absolute bottom-0 left-1/2 z-30 w-[min(var(--composer-width),calc(100%-2rem))] max-w-full -translate-x-1/2 rounded-2xl pt-2 pb-[var(--composer-shell-pad-block-end)]"
          data-drag-active={dragActive ? '' : undefined}
          data-slot="composer-root"
          data-status-stack={statusStackVisible ? '' : undefined}
          data-thread-scrolled-up={scrolledUp ? '' : undefined}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          onSubmit={e => {
            e.preventDefault()

if (composingRef.current) {
              return
            }

submitDraft()
          }}
          ref={composerRef}
        >
          {showHelpHint && <HelpHint />}
          {trigger && !argStageEmpty && (
            <ComposerTriggerPopover
              activeIndex={triggerActive}
              items={triggerItems}
              kind={trigger.kind}
              loading={triggerLoading}
              onHover={setTriggerActive}
              onPick={replaceTriggerWithChip}
            />
          )}
          {/* Session-scoped status stack (todos, subagents, background tasks,
              queue). Out of flow so it never inflates the composer's measured
              height; it overlays the chat instead of pushing it, and publishes
              its own --status-stack-measured-height so the thread's clearance
              accounts for it. Collapses to nothing when every status is empty. */}
          <ComposerStatusStack
            queue={
              activeQueueSessionKey && queuedPrompts.length > 0 ? (
                <QueuePanel
                  busy={busy}
                  editingId={queueEdit?.entryId ?? null}
                  entries={queuedPrompts}
                  onDelete={id => {
                    if (removeQueuedPrompt(activeQueueSessionKey, id) && queueEdit?.entryId === id) {
                      exitQueuedEdit('cancel')
                    }
                  }}
                  onEdit={beginQueuedEdit}
                  onSendNow={id => void sendQueuedNow(id)}
                />
              ) : null
            }
            sessionId={statusSessionId}
          />
          <div
            className="pointer-events-none absolute inset-0 rounded-[inherit]"
            style={{ background: COMPOSER_FADE_BACKGROUND }}
          />
          <div className="relative w-full rounded-[inherit]">
            <div
              className={cn(
                'group/composer-surface relative z-4 isolate rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] transition-[border-color] duration-200 ease-out focus-within:border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(45%*var(--composer-ring-strength)),transparent)]',
                COMPOSER_DROP_FADE_CLASS,
                'group-has-data-[state=open]/composer:border-t-transparent',
                dragActive && COMPOSER_DROP_ACTIVE_CLASS
              )}
              data-slot="composer-surface"
              ref={composerSurfaceRef}
            >
              <div
                aria-hidden
                className={cn(
                  'pointer-events-none absolute inset-0 -z-10 rounded-[inherit]',
                  composerFill,
                  composerSurfaceGlass
                )}
              />
              <div
                className={cn(
                  'relative z-1 flex min-h-0 w-full flex-col gap-(--composer-row-gap) overflow-hidden rounded-[inherit] px-(--composer-surface-pad-x) py-(--composer-surface-pad-y) transition-opacity duration-200 ease-out',
                  scrolledUp ? 'opacity-30 group-hover/composer:opacity-100 group-focus-within/composer-surface:opacity-100' : 'opacity-100'
                )}
                data-slot="composer-fade"
              >
                <VoiceActivity state={voiceActivityState} />
                <VoicePlaybackActivity />
                {queueEdit && editingQueuedPrompt && (
                  <div className="flex items-center justify-between gap-2 rounded-lg border border-[color-mix(in_srgb,var(--dt-composer-ring)_32%,transparent)] bg-accent/18 px-2 py-1">
                    <div className="min-w-0 text-[0.7rem] text-muted-foreground/88">
                      {t.composer.editingQueuedInComposer}
                    </div>
                    <div className="flex shrink-0 items-center gap-1">
                      <Button
                        className="h-6 rounded-md px-2 text-[0.68rem]"
                        onClick={() => exitQueuedEdit('cancel')}
                        type="button"
                        variant="ghost"
                      >
                        {t.common.cancel}
                      </Button>
                      <Button
                        className="h-6 rounded-md px-2 text-[0.68rem]"
                        onClick={() => exitQueuedEdit('save')}
                        type="button"
                      >
                        {t.common.save}
                      </Button>
                    </div>
                  </div>
                )}
                {attachments.length > 0 && <AttachmentList attachments={attachments} onRemove={onRemoveAttachment} />}
                <div
                  className={cn(
                    'grid w-full',
                    stacked
                      ? 'grid-cols-[auto_1fr] gap-(--composer-row-gap) [grid-template-areas:"input_input"_"menu_controls"]'
                      : 'grid-cols-[auto_1fr_auto] items-center gap-(--composer-control-gap) [grid-template-areas:"menu_input_controls"]'
                  )}
                >
                  <div className="flex items-center [grid-area:menu]">{contextMenu}</div>
                  <div className="min-w-0 [grid-area:input]">{input}</div>
                  <div className="flex items-center justify-end [grid-area:controls]">{controls}</div>
                </div>
              </div>
            </div>
          </div>
        </ComposerPrimitive.Root>
      </ComposerPrimitive.Unstable_TriggerPopoverRoot>

<UrlDialog
        inputRef={urlInputRef}
        onChange={setUrlValue}
        onOpenChange={setUrlOpen}
        onSubmit={submitUrl}
        open={urlOpen}
        value={urlValue}
      />
    </>
  )
}

export function ChatBarFallback() {
  return (
    <div
      className={cn(
        'group/composer absolute bottom-0 left-1/2 z-30 w-[min(var(--composer-width),calc(100%-2rem))] max-w-full -translate-x-1/2 rounded-2xl pt-2 pb-[var(--composer-shell-pad-block-end)]',
        'bg-linear-to-b from-transparent to-background/55'
      )}
      data-slot="composer-root"
    >
      <div className="composer-fallback-surface relative isolate h-(--composer-fallback-height) w-full rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))]">
        <div
          aria-hidden
          className={cn(
            'pointer-events-none absolute inset-0 -z-10 rounded-[inherit]',
            composerFill,
            composerSurfaceGlass
          )}
        />
      </div>
    </div>
  )
}
</article></body></html>