Rich Prompt Input with Smart Suggestions

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/chat/chat4.tsx instead.

Usage

The file also exports chat4Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Chat4, chat4Demo } from "@/components/blocks/chat/chat4";

export default function Page() {
  return <Chat4 {...chat4Demo} />;
}

Props

Types

export interface PromptSuggestion {
  id: string;
  title: string;
  prompt: string;
}

Behavior notes

• Only the suggestion-card-fills-input behavior is real: clicking a card sets the controlled Textarea's value via useState.
• The attachment and image-upload icon buttons are decorative, they have no onClick handler and don't open any file picker.
• The model-selector dropdown is an uncontrolled, decorative <select> with no real model-switching logic behind it.
• The send button is decorative and does not submit or call any API.
• The textarea auto-expands via the Textarea component's built-in field-sizing-content CSS, no JS resize logic.