Upload app.py

app.py

@@ -85,17 +85,17 @@ div[class*=" gradio-container-"] {
     display: none;
 }
 
-/* 自定义选项样式 */
+/* 自定义选项样式 - 小而精致 */
 .company-list-container label {
     display: block;
-    padding: 0.75rem 1rem;
-    margin: 0.25rem 0;
-    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    margin: 0.2rem 0;
+    border-radius: 0.25rem;
     cursor: pointer;
     transition: all 0.2s ease;
     background-color: #f9fafb;
     border: 1px solid #e5e7eb;
-    font-size: 1rem;
+    font-size: 0.875rem;
     text-align: left;
     width: 100%;
     box-sizing: border-box;
@@ -140,6 +140,42 @@ label.selected {
     background: #3b82f6 !important;
     color: white !important;
 }
+
+/* ✅ 搜索框样式 - 带内置图标 */
+.company-input-search {
+    position: relative;
+}
+
+.company-input-search input {
+    padding-left: 36px !important;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>') !important;
+    background-repeat: no-repeat !important;
+    background-position: 12px center !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    font-size: 14px !important;
+    transition: all 0.2s !important;
+}
+
+.company-input-search input:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    outline: none !important;
+}
+
+/* ✅ 对齐Tabs和ChatInterface的横线 */
+.tabs {
+    border-bottom: 1px solid #e5e7eb !important;
+}
+
+.chatbot {
+    border-top: 1px solid #e5e7eb !important;
+}
+
+/* 确保tab内容和chatbot的padding一致 */
+.tab-item {
+    padding: 16px !important;
+}
 """
 
 # 全局变量用于存储公司映射关系
@@ -542,9 +578,48 @@ def update_report_section(selected_company, report_data, stock_code):
             if not isinstance(report_data[0], dict):
                 return gr.update(value="<div>数据格式不正常</div>", visible=True)
             
+            # ✅ 可折叠的Financial Reports,默认显示5个
+            total_reports = len(report_data)
+            show_limit = 5
+            
             html_content = '<div class="report-list-box bg-white">'
-            html_content += '<div class="report-list-title bg-white card-title  left-card-title" style="border-bottom: 1px solid #e3e3e6 !important;"><h3>Financial Reports</h3></div>'
-            for report in report_data:
+            # ✅ 美化Financial Reports标题
+            html_content += '''<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                            padding: 12px; 
+                            border-radius: 8px; 
+                            text-align: center; 
+                            margin-bottom: 12px;">
+                    <h3 style="color: white; margin: 0; font-size: 16px; font-weight: 600;">Financial Reports</h3>
+                </div>'''
+            
+            # 添加CSS样式
+            html_content += '''<style>
+.report-toggle-btn {
+    background: #f3f4f6;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: #374151;
+    text-align: center;
+    margin: 8px 0;
+    width: 100%;
+    transition: all 0.2s;
+}
+.report-toggle-btn:hover {
+    background: #e5e7eb;
+}
+.report-extra {
+    display: none;
+}
+.report-extra.show {
+    display: block;
+}
+</style>'''
+            
+            # 显示前5个
+            for i, report in enumerate(report_data[:show_limit]):
                 source_url = report.get('source_url', '#')
                 period = report.get('period', 'N/A')
                 source_form = report.get('source_form', 'N/A')
@@ -559,7 +634,38 @@ def update_report_section(selected_company, report_data, stock_code):
             </div>
             '''
             
-            html_content += f'<div class="pdf-footer mt-3"><span class="text-xs text-gray-500">共{len(report_data)}份报告</span></div>'
+            # 剩余的放在可折叠区域
+            if total_reports > show_limit:
+                html_content += '<div class="report-extra" id="reportExtra">'
+                for i, report in enumerate(report_data[show_limit:]):
+                    source_url = report.get('source_url', '#')
+                    period = report.get('period', 'N/A')
+                    source_form = report.get('source_form', 'N/A')
+                    html_content += f'''
+            <div class="report-item bg-white hover:bg-blue-50 cursor-pointer" onclick="window.open('{source_url}', '_blank')">
+                <div class="report-item-content">
+                    <span class="text-gray-800">{period}-{stock_code}-{source_form}</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 10-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l-1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+            </div>
+            '''
+                html_content += '</div>'
+                
+                # 添加展开/收起按钮
+                html_content += f'''<div class="report-toggle-btn" onclick="
+                    var extra = document.getElementById('reportExtra');
+                    if (extra.classList.contains('show')) {{
+                        extra.classList.remove('show');
+                        this.innerHTML = '↓ Show All ({total_reports} reports)';
+                    }} else {{
+                        extra.classList.add('show');
+                        this.innerHTML = '↑ Show Less';
+                    }}
+                ">↓ Show All ({total_reports} reports)</div>'''
+            
+            html_content += f'<div class="pdf-footer mt-3"><span class="text-xs text-gray-500">共{total_reports}份报告</span></div>'
             html_content += '</div>'
             
             return gr.update(value=html_content, visible=True)
@@ -582,17 +688,53 @@ def update_news_section(selected_company):
             # report_data = search_news(selected_company)
             if (report_data['articles']):
                 report_data = report_data['articles']
+                
+                # ✅ 可折叠的News,默认显示5个
+                total_news = len(report_data)
+                show_limit = 5
+                
                 news_html = "<div class='news-list-box bg-white'>"
-                news_html += '<div class="report-list-title bg-white card-title  left-card-title" style="border-bottom: 1px solid #e3e3e6 !important;"><h3>News</h3></div>'
+                # ✅ 美化News标题
+                news_html += '''<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                            padding: 12px; 
+                            border-radius: 8px; 
+                            text-align: center; 
+                            margin-bottom: 12px;">
+                    <h3 style="color: white; margin: 0; font-size: 16px; font-weight: 600;">News</h3>
+                </div>'''
+                
+                # 添加CSS样式
+                news_html += '''<style>
+.news-toggle-btn {
+    background: #f3f4f6;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: #374151;
+    text-align: center;
+    margin: 8px 0;
+    width: 100%;
+    transition: all 0.2s;
+}
+.news-toggle-btn:hover {
+    background: #e5e7eb;
+}
+.news-extra {
+    display: none;
+}
+.news-extra.show {
+    display: block;
+}
+</style>'''
+                
                 from datetime import datetime
                 
-                for news in report_data:
+                # 显示前5个
+                for news in report_data[:show_limit]:
                     published_at = news['published']
-
-                    # 解析 ISO 8601 时间字符串（注意：strptime 不直接支持 'Z'，需替换或使用 fromisoformat）
                     dt = datetime.fromisoformat(published_at.replace("Z", "+00:00"))
-
-                    # 格式化为 YYYY.MM.DD
                     formatted_date = dt.strftime("%Y.%m.%d")
                     news_html += f'''
                     <div class="news-item bg-white hover:bg-blue-50 cursor-pointer" onclick="window.open('{news['url']}', '_blank')">
@@ -602,7 +744,37 @@ def update_news_section(selected_company):
                         </div>
                     </div>
                     '''
-                news_html += f'<div class="pdf-footer mt-3"><span class="text-xs text-gray-500">共{len(report_data)}条新闻</span></div>'
+                
+                # 剩余的放在可折叠区域
+                if total_news > show_limit:
+                    news_html += '<div class="news-extra" id="newsExtra">'
+                    for news in report_data[show_limit:]:
+                        published_at = news['published']
+                        dt = datetime.fromisoformat(published_at.replace("Z", "+00:00"))
+                        formatted_date = dt.strftime("%Y.%m.%d")
+                        news_html += f'''
+                    <div class="news-item bg-white hover:bg-blue-50 cursor-pointer" onclick="window.open('{news['url']}', '_blank')">
+                        <div class="news-item-content">
+                            <span class="text-xs text-gray-500">[{formatted_date}]</span>
+                            <span class="text-gray-800">{news['headline']}</span>
+                        </div>
+                    </div>
+                    '''
+                    news_html += '</div>'
+                    
+                    # 添加展开/收起按钮
+                    news_html += f'''<div class="news-toggle-btn" onclick="
+                        var extra = document.getElementById('newsExtra');
+                        if (extra.classList.contains('show')) {{
+                            extra.classList.remove('show');
+                            this.innerHTML = '↓ Show All ({total_news} news)';
+                        }} else {{
+                            extra.classList.add('show');
+                            this.innerHTML = '↑ Show Less';
+                        }}
+                    ">↓ Show All ({total_news} news)</div>'''
+                
+                news_html += f'<div class="pdf-footer mt-3"><span class="text-xs text-gray-500">共{total_news}条新闻</span></div>'
                 news_html += '</div>'
                 html_content += news_html
         except Exception as e:
@@ -673,13 +845,12 @@ def create_company_list(get_companys_state):
 
 def create_company_selector():
     """创建公司选择器组件"""
+    # ✅ 使用HTML和CSS创建带内置图标的搜索框
     company_input = gr.Textbox(
         show_label=False,
-        placeholder="company name, ticker, or CIK code",
-        elem_classes=["company-input-box"],
-        lines=1,
-        max_lines=1,
-        # container=False
+        placeholder="     Name, ticker, or CIK",  # 留出空间给图标
+        elem_classes=["company-input-search"],
+        container=False
     )
     
     # 状态消息显示区域
@@ -829,7 +1000,16 @@ def create_sidebar():
     with gr.Column(elem_classes=["sidebar"]):
         # 公司选择
         with gr.Group(elem_classes=["card"]):
-            gr.Markdown("### Select Company", elem_classes=["card-title", "left-card-title"])
+            # ✅ 美化标题:居中对齐,添加背景色
+            gr.HTML("""
+                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                            padding: 12px; 
+                            border-radius: 8px; 
+                            text-align: center; 
+                            margin-bottom: 16px;">
+                    <h3 style="color: white; margin: 0; font-size: 16px; font-weight: 600;">Select Company</h3>
+                </div>
+            """)
             with gr.Column():
                 company_list = create_company_list(get_companys_state)
                 
@@ -845,7 +1025,7 @@ def create_sidebar():
                 # 创建公司选择器
                 company_input, status_message, company_modal = create_company_selector()
                 
-                # 绑定事件
+                # 绑定事件 - 只需要submit事件
                 company_input.submit(
                     fn=update_company_choices,
                     inputs=[company_input],
@@ -990,16 +1170,18 @@ def build_income_table(table_data):
                 table_rows += f"<tr style='{row_style}'>{cells}</tr>"
             
             html = f"""
-            <div style="min-width: 400px;max-width: 600px;height: 300px !important;border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: 'Segoe UI', sans-serif;">
-                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 2L15.09 8.26L19 9.07L16 14L16 19L12 19L8 14L8 9.07L4.91 8.26L8 2L12 2Z" fill="#0066cc"/>
+            <div style="min-width: 400px;max-width: 600px;height: 300px !important;border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.08); font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); overflow: hidden;">
+                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #e5e7eb;">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2L15.09 8.26L19 9.07L16 14L16 19L12 19L8 14L8 9.07L4.91 8.26L8 2L12 2Z" fill="#3b82f6"/>
                     </svg>
-                    <div style="font-size: 18px; font-weight: 600;">Income Statement and Cash Flow</div>
+                    <div style="font-size: 19px; font-weight: 600; color: #1f2937;">Income Statement and Cash Flow</div>
+                </div>
+                <div style="overflow-y: hidden; max-height: 220px;">
+                    <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
+                        {table_rows}
+                    </table>
                 </div>
-                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
-                    {table_rows}
-                </table>
             </div>
             """
             return html
@@ -1060,18 +1242,18 @@ def create_metrics_dashboard():
                     prev_close_val = company_info.get("previous_close", "N/A")
 
                 html = f"""
-                <div style="width: 250px; height: 300px !important; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: 'Segoe UI', sans-serif;">
-                    <div style="font-size: 16px; color: #555; font-weight: 500;">{company_name}</div>
-                    <div style="font-size: 12px; color: #888;">NYSE：{symbol}</div>
-                    <div style="display: flex; align-items: center; gap: 10px; margin: 8px 0;">
-                        <div style="font-size: 32px; font-weight: bold;">{price}</div>
-                        <div style="font-size: 14px;">{change_html}</div>
+                <div style="width: 250px; height: 300px !important; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.08); font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);">
+                    <div style="font-size: 17px; color: #374151; font-weight: 600; margin-bottom: 4px;">{company_name}</div>
+                    <div style="font-size: 13px; color: #6b7280; margin-bottom: 12px;">NYSE：{symbol}</div>
+                    <div style="display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 12px; background: #f9fafb; border-radius: 8px;">
+                        <div style="font-size: 34px; font-weight: bold; color: #111827;">{price}</div>
+                        <div style="font-size: 15px;">{change_html}</div>
                     </div>
-                    <div style="margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px;">
-                        <div style="font-size: 14px; color: #555;">Open</div><div style="font-size: 14px; font-weight: 500; text-align: center;">{open_val}</div>
-                        <div style="font-size: 14px; color: #555;">High</div><div style="font-size: 14px; font-weight: 500; text-align: center;">{high_val}</div>
-                        <div style="font-size: 14px; color: #555;">Low</div><div style="font-size: 14px; font-weight: 500; text-align: center;">{low_val}</div>
-                        <div style="font-size: 14px; color: #555;">Prev Close</div><div style="font-size: 14px; font-weight: 500; text-align: center;">{prev_close_val}</div>
+                    <div style="margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px; background: white; border-radius: 8px; border: 1px solid #e5e7eb;">
+                        <div style="font-size: 14px; color: #6b7280;">Open</div><div style="font-size: 14px; font-weight: 600; text-align: right; color: #111827;">{open_val}</div>
+                        <div style="font-size: 14px; color: #6b7280;">High</div><div style="font-size: 14px; font-weight: 600; text-align: right; color: #111827;">{high_val}</div>
+                        <div style="font-size: 14px; color: #6b7280;">Low</div><div style="font-size: 14px; font-weight: 600; text-align: right; color: #111827;">{low_val}</div>
+                        <div style="font-size: 14px; color: #6b7280;">Prev Close</div><div style="font-size: 14px; font-weight: 600; text-align: right; color: #111827;">{prev_close_val}</div>
                     </div>
                 </div>
                 """
@@ -1132,15 +1314,15 @@ def create_metrics_dashboard():
                 """
             
             html = f"""
-            <div style="min-width: 300px;max-width: 450px;height: 300px !important;border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: 'Segoe UI', sans-serif;">
-                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;justify-content: space-between;">
-                    <div style="font-size: 18px; font-weight: 600;display: flex;align-items: center;">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M12 2L15.09 8.26L19 9.07L16 14L16 19L12 19L8 14L8 9.07L4.91 8.26L8 2L12 2Z" fill="#0066cc"/>
+            <div style="min-width: 300px;max-width: 450px;height: 300px !important;border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.08); font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);">
+                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #e5e7eb; justify-content: space-between;">
+                    <div style="font-size: 19px; font-weight: 600; color: #1f2937; display: flex; align-items: center;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 2L15.09 8.26L19 9.07L16 14L16 19L12 19L8 14L8 9.07L4.91 8.26L8 2L12 2Z" fill="#3b82f6"/>
                         </svg>       
                         <span style="margin-left: 10px;">{default_yearly_data} Financial Metrics</span>
                     </div>
-                    <div style="font-size: 16px; color: #8f8f8f;">
+                    <div style="font-size: 14px; color: #6b7280;">
                             YTD data
                     </div>
                 </div>
@@ -1297,15 +1479,15 @@ def update_metrics_dashboard(company_name):
             """
         
         html = f"""
-        <div style="width: 450px;height: 300px !important;border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: 'Segoe UI', sans-serif;">
-            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;justify-content: space-between;">
-                <div style="font-size: 18px; font-weight: 600;display: flex;align-items: center;">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 2L15.09 8.26L19 9.07L16 14L16 19L12 19L8 14L8 9.07L4.91 8.26L8 2L12 2Z" fill="#0066cc"/>
+        <div style="width: 450px;height: 300px !important;border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.08); font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);">
+            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #e5e7eb; justify-content: space-between;">
+                <div style="font-size: 19px; font-weight: 600; color: #1f2937; display: flex; align-items: center;">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2L15.09 8.26L19 9.07L16 14L16 19L12 19L8 14L8 9.07L4.91 8.26L8 2L12 2Z" fill="#3b82f6"/>
                     </svg>       
                     <span style="margin-left: 10px;">{yearly_data} Financial Metrics</span>
-                 </div>
-                <div style="font-size: 16px; color: #8f8f8f;">
+                </div>
+                <div style="font-size: 14px; color: #6b7280;">
                         YTD data
                 </div>
             </div>
@@ -1640,15 +1822,19 @@ def main():
                                 #     create_tab_content("comparison")
                         with gr.Column(scale=2, min_width=400):
                             # 聊天面板
-                          
-                            # chatbot.render()
-                            # gr.LoginButton()
                             # ✅ 使用 chat_direct.chatbot_response 替代 chatbot.chat_main.respond
                             # 这样可以直接调用MCP函数,而不需要HTTP服务器
                             gr.ChatInterface(
-                                chatbot_response,  # 使用直接调用的chatbot_response
-                                title="Easy Financial AI Assistant",
-                                # chat_direct.chatbot_response 不需要 additional_inputs
+                                chatbot_response,
+                                type="messages",  # ✅ 使用messages格式
+                                title="Easy Financial AI Assistant",  # ✅ 保留标题
+                                chatbot=gr.Chatbot(height=550),  # ✅ 增加聊天框高度
+                                textbox=gr.Textbox(
+                                    placeholder="Ask a financial question...",
+                                    container=False,
+                                    scale=7
+                                ),
+                                submit_btn="📤 Send"  # ✅ 添加发送按钮
                             )
             
             # 在页面加载时设置默认选中的公司并加载数据