Merge branch '26919_chatscreen' into 'master'

26919_chatscreen

See merge request !34

@@ -239,22 +239,21 @@
 }
 }
 
 
 .suggestedrow.title {
 .suggestedrow.title {
-    padding: 100px 20px;
+    padding: 4vw 20px;
 }
 }
 
 
 .suggestedcol ul li {
 .suggestedcol ul li {
     background: #5c6aa529;
     background: #5c6aa529;
     padding: 10px;
     padding: 10px;
     border-radius: 5px;
     border-radius: 5px;
-    margin: 10px 0;
-    margin-top: 10px;
-    margin-right: 0px;
-    margin-bottom: 10px;
-    margin-left: 0px;
+    margin: 0 0 10px;
 }
 }
 
 
 ul.suggested-options {
 ul.suggested-options {
     cursor: pointer;
     cursor: pointer;
+    overflow-x: hidden;
+    height: 200px;
+    padding-right: 5px !important;
 }
 }
 
 
 
 

@@ -176,6 +176,33 @@ span.info {
   display: none;
   display: none;
 }
 }
 
 
+ul.suggested-options::-webkit-scrollbar{
+    /*display: none;*/
+  }
+
+/* Let's get this party started */
+ul.suggested-options::-webkit-scrollbar {
+    width: 8px;
+}
+
+/* Track */
+ul.suggested-options::-webkit-scrollbar-track {
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+
+/* Handle */
+ul.suggested-options::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: #48b0e9;
+}
+ul.suggested-options::-webkit-scrollbar-thumb:window-inactive {
+  background: #4291bd;
+}
+
+
+
 code br:nth-child(-n+2) {
 code br:nth-child(-n+2) {
     display: none;
     display: none;
 }
 }

 const SuggestedOptions = ({ setChatInput }) => {
 const SuggestedOptions = ({ setChatInput }) => {
-  const examples = ["Write an email requesting a 3-day vacation leave to my manager.", "Compose a song about nationalism and love for the country.", "Give me 3 easy-to-cook food recipes that I can prepare for a date night at home."];
+  const examples = [
+    "Write an email requesting a 3-day vacation leave to my manager.",
+    "Compose a song about nationalism and love for the country.",
+    "Give me 3 easy-to-cook food recipes that I can prepare for a date night at home.",
+    "Give me 5 of the best dog shampoos and conditioners I can find on Amazon.",
+    "Write a business pitch for a food truck that serves European-Asian food fusion called EAT Express.",
+    "Write a Youtube script about how to file taxes as a social media influencer in the US.",
+    "Write a resume for an architect with 3 years of experience with green technology and sustainability.",
+    "Give me 7 motivational quotes for start-up businesses to be used in social media posts.",
+    "Write an article outline about the comparison of DC and Marvel movies.",
+    "Give me a one-week itinerary for a trip to Hawaii.",
+    "Write a short children's story about a dolphin that wanted to fly.",
+    "Explain the difference between a samurai and a ninja.",
+    "Explain how to create a blue button in html that turns to yellow on mouse hover."
+    ];
   const handleExampleClick = (example) => {
   const handleExampleClick = (example) => {
     setChatInput(example);
     setChatInput(example);
   };
   };