add new descriptions and feedback button

src/app.py

@@ -3,7 +3,6 @@ import pandas as pd
 import streamlit as st
 
 
-
 from rag.pipeline import RAGPipeline
 from utils.data import (
     build_filter,
@@ -89,10 +88,15 @@ def load_app_init() -> None:
     st.title("INC Plastic Pollution Country Profile Analysis")
 
     # add warning emoji and style
+
     st.markdown(
         """
-        <p class="remark"> ⚠️ Remark:
-        The app is a beta version that serves as a basis for further development. We are aware that the performance is not yet sufficient and that the data basis is not yet complete. We are grateful for any feedback that contributes to the further development and improvement of the app!
+    <div class="remark">
+        <div class="remark-content">
+            <p class="remark-text"> ⚠️ The app is a beta version that serves as a basis for further development. We are aware that the performance is not yet sufficient and that the data basis is not yet complete. We are grateful for any feedback that contributes to the further development and improvement of the app!</p>
+        </div>
+        <a href="mailto:datalab@giz.de" class="feedback-link">Send feedback</a>
+    </div>
     """,
         unsafe_allow_html=True,
     )
@@ -101,7 +105,9 @@ def load_app_init() -> None:
     st.markdown(
         """
         <p class="description">
-        The app is tailored to enhance the efficiency of finding and accessing information on the UN Plastics Treaty Negotiations. It hosts a comprehensive database of relevant documents available at www.unep.org/inc-plastic-pollution, which users can explore through an intuitive chatbot interface. While the app can process only up to 8 relevant documents at a time to answer questions—potentially limiting responses to complex inquiries—it excels in querying specific information about countries and their stances in the negotiations. Users can utilize advanced filtering options to refine searches by author and sections of the negotiation draft increasing the accuracy of the search results. Each document obtained via these filters is directly accessible through a link, ensuring complete and easy access to the needed information.
+        The app is tailored to enhance the efficiency of finding and accessing information on the UN Plastics Treaty Negotiations. It hosts a comprehensive database of relevant documents submitted by the members available at <a href="https://www.unep.org/inc-plastic-pollution"> here</a>, which users can explore through an intuitive chatbot interface as well as a simple filtering options.
+        The app excels in querying specific information about countries and their positions in  the negotiations, providing targeted and precise answers. However, it can process only up to 8 relevant documents at a time, which may limit responses to more complex inquiries. Filter options by authors and sections of the negotiation draft ensure the accuracy of the answers. Each document found via these filters is also directly accessible via a link, ensuring complete and easy access to the desired information
+        </p>
         """,
         unsafe_allow_html=True,
     )
@@ -130,6 +136,13 @@ application_col = st.columns(1)
 
 with application_col[0]:
     st.markdown("""<p class="header"> 1️⃣ Select countries""", unsafe_allow_html=True)
+    st.markdown(
+        """
+        <p class="description">
+        Please select the countries of interest. Your selection will refine the database to include documents submitted by these countries or recognized groupings such as Small Developing States, the African States Group, etc.Please select the countries of interest. Your selection will refine the database to include documents submitted by these countries or recognized groupings such as Small Developing States, the African States Group, etc. </p>
+        """,
+        unsafe_allow_html=True,
+    )
     selected_authors = st.multiselect(
         label="country",
         options=countries,
@@ -141,24 +154,32 @@ with application_col[0]:
     st.write("\n")
 
     st.markdown(
-        """<p class="header">  2️⃣ Parts of the negotiation draft""", unsafe_allow_html=True
+        """<p class="header">  2️⃣ Select parts of the negotiation draft""",
+        unsafe_allow_html=True,
+    )
+    st.markdown(
+        """
+        <p class="description">
+        Please select the parts of the negotiation draft of interest. The negotiation draft can be accessed <a href="https://www.unep.org/inc-plastic-pollution/session-4/documents"> here</a>. </p>
+        """,
+        unsafe_allow_html=True,
     )
     selected_draft_cats = st.multiselect(
         label="Subpart",
         options=draft_labels,
         label_visibility="collapsed",
-        placeholder="Select draft category/",
+        placeholder="Select draft category/draft categories",
     )
 
     st.write("\n")
     st.write("\n")
 
     st.markdown(
-        """<p class="header"> 3️⃣ Show documents or ask a question based on selected filters""",
+        """<p class="header"> 3️⃣ Ask a question or show documents based on selected filters""",
         unsafe_allow_html=True,
     )
 
-    filtering, asking = st.tabs(["Filter documents", "Ask a question"])
+    asking, filtering = st.tabs(["Ask a question", "Filter documents"])
 
     with filtering:
         application_col_filter, output_col_filter = st.columns([1, 1.5])
@@ -167,8 +188,8 @@ with application_col[0]:
             st.markdown(
                 """
                 <p class="description"> \n
-                - The filter function allows you to see all documents that match the selected filters \n
-                - All documents selected via the filter function can be accessed via a link. \n
+                - This filter function allows you to see all documents that match the selected filters \n
+                - The documents can be accessed via a link. \n
                 """,
                 unsafe_allow_html=True,
             )
@@ -310,24 +331,6 @@ with application_col[0]:
                         markdown_text += f"        - {content}\n"
                     st.write(markdown_text)
 
-        # col4 = st.columns(1)
-        # with col4[0]:
-        #     references = []
-        #     for document in documents:
-        #         authors = document.meta["author"]
-        #         authors = authors.replace("'", "").replace("[", "").replace("]", "")
-        #         href = document.meta["href"]
-        #         source = f"- {authors}: {href}"
-        #         references.append(source)
-        #         references = list(set(references))
-        #         references = sorted(references)
-        #     st.markdown("### Overview of all filtered documents")
-        #     st.markdown(
-        #         f"<p class='description'> The answer above results from the most similar text passages (top 7) from the documents that you can find under 'References' in the answer block. Below you will find an overview of all documents that match the filters you have selected. Please note that the above answer is based specifically on the highlighted references above and does not include the findings from all the filtered documents shown below. \n For your current filtering, {len(references)} documents were found. </p>",
-        #         unsafe_allow_html=True,
-        #     )
-        #     for reference in references:
-        #         st.write(reference)
         trigger = 0
 
     if trigger_filter:

style/style.css

@@ -1,16 +1,46 @@
-/* Style the remark */
 .remark {
-    background-color: #ffdddd;
-    border-color: #ff5252;
-    color: #b50d1c;
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border: 1px solid transparent;
+    background-color: #FFCDD2;
+    border: 1px solid #E57373;
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    font-size:20px ;
+    margin-bottom: 1rem;
+    padding: 1rem;
+}
+
+.remark-content {
+    display: flex;
+    align-items: center;
 }
 
+.remark-text {
+    margin-bottom: 0.5rem;
+    font-size: 20;
+}
+
+.feedback-link {
+    display: inline-block;
+    background-color: #b50d1c; /* Adjusted color */
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    font-size: 1rem;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added */
+}
+
+.feedback-link:hover {
+    background-color: #8c0716; /* Adjusted hover color */
+}
+
+.feedback-link[href^="mailto"] {
+    color: white !important;
+    text-decoration: none !important;
+}
+
+
+
 /* Style streamlit general text */
 .description {
     font-size:20px !important;