Update app.py

app.py

@@ -1,656 +1,684 @@
-
 import streamlit as st
 import pandas as pd
-from typing import Union, List, Dict
+from typing import Union, List, Dict, Optional
 from groq import Groq
 import os
 from duckduckgo_search import DDGS
+import json
+from datetime import datetime, timedelta
+import time
 
 # Set page configuration with fullscreen layout and custom theme
 st.set_page_config(
-    page_title="Z-Alpha News Analysis",
+    page_title="SmolAgent Travel Planner",
     layout="wide",
     initial_sidebar_state="collapsed",
-    page_icon="🔍"
+    page_icon="✈️"
 )
 
-# Execute JavaScript to make the app fullscreen on load
-st.markdown("""
-<script>
-    document.addEventListener('DOMContentLoaded', (event) => {
-        // Request fullscreen on page load
-        document.documentElement.requestFullscreen().catch(e => {
-            console.log("Fullscreen request failed: ", e);
-        });
-    });
-</script>
-""", unsafe_allow_html=True)
-
-# Enhanced CSS for a more beautiful Google DeepMind-inspired styling with green background
+# Enhanced CSS for a beautiful travel-themed styling
 st.markdown("""
 <style>
     /* Base styles */
     html, body, .stApp, .main {
-        background-color: #000000 !important;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
         color: #ffffff !important;
     }
-
+    
     /* Typography */
     h1, h2, h3, h4, h5, h6 {
-        color: #00ff00 !important;
-        font-family: 'Courier New', monospace !important;
-    }
-
-    p, div, span {
-        color: #cccccc !important;
+        color: #ffffff !important;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     }
-
+    
     /* Cards and containers */
     .card {
-        background-color: #0a0a0a !important;
-        border: 1px solid #00ff00 !important;
-        border-radius: 4px !important;
-        box-shadow: 0 0 15px rgba(0, 255, 0, 0.2) !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        backdrop-filter: blur(10px) !important;
+        border: 1px solid rgba(255, 255, 255, 0.2) !important;
+        border-radius: 15px !important;
+        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37) !important;
+        padding: 2rem !important;
+        margin-bottom: 2rem !important;
     }
-
-    /* Analysis results */
-    .analysis-result {
-        background-color: #121212 !important;
-        border-left: 4px solid #00ff00 !important;
-        color: #ffffff !important;
-        font-family: 'Courier New', monospace !important;
+    
+    /* Agent status cards */
+    .agent-card {
+        background: rgba(255, 255, 255, 0.15) !important;
+        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        border-radius: 12px !important;
         padding: 1.5rem !important;
+        margin: 1rem 0 !important;
+        backdrop-filter: blur(5px) !important;
     }
-
+    
     /* Input fields */
-    .stTextInput input {
-        background-color: #121212 !important;
-        color: #00ff00 !important;
-        border: 1px solid #00ff00 !important;
-        border-radius: 0 !important;
+    .stTextInput input, .stTextArea textarea, .stSelectbox div[data-baseweb="select"] {
+        background: rgba(255, 255, 255, 0.2) !important;
+        color: #ffffff !important;
+        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        border-radius: 8px !important;
     }
-
+    
+    .stTextInput input::placeholder, .stTextArea textarea::placeholder {
+        color: rgba(255, 255, 255, 0.7) !important;
+    }
+    
     /* Buttons */
     .stButton > button {
-        background: linear-gradient(45deg, #00ff00, #003300) !important;
-        color: #000000 !important;
+        background: linear-gradient(45deg, #ff6b6b, #ff8e8e) !important;
+        color: #ffffff !important;
         border: none !important;
-        border-radius: 0 !important;
-        font-family: 'Courier New', monospace !important;
+        border-radius: 25px !important;
         font-weight: bold !important;
+        padding: 0.75rem 2rem !important;
         transition: all 0.3s ease !important;
+        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4) !important;
     }
-
+    
     .stButton > button:hover {
-        box-shadow: 0 0 20px #00ff00 !important;
-        transform: scale(1.05) !important;
+        transform: translateY(-2px) !important;
+        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6) !important;
     }
-
-    /* Source items */
-    .source-item {
-        border-bottom: 1px solid #333333 !important;
-        padding: 1rem 0 !important;
+    
+    /* Progress indicators */
+    .agent-status {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px;
+        border-radius: 8px;
+        margin: 5px 0;
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(5px);
     }
-
-    .source-title {
-        color: #00ff00 !important;
-        font-family: 'Courier New', monospace !important;
+    
+    .status-working {
+        border-left: 4px solid #4CAF50;
     }
-
-    /* Links */
-    a {
-        color: #00ff00 !important;
-        text-decoration: underline !important;
+    
+    .status-complete {
+        border-left: 4px solid #2196F3;
     }
-
-    a:hover {
-        color: #99ff99 !important;
+    
+    .status-error {
+        border-left: 4px solid #F44336;
     }
-
-    /* Status indicators */
-    .status-badge {
-        background-color: #002200 !important;
-        color: #00ff00 !important;
-        border: 1px solid #00ff00 !important;
+    
+    /* Spinning animation */
+    .spinner {
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        border-top: 2px solid #ffffff;
+        width: 20px;
+        height: 20px;
+        animation: spin 1s linear infinite;
     }
-
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    
+    /* Results styling */
+    .travel-result {
+        background: rgba(255, 255, 255, 0.05) !important;
+        border-left: 4px solid #4CAF50 !important;
+        border-radius: 8px !important;
+        padding: 1.5rem !important;
+        margin: 1rem 0 !important;
+    }
+    
     /* Tabs */
     .stTabs [aria-selected="true"] {
-        background-color: #121212 !important;
-        color: #00ff00 !important;
-        border-bottom: 2px solid #00ff00 !important;
+        background: rgba(255, 255, 255, 0.2) !important;
+        color: #ffffff !important;
+        border-bottom: 2px solid #ff6b6b !important;
     }
-
+    
     /* Logo styling */
     .logo-text {
-        background: linear-gradient(90deg, #00ff00, #99ff99) !important;
+        font-size: 3rem !important;
+        background: linear-gradient(45deg, #FFD700, #FFA500) !important;
         -webkit-background-clip: text !important;
         -webkit-text-fill-color: transparent !important;
-        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
     }
-
-    /* Icons */
-    .float-icon svg {
-        filter: drop-shadow(0 0 5px #00ff00);
-    }
-
-    /* Scrollbar styling */
-    ::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    ::-webkit-scrollbar-track {
-        background: #000000;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: #00ff00;
-        border-radius: 4px;
-    }
-
-    /* Dropdown menus */
-    .stSelectbox div[data-baseweb="select"] div {
-        background-color: #121212 !important;
-        color: #00ff00 !important;
-        border: 1px solid #00ff00 !important;
-        border-radius: 0 !important;
-    }
-
-    /* Sliders */
-    .stSlider .thumb {
-        background-color: #00ff00 !important;
-    }
-
-    .stSlider .track {
-        background-color: #003300 !important;
+    
+    /* Success indicators */
+    .success-badge {
+        background: linear-gradient(45deg, #4CAF50, #66BB6A) !important;
+        color: white !important;
+        padding: 0.5rem 1rem !important;
+        border-radius: 20px !important;
+        font-size: 0.9rem !important;
     }
 </style>
 """, unsafe_allow_html=True)
 
 
-class DuckDuckGoSearch:
+class SmolAgent:
     """
-    Custom DuckDuckGo search implementation with robust error handling and result processing.
-    Uses the duckduckgo_search library to fetch and format news results.
+    Base agent class implementing the smol agent architecture.
+    Each agent has a specific role and can collaborate with others.
     """
+    def __init__(self, name: str, role: str, llm_client, search_tool):
+        self.name = name
+        self.role = role
+        self.llm = llm_client
+        self.search = search_tool
+        self.status = "idle"
+        self.last_result = None
+        
+    def set_status(self, status: str, message: str = ""):
+        self.status = status
+        self.status_message = message
+        
+    def execute_task(self, task_prompt: str, search_query: str = None) -> str:
+        """Execute a task with optional web search"""
+        try:
+            self.set_status("working", f"Processing {self.role.lower()} task...")
+            
+            # Perform search if needed
+            search_results = ""
+            if search_query:
+                self.set_status("working", "Searching for relevant information...")
+                search_results = self.search(search_query)
+                
+            # Create enhanced prompt with search results
+            enhanced_prompt = f"""
+            Role: {self.role}
+            Task: {task_prompt}
+            
+            {f"Search Results: {search_results}" if search_results else ""}
+            
+            Please provide a detailed response based on your role as {self.role}.
+            """
+            
+            # Get response from LLM
+            self.set_status("working", "Generating response...")
+            result = self.llm(enhanced_prompt)
+            
+            self.last_result = result
+            self.set_status("complete", "Task completed successfully")
+            return result
+            
+        except Exception as e:
+            self.set_status("error", f"Error: {str(e)}")
+            return f"Error in {self.name}: {str(e)}"
+
+
+class TravelSearchTool:
+    """Enhanced search tool specifically designed for travel planning"""
     def __init__(self):
-        # Initialize the DuckDuckGo search session
         self.ddgs = DDGS()
     
-    def __call__(self, query: str, max_results: int = 5) -> str:
+    def __call__(self, query: str, search_type: str = "general", max_results: int = 5) -> str:
         try:
-            # Perform the search and get results
-            # The news method is more appropriate for recent news analysis
-            search_results = list(self.ddgs.news(
+            # Customize search based on type
+            if search_type == "flights":
+                query = f"best flight deals {query} 2024 booking sites"
+            elif search_type == "hotels":
+                query = f"best hotels accommodation {query} reviews booking"
+            elif search_type == "activities":
+                query = f"top attractions activities things to do {query} tourist guide"
+            elif search_type == "restaurants":
+                query = f"best restaurants food dining {query} local cuisine"
+            elif search_type == "weather":
+                query = f"weather forecast climate {query} best time to visit"
+            
+            # Perform search
+            search_results = list(self.ddgs.text(
                 query,
                 max_results=max_results,
-                region='wt-wt',  # Worldwide results
+                region='wt-wt',
                 safesearch='on'
             ))
             
             if not search_results:
-                return "No results found. Try modifying your search query."
+                return "No relevant information found. Please try a different search."
             
-            # Format the results into a readable string
+            # Format results
             formatted_results = []
             for idx, result in enumerate(search_results, 1):
-                # Extract available fields with fallbacks for missing data
-                title = result.get('title', 'No title available')
-                snippet = result.get('body', result.get('snippet', 'No description available'))
-                source = result.get('source', 'Unknown source')
-                url = result.get('url', result.get('link', 'No link available'))
-                date = result.get('date', 'Date not available')
+                title = result.get('title', 'No title')
+                snippet = result.get('body', 'No description')
+                url = result.get('href', 'No URL')
                 
-                # Format each result with available information
                 formatted_results.append(
-                    f"{idx}. Title: {title}\n"
-                    f"   Date: {date}\n"
-                    f"   Source: {source}\n"
-                    f"   Summary: {snippet}\n"
-                    f"   URL: {url}\n"
+                    f"{idx}. {title}\n"
+                    f"   Description: {snippet}\n"
+                    f"   Source: {url}\n"
                 )
             
             return "\n".join(formatted_results)
-        
+            
         except Exception as e:
-            # Provide detailed error information for debugging
-            error_msg = f"Search error: {str(e)}\nTry again with a different search term or check your internet connection."
-            print(f"DuckDuckGo search error: {str(e)}")  # For logging
-            return error_msg
+            return f"Search error: {str(e)}"
+
 
 class GroqLLM:
-    """
-    LLM interface using Groq's LLama model.
-    Handles API communication and response processing.
-    """
-    def __init__(self, model_name="llama-3.1-8B-Instant"):
+    """Enhanced LLM client with travel-specific optimizations"""
+    def __init__(self, model_name="llama-3.1-70b-versatile"):
         self.client = Groq(api_key=os.environ.get("GROQ_API_KEY"))
         self.model_name = model_name
     
     def __call__(self, prompt: Union[str, dict, List[Dict]]) -> str:
         try:
-            # Convert prompt to string if it's a complex structure
-            prompt_str = str(prompt) if isinstance(prompt, (dict, list)) else prompt
-            
-            # Make API call to Groq
             completion = self.client.chat.completions.create(
                 model=self.model_name,
                 messages=[{
                     "role": "user",
-                    "content": prompt_str
+                    "content": str(prompt)
                 }],
                 temperature=0.7,
-                max_tokens=1024,
+                max_tokens=2048,
                 stream=False
             )
             
-            return completion.choices[0].message.content if completion.choices else "Error: No response generated"
+            return completion.choices[0].message.content if completion.choices else "No response generated"
+            
         except Exception as e:
-            error_msg = f"Error generating response: {str(e)}"
-            print(error_msg)  # For logging
-            return error_msg
+            return f"LLM Error: {str(e)}"
 
-def create_analysis_prompt(topic: str, search_results: str) -> str:
-    """
-    Creates a detailed prompt for news analysis, structuring the request
-    to get comprehensive and well-organized results from the LLM.
-    """
-    return f"""Analyze the following news information about {topic}. 
-    Search Results: {search_results}
-    
-    Please provide a comprehensive analysis including:
-    1. Key Points Summary:
-       - Main events and developments
-       - Critical updates and changes
-    
-    2. Stakeholder Analysis:
-       - Primary parties involved
-       - Their roles and positions
-    
-    3. Impact Assessment:
-       - Immediate implications
-       - Potential long-term effects
-       - Broader context and significance
-    
-    4. Multiple Perspectives:
-       - Different viewpoints on the issue
-       - Areas of agreement and contention
-    
-    5. Fact Check & Reliability:
-       - Verification of major claims
-       - Consistency across sources
-       - Source credibility assessment
-    
-    Please format the analysis in a clear, journalistic style with section headers."""
 
-def log_agent_activity(prompt: str, result: str, agent_name: str):
-    """
-    Creates an expandable log of agent activities in the Streamlit interface
-    for transparency and debugging purposes.
-    """
-    with st.expander("🔍 View Agent Activity Log"):
-        st.markdown("<h4>Agent Activity Log</h4>", unsafe_allow_html=True)
-        st.markdown(f"<p><strong>Agent:</strong> {agent_name}</p>", unsafe_allow_html=True)
+class TravelPlannerSystem:
+    """Main orchestrator for the travel planning system"""
+    def __init__(self):
+        self.llm = GroqLLM()
+        self.search_tool = TravelSearchTool()
+        self.agents = self._initialize_agents()
+        
+    def _initialize_agents(self) -> Dict[str, SmolAgent]:
+        """Initialize specialized travel agents"""
+        return {
+            "destination_expert": SmolAgent(
+                "Destination Expert",
+                "Travel destination researcher and recommender",
+                self.llm, self.search_tool
+            ),
+            "itinerary_planner": SmolAgent(
+                "Itinerary Planner", 
+                "Trip itinerary creator and scheduler",
+                self.llm, self.search_tool
+            ),
+            "accommodation_specialist": SmolAgent(
+                "Accommodation Specialist",
+                "Hotel and lodging finder and recommender",
+                self.llm, self.search_tool
+            ),
+            "activity_curator": SmolAgent(
+                "Activity Curator",
+                "Tourist attraction and activity recommender",
+                self.llm, self.search_tool
+            ),
+            "budget_advisor": SmolAgent(
+                "Budget Advisor",
+                "Travel cost estimator and budget optimizer",
+                self.llm, self.search_tool
+            )
+        }
+    
+    def create_travel_plan(self, destination: str, duration: str, budget: str, 
+                          travel_style: str, interests: str) -> Dict[str, str]:
+        """Create a comprehensive travel plan using multiple agents"""
+        
+        # Prepare base context for all agents
+        base_context = f"""
+        Destination: {destination}
+        Duration: {duration}
+        Budget: {budget}
+        Travel Style: {travel_style}
+        Interests: {interests}
+        """
+        
+        results = {}
+        
+        # Agent 1: Destination Research
+        dest_task = f"""
+        Research {destination} as a travel destination. Include:
+        - Best time to visit and current weather
+        - Cultural highlights and local customs
+        - Transportation options
+        - Safety and travel requirements
+        - Local currency and tipping customs
+        
+        Context: {base_context}
+        """
+        results["destination_info"] = self.agents["destination_expert"].execute_task(
+            dest_task, f"{destination} travel guide weather best time visit"
+        )
+        
+        # Agent 2: Accommodation Research
+        accommodation_task = f"""
+        Find accommodation options for {destination}. Consider:
+        - Hotels, hostels, and alternative lodging based on budget: {budget}
+        - Location preferences for {travel_style} travelers
+        - Amenities and reviews
+        - Booking tips and best deals
+        
+        Context: {base_context}
+        """
+        results["accommodation"] = self.agents["accommodation_specialist"].execute_task(
+            accommodation_task, f"{destination} hotels accommodation {budget} {travel_style}"
+        )
+        
+        # Agent 3: Activities and Attractions
+        activity_task = f"""
+        Curate activities and attractions for {destination} based on interests: {interests}
+        Include:
+        - Must-see attractions and hidden gems
+        - Activities matching {travel_style} style
+        - Local experiences and cultural activities
+        - Restaurant and dining recommendations
+        
+        Context: {base_context}
+        """
+        results["activities"] = self.agents["activity_curator"].execute_task(
+            activity_task, f"{destination} attractions activities {interests} restaurants"
+        )
+        
+        # Agent 4: Itinerary Planning
+        itinerary_task = f"""
+        Create a detailed {duration} itinerary for {destination}. Include:
+        - Day-by-day schedule optimized for {travel_style} travelers
+        - Time management and logistics
+        - Mix of planned activities and free time
+        - Transportation between locations
         
-        st.markdown("<div style='background-color: #f8f9fa; padding: 1rem; border-radius: 8px; margin-bottom: 1rem;'>", unsafe_allow_html=True)
-        st.markdown("<p><strong>Input Prompt:</strong></p>", unsafe_allow_html=True)
-        st.code(prompt, language="text")
-        st.markdown("</div>", unsafe_allow_html=True)
+        Use information about accommodations and activities to create a cohesive plan.
+        Context: {base_context}
+        """
+        results["itinerary"] = self.agents["itinerary_planner"].execute_task(
+            itinerary_task, f"{destination} {duration} itinerary travel schedule"
+        )
         
-        st.markdown("<div style='background-color: #f8f9fa; padding: 1rem; border-radius: 8px;'>", unsafe_allow_html=True)
-        st.markdown("<p><strong>Analysis Output:</strong></p>", unsafe_allow_html=True)
-        st.code(result, language="text")
-        st.markdown("</div>", unsafe_allow_html=True)
+        # Agent 5: Budget Planning
+        budget_task = f"""
+        Create a detailed budget breakdown for the {destination} trip:
+        - Accommodation costs based on research
+        - Transportation (flights, local transport)
+        - Food and dining expenses
+        - Activities and attraction fees
+        - Miscellaneous expenses and emergency fund
+        - Money-saving tips and deals
+        
+        Context: {base_context}
+        """
+        results["budget_breakdown"] = self.agents["budget_advisor"].execute_task(
+            budget_task, f"{destination} travel costs budget {duration} {budget}"
+        )
+        
+        return results
+
+
+def display_agent_status(agents: Dict[str, SmolAgent]):
+    """Display the status of all agents"""
+    st.markdown("### 🤖 Agent Status Dashboard")
+    
+    cols = st.columns(len(agents))
+    for idx, (name, agent) in enumerate(agents.items()):
+        with cols[idx]:
+            status_class = f"status-{agent.status}" if hasattr(agent, 'status') else "status-idle"
+            status_message = getattr(agent, 'status_message', 'Ready')
+            
+            if agent.status == "working":
+                icon = '<div class="spinner"></div>'
+            elif agent.status == "complete":
+                icon = '✅'
+            elif agent.status == "error":
+                icon = '❌'
+            else:
+                icon = '⏸️'
+            
+            st.markdown(f"""
+            <div class="agent-status {status_class}">
+                {icon} <strong>{agent.name}</strong><br>
+                <small>{status_message}</small>
+            </div>
+            """, unsafe_allow_html=True)
+
 
-# Animated header with branded logo and description
+# Main Application Interface
 st.markdown("""
-<div class="card" style="padding-bottom: 1.5rem;">
-    <div style="display: flex; align-items: center; gap: 1.5rem;">
-        <div class="float-icon" style="text-align: center;">
-            <svg width="70" height="70" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19.5 9.5l-7.5-7.5-7.5 7.5m15 0v8c0 1.1-.9 2-2 2h-11c-1.1 0-2-.9-2-2v-8" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <circle cx="12" cy="12" r="3" stroke="#1a73e8" stroke-width="2"/>
-                <path d="M12 15v3" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-        </div>
-        <div style="flex: 1;">
-            <span class="logo-text">Z-Agent News Analysis</span>
-            <p style="color: #5f6368; font-size: 1.1rem; margin-top: 0.5rem;">
-                Intelligent news analysis powered by AI. Get comprehensive insights and multiple perspectives on any topic.
-            </p>
-        </div>
-    </div>
+<div class="card" style="text-align: center; padding: 3rem;">
+    <h1 class="logo-text">✈️ SmolAgent Travel Planner</h1>
+    <p style="font-size: 1.2rem; opacity: 0.9; margin-top: 1rem;">
+        AI-powered travel planning with specialized agents working together to create your perfect trip
+    </p>
 </div>
 """, unsafe_allow_html=True)
 
-# Main content area
-st.markdown('<div class="card">', unsafe_allow_html=True)
-
-# Initialize the components
+# Initialize the system
 try:
-    # Initialize LLM and search tool
-    llm = GroqLLM()
-    search_tool = DuckDuckGoSearch()
-    
-    # Input section with enhanced design
-    st.markdown("<h2 style='margin-top: 0;'>News Topic Analysis</h2>", unsafe_allow_html=True)
+    if 'travel_system' not in st.session_state:
+        st.session_state.travel_system = TravelPlannerSystem()
     
-    news_topic = st.text_input(
-        "What news topic would you like to analyze?",
-        placeholder="E.g., Recent developments in renewable energy, Tech industry layoffs, Global climate agreements...",
-        key="news_topic_input"
-    )
+    travel_system = st.session_state.travel_system
     
-    # Analysis options in a cleaner layout
-    st.markdown("<div style='margin-top: 1.5rem;'></div>", unsafe_allow_html=True)
-    st.markdown("<h3 style='margin-bottom: 1rem;'>Analysis Options</h3>", unsafe_allow_html=True)
+    # Input Section
+    st.markdown('<div class="card">', unsafe_allow_html=True)
+    st.markdown("## 🌍 Plan Your Perfect Trip")
     
-    col1, col2, col3 = st.columns([2, 2, 2])
+    col1, col2 = st.columns(2)
     
     with col1:
-        st.markdown("<div style='background-color: #f8f9fa; padding: 1rem; border-radius: 12px; height: 100%;'>", unsafe_allow_html=True)
-        st.markdown("<p style='font-weight: 600; color: #202124; margin-bottom: 0.5rem;'>Search Depth</p>", unsafe_allow_html=True)
-        search_depth = st.slider(
-            "##",
-            min_value=3,
-            max_value=10,
-            value=5,
-            help="Number of news sources to analyze",
-            key="search_depth_slider",
-            label_visibility="collapsed"
+        destination = st.text_input(
+            "🎯 Where do you want to go?",
+            placeholder="e.g., Tokyo, Japan or Paris, France",
+            help="Enter your dream destination"
+        )
+        
+        duration = st.selectbox(
+            "📅 Trip Duration",
+            ["3 days", "1 week", "2 weeks", "1 month", "Custom"],
+            help="How long will you be traveling?"
         )
-        st.markdown("<p style='color: #5f6368; font-size: 0.9rem;'>Number of sources: " + str(search_depth) + "</p>", unsafe_allow_html=True)
-        st.markdown("</div>", unsafe_allow_html=True)
+        
+        if duration == "Custom":
+            duration = st.text_input("Specify custom duration:", placeholder="e.g., 10 days")
     
     with col2:
-        st.markdown("<div style='background-color: #f8f9fa; padding: 1rem; border-radius: 12px; height: 100%;'>", unsafe_allow_html=True)
-        st.markdown("<p style='font-weight: 600; color: #202124; margin-bottom: 0.5rem;'>Analysis Type</p>", unsafe_allow_html=True)
-        analysis_type = st.selectbox(
-            "##",
-            ["Comprehensive", "Quick Summary", "Technical", "Simplified"],
-            help="Choose the style and depth of analysis",
-            key="analysis_type_select",
-            label_visibility="collapsed"
+        budget = st.selectbox(
+            "💰 Budget Range",
+            ["Budget ($50-100/day)", "Mid-range ($100-250/day)", "Luxury ($250+/day)", "No specific budget"],
+            help="What's your daily budget range?"
         )
-        st.markdown("<p style='color: #5f6368; font-size: 0.9rem;'>Selected: " + analysis_type + "</p>", unsafe_allow_html=True)
-        st.markdown("</div>", unsafe_allow_html=True)
-    
-    with col3:
-        st.markdown("<div style='background-color: #f8f9fa; padding: 1rem; border-radius: 12px; height: 100%;'>", unsafe_allow_html=True)
-        st.markdown("<p style='font-weight: 600; color: #202124; margin-bottom: 0.5rem;'>Time Period</p>", unsafe_allow_html=True)
-        time_period = st.selectbox(
-            "##",
-            ["Last 7 days", "Last 30 days", "Last 24 hours"],
-            help="How recent should the news be",
-            key="time_period_select",
-            label_visibility="collapsed"
+        
+        travel_style = st.selectbox(
+            "🎒 Travel Style",
+            ["Adventure & Outdoor", "Cultural & Historical", "Relaxation & Spa", "Nightlife & Entertainment", 
+             "Food & Culinary", "Family-Friendly", "Business Travel", "Solo Traveler", "Romantic Getaway"],
+            help="What kind of traveler are you?"
         )
-        st.markdown("<p style='color: #5f6368; font-size: 0.9rem;'>Selected: " + time_period + "</p>", unsafe_allow_html=True)
-        st.markdown("</div>", unsafe_allow_html=True)
     
-    # Generate analysis button
-    st.markdown("<div style='margin-top: 2rem;'></div>", unsafe_allow_html=True)
+    interests = st.text_area(
+        "🎨 Interests & Preferences",
+        placeholder="Tell us about your interests: art, food, history, adventure, shopping, nightlife, nature, etc.",
+        help="The more specific you are, the better recommendations we can provide!"
+    )
     
-    col1, col2, col3 = st.columns([2, 2, 2])
+    st.markdown('</div>', unsafe_allow_html=True)
     
+    # Planning Button
+    col1, col2, col3 = st.columns([1, 2, 1])
     with col2:
-        analyze_button = st.button("ANALYZE NEWS")
-    
-    st.markdown('</div>', unsafe_allow_html=True)
+        plan_trip = st.button("🚀 CREATE MY TRAVEL PLAN", type="primary")
     
-    # Results section
-    if analyze_button and news_topic:
+    # Results Section
+    if plan_trip and destination:
         with st.spinner(""):
-            try:
-                # Progress indicators with enhanced styling
-                progress_container = st.container()
-                progress_container.markdown('<div class="info-box">', unsafe_allow_html=True)
-                progress_placeholder = progress_container.empty()
-                progress_placeholder.markdown("""
-                <div class="pulsing">
-                    <div class="status-badge status-searching">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <circle cx="11" cy="11" r="8"></circle>
-                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                        </svg>
-                        <span>Searching for recent news sources...</span>
-                    </div>
-                </div>
-                """, unsafe_allow_html=True)
-                
-                # Determine time frame from selection
-                time_map = {
-                    "Last 24 hours": "24h",
-                    "Last 7 days": "7d",
-                    "Last 30 days": "30d"
-                }
-                time_frame = time_map.get(time_period, "7d")
-                
-                # Perform search
-                search_results = search_tool(
-                    f"Latest news about {news_topic} {time_frame}",
-                    max_results=search_depth
-                )
-                
-                if not search_results.startswith(("Search error", "No results")):
-                    # Update progress
-                    progress_placeholder.markdown("""
-                    <div class="pulsing">
-                        <div class="status-badge status-analyzing">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M12 3v3m0 12v3m-9-9H3m3-6l2 2M3 12h3m12 0h3m-3-6l-2 2m9 3h-3m-6 6l-2 2m12 0l-2-2"></path>
-                            </svg>
-                            <span>Analyzing search results and generating insights...</span>
-                        </div>
-                    </div>
-                    """, unsafe_allow_html=True)
-                    
-                    # Create analysis prompt
-                    analysis_prompt = create_analysis_prompt(news_topic, search_results)
-                    
-                    # Get analysis from LLM
-                    analysis_result = llm(analysis_prompt)
-                    
-                    # Clear progress messages
-                    progress_container.empty()
-                    
-                    # Display results in tabs for better organization
-                    st.markdown('<div class="card">', unsafe_allow_html=True)
-                    st.markdown(f'<h2>Analysis: {news_topic}</h2>', unsafe_allow_html=True)
-                    
-                    tab1, tab2 = st.tabs(["📊 Analysis", "📰 Sources"])
-                    
-                    with tab1:
-                        st.markdown('<div class="analysis-result">', unsafe_allow_html=True)
-                        st.markdown(analysis_result)
-                        st.markdown('</div>', unsafe_allow_html=True)
-                    
-                    with tab2:
-                        st.markdown("<h3>News Sources Used in Analysis</h3>", unsafe_allow_html=True)
-                        # Parse and display sources in a more structured way
-                        sources = search_results.split("\n\n")
-                        for source in sources:
-                            lines = source.strip().split("\n")
-                            if len(lines) >= 5:  # Ensure we have enough lines
-                                title_line = lines[0].replace("1. Title: ", "").replace("2. Title: ", "").replace("3. Title: ", "").replace("4. Title: ", "").replace("5. Title: ", "")
-                                date_line = lines[1].replace("   Date: ", "")
-                                source_line = lines[2].replace("   Source: ", "")
-                                url_line = lines[4].replace("   URL: ", "")
-                                
-                                st.markdown(f"""
-                                <div class="source-item">
-                                    <p class="source-title">{title_line}</p>
-                                    <div class="source-meta">
-                                        <span>{source_line}</span>
-                                        <span class="source-meta-dot"></span>
-                                        <span>{date_line}</span>
-                                    </div>
-                                    <a href="{url_line}" class="read-link" target="_blank">
-                                        Read original article
-                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                            <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
-                                            <path d="M15 3h6v6"></path>
-                                            <path d="M10 14L21 3"></path>
-                                        </svg>
-                                    </a>
-                                </div>
-                                """, unsafe_allow_html=True)
-                    
-                    st.markdown('</div>', unsafe_allow_html=True)
-                    
-                    # Log the activity
-                    log_agent_activity(
-                        analysis_prompt,
-                        analysis_result,
-                        "News Analysis Agent"
-                    )
-                else:
-                    progress_container.empty()
-                    st.error(f"""
-                    <div style="display: flex; align-items: center; gap: 12px;">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF5252" stroke-width="2">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <line x1="12" y1="8" x2="12" y2="12"></line>
-                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                        </svg>
-                        <span>{search_results}</span>
-                    </div>
-                    """, unsafe_allow_html=True)
-                    
-            except Exception as e:
-                st.error(f"""
-                <div style="display: flex; align-items: center; gap: 12px;">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF5252" stroke-width="2">
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <line x1="12" y1="8" x2="12" y2="12"></line>
-                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                    </svg>
-                    <span>An error occurred during analysis: {str(e)}</span>
-                </div>
-                """, unsafe_allow_html=True)
-    elif analyze_button:
-        # This handles the case when analyze button is clicked but no topic is entered
-        st.warning("""
-        <div style="display: flex; align-items: center; gap: 12px;">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFA726" stroke-width="2">
-                <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"></path>
-                <line x1="12" y1="9" x2="12" y2="13"></line>
-                <line x1="12" y1="17" x2="12.01" y2="17"></line>
-            </svg>
-            <span>Please enter a news topic to analyze.</span>
-        </div>
-        """, unsafe_allow_html=True)
-
-    # Tips and usage guidance section - displayed when no analysis is in progress
-    if not analyze_button or not news_topic:
+            # Display agent status dashboard
+            display_agent_status(travel_system.agents)
+            
+            # Create the travel plan
+            st.markdown("### 🔄 Agents Working Together...")
+            
+            # Progress tracking
+            progress_bar = st.progress(0)
+            status_placeholder = st.empty()
+            
+            results = {}
+            total_agents = len(travel_system.agents)
+            
+            # Update progress as each agent completes
+            for i, (agent_name, agent) in enumerate(travel_system.agents.items()):
+                progress = (i + 1) / total_agents
+                progress_bar.progress(progress)
+                status_placeholder.text(f"Agent {i+1}/{total_agents}: {agent.name} working...")
+                time.sleep(0.5)  # Brief delay for visual effect
+            
+            # Execute the travel planning
+            results = travel_system.create_travel_plan(
+                destination, duration, budget, travel_style, interests
+            )
+            
+            progress_bar.progress(1.0)
+            status_placeholder.text("✅ All agents completed successfully!")
+            
+            # Display Results in Tabs
+            st.markdown(f'<div class="card"><h2>🎯 Your {destination} Travel Plan</h2></div>', unsafe_allow_html=True)
+            
+            tab1, tab2, tab3, tab4, tab5 = st.tabs([
+                "🌍 Destination Info", "🏨 Accommodation", "🎭 Activities", 
+                "📋 Itinerary", "💰 Budget"
+            ])
+            
+            with tab1:
+                st.markdown('<div class="travel-result">', unsafe_allow_html=True)
+                st.markdown(results.get("destination_info", "Information not available"))
+                st.markdown('</div>', unsafe_allow_html=True)
+            
+            with tab2:
+                st.markdown('<div class="travel-result">', unsafe_allow_html=True)
+                st.markdown(results.get("accommodation", "Information not available"))
+                st.markdown('</div>', unsafe_allow_html=True)
+            
+            with tab3:
+                st.markdown('<div class="travel-result">', unsafe_allow_html=True)
+                st.markdown(results.get("activities", "Information not available"))
+                st.markdown('</div>', unsafe_allow_html=True)
+            
+            with tab4:
+                st.markdown('<div class="travel-result">', unsafe_allow_html=True)
+                st.markdown(results.get("itinerary", "Information not available"))
+                st.markdown('</div>', unsafe_allow_html=True)
+            
+            with tab5:
+                st.markdown('<div class="travel-result">', unsafe_allow_html=True)
+                st.markdown(results.get("budget_breakdown", "Information not available"))
+                st.markdown('</div>', unsafe_allow_html=True)
+            
+            # Final agent status
+            st.markdown("### ✅ Mission Complete!")
+            display_agent_status(travel_system.agents)
+            
+    elif plan_trip:
+        st.warning("🚨 Please enter a destination to start planning your trip!")
+    
+    # Tips and Examples Section
+    if not plan_trip or not destination:
         st.markdown('<div class="card">', unsafe_allow_html=True)
-        st.markdown("<h2 style='margin-top: 0;'>Tips for Better Results</h2>", unsafe_allow_html=True)
+        st.markdown("## 💡 How It Works")
         
-        st.markdown("""
-        <div class="tip-item">
-            <div class="tip-icon">💡</div>
-            <div class="tip-text">
-                <strong>Be specific with your topic.</strong> Instead of "climate change", try "recent climate legislation in the EU".
-            </div>
-        </div>
+        col1, col2, col3 = st.columns(3)
         
-        <div class="tip-item">
-            <div class="tip-icon">🔍</div>
-            <div class="tip-text">
-                <strong>Adjust search depth</strong> to find the right balance between comprehensive coverage and analysis speed.
-            </div>
-        </div>
+        with col1:
+            st.markdown("""
+            ### 🔍 Research Phase
+            Our **Destination Expert** searches for:
+            - Current weather & best times to visit
+            - Local customs & cultural insights  
+            - Safety requirements & travel tips
+            - Transportation options
+            """)
         
-        <div class="tip-item">
-            <div class="tip-icon">📊</div>
-            <div class="tip-text">
-                <strong>Choose the right analysis type</strong> based on your needs:
-                <ul>
-                    <li><strong>Comprehensive:</strong> Full analysis with multiple perspectives</li>
-                    <li><strong>Quick Summary:</strong> Brief overview of key points</li>
-                    <li><strong>Technical:</strong> Detailed analysis with industry-specific terminology</li>
-                    <li><strong>Simplified:</strong> Easy-to-understand breakdown of complex topics</li>
-                </ul>
-            </div>
-        </div>
+        with col2:
+            st.markdown("""
+            ### 🏨 Planning Phase
+            Our specialists find:
+            - **Accommodation** matching your budget
+            - **Activities** based on your interests
+            - **Restaurants** & local dining spots
+            - Hidden gems & local experiences
+            """)
         
-        <div class="tip-item">
-            <div class="tip-icon">⏱️</div>
-            <div class="tip-text">
-                <strong>Select an appropriate time period</strong> based on how recent you want the news to be.
-            </div>
-        </div>
-        """, unsafe_allow_html=True)
+        with col3:
+            st.markdown("""
+            ### 📋 Organization Phase
+            Our planners create:
+            - **Day-by-day itinerary** optimized for you
+            - **Budget breakdown** with cost estimates
+            - **Logistics** and travel coordination
+            - **Money-saving tips** and deals
+            """)
         
         st.markdown('</div>', unsafe_allow_html=True)
         
-        # Example topics for quick selection
+        # Example destinations
         st.markdown('<div class="card">', unsafe_allow_html=True)
-        st.markdown("<h2 style='margin-top: 0;'>Try These Topics</h2>", unsafe_allow_html=True)
+        st.markdown("## 🌟 Popular Destinations")
         
-        col1, col2, col3 = st.columns(3)
+        example_cols = st.columns(4)
+        
+        examples = [
+            ("🗾 Tokyo, Japan", "tokyo japan"),
+            ("🥖 Paris, France", "paris france"), 
+            ("🏛️ Rome, Italy", "rome italy"),
+            ("🏝️ Bali, Indonesia", "bali indonesia")
+        ]
+        
+        for i, (display_name, destination_value) in enumerate(examples):
+            with example_cols[i]:
+                if st.button(display_name, key=f"example_{i}"):
+                    st.session_state.destination_input = destination_value
+                    st.rerun()
         
-        with col1:
-            if st.button("🌍 Climate Change Policies"):
-                st.session_state.news_topic_input = "Recent climate change policies and agreements"
-                st.experimental_rerun()
-                
-        with col2:
-            if st.button("💰 Cryptocurrency Trends"):
-                st.session_state.news_topic_input = "Latest developments in cryptocurrency markets"
-                st.experimental_rerun()
-                
-        with col3:
-            if st.button("🔬 AI Research Breakthroughs"):
-                st.session_state.news_topic_input = "Recent breakthroughs in artificial intelligence research"
-                st.experimental_rerun()
-                
         st.markdown('</div>', unsafe_allow_html=True)
 
-    # Footer with attribution and version info
-    st.markdown("""
-    <footer>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-            <div>Z-Agent News Analysis v1.0.1</div>
-            <div></div>
-        </div>
-    </footer>
-    """, unsafe_allow_html=True)
-
 except Exception as e:
-    # Global error handling to catch any unforeseen issues
     st.error(f"""
     <div style="display: flex; align-items: center; gap: 12px;">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF5252" stroke-width="2">
-            <circle cx="12" cy="12" r="10"></circle>
-            <line x1="12" y1="8" x2="12" y2="12"></line>
-            <line x1="12" y1="16" x2="12.01" y2="16"></line>
-        </svg>
-        <span>Application Error: {str(e)}</span>
+        <span>❌ Application Error: {str(e)}</span>
     </div>
     """, unsafe_allow_html=True)
     
     st.markdown("""
-    <div style="background-color: #F8F9FA; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
-        <p><strong>Troubleshooting Tips:</strong></p>
+    <div class="card">
+        <h3>🔧 Troubleshooting</h3>
         <ul>
-            <li>Check your API keys for Groq LLM in environment variables</li>
-            <li>Ensure you have internet connection for DuckDuckGo searches</li>
+            <li>Ensure your GROQ_API_KEY is set in environment variables</li>
+            <li>Check your internet connection for web searches</li>
             <li>Try refreshing the page or restarting the application</li>
         </ul>
     </div>
     """, unsafe_allow_html=True)
 
-# Add a hidden feature to reset the application state
-if st.sidebar.button("Reset Application", key="reset_app"):
-    for key in st.session_state.keys():
-        del st.session_state[key]
-    st.experimental_rerun()
-
-# Optional: Add a feedback mechanism
+# Sidebar controls
 with st.sidebar:
-    st.markdown("### Feedback")
-    feedback = st.text_area("Share your thoughts or report issues", placeholder="Your feedback helps us improve...")
+    st.markdown("### 🛠️ System Controls")
+    
+    if st.button("🔄 Reset Application"):
+        for key in list(st.session_state.keys()):
+            if key.startswith('travel_'):
+                del st.session_state[key]
+        st.rerun()
+    
+    st.markdown("### 📊 Agent Performance")
+    if 'travel_system' in st.session_state:
+        for name, agent in st.session_state.travel_system.agents.items():
+            status = getattr(agent, 'status', 'idle')
+            st.metric(agent.name, status.title())
+    
+    st.markdown("### 💬 Feedback")
+    feedback = st.text_area("Share your experience:", placeholder="How was your travel plan?")
     if st.button("Submit Feedback"):
         st.success("Thank you for your feedback!")
-        # In a production app, you would save this feedback to a database
+
+# Footer
+st.markdown("""
+<div style="text-align: center; padding: 2rem; opacity: 0.8;">
+    <p>SmolAgent Travel Planner v2.0 | Powered by AI Collaboration</p>
+</div>
+""", unsafe_allow_html=True)