Merge branch 'feature/clean_code' into dev

app.py

@@ -1,54 +1,38 @@
-from climateqa.engine.embeddings import get_embeddings_function
-embeddings_function = get_embeddings_function()
-
-from sentence_transformers import CrossEncoder
-
-# reranker = CrossEncoder("mixedbread-ai/mxbai-rerank-xsmall-v1")
-
-import gradio as gr
-from gradio_modal import Modal
-import pandas as pd
-import numpy as np
+# Import necessary libraries
 import os
+import json
 import time
 import re
-import json
-
-from gradio import ChatMessage
-
-# from gradio_modal import Modal
-
-from io import BytesIO
 import base64
-
 from datetime import datetime
-from azure.storage.fileshare import ShareServiceClient
-
-from utils import create_user_id
+from io import BytesIO
 
+import numpy as np
+import pandas as pd
+import gradio as gr
+from gradio import ChatMessage
 from gradio_modal import Modal
+from sentence_transformers import CrossEncoder
+from azure.storage.fileshare import ShareServiceClient
 
-from PIL import Image
-
-from langchain_core.runnables.schema import StreamEvent
-
-# ClimateQ&A imports
+# Import custom modules
+from climateqa.engine.embeddings import get_embeddings_function
 from climateqa.engine.llm import get_llm
 from climateqa.engine.vectorstore import get_pinecone_vectorstore
-# from climateqa.knowledge.retriever import ClimateQARetriever
 from climateqa.engine.reranker import get_reranker
-from climateqa.engine.embeddings import get_embeddings_function
-from climateqa.engine.chains.prompts import audience_prompts
 from climateqa.sample_questions import QUESTIONS
-from climateqa.constants import POSSIBLE_REPORTS, OWID_CATEGORIES
+from climateqa.constants import POSSIBLE_REPORTS
 from climateqa.utils import get_image_from_azure_blob_storage
 from climateqa.engine.graph import make_graph_agent
-from climateqa.engine.embeddings import get_embeddings_function
 from climateqa.engine.chains.retrieve_papers import find_papers
-
-from front.utils import serialize_docs,process_figures
-
-from climateqa.event_handler import init_audience, handle_retrieved_documents, stream_answer,handle_retrieved_owid_graphs 
+from front.utils import serialize_docs, process_figures
+from climateqa.event_handler import (
+    init_audience,
+    handle_retrieved_documents,
+    stream_answer,
+    handle_retrieved_owid_graphs
+)
+from utils import create_user_id
 
 # Load environment variables in local mode
 try:
@@ -57,8 +41,6 @@ try:
 except Exception as e:
     pass
 
-import requests
-
 # Set up Gradio Theme
 theme = gr.themes.Base(
     primary_hue="blue",
@@ -66,15 +48,26 @@ theme = gr.themes.Base(
     font=[gr.themes.GoogleFont("Poppins"), "ui-sans-serif", "system-ui", "sans-serif"],
 )
 
+# Initialize prompt and system template
+init_prompt = """
+Hello, I am ClimateQ&A, a conversational assistant designed to help you understand climate change and biodiversity loss. I will answer your questions by **sifting through the IPCC and IPBES scientific reports**.
+
+❓ How to use
+- **Language**: You can ask me your questions in any language. 
+- **Audience**: You can specify your audience (children, general public, experts) to get a more adapted answer.
+- **Sources**: You can choose to search in the IPCC or IPBES reports, or both.
+- **Relevant content sources**: You can choose to search for figures, papers, or graphs that can be relevant for your question.
 
+⚠️ Limitations
+*Please note that the AI is not perfect and may sometimes give irrelevant answers. If you are not satisfied with the answer, please ask a more specific question or report your feedback to help us improve the system.*
 
-init_prompt = ""
+🛈 Information
+Please note that we log your questions for meta-analysis purposes, so avoid sharing any sensitive or personal information.
 
-system_template = {
-    "role": "system",
-    "content": init_prompt,
-}
+What do you want to learn ?
+"""
 
+# Azure Blob Storage credentials
 account_key = os.environ["BLOB_ACCOUNT_KEY"]
 if len(account_key) == 86:
     account_key += "=="
@@ -91,7 +84,7 @@ share_client = service.get_share_client(file_share_name)
 
 user_id = create_user_id()
 
-
+# Citation information
 CITATION_LABEL = "BibTeX citation for ClimateQ&A"
 CITATION_TEXT = r"""@misc{climateqa,
     author={Théo Alves Da Costa, Timothée Bohe},
@@ -106,41 +99,73 @@ CITATION_TEXT = r"""@misc{climateqa,
 }
 """
 
-
-
 # Create vectorstore and retriever
-vectorstore = get_pinecone_vectorstore(embeddings_function, index_name = os.getenv("PINECONE_API_INDEX"))
-vectorstore_graphs = get_pinecone_vectorstore(embeddings_function, index_name = os.getenv("PINECONE_API_INDEX_OWID"), text_key="description")
+embeddings_function = get_embeddings_function()
+vectorstore = get_pinecone_vectorstore(embeddings_function, index_name=os.getenv("PINECONE_API_INDEX"))
+vectorstore_graphs = get_pinecone_vectorstore(embeddings_function, index_name=os.getenv("PINECONE_API_INDEX_OWID"), text_key="description")
 
 llm = get_llm(provider="openai",max_tokens = 1024,temperature = 0.0)
-reranker = get_reranker("large")
+reranker = get_reranker("nano")
 
 agent = make_graph_agent(llm=llm, vectorstore_ipcc=vectorstore, vectorstore_graphs=vectorstore_graphs, reranker=reranker)
 
+# Function to update modal visibility
 def update_config_modal_visibility(config_open):
     new_config_visibility_status = not config_open
     return gr.update(visible=new_config_visibility_status), new_config_visibility_status
 
-async def chat(query, history, audience, sources, reports, relevant_content_sources, search_only):
-    """taking a query and a message history, use a pipeline (reformulation, retriever, answering) to yield a tuple of:
-    (messages in gradio format, messages in langchain format, source documents)"""
-
+# Main chat function
+async def chat(
+    query: str, 
+    history: list[ChatMessage], 
+    audience: str, 
+    sources: list[str], 
+    reports: list[str], 
+    relevant_content_sources_selection: list[str], 
+    search_only: bool
+) -> tuple[list, str, str, str, list, str]:
+    """Process a chat query and return response with relevant sources and visualizations.
+    
+    Args:
+        query (str): The user's question
+        history (list): Chat message history
+        audience (str): Target audience type
+        sources (list): Knowledge base sources to search
+        reports (list): Specific reports to search within sources
+        relevant_content_sources_selection (list): Types of content to retrieve (figures, papers, etc)
+        search_only (bool): Whether to only search without generating answer
+        
+    Yields:
+        tuple: Contains:
+            - history: Updated chat history
+            - docs_html: HTML of retrieved documents
+            - output_query: Processed query
+            - output_language: Detected language
+            - related_contents: Related content
+            - graphs_html: HTML of relevant graphs
+    """
+    # Log incoming question
     date_now = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
     print(f">> NEW QUESTION ({date_now}) : {query}")
 
     audience_prompt = init_audience(audience)
+    sources = sources or ["IPCC", "IPBES", "IPOS"]
+    reports = reports or []
+
+    # Prepare inputs for agent
+    inputs = {
+        "user_input": query,
+        "audience": audience_prompt,
+        "sources_input": sources,
+        "relevant_content_sources_selection": relevant_content_sources_selection,
+        "search_only": search_only,
+        "reports": reports
+    }
 
-    # Prepare default values
-    if sources is None or len(sources) == 0:
-        sources = ["IPCC", "IPBES", "IPOS"]
-
-    if reports is None or len(reports) == 0:
-        reports = []
-    
-    inputs = {"user_input": query,"audience": audience_prompt,"sources_input":sources, "relevant_content_sources" : relevant_content_sources, "search_only": search_only, "reports": reports}
-    result = agent.astream_events(inputs,version = "v1") 
-
+    # Get streaming events from agent
+    result = agent.astream_events(inputs, version="v1")
 
+    # Initialize state variables
     docs = []
     related_contents = []
     docs_html = ""
@@ -149,84 +174,95 @@ async def chat(query, history, audience, sources, reports, relevant_content_sour
     output_keywords = ""
     start_streaming = False
     graphs_html = ""    
-    figures = '<div class="figures-container"><p></p> </div>'
+    used_documents = []
+    answer_message_content = ""
 
+    # Define processing steps
     steps_display = {
-        "categorize_intent":("🔄️ Analyzing user message",True),
-        "transform_query":("🔄️ Thinking step by step to answer the question",True),
-        "retrieve_documents":("🔄️ Searching in the knowledge base",False),
+        "categorize_intent": ("🔄️ Analyzing user message", True),
+        "transform_query": ("🔄️ Thinking step by step to answer the question", True),
+        "retrieve_documents": ("🔄️ Searching in the knowledge base", False),
     }
-    
-    used_documents = []
-    answer_message_content = ""
+
     try:
+        # Process streaming events
         async for event in result:
             if "langgraph_node" in event["metadata"]:
                 node = event["metadata"]["langgraph_node"]
 
-                if event["event"] == "on_chain_end" and event["name"] == "retrieve_documents" and event["data"]["output"] != None:# when documents are retrieved
-                    docs, docs_html, history, used_documents, related_contents = handle_retrieved_documents(event, history, used_documents)    
-                
-                elif event["event"] == "on_chain_end" and node == "categorize_intent" and event["name"] == "_write": # when the query is transformed
-                    
+                # Handle document retrieval
+                if event["event"] == "on_chain_end" and event["name"] == "retrieve_documents" and event["data"]["output"] != None:
+                    docs, docs_html, history, used_documents, related_contents = handle_retrieved_documents(
+                        event, history, used_documents
+                    )
+
+                # Handle intent categorization
+                elif (event["event"] == "on_chain_end" and 
+                      node == "categorize_intent" and 
+                      event["name"] == "_write"):
                     intent = event["data"]["output"]["intent"]
-                    if "language" in event["data"]["output"]:
-                        output_language = event["data"]["output"]["language"]
-                    else :
-                        output_language = "English"
-                    history[-1].content = f"Language identified : {output_language} \n Intent identified : {intent}"
-                    
-                    
-                elif event["name"] in steps_display.keys() and event["event"] == "on_chain_start": #display steps
+                    output_language = event["data"]["output"].get("language", "English")
+                    history[-1].content = f"Language identified: {output_language}\nIntent identified: {intent}"
+
+                # Handle processing steps display
+                elif event["name"] in steps_display and event["event"] == "on_chain_start":
                     event_description, display_output = steps_display[node]
-                    if not hasattr(history[-1], 'metadata') or history[-1].metadata["title"] != event_description: # if a new step begins
-                        history.append(ChatMessage(role="assistant", content = "", metadata={'title' :event_description}))
- 
-                elif event["name"] != "transform_query" and event["event"] == "on_chat_model_stream" and node in ["answer_rag", "answer_rag_no_docs","answer_search","answer_chitchat"]:# if streaming answer
-                    history, start_streaming, answer_message_content = stream_answer(history, event, start_streaming, answer_message_content)
+                    if (not hasattr(history[-1], 'metadata') or 
+                        history[-1].metadata["title"] != event_description):
+                        history.append(ChatMessage(
+                            role="assistant",
+                            content="",
+                            metadata={'title': event_description}
+                        ))
+
+                # Handle answer streaming
+                elif (event["name"] != "transform_query" and 
+                      event["event"] == "on_chat_model_stream" and
+                      node in ["answer_rag","answer_rag_no_docs", "answer_search", "answer_chitchat"]):
+                    history, start_streaming, answer_message_content = stream_answer(
+                        history, event, start_streaming, answer_message_content
+                    )
 
+                # Handle graph retrieval
                 elif event["name"] in ["retrieve_graphs", "retrieve_graphs_ai"] and event["event"] == "on_chain_end":
                     graphs_html = handle_retrieved_owid_graphs(event, graphs_html)
 
+                # Handle query transformation
+                if event["name"] == "transform_query" and event["event"] == "on_chain_end":
+                    if hasattr(history[-1], "content"):
+                        sub_questions = [q["question"] for q in event["data"]["output"]["remaining_questions"]]
+                        history[-1].content += "Decompose question into sub-questions:\n\n - " + "\n - ".join(sub_questions)
 
-                if event["name"] == "transform_query" and event["event"] =="on_chain_end":
-                    if hasattr(history[-1],"content"):
-                        history[-1].content += "Decompose question into sub-questions: \n\n - " + "\n - ".join([q["question"] for q in event["data"]["output"]["remaining_questions"]])
-                        
-                if event["name"] == "categorize_intent" and event["event"] == "on_chain_start":
-                    print("X")
-            
-            yield history, docs_html, output_query, output_language, related_contents , graphs_html,  #,output_query,output_keywords
- 
-    except Exception as e:
-        print(event, "has failed")
-        raise gr.Error(f"{e}")
+            yield history, docs_html, output_query, output_language, related_contents, graphs_html 
 
+    except Exception as e:
+        print(f"Event {event} has failed")
+        raise gr.Error(str(e))
 
     try:
-        # Log answer on Azure Blob Storage
+        # Log interaction to Azure if not in local environment
         if os.getenv("GRADIO_ENV") != "local":
             timestamp = str(datetime.now().timestamp())
-            file = timestamp + ".json"
             prompt = history[1]["content"]
             logs = {
                 "user_id": str(user_id),
                 "prompt": prompt,
                 "query": prompt,
-                "question":output_query,
-                "sources":sources,
-                "docs":serialize_docs(docs),
+                "question": output_query,
+                "sources": sources,
+                "docs": serialize_docs(docs),
                 "answer": history[-1].content,
                 "time": timestamp,
             }
-            log_on_azure(file, logs, share_client)
+            log_on_azure(f"{timestamp}.json", logs, share_client)
     except Exception as e:
         print(f"Error logging on Azure Blob Storage: {e}")
-        raise gr.Error(f"ClimateQ&A Error: {str(e)[:100]} - The error has been noted, try another question and if the error remains, you can contact us :)")
+        error_msg = f"ClimateQ&A Error: {str(e)[:100]} - The error has been noted, try another question and if the error remains, you can contact us :)"
+        raise gr.Error(error_msg)
 
     yield history, docs_html, output_query, output_language, related_contents, graphs_html 
 
-
+# Function to save feedback
 def save_feedback(feed: str, user_id):
     if len(feed) > 1:
         timestamp = str(datetime.now().timestamp())
@@ -239,9 +275,7 @@ def save_feedback(feed: str, user_id):
         log_on_azure(file, logs, share_client)
         return "Feedback submitted, thank you!"
 
-
-
-
+# Function to log data on Azure
 def log_on_azure(file, logs, share_client):
     logs = json.dumps(logs)
     file_client = share_client.get_file_client(file)
@@ -256,25 +290,6 @@ def log_on_azure(file, logs, share_client):
 # --------------------------------------------------------------------
 
 
-init_prompt = """
-Hello, I am ClimateQ&A, a conversational assistant designed to help you understand climate change and biodiversity loss. I will answer your questions by **sifting through the IPCC and IPBES scientific reports**.
-
-❓ How to use
-- **Language**: You can ask me your questions in any language. 
-- **Audience**: You can specify your audience (children, general public, experts) to get a more adapted answer.
-- **Sources**: You can choose to search in the IPCC or IPBES reports, or both.
-- **Relevant content sources**: You can choose to search for figures, papers, or graphs that can be relevant for your question.
-
-⚠️ Limitations
-*Please note that the AI is not perfect and may sometimes give irrelevant answers. If you are not satisfied with the answer, please ask a more specific question or report your feedback to help us improve the system.*
-
-🛈 Information
-Please note that we log your questions for meta-analysis purposes, so avoid sharing any sensitive or personal information.
-
-
-What do you want to learn ?
-"""
-
 
 def vote(data: gr.LikeData):
     if data.liked:
@@ -291,293 +306,312 @@ def save_graph(saved_graphs_state, embedding, category):
     return saved_graphs_state, gr.Button("Graph Saved")
 
 
+# Functions to toggle visibility
+def toggle_summary_visibility():
+    global summary_visible
+    summary_visible = not summary_visible
+    return gr.update(visible=summary_visible)
 
-with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=theme,elem_id = "main-component") as demo:
-    chat_completed_state = gr.State(0)
-    current_graphs = gr.State([])
-    saved_graphs = gr.State({})
-    config_open = gr.State(False)
+def toggle_relevant_visibility():
+    global relevant_visible
+    relevant_visible = not relevant_visible
+    return gr.update(visible=relevant_visible)
 
-    
-    with gr.Tab("ClimateQ&A"):
+def change_completion_status(current_state):
+    current_state = 1 - current_state
+    return current_state
 
-        with gr.Row(elem_id="chatbot-row"):
-            with gr.Column(scale=2):
-                chatbot = gr.Chatbot(
-                    value = [ChatMessage(role="assistant", content=init_prompt)],
-                    type = "messages",
-                    show_copy_button=True,
-                    show_label = False,
-                    elem_id="chatbot",
-                    layout = "panel",
-                    avatar_images = (None,"https://i.ibb.co/YNyd5W2/logo4.png"),
-                    max_height="80vh",
-                    height="100vh"
-                )
-                
-                # bot.like(vote,None,None)
+def update_sources_number_display(sources_textbox, figures_cards, current_graphs, papers_html):
+    sources_number = sources_textbox.count("<h2>")
+    figures_number = figures_cards.count("<h2>")
+    graphs_number = current_graphs.count("<iframe")
+    papers_number = papers_html.count("<h2>")
+    sources_notif_label = f"Sources ({sources_number})"
+    figures_notif_label = f"Figures ({figures_number})"
+    graphs_notif_label = f"Graphs ({graphs_number})"
+    papers_notif_label = f"Papers ({papers_number})"
+    recommended_content_notif_label = f"Recommended content ({figures_number + graphs_number + papers_number})"
 
+    return gr.update(label=recommended_content_notif_label), gr.update(label=sources_notif_label), gr.update(label=figures_notif_label), gr.update(label=graphs_notif_label), gr.update(label=papers_notif_label)
 
-
-                with gr.Row(elem_id = "input-message"):
-                    textbox = gr.Textbox(
-                        placeholder="Ask me anything here!",
-                        show_label=False,
-                        scale=12,
-                        lines=1,
-                        interactive=True,
-                        elem_id="input-textbox"
-                    )
-
-                    config_button = gr.Button(
-                        "",
-                        elem_id="config-button"
-                    )
-                    
-                
-
-            with gr.Column(scale=2, variant="panel",elem_id = "right-panel"):
+def change_sample_questions(key):
+    index = list(QUESTIONS.keys()).index(key)
+    visible_bools = [False] * len(samples)
+    visible_bools[index] = True
+    return [gr.update(visible=visible_bools[i]) for i in range(len(samples))]
 
 
-                with gr.Tabs(elem_id = "right_panel_tab") as tabs:
-                    with gr.TabItem("Examples",elem_id = "tab-examples",id = 0):
-                                        
-                        examples_hidden = gr.Textbox(visible = False)
-                        first_key = list(QUESTIONS.keys())[0]
-                        dropdown_samples = gr.Dropdown(QUESTIONS.keys(),value = first_key,interactive = True,show_label = True,label = "Select a category of sample questions",elem_id = "dropdown-samples")
 
-                        samples = []
-                        for i,key in enumerate(QUESTIONS.keys()):
-
-                            examples_visible = True if i == 0 else False
-
-                            with gr.Row(visible = examples_visible) as group_examples:
-
-                                examples_questions = gr.Examples(
-                                    QUESTIONS[key],
-                                    [examples_hidden],
-                                    examples_per_page=8,
-                                    run_on_click=False,
-                                    elem_id=f"examples{i}",
-                                    api_name=f"examples{i}",
-                                    # label = "Click on the example question or enter your own",
-                                    # cache_examples=True,
-                                )
-                            
-                            samples.append(group_examples)
-                            
-                    # with gr.Tab("Configuration", id = 10, ) as tab_config:
-                    #         # gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
-
-                    #     pass
-                            
-                            # with gr.Row():
-                                
-                            #     dropdown_sources = gr.CheckboxGroup(
-                            #         ["IPCC", "IPBES","IPOS"],
-                            #         label="Select source",
-                            #         value=["IPCC"],
-                            #         interactive=True,
-                            #     )
-                            #     dropdown_external_sources = gr.CheckboxGroup(
-                            #         ["IPCC figures","OpenAlex", "OurWorldInData"],
-                            #         label="Select database to search for relevant content",
-                            #         value=["IPCC figures"],
-                            #         interactive=True,
-                            #     )
-
-                            # dropdown_reports = gr.Dropdown(
-                            #     POSSIBLE_REPORTS,
-                            #     label="Or select specific reports",
-                            #     multiselect=True,
-                            #     value=None,
-                            #     interactive=True,
-                            # )
-
-                            # search_only = gr.Checkbox(label="Search only without chating", value=False, interactive=True, elem_id="checkbox-chat")
-
-
-                            # dropdown_audience = gr.Dropdown(
-                            #     ["Children","General public","Experts"],
-                            #     label="Select audience",
-                            #     value="Experts",
-                            #     interactive=True,
-                            # )
-                            
-                                
-                            # after = gr.Slider(minimum=1950,maximum=2023,step=1,value=1960,label="Publication date",show_label=True,interactive=True,elem_id="date-papers", visible=False)
-                            
-
-                            # output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False, visible= False)
-                            # output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False, visible= False)                            
-
-
-                            # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after])
-                            # # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after], visible=True)
-
-
-                    with gr.Tab("Sources",elem_id = "tab-sources",id = 1) as tab_sources:
-                        sources_textbox = gr.HTML(show_label=False, elem_id="sources-textbox")
-                    
-                    
-                        
-                    with gr.Tab("Recommended content", elem_id="tab-recommended_content",id=2) as tab_recommended_content:
-                        with gr.Tabs(elem_id = "group-subtabs") as tabs_recommended_content:
+# Chat functions
+def start_chat(query, history, search_only):
+    history = history + [ChatMessage(role="user", content=query)]
+    if not search_only:
+        return (gr.update(interactive=False), gr.update(selected=1), history, [])
+    else:
+        return (gr.update(interactive=False), gr.update(selected=2), history, [])
+
+def finish_chat():
+    return gr.update(interactive=True, value="")
+
+# Initialize visibility states
+summary_visible = False
+relevant_visible = False
+
+# UI Layout Components
+def create_chat_interface():
+    chatbot = gr.Chatbot(
+        value=[ChatMessage(role="assistant", content=init_prompt)],
+        type="messages", 
+        show_copy_button=True,
+        show_label=False,
+        elem_id="chatbot",
+        layout="panel",
+        avatar_images=(None, "https://i.ibb.co/YNyd5W2/logo4.png"),
+        max_height="80vh",
+        height="100vh"
+    )
+    
+    with gr.Row(elem_id="input-message"):
         
-                            with gr.Tab("Figures",elem_id = "tab-figures",id = 3) as tab_figures:
-                                sources_raw = gr.State([])
-                                new_figures = gr.State([])
-                                used_figures = gr.State([])
-                                
-                                with Modal(visible=False, elem_id="modal_figure_galery") as figure_modal:
-                                    gallery_component = gr.Gallery(object_fit='scale-down',elem_id="gallery-component", height="80vh")
-                                    
-                                show_full_size_figures = gr.Button("Show figures in full size",elem_id="show-figures",interactive=True)    
-                                show_full_size_figures.click(lambda : Modal(visible=True),None,figure_modal)
-
-                                figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
-
-
-
-                            with gr.Tab("Papers",elem_id = "tab-citations",id = 4) as tab_papers:
-                                # btn_summary = gr.Button("Summary")
-                                # Fenêtre simulée pour le Summary
-                                with gr.Accordion(visible=True, elem_id="papers-summary-popup", label= "See summary of relevant papers", open= False) as summary_popup:
-                                    papers_summary = gr.Markdown("", visible=True, elem_id="papers-summary")
-
-                                # btn_relevant_papers = gr.Button("Relevant papers")
-                                # Fenêtre simulée pour les Relevant Papers
-                                with gr.Accordion(visible=True, elem_id="papers-relevant-popup",label= "See relevant papers", open= False) as relevant_popup:
-                                    papers_html = gr.HTML(show_label=False, elem_id="papers-textbox")
-
-                                btn_citations_network = gr.Button("Explore papers citations network")
-                                # Fenêtre simulée pour le Citations Network
-                                with Modal(visible=False) as papers_modal:
-                                    citations_network = gr.HTML("<h3>Citations Network Graph</h3>", visible=True, elem_id="papers-citations-network")
-                                btn_citations_network.click(lambda: Modal(visible=True), None, papers_modal)
-                    
-                                        
-                            
-                            with gr.Tab("Graphs", elem_id="tab-graphs", id=5) as tab_graphs:
-                                
-                                graphs_container = gr.HTML("<h2>There are no graphs to be displayed at the moment. Try asking another question.</h2>",elem_id="graphs-container")
-                                current_graphs.change(lambda x : x, inputs=[current_graphs], outputs=[graphs_container])
-                                
-            with Modal(visible=False,elem_id="modal-config") as config_modal:
-                gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
-
-                        
-                # with gr.Row():
-                    
-                dropdown_sources = gr.CheckboxGroup(
-                    ["IPCC", "IPBES","IPOS"],
-                    label="Select source (by default search in all sources)",
-                    value=["IPCC"],
-                    interactive=True,
-                )
-                
-                dropdown_reports = gr.Dropdown(
-                    POSSIBLE_REPORTS,
-                    label="Or select specific reports",
-                    multiselect=True,
-                    value=None,
-                    interactive=True,
-                )
-                                
-                dropdown_external_sources = gr.CheckboxGroup(
-                    ["Figures (IPCC/IPBES)","Papers (OpenAlex)", "Graphs (OurWorldInData)"],
-                    label="Select database to search for relevant content",
-                    value=["Figures (IPCC/IPBES)"],
-                    interactive=True,
-                )
-
-                search_only = gr.Checkbox(label="Search only for recommended content without chating", value=False, interactive=True, elem_id="checkbox-chat")
-
-
-                dropdown_audience = gr.Dropdown(
-                    ["Children","General public","Experts"],
-                    label="Select audience",
-                    value="Experts",
-                    interactive=True,
-                )
-                
-                    
-                after = gr.Slider(minimum=1950,maximum=2023,step=1,value=1960,label="Publication date",show_label=True,interactive=True,elem_id="date-papers", visible=False)
-                
-
-                output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False, visible= False)
-                output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False, visible= False)                            
-
-
-                dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "Papers (OpenAlex)" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after])
-                
-                close_config_modal = gr.Button("Validate and Close",elem_id="close-config-modal")
-                close_config_modal.click(fn=update_config_modal_visibility, inputs=[config_open], outputs=[config_modal, config_open])
-                # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after], visible=True)
-            
-
-            
-            config_button.click(fn=update_config_modal_visibility, inputs=[config_open], outputs=[config_modal, config_open])
-           
-                    # with gr.Tab("OECD",elem_id = "tab-oecd",id = 6):
-                    #     oecd_indicator = "RIVER_FLOOD_RP100_POP_SH"
-                    #     oecd_topic = "climate"
-                    #     oecd_latitude = "46.8332"
-                    #     oecd_longitude = "5.3725"
-                    #     oecd_zoom = "5.6442"
-                    #     # Create the HTML content with the iframe
-                    #     iframe_html = f"""
-                    #     <iframe src="https://localdataportal.oecd.org/maps.html?indicator={oecd_indicator}&topic={oecd_topic}&latitude={oecd_latitude}&longitude={oecd_longitude}&zoom={oecd_zoom}"
-                    #             width="100%" height="600" frameborder="0" style="border:0;" allowfullscreen></iframe>
-                    #     """
-                    #     oecd_textbox = gr.HTML(iframe_html, show_label=False, elem_id="oecd-textbox")
-
-   
+        textbox = gr.Textbox(
+            placeholder="Ask me anything here!",
+            show_label=False,
+            scale=12,
+            lines=1,
+            interactive=True,
+            elem_id="input-textbox"
+        )
+        
+        config_button = gr.Button("", elem_id="config-button")
+    
+    return chatbot, textbox, config_button
+
+def create_examples_tab():
+    examples_hidden = gr.Textbox(visible=False)
+    first_key = list(QUESTIONS.keys())[0]
+    dropdown_samples = gr.Dropdown(
+        choices=QUESTIONS.keys(),
+        value=first_key,
+        interactive=True,
+        label="Select a category of sample questions",
+        elem_id="dropdown-samples"
+    )
 
+    samples = []
+    for i, key in enumerate(QUESTIONS.keys()):
+        examples_visible = (i == 0)
+        with gr.Row(visible=examples_visible) as group_examples:
+            examples_questions = gr.Examples(
+                examples=QUESTIONS[key],
+                inputs=[examples_hidden],
+                examples_per_page=8,
+                run_on_click=False,
+                elem_id=f"examples{i}",
+                api_name=f"examples{i}"
+            )
+        samples.append(group_examples)
+        
+    return examples_hidden, dropdown_samples, samples
 
-#---------------------------------------------------------------------------------------
-# OTHER TABS
-#---------------------------------------------------------------------------------------
+def create_figures_tab():
+    sources_raw = gr.State()
+    new_figures = gr.State([])
+    used_figures = gr.State([])
+    
+    with Modal(visible=False, elem_id="modal_figure_galery") as figure_modal:
+        gallery_component = gr.Gallery(
+            object_fit='scale-down',
+            elem_id="gallery-component",
+            height="80vh"
+        )
+        
+    show_full_size_figures = gr.Button(
+        "Show figures in full size",
+        elem_id="show-figures",
+        interactive=True
+    )
+    show_full_size_figures.click(
+        lambda: Modal(visible=True),
+        None,
+        figure_modal
+    )
 
-    # with gr.Tab("Settings",elem_id = "tab-config",id = 2):
+    figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
+    
+    return sources_raw, new_figures, used_figures, gallery_component, figures_cards, figure_modal
+
+def create_papers_tab():
+    with gr.Accordion(
+        visible=True,
+        elem_id="papers-summary-popup",
+        label="See summary of relevant papers",
+        open=False
+    ) as summary_popup:
+        papers_summary = gr.Markdown("", visible=True, elem_id="papers-summary")
+
+    with gr.Accordion(
+        visible=True,
+        elem_id="papers-relevant-popup",
+        label="See relevant papers",
+        open=False
+    ) as relevant_popup:
+        papers_html = gr.HTML(show_label=False, elem_id="papers-textbox")
+
+    btn_citations_network = gr.Button("Explore papers citations network")
+    with Modal(visible=False) as papers_modal:
+        citations_network = gr.HTML(
+            "<h3>Citations Network Graph</h3>",
+            visible=True,
+            elem_id="papers-citations-network"
+        )
+    btn_citations_network.click(
+        lambda: Modal(visible=True),
+        None,
+        papers_modal
+    )
+    
+    return papers_summary, papers_html, citations_network, papers_modal
+
+def create_config_modal(config_open):
+    with Modal(visible=False, elem_id="modal-config") as config_modal:
+        gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
+
+        dropdown_sources = gr.CheckboxGroup(
+            choices=["IPCC", "IPBES", "IPOS"],
+            label="Select source (by default search in all sources)",
+            value=["IPCC"],
+            interactive=True
+        )
+
+        dropdown_reports = gr.Dropdown(
+            choices=POSSIBLE_REPORTS,
+            label="Or select specific reports",
+            multiselect=True,
+            value=None,
+            interactive=True
+        )
+
+        dropdown_external_sources = gr.CheckboxGroup(
+            choices=["Figures (IPCC/IPBES)", "Papers (OpenAlex)", "Graphs (OurWorldInData)"],
+            label="Select database to search for relevant content",
+            value=["Figures (IPCC/IPBES)"],
+            interactive=True
+        )
+
+        search_only = gr.Checkbox(
+            label="Search only for recommended content without chating",
+            value=False,
+            interactive=True,
+            elem_id="checkbox-chat"
+        )
+
+        dropdown_audience = gr.Dropdown(
+            choices=["Children", "General public", "Experts"],
+            label="Select audience", 
+            value="Experts",
+            interactive=True
+        )
+
+        after = gr.Slider(
+            minimum=1950,
+            maximum=2023,
+            step=1,
+            value=1960,
+            label="Publication date",
+            show_label=True,
+            interactive=True,
+            elem_id="date-papers",
+            visible=False
+        )
+
+        output_query = gr.Textbox(
+            label="Query used for retrieval",
+            show_label=True,
+            elem_id="reformulated-query",
+            lines=2,
+            interactive=False,
+            visible=False
+        )
+
+        output_language = gr.Textbox(
+            label="Language",
+            show_label=True,
+            elem_id="language",
+            lines=1,
+            interactive=False,
+            visible=False
+        )
+
+        dropdown_external_sources.change(
+            lambda x: gr.update(visible="Papers (OpenAlex)" in x),
+            inputs=[dropdown_external_sources],
+            outputs=[after]
+        )
+
+        close_config_modal = gr.Button("Validate and Close", elem_id="close-config-modal")
+        close_config_modal.click(
+            fn=update_config_modal_visibility,
+            inputs=[config_open],
+            outputs=[config_modal, config_open]
+        )
+        
+        return (config_modal, dropdown_sources, dropdown_reports, dropdown_external_sources, 
+                search_only, dropdown_audience, after, output_query, output_language)
 
-    #     gr.Markdown("Reminder: You can talk in any language, ClimateQ&A is multi-lingual!")
+# Main UI Assembly
+with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=theme, elem_id="main-component") as demo:
+    # State variables
+    chat_completed_state = gr.State(0)
+    current_graphs = gr.State([])
+    saved_graphs = gr.State({})
+    config_open = gr.State(False)
 
+    with gr.Tab("ClimateQ&A"):
+        with gr.Row(elem_id="chatbot-row"):
+            # Left column - Chat interface
+            with gr.Column(scale=2):
+                chatbot, textbox, config_button = create_chat_interface()
 
-    #     dropdown_sources = gr.CheckboxGroup(
-    #         ["IPCC", "IPBES","IPOS", "OpenAlex"],
-    #         label="Select source",
-    #         value=["IPCC"],
-    #         interactive=True,
-    #     )
+            # Right column - Content panels
+            with gr.Column(scale=2, variant="panel", elem_id="right-panel"):
+                with gr.Tabs(elem_id="right_panel_tab") as tabs:
+                    # Examples tab
+                    with gr.TabItem("Examples", elem_id="tab-examples", id=0):
+                        examples_hidden, dropdown_samples, samples = create_examples_tab()
 
-    #     dropdown_reports = gr.Dropdown(
-    #         POSSIBLE_REPORTS,
-    #         label="Or select specific reports",
-    #         multiselect=True,
-    #         value=None,
-    #         interactive=True,
-    #     )
+                    # Sources tab
+                    with gr.Tab("Sources", elem_id="tab-sources", id=1) as tab_sources:
+                        sources_textbox = gr.HTML(show_label=False, elem_id="sources-textbox")
 
-    #     dropdown_audience = gr.Dropdown(
-    #         ["Children","General public","Experts"],
-    #         label="Select audience",
-    #         value="Experts",
-    #         interactive=True,
-    #     )
+                    # Recommended content tab
+                    with gr.Tab("Recommended content", elem_id="tab-recommended_content", id=2) as tab_recommended_content:
+                        with gr.Tabs(elem_id="group-subtabs") as tabs_recommended_content:
+                            # Figures subtab
+                            with gr.Tab("Figures", elem_id="tab-figures", id=3) as tab_figures:
+                                sources_raw, new_figures, used_figures, gallery_component, figures_cards, figure_modal = create_figures_tab()
 
+                            # Papers subtab
+                            with gr.Tab("Papers", elem_id="tab-citations", id=4) as tab_papers:
+                                papers_summary, papers_html, citations_network, papers_modal = create_papers_tab()
 
-    #     output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False)
-    #     output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False)
+                            # Graphs subtab
+                            with gr.Tab("Graphs", elem_id="tab-graphs", id=5) as tab_graphs:
+                                graphs_container = gr.HTML(
+                                    "<h2>There are no graphs to be displayed at the moment. Try asking another question.</h2>",
+                                    elem_id="graphs-container"
+                                )
+                                current_graphs.change(
+                                    lambda x: x,
+                                    inputs=[current_graphs],
+                                    outputs=[graphs_container]
+                                )
 
+           
 
-    with gr.Tab("About",elem_classes = "max-height other-tabs"):
+    # Other tabs
+    with gr.Tab("About", elem_classes="max-height other-tabs"):
         with gr.Row():
             with gr.Column(scale=1):
-
-
-
-
                 gr.Markdown(
                     """
                     ### More info
@@ -587,8 +621,7 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                     ### Citation
                     """
                 )
-                with gr.Accordion(CITATION_LABEL,elem_id="citation", open = False,):
-                    # # Display citation label and text)
+                with gr.Accordion(CITATION_LABEL, elem_id="citation", open=False):
                     gr.Textbox(
                         value=CITATION_TEXT,
                         label="",
@@ -597,103 +630,45 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                         lines=len(CITATION_TEXT.split('\n')),
                     )
 
-
-
-    def start_chat(query,history,search_only):
-        history = history + [ChatMessage(role="user", content=query)]
-        if not search_only:
-            return (gr.update(interactive = False),gr.update(selected=1),history, [])
-        else:
-            return (gr.update(interactive = False),gr.update(selected=2),history, [])
-    
-    def finish_chat():
-        return gr.update(interactive = True,value = "")
+    # Event handlers
+    config_modal, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only, dropdown_audience, after, output_query, output_language = create_config_modal(config_open)
     
-    # Initialize visibility states
-    summary_visible = False
-    relevant_visible = False
-
-    # Functions to toggle visibility
-    def toggle_summary_visibility():
-        global summary_visible
-        summary_visible = not summary_visible
-        return gr.update(visible=summary_visible)
-
-    def toggle_relevant_visibility():
-        global relevant_visible
-        relevant_visible = not relevant_visible
-        return gr.update(visible=relevant_visible)
-
-
-    def change_completion_status(current_state):
-        current_state = 1 - current_state
-        return current_state
+    config_button.click(
+        fn=update_config_modal_visibility,
+        inputs=[config_open],
+        outputs=[config_modal, config_open]
+    )
     
-    def update_sources_number_display(sources_textbox, figures_cards, current_graphs, papers_html):
-        sources_number = sources_textbox.count("<h2>")
-        figures_number = figures_cards.count("<h2>")
-        graphs_number = current_graphs.count("<iframe")
-        papers_number = papers_html.count("<h2>")
-        sources_notif_label = f"Sources ({sources_number})"
-        figures_notif_label = f"Figures ({figures_number})"
-        graphs_notif_label = f"Graphs ({graphs_number})"
-        papers_notif_label = f"Papers ({papers_number})"
-        recommended_content_notif_label = f"Recommended content ({figures_number + graphs_number + papers_number})"
-
-        return gr.update(label = recommended_content_notif_label), gr.update(label = sources_notif_label), gr.update(label = figures_notif_label), gr.update(label = graphs_notif_label), gr.update(label = papers_notif_label)
     
     (textbox
-        .submit(start_chat, [textbox, chatbot, search_only], 
-                [textbox, tabs, chatbot, sources_raw],
-                queue=False,
-                api_name="start_chat_textbox")
-        .then(chat, [textbox, chatbot, dropdown_audience, dropdown_sources,
-                     dropdown_reports, dropdown_external_sources, search_only],
-              [chatbot, sources_textbox, output_query, output_language, 
-               new_figures, current_graphs],
-              concurrency_limit=8,
-              api_name="chat_textbox")
-        .then(finish_chat, None, [textbox],
-              api_name="finish_chat_textbox")
+        .submit(start_chat, [textbox, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name="start_chat_textbox")
+        .then(chat, [textbox, chatbot, dropdown_audience, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only], [chatbot, sources_textbox, output_query, output_language, new_figures, current_graphs], concurrency_limit=8, api_name="chat_textbox")
+        .then(finish_chat, None, [textbox], api_name="finish_chat_textbox")
     )
 
 
 
     (examples_hidden
-        .change(start_chat, [examples_hidden,chatbot, search_only], [textbox,tabs,chatbot, sources_raw],queue = False,api_name = "start_chat_examples")
-        .then(chat, [examples_hidden,chatbot,dropdown_audience, dropdown_sources,dropdown_reports, dropdown_external_sources, search_only] ,[chatbot,sources_textbox,output_query,output_language, new_figures, current_graphs],concurrency_limit = 8,api_name = "chat_textbox")
-        .then(finish_chat, None, [textbox],api_name = "finish_chat_examples")
-        # .then(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_graphs, tab_papers] )
+        .change(start_chat, [examples_hidden, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name="start_chat_examples")
+        .then(chat, [examples_hidden, chatbot, dropdown_audience, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only], [chatbot, sources_textbox, output_query, output_language, new_figures, current_graphs], concurrency_limit=8, api_name="chat_textbox")
+        .then(finish_chat, None, [textbox], api_name="finish_chat_examples")
     )
 
-
-    def change_sample_questions(key):
-        index = list(QUESTIONS.keys()).index(key)
-        visible_bools = [False] * len(samples)
-        visible_bools[index] = True
-        return [gr.update(visible=visible_bools[i]) for i in range(len(samples))]
-
-
     new_figures.change(process_figures, inputs=[sources_raw, new_figures], outputs=[sources_raw, figures_cards, gallery_component])
-    
-    # update sources numbers
-    sources_textbox.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
-    figures_cards.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
-    current_graphs.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
-    papers_html.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
 
-    # other questions examples
-    dropdown_samples.change(change_sample_questions,dropdown_samples,samples)
+    # Update sources numbers
+    sources_textbox.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs, papers_html], [tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
+    figures_cards.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs, papers_html], [tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
+    current_graphs.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs, papers_html], [tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
+    papers_html.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs, papers_html], [tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
 
-    # search for papers
-    textbox.submit(find_papers,[textbox,after, dropdown_external_sources], [papers_html,citations_network,papers_summary])
-    examples_hidden.change(find_papers,[examples_hidden,after,dropdown_external_sources], [papers_html,citations_network,papers_summary])
+    # Other questions examples
+    dropdown_samples.change(change_sample_questions, dropdown_samples, samples)
 
-    # btn_summary.click(toggle_summary_visibility, outputs=summary_popup)
-    # btn_relevant_papers.click(toggle_relevant_visibility, outputs=relevant_popup)
+    # Search for papers
+    textbox.submit(find_papers, [textbox, after, dropdown_external_sources], [papers_html, citations_network, papers_summary])
+    examples_hidden.change(find_papers, [examples_hidden, after, dropdown_external_sources], [papers_html, citations_network, papers_summary])
 
     demo.queue()
-
-
-
+    
 demo.launch(ssr_mode=False)

climateqa/engine/chains/retrieve_documents.py

@@ -213,20 +213,10 @@ async def retrieve_documents(state,config, vectorstore,reranker,llm,rerank_by_qu
         dict: The updated state containing the retrieved and reranked documents, related content, and remaining questions.
     """
     print("---- Retrieve documents ----")
+    docs = state.get("documents", [])
+    related_content = state.get("related_content", [])
     
-    # Get the documents from the state
-    if "documents" in state and state["documents"] is not None:
-        docs = state["documents"]
-    else:
-        docs = []
-        
-    # Get the related_content from the state
-    if "related_content" in state and state["related_content"] is not None:
-        related_content = state["related_content"]
-    else:
-        related_content = []
-    
-    search_figures = "Figures (IPCC/IPBES)" in state["relevant_content_sources"]
+    search_figures = "Figures (IPCC/IPBES)" in state["relevant_content_sources_selection"]
     search_only = state["search_only"]
     
     reports = state["reports"]

climateqa/engine/chains/retrieve_papers.py

@@ -32,8 +32,8 @@ def generate_keywords(query):
     return keywords
 
 
-async def find_papers(query,after, relevant_content_sources, reranker= reranker):
-    if "Papers (OpenAlex)" in relevant_content_sources:
+async def find_papers(query,after, relevant_content_sources_selection, reranker= reranker):
+    if "Papers (OpenAlex)" in relevant_content_sources_selection:
         summary = ""
         keywords = generate_keywords(query)
         df_works = oa.search(keywords,after = after)

climateqa/engine/graph.py

@@ -36,12 +36,12 @@ class GraphState(TypedDict):
     answer: str
     audience: str = "experts"
     sources_input: List[str] = ["IPCC","IPBES"]
-    relevant_content_sources: List[str] = ["Figures (IPCC/IPBES)"]
+    relevant_content_sources_selection: List[str] = ["Figures (IPCC/IPBES)"]
     sources_auto: bool = True
     min_year: int = 1960
     max_year: int = None
     documents: List[Document]
-    related_contents : Dict[str,Document]
+    related_contents : List[Document]
     recommended_content : List[Document]
     search_only : bool = False
     reports : List[str] = []
@@ -159,7 +159,7 @@ def make_graph_agent(llm, vectorstore_ipcc, vectorstore_graphs, reranker, thresh
     )
     workflow.add_conditional_edges(
         "transform_query", 
-        lambda state : "retrieve_graphs" if "Graphs (OurWorldInData)" in state["relevant_content_sources"]  else END,
+        lambda state : "retrieve_graphs" if "Graphs (OurWorldInData)" in state["relevant_content_sources_selection"]  else END,
         make_id_dict(["retrieve_graphs", END])
     )
 

style.css

@@ -1,13 +1,28 @@
-
+/* Root Variables */
 /* :root {
     --user-image: url('https://ih1.redbubble.net/image.4776899543.6215/st,small,507x507-pad,600x600,f8f8f8.jpg');
-  } */
+} */
+
+/* Layout & Container Styles */
+.gradio-container {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+main.flex.flex-1.flex-col { 
+    max-height: 95vh !important;
+}
+
+.main-component {
+    contain: size layout;
+    overflow: hidden;
+}
 
-#tab-recommended_content{
-    padding-top: 0px;
-    padding-left : 0px;
-    padding-right: 0px;
+/* Tab Styles */
+#tab-recommended_content {
+    padding: 0;
 }
+
 #group-subtabs {
     /* display: block; */
     position : sticky;
@@ -16,66 +31,97 @@
 
 }
 
+.tab-nav {
+    border: none !important;
+}
 
-#papers-summary-popup button span{
-    /* make label of accordio in bold, center, and bigger */
-    font-size: 16px;
+.tab-nav > button.selected {
+    color: #4b8ec3;
     font-weight: bold;
-    text-align: center;
+    border: none;
+}
 
+.tabitem {
+    border: none !important;
 }
 
-#papers-relevant-popup span{
-    /* make label of accordio in bold, center, and bigger */
-    font-size: 16px;
-    font-weight: bold;
-    text-align: center;
+.other-tabs > div {
+    padding: 40px 40px 10px;
 }
 
+/* Card Styles */
+.card {
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+}
 
+.card-content {
+    padding: 20px;
+}
 
-#tab-citations .button{
-    padding: 12px 16px;
-    font-size: 16px;
+.card-content h2 {
+    font-size: 14px !important;
     font-weight: bold;
-    cursor: pointer;
-    border: none;
-    outline: none;
+    margin: 0 0 10px !important;
+    color: #dc2626 !important;
+}
+
+.card-content p {
+    font-size: 12px;
+    margin-bottom: 0;
+}
+
+.card-content img {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+    height: auto;
+}
+
+.card-footer {
+    background-color: #f4f4f4;
+    font-size: 10px;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-footer span {
+    flex-grow: 1;
     text-align: left;
-    transition: background-color 0.3s ease;
+    color: #999 !important;
 }
 
+.card-image > .card-content {
+    background-color: #f1f7fa;
+}
 
-.gradio-container {
-    width: 100%!important;
-    max-width: 100% !important;
+/* Message & Chat Styles */
+.message {
+    font-size: 14px !important;
 }
 
-/* fix for huggingface infinite growth*/
-main.flex.flex-1.flex-col { 
-    max-height: 95vh !important;
+.message.user, .message.bot {
+    border: none;
 }
 
-button#show-figures{
-    /* Base styles */
-    background-color: #f5f5f5;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    color: #333333;
-    cursor: pointer;
-    width: 100%;
-    text-align: center;
+#input-textbox > label > textarea {
+    border-radius: 40px;
+    padding-left: 30px;
+    resize: none;
 }
 
-.avatar-container.svelte-1x5p6hu:not(.thumbnail-item) img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-    padding: 0px;
-    margin: 0px;
+#input-message > div {
+    border: none;
 }
 
+/* Alert Boxes */
 .warning-box {
     background-color: #fff3cd;
     border: 1px solid #ffeeba;
@@ -85,32 +131,20 @@ button#show-figures{
     color: #856404;
     display: inline-block;
     margin-bottom: 15px;
-  }
-
+}
 
 .tip-box {
     background-color: #f0f9ff;
     border: 1px solid #80d4fa;
     border-radius: 4px;
-    margin-top:20px;
+    margin: 20px 0 15px;
     padding: 15px 20px;
     font-size: 14px;
     display: inline-block;
-    margin-bottom: 15px;
     width: auto;
-    color:black !important;
-}
-
-body.dark .warning-box * {
-    color:black !important;
+    color: black !important;
 }
 
-
-body.dark .tip-box * {
-    color:black !important;
-}
-
-
 .tip-box-title {
     font-weight: bold;
     font-size: 14px;
@@ -122,116 +156,128 @@ body.dark .tip-box * {
     margin-right: 5px;
 }
 
-.gr-box {border-color: #d6c37c}
-
-#hidden-message{
-    display:none;
+/* Loader Animation */
+.loader {
+    border: 1px solid #d0d0d0 !important;
+    border-top: 1px solid #db3434 !important;
+    border-right: 1px solid #3498db !important;
+    border-radius: 50%;
+    width: 20px;    
+    height: 20px;
+    animation: spin 2s linear infinite;
+    display: inline-block;
+    margin-right: 10px !important;
 }
 
-.message{
-    font-size:14px !important;
-    
-}
-.card-content img {
-    display: block;
-    margin: auto;
-    max-width: 100%; /* Ensures the image is responsive */
-    height: auto;
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
-a {
-    text-decoration: none;
-    color: inherit;
+/* PDF Link Styles */
+.pdf-link {
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
+    text-decoration: none!important;
+    font-size: 14px;
 }
 
-.doc-ref sup{
-    color:#dc2626!important;
-    /* margin-right:1px; */
+/* Document Reference Styles */
+.doc-ref sup {
+    color: #dc2626!important;
 }
 
+.doc-ref {
+    color: #dc2626!important;
+    margin-right: 1px;
+}
 
-.card {
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    margin:20px;
+/* Chatbot & Image Styles */
+span.chatbot > p > img {
+    margin-top: 40px !important;
+    max-height: none !important;
+    max-width: 80% !important;
+    border-radius: 0px !important;
 }
 
-.card-content {
-    padding: 20px;
+.chatbot-caption {
+    font-size: 11px;
+    font-style: italic;
+    color: #508094;
 }
 
-.card-content h2 {
-    font-size: 14px !important;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-top:0px !important;
-    color:#dc2626!important;;
+.ai-generated {
+    font-size: 11px!important;
+    font-style: italic;
+    color: #73b8d4 !important;
 }
 
-.card-content p {
-    font-size: 12px;
-    margin-bottom: 0;
+/* Dropdown Styles */
+.dropdown {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 10px;
 }
 
-.card-footer {
-    background-color: #f4f4f4;
-    font-size: 10px;
+.dropdown-toggle {
+    background-color: #f2f2f2;
+    color: black;
     padding: 10px;
+    font-size: 16px;
+    cursor: pointer;
     display: flex;
-    justify-content: space-between;
+    width: 400px;
     align-items: center;
+    justify-content: left;
+    position: relative;
 }
 
-.card-footer span {
-    flex-grow: 1;
-    text-align: left;
-    color: #999 !important;
+.dropdown-toggle .caret {
+    content: "";
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid black;
+    transform: translateY(-50%);
 }
 
-.pdf-link {
-    display: inline-flex;
-    align-items: center;
-    margin-left: auto;
-    text-decoration: none!important;
-    font-size: 14px;
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 300px;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    z-index: 1;
+    padding: 12px;
+    border: 1px solid #ccc;
 }
 
-
-
-.message.user{
-    /* background-color:#7494b0 !important; */
-    border:none;
-    /* color:white!important; */
+/* Checkbox Styles */
+input[type="checkbox"] {
+    display: none !important;
 }
 
-.message.bot{
-    /* background-color:#f2f2f7 !important; */
-    border:none;
+#checkbox-chat input[type="checkbox"] {
+    display: flex !important;
 }
 
-
-label.selected{
-  background: #93c5fd !important;
+input[type="checkbox"]:checked + .dropdown-content {
+    display: block;
 }
 
-#submit-button{
-    padding:0px !important;
+input[type="checkbox"]:checked + .dropdown-toggle + .dropdown-content {
+    display: block;
 }
 
-#modal-config .block.modal-block.padded {
-    padding-top: 25px;
-    height: 100vh;
-
-}
-#modal-config .modal-container{
-    margin: 0px;
-    padding: 0px;
+input[type="checkbox"]:checked + .dropdown-toggle .caret {
+    border-top: 0;
+    border-bottom: 5px solid black;
 }
-/* Modal styles */
+
+/* Modal Styles */
 #modal-config {
     position: fixed;
     top: 0;
@@ -244,28 +290,23 @@ label.selected{
     padding: 15px;
     transform: none;
 }
-#modal-config .close{
-    display: none;
+
+#modal-config .block.modal-block.padded {
+    padding-top: 25px;
+    height: 100vh;
 }
 
-/* Push main content to the right when modal is open */
-/* .modal ~ * {
-    margin-left: 300px;
-    transition: margin-left 0.3s ease;
-} */
+#modal-config .modal-container {
+    margin: 0px;
+    padding: 0px;
+}
 
-#modal-config .modal .wrap ul{
-    position:static;
-    top: 100%;
-    left: 0;
-    /* min-height: 100px; */
-    height: 100%;
-    /* margin-top: 0; */
-    z-index: 9999;
-    pointer-events: auto;
-    height: 200px;
+#modal-config .close {
+    display: none;
 }
-#config-button{
+
+/* Config Button Styles */
+#config-button {
     background: none;
     border: none;
     padding: 8px;
@@ -288,155 +329,231 @@ label.selected{
     background-color: rgba(0, 0, 0, 0.1);
 }
 
-#checkbox-config{
-    display: block;
-    position: absolute;
-    background: none;
+/* Relevancy Score Styles */
+.relevancy-score {
+    margin-top: 10px !important;
+    font-size: 10px !important;
+    font-style: italic;
+}
+
+.score-green {
+    color: green !important;
+}
+
+.score-orange {
+    color: orange !important;
+}
+
+.score-red {
+    color: red !important;
+}
+
+/* Gallery Styles */
+.gallery-item > div {
+    white-space: normal !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+}
+
+/* Avatar Styles */
+.avatar-container.svelte-1x5p6hu:not(.thumbnail-item) img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+    padding: 0px;
+    margin: 0px;
+}
+
+/* Message Button Styles */
+.message-buttons-left.panel.message-buttons.with-avatar {
+    display: none;
+}
+
+/* Checkmark Styles */
+.checkmark {
+    color: green !important;
+    font-size: 18px;
+    margin-right: 10px !important;
+}
+
+/* Papers Summary & Relevant Popup Styles */
+#papers-summary-popup button span,
+#papers-relevant-popup span {
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+}
+
+/* Citations Tab Button Style */
+#tab-citations .button {
+    padding: 12px 16px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
     border: none;
-    padding: 8px;
+    outline: none;
+    text-align: left;
+    transition: background-color 0.3s ease;
+}
+
+/* Show Figures Button Style */
+button#show-figures {
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    color: #333333;
     cursor: pointer;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    transition: background-color 0.2s;
-    font-size: 20px;
+    width: 100%;
     text-align: center;
 }
-#checkbox-config:checked{
-    display: block;
+
+/* Gradio Box Style */
+.gr-box {
+    border-color: #d6c37c;
 }
 
+/* Hidden Message Style */
+#hidden-message {
+    display: none;
+}
 
+/* Label Selected Style */
+label.selected {
+    background: #93c5fd !important;
+}
 
-@media screen and (min-width: 1024px) {
-    /* Additional style for scrollable tab content */
-    /* div#tab-recommended_content {
-        overflow-y: auto; 
-        max-height: 80vh; 
-    } */
+/* Submit Button Style */
+#submit-button {
+    padding: 0px !important;
+}
 
-    .gradio-container {
-        max-height: calc(100vh - 190px) !important;
-        overflow: hidden;
-    }
-    /* div#chatbot{
-        height:calc(100vh - 170px) !important;
-        max-height:calc(100vh - 170px) !important;
+/* Hugging Face Space Fixes */
+.h-full {
+    height: auto !important;
+    min-height: 0 !important;
+}
 
-    } */
+.space-content {
+    height: auto !important;
+    max-height: 100vh !important;
+    overflow: hidden;
+}
 
+/* Dropdown Samples Style */
+#dropdown-samples {
+    background: none !important;
+}
 
-    
-    div#tab-examples{
-        height:calc(100vh - 190px) !important;
-        overflow-y: scroll !important;
-        /* overflow-y: auto; */
-    }
+#dropdown-samples > .container > .wrap {
+    background-color: white;
+}
 
-    div#sources-textbox{
-        height:calc(100vh - 190px) !important;
-        overflow-y: scroll !important;
-        /* overflow-y: auto !important; */
-    }
-    div#graphs-container{
-        height:calc(100vh - 210px) !important;
-        overflow-y: scroll !important;
-    }
+/* Tab Examples Form Style */
+#tab-examples > div > .form {
+    border: none;
+    background: none !important;
+}
 
-    div#sources-figures{
-        height:calc(100vh - 300px) !important;
-        max-height: 90vh !important;
-        overflow-y: scroll !important;
-    }
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
 
-    div#graphs-container{
-        height:calc(100vh - 300px) !important;
-        max-height: 90vh !important;
-        overflow-y: scroll !important;
+footer {
+    display: none !important;
+    visibility: hidden;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.a-doc-ref {
+    text-decoration: none !important;
+}
+
+/* Media Queries */
+/* Desktop Media Query */
+@media screen and (min-width: 1024px) {
+    .gradio-container {
+        max-height: calc(100vh - 190px) !important;
+        overflow: hidden;
     }
 
-    div#tab-citations{
-        height:calc(100vh - 300px) !important;
-        max-height: 90vh !important;
+    div#tab-examples,
+    div#sources-textbox,
+    div#tab-config {
+        height: calc(100vh - 190px) !important;
         overflow-y: scroll !important;
     }
 
-    div#tab-config{
-        height:calc(100vh - 190px) !important;
+    div#sources-figures,
+    div#graphs-container,
+    div#tab-citations {
+        height: calc(100vh - 300px) !important;
+        max-height: 90vh !important;
         overflow-y: scroll !important;
-        /* overflow-y: auto !important; */
     }
 
-    /* Force container to respect height limits */
-    .main-component{
-        contain: size layout;
-        overflow: hidden;
+    div#chatbot-row {
+        max-height: calc(100vh - 90px) !important;
     }
 
-
-    div#chatbot-row{
-        max-height:calc(100vh - 90px) !important;
+    div#graphs-container {
+        height: calc(100vh - 210px) !important;
+        overflow-y: scroll !important;
     }
-/*
 
-
-    .max-height{
-        height:calc(100vh - 90px) !important;
-        max-height:calc(100vh - 90px) !important;
+    div#tab-saved-graphs {
         overflow-y: auto;
+        max-height: 80vh;
     }
-*/
-
 }
 
-footer {
-    visibility: hidden;
-    display:none !important;
-}
-
-
+/* Mobile Media Query */
 @media screen and (max-width: 767px) {
-    /* Your mobile-specific styles go here */
-
-    div#chatbot{
-        height:500px !important;
+    div#chatbot {
+        height: 500px !important;
     }
 
-    #submit-button{
-        padding:0px !important;
+    #submit-button {
+        padding: 0 !important;
         min-width: 80px;
     }
 
-    /* This will hide all list items */
     div.tab-nav button {
         display: none !important;
     }
 
-    /* This will show only the first list item */
-    div.tab-nav button:first-child {
-        display: block !important;
-    }
-    
-    /* This will show only the first list item */
+    div.tab-nav button:first-child,
     div.tab-nav button:nth-child(2) {
         display: block !important;
     }
-    
-    #right-panel button{
+
+    #right-panel button {
         display: block !important;
     }
 
-    /* ... add other mobile-specific styles ... */
+    div#tab-recommended_content {
+        max-height: 50vh;
+        overflow-y: auto;
+    }
+    
+    div#tab-saved-graphs {
+        max-height: 50vh;
+        overflow-y: auto;
+    }
 }
 
+/* Dark Mode */
 @media (prefers-color-scheme: dark) {
-    .card{
+    .card {
         background-color: #374151;
     }
-    .card-image > .card-content{
+
+    .card-image > .card-content {
         background-color: rgb(55, 65, 81) !important;
     }
 
@@ -444,294 +561,48 @@ footer {
         background-color: #404652;
     }
 
-    .container > .wrap{
+    .container > .wrap {
         background-color: #374151 !important;
-        color:white !important;
-    }
-    .card-content h2{
-        color:#e7754f !important;
+        color: white !important;
     }
-    .doc-ref sup{
-        color:rgb(235 109 35)!important;
-        /* margin-right:1px; */
+
+    .card-content h2 {
+        color: #e7754f !important;
     }
+
     .card-footer span {
-        color:white !important;
+        color: white !important;
     }
-    
-}
-
-
-.doc-ref{
-    color:#dc2626!important;
-    margin-right:1px;
-}
-
-.tabitem{
-    border:none !important;
-}    
-
-.other-tabs > div{
-    padding-left:40px;
-    padding-right:40px;
-    padding-top:10px;
-}
-
-.gallery-item > div{
-    white-space: normal !important; /* Allow the text to wrap */
-    word-break: break-word !important; /* Break words to prevent overflow */
-    overflow-wrap: break-word !important; /* Break long words if necessary */
-  }
-
-span.chatbot > p > img{
-    margin-top:40px !important;
-    max-height: none !important;
-    max-width: 80% !important;
-    border-radius:0px !important;
-}
-
-
-.chatbot-caption{
-    font-size:11px;
-    font-style:italic;
-    color:#508094;
-}
-
-.ai-generated{
-    font-size:11px!important;
-    font-style:italic;
-    color:#73b8d4 !important;
-}
 
-.card-image > .card-content{
-    background-color:#f1f7fa;
-}
-
-
-
-.tab-nav > button.selected{
-    color:#4b8ec3;
-    font-weight:bold;
-    border:none;
-}
-
-.tab-nav{
-    border:none !important;
-}
-
-#input-textbox > label > textarea{
-    border-radius:40px;
-    padding-left:30px;
-    resize:none;
-}
-
-#input-message > div{
-    border:none;
-}
-
-#dropdown-samples{
-
-  background:none !important;
-  
-}
-
-#dropdown-samples > .container > .wrap{
-  background-color:white;
-}
-
-
-#tab-examples > div > .form{
-  border:none;
-  background:none !important;
-}
+    body.dark .warning-box *,
+    body.dark .tip-box * {
+        color: black !important;
+    }
 
-.a-doc-ref{
-	text-decoration: none !important;
+    .doc-ref sup {
+        color: rgb(235 109 35)!important;
+    }
 }
 
-
-.dropdown {
-    position: relative;
-    display:inline-block;
-    margin-bottom: 10px;
-  }
-  
-  .dropdown-toggle {
-    background-color: #f2f2f2;
-    color: black;
-    padding: 10px;
-    font-size: 16px;
-    cursor: pointer;
-    display: block;
-    width: 400px; /* Adjust width as needed */
-    position: relative;
-    display: flex;
-    align-items: center; /* Vertically center the contents */
-    justify-content: left;
-  }
-  
-  .dropdown-toggle .caret {
-    content: "";
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid black;
-    transform: translateY(-50%);
-  }
-  
-  input[type="checkbox"] {
-    display: none !important;
-  }
-  
-  input[type="checkbox"]:checked + .dropdown-content {
+/* Checkbox Config Style */
+#checkbox-config {
     display: block;
-  }
-
-  #checkbox-chat input[type="checkbox"] {
-    display: flex !important;
-  }
-  
-  .dropdown-content {
-    display: none;
     position: absolute;
-    background-color: #f9f9f9;
-    min-width: 300px;
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-    z-index: 1;
-    padding: 12px;
-    border: 1px solid #ccc;
-  }
-  
-  input[type="checkbox"]:checked + .dropdown-toggle + .dropdown-content {
-    display: block;
-  }
-  
-  input[type="checkbox"]:checked + .dropdown-toggle .caret {
-    border-top: 0;
-    border-bottom: 5px solid black;
-  }
-  
-.loader {
-    border: 1px solid #d0d0d0 !important; /* Light grey background */
-    border-top: 1px solid #db3434 !important; /* Blue color */
-    border-right: 1px solid #3498db !important; /* Blue color */
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: 50%;
-    width: 20px;    
-    height: 20px;
-    animation: spin 2s linear infinite;
-    display:inline-block;
-    margin-right:10px !important;
-}
-  
-.checkmark{
-    color:green !important;
-    font-size:18px;
-    margin-right:10px !important;
-}
-  
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-
-.relevancy-score{
-    margin-top:10px !important;
-    font-size:10px !important;
-    font-style:italic;
-}
-  
-.score-green{
-    color:green !important;
-}
-  
-.score-orange{
-    color:orange !important;
-}
-  
-.score-red{
-    color:red !important;
-}
-
-/* Mobile specific adjustments */
-@media screen and (max-width: 767px) {
-    div#tab-recommended_content {
-        max-height: 50vh; /* Reduce height for smaller screens */
-        overflow-y: auto;
-    }
-}
-
-/* Additional style for scrollable tab content */
-div#tab-saved-graphs {
-    overflow-y: auto; /* Enable vertical scrolling */
-    max-height: 80vh; /* Adjust height as needed */
-}
-
-/* Mobile specific adjustments */
-@media screen and (max-width: 767px) {
-    div#tab-saved-graphs {
-        max-height: 50vh; /* Reduce height for smaller screens */
-        overflow-y: auto;
-    }
-}
-.message-buttons-left.panel.message-buttons.with-avatar {
-    display: none;
-}
-
-
-/* Specific fixes for Hugging Face Space iframe */
-.h-full {
-    height: auto !important;
-    min-height: 0 !important;
+    transition: background-color 0.2s;
+    font-size: 20px;
+    text-align: center;
 }
 
-.space-content {
-    height: auto !important;
-    max-height: 100vh !important;
-    overflow: hidden;
+#checkbox-config:checked {
+    display: block;
 }
-
-
-/* Mobile specific modal configuration */
-@media screen and (max-width: 767px) {
-    #modal-config {
-        width: 100%; /* Full width on mobile */
-        height: 100vh;
-        left: 0;
-        top: 0;
-        padding: 10px; /* Reduced padding for mobile */
-    }
-
-    #modal-config .block.modal-block.padded {
-        padding-top: 15px; /* Reduced top padding */
-        height: 100vh;
-        overflow-y: auto; /* Enable scrolling */
-    }
-
-    #modal-config .modal-container {
-        width: 100%;
-        height: 100%;
-    }
-
-    /* Show close button on mobile */
-    #modal-config .close {
-        display: block;
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        z-index: 1001;
-        padding: 8px;
-        font-size: 24px;
-        background: none;
-        border: none;
-        cursor: pointer;
-    }
-
-    /* Ensure modal content is scrollable on mobile */
-    #modal-config .modal .wrap ul {
-        max-height: calc(100vh - 60px); /* Account for header space */
-        overflow-y: auto;
-    }
-}