144 lines
4.1 KiB
Markdown
144 lines
4.1 KiB
Markdown
# 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">',
|
|
},
|
|
}}
|
|
/>
|