> For the complete documentation index, see [llms.txt](https://docs.aisuru.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aisuru.com/frontend/stile-e-personalizzazione.md).

# Stile e personalizzazione

### Panoramica

Memori offre diversi modi per personalizzare l'aspetto e il comportamento del widget, consentendoti di adattarlo al design del tuo sito web o della tua applicazione. Le personalizzazioni possono essere applicate tramite variabili CSS, layout personalizzati e sovrascritture 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 di base

```css
:root {
  /* Primary colors */
  --memori-primary: rgb(102, 103, 171);
  --memori-primary-text: #fff;
  --memori-text-color: #000;
  
  /* Background and containers */
  --memori-inner-bg: transparent;
  --memori-chat-bubble-bg: #ffffff60;
  --memori-blur-background: 0px;
  
  /* Buttons */
  --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 and Modal */
  --memori-drawer--width: 100%;
  --memori-drawer--width--md: 80%;
  --memori-drawer--width--lg: 60%;
  --memori-modal--width: 100%;
  --memori-modal--width--md: 80%;
  
  /* States */
  --memori-error-color: #ff4d4f;
}
```

#### Esempi di personalizzazione

**Tema scuro**

```css
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**

```css
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

Puoi definire layout completamente personalizzati utilizzando il componente React.

#### Esempio di base

```tsx
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 del layout

```css
.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 responsive

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

### Sovrascritture dei componenti

Puoi sovrascrivere i componenti predefiniti per una personalizzazione ancora più approfondita.

#### Esempio: bolla di chat personalizzata

```tsx
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 practice

1. **Mantieni la coerenza;**
   * Usa colori e stili coerenti con il tuo brand.
   * Mantieni la stessa palette in tutto il widget.
2. **Accessibilità**
   * Assicurati che il contrasto tra testo e sfondo sia sufficiente;
   * Mantieni leggibili le dimensioni dei caratteri;
   * Considera gli utenti con disabilità visive.
3. **Design responsive**
   * Esegui test su diversi dispositivi e dimensioni dello schermo;
   * Utilizza breakpoint appropriati;
   * Adatta layout e dimensioni ai dispositivi mobili.
4. **Prestazioni**
   * Evita animazioni pesanti;
   * Ottimizza immagini e risorse;
   * Riduci al minimo l'uso di filtri ed effetti CSS complessi.

### Demo

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

{% embed url="<https://jsfiddle.net/8rw6mpy1/>" %}