Update app.py

app.py

@@ -4,27 +4,48 @@ from my_memory_logic import run_with_session_memory
 
 def chat_interface_fn(message, history, session_id):
     """
-    Single-turn function for Gradio's ChatInterface.
+    Multi-turn chat function for Gradio's ChatInterface.
     'session_id' is used to store conversation across turns.
     """
+    # 1) Call run_with_session_memory with user message and session_id
     answer = run_with_session_memory(message, session_id)
-    # Update local 'history' for the UI
-    history.append((message, answer))
 
-    # Convert to openai-style message dicts
+    # 2) Append the turn to the 'history' so Gradio UI displays it
+    history.append((message, answer))
+    
+    # 3) Convert into message dicts for ChatInterface
     message_dicts = []
     for user_msg, ai_msg in history:
         message_dicts.append({"role": "user", "content": user_msg})
         message_dicts.append({"role": "assistant", "content": ai_msg})
     return message_dicts, history
 
-with gr.Blocks() as demo:
+# Define custom CSS to align messages
+my_chat_css = """
+/* Center the container horizontally so there's some margin */
+.gradio-container {
+  margin: auto;
+}
+
+/* Right-align user messages */
+.user .wrap {
+  text-align: right !important;
+}
+
+/* Left-align assistant messages */
+.assistant .wrap {
+  text-align: left !important;
+}
+"""
+
+with gr.Blocks(css=my_chat_css) as demo:
+    gr.Markdown("### DailyWellnessAI (User on right, Assistant on left)")
     session_id_box = gr.Textbox(label="Session ID", value="abc123", interactive=True)
     
     chat_interface = gr.ChatInterface(
         fn=lambda msg, hist: chat_interface_fn(msg, hist, session_id_box.value),
         title="DailyWellnessAI (Session-based Memory)",
-        description="Multi-turn chat using session ID and RunnableWithMessageHistory."
+        description="Ask your questions. The session_id determines your stored memory."
     )
 
 demo.launch()