fix to warning pop up positioning

app.py

@@ -3,6 +3,7 @@ import pandas as pd
 import logging
 import asyncio
 import os
+import time
 from uuid import uuid4
 from datetime import datetime, timedelta
 from pathlib import Path
@@ -22,8 +23,6 @@ import json
 
 # # fetch tokens and model config params
 SPACES_LOG = os.environ["SPACES_LOG"]
-# SPACES_LOG = os.getenv('SPACES_LOG')
-
 model_config = getconfig("model_params.cfg")
 
 # create the local logs repo
@@ -176,11 +175,15 @@ async def chat(query, history, sources, reports, subtype, year, client_ip=None,
     vectorstore = vectorstores["allreports"]
 
     ##------------------------------get context---------------------------------------------- 
-
+    ### adding for assessing computation time
+    start_time = time.time()
     context_retrieved = get_context(vectorstore=vectorstore,query=query,reports=reports,
                                                 sources=sources,subtype=subtype,year=year)
-    
-    # Check if any paragraphs were retrieved - add warning if none found
+    end_time = time.time()
+    print("Time for retriever:",end_time - start_time)
+
+    # WARNING FOR NO CONTEXT: Check if any paragraphs were retrieved, add warning if none found
+    # We use this in the Gradio UI below (displays in the chat dialogue box)
     if not context_retrieved or len(context_retrieved) == 0:
         warning_message = "⚠️ **No relevant information was found in the audit reports pertaining your query.** Please try rephrasing your question or selecting different report filters."
         history[-1] = (query, warning_message)
@@ -249,16 +252,16 @@ async def chat(query, history, sources, reports, subtype, year, client_ip=None,
         "session_duration_seconds": session_duration,
         "client_location": session_data['location_info'],
         "platform": session_data['platform_info'], 
-        # "system_prompt": SYSTEM_PROMPT, #REMOVED FOR TESTING
-        # "sources": sources, #REMOVED FOR TESTING
-        # "reports": reports, #REMOVED FOR TESTING
-        # "subtype": subtype, #REMOVED FOR TESTING
-        "year": year,
+        "system_prompt": SYSTEM_PROMPT, 
+        "sources": sources, 
+        "reports": reports, 
+        "subtype": subtype, 
+        #"year": year,
         "question": query,
         "retriever": model_config.get('retriever','MODEL'),
         "endpoint_type": model_config.get('reader','TYPE'),
         "reader": model_config.get('reader','NVIDIA_MODEL'),
-        # "docs": [doc.page_content for doc in context_retrieved], #REMOVED FOR TESTING
+        "docs": [doc.page_content for doc in context_retrieved],
     }
 
     if model_config.get('reader','TYPE') == 'NVIDIA':
@@ -383,10 +386,10 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
                 chatbot = gr.Chatbot(
                     value=[(None,init_prompt)],
                     show_copy_button=True,show_label = False,elem_id="chatbot",layout = "panel",
-                    avatar_images = (None,"data-collection.png"),
+                    avatar_images = (None,"data-collection.png")
                 )
                 
-                # feedback UI
+                #---------------- FEEDBACK ----------------------
                 with gr.Column(elem_id="feedback-container"):
                     with gr.Row(visible=False) as feedback_row:
                         gr.Markdown("Was this response helpful?")
@@ -395,9 +398,23 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
                             not_okay_btn = gr.Button("👎 Not to expectations", elem_classes="feedback-button")
                     feedback_thanks = gr.Markdown("Thanks for the feedback!", visible=False)
                     feedback_state = gr.State()
-
-
-
+                #---------------- WARNINGS ----------------------
+                # No filters selected warning
+                with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as warning_row:
+                    with gr.Column():
+                        gr.Markdown("<span class='warning-icon'>⚠️</span> **No report filter selected. Are you sure you want to proceed?**")
+                        with gr.Row(elem_classes="warning-buttons"):
+                            proceed_btn = gr.Button("Proceed", elem_classes="proceed")
+                            cancel_btn = gr.Button("Cancel", elem_classes="cancel")
+
+                # Short query warning (< 4 words)
+                with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as short_query_warning_row:
+                    with gr.Column():
+                        gr.Markdown("<span class='warning-icon'>⚠️</span> **Your query is too short. Please lengthen your query to ensure the app has adequate context.**")
+                        with gr.Row(elem_classes="warning-buttons"):
+                            short_query_proceed_btn = gr.Button("OK", elem_classes="proceed")
+
+                #---------------- QUERY INPUT ----------------------
                 with gr.Row(elem_id = "input-message"):
                     textbox=gr.Textbox(placeholder="Ask me anything here!",show_label=False,scale=7,
                                        lines = 1,interactive = True,elem_id="input-textbox")
@@ -710,14 +727,6 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
     warning_state = gr.State(False)
     pending_query = gr.State(None)
 
-    # Warning UI is implemented as a hidden row (to keep it simple)
-    with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as warning_row:
-        with gr.Column():
-            gr.Markdown("<span class='warning-icon'>⚠️</span> **No report filter selected. Are you sure you want to proceed?**")
-            with gr.Row(elem_classes="warning-buttons"):
-                proceed_btn = gr.Button("Proceed", elem_classes="proceed")
-                cancel_btn = gr.Button("Cancel", elem_classes="cancel")
-
     def show_warning():
         """Show warning popup when no filters selected"""
         return gr.update(visible=True)
@@ -782,13 +791,6 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
     # Warn users when query is too short (less than 4 words)
     short_query_warning_state = gr.State(False)
     check_status = gr.State(None)
-    
-    # Short query warning UI - using exact same structure as filters warning
-    with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as short_query_warning_row:
-        with gr.Column():
-            gr.Markdown("<span class='warning-icon'>⚠️</span> **Your query is too short. Please lengthen your query to ensure the app has adequate context.**")
-            with gr.Row(elem_classes="warning-buttons"):
-                short_query_proceed_btn = gr.Button("OK", elem_classes="proceed")
 
     def check_query_length(textbox_value):
         """Check if query has at least 4 words"""

style.css

@@ -56,8 +56,6 @@ body.dark .tip-box * {
 
 .message{
     font-size:14px !important;
-    position: relative;
-    overflow: hidden;
 }
 
 
@@ -182,90 +180,38 @@ label.selected{
 
 @media screen and (min-width: 1024px) {
     div#tab-examples{
-        height: calc(100vh - 190px);
+        height:calc(100vh - 190px) !important;
         overflow-y: auto;
-        max-height: calc(100vh - 190px);
     }
 
     div#sources-textbox{
-        height: calc(100vh - 190px);
-        overflow-y: auto;
-        max-height: calc(100vh - 190px);
+        height:calc(100vh - 190px) !important;
+        overflow-y: auto !important;
     }
 
     div#tab-config{
-        height: calc(100vh - 190px);
-        overflow-y: auto;
-        max-height: calc(100vh - 190px);
+        height:calc(100vh - 190px) !important;
+        overflow-y: auto !important;
     }
 
     div#chatbot-row{
-        height: calc(100vh - 90px);
-        max-height: calc(100vh - 90px);
-        overflow: hidden;
+        height:calc(100vh - 90px) !important;
     }
 
     div#chatbot{
-        height: calc(100vh - 170px);
-        max-height: calc(100vh - 170px);
-        overflow-y: auto;
-        position: relative;
+        height:calc(100vh - 170px) !important;
     }
 
     .max-height{
-        height: calc(100vh - 90px);
-        max-height: calc(100vh - 90px);
-        overflow-y: auto;
-    }
-
-    /* Enhanced containment for right panel */
-    #right-panel {
-        height: calc(100vh - 90px);
-        max-height: calc(100vh - 90px);
-        overflow: hidden;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-    }
-
-    #right-panel > div {
-        height: 100%;
-        max-height: 100%;
-        overflow-y: auto;
-        flex: 1;
-        position: relative;
-    }
-
-    .tabitem {
-        height: calc(100vh - 190px);
-        max-height: calc(100vh - 190px);
+        height:calc(100vh - 90px) !important;
         overflow-y: auto;
-        position: relative;
-        display: flex;
-        flex-direction: column;
     }
 
-    .other-tabs {
-        height: 100%;
-        max-height: 100%;
-        overflow: hidden;
-    }
-
-    .other-tabs > div {
-        padding-left: 40px;
-        padding-right: 40px;
-        padding-top: 10px;
-        height: 100%;
-        max-height: 100%;
-        overflow-y: auto;
-        position: relative;
-    }
-
-    .gallery-item {
-        position: relative;
-        overflow: hidden;
-        max-height: fit-content;
-    }
+    /* .tabitem:nth-child(n+3) {
+        padding-top:30px;
+        padding-left:40px;
+        padding-right:40px;
+    } */
 }
 
 footer {
@@ -414,9 +360,11 @@ span.chatbot > p > img{
 	text-decoration: none !important;
 }
 
+
+
 /* #_______ Feedback UI _______ */
 
-.feedback-button {
+/* .feedback-button {
     border: none;
     padding: 8px 16px;
     border-radius: 4px;
@@ -441,7 +389,7 @@ span.chatbot > p > img{
 .feedback-button {
     min-width: 100px;
     margin: 0 5px;
-}
+} */
 
 /* #_______ Warning "popup" styling _______ */
 #warning-row {
@@ -449,14 +397,18 @@ span.chatbot > p > img{
     border: 1px solid #ffeeba;
     border-radius: 4px;
     padding: 15px 20px;
-    margin: 10px 0; /* Reset margin */
+    margin: 10px 0; 
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    position: left; /* Reset to normal positioning */
+    position: fixed; 
+    bottom: 100px;
+    left: 50%;
+    transform: translateX(-50%); 
     z-index: 1000;
     font-size: 14px;
     color: #856404;
-    width: 65%; /* Approximatation of chatbox width */
-    box-sizing: border-box; 
+    width: 65%; 
+    max-width: 600px; 
+    box-sizing: border-box;
 }
 
 #warning-row.visible {
@@ -568,7 +520,6 @@ span.chatbot > p > img{
     opacity: 1;
 }
 
-/* Arrow for tooltip */
 .question-tooltip .tooltip-content::after {
     content: "";
     position: absolute;