BotFramework WebChat
[4.18.0] - 2024-07-10
يحتوي هذا المستودع على تعليمات برمجية لمكون Bot Framework Web Chat. يعد مكون Bot Framework Web Chat عميلًا يعتمد على الويب وقابلاً للتخصيص بدرجة كبيرة لـ Bot Framework v4 SDK. يتيح الإصدار الرابع من Bot Framework SDK للمطورين تصميم نموذج للمحادثة وإنشاء تطبيقات روبوت متطورة.
يعد هذا المستودع جزءًا من Microsoft Bot Framework - وهو إطار عمل شامل لبناء تجارب الذكاء الاصطناعي للمحادثة على مستوى المؤسسة.
تدعم الدردشة عبر الويب سياسة أمان المحتوى (CSP). يُنصح مطورو الويب بتمكين CSP لتحسين الأمان وحماية المحادثات. يمكنك قراءة المزيد عن CSP في هذه المقالة.
يشير هذا القسم إلى ملاحظات الإصدار المهمة. لمزيد من المعلومات، يرجى الاطلاع على الروابط ذات الصلة والتحقق من
CHANGELOG.md
ملاحظات: يُنصح مطورو الويب باستخدام ~ (نطاق التلدة) لتحديد الإصدارات الثانوية، التي تحتوي على ميزات و/أو إصلاحات جديدة. استخدم ^ (نطاق علامة الإقحام) لتحديد الإصدارات الرئيسية، والتي قد تحتوي على تغييرات عاجلة.
في هذا الإصدار، نركز على تحسينات الأداء، بما في ذلك تحسينات الذاكرة ووقت التحميل.
يمكن للروبوتات الآن بث ردودها مباشرة. قبل أن يدعم Bot Framework SDK هذه الميزة، يمكن لمؤلفي الروبوتات متابعة التفاصيل الموجودة في LIVESTREAMING.md لإنشاء استجابات البث المباشر.
يتم الآن تصدير Web Chat كوحدات ES (صادرات مسماة) إلى جانب CommonJS (صادرات مسماة وغير مسماة).
يمكن للمستخدم النهائي الآن إضافة رسالة والتأكيد قبل تحميل الملف الخاص به إلى الروبوت. لإلغاء الاشتراك في التجربة الجديدة، قم بتمرير sendAttachmentOn: 'send' في خيارات النمط.
نحن متحمسون لإضافة دعم حزمة السمات. يمكن للمطورين الآن تجميع كل تخصيصاتهم في حزمة واحدة ونشرها على NPM.
يسعدنا أن نعلن أن حزمة سمات Fluent UI قيد العمل وهي حاليًا في المرحلة التجريبية. تم تصميم حزمة السمات هذه لمطوري الويب الذين يرغبون في تقديم تجربة مستخدم Copilot الأصلية لعملائهم.
سنستمر في إضافة ميزات جديدة ودعم كل من تجربة العلامة البيضاء وتجربة Fluent UI بنفس مستوى التكافؤ.
يمكنك إنهاء الدردشة عبر الويب باستخدام <FluentThemeProvider> لتجربة التجربة الجديدة.
import ReactWebChat from 'botframework-webchat' ;
import { FluentThemeProvider } from 'botframework-webchat-fluent-theme' ;
export default function MyComponent ( ) {
return (
< FluentThemeProvider >
< ReactWebChat / >
< / FluentThemeProvider >
) ;
} ستعرض الدردشة عبر الويب الآن HTML-in-Markdown. لقد قمنا بنقل أداة التعقيم وإمكانية الوصول الخاصة بنا للعمل على مستوى HTML. سيحصل كل من Markdown وHTML-in-Markdown على نفس المعاملة ويلبيان متطلبات الأمان وإمكانية الوصول الخاصة بنا.
يمكنك إيقاف تشغيل هذا الخيار عن طريق ضبط styleOptions.markdownRenderHTML على false .
تدعم الدردشة عبر الويب الآن مخطط Adaptive Cards حتى الإصدار 1.6. بعض الميزات الموجودة في Adaptive Cards قيد المعاينة أو مصممة للاستخدام خارج Bot Framework. دردشة الويب لا تدعم هذه الميزات.
بدءًا من الإصدار 4.16.0، لم يعد Internet Explorer مدعومًا. بعد مرور أكثر من عام على إيقاف Internet Explorer 11 رسميًا، قررنا التوقف عن دعم Internet Explorer. سيساعدنا هذا في جلب ميزات جديدة إلى الدردشة عبر الويب. 4.15.9 هو الإصدار الأخير الذي يدعم Internet Explorer بطريقة محدودة.
adaptiveCardsParserMaxVersionيتضمن تصحيح Web Chat 4.12.1 خاصية نمط جديدة تسمح للمطورين باختيار الحد الأقصى لإصدار مخطط Adaptive Cards. راجع 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,
يعرض الكود أعلاه القيم الافتراضية التي ستراها في الدردشة عبر الويب.
تمت إعادة هيكلة واجهة برمجة تطبيقات الدردشة عبر الويب في حزمة منفصلة. لمعرفة المزيد، راجع ملخص إعادة هيكلة واجهة برمجة التطبيقات (API).
بدءًا من Web Chat 4.7.0، أصبح الكلام عبر الخط المباشر مدعومًا، وهي الطريقة المفضلة لتوفير وظيفة الكلام المتكاملة في الدردشة عبر الويب. نحن نعمل على سد فجوات الميزات بين Direct Line Speech وWeb Speech API (بما في ذلك الخدمات المعرفية ووظائف الكلام التي يوفرها المتصفح).
بدءًا من 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. بمجرد إنشاء الروبوت، ستحتاج إلى الحصول على سر الدردشة عبر الويب الخاص بالروبوت في Azure Portal. ثم استخدم السر لإنشاء رمز مميز وتمريره إلى دردشة الويب الخاصة بك.
توفر الدردشة عبر الويب واجهة مستخدم أعلى قنوات الخط المباشر وقنوات الكلام ذات الخط المباشر. هناك طريقتان للاتصال بالروبوت الخاص بك من خلال مكالمات HTTP من العميل: عن طريق إرسال سر الروبوت أو إنشاء رمز مميز عبر السر.
نوصي بشدة باستخدام Token API بدلاً من تزويد التطبيق بسرك. لمعرفة المزيد حول السبب، راجع وثائق المصادقة على واجهة برمجة تطبيقات الرمز المميز وأمن العميل.
لمزيد من القراءة يرجى مراجعة الروابط التالية:
استخدام الدردشة عبر الويب مع مصادقة Azure Bot Services
ميزات مصادقة الخط المباشر المحسنة
تم تصميم الدردشة عبر الويب للتكامل مع موقع الويب الخاص بك الحالي باستخدام JavaScript أو React. يمنحك التكامل مع JavaScript خيارات معتدلة للتصميم والتخصيص.
يمكنك استخدام حزمة الدردشة عبر الويب النموذجية الكاملة (التي تسمى حزمة الميزات الكاملة) التي تحتوي على الميزات الأكثر استخدامًا.
إليك كيفية إضافة التحكم في الدردشة عبر الويب إلى موقع الويب الخاص بك:
<!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 >
userIDusernameوالإعداداتlocaleكلها معلمات اختيارية لتمريرها إلى أسلوبrenderWebChat. لمعرفة المزيد حول دعائم الدردشة عبر الويب، راجع الوثائق المرجعية لواجهة برمجة تطبيقات الدردشة عبر الويب.
لا يُنصح بتعيين
userIDكقيمة ثابتة لأن ذلك سيؤدي إلى مشاركة جميع المستخدمين في الحالة. يرجى الاطلاع علىAPI userID entryلمزيد من المعلومات.
يمكن العثور على مزيد من المعلومات حول الترجمة في وثائق الترجمة.
شاهد نموذج العمل لحزمة الدردشة عبر الويب الكاملة.
للحصول على إمكانية التخصيص الكاملة، يمكنك استخدام React لإعادة إنشاء مكونات الدردشة عبر الويب.
لتثبيت نسخة الإنتاج من 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لتثبيت إصدار تطوير متزامن مع فرع GitHubmainلـ Web Chat.
شاهد نموذج العمل للدردشة عبر الويب المقدمة عبر React.
تستخدم الدردشة عبر الويب Redux داخليًا لإدارة الحالة. يتم تمكين Redux DevTools في إصدار NPM كميزة اشتراك.
هذا لإلقاء نظرة سريعة على كيفية عمل الدردشة عبر الويب. هذا ليس مستكشف واجهة برمجة التطبيقات (API) ولا يمثل تأييدًا لاستخدام متجر Redux للوصول إلى واجهة المستخدم برمجيًا. يجب استخدام واجهة برمجة تطبيقات الخطافات بدلاً من ذلك.
لاستخدام 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 . قد يؤدي السفر عبر الزمن إلى كسر واجهة المستخدم.تم تصميم الدردشة عبر الويب لتكون قابلة للتخصيص دون الحاجة إلى تفرع كود المصدر. يوضح الجدول أدناه نوع التخصيصات التي يمكنك تحقيقها عند استيراد الدردشة عبر الويب بطرق مختلفة. هذه القائمة ليست شاملة.
| حزمة CDN | رد فعل | |
|---|---|---|
| تغيير الألوان | ✔ | ✔ |
| تغيير الأحجام | ✔ | ✔ |
| تحديث/استبدال أنماط CSS | ✔ | ✔ |
| استمع للأحداث | ✔ | ✔ |
| التفاعل مع صفحة الويب المضيفة | ✔ | ✔ |
| أنشطة العرض المخصصة | ✔ | |
| تقديم المرفقات المخصصة | ✔ | |
| إضافة مكونات واجهة المستخدم الجديدة | ✔ | |
| إعادة تكوين واجهة المستخدم بأكملها | ✔ |
تعرف على المزيد حول تخصيص الدردشة عبر الويب لمعرفة المزيد حول التخصيص.
يحتوي Bot Framework على العديد من أنواع الأنشطة، ولكن ليست جميعها مدعومة في الدردشة عبر الويب. عرض مستندات أنواع الأنشطة لمعرفة المزيد.
اعرض القائمة الكاملة لنماذج الدردشة عبر الويب لمزيد من الأفكار حول تخصيص الدردشة عبر الويب.
اعرض وثائق واجهة برمجة التطبيقات (API) لتنفيذ الدردشة عبر الويب.
تدعم الدردشة عبر الويب أحدث إصدارين من المتصفحات الحديثة مثل Chrome وMicrosoft Edge وFireFox. إذا كنت بحاجة إلى الدردشة عبر الويب في Internet Explorer 11، فيرجى الاطلاع على العرض التوضيحي لحزمة ES5.
ومع ذلك، يرجى ملاحظة ما يلي:
babel . عرض وثائق إمكانية الوصول.
اعرض وثائق الترجمة للتنفيذ في الدردشة عبر الويب.
اعرض وثائق الإشعارات للتنفيذ في الدردشة عبر الويب.
اعرض وثائق القياس عن بعد للتنفيذ في الدردشة عبر الويب.
اعرض دليل الدعم الفني للحصول على إرشادات ومساعدة بشأن استكشاف الأخطاء وإصلاحها في مستودع الدردشة عبر الويب لمزيد من المعلومات قبل تقديم مشكلة جديدة.
تدعم الدردشة عبر الويب مجموعة واسعة من محركات الكلام للحصول على تجربة محادثة طبيعية مع الروبوت. يوضح هذا القسم المحركات المختلفة المدعومة:
يعد Direct Line Speech الطريقة المفضلة لإضافة وظيفة الكلام في الدردشة عبر الويب. يرجى الرجوع إلى وثائق خطاب الخط المباشر للحصول على التفاصيل.
يمكنك استخدام خدمات الكلام للخدمات المعرفية لإضافة وظيفة الكلام إلى الدردشة عبر الويب. يرجى الرجوع إلى وثائق خدمات النطق للخدمات المعرفية للحصول على التفاصيل.
يمكنك أيضًا استخدام أي محركات كلام تدعم معيار W3C Web Speech API. تدعم بعض المتصفحات واجهة برمجة تطبيقات التعرف على الكلام وواجهة برمجة تطبيقات تركيب الكلام. يمكنك المزج والتوفيق بين محركات مختلفة - بما في ذلك خدمات الكلام الخاصة بالخدمات المعرفية - لتوفير أفضل تجربة للمستخدم.
تتوفر أحدث أجزاء الدردشة عبر الويب على صفحة الإصدارات اليومية لدردشة الويب.
سيتم إصدار الصحف اليومية بعد الساعة 3:00 صباحًا بتوقيت المحيط الهادئ عندما يتم الالتزام بالتغييرات على الفرع الرئيسي.
راجع صفحة المساهمة الخاصة بنا للحصول على تفاصيل حول كيفية إنشاء المشروع وإرشادات المستودع الخاصة بنا لطلبات السحب.
راجع صفحة قواعد السلوك الخاصة بنا للحصول على تفاصيل حول قواعد سلوك Microsoft.
اعرض وثائق الأمان لمعرفة المزيد حول الإبلاغ عن مشكلات الأمان.
