ดาวน์โหลด rasa webchat - rasa webchat Source Source Download

rasa webchat

โค้ดแหล่งที่มา AI

css firefox bug

ดาวน์โหลด

rasa webchat

วิดเจ็ตแชทเพื่อปรับใช้ผู้ช่วยเสมือนที่ทำกับ Rasa หรือ Botfront บนเว็บไซต์ใด ๆ

เวอร์ชัน 1.0.1 ของ Rasa WebChat ทำเพื่อทำงานกับเวอร์ชัน 2.3.x และ 2.4.x ของ Rasa ใช้ 1.0.0 สำหรับรุ่น RASA อื่น ๆ

คุณสมบัติ

ข้อความ
ตอบกลับอย่างรวดเร็ว
ภาพ
ม้าหมุน
สนับสนุน Markdown
เซสชันถาวร
การพิมพ์ตัวบ่งชี้
การหน่วงเวลาอย่างชาญฉลาดระหว่างข้อความ
ง่ายต่อการนำเข้าในแท็กสคริปต์หรือเป็นส่วนประกอบปฏิกิริยา

โปรโมชั่น: ตรวจสอบโครงการโอเพนซอร์สสุดเจ๋งอื่น ๆ ของเรา

การใช้งาน

ในแท็ก `<script>`

ใน <body/> :

 < script > ! ( function ( ) {
  let e = document . createElement ( "script" ) ,
    t = document . head || document . getElementsByTagName ( "head" ) [ 0 ] ;
  ( e . src =
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js" ) ,
    // Replace 1.x.x with the version that you want
    ( e . async = ! 0 ) ,
    ( e . onload = ( ) => {
      window . WebChat . default (
        {
          customData : { language : "en" } ,
          socketUrl : "https://bf-botfront.development.agents.botfront.cloud" ,
          // add other props here
        } ,
        null
      ) ;
    } ) ,
    t . insertBefore ( e , t . firstChild ) ;
} ) ( ) ;
</ script >

เราขอแนะนำให้เพิ่มแท็กเวอร์ชันเพื่อป้องกันการเปลี่ยนแปลงจากรุ่นหลัก ๆ เช่นเวอร์ชัน 1.0.0 https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js อย่างไรก็ตามสิ่งนี้จะไม่ทำงานกับรุ่นต่ำกว่า 1.0.0 หากคุณไม่ได้ระบุเวอร์ชันคุณจะได้รับ Rasa-Webchat เวอร์ชันล่าสุดที่มีอยู่

เกี่ยวกับรูปภาพ: width และ height กำหนดขนาดเป็นพิกเซลที่รูปภาพในข้อความถูกปรับขนาดให้ หากไม่ปรากฏตัวภาพจะปรับขนาดเป็นความกว้างสูงสุดของคอนเทนเนอร์และภาพ

เป็นองค์ประกอบที่ตอบสนอง

ติดตั้งแพ็คเกจ NPM:

npm install rasa-webchat

แล้ว:

 import Widget from 'rasa-webchat' ;

function CustomWidget = ( ) => {
  return (
    < Widget
      initPayload = { "/get_started" }
      socketUrl = { "http://localhost:5500" }
      socketPath = { "/socket.io/" }
      customData = { { "language" : "en" } } // arbitrary custom data. Stay minimal as this will be added to the socket
      title = { "Title" }
    />
  )
}

ตรวจสอบให้แน่ใจว่าได้ตั้งค่า Prop embedded เป็น true หากคุณไม่ต้องการดูตัวเรียกใช้งาน

พารามิเตอร์

prop / param	ค่าเริ่มต้น	คำอธิบาย
`initPayload`	`null`	น้ำหนักบรรทุกที่ส่งไปยัง Rasa เมื่อการสนทนาเริ่มต้นขึ้น
`socketUrl`	`null`	URL ซ็อกเก็ต
`socketPath`	`null`	ปิดหน้าต่างแชท
`customData`	`null`	วัตถุโดยพลการส่งด้วยซ็อกเก็ต หากใช้กับ botfront จะต้องมีภาษา (เช่น `{"language": "en"}` )
`docViewer`	`false`	หากคุณเพิ่มเสานี้ลงในส่วนประกอบหรือลงในสคริปต์ init, `docViewer=true` สิ่งนี้จะรักษาลิงก์ในข้อความที่ได้รับเป็นลิงก์ไปยังเอกสาร ( `.pdf .doc .xlsx` ฯลฯ ) และจะเปิดในป๊อปอัพโดยใช้บริการ `https://docs.google.com/viewer`
`title`	`'Welcome"`	ชื่อที่แสดงในส่วนหัวของวิดเจ็ต
`subtitle`	`null`	คำบรรยายที่แสดงภายใต้ชื่อในส่วนหัวของวิดเจ็ต
`inputTextFieldHint`	`"Type a message"`	ตัวยึดฟิลด์อินพุตข้อความผู้ใช้
`hideWhenNotConnected`	`true`	หาก `true` วิดเจ็ตจะซ่อนเมื่อการเชื่อมต่อกับซ็อกเก็ตหายไป
`connectOn`	`"mount"`	เสานี้ช่วยให้คุณเลือกได้เมื่อวิดเจ็ตจะลองเชื่อมต่อกับเซิร์ฟเวอร์ โดยค่าเริ่มต้นจะพยายามเชื่อมต่อทันทีที่ติดตั้ง หากคุณเลือก `connectOn='open'` มันจะพยายามเชื่อมต่อเมื่อเปิดวิดเจ็ตเท่านั้น มันสามารถใช้ค่า `mount` และ `open` เท่านั้น
`onSocketEvent`	`null`	เรียกรหัสที่กำหนดเองในเหตุการณ์ซ็อกเก็ตเฉพาะ
`embedded`	`false`	ตั้งค่าเป็น `true` หากคุณต้องการฝังในหน้าเว็บ วิดเจ็ตจะเปิดอยู่เสมอและ `initPayload` จะถูกเรียกใช้ทันที
`showFullScreenButton`	`false`	แสดงสลับเต็มหน้าจอ
`displayUnreadCount`	`false`	พา ธ ไปยังภาพที่แสดงบนตัวเรียกใช้งานเมื่อปิดวิดเจ็ต
`showMessageDate`	`false`	แสดงวันที่ข้อความ สามารถ overriden ด้วยฟังก์ชั่น: `(timestamp, message) => return 'my custom date'`
`customMessageDelay`	ดูด้านล่าง	เสานี้เป็นฟังก์ชันฟังก์ชั่นใช้สตริงข้อความเป็นอาร์กิวเมนต์ ฟังก์ชั่นที่กำหนดจะถูกเรียกทุกครั้งที่ได้รับข้อความและค่าที่ส่งคืนจะถูกใช้เป็นความล่าช้าของมิลลิวินาทีก่อนที่จะแสดงข้อความใหม่
`params`	ดูด้านล่าง	ใช้เป็นหลักในการปรับแต่งขนาดภาพยังใช้ในการเปลี่ยนตัวเลือกการจัดเก็บ
`storage`	`"local"`	นี่ไม่ใช่เสา แต่จะต้องส่งผ่านภายในวัตถุพารามิเตอร์ด้านบน ระบุตำแหน่งที่เก็บข้อมูลของสถานะการสนทนาในเบราว์เซอร์ `"session"` กำหนดสถานะที่จะเก็บไว้ในที่เก็บเซสชัน การจัดเก็บเซสชันยังคงมีอยู่ในการโหลดหน้าใหม่และจะถูกล้างหลังจากเบราว์เซอร์หรือแท็บถูกปิดหรือเมื่อเรียกว่า `sessionStorage.clear()` `"local"` กำหนดสถานะที่จะเก็บไว้ในสเต็ทท้องถิ่น ที่เก็บข้อมูลในท้องถิ่นยังคงมีอยู่หลังจากปิดเบราว์เซอร์และจะถูกล้างเมื่อคุกกี้ของเบราว์เซอร์ถูกล้างหรือเมื่อเรียกว่า `localStorage.clear()`
`customComponent`	`null`	องค์ประกอบที่กำหนดเองที่จะใช้กับการตอบสนองที่กำหนดเอง เช่น: `customComponent={ (messageData) => (<div>Custom React component</div>)}` โปรดทราบว่าสิ่งนี้สามารถใช้ได้เฉพาะในกรณีที่คุณเรียก WebChat จากแอปพลิเคชัน React เนื่องจากคุณไม่สามารถเขียนส่วนประกอบใน Javscript บริสุทธิ์ได้
`onWidgetEvent`	`{}`	โทรรหัสที่กำหนดเองในเหตุการณ์วิดเจ็ตเฉพาะ ( `onChatOpen` , `onChatClose` , `onChatHidden` พร้อมใช้งานในตอนนี้) เพิ่มฟังก์ชั่นลงในคุณสมบัติวัตถุที่ต้องการในอุปกรณ์ประกอบฉากเพื่อให้มันตอบสนองต่อเหตุการณ์

ตัวอย่างเพิ่มเติม

`customMessageDelay`

 ( message ) => {
    let delay = message . length * 30 ;
    if ( delay > 2 * 1000 ) delay = 3 * 1000 ;
    if ( delay < 400 ) delay = 1000 ;
    return delay ;
}

`onSocketEvent`

 onSocketEvent = { {
  'bot_uttered' : ( ) => console . log ( 'the bot said something' ) ,
  'connect' : ( ) => console . log ( 'connection established' ) ,
  'disconnect' : ( ) => doSomeCleanup ( ) ,
} }

`params`

อุปกรณ์ประกอบฉาก params อนุญาตให้ระบุขนาดภาพที่กำหนดเองเท่านั้น:

 params = { {
        images : {
          dims : {
            width : 300 ,
            height : 200
          }
        }
      } }

คุณสมบัติอื่น ๆ

คำแนะนำเครื่องมือ

ข้อความที่ได้รับเมื่อวิดเจ็ตถูกปิดจะแสดงเป็นคำแนะนำเครื่องมือ

การส่งข้อความในการโหลดหน้าเว็บ

เมื่อเชื่อมต่อกับเซสชันการแชทที่มีอยู่ใหม่บอทจะส่งข้อความที่มีอยู่ในคีย์ LocalStorage ที่ระบุโดยค่าคง NEXT_MESSAGE ข้อความควรได้รับการจัดสรร JSON ด้วยคุณสมบัติ message ที่อธิบายถึงข้อความและคุณสมบัติ expiry ที่ตั้งค่าเป็นเวลา UNIX Timestamp ในมิลลิวินาทีหลังจากนั้นไม่ควรส่งข้อความนี้ สิ่งนี้มีประโยชน์หากคุณต้องการให้บอทของคุณสามารถเสนอผู้ใช้ของคุณเพื่อนำทางไปรอบ ๆ เว็บไซต์

การส่งน้ำหนักบรรทุกจากแอพ React ของคุณ

 function myComponent ( ) {
    const webchatRef = useRef ( null ) ;
    
    // triggered when something happens in your app
    function callback ( ) {
        if ( webchatRef . current && webchatRef . current . sendMessage ) {
            webchatRef . current . sendMessage ( '/myIntent{"entityName":"value"}' ) ;
        }
    }
    
    return < RasaWebchat
        ref = { webchatRef }
    /> ;
}

น้ำหนักบรรทุกอาจเป็นข้อความใด ๆ ที่ผู้ใช้จะส่งโดยปกติ แต่ถ้าคุณต้องการบังคับให้มีเจตนาและอาจเป็นเอนทิตีบางอย่างคุณสามารถใช้รูปแบบ /myIntent{"entity1":"value1","entity2":"value2"}

แบ็กเอนด์

วิดเจ็ตสามารถใช้กับแบ็กเอนด์ใด ๆ แต่ได้รับการออกแบบมาเพื่อใช้กับ RASA หรือ Botfront เป็นหลัก

ราสซ่า

ใช้ช่อง socketio : ดูคำแนะนำในเอกสาร RASA

หากคุณต้องการประมวลผล customData ใน Rasa คุณต้องสร้างช่องใหม่ ใช้ channel rasa_core.channels.socketio เป็นเทมเพลตสำหรับช่องใหม่ของคุณ ในช่องนี้ customData สามารถเรียกคืนผ่าน data['customData'] จากนั้นคุณสามารถแก้ไข sender_id , บันทึก customData ไปยังฐานข้อมูลเติมช่องหรืออะไรก็ได้ที่คุณต้องการด้วยข้อมูลเพิ่มเติมของคุณ

บอทฟรอนต์

Rasa WebChat ได้รับการพัฒนาโดยทีม Botfront และทำงานร่วมกับ Botfront หากบอทของคุณพูดได้หลายภาษาตรวจสอบให้แน่ใจว่าเฉพาะภาษาปัจจุบันใน Prop customData เช่น customData={{language: 'en'}} ดูในเอกสาร Botfront สำหรับรายละเอียดเพิ่มเติม

รูปแบบ

จากเวอร์ชัน 0.8 เราเริ่มต้นคำนำหน้าคลาส CSS ทั้งหมดหากคุณมีสไตล์ CSS สำหรับวิดเจ็ตแล้วเพียงเตรียม rw- ให้กับทุกคลาสที่คุณเปลี่ยนไป

ลำดับชั้น:

 .rw-conversation-container
  |-- .rw-header
        |-- .rw-title
        |-- .rw-close-function
        |-- .rw-loading
  |-- .rw-messages-container
        |-- .rw-message
              |-- .rw-client
              |-- .rw-response
        |-- .rw-replies
              |-- .rw-reply
              |-- .rw-response
        |-- .rw-snippet
              |-- .rw-snippet-title
              |-- .rw-snippet-details
              |-- .rw-link
        |-- .rw-imageFrame
        |-- .rw-videoFrame
  |-- .rw-sender
        |-- .rw-new-message
        |-- .rw-send

ระดับ	คำอธิบาย
.rw-widget-container	div ที่มีแชทกล่องของเวอร์ชันเริ่มต้น
. rw-widget-embedded	div ของ chatbox ฝังตัว (โดยใช้เสาฝัง)
. rw-full-screen	Div ของ Fullscreen Chatbox (ใช้ FullscreenMode Prop)
.rw-conversation-container	Div Parent ที่มีส่วนหัว, ข้อความและผู้ส่ง
.rw-messages-container	พื้นที่ส่วนกลางที่ข้อความปรากฏขึ้น
.rw-sender	div ของพื้นที่ด้านล่างซึ่งแจ้งการป้อนข้อมูลของผู้ใช้
.rw-new-message	องค์ประกอบอินพุตข้อความของผู้ส่ง
. rw-send	องค์ประกอบการส่งไอคอนของผู้ส่ง
. rw-header	div ของพื้นที่ด้านบนด้วยส่วนหัว Chatbox
.rw-title	องค์ประกอบชื่อของส่วนหัว
.RW-Close-Button	ไอคอนปิดของส่วนหัว
. rw-loading	องค์ประกอบสถานะการโหลดของส่วนหัว
. rw-message	กล่องที่ถือข้อความของลูกค้าและการตอบกลับ
.rw-replies	พื้นที่ที่ให้ตัวเลือกการตอบกลับอย่างรวดเร็ว
.rw-snippet	ส่วนประกอบสำหรับการอธิบายลิงก์
.rw-imageframe	คอนเทนเนอร์สำหรับการส่งภาพ
.rw-videoframe	คอนเทนเนอร์สำหรับการส่งวิดีโอ

ผู้มีส่วนร่วม

@phlf @znat @theotomalty @hub4it @dliuproduction @matthieujnon @mofortin @guillaumetech

ใบอนุญาต

ได้รับใบอนุญาตภายใต้ใบอนุญาต Apache เวอร์ชัน 2.0 ("ใบอนุญาต"); คุณไม่สามารถใช้ไฟล์นี้ยกเว้นตามใบอนุญาต คุณอาจได้รับสำเนาใบอนุญาตที่

 http://www.apache.org/licenses/LICENSE-2.0

เว้นแต่ว่ากฎหมายที่บังคับใช้หรือตกลงเป็นลายลักษณ์อักษรซอฟต์แวร์ที่แจกจ่ายภายใต้ใบอนุญาตจะถูกแจกจ่ายตาม "ตามพื้นฐาน" โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อ จำกัด ภายใต้ใบอนุญาต (c) 2021 Dialogue Technologies Inc. สงวนลิขสิทธิ์

ขยาย

ข้อมูลเพิ่มเติม