Update app.py

app.py

@@ -118,12 +118,56 @@ 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"):
-                gr.HTML('<span id="nps-close">✕</span>')  # Close button
+            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_slider = gr.Slider(minimum=0, maximum=10, step=1, label="Your NPS Score (0-10)")
+                nps_html_component = gr.HTML(nps_html)
+                selected_score = gr.Textbox(label="Selected NPS Score", visible=False)
                 nps_submit = gr.Button("Submit")
+
                 
         with gr.Group(visible=False) as results_group:
           # with gr.Accordion("Open to See the Result", open=False) as results:  
@@ -1160,9 +1204,9 @@ with gr.Blocks() as interface:
             inputs=[raw_text, q1, q2, contact],
             outputs=[feedback_status]
         )
-        
+        nps_message = gr.Markdown(visible=True)
         #nps_button.click(fn=submit_nps, inputs=[user_email, nps_slider], outputs=nps_output)
-        nps_submit.click(fn=submit_nps, inputs=[user_email, nps_slider], outputs=[])
+        nps_submit.click(fn=submit_nps, inputs=[user_email, selected_score], outputs=[nps_message])
         #nps_close.click(fn=lambda: gr.update(visible=False), outputs=[nps_modal])
     
         
@@ -1250,13 +1294,39 @@ with gr.Blocks() as interface:
     with gr.Tab("PRICING"):
         gr.HTML(value=pricing_html)
 interface.load(js="""
-    () => {
-        // Close button
-        document.getElementById('nps-close').onclick = function() {
-            document.getElementById('nps-overlay').style.display = 'none';
-        };
+() => {
+    // Close modal
+    document.getElementById('nps-close').onclick = function() {
+        document.getElementById('nps-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 }));
+            }
+        });
+    });
+
+    const submitBtn = document.querySelector('button:has-text("Submit")');
+    if (submitBtn) {
+        submitBtn.addEventListener('click', () => {
+            submitBtn.style.border = '2px solid green';
+            submitBtn.style.backgroundColor = '#e6ffe6';
+            setTimeout(() => {
+                submitBtn.style.border = '';
+                submitBtn.style.backgroundColor = '';
+            }, 300); // reset after 0.3s
+        });
     }
+}
 """)
 
 
+
+
 interface.launch(share=True,debug=True)