-
-
Notifications
You must be signed in to change notification settings - Fork 171
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from dmitrizzle/tidy-copy-examples
Tidy up copy and add examples
- Loading branch information
Showing
15 changed files
with
708 additions
and
396 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,229 @@ | ||
| <html> | ||
| <head> | ||
| <title>Bubblebot says Hello!</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <!-- stylesheets for bubbles --> | ||
| <link rel="stylesheet" media="all" href="../styles/setup.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/says.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/reply.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/typing.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/input.css"> | ||
| <style> | ||
| h1 { text-align: center; } | ||
| #note { padding: 20px; color: #999; font-size: 14px; line-height: 18px; margin: 0 auto; max-width: 720px; } | ||
| </style> | ||
|
|
||
| <!-- the script --> | ||
| <script src="../Bubbles.js"></script> | ||
|
|
||
|
|
||
|
|
||
| </head><body><h1>Start Here.</h1> | ||
|
|
||
|
|
||
|
|
||
| <!-- placeholder --> | ||
| <div id="chat"></div> | ||
|
|
||
| <!-- notes --> | ||
| <section id="note"> | ||
| <p> | ||
| <strong>Note:</strong> This is a simple script that isn't connected to any Natural Language Cognition networks. Whatever you type on the keyboard will be matched against the possible options given (dark grey bubbles). This script can't correct your spelling, it can't infer from synonyms or slang etc. But it is forgiving in terms of punctuation, capitalization and amount of text you type. For example, if one of the accepted answers is "Do 👉 this," you can simply type "do" and it'll work. | ||
| </p> | ||
| </section> | ||
|
|
||
| <!-- sample conversation structure JSON --> | ||
| <script> | ||
| var convo = { | ||
| "ice": { | ||
| "says": | ||
| [ | ||
| "Hiiiiii! 😜", | ||
| "This is <strong>bubblebot</strong> 🤖", | ||
| "I'm here to help you create your own bot script, just like this one. It's really easy! 🍰" | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "Go! 👍", | ||
| "answer" : "chapter-one" | ||
| }, | ||
| { | ||
| "question": "What for? 🤔", | ||
| "answer" : "why" | ||
| }, | ||
| ] | ||
| }, | ||
| "why": { | ||
| "says": | ||
| [ | ||
| "Because it's fun, of course!", | ||
| "<img src=images/tutor-eliot.jpg>", | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "Go on...😏", | ||
| "answer" : "chapter-one" | ||
| }, | ||
| ] | ||
| }, | ||
| "chapter-one": { | ||
| "says": | ||
| [ | ||
| "Cool,", | ||
| "If you are new to bot scripting, don't worry. You won't need to actually do anything complicated. 😅", | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "OK, cool! 😁", | ||
| "answer" : "chapter-two" | ||
| }, | ||
| ] | ||
| }, | ||
| "chapter-two": { | ||
| "says": | ||
| [ | ||
| "To understand what to say I read scripts written in JSON format. It looks like something like this:", | ||
| "<img src=images/tutor-json.jpg>", | ||
| "You can have a look yourself at the code if you open this file in your text editor 🗒" | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "So what are the basics? 🤔", | ||
| "answer" : "chapter-three" | ||
| }, | ||
| ] | ||
| }, | ||
| "chapter-three": { | ||
| "says": | ||
| [ | ||
| "<div id=\"chat\"></div>", | ||
| "☝️ This is a placeholder in your HTML where the chat window is gonna be rendered.", | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "How about JavaScript? ☕️", | ||
| "answer" : "chapter-four" | ||
| }, | ||
| ] | ||
| }, | ||
| "chapter-four": { | ||
| "says": | ||
| [ | ||
| "// setup<br>var givemeBubbles = new Bubbles(document.getElementById(\"chat\"), <em>\"givemeBubbles\"</em>);", | ||
| "// launch command<br>givemeBubbles.talk(<strong>[YOUR JSON SCRIPT]</strong>);", | ||
| "☝️ When you construct a new Bubbles() instance, you'll need to <em>pass the name of that variable as an option</em>. This helps with being able to call your custom functions from within the script securely." | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "What about JSON? 🤔", | ||
| "answer" : "chapter-five" | ||
| }, | ||
| ] | ||
| }, | ||
| "chapter-five": { | ||
| "says": | ||
| [ | ||
| "This is the most basic setup possible:", | ||
| "{ \"ice\": { \"says\": [ \"Hi\" ] } }", | ||
| "<strong>\"ice\"</strong> is the marker for default place for the chatbot to start at. It has to be there, unless you want to tell it where exactly to start:", | ||
| "givemeBubbles.talk([YOUR JSON SCRIPT], <strong>[KEY]</strong>);", | ||
| "...If you look at the example scripts, you'll also learn how to add reply buttons (very simple)" | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "What else can I do? 🙂", | ||
| "answer" : "chapter-six" | ||
| }, | ||
| ] | ||
| }, | ||
| "chapter-six": { | ||
| "says": | ||
| [ | ||
| "🎹 You can add keyboard input (with custom language processing) and custom functions for user answers.", | ||
| "📡 You can also dynamically replace working conversation JSON by simply calling the launch command with new data.", | ||
| "@<a href=\"https://github.com/dmitrizzle\">dmitrizzle</a> is working on making integration a little more elegant and adding more flexibility in how this tool accepts and processes answers 🤖", | ||
| "And of course you can customize CSS styles when you install this thing 👨🎨" | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "Is that it?", | ||
| "answer" : "chapter-eight" | ||
| }, | ||
| ] | ||
| }, | ||
| "chapter-eight": { | ||
| "says": | ||
| [ | ||
| "Pretty much, easy right 😜", | ||
| "Why not have a look at the examples' source code in this folder and make your own bot, it'll take less than 5 minutes - I'm sure 😎", | ||
| "Check ya later! 👋" | ||
| ], | ||
| "reply": [ | ||
| { | ||
| "question": "Start over ☝️", | ||
| "answer" : "ice" | ||
| }, | ||
| ] | ||
| } | ||
|
|
||
|
|
||
| }; | ||
| </script> | ||
|
|
||
| <!-- initialize bubbles --> | ||
| <script> | ||
| var givemeBubbles = new Bubbles(document.getElementById("chat"), "givemeBubbles", { | ||
| inputCallbackFn: function(o){ | ||
|
|
||
| // do this if no answer matched | ||
| var miss = function(){ | ||
| givemeBubbles.talk({ | ||
| "ice": { | ||
| "says": | ||
| [ | ||
| "Sorry, I don't get it 😕. Pls repeat? Or you can just click below 👇", | ||
| ], | ||
| "reply" : o.convo[o.standingAnswer].reply | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| // do this if answer found | ||
| var match = function(key){ | ||
| setTimeout(function(){ | ||
| givemeBubbles.talk(convo, key); // restart current convo from point found in the answer | ||
| }, (600) ); | ||
| } | ||
|
|
||
| // sanitize text for search function | ||
| var strip = function(text){ | ||
| return text.toLowerCase().replace(/[\s.,\/#!$%\^&\*;:{}=\-_'"`~()]/g,""); | ||
| } | ||
|
|
||
| // search function | ||
| var found = false; | ||
| o.convo[o.standingAnswer].reply.forEach(function(e, i) { | ||
| (strip(e.question).includes(strip(o.input)) && o.input.length > 0) ? found = e.answer : (found ? null : found = false); | ||
| }); | ||
| found ? match(found) : miss(); | ||
|
|
||
|
|
||
|
|
||
| } | ||
| }); | ||
| givemeBubbles.talk(convo); | ||
| functionOne = function(){ alert("Function One"); } | ||
| functionTwo = function(){ alert("Function Two"); } | ||
| </script> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <html> | ||
| <head> | ||
| <title>Chat Bubble Basics 1</title> | ||
| <meta charset="utf-8"> | ||
|
|
||
| <!-- for mobile screens --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <!-- stylesheets for bubbles --> | ||
| <link rel="stylesheet" media="all" href="../styles/setup.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/says.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/reply.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/typing.css"> | ||
| <link rel="stylesheet" media="all" href="../styles/input.css"> | ||
|
|
||
| </head><body> | ||
|
|
||
| <!-- the script --> | ||
| <script src="../Bubbles.js"></script> | ||
|
|
||
| <!-- placeholder for where the chatbox is going to be rendered --> | ||
| <div id="chat"></div> | ||
|
|
||
| <script> | ||
|
|
||
| // this is the most basic chat setup possible. | ||
| // "ice" is the default conversation block for the bot to start, this key is required. | ||
| // you can have an array of bubbles, for example: ["Hi", "It's me!"] | ||
| var convo = { "ice": { "says": [ "Hi" ] } } | ||
|
|
||
| // set up the chatbot script | ||
| var givemeBubbles = new Bubbles( | ||
| document.getElementById('chat'), // attach chatbot to placeholder above ^^ | ||
| "givemeBubbles" // you need to pass the name of the constructor variable that evokes Bubble function here | ||
| ); | ||
|
|
||
| // pass JSON to your function and you're done! | ||
| givemeBubbles.talk(convo); | ||
|
|
||
| </script> | ||
| </body> |
Oops, something went wrong.