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:

chatbot = gr.Chatbot(elem_id="my-custom-chat")

Then in 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).