open-index/open-npm huggingface dataset:
npm package: @memori.ai/avatar-creator
Description: A simple avatar creator component for [AIsuru](https://www.aisuru.com).
Author: Memori Srl
Latest version: 0.1.3

# @memori.ai/avatar-creator

A simple avatar creator component for [AIsuru](https://www.aisuru.com).

## Installation

```sh
npm i @memori.ai/avatar-creator
```

## Usage

Import the component and its styles:

```ts
import AvatarCreator from '@memori.ai/avatar-creator';
import '@memori.ai/avatar-creator/style.css';
```

Use it in your React application:

```jsx
<AvatarCreator avatars={avatars} lang="en" onSelect={console.log} />
```

### Props

```ts
interface Avatars {
  FEMALE: string[]
  MALE: string[]
}
```

| Name | Type | Description |
| --- | --- | --- |
| avatars | `Avatars` | Array of avatars to choose from, divided by gender |
| lang | string | Language code for the component (`en` or `it`) |
| onSelect | (avatarURL: string) => void | Callback function when an avatar is selected |


## Development

Install [Bun](https://bun.com) and run the following command to install the dependencies:

To install dependencies:

```bash
bun install
```

To start the development server:

```bash
bun dev
```

To run the linter, check the formatting and the import sorting:

```bash
bun lint
```

And automatically fix relative issues (only safe fixes):

```bash
bun fix
```

This project was created using `bun init` in bun v1.3.5. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
npm package: @memori.ai/memori-api-client
Description: React library to integrate a Memori in your app or website
Author: Memori Srl
Latest version: 6.20.0

# memori-api-client

[![npm version](https://img.shields.io/github/package-json/v/memori-ai/memori-api-client)](https://www.npmjs.com/package/@memori.ai/memori-api-client)
![Tests](https://github.com/memori-ai/memori-api-client/workflows/CI/badge.svg?branch=main)
![TypeScript Support](https://img.shields.io/badge/TypeScript-Support-blue)

TypeScript client to integrate with [Memori](https://memori.ai) API.

Web Platform: [AIsuru](https://aisuru.com)

## Installation

```bash
yarn add @memori.ai/memori-api-client
```

```bash
npm install @memori.ai/memori-api-client
```

## Usage

Every method has JSDoc annotations with usage and description and typings information.

See examples for [Node (TypeScript)](https://github.com/memori-ai/examples/blob/main/ts-sdk/index.ts) and [React](https://github.com/memori-ai/examples/blob/main/react-ts-with-api-client/src/App.tsx).

```ts
import memoriApiClient from '@memori.ai/memori-api-client';

const memori = memoriApiClient('https://backend.memori.ai', 'https://engine.memori.ai');
// or just memoriApiClient() as defaults to production
(async () => {
  const { sessionID, currentState, ...response } = await memori.initSession({
    memoriID: '768b9654-e781-4c3c-81fa-ae1529d1bfbe',
    birthdate: '1900-01-01T00:00:00.000Z',
  });

  const { currentState: dialogState, ...resp } =
    await memori.postTextEnteredEvent({
      sessionId: sessionID,
      text: 'Ciao, Memori!',
    });
})();
```

For the specification of the APIs, see the typings or the documentation from the dashboard if you are allowed to see it.

### Constants

```ts
memori.constants.allowedMediaTypes; // list of allowed media types in asset upload
memori.constants.anonTag; // tag for anonymous users
```

Endpoints passed during initialization:

```ts
memori.constants.BACKEND_URL;
memori.constants.ENGINE_URL;
```

### Asset

There is a helper method parsing media urls from the DB, handling different cases

```ts
memori.asset.getResourceUrl({
  type: 'avatar',
  resourceURI: '768b9654-e781-4c3c-81fa-ae1529d1bfbe.png',
  sessionID: 'be2e4a44-890b-483b-a26a-f6e122f36e2b',
  baseURL: 'https://aisuru.com',
});
```

## See also

- [memori-react](https://github.com/memori-ai/memori-react) - React library for Memori, uses this library
- [memori-webcomponent](https://github.com/memori-ai/memori-webcomponent) - Web component for Memori, uses this library
npm package: @memori.ai/memori-webcomponent
Description: WebComponent to integrate a Memori in your app or website
Author: Memori Srl
Latest version: 8.2.10

# Memori WebComponent

WebComponent to integrate an agent from [Memori](https://memori.ai) in a web page or web app.

Web Platform: [AIsuru](https://aisuru.com)

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
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@memori.ai/memori-webcomponent/dist/memori-webcomponent.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@memori.ai/memori-react/dist/styles.min.css"
/>
```

## Usage

```html
<memori-client
  memoriName="Memori"
  ownerUserName="memoridev"
  tenantID="www.aisuru.com"
  apiURL="https://backend.memori.ai"
  engineURL="https://engine.memori.ai"
  baseURL="https://www.aisuru.com"
  uiLang="it"
  multilingual="true"
  showShare="true"
></memori-client>
```

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
<memori-client ... context="VAR1:VALUE1,VAR2:VALUE2"></memori-client>
```

## Styling

You can override the default styles of the Agent 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