Fix: Prevent stop button from appearing during chat processing - Enhance CSS selectors with more specific targeting - Add JavaScript to dynamically hide stop buttons - Use MutationObserver to detect DOM changes - Follow Gradio ChatInterface documentation pattern

CodeWeaver/ui/app.py

@@ -74,26 +74,88 @@ textarea[data-testid="textbox"][placeholder*="세션 ID"] {
     width: 100% !important;
     max-width: 100% !important;
 }
-/* 멈춤 버튼 숨기기 및 클릭 비활성화 */
+/* 멈춤 버튼 숨기기 및 클릭 비활성화 - 모든 가능한 선택자 포함 */
 button[aria-label*="Stop"],
 button[aria-label*="stop"],
 button[data-testid*="stop"],
 button[title*="Stop"],
 button[title*="멈춤"],
 button[aria-label="Stop"],
-button[aria-label="Stop generation"] {
+button[aria-label="Stop generation"],
+button[aria-label="Stop Generation"],
+button:has-text("Stop"),
+button:has-text("멈춤") {
     display: none !important;
     pointer-events: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
 }
 /* ChatInterface의 멈춤 버튼 숨기기 (더 일반적인 선택자) */
 .gradio-chatinterface button[aria-label*="Stop"],
-.gradio-chatinterface button[data-testid*="stop"] {
+.gradio-chatinterface button[data-testid*="stop"],
+.gradio-chatinterface button[aria-label*="stop"],
+.gradio-chatinterface button[title*="Stop"],
+.gradio-chatinterface button[title*="멈춤"] {
     display: none !important;
     pointer-events: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+}
+/* 전송 버튼이 멈춤 버튼으로 변경되는 것을 방지 */
+button[data-testid="submit-button"]:has-text("Stop"),
+button[data-testid="submit-button"]:has-text("멈춤"),
+button[data-testid="submit-button"][aria-label*="Stop"] {
+    display: none !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+}
+"""
+
+# JavaScript: 멈춤 버튼을 동적으로 숨기기
+JS = """
+() => {
+    const hideStopButtons = () => {
+        // 모든 멈춤 버튼 찾기
+        const stopButtons = document.querySelectorAll(
+            'button[aria-label*="Stop"], ' +
+            'button[aria-label*="stop"], ' +
+            'button[data-testid*="stop"], ' +
+            'button[title*="Stop"], ' +
+            'button[title*="멈춤"]'
+        );
+        stopButtons.forEach(btn => {
+            btn.style.display = 'none';
+            btn.style.visibility = 'hidden';
+            btn.style.opacity = '0';
+            btn.style.pointerEvents = 'none';
+        });
+    };
+    
+    // 초기 실행
+    hideStopButtons();
+    
+    // MutationObserver로 DOM 변경 감지
+    const observer = new MutationObserver(hideStopButtons);
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['aria-label', 'data-testid', 'title']
+    });
+    
+    // 주기적으로 확인 (추가 안전장치)
+    setInterval(hideStopButtons, 100);
 }
 """
 
@@ -146,7 +208,8 @@ def create_demo() -> gr.Blocks:
     
     with gr.Blocks(
         title="CodeWeaver - AI 개발 도우미",
-        css=CSS  # Gradio Blocks 문서: CSS를 Blocks 생성자에 전달
+        css=CSS,  # Gradio Blocks 문서: CSS를 Blocks 생성자에 전달
+        js=JS  # JavaScript로 멈춤 버튼 동적 숨기기
     ) as demo:
         
         gr.Markdown("""