Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/memori-ai/memori-webcomponent
WebComponent to integrate a Memori in a web page or web app.
https://github.com/memori-ai/memori-webcomponent
ai conversational-agents conversational-ai memori memori-ai nlp react web-component webcomponent webcomponents
Last synced: about 1 month ago
JSON representation
WebComponent to integrate a Memori in a web page or web app.
- Host: GitHub
- URL: https://github.com/memori-ai/memori-webcomponent
- Owner: memori-ai
- License: other
- Created: 2022-12-06T15:21:26.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-14T14:36:11.000Z (about 2 months ago)
- Last Synced: 2024-11-15T23:19:11.203Z (about 2 months ago)
- Topics: ai, conversational-agents, conversational-ai, memori, memori-ai, nlp, react, web-component, webcomponent, webcomponents
- Language: HTML
- Homepage: https://memori-ai.github.io/memori-webcomponent/example/
- Size: 3 MB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Memori WebComponent
WebComponent to integrate a [Memori](https://memori.ai) in a web page or web app.
Platforms:
- [MemoryTwin](https://app.memorytwin.com/en): consumer / creator platform
- [TwinCreator](https://app.twincreator.com/en): developer-oriented platform
Uses [memori-react](https://github.com/memori-ai/memori-react) under the hood.
See [demo](https://memori-ai.github.io/memori-webcomponent/example/).
## Installation from npm
```bash
npm i --save @memori.ai/memori-webcomponent
```
## Embed or usage from CDN (suggested)
```html
```
## Usage
```html
```
For more details on attributes, see [memori-react](https://github.com/memori-ai/memori-react) component props.
Special note for `height`: defaults to `100%` and can be set to a fixed value (e.g. `500px`).
For the best experience, it is recommended to set it to '100vh' (full height of the viewport) or '100svh'.
### Initial context
As for [memori-react](https://github.com/memori-ai/memori-react) component, it is possible to pass an initial context to the Memori session.
With this WebComponent that is slightly different, as the context is not passed as a JSON but as a string in the `context` attribute as comma-separated `KEY:VALUE` pairs:
```html
```
## Styling
You can override the default styles of the Memori by customizing the following CSS custom properties:
```css
memori-client,
#headlessui-portal-root,
.memori-widget {
--memori-primary: rgb(102, 103, 171);
--memori-primary-text: #fff;
--memori-inner-content-pad: 1rem;
--memori-inner-bg: transparent;
--memori-chat-bubble-bg: #ffffff60;
--memori-text-color: #000;
--memori-button-bg: #fff;
--memori-button-text: #000;
--memori-button-padding: 0.5rem 1.5rem;
--memori-button-border-color: #d9d9d9;
--memori-button-radius: 5px;
--memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
--memori-blur-background: 0px;
--memori-drawer--width: 100%;
--memori-drawer--width--md: 80%;
--memori-drawer--width--lg: 60%;
--memori-modal--width: 100%;
--memori-modal--width--md: 80%;
--memori-error-color: #ff4d4f;
}
```
You can review the default styles in the [styles.css](https://github.com/memori-ai/memori-react/blob/main/src/styles.css) file.
## See also
- [memori-api-client](https://github.com/memori-ai/memori-api-client) - API client for Memori
- [memori-react](https://github.com/memori-ai/memori-react) - React library for Memori, used by this library