Update app.py

app.py

@@ -4,48 +4,57 @@ import json
 import os
 import uuid
 
-# Judul aplikasi dengan ikon dan styling
+# Styling dengan CSS untuk tampilan lebih mirip ChatGPT
 st.markdown(
     """
     <style>
-    .title {
-        font-size: 2.5em;
-        font-weight: bold;
-        color: #4A90E2;
-        text-align: center;
-        margin-bottom: 20px;
+    /* Tombol menu sidebar */
+    .menu-btn {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+        font-size: 24px;
+        cursor: pointer;
+        z-index: 1001;
     }
-    .sidebar .sidebar-content {
-        background-color: #f0f2f6;
-        padding: 20px;
-        border-radius: 10px;
+
+    /* Styling sidebar */
+    [data-testid="stSidebar"] {
+        background-color: #f8f9fa;
+        width: 300px;
+        border-right: 2px solid #ddd;
     }
+
+    /* Styling chat bubble */
     .chat-message {
-        padding: 10px;
-        border-radius: 10px;
+        padding: 12px 15px;
+        border-radius: 15px;
         margin-bottom: 10px;
-        max-width: 70%;
+        max-width: 75%;
     }
+
     .chat-message.user {
         background-color: #4A90E2;
         color: white;
         margin-left: auto;
+        text-align: right;
     }
+
     .chat-message.assistant {
-        background-color: #f0f2f6;
+        background-color: #e9ecef;
         color: black;
         margin-right: auto;
     }
-    .chat-input {
-        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);
+
+    /* Avatar */
+    .chat-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
     }
+
+    /* Loading animation */
     .loading {
         text-align: center;
         font-size: 1.2em;
@@ -57,7 +66,8 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-st.markdown('<div class="title">🤖 Chatbot dengan Blackbox AI</div>', unsafe_allow_html=True)
+# Tombol ☰ di pojok kiri atas untuk membuka sidebar
+st.markdown('<div class="menu-btn">☰</div>', unsafe_allow_html=True)
 
 # Inisialisasi file database
 DATABASE_FILE = "database.json"
@@ -79,7 +89,7 @@ def save_database(database):
 
 database = load_database()
 
-# Generate atau ambil user_id dari session state
+# Generate user_id jika belum ada
 if "user_id" not in st.session_state:
     st.session_state.user_id = str(uuid.uuid4())
 
@@ -91,7 +101,7 @@ if "sessions" not in st.session_state:
 if "current_session" not in st.session_state:
     st.session_state.current_session = None
 
-# Sidebar untuk mengelola session
+# Sidebar dengan tombol collapse
 with st.sidebar:
     st.header("📁 Session List")
 
@@ -134,14 +144,28 @@ if st.session_state.current_session:
     st.header(f"💬 Percakapan: {st.session_state.current_session}")
 
     for message in st.session_state.sessions[st.session_state.current_session]:
-        with st.chat_message(message["role"]):
-            st.markdown(f'<div class="chat-message {message["role"]}">{message["content"]}</div>', unsafe_allow_html=True)
+        role = message["role"]
+        avatar = "👤" if role == "user" else "🤖"
+
+        with st.chat_message(role):
+            st.markdown(
+                f'<div class="chat-message {role}">'
+                f'<span style="font-size:20px;">{avatar}</span> '
+                f'{message["content"]}</div>',
+                unsafe_allow_html=True
+            )
 
     # Input pengguna
     if prompt := st.chat_input("Ketik pesan Anda di sini..."):
         st.session_state.sessions[st.session_state.current_session].append({"role": "user", "content": prompt})
+
         with st.chat_message("user"):
-            st.markdown(f'<div class="chat-message user">{prompt}</div>', unsafe_allow_html=True)
+            st.markdown(
+                f'<div class="chat-message user">'
+                f'<span style="font-size:20px;">👤</span> '
+                f'{prompt}</div>',
+                unsafe_allow_html=True
+            )
 
         # Loading Animation
         loading_placeholder = st.empty()
@@ -156,7 +180,12 @@ if st.session_state.current_session:
                     provider=g4f.Provider.Blackbox
                 )
                 loading_placeholder.empty()
-                st.markdown(f'<div class="chat-message assistant">{response}</div>', unsafe_allow_html=True)
+                st.markdown(
+                    f'<div class="chat-message assistant">'
+                    f'<span style="font-size:20px;">🤖</span> '
+                    f'{response}</div>',
+                    unsafe_allow_html=True
+                )
 
                 # Tambahkan respons ke riwayat percakapan
                 st.session_state.sessions[st.session_state.current_session].append({"role": "assistant", "content": response})