added hidden user placeholder

Chat.go

@@ -177,6 +177,13 @@ func generateChatHTML(c *fiber.Ctx) string {
 		}
 	}
 
+	out, err := messageUserPlaceholderTmpl.Execute(pongo2.Context{})
+	if err != nil {
+		fmt.Println("Error executing message user placeholder template")
+		panic(err)
+	}
+	htmlString += out
+
 	htmlString += "</div></div>"
 
 	// Render the HTML template with the messages

main.go

@@ -16,19 +16,20 @@ import (
 )
 
 var (
-	userTmpl                *pongo2.Template
+	userTmpl                   *pongo2.Template
-	botTmpl                 *pongo2.Template
+	botTmpl                    *pongo2.Template
-	selectBtnTmpl           *pongo2.Template
+	selectBtnTmpl              *pongo2.Template
-	modelPopoverTmpl        *pongo2.Template
+	modelPopoverTmpl           *pongo2.Template
-	usagePopoverTmpl        *pongo2.Template
+	usagePopoverTmpl           *pongo2.Template
-	settingPopoverTmpl      *pongo2.Template
+	settingPopoverTmpl         *pongo2.Template
-	messageEditTmpl         *pongo2.Template
+	messageEditTmpl            *pongo2.Template
-	conversationPopoverTmpl *pongo2.Template
+	conversationPopoverTmpl    *pongo2.Template
-	welcomeChatTmpl         *pongo2.Template
+	welcomeChatTmpl            *pongo2.Template
-	chatInputTmpl           *pongo2.Template
+	chatInputTmpl              *pongo2.Template
-	explainLLMconvChatTmpl  *pongo2.Template
+	explainLLMconvChatTmpl     *pongo2.Template
-	clients                 = make(map[chan SSE]bool)
+	messageUserPlaceholderTmpl *pongo2.Template
-	mu                      sync.Mutex
+	clients                    = make(map[chan SSE]bool)
+	mu                         sync.Mutex
 )
 
 // SSE event structure
@@ -62,6 +63,7 @@ func main() {
 	welcomeChatTmpl = pongo2.Must(pongo2.FromFile("views/partials/welcome-chat.html"))
 	chatInputTmpl = pongo2.Must(pongo2.FromFile("views/partials/chat-input.html"))
 	explainLLMconvChatTmpl = pongo2.Must(pongo2.FromFile("views/partials/explain-llm-conv-chat.html"))
+	messageUserPlaceholderTmpl = pongo2.Must(pongo2.FromFile("views/partials/message-user-placeholder.html"))
 
 	// Import HTML using django engine/template
 	engine := django.New("./views", ".html")
@@ -136,7 +138,7 @@ func main() {
 		c.Set("Cache-Control", "no-cache")
 		c.Set("Connection", "keep-alive")
 
-		events := make(chan SSE, 100)
+		events := make(chan SSE, 500)
 		mu.Lock()
 		clients[events] = true
 		mu.Unlock()

views/partials/message-user-placeholder.html

@@ -0,0 +1,30 @@
+<div class="message-user mt-3 is-hidden" id="msg-placeholder">
+    <div class="columns is-mobile">
+        <div class="column is-narrow" id="icon-column">
+            <figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
+                <img src="icons/bouvai2.png" alt="User Image">
+            </figure>
+        </div>
+
+        <div class="column" id="content-column" style="width: 100px;">
+            <div class="is-flex is-align-items-start">
+                <div class="message-content" style="width: 100%; overflow-y: hidden;">
+                    <div class="message-header">
+                        <p>
+                            You
+                        </p>
+                    </div>
+                    <div class="message-body">
+                        <div class="content" style="overflow-x: auto; width: 100%;" id="content-placeholder">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // When receiving the SSE event 
+</script>

views/partials/popover-usage.html

@@ -9,7 +9,7 @@
         <div class="dropdown-content">
             <div class="dropdown-item">
                 <!-- Placeholder for additional text -->
-                <div class="content" style="max-height: 30vh; overflow-y: auto;">
+                <div class="content" id="usage-content" style="max-height: 30vh; overflow-y: auto;">
                     <table class="table is-narrow is-fullwidth is-striped">
                         <tbody>
                             {% for usage in usages %}
@@ -128,4 +128,18 @@
         white-space: nowrap;
         /* Prevent the text from wrapping */
     }
+
+    /* For Webkit-based browsers (Chrome, Safari) */
+    #usage-content::-webkit-scrollbar {
+        width: 0;
+        background: transparent;
+    }
+
+    /* For IE, Edge and Firefox */
+    #usage-content {
+        scrollbar-width: none;
+        /* Firefox */
+        -ms-overflow-style: none;
+        /* IE and Edge */
+    }
 </style>