# 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

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

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

È possibile definire layout completamente personalizzati utilizzando il componente React.

#### Esempio 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 per 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 Responsiva

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/frontend/stile-e-personalizzazione.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.