buildship chat widget

การสร้างวิดเจ็ตการแชท AI

วิดเจ็ตแชท AI โอเพนซอร์ซที่สามารถฝังได้อย่างง่ายดายบนเว็บไซต์หรือแอพของคุณ วิดเจ็ตปลั๊กแอนด์เพลย์นี้ได้รับการออกแบบมาเพื่อทำงานอย่างราบรื่นกับเวิร์กโฟลว์การสร้างที่กำหนดเองของคุณทำให้สามารถเชื่อมต่อกับฐานข้อมูลที่เก็บความรู้และเครื่องมืออื่น ๆ ที่คุณใช้

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

ลองสาธิตสด

ai.assistant.intro.mp4

เริ่มต้น

ขั้นตอนที่ 1. เพิ่มวิดเจ็ตลงในเว็บไซต์หรือแอพของคุณ

• ก่อนอื่นให้โหลดวิดเจ็ตแชทในหน้าของคุณโดยเพิ่มตัวอย่างโค้ดต่อไปนี้ จากนั้นเชื่อมต่อวิดเจ็ตเข้ากับเวิร์กโฟลว์การสร้างของคุณโดยแทนที่ URL ตัวอย่าง API ด้วยการสร้าง URL API ที่ปรับใช้ตามคำแนะนำในขั้นตอนที่ 2 เพิ่มตัวเลือกการปรับแต่งใด ๆ ตามต้องการ

   < script src =" https://unpkg.com/@buildshipapp/chat-widget@^1 " defer > </ script >
  < script >
    window . addEventListener ( "load" , ( ) => {
      window . buildShipChatWidget . config . widgetTitle = "Chatbot" ;
      window . buildShipChatWidget . config . greetingMessage =
        "Hello! How may I help you today?" ;
      window . buildShipChatWidget . config . url =
        "https://<project_id>.buildship.run/chat/...." ;
      <!-- Other optional properties, learn more in the `Config Properties` section below -->
    } ) ;
  </ script >

  นอกจากนี้คุณยังสามารถนำเข้าเป็นโมดูลหากคุณกำลังทำงานกับ TypeScript หรือ ES6 (รวมถึงการประกาศประเภท):

   import "@buildshipapp/chat-widget" ;
  
  window . buildShipChatWidget . config . widgetTitle = "Chatbot" ;
  window . buildShipChatWidget . config . greetingMessage =
    "Hello! How may I help you today?" ;
  window . buildShipChatWidget . config . url =
    "https://<project_id>.buildship.run/chat/...." ;
  // ...

• ประการที่สองวางปุ่มด้วยข้อมูลต่อไปนี้ทุกที่บนเว็บไซต์หรือแอพของคุณเพื่อเปิดวิดเจ็ต:

   < button data-buildship-chat-widget-button > Beep Boop </ button >

ขั้นตอนที่ 2. การเชื่อมต่อวิดเจ็ตแชทกับเวิร์กโฟลว์การสร้างของคุณ

วิดเจ็ตถูกสร้างขึ้นเพื่อทำงานร่วมกับ Buildship-ผู้สร้างแบ็กเอนด์ LowCode สำหรับการสร้าง APIs กำหนดเวลางานด้วยสายตาและรวดเร็วด้วยอินเทอร์เฟซลากและวาง

• เริ่มต้นด้วยการโคลนนิ่งเทมเพลตวิดเจ็ตแชทเหล่านี้ใกล้เคียงกับ USECASE ของคุณมากที่สุด
• เพิ่มในรหัสผู้ช่วย OpenAI ของคุณและคีย์ API จากนั้นจัดส่งเวิร์กโฟลว์ คุณจะได้รับ URL API เมื่อคุณปรับใช้เวิร์กโฟลว์ของคุณ
• เสียบ URL ปลายทางเวิร์กโฟลว์นี้เข้ากับวิดเจ็ตโดยการตั้งค่า window.buildShipChatWidget.config.url ดูขั้นตอนที่ 3 สำหรับรายละเอียดเพิ่มเติม
• นอกจากนี้คุณยังสามารถปรับแต่งเวิร์กโฟลว์เทมเพลตนี้ได้ในแบบที่คุณต้องการ

ข้อกำหนดสำหรับเวิร์กโฟลว์การสร้างของคุณ

1. วิดเจ็ตจะทำการร้องขอโพสต์ไปยัง URL นี้ ร่างกายคำขอจะเป็นวัตถุที่มีข้อความของผู้ใช้และข้อมูลอื่น ๆ สำหรับเวิร์กโฟลว์เพื่อใช้ประโยชน์เช่น:

   {
     "message" : " The user's message " ,
     "threadId" : " A unique identifier for the conversation (learn more below) " ,
     "timestamp" : " The timestamp of when the POST request was initiated "
   
     ...Other miscellaneous user data (learn more in the 'Config Properties' section below)
   }

   คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติแต่ละอย่างในส่วนถัดไป

2. วิดเจ็ตจะคาดหวังการตอบสนองจากจุดสิ้นสุดในรูปแบบของวัตถุ JSON ที่มีการตอบสนองของเวิร์กโฟลว์ ( message ) และ ID เธรด ( threadId ) เช่น:

   {
     "message" : " The bot's response " ,
     "threadId" : " The unique identifier for the conversation (learn more below) "
   }

การตอบสนองแบบสตรีม

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

การตั้ง threadId ผ่านการตอบสนอง

เป็นทางเลือกมีสองวิธีในการตั้ง threadId ผ่านการตอบกลับ

1. ผ่านส่วนหัวการตอบกลับ

   หากการตอบกลับมีส่วนหัวที่มีคีย์ x-thread-id พร้อม ID เธรดเป็นค่าวิดเจ็ตจะหยิบมันขึ้นมาโดยอัตโนมัติและตั้งค่าเป็น threadId สำหรับการสนทนา (หากยังไม่ได้ตั้งค่าไว้)

   หมายเหตุ: ตรวจสอบให้แน่ใจว่าได้ตั้งค่าส่วนหัว Access-Control-Expose-Headers ในการตอบสนองของคุณเพื่อเปิดเผยส่วนหัว x-thread-id ไปยังวิดเจ็ตไคลเอนต์

2. ผ่านสตรีมเอง

   หากจุดสิ้นสุดตอบกลับด้วย message และ threadId ในรูปแบบต่อไปนี้: message + x1f + threadId โดยที่ x1f เป็นอักขระตัวคั่นหน่วยวิดเจ็ตจะแยก ID เธรดออกจากสตรีมและตั้งค่าเป็น threadId สำหรับการสนทนา (หากยังไม่ได้ตั้งค่าไว้แล้ว) ตัวอย่างเช่น:

    // Simulating what a streamed response might look like where
   // message: "Hello world!"
   // threadId: "tId_123"
   readable . push ( "Hello " ) ;
   readable . push ( "world!" ) ;
   readable . push ( "x1f" + "tId_123" ) ; // No spaces between the end of the message, the unit separator character, and the beginning of the threadId

ขั้นตอนที่ 3. การกำหนดค่าคุณสมบัติและการปรับแต่ง

วิดเจ็ตสามารถปรับแต่งได้โดยการแก้ไขคุณสมบัติที่มีอยู่ใน window.buildShipChatWidget.config Object

คุณสมบัติ	พิมพ์	คำอธิบาย
window.buildshipchatwidget.config.url	ที่จำเป็น	URL ของจุดสิ้นสุดที่วิดเจ็ตจะทำคำขอโพสต์เมื่อผู้ใช้ส่งข้อความ จุดสิ้นสุดควรคาดหวังว่าวัตถุ JSON ในร่างกายคำขอและควรตอบกลับด้วยวัตถุ JSON ที่มีการตอบสนองของบอทและรหัสเธรด
window.buildshipchatwidget.config.threadid	ไม่จำเป็น	ตัวระบุที่ไม่ซ้ำกันสำหรับการสนทนา สิ่งนี้สามารถใช้เพื่อรักษาบริบทของการสนทนาในหลายข้อความ/เซสชัน หากไม่ได้ตั้งค่าวิดเจ็ตจะส่งข้อความผู้ใช้ตัวแรกโดยไม่มีรหัสเธรด หากคุณออกแบบเวิร์กโฟลว์ของคุณเพื่อให้ส่งคืนรหัสเธรดเป็นส่วนหนึ่งของการตอบสนอง (ตามที่อธิบายไว้ในคำขอและการตอบกลับ) วิดเจ็ตจะใช้สิ่งนั้นโดยอัตโนมัติสำหรับการสนทนาที่เหลือจนกว่าสคริปต์จะยังคงโหลด - ตัวอย่างเช่น ID เธรดจะถูกยกเลิกหากหน้าถูกรีเฟรช หมายเหตุ: ID เธรดที่ส่งคืนในการตอบกลับจะไม่ถูกใช้หากตั้งค่าคุณสมบัติ threadId แล้ว
window.buildshipchatwidget.config.user	ไม่จำเป็น	วัตถุที่มีข้อมูลของผู้ใช้ ซึ่งสามารถใช้ในการส่งชื่อผู้ใช้อีเมลหรือข้อมูลอื่น ๆ ที่เวิร์กโฟลว์อาจต้องการ ตัวอย่าง: window.buildShipChatWidget.config.user = { name: "Some User", email: "[email protected]", // ...Other user data};
window.buildshipchatwidget.config.widgetTitle	ไม่จำเป็น	ชื่อของวิดเจ็ต สิ่งนี้จะปรากฏที่ด้านบนของวิดเจ็ต ค่าเริ่มต้นเป็น Chatbot
window.buildshipchatwidget.config.greetingMessage	ไม่จำเป็น	ข้อความที่จะแสดง (ราวกับว่ามันถูกส่งโดยระบบ) เมื่อเปิดวิดเจ็ตครั้งแรก ค่าเริ่มต้นที่จะไม่แสดงข้อความทักทายใด ๆ
window.buildshipchatwidget.config.disableerroralert	ไม่จำเป็น	ปิดใช้งานการแจ้งเตือนข้อผิดพลาดหากไม่มีการตั้งค่า URL หากคำขอล้มเหลว ฯลฯ ค่าเริ่มต้นเป็น false
window.buildshipchatwidget.config.closeonoutsideclick	ไม่จำเป็น	ปิดวิดเจ็ตเมื่อผู้ใช้คลิกนอกตัววิดเจ็ต หากตั้งค่าเป็น false คุณจะต้องใช้เมธอด close() (ให้ไว้ใน window.buildShipChatWidget BUILDSHIPSHATWIDGET) เพื่อให้สามารถปิดวิดเจ็ตโดยทางโปรแกรม (ตัวอย่างเช่นโดยแนบกับปุ่ม) ค่าเริ่มต้นเป็น true
window.buildshipchatwidget.config.openonload	ไม่จำเป็น	จะเปิดวิดเจ็ตโดยอัตโนมัติเมื่อหน้าเสร็จสิ้นการโหลด (ต้องใช้ปุ่มด้วยแอตทริบิวต์ data-buildship-chat-widget-button ที่จะแสดงบนหน้า) ค่าเริ่มต้นเป็น false
window.buildshipchatwidget.config.responseisastream	ไม่จำเป็น	หากตั้งค่าเป็น true วิดเจ็ตจะคาดหวังว่าการตอบสนองจะถูกสตรีมกลับจากจุดสิ้นสุด จุดสิ้นสุดจะต้องตอบกลับด้วยชุดชิ้นส่วนที่เพิ่มขึ้นในการตอบสนองของจุดสิ้นสุดในที่สุด วิดเจ็ตจะรวมชิ้นส่วนเหล่านี้ตามที่พวกเขาได้รับและแสดงและอัปเดตข้อความในที่สุดก็จบลงด้วยการตอบกลับเต็มรูปแบบ เรียนรู้เพิ่มเติมที่นี่ ค่าเริ่มต้นเป็น false

ปรับแต่งลักษณะที่ปรากฏของวิดเจ็ต (ไม่บังคับ)

สไตล์ของวิดเจ็ตสามารถปรับแต่งได้โดยการเอาชนะตัวแปร CSS และ/หรือกฎ (ดูที่นี่สำหรับรายการตัวแปรและตัวเลือก)

ตัวอย่างเช่นตัวแปรสามารถแทนที่ได้เช่นนั้น:

 : root {
  --buildship-chat-widget-primary-color : # 0000ff ;
}

/* Explicitly targeting the light theme is necessary in case the user's system theme is set to 'dark', but the body's `data-theme` attribute is set to `light` (perhaps via a theme toggle on the page). */
[ data-theme *= "light" ] {
  ...;
}

โหมดมืดเปิดใช้งานเมื่อ:

• ชุดรูปแบบระบบของผู้ใช้ถูกตั้งค่าเป็น dark (เช่น @media (prefers-color-scheme: dark) เป็นจริง) และนั่นคือสิ่งที่หน้าใช้

• ร่างกายมีแอตทริบิวต์ data-theme ที่ตั้งไว้เป็น dark เช่น:

   < body data-theme =" dark " > </ body >

รูปแบบโหมดมืดสามารถแทนที่ได้เช่นกัน:

 @media ( prefers-color-scheme : dark) {
  : root {
    ...;
  }
}

[ data-theme *= "dark" ] {
  ...;
}

แบบอักษรนั้นสืบทอดมาจากร่างกาย

มันทำงานอย่างไร

เมื่อสคริปต์ถูกโหลดมันจะมองหาองค์ประกอบใด ๆ ที่มีแอตทริบิวต์ data-buildship-chat-widget-button และเปิดวิดเจ็ตเมื่อมีการคลิกองค์ประกอบใด ๆ

นอกเหนือจากวัตถุ config window.buildShipChatWidget Object ยังเปิดเผยวิธีการ open() , close() และ init() ซึ่งสามารถเรียกได้โดยตรง

วิธี open() ยอมรับ event คลิกและใช้ event.target เพื่อคำนวณตำแหน่งของวิดเจ็ตโดยใช้ UI ลอย

วิธี close() ปิดวิดเจ็ต

เมธอด init() เริ่มต้นวิดเจ็ตและเรียกว่าโดยอัตโนมัติเมื่อหน้าต่างเสร็จสิ้นการโหลด มันสามารถเรียกได้ด้วยตนเองเพื่อเริ่มต้นวิดเจ็ตอีกครั้งหากจำเป็น (มีประโยชน์อย่างยิ่งในกรณีของสปาซึ่งวิดเจ็ตอาจต้องเริ่มต้นใหม่หลังจากเปลี่ยนเส้นทาง)