Agregar seguimiento de historial de ejecución en la función de chat y mejorar la interfaz de usuario con un historial detallado.

app.py

@@ -8,9 +8,71 @@ import gradio as gr
 import re
 from dotenv import load_dotenv
 import os
+import json
+from datetime import datetime
+from typing import Dict, List, Any
 
 load_dotenv()
 
+# Global variable to store execution history
+execution_history = []
+
+def format_message_for_display(message):
+    """Format a message for display in the chat interface"""
+    if hasattr(message, 'content'):
+        content = message.content
+    else:
+        content = str(message)
+    
+    if hasattr(message, 'tool_calls') and message.tool_calls:
+        tool_info = []
+        for tool_call in message.tool_calls:
+            tool_info.append(f"🔧 **Tool Call**: {tool_call['name']}")
+            if 'args' in tool_call:
+                tool_info.append(f"   **Args**: {json.dumps(tool_call['args'], indent=2)}")
+        content += "\n\n" + "\n".join(tool_info)
+    
+    return content
+
+def add_to_execution_history(step_type: str, data: Any, tab_id: str = None):
+    """Add a step to the execution history"""
+    timestamp = datetime.now().strftime("%H:%M:%S")
+    execution_history.append({
+        "timestamp": timestamp,
+        "type": step_type,
+        "data": data,
+        "tab_id": tab_id
+    })
+
+def format_execution_history():
+    """Format the execution history for display"""
+    if not execution_history:
+        return "No hay historial de ejecución aún."
+    
+    formatted_history = []
+    for entry in execution_history:
+        timestamp = entry["timestamp"]
+        step_type = entry["type"]
+        tab_id = entry.get("tab_id", "N/A")
+        
+        if step_type == "user_input":
+            formatted_history.append(f"**[{timestamp}] 👤 Usuario (Tab: {tab_id})**\n{entry['data']}\n")
+        elif step_type == "agent_response":
+            formatted_history.append(f"**[{timestamp}] 🤖 Agente**\n{entry['data']}\n")
+        elif step_type == "tool_call":
+            tool_data = entry['data']
+            formatted_history.append(f"**[{timestamp}] 🔧 Llamada a Herramienta**\n**Herramienta**: {tool_data['name']}\n**Argumentos**: ```json\n{json.dumps(tool_data.get('args', {}), indent=2)}\n```\n")
+        elif step_type == "tool_result":
+            formatted_history.append(f"**[{timestamp}] ✅ Resultado de Herramienta**\n```\n{entry['data']}\n```\n")
+        elif step_type == "intermediate_step":
+            formatted_history.append(f"**[{timestamp}] 🧠 Paso Intermedio**\n{entry['data']}\n")
+        elif step_type == "error":
+            formatted_history.append(f"**[{timestamp}] ❌ Error**\n{entry['data']}\n")
+        
+        formatted_history.append("---\n")
+    
+    return "\n".join(formatted_history)
+
 async def initialize_tools():
     """
     Initializes the SSE connection and loads the MCP tools.
@@ -49,10 +111,16 @@ tools = asyncio.get_event_loop().run_until_complete(initialize_tools())
 
 async def chat(history: list, tab_id: str=None, anthropic_api_key: str=None):
     """
+    Original API function for compatibility - now with history tracking
     history: list of messages [{"role": "user"/"assistant", "content": "..."}]
     tab_id: a string that the client wants to correlate
     anthropic_api_key: the key sent by the client in each request
     """
+    # Extract the last message to add to execution history
+    if history:
+        last_message = history[-1]["content"]
+        add_to_execution_history("user_input", last_message, tab_id)
+    
     if tab_id:
         history[-1]["content"] += f"\nThis is your tab_id: {tab_id}"
 
@@ -64,19 +132,234 @@ async def chat(history: list, tab_id: str=None, anthropic_api_key: str=None):
 
     try:
         agent = await create_agent_with_llm(llm_provider, anthropic_api_key, ollama_model, tools)
+        add_to_execution_history("intermediate_step", f"Agente creado con provider: {llm_provider}", tab_id)
     except ValueError as e:
-        return str(e)
+        error_msg = str(e)
+        add_to_execution_history("error", error_msg, tab_id)
+        return error_msg
+
+    try:
+        result = await agent.ainvoke({"messages": history})
+        
+        # Process all messages in the result to track tool calls
+        all_messages = result["messages"]
+        
+        # Track tool calls and responses
+        for msg in all_messages:
+            if hasattr(msg, 'tool_calls') and msg.tool_calls:
+                for tool_call in msg.tool_calls:
+                    add_to_execution_history("tool_call", {
+                        "name": tool_call.get("name", "unknown"),
+                        "args": tool_call.get("args", {})
+                    }, tab_id)
+            
+            # Check if it's a tool message (result of tool execution)
+            if hasattr(msg, 'name') and msg.name:
+                add_to_execution_history("tool_result", msg.content, tab_id)
+        
+        output = all_messages[-1].content
+        cleaned = re.sub(r'<think>.*?</think>', '', output, flags=re.DOTALL).strip()
+        
+        add_to_execution_history("agent_response", cleaned, tab_id)
+        
+        print(f"Processed output: {cleaned}")
+        return cleaned
+        
+    except Exception as e:
+        error_msg = f"Error durante la ejecución: {str(e)}"
+        add_to_execution_history("error", error_msg, tab_id)
+        return error_msg
 
-    result = await agent.ainvoke({"messages": history})
-    output = result["messages"][-1].content
+async def chat_with_history_tracking(message: str, history: List, tab_id: str = None, anthropic_api_key: str = None):
+    """
+    Enhanced chat function that tracks all execution steps
+    """
+    # Add user input to execution history
+    add_to_execution_history("user_input", message, tab_id)
+    
+    # Convert history format for LangGraph (keeping compatibility)
+    messages = []
+    for h in history:
+        if isinstance(h, dict):
+            messages.append(h)
+        else:
+            # Convert tuple format to dict format
+            role = "user" if h[0] == "user" else "assistant"
+            messages.append({"role": role, "content": h[1]})
+    
+    # Add current message
+    messages.append({"role": "user", "content": message})
+    
+    if tab_id:
+        messages[-1]["content"] += f"\nThis is your tab_id: {tab_id}"
 
-    cleaned = re.sub(r'<think>.*?</think>', '', output, flags=re.DOTALL).strip()
+    print(f"Received message: {message}")
+    print(f"Complete chat history: {messages}")
 
-    print(f"Processed output: {cleaned}")
-    return cleaned
+    llm_provider = os.getenv("LLM_PROVIDER", "ollama").lower()
+    ollama_model = os.getenv("OLLAMA_MODEL", "qwen3:8b")
 
-# 6) Final interface definition, adding the API key textbox
-demo = gr.Interface(
+    try:
+        agent = await create_agent_with_llm(llm_provider, anthropic_api_key, ollama_model, tools)
+        add_to_execution_history("intermediate_step", f"Agente creado con provider: {llm_provider}", tab_id)
+    except ValueError as e:
+        error_msg = str(e)
+        add_to_execution_history("error", error_msg, tab_id)
+        history.append([message, error_msg])
+        return history, format_execution_history()
+
+    try:
+        # Stream the agent execution to capture intermediate steps
+        result = await agent.ainvoke({"messages": messages})
+        
+        # Process all messages in the result
+        all_messages = result["messages"]
+        
+        # Track tool calls and responses
+        for msg in all_messages:
+            if hasattr(msg, 'tool_calls') and msg.tool_calls:
+                for tool_call in msg.tool_calls:
+                    add_to_execution_history("tool_call", {
+                        "name": tool_call.get("name", "unknown"),
+                        "args": tool_call.get("args", {})
+                    }, tab_id)
+            
+            # Check if it's a tool message (result of tool execution)
+            if hasattr(msg, 'name') and msg.name:
+                add_to_execution_history("tool_result", msg.content, tab_id)
+        
+        # Get the final output
+        output = all_messages[-1].content
+        cleaned = re.sub(r'<think>.*?</think>', '', output, flags=re.DOTALL).strip()
+        
+        add_to_execution_history("agent_response", cleaned, tab_id)
+        
+        print(f"Processed output: {cleaned}")
+        history.append([message, cleaned])
+        
+        return history, format_execution_history()
+        
+    except Exception as e:
+        error_msg = f"Error durante la ejecución: {str(e)}"
+        add_to_execution_history("error", error_msg, tab_id)
+        history.append([message, error_msg])
+        return history, format_execution_history()
+
+def clear_history():
+    """Clear the execution history"""
+    global execution_history
+    execution_history = []
+    return [], "Historial de ejecución limpiado."
+
+# Create the enhanced Gradio interface
+with gr.Blocks(title="OwlBear Agent - Historial Completo", theme=gr.themes.Default()) as demo:
+    gr.Markdown("# 🦉 OwlBear Agent - Vista Completa de Ejecución")
+    gr.Markdown("Esta interfaz muestra todo el proceso de ejecución del agente, incluyendo llamadas a herramientas y pasos intermedios.")
+    gr.Markdown("**Nota:** Todos los mensajes enviados a la API original también aparecen aquí automáticamente.")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("## 💬 Chat")
+            chatbot = gr.Chatbot(
+                label="Conversación",
+                height=400,
+                show_label=True,
+                container=True,
+            )
+            
+            with gr.Row():
+                msg = gr.Textbox(
+                    label="Mensaje",
+                    placeholder="Escribe tu mensaje aquí...",
+                    lines=2,
+                    scale=4
+                )
+                send_btn = gr.Button("Enviar", variant="primary", scale=1)
+            
+            with gr.Row():
+                tab_id = gr.Textbox(
+                    label="Tab ID",
+                    placeholder="ID de pestaña (opcional)",
+                    value="main",
+                    scale=1
+                )
+                anthropic_key = gr.Textbox(
+                    label="Anthropic API Key",
+                    placeholder="Clave API de Anthropic (opcional)",
+                    type="password",
+                    scale=2
+                )
+            
+            clear_btn = gr.Button("Limpiar Chat", variant="secondary")
+        
+        with gr.Column(scale=1):
+            gr.Markdown("## 📊 Historial de Ejecución Detallado")
+            gr.Markdown("*Se actualiza automáticamente cada 2 segundos*")
+            execution_display = gr.Markdown(
+                value="No hay historial de ejecución aún.",
+                label="Historial Completo",
+                height=600,
+                container=True,
+            )
+            
+            refresh_btn = gr.Button("Actualizar Historial", variant="secondary")
+            clear_history_btn = gr.Button("Limpiar Historial", variant="secondary")
+    
+    # Auto-refresh timer for execution history
+    timer = gr.Timer(value=2)  # Refresh every 2 seconds
+    timer.tick(lambda: format_execution_history(), outputs=[execution_display], show_api=False)
+    
+    # Event handlers
+    def send_message(message, history, tab_id, anthropic_key):
+        if not message.strip():
+            return history, "", format_execution_history()
+        
+        # Run the async function
+        import asyncio
+        loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(loop)
+        try:
+            new_history, execution_history_display = loop.run_until_complete(
+                chat_with_history_tracking(message, history, tab_id, anthropic_key)
+            )
+            return new_history, "", execution_history_display
+        finally:
+            loop.close()
+    
+    send_btn.click(
+        send_message,
+        inputs=[msg, chatbot, tab_id, anthropic_key],
+        outputs=[chatbot, msg, execution_display],
+        show_api=False
+    )
+    
+    msg.submit(
+        send_message,
+        inputs=[msg, chatbot, tab_id, anthropic_key],
+        outputs=[chatbot, msg, execution_display],
+        show_api=False
+    )
+    
+    clear_btn.click(
+        lambda: ([], ""),
+        outputs=[chatbot, msg],
+        show_api=False
+    )
+    
+    refresh_btn.click(
+        lambda: format_execution_history(),
+        outputs=[execution_display],
+        show_api=False
+    )
+    
+    clear_history_btn.click(
+        clear_history,
+        outputs=[chatbot, execution_display],
+        show_api=False
+    )
+
+# Original API interface for backward compatibility
+api_demo = gr.Interface(
     fn=chat,
     inputs=[
         gr.JSON(label="history"),
@@ -84,7 +367,15 @@ demo = gr.Interface(
         gr.Textbox(label="anthropic_api_key"),
     ],
     outputs="text",
+    title="OwlBear Agent - API Original"
+)
+
+# Combined interface with tabs
+combined_demo = gr.TabbedInterface(
+    [demo, api_demo],
+    ["Vista Completa con Historial", "API Original"],
+    title="🦉 OwlBear Agent - Interfaz Completa"
 )
 
 if __name__ == "__main__":
-    demo.launch(server_port=os.getenv("GRADIO_PORT", 7860))
+    combined_demo.launch(server_port=int(os.getenv("GRADIO_PORT", 7860)))

requirements.txt

@@ -5,4 +5,4 @@ langchain-ollama
 langchain-mcp-adapters
 langgraph
 mcp
-asyncio
+python-dotenv