From 0909845b98bc843fee7a73d183067471fb4127ce Mon Sep 17 00:00:00 2001 From: cwandev <18888351756@163.com> Date: Wed, 24 Sep 2025 19:14:35 +0800 Subject: [PATCH 1/2] feat: add branch component --- README.md | 2 +- apps/test/app/examples/branch.vue | 59 +++ apps/test/app/pages/index.vue | 2 + apps/www/content/1.overview/1.Introduction.md | 3 + apps/www/content/2.components/6.branch.md | 443 ++++++++++++++++++ apps/www/plugins/ai-elements.ts | 2 + package.json | 2 +- packages/elements/src/branch/Branch.vue | 61 +++ .../elements/src/branch/BranchMessages.vue | 52 ++ packages/elements/src/branch/BranchNext.vue | 39 ++ packages/elements/src/branch/BranchPage.vue | 20 + .../elements/src/branch/BranchPrevious.vue | 39 ++ .../elements/src/branch/BranchSelector.vue | 28 ++ packages/elements/src/branch/context.ts | 20 + packages/elements/src/branch/index.ts | 6 + packages/elements/src/index.ts | 1 + packages/examples/src/branch.vue | 59 +++ packages/examples/src/index.ts | 1 + packages/registry/README.md | 2 +- 19 files changed, 838 insertions(+), 3 deletions(-) create mode 100644 apps/test/app/examples/branch.vue create mode 100644 apps/www/content/2.components/6.branch.md create mode 100644 packages/elements/src/branch/Branch.vue create mode 100644 packages/elements/src/branch/BranchMessages.vue create mode 100644 packages/elements/src/branch/BranchNext.vue create mode 100644 packages/elements/src/branch/BranchPage.vue create mode 100644 packages/elements/src/branch/BranchPrevious.vue create mode 100644 packages/elements/src/branch/BranchSelector.vue create mode 100644 packages/elements/src/branch/context.ts create mode 100644 packages/elements/src/branch/index.ts create mode 100644 packages/examples/src/branch.vue 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/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/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] + + +