From e0fab7e34ec21641d07ce3f7caef5868271f2071 Mon Sep 17 00:00:00 2001
From: Otto <otto@agpt.co>
Date: Fri, 6 Feb 2026 08:41:06 +0000
Subject: [PATCH] fix(frontend): Improve clarification answer message
 formatting (#11985)

## Summary

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.
```
<img width="748" height="153" alt="image"
src="https://github.com/user-attachments/assets/7231aaab-8ea4-406b-ba31-fa2b6055b82d"
/>

## 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.
```
<img width="619" height="352" alt="image"
src="https://github.com/user-attachments/assets/ef8c1fbf-fb60-4488-b51f-407c1b9e3e44"
/>


## 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 `message.questions` array to preserve original question
order
- Move handler inside conditional block for proper TypeScript type
narrowing

## Why

- The old format was ugly and hard to read (raw keywords, no line
breaks)
- The new format uses a natural "quoting and replying" pattern
- Better readability for both users and the LLM (verified: backend does
NOT parse keywords)

## Linear Ticket

Fixes [SECRT-1822](https://linear.app/autogpt/issue/SECRT-1822)

## Testing

- [ ] Trigger agent creation that requires clarifying questions
- [ ] Fill out the form and submit
- [ ] Verify message appears with new blockquote format
- [ ] Verify questions appear in original order
- [ ] Verify agent generation proceeds correctly

Co-authored-by: Toran Bruce Richards <toran.richards@gmail.com>
---
 .../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}