ChatInput 输入栏

用于 AI 聊天场景的输入组件，支持自动高度、思维链开关、模型选择。

基础用法

import { ChatInput } from '@airo-ui/react'

function Demo() {
  return (
    <ChatInput
      placeholder="输入你的问题..."
      onSend={(value) => console.log('发送:', value)}
    />
  )
}

受控与非受控

import { useState } from 'react'
import { ChatInput } from '@airo-ui/react'

function ControlledDemo() {
  const [value, setValue] = useState('')

  return (
    <ChatInput
      value={value}
      onChange={setValue}
      placeholder="受控输入栏"
      onSend={(val) => {
        console.log('发送:', val)
        setValue('')
      }}
    />
  )
}

function UncontrolledDemo() {
  return (
    <ChatInput
      defaultValue="初始内容"
      placeholder="非受控输入栏"
      onSend={(val) => console.log('发送:', val)}
    />
  )
}

自定义发送按钮

import { ChatInput } from '@airo-ui/react'

function Demo() {
  return (
    <ChatInput
      sendLabel="提交"
      placeholder="输入内容"
      onSend={(val) => console.log('已提交:', val)}
    />
  )
}

最大行数

import { ChatInput } from '@airo-ui/react'

function Demo() {
  return (
    <ChatInput
      maxRows={5}
      placeholder="最多显示5行"
      onSend={(val) => console.log('发送:', val)}
    />
  )
}

思维链模式

import { useState } from 'react'
import { ChatInput } from '@airo-ui/react'

function Demo() {
  const [thinking, setThinking] = useState(false)

  return (
    <ChatInput
      showThinking
      thinking={thinking}
      thinkingLabel="深度思考"
      onThinkingChange={setThinking}
      placeholder="输入问题"
      onSend={(val) => console.log('发送:', val, '思考模式:', thinking)}
    />
  )
}

模型选择

import { useState } from 'react'
import { ChatInput } from '@airo-ui/react'

const models = [
  { label: 'GPT-4', value: 'gpt-4' },
  { label: 'GPT-3.5', value: 'gpt-3.5' },
]

function Demo() {
  const [model, setModel] = useState('gpt-4')

  return (
    <ChatInput
      showModelSelect
      model={model}
      models={models}
      modelPlaceholder="选择模型"
      onModelChange={setModel}
      placeholder="输入问题"
      onSend={(val) => console.log('发送:', val, '模型:', model)}
    />
  )
}

自定义操作区

import { ChatInput } from '@airo-ui/react'

function Demo() {
  return (
    <ChatInput
      actionsLeft={<button>附件</button>}
      actionsRight={<button>设置</button>}
      placeholder="输入内容"
      onSend={(val) => console.log('发送:', val)}
    />
  )
}

API

Props

名称	类型	默认值	说明
value	string	—	受控模式当前值
onChange	(value: string) => void	—	值变化时触发
placeholder	string	—	占位文本
disabled	boolean	false	是否禁用
maxRows	number	—	最大显示行数
sendLabel	string	'发送'	发送按钮文本
onSend	(value: string) => void	—	点击发送时触发
onFocus	(e: FocusEvent) => void	—	获得焦点时触发
onBlur	(e: FocusEvent) => void	—	失去焦点时触发
showThinking	boolean	false	是否显示思维链开关
thinking	boolean	false	思维链开关状态
thinkingLabel	string	—	思维链开关标签
onThinkingChange	(value: boolean) => void	—	思维链状态变化时触发
showModelSelect	boolean	false	是否显示模型选择
model	string	—	当前选中的模型
models	ChatInputModelOption[]	—	模型选项列表
modelPlaceholder	string	—	模型选择占位文本
onModelChange	(value: string) => void	—	模型切换时触发
actionsLeft	ReactNode	—	左侧自定义操作区
actionsRight	ReactNode	—	右侧自定义操作区