Update app.py

app.py

@@ -7,7 +7,7 @@ import re
 from datetime import datetime
 
 # ═══════════════════════════════════════════════════════════════════════════
-# 1. CONFIGURAÇÃO DE TELA E CSS (Estilo Gemini Mobile)
+# 1. CONFIGURAÇÃO DE TELA E CSS
 # ═══════════════════════════════════════════════════════════════════════════
 st.set_page_config(page_title="Yukina", page_icon="❄️", layout="centered")
 
@@ -18,12 +18,14 @@ st.markdown("""
     header {visibility: hidden;}
     
     .stApp { background-color: #131314; color: #ededed; }
-    [data-testid="stSidebar"] { background-color: #0f0f0f; border-right: 1px solid #2a2a2a; }
+    
+    /* Fundo da Sidebar mais escuro */
+    [data-testid="stSidebar"] { background-color: #0b0b0b; border-right: 1px solid #1e1f20; }
     
     .stChatMessage { background-color: transparent !important; border: none !important; padding-bottom: 8px !important; }
     textarea { background-color: #1e1f20 !important; border-radius: 24px !important; border: 1px solid #3c4043 !important; padding: 12px !important;}
     
-    /* MÁGICA DAS PÍLULAS E BOTÕES DA TOOLBAR */
+    /* Botões da tela principal e barra inferior */
     .stButton > button, [data-testid="stPopover"] > button { 
         border-radius: 30px !important; 
         background-color: #1e1f20 !important; 
@@ -32,14 +34,24 @@ st.markdown("""
         padding: 8px 20px !important;
         display: inline-flex !important;
         align-items: center !important;
-        justify-content: flex-start !important;
         width: auto !important; 
         font-size: 15px !important;
-        margin-bottom: 2px !important;
     }
     .stButton > button:hover, [data-testid="stPopover"] > button:hover { background-color: #2a2b2f !important; border-color: #888 !important; }
     
-    [data-testid="stSidebar"] .stButton > button { width: 100% !important; }
+    /* Customização EXCLUSIVA para os botões da Sidebar (Menu, Chats, etc) */
+    [data-testid="stSidebar"] .stButton > button { 
+        width: 100% !important; 
+        border: none !important; 
+        background-color: transparent !important; 
+        justify-content: flex-start !important;
+        padding: 10px 15px !important;
+        border-radius: 12px !important;
+    }
+    [data-testid="stSidebar"] .stButton > button:hover { background-color: #1e1f20 !important; }
+    
+    /* Esconde a setinha padrão do popover para o botão de 3 pontinhos */
+    [data-testid="stPopover"] div[data-testid="stMarkdownContainer"] p { margin: 0 !important; }
     </style>
     """, unsafe_allow_html=True)
 
@@ -76,41 +88,101 @@ if "current_chat" not in st.session_state: st.session_state.current_chat = list(
 if "modelo_selecionado" not in st.session_state: st.session_state.modelo_selecionado = "Histórias (Euryale)"
 
 # ═══════════════════════════════════════════════════════════════════════════
-# 3. SIDEBAR (Gaveta)
+# 3. SIDEBAR (Design Replit / Gemini)
 # ═══════════════════════════════════════════════════════════════════════════
 with st.sidebar:
-    st.markdown("### 👤 Astarok")
-    if st.button("➕ Novo Chat"):
-        nid = f"Chat {datetime.now().strftime('%H:%M:%S')}"
-        st.session_state.db[nid] = {"pinned": False, "messages": []}
-        st.session_state.current_chat = nid
-        save_db(st.session_state.db)
-        st.rerun()
+    # Cabeçalho: Bate-papos | + | ⚙️
+    c_title, c_add, c_set = st.columns([6, 1.5, 1.5])
+    with c_title:
+        st.markdown("<h4 style='color: #ededed; margin-top: 5px; margin-bottom: 0px;'>Bate-papos</h4>", unsafe_allow_html=True)
+    with c_add:
+        if st.button("➕", help="Novo Chat"):
+            nid = f"Chat {datetime.now().strftime('%H:%M:%S')}"
+            st.session_state.db[nid] = {"pinned": False, "messages": []}
+            st.session_state.current_chat = nid
+            save_db(st.session_state.db)
+            st.rerun()
+    with c_set:
+        if st.button("⚙️", help="Configurações"):
+            st.toast("Menu de configurações (Em breve)")
+
+    st.markdown("<br>", unsafe_allow_html=True)
     
-    st.markdown("---")
+    # Barra de Pesquisa
+    busca = st.text_input("Pesquisar", placeholder="Pesquisar...", label_visibility="collapsed")
+    
+    st.markdown("<br>", unsafe_allow_html=True)
+
+    # Lista de Chats com Filtro
     chats = st.session_state.db
-    for c_id in sorted(chats, key=lambda x: not chats[x].get("pinned")):
-        icon = "📌 " if chats[c_id].get("pinned") else ""
-        if st.button(f"{icon}{c_id}", key=f"btn_{c_id}"):
-            st.session_state.current_chat = c_id
-            st.rerun()
-            
-    st.markdown("---")
-    c1, c2, c3 = st.columns(3)
-    with c1:
-        if st.button("📌"):
-            st.session_state.db[st.session_state.current_chat]["pinned"] = not st.session_state.db[st.session_state.current_chat]["pinned"]
+    if busca:
+        chats_exibidos = [c for c in chats if busca.lower() in c.lower()]
+    else:
+        chats_exibidos = list(chats.keys())
+        
+    # Ordena pinados primeiro
+    chats_exibidos.sort(key=lambda x: not chats[x].get("pinned"))
+
+    # Renderiza os chats com botão principal e o menu ⋮ do lado
+    for c_id in chats_exibidos:
+        col_chat, col_opt = st.columns([8, 2])
+        
+        with col_chat:
+            icon = "📌" if chats[c_id].get("pinned") else "💬"
+            # Destaca visualmente o chat ativo
+            if c_id == st.session_state.current_chat:
+                nome_exibicao = f"**{icon} {c_id[:18]}**"
+            else:
+                nome_exibicao = f"{icon} {c_id[:18]}"
+                
+            if st.button(nome_exibicao, key=f"btn_{c_id}"):
+                st.session_state.current_chat = c_id
+                st.rerun()
+                
+        with col_opt:
+            with st.popover("⋮"):
+                if st.button("📌 Fixar/Desfixar", key=f"pin_{c_id}"):
+                    st.session_state.db[c_id]["pinned"] = not st.session_state.db[c_id]["pinned"]
+                    save_db(st.session_state.db)
+                    st.rerun()
+                if st.button("👯 Duplicar", key=f"dup_{c_id}"):
+                    novo_nome = f"{c_id} (Cópia)"
+                    st.session_state.db[novo_nome] = st.session_state.db[c_id].copy()
+                    st.session_state.db[novo_nome]["pinned"] = False
+                    save_db(st.session_state.db)
+                    st.rerun()
+                if st.button("🗑️ Apagar", key=f"del_{c_id}"):
+                    if len(st.session_state.db) > 1:
+                        del st.session_state.db[c_id]
+                        if st.session_state.current_chat == c_id:
+                            st.session_state.current_chat = list(st.session_state.db.keys())[0]
+                        save_db(st.session_state.db)
+                        st.rerun()
+
+    # Sessão de Backup (Rodapé da Sidebar)
+    st.markdown("<br><br><br>", unsafe_allow_html=True)
+    st.markdown("<p style='font-size: 10px; color: #888; font-weight: bold; letter-spacing: 1px;'>BACKUP</p>", unsafe_allow_html=True)
+    
+    db_json = json.dumps(st.session_state.db, ensure_ascii=False, indent=4)
+    st.download_button(
+        label="↓ Exportar todos os chats (.json)",
+        data=db_json,
+        file_name="yukina_backup.json",
+        mime="application/json",
+        use_container_width=True
+    )
+    
+    st.markdown("<p style='font-size: 13px; color: #888; margin-top: 15px; margin-bottom: 5px;'>Importar conversa (.json):</p>", unsafe_allow_html=True)
+    arquivo_import = st.file_uploader("Carregar", type=["json"], label_visibility="collapsed")
+    if arquivo_import is not None:
+        try:
+            dados_importados = json.load(arquivo_import)
+            st.session_state.db.update(dados_importados)
             save_db(st.session_state.db)
+            st.success("Conversas importadas!")
             st.rerun()
-    with c2:
-        if st.button("👯"): st.toast("Em breve")
-    with c3:
-        if st.button("🗑️"):
-            if len(st.session_state.db) > 1:
-                del st.session_state.db[st.session_state.current_chat]
-                st.session_state.current_chat = list(st.session_state.db.keys())[0]
-                save_db(st.session_state.db)
-                st.rerun()
+        except:
+            st.error("Arquivo inválido.")
 
 # ═══════════════════════════════════════════════════════════════════════════
 # 4. ÁREA PRINCIPAL E TELA INICIAL
@@ -153,98 +225,7 @@ else:
 # ═══════════════════════════════════════════════════════════════════════════
 # 5. TOOLBAR INFERIOR (Estilo Gemini)
 # ═══════════════════════════════════════════════════════════════════════════
-st.markdown("<br>", unsafe_allow_html=True) # Espaço para não grudar na última mensagem
-
-t_col1, t_col2, t_space = st.columns([1.5, 1.5, 7])
-with t_col1:
-    with st.popover("➕"):
-        st.markdown("<p style='font-size: 13px; color: #888;'>Mídia só funciona com o motor de Visão ativo.</p>", unsafe_allow_html=True)
-        img_upload = st.file_uploader("Upload", type=["png", "jpg", "jpeg"], label_visibility="collapsed")
-with t_col2:
-    with st.popover("🎛️"):
-        st.session_state.modelo_selecionado = st.radio(
-            "Selecione o Motor:", 
-            list(MODEL_IDS.keys()), 
-            index=list(MODEL_IDS.keys()).index(st.session_state.modelo_selecionado)
-        )
-
-# INPUT DE MENSAGEM
-if prompt := st.chat_input("Peça à Yukina..."):
-    
-    st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "user", "content": prompt})
-    with st.chat_message("user"):
-        st.markdown(prompt)
+st.markdown("<br>", unsafe_allow_html=True)
 
-    with st.chat_message("assistant"):
-        api_key = os.getenv("OPENROUTER_API_KEY")
-        headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
-        
-        # MOTOR DE IMAGEM
-        if "Imagem" in st.session_state.modelo_selecionado:
-            with st.spinner("Desenhando..."):
-                payload = {"model": MODEL_IDS[st.session_state.modelo_selecionado], "messages": [{"role": "user", "content": prompt}], "modalities": ["image"]}
-                try:
-                    resp = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json=payload).json()
-                    message_obj = resp['choices'][0]['message']
-                    img_url = None
-                    if 'images' in message_obj and len(message_obj['images']) > 0:
-                        img_url = message_obj['images'][0]['image_url']['url']
-                    elif 'content' in message_obj and message_obj['content']:
-                        content = message_obj['content']
-                        if content.startswith('data:image'): img_url = content
-                        else:
-                            urls = re.findall(r'(https?://[^\s)]+)', content)
-                            if urls: img_url = urls[0]
-
-                    if img_url:
-                        st.image(img_url)
-                        st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": "Arte gerada.", "image_url": img_url})
-                    else:
-                        st.error("Falha ao gerar a imagem.")
-                except Exception as e:
-                    st.error(f"Erro: {e}")
-        
-        # MOTOR DE VISÃO
-        elif "Visão" in st.session_state.modelo_selecionado:
-            if not img_upload:
-                st.error("⚠️ Você está usando o motor de Visão. Clique no '➕' e anexe uma imagem primeiro!")
-            else:
-                with st.spinner("Analisando..."):
-                    try:
-                        encoded_image = base64.b64encode(img_upload.read()).decode('utf-8')
-                        data_url = f"data:image/png;base64,{encoded_image}"
-                        payload = {
-                            "model": MODEL_IDS[st.session_state.modelo_selecionado],
-                            "messages": [{"role": "system", "content": SYSTEM_PROMPT}, {"role": "user", "content": [{"type": "text", "text": prompt}, {"type": "image_url", "image_url": {"url": data_url}}]}],
-                            "stream": False
-                        }
-                        resp = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json=payload).json()
-                        analise = resp['choices'][0]['message']['content']
-                        st.markdown(analise)
-                        st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": analise})
-                    except Exception as e:
-                        st.error(f"Erro na Visão: {e}")
-
-        # MOTOR DE TEXTO
-        else:
-            ph = st.empty()
-            full_res = ""
-            historico_limpo = [m for m in st.session_state.db[st.session_state.current_chat]["messages"] if "image_url" not in m]
-            payload = {"model": MODEL_IDS[st.session_state.modelo_selecionado], "messages": [{"role": "system", "content": SYSTEM_PROMPT}] + historico_limpo, "stream": True}
-            try:
-                resp = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json=payload, stream=True)
-                for line in resp.iter_lines():
-                    if line:
-                        try:
-                            d = json.loads(line.decode('utf-8').replace('data: ', ''))
-                            content = d['choices'][0]['delta'].get('content', '')
-                            full_res += content
-                            ph.markdown(full_res + "▌")
-                        except: continue
-                ph.markdown(full_res)
-                st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": full_res})
-            except Exception as e:
-                st.error(f"Erro: {e}")
-                
-    save_db(st.session_state.db)
+t_col1, t_col2, t_space = st.columns(