front/tabs/chat_interface.py

import gradio as gr
from gradio.components import ChatMessage

# 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.*

🛈 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 ?
"""



# 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"):
        
        textbox = gr.Textbox(
            placeholder="Ask me anything here!",
            show_label=False,
            scale=12,
            lines=1,
            interactive=True,
            elem_id=f"input-textbox"
        )
        
        config_button = gr.Button("", elem_id="config-button")
    
    return chatbot, textbox, config_button