feat(core): make custom ChatComposer inputs first-class#4285
Open
cixzhang wants to merge 1 commit into
Open
Conversation
The composer body is a shell of slots (drawer, header, input, footer,
send); the input is one slot and doesn't span the body. Two things
locked custom inputs out of full participation:
- The composer<->input contract (value/onChange/onSubmit/canSend/
placeholder/isDisabled) lived in a private context, so a custom input
couldn't reach send/stop state or wire to the same contract the
built-in input and ChatSendButton use.
- Body-click-to-focus sniffed the DOM (querySelector for
contenteditable/textarea), missing any editor whose focusable node
isn't one of those shapes.
Export the contract (useChatComposerContext, ChatComposerContextValue)
and add a ChatComposerInputControl registered via a stable
inputControlRef on the context. An input registers { focus } on mount;
the shell drives it on body click, for any input shape. The DOM query
stays as a fallback so uninstrumented inputs keep click-to-focus.
ChatComposerInput registers its existing focus() automatically.
Since the context was private, ChatComposerInputControl is designed as
a minimal named interface that can gain optional methods later without
forcing plain inputs to implement more than focus.
Storybook: two "Custom Input" stories prove the contract with very
different inputs — a plain controlled <textarea> and a raw Lexical
editor — both first-class (read context, submit on Enter, register
focus).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsChat · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: 1 accessibility violation(s) found — 1 serious. Chat - 1 issue(s)
Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #4280 (finding #9). That PR fixed the input's own Enter/key behavior; this makes a custom input a first-class citizen of
ChatComposer, so you can drop in a plain<textarea>or a bespoke editor and have the whole shell work — not justChatComposerInput.The composer body is a shell of slots (drawer, header, input, footer, send). The input is one slot; it doesn't span the body. Two things previously locked custom inputs out:
useChatComposerContext()carriedvalue/onChange/onSubmit/canSend/placeholder/isDisabled— everything the built-in input andChatSendButtonread — but it wasn't exported, so a custom input couldn't reach send/stop state or wire to the same contract.querySelector('[contenteditable], textarea')— a hardcoded shape guess that misses any editor whose focusable node isn't one of those.Change
useChatComposerContext,ChatComposerContextValue, and a newChatComposerInputControlfrom@astryxdesign/core/Chat.inputControlRef; an input registers{ focus }on mount, and the shell drives it on body click — for any input shape. The DOM query stays as a fallback so uninstrumented custom inputs don't lose click-to-focus.ChatComposerInputregisters its existingfocus()automatically.Since the context was private, this is a design opportunity, not just an export:
ChatComposerInputControlis a minimal, named interface that can grow (optional methods) without forcing plain inputs to implement more thanfocus.Examples (Storybook)
New
Components/ChatComposer/Custom Inputstories prove the contract with two very different inputs, both first-class:<textarea>: reads context, submits on Enter (IME-safe), registers focus. No contentEditable.EditorState+ focus model), bridged to the composer's string value and registeringeditor.focus()as its control.Testing
ChatComposer.test.tsx: custom input reads value/placeholder/disabled from context; body-click focuses via the registered control; DOM-query fallback still focuses a bare textarea.ChatComposerInput.test.tsx: the built-in input registers a focus control so a body click focuses it.pnpm build, coretypecheck,typecheck:docs, storybooktypecheck,verify-exports, and changeset checks clean; full Chat suite green.Compatibility
Additive.
inputControlRefis optional on the context; the focus fallback preserves today's behavior for any input that doesn't register. No change to existingChatComposer/ChatComposerInputusage.