For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

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

Riferimento delle props di Memori

Identificazione e configurazione di base

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

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

Configurazione dell'URL

Props per la configurazione degli endpoint di sistema.

Prop
Tipo
Obbligatorio
Predefinito
Descrizione

baseURL

string

URL di base

apiURL

string

URL dell'API backend di Memori

engineURL

string

URL dell'API engine di Memori

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 di layout personalizzato

userAvatar

string

URL dell'avatar utente personalizzato

Gestione delle lingue

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

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

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

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

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

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

Il repository GitHub con il codice del Layout personalizzato
Provalo!

Ultimo aggiornamento