From 2b9d26dce2b859aef6efe351090a14d1d1975afb Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 1 Oct 2025 16:18:53 +0000
Subject: [PATCH 1/2] =?UTF-8?q?I=E2=80=99ve=20fixed=20a=20text=20overflow?=
 =?UTF-8?q?=20issue=20in=20the=20AI-generated=20messages.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component that renders my responses was missing the necessary styling to handle long, unbroken strings of text. This caused text to overflow its container, negatively impacting the user interface.

I’ve resolved the issue by adding the `break-words` CSS class to the `MemoizedReactMarkdown` component in `components/message.tsx`. This ensures that long strings of text will wrap correctly, preventing overflow and improving the overall user experience.

Additionally, I added an `aria-label` to the submit button in `components/chat-panel.tsx` to improve accessibility.
---
 components/chat-panel.tsx | 1 +
 components/message.tsx    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index b3097358..b0bf2166 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -246,6 +246,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
               isMobile ? 'right-1' : 'right-2'
             )}
             disabled={input.length === 0 && !selectedFile}
+            aria-label="Send message"
           >
             <ArrowRight size={isMobile ? 18 : 20} />
           </Button>
diff --git a/components/message.tsx b/components/message.tsx
index e965202c..20184bd0 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -21,7 +21,7 @@ export function BotMessage({ content }: { content: StreamableValue<string> }) {
     <MemoizedReactMarkdown
       rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }], rehypeKatex]}
       remarkPlugins={[remarkGfm, remarkMath]}
-      className="prose-sm prose-neutral prose-a:text-accent-foreground/50"
+      className="prose-sm prose-neutral prose-a:text-accent-foreground/50 break-words"
     >
       {processedData}
     </MemoizedReactMarkdown>

From d14e74eab85ca9f09bd607982c3c188293325d4f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 3 Oct 2025 07:09:48 +0000
Subject: [PATCH 2/2] Fix related query submission

The `submit` action in `app/actions.tsx` was not correctly processing related queries. It only checked for an `input` field in the form data, ignoring the `related_query` field. This caused clicks on related prompts to fail, as their values were never extracted and processed.

This commit resolves the issue by updating the `submit` action to prioritize the `related_query` field when it is available. If the `related_query` field exists in the form data, its value is used as the user input. Otherwise, the action falls back to the `input` field. This ensures that related queries are correctly parsed and submitted to the AI, restoring the intended functionality.
---
 app/actions.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/actions.tsx b/app/actions.tsx
index f438d4c8..f044132a 100644
--- a/app/actions.tsx
+++ b/app/actions.tsx
@@ -54,7 +54,8 @@ async function submit(formData?: FormData, skip?: boolean) {
 
   const userInput = skip
     ? `{"action": "skip"}`
-    : (formData?.get('input') as string);
+    : ((formData?.get('related_query') as string) ||
+      (formData?.get('input') as string))
 
   if (userInput.toLowerCase().trim() === 'what is a planet computer?' || userInput.toLowerCase().trim() === 'what is qcx-terra?') {
     const definition = userInput.toLowerCase().trim() === 'what is a planet computer?'