Update app.py

app.py

@@ -402,7 +402,8 @@ def update_session_list():
 def load_session_history(selected_session):
     try:
         if not selected_session:
-            return []
+            return gr.update(), gr.update()
+            
         # 세션 ID 추출
         session_id = selected_session.split(" (")[0] if " (" in selected_session else selected_session
         
@@ -412,16 +413,82 @@ def load_session_history(selected_session):
             SELECT prompt, response, timestamp 
             FROM chat_history 
             WHERE session_id = ? 
-            ORDER BY timestamp
+            ORDER BY timestamp DESC
         """, (session_id,))
         history = c.fetchall()
         conn.close()
         
-        # 채팅 형식으로 변환
-        return [[prompt, response] for prompt, response, _ in history]
+        # 프롬프트 카드용 HTML 생성
+        cards_html = """
+        <style>
+        .prompt-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 20px;
+            padding: 20px;
+        }
+        .prompt-card {
+            background: white;
+            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);
+        }
+        .prompt-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+        }
+        .timestamp {
+            font-size: 0.8em;
+            color: #666;
+            margin-top: 10px;
+        }
+        </style>
+        <div class="prompt-grid">
+        """
+        
+        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')
+            
+            cards_html += f"""
+            <div class="prompt-card" onclick="showResponse({i})">
+                <div>{short_prompt}</div>
+                <div class="timestamp">{formatted_time}</div>
+            </div>
+            """
+            
+        cards_html += "</div>"
+        
+        # JavaScript 함수 추가
+        cards_html += """
+        <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])
+        
+        # 코드 표시 영역 추가
+        cards_html += """
+        <div id="code-display" style="
+            margin-top: 20px;
+            padding: 20px;
+            background: #f5f5f5;
+            border-radius: 8px;
+            display: none;
+        "></div>
+        """
+        
+        return gr.HTML(value=cards_html)
+        
     except Exception as e:
         print(f"Error loading session history: {e}")
-        return []
+        return gr.HTML("Error loading history")
 
 def save_chat(session_id, prompt, response):
     print(f"Starting save_chat with session_id: {session_id}")
@@ -477,11 +544,12 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
     
             with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
                 history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
+
     
             with antd.Drawer(
                 open=False, 
                 title="Session History", 
-                placement="right",  # 오른쪽으로 변경
+                placement="right",
                 width="900px",
                 elem_classes="session-drawer"
             ) as session_drawer:
@@ -492,10 +560,9 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                         choices=[],
                         elem_classes="session-list"
                     )
-                    session_history = legacy.Chatbot(
-                        show_label=False,
-                        height=700,
-                        elem_classes="session-chatbot"
+                    # Chatbot을 HTML로 변경
+                    session_history = gr.HTML(
+                        elem_classes="session-history"
                     )
                     close_btn = antd.Button(
                         "Close",
@@ -503,6 +570,17 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                         elem_classes="close-btn"
                     )
 
+            # 이벤트 핸들러 수정
+            session_list.change(
+                load_session_history,
+                inputs=[session_list],
+                outputs=[session_history]
+            )
+
+
+            
+ 
+
             # 메인 컨텐츠를 위한 Row
             with antd.Row(gutter=[32, 12]) as layout:    
                 # 좌측 패널