feat: add customizable input layout with slot props and reusable sub-components

[amcdnl]

Add prepend, append, and actions slot props to ChatInput for flexible layout
customization. Each slot accepts a ReactNode or a render function that receives
ChatInputRenderContext (isLoading, disabled, message, sendMessage, stopMessage).

Extract SendButton and StopButton as standalone exported components so users can
compose custom action layouts while reusing the default themed buttons.

Add new Storybook demos: model selector, toolbar, custom actions, and full
custom layout combining all slots.

https://claude.ai/code/session_01ATC3T4KBTV5pXpzDTL5Zz7

[Copilot]

Pull request overview

This PR enhances ChatInput customization by adding slot-style props (prepend, append, actions) and flexible actionsPlacement options, while extracting reusable themed SendButton/StopButton components and adding Storybook demos for various layouts.

Changes:

• Add prepend/append/actions slot props (ReactNode or render function via ChatInputRenderContext) and actionsPlacement to ChatInput.
• Extract and export reusable SendButton and StopButton components.
• Extend the theme shape to support prepend/append wrappers and non-inline action placements; add Storybook demos for custom layouts.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
stories/CustomInputLayout.stories.tsx	Adds new Storybook demos showcasing custom input layouts and action placements.
src/theme.ts	Extends ChatTheme.input for prepend/append and action placement variants.
src/ChatInput/ChatInput.tsx	Implements slot rendering, action placement logic, and exports SendButton/StopButton + render context types.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

useCallback is imported but never used in this story file. Please remove the unused import to keep lint/TS clean.

Suggested change

	import { useState, useCallback } from 'react';
	import { useState } from 'react';

[Copilot]

SendButton reads theme.input.actions.send directly from ChatContext, but ChatContext's default value has no theme. Since SendButton is now exported for reuse, using it outside a <Chat> provider will throw at runtime. Consider falling back to chatTheme when theme is undefined (as other components do), or require a theme prop and/or throw a clearer error when missing context.

Suggested change

	return (
	<Button
	title="Send"
	className={cn(theme.input.actions.send, className)}
	const sendClassName = theme?.input?.actions?.send;
	return (
	<Button
	title="Send"
	className={cn(sendClassName, className)}

[Copilot]

{resolvedPrepend && ...} will skip rendering valid ReactNode values like 0 or an empty string. Prefer an explicit null/undefined check (e.g. resolvedPrepend != null) so all valid slot content renders correctly.

[Copilot]

{resolvedAppend && ...} has the same truthiness issue as prepend and will not render valid ReactNode values like 0/empty string. Use an explicit null/undefined check instead of a truthy check.

[Copilot]

theme.input.input includes a hard-coded pr-16 to reserve space for inline actions, but this class is applied for all actionsPlacement values. When actions are placed top/bottom/before/after, this leaves unnecessary right padding on the editor. Consider making the reserved padding conditional (only for actionsPlacement === 'inline') or splitting the theme into separate classes for inline vs non-inline layouts.

[cloudflare-workers-and-pages]

Deploying reachat-storybook with    Cloudflare Pages

Latest commit:	ed00156
Status:	✅  Deploy successful!
Preview URL:	https://6c6d67da.reachat-storybook.pages.dev
Branch Preview URL:	https://claude-customizable-input-la.reachat-storybook.pages.dev

View logs