Update app.py

app.py

@@ -442,58 +442,100 @@ def load_session_history(selected_session):
                 margin-top: 10px;
             }
         </style>
-        <div class="prompt-grid">
         """
 
-        # 히스토리 데이터를 JavaScript 객체로 변환
-        js_data = []
+        # jQuery 추가
+        html_content += """
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        """
+
+        html_content += """<div class="prompt-grid">"""
+
         for i, (prompt, response, timestamp) in enumerate(history):
-            short_prompt = prompt[:100] + "..." if len(prompt) > 100 else prompt
+            short_prompt = prompt[:100] + "..." if len(prompt) > 100 else short_prompt
             formatted_time = datetime.strptime(timestamp, '%Y-%m-%d %H:%M:%S.%f').strftime('%Y-%m-%d %H:%M')
             
-            js_data.append({
-                'prompt': html.escape(prompt),
-                'response': html.escape(response),
-                'short_prompt': html.escape(short_prompt),
-                'timestamp': formatted_time
-            })
+            # HTML 이스케이프 처리
+            escaped_prompt = html.escape(prompt).replace('"', '&quot;')
+            escaped_response = html.escape(response).replace('"', '&quot;')
             
             html_content += f"""
-            <div class="prompt-card" onclick="cardClicked({i})">
+            <div class="prompt-card" 
+                 data-prompt="{escaped_prompt}"
+                 data-response="{escaped_response}"
+                 onclick="handleCardClick(this)">
                 <div>{html.escape(short_prompt)}</div>
                 <div class="timestamp">{formatted_time}</div>
             </div>
             """
 
-        html_content += f"""
+        html_content += """
         </div>
         <script>
-        const historyData = {json.dumps(js_data)};
-        
-        function cardClicked(index) {{
-            const item = historyData[index];
+        function handleCardClick(card) {
+            console.log('Card clicked');
+            
+            // 프롬프트와 응답 데이터 가져오기
+            const prompt = card.getAttribute('data-prompt');
+            const response = card.getAttribute('data-response');
+            
+            console.log('Prompt:', prompt);
+            console.log('Response:', response);
             
-            // 텍스트 영역 업데이트
+            // 텍스트 영역 찾기 및 업데이트
             const textarea = document.querySelector('textarea');
-            if (textarea) {{
-                textarea.value = item.prompt;
+            if (textarea) {
+                console.log('Found textarea');
+                textarea.value = prompt;
+                
+                // 코드 추출
+                let code = response;
+                if (response.includes('```html')) {
+                    const match = response.match(/```html\\n([\\s\\S]*?)\\n```/);
+                    if (match) {
+                        code = match[1];
+                    }
+                }
+                
+                console.log('Extracted code:', code);
+                
+                // Base64 인코딩
+                const encodedHtml = btoa(unescape(encodeURIComponent(code.trim())));
+                const dataUri = `data:text/html;charset=utf-8;base64,${encodedHtml}`;
+                
+                // iframe 업데이트
+                const iframe = document.querySelector('.html_content iframe');
+                if (iframe) {
+                    console.log('Found iframe');
+                    iframe.src = dataUri;
+                }
                 
                 // Code 실행 버튼 찾기 및 클릭
-                const buttons = document.querySelectorAll('button');
-                for (const button of buttons) {{
-                    if (button.textContent.includes('Code 실행')) {{
-                        setTimeout(() => button.click(), 100);
-                        break;
-                    }}
-                }}
+                setTimeout(() => {
+                    const executeButton = $('button:contains("Code 실행")');
+                    if (executeButton.length) {
+                        console.log('Found execute button');
+                        executeButton[0].click();
+                    } else {
+                        console.log('Execute button not found');
+                    }
+                }, 100);
                 
                 // 드로어 닫기
                 const drawer = document.querySelector('.session-drawer');
-                if (drawer) {{
+                if (drawer) {
+                    console.log('Closing drawer');
                     drawer.style.display = 'none';
-                }}
-            }}
-        }}
+                }
+            } else {
+                console.log('Textarea not found');
+            }
+        }
+        
+        // 페이지 로드 완료 후 실행
+        $(document).ready(function() {
+            console.log('Session history loaded');
+        });
         </script>
         """