Update app.py

app.py

@@ -65,52 +65,6 @@ Mariam est une IA chaleureuse, bienveillante et authentique, conçue pour être
   - Pose des questions pertinentes pour mieux comprendre
   - Fait preuve d'écoute active
   - Rebondit naturellement sur les propos de l'interlocuteur
-
-## Limites et Éthique
-
-- Honnêteté et Transparence
-  - Reconnaît clairement ses limites
-  - N'invente pas d'informations
-  - Suggère de vérifier les informations importantes
-
-- Éthique et Sécurité
-  - Refuse poliment les demandes inappropriées
-  - Oriente vers des ressources fiables si nécessaire
-  - Priorise toujours la sécurité et le bien-être
-
-## Comportements Spécifiques
-
-- Accueil et Salutations
-  - Commence les conversations de manière chaleureuse
-  - Utilise le prénom de l'interlocuteur quand il est connu
-  - Adapte ses salutations au moment de la journée
-
-- Gestion des Émotions
-  - Reconnaît et valide les émotions exprimées
-  - Offre du soutien de manière appropriée
-  - Maintient un équilibre entre empathie et professionnalisme
-
-- Résolution de Problèmes
-  - Propose des solutions pratiques et adaptées
-  - Guide l'utilisateur étape par étape
-  - Vérifie la compréhension et la satisfaction
-
-## Exemples de Réponses Types
-
-"Bonjour [nom] ! Je suis contente de vous retrouver aujourd'hui. Comment puis-je vous aider ?"
-
-"Je comprends votre frustration face à cette situation. Prenons le temps d'explorer ensemble les solutions possibles."
-
-"Cette question est intéressante ! Laissez-moi vous expliquer cela de manière simple et claire."
-
-"Je ne suis pas sûre de la réponse exacte à cette question. Plutôt que de risquer de vous induire en erreur, je vous suggère de vérifier [source fiable]."
-
-## Notes d'Implementation
-
-- Adapter le niveau de langage en fonction de l'interlocuteur
-- Maintenir une cohérence dans les réponses
-- Garder un historique contextuel pour des interactions plus naturelles
-- Mettre à jour régulièrement les connaissances et capacités
 """
 
 # Paramètres de sécurité pour Gemini
@@ -166,6 +120,8 @@ def initialize_session_state():
         st.session_state.username = None
     if "temp_dir" not in st.session_state:
         st.session_state.temp_dir = tempfile.mkdtemp()
+    if "show_sidebar" not in st.session_state:
+        st.session_state.show_sidebar = False
 
 # Fonction pour effectuer une recherche web
 def perform_web_search(query):
@@ -309,133 +265,200 @@ Analyse ces informations et donne une réponse complète et à jour. Cite tes so
     finally:
         st.session_state.thinking = False
 
-# Fonction pour afficher l'interface
-def render_ui():
-    """Affiche l'interface utilisateur de l'application."""
-    
-    # Configuration du thème et du titre
-    st.set_page_config(
-        page_title="Mariam AI",
-        page_icon="🤖",
-        layout="wide",
-        initial_sidebar_state="expanded"
-    )
-    
-    # Barre latérale avec paramètres
+# Fonction pour afficher la barre latérale
+def render_sidebar():
+    """Affiche la barre latérale avec les paramètres et informations."""
     with st.sidebar:
-        st.image("https://via.placeholder.com/150x150.png?text=Mariam+AI", width=150)
+        st.image("https://via.placeholder.com/150x150.png?text=M", width=80)
         st.title("Mariam AI")
         st.caption("Votre assistante IA personnelle")
         
         # Paramètres utilisateur
-        with st.expander("⚙️ Paramètres", expanded=False):
-            # Nom d'utilisateur
-            username = st.text_input("Votre nom (optionnel)", value=st.session_state.username or "")
-            if username != st.session_state.username:
-                st.session_state.username = username
-            
-            # Activation de la recherche web
-            web_search = st.toggle(
-                "Activer la recherche web", 
-                value=st.session_state.web_search,
-                help="Permet à Mariam d'effectuer des recherches web pour répondre à vos questions"
-            )
-            if web_search != st.session_state.web_search:
-                st.session_state.web_search = web_search
+        st.subheader("⚙️ Paramètres")
+        
+        # Nom d'utilisateur
+        username = st.text_input("Votre nom (optionnel)", value=st.session_state.username or "")
+        if username != st.session_state.username:
+            st.session_state.username = username
+        
+        # Activation de la recherche web
+        web_search = st.toggle(
+            "Recherche web", 
+            value=st.session_state.web_search,
+            help="Permet à Mariam d'effectuer des recherches web"
+        )
+        if web_search != st.session_state.web_search:
+            st.session_state.web_search = web_search
         
         # Actions
-        with st.expander("🔄 Actions", expanded=False):
-            if st.button("Nouvelle conversation", use_container_width=True):
-                st.session_state.chat = st.session_state.model.start_chat(history=[])
-                st.session_state.messages = []
-                st.rerun()
+        st.subheader("🔄 Actions")
+        if st.button("Nouvelle conversation", use_container_width=True):
+            st.session_state.chat = st.session_state.model.start_chat(history=[])
+            st.session_state.messages = []
+            st.rerun()
         
         # À propos
-        with st.expander("ℹ️ À propos", expanded=False):
-            st.markdown("""
-            **Mariam AI** est une assistante virtuelle développée par Youssouf.
-            
-            Elle est conçue pour être:
-            - 🤗 Chaleureuse et empathique
-            - 🧠 Intelligente et informative
-            - 🛠️ Pratique et utile
-            
-            Basée sur la technologie Google Gemini.
-            """)
+        st.subheader("ℹ️ À propos")
+        st.markdown("""
+        **Mariam AI** est une assistante virtuelle développée par Youssouf.
+        
+        Basée sur la technologie Google Gemini.
+        """)
         
         st.divider()
-        st.caption("© 2025 Mariam AI • Tous droits réservés")
+        st.caption("© 2025 Mariam AI")
+        
+        # Bouton pour fermer la barre latérale sur mobile
+        if st.button("Fermer le menu", use_container_width=True):
+            st.session_state.show_sidebar = False
+            st.rerun()
+
+# Fonction pour afficher l'interface mobile
+def render_mobile_ui():
+    """Affiche l'interface utilisateur optimisée pour mobile."""
     
-    # Contenu principal
-    col1, col2 = st.columns([3, 1])
+    # Configuration de la page
+    st.set_page_config(
+        page_title="Mariam AI",
+        page_icon="🤖",
+        initial_sidebar_state="collapsed"
+    )
     
-    with col1:
-        # Titre principal
-        st.title("💬 Discutez avec Mariam")
-        
-        # Zone de messages
-        message_container = st.container(height=500, border=False)
-        
-        with message_container:
-            # Afficher tous les messages
-            for message in st.session_state.messages:
-                with st.chat_message(message["role"]):
-                    st.markdown(message["content"])
-            
-            # Afficher l'indicateur "en train d'écrire"
-            if st.session_state.thinking:
-                with st.chat_message("assistant"):
-                    st.write("Mariam est en train de réfléchir...")
-        
-        # Zone de saisie et téléchargement
-        file_col, input_col = st.columns([1, 4])
-        
-        with file_col:
-            # Zone de téléchargement de fichier
-            uploaded_file = st.file_uploader(
-                "Fichier",
-                type=ALL_ACCEPTED_FILES,
-                label_visibility="collapsed",
-                help="Téléchargez une image, un document ou un fichier audio pour en discuter avec Mariam"
-            )
-        
-        with input_col:
-            # Zone de saisie de texte
-            user_input = st.chat_input(
-                "Posez une question à Mariam...", 
-                disabled=st.session_state.thinking
-            )
-            
-            if user_input:
-                handle_message(user_input, uploaded_file)
-                st.rerun()
+    # Custom CSS pour améliorer l'interface mobile
+    st.markdown("""
+    <style>
+        .stApp {
+            max-width: 100%;
+            padding: 0;
+        }
+        .stChatMessage {
+            padding: 8px;
+        }
+        .stTextInput > div > div > input {
+            height: 50px;
+        }
+        .avatar {
+            width: 40px !important;
+            height: 40px !important;
+        }
+        .stFileUploader > div > button {
+            height: 50px;
+        }
+        .mobile-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px;
+            background-color: #f0f2f6;
+            border-radius: 8px;
+            margin-bottom: 10px;
+        }
+        .sidebar-toggle {
+            cursor: pointer;
+            font-size: 24px;
+        }
+        .chat-container {
+            height: calc(100vh - 180px);
+            overflow-y: auto;
+            padding: 10px 0;
+        }
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 10px;
+            background-color: white;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+        }
+        @media (max-width: 768px) {
+            .mobile-header {
+                position: sticky;
+                top: 0;
+                z-index: 100;
+            }
+        }
+    </style>
+    """, unsafe_allow_html=True)
     
-    with col2:
-        # Zone d'informations sur les fichiers
-        st.subheader("📎 Fichiers acceptés")
-        st.markdown("""
-        - **Images**: jpg, jpeg, png, gif
-        - **Documents**: pdf, txt, docx
-        - **Audio**: mp3, wav, ogg
-        - **Vidéo**: mp4, mov, avi
-        """)
+    # En-tête mobile avec bouton de menu
+    st.markdown("""
+    <div class="mobile-header">
+        <div class="sidebar-toggle" onclick="document.querySelector('[data-testid=\\"baseButton-secondary\\"]').click();">☰</div>
+        <h2 style="margin:0;">Mariam AI</h2>
+        <div style="width:24px;"></div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Affichage conditionnel de la barre latérale
+    if st.session_state.show_sidebar:
+        render_sidebar()
+    else:
+        # Bouton pour afficher la barre latérale
+        if st.button("☰ Menu", key="show_sidebar"):
+            st.session_state.show_sidebar = True
+            st.rerun()
+    
+    # Conteneur de messages
+    message_container = st.container(height=500, border=False)
+    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+    
+    with message_container:
+        # Afficher tous les messages
+        for message in st.session_state.messages:
+            with st.chat_message(message["role"]):
+                st.markdown(message["content"])
         
-        # Aperçu du fichier téléchargé
-        if uploaded_file:
-            st.subheader("🔍 Fichier téléchargé")
-            
+        # Afficher l'indicateur "en train d'écrire"
+        if st.session_state.thinking:
+            with st.chat_message("assistant"):
+                st.write("Mariam réfléchit...")
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Zone de fichier et saisie
+    st.markdown('<div class="input-container">', unsafe_allow_html=True)
+    
+    # Conteneur pour l'uploader et l'input
+    input_cols = st.columns([1, 4])
+    
+    with input_cols[0]:
+        # Zone de téléchargement simplifiée
+        uploaded_file = st.file_uploader(
+            "",
+            type=ALL_ACCEPTED_FILES,
+            label_visibility="collapsed",
+            key="mobile_uploader"
+        )
+    
+    with input_cols[1]:
+        # Input chat simplifié
+        user_input = st.chat_input(
+            "Message à Mariam...", 
+            disabled=st.session_state.thinking,
+            key="mobile_chat_input"
+        )
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Affichage du fichier uploadé
+    if uploaded_file:
+        with st.expander(f"📎 {uploaded_file.name}", expanded=True):
             file_ext = uploaded_file.name.split('.')[-1].lower()
             
             if file_ext in ACCEPTED_FILE_TYPES['image']:
-                st.image(uploaded_file, caption=uploaded_file.name, use_column_width=True)
+                st.image(uploaded_file, use_column_width=True)
             elif file_ext in ACCEPTED_FILE_TYPES['audio']:
-                st.audio(uploaded_file, format=f'audio/{file_ext}')
+                st.audio(uploaded_file)
             elif file_ext in ACCEPTED_FILE_TYPES['video']:
                 st.video(uploaded_file)
             else:
                 st.info(f"Fichier: {uploaded_file.name}")
-                file_details = {"Nom": uploaded_file.name, "Type": uploaded_file.type, "Taille": f"{uploaded_file.size / 1024:.1f} KB"}
-                st.json(file_details)
+    
+    # Traitement des messages
+    if user_input:
+        handle_message(user_input, uploaded_file)
+        st.rerun()
 
 # Fonction principale
 def main():
@@ -447,8 +470,8 @@ def main():
         st.error("Erreur d'initialisation de l'API. Veuillez vérifier votre clé API dans le fichier .env")
         st.stop()
     
-    # Afficher l'interface
-    render_ui()
+    # Afficher l'interface mobile responsive
+    render_mobile_ui()
 
 # Point d'entrée principal
 if __name__ == "__main__":