Update app.py

app.py

@@ -415,24 +415,15 @@ def load_session_history(selected_session):
         history = c.fetchall()
         conn.close()
 
-        # JavaScript 데이터 준비
-        js_data = []
-        for prompt, response, _ in history:
-            js_data.append({
-                'prompt': html.escape(prompt).replace('`', '\\`'),
-                'response': html.escape(response).replace('`', '\\`')
-            })
-
-        # HTML 템플릿 준비
-        html_content = f"""
+        html_content = """
         <style>
-            .prompt-grid {{
+            .prompt-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                 gap: 20px;
                 padding: 20px;
-            }}
-            .prompt-card {{
+            }
+            .prompt-card {
                 background: white;
                 border: 1px solid #eee;
                 border-radius: 8px;
@@ -440,90 +431,90 @@ def load_session_history(selected_session):
                 cursor: pointer;
                 transition: all 0.3s ease;
                 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-            }}
-            .prompt-card:hover {{
+            }
+            .prompt-card:hover {
                 transform: translateY(-2px);
                 box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-            }}
-            .timestamp {{
+            }
+            .timestamp {
                 font-size: 0.8em;
                 color: #666;
                 margin-top: 10px;
-            }}
+            }
         </style>
-
         <div class="prompt-grid">
         """
 
-        # 카드 생성
-        for i, (prompt, _, timestamp) in enumerate(history):
+        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')
             
+            # data 속성에 정보 저장
             html_content += f"""
-            <div class="prompt-card" onclick="executeHistoryItem({i})">
+            <div class="prompt-card" 
+                 data-prompt="{html.escape(prompt)}"
+                 data-response="{html.escape(response)}"
+                 onclick="selectHistoryItem(this)">
                 <div>{html.escape(short_prompt)}</div>
                 <div class="timestamp">{formatted_time}</div>
             </div>
             """
 
-        # JavaScript 코드 추가
-        html_content += f"""
+        html_content += """
         </div>
         <script>
-            const historyData = {json.dumps(js_data)};
-            
-            function executeHistoryItem(index) {{
-                const item = historyData[index];
-                
-                // 텍스트 영역 업데이트
-                const textarea = document.querySelector('textarea');
-                if (textarea) {{
-                    textarea.value = item.prompt;
-                }}
-                
-                // 코드 추출 및 실행
-                let code = item.response;
-                if (code.includes('```html')) {{
-                    const match = code.match(/```html\\n([\\s\\S]*?)\\n```/);
-                    if (match) {{
-                        code = match[1];
-                    }}
-                }}
-                
-                // iframe 업데이트
-                const encodedHtml = btoa(unescape(encodeURIComponent(code.trim())));
-                const dataUri = `data:text/html;charset=utf-8;base64,${{encodedHtml}}`;
-                
-                const iframe = document.querySelector('.html_content iframe');
-                if (iframe) {{
-                    iframe.src = dataUri;
-                }}
-                
-                // 실행 버튼 찾기 및 클릭
-                const buttons = document.querySelectorAll('button');
-                for (const button of buttons) {{
-                    if (button.textContent.includes('Code 실행')) {{
-                        button.click();
-                        break;
-                    }}
-                }}
-                
-                // 드로어 닫기
-                const drawer = document.querySelector('.session-drawer');
-                if (drawer) {{
-                    drawer.style.display = 'none';
-                }}
-            }}
+            function selectHistoryItem(element) {
+                const event = new CustomEvent('history-item-selected', {
+                    detail: {
+                        prompt: element.getAttribute('data-prompt'),
+                        response: element.getAttribute('data-response')
+                    }
+                });
+                document.dispatchEvent(event);
+            }
         </script>
         """
-
+        
         return gr.HTML(value=html_content)
-
+        
     except Exception as e:
         print(f"Error loading session history: {e}")
         return gr.HTML("Error loading history")
 
+# 히스��리 아이템 선택 처리 함수
+def handle_history_selection(evt: gr.SelectData):
+    try:
+        prompt = evt.value["prompt"]
+        response = evt.value["response"]
+        
+        # 코드 추출
+        code = response
+        if "```html" in response:
+            match = re.search(r'```html\n(.*?)\n```', response, re.DOTALL)
+            if match:
+                code = match.group(1)
+        
+        return (
+            prompt,  # 입력 필드에 프롬프트 설정
+            send_to_sandbox(code),  # 코드 실행
+            gr.update(active_key="render"),  # 탭 상태 업데이트
+            gr.update(open=False)  # 세션 드로어 닫기
+        )
+    except Exception as e:
+        print(f"Error handling history selection: {e}")
+        return None, None, gr.update(active_key="empty"), gr.update(open=True)
+
+# Gradio 인터페이스에서 이벤트 핸들러 연결
+with gr.Blocks(css_paths="app.css",theme=theme) as demo:
+    # ... (기존 코드) ...
+    
+    # 세션 히스토리 이벤트 핸들러
+    session_history.select(
+        fn=handle_history_selection,
+        inputs=[],
+        outputs=[input, sandbox, state_tab, session_drawer]
+    )
+
 def save_chat(session_id, prompt, response):
     print(f"Starting save_chat with session_id: {session_id}")
     conn = None