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

属性	类型	默认值	说明
disabled	boolean	false	是否禁用
isGenerating	boolean	false	是否生成中
placeholder	string	Message...	占位文本
enableVoice	boolean	false	是否启用语音
enableAttachments	boolean	false	是否启用附件
suggestions	string[]	undefined	建议项
maxLength	number	32000	最大输入长度

事件	说明
send	发送消息
stop	停止生成
attach	选择附件

插槽	说明
footer	底部说明文案