update css for follow up examples

climateqa/engine/chains/follow_up.py

@@ -15,6 +15,7 @@ def make_follow_up_node(llm):
     prompt = ChatPromptTemplate.from_template(FOLLOW_UP_TEMPLATE)
     
     def generate_follow_up(state):
+        print("---- Generate_follow_up ----")
         if not state.get("answer"):
             return state
             

front/tabs/chat_interface.py

@@ -54,9 +54,9 @@ def create_chat_interface(tab):
         max_height="80vh",
         height="100vh"
     )
-    with gr.Row(elem_id="follow-up-examples"):
+    with gr.Accordion("Click here for follow up questions examples", elem_id="follow-up-examples",open = False):
         follow_up_examples_hidden = gr.Textbox(visible=False, elem_id="follow-up-hidden")
-        follow_up_examples = gr.Examples(examples=[ ], label="Follow up questions", inputs= [follow_up_examples_hidden], elem_id="follow-up-button", run_on_click=False)
+        follow_up_examples = gr.Examples(examples=[], label="", inputs= [follow_up_examples_hidden], elem_id="follow-up-button", run_on_click=False)
 
     with gr.Row(elem_id="input-message"):
         

style.css

@@ -29,8 +29,6 @@ main.flex.flex-1.flex-col {
 }
 
 
-}
-
 .tab-nav {
     border: none !important;
 }
@@ -111,15 +109,18 @@ main.flex.flex-1.flex-col {
     border: none;
 }
 
-#input-textbox > label > textarea {
+#input-textbox > label > div > textarea {
     border-radius: 40px;
     padding-left: 30px;
     resize: none;
-    background-color: #f0f8ff; /* Light blue background */
+    background-color: #d7e2ed; /* Light blue background */
     border: 2px solid #4b8ec3; /* Blue border */
     font-size: 16px; /* Increase font size */
     color: #333; /* Text color */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
+    ::placeholder {
+        color: #4b4747; /* Darker placeholder color */
+    }
 }
 
 #input-message > div {
@@ -481,14 +482,29 @@ a {
 
 /* Follow-up Examples Styles */
 #follow-up-examples {
-    height: 15vh;
+    max-height: 20vh;
     overflow-y: auto;
-    padding: 10px 0;
+    gap: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    background: rgb(229, 235, 237);
 }
 
 #follow-up-button {
-    height: 100%;
-    overflow-y: auto;
+    overflow-y: visible;
+    display: block;
+    padding: 8px 12px;
+    margin: 4px 0;
+    border-radius: 8px;
+    background-color: #f0f8ff;
+    transition: background-color 0.2s;
+    background: rgb(240, 240, 236);
+
+}
+
+#follow-up-button:hover {
+    background-color: #e0f0ff;
 }
 
 /* Media Queries */
@@ -518,8 +534,8 @@ a {
     }
 
     div#chatbot {
-        height: 65vh !important;
-        max-height: 65vh !important;
+        height: 70vh !important;
+        max-height: 70vh !important;
     }
 
     div#chatbot-row {
@@ -544,7 +560,7 @@ a {
     }
 
     #follow-up-examples {
-        height: 100px;
+        max-height: 150px;
     }
 
     #submit-button {