Update app.py

app.py

@@ -170,34 +170,54 @@ custom_css = """
 """
 
 def respond(message, history):
-    history.append(("You", message))
-    history.append(("Bot", "Got it!"))
-    return history, ""
+    messages = [{"role": "assistant", "content": "You are a friendly chatbot."}]
+    if history:
+        messages.extend(history)
+    messages.append({"role": "user", "content": message})
+    response = client.chat_completion(messages, max_tokens=100)
+    return history + [(message, response['choices'][0]['message']['content'].strip())], ""
 
 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():
-        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
+    # Hidden textbox to store the message
     msg = gr.Textbox(visible=False)
     
+    # Visible custom input bar with send button
+    gr.HTML("""
+    <div class="input-container">
+        <input id="user-input" placeholder="Type your message..." />
+        <button id="send-btn">➤</button>
+    </div>
+    <script>
+        const sendBtn = document.getElementById('send-btn');
+        const userInput = document.getElementById('user-input');
+        sendBtn.onclick = () => {
+            const value = userInput.value;
+            if (value.trim() !== "") {
+                // Set the hidden Gradio textbox value
+                const textbox = document.querySelector('textarea');
+                textbox.value = value;
+                textbox.dispatchEvent(new Event('input', { bubbles: true }));
+                // Trigger submit
+                document.querySelector('textarea').closest('form').dispatchEvent(new Event('submit', { bubbles: true }));
+                userInput.value = "";
+            }
+        };
+        userInput.addEventListener("keypress", function(e) {
+            if (e.key === "Enter") {
+                sendBtn.click();
+                e.preventDefault();
+            }
+        });
+    </script>
+    """)
+    
     msg.submit(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()