RK-A2

1) Theme Selector Reference Image - https://drive.google.com/file/d/1CB9XFJ8hGpj-PVCSIQgUSq4THOZ_sZsq/view?usp=sharing

Refer the image linked above. The bubbles cutoff on the left/right indicate that the bubbles can be horizontally scrolled & more bubbles are available on the left/right side of the screen. There are only 3 rows of bubbles and multiple columns which can be horizontally scroll-able. This will be make sure the Theme Selector Container doesn't take too much space as compared to the actual Chat Interface. We have to implement this in our Chat Interface UI.

2) Post #3664 implementation, we will have to show " chosen styles " by default when the user clicks on the Theme Button. After implementing #1, we have to make sure that the default chosen styles are shown in the middle of the Theme Selector Container & should not be cutoff/hidden on left/right sides of the container.

3) This should for all laptop/tablet/mobile screens

4) for starters, TCs needed to covered ---
4.1) Chosen Themes > Unchosen Themes
4.2) Chosen Themes < Unchosen Themes
4.3) Chosen Themes === Unchosen Themes
4.4) Chosen Themes NOT present
4.5) Only Chosen Themes present
4.6) Either Chosen Themes or Unchosen Themes are present in low numbers such that more than -
4.6.1) 2 rows cannot be formed
4.6.2) more than 1 row cannot be formed