From 5c0a30e7286af4280196302b5ba45c246ff0b3e8 Mon Sep 17 00:00:00 2001
From: Otto <otto@agpt.co>
Date: Thu, 5 Feb 2026 20:01:47 +0000
Subject: [PATCH] fix(frontend): Improve clarification answer message
 formatting

Improves the auto-generated message format when users submit clarification
answers in the agent generator:

Before:
  I have the answers to your questions:
  keyword_1: User answer 1
  keyword_2: User answer 2
  Please proceed with creating the agent.

After:
  **Here are my answers:**
  > What is the primary purpose?
  User answer 1
  > What is the target audience?
  User answer 2
  Please proceed with creating the agent.

Changes:
- Use human-readable question text instead of machine-readable keywords
- Use blockquote format for questions (natural "quote and reply" pattern)
- Use double newlines for proper Markdown paragraph breaks
- Iterate over questions array to preserve original question order
- Move handler inside conditional for proper TypeScript type narrowing

Fixes SECRT-1822
---
 .../components/ChatMessage/ChatMessage.tsx    | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
index 851c3b33e8..44dae40eb4 100644
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
@@ -102,18 +102,6 @@ export function ChatMessage({
     }
   }
 
-  function handleClarificationAnswers(answers: Record<string, string>) {
-    if (onSendMessage) {
-      const contextMessage = Object.entries(answers)
-        .map(([keyword, answer]) => `${keyword}: ${answer}`)
-        .join("\n");
-
-      onSendMessage(
-        `I have the answers to your questions:\n\n${contextMessage}\n\nPlease proceed with creating the agent.`,
-      );
-    }
-  }
-
   const handleCopy = useCallback(
     async function handleCopy() {
       if (message.type !== "message") return;
@@ -162,6 +150,22 @@ export function ChatMessage({
         .slice(index + 1)
         .some((m) => m.type === "message" && m.role === "user");
 
+    const handleClarificationAnswers = (answers: Record<string, string>) => {
+      if (onSendMessage) {
+        // Iterate over questions (preserves original order) instead of answers
+        const contextMessage = message.questions
+          .map((q) => {
+            const answer = answers[q.keyword] || "";
+            return `> ${q.question}\n\n${answer}`;
+          })
+          .join("\n\n");
+
+        onSendMessage(
+          `**Here are my answers:**\n\n${contextMessage}\n\nPlease proceed with creating the agent.`,
+        );
+      }
+    };
+
     return (
       <ClarificationQuestionsWidget
         questions={message.questions}