Sender

Input box component for chatting.

When to use

Need to build an input box for a dialogue scenario.

Examples

Agent input

Basic usage

Switch

Slot filling

Instance methods

Submit behavior

Voice input

Custom voice input

Custom suffix actions

Expandable panel

Slash commands

Quote

Custom footer

Customize the send button

Paste files

API

SenderProps

Prop	Description	Type	Default	Version
allowSpeech	Whether to allow voice input	boolean	SpeechConfig	false
autoSize	Adaptive content height	boolean
classNames	Style class names	See below	-	-
components	Custom components	Record<'input', ComponentType>	-	-
defaultValue	Default value of the input box	string	-	-
disabled	Whether disabled	boolean	false	-
footer	Footer content	VNode	(oriNode, info: { components }) => VNode	false
header	Header panel	VNode	(oriNode, info: { components }) => VNode	false
loading	Whether it is loading	boolean	false	-
prefix	Prefix content	VNode	(oriNode, info: { components }) => VNode	false
readOnly	Whether the input box is read-only	boolean	false	-
rootClassName	Root element style class	string	-	-
slotConfig	Slot configuration, enable slot fill-in-the-blank mode	SlotConfigType[]	-	2.0
styles	Semantically defined styles	See below	-	-
submitType	Submit mode	enter	shiftEnter	false
suffix	Suffix operation button area	VNode | (oriNode, info: { components }) => VNode | false	-	2.0
value(v-model)	Input box value	string	-	-
onChange	Callback when input box value changes	(value: string, event?: Event, slotConfig?: SlotConfigType[]) => void	-	-
onCancel	Callback when cancel button is clicked	() => void	-	-
onPasteFile	Callback for pasting files	(files: FileList) => void	-	-
onSubmit	Callback when send button is clicked	(message: string, slotConfig?: SlotConfigType[]) => void	-	-

type SpeechConfig = {
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
};

type ActionsComponents = {
  SendButton: Component;
  ClearButton: Component;
  LoadingButton: Component;
  SpeechButton: Component;
};

type SlotConfigType =
  | { type: 'text'; value: string; key?: string }
  | { type: 'input'; key: string; props?: { defaultValue?: string; placeholder?: string } }
  | { type: 'select'; key: string; props?: { defaultValue?: string; options: string[]; placeholder?: string } }
  | { type: 'tag'; key: string; props?: { label: VNode; value?: string } }
  | { type: 'custom'; key: string; props?: Record<string, any>; customRender?: Function; formatResult?: Function };

Sender Slots

Slot	Description	Type
header	Header panel	-
prefix	Prefix content	-
suffix	Suffix operation button area	{ ori: VNode; info: { components: ActionsComponents } }
footer	Footer content	{ ori: VNode; info: { components: ActionsComponents } }

Sender Ref

Prop	Description	Type	Default	Version
nativeElement	Outer container	HTMLDivElement	-	-
inputElement	Inner input element	HTMLTextAreaElement | HTMLDivElement	-	2.0
focus	Get focus	(option?) => void	-	-
blur	Lose focus	() => void	-	-
insert	Insert content	(value, position?) => void	-	2.0
clear	Clear content	() => void	-	2.0
getValue	Get current value	() =>	-	2.0

Sender.Header

Prop	Description	Type	Default	Version
children	Panel content	VNode	-	-
closable	Whether it can be closed	boolean	true	-
forceRender	Force render	boolean	false	-
open	Whether it is expanded	boolean	-	-
title	Title	VNode	string	-
onOpenChange	Callback for expansion state change	(open: boolean) => void	-	-

Sender.Switch

Prop	Description	Type	Default	Version
checkedChildren	Content displayed when checked	VNode	-	2.0
classNames	Style class names	Record<'root'	'content'	'icon'
defaultValue	Default selected state	boolean	-	2.0
disabled	Whether disabled	boolean	false	2.0
icon	Icon	VNode	-	2.0
loading	Loading state	boolean	false	2.0
onChange	Toggle callback	(checked: boolean) => void	-	2.0
styles	Semantically defined styles	Record<'root'	'content'	'icon'
unCheckedChildren	Content displayed when unselected	VNode	-	2.0
value	Selected state	boolean	-	2.0

Semantic DOM

Deep thinking can understand the intent behind.

• root

  根节点

• prefix

  前缀

• input

  输入框

• suffix

  后缀

• footer

  底部

• switch

  开关

• content

  内容

Header

Content

• header

  头部

• content

  头部-内容

Design Token

Token	Description	Type	Default
colorBgSlot	Slot background color	string	rgba(colorPrimary, 0.06)
colorTextSlot	Slot text color	string	colorPrimary
colorTextSlotPlaceholder	Slot text placeholder color	string	rgba(colorPrimary, 0.25)
colorBorderSlot	Slot border color	string	rgba(colorPrimary, 0.06)
colorBorderSlotHover	Slot border hover color	string	rgba(colorPrimary, 0.1)
switchCheckedBg	Switch checked background color	string	rgba(colorPrimary, 0.08)
switchCheckedHoverBg	Switch checked hover background color	string	rgba(colorPrimary, 0.1)
switchUncheckedHoverBg	Switch unchecked hover background color	string	rgba(colorFillTertiary, 0.04)
colorBorderInput	Input box border color	string	rgba(colorFillTertiary, 0.1)
colorBgSkill	Skill background color	string	rgba(colorPrimary, 0.08)
colorBgSkillHover	Skill hover background color	string	rgba(colorPrimary, 0.15)

colorBgActionsDisabled / colorTextActionsDisabled in React documentation have not yet been exposed in Vue Sender ComponentToken, so they are not included.