Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/actions.md
+++ b/docs/components/actions.md
@@ -0,0 +1,195 @@
+# 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>',
+  },
+}}
+/>