Update app.py

app.py

@@ -449,6 +449,7 @@ def clear_input():
 
 # Callback function for submit button
 def submit_story():
+    """Handle story submission and processing."""
     if st.session_state.text_input.strip():
         user_text = st.session_state.text_input.strip()
         
@@ -457,99 +458,45 @@ def submit_story():
             st.error("กรุณาเลือกธีมเรื่องราวก่อนเริ่มเขียน")
             return
 
-        # เพิ่มประโยคของผู้ใช้
-        st.session_state.story.append({
-            "role": "You",
-            "content": user_text,
-            "is_corrected": False
-        })
-        
-        # เพิ่มคำศัพท์ที่ใช้
-        words = set(user_text.lower().split())
-        st.session_state.stats['vocabulary_used'].update(words)
-        
-        # ตรวจสอบความถูกต้อง
-        feedback_data = provide_feedback(user_text, st.session_state.level)
-        is_correct = not feedback_data.get('has_errors', False)
-        
-        # อัพเดตคะแนน
-        update_points(is_correct)
-        
-        # อัพเดต achievements
-        update_achievements()
-        
-        # เพิ่มประโยคของผู้ใช้
-        story_index = len(st.session_state.story)
-        st.session_state.story.append({
-            "role": "You", 
-            "content": user_text,
-            "is_corrected": False
-        })
-        
         try:
-            # รับ feedback และประโยคที่ถูกต้อง
+            # รับ feedback และตรวจสอบความถูกต้อง
             feedback_data = provide_feedback(user_text, st.session_state.level)
             st.session_state.feedback = feedback_data
+            is_correct = not feedback_data.get('has_errors', False)
             
-            # ถ้ามีข้อผิดพลาด แสดงคำแนะนำ
-            if feedback_data['has_errors']:
-                st.markdown(f"""
-                    <div style='background-color: #fff3e0; padding: 10px; border-radius: 5px; margin: 10px 0;'>
-                        <p style='color: #ff6d00;'>🎯 คำแนะนำ:</p>
-                        <p>{feedback_data['feedback']}</p>
-                    </div>
-                """, unsafe_allow_html=True)
+            # เพิ่มประโยคของผู้ใช้ (เพิ่มครั้งเดียว)
+            st.session_state.story.append({
+                "role": "You",
+                "content": user_text,
+                "is_corrected": False,
+                "is_correct": is_correct
+            })
             
-            # Generate AI continuation using corrected text if there were errors
-            ai_response = generate_story_continuation(
-                feedback_data['corrected'] if feedback_data['has_errors'] else user_text, 
-                st.session_state.level
-            )
-            st.session_state.story.append({"role": "AI", "content": ai_response})
+            # เพิ่มคำศัพท์ที่ใช้
+            words = set(user_text.lower().split())
+            st.session_state.stats['vocabulary_used'].update(words)
+            
+            # อัพเดตคะแนนและ achievements
+            update_points(is_correct)
+            update_achievements()
+            
+            # Generate AI continuation
+            text_for_continuation = feedback_data['corrected'] if feedback_data['has_errors'] else user_text
+            ai_response = generate_story_continuation(text_for_continuation, st.session_state.level)
+            
+            # เพิ่มการตอบกลับของ AI
+            st.session_state.story.append({
+                "role": "AI", 
+                "content": ai_response
+            })
+            
+            # Clear input
+            st.session_state.text_input = ""
             
         except Exception as e:
             st.error("เกิดข้อผิดพลาดในการวิเคราะห์ประโยค กรุณาลองใหม่อีกครั้ง")
-            # Log error for debugging
             st.error(f"Debug - Error in submit_story: {str(e)}")
-        
-        # Clear input
-        st.session_state.text_input = ""
 
-('is_starter'):
-                        # แสดงประโยคเริ่มต้นพิเศษ
-                        st.markdown(f"""
-                            <div style="background-color: #f0f7ff; 
-                                      padding: 15px; 
-                                      border-radius: 8px; 
-                                      margin: 5px 0;
-                                      border-left: 4px solid #1e88e5;">
-                                <p style="color: #1e88e5; margin-bottom: 5px;">🎬 เริ่มเ���ื่อง:</p>
-                                <p style="color: #666;">{entry.get('thai_content', '')}</p>
-                                <p>{entry['content']}</p>
-                            </div>
-                        """, unsafe_allow_html=True)
-                    else:
-                        st.markdown(f"""
-                            <div style="padding: 10px; margin: 5px 0;">
-                                <p>🤖 AI: {entry['content']}</p>
-                            </div>
-                        """, unsafe_allow_html=True)
-                elif entry['role'] == 'You':
-                    status_icon = "✅ " if entry.get('is_correct') else "✍️ "
-                    if entry.get('is_corrected'):
-                        # แสดงข้อความที่ถูกแก้ไขแล้ว
-                        st.markdown(f"""
-                            <div style="padding: 10px; margin: 5px 0; background-color: #f0f9ff; border-radius: 5px;">
-                                <p>👤 You: {status_icon}{entry['content']}</p>
-                            </div>
-                        """, unsafe_allow_html=True)
-                    else:
-                        # แสดงข้อความปกติ
-                        st.markdown(f"""
-                            <div style="padding: 10px; margin: 5px 0;">
-                                <p>👤 You: {status_icon}{entry['content']}</p>
-                            </div>
-                        """, unsafe_allow_html=True)
 
 # Theme Helper Functions
 def get_available_themes(level: str) -> List[Dict]:
@@ -1580,23 +1527,15 @@ def update_points(is_correct_first_try: bool):
     )
 
 def show_story():
+    """Display the story with proper formatting."""
     story_display = st.container()
     
     with story_display:
         if not st.session_state.story:
             st.info("เลือกธีมเรื่องราวที่ต้องการเพื่อเริ่มต้นการผจญภัย!")
         else:
-            # เก็บข้อความล่าสุดของแต่ละ index
-            latest_messages = {}
-            for idx, entry in enumerate(st.session_state.story):
-                if entry['role'] == 'You':
-                    latest_messages[idx] = entry
-                else:
-                    # สำหรับข้อความของ AI ให้แสดงทุกข้อความ
-                    latest_messages[idx] = entry
-            
-            # แสดงข้อความที่ไม่ซ้ำ
-            for idx, entry in latest_messages.items():
+            # แสดงข้อความทั้งหมดตามลำดับ
+            for entry in st.session_state.story:
                 if entry['role'] == 'AI':
                     if entry.get('is_starter'):
                         # แสดงประโยคเริ่มต้นพิเศษ
@@ -1612,27 +1551,45 @@ def show_story():
                             </div>
                         """, unsafe_allow_html=True)
                     else:
+                        # แสดงข้อความ AI ปกติ
                         st.markdown(f"""
                             <div style="padding: 10px; margin: 5px 0;">
                                 <p>🤖 AI: {entry['content']}</p>
                             </div>
                         """, unsafe_allow_html=True)
                 elif entry['role'] == 'You':
+                    # กำหนดสถานะและสไตล์การแสดงผล
                     status_icon = "✅ " if entry.get('is_correct') else "✍️ "
-                    if entry.get('is_corrected'):
-                        # แสดงข้อความที่ถูกแก้ไขแล้ว
-                        st.markdown(f"""
-                            <div style="padding: 10px; margin: 5px 0; background-color: #f0f9ff; border-radius: 5px;">
-                                <p>👤 You: {status_icon}{entry['content']}</p>
-                            </div>
-                        """, unsafe_allow_html=True)
-                    else:
-                        # แสดงข้อความปกติ
-                        st.markdown(f"""
-                            <div style="padding: 10px; margin: 5px 0;">
-                                <p>👤 You: {status_icon}{entry['content']}</p>
-                            </div>
-                        """, unsafe_allow_html=True)
+                    bg_color = "#f0f9ff" if entry.get('is_corrected') else "white"
+                    
+                    st.markdown(f"""
+                        <div style="padding: 10px; 
+                                  margin: 5px 0; 
+                                  background-color: {bg_color}; 
+                                  border-radius: 5px;">
+                            <p>👤 You: {status_icon}{entry['content']}</p>
+                        </div>
+                    """, unsafe_allow_html=True)
+
+# Add CSS for consistent styling
+st.markdown("""
+    <style>
+    .story-message {
+        padding: 10px;
+        margin: 5px 0;
+        border-radius: 5px;
+    }
+    .story-message.ai {
+        background-color: #f0f7ff;
+    }
+    .story-message.user {
+        background-color: #fff;
+    }
+    .story-message.corrected {
+        background-color: #f0f9ff;
+    }
+    </style>
+""", unsafe_allow_html=True)
 
 # แสดงผลคะแนนและความสำเร็จ
 def show_achievements():