Update app.py

Field for bot ID.

app.py

@@ -4,6 +4,8 @@ import requests
 def send_message_with_secret(message, history, api_secret, bot_id):
     if not api_secret.strip():
         return "Please enter your API secret in the field above."
+    if not bot_id.strip():
+        return "Please enter your Bot ID."
         
     API_URL = "https://api.kindroid.ai/v1/send-message"
     headers = {
@@ -23,55 +25,93 @@ def send_message_with_secret(message, history, api_secret, bot_id):
     except requests.exceptions.RequestException as e:
         return f"An error occurred: {e}"
 
-with gr.Blocks() as app:
-    gr.Markdown("## Chat with your Kin")
-    
-    api_secret = gr.Textbox(
-        label="API Secret",
-        placeholder="Enter your API secret...",
-        type="password",
-        show_label=True
-    )
-
-    bot_id = gr.Textbox(
-        label="Bot ID",
-        placeholder="Enter your BotID...",
-        show_label=True
-    )
-    
-    chatbot = gr.Chatbot(
-        value=[],
-        type='messages',
-        height=400
-    )
-    
-    msg = gr.Textbox(
-        label="Message",
-        placeholder="Type your message here...",
-        show_label=False
-    )
+with gr.Blocks(css="""
+    .message.user {
+        background-color: #2563eb !important;
+        color: white !important;
+        border-radius: 12px 12px 0 12px !important;
+        margin-left: auto !important;
+        margin-right: 1rem !important;
+    }
+    .message.bot {
+        background-color: #f3f4f6 !important;
+        border-radius: 12px 12px 12px 0 !important;
+        margin-right: auto !important;
+        margin-left: 1rem !important;
+    }
+    .message.user, .message.bot {
+        padding: 1rem !important;
+        margin-bottom: 1rem !important;
+        max-width: 80% !important;
+        display: inline-block !important;
+    }
+    .message-wrap {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+    .contain {
+        margin: 0 auto;
+        max-width: 800px;
+        padding: 20px;
+    }
+    .input-row {
+        margin-bottom: 20px;
+    }
+    """) as app:
     
-    def respond(message, chat_history, api_secret):
-        if not message:
-            return chat_history, ""
+    with gr.Column(elem_classes="contain"):
+        gr.Markdown("## Chat with your Kin")
+        
+        with gr.Column(elem_classes="input-row"):
+            api_secret = gr.Textbox(
+                label="API Secret",
+                placeholder="Enter your API secret...",
+                type="password",
+                show_label=True
+            )
             
-        bot_response = send_message_with_secret(message, chat_history, api_secret, bot_id)
-        chat_history.append({"role": "user", "content": message})
-        chat_history.append({"role": "assistant", "content": bot_response})
-        return chat_history, ""
-    
-    msg.submit(
-        respond,
-        inputs=[msg, chatbot, api_secret, bot_id],
-        outputs=[chatbot, msg]
-    )
-    
-    send_btn = gr.Button("Send")
-    send_btn.click(
-        respond,
-        inputs=[msg, chatbot, api_secret],
-        outputs=[chatbot, msg]
-    )
+            bot_id = gr.Textbox(
+                label="Bot ID",
+                placeholder="Enter your Bot ID...",
+                show_label=True
+            )
+        
+        chatbot = gr.Chatbot(
+            value=[],
+            type='messages',
+            height=400
+        )
+        
+        with gr.Row():
+            msg = gr.Textbox(
+                label="Message",
+                placeholder="Type your message here...",
+                show_label=False,
+                scale=9
+            )
+            
+            send_btn = gr.Button("Send", scale=1)
+        
+        def respond(message, chat_history, api_secret, bot_id):
+            if not message:
+                return chat_history, ""
+                
+            bot_response = send_message_with_secret(message, chat_history, api_secret, bot_id)
+            chat_history.append({"role": "user", "content": message})
+            chat_history.append({"role": "assistant", "content": bot_response})
+            return chat_history, ""
+        
+        msg.submit(
+            respond,
+            inputs=[msg, chatbot, api_secret, bot_id],
+            outputs=[chatbot, msg]
+        )
+        
+        send_btn.click(
+            respond,
+            inputs=[msg, chatbot, api_secret, bot_id],
+            outputs=[chatbot, msg]
+        )
 
 if __name__ == "__main__":
     app.launch()