ChatEmptyState

​

Overview

​

Props

​

TypeScript Interface

interface ChatEmptyStateProps {
  onSuggestionClick: (text: string) => void;
}

​

Usage

import { ChatEmptyState } from "@/components/chat-empty-state";
import { useState } from "react";

function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  const handleSuggestionClick = (text: string) => {
    setInput(text);
    // Optionally auto-submit:
    // handleSubmit(text);
  };

  return (
    <div>
      {messages.length === 0 ? (
        <ChatEmptyState onSuggestionClick={handleSuggestionClick} />
      ) : (
        // Render messages
        <MessageList messages={messages} />
      )}
    </div>
  );
}

​

Features

​

Branding Section

• Bot Icon: Large (16x16) bot icon in an accent-colored circular container
• Title Text: Introduces the @yagolopez/adk-utils npm package with clickable link
• Subtitle: “Some prompt examples:” to introduce suggestion cards
• Centered Layout: Vertically and horizontally centered for visual balance

​

Suggestion Cards

• Mobile: Single column
• Desktop: 3-column grid
• Max Width: 28rem (448px) for optimal readability

• Icon (from Lucide icons library)
• Label (short title)
• Prompt preview (truncated to 2 lines)
• Tooltip with additional information
• Hover effects (border color change, background color change)

​

Suggestions Data

import { suggestions } from "@/lib/constants";

// Example suggestion structure:
// [
//   {
//     label: "Weather",
//     prompt: "What's the weather like today?",
//     icon: Cloud,
//     info: "Ask about current weather conditions"
//   },
//   ...
// ]

​

Visual Design

​

Layout Structure

┌─────────────────────────────────┐
│                                 │
│         🤖 Bot Icon            │
│                                 │
│    Demonstration of...         │
│    Some prompt examples:       │
│                                 │
│  ┌──────┐ ┌──────┐ ┌──────┐   │
│  │ Card │ │ Card │ │ Card │   │
│  │  #1  │ │  #2  │ │  #3  │   │
│  └──────┘ └──────┘ └──────┘   │
│                                 │
└─────────────────────────────────┘

​

Spacing

• Main container: flex-1 with centered content
• Gap between sections: 2rem (32px)
• Gap between cards: 0.75rem (12px)
• Card padding: 1rem (16px)

​

Colors

• Bot icon container: bg-accent/10 with ring-accent/20
• Card background: bg-card
• Card borders: border-border
• Hover state: border-accent/50 and bg-muted
• Link color: text-accent

​

Interactive Behavior

​

Card Click

1. User clicks a suggestion card
2. onSuggestionClick is called with the prompt text
3. Parent component typically:
   • Sets the input value to the prompt
   • Optionally auto-submits the message
   • Scrolls to input field

​

Tooltips

• Position: Bottom
• Content: Additional info about the suggestion
• Provided by @/components/ui/tooltip

​

Accessibility

• Semantic HTML: Uses <button> for interactive cards
• External link attributes: target="_blank" rel="noopener noreferrer"
• Hover states: Clear visual feedback
• Focus states: Inherited from UI components

​

Responsive Design

/* Mobile (< 640px) */
.grid-cols-1

/* Desktop (≥ 640px) */
.sm:grid-cols-3

​

Text Clamping

​

Related Components

​

Source Code