Flow Editor — แนะนำหน้าจอการทำงาน

หน้าจอ Flow Editor — ภาพรวมโดยรวม

ภาพต่อไปนี้คือหน้าจอ Flow Editor จริง ขอให้คุณดูภาพรวมก่อน แล้วจึงศึกษารายละเอียดในหัวข้อถัดไป

123456789

1. 1
   ปุ่มย้อนกลับ + ชื่อ Agent

   ปุ่ม ← สำหรับกลับไปหน้า AI Agents ตามด้วยชื่อ Agent

2. 2
   Agent ID + Flow ID

   รหัสสำหรับใช้อ้างอิงใน API

3. 3
   แท็ก Draft + สถานะ Saved

   Draft คือเวอร์ชันที่กำลังแก้ไข ส่วน Saved ✓ หมายถึงระบบบันทึกอัตโนมัติทำงานแล้ว

4. 4
   ปุ่ม Publish

   อยู่มุมขวาบน กดเพื่อนำเวอร์ชันปัจจุบันขึ้นใช้งานจริง

5. 5
   Node Palette

   Conversation / Function / Call Transfer / End Call — คลิกปุ่ม Node ที่ต้องการเพื่อเพิ่มลงใน Canvas

6. 6
   Variables

   รายการตัวแปรของ Agent เช่น debt_amount, customer_name

7. 7
   Canvas

   พื้นที่ทำงาน — เพิ่ม Node และลากเส้นเชื่อม Transition ระหว่าง Node

8. 8
   แท็บ Global Config / Testing / Post-Call Analytics

   3 แท็บของแผงด้านขวา

9. 9
   Global Prompt

   คำสั่งที่ใช้กับทุก Conversation Node สำหรับระบุบทบาทและบริบทรวมของ Agent

Flow Editor คืออะไร

Flow Editor (เครื่องมือออกแบบบทสนทนา) คือเครื่องมือที่ใช้กำหนดว่า หากลูกค้าพูดในลักษณะหนึ่ง Agent ควรตอบอย่างไร และควรถามอะไรต่อไป

เปรียบเทียบให้เห็นภาพ: Flow Editor เปรียบได้กับ แผนผังการตัดสินใจ ของพนักงานหน้าร้าน เช่น หากลูกค้าถามราคา ให้ตอบ A หากลูกค้าตกลงซื้อ ให้ขอชื่อ แต่หากไม่ซื้อ ให้กล่าวลา Flow Editor คือพื้นที่ที่คุณวาดแผนผังดังกล่าว จากนั้น Agent จะปฏิบัติตามทุกครั้งที่สนทนากับลูกค้า

แผนผังนี้ประกอบด้วย Node (จุด โดยแต่ละจุดคือสิ่งที่ Agent ทำหนึ่งอย่าง) ที่เชื่อมกันด้วย Transition (ลูกศรที่เป็นเงื่อนไขว่าจะไปยังจุดใดต่อไป)

3 ส่วนของหน้าจอ

เมื่อเปิด Flow Editor ขึ้นมา คุณจะเห็นหน้าจอแบ่งออกเป็น 3 ส่วน โดยแต่ละส่วนทำหน้าที่ต่างกัน ดังนี้

สีของ Node — เข้าใจสี เข้าใจ Flow ทั้งผัง

Gowajee ใช้ สี เพื่อบอกประเภทของ Node เมื่อคุณมอง Flow เพียงครั้งเดียว ก็สามารถทราบได้ว่าแต่ละส่วนทำหน้าที่อะไร

ขั้นตอนการทำงานปกติ — เริ่มต้นจากศูนย์อย่างไร

1. เปิด Flow Editor ของ Agent ที่ต้องการแก้ไข โดยไปที่ AI Agent แล้วคลิกที่ Agent จากนั้นกดปุ่ม Edit Flow
2. เพิ่ม Node แรกเป็น Conversation Node โดยคลิกปุ่ม Conversation จาก Palette ด้านซ้ายเพื่อเพิ่มลงใน Canvas Node นี้คือคำทักทาย เช่น สวัสดีค่ะ คุณ {{customer_name}}...
3. เพิ่ม Node ถัดไปตาม Flow ที่วางแผนไว้ เช่น ถามจุดประสงค์ แล้วแยกออกเป็น 2 ทาง
4. ลากเส้นเชื่อม Node จากจุดทางออกของ Node A ไปยัง Node B ซึ่งก็คือ Transition
5. เขียน Prompt ในแต่ละ Node เพื่อระบุคำพูดที่ Agent จะสื่อสาร
6. เพิ่ม End Node ที่ปลายทางทุกเส้น เนื่องจาก Flow ที่ไม่มีจุดจบจะทำงานวนซ้ำ
7. ทดสอบด้วย Testing (Audio/Chat) ก่อน Publish ดูรายละเอียดในหัวข้อ Testing
8. กด Publish เมื่อพร้อมนำไปใช้งานกับลูกค้าจริง ดูรายละเอียดในหัวข้อ Publish

ปุ่มลัดที่ใช้บ่อย

• ลบ Node: คลิกที่ Node แล้วกด Delete (หรือ Backspace บน Mac)
• คัดลอก Node: คลิกที่ Node แล้วกด Cmd/Ctrl + C ตามด้วย Cmd/Ctrl + V
• ลบเส้นเชื่อม: คลิกที่เส้น แล้วกด Delete
• ซูม: ใช้ท่า pinch บน trackpad หรือกด Cmd/Ctrl + scroll wheel
• ดู Flow ทั้งหมด: กดปุ่ม Fit View ที่มุมขวาล่าง (ไอคอน 4 มุม)
• ย้อนกลับ (Undo): กด Cmd/Ctrl + Z ใช้ได้สูงสุด 20 ขั้นย้อนหลัง