Update app.py

app.py

@@ -449,12 +449,9 @@ def load_json_data():
         }        
     ]
 
-    
 def load_session_history(selected_session=None):
     try:
-        print("Loading session history...")
         json_data = load_json_data()
-        print(f"Loaded {len(json_data)} items")
         
         html_content = """
         <style>
@@ -469,7 +466,6 @@ def load_session_history(selected_session=None):
                 border: 1px solid #eee;
                 border-radius: 8px;
                 padding: 15px;
-                cursor: pointer;
                 transition: all 0.3s ease;
                 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                 min-height: 300px;
@@ -490,23 +486,13 @@ def load_session_history(selected_session=None):
                 margin-bottom: 8px;
                 font-size: 16px;
             }
-            .card-prompt-container {
-                position: relative;
-                padding-right: 60px;
-            }
             .card-prompt {
                 font-size: 0.9em;
                 color: #666;
-                display: -webkit-box;
-                -webkit-line-clamp: 3;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
+                margin-bottom: 10px;
             }
-            .copy-btn {
-                position: absolute;
-                right: 0;
-                top: 0;
-                padding: 4px 8px;
+            .copy-button {
+                padding: 5px 10px;
                 background: #f0f0f0;
                 border: 1px solid #ddd;
                 border-radius: 4px;
@@ -514,98 +500,68 @@ def load_session_history(selected_session=None):
                 font-size: 0.9em;
                 transition: all 0.2s ease;
             }
-            .copy-btn:hover {
+            .copy-button:hover {
                 background: #e0e0e0;
             }
-            .copy-btn:active {
-                background: #d0d0d0;
-            }
         </style>
         <div class="prompt-grid">
         """
 
         for item in json_data:
-            name = html.escape(item.get('name', ''))
-            image_url = item.get('image_url', '')
-            # 프롬프트에서 특수 문자 처리를 위해 JSON.stringify 사용
-            prompt = json.dumps(item.get('prompt', ''))
-            
+            prompt_text = html.escape(item.get('prompt', '')).replace('"', '&quot;')
             html_content += f"""
             <div class="prompt-card">
-                <img src="{image_url}" class="card-image" alt="{name}">
-                <div class="card-name">{name}</div>
-                <div class="card-prompt-container">
-                    <div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
-                    <button class="copy-btn" onclick="copyPrompt(event, {prompt})" title="프롬프트 복사">
-                        📋 복사
-                    </button>
-                </div>
+                <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}')">
+                    📋 복사
+                </button>
             </div>
             """
 
         html_content += """
         </div>
         <script>
-        async function copyPrompt(event, prompt) {
-            event.preventDefault();
-            event.stopPropagation();
-            
-            try {
-                await navigator.clipboard.writeText(prompt);
-                const btn = event.target;
-                btn.textContent = '✓ 복사됨';
-                btn.style.backgroundColor = '#52c41a';
-                btn.style.color = 'white';
-                
-                setTimeout(() => {
-                    btn.textContent = '📋 복사';
-                    btn.style.backgroundColor = '#f0f0f0';
-                    btn.style.color = 'inherit';
-                }, 2000);
-            } catch (err) {
-                // 클립보드 API가 실패할 경우 대체 방법 사용
-                const textarea = document.createElement('textarea');
-                textarea.value = prompt;
-                textarea.style.position = 'fixed';
-                textarea.style.opacity = '0';
-                document.body.appendChild(textarea);
-                textarea.select();
+        function copyToClipboard(button, text) {
+            // 클립보드에 복사하는 함수
+            const copyText = async () => {
                 try {
-                    document.execCommand('copy');
-                    const btn = event.target;
-                    btn.textContent = '✓ 복사됨';
-                    btn.style.backgroundColor = '#52c41a';
-                    btn.style.color = 'white';
+                    await navigator.clipboard.writeText(text);
+                    button.textContent = '✓ 복사됨';
+                    button.style.backgroundColor = '#52c41a';
+                    button.style.color = 'white';
                     
                     setTimeout(() => {
-                        btn.textContent = '📋 복사';
-                        btn.style.backgroundColor = '#f0f0f0';
-                        btn.style.color = 'inherit';
+                        button.textContent = '📋 복사';
+                        button.style.backgroundColor = '#f0f0f0';
+                        button.style.color = 'inherit';
                     }, 2000);
                 } catch (err) {
-                    console.error('복사 실패:', err);
-                    alert('복사에 실패했습니다. 직접 텍스트를 선택하여 복사해주세요.');
+                    // fallback
+                    const textarea = document.createElement('textarea');
+                    textarea.value = text;
+                    document.body.appendChild(textarea);
+                    textarea.select();
+                    try {
+                        document.execCommand('copy');
+                        button.textContent = '✓ 복사됨';
+                        button.style.backgroundColor = '#52c41a';
+                        button.style.color = 'white';
+                        
+                        setTimeout(() => {
+                            button.textContent = '📋 복사';
+                            button.style.backgroundColor = '#f0f0f0';
+                            button.style.color = 'inherit';
+                        }, 2000);
+                    } catch (err) {
+                        console.error('복사 실패:', err);
+                        alert('복사에 실패했습니다. 직접 텍스트를 선택하여 복사해주세요.');
+                    }
+                    document.body.removeChild(textarea);
                 }
-                document.body.removeChild(textarea);
-            }
-        }
-
-        function handleCardClick(card) {
-            const prompt = card.getAttribute('data-prompt');
-            const textarea = document.querySelector('textarea');
-            if (textarea) {
-                textarea.value = prompt;
-                
-                const sendButton = document.querySelector('button:contains("Send")');
-                if (sendButton) {
-                    sendButton.click();
-                }
-                
-                const drawer = document.querySelector('.session-drawer');
-                if (drawer) {
-                    drawer.style.display = 'none';
-                }
-            }
+            };
+            copyText();
         }
         </script>
         """
@@ -614,7 +570,8 @@ 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")    
+
 
         
 # 히스토리 아이템 선택 처리 함수