Update app.py

app.py

@@ -1,38 +1,41 @@
 import gradio as gr
 from gradio_htmlinjector import HTMLInjector
 
-# ---------- logique serveur ----------
-def on_submit(user_msg: str, conv: list[tuple[str, str]]):
-    # 1) ajoute (user_msg, question) et indique qu'il faut ouvrir la popup
-    if conv is None:
-        conv = []
-    user_msg = (user_msg or "").strip()
-    if not user_msg:
-        return conv, False, ""  # pas de popup
-
-    bot_question = "Ceci est une réponse de démo.\n\n**Confirmez-vous l’action ?**"
-    new_conv = conv + [(user_msg, bot_question)]
-    confirm_needed = True
-    return new_conv, confirm_needed, ""   # (maj chatbot via state_conv, flag popup, clear textbox)
-
-def handle_choice(choice: str, conv: list[tuple[str, str]]):
-    # 3) ajoute (Oui/Non, confirmation) ; ignore les resets vides
-    if conv is None:
-        conv = []
+# 1) Choix dans la popup -> ajoute (Oui/Non, confirmation)
+def handle_choice(choice: str, chat_history: list[tuple[str, str]]):
     c = (choice or "").strip().lower()
-    if not c:
-        return conv, ""  # ignore le "change" déclenché par le reset
-
     if c in {"oui", "o", "yes", "y"}:
-        user_choice, bot_reply = "Oui", "✅ Vous avez choisi **OUI**. Action validée."
+        user_choice = "Oui"
+        reply = "✅ Vous avez choisi **OUI**. Action validée."
     elif c in {"non", "n", "no"}:
-        user_choice, bot_reply = "Non", "❌ Vous avez choisi **NON**. Action annulée."
+        user_choice = "Non"
+        reply = "❌ Vous avez choisi **NON**. Action annulée."
     else:
-        return conv, ""
+        # ignore les valeurs inattendues (évite les "choix non reconnu" parasites)
+        return chat_history, ""
+    return chat_history + [(user_choice, reply)], ""  # reset du pont
 
-    return conv + [(user_choice, bot_reply)], ""  # reset du pont via ""
+# 2) Soumission utilisateur : réponse fixe + ouverture popup
+def on_submit(user_msg: str, chat_history: list[tuple[str, str]]):
+    if not user_msg:
+        return chat_history, "", {}
 
-# ---------- assets popup ----------
+    assistant_reply = "Ceci est une réponse de démonstration.\n\nConfirmez-vous l’action ?"
+    chat_history = chat_history + [(user_msg, assistant_reply)]
+
+    # IIFE + retry: ouvre la popup quand showModal est prêt
+    open_popup_js = """
+    (function openWhenReady(){
+      var start = Date.now();
+      (function tick(){
+        if (typeof showModal === 'function') { showModal(); return; }
+        if (Date.now() - start < 3000) { setTimeout(tick, 60); }
+      })();
+    })();
+    """
+    return chat_history, "", {"js": open_popup_js}  # clear textbox
+
+# 3) Injection: définit showModal/hideModal + HTML/CSS de la popup
 def inject_assets():
     js = r"""
     function setGradioValue(elemId, value){
@@ -45,90 +48,71 @@ def inject_assets():
       input.dispatchEvent(new Event('input',  {bubbles:true}));
       input.dispatchEvent(new Event('change', {bubbles:true}));
     }
-    """
-    css = r"""
-    #confirm-modal{
-      display:none; position:fixed; inset:0; z-index:9999;
-      background: rgba(0,0,0,.45);
-      align-items:center; justify-content:center;
+    let _modalKeyHandler = null, _lastFocused = null;
+    function getFocusable(el){
+      return Array.from(el.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'))
+             .filter(e => !e.hasAttribute('disabled') && e.offsetParent !== null);
+    }
+    function showModal(){
+      const modal = document.getElementById('confirm-modal'); if(!modal) return;
+      modal.style.display = 'flex'; document.body.style.overflow = 'hidden';
+      modal.setAttribute('aria-hidden','false'); _lastFocused = document.activeElement;
+      const foc = getFocusable(modal); const first=foc[0], last=foc[foc.length-1]; if(first) first.focus();
+      _modalKeyHandler = function(e){
+        if (e.key==='Escape'){ e.preventDefault(); e.stopPropagation(); return false; }
+        if (e.key==='Tab'){
+          if (foc.length===0){ e.preventDefault(); return; }
+          if (e.shiftKey){ if (document.activeElement===first){ e.preventDefault(); last.focus(); } }
+          else { if (document.activeElement===last){ e.preventDefault(); first.focus(); } }
+        }
+      };
+      document.addEventListener('keydown', _modalKeyHandler, true);
     }
-    #confirm-card{
-      background:#fff; border:1px solid #ccc; border-radius:10px;
-      padding:20px; min-width:320px; max-width:90vw; box-shadow:0 10px 30px rgba(0,0,0,.2);
+    function hideModal(){
+      const modal = document.getElementById('confirm-modal'); if(!modal) return;
+      modal.style.display = 'none'; modal.setAttribute('aria-hidden','true'); document.body.style.overflow = '';
+      if (_modalKeyHandler){ document.removeEventListener('keydown', _modalKeyHandler, true); _modalKeyHandler=null; }
+      if (_lastFocused && typeof _lastFocused.focus==='function'){ try{ _lastFocused.focus(); } catch{} }
     }
+    """
+    css = r"""
+    #confirm-modal{ display:none; position:fixed; inset:0; z-index:9999;
+      background: rgba(0,0,0,.45); align-items:center; justify-content:center; }
+    #confirm-card{ background:#fff; color:#111; border:1px solid #ccc; border-radius:10px;
+      padding:20px; min-width:320px; max-width:90vw; box-shadow:0 10px 30px rgba(0,0,0,.2); }
     #confirm-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
+    #confirm-actions button{ cursor:pointer; padding:8px 14px; border-radius:8px; border:1px solid #bbb; background:#f4f4f5; }
+    #confirm-actions button.primary{ background:#2563eb; color:#fff; border-color:transparent; }
     #bridge-choice{ display:none; } /* pont caché mais monté */
     """
     html = r"""
     <div id="confirm-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
       <div id="confirm-card">
         <h3 id="confirm-title">Confirmer ?</h3>
-        <p>Souhaitez-vous poursuivre ?</p>
+        <p>Souhaitez-vous continuer ?</p>
         <div id="confirm-actions">
-          <button type="button"
-            onclick="setGradioValue('bridge-choice','non'); document.getElementById('confirm-modal').style.display='none'; document.body.style.overflow=''">
-            Non
-          </button>
-          <button type="button" class="primary"
-            onclick="setGradioValue('bridge-choice','oui'); document.getElementById('confirm-modal').style.display='none'; document.body.style.overflow=''">
-            Oui
-          </button>
+          <button type="button" onclick="setGradioValue('bridge-choice','non'); hideModal()">Non</button>
+          <button type="button" class="primary" onclick="setGradioValue('bridge-choice','oui'); hideModal()">Oui</button>
         </div>
       </div>
     </div>
     """
     return {"css": css, "js": js, "body_html": html}
 
-# ---------- UI ----------
-with gr.Blocks(title="Chat + Popup (avec .then)") as demo:
+# 4) UI
+with gr.Blocks(title="Démo Chat + Popup", fill_height=True) as demo:
     html_injector = HTMLInjector()
-
-    chat = gr.Chatbot(height=420)
+    chat = gr.Chatbot(label="Chatbot", height=420)
     user_in = gr.Textbox(placeholder="Tapez un message…", lines=2)
-    state_conv = gr.State([])            # vérité de la conversation
-    confirm_flag = gr.State(False)       # flag “ouvrir popup ?”
     bridge_choice = gr.Textbox(visible=True, elem_id="bridge-choice")  # pont oui/non
 
-    # (A) submit -> met à jour état & textbox
-    evt = user_in.submit(
-        fn=on_submit,
-        inputs=[user_in, state_conv],
-        outputs=[state_conv, confirm_flag, user_in],  # maj state_conv, flag, clear input
-    )
-
-    # (B) refléter l'état dans le Chatbot (immédiatement après)
-    evt = evt.then(
-        fn=lambda s: s, inputs=state_conv, outputs=chat
-    )
-
-    # (C) puis ouvrir la popup côté client *si* confirm_flag = True
-    evt.then(
-        fn=None, inputs=[confirm_flag], outputs=None,
-        js="""
-(flag) => {
-  if(!flag) return;
-  const start = Date.now();
-  (function tick(){
-    const modal = document.getElementById('confirm-modal');
-    if (modal) {
-      modal.style.display = 'flex';
-      document.body.style.overflow = 'hidden';
-      return;
-    }
-    if (Date.now() - start < 3000) setTimeout(tick, 60);
-  })();
-}
-        """,
-    )
+    # A) soumission -> affiche (user, question) + ouvre popup (IIFE via HTMLInjector)
+    user_in.submit(fn=on_submit, inputs=[user_in, chat],
+                   outputs=[chat, user_in, html_injector])
 
-    # (D) choix utilisateur -> ajoute (Oui/Non, confirmation) à la conversation + reflète dans Chatbot
-    bridge_choice.change(
-        fn=handle_choice,
-        inputs=[bridge_choice, state_conv],
-        outputs=[state_conv, bridge_choice],
-    ).then(
-        fn=lambda s: s, inputs=state_conv, outputs=chat
-    )
+    # B) clic Oui/Non -> ajoute (Oui/Non, confirmation)
+    bridge_choice.change(fn=handle_choice, inputs=[bridge_choice, chat],
+                         outputs=[chat, bridge_choice])
 
     demo.load(fn=inject_assets, inputs=None, outputs=[html_injector])