fix(frontend): address PR review comments

- Remove unnecessary useCallback from handleClarificationAnswers
- Remove redundant comment for clarification_needed rendering
- Use Input component from design system instead of raw textarea

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

@@ -98,21 +98,17 @@ export function ChatMessage({
     }
   }
 
-  const handleClarificationAnswers = useCallback(
-    function handleClarificationAnswers(answers: Record<string, string>) {
-      // Format answers as context for the tool to retry
-      if (onSendMessage) {
-        const contextMessage = Object.entries(answers)
-          .map(([keyword, answer]) => `${keyword}: ${answer}`)
-          .join("\n");
+  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.`,
-        );
-      }
-    },
-    [onSendMessage],
-  );
+      onSendMessage(
+        `I have the answers to your questions:\n\n${contextMessage}\n\nPlease proceed with creating the agent.`,
+      );
+    }
+  }
 
   const handleCopy = useCallback(
     async function handleCopy() {
@@ -159,7 +155,6 @@ export function ChatMessage({
     );
   }
 
-  // Render clarification needed messages
   if (isClarificationNeeded && message.type === "clarification_needed") {
     return (
       <ClarificationQuestionsWidget

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

@@ -2,6 +2,7 @@
 
 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";
@@ -111,8 +112,11 @@ export function ClarificationQuestionsWidget({
                             Example: {q.example}
                           </Text>
                         )}
-                        <textarea
-                          className="w-full rounded-md border border-slate-200 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                        <Input
+                          type="textarea"
+                          id={`clarification-${q.keyword}-${index}`}
+                          label={q.question}
+                          hideLabel
                           placeholder="Your answer..."
                           rows={2}
                           value={answers[q.keyword] || ""}