+
+
+
+
+ {{ message.content }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.content }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/test/app/pages/index.vue b/apps/test/app/pages/index.vue
index 6eb7502..f8101c4 100644
--- a/apps/test/app/pages/index.vue
+++ b/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 },
diff --git a/apps/test/package.json b/apps/test/package.json
index 5faf558..5932bf5 100644
--- a/apps/test/package.json
+++ b/apps/test/package.json
@@ -13,19 +13,19 @@
"dependencies": {
"@repo/elements": "workspace:*",
"@repo/shadcn-vue": "workspace:*",
- "@tailwindcss/vite": "^4.1.12",
- "@vueuse/core": "^13.8.0",
- "ai": "^5.0.28",
+ "@tailwindcss/vite": "^4.1.13",
+ "@vueuse/core": "^13.9.0",
+ "ai": "^5.0.51",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
- "lucide-vue-next": "^0.542.0",
- "nanoid": "^5.1.5",
- "nuxt": "^4.0.3",
+ "lucide-vue-next": "^0.544.0",
+ "nanoid": "^5.1.6",
+ "nuxt": "^4.1.2",
"shadcn-nuxt": "2.2.0",
"tailwind-merge": "^3.3.1",
- "tailwindcss": "^4.1.12",
- "tw-animate-css": "^1.3.7",
- "vue": "^3.5.20",
+ "tailwindcss": "^4.1.13",
+ "tw-animate-css": "^1.4.0",
+ "vue": "^3.5.21",
"vue-router": "^4.5.1"
},
"devDependencies": {
diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index 71b36f0..aa02f2a 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/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.
diff --git a/apps/www/content/2.components/6.branch.md b/apps/www/content/2.components/6.branch.md
new file mode 100644
index 0000000..41e9a87
--- /dev/null
+++ b/apps/www/content/2.components/6.branch.md
@@ -0,0 +1,443 @@
+---
+title: Branch
+description:
+icon: lucide:git-branch
+---
+
+The `Branch` component manages multiple versions of AI messages, allowing users to navigate between different response branches. It provides a clean, modern interface with customizable themes and keyboard-accessible navigation buttons.
+
+::::ComponentLoader{label="Branch" componentName="Branch"}
+::::
+
+## Install using CLI
+
+:::tabs{variant="card"}
+ ::div{label="ai-elements-vue"}
+ ```sh
+ npx ai-elements-vue@latest add branch
+ ```
+ ::
+ ::div{label="shadcn-vue"}
+
+ ```sh
+ npx shadcn-vue@latest add https://registry.ai-elements-vue.com/branch.json
+ ```
+ ::
+:::
+
+## Install Manually
+
+Copy and paste the following files into the same folder.
+
+:::code-group
+ ```vue [Branch.vue]
+
+
+