Update app.py

app.py

@@ -54,10 +54,60 @@ chart_data_store = {}
 
 # Custom CSS for Finance theme with modern UI enhancements
 custom_css = """
-@import url('shared-base.css');
+:root {
+    --main-bg: #ffffff;
+    --main-text: #000000;
+    --accent-primary: #10b981;  // Finance green
+    --accent-secondary: #2563eb; // Blue for references
+    --accent-tertiary: #fb923c;  // Orange for alerts
+    --border-color: #e5e7eb;
+    --radius-md: 8px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
+    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
+}
+
+.dark-mode {
+    --main-bg: #121212;
+    --main-text: #f3f4f6;
+    --border-color: #374151;
+}
+
+/* Chat Interface Styling */
+.chat-container {
+    background: var(--main-bg);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-color);
+    padding: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    min-height: 600px;
+}
+
+.message {
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin: 8px 0;
+    max-width: 80%;
+}
+
+.user-message {
+    background: #f0f4ff;
+    margin-left: auto;
+    border: 1px solid #d6e0ff;
+}
+
+.bot-message {
+    background: #fff;
+    margin-right: auto;
+    border: 1px solid #e0e0e0;
+}
+
 /* Finance-specific styles */
 .finance-card {
-    background: var(--surface-2);
+    background: #f8fafc;
     border: 1px solid var(--border-color);
     border-radius: var(--radius-md);
     padding: var(--spacing-lg);
@@ -65,45 +115,603 @@ custom_css = """
     box-shadow: var(--shadow-md);
     transition: transform 0.3s, box-shadow 0.3s;
 }
+
+.header {
+    text-align: center;
+    padding: var(--spacing-lg) 0;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: var(--spacing-lg);
+}
+
+.header-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--main-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.badge {
+    font-size: 0.7em;
+    padding: 2px 8px;
+    border-radius: 12px;
+    background: var(--accent-primary);
+    color: white;
+}
+
 .finance-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
+    border-color: var(--accent-primary);
 }
+
 .chart-container {
-    background: var(--white);
+    background: var(--main-bg);
     border-radius: var(--radius-md);
     padding: var(--spacing-md);
     margin: var(--spacing-md) 0;
     box-shadow: var(--shadow-sm);
 }
+
 .news-feed {
     max-height: 400px;
     overflow-y: auto;
     padding: var(--spacing-md);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-md);
-    background: var(--surface-1);
+    background: var(--main-bg);
 }
+
 .news-item {
     margin-bottom: var(--spacing-md);
     padding-bottom: var(--spacing-md);
     border-bottom: 1px solid var(--border-color);
 }
+
 .news-title {
     font-size: 1.1rem;
     font-weight: 600;
-    color: var(--text-color);
+    color: var(--main-text);
     margin-bottom: var(--spacing-sm);
 }
+
 .news-summary {
-    color: var(--text-color-secondary);
+    color: var(--main-text-secondary);
     line-height: 1.6;
 }
+
 .sentiment-gauge {
     width: 100%;
     height: 200px;
     margin: var(--spacing-md) 0;
 }
+
+/* Modern Financial Dashboard Styles */
+.dashboard-grid {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.ticker-tape {
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    color: white;
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    position: relative;
+}
+
+.stock-card {
+    background: white;
+    border-radius: var(--radius-md);
+    padding: 1.5rem;
+    transition: transform 0.3s ease;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.stock-card::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1));
+    transform: rotate(45deg);
+    transition: all 0.5s ease;
+}
+
+.stock-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+.stock-card:hover::before {
+    transform: rotate(45deg) translateX(50%);
+}
+
+.realtime-chart {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    background: white;
+    position: relative;
+}
+
+.chart-tooltip {
+    position: absolute;
+    background: var(--main-text);
+    color: var(--main-bg);
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-sm);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.dark-mode .ticker-tape {
+    background: linear-gradient(90deg, #1e3a8a, #991b1b) !important;
+}
+
+.dark-mode .stock-card {
+    background: #2d2d2d !important;
+}
+
+/* Modern Chat Interface */
+.persistent-chat-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 400px;
+    background: var(--main-bg);
+    border-top: 1px solid var(--border-color);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+}
+
+.dark-mode .persistent-chat-container {
+    background: #121212;
+    border-top: 1px solid #374151;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+}
+
+.chat-input-area {
+    padding: 1rem;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    gap: 0.5rem;
+}
+
+.dark-mode .chat-input-area {
+    border-top: 1px solid #374151;
+}
+
+.chat-input {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    resize: none;
+}
+
+.dark-mode .chat-input {
+    background: #1e1e1e;
+    color: white;
+    border-color: #4b5563;
+}
+
+.send-button {
+    background: var(--accent-primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 0 1.5rem;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.content-with-chat {
+    padding-bottom: 400px;
+}
+
+.tab-content {
+    padding-bottom: 400px;
+}
+
+@media (max-width: 768px) {
+    .persistent-chat-container {
+        height: 300px;
+    }
+    
+    .content-with-chat {
+        padding-bottom: 300px;
+    }
+}
+
+.stock-badge {
+    background: var(--accent-primary);
+    color: white;
+    font-size: 0.8rem;
+    padding: 0.3rem 0.6rem;
+    border-radius: 1rem;
+    display: inline-block;
+    margin-left: 0.5rem;
+}
+
+.stock-up {
+    color: #10b981;
+}
+
+.stock-down {
+    color: #ef4444;
+}
+
+.dark-mode .stock-up {
+    color: #34d399;
+}
+
+.dark-mode .stock-down {
+    color: #f87171;
+}
+
+.chart-container {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+}
+
+.dark-mode .chart-container {
+    border-color: #374151;
+}
+
+/* Add sidebar and layout CSS */
+custom_css += """
+/* Sidebar Navigation */
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 400px; /* Leave space for chat */
+    width: 250px;
+    background: var(--main-bg);
+    border-right: 1px solid var(--border-color);
+    padding: 1rem;
+    overflow-y: auto;
+    z-index: 100;
+    transition: all 0.3s ease;
+}
+
+.dark-mode .sidebar {
+    background: #1a1a1a;
+    border-right: 1px solid #333;
+}
+
+.sidebar-header {
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.nav-item {
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    transition: all 0.2s ease;
+}
+
+.nav-item:hover {
+    background: rgba(0,0,0,0.05);
+}
+
+.dark-mode .nav-item:hover {
+    background: rgba(255,255,255,0.05);
+}
+
+.nav-item.active {
+    background: var(--accent-primary);
+    color: white;
+}
+
+.nav-icon {
+    font-size: 1.25rem;
+    width: 1.5rem;
+    text-align: center;
+}
+
+/* Main Content Area */
+.main-content {
+    margin-left: 250px;
+    padding: 1rem;
+    padding-bottom: 400px; /* Space for chat */
+    min-height: calc(100vh - 400px);
+}
+
+.collapsed-sidebar .sidebar {
+    width: 60px;
+}
+
+.collapsed-sidebar .main-content {
+    margin-left: 60px;
+}
+
+.collapsed-sidebar .nav-text {
+    display: none;
+}
+
+.collapsed-sidebar .sidebar-header {
+    text-align: center;
+}
+
+/* Split Screen Mode */
+.split-screen .main-content {
+    height: calc(50vh - 200px);
+    overflow-y: auto;
+}
+
+.split-screen .persistent-chat-container {
+    height: 50vh;
+}
+
+.split-screen .content-with-chat {
+    padding-bottom: 50vh;
+}
+
+/* Toggle Buttons */
+.toggle-button {
+    position: fixed;
+    z-index: 2000;
+    background: var(--accent-primary);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.sidebar-toggle {
+    left: 260px;
+    top: 20px;
+}
+
+.split-toggle {
+    right: 80px;
+    bottom: 410px;
+}
+
+.dark-mode .toggle-button {
+    background: #333;
+}
+
+/* Improve responsive design */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 60px;
+    }
+    
+    .main-content {
+        margin-left: 60px;
+    }
+    
+    .nav-text {
+        display: none;
+    }
+    
+    .sidebar-header {
+        text-align: center;
+    }
+    
+    .sidebar-toggle {
+        left: 70px;
+    }
+}
+
+/* Add code viewer and PDF viewer styles */
+custom_css += """
+/* Tool panels */
+.tool-panel {
+    background: var(--main-bg);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-color);
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.dark-mode .tool-panel {
+    background: #1a1a1a;
+    border: 1px solid #333;
+}
+
+/* Code Editor Styles */
+.code-editor-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.code-editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.code-editor-filename {
+    font-weight: 600;
+    color: var(--main-text);
+}
+
+.code-editor-controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.code-editor-area {
+    font-family: monospace;
+    line-height: 1.5;
+    height: 100%;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    background: #f8f9fa;
+    overflow: auto;
+}
+
+.dark-mode .code-editor-area {
+    background: #1e1e1e;
+    color: #f0f0f0;
+    border-color: #333;
+}
+
+.code-editor-area.editable {
+    border-color: var(--accent-primary);
+    background: #f0f7f4;
+}
+
+.dark-mode .code-editor-area.editable {
+    background: #162922;
+}
+
+/* Enhanced PDF Viewer */
+.pdf-toolbar {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.pdf-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.pdf-sidebar {
+    width: 25%;
+    border-right: 1px solid var(--border-color);
+    overflow-y: auto;
+    padding-right: 0.5rem;
+}
+
+.pdf-content {
+    flex: 1;
+    overflow: auto;
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: var(--radius-md);
+}
+
+.dark-mode .pdf-content {
+    background: #1e1e1e;
+}
+
+.pdf-thumbnail {
+    cursor: pointer;
+    margin-bottom: 0.5rem;
+    border: 2px solid transparent;
+    border-radius: var(--radius-sm);
+    transition: all 0.2s ease;
+}
+
+.pdf-thumbnail:hover {
+    transform: translateY(-2px);
+}
+
+.pdf-thumbnail.active {
+    border-color: var(--accent-primary);
+}
+
+.pdf-search {
+    margin-bottom: 1rem;
+}
+
+.pdf-search-results {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.pdf-search-highlight {
+    background: rgba(255, 213, 0, 0.3);
+    border-radius: 2px;
+}
+
+/* Initial state with just chatbot */
+.tools-hidden .sidebar {
+    display: block;
+}
+
+.tools-hidden .main-content {
+    display: none;
+}
+
+.tools-visible .main-content {
+    display: block;
+}
+"""
+
+# Add JavaScript interactions
+financial_js = """
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    // Real-time chart interactions
+    const charts = document.querySelectorAll('.realtime-chart');
+    charts.forEach(chart => {
+        chart.addEventListener('mousemove', (e) => {
+            const tooltip = chart.querySelector('.chart-tooltip');
+            if(tooltip) {
+                tooltip.style.left = `${e.offsetX + 10}px`;
+                tooltip.style.top = `${e.offsetY + 10}px`;
+                tooltip.style.opacity = '1';
+            }
+        });
+        
+        chart.addEventListener('mouseleave', () => {
+            const tooltip = chart.querySelector('.chart-tooltip');
+            if(tooltip) tooltip.style.opacity = '0';
+        });
+    });
+
+    // Animated ticker tape
+    const ticker = document.querySelector('.ticker-tape');
+    if(ticker) {
+        let position = 0;
+        setInterval(() => {
+            position -= 1;
+            ticker.style.backgroundPosition = `${position}px 0`;
+        }, 50);
+    }
+});
+</script>
 """
 
 # Function to process PDF files
@@ -453,6 +1061,9 @@ def generate_response(message, session_id, model_name, history, current_ticker=N
             max_tokens=1024
         )
         response = completion.choices[0].message.content
+        disclaimer = "\n\n*Note: This is informational only and not financial advice. Consult a professional advisor for investment decisions.*"
+        response += disclaimer
+        
         history.append((message, response))
         return history
     except Exception as e:
@@ -698,6 +1309,7 @@ def analyze_ticker(ticker_input, period, use_brave_search=False):
         search_provider = "Brave Search" if (use_brave_search and BRAVE_API_KEY) else "Serper" if SERPER_API_KEY else "AI Knowledge Base"
         summary = f"""
 ### {ticker} Analysis (Using {search_provider})
+
 **Current Price:** ${stock_data['current_price']}  
 **52-Week High:** ${stock_data['52wk_high']}  
 **Market Cap:** ${stock_data['market_cap']:,}  
@@ -706,6 +1318,7 @@ def analyze_ticker(ticker_input, period, use_brave_search=False):
 **Beta:** {stock_data['beta']}  
 **Avg Volume:** {stock_data['average_volume']:,}  
 {sentiment_summary}
+
 For in-depth analysis of this chart, ask the chatbot by typing "/chart" or "/analyze chart".
 For latest news, type "/news {ticker}".
         """
@@ -729,14 +1342,17 @@ def analyze_image(image_file):
         mode = image.mode
         
         analysis = f"""## Technical Document Analysis
+
 **Image Properties:**
 - Dimensions: {width}x{height} pixels
 - Format: {format}
 - Color Mode: {mode}
+
 **Technical Analysis:**
 1. Document Quality:
    - Resolution: {'High' if width > 2000 or height > 2000 else 'Medium' if width > 1000 or height > 1000 else 'Low'}
    - Color Depth: {mode}
+
 2. Recommendations:
    - For text extraction, consider using PDF format
    - For technical diagrams, ensure high resolution
@@ -748,132 +1364,658 @@ def analyze_image(image_file):
     except Exception as e:
         return f"Error analyzing image: {str(e)}\n\nPlease try using PDF format instead."
 
-# Update the Gradio interface
+# Update the main interface layout with sidebar, content area, and persistent chat
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    # Shared state
     current_session_id = gr.State(None)
     pdf_state = gr.State({"page_images": [], "total_pages": 0, "total_words": 0})
-    current_ticker = gr.State(None)
+    market_data = gr.State({})
+    chat_history = gr.State([])
+    selected_tool = gr.State("market-analysis") # Default selected tool
+    is_split_screen = gr.State(False) # Split screen toggle state
+    is_sidebar_collapsed = gr.State(False) # Sidebar collapsed state
     
+    # App Header
     gr.HTML("""
     <div class="header">
-        <div class="header-title">Fin-Vision AI</div>
-        <div class="header-subtitle">Advanced Financial Analysis Assistant</div>
+        <div class="header-title">💹 Fin-Vision AI 
+            <span class="stock-badge">Market Analysis</span>
+        </div>
+        <div class="header-subtitle">Financial Document & Market Copilot</div>
     </div>
     """)
     
-    # Main container with all functionality in tabs
-    with gr.Tabs() as main_tabs:
-        # Chat Assistant Tab
-        with gr.TabItem("💬 Chat Assistant", id=0):
+    # Sidebar Navigation
+    with gr.Column(elem_classes=["sidebar"]):
+        gr.HTML("""
+        <div class="sidebar-header">
+            <div class="sidebar-logo">📊 Fin-AI</div>
+        </div>
+        """)
+        
+        with gr.Column(elem_classes=["sidebar-nav"]):
+            with gr.Group():
+                market_btn = gr.Button("📈 Market Analysis", elem_classes=["nav-item"])
+                document_btn = gr.Button("📄 Documents", elem_classes=["nav-item"])
+                economic_btn = gr.Button("📊 Economic Data", elem_classes=["nav-item"])
+                news_btn = gr.Button("📰 Financial News", elem_classes=["nav-item"])
+                portfolio_btn = gr.Button("💼 Portfolio", elem_classes=["nav-item"])
+                pdf_viewer_btn = gr.Button("📕 PDF Viewer", elem_classes=["nav-item", "active"])
+                code_editor_btn = gr.Button("💻 Code Editor", elem_classes=["nav-item"])
+                settings_btn = gr.Button("⚙️ Settings", elem_classes=["nav-item"])
+    
+    # Main Content Area
+    with gr.Column(elem_classes=["main-content"]):
+        # PDF Viewer Tool
+        with gr.Group(visible=True) as pdf_viewer_tool:
             with gr.Row():
-                with gr.Column(scale=1):
-                    model_dropdown = gr.Dropdown(
-                        choices=["llama3-70b-8192", "llama3-8b-8192", "mixtral-8x7b-32768", "gemma-7b-it"],
-                        value="llama3-70b-8192",
-                        label="Model Selection"
+                gr.Markdown("## 📕 PDF Viewer Tool")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                pdf_file_upload = gr.File(
+                    label="Upload PDF Document",
+                    file_types=[".pdf"],
+                    type="binary"
+                )
+                with gr.Row():
+                    pdf_process_btn = gr.Button("Process PDF", variant="primary")
+                    pdf_clear_btn = gr.Button("Clear", variant="secondary")
+                
+                # PDF Navigation
+                with gr.Box():
+                    gr.Markdown("### Navigation")
+                    with gr.Row():
+                        pdf_prev_btn = gr.Button("◀ Previous")
+                        pdf_page_slider = gr.Slider(
+                            minimum=1,
+                            maximum=1,
+                            step=1,
+                            label="Page",
+                            value=1
+                        )
+                        pdf_next_btn = gr.Button("Next ▶")
+                    
+                    # Search functionality
+                    with gr.Row():
+                        pdf_search_input = gr.Textbox(
+                            label="Search in PDF",
+                            placeholder="Enter search term...",
+                            elem_classes=["pdf-search"]
+                        )
+                        pdf_search_btn = gr.Button("Search")
+                    
+                    pdf_search_results = gr.Markdown(elem_classes=["pdf-search-results"])
+                    
+                    # Statistics and metadata
+                    pdf_stats = gr.Markdown(elem_classes=["stats-box"])
+            
+            with gr.Column(scale=2):
+                # PDF Display
+                with gr.Box(elem_classes=["pdf-container"]):
+                    with gr.Row():
+                        pdf_thumbnail_gallery = gr.Gallery(
+                            label="Thumbnails",
+                            elem_classes=["pdf-thumbnail-gallery"],
+                            columns=1,
+                            rows=5,
+                            height=500
+                        )
+                        
+                        pdf_display = gr.Image(
+                            label="Document View",
+                            type="pil",
+                            elem_classes=["pdf-display"],
+                            height=600
+                        )
+                
+                # Extracted text
+                pdf_text = gr.Textbox(
+                    label="Extracted Text",
+                    lines=10,
+                    max_lines=20,
+                    interactive=False,
+                    elem_classes=["pdf-text"]
+                )
+    
+    # Code Editor Tool
+    with gr.Group(visible=False) as code_editor_tool:
+        with gr.Row():
+            gr.Markdown("## 💻 Code Editor")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # File selection and management
+                code_file_upload = gr.File(
+                    label="Upload Code File",
+                    file_types=[".py", ".js", ".html", ".css", ".json", ".txt"],
+                    type="binary"
+                )
+                
+                with gr.Row():
+                    code_load_btn = gr.Button("Load File", variant="primary")
+                    code_clear_btn = gr.Button("Clear", variant="secondary")
+                
+                # File browser
+                with gr.Box():
+                    gr.Markdown("### File Browser")
+                    code_file_path = gr.Textbox(
+                        label="File Path",
+                        placeholder="Enter file path to open...",
+                        value=""
+                    )
+                    code_file_list = gr.Dropdown(
+                        label="Recent Files",
+                        choices=[],
+                        interactive=True
                     )
-                    web_search_toggle = gr.Checkbox(
-                        label="Enable Financial Search",
-                        value=True,
-                        info="Toggle web search functionality"
+                    with gr.Row():
+                        code_browse_btn = gr.Button("Browse")
+                        code_refresh_btn = gr.Button("↻ Refresh")
+                
+                # Code analysis
+                with gr.Box():
+                    gr.Markdown("### Code Analysis")
+                    code_analyze_btn = gr.Button("Analyze Code")
+                    code_analysis_results = gr.Markdown("Click 'Analyze Code' to get analysis")
+            
+            with gr.Column(scale=2):
+                # Code editor header
+                with gr.Row(elem_classes=["code-editor-header"]):
+                    code_filename = gr.Textbox(
+                        label="Filename",
+                        value="",
+                        interactive=False,
+                        elem_classes=["code-editor-filename"]
                     )
+                    with gr.Row(elem_classes=["code-editor-controls"]):
+                        code_edit_toggle = gr.Checkbox(
+                            label="Edit Mode",
+                            value=False
+                        )
+                        code_save_btn = gr.Button("Save", variant="primary")
+                
+                # Code editor
+                code_content = gr.Code(
+                    label="",
+                    language="python",
+                    value="# No file loaded\n\n# Upload or select a file to edit",
+                    interactive=False,
+                    elem_classes=["code-editor-area"]
+                )
+                
+                # Execution results
+                code_output = gr.Textbox(
+                    label="Output",
+                    lines=5,
+                    interactive=False
+                )
+    
+    # Market Analysis Tool (keeping as reference but initially hidden)
+    with gr.Group(visible=False) as market_tool:
+        gr.Markdown("## 📈 Market Analysis")
+        with gr.Row():
+            with gr.Column(scale=1):
+                ticker_input = gr.Textbox(
+                    label="Stock Ticker",
+                    placeholder="Enter ticker symbol (e.g., AAPL, MSFT)",
+                    value=""
+                )
+                period_dropdown = gr.Dropdown(
+                    choices=["1mo", "3mo", "6mo", "1y", "2y", "5y", "10y", "ytd", "max"],
+                    value="1y",
+                    label="Time Period"
+                )
+                analyze_btn = gr.Button("Analyze Stock", variant="primary")
+            
+            with gr.Column(scale=2):
+                stock_chart = gr.Plot(label="Stock Price Chart")
+                stock_info = gr.Markdown(elem_classes="finance-card")
+    
+    # Document Analysis Tool (keeping as reference but initially hidden)
+    with gr.Group(visible=False) as document_tool:
+        gr.Markdown("## 📄 Financial Documents")
+        with gr.Row():
+            with gr.Column(scale=1):
+                pdf_file = gr.File(
+                    label="Upload Financial Document",
+                    file_types=[".pdf"],
+                    type="binary"
+                )
+                upload_button = gr.Button("Process Document", variant="primary")
+                pdf_status = gr.Markdown("Upload a document to begin analysis")
+            
+            with gr.Column(scale=2):
+                with gr.Tabs():
+                    with gr.TabItem("Document Viewer"):
+                        page_slider = gr.Slider(
+                            minimum=1,
+                            maximum=1,
+                            step=1,
+                            label="Page Navigation",
+                            value=1
+                        )
+                        pdf_image = gr.Image(label="Document Page", type="pil")
+                        stats_display = gr.Markdown(elem_classes="stats-box")
+    
+    # Economic Data Tool (keeping as reference but initially hidden)
+    with gr.Group(visible=False) as economic_tool:
+        gr.Markdown("## 📊 Economic Indicators")
+        with gr.Row():
+            with gr.Column(scale=1):
+                indicator_dropdown = gr.Dropdown(
+                    choices=["GDP", "Unemployment", "Inflation", "Interest Rates", "Consumer Confidence"],
+                    value="GDP",
+                    label="Economic Indicator"
+                )
+                indicator_btn = gr.Button("Fetch Data", variant="primary")
             
+            with gr.Column(scale=2):
+                indicator_chart = gr.Plot(label="Economic Indicator")
+                indicator_info = gr.Markdown(elem_classes="finance-card")
+    
+    # News Tool (keeping as reference but initially hidden)
+    with gr.Group(visible=False) as news_tool:
+        gr.Markdown("## 📰 Financial News")
+        with gr.Row():
+            with gr.Column():
+                news_query = gr.Textbox(
+                    label="Search News",
+                    placeholder="Enter topic, company, or leave blank for top financial news"
+                )
+                news_btn = gr.Button("Get News", variant="primary")
+                news_results = gr.Markdown("Click 'Get News' to fetch the latest financial headlines")
+    
+    # Portfolio Tool (keeping as reference but initially hidden)
+    with gr.Group(visible=False) as portfolio_tool:
+        gr.Markdown("## 💼 Portfolio Tracker")
+        with gr.Row():
+            gr.Markdown("Portfolio tracking features coming soon!")
+    
+    # Settings Tool (keeping as reference but initially hidden)
+    with gr.Group(visible=False) as settings_tool:
+        gr.Markdown("## ⚙️ Settings")
+        with gr.Row():
+            with gr.Column():
+                theme_toggle = gr.Checkbox(label="Dark Mode", value=False)
+                api_key_input = gr.Textbox(
+                    label="API Key (Optional)",
+                    placeholder="Enter your own API key for extended functionality",
+                    type="password"
+                )
+                save_btn = gr.Button("Save Settings", variant="primary")
+    
+    # Toggle buttons for sidebar collapse and split screen
+    gr.HTML("""
+    <div class="sidebar-toggle toggle-button">
+        <span id="sidebar-toggle-icon">◀</span>
+    </div>
+    <div class="split-toggle toggle-button">
+        <span id="split-toggle-icon">⬍</span>
+    </div>
+    """)
+    
+    # Persistent Chat Interface
+    with gr.Column(elem_classes=["persistent-chat-container"]):
+        with gr.Column(elem_classes=["chat-messages"]) as chat_display:
             chatbot = gr.Chatbot(
-                height=600,
                 show_copy_button=True,
-                elem_classes="chat-container",
-                container=True,
-                type="messages"
+                avatar_images=(
+                    "assets/user.png",
+                    "assets/bot_finance.png"  
+                )
             )
             
-            with gr.Row():
-                msg = gr.Textbox(
-                    show_label=False,
-                    placeholder="Ask about financial markets, analyze stocks, or discuss financial documents...",
-                    scale=8
-                )
-                send_btn = gr.Button("Send", scale=1)
-            clear_btn = gr.Button("Clear Conversation")
-
-        # Document Analysis Tab
-        with gr.TabItem("📄 Document Analysis", id=1):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    pdf_file = gr.File(
-                        label="Upload Financial Document",
-                        file_types=[".pdf"],
-                        type="binary"
-                    )
-                    upload_button = gr.Button("Process Document", variant="primary")
-                    pdf_status = gr.Markdown("Upload a document to begin analysis")
+        with gr.Row(elem_classes=["chat-input-area"]):
+            msg = gr.Textbox(
+                show_label=False,
+                placeholder="Ask questions about financial data & documents...",
+                elem_classes=["chat-input"]
+            )
+            send_btn = gr.Button("Send", elem_classes=["send-button"])
+    
+    # Event Handlers for Navigation
+    def switch_to_tool(tool_name):
+        """Switch to a specific tool by name"""
+        is_market = tool_name == "market"
+        is_document = tool_name == "document"
+        is_economic = tool_name == "economic"
+        is_news = tool_name == "news"
+        is_portfolio = tool_name == "portfolio"
+        is_pdf_viewer = tool_name == "pdf_viewer"
+        is_code_editor = tool_name == "code_editor"
+        is_settings = tool_name == "settings"
+        
+        return (
+            is_market,
+            is_document,
+            is_economic,
+            is_news,
+            is_portfolio,
+            is_pdf_viewer,
+            is_code_editor,
+            is_settings,
+            "active" if is_market else "",
+            "active" if is_document else "",
+            "active" if is_economic else "",
+            "active" if is_news else "",
+            "active" if is_portfolio else "",
+            "active" if is_pdf_viewer else "",
+            "active" if is_code_editor else "",
+            "active" if is_settings else ""
+        )
+    
+    def select_market_tool():
+        return switch_to_tool("market")
+    
+    def select_document_tool():
+        return switch_to_tool("document")
+    
+    def select_economic_tool():
+        return switch_to_tool("economic")
+    
+    def select_news_tool():
+        return switch_to_tool("news")
+    
+    def select_portfolio_tool():
+        return switch_to_tool("portfolio")
+    
+    def select_pdf_viewer_tool():
+        return switch_to_tool("pdf_viewer")
+    
+    def select_code_editor_tool():
+        return switch_to_tool("code_editor")
+    
+    def select_settings_tool():
+        return switch_to_tool("settings")
+    
+    market_btn.click(
+        fn=select_market_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    document_btn.click(
+        fn=select_document_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    economic_btn.click(
+        fn=select_economic_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    news_btn.click(
+        fn=select_news_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    portfolio_btn.click(
+        fn=select_portfolio_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    pdf_viewer_btn.click(
+        fn=select_pdf_viewer_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    code_editor_btn.click(
+        fn=select_code_editor_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    settings_btn.click(
+        fn=select_settings_tool,
+        inputs=None,
+        outputs=[
+            market_tool, document_tool, economic_tool, news_tool, portfolio_tool, pdf_viewer_tool, code_editor_tool, settings_tool,
+            market_btn, document_btn, economic_btn, news_btn, portfolio_btn, pdf_viewer_btn, code_editor_btn, settings_btn
+        ]
+    )
+    
+    # Existing event handlers
+    def process_message(message, history, session_id, pdf_state, market_data):
+        if not message:
+            return history, ""
+        
+        # Access context from document analysis if available
+        context = ""
+        if session_id and session_id in user_vectorstores:
+            vectorstore = user_vectorstores[session_id]
+            docs = vectorstore.similarity_search(message, k=3)
+            if docs:
+                context = "\n\nRelevant information from financial document:\n" + "\n".join(f"- {doc.page_content}" for doc in docs)
+        
+        # Add stock market data if available
+        if market_data and 'ticker' in market_data:
+            ticker = market_data['ticker']
+            context += f"\n\nStock data for {ticker} is available from the market analysis tab."
+            if 'price' in market_data:
+                context += f"\nCurrent price: ${market_data['price']}"
+            if 'change' in market_data:
+                context += f"\nChange: {market_data['change']}%"
+        
+        # Check if it's a special command for stock lookup
+        if message.lower().startswith("/stock "):
+            ticker = message.split(" ", 1)[1].strip().upper()
+            try:
+                # Get stock data
+                stock_data = get_stock_data(ticker)
+                # Format response
+                response = f"**Stock Information for {ticker}**\n\n"
+                response += f"Current Price: ${stock_data['price']:.2f}\n"
+                response += f"Change: {stock_data['change']:.2f}% "
+                response += "📈" if stock_data['change'] > 0 else "📉"
+                response += f"\nVolume: {stock_data['volume']:,}\n"
+                response += f"Market Cap: ${stock_data['market_cap']:,.2f}\n"
                 
-                with gr.Column(scale=2):
-                    with gr.Tabs():
-                        with gr.TabItem("Document Viewer"):
-                            page_slider = gr.Slider(
-                                minimum=1,
-                                maximum=1,
-                                step=1,
-                                label="Page Navigation",
-                                value=1
-                            )
-                            pdf_image = gr.Image(label="Document Page", type="pil")
-                            stats_display = gr.Markdown(elem_classes="stats-box")
-
-        # Financial Tools Tab
-        with gr.TabItem("🔍 Financial Tools", id=2):
-            with gr.Tabs() as financial_tabs:
-                # Stock Analysis
-                with gr.TabItem("Stock Analysis"):
-                    with gr.Row():
-                        with gr.Column():
-                            ticker_input = gr.Textbox(
-                                label="Ticker Symbol",
-                                placeholder="e.g., AAPL, MSFT, GOOGL"
-                            )
-                            period_dropdown = gr.Dropdown(
-                                choices=["1mo", "3mo", "6mo", "1y", "2y", "5y", "max"],
-                                value="1y",
-                                label="Time Period"
-                            )
-                            analyze_stock_btn = gr.Button("Analyze Stock")
-                    with gr.Row():
-                        stock_chart = gr.Plot(label="Stock Price Chart")
-                    stock_analysis = gr.Markdown()
-
-                # Market News
-                with gr.TabItem("Market News"):
-                    news_ticker = gr.Textbox(
-                        label="Company/Ticker",
-                        placeholder="Enter company name or ticker symbol"
-                    )
-                    news_btn = gr.Button("Fetch News")
-                    news_results = gr.Markdown()
-
-                # Financial Report Analysis
-                with gr.TabItem("Report Analysis"):
-                    with gr.Row():
-                        with gr.Column():
-                            report_image = gr.File(
-                                label="Upload Financial Chart/Image",
-                                file_types=["image"],
-                                type="filepath"
-                            )
-                            analyze_report_btn = gr.Button("Analyze Image")
-                        with gr.Column():
-                            report_preview = gr.Image(label="Preview", type="pil")
-                    report_analysis = gr.Markdown()
-    
-    # Event Handlers
-    # [Add appropriate event handlers based on fin-vision functions]
-
-# Add footer with attribution
-gr.HTML("""
-<div style="text-align: center; margin-top: 20px; padding: 20px; color: #666; font-size: 0.9rem; border-top: 1px solid #eee;">
-    Created by Calvin Allen-Crawford<br>
-    <span style="font-style: italic; font-size: 0.8rem;">Founder of Cosmick Visions</span>
-</div>
-""")
+                # Add market data for future context
+                market_data['ticker'] = ticker
+                market_data['price'] = stock_data['price']
+                market_data['change'] = stock_data['change']
+                
+                history.append((message, response))
+                return history, ""
+            except Exception as e:
+                response = f"Error retrieving stock data for {ticker}: {str(e)}"
+                history.append((message, response))
+                return history, ""
+        
+        # Generate response
+        system_prompt = """You are a financial assistant specializing in analyzing financial data, market trends, and investment documents.
+        You provide clear, accurate information about stocks, economic indicators, and financial reports.
+        Always note that you're not providing investment advice and users should consult with a qualified financial advisor."""
+        
+        if context:
+            system_prompt += f"\nUse this context to inform your response if relevant: {context}"
+        
+        completion = client.chat.completions.create(
+            model="llama3-70b-8192",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": message}
+            ],
+            temperature=0.7,
+            max_tokens=1024
+        )
+        
+        response = completion.choices[0].message.content
+        disclaimer = "\n\n*Note: This is informational only and not financial advice. Consult a professional advisor for investment decisions.*"
+        response += disclaimer
+        
+        history.append((message, response))
+        return history, ""
+    
+    # Keep other existing event handlers
+    send_btn.click(
+        process_message,
+        inputs=[msg, chatbot, current_session_id, pdf_state, market_data],
+        outputs=[chatbot, msg]
+    )
+    
+    msg.submit(
+        process_message,
+        inputs=[msg, chatbot, current_session_id, pdf_state, market_data],
+        outputs=[chatbot, msg]
+    )
+    
+    upload_button.click(
+        process_pdf,
+        inputs=[pdf_file],
+        outputs=[current_session_id, pdf_status, pdf_state]
+    ).then(
+        update_pdf_viewer,
+        inputs=[pdf_state],
+        outputs=[page_slider, pdf_image, stats_display]
+    )
+    
+    page_slider.change(
+        update_image,
+        inputs=[page_slider, pdf_state],
+        outputs=[pdf_image]
+    )
+    
+    analyze_btn.click(
+        lambda ticker, period: (create_stock_chart(ticker, period), get_stock_analysis(ticker)),
+        inputs=[ticker_input, period_dropdown],
+        outputs=[stock_chart, stock_info]
+    ).then(
+        lambda ticker: {'ticker': ticker},
+        inputs=[ticker_input],
+        outputs=[market_data]
+    )
+    
+    indicator_btn.click(
+        lambda indicator: (get_economic_indicator_chart(indicator), get_economic_indicator_info(indicator)),
+        inputs=[indicator_dropdown],
+        outputs=[indicator_chart, indicator_info]
+    )
+    
+    # Add logic for news search
+    news_btn.click(
+        lambda query: get_financial_news(query) if query else get_financial_news("top financial news"),
+        inputs=[news_query],
+        outputs=[news_results]
+    )
+    
+    # Add JavaScript for toggle functionality
+    gr.HTML("""
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // Dark mode toggle
+        const darkModeToggle = document.querySelector('input[aria-label="Dark Mode"]');
+        if (darkModeToggle) {
+            darkModeToggle.addEventListener('change', () => {
+                document.body.classList.toggle('dark-mode', darkModeToggle.checked);
+                localStorage.setItem('dark-mode', darkModeToggle.checked);
+            });
+            
+            // Check for saved preference
+            if (localStorage.getItem('dark-mode') === 'true') {
+                darkModeToggle.checked = true;
+                document.body.classList.add('dark-mode');
+            }
+        }
+        
+        // Sidebar toggle
+        const sidebarToggle = document.querySelector('.sidebar-toggle');
+        const sidebarToggleIcon = document.getElementById('sidebar-toggle-icon');
+        
+        if (sidebarToggle) {
+            sidebarToggle.addEventListener('click', () => {
+                document.body.classList.toggle('collapsed-sidebar');
+                sidebarToggleIcon.textContent = document.body.classList.contains('collapsed-sidebar') ? '▶' : '◀';
+                localStorage.setItem('sidebar-collapsed', document.body.classList.contains('collapsed-sidebar'));
+            });
+            
+            // Check for saved preference
+            if (localStorage.getItem('sidebar-collapsed') === 'true') {
+                document.body.classList.add('collapsed-sidebar');
+                sidebarToggleIcon.textContent = '▶';
+            }
+        }
+        
+        // Split screen toggle
+        const splitToggle = document.querySelector('.split-toggle');
+        const splitToggleIcon = document.getElementById('split-toggle-icon');
+        
+        if (splitToggle) {
+            splitToggle.addEventListener('click', () => {
+                document.body.classList.toggle('split-screen');
+                document.body.classList.toggle('tools-visible');
+                splitToggleIcon.textContent = document.body.classList.contains('split-screen') ? '⬆' : '⬍';
+                localStorage.setItem('split-screen', document.body.classList.contains('split-screen'));
+            });
+            
+            // Check for saved preference
+            if (localStorage.getItem('split-screen') === 'true') {
+                document.body.classList.add('split-screen');
+                document.body.classList.add('tools-visible');
+                splitToggleIcon.textContent = '⬆';
+            } else {
+                // Default: show just chat at first
+                document.body.classList.add('tools-hidden');
+            }
+        }
+        
+        // Code editor syntax highlighting enhancement
+        const codeEditor = document.querySelector('.code-editor-area');
+        if (codeEditor) {
+            // Add line numbers
+            const addLineNumbers = () => {
+                const content = codeEditor.textContent;
+                const lines = content.split('\n');
+                const numberedLines = lines.map((line, i) => `${i+1} | ${line}`);
+                codeEditor.textContent = numberedLines.join('\n');
+            };
+            
+            // Observe when edit mode is toggled
+            const editToggle = document.querySelector('input[aria-label="Edit Mode"]');
+            if (editToggle) {
+                editToggle.addEventListener('change', () => {
+                    codeEditor.classList.toggle('editable', editToggle.checked);
+                });
+            }
+        }
+    });
+    </script>
+    """)
+    
+    # Add footer
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 20px; padding: 20px; color: #666; font-size: 0.9rem; border-top: 1px solid #eee;">
+        Created by Calvin Allen-Crawford<br>
+        <span style="font-style: italic; font-size: 0.8rem;">Founder of Cosmick Visions</span>
+    </div>
+    """)
 
 # Launch the app with modern UI
 if __name__ == "__main__":