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()