SageBuddy Chat Component

A Web Component built with Stencil that allows you to add a chat dialog to a web page that is connected to a public SageBuddy bot.

Getting Started

To try this component out, run:

npm install
npm start

Now load the localhost URL shown in the console in your browser.

Note that this requires you to have SageBuddy running locally on port 8000. If you want to change that, edit the src/index.html file and change the sagebuddy property on the sagebuddy-chat element.

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Making Changes

To make changes to the component, you can edit the files in the src/components/sagebuddy-chat directory. You can also edit the src/index.html file to change the page that is loaded when you run npm start.

Styling

The component uses Tailwind CSS with DaisyUI for styling.

Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Once you've set up your local npm account, can do this by running

npm publish

Script tag

• Put a script tag similar to this <script type='module' src='https://unpkg.com/[email protected]/dist/sagebuddy-chat.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install sagebuddy-chat --save
• Put a script tag similar to this <script type='module' src='node_modules/sagebuddy-chat/dist/sagebuddy-chat.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc