ChatInput 输入栏

复合输入组件，集成自适应文本域与发送操作栏，适用于对话场景。

基础用法

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>

<AChatInput
  v-model="message"
  placeholder="输入消息..."
  send-label="发送"
  @send="handleSend"
/>

快捷操作栏

通过 actions-left slot 在操作栏中插入附件、语音等快捷操作按钮。

<AChatInput v-model="text" placeholder="回复...">
  <template #actions-left>
    <button class="chat-input-btn" title="附件">
      <!-- 附件图标 -->
    </button>
    <button class="chat-input-btn" title="语音">
      <!-- 语音图标 -->
    </button>
  </template>
</AChatInput>

深度思考

通过 show-thinking 开启深度思考图标按钮，点击展开切换面板。

思考模式：已关闭

<script setup>
import { ref } from 'vue'
const message = ref('')
const thinking = ref(false)
</script>

<AChatInput
  v-model="message"
  :show-thinking="true"
  v-model:thinking="thinking"
  thinking-label="深度思考"
/>

模型选择

通过 show-model-select 开启模型选择图标按钮，点击展开模型列表。

当前模型：claude3

<script setup>
import { ref } from 'vue'
const message = ref('')
const model = ref('claude3')
const models = [
  { label: 'GPT-4o', value: 'gpt4o' },
  { label: 'Claude 3.5 Sonnet', value: 'claude3' }
]
</script>

<AChatInput
  v-model="message"
  :show-model-select="true"
  v-model:model="model"
  :models="models"
/>

组合使用

深度思考与模型选择可同时启用，图标整齐排列在快捷操作栏中。

<AChatInput
  v-model="message"
  :show-thinking="true"
  v-model:thinking="thinking"
  :show-model-select="true"
  v-model:model="model"
  :models="models"
/>

交互特性

• Enter 发送 — 按下 Enter 即发送当前消息并清空输入框
• Shift+Enter 换行 — 需要换行时使用快捷键
• 自适应高度 — 文本域随内容自动撑高，最多 6 行
• 发送按钮状态 — 内容为空时按钮自动置灰禁用
• 深度思考 — 图标按钮，点击弹出切换面板，支持双向绑定
• 模型选择 — 图标按钮，点击弹出模型列表，支持双向绑定

API

Props

名称	类型	默认值	说明
modelValue	string	''	双向绑定值
placeholder	string	'输入消息...'	输入占位符
disabled	boolean	false	是否禁用
maxRows	number	6	自适应最大行数
sendLabel	string	'发送'	发送按钮文字
showThinking	boolean	false	是否显示深度思考图标
thinking	boolean	false	深度思考状态
thinkingLabel	string	'深度思考'	深度思考标签文字
showModelSelect	boolean	false	是否显示模型选择图标
model	string	''	当前选中模型值
models	ModelOption[]	[]	模型选项列表
modelPlaceholder	string	'选择模型'	模型选择占位符

ModelOption

名称	类型	默认值	说明
label	string	—	显示文本
value	string	—	选项值

Emits

名称	参数	说明
update:modelValue	value: string	输入值变化
send	value: string	用户发送消息
focus	event: FocusEvent	输入框聚焦
blur	event: FocusEvent	输入框失焦
update:thinking	value: boolean	深度思考状态变化
update:model	value: string	选中模型变化

Slots

名称	说明
actions-left	操作栏左侧内容（内置图标之后）
actions-right	操作栏右侧内容（在发送按钮之前）