CUSTOMIZATION_GUIDE.md

# Martechsol Assistant Customization Guide

This guide explains how to customize the visual appearance and behavior of your Gradio-based chat interface.

## 1. Modifying the UI Layout (app/ui_gradio.py)

The interface is built using `gradio.Blocks`. You can modify the structure in the `with gr.Blocks(...) as demo:` section.

### Common Components:
- **`chatbot`**: The main chat window. We use `elem_id="chatbot-window"` for CSS targeting.
- **`msg`**: The text input box.
- **`send`**: The primary action button.

## 2. Custom CSS (app/ui_gradio.py)

At the top of `app/ui_gradio.py`, there is a `custom_css` string. This is the most powerful way to change the look of your app.

### How to target elements:
We use `elem_id` in Python to give elements stable names. 

Example:
```python
chatbot = gr.Chatbot(elem_id="my-custom-chat")
```
Then in CSS:
```css
#my-custom-chat {
    background-color: #f0f0f0;
}
```

### Important Selectors:
- **`footer`**: Targets the Gradio branding at the bottom.
- **`.gradio-container`**: The main outer wrapper of your app.
- **`[data-testid="user"]`**: Targets user messages.
- **`[data-testid="bot"]`**: Targets assistant messages.

## 3. Persistent Data on Hugging Face

Your data is stored in the `/data` volume.
- **Sessions**: `/data/sessions/`
- **FAISS Index**: `/data/index/`

To manage these, you can use the **Admin Panel** at `/admin`.

## 4. Tips for Widget Embedding

If you are embedding this as an iframe (like in `addon.html`):
1. **Remove redundant headers**: We hide the Markdown titles in the CSS (`#title-area { display: none; }`) so the iframe looks like a part of your page.
2. **Handle height**: We set `height: auto !important` and `min-height: 40px !important` on the chatbot so it doesn't take up 500px by default.
3. **Transparent Background**: You can add `body { background-color: transparent !important; }` to the `custom_css` if your theme supports it.

## 5. Deployment

Whenever you save a file, the changes are automatically pushed to your Hugging Face Space. The Space will rebuild automatically (takes about 1-2 minutes).