# แนวทางสร้าง LINE Flex (สำหรับ AI/นักพัฒนา)
หลักการทั่วไป
- ข้อความ Flex ต้องเป็น JSON ชัดเจน โดยโครงสร้างอยู่ใน `contents` และ `type` เป็น `bubble` หรือ `carousel`
- กรุณาส่งเฉพาะ JSON ของ message (ไม่ต้องใส่ Markdown หรือ code fences)
- ยึดสเปก LINE Flex อย่างเคร่งครัด: ชื่อชนิด (`type`), รูปแบบกล่อง (`box`), การจัดวาง (`layout`), และรายการ `contents`
- สั้น กระชับ อ่านง่าย ชื่อหัวเรื่อง/ป้ายกำกับควรเป็นไทยชัดเจน
- ถ้ามีไฟล์ความรู้ (knowledge) ให้ “อ้างอิงข้อมูลจากไฟล์เท่านั้น” ห้ามเดาข้อมูลใหม่
เมื่อควรใช้ Bubble หรือ Carousel
- Bubble: ใช้เมื่อนำเสนอ “หนึ่งรายการ/หนึ่งบล็อกข้อมูล” เช่น เวลาทำการของสาขาเดียว เมนูเด่นหนึ่งอย่าง
- Carousel: ใช้เมื่อมี “หลายรายการ” ที่ต้องเลื่อนดู เช่น เวลาทำการหลายสาขา รายการเมนูหลายจาน ฯลฯ
โครงขั้นต่ำที่ถูกต้อง (Bubble)
```
{
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ "type": "text", "text": "หัวข้อ" },
{ "type": "text", "text": "รายละเอียด" }
]
}
}
```
ตัวอย่าง (เวลาทำการ — Bubble)
```
{
"type": "flex",
"altText": "เวลาทำการร้าน",
"contents": {
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ "type": "text", "text": "เวลาทำการ" },
{ "type": "text", "text": "สาขา Central: 10:00-21:00" }
]
}
}
}
```
แนวทางการออกแบบที่ควรทำ
- `altText` ต้องสั้นและสรุปใจความ เช่น “เวลาทำการร้าน”, “โปรโมชัน 9.9”
- ใช้ข้อความไทยชัดเจน ไม่ยาวเกินจำเป็น
- อย่าใส่ปุ่ม/ลิงก์ที่ไม่ทำงานจริง
- ถ้ามีหลายรายการ ให้แต่ละ bubble แสดงชื่อสั้น + ค่าหลัก (เช่น เวลา/ราคา)
ข้อควรระวัง
- Flex ผิดสเปกจะแสดงผลไม่ได้: ตรวจชนิด `type`, โครง `body`, และองค์ประกอบ `contents` ให้ถูกต้อง
- หากใช้ไฟล์ความรู้ ให้ดึงข้อมูลจากไฟล์เท่านั้น ไม่เดาค่าที่ไม่มีในไฟล์
- เมื่อไม่แน่ใจว่าควร Flex หรือข้อความธรรมดา ให้เลือกข้อความธรรมดา (push_text) ก่อน