added small dot for speech bubble

app.py

@@ -9,13 +9,18 @@ theme = gr.themes.Monochrome(
 css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap);.gradio-container{" \
       "background-color:#cda678;font-family:Silkscreen;position:relative}.secondary.svelte-58yet2," \
       ".tabitem{background-color:#002366}#component-1{min-height:75vh}#component-4{" \
-      "margin-top:auto}.tabs.svelte-btpldm{height:100%}.tabitem{border:1px solid #fff}#component-9{" \
-      "min-height:70vh;max-height:70vh}#component-10,#component-11,#component-18,#component-19,#component-26," \
-      "#component-27,#component-34,#component-35,#component-42,#component-43,.wrap.svelte-a99nd8{" \
-      "background-color:#aaa}.message.svelte-a99nd8.svelte-a99nd8{padding:15px}.bot.svelte-a99nd8.svelte-a99nd8{" \
-      "padding-left:15px}textarea{background-color:#fff}#component-48,#component-51{" \
-      "position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(" \
-      "-50%);width:50%;height:50vh;padding:80px 20px 20px;background-color:#fff;border:1px solid " \
+      "margin-top:auto}.tabs.svelte-btpldm{height:100%}.tabitem{border:1px solid #fff}#component-17,#component-25," \
+      "#component-33,#component-41,#component-9{min-height:70vh;max-height:70vh}#component-10,#component-11," \
+      "#component-18,#component-19,#component-26,#component-27,#component-34,#component-35,#component-42," \
+      "#component-43{background-color:#aaa}.message.svelte-a99nd8.svelte-a99nd8{" \
+      "padding:15px;position:relative}.user.svelte-a99nd8.svelte-a99nd8{" \
+      "margin-right:10px}.bot.svelte-a99nd8.svelte-a99nd8{" \
+      "padding-left:15px;margin-left:10px}.bot.svelte-a99nd8.svelte-a99nd8:before," \
+      ".user.svelte-a99nd8.svelte-a99nd8:after{" \
+      "content:"";width:10px;height:10px;position:absolute;bottom:0;background-color:#fff}.bot.svelte-a99nd8.svelte" \
+      "-a99nd8:before{left:-10px}.user.svelte-a99nd8.svelte-a99nd8:after{right:-10px}textarea{" \
+      "background-color:#fff}#component-48,#component-51{position:absolute;left:50%;top:50%;transform:translateX(" \
+      "-50%) translateY(-50%);width:50%;height:50vh;padding:80px 20px 20px;background-color:#fff;border:1px solid " \
       "#002366}#component-49{position:initial}#component-50,#component-62{" \
       "position:absolute;top:20px;right:20px;width:44px;height:44px;min-width:44px;min-height:44px}"
 

style.css

@@ -23,7 +23,7 @@
     border: 1px solid #fff;
 }
 
-#component-9 {
+#component-9, #component-17, #component-25, #component-33, #component-41 {
     min-height: 70vh;
     max-height: 70vh;
 }
@@ -33,16 +33,39 @@
 }
 
 #component-10, #component-11, #component-18, #component-19, #component-26, #component-27, #component-34, #component-35,
-    #component-42, #component-43, .wrap.svelte-a99nd8 {
+    #component-42, #component-43 {
     background-color: #aaa;
 }
 
 .message.svelte-a99nd8.svelte-a99nd8 {
     padding: 15px;
+    position: relative;
+}
+
+.user.svelte-a99nd8.svelte-a99nd8 {
+    margin-right: 10px;
 }
 
 .bot.svelte-a99nd8.svelte-a99nd8 {
     padding-left: 15px;
+    margin-left: 10px;
+}
+
+.bot.svelte-a99nd8.svelte-a99nd8:before, .user.svelte-a99nd8.svelte-a99nd8:after {
+    content: "";
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    bottom: 0;
+    background-color: #fff;
+}
+
+.bot.svelte-a99nd8.svelte-a99nd8:before {
+    left: -10px;
+}
+
+.user.svelte-a99nd8.svelte-a99nd8:after {
+    right: -10px;
 }
 
 textarea {