Update app.py

app.py

@@ -5,7 +5,7 @@ from groq import Groq
 import os
 from duckduckgo_search import DDGS
 
-# Set page configuration with wider layout and custom theme
+# Set page configuration with fullscreen layout and custom theme
 st.set_page_config(
     page_title="Z-Agent News Analysis",
     layout="wide",
@@ -13,7 +13,19 @@ st.set_page_config(
     page_icon="🔍"
 )
 
-# Custom CSS for Google DeepMind-inspired styling
+# 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
 st.markdown("""
 <style>
     /* Global font and color scheme */
@@ -23,146 +35,329 @@ st.markdown("""
         font-family: 'Inter', sans-serif;
     }
     
+    /* Background and main container styling */
+    .main {
+        background: linear-gradient(135deg, #f5f7fa 0%, #ebeff5 100%);
+        padding: 0;
+    }
+    
+    .main .block-container {
+        padding-top: 2rem;
+        padding-bottom: 3rem;
+        max-width: 1300px;
+    }
+    
     /* Header styling */
     h1 {
         color: #101010;
         font-weight: 700 !important;
         margin-bottom: 1rem !important;
         letter-spacing: -0.5px;
+        font-size: 2.8rem !important;
     }
     
-    h2, h3 {
+    h2 {
         font-weight: 600 !important;
         color: #202020;
         letter-spacing: -0.3px;
+        font-size: 1.8rem !important;
+        margin-top: 1.5rem !important;
     }
     
-    /* Container styling */
-    .main .block-container {
-        padding-top: 2rem;
-        padding-bottom: 2rem;
-        max-width: 1200px;
+    h3 {
+        font-weight: 600 !important;
+        color: #303030;
+        letter-spacing: -0.2px;
+        font-size: 1.4rem !important;
     }
     
     /* Card-like sections */
     .card {
         background-color: white;
-        border-radius: 12px;
-        padding: 1.5rem;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-        margin-bottom: 1.5rem;
+        border-radius: 16px;
+        padding: 2rem;
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+        margin-bottom: 2rem;
+        border: 1px solid rgba(240, 240, 240, 0.9);
+        transition: all 0.3s ease;
+    }
+    
+    .card:hover {
+        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
+        transform: translateY(-3px);
     }
     
     /* Button styling */
     .stButton > button {
-        background-color: #1a73e8;
+        background: linear-gradient(90deg, #1a73e8, #0b5cbe);
         color: white;
         border: none;
-        border-radius: 6px;
-        padding: 0.6rem 1.2rem;
+        border-radius: 8px;
+        padding: 0.8rem 1.5rem;
         font-weight: 500;
         transition: all 0.3s;
         width: 100%;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-size: 1rem;
+        box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
     }
     
     .stButton > button:hover {
-        background-color: #1765cc;
-        box-shadow: 0 2px 10px rgba(26, 115, 232, 0.2);
+        background: linear-gradient(90deg, #1765cc, #0a51a8);
+        box-shadow: 0 6px 16px rgba(26, 115, 232, 0.4);
+        transform: translateY(-2px);
+    }
+    
+    .stButton > button:active {
+        transform: translateY(1px);
     }
     
     /* Input field styling */
-    .stTextInput input, .stSelectbox div[data-baseweb="select"] div, .stSlider div[data-baseweb="slider"] {
-        border-radius: 6px;
-        border: 1px solid #E0E0E0;
+    .stTextInput input {
+        border-radius: 8px;
+        border: 2px solid #E0E0E0;
+        padding: 1rem;
+        font-size: 1rem;
+        transition: all 0.3s;
+    }
+    
+    .stTextInput input:focus {
+        border-color: #1a73e8;
+        box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.2);
+    }
+    
+    .stSelectbox div[data-baseweb="select"] div {
+        border-radius: 8px;
+        border: 2px solid #E0E0E0;
+        padding: 0.25rem;
     }
     
-    .stTextInput input:focus, .stSelectbox div[data-baseweb="select"] div:focus {
+    .stSelectbox div[data-baseweb="select"] div:focus {
         border-color: #1a73e8;
-        box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+        box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.2);
+    }
+    
+    .stSlider div[data-baseweb="slider"] {
+        border-radius: 8px;
     }
     
     /* Analysis result styling */
     .analysis-result {
         background-color: #F8F9FA;
         border-radius: 12px;
-        padding: 1.5rem;
-        border-left: 4px solid #1a73e8;
+        padding: 2rem;
+        border-left: 6px solid #1a73e8;
+        line-height: 1.7;
     }
     
     /* Expand/collapse sections */
     .streamlit-expanderHeader {
         font-weight: 500;
         color: #5f6368;
+        background-color: #f8f9fa;
+        border-radius: 8px;
+        padding: 0.8rem !important;
+        border: 1px solid #e8eaed;
+    }
+    
+    .streamlit-expanderHeader:hover {
+        background-color: #f1f3f4;
     }
     
     /* Spinner/progress styling */
     .stSpinner > div {
         border-color: #1a73e8 transparent transparent !important;
+        border-width: 3px !important;
     }
     
     /* Footer styling */
     footer {
         border-top: 1px solid #F0F0F0;
-        padding-top: 1rem;
+        padding-top: 1.5rem;
         color: #5f6368;
-        font-size: 0.8rem;
+        font-size: 0.9rem;
     }
     
     /* Logo and branding */
     .logo-text {
-        font-weight: 600;
+        font-weight: 700;
         background: linear-gradient(90deg, #1a73e8, #8ab4f8);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        font-size: 2.2rem;
+        font-size: 2.8rem;
         letter-spacing: -1px;
+        text-shadow: 0px 4px 8px rgba(26, 115, 232, 0.2);
     }
     
     /* Sections */
     .section-header {
-        font-size: 1.2rem;
-        font-weight: 500;
-        margin-top: 1.5rem;
-        margin-bottom: 1rem;
+        font-size: 1.3rem;
+        font-weight: 600;
+        margin-top: 2rem;
+        margin-bottom: 1.2rem;
         color: #202124;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid #f1f3f4;
     }
     
     /* Source links */
     a {
         color: #1a73e8;
         text-decoration: none;
+        transition: all 0.2s;
+        font-weight: 500;
     }
     
     a:hover {
+        color: #0b5cbe;
         text-decoration: underline;
     }
     
     /* Tabs for analysis results */
     .stTabs [data-baseweb="tab-list"] {
         gap: 2px;
+        border-radius: 12px;
+        background-color: #f8f9fa;
+        padding: 5px;
     }
     
     .stTabs [data-baseweb="tab"] {
         background-color: transparent;
-        border-radius: 4px 4px 0px 0px;
+        border-radius: 8px;
         color: #5f6368;
-        padding: 10px 16px;
+        padding: 10px 20px;
+        font-weight: 500;
+        transition: all 0.2s;
     }
     
     .stTabs [aria-selected="true"] {
         background-color: white !important;
         color: #1a73e8 !important;
-        border-bottom: 2px solid #1a73e8;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    .stTabs [data-baseweb="tab"]:hover:not([aria-selected="true"]) {
+        background-color: rgba(0, 0, 0, 0.05);
     }
     
     /* Info boxes */
     .info-box {
         background-color: #E8F0FE;
-        border-radius: 8px;
+        border-radius: 12px;
+        padding: 1.2rem;
+        border-left: 6px solid #1a73e8;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 4px 12px rgba(26, 115, 232, 0.15);
+    }
+    
+    /* Progress animation */
+    @keyframes pulse {
+        0% { opacity: 0.6; }
+        50% { opacity: 1; }
+        100% { opacity: 0.6; }
+    }
+    
+    .pulsing {
+        animation: pulse 1.5s infinite ease-in-out;
+    }
+    
+    /* Source item styling */
+    .source-item {
+        margin-bottom: 1.5rem;
+        padding-bottom: 1.5rem;
+        border-bottom: 1px solid #f0f0f0;
+        transition: all 0.3s;
+    }
+    
+    .source-item:hover {
+        background-color: #f8f9fa;
         padding: 1rem;
-        border-left: 4px solid #1a73e8;
+        margin: 0 -1rem 1.5rem -1rem;
+        border-radius: 8px;
+    }
+    
+    .source-title {
+        margin-bottom: 0.3rem;
+        font-weight: 600;
+        color: #202124;
+        font-size: 1.1rem;
+    }
+    
+    .source-meta {
+        color: #5f6368;
+        margin-bottom: 0.8rem;
+        font-size: 0.9rem;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    
+    .source-meta-dot {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        background-color: #5f6368;
+        border-radius: 50%;
+    }
+    
+    .read-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-weight: 500;
+        font-size: 0.9rem;
+    }
+    
+    /* Status indicators */
+    .status-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 0.4rem 0.8rem;
+        border-radius: 16px;
+        font-size: 0.85rem;
+        font-weight: 500;
+    }
+    
+    .status-searching {
+        background-color: #e8f0fe;
+        color: #1a73e8;
+    }
+    
+    .status-analyzing {
+        background-color: #e6f4ea;
+        color: #137333;
+    }
+    
+    /* Header icon animation */
+    @keyframes float {
+        0% { transform: translateY(0px); }
+        50% { transform: translateY(-10px); }
+        100% { transform: translateY(0px); }
+    }
+    
+    .float-icon {
+        animation: float 3s ease-in-out infinite;
+    }
+    
+    /* Tips section */
+    .tip-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
         margin-bottom: 1rem;
     }
+    
+    .tip-icon {
+        color: #1a73e8;
+        font-size: 1.2rem;
+        margin-top: 0.2rem;
+    }
+    
+    .tip-text {
+        flex: 1;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -287,32 +482,39 @@ def log_agent_activity(prompt: str, result: str, agent_name: str):
     for transparency and debugging purposes.
     """
     with st.expander("🔍 View Agent Activity Log"):
-        st.write(f"### Agent Activity ({agent_name}):")
-        st.write("**Input Prompt:**")
+        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)
+        
+        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.write("**Analysis Output:**")
+        st.markdown("</div>", unsafe_allow_html=True)
+        
+        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)
 
-# Header with branded logo and description
-col1, col2 = st.columns([1, 4])
-with col1:
-    st.markdown("""
-        <div style="text-align: center; padding-top: 0.5rem;">
-            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+# Animated header with branded logo and description
+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>
-    """, unsafe_allow_html=True)
-
-with col2:
-    st.markdown('<span class="logo-text">Z-Agent News Analysis</span>', unsafe_allow_html=True)
-    st.markdown("""
-    <p style="color: #5f6368; font-size: 1rem; margin-top: -0.5rem;">
-        Intelligent news analysis powered by AI. Get comprehensive insights and multiple perspectives on any topic.
-    </p>
-    """, unsafe_allow_html=True)
+        <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>
+""", unsafe_allow_html=True)
 
 # Main content area
 st.markdown('<div class="card">', unsafe_allow_html=True)
@@ -323,42 +525,69 @@ try:
     llm = GroqLLM()
     search_tool = DuckDuckGoSearch()
     
-    # Input section with clear design
+    # Input section with enhanced design
+    st.markdown("<h2 style='margin-top: 0;'>News Topic Analysis</h2>", unsafe_allow_html=True)
+    
     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..."
+        placeholder="E.g., Recent developments in renewable energy, Tech industry layoffs, Global climate agreements...",
+        key="news_topic_input"
     )
     
     # Analysis options in a cleaner layout
-    col1, col2, col3 = st.columns([2, 2, 1])
+    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)
+    
+    col1, col2, col3 = st.columns([2, 2, 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(
-            "Search Depth",
+            "##",
             min_value=3,
             max_value=10,
             value=5,
-            help="Number of news sources to analyze"
+            help="Number of news sources to analyze",
+            key="search_depth_slider",
+            label_visibility="collapsed"
         )
+        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)
     
     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(
-            "Analysis Type",
+            "##",
             ["Comprehensive", "Quick Summary", "Technical", "Simplified"],
-            help="Choose the style and depth of analysis"
+            help="Choose the style and depth of analysis",
+            key="analysis_type_select",
+            label_visibility="collapsed"
         )
+        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(
-            "Time Period",
+            "##",
             ["Last 7 days", "Last 30 days", "Last 24 hours"],
-            help="How recent should the news be"
+            help="How recent should the news be",
+            key="time_period_select",
+            label_visibility="collapsed"
         )
+        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
-    col1, col2 = st.columns([3, 1])
+    st.markdown("<div style='margin-top: 2rem;'></div>", unsafe_allow_html=True)
+    
+    col1, col2, col3 = st.columns([2, 2, 2])
+    
     with col2:
-        analyze_button = st.button("Analyze News")
+        analyze_button = st.button("ANALYZE NEWS")
     
     st.markdown('</div>', unsafe_allow_html=True)
     
@@ -366,11 +595,21 @@ try:
     if analyze_button and news_topic:
         with st.spinner(""):
             try:
-                # Progress indicators with custom styling
+                # 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("🔎 **Searching for recent news sources...**", unsafe_allow_html=True)
+                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 = {
@@ -388,7 +627,16 @@ try:
                 
                 if not search_results.startswith(("Search error", "No results")):
                     # Update progress
-                    progress_placeholder.markdown("🧠 **Analyzing search results and generating insights...**", unsafe_allow_html=True)
+                    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)
@@ -411,7 +659,7 @@ try:
                         st.markdown('</div>', unsafe_allow_html=True)
                     
                     with tab2:
-                        st.markdown("### News Sources Used in Analysis")
+                        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:
@@ -423,12 +671,21 @@ try:
                                 url_line = lines[4].replace("   URL: ", "")
                                 
                                 st.markdown(f"""
-                                <div style="margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #f0f0f0;">
-                                    <h4 style="margin-bottom: 0.2rem;">{title_line}</h4>
-                                    <p style="color: #5f6368; margin-bottom: 0.5rem; font-size: 0.9rem;">
-                                        {source_line} • {date_line}
-                                    </p>
-                                    <a href="{url_line}" target="_blank">Read original article</a>
+                                <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)
                     
@@ -442,57 +699,151 @@ try:
                     )
                 else:
                     progress_container.empty()
-                    st.error(f"😕 {search_results}")
+                    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"An error occurred during analysis: {str(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:
-        st.warning("Please enter a news topic to analyze.")
+        # 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)
 
-    # Help section with visually appealing design
-    st.markdown('<div class="card">', unsafe_allow_html=True)
-    st.markdown('<h3>💡 Tips for Better Results</h3>', unsafe_allow_html=True)
-    
-    tips_col1, tips_col2 = st.columns(2)
-    
-    with tips_col1:
-        st.markdown("""
-        - **Be specific** with your topic for more focused analysis
-        - Use **keywords** related to recent events for timely information
-        - Include **geographic locations** when relevant (e.g., "Climate policy in Europe")
-        """)
-    
-    with tips_col2:
+    # Tips and usage guidance section - displayed when no analysis is in progress
+    if not analyze_button or not news_topic:
+        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("""
-        - Try different **analysis types** for various perspectives
-        - For complex topics, start with a **broader search** then narrow down
-        - Adjust the **time period** to control recency of news sources
-        """)
-    
-    st.markdown('</div>', unsafe_allow_html=True)
+        <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>
+        
+        <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>
+        
+        <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>
+        
+        <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)
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        # Example topics for quick selection
+        st.markdown('<div class="card">', unsafe_allow_html=True)
+        st.markdown("<h2 style='margin-top: 0;'>Try These Topics</h2>", unsafe_allow_html=True)
+        
+        col1, col2, col3 = st.columns(3)
+        
+        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>Powered by Groq LLM & DuckDuckGo Search</div>
+        </div>
+    </footer>
+    """, unsafe_allow_html=True)
 
 except Exception as e:
+    # Global error handling to catch any unforeseen issues
     st.error(f"""
-    Failed to initialize the application: {str(e)}
-    
-    Please ensure:
-    1. Your GROQ_API_KEY is properly set in environment variables
-    2. All required packages are installed:
-       - pip install streamlit groq duckduckgo-search
-    3. You have internet connectivity for DuckDuckGo searches
-    """)
-
-# Footer with branding
-st.markdown("---")
-st.markdown("""
-<footer>
-    <div style="display: flex; justify-content: space-between; align-items: center;">
-        <div>
-            Z-Agent News Analysis Tool © 2025
-        </div>
-        <div>
-            Created for news analysis and research purposes
-        </div>
+    <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>
     </div>
-</footer>
-""", unsafe_allow_html=True)
+    """, 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>
+        <ul>
+            <li>Check your API keys for Groq LLM in environment variables</li>
+            <li>Ensure you have internet connection for DuckDuckGo 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
+with st.sidebar:
+    st.markdown("### Feedback")
+    feedback = st.text_area("Share your thoughts or report issues", placeholder="Your feedback helps us improve...")
+    if st.button("Submit Feedback"):
+        st.success("Thank you for your feedback!")
+        # In a production app, you would save this feedback to a database