Obrolan Web BotFramework

Klik di sini untuk mengetahui apa yang baru di Web Chat

Obrolan Web Kerangka Bot

Repositori ini berisi kode untuk komponen Bot Framework Web Chat. Komponen Bot Framework Web Chat adalah klien berbasis web yang sangat dapat disesuaikan untuk Bot Framework v4 SDK. Bot Framework SDK v4 memungkinkan pengembang memodelkan percakapan dan membangun aplikasi bot yang canggih.

Repositori ini adalah bagian dari Microsoft Bot Framework - kerangka kerja komprehensif untuk membangun pengalaman AI percakapan tingkat perusahaan.

Obrolan Web mendukung Kebijakan Keamanan Konten (CSP). Pengembang web disarankan untuk mengaktifkan CSP untuk meningkatkan keamanan dan melindungi percakapan. Anda dapat membaca lebih lanjut tentang CSP di artikel ini.

---

Catatan versi

Bagian ini menunjukkan catatan versi penting. Untuk informasi lebih lanjut, silakan lihat tautan terkait dan periksa CHANGELOG.md

Catatan: pengembang web disarankan untuk menggunakan ~ (kisaran tilde) untuk memilih versi minor, yang berisi fitur dan/atau perbaikan baru. Gunakan ^ (rentang tanda sisipan) untuk memilih versi utama, yang mungkin berisi perubahan yang dapat menyebabkan gangguan.

4.19.0 perubahan penting

• Mendukung pesan informatif dalam streaming langsung

4.18.0 perubahan penting

Dalam rilis ini, kami berfokus pada peningkatan kinerja, termasuk optimalisasi memori dan waktu muat.

4.17.0 perubahan penting

Mendukung respons streaming langsung

Bot sekarang dapat melakukan streaming langsung tanggapan mereka. Sebelum Bot Framework SDK mendukung fitur ini, pembuat bot dapat mengikuti detailnya di LIVESTREAMING.md untuk membuat respons streaming langsung.

Debut Modul ES

Obrolan Web sekarang diekspor sebagai Modul ES (ekspor bernama) bersama dengan CommonJS (ekspor bernama dan tanpa nama).

Peningkatan pengalaman pengunggahan file

Pengguna akhir sekarang dapat menambahkan pesan dan mengonfirmasi sebelum mengunggah file mereka ke bot. Untuk tidak ikut serta dalam pengalaman baru, teruskan sendAttachmentOn: 'send' dalam opsi gaya.

Dukungan paket tema

Kami sangat bersemangat untuk menambahkan dukungan paket tema. Pengembang kini dapat mengemas semua penyesuaian mereka dalam satu paket dan mempublikasikannya ke NPM.

Paket tema UI Lancar Eksperimental

Kami sangat gembira mengumumkan bahwa paket tema UI Lancar sedang dalam pengerjaan dan saat ini sedang dalam tahap percobaan. Paket tema ini dirancang untuk pengembang web yang ingin menghadirkan pengalaman pengguna Copilot asli kepada pelanggan mereka.

Kami akan terus menambahkan fitur baru dan mendukung pengalaman label putih dan pengalaman UI Lancar dengan tingkat keseimbangan yang sama.

Anda dapat menyelesaikan Obrolan Web dengan untuk mencoba pengalaman baru.

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

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

Mendukung HTML-dalam-Penurunan Harga

Obrolan Web sekarang akan merender HTML-in-Markdown. Kami telah mem-porting pembersih dan pemecah aksesibilitas kami agar berfungsi pada level HTML. Markdown dan HTML-in-Markdown akan menerima perlakuan yang sama dan memenuhi persyaratan keamanan dan aksesibilitas kami.

Anda dapat menonaktifkan opsi ini dengan menyetel styleOptions.markdownRenderHTML ke false .

4.16.1 perubahan penting

Obrolan Web sekarang mendukung skema Kartu Adaptif hingga 1.6. Beberapa fitur di Kartu Adaptif sedang dalam pratinjau atau dirancang untuk digunakan di luar Kerangka Bot. Obrolan Web tidak mendukung fitur ini.

4.16.0 perubahan penting

Mulai dari 4.16.0, Internet Explorer tidak lagi didukung. Setelah lebih dari setahun Internet Explorer 11 resmi dihentikan, kami memutuskan untuk berhenti mendukung Internet Explorer. Ini akan membantu kami menghadirkan fitur baru ke Obrolan Web. 4.15.9 adalah versi terakhir yang mendukung Internet Explorer secara terbatas.

Patch 4.12.1: Properti gaya baru adaptiveCardsParserMaxVersion

Patch Web Chat 4.12.1 menyertakan properti gaya baru yang memungkinkan pengembang memilih versi skema Kartu Adaptif maksimal. Lihat PR #3778 untuk perubahan kode.

Untuk menentukan versi maksimal yang berbeda, Anda dapat menyesuaikan opsi gaya, seperti yang ditunjukkan di bawah ini:

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

• Obrolan Web akan menerapkan skema maksimum yang tersedia sesuai dengan versi Kartu Adaptif (pada patch ini, skema 1.3) secara default.
• Versi yang tidak valid akan kembali ke default Obrolan Web.

Perubahan fokus visual pada transkrip di Web Chat 4.12.0

Pembaruan aksesibilitas baru telah ditambahkan ke Obrolan Web dari PR #3703. Perubahan ini menciptakan fokus visual untuk transkrip (batas hitam tebal) dan aktivitas terfokus aria-activedescendent (batas putus-putus hitam) secara default. Jika berlaku, nilai transcriptVisualKeyboardIndicator... juga akan diterapkan pada turunan carousel ( CarouselFilmStrip.js ). Hal ini dilakukan untuk mencocokkan gaya fokus default saat ini untuk Kartu Adaptif, yang mungkin merupakan turunan dari carousel.

Untuk memodifikasi gaya ini, Anda dapat mengubah props berikut melalui styleOptions :

  transcriptActivityVisualKeyboardIndicatorColor: DEFAULT_SUBTLE,
  transcriptActivityVisualKeyboardIndicatorStyle: 'dashed',
  transcriptActivityVisualKeyboardIndicatorWidth: 1,
  transcriptVisualKeyboardIndicatorColor: 'Black',
  transcriptVisualKeyboardIndicatorStyle: 'solid',
  transcriptVisualKeyboardIndicatorWidth: 2,

Kode di atas menunjukkan nilai default yang akan Anda lihat di Web Chat.

Refaktor API menjadi paket baru di Web Chat 4.11.0

API Obrolan Web telah difaktorkan ulang menjadi paket terpisah. Untuk mempelajari lebih lanjut, lihat ringkasan pemfaktoran ulang API.

Dukungan Direct Line Speech di Obrolan Web 4.7.0

Mulai dari Web Chat 4.7.0, Direct Line Speech didukung, dan ini merupakan cara pilihan untuk menyediakan fungsionalitas ucapan terintegrasi di Web Chat. Kami sedang berupaya untuk menutup kesenjangan fitur antara Direct Line Speech dan Web Speech API (termasuk Layanan Kognitif dan fungsi ucapan yang disediakan browser).

Meningkatkan ke 4.6.0

Mulai dari Web Chat 4.6.0, Web Chat memerlukan React 16.8.6 atau lebih tinggi.

Meskipun kami menyarankan agar Anda mengupgrade aplikasi host Anda sesegera mungkin, kami memahami bahwa aplikasi host mungkin memerlukan beberapa waktu sebelum dependensi React-nya diperbarui, terutama yang berkaitan dengan aplikasi berukuran besar.

Jika aplikasi Anda belum siap untuk React 16.8.6, Anda dapat mengikuti contoh React hybrid untuk menghosting ganda React di aplikasi Anda.

Perubahan ucapan di Obrolan Web 4.5.0

Ada perubahan besar pada ekspektasi perilaku terkait ucapan dan petunjuk masukan di Obrolan Web. Silakan merujuk ke bagian tentang perilaku petunjuk masukan sebelum 4.5.0 untuk detailnya.

Bermigrasi dari Obrolan Web v3 ke v4

Lihat dokumen migrasi untuk mempelajari tentang migrasi dari Web Chat v3.

---

Cara menggunakan

Pertama, buat bot menggunakan Azure Bot Service. Setelah bot dibuat, Anda perlu mendapatkan rahasia Obrolan Web bot di Portal Azure. Kemudian gunakan rahasianya untuk menghasilkan token dan meneruskannya ke Obrolan Web Anda.

Hubungkan aplikasi klien ke bot

Obrolan Web menyediakan UI di atas Saluran Pidato Jalur Langsung dan Jalur Langsung. Ada dua cara untuk terhubung ke bot Anda melalui panggilan HTTP dari klien: dengan mengirimkan rahasia Bot atau membuat token melalui rahasia tersebut.

Kami sangat menyarankan penggunaan token API daripada memberikan rahasia Anda kepada aplikasi. Untuk mempelajari lebih lanjut alasannya, lihat dokumentasi autentikasi pada API token dan keamanan klien.

Untuk bacaan lebih lanjut, silakan lihat tautan berikut:

• Menggunakan Obrolan Web dengan autentikasi Azure Bot Services

• Fitur otentikasi Direct Line yang ditingkatkan

Integrasikan dengan JavaScript

Obrolan Web dirancang untuk berintegrasi dengan situs web Anda yang sudah ada menggunakan JavaScript atau React. Mengintegrasikan dengan JavaScript akan memberi Anda opsi gaya dan penyesuaian yang moderat.

Anda dapat menggunakan paket Obrolan Web lengkap dan umum (disebut paket fitur lengkap) yang berisi fitur-fitur yang paling sering digunakan.

Berikut ini cara menambahkan kontrol Obrolan Web ke situs web Anda:

">

 >
< 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 , dan locale merupakan parameter opsional untuk diteruskan ke metode renderWebChat . Untuk mempelajari selengkapnya tentang alat peraga Obrolan Web, lihat dokumentasi Referensi API Obrolan Web.

Menetapkan userID sebagai nilai statis tidak disarankan karena ini akan menyebabkan semua pengguna berbagi status. Silakan lihat API userID entry untuk informasi lebih lanjut.

Informasi lebih lanjut tentang pelokalan dapat ditemukan di dokumentasi Pelokalan.

Lihat contoh kerja paket Obrolan Web lengkap.

Integrasikan dengan React

Untuk penyesuaian penuh, Anda dapat menggunakan React untuk menyusun ulang komponen Obrolan Web.

Untuk menginstal build produksi dari NPM, jalankan npm install botframework-webchat . Lihat catatan versi kami tentang cara memilih versi.

; };">

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

Anda juga dapat menjalankan npm install botframework-webchat@main untuk menginstal build pengembangan yang disinkronkan dengan cabang main GitHub Obrolan Web.

Lihat contoh kerja Obrolan Web yang dirender melalui React.

Dukungan eksperimental untuk Redux DevTools

Obrolan Web secara internal menggunakan Redux untuk manajemen negara. Redux DevTools diaktifkan di build NPM sebagai fitur keikutsertaan.

Ini untuk melihat sekilas cara kerja Obrolan Web. Ini bukan penjelajah API dan bukan merupakan dukungan penggunaan toko Redux untuk mengakses UI secara terprogram. API hooks harus digunakan sebagai gantinya.

Untuk menggunakan Redux DevTools, gunakan fungsi createStoreWithDevTools untuk membuat penyimpanan yang mendukung 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 ;
  };

Ada beberapa batasan saat menggunakan Redux DevTools:

• Toko Redux menggunakan efek samping melalui redux-saga . Perjalanan waktu dapat merusak UI.
• Banyak status UI disimpan dalam konteks dan status React. Mereka tidak diekspos di toko Redux.
• Beberapa UI yang sensitif terhadap waktu didasarkan pada jam waktu nyata dan tidak terpengaruh oleh perjalanan waktu.
• Tindakan pengiriman tidak didukung secara resmi. Silakan gunakan API kait sebagai gantinya.
• Tindakan dan reduksi dapat masuk dan keluar dari penyimpanan Redux di berbagai versi. Hooks API adalah API resmi untuk mengakses UI.

Menyesuaikan UI Obrolan Web

Obrolan Web dirancang agar dapat disesuaikan tanpa memalsukan kode sumber. Tabel di bawah menguraikan jenis penyesuaian yang dapat Anda capai saat mengimpor Obrolan Web dengan berbagai cara. Daftar ini tidak lengkap.

	Paket CDN	Bereaksi
Ubah warna	✔	✔
Ubah ukuran	✔	✔
Perbarui/ganti gaya CSS	✔	✔
Dengarkan acara	✔	✔
Berinteraksi dengan halaman web hosting	✔	✔
Aktivitas render khusus		✔
Lampiran render khusus		✔
Tambahkan komponen UI baru		✔
Komposisi ulang seluruh UI		✔

Lihat selengkapnya tentang menyesuaikan Obrolan Web untuk mempelajari lebih lanjut tentang penyesuaian.

Jenis Aktivitas yang Didukung di Klien Obrolan Web

Bot Framework memiliki banyak jenis aktivitas, namun tidak semuanya didukung di Web Chat. Lihat dokumen jenis aktivitas untuk mempelajari lebih lanjut.

Daftar sampel

Lihat daftar lengkap contoh Obrolan Web untuk mengetahui lebih banyak ide tentang menyesuaikan Obrolan Web.

Bacaan lebih lanjut

Referensi API

Lihat dokumentasi API untuk mengimplementasikan Obrolan Web.

Kompatibilitas peramban

Obrolan Web mendukung 2 versi terbaru browser modern seperti Chrome, Microsoft Edge, dan FireFox. Jika Anda memerlukan Obrolan Web di Internet Explorer 11, silakan lihat demo bundel ES5.

Namun harap diperhatikan:

• Obrolan Web tidak mendukung Internet Explorer yang lebih lama dari versi 11
• Kustomisasi seperti yang ditunjukkan pada sampel non-ES5 tidak didukung untuk Internet Explorer. Karena IE11 adalah browser non-modern, ia tidak mendukung ES6, dan banyak contoh yang menggunakan fungsi panah dan janji modern perlu dikonversi secara manual ke ES5. Jika Anda membutuhkan banyak penyesuaian untuk aplikasi Anda, kami sangat menyarankan untuk mengembangkan aplikasi Anda untuk browser modern seperti Google Chrome atau Microsoft Edge.
• Obrolan Web tidak memiliki rencana untuk mendukung sampel untuk IE11 (ES5).
  • Untuk pelanggan yang ingin menulis ulang sampel kami yang lain secara manual agar berfungsi di IE11, kami menyarankan untuk mempertimbangkan konversi kode dari ES6+ ke ES5 menggunakan polyfill dan transpiler seperti babel .

Aksesibilitas

Lihat dokumentasi aksesibilitas.

Lokalisasi

Lihat dokumentasi pelokalan untuk diterapkan di Web Chat.

Pemberitahuan

Lihat dokumentasi notifikasi untuk penerapan di Web Chat.

Telemetri

Lihat dokumentasi telemetri untuk penerapan di Web Chat.

Panduan Dukungan Teknis

Lihat Panduan Dukungan Teknis untuk mendapatkan panduan dan bantuan dalam pemecahan masalah di repo Obrolan Web untuk informasi lebih lanjut sebelum mengajukan masalah baru.

Pidato

Obrolan Web mendukung berbagai mesin ucapan untuk pengalaman obrolan alami dengan bot. Bagian ini menguraikan berbagai mesin yang didukung:

• Pidato Garis Langsung
• Layanan Pidato Layanan Kognitif
• Mesin yang disediakan browser atau mesin lainnya

Integrasikan dengan Pidato Jalur Langsung

Direct Line Speech adalah cara pilihan untuk menambahkan fungsionalitas ucapan di Obrolan Web. Silakan merujuk ke dokumentasi Direct Line Speech untuk detailnya.

Integrasikan dengan Layanan Pidato Layanan Kognitif

Anda dapat menggunakan Layanan Pidato Layanan Kognitif untuk menambahkan fungsionalitas ucapan ke Obrolan Web. Silakan merujuk ke dokumentasi Layanan Pidato Layanan Kognitif untuk detailnya.

Mesin yang disediakan browser atau mesin lainnya

Anda juga dapat menggunakan mesin ucapan apa pun yang mendukung standar W3C Web Speech API. Beberapa browser mendukung Speech Recognition API dan Speech Synthesis API. Anda dapat memadupadankan mesin yang berbeda - termasuk Layanan Kognitif Layanan Pidato - untuk memberikan pengalaman pengguna terbaik.

---

Cara menguji dengan bit terbaru Web Chat

Bit terbaru Obrolan Web tersedia di halaman rilis harian Obrolan Web.

Harian akan dirilis setelah pukul 03.00 Waktu Standar Pasifik ketika perubahan telah diterapkan pada cabang utama.

Berkontribusi

Lihat halaman Kontribusi kami untuk detail tentang cara membangun proyek dan pedoman repositori kami untuk Permintaan Tarik.

Lihat halaman KODE ETIK kami untuk rincian tentang Kode Etik Microsoft.

Melaporkan Masalah Keamanan

Lihat dokumentasi keamanan untuk mempelajari lebih lanjut tentang pelaporan masalah keamanan.