Update format and prettify for more professional look

src/app.py

@@ -5,6 +5,7 @@ from pathlib import Path
 from modules.utils import load_processed_meetings, load_prompt_library
 from src.modules.fed_tools import search_meetings_by_date, FED_TOOLS
 from src.modules.llm_completions import stream_fed_agent_response
+from src.config.theme_config import CUSTOM_CSS, GRADIO_THEME, EXAMPLE_QUESTIONS
 
 load_dotenv()
 
@@ -12,30 +13,6 @@ _FILE_PATH = Path(__file__).parents[1]
 FOMC_MEETINGS = load_processed_meetings()
 PROMPT_LIBRARY = load_prompt_library()
 
-_CUSTOM_CSS = """
-        .gradio-container {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        .chat-message {
-            border-radius: 10px;
-            padding: 10px;
-            margin: 5px 0;
-        }
-        .function-call {
-            background-color: #f0f8ff;
-            border-left: 4px solid #1e88e5;
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 5px;
-        }
-"""
-_EXAMPLES = [
-    "What was the rate decision in the last FOMC meeting?",
-    "What is the most likely rate decision in the next FOMC meeting?",
-    "What does the economic outlook look like today?",
-    "Give me a table which summarized the last 5 FOMC meetings"
-]
-
 def convert_history_to_string(history: list) -> str:
     previous_messages = ""
     for msg in history:
@@ -91,9 +68,9 @@ def create_fomc_meetings_accordion():
     return accordions
 
 def generate_meetings_html(meetings_list):
-    """Generate HTML for meetings list"""
+    """Generate HTML for meetings list with Fireworks AI purple palette"""
     if not meetings_list:
-        return '<p style="color: #6b7280; text-align: center; padding: 20px;">No meetings available</p>'
+        return '<p style="color: #64748B; text-align: center; padding: 20px;">No meetings available</p>'
 
     html_content = '<div style="max-height: 600px; overflow-y: auto;">'
     for meeting in meetings_list:
@@ -110,24 +87,27 @@ def generate_meetings_html(meetings_list):
         factors_html = ""
         key_factors = meeting.get('key_economic_factors', [])
         if key_factors and len(key_factors) > 0:
-            factors_html = "<p style='margin: 8px 0; font-size: 0.9em;'><strong>Key Factors:</strong></p><ul style='margin: 4px 0; padding-left: 20px; font-size: 0.85em;'>"
+            factors_html = "<p style='margin: 10px 0 6px 0; font-size: 0.9em; color: #0F172A; font-weight: 600;'>Key Factors:</p><ul style='margin: 4px 0; padding-left: 20px; font-size: 0.88em; color: #64748B;'>"
             for factor in key_factors:
-                factors_html += f"<li style='margin: 2px 0;'>{factor}</li>"
+                factors_html += f"<li style='margin: 4px 0;'>{factor}</li>"
             factors_html += "</ul>"
 
         html_content += f"""
-        <details style="border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px; margin-bottom: 10px; background: white;">
-            <summary style="font-weight: 600; cursor: pointer; color: #1f2937; font-size: 0.95em;">
-                📅 {date} - {rate_decision}
+        <details class="meeting-details" style="border: 1px solid #E6EAF4; border-radius: 10px; margin: 10px 0; background: white; overflow: hidden; transition: all 0.25s ease;">
+            <summary class="meeting-summary" style="font-weight: 600; cursor: pointer; color: #0F172A; padding: 14px 18px; font-size: 0.95em; background: linear-gradient(90deg, transparent 0%, #F3F0FF 100%);">
+                {date} - {rate_decision}
             </summary>
-            <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e7eb; font-size: 0.85em;">
-                <p style="margin: 4px 0;"><strong>Action:</strong> {action}</p>
-                <p style="margin: 4px 0;"><strong>Magnitude:</strong> {magnitude}</p>
-                <p style="margin: 8px 0;"><strong>Forward Guidance:</strong> {forward_guidance}</p>
+            <div class="meeting-content" style="padding: 16px 18px; border-top: 1px solid #E6EAF4; background: #FAFBFC; font-size: 0.88em;">
+                <p style="margin: 6px 0; color: #0F172A;"><strong style="color: #6720FF;">Action:</strong> {action}</p>
+                <p style="margin: 6px 0; color: #0F172A;"><strong style="color: #6720FF;">Magnitude:</strong> {magnitude}</p>
+                <p style="margin: 10px 0 6px 0; color: #0F172A;"><strong style="color: #6720FF;">Forward Guidance:</strong></p>
+                <p style="margin: 0 0 10px 0; color: #64748B; line-height: 1.5;">{forward_guidance}</p>
                 {factors_html}
-                <p style="margin: 8px 0;"><strong>Economic Outlook:</strong> {economic_outlook}</p>
-                <p style="margin: 8px 0;"><strong>Market Impact:</strong> {market_impact}</p>
-                {f'<p style="margin: 8px 0;"><strong>Source:</strong> <a href="{url}" target="_blank" style="color: #1e88e5;">Fed Minutes PDF</a></p>' if url else ''}
+                <p style="margin: 10px 0 6px 0; color: #0F172A;"><strong style="color: #6720FF;">Economic Outlook:</strong></p>
+                <p style="margin: 0 0 10px 0; color: #64748B; line-height: 1.5;">{economic_outlook}</p>
+                <p style="margin: 10px 0 6px 0; color: #0F172A;"><strong style="color: #6720FF;">Market Impact:</strong></p>
+                <p style="margin: 0 0 10px 0; color: #64748B; line-height: 1.5;">{market_impact}</p>
+                {f'<p style="margin: 10px 0 0 0;"><strong style="color: #6720FF;">Source:</strong> <a href="{url}" target="_blank" style="color: #6720FF; text-decoration: none; transition: color 0.2s ease;">Fed Minutes PDF</a></p>' if url else ''}
             </div>
         </details>
         """
@@ -146,39 +126,39 @@ def search_and_format_meetings(query: str):
     else:
         return '<p style="color: #ef4444; text-align: center; padding: 20px;">No meetings found matching your search.</p>'
 
-with gr.Blocks(css=_CUSTOM_CSS, title="Fed AI Savant", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css=CUSTOM_CSS, title="Fed AI Savant", theme=GRADIO_THEME) as demo:
 
     gr.Markdown("""
-    # 🏛️ Fed AI Savant
-    **Intelligent Analysis of Federal Reserve Policy 
-    and FOMC Meetings with [gpt-oss 120B](https://huggingface.co/openai/gpt-oss-120b)**
+    <h1 class="header-title" style="font-size: 2.5em; margin-bottom: 0.5em;">Fed AI Savant</h1>
+    <p style="color: #64748B; font-size: 1.1em; margin-top: 0;">Intelligent Analysis of Federal Reserve Policy and FOMC Meetings with <a href="https://huggingface.co/openai/gpt-oss-120b" target="_blank" style="color: #6720FF;">gpt-oss 120B</a></p>
     """)
 
     with gr.Row():
         # Sidebar for FOMC Meetings
-        with gr.Column(scale=1, min_width=300):
-            gr.Markdown("### 📊 FOMC Meetings")
+        with gr.Column(scale=1, min_width=300, elem_classes="meetings-container"):
+            gr.Markdown("### FOMC Meetings")
 
             # Date search
             date_search = gr.Textbox(
                 placeholder="Search by date...",
-                label="🔍 Search",
+                label="Search",
                 lines=1,
-                container=False
+                container=False,
+                elem_classes="search-box"
             )
 
             meetings_accordion = gr.HTML(generate_meetings_html(FOMC_MEETINGS))
 
         # Main content area
         with gr.Column(scale=2):
-            # API Key Configuration
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### Powered by")
+            # Compact header with Fireworks AI logo and API key
+            with gr.Row(elem_classes="compact-header"):
+                with gr.Column(scale=1, min_width=150):
+                    gr.Markdown("<p style='margin: 0; padding: 0; font-size: 0.85em; color: #64748B;'>Powered by</p>")
                     gr.Image(
                         value=str(_FILE_PATH / "assets" / "fireworks_logo.png"),
-                        height=60,
-                        width=200,
+                        height=35,
+                        width=140,
                         show_label=False,
                         show_download_button=False,
                         container=False,
@@ -188,38 +168,34 @@ with gr.Blocks(css=_CUSTOM_CSS, title="Fed AI Savant", theme=gr.themes.Soft()) a
                 with gr.Column(scale=2):
                     val = os.getenv("FIREWORKS_API_KEY", "")
                     api_key_value = gr.Textbox(
-                        label="⚙️ Fireworks AI API Key",
+                        label="API Key",
                         type="password",
-                        placeholder="Enter your API key",
+                        placeholder="Enter your Fireworks AI API key",
                         value=val,
-                        info="Required for AI processing",
-                        container=True
+                        container=True,
+                        elem_classes="compact-input"
                     )
 
-            gr.Markdown("### 💬 Fed AI Assistant")
-            gr.Markdown("Ask questions about Fed policy, rate decisions, or FOMC meetings")
+            # Example Questions - compact version
+            with gr.Row(elem_classes="compact-examples"):
+                example_1 = gr.Button(EXAMPLE_QUESTIONS[0], size="sm", scale=1)
+                example_2 = gr.Button(EXAMPLE_QUESTIONS[1], size="sm", scale=1)
+                example_3 = gr.Button(EXAMPLE_QUESTIONS[2], size="sm", scale=1)
+                example_4 = gr.Button(EXAMPLE_QUESTIONS[3], size="sm", scale=1)
 
+            # Chat interface with more space
             chat_interface = gr.ChatInterface(
                 fn=respond_for_chat_interface,
                 type="messages",
-                chatbot=gr.Chatbot(height=500, show_label=False, type="messages"),
+                chatbot=gr.Chatbot(height=450, show_label=False, type="messages", elem_classes="chat-window"),
                 textbox=gr.Textbox(
                     placeholder="Ask about Fed policy, rate decisions, or FOMC meetings...", scale=10
                 ),
                 additional_inputs=[api_key_value],
                 cache_examples=False,
-                submit_btn="Send",
+                submit_btn="Send"
             )
 
-            gr.Markdown("### 💡 Example Questions")
-            with gr.Row():
-                with gr.Column(scale=1):
-                    example_1 = gr.Button(_EXAMPLES[0], size="sm")
-                    example_2 = gr.Button(_EXAMPLES[1], size="sm")
-                with gr.Column(scale=1):
-                    example_3 = gr.Button(_EXAMPLES[2], size="sm")
-                    example_4 = gr.Button(_EXAMPLES[3], size="sm")
-
     date_search.change(
         search_and_format_meetings,
         inputs=date_search,
@@ -230,19 +206,19 @@ with gr.Blocks(css=_CUSTOM_CSS, title="Fed AI Savant", theme=gr.themes.Soft()) a
         return text
     
     example_1.click(
-        lambda: _EXAMPLES[0],
+        lambda: EXAMPLE_QUESTIONS[0],
         outputs=chat_interface.textbox
     )
     example_2.click(
-        lambda: _EXAMPLES[1],
+        lambda: EXAMPLE_QUESTIONS[1],
         outputs=chat_interface.textbox
     )
     example_3.click(
-        lambda: _EXAMPLES[2],
+        lambda: EXAMPLE_QUESTIONS[2],
         outputs=chat_interface.textbox
     )
     example_4.click(
-        lambda: _EXAMPLES[3],
+        lambda: EXAMPLE_QUESTIONS[3],
         outputs=chat_interface.textbox
     )
 

src/config/theme_config.py

@@ -0,0 +1,300 @@
+"""
+Theme and styling configuration for Fed AI Savant
+Fireworks AI-inspired purple palette with modern, professional design
+"""
+
+import gradio as gr
+
+# Custom CSS with Fireworks AI purple palette
+CUSTOM_CSS = """
+    /* Professional container with subtle purple gradient */
+    .gradio-container {
+        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
+        background: linear-gradient(135deg, #FAFBFC 0%, #F3F0FF 100%);
+    }
+
+    /* Clean chat messages */
+    .chat-message {
+        border-radius: 12px;
+        padding: 16px;
+        margin: 8px 0;
+        background: white;
+        box-shadow: 0 1px 3px rgba(103, 32, 255, 0.08);
+        border: 1px solid #E6EAF4;
+        transition: all 0.2s ease;
+    }
+
+    .chat-message:hover {
+        box-shadow: 0 4px 12px rgba(103, 32, 255, 0.12);
+    }
+
+    /* Professional function calls with purple accent */
+    .function-call {
+        background: linear-gradient(to right, #F3F0FF, #FFFFFF);
+        border-left: 3px solid #6720FF;
+        padding: 16px;
+        margin: 12px 0;
+        border-radius: 8px;
+        box-shadow: 0 1px 2px rgba(103, 32, 255, 0.06);
+        font-family: 'JetBrains Mono', monospace;
+        font-size: 0.9em;
+        color: #0F172A;
+    }
+
+    /* Sleek meetings panel */
+    .meetings-container {
+        background: white;
+        border-radius: 16px;
+        padding: 24px;
+        box-shadow: 0 4px 6px rgba(103, 32, 255, 0.08);
+        border: 1px solid #E6EAF4;
+    }
+
+    /* Modern accordion with purple accents */
+    .meeting-details {
+        border: 1px solid #E6EAF4;
+        border-radius: 10px;
+        background: #FFFFFF;
+        margin: 10px 0;
+        transition: all 0.25s ease;
+        overflow: hidden;
+    }
+
+    .meeting-details:hover {
+        box-shadow: 0 4px 12px rgba(103, 32, 255, 0.1);
+        border-color: #C4B5FD;
+    }
+
+    .meeting-details[open] {
+        border-color: #6720FF;
+        box-shadow: 0 4px 12px rgba(103, 32, 255, 0.15);
+    }
+
+    /* Clean summary styling with purple */
+    .meeting-summary {
+        font-weight: 600;
+        color: #0F172A;
+        padding: 14px 18px;
+        cursor: pointer;
+        background: linear-gradient(90deg, transparent 0%, #F3F0FF 100%);
+        transition: background 0.2s ease;
+    }
+
+    .meeting-summary:hover {
+        background: linear-gradient(90deg, #F3F0FF 0%, #EDE9FE 100%);
+    }
+
+    /* Meeting content styling */
+    .meeting-content {
+        padding: 16px 18px;
+        color: #64748B;
+        border-top: 1px solid #E6EAF4;
+        background: #FAFBFC;
+    }
+
+    /* Professional content cards */
+    .content-card {
+        background: white;
+        border-radius: 16px;
+        padding: 28px;
+        box-shadow: 0 4px 6px rgba(103, 32, 255, 0.06);
+        border: 1px solid #E6EAF4;
+    }
+
+    /* Purple accent links */
+    a {
+        color: #6720FF;
+        text-decoration: none;
+        transition: color 0.2s ease;
+    }
+
+    a:hover {
+        color: #7B2FFF;
+        text-decoration: underline;
+    }
+
+    /* Custom scrollbar with purple */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #F3F0FF;
+        border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #C4B5FD;
+        border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #A78BFA;
+    }
+
+    /* Search box styling */
+    .search-box {
+        border: 2px solid #E6EAF4;
+        border-radius: 10px;
+        transition: all 0.2s ease;
+    }
+
+    .search-box:focus {
+        border-color: #6720FF;
+        box-shadow: 0 0 0 3px rgba(103, 32, 255, 0.1);
+    }
+
+    /* Header styling */
+    .header-title {
+        background: linear-gradient(135deg, #6720FF 0%, #8B5CF6 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-weight: 700;
+    }
+
+    /* Chat window styling - readable font size */
+    .chat-window {
+        font-size: 0.95em !important;
+    }
+
+    .chat-window .message {
+        font-size: 0.95em !important;
+    }
+
+    .chat-window .message-content {
+        font-size: 0.95em !important;
+        line-height: 1.6;
+    }
+
+    /* Readable text in chat messages */
+    .chat-window p {
+        font-size: 0.95em !important;
+    }
+
+    .chat-window code {
+        font-size: 0.9em !important;
+    }
+
+    .chat-window pre {
+        font-size: 0.9em !important;
+    }
+
+    /* Slightly smaller tool calling cards */
+    .chat-window .tool-call {
+        font-size: 0.92em !important;
+    }
+
+    .chat-window table {
+        font-size: 0.92em !important;
+    }
+
+    .chat-window th,
+    .chat-window td {
+        font-size: 0.92em !important;
+        padding: 6px 10px !important;
+    }
+
+    /* Proportional headings in chat */
+    .chat-window h1 {
+        font-size: 1.5em !important;
+    }
+
+    .chat-window h2 {
+        font-size: 1.3em !important;
+    }
+
+    .chat-window h3 {
+        font-size: 1.15em !important;
+    }
+
+    .chat-window h4,
+    .chat-window h5,
+    .chat-window h6 {
+        font-size: 1em !important;
+    }
+
+    /* List items */
+    .chat-window ul,
+    .chat-window ol {
+        font-size: 0.95em !important;
+    }
+
+    .chat-window li {
+        font-size: 0.95em !important;
+    }
+
+    /* Compact header spacing */
+    .compact-header {
+        margin-bottom: 8px !important;
+        padding: 8px 0 !important;
+    }
+
+    .compact-input {
+        margin-bottom: 4px !important;
+    }
+
+    .compact-input label {
+        font-size: 0.9em !important;
+        margin-bottom: 4px !important;
+    }
+
+    /* Compact example questions */
+    .compact-examples {
+        margin: 8px 0 12px 0 !important;
+        gap: 6px !important;
+    }
+
+    .compact-examples button {
+        font-size: 0.85em !important;
+        padding: 6px 10px !important;
+        min-height: 32px !important;
+    }
+"""
+
+# Create custom Fireworks AI-inspired theme
+GRADIO_THEME = gr.themes.Base(
+    primary_hue=gr.themes.colors.purple,
+    secondary_hue=gr.themes.colors.violet,
+    neutral_hue=gr.themes.colors.slate,
+    spacing_size=gr.themes.sizes.spacing_lg,
+    radius_size=gr.themes.sizes.radius_md,
+    text_size=gr.themes.sizes.text_md,
+    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui', 'sans-serif'],
+    font_mono=[gr.themes.GoogleFont('JetBrains Mono'), 'monospace']
+).set(
+    # Primary button styling (Fireworks AI purple)
+    button_primary_background_fill='#6720FF',
+    button_primary_background_fill_hover='#7B2FFF',
+    button_primary_text_color='#FFFFFF',
+
+    # Secondary button styling
+    button_secondary_background_fill='#F3F0FF',
+    button_secondary_background_fill_hover='#EDE9FE',
+    button_secondary_text_color='#6720FF',
+
+    # Interactive elements
+    slider_color='#6720FF',
+
+    # Links
+    link_text_color='#6720FF',
+    link_text_color_hover='#7B2FFF',
+    link_text_color_visited='#8B5CF6',
+
+    # Backgrounds
+    body_background_fill='#FAFBFC',
+    block_background_fill='#FFFFFF',
+    input_background_fill='#FFFFFF',
+
+    # Borders
+    border_color_primary='#E6EAF4',
+)
+
+# Example questions for the chat interface
+EXAMPLE_QUESTIONS = [
+    "What was the rate decision in the last FOMC meeting?",
+    "What is the most likely rate decision in the next FOMC meeting?",
+    "What does the economic outlook look like today?",
+    "Give me a table which summarized the last 5 FOMC meetings"
+]