Update app.py

app.py

@@ -141,26 +141,63 @@ custom_css = """
 #chatbox .message.user {background-color: #EDE7F6; color: #4A148C; border-radius: 20px; padding: 10px; margin: 5px; max-width: 75%;}
 #chatbox .message.bot {background-color: #F3E5F5; color: #4A148C; border-radius: 20px; padding: 10px; margin: 5px; max-width: 75%;}
 #header {background-color: #8E24AA; color: white; padding: 12px; border-radius: 12px 12px 0 0; font-weight: bold;}
-.choice-btn {background-color: #BA68C8; color: white; border-radius: 20px; padding: 5px 12px; margin: 5px; cursor: pointer;}
-.choice-btn:hover {background-color: #9C27B0;}
+
+/* Input bar styling */
+.input-container {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 25px;
+    padding: 5px 10px;
+    width: 100%;
+}
+.input-container input {
+    border: none;
+    outline: none;
+    flex: 1;
+    font-size: 14px;
+}
+.input-container button {
+    background-color: #8E24AA;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 35px;
+    height: 35px;
+    cursor: pointer;
+}
 """
 
+def respond(message, history):
+    history.append(("You", message))
+    history.append(("Bot", "Got it!"))
+    return history, ""
+
 with gr.Blocks(css=custom_css) as demo:
     gr.HTML("<div id='header'>DivaBot</div>")
     
     chatbot = gr.Chatbot(elem_id="chatbox", height=400)
     
     with gr.Row():
-        msg = gr.Textbox(placeholder="Type your message here...")
-        send = gr.Button("Send")
+        with gr.Column():
+            # HTML custom input bar
+            gr.HTML("""
+            <div class="input-container">
+                <input id="user-input" placeholder="Type your message..." />
+                <button id="send-btn">➤</button>
+            </div>
+            """)
+    
+    # Normal Gradio textbox (hidden) to still connect logic
+    msg = gr.Textbox(visible=False)
     
-    # Hook up to your existing respond() function
     msg.submit(respond, [msg, chatbot], [chatbot, msg])
-    send.click(respond, [msg, chatbot], [chatbot, msg])
 
 demo.launch()
 
 
+
 #launching chatbot
 #chatbot.launch()
 #You may run into errors when you're trying different models. To see the error messages, set debug to True in launch()