# Componente React

Il componente React di Memori offre una soluzione più flessibile e potente per l'integrazione in applicazioni React. Fornisce controllo completo sul comportamento e l'aspetto del widget.

[🔗 Repository GitHub](https://github.com/memori-ai/memori-react)

#### Caratteristiche Principali

* Integrazione nativa con React;
* Supporto TypeScript completo;
* Layout personalizzabili;
* Sistema di eventi avanzato;
* Possibilità di override dei componenti;
* Gestione stato integrata.

### Installazione <a href="#installazione_18" id="installazione_18"></a>

```batch
# npm
npm install @memori.ai/memori-react
# yarn
yarn add @memori.ai/memori-react
```

## Memori Props Reference <a href="#memori_props_reference_28" id="memori_props_reference_28"></a>

### Identificazione e Configurazione Base <a href="#identificazione_e_configurazione_base_30" id="identificazione_e_configurazione_base_30"></a>

Props essenziali per l’identificazione e la configurazione base del Memori.

| Prop              | Tipo   | Obbligatorio | Predefinito | Descrizione                                           |
| ----------------- | ------ | ------------ | ----------- | ----------------------------------------------------- |
| `memoriName`\*    | string | ✓            |             | Nome del Memori                                       |
| `ownerUserName`\* | string | ✓            |             | Nome utente del proprietario del Memori               |
| `memoriID`\*      | string | ✓            |             | ID del Memori                                         |
| `ownerUserID`\*   | string | ✓            |             | ID utente del proprietario del Memori                 |
| `tenantID`        | string | ✓            |             | ID del tenant (es. "[aisuru.com](http://aisuru.com)") |

\* È richiesta una delle due coppie: `memoriName` + `ownerUserName` oppure `memoriID` + `ownerUserID`

### Configurazione URL <a href="#configurazione_url_44" id="configurazione_url_44"></a>

Props per la configurazione degli endpoint del sistema.

| Prop        | Tipo   | Obbligatorio | Predefinito                   | Descrizione                |
| ----------- | ------ | ------------ | ----------------------------- | -------------------------- |
| `baseURL`   | string |              | "<https://tuo-url-base.com>"  | URL base                   |
| `apiURL`    | string |              | "<https://backend.memori.ai>" | URL del Memori Backend API |
| `engineURL` | string |              | "<https://engine.memori.ai>"  | URL del Memori Engine API  |

### Layout e Visualizzazione <a href="#layout_e_visualizzazione_54" id="layout_e_visualizzazione_54"></a>

Props che controllano l’aspetto e il layout del widget.

| Prop           | Tipo      | Obbligatorio | Predefinito | Descrizione                      |
| -------------- | --------- | ------------ | ----------- | -------------------------------- |
| `layout`       | string    |              | “FULLPAGE”  | Tipo di layout                   |
| `height`       | string    |              | “100%”      | Altezza del componente           |
| `customLayout` | Component |              |             | Componente layout personalizzato |
| `userAvatar`   | string    |              |             | URL avatar utente personalizzato |

### Gestione Linguaggio <a href="#gestione_linguaggio_65" id="gestione_linguaggio_65"></a>

Props relative alla gestione delle lingue e delle traduzioni.

| Prop           | Tipo    | Obbligatorio | Predefinito | Descrizione                                                          |
| -------------- | ------- | ------------ | ----------- | -------------------------------------------------------------------- |
| `uiLang`       | string  |              | “en”        | Lingua dell’interfaccia, es: “en” or “it”                            |
| `multilingual` | boolean |              | false       | Abilita più lingue                                                   |
| `spokenLang`   | string  |              | “en”        | Lingua del testo parlato, come impostato dalla selezione dell’utente |

### Elementi UI Configurabili <a href="#elementi_ui_configurabili_75" id="elementi_ui_configurabili_75"></a>

Props per controllare la visibilità di vari elementi dell’interfaccia.

| Prop                      | Tipo    | Obbligatorio | Predefinito | Descrizione                                |
| ------------------------- | ------- | ------------ | ----------- | ------------------------------------------ |
| `showShare`               | boolean |              | true        | Mostra pulsante di condivisione            |
| `showSettings`            | boolean |              | true        | Mostra pannello impostazioni               |
| `showTypingText`          | boolean |              | false       | Mostra animazione di digitazione           |
| `showInstruct`            | boolean |              | false       | Mostra switch modalità istruzioni          |
| `showOnlyLastMessages`    | boolean |              | false       | Mostra solo i messaggi più recenti         |
| `showClear`               | boolean |              | false       | Mostra pulsante di pulizia cronologia chat |
| `showLogin`               | boolean |              | false       | Mostra pulsante di login                   |
| `showCopyButton`          | boolean |              | false       | Mostra pulsante di copia                   |
| `showTranslationOriginal` | boolean |              | false       | Mostra traduzione originale                |

### Autenticazione e Sessione <a href="#autenticazione_e_sessione_91" id="autenticazione_e_sessione_91"></a>

Props relative alla gestione delle sessioni e dell’autenticazione.

| Prop            | Tipo   | Obbligatorio | Predefinito | Descrizione                                                                         |
| --------------- | ------ | ------------ | ----------- | ----------------------------------------------------------------------------------- |
| `sessionID`     | string |              |             | ID sessione iniziale, UUID che identifica una conversazione e le sue autorizzazioni |
| `authToken`     | string |              |             | Token di autenticazione dal login dell’utente                                       |
| `secretToken`   | string |              |             | Token segreto, la password di un Memori privato o segreto                           |
| `integrationID` | string |              |             | ID univoco dell’integrazione                                                        |
| `tag`           | string |              |             | Tag dell’utente che apre la sessione                                                |
| `pin`           | string |              |             | PIN dell’utente che apre la sessione                                                |

### Funzionalità Audio e Media <a href="#funzionalit_audio_e_media_104" id="funzionalit_audio_e_media_104"></a>

Props per la gestione dell’audio e dei contenuti multimediali.

| Prop                               | Tipo                              | Obbligatorio | Predefinito | Descrizione                              |
| ---------------------------------- | --------------------------------- | ------------ | ----------- | ---------------------------------------- |
| `enableAudio`                      | boolean                           |              | true        | Abilita output audio                     |
| `defaultSpeakerActive`             | boolean                           |              | true        | Default value for the speaker activation |
| `AZURE_COGNITIVE_SERVICES_TTS_KEY` | string                            |              |             | Chiave Azure TTS                         |
| `customMediaRenderer`              | (mimeType: string) => JSX.Element |              | null        | Custom media renderer                    |

### Configurazione Conversazione <a href="#configurazione_conversazione_115" id="configurazione_conversazione_115"></a>

Props per la configurazione della conversazione e delle interazioni.

| Prop                       | Tipo        | Obbligatorio | Predefinito | Descrizione                                    |
| -------------------------- | ----------- | ------------ | ----------- | ---------------------------------------------- |
| `context`                  | string      |              |             | Contesto iniziale della conversazione          |
| `initialQuestion`          | string      |              |             | Prima domanda da porre                         |
| `onStateChange`            | function    |              |             | Callback cambio stato                          |
| `disableTextEnteredEvents` | boolean     |              | false       | Disabilita listener MemoriTextEntered          |
| `useMathFormatting`        | boolean     |              | false       | Abilita formattazione matematica               |
| `additionalSettings`       | JSX.Element |              |             | Contenuto pannello impostazioni personalizzato |

## Tipi di Layout <a href="#tipi_di_layout_128" id="tipi_di_layout_128"></a>

### **FULLPAGE**

Esperienza a schermo intero, ideale per pagine dedicate

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/fullpage.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="FULLPAGE"
  memoriName="MioMemori"
  ownerUserName="mioutente"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **WEBSITE ASSISTANT**

Assistente fluttuante, perfetto per l’integrazione in siti web

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/website-assistant.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="WEBSITE_ASSISTANT"
  memoriName="MioAssistente"
  ownerUserName="mioutente"
  tenantID="aisuru.com"
  showOnlyLastMessages={true}
  height="500px"
/>
```

### **CHAT**

Interfaccia chat focalizzata sui messaggi

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/chat.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="CHAT"
  memoriName="MioMemori"
  ownerUserName="mioutente"
  tenantID="aisuru.com"
  showCopyButton={true}
  showTranslationOriginal={true}
/>
```

### **ZOOMED FULL BODY**

Layout a pagina intera, con avatar ingrandito sul lato sinistro dello schermo

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/zoomed-avatar.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="ZOOMED_FULL_BODY"
  memoriName="MioMemori"
  ownerUserName="mioutente"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **HIDDEN CHAT**

Layout chat laterale, la chat è nascosta e visibile solo quando l’utente clicca sul pulsante sul lato destro dello schermo

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/hidden-chat.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="HIDDEN_CHAT"
  memoriName="MioMemori"
  ownerUserName="mioutente"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **TOTEM**

Layout adatto per totem digitali, é possibile personalizzare l'altezza e la profonditá dell'avatar presente nello sfondo.

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/totem.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="TOTEM"
  memoriName="MioMemori"
  ownerUserName="mioutente"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### Layout Personalizzato <a href="#layout_personalizzato_214" id="layout_personalizzato_214"></a>

<figure><img src="https://assets.memori.ai/api/v2/asset/12ed839d-0b93-4935-a160-d5f25acfb8e5.png" alt="" width="375"><figcaption></figcaption></figure>

Abbiamo creato un Agente di esempio, un adventure game chiamato “The Land of Memori”.\
Di default il layout non permette di vedere le immagini in piena pagina.

Per mostrare come funziona il layout personalizzato, abbiamo creato un layout personalizzato che permette di migliorare l’esperienza di visualizzazione delle immagini e fornisce ulteriori informazioni all’utente in un pannello laterale (utente loggato, ultimo messaggio inviato dall’utente, e un bottone per vedere l’intera conversazione).<br>

{% embed url="<https://github.com/andrepat0/memory-media-layout>" %}
Il Repository Github con il codice del Layout Personalizzato
{% endembed %}

{% embed url="<https://andrepat0.github.io/memory-media-layout/>" %}
Prova a giocare!!
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/frontend/componente-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.