🎨 Palette: Add suggested questions to chat assistant

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;
 }

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 (
     <div
       className={`chat-widget ${
@@ -58,9 +65,25 @@ export default function ChatWidgetClient() {
             className="chat-messages-container"
           >
             {messages.length === 0 && !isLoading && (
-              <div className="chat-empty-state">
-                Hi! I'm Miro. Ask me anything about Amr's experience, projects,
-                or skills 🙂
+              <div className="chat-empty-state flex-col gap-4">
+                <div className="text-center">
+                  Hi! I&apos;m Miro. Ask me anything about Amr&apos;s
+                  experience, projects, or skills 🙂
+                </div>
+                <div className="flex flex-col gap-2 w-full max-w-[280px]">
+                  {suggestedQuestions.map((q) => (
+                    <Button
+                      key={q}
+                      size="sm"
+                      variant="ghost"
+                      onPress={() => handleSuggestedQuestion(q)}
+                      className="chat-suggestion-btn"
+                      aria-label={`Ask: ${q}`}
+                    >
+                      {q}
+                    </Button>
+                  ))}
+                </div>
               </div>
             )}
             {messages.map((m, index) => (

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,
   };