NATAPOHN
SAWATSAKULPATTANA
Agentic AI Developer
Site Visit · Round 02
ผู้จัดทำ
การนิเทศสหกิจศึกษา ณ สถานประกอบการ — ครั้งที่ 2
NATAPOHN
AKKHARIN
LAKSANA
Cooperative Education Student
LINE Official Account
First Touchpoint: Welcome & Card Carousel
Good · Channel Ingress UX
เมื่อลูกค้าเริ่มสนทนาผ่าน LINE OA ระบบจะสร้าง IssueSession อัตโนมัติ ส่งข้อความต้อนรับ และดึงชุดการ์ด Flex Card Carousel ขึ้นมาให้กดเลือกทำรายการได้ทันที โดยไม่ต้องพิมพ์ข้อความเอง เพื่อลดความสับสนและคัดกรอง Intent ได้อย่างแม่นยำตั้งแต่ก้าวแรก
Dynamic Card Carousel (แทนที่ Rich Menu เดิม)
Flex Message Cards ปรับเปลี่ยนตามบริบทและสิทธิ์ของผู้ใช้งาน
MENU 01 · การจัดการคำร้องหลัก
เริ่มใช้งาน · แจ้งปัญหา · ตรวจสอบสถานะ · ปิดเคส
MENU 02 · การจัดการโปรเจกต์
เปลี่ยนโปรเจกต์ · เชื่อมโปรเจกต์ใหม่ (Join-Code)
💡 เหตุผลที่เปลี่ยนจาก Rich Menu เดิม: Rich Menu แบบภาพตายตัวมีข้อจำกัดด้านการแสดงผลและปรับเปลี่ยนไม่ได้ แต่ Card Carousel สามารถ Query ตรวจสอบว่าผู้ใช้มีกี่โปรเจกต์ และ Generate ปุ่มให้ตรงกับสถานะของ IssueSession ขณะนั้นได้ทันที
15-Second Message Batching & AI Typing Indicator
แก้ปัญหาผู้ใช้พิมพ์แยกท่อน รวบรวมเป็นประโยคสมบูรณ์พร้อมแจ้งสถานะสด
Live Indicator
AI is analyzing context...
01
15-Second Message Batching Window
เมื่อผู้ใช้พิมพ์ข้อความเข้ามา ระบบจะตั้งเวลาหน่วง 15 วินาทีใน Redis เพื่อรอจับข้อความที่พิมพ์รัวๆ มารวมเป็นข้อความก้อนเดียวที่มีบริบทสมบูรณ์ ก่อนส่งเข้า Main AI Core ลดการยิง API ซ้ำซ้อนและประหยัด Token ได้มหาศาล
02
Real-time AI Typing Indicator Feedback
ในระหว่างที่รอรวบรวมข้อความและส่งให้ AI ประมวลผล ระบบจะยิงสัญญาณ Typing Indicator (จุด 3 จุดกำลังพิมพ์) แสดงผลทันที ทำให้ผู้ใช้มั่นใจว่าระบบกำลังทำงานและไม่รู้สึกว่าบอทค้าง
Customer WebChat & Portal UI
Customer Web Portal & Real-Time WebChat UI
Win · Frontend & Socket
หน้าต่างบริการตนเองสำหรับลูกค้า (Customer Portal) เชื่อมต่อผ่าน WebSocket ตรงสู่ระบบ โดยไม่ต้องพึ่งพาแอปพลิเคชันภายนอก พร้อมระบบสรุปปัญหายืนยันก่อนเปิดตั๋ว (Pre-Confirmation) และรายการตั๋วของฉันแบบเรียลไทม์
.png)
Customer WebChat Gateway & Frontend Architecture (ภาพระบบจริง)
Win · Architecture & Gateway
ผังสถาปัตยกรรมโครงสร้างจริงจาก Figma ครบทั้ง 11 โมดูลหลัก (Login, Dashboard, Conversations + 6 Drawers, Tickets, Directory, IAM, Master Data, SLA Center, Plane Sync, Traces, Analytics) เชื่อมต่อ Customer WebChat Gateway แบบเรียลไทม์
Customer WebChat Gateway (Real-Time WebSocket)
ช่องทางสื่อสารสองทิศทาง (Bi-directional) ความเร็วสูง ปลอดภัย และเสถียร01
Secure Handshake
ตรวจสอบ Session Token และยืนยันตัวตนลูกค้าตั้งแต่เริ่มเชื่อมต่อ
02
Room Isolation
แยกห้องสนทนาตาม User ID และ Project ID เด็ดขาด ข้อมูลไม่ปะปนกัน
03
Heartbeat & Lifecycle
ยิง Ping/Pong ทุก 30s ตรวจสอบสุขภาพ Connection ป้องกันการค้าง
04
Auto-Reconnect Engine
กู้คืน Session และดึงประวัติการสนทนากลับมาทันทีเมื่อเน็ตหลุด
⚡ WebSocket Architecture: รันบน Fastify WebSocket Plugin รองรับการขยายตัว (Scalable) สื่อสารระดับมิลลิวินาที โดยไม่ต้อง Polling HTTP ให้เปลืองทรัพยากร
Pre-Router, Ticket State Machine & Web State Management
ด่านคัดกรองข้อความขยะ และแกนควบคุมสถานะตั๋วที่ถูกต้องแม่นยำ
Pre-Router Filter
ตัดคำทักทายและคำถามทั่วไป: ตรวจจับข้อความเช่น "สวัสดี", "ขอบคุณ" แล้วตอบกลับทันทีโดยไม่ยิงรบกวน Main AI Core ช่วยประหยัด API Token
chatStore & useCustomerSocket
Single Source of Truth: จัดการ State ฝั่งหน้าบ้านด้วย Context ร่วมกับ Zustand มีระบบ Message Deduplication ป้องกันข้อความเด้งซ้ำ
2-Layer Ticket State Machine
โมเดลสถานะตั๋ว 2 ชั้น:
- Internal Technical:
TRIAGED→DISPATCHED→IN_DEV→RESOLVEDควบคุมกฎการเปลี่ยนสถานะเคร่งครัด - Customer View: แปลงเป็นภาษาที่เข้าใจง่าย (
รับเรื่องแล้ว→กำลังดำเนินการ→แก้ไขเสร็จสิ้น)
🛡️ Two-Way Synchronization: ซิงก์สถานะงานสองทางร่วมกับ Plane.so และ Redis ป้องกัน Race Condition เมื่อเกิดการโต้ตอบพร้อมกัน
Admin Support Hub & Operations
Live Unified Inbox & Human-in-the-Loop Console
Win & Good · Co-Developed
ศูนย์รวมแชทจากทั้ง LINE OA และ WebChat ในหน้าจอเดียว เจ้าหน้าที่เห็น AI สนทนาสดแบบเรียลไทม์ พร้อมปุ่ม 'Take Over' แทรกแซงคุยแทน AI ได้ทันทีในคลิกเดียว (Good ดูแล UI & SLA / Win ดูแล Socket Feed & State)
Center App IAM Enterprise Sign-in (ticket.centerapp.io)
Win · Auth & IAM Ingress
หน้าจอลงชื่อเข้าใช้งานระบบหลังบ้านผ่าน Center App IAM และ Single Sign-On (SSO) รองรับการแยก Tenant สิทธิ์ และ Room Isolation สำหรับเจ้าหน้าที่ ปลอดภัยตามมาตรฐานความปลอดภัยองค์กร
Pre-Confirmation & Two-Step Closure (งานร่วมพัฒนา)
กลไกตรวจรับสองทาง ป้องกันปัญหาตั๋วขยะและการปิดเคสโดยที่งานยังไม่สมบูรณ์
1
Pre-Confirmation Mechanism
ก่อนที่ระบบจะสร้างตั๋ว AI Core จะสรุปปัญหาที่เข้าใจ พร้อมส่งปุ่มให้ลูกค้ายืนยันความถูกต้องก่อนเสมอ (Win วาง Pre-Router & State / Good วาง Logic ใน Main Core) ตัดปัญหาตั๋วขยะได้ 100%
2
Two-Step Closure Protocol
เมื่อทีมวิศวกรแก้ปัญหาใน Plane.so เสร็จสิ้น ระบบจะไม่ปิดตั๋วทันที แต่จะส่งข้อความถามลูกค้ายืนยันผลตรวจรับ หากยังพบปัญหา ลูกค้ากด "Re-open" เพื่อเปิดเคสทำงานต่อได้ทันที
🤝 Shared Value: เกิดข้อตกลงที่ตรงกันระหว่างลูกค้า, ระบบ AI และทีมวิศวกร ลดงานตามซ้ำซ้อนของเจ้าหน้าที่
Mission Control & Priority Queues
ศูนย์ควบคุมการปฏิบัติการ คัดแยกความเร่งด่วนและเฝ้าระวังความเสี่ยง SLA
Operations Center Dashboard
0
Human Takeover Queue
เคสที่ลูกค้าขอคน หรือ AI ต้องการคนช่วย
109
Waiting Customers
ติดตามเวลารอคอยแบบ Real-time
53
SLA Risks Monitored
ตั๋วที่ใกล้ถึงกำหนดคำนวณตามวันทำการ
Workflow Architecture
Active
Plane Webhook Notification Flow
FLOW 08
Engine Active
SLA Cadence & Business Calendar Matrix
SLA SPEC
1. SLA Targets & Severity Definitions
| ระดับ | Response Time | Resolution Target | แนวทางดำเนินการ |
|---|---|---|---|
| Urgent | ภายใน 15 นาที | ภายใน 4 ชั่วโมง | แจ้ง Dev ทันที และเร่งแก้ไขทันที |
| High | ภายใน 30 นาที | ภายใน 8 ชั่วโมง | เร่งแก้ไขเป็นอันดับแรก |
| Medium | ภายใน 2 ชั่วโมง | ภายใน 2 วันทำการ | ดำเนินการตามลำดับความสำคัญ |
| Low | ภายใน 1 วันทำการ | ภายใน 5 วันทำการ | ดำเนินการในรอบงานที่เหมาะสม |
| None | ภายใน 2 วันทำการ | ไม่กำหนด | พิจารณาและวางแผนตามเหมาะสม |
2. Automated SLA Cadence (รอบการสะกิดตามงาน)
| ระดับ | แจ้งเตือน Dev ซ้ำ | รายงานความคืบหน้า User |
|---|---|---|
| Urgent | ทุก 1 ชั่วโมง | ทุก 1 ชั่วโมง |
| High | ทุก 2 ชั่วโมง | ทุก 2 ชั่วโมง |
| Medium | ทุก 4 ชั่วโมง | ทุก 1 วันทำการ |
| Low | ทุก 1 วันทำการ | ทุก 2 วันทำการ |
| None | ตามความเหมาะสม | ตามความเหมาะสม |
Business Calendar Engine (Asia/Bangkok +07:00)
📅 ข้ามวันเสาร์-อาทิตย์ อัตโนมัติ:
คำนวณวันทำการ (จันทร์–ศุกร์) สำหรับเคส Medium & Low ป้องกัน Alert รบกวนเวลาพักผ่อนของวิศวกรและลูกค้า
⚡ 24×7 Instant Escalation:
สำหรับเคส Urgent & High เดินเวลาตลอด 24 ชั่วโมง พร้อมส่งอีเมลแจ้งทีม Dev แก้ไขทันที
