Update app.py

app.py

@@ -4,197 +4,323 @@ import json
 import os
 import uuid
 
-# Styling dengan CSS untuk tampilan lebih mirip ChatGPT
+# Custom CSS untuk tampilan premium
 st.markdown(
     """
     <style>
-    /* Tombol menu sidebar */
-    .menu-btn {
-        position: fixed;
-        top: 10px;
-        left: 10px;
-        font-size: 24px;
-        cursor: pointer;
-        z-index: 1001;
-    }
-
-    /* Styling sidebar */
-    [data-testid="stSidebar"] {
-        background-color: #f8f9fa;
-        width: 300px;
-        border-right: 2px solid #ddd;
+    /* Main container styling */
+    .main {
+        background-color: #f5f5f5;
+        padding: 20px 5%;
     }
 
-    /* Styling chat bubble */
-    .chat-message {
-        padding: 12px 15px;
+    /* Chat container styling */
+    .chat-container {
+        max-width: 800px;
+        margin: 0 auto;
+        background: white;
         border-radius: 15px;
-        margin-bottom: 10px;
-        max-width: 75%;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        padding: 20px;
+        min-height: 70vh;
+        max-height: 70vh;
+        overflow-y: auto;
     }
 
-    .chat-message.user {
-        background-color: #4A90E2;
-        color: white;
-        margin-left: auto;
-        text-align: right;
+    /* Message styling */
+    .message {
+        margin: 15px 0;
+        display: flex;
+        gap: 12px;
+        align-items: start;
     }
 
-    .chat-message.assistant {
-        background-color: #e9ecef;
-        color: black;
-        margin-right: auto;
+    .user-message {
+        flex-direction: row-reverse;
     }
 
-    /* Avatar */
-    .chat-avatar {
+    .avatar {
         width: 40px;
         height: 40px;
         border-radius: 50%;
-        object-fit: cover;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .user-avatar {
+        background: #10a37f;
+        color: white;
+    }
+
+    .bot-avatar {
+        background: #e5e7eb;
+        color: #6b7280;
+    }
+
+    .message-content {
+        max-width: 70%;
+        padding: 12px 16px;
+        border-radius: 12px;
+        line-height: 1.5;
+        font-size: 16px;
+    }
+
+    .user-content {
+        background: #10a37f;
+        color: white;
+        border-radius: 12px 12px 0 12px;
+    }
+
+    .bot-content {
+        background: #f3f4f6;
+        color: #374151;
+        border-radius: 12px 12px 12px 0;
+    }
+
+    /* Input area styling */
+    .input-container {
+        max-width: 800px;
+        margin: 20px auto;
+        position: relative;
     }
 
     /* Loading animation */
-    .loading {
-        text-align: center;
-        font-size: 1.2em;
-        color: #4A90E2;
-        margin-top: 10px;
+    .dot-flashing {
+        position: relative;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #10a37f;
+        color: #10a37f;
+        animation: dotFlashing 1s infinite linear alternate;
+        animation-delay: .5s;
     }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
 
-# Tombol ☰ di pojok kiri atas untuk membuka sidebar
-st.markdown('<div class="menu-btn">☰</div>', unsafe_allow_html=True)
+    .dot-flashing::before, .dot-flashing::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: 0;
+    }
 
-# Inisialisasi file database
-DATABASE_FILE = "database.json"
+    .dot-flashing::before {
+        left: -15px;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #10a37f;
+        color: #10a37f;
+        animation: dotFlashing 1s infinite alternate;
+        animation-delay: 0s;
+    }
 
-def load_database():
-    """Memuat database dari file JSON."""
-    if os.path.exists(DATABASE_FILE):
-        try:
-            with open(DATABASE_FILE, "r") as file:
-                return json.load(file)
-        except json.JSONDecodeError:
-            return {}
-    return {}
+    .dot-flashing::after {
+        left: 15px;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #10a37f;
+        color: #10a37f;
+        animation: dotFlashing 1s infinite alternate;
+        animation-delay: 1s;
+    }
+
+    @keyframes dotFlashing {
+        0% { background-color: #10a37f; }
+        50%, 100% { background-color: rgba(16, 163, 127, 0.2); }
+    }
+
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 4px;
+    }
 
-def save_database(database):
-    """Menyimpan database ke file JSON."""
-    with open(DATABASE_FILE, "w") as file:
-        json.dump(database, file, indent=4)
+    /* Session list styling */
+    .session-item {
+        padding: 10px;
+        margin: 5px 0;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
 
-database = load_database()
+    .session-item:hover {
+        background: #e5e7eb;
+    }
 
-# Generate user_id jika belum ada
-if "user_id" not in st.session_state:
-    st.session_state.user_id = str(uuid.uuid4())
+    .active-session {
+        background: #10a37f !important;
+        color: white;
+    }
 
-user_id = st.session_state.user_id
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
 
-# Inisialisasi session state
-if "sessions" not in st.session_state:
-    st.session_state.sessions = database.get(user_id, {})
-if "current_session" not in st.session_state:
-    st.session_state.current_session = None
+# Fungsi database tetap sama...
 
-# Sidebar dengan tombol collapse
+# Inisialisasi state
+# ... (tetap sama dengan sebelumnya) ...
+
+# Sidebar yang lebih modern
 with st.sidebar:
-    st.header("📁 Session List")
-
-    new_session_name = st.text_input("Buat Session Baru", placeholder="Nama Session")
-    if st.button("Buat Session"):
-        if new_session_name:
-            if new_session_name not in st.session_state.sessions:
-                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.success(f"Session '{new_session_name}' berhasil dibuat!")
+    st.markdown("## 💬 Chat Sessions")
+    st.markdown("---")
+    
+    # Buat session baru
+    with st.expander("➕ New Session", expanded=True):
+        new_session_name = st.text_input("Session name", key="new_session")
+        if st.button("Create", key="create_btn"):
+            if new_session_name:
+                if new_session_name not in st.session_state.sessions:
+                    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.rerun()
+                else:
+                    st.error("Name already exists!")
             else:
-                st.error("Nama session sudah ada!")
-        else:
-            st.error("Nama session tidak boleh kosong!")
-
-    if st.session_state.sessions:
-        selected_session = st.selectbox(
-            "Pilih Session",
-            list(st.session_state.sessions.keys()),
-            index=list(st.session_state.sessions.keys()).index(st.session_state.current_session)
-            if st.session_state.current_session else 0
+                st.error("Please enter a name")
+
+    st.markdown("---")
+    st.markdown("### 📚 Your Sessions")
+    
+    # Daftar session
+    sessions = list(st.session_state.sessions.keys())
+    for idx, session in enumerate(sessions):
+        is_active = session == st.session_state.current_session
+        session_class = "active-session" if is_active else "session-item"
+        st.markdown(
+            f'<div class="{session_class}" onclick="setSession({idx})">{session}</div>',
+            unsafe_allow_html=True
         )
-        if st.button("Set Session Aktif"):
-            st.session_state.current_session = selected_session
-            st.success(f"Session '{selected_session}' dipilih!")
-
-        session_to_delete = st.selectbox("Pilih Session untuk Dihapus", list(st.session_state.sessions.keys()))
-        if st.button("Hapus Session"):
-            del st.session_state.sessions[session_to_delete]
-            if st.session_state.current_session == session_to_delete:
-                st.session_state.current_session = None
-            database[user_id] = st.session_state.sessions
-            save_database(database)
-            st.success(f"Session '{session_to_delete}' berhasil dihapus!")
 
-# Tampilkan percakapan dari session yang aktif
-if st.session_state.current_session:
-    st.header(f"💬 Percakapan: {st.session_state.current_session}")
+    # JavaScript untuk session selection
+    st.markdown(
+        """
+        <script>
+        function setSession(index) {
+            window.parent.postMessage({
+                type: 'setCurrentSession',
+                index: index
+            }, '*');
+        }
+        </script>
+        """,
+        unsafe_allow_html=True
+    )
 
-    for message in st.session_state.sessions[st.session_state.current_session]:
-        role = message["role"]
-        avatar = "👤" if role == "user" else "🤖"
+# Area chat utama
+st.markdown('<div class="main">', unsafe_allow_html=True)
+st.markdown('<div class="chat-container">', unsafe_allow_html=True)
 
-        with st.chat_message(role):
+if st.session_state.current_session:
+    # Tampilkan chat history
+    for message in st.session_state.sessions[st.session_state.current_session]:
+        if message["role"] == "user":
+            st.markdown(
+                f'''
+                <div class="message user-message">
+                    <div class="message-content user-content">
+                        {message["content"]}
+                    </div>
+                    <div class="avatar user-avatar">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                    </div>
+                </div>
+                ''',
+                unsafe_allow_html=True
+            )
+        else:
             st.markdown(
-                f'<div class="chat-message {role}">'
-                f'<span style="font-size:20px;">{avatar}</span> '
-                f'{message["content"]}</div>',
+                f'''
+                <div class="message">
+                    <div class="avatar bot-avatar">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
+                    </div>
+                    <div class="message-content bot-content">
+                        {message["content"]}
+                    </div>
+                </div>
+                ''',
                 unsafe_allow_html=True
             )
 
-    # Input pengguna
-    if prompt := st.chat_input("Ketik pesan Anda di sini..."):
+    # Input area
+    st.markdown('</div>', unsafe_allow_html=True)  # Tutup chat container
+    st.markdown('<div class="input-container">', unsafe_allow_html=True)
+    
+    if prompt := st.chat_input("Message ChatGPT..."):
+        # Tambahkan pesan user
         st.session_state.sessions[st.session_state.current_session].append({"role": "user", "content": prompt})
+        
+        # Tampilkan loading
+        loading_placeholder = st.empty()
+        loading_placeholder.markdown(
+            '<div class="message"><div class="avatar bot-avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg></div><div class="dot-flashing"></div></div>',
+            unsafe_allow_html=True
+        )
 
-        with st.chat_message("user"):
+        # Dapatkan respons
+        try:
+            response = g4f.ChatCompletion.create(
+                model="blackboxai",
+                messages=st.session_state.sessions[st.session_state.current_session],
+                provider=g4f.Provider.Blackbox
+            )
+            
+            # Hapus loading dan tampilkan respons
+            loading_placeholder.empty()
+            st.session_state.sessions[st.session_state.current_session].append({"role": "assistant", "content": response})
+            database[user_id] = st.session_state.sessions
+            save_database(database)
+            st.rerun()
+            
+        except Exception as e:
+            loading_placeholder.empty()
             st.markdown(
-                f'<div class="chat-message user">'
-                f'<span style="font-size:20px;">👤</span> '
-                f'{prompt}</div>',
+                f'''
+                <div class="message">
+                    <div class="avatar bot-avatar">⚠️</div>
+                    <div class="message-content bot-content" style="color: #dc2626;">
+                        Error: {str(e)}
+                    </div>
+                </div>
+                ''',
                 unsafe_allow_html=True
             )
 
-        # Loading Animation
-        loading_placeholder = st.empty()
-        loading_placeholder.markdown('<div class="loading">Mengambil respons...</div>', unsafe_allow_html=True)
-
-        # Generate respons AI menggunakan g4f dengan provider Blackbox
-        with st.chat_message("assistant"):
-            try:
-                response = g4f.ChatCompletion.create(
-                    model="blackboxai",
-                    messages=st.session_state.sessions[st.session_state.current_session],
-                    provider=g4f.Provider.Blackbox
-                )
-                loading_placeholder.empty()
-                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})
-                database[user_id] = st.session_state.sessions
-                save_database(database)
-
-            except Exception as e:
-                loading_placeholder.empty()
-                st.error(f"Terjadi error: {str(e)}")
-
+    st.markdown('</div></div>', unsafe_allow_html=True)  # Tutup input container dan main
 else:
-    st.warning("Silakan buat atau pilih session terlebih dahulu.")
+    st.markdown('</div>', unsafe_allow_html=True)  # Tutup chat container
+    st.markdown('<div class="input-container">', unsafe_allow_html=True)
+    st.info("Please select or create a session from the sidebar")
+    st.markdown('</div></div>', unsafe_allow_html=True)
+
+# Auto-scroll ke pesan terakhir
+st.markdown(
+    """
+    <script>
+    window.addEventListener('load', function() {
+        var chatContainer = window.parent.document.querySelector('.chat-container');
+        if (chatContainer) {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    });
+    </script>
+    """,
+    unsafe_allow_html=True
+)