Sender

Sender 是聊天输入框，支持建议项、附件、语音按钮、发送和停止生成状态。

导入方式

按需导入

import { Sender } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <Sender />

基础用法

AI can make mistakes. Verify important information.

最近发送：尚未发送消息

<script setup lang="ts">
import { ref } from 'vue'
import { Sender } from '@weimin96/ai-chat-vue'

const lastMessage = ref('尚未发送消息')
</script>

<template>
  <div>
    <Sender
      :suggestions="['写一段摘要', '生成测试清单']"
      placeholder="输入消息..."
      @send="(content) => (lastMessage = content)"
    />
    <p style="margin-top: 12px; font-size: 13px; color: var(--ac-muted)">
      最近发送：{{ lastMessage }}
    </p>
  </div>
</template>

API

属性	类型	默认值	说明
value	string	undefined	输入框受控值
disabled	boolean	false	是否禁用
isGenerating	boolean	false	是否生成中
placeholder	string	Message...	占位文本
ariaLabel	string	消息输入	文本域可访问名称
enableVoice	boolean	false	是否启用语音
enableAttachments	boolean	false	是否启用附件
suggestions	string[]	undefined	建议项
maxLength	number	32000	最大输入长度

事件	说明
update:value	输入值变化
send	发送消息
stop	停止生成
attach	选择附件

插槽	说明
footer	底部说明文案

双向绑定

<Sender v-model:value="draft" @send="sendMessage" />

v-model:value 可用于建议项填入、草稿恢复和外部清空。发送成功后组件会清空内部输入并同步触发 update:value。

可访问性

placeholder 只作为视觉提示，不能替代文本域名称。Sender 默认给 <textarea> 设置 aria-label="消息输入"，业务侧可通过 ariaLabel 覆盖。使用 Headless API 时，useHeadlessSender().textareaAttrs 已包含 aria-label、aria-multiline 和 aria-describedby。