app.py

import gradio as gr
import os
from llama_index.core import SimpleDirectoryReader, VectorStoreIndex, Settings
from llama_index.llms.openai import OpenAI

# Set OpenAI API key from environment
os.environ["OPENAI_API_KEY"] = os.getenv("OPENAI_API_KEY")

# Configure the default LLM
Settings.llm = OpenAI(model="gpt-4.1-nano")

# Load documents and build index
documents = SimpleDirectoryReader("documents").load_data()
index = VectorStoreIndex.from_documents(documents)

# Create query engine
query_engine = index.as_query_engine()

def chatbot_response(message):
    response = query_engine.query(message)
    return str(response)

# Custom CSS for purple button styling - Target Submit button specifically
custom_css = """
/* Target Submit button with all its classes */
button.lg.primary.svelte-cmf5ev,
button.primary.svelte-cmf5ev,
button.lg.primary,
button.primary {
    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
}

button.lg.primary.svelte-cmf5ev:hover,
button.primary.svelte-cmf5ev:hover,
button.lg.primary:hover,
button.primary:hover {
    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* Keep Clear button as secondary (gray) */
button.lg.secondary.svelte-cmf5ev,
button.secondary.svelte-cmf5ev,
button.lg.secondary,
button.secondary {
    background: #E5E7EB !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
}

button.lg.secondary.svelte-cmf5ev:hover,
button.secondary.svelte-cmf5ev:hover,
button.lg.secondary:hover,
button.secondary:hover {
    background: #F3F4F6 !important;
    color: #374151 !important;
    transform: translateY(-1px) !important;
}

/* Example buttons - ensure they stay readable */
button.gallery-item.svelte-p5q82i,
.gallery-item.svelte-p5q82i,
button.gallery-item,
.gallery-item {
    background: white !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
}

button.gallery-item.svelte-p5q82i:hover,
.gallery-item.svelte-p5q82i:hover,
button.gallery-item:hover,
.gallery-item:hover {
    background: #F9FAFB !important;
    color: #374151 !important;
    border-color: #9CA3AF !important;
    transform: translateY(-1px) !important;
}

/* Force text color in example buttons to be dark */
button.gallery-item.svelte-p5q82i,
button.gallery-item.svelte-p5q82i *,
.gallery-item.svelte-p5q82i,
.gallery-item.svelte-p5q82i *,
button.gallery-item,
button.gallery-item *,
.gallery-item,
.gallery-item * {
    color: #374151 !important;
}

/* Additional selectors for HF Spaces compatibility */
.gradio-container button.primary,
.gradio-container .primary,
[data-testid="primary-button"] {
    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
    border: none !important;
    color: white !important;
}

.gradio-container button.primary:hover,
.gradio-container .primary:hover,
[data-testid="primary-button"]:hover {
    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
}
"""

iface = gr.Interface(
    fn=chatbot_response,
    inputs="text",
    outputs="text",
    title="Ask about me",
    description="Ask questions and receive answers based on my bio.",
    examples=[["Provide a summary of Donald"],
              ["Has Donald worked with Python or machine learning?"],
              ["Tell me something interesting about Donald"],
              ["What technical skills does Donald have?"],
              ["How did Donald build this RAG chatbot?"]
             ],
    css=custom_css
)

iface.launch()