From 28d1b394d1254c4824c7772c097624032af16633 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 7 Jul 2026 04:46:53 +0000
Subject: [PATCH 1/3] feat: add suggested questions to chat widget empty state

- Provide guidance for users in the AI assistant empty state
- Add interactive chips for common questions
- Implement handleSuggestedQuestion helper in chat hook
- Document UX pattern in .jules/palette.md
- Ensure keyboard accessibility and proper ARIA labels
---
 src/components/chat/client.tsx         | 29 +++++++++++++++++++++++---
 src/components/chat/use-chat-widget.ts | 13 ++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/chat/client.tsx b/src/components/chat/client.tsx
index 41f977d..61a9852 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 (
     <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="flat"
+                      onPress={() => handleSuggestedQuestion(q)}
+                      className="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"
+                      aria-label={`Ask: ${q}`}
+                    >
+                      {q}
+                    </Button>
+                  ))}
+                </div>
               </div>
             )}
             {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,
   };

From 9d32e03635214c4b73024b17ca0e7eefd8eae007 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 7 Jul 2026 04:56:26 +0000
Subject: [PATCH 2/3] feat: add suggested questions to chat widget empty state

- Provide guidance for users in the AI assistant empty state
- Add interactive chips for common questions
- Implement handleSuggestedQuestion helper in chat hook
- Fix TypeScript error by using valid Button variant ("ghost")
- Document UX pattern in .jules/palette.md
- Ensure keyboard accessibility and proper ARIA labels
---
 src/components/chat/client.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chat/client.tsx b/src/components/chat/client.tsx
index 61a9852..8f3e37c 100644
--- a/src/components/chat/client.tsx
+++ b/src/components/chat/client.tsx
@@ -75,7 +75,7 @@ export default function ChatWidgetClient() {
                     <Button
                       key={q}
                       size="sm"
-                      variant="flat"
+                      variant="ghost"
                       onPress={() => handleSuggestedQuestion(q)}
                       className="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"
                       aria-label={`Ask: ${q}`}

From 2ec8010b3ec2b8986de69495cea89ec26a401cea Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 7 Jul 2026 09:46:05 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20suggested?=
 =?UTF-8?q?=20questions=20to=20chat=20empty=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added suggested questions to Miro AI assistant for better user guidance.
- Implemented `handleSuggestedQuestion` in `useChatWidget` hook.
- Extracted suggestion button styles to `.chat-suggestion-btn` in `globals.css`.
- Fixed invalid Button variant (changed `flat` to `ghost`).
- Added accessibility labels to suggestion buttons.
---
 src/app/globals.css            | 4 ++++
 src/components/chat/client.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

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 8f3e37c..6a3333e 100644
--- a/src/components/chat/client.tsx
+++ b/src/components/chat/client.tsx
@@ -77,7 +77,7 @@ export default function ChatWidgetClient() {
                       size="sm"
                       variant="ghost"
                       onPress={() => handleSuggestedQuestion(q)}
-                      className="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"
+                      className="chat-suggestion-btn"
                       aria-label={`Ask: ${q}`}
                     >
                       {q}