Update app.py

app.py

@@ -12,44 +12,48 @@ from langchain.chains.question_answering import load_qa_chain
 from langchain.callbacks import get_openai_callback
 import os
 
-
-cloud_button_style = """
-<style>
-.cloud-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 15px;
-  font-size: 14px;
-  cursor: pointer;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  color: #fff;
-  background-color: #add8e6;
-  border: none;
-  border-radius: 20px;
-  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
-  margin: 5px;
-}
-
-.cloud-button:hover {
-  background-color: #9fced1;
-}
-
-.cloud-button:active {
-  background-color: #87b6a7;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  transform: translateY(2px);
-}
-</style>
-"""
-st.markdown(cloud_button_style, unsafe_allow_html=True)
-
 def cloud_button(label, key):
-    button_html = f'<button onclick="javascript:window.parent.postMessage({{\'setSessionState\': {{\'{key}\': true}}}}, \'*\');" class="cloud-button">{label}</button>'
+    button_id = f"button_{key}"
+    button_html = f"""
+        <style>
+            #{button_id} {{
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 8px 15px;
+                font-size: 14px;
+                cursor: pointer;
+                text-align: center;
+                text-decoration: none;
+                outline: none;
+                color: #fff;
+                background-color: #add8e6;
+                border: none;
+                border-radius: 20px;
+                box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+                margin: 5px;
+            }}
+            #{button_id}:hover {{
+                background-color: #9fced1;
+            }}
+            #{button_id}:active {{
+                background-color: #87b6a7;
+                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+                transform: translateY(2px);
+            }}
+        </style>
+        <button id="{button_id}" class="cloud-button">{label}</button>
+        <script>
+            document.getElementById("{button_id}").onclick = function() {{
+                window.parent.postMessage({{
+                    'setSessionState': {{ '{key}': true }}
+                }}, "*");
+            }};
+        </script>
+    
     st.markdown(button_html, unsafe_allow_html=True)
     return st.session_state.get(key, False)
+
         
 # Step 1: Clone the Dataset Repository
 repo = Repository(
@@ -71,7 +75,9 @@ with st.sidebar:
     
     add_vertical_space(1)  # Adjust as per the desired spacing
     
-    st.markdown("""
+    st.markdown(""")
+
+
     Hello! I’m here to assist you with:<br><br>
     📘 **Glossary Inquiries:**<br>
     I can clarify terms like "DiGA", "AOP", or "BfArM", providing clear and concise explanations to help you understand our content better.<br><br>
@@ -158,9 +164,10 @@ def main():
         query = st.text_input("Ask questions about your PDF file (in any preferred language):")
 
         # Buttons for predefined queries
-        if st.button("Was genau ist ein Belegarzt?", key="button1"):
+        if cloud_button("Was genau ist ein Belegarzt?", "belegarzt_button"):
             query = "Was genau ist ein Belegarzt?"
 
+
         if st.button("Wofür wird die Alpha-ID verwendet?", key="button2"):
             query = "Wofür wird die Alpha-ID verwendet?"