feat: Add UI to chat

ui/pyproject.toml

@@ -0,0 +1,19 @@
+[project]
+name = "ui"
+version = "0.1.0"
+description = ""
+authors = [
+    {name = "aserrador",email = "alejandro.ayala@onecluster.org"}
+]
+readme = "README.md"
+requires-python = ">=3.13"
+dependencies = [
+    "streamlit (>=1.54.0,<2.0.0)"
+]
+
+[tool.poetry]
+packages = [{include = "ui", from = "src"}]
+
+[build-system]
+requires = ["poetry-core>=2.0.0,<3.0.0"]
+build-backend = "poetry.core.masonry.api"

ui/src/ui/app.py

@@ -0,0 +1,40 @@
+import streamlit as st
+import random
+import time
+
+def response_generator():
+    response = random.choice(
+        [
+            "Hello there! How can I assist you today?",
+            "Hi, human! Is there anything I can help you with?",
+            "Do you need help?",
+        ]
+    )
+
+    for word in response.split():
+        yield word + " "
+        time.sleep(0.05)
+
+def main():
+    st.image("./assets/logo-naliia.png", width=100, caption="NaliiaBot")
+
+    if "messages" not in st.session_state:
+        st.session_state.messages = []
+
+    for message in st.session_state.messages:
+        with st.chat_message(message["role"]):
+            st.markdown(message["content"])
+
+
+    if prompt := st.chat_input("What is up?"):
+        st.chat_message("user").markdown(prompt)
+        st.session_state.messages.append({"role": "user", "content": prompt})
+
+        response = f"Echo: {prompt}"
+
+        with st.chat_message("assistant"):
+            response = st.write_stream(response_generator())
+
+        st.session_state.messages.append({"role": "assistant", "content": response})
+
+if __name__ == "__main__":    main()

ui/src/ui/app_old.py

@@ -0,0 +1,176 @@
+import streamlit as st
+from datetime import datetime
+
+# Configurar página
+st.set_page_config(
+    page_title="NaliiaBot Chat",
+    page_icon="💬",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Estilos personalizados
+st.markdown("""
+    <style>
+    .main {
+        padding: 2rem;
+    }
+    .chat-message {
+        padding: 1rem;
+        margin: 0.5rem 0;
+        border-radius: 0.5rem;
+    }
+    .user-message {
+        background-color: #d1e7dd;
+        text-color: black;
+        text-align: right;
+    }
+    .bot-message {
+        background-color: #f5f5f5;
+        text-color: black;
+        text-align: left;
+    }
+    .timestamp {
+        font-size: 0.8rem;
+        color: #666;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+def initialize_session_state():
+    """Inicializar estado de sesión"""
+    if "messages" not in st.session_state:
+        st.session_state.messages = []
+    if "chat_history" not in st.session_state:
+        st.session_state.chat_history = []
+
+def display_messages():
+    """Mostrar todos los mensajes del chat"""
+    for message in st.session_state.messages:
+        with st.container():
+            if message["role"] == "user":
+                st.markdown(
+                    f"""
+                    <div class="chat-message user-message">
+                        <p><strong>Tú:</strong> {message['content']}</p>
+                        <p class="timestamp">{message['timestamp']}</p>
+                    </div>
+                    """,
+                    unsafe_allow_html=True
+                )
+            else:
+                st.markdown(
+                    f"""
+                    <div class="chat-message bot-message">
+                        <p><strong>NaliiaBot:</strong> {message['content']}</p>
+                        <p class="timestamp">{message['timestamp']}</p>
+                    </div>
+                    """,
+                    unsafe_allow_html=True
+                )
+
+def get_bot_response(user_message):
+    """Generar respuesta del bot (placeholder)"""
+    # TODO: Integrar con tu modelo de IA/LLM
+    responses = {
+        "hola": "¡Hola! Bienvenido a NaliiaBot. ¿Cómo puedo ayudarte hoy?",
+        "ayuda": "Puedo ayudarte con: información, responder preguntas, y más. ¿En qué te puedo asistir?",
+        "default": f"Entiendo que dijiste: '{user_message}'. ¿Podrías darme más detalles?"
+    }
+    
+    user_lower = user_message.lower().strip()
+    for key, response in responses.items():
+        if key in user_lower:
+            return response
+    return responses["default"]
+
+def main():
+    # Inicializar estado
+    initialize_session_state()
+    
+    # Header
+    st.markdown("# NaliiaBot Chat")
+    st.markdown("---")
+    
+    # Sidebar
+    with st.sidebar:
+        st.markdown("### ⚙️ Configuración")
+        
+        # Modo de display
+        display_mode = st.radio(
+            "Modo de visualización:",
+            ("Completo", "Compacto"),
+            help="Selecciona cómo mostrar el chat"
+        )
+        
+        # Opciones
+        st.markdown("### 📋 Opciones")
+        if st.button("🗑️ Limpiar chat", use_container_width=True):
+            st.session_state.messages = []
+            st.session_state.chat_history = []
+            st.rerun()
+        
+        if st.button("💾 Guardar conversación", use_container_width=True):
+            st.success("Conversación guardada (función a implementar)")
+        
+        # Información
+        st.markdown("---")
+        st.markdown("### ℹ️ Información")
+        st.markdown(f"**Total de mensajes:** {len(st.session_state.messages)}")
+        st.markdown("**Versión:** 1.0.0")
+        st.markdown("**Estado:** En desarrollo")
+    
+    # Área principal de chat
+    col1, col2 = st.columns([4, 1])
+    
+    with col1:
+        st.markdown("### Conversación")
+    
+    # Mostrar mensajes
+    message_container = st.container()
+    with message_container:
+        display_messages()
+    
+    # Input del usuario
+    st.markdown("---")
+    
+    with st.form(key="message_form", clear_on_submit=True):
+        col1, col2 = st.columns([5, 1])
+        
+        with col1:
+            user_input = st.text_input(
+                "Escribe tu mensaje:",
+                placeholder="Escribe aquí y presiona Enter...",
+                label_visibility="collapsed"
+            )
+        
+        with col2:
+            send_button = st.form_submit_button("📤 Enviar", use_container_width=True)
+        
+        # Procesar entrada del usuario
+        if send_button and user_input.strip():
+            # Agregar mensaje del usuario
+            timestamp = datetime.now().strftime("%H:%M:%S")
+            st.session_state.messages.append({
+                "role": "user",
+                "content": user_input,
+                "timestamp": timestamp
+            })
+            
+            # Obtener respuesta del bot
+            bot_response = get_bot_response(user_input)
+            st.session_state.messages.append({
+                "role": "bot",
+                "content": bot_response,
+                "timestamp": datetime.now().strftime("%H:%M:%S")
+            })
+            
+            # Guardar en historial
+            st.session_state.chat_history.append({
+                "user": user_input,
+                "bot": bot_response,
+                "timestamp": timestamp
+            })
+
+if __name__ == "__main__":
+    main()