Components
Loading preview...
An input field that allows users to enter and submit text to an AI model.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/prompt-input"use client"
import {
PromptInput,
PromptInputAction,
PromptInputActions,
PromptInputTextarea,
} from "@/components/ui/prompt-input"
import { Button } from "@/components/ui/button"
import { ArrowUp, Square } from "lucide-react"
import { useState } from "react"
export function PromptInputBasic() {
const [input, setInput] = useState("")
const [isLoading, setIsLoading] = useState(false)
const handleSubmit = () => {
setIsLoading(true)
setTimeout(() => {
setIsLoading(false)
}, 2000)
}
const handleValueChange = (value: string) => {
setInput(value)
}
return (
<PromptInput
value={input}
onValueChange={handleValueChange}
isLoading={isLoading}
onSubmit={handleSubmit}
className="w-full max-w-[350px]"
>
<PromptInputTextarea placeholder="Ask me anything..." />
<PromptInputActions className="justify-end pt-2">
<PromptInputAction
tooltip={isLoading ? "Stop generation" : "Send message"}
>
<Button
variant="default"
size="icon"
className="h-8 w-8 rounded-full"
onClick={handleSubmit}
>
{isLoading ? (
<Square className="size-5 fill-current" />
) : (
<ArrowUp className="size-5" />
)}
</Button>
</PromptInputAction>
</PromptInputActions>
</PromptInput>
)
}