Update app.py

app.py

@@ -28,7 +28,7 @@ pdf_file_path = "Private_Book/KOMBI_all2.pdf"  # Replace with your PDF file path
 
 
 def cloud_button(label, query, key=None, color=None, overlap=30):
-    button_id = f"cloud-button-{key or label}"
+    button_id = f"cloud-button-{key or label}".replace(" ", "-")
     color_class = f"color-{color}" if color else ""
     num_circles = max(3, min(35, len(label) // 4))
     circle_size = 60
@@ -40,55 +40,20 @@ def cloud_button(label, query, key=None, color=None, overlap=30):
     circles_html += f'<div class="circle-text">{label}</div>'
 
     cloud_button_html = f"""
-    <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
+    <div class="cloud" id="{button_id}" style="margin-bottom: 20px; cursor: pointer;">
         <div class="wrapper {color_class}">
             {circles_html}
         </div>
     </div>
-    <style>
-        .cloud {{
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }}
-        .wrapper {{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            padding: 10px 20px;
-        }}
-        .circle {{
-            background-color: #FF6347;
-            border-radius: 50%;
-            width: {circle_size}px;
-            height: {circle_size}px;
-            position: relative;
-        }}
-        .circle-text {{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-weight: bold;
-            z-index: 2;
-            white-space: nowrap;
-            text-align: center;
-        }}
-        .cloud:hover .circle {{
-            transform: scale(1.1);
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }}
-        .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() {{
+            const query = "{query}";
+            const label = "{label}";
+            const button_id = "{button_id}";
             window.parent.postMessage({{
+                'isStreamlitMessage': true,
                 'type': 'streamlit:setComponentValue',
-                'value': {{"label": "{label}", "query": "{query}"}},
+                'value': {{'label': label, 'query': query, 'button_id': button_id}},
                 'key': 'button_clicked'
             }}, '*');
         }};
@@ -96,6 +61,7 @@ def cloud_button(label, query, key=None, color=None, overlap=30):
     """
     st.markdown(cloud_button_html, unsafe_allow_html=True)
 
+
 def display_chat_history(chat_history):
     for sender, msg, _ in chat_history:
         background_color = "#FFA07A" if sender == "User" else "#caf"
@@ -173,10 +139,16 @@ def main():
 
         user_input = st.empty()
 
-        if "button_clicked" in st.session_state and st.session_state.button_clicked:
-            user_input = st.session_state.button_clicked["query"]
-            handle_query(user_input, pdf_path)
-            st.session_state.button_clicked = None
+        if "button_clicked" in st.session_state:
+            button_info = st.session_state["button_clicked"]
+            if button_info:
+                st.write(f"You clicked: {button_info['label']}")
+                st.write(f"Query: {button_info['query']}")
+                # Handle the button click as needed
+                # For example, you can call a function to process the query
+                # process_query(button_info['query'])
+                st.session_state["button_clicked"] = None  # Reset after handling
+
 
         if st.button("Ask"):
             user_input = st.session_state.user_query