app.py

import gradio as gr

def respond(message, file, chat_history):
    if message:
        chat_history.append({"role": "user", "content": message})
    if file:
        chat_history.append({"role": "user", "content": f"📎 File uploaded: {file.name}"})
    chat_history.append({"role": "assistant", "content": "✅ Got it!"})
    return "", None, chat_history

# Custom CSS for layout (responsive and overflow-safe)
custom_css = """
.input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    min-width: 0;
    white-space: nowrap;
}
.input-wrapper .icon {
    font-size: 20px;
    cursor: pointer;
    color: #555;
}
.input-wrapper .icon:hover {
    color: #007bff;
}
.send-button {
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
    color: #007bff;
    flex-shrink: 0;
}
"""

with gr.Blocks(css=custom_css) as demo:
    chatbot = gr.Chatbot(type="messages")
    chat_history = gr.State([])

    with gr.Row():
        with gr.Column():
            chatbot.render()

    with gr.Row():
        with gr.Column(elem_classes="input-container"):
            with gr.Row(elem_classes="input-wrapper"):
                upload_btn = gr.UploadButton("📎", file_types=["*"], elem_classes="icon")
                msg = gr.Textbox(
                    label="",
                    placeholder="Type your message...",
                    show_label=False,
                    container=False,
                    lines=1,
                )
            send_btn = gr.Button("➡️", elem_classes="send-button")

    # Event handlers
    msg.submit(respond, inputs=[msg, upload_btn, chat_history], outputs=[msg, upload_btn, chatbot])
    send_btn.click(respond, inputs=[msg, upload_btn, chat_history], outputs=[msg, upload_btn, chatbot])
    upload_btn.upload(respond, inputs=[msg, upload_btn, chat_history], outputs=[msg, upload_btn, chatbot])

demo.queue().launch()