⚛️ 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

Caratteristiche Principali

  • Integrazione nativa con React;

  • Supporto TypeScript completo;

  • Layout personalizzabili;

  • Sistema di eventi avanzato;

  • Possibilità di override dei componenti;

  • Gestione stato integrata.

Installazione

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

Memori Props Reference

Identificazione e Configurazione Base

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")

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

Configurazione URL

Props per la configurazione degli endpoint del sistema.

Prop
Tipo
Obbligatorio
Predefinito
Descrizione

baseURL

string

URL base

apiURL

string

URL del Memori Backend API

engineURL

string

URL del Memori Engine API

Layout e Visualizzazione

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

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

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

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

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

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

FULLPAGE

Esperienza a schermo intero, ideale per pagine dedicate

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

WEBSITE ASSISTANT

Assistente fluttuante, perfetto per l’integrazione in siti web

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

CHAT

Interfaccia chat focalizzata sui messaggi

<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

<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

<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.

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

Layout Personalizzato

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).

Il Repository Github con il codice del Layout Personalizzato
Prova a giocare!!

Last updated