Chat Suggestion Item

1
2
3'use client';

import { Lightbulb } from 'lucide-react';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/chat-suggestion-item.json

Usage#

import { ChatSuggestionItem } from '@/components/data-entry/chat-suggestion-item';

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <SparklesIcon />
    </EmptyMedia>
    <EmptyTitle>Start a conversation</EmptyTitle>
    <EmptyDescription>Ask anything</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <ItemGroup>
      <ChatSuggestionItem prompt="summarise this" onSelectPrompt={send}>
        <ItemMedia variant="icon">
          <FileTextIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Summarise</ItemTitle>
        </ItemContent>
      </ChatSuggestionItem>
    </ItemGroup>
  </EmptyContent>
</Empty>

The consumer composes the empty state and each item's content around it. Use it for a starter prompt in an empty conversation; a plain upstream Item fits a row that is not itself selectable.

API reference#

ChatSuggestionItem#

Renders a button and takes every prop a button takes, plus:

An upstream Item at size="sm", rendered as this button; upstream's own hover matches only a, so this draws hover:bg-muted itself while enabled, merging className against the Item recipe. Picking it hands prompt to onSelectPrompt, after the caller's own onClick, unless that call preventDefault()s. Without onSelectPrompt it renders disabled - a read-only preview - unless disabled says otherwise. It sets data-slot="chat-suggestion-item".