ChatAi

Assistant chat with a message log, a typing indicator and an input.

Import

Vue

import { UiChatAi } from '@ziyarago/ui/vue'

Conversation

ZiyaraGo AssistantAsk about packages

Which package includes a hotel near the Haram?

The Premium Umrah package includes a 5-star hotel 100 m from the Haram.

Vue

<UiChatAi
  title="ZiyaraGo Assistant"
  subtitle="Ask about packages"
  placeholder="Ask about your trip..."
  :messages="[{ role: 'user', text: 'Which package includes a hotel near the Haram?' }, { role: 'ai', text: 'The Premium Umrah package includes a 5-star hotel 100 m from the Haram.' }]"
 />

Typing

Assistant

What is the visa deadline?

Vue

<UiChatAi
  title="Assistant"
  loading
  :messages="[{ role: 'user', text: 'What is the visa deadline?' }]"
 />

API reference

Chat panel with message bubbles, a typing indicator and an input, for AI assistant UIs.

Props

PropType and valuesDefaultDescription

messagesrequired{ role: 'user' | 'ai'; text: string }[][]Conversation in order. Any role other than "user" renders as an assistant bubble.

loadingbooleanfalseShows the typing dots and disables sending.

titlestring'Assistant'Header title; also the aria-label. The header renders only when set.

subtitlestring—Muted text next to the title.

placeholderstring'Ask anything…'Input placeholder.

Events

Vue: @name. React: onName.

sendCalled with the trimmed message text when the user presses Enter or the send button. The component does not append it to messages.

Notes

Append the user message and the reply to messages yourself; set loading while waiting.