⚛️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.
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
# npm
npm install @memori.ai/memori-react
# yarn
yarn add @memori.ai/memori-reactRiferimento delle props di Memori
Identificazione e configurazione di base
Props essenziali per identificare e configurare Memori.
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
*È richiesta una delle due coppie: memoriName + ownerUserName oppure memoriID +ownerUserID
Configurazione dell'URL
Props per la configurazione degli endpoint di 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 di layout personalizzato
userAvatar
string
URL dell'avatar utente personalizzato
Gestione delle lingue
Proprietà relative alla gestione della lingua e delle traduzioni.
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
Proprietà per controllare la visibilità di vari elementi dell'interfaccia.
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
Props relative alla gestione della sessione e dell'autenticazione.
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
Props per la gestione dell'audio e dei contenuti multimediali.
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
Props per configurare il comportamento e le interazioni della conversazione.
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
FULLPAGE
Esperienza a schermo intero, ideale per pagine dedicate
WEBSITE ASSISTANT
Assistente fluttuante, perfetto da integrare nei siti web
CHAT
Interfaccia chat incentrata sui messaggi
CORPO INTERO INGRANDITO
Layout a pagina intera con un avatar ingrandito sul lato sinistro dello schermo
CHAT NASCOSTA
Layout con chat laterale: la chat è nascosta e visibile solo quando l'utente fa clic sul pulsante sul lato destro dello schermo
TOTEM
Layout progettato per chioschi digitali. Puoi personalizzare l'altezza e la profondità dell'avatar visualizzato sullo sfondo.
Layout personalizzato
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).
Ultimo aggiornamento