improve layout

app.py

@@ -11,7 +11,7 @@ def get_financial_summary():
         response.raise_for_status()
         data = response.json()
     except Exception:
-        data = {"revenue": 1000, "expenses": 500, "profit": 500}
+        data = {"revenue": 1000, "expenses": 500, "savings": 500}
     return data
 
 
@@ -19,29 +19,28 @@ def display_financial_charts():
     df = pd.DataFrame(
         {
             "Month": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-            "Revenue": [1000, 1200, 900, 1300, 1500, 1700],
+            "Credit": [1000, 1200, 900, 1300, 1500, 1700],
             "Expenses": [400, 600, 500, 700, 800, 900],
         }
     )
-    df["Profit"] = df["Revenue"] - df["Expenses"]
+    df["Savings"] = df["Credit"] - df["Expenses"]
 
-    fig1 = px.line(df, x="Month", y="Revenue", title="Monthly Revenue")
+    # fig1 = px.line(df, x="Month", y="Credit", title="Monthly Credit")
     fig2 = px.bar(df, x="Month", y="Expenses", title="Monthly Expenses")
-    fig3 = px.area(df, x="Month", y="Profit", title="Monthly Profit")
+    fig3 = px.area(df, x="Month", y="Savings", title="Monthly Savings")
     latest = df.iloc[-1]
     fig4 = px.pie(
-        names=["Revenue", "Expenses", "Profit"],
-        values=[latest["Revenue"], latest["Expenses"], latest["Profit"]],
+        names=["Food", "Retail", "Others"],
+        values=[latest["Credit"], latest["Expenses"], latest["Savings"]],
         title="Latest Financial Distribution",
     )
-    return fig1, fig2, fig3, fig4
+    return fig2, fig3, fig4
 
 
 def chatbot_respond(user_message, history):
     history = history or []
-
-    history.append({"role": "user", "content": user_message})
-
+    if user_message:
+        history.append({"role": "user", "content": user_message})
     try:
         response = requests.post(
             "https://green-smoke-labs-dev--green-smoke-labs-expensynth-api-server.modal.run/bot/query",
@@ -51,9 +50,8 @@ def chatbot_respond(user_message, history):
         bot_reply = (
             response.json().get("data", {}).get("raw", "Sorry, I didn't understand.")
         )
-    except Exception as e:
+    except Exception:
         bot_reply = "Server unavailable. This is a mocked reply."
-
     history.append({"role": "assistant", "content": bot_reply})
 
     return "", history, history
@@ -112,11 +110,13 @@ with gr.Blocks(
         bottom: 20px;
         right: 20px;
         width: 350px;
+        height: 620px;
         background: #fff;
         border: 1px solid #ddd;
         box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
         border-radius: 8px;
         padding: 10px;
+        overflow: visible;
     }
     #open-chat-btn {
         position: fixed;
@@ -124,6 +124,9 @@ with gr.Blocks(
         right: 20px;
         z-index: 1000;
     }
+    #chatbot-input {
+        height: 150px;
+    }
     """,
 ) as demo:
 
@@ -134,39 +137,43 @@ with gr.Blocks(
         gr.Markdown("<h1>Financial Health Dashboard</h1>", elem_classes="header")
 
     with gr.Row():
-        with gr.Column(scale=1, elem_classes="left-navbar"):
-            gr.Markdown("## Navigation")
-            for nav in ["Dashboard", "Reports", "Analytics", "Settings"]:
-                gr.Button(nav)
+        # with gr.Column(scale=1, elem_classes="left-navbar"):
+        #     gr.Markdown("## Navigation")
+        #     for nav in ["Dashboard", "Reports", "Analytics", "Settings"]:
+        #         gr.Button(nav)
 
         with gr.Column(scale=3):
             with gr.Tabs():
-                with gr.TabItem("Overview"):
-                    summary = get_financial_summary()
-                    gr.Markdown(
-                        f"""
-                        ### Summary
-                        **Revenue:** {summary['revenue']}  
-                        **Expenses:** {summary['expenses']}  
-                        **Profit:** {summary['profit']}
-                        """
-                    )
                 with gr.TabItem("Charts"):
-                    fig1, fig2, fig3, fig4 = display_financial_charts()
-                    gr.Plot(fig1)
+                    fig2, fig3, fig4 = display_financial_charts()
+                    # gr.Plot(fig1)
                     gr.Plot(fig2)
                     gr.Plot(fig3)
                     gr.Plot(fig4)
+                with gr.TabItem("Overview"):
+                    # summary = get_financial_summary()
+                    summary = chatbot_respond("What is the financial summary?", [])[-1][
+                        -1
+                    ]["content"]
+                    advice = chatbot_respond(
+                        "What financial advice can you give? Give general advice, do not give anything specific to my transactions",
+                        [],
+                    )[-1][-1]["content"]
+                    gr.Markdown(
+                        f"""### Summary\n{summary}\n\n### Financial Advice\n{advice}"""
+                    )
 
     minimized_state = gr.State(False)
 
     chat_panel = gr.Column(visible=True, elem_classes="chat-panel")
     with chat_panel:
-        gr.Markdown("### Chatbot Support")
+        gr.Markdown("### Financial Agent")
         chatbot_state = gr.State([])
         chatbot_ui = gr.Chatbot(type="messages")
         chatbot_input = gr.Textbox(
-            placeholder="Type your message...", label="Your Message"
+            placeholder="Type your message...",
+            label="Your Message",
+            elem_id="chatbot-input",
         )
         with gr.Row():
             send_btn = gr.Button("Send")
@@ -175,6 +182,12 @@ with gr.Blocks(
 
     open_btn = gr.Button("Open Chat", elem_id="open-chat-btn", visible=False)
 
+    chatbot_input.submit(
+        fn=chatbot_respond,
+        inputs=[chatbot_input, chatbot_state],
+        outputs=[chatbot_input, chatbot_state, chatbot_ui],
+        queue=False,
+    )
     send_btn.click(
         fn=chatbot_respond,
         inputs=[chatbot_input, chatbot_state],