Spaces:
Paused
Paused
File size: 2,133 Bytes
18b7816 54bdd5d 5c43323 54bdd5d 5c43323 d65702b 54bdd5d d65702b 54bdd5d be3a356 54bdd5d be3a356 54bdd5d be3a356 d65702b 54bdd5d be3a356 d65702b be3a356 54bdd5d be3a356 54bdd5d d65702b 54bdd5d 18b7816 54bdd5d 5c43323 54bdd5d d65702b be3a356 d65702b be3a356 d65702b be3a356 54bdd5d d65702b 54bdd5d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
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() |