diff --git a/src/app/globals.css b/src/app/globals.css index 751c86c..ad2cb62 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -350,6 +350,10 @@ @apply bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white min-w-8 w-8 h-8 shadow-md hover:scale-105 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary; } +.chat-suggestion-btn { + @apply text-xs bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/40 rounded-xl h-auto py-2 px-3 whitespace-normal text-left justify-start border border-indigo-100/50 dark:border-indigo-800/30 transition-all active:scale-95; +} + .chat-toggle-trigger { @apply h-14 w-14 rounded-full bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white shadow-xl hover:scale-110 hover:shadow-indigo-500/30 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary; } diff --git a/src/components/chat/client.tsx b/src/components/chat/client.tsx index 41f977d..6a3333e 100644 --- a/src/components/chat/client.tsx +++ b/src/components/chat/client.tsx @@ -24,10 +24,17 @@ export default function ChatWidgetClient() { copiedId, copyToClipboard, handleEdit, + handleSuggestedQuestion, isFilterBarVisible, status, } = useChatWidget(); + const suggestedQuestions = [ + "What are Amr's core technical skills?", + "Tell me about his most recent projects.", + "What was his PhD research about?", + ]; + return (
{messages.length === 0 && !isLoading && ( -
- Hi! I'm Miro. Ask me anything about Amr's experience, projects, - or skills 🙂 +
+
+ Hi! I'm Miro. Ask me anything about Amr's + experience, projects, or skills 🙂 +
+
+ {suggestedQuestions.map((q) => ( + + ))} +
)} {messages.map((m, index) => ( diff --git a/src/components/chat/use-chat-widget.ts b/src/components/chat/use-chat-widget.ts index cf4b1a1..fa928bc 100644 --- a/src/components/chat/use-chat-widget.ts +++ b/src/components/chat/use-chat-widget.ts @@ -109,6 +109,18 @@ export function useChatWidget() { [input, isLoading, sendMessage], ); + const handleSuggestedQuestion = useCallback( + async (question: string) => { + if (isLoading) return; + try { + await sendMessage({ text: question }); + } catch (err) { + console.error("Failed to send suggested question:", err); + } + }, + [isLoading, sendMessage], + ); + const isRateLimited = error?.message?.includes("429") || (error as unknown as { status?: number })?.status === 429; @@ -143,6 +155,7 @@ export function useChatWidget() { copiedId, copyToClipboard, handleEdit, + handleSuggestedQuestion, isFilterBarVisible, status, };