AI Result Templates (UI/UX Specification)

Context: This document defines the Visual Structure and Component Hierarchy for each AI Deep Resource Widget. Use this as a checklist for implementation to ensure each Action Result has a distinct identity.

1. ACT_AI_PLAN - The Rescue Mission (Catch-up Plan)

Metaphor: A tactical map to recover from missed sessions. Core Identity: Urgent, Linear, Action-oriented.

Structural Breakdown

1. Header (Status):
   • Icon: Alert Triangle (Pulse animation).
   • Title: “Kế hoạch Gỡ bài” (Rescue Mission).
   • Summary Text: “Bạn vắng X buổi. Cần Y phút để bắt kịp.”
2. Body (The Timeline):
   • Layout: Vertical timeline connected by a line.
   • Node: Date & Session Title.
   • Badge: “Absent” (Red) or “Late” (Yellow).
3. Card Content (The Cure):
   • Resource Pair:
     • Video: “Xem đoạn [Timestamp]” (Deep link to specific clip).
     • Slide: “Slide tóm tắt” (Page count).
   • MVP Checklist (Minimum Viable Practice):
     • List of high-priority tasks only.
     • Interaction: Checkbox click -> Strike-through effect + Progress update.
4. Footer:
   • Link: “Xem đầy đủ lộ trình”.

---

2. ACT_AI_EXPLAIN - The Concept Clarifier

Metaphor: A rich interactive flashcard. Core Identity: Educational, Comparative, Clear.

Structural Breakdown

1. Header (Topic):
   • Decorator: Gradient Bar (Brand to Info).
   • Icon: Lightbulb.
   • Title: Concept Name (e.g., “Linearthinking”).
2. Definition Block:
   • Simple, human-readable definition (no academic jargon).
   • Background: Subtle fill.
3. Key Takeaways:
   • Bulleted list with “Why it matters” focus.
4. Contrast Block (The Core):
   • Layout: Split view (Mobile: Stacked, Desktop: Side-by-side).
   • Left (Bad): “Common Mistake” (Red bg/border).
   • Right (Good): “DOL Mindset” (Green bg/border).
   • Explanation: Quote/Italic text explaining the shift.
5. Footer (Connections):
   • Chips: “Related Concepts” (Clickable to spawn new Clarifier).

---

3. ACT_AI_SCHEDULE_PREP - The Forward Link

Metaphor: A focused periscope into the future. Core Identity: Anticipatory, Preparedness.

Structural Breakdown

1. Header:
   • Title: “Timeline Học tập” (Next 7 Days).
   • Meta: “Sắp diễn ra” count.
2. Body (Future Timeline):
   • Layout: Vertical timeline (distinct style from Catch-up, maybe dotted line).
   • Node: Session Date.
3. Session Card:
   • Status: “Urgent” (if < 24h).
   • Prep Item (The Forward):
     • Icon: Video/Doc.
     • Text: “Cần xem trước: [Material Name]”.
     • Action: “View”.
   • Debt Alert (The Backward):
     • Style: Red warning box.
     • Text: “Nợ bài unit trước: [Task Name]”.
     • Button: “Làm ngay”.

---

4. ACT_VOCAB_CONNECT - The Vocab Bridge

Metaphor: A bridge connecting specific words to future contexts. Core Identity: Contextual, timely relevance.

Structural Breakdown

1. Header:
   • Decorator: Gradient (Info to Brand).
   • Tag: “Vocab Bridge” + Source (“Saved 2 days ago”).
2. Word Hero:
   • Typography: Large Bold Serif/Sans (e.g., “Procrastinate”).
   • Phonetic: IPA representation.
   • Action: “Reveal Meaning” (Click to uncover translation).
3. Future Context Block (The Bridge):
   • Visual: “Connection” Icon/Line.
   • Alert: “Xuất hiện trong bài ngày mai”.
   • Content: A sample sentence from the upcoming lesson containing the word.
   • Highlight: The key word is underlined/bolded within the sentence.
   • Meta: Lesson Title & Type (e.g., “Unit 5: Speaking”).
4. Actions:
   • “Got it” vs “Forgot”.

---

5. ACT_AI_ERROR_BANK - The Mistake Clinic

Metaphor: A diagnostic report & prescription. Core Identity: Analytical, remedial.

Structural Breakdown

1. Header:
   • Icon: Target / Crosshair.
   • Title: “Mistake Clinic” (Phân tích lỗi sai).
2. List (Error Clusters):
   • Layout: Ranked list (most frequent first).
   • Item Structure:
     • Severity: High/Medium/Low indicator.
     • Type: Tag (Grammar/Vocab).
     • Topic: “Subject-Verb Agreement”.
     • Evidence: “Example: [Wrong Sentence]”.
   • Hover Action: “Fix It” button appears.
3. Footer:
   • Metric: “You fixed X% of errors”.

---

6. ACT_AI_SESSION_SUMMARY - The Smart Notebook

Metaphor: A curated editorial page. Core Identity: Reflective, Condensed.

Structural Breakdown

1. Header:
   • Title: “Smart Lecture Notes”.
   • Context: Teacher Name + Session Date.
2. Teacher’s Quote (The Hook):
   • Style: Blockquote with large inverted commas.
   • Content: The “Golden Rule” of the session.
3. Key Takeaways:
   • List of 2-3 crucial points.
   • Rich Text: Bold key terms.
4. Linked Homework:
   • Small card linking to the specific homework assigned in that session.

---

7. ACT_AI_STATS - The Dashboard

Metaphor: A cockpit HUD (Heads-up Display). Core Identity: Quantitative, Visual.

Structural Breakdown

1. Chart Area:
   • Radar Chart: Skill Balance (L/R/W/S).
   • Trend Line: Score progression over 4 weeks.
2. Metric Cards:
   • Row of small stats: Attendance %, HW Completion %, Avg Band.
3. Insight Text:
   • Generated analysis paragraph below charts explaining the “Why”.