Update app.py

app.py

@@ -281,6 +281,9 @@ def apply_correction(story_index: int, corrected_text: str):
     if 0 <= story_index < len(st.session_state.story):
         original_text = st.session_state.story[story_index]['content']
         # เก็บประวัติการแก้ไข
+        if 'corrections' not in st.session_state:
+            st.session_state.corrections = {}
+            
         st.session_state.corrections[story_index] = {
             'original': original_text,
             'corrected': corrected_text,
@@ -289,6 +292,9 @@ def apply_correction(story_index: int, corrected_text: str):
         # แก้ไขประโยคในเรื่อง
         st.session_state.story[story_index]['content'] = corrected_text
         st.session_state.story[story_index]['is_corrected'] = True
+        
+        # แสดงข้อความยืนยันการแก้ไข
+        st.success("✅ แก้ไขประโยคเรียบร้อยแล้ว!")
 
 def get_vocabulary_suggestions() -> List[str]:
     """Get contextual vocabulary suggestions with Thai translations."""
@@ -521,27 +527,16 @@ with col1:
     story_display = st.container()
 
     with story_display:
-        if not st.session_state.story:
-            st.info("เริ่มต้นผจญภัยด้วยการเขียนประโยคแรกกันเลย! | Start your adventure by writing the first sentence!")
-        else:
-            for idx, entry in enumerate(st.session_state.story):
-                if entry['role'] == 'You':
-                    col_text, col_button = st.columns([4, 1])
-                    with col_text:
-                        prefix = "👤 You (แก้ไขแล้ว):" if entry.get('is_corrected') else "👤 You:"
-                        st.write(f"{prefix} {entry['content']}")
-                    
-                    # ถ้ามี feedback และมีข้อผิด แสดงปุ่มแก้ไข
-                    if (idx in st.session_state.corrections and 
-                        not entry.get('is_corrected') and 
-                        st.session_state.feedback and 
-                        st.session_state.feedback.get('has_errors')):
-                        with col_button:
-                            if st.button(f"✍️ แก้ไขประโยค", key=f"correct_{idx}"):
-                                apply_correction(idx, st.session_state.feedback['corrected'])
-                                st.rerun()
-                elif entry['role'] == 'AI':
-                    st.write("🤖 AI:", entry['content'])
+    if not st.session_state.story:
+        st.info("เริ่มต้นผจญภัยด้วยการเขียนประโยคแรกกันเลย! | Start your adventure by writing the first sentence!")
+    else:
+        for idx, entry in enumerate(st.session_state.story):
+            if entry['role'] == 'You':
+                # ถ้าประโยคถูกแก้ไขแล้ว แสดงไอคอนดินสอ
+                correction_status = "✍️ " if entry.get('is_corrected') else ""
+                st.write(f"👤 You: {correction_status}{entry['content']}")
+            elif entry['role'] == 'AI':
+                st.write("🤖 AI:", entry['content'])
     
     # User Input Box
     st.markdown("""
@@ -569,11 +564,63 @@ with col2:
     if st.session_state.feedback:
         st.markdown("""
             <div class="thai-eng">
-                <div class="thai">📝 คำแนะนำ</div>
+                <div class="thai">📝 คำแนะนำจากครู</div>
                 <div class="eng">Writing Feedback</div>
             </div>
         """, unsafe_allow_html=True)
-        st.markdown(f"*{st.session_state.feedback}*")
+        
+        # แสดง feedback ในรูปแบบที่อ่านง่าย
+        feedback_container = st.container()
+        with feedback_container:
+            if st.session_state.feedback.get('has_errors', False):
+                st.markdown(f"""
+                    <div style='background-color: #f0f2f6; 
+                           padding: 15px; 
+                           border-radius: 8px; 
+                           border-left: 4px solid #FF9800;
+                           margin: 5px 0;
+                           font-family: "Sarabun", sans-serif;'>
+                        <p style='color: #1e88e5; margin-bottom: 10px;'>
+                            {st.session_state.feedback['feedback']}
+                        </p>
+                        <p style='color: #666; font-size: 0.9em;'>
+                            ประโยคที่ถูกต้อง:<br/>
+                            <span style='color: #4CAF50; font-weight: bold;'>
+                                {st.session_state.feedback['corrected']}
+                            </span>
+                        </p>
+                        <button class='correction-button' onclick='submit_correction()'>
+                            ✍️ แก้ไขประโยคให้ถูกต้อง
+                        </button>
+                    </div>
+                """, unsafe_allow_html=True)
+                
+                # ปุ่มแก้ไขประโยค
+                if st.button("✍️ แก้ไขประโยคให้ถูกต้อง", key="correct_last"):
+                    last_user_entry_idx = next(
+                        (i for i, entry in reversed(list(enumerate(st.session_state.story))) 
+                         if entry['role'] == 'You'),
+                        None
+                    )
+                    if last_user_entry_idx is not None:
+                        apply_correction(
+                            last_user_entry_idx, 
+                            st.session_state.feedback['corrected']
+                        )
+                        st.rerun()
+            else:
+                st.markdown(f"""
+                    <div style='background-color: #f0f2f6; 
+                           padding: 15px; 
+                           border-radius: 8px; 
+                           border-left: 4px solid #4CAF50;
+                           margin: 5px 0;
+                           font-family: "Sarabun", sans-serif;'>
+                        <p style='color: #1e88e5;'>
+                            ✨ {st.session_state.feedback['feedback']}
+                        </p>
+                    </div>
+                """, unsafe_allow_html=True)
     
     # Help and Suggestions Box
     st.markdown("""