BotFramework WebChat

انقر هنا لمعرفة الجديد في الدردشة عبر الإنترنت

بوت إطار الدردشة على شبكة الإنترنت

يحتوي هذا المستودع على تعليمات برمجية لمكون Bot Framework Web Chat. يعد مكون Bot Framework Web Chat عميلًا يعتمد على الويب وقابلاً للتخصيص بدرجة كبيرة لـ Bot Framework v4 SDK. يتيح الإصدار الرابع من Bot Framework SDK للمطورين تصميم نموذج للمحادثة وإنشاء تطبيقات روبوت متطورة.

يعد هذا المستودع جزءًا من Microsoft Bot Framework - وهو إطار عمل شامل لبناء تجارب الذكاء الاصطناعي للمحادثة على مستوى المؤسسة.

تدعم الدردشة عبر الويب سياسة أمان المحتوى (CSP). يُنصح مطورو الويب بتمكين CSP لتحسين الأمان وحماية المحادثات. يمكنك قراءة المزيد عن CSP في هذه المقالة.

---

ملاحظات الإصدار

يشير هذا القسم إلى ملاحظات الإصدار المهمة. لمزيد من المعلومات، يرجى الاطلاع على الروابط ذات الصلة والتحقق من CHANGELOG.md

ملاحظات: يُنصح مطورو الويب باستخدام ~ (نطاق التلدة) لتحديد الإصدارات الثانوية، التي تحتوي على ميزات و/أو إصلاحات جديدة. استخدم ^ (نطاق علامة الإقحام) لتحديد الإصدارات الرئيسية، والتي قد تحتوي على تغييرات جذرية.

4.19.0 تغييرات ملحوظة

• يدعم رسالة إعلامية في البث المباشر

4.18.0 تغييرات ملحوظة

في هذا الإصدار، نركز على تحسينات الأداء، بما في ذلك تحسينات الذاكرة ووقت التحميل.

4.17.0 تغييرات ملحوظة

دعم استجابة البث المباشر

يمكن للروبوتات الآن بث ردودها مباشرة. قبل أن يدعم Bot Framework SDK هذه الميزة، يمكن لمؤلفي الروبوتات متابعة التفاصيل الموجودة في LIVESTREAMING.md لإنشاء استجابات البث المباشر.

الظهور الأول لوحدات ES

يتم الآن تصدير Web Chat كوحدات ES (صادرات مسماة) إلى جانب CommonJS (صادرات مسماة وغير مسماة).

تحسين تجربة تحميل الملفات

يمكن للمستخدم النهائي الآن إضافة رسالة والتأكيد قبل تحميل الملف الخاص به إلى الروبوت. لإلغاء الاشتراك في التجربة الجديدة، قم بتمرير sendAttachmentOn: 'send' في خيارات النمط.

دعم حزمة الموضوع

نحن متحمسون لإضافة دعم حزمة السمات. يمكن للمطورين الآن تجميع كل تخصيصاتهم في حزمة واحدة ونشرها على NPM.

حزمة سمات واجهة المستخدم بطلاقة التجريبية

يسعدنا أن نعلن أن حزمة سمات Fluent UI قيد العمل وهي حاليًا في المرحلة التجريبية. تم تصميم حزمة السمات هذه لمطوري الويب الذين يرغبون في تقديم تجربة مستخدم Copilot الأصلية لعملائهم.

سنستمر في إضافة ميزات جديدة ودعم كل من تجربة العلامة البيضاء وتجربة Fluent UI بنفس مستوى التكافؤ.

يمكنك إنهاء الدردشة عبر الويب باستخدام لتجربة التجربة الجديدة.

 import ReactWebChat from 'botframework-webchat' ;
import { FluentThemeProvider } from 'botframework-webchat-fluent-theme' ;

export default function MyComponent ( ) {
   return (
      < FluentThemeProvider >
         < ReactWebChat / >
      < / FluentThemeProvider >
   ) ;
} 

دعم HTML في تخفيض السعر

ستعرض الدردشة عبر الويب الآن HTML-in-Markdown. لقد قمنا بنقل أداة التعقيم وإمكانية الوصول الخاصة بنا للعمل على مستوى HTML. سيحصل كل من Markdown وHTML-in-Markdown على نفس المعاملة ويلبيان متطلبات الأمان وإمكانية الوصول الخاصة بنا.

يمكنك إيقاف تشغيل هذا الخيار عن طريق ضبط styleOptions.markdownRenderHTML على false .

4.16.1 تغييرات ملحوظة

تدعم الدردشة عبر الويب الآن مخطط Adaptive Cards حتى الإصدار 1.6. بعض الميزات الموجودة في Adaptive Cards قيد المعاينة أو مصممة للاستخدام خارج Bot Framework. دردشة الويب لا تدعم هذه الميزات.

4.16.0 تغييرات ملحوظة

بدءًا من الإصدار 4.16.0، لم يعد Internet Explorer مدعومًا. بعد مرور أكثر من عام على إيقاف Internet Explorer 11 رسميًا، قررنا التوقف عن دعم Internet Explorer. سيساعدنا هذا في جلب ميزات جديدة إلى الدردشة عبر الويب. 4.15.9 هو الإصدار الأخير الذي يدعم Internet Explorer بطريقة محدودة.

4.12.1 التصحيح: خاصية النمط الجديد adaptiveCardsParserMaxVersion

يتضمن تصحيح Web Chat 4.12.1 خاصية نمط جديدة تسمح للمطورين باختيار الحد الأقصى لإصدار مخطط Adaptive Cards. راجع PR #3778 لمعرفة تغييرات التعليمات البرمجية.

لتحديد إصدار أقصى مختلف، يمكنك ضبط خيارات النمط الموضحة أدناه:

 window . WebChat . renderWebChat (
   {
      directLine ,
      store ,
      styleOptions : {
         adaptiveCardsParserMaxVersion : '1.2'
      }
   } ,
   document . getElementById ( 'webchat' )
) ;

• ستطبق الدردشة عبر الويب الحد الأقصى للمخطط المتوفر وفقًا لإصدار Adaptive Cards (اعتبارًا من هذا التصحيح، المخطط 1.3) بشكل افتراضي.
• سيتم إرجاع الإصدار غير الصالح إلى الإعداد الافتراضي للدردشة عبر الويب.

يتغير التركيز المرئي إلى النص في Web Chat 4.12.0

تمت إضافة تحديث جديد لإمكانية الوصول إلى 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.11.0

تمت إعادة هيكلة واجهة برمجة تطبيقات الدردشة عبر الويب في حزمة منفصلة. لمعرفة المزيد، راجع ملخص إعادة هيكلة واجهة برمجة التطبيقات (API).

دعم الكلام عبر الخط المباشر في Web Chat 4.7.0

بدءًا من Web Chat 4.7.0، أصبح الكلام عبر الخط المباشر مدعومًا، وهي الطريقة المفضلة لتوفير وظيفة الكلام المتكاملة في الدردشة عبر الويب. نحن نعمل على سد فجوات الميزات بين Direct Line Speech وWeb Speech API (بما في ذلك الخدمات المعرفية ووظائف الكلام التي يوفرها المتصفح).

الترقية إلى 4.6.0

بدءًا من Web Chat 4.6.0، تتطلب Web Chat استخدام React 16.8.6 أو إصدار أحدث.

على الرغم من أننا نوصي بترقية تطبيقك المضيف في أقرب وقت ممكن، إلا أننا ندرك أن التطبيق المضيف قد يحتاج إلى بعض الوقت قبل تحديث تبعيات React الخاصة به، خاصة فيما يتعلق بالتطبيقات الضخمة.

إذا لم يكن تطبيقك جاهزًا لـ React 16.8.6 بعد، فيمكنك اتباع نموذج React المختلط لمضيف React المزدوج في تطبيقك.

تغييرات الكلام في Web Chat 4.5.0

هناك تغيير جذري في توقعات السلوك فيما يتعلق بتلميح الكلام والإدخال في الدردشة عبر الويب. يرجى الرجوع إلى القسم الخاص بسلوك تلميح الإدخال قبل 4.5.0 للحصول على التفاصيل.

الترحيل من Web Chat v3 إلى v4

اعرض مستندات الترحيل للتعرف على كيفية الترحيل من Web Chat v3.

---

كيفية الاستخدام

أولاً، قم بإنشاء روبوت باستخدام Azure Bot Service. بمجرد إنشاء الروبوت، ستحتاج إلى الحصول على سر الدردشة عبر الويب الخاص بالروبوت في Azure Portal. ثم استخدم السر لإنشاء رمز مميز وتمريره إلى دردشة الويب الخاصة بك.

ربط تطبيق العميل بالبوت

توفر الدردشة عبر الويب واجهة مستخدم أعلى قنوات الخط المباشر وقنوات الكلام ذات الخط المباشر. هناك طريقتان للاتصال بالروبوت الخاص بك من خلال مكالمات HTTP من العميل: عن طريق إرسال سر الروبوت أو إنشاء رمز مميز عبر السر.

نوصي بشدة باستخدام Token API بدلاً من تزويد التطبيق بسرك. لمعرفة المزيد حول السبب، راجع وثائق المصادقة على واجهة برمجة تطبيقات الرمز المميز وأمن العميل.

لمزيد من القراءة يرجى مراجعة الروابط التالية:

• استخدام الدردشة عبر الويب مع مصادقة Azure Bot Services

• ميزات مصادقة الخط المباشر المحسنة

التكامل مع جافا سكريبت

تم تصميم الدردشة عبر الويب للتكامل مع موقع الويب الخاص بك الحالي باستخدام JavaScript أو React. يمنحك التكامل مع JavaScript خيارات معتدلة للتصميم والتخصيص.

يمكنك استخدام حزمة الدردشة عبر الويب النموذجية الكاملة (التي تسمى حزمة الميزات الكاملة) التي تحتوي على الميزات الأكثر استخدامًا.

إليك كيفية إضافة التحكم في الدردشة عبر الويب إلى موقع الويب الخاص بك:

" style=";text-align:right;direction:rtl">

 >
< 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 . لمعرفة المزيد حول دعائم الدردشة عبر الويب، راجع الوثائق المرجعية لواجهة برمجة تطبيقات الدردشة عبر الويب.

لا يُنصح بتعيين userID كقيمة ثابتة لأن ذلك سيؤدي إلى مشاركة جميع المستخدمين في الحالة. يرجى الاطلاع على API userID entry لمزيد من المعلومات.

يمكن العثور على مزيد من المعلومات حول الترجمة في وثائق الترجمة.

شاهد نموذج العمل لحزمة الدردشة عبر الويب الكاملة.

التكامل مع رد الفعل

للحصول على إمكانية التخصيص الكاملة، يمكنك استخدام React لإعادة إنشاء مكونات الدردشة عبر الويب.

لتثبيت نسخة الإنتاج من NPM، قم بتشغيل npm install botframework-webchat . راجع ملاحظات الإصدار الخاصة بنا حول كيفية اختيار الإصدار.

; };" style=";text-align:right;direction:rtl">

 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 لتثبيت إصدار تطوير متزامن مع فرع GitHub main لـ Web Chat.

شاهد نموذج العمل للدردشة عبر الويب المقدمة عبر React.

الدعم التجريبي لRedux DevTools

تستخدم الدردشة عبر الويب Redux داخليًا لإدارة الحالة. يتم تمكين Redux DevTools في إصدار NPM كميزة اشتراك.

هذا لإلقاء نظرة سريعة على كيفية عمل الدردشة عبر الويب. هذا ليس مستكشف واجهة برمجة التطبيقات (API) ولا يمثل تأييدًا لاستخدام متجر Redux للوصول إلى واجهة المستخدم برمجيًا. يجب استخدام واجهة برمجة تطبيقات الخطافات بدلاً من ذلك.

لاستخدام Redux DevTools، استخدم وظيفة createStoreWithDevTools لإنشاء متجر يدعم Redux DevTools.

; };" style=";text-align:right;direction:rtl">

  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 ;
  };

هناك بعض القيود عند استخدام Redux DevTools:

• يستخدم متجر Redux الآثار الجانبية عبر redux-saga . قد يؤدي السفر عبر الزمن إلى كسر واجهة المستخدم.
• يتم تخزين العديد من حالات واجهة المستخدم في سياق وحالة React. لم يتم عرضها في متجر Redux.
• تعتمد بعض واجهات المستخدم الحساسة للوقت على ساعة الوقت الفعلي ولا تتأثر بالسفر عبر الزمن.
• إجراءات الإرسال غير مدعومة رسميًا. الرجاء استخدام Hooks API بدلاً من ذلك.
• قد تتحرك الإجراءات والمخفضات داخل وخارج متجر Redux عبر الإصدارات. Hooks API هي واجهة API الرسمية للوصول إلى واجهة المستخدم.

تخصيص واجهة مستخدم الدردشة عبر الويب

تم تصميم الدردشة عبر الويب لتكون قابلة للتخصيص دون الحاجة إلى تفرع كود المصدر. يوضح الجدول أدناه نوع التخصيصات التي يمكنك تحقيقها عند استيراد الدردشة عبر الويب بطرق مختلفة. هذه القائمة ليست شاملة.

	حزمة CDN	رد فعل
تغيير الألوان	✔	✔
تغيير الأحجام	✔	✔
تحديث/استبدال أنماط CSS	✔	✔
استمع للأحداث	✔	✔
التفاعل مع صفحة الويب المضيفة	✔	✔
أنشطة العرض المخصصة		✔
تقديم المرفقات المخصصة		✔
إضافة مكونات واجهة المستخدم الجديدة		✔
إعادة تكوين واجهة المستخدم بأكملها		✔

تعرف على المزيد حول تخصيص الدردشة عبر الويب لمعرفة المزيد حول التخصيص.

أنواع الأنشطة المدعومة على عميل الدردشة عبر الويب

يحتوي Bot Framework على العديد من أنواع الأنشطة، ولكن ليست جميعها مدعومة في الدردشة عبر الويب. عرض مستندات أنواع الأنشطة لمعرفة المزيد.

قائمة العينات

اعرض القائمة الكاملة لنماذج الدردشة عبر الويب لمزيد من الأفكار حول تخصيص الدردشة عبر الويب.

مزيد من القراءة

مرجع واجهة برمجة التطبيقات

اعرض وثائق واجهة برمجة التطبيقات (API) لتنفيذ الدردشة عبر الويب.

توافق المتصفح

تدعم Web Chat أحدث إصدارين من المتصفحات الحديثة مثل Chrome وMicrosoft Edge وFireFox. إذا كنت بحاجة إلى الدردشة عبر الويب في Internet Explorer 11، فيرجى الاطلاع على العرض التوضيحي لحزمة ES5.

ومع ذلك، يرجى ملاحظة ما يلي:

• دردشة الويب لا تدعم Internet Explorer الأقدم من الإصدار 11
• التخصيص كما هو موضح في العينات غير ES5 غير مدعوم لبرنامج Internet Explorer. نظرًا لأن IE11 هو متصفح غير حديث، فهو لا يدعم ES6، والعديد من العينات التي تستخدم وظائف الأسهم والوعود الحديثة ستحتاج إلى تحويلها يدويًا إلى ES5. إذا كنت بحاجة إلى تخصيص كبير لتطبيقك، فنوصي بشدة بتطوير تطبيقك لمتصفح حديث مثل Google Chrome أو Microsoft Edge.
• ليس لدى Web Chat أي خطة لدعم نماذج IE11 (ES5).
  • بالنسبة للعملاء الذين يرغبون في إعادة كتابة العينات الأخرى يدويًا للعمل في IE11، نوصي بالنظر في تحويل التعليمات البرمجية من ES6+ إلى ES5 باستخدام عمليات التعبئة المتعددة والمترجمات مثل babel .

إمكانية الوصول

عرض وثائق إمكانية الوصول.

التعريب

اعرض وثائق الترجمة للتنفيذ في الدردشة عبر الويب.

إشعارات

اعرض وثائق الإشعارات للتنفيذ في الدردشة عبر الويب.

القياس عن بعد

اعرض وثائق القياس عن بعد للتنفيذ في الدردشة عبر الويب.

دليل الدعم الفني

اعرض دليل الدعم الفني للحصول على إرشادات ومساعدة بشأن استكشاف الأخطاء وإصلاحها في مستودع الدردشة عبر الويب لمزيد من المعلومات قبل تقديم مشكلة جديدة.

خطاب

تدعم الدردشة عبر الويب مجموعة واسعة من محركات الكلام للحصول على تجربة محادثة طبيعية مع الروبوت. يوضح هذا القسم المحركات المختلفة المدعومة:

• خطاب الخط المباشر
• الخدمات المعرفية خدمات الكلام
• المحرك الذي يوفره المتصفح أو المحركات الأخرى

التكامل مع خطاب الخط المباشر

يعد Direct Line Speech الطريقة المفضلة لإضافة وظيفة الكلام في الدردشة عبر الويب. يرجى الرجوع إلى وثائق خطاب الخط المباشر للحصول على التفاصيل.

التكامل مع خدمات الكلام للخدمات المعرفية

يمكنك استخدام خدمات الكلام الخاصة بالخدمات المعرفية لإضافة وظيفة الكلام إلى الدردشة عبر الويب. يرجى الرجوع إلى وثائق خدمات النطق للخدمات المعرفية للحصول على التفاصيل.

المحرك الذي يوفره المتصفح أو المحركات الأخرى

يمكنك أيضًا استخدام أي محركات كلام تدعم معيار W3C Web Speech API. تدعم بعض المتصفحات واجهة برمجة تطبيقات التعرف على الكلام وواجهة برمجة تطبيقات تركيب الكلام. يمكنك المزج والتوفيق بين محركات مختلفة - بما في ذلك خدمات الكلام الخاصة بالخدمات المعرفية - لتوفير أفضل تجربة للمستخدم.

---

كيفية الاختبار باستخدام أحدث أجزاء الدردشة عبر الويب

تتوفر أحدث أجزاء الدردشة عبر الويب على صفحة الإصدارات اليومية لدردشة الويب.

سيتم إصدار الصحف اليومية بعد الساعة 3:00 صباحًا بتوقيت المحيط الهادئ عندما يتم الالتزام بالتغييرات في الفرع الرئيسي.

المساهمة

راجع صفحة المساهمة الخاصة بنا للحصول على تفاصيل حول كيفية إنشاء المشروع وإرشادات المستودع الخاصة بنا لطلبات السحب.

راجع صفحة قواعد السلوك الخاصة بنا للحصول على تفاصيل حول قواعد سلوك Microsoft.

الإبلاغ عن المشكلات الأمنية

اعرض وثائق الأمان لمعرفة المزيد حول الإبلاغ عن مشكلات الأمان.