TxChat · Vue · tecexpress

Local message history with authors, typing indicators and send events. sent confirms local acceptance, not server delivery.

Prop	Type	Default	Meaning
`dataSource`	`TxSource<ChatMessage> \| undefined`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`user`	`ChatUser`	`required`	Current chat author.
`items`	`ChatMessage[] \| undefined`	`undefined`	Entries; replaced by dataSource when bound.
`inputFieldText`	`string \| undefined`	`undefined`	Controlled message draft.
`title`	`string \| undefined`	`Chat`	View title.
`subtitle`	`string \| undefined`	``	Additional subtitle.
`label`	`string \| undefined`	`Chat`	Label or accessible name.
`placeholder`	`string \| undefined`	`Nachricht schreiben …`	Hint for an empty input.
`emptyText`	`string \| undefined`	`Noch keine Nachrichten. Starte die Unterhaltung.`	Empty state text.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`readOnly`	`boolean \| undefined`	`false`	Prevents value changes.
`loading`	`boolean \| undefined`	`false`	Shows the loading state.
`sending`	`boolean \| undefined`	`false`	Disables sending during an application request.
`maxLength`	`number \| undefined`	`4000`	Maximum text length.
`typingUsers`	`ChatUser[] \| undefined`	`[]`	Authors currently typing.
`showAvatar`	`boolean \| undefined`	`true`	Shows author avatars.
`showUserName`	`boolean \| undefined`	`true`	Shows author names.
`showDayHeaders`	`boolean \| undefined`	`true`	Groups messages using day headers.
`showMessageTimestamp`	`boolean \| undefined`	`true`	Shows message timestamps.
`locale`	`string \| undefined`	`de-DE`	Locale for date/time formatting.

Events

Event	Payload / behavior
update:items	New items value; accept using v-model:items (modelValue: v-model).
update:inputFieldText	New inputFieldText value; accept using v-model:inputFieldText (modelValue: v-model).
messageEntered	ChatMessageEnteredEvent; set cancel synchronously to start custom server processing.
messageSent	ChatMessageEvent after local acceptance.
typingStart	ChatTypingEvent when typing starts.
typingEnd	ChatTypingEvent when typing ends.

Slots

Slot	Arguments
header	{ user }
empty	()
message	{ message, isOwn }

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TxChat, type ChatMessage } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const messages = ref<ChatMessage[]>([])
</script>

<template>
  <TxChat v-model:items="messages" :user="{ id: 'me', name: 'Alex' }" />
</template>

TxChat.