> For the complete documentation index, see [llms.txt](https://docs.aisuru.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aisuru.com/frontend/componente-react.md).

# Componente React

Il componente React di Memori offre una soluzione più flessibile e potente per l'integrazione nelle applicazioni React. Ti offre il pieno controllo sul comportamento e sull'aspetto del widget.

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

#### Funzionalità principali

* Integrazione nativa con React;
* Supporto completo per TypeScript;
* Layout personalizzabili;
* Sistema di eventi avanzato;
* Supporto per l'override dei componenti;
* Gestione dello 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
```

## Riferimento delle props di Memori <a href="#memori_props_reference_28" id="memori_props_reference_28"></a>

### Identificazione e configurazione di base <a href="#identificazione_e_configurazione_base_30" id="identificazione_e_configurazione_base_30"></a>

Props essenziali per identificare e configurare Memori.

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

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

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

Props per la configurazione degli endpoint di sistema.

| Prop        | Tipo   | Obbligatorio | Predefinito                   | Descrizione                    |
| ----------- | ------ | ------------ | ----------------------------- | ------------------------------ |
| `baseURL`   | string |              | "<https://your-base-url.com>" | URL di base                    |
| `apiURL`    | string |              | "<https://backend.memori.ai>" | URL dell'API backend di Memori |
| `engineURL` | string |              | "<https://engine.memori.ai>"  | URL dell'API engine di Memori  |

### 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 di layout personalizzato   |
| `userAvatar`   | string    |              |             | URL dell'avatar utente personalizzato |

### Gestione delle lingue <a href="#gestione_linguaggio_65" id="gestione_linguaggio_65"></a>

Proprietà relative alla gestione della lingua e delle traduzioni.

| Proprietà      | Tipo    | Obbligatorio | Predefinito | Descrizione                                                          |
| -------------- | ------- | ------------ | ----------- | -------------------------------------------------------------------- |
| `uiLang`       | string  |              | "en"        | Lingua dell'interfaccia, ad esempio "en" o "it"                      |
| `multilingual` | boolean |              | false       | Abilita più lingue                                                   |
| `spokenLang`   | string  |              | "en"        | Lingua del testo parlato, come impostata dalla selezione dell'utente |

### Elementi dell'interfaccia configurabili <a href="#elementi_ui_configurabili_75" id="elementi_ui_configurabili_75"></a>

Proprietà per controllare la visibilità di vari elementi dell'interfaccia.

| Proprietà                 | Tipo    | Obbligatorio | Predefinito | Descrizione                                                |
| ------------------------- | ------- | ------------ | ----------- | ---------------------------------------------------------- |
| `showShare`               | boolean |              | true        | Mostra il pulsante di condivisione                         |
| `showSettings`            | boolean |              | true        | Mostra il pannello delle impostazioni                      |
| `showTypingText`          | boolean |              | false       | Mostra l'animazione di digitazione                         |
| `showInstruct`            | boolean |              | false       | Mostra l'interruttore della modalità istruzioni            |
| `showOnlyLastMessages`    | boolean |              | false       | Mostra solo i messaggi più recenti                         |
| `showClear`               | boolean |              | false       | Mostra il pulsante per cancellare la cronologia della chat |
| `showLogin`               | boolean |              | false       | Mostra il pulsante di login                                |
| `showCopyButton`          | boolean |              | false       | Mostra il pulsante di copia                                |
| `showTranslationOriginal` | boolean |              | false       | Mostra la traduzione originale                             |

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

Props relative alla gestione della sessione e dell'autenticazione.

| Prop            | Tipo   | Obbligatorio | Predefinito | Descrizione                                                                                    |
| --------------- | ------ | ------------ | ----------- | ---------------------------------------------------------------------------------------------- |
| `sessionID`     | string |              |             | ID della sessione iniziale, UUID che identifica una conversazione e le relative autorizzazioni |
| `authToken`     | string |              |             | Token di autenticazione dall'accesso dell'utente                                               |
| `secretToken`   | string |              |             | Token segreto, la password per 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 multimediali <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 l'output audio                                 |
| `defaultSpeakerActive`             | boolean                           |              | true        | Valore predefinito per l'attivazione dell'altoparlante |
| `AZURE_COGNITIVE_SERVICES_TTS_KEY` | string                            |              |             | Chiave Azure TTS                                       |
| `customMediaRenderer`              | (mimeType: string) => JSX.Element |              | null        | Renderer multimediale personalizzato                   |

### Configurazione della conversazione <a href="#configurazione_conversazione_115" id="configurazione_conversazione_115"></a>

Props per configurare il comportamento e le interazioni della conversazione.

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

## 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="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **WEBSITE ASSISTANT**

Assistente fluttuante, perfetto da integrare nei 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="MyAssistant"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  showOnlyLastMessages={true}
  height="500px"
/>
```

### **CHAT**

Interfaccia chat incentrata 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="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  showCopyButton={true}
  showTranslationOriginal={true}
/>
```

### **CORPO INTERO INGRANDITO**

Layout a pagina intera con un 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="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **CHAT NASCOSTA**

Layout con chat laterale: la chat è nascosta e visibile solo quando l'utente fa clic 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="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **TOTEM**

Layout progettato per chioschi digitali. Puoi personalizzare l'altezza e la profondità dell'avatar visualizzato sullo 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="MyMemori"
  ownerUserName="myuser"
  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 gioco d'avventura chiamato "The Land of Memori".\
Per impostazione predefinita, il layout non supporta la visualizzazione delle immagini a pagina intera.

Per mostrare come funzionano i layout personalizzati, ne abbiamo creato uno che migliora l'esperienza di visualizzazione delle immagini e fornisce informazioni aggiuntive all'utente in un pannello laterale (utente connesso, ultimo messaggio inviato dall'utente e un pulsante per visualizzare 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/>" %}
Provalo!
{% endembed %}