Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget.tsx (TypeScript)

Code before:
                        <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>
                        )}
                        <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"
                          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 && (

Review comment (performance):
Better we use [`<Input type="textarea" />`](https://design.agpt.co/?path=/story/atoms-input--textarea-input) from the design system; otherwise, we slowly start to drift away. 

Code after:
                      {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"