Update app.py

app.py

@@ -12,8 +12,13 @@ from langchain.chains.question_answering import load_qa_chain
 from langchain.callbacks import get_openai_callback
 import os
 
+# Add this function to handle button clicks
+def on_button_click(query):
+    st.session_state['button_clicked'] = query
 
-def cloud_button(label, key=None, color=None, overlap=30):
+import streamlit as st
+
+def cloud_button(label, query, key=None, color=None, overlap=30):
     button_id = f"cloud-button-{key or label}"
     color_class = f"color-{color}" if color else ""
     num_circles = max(3, min(35, len(label) // 4))
@@ -63,25 +68,26 @@ def cloud_button(label, key=None, color=None, overlap=30):
             white-space: nowrap;  /* Prevent line breaks */
             text-align: center; /* Center the text horizontally and vertically */
         }}
-        /* Add this CSS for the hover effect and shadow */
         .cloud:hover .circle {{
-        transform: scale(1.1); /* Scale up the circles on hover */
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
+            transform: scale(1.1); /* Scale up the circles on hover */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
         }}
-        
         .color-1 .circle {{ background-color: #FFA07A; }}
         .color-2 .circle {{ background-color: #FF7F50; }}
         .color-3 .circle {{ background-color: #FF6347; }}
     </style>
     <script>
         document.getElementById("{button_id}").onclick = function() {{
-            // Your existing JavaScript code for handling button click
+            window.parent.postMessage({{
+                'type': 'streamlit:setComponentValue',
+                'value': {{"label": "{label}", "query": "{query}"}},
+                'key': 'button_clicked'
+            }}, '*');
         }};
     </script>
     """
     st.markdown(cloud_button_html, unsafe_allow_html=True)
 
-
 # Step 1: Clone the Dataset Repository
 repo = Repository(
     local_dir="Private_Book",  # Local directory to clone the repository
@@ -152,7 +158,6 @@ def load_chatbot():
     return load_qa_chain(llm=OpenAI(), chain_type="stuff")
 
 def main():
-
     hide_streamlit_style = """
             <style>
             #MainMenu {visibility: hidden;}
@@ -161,10 +166,9 @@ def main():
             """
     st.markdown(hide_streamlit_style, unsafe_allow_html=True)
 
-
     # Main content
     st.title("Welcome to BinDocs ChatBot! 🤖")
-    
+
     # Directly specifying the path to the PDF file
     pdf_path = pdf_file_path
     if not os.path.exists(pdf_path):
@@ -177,7 +181,6 @@ def main():
     if "button_clicked" not in st.session_state:
         st.session_state['button_clicked'] = None
 
-
     display_chat_history(st.session_state['chat_history'])
 
     st.write("<!-- Start Spacer -->", unsafe_allow_html=True)
@@ -189,18 +192,17 @@ def main():
     if pdf_path is not None:
         query = st.text_input("Ask questions about your PDF file (in any preferred language):")
 
-        cloud_button("Was genau ist ein Belegarzt?", key="button1", color="1")
-        cloud_button("Wofür wird die Alpha-ID verwendet?", key="button2", color="2")
-        cloud_button("Was sind die Vorteile des ambulanten operierens?", key="button3", color="3")
-        cloud_button("Was kann ich mit dem Prognose-Analyse Toll machen?", key="button4", color="4")
-        cloud_button("Was sagt mir die Farbe der Balken der Bevölkerungsentwicklung?", key="button5", color="5")
-        cloud_button("Ich habe mein Meta Password vergessen, wie kann ich es zurücksetzen?", key="button6", color="6")
+        cloud_button("Was genau ist ein Belegarzt?", "Was genau ist ein Belegarzt?", key="button1", color="1")
+        cloud_button("Wofür wird die Alpha-ID verwendet?", "Wofür wird die Alpha-ID verwendet?, key="button2", color="2")
+        cloud_button("Was sind die Vorteile des ambulanten operierens?", "Was sind die Vorteile des ambulanten operierens?", key="button3", color="3")
+        cloud_button("Was kann ich mit dem Prognose-Analyse Toll machen?", "Was kann ich mit dem Prognose-Analyse Toll machen?", key="button4", color="4")
+        cloud_button("Was sagt mir die Farbe der Balken der Bevölkerungsentwicklung?", "Was sagt mir die Farbe der Balken der Bevölkerungsentwicklung?", key="button5", color="5")
+        cloud_button("Ich habe mein Meta Password vergessen, wie kann ich es zurücksetzen?", "Ich habe mein Meta Password vergessen, wie kann ich es zurücksetzen?", key="button6", color="6")
 
-            # Handle button clicks
         if st.session_state['button_clicked']:
-            query = st.session_state['button_clicked']
+            label, query = st.session_state['button_clicked'].values()
+            st.session_state['chat_history'].append(("User", label, "new"))
             st.session_state['button_clicked'] = None
-        
             
         if st.button("Ask") or (not st.session_state['chat_history'] and query) or (st.session_state['chat_history'] and query != st.session_state['chat_history'][-1][1]):
             st.session_state['chat_history'].append(("User", query, "new"))
@@ -216,29 +218,22 @@ def main():
 
             st.session_state['chat_history'].append(("Bot", response, "new"))
 
-            # Display new messages at the bottom
             new_messages = st.session_state['chat_history'][-2:]
             for chat in new_messages:
                 background_color = "#FFA07A" if chat[2] == "new" else "#acf" if chat[0] == "User" else "#caf"
                 new_messages_placeholder.markdown(f"<div style='background-color: {background_color}; padding: 10px; border-radius: 10px; margin: 10px;'>{chat[0]}: {chat[1]}</div>", unsafe_allow_html=True)
 
-            # Scroll to the latest response using JavaScript
             st.write("<script>document.getElementById('response').scrollIntoView();</script>", unsafe_allow_html=True)
 
             loading_message.empty()
-
-            # Clear the input field by setting the query variable to an empty string
             query = ""
 
-        # Mark all messages as old after displaying
         st.session_state['chat_history'] = [(sender, msg, "old") for sender, msg, _ in st.session_state['chat_history']]
 
-
-
 def display_chat_history(chat_history):
     for chat in chat_history:
         background_color = "#FFA07A" if chat[2] == "new" else "#acf" if chat[0] == "User" else "#caf"
         st.markdown(f"<div style='background-color: {background_color}; padding: 10px; border-radius: 10px; margin: 10px;'>{chat[0]}: {chat[1]}</div>", unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    main()
+    main()