196 lines
6.5 KiB
Markdown
196 lines
6.5 KiB
Markdown
# Actions
|
|
|
|
URL: /components/actions
|
|
|
|
---
|
|
|
|
title: Actions
|
|
description: A row of composable action buttons for AI responses, including retry, like, dislike, copy, share, and custom actions.
|
|
path: elements/components/actions
|
|
|
|
---
|
|
|
|
The `Actions` component provides a flexible row of action buttons for AI responses with common actions like retry, like, dislike, copy, and share.
|
|
|
|
<Preview path="actions" />
|
|
|
|
## Installation
|
|
|
|
<ElementsInstaller path="actions" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Actions, Action } from "@/components/ai-elements/actions";
|
|
import { ThumbsUpIcon } from "lucide-react";
|
|
```
|
|
|
|
```tsx
|
|
<Actions className="mt-2">
|
|
<Action label="Like">
|
|
<ThumbsUpIcon className="size-4" />
|
|
</Action>
|
|
</Actions>
|
|
```
|
|
|
|
## 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:
|
|
|
|
```tsx title="app/page.tsx"
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Actions, Action } from "@/components/ai-elements/actions";
|
|
import { Message, MessageContent } from "@/components/ai-elements/message";
|
|
import { Conversation, ConversationContent, ConversationScrollButton } from "@/components/ai-elements/conversation";
|
|
import { Input, PromptInputTextarea, PromptInputSubmit } from "@/components/ai-elements/prompt-input";
|
|
import { Response } from "@/components/ai-elements/response";
|
|
import { RefreshCcwIcon, CopyIcon } from "lucide-react";
|
|
import { useChat } from "@ai-sdk/react";
|
|
import { Fragment } from "react";
|
|
|
|
const ActionsDemo = () => {
|
|
const [input, setInput] = useState("");
|
|
const { messages, sendMessage, status, regenerate } = useChat();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (input.trim()) {
|
|
sendMessage({ text: input });
|
|
setInput("");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
|
|
<div className="flex flex-col h-full">
|
|
<Conversation>
|
|
<ConversationContent>
|
|
{messages.map((message, messageIndex) => (
|
|
<Fragment key={message.id}>
|
|
{message.parts.map((part, i) => {
|
|
switch (part.type) {
|
|
case "text":
|
|
const isLastMessage = messageIndex === messages.length - 1;
|
|
|
|
return (
|
|
<Fragment key={`${message.id}-${i}`}>
|
|
<Message from={message.role}>
|
|
<MessageContent>
|
|
<Response>{part.text}</Response>
|
|
</MessageContent>
|
|
</Message>
|
|
{message.role === "assistant" && isLastMessage && (
|
|
<Actions>
|
|
<Action onClick={() => regenerate()} label="Retry">
|
|
<RefreshCcwIcon className="size-3" />
|
|
</Action>
|
|
<Action onClick={() => navigator.clipboard.writeText(part.text)} label="Copy">
|
|
<CopyIcon className="size-3" />
|
|
</Action>
|
|
</Actions>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
})}
|
|
</Fragment>
|
|
))}
|
|
</ConversationContent>
|
|
<ConversationScrollButton />
|
|
</Conversation>
|
|
|
|
<Input onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
|
|
<PromptInputTextarea
|
|
value={input}
|
|
placeholder="Say something..."
|
|
onChange={(e) => setInput(e.currentTarget.value)}
|
|
className="pr-12"
|
|
/>
|
|
<PromptInputSubmit
|
|
status={status === "streaming" ? "streaming" : "ready"}
|
|
disabled={!input.trim()}
|
|
className="absolute bottom-1 right-1"
|
|
/>
|
|
</Input>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ActionsDemo;
|
|
```
|
|
|
|
Add the following route to your backend:
|
|
|
|
```tsx title="api/chat/route.ts"
|
|
import { streamText, UIMessage, convertToModelMessages } from "ai";
|
|
|
|
// Allow streaming responses up to 30 seconds
|
|
export const maxDuration = 30;
|
|
|
|
export async function POST(req: Request) {
|
|
const { model, messages }: { messages: UIMessage[]; model: string } = await req.json();
|
|
|
|
const result = streamText({
|
|
model: "openai/gpt-4o",
|
|
messages: convertToModelMessages(messages),
|
|
});
|
|
|
|
return result.toUIMessageStreamResponse();
|
|
}
|
|
```
|
|
|
|
## 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
|
|
|
|
<Preview path="actions-hover" />
|
|
|
|
## Props
|
|
|
|
### `<Actions />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
'...props': {
|
|
description: 'HTML attributes to spread to the root div.',
|
|
type: 'React.HTMLAttributes<HTMLDivElement>',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### `<Action />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
tooltip: {
|
|
description: 'Optional tooltip text shown on hover.',
|
|
type: 'string',
|
|
},
|
|
label: {
|
|
description:
|
|
'Accessible label for screen readers. Also used as fallback if tooltip is not provided.',
|
|
type: 'string',
|
|
},
|
|
'...props': {
|
|
description:
|
|
'Any other props are spread to the underlying shadcn/ui Button component.',
|
|
type: 'React.ComponentProps<typeof Button>',
|
|
},
|
|
}}
|
|
/>
|