feat: add branch component

Author: cwandev

README.md

@@ -87,7 +87,7 @@ AI Elements Vue includes the following components:
 | `response` | ✅ 已完成 | Formatted AI response display |
 | `prompt-input` | ✅ 已完成 | Advanced input component with model selection |
 | `actions` | ✅ 已完成 | Interactive action buttons for AI responses |
-| `branch` | ❌ 未完成 | Branch visualization for conversation flows |
+| `branch` | ✅ 已完成 | Branch visualization for conversation flows |
 | `code-block` | ❌ 未完成 | Syntax-highlighted code display with copy functionality |
 | `image` | ❌ 未完成 | AI-generated image display component |
 | `inline-citation` | ❌ 未完成 | Inline source citations |

apps/test/app/examples/branch.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector } from '@repo/elements/branch'
+import { Message, MessageAvatar, MessageContent } from '@repo/elements/message'
+import { nanoid } from 'nanoid'
+
+interface SimpleMessage {
+  id: string
+  content: string
+}
+
+const userMessages: SimpleMessage[] = [
+  { id: nanoid(), content: 'What are the key strategies for optimizing Vue performance?' },
+  { id: nanoid(), content: 'How can I improve the performance of my Vue application?' },
+  { id: nanoid(), content: 'What performance optimization techniques should I use in Vue?' },
+]
+
+const assistantMessages: SimpleMessage[] = [
+  { id: nanoid(), content: 'Here\'s the first response to your question. This approach focuses on performance optimization.' },
+  { id: nanoid(), content: 'Here\'s an alternative response. This approach emphasizes code readability and maintainability over pure performance.' },
+  { id: nanoid(), content: 'And here\'s a third option. This balanced approach considers both performance and maintainability, making it suitable for most use cases.' },
+]
+
+function handleBranchChange(branchIndex: number) {
+  // eslint-disable-next-line no-console
+  console.log('Branch changed to:', branchIndex)
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <Branch :default-branch="0" :on-branch-change="handleBranchChange">
+      <BranchMessages>
+        <Message v-for="message in userMessages" :key="message.id" from="user">
+          <MessageContent>{{ message.content }}</MessageContent>
+          <MessageAvatar name="Hayden Bleasel" src="https://github.com/haydenbleasel.png" />
+        </Message>
+      </BranchMessages>
+      <BranchSelector from="user">
+        <BranchPrevious />
+        <BranchPage />
+        <BranchNext />
+      </BranchSelector>
+    </Branch>
+
+    <Branch :default-branch="0" :on-branch-change="handleBranchChange">
+      <BranchMessages>
+        <Message v-for="message in assistantMessages" :key="message.id" from="assistant">
+          <MessageContent>{{ message.content }}</MessageContent>
+          <MessageAvatar name="AI" src="https://github.com/openai.png" />
+        </Message>
+      </BranchMessages>
+      <BranchSelector from="assistant">
+        <BranchPrevious />
+        <BranchPage />
+        <BranchNext />
+      </BranchSelector>
+    </Branch>
+  </div>
+</template>

apps/test/app/pages/index.vue

@@ -2,6 +2,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@repo/shadcn-vue/components/ui/card'
 import ActionsHover from '~/examples/actions-hover.vue'
 import Actions from '~/examples/actions.vue'
+import Branch from '~/examples/branch.vue'
 import Conversation from '~/examples/conversation.vue'
 import MessageMarkdown from '~/examples/message-markdown.vue'
 import Message from '~/examples/message.vue'
@@ -11,6 +12,7 @@ import Response from '~/examples/response.vue'
 const components = [
   { name: 'Message', Component: Message },
   { name: 'Actions', Component: Actions },
+  { name: 'Branch', Component: Branch },
   { name: 'ActionsHover', Component: ActionsHover },
   { name: 'PromptInput', Component: PromptInput },
   { name: 'Conversation', Component: Conversation },

apps/www/content/1.overview/1.Introduction.md

@@ -27,4 +27,7 @@ You can install it with:
 :::ComponentLoader{label="Actions" componentName="Actions"}
 :::
 
+:::ComponentLoader{label="Branch" componentName="Branch"}
+:::
+
 View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.