Update app.py

app.py

@@ -200,93 +200,43 @@ def init():
     return [{"role": "assistant", "content": WELCOME_MESSAGE_EN}], 0, "", [], False
 
 
-
 with gr.Blocks(css="""
 .send-btn {
   background-color: #25D366 !important;
   color: white !important;
   border: none;
-  border-radius: 20px;
-  font-size: 18px;
-  padding: 6px 12px;
-  height: 42px;
-  width: 52px;
-  margin-left: 6px;
+  border-radius: 24px;
+  font-size: 20px;
+  padding: 8px 20px;
+  height: 48px;
+  width: 60px;
+  margin-left: 8px;
   cursor: pointer;
 }
-#chatbox {
-  max-width: 100% !important;
-  padding: 0 8px !important;
-}
-
 #chatbox .avatar-container {
-    width: 48px !important;
-    height: 48px !important;
-    min-width: 48px !important;
-    min-height: 48px !important;
-    margin-right: 6px !important;
+    width: 64px !important;
+    height: 64px !important;
+    min-width: 64px !important;
+    min-height: 64px !important;
     background-size: 100% 100% !important;
     background-position: center center !important;
     border-radius: 50% !important;
     padding: 0 !important;
+    margin: 0 !important;
     border: none !important;
     box-shadow: none !important;
     background-color: transparent !important;
 }
-#chatbox .message {
-  line-height: 1.4em !important;
-  padding: 4px 8px !important;
-  border-radius: 10px !important;
-  font-size: 15px !important;
-  max-width: 96% !important;
-  word-wrap: break-word !important;
-  word-break: break-word !important;
-  white-space: normal !important;
-  overflow-wrap: break-word !important;
-}
-#chatbox .message.user {
-  background-color: #DCF8C6 !important;
-  text-align: left !important;
-}
-.wrap, .gr-container {
-  max-width: 100vw !important;
-  width: 100vw !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-.gradio-container {
-  padding: 0 !important;
-  margin: 0 !important;
-  width: 100vw !important;
-}
-body, html {
-  margin: 0 !important;
-  padding: 0 !important;
-  width: 100vw !important;
-  overflow-x: hidden !important;
-}
-
-html, body {
-  margin: 0 !important;
-  padding: 0 !important;
-  width: 100vw !important;
-  overflow-x: hidden !important;
-}
-
-.gradio-container, .gr-box, .gr-block.gr-box, .wrap, .gr-container {
-  margin: 0 !important;
-  padding: 0 !important;
-  max-width: 100vw !important;
-  width: 100vw !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
+#chatbox .message.user { background-color: #DCF8C6 !important; }
 #chatbox .message.assistant { background-color: #ffffff !important; }
 footer { display: none !important; }
 .svelte-1ipelgc { display: none !important; }
-.icon-button-wrapper { display: none !important; }
-label.svelte-1to105q { display: none !important; }
+.icon-button-wrapper {
+  display: none !important;
+}
+label.svelte-1to105q {
+  display: none !important;
+}
 """) as demo:
     gr.HTML("""
     <script>