feat(frontend): implement clarification questions UI for agent generation (#11833)

## Summary
Add interactive UI to collect user answers when the agent-generator
service returns clarifying questions during agent creation/editing.

Previously, when the backend asked clarifying questions, the frontend
would just display them as text with no way for users to answer. This
caused the chat to keep retrying without the necessary context.

## Changes
- **ChatMessageData type**: Add `clarification_needed` variant with
questions field
- **ClarificationQuestionsWidget**: New component with interactive form
to collect answers
- **parseToolResponse**: Detect and parse `clarification_needed`
responses from backend
- **ChatMessage**: Render the widget when clarification is needed

## How It Works
1. User requests to create/edit agent
2. Backend returns `ClarificationNeededResponse` with list of questions
3. Frontend shows interactive form with text inputs for each question
4. User fills in answers and clicks "Submit Answers"
5. Answers are sent back as context to the tool
6. Backend receives full context and continues

## UI Features
- Shows all questions with examples (if provided)
- Input validation (all questions must be answered to submit)
- Visual feedback (checkmarks when answered)
- Numbered questions for clarity
- Submit button disabled until all answered
- Follows same design pattern as `credentials_needed` flow

## Related
- Backend support for clarification was added in #11819
- Fixes the issue shown in the screenshot where users couldn't answer
clarifying questions

## Test plan
- [ ] Test creating agent that requires clarifying questions
- [ ] Verify questions are displayed in interactive form
- [ ] Verify all questions must be answered before submitting
- [ ] Verify answers are sent back to backend as context
- [ ] Verify agent creation continues with full context

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/helpers.ts

@@ -213,6 +213,23 @@ export function parseToolResponse(
         timestamp: timestamp || new Date(),
       };
     }
+    if (responseType === "clarification_needed") {
+      return {
+        type: "clarification_needed",
+        toolName,
+        questions:
+          (parsedResult.questions as Array<{
+            question: string;
+            keyword: string;
+            example?: string;
+          }>) || [],
+        message:
+          (parsedResult.message as string) ||
+          "I need more information to proceed.",
+        sessionId: (parsedResult.session_id as string) || "",
+        timestamp: timestamp || new Date(),
+      };
+    }
     if (responseType === "need_login") {
       return {
         type: "login_needed",

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx

@@ -14,6 +14,7 @@ import { AgentCarouselMessage } from "../AgentCarouselMessage/AgentCarouselMessa
 import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
 import { AuthPromptWidget } from "../AuthPromptWidget/AuthPromptWidget";
 import { ChatCredentialsSetup } from "../ChatCredentialsSetup/ChatCredentialsSetup";
+import { ClarificationQuestionsWidget } from "../ClarificationQuestionsWidget/ClarificationQuestionsWidget";
 import { ExecutionStartedMessage } from "../ExecutionStartedMessage/ExecutionStartedMessage";
 import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
 import { NoResultsMessage } from "../NoResultsMessage/NoResultsMessage";
@@ -69,6 +70,7 @@ export function ChatMessage({
     isToolResponse,
     isLoginNeeded,
     isCredentialsNeeded,
+    isClarificationNeeded,
   } = useChatMessage(message);
   const displayContent = getDisplayContent(message, isUser);
 
@@ -96,6 +98,18 @@ 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;
@@ -141,6 +155,17 @@ export function ChatMessage({
     );
   }
 
+  if (isClarificationNeeded && message.type === "clarification_needed") {
+    return (
+      <ClarificationQuestionsWidget
+        questions={message.questions}
+        message={message.message}
+        onSubmitAnswers={handleClarificationAnswers}
+        className={className}
+      />
+    );
+  }
+
   // Render login needed messages
   if (isLoginNeeded && message.type === "login_needed") {
     // If user is already logged in, show success message instead of auth prompt

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/useChatMessage.ts

@@ -91,6 +91,18 @@ export type ChatMessageData =
       credentialsSchema?: Record<string, any>;
       message: string;
       timestamp?: string | Date;
+    }
+  | {
+      type: "clarification_needed";
+      toolName: string;
+      questions: Array<{
+        question: string;
+        keyword: string;
+        example?: string;
+      }>;
+      message: string;
+      sessionId: string;
+      timestamp?: string | Date;
     };
 
 export function useChatMessage(message: ChatMessageData) {
@@ -111,5 +123,6 @@ export function useChatMessage(message: ChatMessageData) {
     isAgentCarousel: message.type === "agent_carousel",
     isExecutionStarted: message.type === "execution_started",
     isInputsNeeded: message.type === "inputs_needed",
+    isClarificationNeeded: message.type === "clarification_needed",
   };
 }

autogpt_platform/frontend/src/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Card } from "@/components/atoms/Card/Card";
+import { Input } from "@/components/atoms/Input/Input";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { CheckCircleIcon, QuestionIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+
+export interface ClarifyingQuestion {
+  question: string;
+  keyword: string;
+  example?: string;
+}
+
+interface Props {
+  questions: ClarifyingQuestion[];
+  message: string;
+  onSubmitAnswers: (answers: Record<string, string>) => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export function ClarificationQuestionsWidget({
+  questions,
+  message,
+  onSubmitAnswers,
+  onCancel,
+  className,
+}: Props) {
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+
+  function handleAnswerChange(keyword: string, value: string) {
+    setAnswers((prev) => ({ ...prev, [keyword]: value }));
+  }
+
+  function handleSubmit() {
+    // Check if all questions are answered
+    const allAnswered = questions.every((q) => answers[q.keyword]?.trim());
+    if (!allAnswered) {
+      return;
+    }
+    onSubmitAnswers(answers);
+  }
+
+  const allAnswered = questions.every((q) => answers[q.keyword]?.trim());
+
+  return (
+    <div
+      className={cn(
+        "group relative flex w-full justify-start gap-3 px-4 py-3",
+        className,
+      )}
+    >
+      <div className="flex w-full max-w-3xl gap-3">
+        <div className="flex-shrink-0">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500">
+            <QuestionIcon className="h-4 w-4 text-indigo-50" weight="bold" />
+          </div>
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <Card className="space-y-4 p-4">
+            <div>
+              <Text variant="h4" className="mb-1 text-slate-900">
+                I need more information
+              </Text>
+              <Text variant="small" className="text-slate-600">
+                {message}
+              </Text>
+            </div>
+
+            <div className="space-y-3">
+              {questions.map((q, index) => {
+                const isAnswered = !!answers[q.keyword]?.trim();
+
+                return (
+                  <div
+                    key={`${q.keyword}-${index}`}
+                    className={cn(
+                      "relative rounded-lg border p-3",
+                      isAnswered
+                        ? "border-green-500 bg-green-50/50"
+                        : "border-slate-200 bg-white/50",
+                    )}
+                  >
+                    <div className="mb-2 flex items-start gap-2">
+                      {isAnswered ? (
+                        <CheckCircleIcon
+                          size={16}
+                          className="mt-0.5 text-green-500"
+                          weight="bold"
+                        />
+                      ) : (
+                        <div className="mt-0.5 flex h-4 w-4 items-center justify-center rounded-full border border-slate-300 bg-white text-xs text-slate-500">
+                          {index + 1}
+                        </div>
+                      )}
+                      <div className="flex-1">
+                        <Text
+                          variant="small"
+                          className="mb-2 font-semibold text-slate-900"
+                        >
+                          {q.question}
+                        </Text>
+                        {q.example && (
+                          <Text
+                            variant="small"
+                            className="mb-2 italic text-slate-500"
+                          >
+                            Example: {q.example}
+                          </Text>
+                        )}
+                        <Input
+                          type="textarea"
+                          id={`clarification-${q.keyword}-${index}`}
+                          label={q.question}
+                          hideLabel
+                          placeholder="Your answer..."
+                          rows={2}
+                          value={answers[q.keyword] || ""}
+                          onChange={(e) =>
+                            handleAnswerChange(q.keyword, e.target.value)
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="flex gap-2">
+              <Button
+                onClick={handleSubmit}
+                disabled={!allAnswered}
+                className="flex-1"
+                variant="primary"
+              >
+                Submit Answers
+              </Button>
+              {onCancel && (
+                <Button onClick={onCancel} variant="outline">
+                  Cancel
+                </Button>
+              )}
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}