|
| 1 | +<script setup lang="ts"> |
| 2 | +import { Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector } from '@repo/elements/branch' |
| 3 | +import { Message, MessageAvatar, MessageContent } from '@repo/elements/message' |
| 4 | +import { nanoid } from 'nanoid' |
| 5 | +
|
| 6 | +interface SimpleMessage { |
| 7 | + id: string |
| 8 | + content: string |
| 9 | +} |
| 10 | +
|
| 11 | +const userMessages: SimpleMessage[] = [ |
| 12 | + { id: nanoid(), content: 'What are the key strategies for optimizing Vue performance?' }, |
| 13 | + { id: nanoid(), content: 'How can I improve the performance of my Vue application?' }, |
| 14 | + { id: nanoid(), content: 'What performance optimization techniques should I use in Vue?' }, |
| 15 | +] |
| 16 | +
|
| 17 | +const assistantMessages: SimpleMessage[] = [ |
| 18 | + { id: nanoid(), content: 'Here\'s the first response to your question. This approach focuses on performance optimization.' }, |
| 19 | + { id: nanoid(), content: 'Here\'s an alternative response. This approach emphasizes code readability and maintainability over pure performance.' }, |
| 20 | + { id: nanoid(), content: 'And here\'s a third option. This balanced approach considers both performance and maintainability, making it suitable for most use cases.' }, |
| 21 | +] |
| 22 | +
|
| 23 | +function handleBranchChange(branchIndex: number) { |
| 24 | + // eslint-disable-next-line no-console |
| 25 | + console.log('Branch changed to:', branchIndex) |
| 26 | +} |
| 27 | +</script> |
| 28 | + |
| 29 | +<template> |
| 30 | + <div class="space-y-8"> |
| 31 | + <Branch :default-branch="0" :on-branch-change="handleBranchChange"> |
| 32 | + <BranchMessages> |
| 33 | + <Message v-for="message in userMessages" :key="message.id" from="user"> |
| 34 | + <MessageContent>{{ message.content }}</MessageContent> |
| 35 | + <MessageAvatar name="Hayden Bleasel" src="https://github.com/haydenbleasel.png" /> |
| 36 | + </Message> |
| 37 | + </BranchMessages> |
| 38 | + <BranchSelector from="user"> |
| 39 | + <BranchPrevious /> |
| 40 | + <BranchPage /> |
| 41 | + <BranchNext /> |
| 42 | + </BranchSelector> |
| 43 | + </Branch> |
| 44 | + |
| 45 | + <Branch :default-branch="0" :on-branch-change="handleBranchChange"> |
| 46 | + <BranchMessages> |
| 47 | + <Message v-for="message in assistantMessages" :key="message.id" from="assistant"> |
| 48 | + <MessageContent>{{ message.content }}</MessageContent> |
| 49 | + <MessageAvatar name="AI" src="https://github.com/openai.png" /> |
| 50 | + </Message> |
| 51 | + </BranchMessages> |
| 52 | + <BranchSelector from="assistant"> |
| 53 | + <BranchPrevious /> |
| 54 | + <BranchPage /> |
| 55 | + <BranchNext /> |
| 56 | + </BranchSelector> |
| 57 | + </Branch> |
| 58 | + </div> |
| 59 | +</template> |
0 commit comments