⚛️ 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.
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-reactMemori Props Reference
Identificazione e Configurazione Base
Props essenziali per l’identificazione e la configurazione base del Memori.
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
* È richiesta una delle due coppie: memoriName + ownerUserName oppure memoriID + ownerUserID
Configurazione URL
Props per la configurazione degli endpoint del sistema.
Layout e Visualizzazione
Props che controllano l’aspetto e il layout del widget.
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.
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.
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.
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.
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.
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).
Last updated