From 0bf25f40a9436fe42b7315517f46d4a657ff4f63 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Fri, 13 Feb 2026 23:55:26 +0000
Subject: [PATCH] feat: add suggestion chips to empty chat state

Clickable example prompts appear when a session has no messages,
giving users quick-start ideas. 2x2 grid on desktop, stacked on mobile.
Fully i18n'd (EN/FR).
---
 src/components/Chat.tsx | 19 ++++++++++++++++++-
 src/lib/i18n.ts         | 10 ++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 7e76ec5..f7d3fb4 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -3,7 +3,7 @@ import { ChatMessageComponent } from './ChatMessage';
 import { ChatInput } from './ChatInput';
 import { TypingIndicator } from './TypingIndicator';
 import type { ChatMessage, ConnectionStatus } from '../types';
-import { Bot, ArrowDown, Loader2, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { Bot, ArrowDown, Loader2, ChevronsDownUp, ChevronsUpDown, Sparkles } from 'lucide-react';
 import { MessageSearch } from './MessageSearch';
 import { useT } from '../hooks/useLocale';
 import { getLocale, type TranslationKey } from '../lib/i18n';
@@ -248,6 +248,23 @@ export function Chat({ messages, isGenerating, isLoadingHistory, status, session
               </div>
               <div className="text-lg text-pc-text font-semibold">{t('chat.welcome')}</div>
               <div className="text-sm mt-1 text-pc-text-muted">{t('chat.welcomeSub')}</div>
+              <div className="mt-8 flex flex-col items-center gap-3 max-w-md w-full">
+                <div className="flex items-center gap-1.5 text-xs text-pc-text-faint">
+                  <Sparkles size={12} />
+                  <span>{t('chat.suggestions')}</span>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full">
+                  {(['chat.suggestion1', 'chat.suggestion2', 'chat.suggestion3', 'chat.suggestion4'] as const).map((key) => (
+                    <button
+                      key={key}
+                      onClick={() => onSend(t(key))}
+                      className="text-left text-sm px-4 py-3 rounded-2xl border border-pc-border bg-pc-elevated/30 text-pc-text-secondary hover:bg-[var(--pc-hover)] hover:text-pc-text hover:border-[var(--pc-accent-dim)] transition-all duration-200 leading-snug"
+                    >
+                      {t(key)}
+                    </button>
+                  ))}
+                </div>
+              </div>
             </div>
           )}
           {visibleMessages.map(({ msg, showSep, isFirstInGroup }) => {
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
index 3fd7f92..f0e5b5c 100644
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -34,6 +34,11 @@ const en = {
   // Chat
   'chat.welcome': 'PinchChat',
   'chat.welcomeSub': 'Send a message to get started',
+  'chat.suggestions': 'Try asking...',
+  'chat.suggestion1': 'Summarize my recent emails',
+  'chat.suggestion2': "What's on my calendar today?",
+  'chat.suggestion3': 'Search the web for latest news',
+  'chat.suggestion4': 'Help me write a script',
   'chat.loadingHistory': 'Loading messages…',
   'chat.inputPlaceholder': 'Type a message…',
   'chat.inputLabel': 'Message',
@@ -158,6 +163,11 @@ const fr: Record<keyof typeof en, string> = {
 
   'chat.welcome': 'PinchChat',
   'chat.welcomeSub': 'Envoyez un message pour commencer',
+  'chat.suggestions': 'Essayez par exemple...',
+  'chat.suggestion1': 'Résume mes derniers emails',
+  'chat.suggestion2': "Qu'est-ce que j'ai au calendrier aujourd'hui ?",
+  'chat.suggestion3': 'Cherche sur le web les dernières actus',
+  'chat.suggestion4': "Aide-moi à écrire un script",
   'chat.loadingHistory': 'Chargement des messages…',
   'chat.inputPlaceholder': 'Tapez un message…',
   'chat.inputLabel': 'Message',