fix chat history display

app.py

@@ -15,22 +15,29 @@ def chat_with_gpt(user_input, system_message, temperature, history):
     if not history:
         history = []
 
+    # Append the user message to the history
     history.append({"role": "user", "content": user_input})
 
+    # Get the response from the model
     response = client.chat.completions.create(
         model="gpt-3.5-turbo",
         messages=history + [{"role": "system", "content": system_message}],
         temperature=temperature
     )
 
+    # Append the assistant's response to the history
     assistant_message = response.choices[0].message.content
     history.append({"role": "assistant", "content": assistant_message})
 
     # Convert history to the format expected by gr.Chatbot
-    formatted_history = [(msg["content"], msg["role"]) for msg in history]
+    # Note: Gradio Chatbot automatically aligns user messages to the right and assistant messages to the left
+    formatted_history = [(msg["content"], "user" if msg["role"] == "user" else "assistant") for msg in history]
+    
     return formatted_history, history
 
+
 def reset_history(system_message):
+    # Return an empty conversation history
     return [], []
 
 with gr.Blocks() as demo:
@@ -48,7 +55,7 @@ with gr.Blocks() as demo:
         </style>
         <div class="responsive-container" style="display: flex; align-items: center; padding: 20px; border: 2px solid #FF0098"; border-radius: 7px;>
             <img src="https://assets.codora.ch/app/uploads/2022/04/codora-300.png" alt="Codora Logo" style="height: 60px; margin-right: 20px;">
-            <span style="font-size: 1.2em;">Erhalte <strong>15% Rabatt</strong> auf deine erste Buchung mit dem Code <strong>GAMEWEEK</strong> auf <strong><a href="https://codora.ch" style="color: #FF0098; text-decoration: none;">codora.ch ➝</a></strong><br><br>Gültig bis Sonntag, 3. März.</span>
+            <span style="font-size: 1.4em;">Erhalte <strong>15% Rabatt</strong> auf deine erste Buchung mit dem Code <strong>GAMEWEEK</strong> auf <strong><a href="https://codora.ch" style="color: #FF0098; text-decoration: none;">codora.ch ➝</a></strong><br><br>Gültig bis Sonntag, 3. März.</span>
         </div>
     """)
     gr.Markdown("## Chatte mit deinem Promptverteidiger")