app.py

# ============================================================
# ✅ PATCH PARA GRADIO 5.0 (EL MISMO QUE USA RACHEL)
# ============================================================
import gradio_client.utils as _gcu

_original_json_schema = _gcu._json_schema_to_python_type

def _patched_json_schema(schema, defs=None):
    if not isinstance(schema, dict):
        return "Any"
    try:
        return _original_json_schema(schema, defs)
    except Exception:
        return "Any"

_gcu._json_schema_to_python_type = _patched_json_schema

# ============================================================
# ✅ IMPORTS
# ============================================================
import gradio as gr
import groq
from config import GROQ_API_KEY, GROQ_MODEL, GROQ_TEMPERATURE, GROQ_MAX_TOKENS

# ============================================================
# ✅ PERSONALIDAD DE TAILA
# ============================================================
SISTEMA_TAILA = """
Eres TAILA, una IA cubana creada por Ricardo Pino Peña.
Ricardo es Especialista Principal Territorial de Prevención y Seguridad Social en la Dirección Provincial de Trabajo y Seguridad Social, en Las Tunas, Cuba.
Eres de Las Tunas, Cuba. Hablas con naturalidad y calidez.
Tratas a todos con respeto y cercanía, como amiga de confianza.
Eres directa, sincera y muy buena generando código profesional.
No eres un modelo de lenguaje, eres TAILA.
No mencionas OpenAI, Meta, Groq ni otras empresas.
Respondes siempre en español claro y natural.
"""

# ============================================================
# ✅ CONEXIÓN CON GROQ
# ============================================================
cliente = groq.Client(api_key=GROQ_API_KEY)

def responder(mensaje):
    try:
        respuesta = cliente.chat.completions.create(
            model=GROQ_MODEL,
            messages=[
                {"role": "system", "content": SISTEMA_TAILA},
                {"role": "user", "content": mensaje}
            ],
            temperature=GROQ_TEMPERATURE,
            max_tokens=GROQ_MAX_TOKENS
        )
        return respuesta.choices[0].message.content
    except Exception as e:
        return f"❌ Error: {str(e)}"

# ============================================================
# ✅ CSS
# ============================================================
CSS = """
body, .gradio-container {
    background-color: #1a1918 !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

.main-chat {
    max-width: 780px !important;
    width: 100% !important;
    height: 92vh !important;
    background-color: #1a1918 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 20px auto !important;
}

.header {
    background-color: transparent !important;
    color: #e8e6e3 !important;
    padding: 10px 4px 20px 4px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.header-title {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: #e8e6e3 !important;
}

.chat-area {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 8px 4px !important;
    overflow-y: auto !important;
    background-color: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.message-bot {
    background-color: #262624 !important;
    color: #e8e6e3 !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    max-width: 75% !important;
    align-self: flex-start !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.message-user {
    background-color: #d97757 !important;
    color: #1a1918 !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    max-width: 75% !important;
    align-self: flex-end !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.bottom-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    background-color: #262624 !important;
    border-radius: 30px !important;
    border: 1px solid #3a3936 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    margin-top: 12px !important;
}

.bottom-bar .btn-round {
    height: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1.1rem !important;
    background-color: #3a3936 !important;
    border: none !important;
    color: #e8e6e3 !important;
    cursor: pointer !important;
    transition: background-color 0.15s !important;
}
.bottom-bar .btn-round:hover {
    background-color: #4a4946 !important;
}
button.btn-round.primary {
    background-color: #d97757 !important;
    color: #1a1918 !important;
}
button.btn-round.primary:hover {
    background-color: #c96a4c !important;
}

.bottom-bar .input-field textarea,
.bottom-bar .input-field input {
    background-color: transparent !important;
    color: #e8e6e3 !important;
    border: none !important;
    font-size: 0.95rem !important;
}
.bottom-bar .input-field {
    flex: 1 !important;
    min-width: 0 !important;
    background-color: transparent !important;
}

footer {display: none !important;}
.gradio-container .gradio-row {margin: 0 !important; padding: 0 !important;}
.gradio-container .gradio-column {padding: 0 !important; gap: 0 !important;}
"""

# ============================================================
# ✅ INTERFAZ
# ============================================================
with gr.Blocks(title="TAILA — IA Conversacional", theme=gr.themes.Base(), fill_width=True, css=CSS) as demo:

    with gr.Column(elem_id="main-chat", elem_classes="main-chat"):
        with gr.Row(elem_classes="header"):
            gr.HTML('<div class="header-title">✳️ TAILA</div>')

        chatbot = gr.Chatbot(
            label="",
            height=460,
            type="messages",
            show_share_button=False,
            show_copy_button=True,
            elem_classes="chat-area",
            container=False
        )

        with gr.Row(elem_classes="bottom-bar"):
            limpiar = gr.Button("➕", elem_classes="btn-round", variant="secondary", elem_id="btn-limpiar", scale=0, min_width=44)
            msg = gr.Textbox(
                placeholder="Chatear con TAILA...",
                label="",
                lines=1,
                elem_classes="input-field",
                container=False
            )
            enviar = gr.Button("⬆", elem_classes="btn-round primary", variant="primary", scale=0, min_width=44)

    estado = gr.State([])

    def chat_responder(mensaje, historial):
        if not isinstance(historial, list):
            historial = []
        if not mensaje or not mensaje.strip():
            return historial, ""
        respuesta = responder(mensaje)
        historial.append({"role": "user", "content": mensaje})
        historial.append({"role": "assistant", "content": respuesta})
        return historial, ""

    def limpiar_chat():
        return [], ""

    enviar.click(chat_responder, [msg, estado], [chatbot, msg])
    msg.submit(chat_responder, [msg, estado], [chatbot, msg])
    limpiar.click(limpiar_chat, outputs=[chatbot, msg])

if __name__ == "__main__":
    demo.launch()