https://github.com/zauberware/hermine-chat
https://github.com/zauberware/hermine-chat
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zauberware/hermine-chat
- Owner: zauberware
- Created: 2024-03-06T16:55:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T18:03:48.000Z (over 1 year ago)
- Last Synced: 2024-11-14T02:16:00.381Z (over 1 year ago)
- Language: TypeScript
- Size: 3.59 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hermine-Chat
Hermine-Chat is a react package to integrate a hermine.ai-based chat component on any website.
Come and create and account on [hermine.ai](https://hermine.ai) to get started. Build custom GPTs and profit from the knowhow of talented data engineers, software-developers and product owners.
## Integration
It doesn't matter if it's hosted via a bundled javascript environment or plain javascript.
### Integration via npm
To install the package run:
```bash
npm install --save @zauberware/hermine-chat
```
Setup the Chat component by doing this:
```javascript
import HermineChat from "@zauberware/hermine-chat";
HermineChat({
accountId: "",
agentSlug: "",
// your settings going in here
});
```
### Integration via CDN
Add import script tag. To use a specific version number just add the following snippet:
```html
```
If you always want to fetch the most recent version load the data via the following snippet, but be aware that there might be some breaking changes.
```html
```
Setup the Chat component by doing this:
```javascript
window.HermineChat({
accountId: "",
agentSlug: "",
// your settings going in here
});
```
If you put this in your html template file, do not forget to put it inside ``-tags.
## Configuration Options
| Option | Required | Description | Type | Example |
| --------------------------- | -------- | ----------------------------------------------------------------- | ------------------------------- | -------------------------------------- |
| `accountId` | yes | Your accountId generated by hermine.ai | `uuid` | `11111111-2222-3333-4444-555555555555` |
| `agentSlug` | yes | Your agentSlug generated by hermine.ai | `slug` | `hermine-gpt` |
| `location` | - | The location of the chat button. | `'top' \| 'center' \| 'bottom'` | `hermine-gpt` |
| `chatTitle` | - | The title of the chat window. | `string` | `Hermine-Chat` |
| `chatTitleColor` | - | The color of the title of the chat window. | `css color` | `rgb(15, 15, 15) \| 'red' \| '#e20'` |
| `chatDescription` | - | The description of the chat window. | `string` | `Hermine-Chat` |
| `spacingBottom` | - | Space to bottom of screen (in addition with location 'bottom'). | `css size` | `10px \| 10% \| 10vh` |
| `spacingTop` | - | Space to top of screen (in addition with location 'top'). | `css size` | `10px \| 10% \| 10vh` |
| `spacingRight` | - | Space to right of screen. | `css size` | `10px \| 10% \| 10vh` |
| `floatingButtonBorderColor` | - | Border color of the floating button. | `css color` | `rgb(15, 15, 15) \| 'red' \| '#e20'` |
| `floatingButtonWidth` | - | Width of the floating button. | `number \| string` | `70 \| '70px' \| '5rem'` |
| `floatingButtonHeight` | - | Height of the floating button. | `number \| string` | `70 \| '70px' \| '5rem'` |
| `buttonBackgroundColor` | - | Background color of the send button. | `css color` | `rgb(15, 15, 15) \| 'red' \| '#e20'` |
| `buttonColor` | - | Text color of send button. | `css color` | `rgb(15, 15, 15) \| 'red' \| '#e20'` |
| `messageColor` | - | Text color of ai message bubbles. | `css color` | `rgb(15, 15, 15) \| 'red' \| '#e20'` |
| `messageBackgroundColor` | - | Background color of ai message bubbles. | `css color` | `rgb(15, 15, 15) \| 'red' \| '#e20'` |
| `showConversationManagment` | - | Enable "Show more" button to route to hermine conversations view. | `boolean` | `true` |
| `useCustomLogo` | - | Using the custom logo set on hermine.ai. | `boolean` | `true` |
## FAQ
### Is there a way to open the chatwindow from outside?
You can open the chatwindow by adding a element with the class `hermine-chat-opener`. With the class `hermine-chat-toggler` you also can close the window with a click on those.
If you want to open the chat window via an url, you can add a the following query parameter to the url: `?hermine_chat_open=true` for example `https://hermine.ai/agents?hermine_chat_open=true.
### How to change the avatar in the ai chat messages?
The image from the floating button is loaded from the hermine.ai application. The property used for the image is the `ai_icon`.
### How to change the avatar in the ai chat messages?
The image from the floating button is loaded from the hermine.ai application. The property used for the image is the `ai_icon`.
## Development
To contribute in the development in this application you need something like a container application.
For example you could use [this](https://github.com/ChrKahl/hermine-chat-container) sveltekit application.
After you cloned the package, make sure to add this package in the container application with your relative path.
For example:
```bash
npm uninstall @zauberware/hermine-chat
npm i ../../hermine-chat
```
When making changes on the project you need to rebuild it. This will work with executing the following command:
```bash
npm run dev
```
Some times the container app shows a 500 error message. If those appear, just restart it with `npm run dev`
## Release
### In short
`npm version patch -m "chore(release): %s"`
`git push origin main --follow-tags`
### 1. Bump the version
```bash
npm version patch -m "chore(release): %s"
```
- **Purpose:**
Increments your project's version number in `package.json` and `package-lock.json` according to [Semantic Versioning](https://semver.org/).
- `patch`: Increments the last number (e.g., `1.0.0` → `1.0.1`). Use for bug fixes or small changes.
- `-m "chore(release): %s"`: Sets the commit message, where `%s` is replaced with the new version (e.g., `chore(release): 1.0.1`).
- **What happens:**
- Updates version numbers.
- Creates a Git commit with the changes.
- Creates a Git tag for the new version.
### 2. Push changes and tags
```bash
git push origin main --follow-tags
```