จัดการ Rich Message

ภาพรวม

Rich Message คือชุดข้อความที่ประกอบขึ้นจากรายการเนื้อหาได้สูงสุด 5 รายการ แล้วส่งออกไปยังผู้ใช้ LINE เป็นข้อความติดกันหลายบับเบิล โมดูลนี้ทำหน้าที่ประกอบเนื้อหา ตรวจความครบถ้วนของแต่ละรายการ และแสดงตัวอย่างผลลัพธ์ในรูปแบบหน้าจอแชท

ผู้ใช้หลักคือทีมคอนเทนต์และทีมการตลาด

จุดสำคัญที่ต้องเข้าใจคือ Rich Message ไม่ได้ถูกส่งออกจากหน้านี้ แต่เป็นคลังเนื้อหาที่โมดูลอื่นเลือกไปใช้ ได้แก่ แคมเปญ ตอบกลับอัตโนมัติ กฎทริกเกอร์ และเวิร์กโฟลว์ การจัดตารางส่งและสถิติการส่งจึงอยู่ในโมดูลเหล่านั้น ไม่ใช่ที่นี่

แต่ละรายการเนื้อหาเลือกชนิดได้ 6 แบบ

ชนิด	รายละเอียด	เกณฑ์ที่ถือว่าครบถ้วน
ข้อความ (text)	ข้อความตัวอักษรธรรมดา	มีข้อความที่ไม่ใช่ช่องว่าง
รูปภาพ (image)	รูปภาพเดี่ยว	มีไฟล์รูปภาพ
วิดีโอ (video)	วิดีโอพร้อมภาพตัวอย่าง	มีไฟล์วิดีโอที่อัปโหลดสำเร็จแล้ว
รูปภาพกดได้ (tappable image)	รูปภาพที่แบ่งพื้นที่กดได้หลายจุด	มีไฟล์รูปภาพ (ไม่บังคับว่าต้องตั้งพื้นที่กดแล้ว)
Flex	เขียน Flex JSON เอง	มีเนื้อหา JSON
Template Message	อ้างอิงเทมเพลตที่สร้างไว้แล้ว	เลือกเทมเพลตและดึงเนื้อหามาได้สำเร็จ

รูปภาพกดได้ต่างจากริชเมนูตรงที่ ไม่มีแม่แบบเลย์เอาต์สำเร็จรูป ทุกพื้นที่ต้องลากวาดเองบนรูป

นอกจากนี้ Rich Message หนึ่งชุดผูก Quick Reply ได้หนึ่งชุด ซึ่งจะแสดงเป็นปุ่มใต้ข้อความสุดท้าย

Business Flow

1. หน้ารายการ

1. เมื่อเปิดหน้า ระบบตรวจสิทธิ์ก่อน แล้วโหลดเงื่อนไขการค้นหาล่าสุดจาก sessionStorage
2. ตารางแสดงลำดับ ชื่อ Rich Message (คลิกเพื่อดูรายละเอียด) วันที่สร้าง (กำกับว่าเป็นเวลาประเทศไทย) และปุ่มดำเนินการ
3. ปุ่มดำเนินการมีสี่ปุ่ม คือ ดูรายละเอียด แก้ไข คัดลอก และลบ โดยไม่มีกฎธุรกิจที่ปิดปุ่มใดในสถานะใด
4. ตัวกรองมีสองช่อง คือ ค้นหาจากชื่อ และช่วงวันที่สร้าง โดยช่วงวันที่ถูกตีความเป็นเวลาประเทศไทยแล้วแปลงเป็นเวลามาตรฐานก่อนส่งไปยังเซิร์ฟเวอร์
5. การลบต้องยืนยันผ่านกล่องข้อความก่อนเสมอ

ข้อควรทราบ — ปุ่มล้างตัวกรองในหน้านี้ล้าง cache ตัวกรองของทุกหน้าในระบบ ไม่ใช่เฉพาะหน้านี้ และตัวเลือกเวลาในตัวกรองช่วงวันที่ยังปิดเวลาที่ผ่านมาแล้ว ซึ่งไม่สอดคล้องกับการค้นหาข้อมูลย้อนหลัง

2. ประกอบชุดข้อความ

1. หน้าฟอร์มรองรับสี่โหมด คือ สร้างใหม่ แก้ไข คัดลอก และดูรายละเอียด
2. หน้าจอแบ่งเป็นสองฝั่ง ฝั่งซ้ายเป็นส่วนกรอกข้อมูล ประกอบด้วยชื่อ Rich Message ตัวเลือก Quick Reply และรายการเนื้อหา ส่วนฝั่งขวาเป็นหน้าจอตัวอย่างที่ตรึงติดขอบบนไว้ให้เห็นตลอดขณะเลื่อนหน้า
3. รายการเนื้อหาแต่ละรายการเป็นการ์ดที่มีสัญลักษณ์บอกความครบถ้วนอยู่ที่หัวการ์ด และมีปุ่มเลื่อนขึ้น เลื่อนลง และลบ โดยลบไม่ได้เมื่อเหลือเพียงรายการเดียว และการลบรายการที่กรอกครบแล้วต้องยืนยันก่อน
4. ปุ่มเพิ่มรายการจะถูกปิดเมื่อครบ 5 รายการ อยู่ในโหมดดูรายละเอียด หรือยังมีรายการที่กรอกไม่ครบค้างอยู่
5. การเปลี่ยนชนิดของรายการที่กรอกครบแล้วจะเตือนก่อน เพราะข้อมูลของชนิดเดิมจะถูกล้างทิ้ง
6. ลำดับของรายการในฟอร์มคือลำดับบับเบิลที่ผู้ใช้ LINE จะเห็น การเลื่อนขึ้นลงจึงเปลี่ยนลำดับการแสดงผลจริง

3. ข้อกำหนดของแต่ละชนิดเนื้อหา

• ข้อความ — ยาวได้ไม่เกิน 500 ตัวอักษร พร้อมตัวนับจำนวนตัวอักษร
• รูปภาพ — รับไฟล์ JPG, JPEG และ PNG ขนาดไม่เกิน 10 เมกะไบต์ ระบบตรวจทั้งประเภทไฟล์ นามสกุล และขนาด ก่อนรับเข้าระบบ
• วิดีโอ — รับไฟล์ MP4, M4V และ MOV ขนาดไม่เกิน 200 เมกะไบต์
• รูปภาพกดได้ — รับ JPG และ PNG ขนาดไม่เกิน 10 เมกะไบต์ และความกว้างต้องอย่างน้อย 1040 พิกเซล เมื่ออัปโหลดผ่านแล้วระบบเปิดหน้าต่างตั้งพื้นที่กดให้อัตโนมัติ
• Flex — กรอก JSON ในกล่องข้อความ โดยระบบตรวจว่าเป็น JSON ที่ถูกต้อง
• Template Message — เลือกจากรายการเทมเพลตที่เปิดใช้งานอยู่ พร้อมปุ่มโหลดรายการใหม่

4. ขั้นตอนการอัปโหลดวิดีโอ

การอัปโหลดวิดีโอเป็นขั้นตอนที่แยกจากการบันทึกฟอร์ม และเริ่มทำงานทันทีที่ผู้ใช้เลือกไฟล์

1. ระบบสร้างภาพตัวอย่างในเบราว์เซอร์เอง โดยจับภาพเฟรมที่วินาทีที่หนึ่ง
2. ส่งไฟล์วิดีโอพร้อมภาพตัวอย่างขึ้นเซิร์ฟเวอร์ พร้อมแสดงแถบความคืบหน้าประจำรายการนั้น
3. เมื่อสำเร็จ ระบบเก็บที่อยู่ของวิดีโอและภาพตัวอย่างไว้ ทำให้ตอนบันทึกฟอร์มส่งเป็นที่อยู่ ไม่ใช่ไฟล์
4. หากล้มเหลว ระบบแจ้งเตือนและล้างค่าของรายการนั้นให้กรอกใหม่
5. วิดีโอที่ยังอัปโหลดไม่เสร็จจะไม่ปรากฏในหน้าจอตัวอย่าง

5. การตั้งพื้นที่กดบนรูปภาพ

1. หน้าต่างตั้งพื้นที่กดแสดงรูปภาพทางฝั่งซ้าย โดยย่อให้มีความกว้างคงที่แล้วคำนวณสัดส่วนจากขนาดจริงของรูป
2. ผู้ใช้ลากเมาส์บนรูปเพื่อวาดกรอบสี่เหลี่ยม ลากได้ทุกทิศทาง กรอบจะเป็นเส้นประสีเขียวขณะวาด และเปลี่ยนเป็นสีแดงพร้อมข้อความเตือนเมื่อทับกับพื้นที่เดิม
3. เงื่อนไขในการเพิ่มพื้นที่คือ ต้องไม่ทับพื้นที่เดิม ต้องมีขนาดใหญ่พอสมควร และรวมกันไม่เกิน 20 พื้นที่
4. เมื่อนำเมาส์ไปวางบนพื้นที่ที่วาดไว้แล้ว ระบบจะสลับเป็นโหมดลากย้าย ทำให้ปรับตำแหน่งได้โดยไม่วาดพื้นที่ใหม่ทับ พร้อมป้องกันไม่ให้เลื่อนออกนอกขอบรูปหรือทับพื้นที่อื่น
5. พื้นที่แต่ละจุดมีป้ายกำกับเป็นตัวอักษร A, B, C ตามลำดับ และการลบพื้นที่จะจัดลำดับตัวอักษรใหม่ให้อัตโนมัติ
6. แต่ละพื้นที่กำหนดการกระทำได้สามแบบ คือ เปิดลิงก์ ส่งข้อความ (ซึ่งช่วยเติมคำจากคีย์เวิร์ดของระบบตอบกลับอัตโนมัติ) และโทรออก
7. ปุ่มบันทึกจะถูกปิดจนกว่าจะมีพื้นที่อย่างน้อยหนึ่งจุด ส่วนโหมดดูรายละเอียดจะปิดการวาด ลาก และลบทั้งหมด

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

6. หน้าจอตัวอย่างและการบันทึก

1. หน้าจอตัวอย่างอัปเดตอัตโนมัติแบบหน่วงเวลาเล็กน้อยขณะผู้ใช้พิมพ์ โดยแสดงเฉพาะรายการที่กรอกครบแล้วเท่านั้น
2. หากผูก Quick Reply ไว้ ระบบจะดึงรายการปุ่มมาแสดงใต้ข้อความสุดท้ายด้วย
3. ปุ่มบันทึกจะเปิดใช้งานเมื่อไม่มีข้อผิดพลาดค้างอยู่ มีชื่อ Rich Message และ ทุกรายการเนื้อหาผ่านเกณฑ์ความครบถ้วน
4. การสร้างใหม่และการคัดลอกจะบันทึกทันทีโดยไม่ถามยืนยัน ส่วนการแก้ไขจะเปิดกล่องยืนยันก่อน
5. หากเซิร์ฟเวอร์แจ้งข้อผิดพลาดที่ระบุรายการและฟิลด์ได้ ระบบจะแสดงข้อความที่รายการนั้นและทำเครื่องหมายว่ายังไม่ครบถ้วน มิฉะนั้นจะเปิดกล่องแจ้งข้อผิดพลาด

หน้าจอและองค์ประกอบหลัก

หน้ารายการ

ตัวควบคุมรายการ (src/components/rich-message-management/list/rich-message-management.container.tsx) ดูแลตาราง ตัวกรอง การแบ่งหน้า และการลบ โดยมีตารางและฟอร์มตัวกรองเป็นคอมโพเนนต์แสดงผลแยก

หน้าฟอร์ม

ฟอร์มแบ่งเป็นตัวควบคุมที่ดูแลการโหลดและแปลงข้อมูล การประกอบข้อมูลส่งเซิร์ฟเวอร์ และการแปลข้อผิดพลาด กับคอมโพเนนต์ฟอร์มขนาดใหญ่ที่รวมการแสดงผลทุกชนิดเนื้อหา การตรวจไฟล์ และการอัปโหลดวิดีโอ

เมื่อเปิดข้อมูลเดิมขึ้นมาแก้ไข ระบบแปลงที่อยู่ของรูปภาพกลับเป็นไฟล์เพื่อให้แสดงผลและแก้ไขต่อได้ ส่วนวิดีโอจะใช้ตัวแทนไฟล์แล้วคงที่อยู่เดิมไว้ โดยไม่ดาวน์โหลดวิดีโอจริงกลับมา

หน้าต่างตั้งพื้นที่กด

หน้าต่างนี้ (src/components/rich-message-management/form/modal/action-spot.tsx) รวมการวาด การลาก การปรับขนาด การตรวจการทับซ้อน และการตั้งค่าการกระทำต่อพื้นที่ไว้ในที่เดียว

ตัวช่วยตรวจความครบถ้วน

ฟังก์ชันตรวจความครบถ้วนของรายการถูกแยกไว้เป็นไฟล์เดียว และถูกใช้ร่วมกันทั้งในสัญลักษณ์สถานะบนหัวการ์ด เงื่อนไขเปิดปุ่มเพิ่มรายการ เงื่อนไขเปิดปุ่มบันทึก และการกรองรายการที่จะแสดงในหน้าจอตัวอย่าง

ปลายทาง API

การทำงาน	ปลายทาง
รายการ Rich Message	GET /rich-message
ข้อมูลรายตัว	GET /rich-message/{id}
รายการสำหรับ dropdown ของโมดูลอื่น	GET /rich-message/find-all-object
สร้างหรือคัดลอก	POST /rich-message
แก้ไข	PUT /rich-message/{id}
ลบ	DELETE /rich-message/{id}
อัปโหลดวิดีโอพร้อมภาพตัวอย่าง	POST /rich-message/gen-thumbnail-video
รายการเทมเพลตข้อความ	GET /template-message/find-all-object
เนื้อหาของเทมเพลต	GET /template-message/{id}
ข้อมูล Quick Reply	GET /quick-reply/{id}

ข้อจำกัดที่กำหนดไว้ตายตัว

รายการเนื้อหาต่อชุดสูงสุด 5 รายการ, พื้นที่กดต่อรูปสูงสุด 20 จุด, รูปภาพไม่เกิน 10 เมกะไบต์, วิดีโอไม่เกิน 200 เมกะไบต์, รูปภาพกดได้ต้องกว้างอย่างน้อย 1040 พิกเซล, ข้อความไม่เกิน 500 ตัวอักษร, ข้อความในพื้นที่กดไม่เกิน 400 ตัวอักษร และหมายเลขโทรศัพท์ไม่เกิน 10 หลัก

จุดเชื่อมต่อกับฟีเจอร์อื่น

• Template Message — รายการเนื้อหาชนิดเทมเพลตพึ่งพาโมดูลนี้ทั้งรายการให้เลือกและเนื้อหาที่นำมาแสดง
• Quick Reply — ผูกได้หนึ่งชุดต่อ Rich Message และแสดงเป็นปุ่มในหน้าจอตัวอย่าง
• ตอบกลับอัตโนมัติ — ช่องข้อความในพื้นที่กดช่วยเติมคำจากคีย์เวิร์ดของโมดูลตอบกลับอัตโนมัติ
• ริชเมนู — ทั้งสองโมดูลใช้โครงสร้างข้อมูลของพื้นที่กดร่วมกัน และใช้ป้ายกำกับตัวอักษรชุดเดียวกัน
• ผู้บริโภคปลายทาง — แคมเปญ ตอบกลับอัตโนมัติ กฎทริกเกอร์ และเวิร์กโฟลว์ ดึงรายการ Rich Message ที่เปิดใช้งานอยู่ไปกำหนดเป็นเนื้อหาที่จะส่ง
• สิทธิ์การเข้าถึง — หน้ารายการใช้สิทธิ์ของโมดูล Rich Message ตามปกติ แต่ หน้าฟอร์มถูกผูกกับสิทธิ์ของโมดูลจัดการ LINE OA แทน ซึ่งเป็นความไม่สอดคล้องที่ควรทราบเมื่อกำหนดสิทธิ์ให้ผู้ใช้

รายละเอียดฝั่ง Backend (CMS API)

ฝั่ง backend มองโมดูลนี้เป็น คลังเก็บข้อความที่นำไปใช้ซ้ำได้ โดยผู้บริโภคหลักคือแคมเปญและระบบตอบกลับอัตโนมัติ ซึ่งตรงกับที่หน้าเว็บอธิบายไว้ว่า Rich Message ไม่ได้ถูกส่งออกจากหน้านี้

กฎที่ backend ตรวจตอนบันทึก

• ชื่อซ้ำถูกปฏิเสธ ด้วย error code RMS_001 ระบบไม่ยอมให้มี Rich Message ชื่อเดียวกันในขอบเขตของ OA เดียวกัน
• เนื้อหาชนิด Flex ถูกส่งไปให้ LINE ตรวจสอบจริง ไม่ได้ตรวจแค่ว่าเป็น JSON ที่ถูกรูปแบบ ถ้า LINE ปฏิเสธจะได้ error code RMS_002 ข้อนี้อธิบายว่าทำไม JSON ที่ผ่านการตรวจฝั่งหน้าเว็บแล้วยังบันทึกไม่ผ่านได้ — หน้าเว็บตรวจแค่ไวยากรณ์ ส่วน LINE ตรวจโครงสร้างของ Flex Message
• ไฟล์แนบถูกอัปโหลดขึ้น object storage ผ่านบริการจัดเก็บไฟล์กลาง สิ่งที่บันทึกในฐานข้อมูลคือที่อยู่ของไฟล์ ไม่ใช่ตัวไฟล์
• ทั้งการสร้างและการแก้ไขรับข้อมูลแบบ multipart เพราะต้องรองรับไฟล์แนบไปพร้อมกับข้อมูลอื่น

การสร้างภาพตัวอย่างวิดีโอ

POST /api/rich-message/gen-thumbnail-video เป็น endpoint แยกที่รับไฟล์วิดีโอเพื่อคืนภาพตัวอย่าง ซึ่งจำเป็นเพราะ LINE บังคับว่าบล็อกวิดีโอต้องมีภาพตัวอย่างเสมอ จึงเป็นขั้นตอนที่ข้ามไม่ได้ ไม่ใช่ของตกแต่ง

สิทธิ์และการลบ

• ทุกเส้นทางถูกครอบด้วย ModuleGate ของโมดูล rich-message ซึ่งบังคับใช้จริง ถ้าองค์กรถูกปิดโมดูลนี้ไว้ ทั้งหน้ารายการและหน้าฟอร์มจะใช้งานไม่ได้ ไม่ว่าหน้าเว็บจะตรวจสิทธิ์อย่างไร ข้อนี้ช่วยลดผลกระทบของความไม่สอดคล้องเรื่องสิทธิ์ของหน้าฟอร์มที่ระบุไว้ข้างต้น
• ข้อมูลกำกับสิทธิ์รายการกระทำมีอยู่แต่ยังไม่บังคับใช้
• GET /api/rich-message/find-all-object ที่โมดูลอื่นใช้ทำ dropdown ไม่มีข้อมูลกำกับสิทธิ์เลย ตามที่ระบบเวอร์ชันก่อนหน้าเป็น
• DELETE /api/rich-message/:id เป็น soft delete ส่วนการลบจริงต้องเป็น super admin และต้องส่งพารามิเตอร์ยืนยัน

ผลข้างเคียงที่ควรรู้

• Redis cache — backend เก็บ cache ทั้งรายการและรายละเอียด โดยใช้คีย์และอายุ cache ชุดเดียวกับระบบเวอร์ชันก่อนหน้า
• การแก้ Rich Message กระทบของที่อ้างอิงอยู่ — ระบบตอบกลับอัตโนมัติอ่านตาราง Rich Message โดยตรง และแคมเปญประกอบเนื้อหาจากข้อมูลชุดนี้ตอนจะส่ง ดังนั้นการแก้เนื้อหาหลังผูกไว้กับแคมเปญหรือกฎตอบกลับแล้ว จะเปลี่ยนสิ่งที่ถูกส่งออกไปจริงด้วย