From 9da27d998e4b77d658e9d86a9b2837a246410390 Mon Sep 17 00:00:00 2001
From: cwandev <18888351756@163.com>
Date: Mon, 22 Sep 2025 13:30:14 +0800
Subject: [PATCH 1/2] feat: add actions component

---
 apps/test/app/examples/actions-hover.vue      | 49 +++++++++++++
 apps/test/app/examples/actions.vue            | 69 ++++++++++++++++++
 apps/test/app/pages/index.vue                 |  4 ++
 packages/elements/src/actions/Action.vue      | 57 +++++++++++++++
 packages/elements/src/actions/Actions.vue     | 19 +++++
 packages/elements/src/actions/index.ts        |  2 +
 packages/elements/src/index.ts                |  1 +
 packages/elements/src/message/Message.vue     | 21 +++---
 .../elements/src/message/MessageContent.vue   |  2 +-
 packages/examples/src/actions-hover.vue       | 49 +++++++++++++
 packages/examples/src/actions.vue             | 70 +++++++++++++++++++
 packages/examples/src/index.ts                |  2 +
 12 files changed, 335 insertions(+), 10 deletions(-)
 create mode 100644 apps/test/app/examples/actions-hover.vue
 create mode 100644 apps/test/app/examples/actions.vue
 create mode 100644 packages/elements/src/actions/Action.vue
 create mode 100644 packages/elements/src/actions/Actions.vue
 create mode 100644 packages/elements/src/actions/index.ts
 create mode 100644 packages/examples/src/actions-hover.vue
 create mode 100644 packages/examples/src/actions.vue

diff --git a/apps/test/app/examples/actions-hover.vue b/apps/test/app/examples/actions-hover.vue
new file mode 100644
index 0000000..eed6452
--- /dev/null
+++ b/apps/test/app/examples/actions-hover.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Action, Actions } from '@repo/elements/actions'
+import { Message, MessageContent } from '@repo/elements/message'
+import { Copy, Heart, RefreshCcw, Share, ThumbsDown, ThumbsUp } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const liked = ref(false)
+const disliked = ref(false)
+const favorited = ref(false)
+
+const responseContent = `This is a response from an assistant.
+
+Try hovering over this message to see the actions appear!`
+
+function handleRetry() {
+  // eslint-disable-next-line no-console
+  console.log('Retrying request...')
+}
+
+function handleCopy(content?: string) {
+  // eslint-disable-next-line no-console
+  console.log('Copied:', content)
+}
+
+function handleShare(content?: string) {
+  // eslint-disable-next-line no-console
+  console.log('Sharing:', content)
+}
+
+const actions = [
+  { icon: RefreshCcw, label: 'Retry', onClick: handleRetry },
+  { icon: ThumbsUp, label: 'Like', onClick: () => (liked.value = !liked.value) },
+  { icon: ThumbsDown, label: 'Dislike', onClick: () => (disliked.value = !disliked.value) },
+  { icon: Copy, label: 'Copy', onClick: () => handleCopy(responseContent) },
+  { icon: Share, label: 'Share', onClick: () => handleShare(responseContent) },
+  { icon: Heart, label: 'Favorite', onClick: () => (favorited.value = !favorited.value) },
+]
+</script>
+
+<template>
+  <Message class="group flex flex-col items-start gap-2" from="assistant">
+    <MessageContent>{{ responseContent }}</MessageContent>
+    <Actions class="mt-2 opacity-0 group-hover:opacity-100">
+      <Action v-for="action in actions" :key="action.label" :label="action.label" @click="action.onClick">
+        <component :is="action.icon" class="size-3" />
+      </Action>
+    </Actions>
+  </Message>
+</template>
diff --git a/apps/test/app/examples/actions.vue b/apps/test/app/examples/actions.vue
new file mode 100644
index 0000000..9e4eded
--- /dev/null
+++ b/apps/test/app/examples/actions.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { Action, Actions } from '@repo/elements/actions'
+import { Conversation, ConversationContent } from '@repo/elements/conversation'
+import { Message, MessageContent } from '@repo/elements/message'
+import { Copy, RefreshCcw, Share, ThumbsDown, ThumbsUp } from 'lucide-vue-next'
+import { nanoid } from 'nanoid'
+import { ref } from 'vue'
+
+interface MsgItem {
+  key: string
+  from: 'user' | 'assistant'
+  content: string
+  avatar: string
+  name: string
+}
+
+const messages: MsgItem[] = [
+  {
+    key: nanoid(),
+    from: 'user',
+    content: 'Hello, how are you?',
+    avatar: 'https://github.com/haydenbleasel.png',
+    name: 'Hayden Bleasel',
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    content: 'I am fine, thank you!',
+    avatar: 'https://github.com/openai.png',
+    name: 'OpenAI',
+  },
+]
+
+const liked = ref(false)
+const disliked = ref(false)
+
+function handleRetry() {}
+function handleCopy() {}
+function handleShare() {}
+
+const actions = [
+  { icon: RefreshCcw, label: 'Retry', onClick: handleRetry },
+  { icon: ThumbsUp, label: 'Like', onClick: () => (liked.value = !liked.value) },
+  { icon: ThumbsDown, label: 'Dislike', onClick: () => (disliked.value = !disliked.value) },
+  { icon: Copy, label: 'Copy', onClick: () => handleCopy() },
+  { icon: Share, label: 'Share', onClick: () => handleShare() },
+]
+</script>
+
+<template>
+  <Conversation class="relative w-full">
+    <ConversationContent>
+      <Message
+        v-for="message in messages"
+        :key="message.key"
+        :from="message.from"
+        class="flex flex-col gap-2"
+        :class="message.from === 'assistant' ? 'items-start' : 'items-end'"
+      >
+        <MessageContent>{{ message.content }}</MessageContent>
+        <Actions v-if="message.from === 'assistant'" class="mt-2">
+          <Action v-for="action in actions" :key="action.label" :label="action.label" @click="action.onClick">
+            <component :is="action.icon" class="size-4" />
+          </Action>
+        </Actions>
+      </Message>
+    </ConversationContent>
+  </Conversation>
+</template>
diff --git a/apps/test/app/pages/index.vue b/apps/test/app/pages/index.vue
index 43cf9c9..6eb7502 100644
--- a/apps/test/app/pages/index.vue
+++ b/apps/test/app/pages/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 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 Conversation from '~/examples/conversation.vue'
 import MessageMarkdown from '~/examples/message-markdown.vue'
 import Message from '~/examples/message.vue'
@@ -8,6 +10,8 @@ import Response from '~/examples/response.vue'
 
 const components = [
   { name: 'Message', Component: Message },
+  { name: 'Actions', Component: Actions },
+  { name: 'ActionsHover', Component: ActionsHover },
   { name: 'PromptInput', Component: PromptInput },
   { name: 'Conversation', Component: Conversation },
   { name: 'Response', Component: Response },
diff --git a/packages/elements/src/actions/Action.vue b/packages/elements/src/actions/Action.vue
new file mode 100644
index 0000000..8d63f98
--- /dev/null
+++ b/packages/elements/src/actions/Action.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+interface Props {
+  class?: string
+  tooltip?: string
+  label?: string
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'ghost',
+  size: 'sm',
+})
+
+const attrs = useAttrs()
+
+const classes = computed(() => cn('relative size-9 p-1.5 text-muted-foreground hover:text-foreground', props.class))
+</script>
+
+<template>
+  <TooltipProvider v-if="props.tooltip">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          :class="classes"
+          :size="props.size"
+          :variant="props.variant"
+          type="button"
+          v-bind="attrs"
+        >
+          <slot />
+          <span class="sr-only">{{ props.label || props.tooltip }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{{ props.tooltip }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+
+  <Button
+    v-else
+    :class="classes"
+    :size="props.size"
+    :variant="props.variant"
+    type="button"
+    v-bind="attrs"
+  >
+    <slot />
+    <span class="sr-only">{{ props.label || props.tooltip }}</span>
+  </Button>
+</template>
diff --git a/packages/elements/src/actions/Actions.vue b/packages/elements/src/actions/Actions.vue
new file mode 100644
index 0000000..5595c14
--- /dev/null
+++ b/packages/elements/src/actions/Actions.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+const attrs = useAttrs()
+
+const classes = computed(() => cn('flex items-center gap-1', props.class))
+</script>
+
+<template>
+  <div :class="classes" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/actions/index.ts b/packages/elements/src/actions/index.ts
new file mode 100644
index 0000000..14f9fb6
--- /dev/null
+++ b/packages/elements/src/actions/index.ts
@@ -0,0 +1,2 @@
+export { default as Action } from './Action.vue'
+export { default as Actions } from './Actions.vue'
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index d0c557d..3856136 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -1,3 +1,4 @@
+export * from './actions'
 export * from './conversation'
 export * from './message'
 export * from './prompt-input'
diff --git a/packages/elements/src/message/Message.vue b/packages/elements/src/message/Message.vue
index 5b0a8d2..0bf699f 100644
--- a/packages/elements/src/message/Message.vue
+++ b/packages/elements/src/message/Message.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
 interface Props {
   from: 'user' | 'assistant'
   class?: string
 }
 
 const props = defineProps<Props>()
+
+const classes = computed(() => cn(
+  'group w-full py-4',
+  props.from === 'user'
+    ? 'is-user flex items-end justify-end gap-2'
+    : 'is-assistant flex flex-row-reverse justify-end gap-2',
+  props.class,
+))
 </script>
 
 <template>
-  <div
-    class="group flex w-full items-end justify-end gap-2 py-4 [&>div]:max-w-[80%]"
-    :class="[
-      props.from === 'user'
-        ? 'is-user'
-        : 'is-assistant flex-row-reverse justify-end',
-      props.class,
-    ]"
-  >
+  <div :class="classes">
     <slot />
   </div>
 </template>
diff --git a/packages/elements/src/message/MessageContent.vue b/packages/elements/src/message/MessageContent.vue
index 1e4d4d8..8f9f5ef 100644
--- a/packages/elements/src/message/MessageContent.vue
+++ b/packages/elements/src/message/MessageContent.vue
@@ -8,7 +8,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const classes = computed(() => [
-  'flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm',
+  'max-w-[80%] flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm',
   'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
   'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
   'is-user:dark',
diff --git a/packages/examples/src/actions-hover.vue b/packages/examples/src/actions-hover.vue
new file mode 100644
index 0000000..eed6452
--- /dev/null
+++ b/packages/examples/src/actions-hover.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Action, Actions } from '@repo/elements/actions'
+import { Message, MessageContent } from '@repo/elements/message'
+import { Copy, Heart, RefreshCcw, Share, ThumbsDown, ThumbsUp } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const liked = ref(false)
+const disliked = ref(false)
+const favorited = ref(false)
+
+const responseContent = `This is a response from an assistant.
+
+Try hovering over this message to see the actions appear!`
+
+function handleRetry() {
+  // eslint-disable-next-line no-console
+  console.log('Retrying request...')
+}
+
+function handleCopy(content?: string) {
+  // eslint-disable-next-line no-console
+  console.log('Copied:', content)
+}
+
+function handleShare(content?: string) {
+  // eslint-disable-next-line no-console
+  console.log('Sharing:', content)
+}
+
+const actions = [
+  { icon: RefreshCcw, label: 'Retry', onClick: handleRetry },
+  { icon: ThumbsUp, label: 'Like', onClick: () => (liked.value = !liked.value) },
+  { icon: ThumbsDown, label: 'Dislike', onClick: () => (disliked.value = !disliked.value) },
+  { icon: Copy, label: 'Copy', onClick: () => handleCopy(responseContent) },
+  { icon: Share, label: 'Share', onClick: () => handleShare(responseContent) },
+  { icon: Heart, label: 'Favorite', onClick: () => (favorited.value = !favorited.value) },
+]
+</script>
+
+<template>
+  <Message class="group flex flex-col items-start gap-2" from="assistant">
+    <MessageContent>{{ responseContent }}</MessageContent>
+    <Actions class="mt-2 opacity-0 group-hover:opacity-100">
+      <Action v-for="action in actions" :key="action.label" :label="action.label" @click="action.onClick">
+        <component :is="action.icon" class="size-3" />
+      </Action>
+    </Actions>
+  </Message>
+</template>
diff --git a/packages/examples/src/actions.vue b/packages/examples/src/actions.vue
new file mode 100644
index 0000000..89a2e07
--- /dev/null
+++ b/packages/examples/src/actions.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Action, Actions } from '@repo/elements/actions'
+import { Conversation, ConversationContent } from '@repo/elements/conversation'
+import { Message, MessageContent } from '@repo/elements/message'
+import { Copy, RefreshCcw, Share, ThumbsDown, ThumbsUp } from 'lucide-vue-next'
+import { nanoid } from 'nanoid'
+import { ref } from 'vue'
+
+interface MsgItem {
+  key: string
+  from: 'user' | 'assistant'
+  content: string
+  avatar: string
+  name: string
+}
+
+const messages: MsgItem[] = [
+  {
+    key: nanoid(),
+    from: 'user',
+    content: 'Hello, how are you?',
+    avatar: 'https://github.com/haydenbleasel.png',
+    name: 'Hayden Bleasel',
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    content: 'I am fine, thank you!',
+    avatar: 'https://github.com/openai.png',
+    name: 'OpenAI',
+  },
+]
+
+const liked = ref(false)
+const disliked = ref(false)
+// removed unused state
+
+function handleRetry() {}
+function handleCopy() {}
+function handleShare() {}
+
+const actions = [
+  { icon: RefreshCcw, label: 'Retry', onClick: handleRetry },
+  { icon: ThumbsUp, label: 'Like', onClick: () => (liked.value = !liked.value) },
+  { icon: ThumbsDown, label: 'Dislike', onClick: () => (disliked.value = !disliked.value) },
+  { icon: Copy, label: 'Copy', onClick: () => handleCopy() },
+  { icon: Share, label: 'Share', onClick: () => handleShare() },
+]
+</script>
+
+<template>
+  <Conversation class="relative w-full">
+    <ConversationContent>
+      <Message
+        v-for="message in messages"
+        :key="message.key"
+        :from="message.from"
+        class="flex flex-col gap-2"
+        :class="message.from === 'assistant' ? 'items-start' : 'items-end'"
+      >
+        <MessageContent>{{ message.content }}</MessageContent>
+        <Actions v-if="message.from === 'assistant'" class="mt-2">
+          <Action v-for="action in actions" :key="action.label" :label="action.label" @click="action.onClick">
+            <component :is="action.icon" class="size-4" />
+          </Action>
+        </Actions>
+      </Message>
+    </ConversationContent>
+  </Conversation>
+</template>
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 520fe96..0d952fd 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -1,3 +1,5 @@
+export { default as ActionsHover } from './actions-hover.vue'
+export { default as Actions } from './actions.vue'
 export { default as Conversation } from './conversation.vue'
 export { default as MessageMarkdown } from './message-markdown.vue'
 export { default as Message } from './message.vue'

From e073bd828ed5643e622c94ee68ca519f9ded9f7e Mon Sep 17 00:00:00 2001
From: cwandev <18888351756@163.com>
Date: Mon, 22 Sep 2025 15:15:07 +0800
Subject: [PATCH 2/2] docs: add actions component documentation

---
 README.md                                     |   2 +-
 apps/www/content/1.overview/1.Introduction.md |   3 +
 apps/www/content/2.components/5.actions.md    | 283 ++++++++++++++++++
 apps/www/plugins/ai-elements.ts               |   4 +
 package.json                                  |   2 +-
 packages/elements/package.json                |   2 +-
 packages/registry/README.md                   |   2 +-
 pnpm-lock.yaml                                |   2 +-
 8 files changed, 295 insertions(+), 5 deletions(-)
 create mode 100644 apps/www/content/2.components/5.actions.md

diff --git a/README.md b/README.md
index bac975a..f083c1a 100644
--- a/README.md
+++ b/README.md
@@ -86,7 +86,7 @@ AI Elements Vue includes the following components:
 | `conversation` | ✅ 已完成 | Container for chat conversations |
 | `response` | ✅ 已完成 | Formatted AI response display |
 | `prompt-input` | ✅ 已完成 | Advanced input component with model selection |
-| `actions` | ❌ 未完成 | Interactive action buttons for AI responses |
+| `actions` | ✅ 已完成 | Interactive action buttons for AI responses |
 | `branch` | ❌ 未完成 | Branch visualization for conversation flows |
 | `code-block` | ❌ 未完成 | Syntax-highlighted code display with copy functionality |
 | `image` | ❌ 未完成 | AI-generated image display component |
diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index b52d343..71b36f0 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/apps/www/content/1.overview/1.Introduction.md
@@ -24,4 +24,7 @@ You can install it with:
 :::ComponentLoader{label="Response" componentName="Response"}
 :::
 
+:::ComponentLoader{label="Actions" componentName="Actions"}
+:::
+
 View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.
diff --git a/apps/www/content/2.components/5.actions.md b/apps/www/content/2.components/5.actions.md
new file mode 100644
index 0000000..8fa5ab5
--- /dev/null
+++ b/apps/www/content/2.components/5.actions.md
@@ -0,0 +1,283 @@
+---
+title: Actions
+description:
+icon: lucide:message-square-more
+---
+
+The `Actions` component provides a flexible row of action buttons for AI responses with common actions like retry, like, dislike, copy, and share.
+
+:::ComponentLoader{label="Actions" componentName="Actions"}
+:::
+
+## Install using CLI
+
+::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add actions
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/actions.json
+  ```
+  ::
+::
+
+## Install Manually
+
+Copy and paste the following code in the same folder.
+
+::code-group
+  ```vue [Actions.vue]
+  <script setup lang="ts">
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  interface Props {
+    class?: string
+  }
+
+  const props = defineProps<Props>()
+  const attrs = useAttrs()
+
+  const classes = computed(() => cn('flex items-center gap-1', props.class))
+  </script>
+
+  <template>
+    <div :class="classes" v-bind="attrs">
+      <slot />
+    </div>
+  </template>
+  ```
+
+  ```vue [Action.vue]
+  <script setup lang="ts">
+  import { Button } from '@repo/shadcn-vue/components/ui/button'
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  interface Props {
+    class?: string
+    tooltip?: string
+    label?: string
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
+    size?: 'default' | 'sm' | 'lg' | 'icon'
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    variant: 'ghost',
+    size: 'sm',
+  })
+
+  const attrs = useAttrs()
+
+  const classes = computed(() => cn('relative size-9 p-1.5 text-muted-foreground hover:text-foreground', props.class))
+  </script>
+
+  <template>
+    <TooltipProvider v-if="props.tooltip">
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button
+            :class="classes"
+            :size="props.size"
+            :variant="props.variant"
+            type="button"
+            v-bind="attrs"
+          >
+            <slot />
+            <span class="sr-only">{{ props.label || props.tooltip }}</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{{ props.tooltip }}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <Button
+      v-else
+      :class="classes"
+      :size="props.size"
+      :variant="props.variant"
+      type="button"
+      v-bind="attrs"
+    >
+      <slot />
+      <span class="sr-only">{{ props.label || props.tooltip }}</span>
+    </Button>
+  </template>
+  ```
+
+  ```ts [index.ts]
+  export { default as Action } from './Action.vue'
+  export { default as Actions } from './Actions.vue'
+  ```
+::
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ThumbsUp } from 'lucide-vue-next'
+import { Action, Actions } from '@/components/ai-elements/actions'
+</script>
+
+<template>
+  <Actions class="mt-2">
+    <Action label="Like">
+      <ThumbsUp class="size-4" />
+    </Action>
+  </Actions>
+</template>
+```
+
+## Usage with AI SDK
+
+Build a simple chat UI where the user can copy or regenerate the most recent message.
+
+Add the following component to your frontend:
+
+```vue filename="app/page.vue"
+<script setup lang="ts">
+import { Copy, RefreshCcw } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { Action, Actions } from '@/components/ai-elements/actions'
+import { Conversation, ConversationContent } from '@/components/ai-elements/conversation'
+import { Message, MessageContent } from '@/components/ai-elements/message'
+import { PromptInput, PromptInputSubmit, PromptInputTextarea } from '@/components/ai-elements/prompt-input'
+import { Response } from '@/components/ai-elements/response'
+
+interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+}
+
+const messages = ref<Message[]>([])
+const input = ref('')
+
+function handleSubmit() {
+  if (input.value.trim()) {
+    messages.value.push({
+      id: Date.now().toString(),
+      role: 'user',
+      content: input.value,
+    })
+    input.value = ''
+  }
+}
+
+function handleRetry() {
+  // Regenerate the last assistant message
+  console.log('Retry clicked')
+}
+
+function handleCopy(text: string) {
+  navigator.clipboard.writeText(text)
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+    <div class="flex flex-col h-full">
+      <Conversation>
+        <ConversationContent>
+          <Message
+            v-for="message in messages"
+            :key="message.id"
+            :from="message.role"
+            class="flex flex-col gap-2"
+            :class="message.role === 'assistant' ? 'items-start' : 'items-end'"
+          >
+            <MessageContent>
+              <Response>{{ message.content }}</Response>
+            </MessageContent>
+            <Actions v-if="message.role === 'assistant'" class="mt-2">
+              <Action
+                label="Retry"
+                @click="handleRetry"
+              >
+                <RefreshCcw class="size-3" />
+              </Action>
+              <Action
+                label="Copy"
+                @click="handleCopy(message.content)"
+              >
+                <Copy class="size-3" />
+              </Action>
+            </Actions>
+          </Message>
+        </ConversationContent>
+      </Conversation>
+
+      <PromptInput
+        class="mt-4 w-full max-w-2xl mx-auto relative"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="input"
+          placeholder="Say something..."
+          class="pr-12"
+        />
+        <PromptInputSubmit
+          :disabled="!input.trim()"
+          class="absolute bottom-1 right-1"
+        />
+      </PromptInput>
+    </div>
+  </div>
+</template>
+```
+
+## Features
+
+- Row of composable action buttons with consistent styling
+- Support for custom actions with tooltips
+- State management for toggle actions (like, dislike, favorite)
+- Keyboard accessible with proper ARIA labels
+- Clipboard and Web Share API integration
+- TypeScript support with proper type definitions
+- Consistent with design system styling
+
+## Examples
+
+:::ComponentLoader{label="ActionsHover" componentName="ActionsHover"}
+:::
+
+## Props
+
+### `<Actions />`
+
+::field-group
+  ::field{name="class" type="string"}
+  Additional classes applied to the root element.
+  ::
+::
+
+### `<Action />`
+
+::field-group
+  ::field{name="tooltip" type="string"}
+  Optional tooltip text shown on hover.
+  ::
+
+  ::field{name="label" type="string"}
+  Accessible label for screen readers. Also used as fallback if tooltip is not provided.
+  ::
+
+  ::field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'"}
+  The visual style variant of the button. Defaults to 'ghost'.
+  ::
+
+  ::field{name="size" type="'default' | 'sm' | 'lg' | 'icon'"}
+  The size of the button. Defaults to 'sm'.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional classes applied to the button element.
+  ::
+::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index 04cd32a..24e31ec 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -1,4 +1,6 @@
 import {
+  Actions,
+  ActionsHover,
   Conversation,
   Message,
   MessageMarkdown,
@@ -15,6 +17,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('ComponentLoader', ComponentLoader)
   vueApp.component('ComponentViewer', ComponentViewer)
 
+  vueApp.component('Actions', Actions)
+  vueApp.component('ActionsHover', ActionsHover)
   vueApp.component('Message', Message)
   vueApp.component('MessageMarkdown', MessageMarkdown)
   vueApp.component('PromptInput', PromptInput)
diff --git a/package.json b/package.json
index 87a2939..92a2f93 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ai-elements-vue",
   "version": "0.1.1",
   "private": true,
-  "packageManager": "pnpm@10.15.1",
+  "packageManager": "pnpm@10.17.0",
   "engines": {
     "node": ">=20.19.0"
   },
diff --git a/packages/elements/package.json b/packages/elements/package.json
index 9c802e0..a2c56bf 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@repo/shadcn-vue": "workspace:*",
-    "ai": "^5.0.28",
+    "ai": "^5.0.29",
     "lucide-vue-next": "^0.542.0",
     "streamdown-vue": "^1.0.20",
     "vue": "^3.5.20",
diff --git a/packages/registry/README.md b/packages/registry/README.md
index 420be04..5e3c30c 100644
--- a/packages/registry/README.md
+++ b/packages/registry/README.md
@@ -84,7 +84,7 @@ AI Elements Vue includes the following components:
 | `conversation` | ✅ 已完成 | Container for chat conversations |
 | `response` | ✅ 已完成 | Formatted AI response display |
 | `prompt-input` | ✅ 已完成 | Advanced input component with model selection |
-| `actions` | ❌ 未完成 | Interactive action buttons for AI responses |
+| `actions` | ✅ 已完成 | Interactive action buttons for AI responses |
 | `branch` | ❌ 未完成 | Branch visualization for conversation flows |
 | `code-block` | ❌ 未完成 | Syntax-highlighted code display with copy functionality |
 | `image` | ❌ 未完成 | AI-generated image display component |
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 51c3147..7c55577 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -146,7 +146,7 @@ importers:
         specifier: workspace:*
         version: link:../shadcn-vue
       ai:
-        specifier: ^5.0.28
+        specifier: ^5.0.29
         version: 5.0.39(zod@4.1.5)
       lucide-vue-next:
         specifier: ^0.542.0