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

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

https://github.com/andrepat0/memory-media-layoutgithub.com

Il Repository Github con il codice del Layout Personalizzato

https://andrepat0.github.io/memory-media-layout/andrepat0.github.io

Prova a giocare!!