feat: add PromptInput AI element#862
Conversation
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01C7QST4WHS5DmTqgJkvQoyf
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdds a new composable Sequence Diagram(s)sequenceDiagram
participant User
participant PromptInputTextarea
participant PromptInputRoot
participant PromptInputSubmit
User->>PromptInputTextarea: Press Enter
PromptInputTextarea->>PromptInputRoot: Request form submission
PromptInputRoot->>PromptInputRoot: Validate status and trimmed value
PromptInputRoot->>User: Invoke onSubmit
User->>PromptInputSubmit: Click during streaming
PromptInputSubmit->>PromptInputRoot: Invoke onStop
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Checkov (3.3.8)apps/www/src/content/docs/ai-elements/meta.jsonTraceback (most recent call last): apps/www/src/content/docs/meta.jsonTraceback (most recent call last): Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/www/src/content/docs/ai-elements/prompt-input/props.ts`:
- Around line 17-21: Update the onSubmit documentation to distinguish reset
behavior: event.currentTarget.reset() clears uncontrolled input drafts, while
controlled value props remain unchanged until the parent updates them. Mention
that controlled consumers should clear their state, as demonstrated by calling
setValue(''), and preserve the existing submission details.
- Around line 47-95: Update PromptInputTextareaProps, PromptInputSubmitProps,
and PromptInputButtonProps to derive from their forwarded TextAreaProps, native
button props, and Button props respectively, while omitting only props
intentionally overridden or documented locally. Preserve the existing custom
descriptions/defaults and ensure supported handlers, disabled, className, and
ARIA attributes remain represented in the generated prop tables.
In `@packages/raystack/components/prompt-input/prompt-input-textarea.tsx`:
- Line 29: Make root PromptInput disabled state authoritative: update
resolvedDisabled in
packages/raystack/components/prompt-input/prompt-input-textarea.tsx (29-29) and
prompt-input-parts.tsx (49-49) to preserve context.disabled over child props,
and update the disabled resolution in
packages/raystack/components/prompt-input/prompt-input-submit.tsx (37-37) to
include context.disabled before any child override. Add a regression case in
packages/raystack/components/prompt-input/__tests__/prompt-input.test.tsx
(216-225) passing disabled={false} to each slot and verifying they remain
disabled.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 5775beff-8874-4ef4-b28f-84b493c0ff81
📒 Files selected for processing (16)
apps/www/src/components/docs/search.tsxapps/www/src/content/docs/ai-elements/meta.jsonapps/www/src/content/docs/ai-elements/prompt-input/demo.tsapps/www/src/content/docs/ai-elements/prompt-input/index.mdxapps/www/src/content/docs/ai-elements/prompt-input/props.tsapps/www/src/content/docs/meta.jsonpackages/raystack/components/prompt-input/__tests__/prompt-input.test.tsxpackages/raystack/components/prompt-input/index.tsxpackages/raystack/components/prompt-input/prompt-input-context.tsxpackages/raystack/components/prompt-input/prompt-input-parts.tsxpackages/raystack/components/prompt-input/prompt-input-root.tsxpackages/raystack/components/prompt-input/prompt-input-submit.tsxpackages/raystack/components/prompt-input/prompt-input-textarea.tsxpackages/raystack/components/prompt-input/prompt-input.module.csspackages/raystack/components/prompt-input/prompt-input.tsxpackages/raystack/index.tsx
| * Called with the trimmed text when the prompt is submitted — Enter in the | ||
| * textarea or a click on `PromptInput.Submit`. Call | ||
| * `event.currentTarget.reset()` to clear the input after sending. | ||
| */ | ||
| onSubmit?: (value: string, event: React.FormEvent<HTMLFormElement>) => void; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Clarify reset behavior for controlled inputs.
event.currentTarget.reset() clears an uncontrolled draft, but a controlled value remains unchanged until the parent updates it. Document this distinction; the controlled example correctly calls setValue('').
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/www/src/content/docs/ai-elements/prompt-input/props.ts` around lines 17
- 21, Update the onSubmit documentation to distinguish reset behavior:
event.currentTarget.reset() clears uncontrolled input drafts, while controlled
value props remain unchanged until the parent updates them. Mention that
controlled consumers should clear their state, as demonstrated by calling
setValue(''), and preserve the existing submission details.
| export interface PromptInputTextareaProps { | ||
| /** Placeholder shown while empty. @defaultValue "Write a message…" */ | ||
| placeholder?: string; | ||
|
|
||
| /** Disables just the textarea. Inherits the root `disabled` by default. */ | ||
| disabled?: boolean; | ||
|
|
||
| /** Custom CSS class names. */ | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface PromptInputSubmitProps { | ||
| /** | ||
| * Replaces the status-derived icon (send arrow, spinner or stop square). | ||
| */ | ||
| children?: React.ReactNode; | ||
|
|
||
| /** | ||
| * Accessible name. Defaults to "Send message", or "Stop response" while a | ||
| * response is in flight. | ||
| */ | ||
| 'aria-label'?: string; | ||
|
|
||
| /** Custom CSS class names. */ | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface PromptInputButtonProps { | ||
| /** | ||
| * Visual style, forwarded to `Button`. | ||
| * @defaultValue "ghost" | ||
| */ | ||
| variant?: 'solid' | 'outline' | 'ghost' | 'text'; | ||
|
|
||
| /** | ||
| * Color, forwarded to `Button`. | ||
| * @defaultValue "neutral" | ||
| */ | ||
| color?: 'accent' | 'danger' | 'neutral' | 'success'; | ||
|
|
||
| /** | ||
| * Size, forwarded to `Button`. | ||
| * @defaultValue "small" | ||
| */ | ||
| size?: 'small' | 'normal'; | ||
|
|
||
| /** Custom CSS class names. */ | ||
| className?: string; | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Keep the prop reference aligned with forwarded component props.
These interfaces are narrower than the actual contracts: PromptInputTextareaProps forwards TextAreaProps (packages/raystack/components/prompt-input/prompt-input-textarea.tsx:10-14), PromptInputSubmitProps forwards native button props (packages/raystack/components/prompt-input/prompt-input-submit.tsx:10), and PromptInputButtonProps forwards Button props (packages/raystack/components/prompt-input/prompt-input-parts.tsx:31). The generated tables therefore omit supported props such as onKeyDown, onClick, disabled, and ARIA attributes. Derive these docs types from the component contracts or document the full forwarded surface.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/www/src/content/docs/ai-elements/prompt-input/props.ts` around lines 47
- 95, Update PromptInputTextareaProps, PromptInputSubmitProps, and
PromptInputButtonProps to derive from their forwarded TextAreaProps, native
button props, and Button props respectively, while omitting only props
intentionally overridden or documented locally. Preserve the existing custom
descriptions/defaults and ensure supported handlers, disabled, className, and
ARIA attributes remain represented in the generated prop tables.
| const localRef = useRef<HTMLTextAreaElement | null>(null); | ||
| const mergedRef = useMergedRefs(localRef, context.textareaRef, ref); | ||
|
|
||
| const resolvedDisabled = disabled ?? context.disabled; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Keep root-level disabled authoritative.
An explicit disabled={false} re-enables slots inside <PromptInput disabled>, so the textarea accepts edits and button handlers remain clickable even though submission is blocked. Root disabled should win over child props.
packages/raystack/components/prompt-input/prompt-input-textarea.tsx#L29-L29: resolve withcontext.disabled || disabled.packages/raystack/components/prompt-input/prompt-input-submit.tsx#L37-L37: includecontext.disabledbefore any child override.packages/raystack/components/prompt-input/prompt-input-parts.tsx#L49-L49: resolve withcontext.disabled || disabled.packages/raystack/components/prompt-input/__tests__/prompt-input.test.tsx#L216-L225: add a regression case usingdisabled={false}on each slot.
📍 Affects 3 files
packages/raystack/components/prompt-input/prompt-input-textarea.tsx#L29-L29(this comment)packages/raystack/components/prompt-input/prompt-input-submit.tsx#L37-L37packages/raystack/components/prompt-input/prompt-input-parts.tsx#L49-L49
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/prompt-input/prompt-input-textarea.tsx` at line
29, Make root PromptInput disabled state authoritative: update resolvedDisabled
in packages/raystack/components/prompt-input/prompt-input-textarea.tsx (29-29)
and prompt-input-parts.tsx (49-49) to preserve context.disabled over child
props, and update the disabled resolution in
packages/raystack/components/prompt-input/prompt-input-submit.tsx (37-37) to
include context.disabled before any child override. Add a regression case in
packages/raystack/components/prompt-input/__tests__/prompt-input.test.tsx
(216-225) passing disabled={false} to each slot and verifying they remain
disabled.
2 participants
Summary
PromptInputcompound component (Root,Textarea,Submit,Toolbar/parts) topackages/raystack/components/prompt-input/, with auto-growing textarea, Enter-to-submit handling, and a submit button that reflects status (idle/streaming/error)--rs-*tokens and export the component from the raystack package rootmeta.jsonentry and search grouping inapps/www