Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/suggestion.md
+++ b/docs/components/suggestion.md
@@ -0,0 +1,143 @@
+# Suggestion
+
+URL: /components/suggestion
+
+---
+
+title: Suggestion
+description: A suggestion component that displays a horizontal row of clickable suggestions for user interaction.
+path: elements/components/suggestion
+
+---
+
+The `Suggestion` component displays a horizontal row of clickable suggestions for user interaction.
+
+<Preview path="suggestion" />
+
+## Installation
+
+<ElementsInstaller path="suggestion" />
+
+## Usage
+
+```tsx
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+```
+
+```tsx
+<Suggestions>
+    <Suggestion suggestion="What are the latest trends in AI?" />
+</Suggestions>
+```
+
+## Usage with AI SDK
+
+Build a simple input with suggestions users can click to send a message to the LLM.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { Input, PromptInputTextarea, PromptInputSubmit } from "@/components/ai-elements/prompt-input";
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+import { useState } from "react";
+import { useChat } from "@ai-sdk/react";
+
+const suggestions = ["Can you explain how to play tennis?", "What is the weather in Tokyo?", "How do I make a really good fish taco?"];
+
+const SuggestionDemo = () => {
+    const [input, setInput] = useState("");
+    const { sendMessage, status } = useChat();
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (input.trim()) {
+            sendMessage({ text: input });
+            setInput("");
+        }
+    };
+
+    const handleSuggestionClick = (suggestion: string) => {
+        sendMessage({ text: suggestion });
+    };
+
+    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">
+                <div className="flex flex-col gap-4">
+                    <Suggestions>
+                        {suggestions.map((suggestion) => (
+                            <Suggestion key={suggestion} onClick={handleSuggestionClick} suggestion={suggestion} />
+                        ))}
+                    </Suggestions>
+                    <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>
+        </div>
+    );
+};
+
+export default SuggestionDemo;
+```
+
+## Features
+
+-   Horizontal row of clickable suggestion buttons
+-   Customizable styling with variant and size options
+-   Flexible layout that wraps suggestions on smaller screens
+-   onClick callback that emits the selected suggestion string
+-   Support for both individual suggestions and suggestion lists
+-   Clean, modern styling with hover effects
+-   Responsive design with mobile-friendly touch targets
+-   TypeScript support with proper type definitions
+
+## Examples
+
+### Usage with AI Input
+
+<Preview path="suggestion-input" />
+
+## Props
+
+### `<Suggestions />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying ScrollArea component.',
+    type: 'React.ComponentProps<typeof ScrollArea>',
+  },
+}}
+/>
+
+### `<Suggestion />`
+
+<TypeTable
+type={{
+  suggestion: {
+    description: 'The suggestion string to display and emit on click.',
+    type: 'string',
+  },
+  onClick: {
+    description: 'Callback fired when the suggestion is clicked.',
+    type: '(suggestion: string) => void',
+  },
+  '...props': {
+    description: 'Any other props are spread to the underlying shadcn/ui Button component.',
+    type: 'Omit<React.ComponentProps<typeof Button>, "onClick">',
+  },
+}}
+/>