diff --git a/README.md b/README.md index f083c1a..3bf2d6a 100644 --- a/README.md +++ b/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 | diff --git a/apps/registry/package.json b/apps/registry/package.json index 06a58eb..0e94f6b 100644 --- a/apps/registry/package.json +++ b/apps/registry/package.json @@ -9,7 +9,7 @@ "devDependencies": { "@vue/compiler-sfc": "^3.5.21", "h3": "^1.15.4", - "nitropack": "^2.12.4", + "nitropack": "^2.12.6", "ts-morph": "^27.0.0" } } diff --git a/apps/test/app/examples/branch.vue b/apps/test/app/examples/branch.vue new file mode 100644 index 0000000..93839aa --- /dev/null +++ b/apps/test/app/examples/branch.vue @@ -0,0 +1,59 @@ + + + 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] + + + + ``` + + ```vue [BranchMessages.vue] + + + + ``` + + ```vue [BranchPrevious.vue] + + + + ``` + + ```vue [BranchNext.vue] + + + + ``` + + ```vue [BranchPage.vue] + + + + ``` + + ```vue [BranchSelector.vue] + + +