Update app.py

app.py

@@ -74,6 +74,11 @@ custom_css = """
 #nps-close:hover {
     color: black;
 }
+#nps-box button:active {
+    transform: scale(0.95);
+    background-color: #ddd;
+}
+
 """
 
 
@@ -118,54 +123,28 @@ with gr.Blocks() as interface:
         #         with gr.Row():
         #             nps_submit = gr.Button("Submit")
         #             nps_close = gr.Button("X", elem_id="nps-close")
-        nps_html = """
-        <div id="nps-container" style="text-align:center;">
-            <style>
-                .nps-btn {
-                    display: inline-block;
-                    width: 40px;
-                    height: 40px;
-                    line-height: 40px;
-                    margin: 4px;
-                    border-radius: 6px;
-                    color: white;
-                    font-weight: bold;
-                    cursor: pointer;
-                    user-select: none;
-                }
-                .nps-red { background-color: #d9534f; }
-                .nps-yellow { background-color: #f0ad4e; }
-                .nps-green { background-color: #5cb85c; }
-                .nps-btn:hover { opacity: 0.8; }
-                #nps-labels { margin-top: 8px; font-size: 14px; color: #555; }
-            </style>
-            <div>
-                <span class="nps-btn nps-red" data-score="0">0</span>
-                <span class="nps-btn nps-red" data-score="1">1</span>
-                <span class="nps-btn nps-red" data-score="2">2</span>
-                <span class="nps-btn nps-red" data-score="3">3</span>
-                <span class="nps-btn nps-red" data-score="4">4</span>
-                <span class="nps-btn nps-red" data-score="5">5</span>
-                <span class="nps-btn nps-red" data-score="6">6</span>
-                <span class="nps-btn nps-yellow" data-score="7">7</span>
-                <span class="nps-btn nps-yellow" data-score="8">8</span>
-                <span class="nps-btn nps-green" data-score="9">9</span>
-                <span class="nps-btn nps-green" data-score="10">10</span>
-            </div>
-            <div id="nps-labels">
-                <span style="float:left;">Not at all likely</span>
-                <span>Neutral</span>
-                <span style="float:right;">Extremely likely</span>
-            </div>
-        </div>
-        """
-
         with gr.Group(visible=False, elem_id="nps-overlay") as nps_modal:
             with gr.Column(elem_id="nps-box", interactive=True):
                 gr.HTML('<span id="nps-close">✕</span>')
                 gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
-                nps_html_component = gr.HTML(nps_html)
-                selected_score = gr.Textbox(label="Selected NPS Score", visible=False)
+                
+                gr.HTML("""
+                <div id="nps-numbers" style="display:flex; gap:8px; flex-wrap:wrap; justify-content:center;">
+                    <button class="nps-btn" data-score="0">0</button>
+                    <button class="nps-btn" data-score="1">1</button>
+                    <button class="nps-btn" data-score="2">2</button>
+                    <button class="nps-btn" data-score="3">3</button>
+                    <button class="nps-btn" data-score="4">4</button>
+                    <button class="nps-btn" data-score="5">5</button>
+                    <button class="nps-btn" data-score="6">6</button>
+                    <button class="nps-btn" data-score="7">7</button>
+                    <button class="nps-btn" data-score="8">8</button>
+                    <button class="nps-btn" data-score="9">9</button>
+                    <button class="nps-btn" data-score="10">10</button>
+                </div>
+                """)
+                
+                selected_score = gr.Textbox(label="selected_score", visible=False)
                 nps_submit = gr.Button("Submit")
 
                 
@@ -467,7 +446,13 @@ with gr.Blocks() as interface:
                         worksheet.update_cell(i, recent_time_col + 1, new_timestamp)
                         if nps_score is not None:
                             print("this is nps score:", nps_score)
-                            worksheet.update_cell(i, nps_col + 1, str(nps_score))
+                            old_nps = row[nps_col].strip() if len(row) > nps_col else ""
+                            if old_nps:
+                                new_nps = f"{old_nps}, {nps_score}"
+                            else:
+                                new_nps = str(nps_score)
+                            worksheet.update_cell(i, nps_col + 1, new_nps)
+
                         print(f"✅ Updated existing user row for: {email}")
                         return
         
@@ -1293,21 +1278,26 @@ with gr.Blocks() as interface:
     
     with gr.Tab("PRICING"):
         gr.HTML(value=pricing_html)
+
 interface.load(js="""
 () => {
-    // Close modal
-    document.getElementById('nps-close').onclick = function() {
-        document.getElementById('nps-overlay').style.display = 'none';
-    };
+    // Close button functionality
+    const closeBtn = document.getElementById('nps-close');
+    if (closeBtn) {
+        closeBtn.addEventListener('click', () => {
+            const overlay = document.getElementById('nps-overlay');
+            if (overlay) overlay.style.display = 'none';
+        });
+    }
 
-    // NPS number clicks
-    document.querySelectorAll('#nps-container .nps-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
-            const score = this.getAttribute('data-score');
-            const input = document.querySelector('textarea[aria-label="Selected NPS Score"]');
-            if (input) {
-                input.value = score;
-                input.dispatchEvent(new Event('input', { bubbles: true }));
+    // Handle score button clicks
+    document.querySelectorAll('.nps-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const score = btn.getAttribute('data-score');
+            const hiddenInput = document.querySelector('textarea[aria-label="selected_score"]');
+            if (hiddenInput) {
+                hiddenInput.value = score;
+                hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
             }
         });
     });