Skip to content

Form Element Pass-Through Props #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pmn4 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Form Element Pass-Through Props #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/late-pans-sink.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@llamaindex/chat-ui': patch
---

Add Pass-through props to ChatInput components for form elements
35 changes: 23 additions & 12 deletions packages/chat-ui/src/chat/chat-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Send, Square } from 'lucide-react'
import { createContext, useContext, useRef, useState } from 'react'
import { cn } from '../lib/utils'
import { Button } from '../ui/button'
import { Button, ButtonProps } from '../ui/button'
import { Textarea } from '../ui/textarea'
import { FileUploader } from '../widgets/index.js' // this import needs the file extension as it's importing the widget bundle
import { useChatUI } from './chat.context'
Expand All @@ -15,11 +15,16 @@ interface ChatInputProps extends React.PropsWithChildren {
attachments?: MessagePart[]
}

interface ChatInputFormProps extends React.PropsWithChildren {
type FormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'>
interface ChatInputFormProps extends FormProps, React.PropsWithChildren {
className?: string
}

interface ChatInputFieldProps {
type TextAreaProps = Omit<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
'onChange'
>
interface ChatInputFieldProps extends TextAreaProps {
className?: string
placeholder?: string
}
Expand All @@ -31,7 +36,7 @@ interface ChatInputUploadProps {
multiple?: boolean
}

interface ChatInputSubmitProps extends React.PropsWithChildren {
interface ChatInputSubmitProps extends ButtonProps, React.PropsWithChildren {
className?: string
disabled?: boolean
}
Expand Down Expand Up @@ -113,7 +118,8 @@ function ChatInput(props: ChatInputProps) {

function ChatInputForm(props: ChatInputFormProps) {
const { handleSubmit } = useChatInput()
const children = props.children ?? (
const { children: childrenProp, ...formProps } = props
const children = childrenProp ?? (
<>
<ChatInputField />
<ChatInputSubmit />
Expand All @@ -123,6 +129,7 @@ function ChatInputForm(props: ChatInputFormProps) {
return (
<form
onSubmit={handleSubmit}
{...formProps}
Copy link
Contributor Author

@pmn4 pmn4 Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

order matters, so I added the pass-through props after onSubmit so if you really know what you're doing, you can override the default behavior. cn + props.className is already a way to override the default, so I placed it after

className={cn('relative flex gap-2', props.className)}
>
{children}
Expand All @@ -134,6 +141,7 @@ function ChatInputField(props: ChatInputFieldProps) {
const { input, setInput } = useChatUI()
const { handleKeyDown, setIsComposing } = useChatInput()
const textareaRef = useRef<HTMLTextAreaElement>(null)
const { placeholder, className, ...textareaProps } = props

// auto resize the textarea based on the content
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
Expand All @@ -150,12 +158,14 @@ function ChatInputField(props: ChatInputFieldProps) {

return (
<Textarea
ref={textareaRef}
name="input"
placeholder={props.placeholder ?? 'Type a message...'}
spellCheck={false}
{...textareaProps}
Copy link
Contributor Author

@pmn4 pmn4 Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved the defaults above the pass-through props, and the things that should not be overridden (or can already be overridden, like placeholder and className) below

ref={textareaRef}
placeholder={placeholder ?? 'Type a message...'}
className={cn(
'bg-secondary h-[100px] max-h-[400px] min-h-0 flex-1 resize-none overflow-y-auto rounded-2xl p-4',
props.className
className
)}
value={input}
onChange={handleInputChange}
Expand All @@ -164,7 +174,6 @@ function ChatInputField(props: ChatInputFieldProps) {
onCompositionEnd={() => {
setTimeout(() => setIsComposing(false), 100)
}}
spellCheck={false}
/>
)
}
Expand Down Expand Up @@ -199,6 +208,7 @@ function ChatInputUpload(props: ChatInputUploadProps) {
function ChatInputSubmit(props: ChatInputSubmitProps) {
const { stop, isLoading } = useChatUI()
const { isDisabled } = useChatInput()
const { disabled, className, children, ...buttonProps } = props

if (stop && isLoading) {
return (
Expand All @@ -217,10 +227,11 @@ function ChatInputSubmit(props: ChatInputSubmitProps) {
<Button
type="submit"
size="icon"
disabled={props.disabled ?? isDisabled}
className={cn('absolute bottom-2 right-2 rounded-full', props.className)}
{...buttonProps}
disabled={disabled ?? isDisabled}
className={cn('absolute bottom-2 right-2 rounded-full', className)}
>
{props.children ?? <Send className="size-4" />}
{children ?? <Send className="size-4" />}
</Button>
)
}
Expand Down