Update app.py

app.py

@@ -546,6 +546,71 @@ def delete_document(user_id, doc_id):
     except Exception as e:
         st.error(f"Error deleting document: {e}")
 
+def display_popup():
+    # Custom CSS for the pop-up message
+    popup_css = """
+    <style>
+    .custom-popup {
+        background-color: #f9f9f9;
+        color: #333;
+        padding: 15px;
+        border-radius: 8px;
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+        margin-top: 10px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    .custom-popup code {
+        background-color: #e1e1e1;
+        padding: 2px 4px;
+        border-radius: 4px;
+        color: #333;
+        font-family: monospace;
+    }
+    .custom-popup b {
+        color: #333;
+    }
+    .custom-popup i {
+        color: #333;
+    }
+    </style>
+    """
+    # Inject custom CSS
+    st.markdown(popup_css, unsafe_allow_html=True)
+    # Display the pop-up message
+    st.markdown("""
+    <div class="custom-popup">
+        <b>Here’s how you can save your TrustBuilder® using Trustifier AI:</b><br><br>
+        1. Type your TrustBuilder® in the chat.<br><br>
+        2. If you're unsure of the TrustBucket®, ask the AI:<br>
+        <i>"Hey, which TrustBucket does this TrustBuilder® belong to?"</i><br><br>
+        3. Save it using the following format:<br>
+        <code>Save this as a TrustBuilder. [BucketName]. [TrustBuilder Text]</code><br><br>
+        <b>Example:</b><br>
+        <code>Save this as a TrustBuilder. Stability. We focus on keeping and nurturing our team.</code>
+    </div>
+
+
+    """, unsafe_allow_html=True)
+
+# Initialize session state for button click
+if 'letai_allocate_clicked' not in st.session_state:
+    st.session_state['letai_allocate_clicked'] = False
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 def side():
     with st.sidebar:
@@ -825,104 +890,83 @@ def side():
         trust_builder_text = st.text_area("Type/paste Trust Builder®", key="trust_builder_text")
         trust_buckets = ["Stability", "Development", "Relationship", "Benefit", "Vision", "Competence"]
         selected_save_bucket = st.selectbox("Allocate to®", trust_buckets, key="save_bucket")
+        
+        col1, col2 = st.columns([1, 1])  # Adjust column widths as needed
+        with col1:
 
-
-        if st.button("Allocate", key="save_trustbuilder"):
-                    if trust_builder_text.strip() and selected_save_bucket:
-                        content_to_save = f"{selected_save_bucket}: Brand: {brand_save.strip()} | {trust_builder_text.strip()}"
-                        save_content(st.session_state.get("wix_user_id"), content_to_save)
-                    else:
-                        st.warning("Please fill all fields")
+            if st.button("Allocate", key="save_trustbuilder"):
+                        if trust_builder_text.strip() and selected_save_bucket:
+                            content_to_save = f"{selected_save_bucket}: Brand: {brand_save.strip()} | {trust_builder_text.strip()}"
+                            save_content(st.session_state.get("wix_user_id"), content_to_save)
+                        else:
+                            st.warning("Please fill all fields")
     
-        
+        with col2:
+                custom_button_css = """
+                <style>
+                .custom-button {
+                    background-color: rgb(82, 129, 134);
+                    color: white;
+                    border: none;
+                    padding: 8px 16px;
+                    font-size: 14px;
+                    border-radius: 5px;
+                    cursor: pointer;
+                    font-family: Arial, sans-serif;
+                }
+                .custom-button:hover {
+                    background-color: rgb(70, 115, 119);
+                }
+                </style>
+                """
+                st.markdown(custom_button_css, unsafe_allow_html=True)
+            
+                # Create a unique ID for the button
+                import uuid
+                button_id = 'custom_button_' + str(uuid.uuid4()).replace('-', '')
+            
+                # HTML and JavaScript for the custom button
+                custom_button_html = f"""
+                <button class="custom-button" id="{button_id}">LetAI Allocate</button>
+                <script>
+                const btn = document.getElementById("{button_id}");
+                btn.addEventListener("click", function() {{
+                    // Send a message to Streamlit to set a session state variable
+                    fetch('/_stcore/streamlit/report/session_state', {{
+                        method: 'POST',
+                        headers: {{
+                            'Content-Type': 'application/json'
+                        }},
+                        body: JSON.stringify({{ 'letai_allocate_clicked': true }})
+                    }}).then((response) => {{
+                        window.location.reload();
+                    }});
+                }});
+                </script>
+                """
+                st.markdown(custom_button_html, unsafe_allow_html=True)
+            
+            # Check if the custom button was clicked
+        if st.session_state['letai_allocate_clicked']:
+                display_popup()
+                # Reset the click state
+                st.session_state['letai_allocate_clicked'] = False
+            
+                
+side()
+if st.session_state.get("wix_user_id") and "faiss_db" not in st.session_state:
+    refresh_faiss_index()
+
 
-        tooltip_css = """
-        <style>
-        .tooltip-container {
-            position: relative; 
-            display: inline-block; 
-            vertical-align: top; 
-            margin-top: -15px;
-        }
 
-        .tooltip-container .tooltiptext {
-            visibility: hidden;
-            max-width: 90%; /* Tooltip width based on parent container */
-            width: auto; /* Automatically adjust width */
-            background-color: #f9f9f9;
-            color: #333;
-            text-align: left;
-            border-radius: 8px;
-            padding: 10px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            position: absolute;
-            z-index: 1000; /* Ensure tooltip is above other elements */
-            top: 100%; /* Position below the button */
-            left: 50%; /* Center horizontally */
-            transform: translateX(-50%);
-            opacity: 0;
-            transition: opacity 0.3s ease-in-out;
-            word-wrap: break-word; /* Ensure long text wraps */
-        }
-        .tooltip-container:hover .tooltiptext {
-            visibility: visible;
-            opacity: 1;
-        }
 
-        .tooltip-container button {
-            background-color: rgb(82, 129, 134);
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            font-size: 14px;
-            border-radius: 5px;
-            cursor: pointer;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-            font-family: Arial, sans-serif;
-        }
 
-        .tooltip-container button:hover {
-            background-color: rgb(70, 115, 119);
-        }
-         </style>
-        """
 
-                    
-                    # Inject CSS
-        st.markdown(tooltip_css, unsafe_allow_html=True)
-            
-        st.markdown("""
-                        <div class="tooltip-container">
-                            <button>LetAI Allocate</button>
-                            <span class="tooltiptext">
-                                <b>Here’s how you can save your TrustBuilder®:</b><br><br>
-                                1. Type your TrustBuilder® in the chat.<br>
-                                2. If unsure of the TrustBucket®, ask the AI:<br>
-                                   <i>"Hey, which TrustBucket does this TrustBuilder® belong to?"</i><br><br>
-                                3. Save it using the following format:<br>
-                                   <code>Save this as a TrustBuilder. [BucketName]. [TrustBuilder Text]</code><br><br>
-                                Example:<br>
-                                   <code>Save this as a TrustBuilder. Stability. We focus on keeping and nurturing our team.</code>
-                            </span>
-                        </div>
-                    """, unsafe_allow_html=True)
-    
 
-            
-       
-    
-side()
-if st.session_state.get("wix_user_id") and "faiss_db" not in st.session_state:
-    refresh_faiss_index()
 
-def append_to_chat_input(brand, trust_text):
-    if brand.strip() and trust_text.strip():
-        appended_text = f"Brand: {brand.strip()} | TrustBuilder: {trust_text.strip()} Find the right TrustBucket"
-        st.session_state["chat_input_text"] = appended_text
-    else:
-        st.warning("Please fill both Brand and TrustBuilder fields before allocating.")
 
 
+ 
 
 # Define search functions
 def search_knowledge_base(query):