ChatInput

Usage

Use the ChatInput component to allow users to type and send messages in a chat interface.

<script setup lang="ts">
const handleSubmit = async (text: string) => {
  alert(text)
}
const loading = ref(false)
</script>

<template>
  <ZChatInput :loading="loading" placeholder="Type your message here..." class="w-full" @submit="handleSubmit" />
</template>

Props

Events

• @submit - Emitted when the user submits the input (e.g., by pressing Enter or clicking the send button).

Slots

prepend

Use the #prepend slot to add content before the input field.

append

Use the #append slot to add content after the input field (e.g., a send button).

Config

{
  wrapper: 'flex items-center space-x-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-3xl',
  textarea: 'flex-grow resize-none',
  button: ''
}