คลิกแก้พรีวิว (Click-to-Edit)

นอกจากคุยกับ AI ในแชท คุณยังสามารถคลิกตรงพรีวิวเพื่อชี้ส่วนที่อยากแก้ได้โดยตรง — ไม่ต้องอธิบายเป็นคำพูด

วิธีใช้

1. เปิด Select Mode

ที่มุมขวาล่างของพรีวิวมีปุ่มเขียว:

เลือกส่วนที่จะแก้

คลิกปุ่มนี้ → ตัวชี้เปลี่ยน + ทุกองค์ประกอบในเว็บจะมีกรอบเขียวปรากฏเมื่อเลื่อนเมาส์

2. ชี้องค์ประกอบ

เลื่อนเมาส์บนพรีวิว — จะเห็น:

• กรอบสีเขียว ล้อมรอบองค์ประกอบที่กำลังชี้
• Tooltip บอกชื่อไฟล์ + บรรทัด เช่น src/sections/Hero.tsx:14:3

3. คลิกองค์ประกอบที่อยากแก้

เมื่อคลิก:

• กรอบเปลี่ยนเป็นสีฟ้า (selected)
• กล่องเล็กๆ ปรากฏที่ด้านล่าง — พิมพ์คำสั่งแก้ไข เช่น:
  • "ใหญ่ขึ้น 20%"
  • "เปลี่ยนเป็นสีเขียวเข้ม"
  • "ลบทิ้ง"
  • "เปลี่ยนข้อความเป็น 'สั่งเลย!'"

4. ส่งคำสั่ง

• กด Enter → AI เริ่มแก้ทันที
• หรือกดปุ่ม ส่ง
• ปุ่มเขียวจะหายไป โหมด Select ปิดอัตโนมัติ
• แชทจะแสดง:

  src/sections/Hero.tsx:14:3 — "ใหญ่ขึ้น 20%"

ลากย้ายปุ่มเขียว

ถ้าปุ่มเขียวบังเนื้อหาที่คุณอยากดู:

• กดค้างที่ปุ่ม + ลาก → ย้ายไปวางที่ไหนก็ได้ในพรีวิว
• ระบบจำตำแหน่งใน localStorage — ครั้งหน้าจะอยู่ที่เดิม

ข้อจำกัด

ใช้ได้ดีกับ

• HTML / CSS / Vanilla JS
• React (.jsx / .tsx)
• Vue / Svelte components

ระบบจะเพิ่ม data-source="<file>:<line>:<col>" attribute ลงในทุก element ตอน build เพื่อให้ click-to-edit รู้ว่าจะแก้บรรทัดไหน

ใช้ไม่ได้กับ

• Built/minified bundle ที่ไม่มี source map — ระบบจะ fallback ไปใช้ "signature" (text content + tag name) ในการระบุ element ให้ AI แต่ความแม่นยำลดลง
• Iframe ภายในเว็บคุณเอง — ระบบ click-to-edit อยู่ใน iframe ชั้นเดียวเท่านั้น

ปิด Click-to-Edit ชั่วคราว

• คลิกปุ่มเขียวอีกครั้ง → ปิดโหมด select
• หรือกด Esc บนคีย์บอร์ด