Update app.py

app.py

@@ -3,57 +3,32 @@ from huggingface_hub import InferenceClient
 import os
 import uuid
 
-# 1. Khởi tạo Client
+# 1. Cấu hình Model
 HF_TOKEN = os.getenv("HUGGINGFACE_HUB_TOKEN")
 client = InferenceClient(model="Qwen/Qwen2.5-7B-Instruct", token=HF_TOKEN)
 
-# 2. CSS Gemini Dark Mode
 custom_css = """
 body, .gradio-container { background-color: #131314 !important; color: #e3e3e3 !important; }
-.sidebar { 
-    background-color: #1e1f20 !important; 
-    border-right: 1px solid #333 !important; 
-    height: 100vh; 
-    padding: 15px !important; 
-}
+.sidebar { background-color: #1e1f20 !important; border-right: 1px solid #333 !important; height: 100vh; padding: 15px !important; }
 .gemini-title { color: #8ab4f8; font-size: 24px; font-weight: bold; margin-bottom: 20px; }
-.nav-btn { 
-    text-align: left !important; 
-    border: none !important; 
-    background: #333 !important; 
-    color: #e3e3e3 !important;
-    margin-bottom: 10px;
-    border-radius: 20px !important;
-}
-.history-item {
-    padding: 8px 12px;
-    margin: 4px 0;
-    border-radius: 8px;
-    font-size: 0.9em;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.nav-btn { text-align: left !important; background: #333 !important; color: white !important; margin-bottom: 10px; border-radius: 20px !important; }
+.history-btn { 
+    width: 100%; text-align: left !important; background: transparent !important; 
+    border: none !important; color: #ccc !important; cursor: pointer; padding: 5px 10px !important;
 }
-.history-item:hover { background: #2d2e30; }
+.history-btn:hover { background: #2d2e30 !important; color: white !important; }
 .footer-tag { font-size: 0.75rem; color: #9aa0a6; text-align: center; margin-top: 15px; }
 """
 
 def chat_fn(message, history, session_id, chat_store):
-    if not message:
-        return "", history, session_id, chat_store
-
+    if not message: return "", history, session_id, chat_store
     user_text = message if isinstance(message, str) else message.get("text", "")
-    
-    if not history:
-        chat_store[session_id] = user_text[:25] + "..."
 
-    messages = [{"role": "system", "content": "Bạn là NodeAI Pro, có giao diện phong cách Gemini."}]
+    # Gọi API
+    messages = [{"role": "system", "content": "Bạn là NodeAI Pro phong cách Gemini."}]
     for turn in history:
-        role = turn["role"]
         content = turn["content"][0]["text"] if isinstance(turn["content"], list) else turn["content"]
-        messages.append({"role": role, "content": content})
-    
+        messages.append({"role": turn["role"], "content": content})
     messages.append({"role": "user", "content": user_text})
 
     try:
@@ -62,21 +37,24 @@ def chat_fn(message, history, session_id, chat_store):
             delta = token.choices[0].delta.content
             if delta:
                 response_text += delta
-                yield "", history + [
+                current_history = history + [
                     {"role": "user", "content": [{"type": "text", "text": user_text}]},
                     {"role": "assistant", "content": [{"type": "text", "text": response_text}]}
-                ], session_id, chat_store
+                ]
+                yield "", current_history, session_id, chat_store
+        
+        # LƯU TOÀN BỘ VÀO STORE
+        chat_store[session_id] = {"title": user_text[:20] + "...", "data": current_history}
     except Exception as e:
-        yield "", history + [{"role": "assistant", "content": [{"type": "text", "text": f"❌ Lỗi: {str(e)}"}]}], session_id, chat_store
+        yield "", history + [{"role": "assistant", "content": [{"type": "text", "text": str(e)}]}], session_id, chat_store
 
-def start_new_chat():
-    return [], str(uuid.uuid4()), gr.update()
+def load_old_chat(session_id_to_load, chat_store):
+    # Lấy dữ liệu từ store dựa trên ID đã chọn
+    old_data = chat_store.get(session_id_to_load, {}).get("data", [])
+    return old_data, session_id_to_load
 
-def update_sidebar_list(store):
-    if not store:
-        return "<div style='color:#555'><i>Trống</i></div>"
-    items = [f"<div class='history-item'>🕒 {title}</div>" for title in store.values()]
-    return "".join(items)
+def start_new_chat():
+    return [], str(uuid.uuid4())
 
 with gr.Blocks(title="NodeAI Gemini") as demo:
     chat_store = gr.State({}) 
@@ -86,38 +64,36 @@ with gr.Blocks(title="NodeAI Gemini") as demo:
         # SIDEBAR
         with gr.Column(scale=1, elem_classes="sidebar"):
             gr.Markdown("Gemini", elem_classes="gemini-title")
-            new_chat_btn = gr.Button("+ Cuộc trò chuyện mới", elem_classes="nav-btn")
+            new_btn = gr.Button("+ Cuộc trò chuyện mới", elem_classes="nav-btn")
             gr.Markdown("---")
             gr.Markdown("### Gần đây")
-            history_list = gr.HTML("<div style='color:#555'><i>Trống</i></div>")
             
-            # Thay thế Spacer bằng Markdown rỗng có chiều cao
-            gr.Markdown("<div style='height: 40vh;'></div>")
+            # Danh sách các nút lịch sử
+            history_container = gr.Column()
+
+            @gr.render(inputs=chat_store)
+            def render_history(store):
+                for sid, info in store.items():
+                    # Tạo một nút cho mỗi cuộc hội thoại cũ
+                    btn = gr.Button(f"🕒 {info['title']}", elem_classes="history-btn")
+                    # Khi nhấn vào nút này, load lại chat đó
+                    btn.click(load_old_chat, [gr.State(sid), chat_store], [chatbot, session_id])
+
+            gr.Markdown("<div style='height: 30vh;'></div>")
             gr.LoginButton(size="sm")
 
-        # MAIN CHAT
+        # MAIN
         with gr.Column(scale=4):
-            chatbot = gr.Chatbot(label=None, height=650)
-            
+            chatbot = gr.Chatbot(label=None, height=600)
             with gr.Row():
-                msg_input = gr.Textbox(
-                    placeholder="Nhập câu hỏi tại đây...",
-                    show_label=False,
-                    container=False,
-                    scale=9
-                )
+                msg_input = gr.Textbox(placeholder="Nhập yêu cầu...", show_label=False, container=False, scale=9)
                 submit_btn = gr.Button("🚀", scale=1, variant="primary")
-            
-            gr.Markdown("NodeAI Pro v4.1 | Kết nối an toàn", elem_classes="footer-tag")
+            gr.Markdown("NodeAI Pro v4.5 | Powered by Qwen 2.5", elem_classes="footer-tag")
 
-    # Xử lý sự kiện
-    ev = msg_input.submit(chat_fn, [msg_input, chatbot, session_id, chat_store], [msg_input, chatbot, session_id, chat_store])
-    ev.then(update_sidebar_list, chat_store, history_list)
-    
-    btn_ev = submit_btn.click(chat_fn, [msg_input, chatbot, session_id, chat_store], [msg_input, chatbot, session_id, chat_store])
-    btn_ev.then(update_sidebar_list, chat_store, history_list)
-    
-    new_chat_btn.click(start_new_chat, None, [chatbot, session_id, history_list])
+    # Xử lý
+    msg_input.submit(chat_fn, [msg_input, chatbot, session_id, chat_store], [msg_input, chatbot, session_id, chat_store])
+    submit_btn.click(chat_fn, [msg_input, chatbot, session_id, chat_store], [msg_input, chatbot, session_id, chat_store])
+    new_btn.click(start_new_chat, None, [chatbot, session_id])
 
 if __name__ == "__main__":
     demo.launch(css=custom_css)