Chat

1<script setup lang="ts">2import { Chat, type ChatAttachment, type ChatMessage, type ChatSendPayload } from '@vitral/vue';3import { onBeforeUnmount, ref } from 'vue';4 5let nextId = 100;6const answers = [7    'Every colour a component draws comes from a token, so a preset changes all of them at once. `dt` overrides them for one instance.',8    'The addon has no framework in it: `createChat(element, config)` draws into any element and returns a handle. The Vue component is a wrapper around that.',9    'The log is one tab stop. The arrows move a message, Home and End jump, and the composer is always one Tab away.'10];11let answer = 0;12 13const messages = ref<ChatMessage[]>([14    { id: 1, role: 'system', content: 'Today' },15    { id: 2, role: 'user', content: 'Can I theme this?', at: new Date(2026, 8, 20, 9, 12) },16    {17        id: 3,18        role: 'assistant',19        author: 'Vitral',20        content: 'Yes — every colour is a token. Ask me anything else.',21        at: new Date(2026, 8, 20, 9, 12),22        citations: [{ title: 'Theming', url: '#' }]23    }24]);25const draft = ref('');26const typing = ref(false);27const staged = ref<ChatAttachment[]>([]);28let timer = 0;29 30function reply() {31    const text = answers[answer % answers.length]!;32    answer++;33    const id = nextId++;34    typing.value = false;35    messages.value = [...messages.value, { id, role: 'assistant', author: 'Vitral', content: '', streaming: true, at: new Date() }];36    // A token at a time, which is what makes the caret worth drawing.37    const words = text.split(' ');38    let at = 0;39    timer = window.setInterval(() => {40        at++;41        const done = at >= words.length;42        messages.value = messages.value.map((m) => (m.id === id ? { ...m, content: words.slice(0, at).join(' '), streaming: !done } : m));43        if (done) window.clearInterval(timer);44    }, 55);45}46 47function send({ text, attachments }: ChatSendPayload) {48    messages.value = [...messages.value, { id: nextId++, role: 'user', content: text, at: new Date(), attachments: attachments.length ? attachments : undefined }];49    draft.value = '';50    staged.value = [];51    typing.value = true;52    window.clearInterval(timer);53    timer = window.setTimeout(reply, 600);54}55 56const attach = (files: File[]) => (staged.value = [...staged.value, ...files.map((f) => ({ name: f.name, size: f.size, type: f.type }))]);57onBeforeUnmount(() => window.clearInterval(timer));58</script>59 60<template>61    <Chat62        v-model:draft="draft"63        v-model:attachments="staged"64        :messages="messages"65        :typing="typing"66        :suggestions="['Can I theme this?', 'Does it need a framework?', 'How does the keyboard work?']"67        allow-attachments68        aria-label="Vitral assistant"69        height="22rem"70        style="width: 100%"71        @send="send"72        @attach="attach"73    />74</template>

1<script setup lang="ts">2import { Chat, type ChatMessage } from '@vitral/vue';3 4const chat: ChatMessage[] = [5    { id: 1, role: 'user', content: 'Are we still on for 3?', at: new Date(2026, 8, 20, 14, 2) },6    { id: 2, role: 'assistant', author: 'Priya', initials: 'PR', content: 'Yes. I pushed the deck.', at: new Date(2026, 8, 20, 14, 4) },7    { id: 3, role: 'assistant', author: 'Priya', initials: 'PR', content: 'Second slide needs your numbers.', at: new Date(2026, 8, 20, 14, 4), attachments: [{ name: 'q3-deck.pdf', size: 2_400_000, url: '#' }] },8    { id: 4, role: 'user', content: 'On it.', at: new Date(2026, 8, 20, 14, 6) }9];10</script>11 12<template>13    <Chat :messages="chat" variant="messenger" placeholder="Reply to Priya" aria-label="Priya" height="18rem" style="width: 100%" />14</template>

1<script setup lang="ts">2import { Chat, type ChatMessage } from '@vitral/vue';3 4const agent: ChatMessage[] = [5    { id: 1, role: 'user', content: 'How many customers churned last month?' },6    {7        id: 2,8        role: 'assistant',9        author: 'Analyst',10        content: 'Fourteen, down from twenty-two in July. The fall is almost all in the Starter plan.',11        toolCalls: [12            { name: 'run_query', input: 'SELECT count(*) FROM churn WHERE month = 8', output: '14', status: 'done' },13            { name: 'compare_period', input: 'month = 7', output: '22', status: 'done' }14        ],15        citations: [{ title: 'churn.sql', url: '#' }]16    },17    { id: 3, role: 'assistant', author: 'Analyst', content: '', toolCalls: [{ name: 'draw_chart', input: 'churn by plan', status: 'running' }] }18];19</script>20 21<template>22    <Chat :messages="agent" variant="agent" readonly aria-label="Analyst" height="20rem" style="width: 100%" />23</template>

1<script setup lang="ts">2import { Chat, type ChatMessage } from '@vitral/vue';3 4const copilot: ChatMessage[] = [5    { id: 1, role: 'user', content: 'Explain this function.' },6    { id: 2, role: 'assistant', content: 'It groups consecutive messages from one speaker so the avatar is drawn once a run rather than once a message.' },7    { id: 3, role: 'user', content: 'What if two people share a role?' },8    { id: 4, role: 'assistant', content: 'Then the author breaks the run: the names differ, so the messages do not join.' }9];10</script>11 12<template>13    <div style="max-width: 22rem; width: 100%">14        <Chat :messages="copilot" variant="copilot" placeholder="Ask about this file" aria-label="Copilot" height="16rem" />15    </div>16</template>

1<script setup lang="ts">2import { Chat, type ChatMessage } from '@vitral/vue';3 4// Speech as it is recognised.5const captions: ChatMessage[] = [6    { id: 1, role: 'assistant', author: 'Ana', content: 'So the second quarter came in ahead of plan.' },7    { id: 2, role: 'user', author: 'You', content: 'By how much?' },8    { id: 3, role: 'assistant', author: 'Ana', content: 'About seven per cent, mostly expansion rather than new logos', streaming: true }9];10</script>11 12<template>13    <Chat :messages="captions" variant="captions" readonly aria-label="Transcript" height="8rem" style="width: 100%" />14</template>

1<script setup lang="ts">2import { Chat, type ChatMessage } from '@vitral/vue';3import { ref } from 'vue';4 5const chat: ChatMessage[] = [6    { id: 1, role: 'user', content: 'Are we still on for 3?', at: new Date(2026, 8, 20, 14, 2) },7    { id: 2, role: 'assistant', author: 'Priya', initials: 'PR', content: 'Yes. I pushed the deck.', at: new Date(2026, 8, 20, 14, 4) },8    { id: 3, role: 'assistant', author: 'Priya', initials: 'PR', content: 'Second slide needs your numbers.', at: new Date(2026, 8, 20, 14, 4), attachments: [{ name: 'q3-deck.pdf', size: 2_400_000, url: '#' }] },9    { id: 4, role: 'user', content: 'On it.', at: new Date(2026, 8, 20, 14, 6) }10];11 12const widgetOpen = ref(false);13</script>14 15<template>16    <div style="display: flex; justify-content: flex-end; width: 100%; min-height: 4rem">17        <Chat v-model:open="widgetOpen" :messages="chat" variant="widget" aria-label="Support" height="18rem" />18    </div>19</template>

1<script setup lang="ts">2import { Chat, type ChatMessage } from '@vitral/vue';3import { ref } from 'vue';4 5const failed: ChatMessage[] = [6    { id: 1, role: 'user', content: 'Summarise the thread.' },7    { id: 2, role: 'assistant', error: 'The model did not answer in time.', retryable: true }8];9 10const retried = ref(0);11</script>12 13<template>14    <Chat :messages="failed" readonly aria-label="Failed answer" height="10rem" style="width: 100%" @retry="retried++" />15    <template v-if="retried"><small style="color: var(--vt-text-muted-color)">Asked again {{ retried }} times</small></template>16</template>