Update app.py

app.py

@@ -29,27 +29,24 @@ import streamlit as st
 
 import streamlit as st
 
+import streamlit as st
+
 def cloud_button(label, key=None, color=None):
     button_id = f"cloud-button-{key or label}"
     color_class = f"color-{color}" if color else ""
     num_circles = max(3, min(12, len(label) // 4))  # Adjust the number of circles based on text length
     
-    # Calculate the overlap and spacing for the circles
-    circle_diameter = 60
-    overlap = 0.4  # 40% overlap
-    spacing = circle_diameter * (1 - overlap)
-    
     # Generate circles on both sides of the text
     circles_html = ''.join([
-        f'<div class="circle {color_class}" style="margin-right: -{spacing}px;"></div>' for _ in range(num_circles//2)
+        f'<div class="circle {color_class}" style="margin-right: -15px;"></div>' for _ in range(num_circles//2)
     ] + [
-        f'<div class="circle {color_class}" style="margin-left: -{spacing}px;"></div>' for _ in range(num_circles//2)
+        f'<div class="circle {color_class}" style="margin-left: -15px;"></div>' for _ in range(num_circles//2)
     ])
 
     cloud_button_html = f"""
-    <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
+    <div class="cloud {color_class}" id="{button_id}" style="margin-bottom: 20px; display: inline-block;">
         {circles_html}
-        <span class="text {color_class}">{label}</span>
+        <div class="rectangle {color_class}">{label}</div>
     </div>
     <style>
         .cloud {{
@@ -61,7 +58,10 @@ def cloud_button(label, key=None, color=None):
             font-size: 16px;
             white-space: nowrap;
         }}
-        .text {{
+        .rectangle {{
+            min-width: 120px;
+            height: auto;
+            border-radius: 30px;
             position: relative;
             display: inline-flex;
             align-items: center;
@@ -69,23 +69,16 @@ def cloud_button(label, key=None, color=None):
             font-weight: bold;
             padding: 10px 20px;
             z-index: 2;
-            transition: background-color 0.4s;
-            border-radius: 30px;
+            background-color: #9BBEFF;
         }}
         .circle {{
+            background-color: #9BBEFF;
             border-radius: 50%;
-            width: {circle_diameter}px;
-            height: {circle_diameter}px;
+            width: 30px;
+            height: 30px;
             position: relative;
             z-index: 1;
         }}
-        .cloud:hover .text {{
-            background-color: #008CBA;
-            color: white;
-        }}
-        .color-1 .text, .color-1 .circle {{ background-color: #FFA07A; }}
-        .color-2 .text, .color-2 .circle {{ background-color: #FF7F50; }}
-        .color-3 .text, .color-3 .circle {{ background-color: #FF6347; }}
     </style>
     <script>
         document.getElementById("{button_id}").onclick = function() {{
@@ -95,6 +88,11 @@ def cloud_button(label, key=None, color=None):
     """
     st.markdown(cloud_button_html, unsafe_allow_html=True)
 
+# Examples
+cloud_button("Short Text", color="1")
+cloud_button("This is a longer piece of text", color="2")
+cloud_button("This is an even longer piece of text to test the cloud button", color="3")
+
 
 
 
@@ -166,9 +164,7 @@ def main():
     # Main content
     st.title("Welcome to BinDocs ChatBot! 🤖")
 
-    cloud_button("Short Text", color="1")
-    cloud_button("This is a longer piece of text", color="2")
-    cloud_button("This is an even longer piece of text to test the cloud button", color="3")
+
 
 
     pdf_path = "path_to_your_pdf_file.pdf"  # Update this to the path of your PDF file