พื้นที่เก็บข้อมูลนี้มีโค้ดสำหรับส่วนประกอบ Bot Framework Web Chat ส่วนประกอบ Bot Framework Web Chat เป็นไคลเอนต์บนเว็บที่ปรับแต่งได้สูงสำหรับ Bot Framework v4 SDK Bot Framework SDK v4 ช่วยให้นักพัฒนาสามารถสร้างแบบจำลองการสนทนาและสร้างแอปพลิเคชันบอทที่ซับซ้อนได้
พื้นที่เก็บข้อมูลนี้เป็นส่วนหนึ่งของ Microsoft Bot Framework ซึ่งเป็นเฟรมเวิร์กที่ครอบคลุมสำหรับการสร้างประสบการณ์ AI การสนทนาระดับองค์กร
เว็บแชทรองรับนโยบายความปลอดภัยของเนื้อหา (CSP) ขอแนะนำให้นักพัฒนาเว็บเปิดใช้งาน CSP เพื่อปรับปรุงความปลอดภัยและปกป้องการสนทนา คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ CSP ได้ในบทความนี้
ส่วนนี้จะชี้ให้เห็นบันทึกเวอร์ชันที่สำคัญ สำหรับข้อมูลเพิ่มเติม โปรดดูลิงก์ที่เกี่ยวข้องและตรวจสอบ
CHANGELOG.md
หมายเหตุ: นักพัฒนาเว็บควรใช้ ~
(ช่วงตัวหนอน) เพื่อเลือกเวอร์ชันรอง ซึ่งมีคุณลักษณะใหม่และ/หรือการแก้ไข ใช้ ^
(ช่วงคาเร็ต) เพื่อเลือกเวอร์ชันหลัก ซึ่งอาจมีการเปลี่ยนแปลงด่วน
ในรุ่นนี้ เรามุ่งเน้นไปที่การปรับปรุงประสิทธิภาพ รวมถึงการเพิ่มประสิทธิภาพหน่วยความจำและเวลาในการโหลด
ตอนนี้บอทสามารถถ่ายทอดสดการตอบกลับของพวกเขาได้แล้ว ก่อนที่ Bot Framework SDK จะรองรับฟีเจอร์นี้ ผู้เขียนบอทสามารถติดตามรายละเอียดใน LIVESTREAMING.md เพื่อสร้างการตอบกลับสตรีมสดได้
ขณะนี้ Web Chat ส่งออกเป็นโมดูล ES (การส่งออกที่มีชื่อ) พร้อมกับ CommonJS (การส่งออกที่มีชื่อและไม่มีชื่อ)
ขณะนี้ผู้ใช้สามารถเพิ่มข้อความและยืนยันก่อนอัปโหลดไฟล์ไปยังบอทได้ หากต้องการยกเลิกประสบการณ์ใหม่ ให้ส่ง sendAttachmentOn: 'send'
ในรูปแบบตัวเลือก
เรารู้สึกตื่นเต้นที่จะเพิ่มการรองรับชุดรูปแบบ ขณะนี้นักพัฒนาสามารถรวมการปรับแต่งทั้งหมดไว้ในแพ็คเกจเดียวและเผยแพร่ไปยัง NPM
เรารู้สึกตื่นเต้นที่จะประกาศว่าชุดรูปแบบ Fluent UI อยู่ในระหว่างการทำงานและขณะนี้อยู่ในขั้นตอนการทดลอง ชุดรูปแบบนี้ออกแบบมาสำหรับนักพัฒนาเว็บที่ต้องการนำประสบการณ์ผู้ใช้ Copilot ดั้งเดิมมาสู่ลูกค้า
เราจะเพิ่มคุณสมบัติใหม่ๆ ต่อไป และสนับสนุนทั้งประสบการณ์ white-label และ Fluent UI ที่มีความเท่าเทียมกันในระดับเดียวกัน
คุณสามารถรวม Web Chat ด้วย
เพื่อลองใช้ประสบการณ์ใหม่
import ReactWebChat from 'botframework-webchat' ;
import { FluentThemeProvider } from 'botframework-webchat-fluent-theme' ;
export default function MyComponent ( ) {
return (
< FluentThemeProvider >
< ReactWebChat / >
< / FluentThemeProvider >
) ;
}
ขณะนี้ Web Chat จะแสดง HTML-in-Markdown เราได้ย้ายเครื่องมือฆ่าเชื้อและการเข้าถึงของเราให้ทำงานในระดับ HTML แล้ว ทั้ง Markdown และ HTML-in-Markdown จะได้รับการรักษาแบบเดียวกันและเป็นไปตามข้อกำหนดด้านความปลอดภัยและการเข้าถึงของเรา
คุณสามารถปิดตัวเลือกนี้ได้โดยตั้งค่า styleOptions.markdownRenderHTML
เป็น false
ขณะนี้ Web Chat รองรับ Adaptive Cards schema สูงถึง 1.6 คุณสมบัติบางอย่างใน Adaptive Cards อยู่ในการแสดงตัวอย่างหรือออกแบบมาเพื่อใช้ภายนอก Bot Framework เว็บแชทไม่รองรับคุณสมบัติเหล่านี้
ตั้งแต่เวอร์ชัน 4.16.0 เป็นต้นไป Internet Explorer จะไม่ได้รับการสนับสนุนอีกต่อไป หลังจากเลิกให้บริการ Internet Explorer 11 อย่างเป็นทางการเป็นเวลานานกว่าหนึ่งปี เราก็ตัดสินใจหยุดการสนับสนุน Internet Explorer สิ่งนี้จะช่วยเรานำคุณสมบัติใหม่มาสู่ Web Chat 4.15.9 เป็นเวอร์ชันสุดท้ายที่รองรับ Internet Explorer ในรูปแบบจำกัด
adaptiveCardsParserMaxVersion
แพตช์ Web Chat 4.12.1 มีคุณสมบัติรูปแบบใหม่ที่ช่วยให้นักพัฒนาสามารถเลือกเวอร์ชันสคีมาการ์ดอะแดปทีฟสูงสุดได้ ดู PR #3778 สำหรับการเปลี่ยนแปลงรหัส
หากต้องการระบุเวอร์ชันสูงสุดอื่น คุณสามารถปรับตัวเลือกสไตล์ได้ดังที่แสดงด้านล่าง:
window . WebChat . renderWebChat (
{
directLine ,
store ,
styleOptions : {
adaptiveCardsParserMaxVersion : '1.2'
}
} ,
document . getElementById ( 'webchat' )
) ;
มีการเพิ่มการอัปเดตการช่วยสำหรับการเข้าถึงใหม่ไปยัง Web Chat จาก PR #3703 การเปลี่ยนแปลงนี้สร้างโฟกัสภาพสำหรับการถอดเสียง (เส้นขอบสีดำตัวหนา) และกิจกรรมที่เน้น aria-activedescendent
(เส้นขอบเส้นประสีดำ) ตามค่าเริ่มต้น หากเป็นไปได้ ค่า transcriptVisualKeyboardIndicator...
จะถูกนำไปใช้กับรายการย่อยแบบหมุน ( CarouselFilmStrip.js
) ด้วย การดำเนินการนี้เพื่อให้ตรงกับรูปแบบโฟกัสเริ่มต้นในปัจจุบันสำหรับการ์ดอะแดปทีฟ ซึ่งอาจเป็นส่วนย่อยของภาพหมุน
หากต้องการแก้ไขสไตล์เหล่านี้ คุณสามารถเปลี่ยนอุปกรณ์ประกอบฉากต่อไปนี้ผ่าน styleOptions
:
transcriptActivityVisualKeyboardIndicatorColor: DEFAULT_SUBTLE,
transcriptActivityVisualKeyboardIndicatorStyle: 'dashed',
transcriptActivityVisualKeyboardIndicatorWidth: 1,
transcriptVisualKeyboardIndicatorColor: 'Black',
transcriptVisualKeyboardIndicatorStyle: 'solid',
transcriptVisualKeyboardIndicatorWidth: 2,
โค้ดด้านบนแสดงค่าเริ่มต้นที่คุณจะเห็นใน Web Chat
Web Chat API ได้รับการปรับโครงสร้างใหม่เป็นแพ็คเกจแยกต่างหาก หากต้องการเรียนรู้เพิ่มเติม โปรดดูสรุปการรีแฟกเตอร์ API
เริ่มต้นจาก Web Chat 4.7.0 รองรับ Direct Line Speech และเป็นวิธีที่แนะนำในการจัดเตรียมฟังก์ชันเสียงพูดแบบรวมใน Web Chat เรากำลังดำเนินการเพื่อปิดช่องว่างคุณลักษณะระหว่าง Direct Line Speech และ Web Speech API (รวมถึง Cognitive Services และฟังก์ชันเสียงพูดของเบราว์เซอร์)
เริ่มต้นจาก Web Chat 4.6.0, Web Chat ต้องใช้ React 16.8.6 ขึ้นไป
แม้ว่าเราขอแนะนำให้คุณอัปเกรดแอปโฮสต์โดยเร็วที่สุด แต่เราเข้าใจว่าแอปโฮสต์อาจต้องใช้เวลาระยะหนึ่งก่อนที่จะอัปเดตการขึ้นต่อกันของ React โดยเฉพาะอย่างยิ่งในส่วนที่เกี่ยวข้องกับแอปพลิเคชันขนาดใหญ่
หากแอปของคุณยังไม่พร้อมสำหรับ React 16.8.6 คุณสามารถติดตามตัวอย่าง React แบบไฮบริดไปยัง React โฮสต์คู่ในแอปของคุณได้
มีการเปลี่ยนแปลงครั้งใหญ่ในความคาดหวังด้านพฤติกรรมเกี่ยวกับคำพูดและการป้อนข้อมูลใน Web Chat โปรดดูส่วนพฤติกรรมคำใบ้อินพุตก่อน 4.5.0 สำหรับรายละเอียด
ดูเอกสารการย้ายเพื่อเรียนรู้เกี่ยวกับการย้ายจาก Web Chat v3
ขั้นแรก สร้างบอทโดยใช้ Azure Bot Service เมื่อสร้างบอทแล้ว คุณจะต้องรับความลับของ Web Chat ของบอทใน Azure Portal จากนั้นใช้ความลับเพื่อสร้างโทเค็นและส่งผ่านไปยังเว็บแชทของคุณ
เว็บแชทให้ UI ที่ด้านบนของช่องทางสายตรงและสายตรง มีสองวิธีในการเชื่อมต่อบอทของคุณผ่านการเรียก HTTP จากไคลเอนต์: โดยการส่งความลับของบอทหรือสร้างโทเค็นผ่านทางความลับ
เราขอแนะนำอย่างยิ่งให้ใช้โทเค็น API แทนการให้ความลับของคุณแก่แอป หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสาเหตุ โปรดดูเอกสารการตรวจสอบสิทธิ์เกี่ยวกับโทเค็น API และความปลอดภัยของไคลเอ็นต์
หากต้องการอ่านเพิ่มเติม โปรดดูลิงก์ต่อไปนี้:
การใช้ Web Chat กับการรับรองความถูกต้องของ Azure Bot Services
คุณสมบัติการตรวจสอบสิทธิ์ Direct Line ที่ได้รับการปรับปรุง
Web Chat ได้รับการออกแบบมาเพื่อทำงานร่วมกับเว็บไซต์ที่มีอยู่ของคุณโดยใช้ JavaScript หรือ React การผสานรวมกับ JavaScript จะทำให้คุณมีตัวเลือกสไตล์และการปรับแต่งในระดับปานกลาง
คุณสามารถใช้แพ็คเกจ Web Chat ทั่วไปแบบเต็ม (เรียกว่าชุดคุณสมบัติครบถ้วน) ซึ่งประกอบด้วยคุณสมบัติที่ใช้บ่อยที่สุด
ต่อไปนี้คือวิธีที่คุณสามารถเพิ่มการควบคุม Web Chat ไปยังเว็บไซต์ของคุณ: