ui/theme.py

"""
Gradio theme + a few shared CSS tweaks.

Blue / light-blue palette per spec. Kept intentionally simple/functional
rather than visually elaborate.
"""

import gradio as gr

dsa_theme = gr.themes.Soft(
    primary_hue=gr.themes.colors.blue,
    secondary_hue=gr.themes.colors.sky,
    neutral_hue=gr.themes.colors.slate,
).set(
    body_background_fill="*neutral_50",
    body_background_fill_dark="*neutral_950",
    block_background_fill="white",
    block_border_width="1px",
    block_shadow="*shadow_drop",
    button_primary_background_fill="*primary_500",
    button_primary_background_fill_hover="*primary_600",
    button_primary_text_color="white",
)

CUSTOM_CSS = """
.gradio-container {
    max-width: 90% !important;
    margin: 0 auto !important;
}
#topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-color-primary);
    margin-bottom: 6px;
}
#topbar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-500);
}
#topbar-actions {
    gap: 4px !important;
}
#auth-status {
    font-size: 0.8rem;
    color: var(--body-text-color-subdued);
}

/* Shrink ONLY the buttons we explicitly tag - do not touch Gradio's
   internal chatbot buttons (copy/like/dislike icons etc.), otherwise
   their forced height squashes the surrounding message bubble and text
   spills outside it. */
.small-btn {
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    min-height: unset !important;
    height: 30px !important;
    line-height: 1 !important;
}

#history-panel {
    border-right: 1px solid var(--border-color-primary);
    padding-right: 8px;
}
.session-item {
    cursor: pointer;
}

/* Keep chat + input compact and always reachable without page scroll */
#main-row {
    max-height: 78vh;
}
#chat-column {
    display: flex;
    flex-direction: column;
}
#chat-window {
    height: 360px !important;
    min-height: 260px !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

/* Make sure message bubbles wrap and stay inside the chat window instead
   of overflowing horizontally/vertically. */
#chat-window .message,
#chat-window .message-wrap,
#chat-window .bot,
#chat-window .user {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    box-sizing: border-box !important;
}
#chat-window .message pre,
#chat-window .message code {
    white-space: pre-wrap !important;
    overflow-x: auto !important;
}

#input-row {
    margin-top: 4px;
}

footer {display: none !important;}
"""