app.py

from bot import chat

import gradio as gr

def chat_fn(message, history):
    formatted_history = []
    for user_msg, bot_msg in history:
        formatted_history.append({"role": "user", "content": user_msg})
        formatted_history.append({"role": "assistant", "content": bot_msg})
    reply = chat(message, formatted_history)
    return reply

with gr.Blocks(css="""
    body {background: #f9fafb; font-family: 'Inter', sans-serif;}
    #chatbot {
        height: 50px; 
        overflow-y: auto; 
        background: white;
        border-radius: 20px; 
        padding: 24px; 
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        line-height: 1.6;
    }
    
    /* USER messages */
    .message.user {
        background: linear-gradient(135deg,#2563eb,#1d4ed8); 
        color: white; 
        border-radius: 18px 18px 4px 18px; 
        padding: 14px 18px; 
        max-width: 70%;
        margin-left: auto;
        margin: 12px 0;
    }
    
    /* BOT messages */
    .message.bot {
        background: #f3f4f6; 
        color: #111827; 
        border-radius: 18px 18px 18px 4px; 
        padding: 14px 18px; 
        max-width: 70%;
        margin-right: auto;
        margin: 12px 0;
    }

    #input-row {margin-top: 14px;}
    .send-btn {
        background: #2563eb !important; 
        color: white !important; 
        border-radius: 12px;
        height: 48px;
    }
    h1 {text-align:center; font-size: 2rem; color: #111827; margin-bottom: 0.3rem;}
    h2 {text-align:center; font-size: 1rem; font-weight: 400; color: #6b7280; margin-bottom: 1rem;}
""") as demo:
    
    with gr.Column():
        gr.HTML("<h1>💬 Chat with Shekar</h1>")
        
        chatbot = gr.Chatbot(elem_id="chatbot", bubble_full_width=False, show_label=False)

        with gr.Row(elem_id="input-row"):
            msg = gr.Textbox(
                placeholder="Type your message here...",
                show_label=False,
                container=False,
                scale=8
            )
            submit_btn = gr.Button("➤", elem_classes="send-btn", scale=1)

    def respond(message, history):
        bot_reply = chat_fn(message, history)
        history.append((message, bot_reply))
        return history, ""

    submit_btn.click(respond, [msg, chatbot], [chatbot, msg])
    msg.submit(respond, [msg, chatbot], [chatbot, msg])

demo.launch()