ChatInput

Composite input component with auto-resizing textarea and send action bar, designed for chat scenarios.

Basic Usage

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>

<AChatInput
  v-model="message"
  placeholder="Type a message..."
  send-label="Send"
  @send="handleSend"
/>

Action Bar

Use the actions-left slot to insert attachment, voice, and other action buttons.

<AChatInput v-model="text" placeholder="Reply...">
  <template #actions-left>
    <button class="chat-input-btn" title="Attachment">
      <!-- Attachment icon -->
    </button>
    <button class="chat-input-btn" title="Voice">
      <!-- Voice icon -->
    </button>
  </template>
</AChatInput>

Deep Thinking

Enable the deep thinking toggle with show-thinking.

Thinking mode: Off

<script setup>
import { ref } from 'vue'
const message = ref('')
const thinking = ref(false)
</script>

<AChatInput
  v-model="message"
  :show-thinking="true"
  v-model:thinking="thinking"
  thinking-label="Deep thinking"
/>

Model Select

Enable model selection with show-model-select.

Current model: claude3

<script setup>
import { ref } from 'vue'
const message = ref('')
const model = ref('claude3')
const models = [
  { label: 'GPT-4o', value: 'gpt4o' },
  { label: 'Claude 3.5 Sonnet', value: 'claude3' }
]
</script>

<AChatInput
  v-model="message"
  :show-model-select="true"
  v-model:model="model"
  :models="models"
/>

Combined

Deep thinking and model select can be enabled together.

<AChatInput
  v-model="message"
  :show-thinking="true"
  v-model:thinking="thinking"
  :show-model-select="true"
  v-model:model="model"
  :models="models"
/>

Interaction

• Enter to send — Press Enter to send and clear the input
• Shift+Enter for newline — Use the shortcut for line breaks
• Auto-resize — Textarea grows with content, max 6 rows
• Send button state — Disabled when content is empty
• Deep thinking — Toggle panel, supports two-way binding
• Model select — Model list popup, supports two-way binding

API

Props

Name	Type	Default	Description
modelValue	string	''	Bound value
placeholder	string	'Type a message...'	Input placeholder
disabled	boolean	false	Disabled
maxRows	number	6	Auto-resize max rows
sendLabel	string	'Send'	Send button text
showThinking	boolean	false	Show deep thinking icon
thinking	boolean	false	Deep thinking state
thinkingLabel	string	'Deep thinking'	Deep thinking label text
showModelSelect	boolean	false	Show model select icon
model	string	''	Currently selected model
models	ModelOption[]	[]	Model options list
modelPlaceholder	string	'Select model'	Model select placeholder

ModelOption

Name	Type	Default	Description
label	string	—	Display text
value	string	—	Option value

Emits

Name	Parameters	Description
update:modelValue	value: string	Input value changed
send	value: string	User sent message
focus	event: FocusEvent	Input focused
blur	event: FocusEvent	Input blurred
update:thinking	value: boolean	Thinking state changed
update:model	value: string	Selected model changed

Slots

Name	Description
actions-left	Left side of action bar (after built-in icons)
actions-right	Right side of action bar (before send button)