Landing Page Quick Prompts

Quick prompts are pre-configured suggestion buttons displayed on the landing page that allow users to instantly start a conversation with common queries.

Performance Benefits

Quick prompts with precomputed context skip LLM extraction entirely, saving 1-3 seconds per request. This provides instant search results by bypassing the context understanding pipeline.

File Locations

File	Purpose
`app/config/quickPrompts.ts`	Primary configuration - Prompt data, labels, and precomputed context
`components/ServiceCards.tsx`	Rendering component - Visual styling and click handling
`app/api/chat/services/context-understanding/hint-prioritization.ts`	Prioritized categories - Source of truth for occasion-based categories
`app/api/chat/orchestrators/context-orchestrator/gift-defaults.ts`	Gift defaults - Prioritized categories for general gifts

Quick Prompts Configuration

Location

app/config/quickPrompts.ts

Data Structure

export type QuickPrompt = {
  id: string                    // Unique identifier (used for styling lookup)
  label: string                 // Display text on the button
  prompt: string                // Actual prompt sent to the AI
  emoji?: string                // Optional emoji (currently unused in UI)
  precomputed?: {               // Optional precomputed context for performance
    intent: 'product_search' | 'general_gift' | 'housewarming_gift' | 'birthday_gift' | 'valentines_day_gift'
    productType?: string        // Primary product type (optional)
    category?: string           // Primary category (optional)
    categoryHints?: string[]    // Array of prioritized category names
    productTypeHints?: string[] // Array of prioritized product types
    occasion?: string           // Occasion for gift searches (e.g., 'valentines_day')
    confidence: number          // Context confidence (1.0 for precomputed)
    isPopularQuery?: boolean    // Prioritize popular items
  }
}

Current Configuration

The quick prompts use prioritized categories from the hint-prioritization system to ensure consistent, high-quality results:

Prompt ID	Intent	Occasion	Category Source
`valentines_gifts`	`valentines_day_gift`	`valentines_day`	`hint-prioritization.ts` lines 144-168
`top_books`	`product_search`	-	`isPopularQuery: true`
`crime_thriller`	`product_search`	-	Direct category: `Krimi ja põnevus`
`cheap_books`	`product_search`	-	Books with discount filtering
`used_books`	`product_search`	-	Books with used/new filtering
`find_gift`	`general_gift`	-	`gift-defaults.ts` PRIORITIZED_GIFT_CATEGORIES

Precomputed Context System

How It Works

When a user clicks a quick prompt:

Landing Page (app/page.tsx) stores precomputed context in sessionStorage
Chat Pipeline (pipeline.ts) retrieves and passes it to the API
Context Orchestrator (extract-context/index.ts) uses createPrecomputedContext() to bypass LLM extraction
Search proceeds immediately with the pre-defined categories

User Click → sessionStorage → Pipeline → API → createPrecomputedContext() → Search
                                                    ↓
                                          (Skips LLM - saves 1-3s)

Extended Precomputed Fields

The precomputed context now supports rich category configuration:

precomputed: {
  intent: 'valentines_day_gift',
  occasion: 'valentines_day',           // Sets occasion for gift context
  productTypeHints: [                   // Priority order of product types
    'Ilu ja stiil',                     // Priority 1
    'Kingitused',                       // Priority 2
    'Kodu ja aed',                      // Priority 3
    'Raamat'                            // Priority 4
  ],
  categoryHints: [                      // Tiered priority categories
    // Tier 1: Beauty & keepsakes
    'Ehted',
    'Kosmeetika ja kehahooldus',
    // Tier 2: Ambiance
    'Küünlad ja lõhnastajad',
    // Tier 3: Books (lower priority)
    'Luule',
    'Kaasaegne romantika'
  ],
  confidence: 1.0
}

Category Sources

Valentine's Day (from `hint-prioritization.ts`)

// Source: OCCASION_HINT_PRIORITY_RULES (lines 144-168)
productTypes: [
  'Ilu ja stiil',       // Priority 1: Jewelry, cosmetics, accessories
  'Kingitused',         // Priority 2: Cards, keepsakes, wrap
  'Kodu ja aed',        // Priority 3: Candles, vases, decor
  'Raamat'              // Priority 4: Romance/poetry books
],
categories: [
  // Tier 1: Beauty & keepsakes
  'Ehted',
  'Kosmeetika ja kehahooldus',
  'Ilutarvikud',
  // Tier 2: Ambiance & decor
  'Küünlad ja lõhnastajad',
  'Vaasid ja toalilletarbed',
  'Kruusid',
  'Pildiraamid',
  // Tier 3: Sentimental/romance books
  'Luule',
  'Kaasaegne romantika',
  'Kinkeraamatud',
  'Postkaardid ja kaardid'
]

General Gifts (from `gift-defaults.ts`)

// Source: PRIORITIZED_GIFT_CATEGORIES (lines 105-127)
categories: [
  // Jewelry & Beauty
  'Ehted',
  'Ilutarvikud',
  // Gift Sets & Cards
  'Kirja ja kirjutusvahendite kinkekomplektid',
  'Peotarbed',
  // Home Items
  'Kruusid',
  // Games & Toys
  'Pehmed mänguasjad',
  'Pere- ja seltskonnamängud',
  'Pusled 100-999 tükki',
  // Gift Cards
  'ra kinkekaardid'
]

How to Add a New Quick Prompt

Step 1: Define the Prompt

Add to app/config/quickPrompts.ts:

{
  id: 'birthday_gifts',
  label: 'Sünnipäevakingid',
  emoji: '🎂',
  prompt: 'Otsin sünnipäevakingitusi.',
  // Use categories from hint-prioritization.ts OCCASION_HINT_PRIORITY_RULES
  precomputed: {
    intent: 'birthday_gift',
    occasion: 'birthday',
    productTypeHints: ['Raamat', 'Mängud', 'Kodu ja aed', 'Kingitused', 'Ilu ja stiil'],
    categoryHints: [
      // From hint-prioritization.ts birthday section (lines 44-63)
      'Pere- ja seltskonnamängud',
      'Pusled 100-999 tükki',
      'Kaardimängud',
      'Kinkeraamatud',
      'Luule',
      'Kosmeetika ja kehahooldus',
      'Ehted',
      'Kruusid',
      'Küünlad ja lõhnastajad'
    ],
    confidence: 1.0
  }
}

Step 2: Add Styling

In components/ServiceCards.tsx:

const getPromptStyling = (promptId: string) => {
  const styleMap: Record<string, { ... }> = {
    'birthday_gifts': {
      icon: Cake,                       // Import from lucide-react
      color: 'bg-pink-500/90',
      textColor: 'text-pink-100',
      hoverColor: 'hover:bg-pink-400'
    }
  }
}

Step 3: Import the Icon

import { Heart, User, BookOpen, Zap, Percent, Users, Cake } from 'lucide-react'

Important Guidelines

✅ Always Use Precomputed Context

All quick prompts should have precomputed context to skip LLM extraction and provide instant results.

✅ Use Prioritized Categories from Source Files

Don't invent categories. Copy them from:

hint-prioritization.ts → OCCASION_HINT_PRIORITY_RULES for occasion-based gifts
gift-defaults.ts → PRIORITIZED_GIFT_CATEGORIES for general gifts
convex/data/category_product_type_map.ts → For valid category names

✅ Validate Category Names

All categories must exist in the taxonomy. Check against:

convex/data/category_product_type_map.ts

❌ Don't Set Budget to 0-0

The createPrecomputedContext function leaves budget undefined. If you set budget: { min: 0, max: 0 }, the AI will say "0-0€ eelarvega" which looks wrong.

❌ Don't Use Non-Existent Categories

Invalid category names will cause search failures. Always verify against the taxonomy.

Visual Styling

Icon Mapping

Prompt ID	Icon	Color
`valentines_gifts`	Heart	Red
`top_books`	BookOpen	Blue
`crime_thriller`	Users	Purple
`cheap_books`	Percent	Yellow
`used_books`	User	Gray
`find_gift`	Zap	Green

Responsive Behavior

Mobile: Horizontal scroll with overflow-x-auto
Desktop: Wrapped flexbox with sm:flex-wrap
Maximum width: max-w-lg (mobile) / max-w-2xl (desktop)

Animation

Quick prompts use Motion.Dev for smooth animations:

// Entry animation (staggered)
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{
  duration: 0.4,
  delay: 1.1 + index * 0.05,  // Staggered by 50ms per card
  ease: [0.25, 0.1, 0.25, 1]
}}

// Exit animation (when navigating to chat)
animate={{ opacity: 0, y: 30, scale: 0.9 }}
transition={{
  duration: 0.3,
  delay: 0.32 + index * 0.025
}}

app/
├── config/
│   └── quickPrompts.ts                    # Prompt configuration
├── page.tsx                               # Landing page (handleQuickPrompt)
├── api/chat/
│   ├── services/context-understanding/
│   │   └── hint-prioritization.ts         # Occasion-based prioritized categories
│   └── orchestrators/context-orchestrator/
│       ├── gift-defaults.ts               # General gift prioritized categories
│       └── extract-context/
│           └── index.ts                   # createPrecomputedContext()
├── chat/hooks/useMessageStreaming/
│   └── pipeline.ts                        # Reads precomputed from sessionStorage
components/
└── ServiceCards.tsx                       # Rendering component
convex/data/
└── category_product_type_map.ts           # Valid category taxonomy

Best Practices

Always use precomputed context - Skip LLM extraction for 1-3s faster responses
Copy categories from source files - Use exact values from hint-prioritization.ts or gift-defaults.ts
Validate category names - Check against category_product_type_map.ts
Keep labels concise - Max ~20 characters for mobile display
Use Estonian for labels and prompts
Test on mobile - Ensure horizontal scroll works smoothly
Match icon to content - Use intuitive Lucide icons
Maintain 6 prompts max - More causes overflow issues on smaller screens

Performance Benefits​

File Locations​

Quick Prompts Configuration​

Location​

Data Structure​

Current Configuration​

Precomputed Context System​

How It Works​

Extended Precomputed Fields​

Category Sources​

Valentine's Day (from hint-prioritization.ts)​

General Gifts (from gift-defaults.ts)​

How to Add a New Quick Prompt​

Step 1: Define the Prompt​

Step 2: Add Styling​

Step 3: Import the Icon​

Important Guidelines​

✅ Always Use Precomputed Context​

✅ Use Prioritized Categories from Source Files​

✅ Validate Category Names​

❌ Don't Set Budget to 0-0​

❌ Don't Use Non-Existent Categories​

Visual Styling​

Icon Mapping​

Responsive Behavior​

Animation​

Related Files​

Best Practices​