Update app.py

app.py

@@ -179,10 +179,13 @@ def initialize_chat():
     try:
         welcome = tutor.get_welcome_message()
         welcome_audio = text_to_speech(welcome)
-        return [(None, welcome)], welcome_audio, f"🎤 Sam: {welcome}", ""
+        history = [{"role": "assistant", "content": welcome}]
+        return history, welcome_audio, f"🎤 Sam: {welcome}", ""
     except Exception as e:
         print(f"Error initializing chat: {str(e)}")
-        return [(None, "Hi! I'm Sam, your English tutor. What's your name?")], None, "🎤 Sam: Hi! I'm Sam, your English tutor. What's your name?", ""
+        welcome_msg = "Hi! I'm Sam, your English tutor. What's your name?"
+        history = [{"role": "assistant", "content": welcome_msg}]
+        return history, None, f"🎤 Sam: {welcome_msg}", ""
 
 def process_audio(audio, history, transcript, corrections):
     try:
@@ -195,29 +198,25 @@ def process_audio(audio, history, transcript, corrections):
 
         bot_response_json = tutor.get_bot_response(user_message)
         
-        # Extract the JSON response for corrections
         try:
             response_dict = json.loads(bot_response_json) if isinstance(bot_response_json, str) else bot_response_json
         except:
             response_dict = {"response": bot_response_json}
         
-        # Format response for TTS (without corrections and vocabulary)
         tts_response = response_dict.get("response", bot_response_json)
         if response_dict.get("encouragement"):
             tts_response += f" {response_dict['encouragement']}"
         
-        # Generate audio from clean response
         audio_response = text_to_speech(tts_response)
         
-        # Format full response for chat display
         formatted_response = tutor._format_response(response_dict) if hasattr(tutor, '_format_response') else bot_response_json
 
         history = history or []
-        history.append((user_message, formatted_response))
+        history.append({"role": "user", "content": user_message})
+        history.append({"role": "assistant", "content": formatted_response})
         
         new_transcript = transcript + f"\n\n🎤 You: {user_message}\n🤖 Sam: {tts_response}"
         
-        # Update corrections display
         new_corrections = corrections
         if response_dict.get("corrections") or response_dict.get("vocabulary"):
             correction_text = ""
@@ -253,8 +252,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         with gr.Column(scale=3):
             chatbot = gr.Chatbot(
                 height=500,
-                bubble_full_width=False,
                 show_label=False,
+                type='messages',
                 avatar_images=("🎤", "🤖")
             )
             
@@ -276,27 +275,25 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                     )
         
         with gr.Column(scale=2):
-            with gr.Box():
-                gr.Markdown("### 📝 Live Transcript")
-                transcript_display = gr.Textbox(
-                    lines=10,
-                    max_lines=10,
-                    show_label=False,
-                    interactive=False,
-                    placeholder="Your conversation will appear here...",
-                    autoscroll=True
-                )
+            gr.Markdown("### 📝 Live Transcript")
+            transcript_display = gr.Textbox(
+                lines=10,
+                max_lines=10,
+                show_label=False,
+                interactive=False,
+                placeholder="Your conversation will appear here...",
+                container=True
+            )
             
-            with gr.Box():
-                gr.Markdown("### 📚 Learning Corner")
-                corrections_display = gr.Textbox(
-                    lines=8,
-                    max_lines=8,
-                    show_label=False,
-                    interactive=False,
-                    placeholder="Grammar corrections and vocabulary suggestions will appear here...",
-                    autoscroll=True
-                )
+            gr.Markdown("### 📚 Learning Corner")
+            corrections_display = gr.Textbox(
+                lines=8,
+                max_lines=8,
+                show_label=False,
+                interactive=False,
+                placeholder="Grammar corrections and vocabulary suggestions will appear here...",
+                container=True
+            )
     
     with gr.Row():
         clear_btn = gr.Button("🔄 Start New Conversation", variant="secondary", size="lg")