Function ChatInput

packages/ai-solid-ui/src/chat-input.tsx:59–165

(props: ChatInputProps)

 * ```
 */
export function ChatInput(props: ChatInputProps) {
  const { sendMessage, isLoading } = useChatContext()
  const [value, setValue] = createSignal('')

  const disabled = () => props.disabled || isLoading()

  const handleSubmit = () => {
    if (!value().trim() || disabled()) return
    void sendMessage(value())
    setValue('')
  }

  const renderProps = (): ChatInputRenderProps => ({
    value: value(),
    onChange: setValue,
    onSubmit: handleSubmit,
    isLoading: isLoading(),
    disabled: disabled(),

    ref: () => {},
  })

  // Render prop pattern
  if (props.children) {
    return <>{props.children(renderProps())}</>
  }

  // Default implementation
  return (
    <div
      class={props.class}
      data-chat-input
      style={{
        display: 'flex',
        gap: '0.75rem',
        'align-items': 'center',
        width: '100%',
      }}
    >
      <input
        type="text"
        value={value()}
        onInput={(e) => setValue(e.currentTarget.value)}
        onKeyDown={(e) => {
          if ((props.submitOnEnter ?? true) && e.key === 'Enter') {
            e.preventDefault()
            handleSubmit()
          }
        }}
        placeholder={props.placeholder ?? 'Type a message...'}
        disabled={disabled()}
        data-chat-textarea
        style={{
          flex: 1,
          padding: '0.75rem 1rem',
          'font-size': '0.875rem',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          'border-radius': '0.75rem',