介绍

第一阶段优化说明

AiSenderProps 已覆盖当前封装实际支持的 editor、mentionConfig、selectConfig、triggerConfig、tipConfig、triggerPopoverPlacement 等配置，同时继续透传底层 SenderProps。

import type { AiSenderProps, AiSenderExpose } from '@zhiyongui/lingxi-ui'

XSender 这个组件内置了输入框、标签选择、指令弹窗、提及用户等场景智能对话的场景功能。

WARNING

⚠️ 插件版本需要大于 1.3.98 版本，之前旧版本插件名为 EditorSender ，其中API 有很大的使用差异，需要注意。

代码演示

基础用法

提示语

自动聚焦

状态属性

提交方式

布局变体

自定义操作列表

自定义前缀

自定义头部

自定义底部

自定义输入框样式

输入长度限制

进阶用法

输入框

标签选择框

提及用户

指令弹窗

前置提示词

API 标准表

Props

属性	类型	默认值	说明
modelValue / value	string	''	输入内容，modelValue 优先。
placeholder	string	'Type a question'	占位文案。
loading / disabled / clearable	boolean	false / false / true	加载、禁用和清空按钮状态。
submitType	'enter' | 'shiftEnter' | 'cmdOrCtrlEnter' | 'altEnter'	'enter'	提交快捷键。
editor	boolean	false	强制使用 EditorSender 模式。
mentionConfig	AiSenderMentionConfig	-	@ 提及配置。
selectConfig	AiSenderSelectConfig[]	-	选择标签配置。
triggerConfig	AiSenderTriggerConfig[]	-	自定义触发器配置。
inputStyle	string | CSSProperties | Array	-	输入区样式。

Events

事件	参数	说明
update:modelValue	value: string	输入值更新。
submit	value: string	提交。
cancel	value: string	取消。
change	-	输入变化。
recordingChange	value: boolean	语音录制状态变化。
trigger	value	自定义触发器命中。
update:triggerPopoverVisible	value: boolean	触发器弹层显示状态更新。
pasteFile	firstFile, fileList	粘贴文件。
showAtDialog	-	请求展示 @ 弹层。
showSelectDialog	key, elm	请求展示选择弹层。
showTagDialog	prefix	请求展示自定义标签弹层。

Slots

插槽	说明
prefix	输入区前置内容。
header	输入框头部区域。
action-list	操作按钮区域。
footer	输入框底部区域。

Exposes

方法	参数	说明
clear() / focus(type?) / blur()	- / string? / -	基础输入控制。
focusToStart() / focusToEnd()	-	聚焦到内容开头或结尾。
submit() / cancel()	-	主动提交或取消。
openHeader() / closeHeader()	-	打开或关闭头部区域。
startRecognition() / stopRecognition()	-	开始或停止语音识别。
getModelValue() / getCurrentValue()	-	读取当前值。
setInput(key, placeholder, defaultValue?) / setInputTag(key, placeholder, defaultValue?)	string, string, string?	设置输入标签。
setChatNode(nodes)	Array<Array<Record<string, unknown>>>	批量设置混合标签节点。
setMention(userId) / setSelect(key, tagId) / setTrigger(prefix, id)	string	设置编辑器标签。
showSelect(key, elm) / showTip(options) / closeTip()	string, HTMLElement / object / -	控制编辑器弹层。
senderState / popoverVisible / inputInstance	-	底层状态与实例的只读计算属性。

样式入口

import '@zhiyongui/lingxi-ui/ai-sender/style.css'

FAQ

普通 Sender 和 EditorSender 如何切换？

设置 editor，或传入 tipConfig、mentionConfig、selectConfig、triggerConfig 任意一个配置时，会使用 EditorSender。