🎨 Stile e Personalizzazione

Panoramica

Memori offre diverse possibilità di personalizzazione dell'aspetto e del comportamento del widget, permettendo di adattarlo perfettamente al design del proprio sito web o applicazione. Le personalizzazioni possono essere applicate attraverso variabili CSS, layout personalizzati e override dei componenti.

Variabili CSS

Il sistema di personalizzazione si basa principalmente su variabili CSS che controllano colori, dimensioni, spaziature e altri aspetti visivi del widget.

Variabili Base

:root {
  /* Colori principali */
  --memori-primary: rgb(102, 103, 171);
  --memori-primary-text: #fff;
  --memori-text-color: #000;
  
  /* Sfondo e contenitori */
  --memori-inner-bg: transparent;
  --memori-chat-bubble-bg: #ffffff60;
  --memori-blur-background: 0px;
  
  /* Pulsanti */
  --memori-button-bg: #fff;
  --memori-button-text: #000;
  --memori-button-radius: 5px;
  --memori-button-padding: 0.5rem 1.5rem;
  --memori-button-border-color: #d9d9d9;
  --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
  
  /* Drawer e Modal */
  --memori-drawer--width: 100%;
  --memori-drawer--width--md: 80%;
  --memori-drawer--width--lg: 60%;
  --memori-modal--width: 100%;
  --memori-modal--width--md: 80%;
  
  /* Stati */
  --memori-error-color: #ff4d4f;
}

Esempi di Personalizzazione

Tema Scuro

memori-client,
#headlessui-portal-root,
.memori-widget {
  --memori-primary: #2d3748;
  --memori-primary-text: #ffffff;
  --memori-inner-bg: #1a202c;
  --memori-chat-bubble-bg: #2d3748;
  --memori-text-color: #e2e8f0;
  --memori-button-bg: #4a5568;
  --memori-button-text: #ffffff;
  --memori-blur-background: 8px;
}
.memori-button {
  background-color: #4a5568;
  color: #ffffff;
}
.memori--title {
  color: #ffffff;
}
.memori-chat--bubble {
  background-color: #ffffff;
  color: #1a202c;
}
.memori-button-icon {
  color: #fff;
}
.memori-chat-inputs--mic svg {
  fill: #fff;
}

Tema Chiaro

i-client,memori-client,
#headlessui-portal-root,
.memori-widget {
  --memori-primary: #6366f1;
  --memori-primary-text: #ffffff;
  --memori-inner-bg: #f8fafc;
  --memori-chat-bubble-bg: #f1f5f9;
  --memori-text-color: #1e293b;
  --memori-button-bg: #ffffff;
  --memori-button-text: #1e293b;
  --memori-button-radius: 12px;
  --memori-blur-background: 0px;
}
.memori-button {
  background-color: #ffffff;
  color: #1e293b;
}
.memori--title {
  color: #1e293b;
}
.memori-chat--bubble {
  background-color: #ffffff;
  color: #1e293b;
}
.memori-chat-inputs--mic svg {
  fill: #1e293b;
}

Layout Personalizzati

È possibile definire layout completamente personalizzati utilizzando il componente React.

Esempio Base

const CustomLayout: React.FC<LayoutProps> = ({
  Avatar,
  Chat,
  StartPanel,
  sessionId,
  hasUserActivatedSpeak,
  avatarProps,
  chatProps,
  startPanelProps
}) => (
  <div className="custom-layout">
    <div className="avatar-section">
      <Avatar {...avatarProps} />
    </div>
    <div className="main-content">
      {sessionId && hasUserActivatedSpeak ? (
        <Chat {...chatProps} />
      ) : (
        <StartPanel {...startPanelProps} />
      )}
    </div>
  </div>
);

Stili Specifici per Layout

.custom-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  padding: 20px;
  height: 100%;
}

.avatar-section {
  background: var(--memori-inner-bg);
  border-radius: 10px;
  padding: 20px;
}

.main-content {
  background: var(--memori-chat-bubble-bg);
  border-radius: 10px;
  overflow: hidden;
}

Personalizzazione Responsiva

@media (max-width: 768px) {
  .memori-widget {
    --memori-drawer--width: 100%;
    --memori-modal--width: 100%;
  }
  
  .custom-layout {
    grid-template-columns: 1fr;
  }
}

Override dei Componenti

È possibile sovrascrivere i componenti predefiniti per una personalizzazione ancora più profonda.

Esempio: Chat Bubble Personalizzata

const CustomChatBubble: React.FC<ChatBubbleProps> = ({
  message,
  isUser,
  timestamp
}) => (
  <div className={`custom-bubble ${isUser ? 'user' : 'bot'}`}>
    <div className="message">{message}</div>
    <div className="timestamp">{timestamp}</div>
  </div>
);

Best Practices

1. Mantenere la Coerenza

   • Utilizzare colori e stili coerenti con il brand;

   • Mantenere la stessa palette in tutto il widget.

2. Accessibilità

   • Assicurare sufficiente contrasto tra testo e sfondo;

   • Mantenere dimensioni dei caratteri leggibili;

   • Considerare utenti con difficoltà visive.

3. Responsive Design

   • Testare su diversi dispositivi e dimensioni dello schermo;

   • Utilizzare breakpoint appropriati;

   • Adattare layout e dimensioni per dispositivi mobili.

4. Performance

   • Evitare animazioni pesanti;

   • Ottimizzare immagini e assets;

   • Minimizzare l'uso di filtri e effetti CSS complessi.

Demo

Abbiamo realizzato una demo che mostra un esempio di personalizzazione del tema utilizzando l'Agente di "Giuseppe Verdi". Puoi provare a modificare lo stile a tuo piacimento.

https://jsfiddle.net/8rw6mpy1/jsfiddle.net