Skip to main content

Configurazione

Il comportamento e l'aspetto del chatbot possono essere personalizzati tramite l'oggetto chatbotConfig.

Questo oggetto viene passato come prop al ChatbotProvider e consente di abilitare o disabilitare funzionalità, modificare testi, icone e comportamenti dell'interfaccia.

Esempio completo di configurazione​

import { faUser } from "@fortawesome/free-solid-svg-icons";

export const chatbotConfig = {
  disableWebSocket: false,
  hideChatbotHeader: false,
  hideToolbar: true,
  chatbotName: "ITlogiX Assistant",
  chatbotAvatarText: "IT",
  showHintBubble: true,
  files: {
    enableUploadFile: true
  },
  avatarMessages: {
    showAvatarMessages: true,
    user: {
      icon: faUser,
      color: "success" as "primary" | "secondary" | "error" | "warning" | "info" | "success"
    }
  }
};

Proprietà di primo livello​

disableWebSocket​

  • Tipo: boolean
  • Default: false

Se impostato a true, disabilita la comunicazione tramite WebSocket. Utile in ambienti di test o fallback.

hideChatbotHeader​

  • Tipo: boolean
  • Default: false

Nasconde l'header superiore del chatbot (titolo, azioni, ecc.).

hideToolbar​

  • Tipo: boolean
  • Default: true

Mostra o nasconde la toolbar inferiore del chatbot.

chatbotName​

  • Tipo: string

Nome visualizzato nell'interfaccia del chatbot.

chatbotAvatarText​

  • Tipo: string

Testo mostrato all'interno dell'avatar del chatbot (es. iniziali).

showHintBubble​

  • Tipo: boolean
  • Default: true

Abilita la visualizzazione del messaggio di suggerimento (hint bubble) vicino al pulsante del chatbot.

Configurazione upload file​

files.enableUploadFile​

  • Tipo: boolean

Abilita o disabilita la possibilità di caricare file all'interno della chat.

files: {
  enableUploadFile: true
}

Configurazione avatar messaggi​

avatarMessages.showAvatarMessages​

  • Tipo: boolean

Se true, mostra l'avatar accanto ai messaggi (utente e bot).

avatarMessages.user​

Configurazione dell'avatar per i messaggi dell'utente.

icon​

  • Tipo: IconDefinition (FontAwesome)

Icona utilizzata per rappresentare l'utente.

color​

  • Tipo:
"primary" | "secondary" | "error" | "warning" | "info" | "success"

Colore dell'avatar, coerente con la palette di Material UI.

avatarMessages: {
  showAvatarMessages: true,
  user: {
    icon: faUser,
    color: "success"
  }
}

Utilizzo con ChatbotProvider​

<ChatbotProvider
  token={accessToken}
  socketUrl={process.env.NEXT_PUBLIC_CHATBOT_URL ?? ""}
  chatbotConfig={chatbotConfig}
>
  {children}
</ChatbotProvider>

Note finali​

  • Tutte le proprietà sono opzionali: è possibile passare solo quelle necessarie
  • L'oggetto chatbotConfig può essere esteso in futuro con nuove opzioni
  • Si consiglia di centralizzare la configurazione in un file dedicato (es. chatbotConfig.ts)

Configurando correttamente questo oggetto è possibile adattare il chatbot allo stile e alle esigenze del progetto 🎨