clean chat and style

app.py

@@ -3,8 +3,6 @@ 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
@@ -16,8 +14,6 @@ import json
 
 from gradio import ChatMessage
 
-# from gradio_modal import Modal
-
 from io import BytesIO
 import base64
 
@@ -28,19 +24,13 @@ from utils import create_user_id
 
 from gradio_modal import Modal
 
-from PIL import Image
-
-from langchain_core.runnables.schema import StreamEvent
 
 # ClimateQ&A imports
 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
@@ -57,7 +47,6 @@ try:
 except Exception as e:
     pass
 
-import requests
 
 # Set up Gradio Theme
 theme = gr.themes.Base(
@@ -68,7 +57,24 @@ theme = gr.themes.Base(
 
 
 
-init_prompt = ""
+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 ?
+"""
 
 system_template = {
     "role": "system",
@@ -122,27 +128,49 @@ def update_config_modal_visibility(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)"""
-
+    """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 (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)
-
-    # Prepare default values
-    if sources is None or len(sources) == 0:
-        sources = ["IPCC", "IPBES", "IPOS"]
-
-    if reports is None or len(reports) == 0:
-        reports = []
+    sources = sources or ["IPCC", "IPBES", "IPOS"]
+    reports = reports or []
     
-    inputs = {"user_input": query,"audience": audience_prompt,"sources_input":sources, "relevant_content_sources" : relevant_content_sources, "search_only": search_only}
-    result = agent.astream_events(inputs,version = "v1") 
-
+    # Prepare inputs for agent
+    inputs = {
+        "user_input": query,
+        "audience": audience_prompt,
+        "sources_input": sources,
+        "relevant_content_sources": relevant_content_sources,
+        "search_only": search_only
+    }
+    
+    # Get streaming events from agent
+    result = agent.astream_events(inputs, version="v1")
 
+    # Initialize state variables
     docs = []
-    used_figures=[]
+    used_figures = []
     related_contents = []
     docs_html = ""
     output_query = ""
@@ -151,79 +179,91 @@ async def chat(query, history, audience, sources, reports, relevant_content_sour
     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" :# 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":
+                    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_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_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 #,output_query,output_keywords
 
+    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 
 
@@ -291,275 +331,236 @@ def save_graph(saved_graphs_state, embedding, category):
         saved_graphs_state[category].append(embedding)
     return saved_graphs_state, gr.Button("Graph Saved")
 
-
-
-with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=theme,elem_id = "main-component") as demo:
+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 = gr.Chatbot(
-                    value = [ChatMessage(role="assistant", content=init_prompt)],
-                    type = "messages",
+                    value=[ChatMessage(role="assistant", content=init_prompt)],
+                    type="messages",
                     show_copy_button=True,
-                    show_label = False,
+                    show_label=False,
                     elem_id="chatbot",
-                    layout = "panel",
-                    avatar_images = (None,"https://i.ibb.co/YNyd5W2/logo4.png"),
+                    layout="panel", 
+                    avatar_images=(None, "https://i.ibb.co/YNyd5W2/logo4.png"),
                     max_height="80vh",
                     height="100vh"
                 )
-                
-                # bot.like(vote,None,None)
-
-
-
-                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")
-                    
-                    config_button = gr.Button("",elem_id="config-button")
-                    # config_checkbox_button = gr.Checkbox(label = '⚙️', value="show",visible=True, interactive=True, elem_id="checkbox-config")
-                    
-                
-
-            with gr.Column(scale=2, variant="panel",elem_id = "right-panel"):
 
-
-                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)
+                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"
+                    )
+                    config_button = gr.Button("", elem_id="config-button")
+
+            # 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 = 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")
+                        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 = True if i == 0 else False
-
-                            with gr.Row(visible = examples_visible) as group_examples:
-
+                        for i, key in enumerate(QUESTIONS.keys()):
+                            examples_visible = (i == 0)
+                            with gr.Row(visible=examples_visible) as group_examples:
                                 examples_questions = gr.Examples(
-                                    QUESTIONS[key],
-                                    [examples_hidden],
+                                    examples=QUESTIONS[key],
+                                    inputs=[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,
+                                    api_name=f"examples{i}"
                                 )
-                            
                             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 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")
-                    
-                    
-                        
-                    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:
-        
-                            with gr.Tab("Figures",elem_id = "tab-figures",id = 3) as tab_figures:
+
+                    # 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 = 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")
+                                    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)
+                                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 subtab
+                            with gr.Tab("Papers", elem_id="tab-citations", id=4) as tab_papers:
+                                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:
+                                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)
-                    
-                                        
-                            
+                                    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
+                                )
+
+                            # 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 Modal(visible=False,elem_id="modal-config") as config_modal:
+                                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]
+                                )
+
+            # Configuration modal
+            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"],
+                    choices=["IPCC", "IPBES", "IPOS"],
                     label="Select source (by default search in all sources)",
                     value=["IPCC"],
-                    interactive=True,
+                    interactive=True
                 )
-                
+
                 dropdown_reports = gr.Dropdown(
-                    POSSIBLE_REPORTS,
+                    choices=POSSIBLE_REPORTS,
                     label="Or select specific reports",
                     multiselect=True,
                     value=None,
-                    interactive=True,
+                    interactive=True
                 )
-                                
+
                 dropdown_external_sources = gr.CheckboxGroup(
-                    ["IPCC figures","OpenAlex", "OurWorldInData"],
-                    label="Select database to search for relevant content",
+                    choices=["IPCC figures", "OpenAlex", "OurWorldInData"],
+                    label="Select database to search for relevant content", 
                     value=["IPCC figures"],
-                    interactive=True,
+                    interactive=True
                 )
 
-                search_only = gr.Checkbox(label="Search only for recommended content without chating", value=False, interactive=True, elem_id="checkbox-chat")
-
+                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"],
+                    choices=["Children", "General public", "Experts"],
                     label="Select audience",
                     value="Experts",
-                    interactive=True,
+                    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])
-                
-                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")
-
-   
 
+                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
+                )
 
-#---------------------------------------------------------------------------------------
-# OTHER TABS
-#---------------------------------------------------------------------------------------
-
-    # with gr.Tab("Settings",elem_id = "tab-config",id = 2):
-
-    #     gr.Markdown("Reminder: You can talk in any language, ClimateQ&A is multi-lingual!")
-
+                output_query = gr.Textbox(
+                    label="Query used for retrieval",
+                    show_label=True,
+                    elem_id="reformulated-query",
+                    lines=2,
+                    interactive=False,
+                    visible=False
+                )
 
-    #     dropdown_sources = gr.CheckboxGroup(
-    #         ["IPCC", "IPBES","IPOS", "OpenAlex"],
-    #         label="Select source",
-    #         value=["IPCC"],
-    #         interactive=True,
-    #     )
+                output_language = gr.Textbox(
+                    label="Language",
+                    show_label=True,
+                    elem_id="language",
+                    lines=1,
+                    interactive=False,
+                    visible=False
+                )
 
-    #     dropdown_reports = gr.Dropdown(
-    #         POSSIBLE_REPORTS,
-    #         label="Or select specific reports",
-    #         multiselect=True,
-    #         value=None,
-    #         interactive=True,
-    #     )
+                dropdown_external_sources.change(
+                    lambda x: gr.update(visible="OpenAlex" in x),
+                    inputs=[dropdown_external_sources],
+                    outputs=[after]
+                )
 
-    #     dropdown_audience = gr.Dropdown(
-    #         ["Children","General public","Experts"],
-    #         label="Select audience",
-    #         value="Experts",
-    #         interactive=True,
-    #     )
+                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]
+                )
 
+            config_button.click(
+                fn=update_config_modal_visibility,
+                inputs=[config_open],
+                outputs=[config_modal, config_open]
+            )
 
-    #     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)
 
+#---------------------------------------------------------------------------------------
+# OTHER TABS
+#---------------------------------------------------------------------------------------
 
     with gr.Tab("About",elem_classes = "max-height other-tabs"):
         with gr.Row():

style.css

@@ -1,89 +1,134 @@
-
+/* 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; */
-    width: 100%; /* Ensures the parent uses the full width */
-    position : sticky;
+    width: 100%;
+    position: sticky;
 }
 
 #group-subtabs .tab-container {
     display: flex;
     text-align: center;
-    width: 100%; /* Ensures the tabs span the full width */
+    width: 100%;
 }
 
 #group-subtabs .tab-container button {
-    flex: 1; /* Makes each button take equal width */
+    flex: 1;
 }
 
+.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;
@@ -93,32 +138,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;
@@ -130,116 +163,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;
@@ -252,28 +297,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;
@@ -296,155 +336,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;
     }
 
@@ -452,251 +568,48 @@ footer {
         background-color: #404652;
     }
 
-    .container > .wrap{
+    .container > .wrap {
         background-color: #374151 !important;
-        color:white !important;
+        color: white !important;
     }
-    .card-content h2{
-        color:#e7754f !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;
 }