Standalone Web Chat Client for chatbots using Botanic/SEED Token Network services.
What is Hadron
Hadron is a presentation wrapper for deploying chatbots in a container that can be included in a variety of website frameworks. It includes voice recognition, text to speech and 3D avatar capabilities.
Live Demo of Hadron (SEED Bot)
Hadron has been implemented as a FAQ Bot on the Seed Token website
Part of the SEED token project. This is a sneak preview - there is more to come. See the Wiki for more information.
About the SEED Token Project
SEED democratizes AI by offering an open and independent alternative to the monopolies of a few large corporations that currently control conversational user interfaces (CUIs) and AI technologies. SEED's licensed, monetized open-source platform for bots on blockchain supports collaboration and creative compensation that will exceed the proprietary deployments from industry giants. We are also giving users back control of their personal data. Find out more about the SEED Token project at seedtoken.io. See the Connect section at the end for contact info.
How to contribute - how to get involved
Go to our Developers Garden to see all featured projects, pick one and fill out the Developer Interest Form. If you rather like to discuss ideas before rolling up your sleeves, please come visit our Discord channels for developers
- Basic text
- Inline HTML formatting
- Remote CSS inclusion to enhance styles
- Buttons that open links in a separate tab
- Embedded video
- Does not require or need Bot Framework or Skype support
- Frame/frameless options
- Chat button that expands to chat window
- Support different orientations and sizes
- Embedded audio
- Basic card support
- Hadron cards
- Support for mobile devices
- Video recording
- 3D Avatar support
- Allow the client to say what is on the screen and say the name of a button that was clicked
- Image alt tag support for accessibility
- Make text input optional, some bots may be UI driven
Default = 150
Animation duration in milliseconds. Used for some CSS animations like bubbles appearing/disappearing.
Default = 10
Typing delay, a multiple of the animation speed. Real delay (ms) = data-bot-type-speed x data-bot-animation-speed.
Default = "Ask me anything..."
The text displayed in the text input when there is no user text present.
default = "Say Hi or Hello to start chatting"
A prompt to the user when the control opens.
Default = ""
Sends a flow ID to the server to specify a flow created by MVP
Default = "false"
Presents a frameless, chromeless chat window. e.g., no outer frame, no title bar, no avatar. A basic chat window.
Used to deliver JSON data from the control to bot server.
If set to true, the bot will send a message to the user without the user having initiated a conversation.
If true, the user state is cleared and conversations start from the beginning whenever a user returns to the site.
Enables text to speech for bot responses.
Shows the TTS button in the input bar if set to true and supported by the device.
Shows the voice recognition button when set to true and supported by the device.
When true, voice recognition is on and receiving input from a user.
When true, recognition is on until speech has finished. The text is sent to the bot and when the bot has replied, recognition is enabled again.
If true, the input bar is removed and all UI interactions must be made with buttons.
If true, loads the 3D system up front to make the presentation more responsive.
The API key used to access the chat server.
Widens chat bubbles to accommodate for oddities in fonts, etc.
Padding for chat bubbles
Set to a number that represents the number of past conversations that are stored. Has not been tested.
A predefined CSS class for user chat bubbles. The default is botanic-green however it can also be any of the materializecss color strings.
A predefined CSS class for user chat bubbles. The default is botanic-silver however it can also be any of the materializecss color strings.
An icon to show in the top right of chat control.
When true, the user sentiment is displayed beside user input.
Shows a refresh button in the top bar, resets the user state when clicked.
When true, the browser does text to speech.
Sets the size of the chat window. Possible values are standard, fullscreen, fullestscreen and tall.
When true, the launcher icon pulses to draw attention.
An icon for the launcher.
Defines the title for the chat window.
Defines the subtitle for the chat window. If subtitle is empty, the top bar changes to display just the title line.
The icon class for the close button.
Defines an external CSS file that can override styles in Hadron. The CSS file must be served from a secure domain!
Applies a stylesheet to Hadron. Must be served from HTTPS.
Applies a stylesheet to the Hadron launcher. Must be served from HTTPS.
Loads a font from Google into Hadron.
More complete example
<span class="hadron-button" data-bot-animation-speed="150" data-bot-type-speed="10" data-bot-placeholder="I'm listening..." data-bot-welcome="Say Hello or Hi to start chatting" data-bot-user-data="1" </span> <script src="./dist/launcher.js"></script>
npm install webpack --save-dev npm install style-loader --save npm install css-loader --save npm install file-loader --save npm install copy-webpack-plugin --save-dev npm install exports-loader --save npm install imports-loader --save npx webpack