Enhancements on UI of Product Creation with AI - Progress bar and label with dynamic color and text

[pmusolino]

Some feedback shared by @joe-keenan about some improvements to be made after this #13280. More context: C03L1NF1EA3/p1720618158166209

• Just hide the advice block until the field is focused, or at least one character has been typed.
• Hide the keyboard tapping on the view or swiping down near the top of the keyboard (currently works when generate button is disabled, but not when it’s enabled) <- this last point it's tricky and doesn't seems common in our other views.
• Fix spacing between the text field and the advice box, and between the progress bar and the advice (fixed in a previous PR).
• Add a thin dividing line on top of the “Generate” button section.
• The screen automatically scrolls the text field to the top when gaining focus to ensure that the advice box is not overlayed by the keyboard, or when the user is typing in the text field, it will be maintained on top
• Change the number of words for the progress bar

[dangermattic]

🚫 Please add a type label (e.g. type: enhancement) and a feature label (e.g. feature: stats) to this issue.