Update app.py

app.py

@@ -402,9 +402,8 @@ def update_session_list():
 def load_session_history(selected_session):
     try:
         if not selected_session:
-            return gr.update(), gr.update()
+            return gr.HTML("")
             
-        # 세션 ID 추출
         session_id = selected_session.split(" (")[0] if " (" in selected_session else selected_session
         
         conn = sqlite3.connect('chat_history.db')
@@ -418,7 +417,6 @@ def load_session_history(selected_session):
         history = c.fetchall()
         conn.close()
         
-        # 프롬프트 카드용 HTML 생성
         cards_html = """
         <style>
         .prompt-grid {
@@ -445,43 +443,55 @@ def load_session_history(selected_session):
             color: #666;
             margin-top: 10px;
         }
+        #code-display {
+            display: none;
+        }
         </style>
         <div class="prompt-grid">
         """
         
+        # 응답 데이터를 JavaScript 배열로 준비
+        responses_data = []
+        prompts_data = []
+        
         for i, (prompt, response, timestamp) in enumerate(history):
-            # 프롬프트 텍스트를 적절한 길이로 자르기
             short_prompt = prompt[:100] + "..." if len(prompt) > 100 else prompt
             formatted_time = datetime.strptime(timestamp, '%Y-%m-%d %H:%M:%S.%f').strftime('%Y-%m-%d %H:%M')
             
+            responses_data.append(response)
+            prompts_data.append(prompt)
+            
             cards_html += f"""
-            <div class="prompt-card" onclick="showResponse({i})">
+            <div class="prompt-card" onclick="executeHistoryItem({i})">
                 <div>{short_prompt}</div>
                 <div class="timestamp">{formatted_time}</div>
             </div>
             """
-            
+        
         cards_html += "</div>"
         
-        # JavaScript 함수 추가
-        cards_html += """
+        # JavaScript 함수 수정
+        cards_html += f"""
         <script>
-        function showResponse(index) {
-            const responses = %s;
-            document.getElementById('code-display').innerHTML = `<pre><code>${responses[index]}</code></pre>`;
-        }
-        </script>
-        """ % json.dumps([response for _, response, _ in history])
+        const responses = {json.dumps(responses_data)};
+        const prompts = {json.dumps(prompts_data)};
         
-        # 코드 표시 영역 추가
-        cards_html += """
-        <div id="code-display" style="
-            margin-top: 20px;
-            padding: 20px;
-            background: #f5f5f5;
-            border-radius: 8px;
-            display: none;
-        "></div>
+        function executeHistoryItem(index) {{
+            // 입력 필드에 프롬프트 설정
+            document.querySelector('textarea').value = prompts[index];
+            
+            // 코드 실행
+            const code = responses[index];
+            const encodedHtml = btoa(code);
+            const dataUri = `data:text/html;charset=utf-8;base64,${{encodedHtml}}`;
+            
+            // iframe 업데이트
+            document.querySelector('.html_content iframe').src = dataUri;
+            
+            // 세션 드로어 닫기
+            document.querySelector('.session-drawer').style.display = 'none';
+        }}
+        </script>
         """
         
         return gr.HTML(value=cards_html)