BotFramework WebChat
[4.18.0] - 2024-07-10
พื้นที่เก็บข้อมูลนี้มีโค้ดสำหรับส่วนประกอบ 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 ด้วย <FluentThemeProvider> เพื่อลองใช้ประสบการณ์ใหม่
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 มีคุณสมบัติรูปแบบใหม่ที่ช่วยให้นักพัฒนาสามารถเลือกเวอร์ชันสกีมาการ์ด Adaptive สูงสุดได้ ดู 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 โฮสต์คู่ในแอปของคุณได้
มีการเปลี่ยนแปลงครั้งใหญ่ในความคาดหวังด้านพฤติกรรมเกี่ยวกับคำพูดและการป้อนข้อมูลในแชทบนเว็บ โปรดดูส่วนพฤติกรรมคำใบ้อินพุตก่อน 4.5.0 สำหรับรายละเอียด
ดูเอกสารการย้ายเพื่อเรียนรู้เกี่ยวกับการย้ายจาก Web Chat v3
ขั้นแรก สร้างบอทโดยใช้ Azure Bot Service เมื่อสร้างบอทแล้ว คุณจะต้องรับข้อมูลลับของ Web Chat ของบอทใน Azure Portal จากนั้นใช้ความลับเพื่อสร้างโทเค็นและส่งผ่านไปยังเว็บแชทของคุณ
Web Chat ให้ UI ที่ด้านบนของ Direct Line และ Direct Line Speech Channel มีสองวิธีในการเชื่อมต่อบอทของคุณผ่านการเรียก HTTP จากไคลเอนต์: โดยการส่งความลับของบอทหรือสร้างโทเค็นผ่านทางความลับ
เราขอแนะนำอย่างยิ่งให้ใช้โทเค็น API แทนการให้ความลับของคุณแก่แอป หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสาเหตุ โปรดดูเอกสารการตรวจสอบสิทธิ์เกี่ยวกับโทเค็น API และความปลอดภัยของไคลเอ็นต์
หากต้องการอ่านเพิ่มเติม โปรดดูลิงก์ต่อไปนี้:
การใช้ Web Chat กับการรับรองความถูกต้องของ Azure Bot Services
คุณสมบัติการตรวจสอบสิทธิ์ Direct Line ที่ได้รับการปรับปรุง
Web Chat ได้รับการออกแบบมาเพื่อทำงานร่วมกับเว็บไซต์ที่มีอยู่ของคุณโดยใช้ JavaScript หรือ React การผสานรวมกับ JavaScript จะทำให้คุณมีตัวเลือกสไตล์และการปรับแต่งในระดับปานกลาง
คุณสามารถใช้แพ็คเกจ Web Chat ทั่วไปแบบเต็ม (เรียกว่าชุดคุณสมบัติครบถ้วน) ซึ่งประกอบด้วยคุณสมบัติที่ใช้บ่อยที่สุด
ต่อไปนี้คือวิธีที่คุณสามารถเพิ่มการควบคุม Web Chat ไปยังเว็บไซต์ของคุณ:
<!DOCTYPE html >
< html >
< head >
< script
crossorigin =" anonymous "
src =" https://cdn.botframework.com/botframework-webchat/latest/webchat.js "
> </ script >
< style >
html,
body {
height: 100%;
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</ style >
</ head >
< body >
< div id =" webchat " role =" main " > </ div >
< script >
window . WebChat . renderWebChat (
{
directLine : window . WebChat . createDirectLine ( {
token : 'YOUR_DIRECT_LINE_TOKEN'
} ) ,
userID : 'YOUR_USER_ID' ,
username : 'Web Chat User' ,
locale : 'en-US'
} ,
document . getElementById ( 'webchat' )
) ;
</ script >
</ body >
</ html >
userID,usernameและlocaleล้วนเป็นพารามิเตอร์ทางเลือกที่จะส่งผ่านไปยังเมธอดrenderWebChatหากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับอุปกรณ์ประกอบฉาก Web Chat โปรดดูที่เอกสารอ้างอิง Web Chat API
ไม่แนะนำให้กำหนด
userIDเป็นค่าคงที่ เนื่องจากจะทำให้ผู้ใช้ทั้งหมดแชร์สถานะ โปรดดูAPI userID entryสำหรับข้อมูลเพิ่มเติม
ข้อมูลเพิ่มเติมเกี่ยวกับการแปลสามารถพบได้ในเอกสารประกอบการแปล
ดูตัวอย่างการทำงานของชุด Web Chat แบบเต็ม
เพื่อความสามารถในการปรับแต่งได้อย่างเต็มที่ คุณสามารถใช้ React เพื่อจัดองค์ประกอบองค์ประกอบของ Web Chat ใหม่ได้
หากต้องการติดตั้งบิลด์ที่ใช้งานจริงจาก NPM ให้รัน npm install botframework-webchat ดูหมายเหตุเวอร์ชันของเราเกี่ยวกับวิธีการเลือกเวอร์ชัน
import React , { useMemo } from 'react' ;
import ReactWebChat , { createDirectLine } from 'botframework-webchat' ;
export default ( ) => {
const directLine = useMemo ( ( ) => createDirectLine ( { token : 'YOUR_DIRECT_LINE_TOKEN' } ) , [ ] ) ;
return < ReactWebChat directLine = { directLine } userID = "YOUR_USER_ID" / > ;
} ;คุณยังสามารถรัน
npm install botframework-webchat@mainเพื่อติดตั้ง build การพัฒนาที่ซิงค์กับสาขาmainของ GitHub ของ Web Chat
ดูตัวอย่างการทำงานของ Web Chat ที่เรนเดอร์ผ่าน React
Web Chat ใช้ Redux ภายในเพื่อการจัดการสถานะ Redux DevTools ถูกเปิดใช้งานในบิลด์ NPM เป็นคุณสมบัติการเลือกใช้
นี่เป็นการสรุปว่า Web Chat ทำงานอย่างไร นี่ไม่ใช่ API explorer และไม่ใช่การรับรองการใช้ Redux store เพื่อเข้าถึง UI โดยทางโปรแกรม ควรใช้ hooks API แทน
หากต้องการใช้ Redux DevTools ให้ใช้ฟังก์ชัน createStoreWithDevTools สำหรับการสร้างร้านค้าที่เปิดใช้งาน Redux DevTools
import React, { useMemo } from 'react';
- import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';
+ import ReactWebChat, { createDirectLine, createStoreWithDevTools } from 'botframework-webchat';
export default () => {
const directLine = useMemo(() => createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }), []);
- const store = useMemo(() => createStore(), []);
+ const store = useMemo(() => createStoreWithDevTools(), []);
return <ReactWebChat directLine={directLine} store={store} userID="YOUR_USER_ID" />;
};มีข้อจำกัดบางประการเมื่อใช้ Redux DevTools:
redux-saga การเดินทางข้ามเวลาอาจทำให้ UI เสียหายWeb Chat ได้รับการออกแบบมาให้ปรับแต่งได้โดยไม่ต้องฟอร์กซอร์สโค้ด ตารางด้านล่างสรุปประเภทของการปรับแต่งที่คุณสามารถทำได้เมื่อคุณนำเข้า Web Chat ด้วยวิธีต่างๆ รายการนี้ไม่ครบถ้วนสมบูรณ์
| ชุด CDN | ตอบสนอง | |
|---|---|---|
| เปลี่ยนสี | ||
| เปลี่ยนขนาด | ||
| อัปเดต/แทนที่สไตล์ CSS | ||
| ฟังเหตุการณ์ต่างๆ | ||
| โต้ตอบกับโฮสติ้งหน้าเว็บ | ||
| กิจกรรมการเรนเดอร์แบบกำหนดเอง | ||
| ไฟล์แนบการแสดงผลแบบกำหนดเอง | ||
| เพิ่มองค์ประกอบ UI ใหม่ | ||
| จัดองค์ประกอบ UI ใหม่ทั้งหมด |
ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่ง Web Chat เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการปรับแต่ง
Bot Framework มีกิจกรรมหลายประเภท แต่ Web Chat ไม่รองรับทั้งหมด ดูเอกสารประเภทกิจกรรมเพื่อเรียนรู้เพิ่มเติม
ดูรายการตัวอย่าง Web Chat ทั้งหมดเพื่อดูแนวคิดเพิ่มเติมในการปรับแต่ง Web Chat
ดูเอกสารประกอบ API สำหรับการนำ Web Chat ไปใช้
Web Chat รองรับเบราว์เซอร์สมัยใหม่ 2 เวอร์ชันล่าสุด เช่น Chrome, Microsoft Edge และ FireFox หากคุณต้องการ Web Chat ใน Internet Explorer 11 โปรดดูการสาธิตบันเดิล ES5
โปรดทราบว่า:
babel ดูเอกสารการเข้าถึง
ดูเอกสารการแปลสำหรับการนำไปใช้ใน Web Chat
ดูเอกสารการแจ้งเตือนสำหรับการนำไปใช้ใน Web Chat
ดูเอกสารการวัดและส่งข้อมูลทางไกลสำหรับการนำไปใช้ใน Web Chat
ดูคู่มือการสนับสนุนทางเทคนิคเพื่อรับคำแนะนำและความช่วยเหลือในการแก้ไขปัญหาใน repo แชทบนเว็บสำหรับข้อมูลเพิ่มเติมก่อนที่จะยื่นปัญหาใหม่
Web Chat รองรับกลไกคำพูดที่หลากหลายเพื่อประสบการณ์การแชทที่เป็นธรรมชาติกับบอท ส่วนนี้จะสรุปเกี่ยวกับเอ็นจิ้นต่างๆ ที่รองรับ:
Direct Line Speech เป็นวิธีที่แนะนำในการเพิ่มฟังก์ชันเสียงพูดใน Web Chat โปรดดูเอกสารประกอบ Direct Line Speech สำหรับรายละเอียด
คุณสามารถใช้ Cognitive Services Speech Services เพื่อเพิ่มฟังก์ชันเสียงพูดให้กับ Web Chat โปรดดูรายละเอียดในเอกสารประกอบ Cognitive Services Speech Services
คุณยังสามารถใช้เครื่องมือเสียงพูดที่รองรับมาตรฐาน W3C Web Speech API เบราว์เซอร์บางตัวรองรับ API การรู้จำเสียงและ API การสังเคราะห์เสียง คุณสามารถผสมผสานและจับคู่กลไกต่างๆ รวมถึง Cognitive Services Speech Services เพื่อมอบประสบการณ์ผู้ใช้ที่ดีที่สุด
บิตล่าสุดของ Web Chat มีอยู่ในหน้าเผยแพร่รายวันของ Web Chat
Dailies จะเผยแพร่หลังเวลา 3:00 น. ตามเวลามาตรฐานแปซิฟิก เมื่อมีการเปลี่ยนแปลงในสาขาหลัก
ดูหน้าการสนับสนุนของเราสำหรับรายละเอียดเกี่ยวกับวิธีการสร้างโปรเจ็กต์และหลักเกณฑ์พื้นที่เก็บข้อมูลของเราสำหรับคำขอดึง
ดูหน้าหลักจรรยาบรรณของเราสำหรับรายละเอียดเกี่ยวกับหลักจรรยาบรรณของ Microsoft
ดูเอกสารประกอบด้านความปลอดภัยเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการรายงานปัญหาด้านความปลอดภัย
