Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/clockhash-projects/hash-bot-fe.git hash-bot
cd hash-bot
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

<script type="module" src="https://unpkg.com/hash-bot"></script>
<!--
To avoid unpkg.com redirects to the actual file, you can also directly import:
https://cdn.jsdelivr.net/npm/alpha-interface@1.0.2/dist/hash-bot/hash-bot.esm.js
-->
<hash-bot bot_name="ChatBot Test"  agent_uuid="1b68cb7c-22e3-453c-9a38-xxxxxxxx" welcome_message="Hi! Ask me anything." iconsize="90" chatbotwidth="300" chatbotheight="400"></hash-bot>

This will only load the necessary scripts needed to render <hash-bot/>. Once more components of this package are used, they will automatically be loaded lazily.

You can also import the script as part of your node_modules in your applications entry file:

import 'alpha-interface/dist/hash-bot/hash-bot.esm.js';

Standalone

import 'alpha-interface';

function App() {
  return (
    <>
      <div>
        <hash-bot 
          bot_name="ChatBot Test" 
          agent_uuid="1b68cb7c-22e3-453c-9a38-xxxxxxxx" 
          welcome_message="Hi! Ask me anything."
          iconsize="90" 
          chatbotwidth="300" 
          chatbotheight="400">
        </hash-bot>
      </div>
    </>
  );
}

export default App;