Update app.py

app.py

@@ -88,5 +88,53 @@ def predict(message,history):
     response = handle_query(message)
     return response
 
-# Create the Gradio interface using ChatInterface
-gr.ChatInterface(predict,title="RedFerns Tech",).launch()
+
+def custom_layout(component):
+  css = '''
+  /* Style the chat container */
+  .gradio-container {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #eee;
+  }
+
+  /* Style the title */
+  .gradio-title {
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  /* Style the chat history */
+  .gradio-chat-history {
+    flex: 1;
+    overflow-y: scroll;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  /* Style the chat message */
+  .gradio-message {
+    margin-bottom: 5px;
+  }
+
+  /* Style the user input field */
+  .gradio-chat-input input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 16px;
+  }
+  '''
+  return gr.components.HTML(css)(component)
+
+# Launch the chat interface with custom layout
+interface = gr.ChatInterface(predict, title="RedFerns Tech", layout=custom_layout)
+interface.launch()
+