Update app.py

app.py

@@ -4,123 +4,147 @@ import json
 import os
 import uuid
 
-# Judul aplikasi
-st.title("🤖 Chatbot dengan Blackbox AI")
+# Konfigurasi halaman
+st.set_page_config(page_title="ChatGPT Clone", layout="wide")
 
-# Inisialisasi file database
+# CSS untuk styling mirip ChatGPT
+st.markdown(
+    """
+    <style>
+        body {
+            background-color: #343541; /* Warna latar belakang ChatGPT */
+            color: white;
+        }
+        .stChatMessage {
+            border-radius: 10px;
+            padding: 12px;
+            margin: 8px 0;
+            max-width: 75%;
+        }
+        .user-message {
+            background-color: #0b93f6;
+            color: white;
+            align-self: flex-end;
+        }
+        .assistant-message {
+            background-color: #444654;
+            color: white;
+            align-self: flex-start;
+        }
+        .stChatInputContainer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: #40414F;
+            z-index: 1000;
+            padding: 10px;
+            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .stButton button {
+            width: 100%;
+            background: #10a37f;
+            color: white;
+            border-radius: 5px;
+            padding: 8px;
+            font-size: 14px;
+        }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+# Inisialisasi database
 DATABASE_FILE = "database.json"
 
-# Fungsi untuk memuat database dari file JSON
 def load_database():
     if os.path.exists(DATABASE_FILE):
         try:
             with open(DATABASE_FILE, "r") as file:
                 return json.load(file)
         except json.JSONDecodeError:
-            return {}  # Jika file kosong atau corrupt, kembalikan dictionary kosong
+            return {}  
     return {}
 
-# Fungsi untuk menyimpan database ke file JSON
 def save_database(database):
     with open(DATABASE_FILE, "w") as file:
         json.dump(database, file, indent=4)
 
-# Memuat database
 database = load_database()
 
-# Generate atau ambil user_id dari session state
+# Generate atau ambil user_id
 if "user_id" not in st.session_state:
-    st.session_state.user_id = str(uuid.uuid4())  # Generate ID unik untuk pengguna
+    st.session_state.user_id = str(uuid.uuid4())
 
-user_id = st.session_state.user_id  # Gunakan ID unik pengguna
+user_id = st.session_state.user_id  
 
-# Inisialisasi session state untuk menyimpan session list dan percakapan
+# Inisialisasi session state
 if "sessions" not in st.session_state:
-    st.session_state.sessions = database.get(user_id, {})  # Memuat session pengguna dari database
+    st.session_state.sessions = database.get(user_id, {})
 if "current_session" not in st.session_state:
-    st.session_state.current_session = "Default Session"  # Session default yang aktif
+    st.session_state.current_session = "Default Session"
     if st.session_state.current_session not in st.session_state.sessions:
-        st.session_state.sessions[st.session_state.current_session] = []  # Buat session default
+        st.session_state.sessions[st.session_state.current_session] = []
 
-# Sidebar untuk mengelola session
+# Sidebar untuk sesi chat
 with st.sidebar:
-    st.header("📁 Session Management")
+    st.header("📁 ChatGPT Sessions")
     
-    # Tombol untuk menghapus session
-    if st.session_state.sessions:
-        if st.button("Hapus Session"):
+    session_list = list(st.session_state.sessions.keys())
+    selected_session = st.selectbox("Pilih sesi", session_list, index=session_list.index(st.session_state.current_session) if session_list else 0)
+
+    if selected_session:
+        st.session_state.current_session = selected_session
+
+    if st.button("🆕 Buat Sesi Baru"):
+        new_session_name = f"Session {len(session_list) + 1}"
+        st.session_state.sessions[new_session_name] = []
+        st.session_state.current_session = new_session_name
+        database[user_id] = st.session_state.sessions
+        save_database(database)
+        st.experimental_rerun()
+
+    if st.button("🗑 Hapus Sesi"):
+        if st.session_state.current_session in st.session_state.sessions:
             del st.session_state.sessions[st.session_state.current_session]
-            if st.session_state.sessions:  # Jika masih ada session lain, pilih session pertama
+            if st.session_state.sessions:
                 st.session_state.current_session = list(st.session_state.sessions.keys())[0]
-            else:  # Jika tidak ada session, buat session default baru
+            else:
                 st.session_state.current_session = "Default Session"
                 st.session_state.sessions[st.session_state.current_session] = []
-            database[user_id] = st.session_state.sessions  # Simpan ke database
-            save_database(database)  # Simpan ke file JSON
-            st.success("Session berhasil dihapus!")
+            database[user_id] = st.session_state.sessions
+            save_database(database)
+            st.experimental_rerun()
 
-# Tampilkan percakapan dari session yang aktif
-st.header(f"💬 Percakapan: {st.session_state.current_session}")
+# Tampilkan riwayat percakapan
+st.markdown(f"<h3>💬 {st.session_state.current_session}</h3>", unsafe_allow_html=True)
 
-# Tampilkan riwayat chat dari session yang aktif
 for message in st.session_state.sessions[st.session_state.current_session]:
-    with st.chat_message(message["role"]):
-        st.markdown(message["content"])
+    role = message["role"]
+    content = message["content"]
+    with st.chat_message(role):
+        st.markdown(f"<div class='{role}-message'>{content}</div>", unsafe_allow_html=True)
 
 # Input pengguna
 if prompt := st.chat_input("Ketik pesan Anda di sini..."):
-    # Tambahkan pesan pengguna ke riwayat chat session yang aktif
     st.session_state.sessions[st.session_state.current_session].append({"role": "user", "content": prompt})
     with st.chat_message("user"):
-        st.markdown(prompt)
+        st.markdown(f"<div class='user-message'>{prompt}</div>", unsafe_allow_html=True)
 
-    # Generate respons AI menggunakan g4f dengan provider Blackbox
+    # Generate respons AI dengan g4f (Blackbox AI)
     with st.chat_message("assistant"):
         try:
-            # Kirim seluruh riwayat percakapan ke model AI
             response = g4f.ChatCompletion.create(
-                model="blackboxai",  # Model yang digunakan
-                messages=st.session_state.sessions[st.session_state.current_session],  # Kirim semua riwayat chat
-                provider=g4f.Provider.Blackbox  # Provider Blackbox
+                model="blackboxai",
+                messages=st.session_state.sessions[st.session_state.current_session],
+                provider=g4f.Provider.Blackbox
             )
-            st.markdown(response)
+            st.markdown(f"<div class='assistant-message'>{response}</div>", unsafe_allow_html=True)
         except Exception as e:
-            st.error(f"Terjadi error: {str(e)}")
+            response = f"⚠️ Terjadi error: {str(e)}"
+            st.markdown(f"<div class='assistant-message'>{response}</div>", unsafe_allow_html=True)
 
-    # Tambahkan respons AI ke riwayat chat session yang aktif
+    # Simpan respons AI ke riwayat chat
     st.session_state.sessions[st.session_state.current_session].append({"role": "assistant", "content": response})
-    database[user_id] = st.session_state.sessions  # Simpan ke database
-    save_database(database)  # Simpan ke file JSON
-
-# CSS untuk mengoptimalkan tampilan di perangkat mobile
-st.markdown(
-    """
-    <style>
-    /* Mengurangi padding dan margin untuk menghemat ruang */
-    .stChatInput {
-        padding: 10px;
-        margin: 0;
-    }
-    .stChatMessage {
-        padding: 10px;
-        margin: 5px 0;
-    }
-    /* Memastikan input chat tetap di bagian bawah layar */
-    .stChatInputContainer {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: white;
-        z-index: 1000;
-        padding: 10px;
-        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
-    }
-    /* Menyesuaikan ukuran font untuk layar kecil */
-    .stMarkdown {
-        font-size: 16px;
-    }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
+    database[user_id] = st.session_state.sessions
+    save_database(database)