หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

หมายเหตุ: ฉันจะไม่รักษาสิ่งนี้อีกต่อไป น่าเสียดายที่ฉันไม่มีเวลามากพอที่จะพัฒนาฟีเจอร์ใหม่และแก้ไขข้อบกพร่อง

ฉันเริ่มต้นสิ่งนี้โดยเป็นโปรเจ็กต์เสริม และมันก็ทำให้ตัวเองมีชีวิตขึ้นมา โดยที่หลายๆ คนเห็นว่าสิ่งนี้มีประโยชน์แตกต่างออกไป ในรูปแบบที่แตกต่างอย่างสิ้นเชิงจากสิ่งที่ควรจะทำในตอนแรก ในอนาคตอันไม่แน่นอน ฉันอาจจะทำซ้ำตั้งแต่ต้นจนจบเพื่อให้ได้ความเป็นไปได้เหล่านั้น แต่ตอนนี้ฉันไม่มีเวลาพอที่จะทำงานนี้ ขออภัย หากคุณต้องการความช่วยเหลือใดๆ โปรดเปิดคำขอดึงข้อมูล

ConvForm

ปลั๊กอินที่แปลงแบบฟอร์มเป็นการแชทแบบโต้ตอบ

สาธิต

คุณสมบัติ:

  • แปลงอินพุตใดๆ เลือก (หลายรายการหรือไม่ก็ได้) เป็นคำถามในการแชทแบบโต้ตอบ
  • รูปแบบ regex
  • คำถามสุ่มจากภายในตัวเลือก
  • แยกการสนทนาตามคำตอบ
  • เข้าถึงคำตอบก่อนหน้าเพื่อใช้กับคำถาม
  • ข้อความที่ไม่คาดหวังคำตอบ
  • สร้างคำถามใหม่แบบไดนามิก (เช่นการใช้ API)! การสาธิต - โปรดดูโค้ดตัวอย่างภายใน html เพื่อทำความเข้าใจวิธีการทำงาน

ในการสร้างแชท เพียงแค่ล้อมแบบฟอร์มไว้ภายในองค์ประกอบ และเรียก .convform() บนตัวเลือก jquery

ตัวอย่าง: 

 $ ( function ( ) {
  var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;

เพื่อให้ปลั๊กอินรู้ว่าควรถามคำถามใด ทุกอินพุตและการเลือกจะต้องมีแอตทริบิวต์ data-conv-question ตัวอย่าง:

">
 < select data-conv-question =" Hello! I'm a bot created from a HTML form. Can I show you some features? " >
	< option value =" yes " > Yes  option >
	< option value =" sure " > Sure!  option >
 select >

เลือกคำถาม

หากต้องการ คุณสามารถเขียนคำถามได้มากกว่าหนึ่งคำถามสำหรับแต่ละแท็ก โดยใช้ไปป์ | เพื่อแยกพวกเขาออกจากกัน ปลั๊กอินจะสุ่มเลือกหนึ่งรายการเพื่อใช้ในแต่ละครั้งที่แชทถูกสร้างขึ้น ตัวอย่าง:

">
 < input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >

รูปแบบ Regex

คุณสามารถใช้รูปแบบ regex กับอินพุตได้ เพียงใช้แอตทริบิวต์ data-pattern บนแท็ก เมื่อผู้ใช้พิมพ์คำตอบ หากไม่ตรงตามรูปแบบ เขาไม่สามารถส่งได้ และสีที่ป้อนจะเปลี่ยนเป็นสีแดง ตัวอย่าง:

">
 < input data-conv-question =" Type in your e-mail " data-pattern =" ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$ " type =" email " name =" email " >

การแยกบทสนทนา

คุณสามารถแยกการสนทนาและถามคำถามเฉพาะตามคำตอบของผู้ใช้ได้ ใช้งานได้เฉพาะเมื่อมีการแยกจากการเลือกเท่านั้น

ในการดำเนินการนี้ คุณจะต้องใส่แท็ก div หลังคำถามที่คุณต้องการแยกการสนทนา โดยมีแท็ก data-conv-fork ที่มีชื่อของตัวเลือกอยู่

ภายใน div นั้น คุณต้องสร้างแท็ก div ด้วยแอตทริบิวต์ data-conv-case ที่อ้างอิงคำตอบที่จะแยกการสนทนาไปยังองค์ประกอบย่อย

">
 < select name =" programmer " data-conv-question =" So, are you a programmer? (this question will fork the conversation based on your answer) " >
	< option value =" yes " > Yes  option >
	< option value =" no " > No  option >
 select >
< div data-conv-fork =" programmer " >
	< div data-conv-case =" yes " >
	 	< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
	 div >
	< div data-conv-case =" no " >
		< select name =" thought " data-conv-question =" Have you ever thought about learning? Programming is fun! " >
			< option value =" yes " > Yes  option >
			< option value =" no " > No..  option >
		 select >
	 div >
 div >

อ้างอิงคำตอบก่อนหน้า

หากต้องการใช้คำตอบของผู้ใช้กับคำถาม คุณสามารถใช้ {inputname} ภายในแท็ก data-conv-question ซึ่งชื่ออินพุตอ้างอิงถึงคำถามที่คุณต้องการคำตอบ หากต้องการ คุณสามารถรับคำเฉพาะจากคำตอบโดยใช้ : selector (จัดทำดัชนี 0) ตัวอย่างเช่น เมื่อคุณต้องการชื่อของผู้ใช้ คุณสามารถใช้ {name}:0 และปลั๊กอินจะได้รับคำแรกจากคำตอบของคำถาม "ชื่อ" ตัวอย่าง:

">
 < input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >

คำถามที่ไม่คาดหวังคำตอบ (ทำหน้าที่เหมือนข้อความ)

คุณสามารถใส่ข้อความในขั้นตอนการแชทได้ เป็นคำถามที่ไม่ได้คาดหวังคำตอบจากผู้ใช้ ดังนั้นปลั๊กอินจะเข้าสู่คำถามถัดไปทันที ในการดำเนินการนี้ ให้ใส่แอตทริบิวต์ data-no-answer="true" บนแท็กอินพุต ตัวอย่าง:

">
 < input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >

โทรกลับ

คุณสามารถใช้ฟังก์ชันที่กำหนดเองเพื่อให้ถูกเรียกเมื่อผู้ใช้คลิกที่คำตอบจากการเลือก หรือเมื่อสิ้นสุดคำถาม (หากคำถามต้องการคำตอบ การโทรกลับจะถูกเรียกหลังจากที่ผู้ใช้ป้อนข้อมูล หากไม่เป็นเช่นนั้น ให้โทรกลับ จะถูกเรียกหลังจากพิมพ์ข้อความ) ในการดำเนินการนี้ เพียงใส่ชื่อของฟังก์ชันที่จะเรียกใช้ในแอตทริบิวต์ "data-callback" ของแท็กตัวเลือก หรือในแท็กอินพุต:

">
 < select data-conv-question =" Selects also support callback functions. For example, try one of these: " >
		< option value =" google " data-callback =" google " > Google  option >
		< option value =" bing " data-callback =" bing " > Bing  option >
 select >
< script >
	function google ( stateWrapper , ready ) {
		window . open ( "https://google.com" ) ;
		ready ( ) ;
	}
	function bing ( stateWrapper , ready ) {
		window . open ( "https://bing.com" ) ;
		ready ( ) ;
	}
 script >

ฟังก์ชันการโทรกลับถูกเรียกพร้อมกับพารามิเตอร์ stateWrapper และฟังก์ชันการโทรกลับ ready state wrapper เป็นวัตถุ ConvForm และ ready เป็นฟังก์ชันที่คุณต้องเรียกใช้เพื่อไปยังคำถามถัดไป

ตัวเลือก

คุณสามารถเพิ่มออบเจ็กต์ตัวเลือกเป็นพารามิเตอร์ให้กับฟังก์ชัน convForm ซึ่งมี:

  • placeHolder : ตัวยึดตำแหน่งที่คุณต้องการให้ปรากฏบนอินพุตของผู้ใช้
  • typeInputUi : 'input' หรือ 'textarea' เพื่อเลือกประเภทขององค์ประกอบ html ที่จะใช้เป็นอินพุตของผู้ใช้
  • timeOutFirstQuestion : เวลาเป็น ms เป็นระยะเวลาสำหรับแอนิเมชั่นการโหลดก่อนคำถามแรก
  • buttonClassStyle : คลาสสำหรับปุ่มส่งคำตอบของผู้ใช้
  • eventList : ออบเจ็กต์ที่มีฟังก์ชันที่จะเรียกใช้ในเวลาที่กำหนด ฟังก์ชันเดียวที่รองรับในขณะนี้คือ onSubmitForm (ฟังก์ชันถูกเรียกใช้โดยมี convState เป็นพารามิเตอร์) และ onInputSubmit (ฟังก์ชันที่เรียกใช้โดย convState เป็นพารามิเตอร์แรก และฟังก์ชันการโทรกลับที่พร้อมใช้งาน เพื่อพิมพ์คำถามถัดไปเป็นพารามิเตอร์ตัวที่สอง)
  • formIdName : html id สำหรับแบบฟอร์ม
  • inputIdName : html id สำหรับอินพุตของผู้ใช้
  • loadSpinnerVisible : คลาสสำหรับ loadSpinner
  • selectInputStyle : show (ค่าเริ่มต้น) disable หรือ hide - บอกปลั๊กอินถึงวิธีจัดการกับฟิลด์อินพุตเมื่อคำถามเป็น select
  • selectInputDisabledText : ข้อความที่จะแสดงบนอินพุตของคำถามที่เลือกในกรณีที่ selectInputStyle ถูกตั้งค่าเป็น disable 
 $ ( function ( ) {
  var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
    eventList : {
        onSubmitForm : function ( convState ) {
            console . log ( 'The form is being submitted!' ) ;
            convState . form . submit ( ) ;
        }
    }
  } ) ;
} ) ;

ระวังว่าฟังก์ชันการโทรกลับถูกเรียกภายในฟังก์ชัน onInputSubmit หากคุณกำลังเปลี่ยนฟังก์ชันเหตุการณ์นี้ คุณไม่จำเป็นต้องใช้ฟังก์ชันเรียกกลับในแท็ก HTML แต่ถ้าคุณต้องการฟังก์ชันเหล่านี้ด้วยเหตุผลบางประการ อย่าลืมเรียกฟังก์ชันเหล่านี้ที่นี่โดยใช้ window[convState.current.input.callback](convState, readyCallback);

ของที่ใช้ทำสิ่งนี้:

  • ปลั๊กอินปรับขนาดอัตโนมัติของ Jack Moore ใช้เพื่อปรับขนาดอินพุตของผู้ใช้โดยอัตโนมัติ
ขยาย
ข้อมูลเพิ่มเติม
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด