Update app.py

app.py

@@ -508,13 +508,14 @@ def load_session_history(selected_session=None):
         """
 
         for item in json_data:
-            prompt_text = html.escape(item.get('prompt', '')).replace('"', '"')
+            # JSON으로 직렬화하여 JavaScript 문자열로 안전하게 변환
+            prompt_json = json.dumps(item.get('prompt', ''))
             html_content += f"""
             <div class="prompt-card">
                 <img src="{item.get('image_url', '')}" class="card-image" alt="{html.escape(item.get('name', ''))}">
                 <div class="card-name">{html.escape(item.get('name', ''))}</div>
-                <div class="card-prompt">{prompt_text}</div>
-                <button class="copy-button" onclick="copyToClipboard(this, '{prompt_text}')">
+                <div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
+                <button class="copy-button" data-prompt={prompt_json}>
                     📋 복사
                 </button>
             </div>
@@ -523,46 +524,47 @@ def load_session_history(selected_session=None):
         html_content += """
         </div>
         <script>
-        function copyToClipboard(button, text) {
-            // 클립보드에 복사하는 함수
-            const copyText = async () => {
-                try {
-                    await navigator.clipboard.writeText(text);
-                    button.textContent = '✓ 복사됨';
-                    button.style.backgroundColor = '#52c41a';
-                    button.style.color = 'white';
+        // 모든 복사 버튼에 이벤트 리스너 추가
+        document.addEventListener('DOMContentLoaded', function() {
+            document.querySelectorAll('.copy-button').forEach(button => {
+                button.addEventListener('click', async function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    
+                    const promptText = this.dataset.prompt;
                     
-                    setTimeout(() => {
-                        button.textContent = '📋 복사';
-                        button.style.backgroundColor = '#f0f0f0';
-                        button.style.color = 'inherit';
-                    }, 2000);
-                } catch (err) {
-                    // fallback
-                    const textarea = document.createElement('textarea');
-                    textarea.value = text;
-                    document.body.appendChild(textarea);
-                    textarea.select();
                     try {
+                        // 텍스트 영역 생성 및 설정
+                        const textarea = document.createElement('textarea');
+                        textarea.value = promptText;
+                        textarea.style.position = 'fixed';
+                        textarea.style.left = '-9999px';
+                        document.body.appendChild(textarea);
+                        textarea.select();
+                        
+                        // 복사 시도
                         document.execCommand('copy');
-                        button.textContent = '✓ 복사됨';
-                        button.style.backgroundColor = '#52c41a';
-                        button.style.color = 'white';
+                        document.body.removeChild(textarea);
                         
+                        // 버튼 상태 업데이트
+                        this.textContent = '✓ 복사됨';
+                        this.style.backgroundColor = '#52c41a';
+                        this.style.color = 'white';
+                        
+                        // 2초 후 원래 상태로 복구
                         setTimeout(() => {
-                            button.textContent = '📋 복사';
-                            button.style.backgroundColor = '#f0f0f0';
-                            button.style.color = 'inherit';
+                            this.textContent = '📋 복사';
+                            this.style.backgroundColor = '#f0f0f0';
+                            this.style.color = 'inherit';
                         }, 2000);
+                        
                     } catch (err) {
                         console.error('복사 실패:', err);
                         alert('복사에 실패했습니다. 직접 텍스트를 선택하여 복사해주세요.');
                     }
-                    document.body.removeChild(textarea);
-                }
-            };
-            copyText();
-        }
+                });
+            });
+        });
         </script>
         """
         
@@ -570,7 +572,7 @@ def load_session_history(selected_session=None):
         
     except Exception as e:
         print(f"Error in load_session_history: {str(e)}")
-        return gr.HTML("Error loading templates")    
+        return gr.HTML("Error loading templates")