x-sender

原生 JavaScript 富文本聊天输入引擎（预编译，无框架依赖）—— @提及 · 触发符指令 · 选择标签 · 输入占位 · 撤销重做 · IME 处理 · 拼音匹配。

pnpm add @flowporr/x-sender

WARNING

x-sender 原 npm 包已标记"不再维护"，本仓库将其 vendor 到 @flowporr/x-sender 并保持完全控制。底层引擎可自行渲染；ai-chat-vue 的 XSender 组件封装了它。

基本用法

import XSender from '@flowporr/x-sender'
import '@flowporr/x-sender/style'

const sender = new XSender({
  container: document.querySelector('#editor'),
  placeholder: '请输入内容',
})

初始化选项

选项	类型	说明
container	HTMLElement	挂载容器（必填）
placeholder	string	占位文本
mentionConfig	MentionConfig	@提及配置
triggerConfig	TriggerConfig[]	触发符指令
selectConfig	SelectConfig[]	选择标签

事件（bus）

通过 sender.bus.on(key, event, handler) 订阅，组件卸载时需清理：

sender.bus.on('submit', (value) => {
  console.log(value)  // { html, text, mention, trigger, select }
})

内容模型

提交 / 读取的值结构：

interface SenderValue {
  html: string       // HTML 内容
  text: string       // 纯文本
  mention: Mention[] // @提及的成员
  trigger: Trigger   // 触发的指令
  select: Select[]   // 选择标签
}

特性

• @提及：@ 触发成员搜索，插入可交互标签
• 触发符指令：/ 等触发命令面板
• 选择标签：插入可交互的选择块（如"上传图片"占位）
• 输入占位：自定义提示文本
• 撤销重做：完整历史栈
• IME 组合输入：中文输入法兼容
• 拼音匹配：搜索时支持拼音首字母

生命周期

// 创建 / 销毁（DOM 树由引擎自建，destroy 时清理）
const sender = new XSender({ container })
sender.destroy()

与 ai-chat-vue 的关系

ai-chat-vue 的 <XSender> 是它的 Vue 封装，提供：

• props：placeholder / loading / disabled / mentionConfig / triggerConfig 等
• events：submit / change / cancel / pasteFile
• expose：getModelValue() / setMention() / setText() / setHtml() / setTrigger() / clear() 等

多数场景直接用 <XSender> 即可，无需接触底层引擎。需要完全定制输入交互时才直接使用 x-sender。

完整文档

实现细节（类结构、事件总线、DOM 结构）见包 README：packages/x-sender/README.md