Streaming-Cursor: Block-Cursor-Stil, schnelleres Blinken, korrekte Inline-Positionierung

wwwroot/css/chat.css

@@ -122,17 +122,18 @@
 
 .msg .cursor {
   display: inline-block;
-  width: .125em;
+  width: .55em;
-  height: 1em;
+  height: 1.15em;
   background: var(--text);
-  animation: blink 0.8s infinite;
+  animation: blink .2s step-end infinite;
   vertical-align: text-bottom;
-  margin-left: .125em;
+  margin-left: .15em;
+  border-radius: 1px;
 }
 
 @keyframes blink {
   0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
+  50.1%, 100% { opacity: 0; }
 }
 
 .tool-box {
@@ -502,9 +503,3 @@
   max-height: 60vh;
   overflow: auto;
 }
-
-/* Message-Typ Button */
-
-.cmd-type-message {
-  font-style: italic;
-}

wwwroot/js/ui.js

@@ -121,7 +121,7 @@ let _streamText = '';
 function startStreamBubble() {
   _streamDiv = document.createElement('div');
   _streamDiv.className = 'msg assistant markdown streamed';
-  _streamDiv.innerHTML = '<span class="cursor"></span>';
+  _streamDiv.innerHTML = '<p><span class="cursor"></span></p>';
   _streamText = '';
   chatEl().appendChild(_streamDiv);
   scrollDown();
@@ -131,9 +131,15 @@ function appendToStream(text) {
   if (!_streamDiv) startStreamBubble();
   _streamText += text;
   _streamDiv.innerHTML = renderMarkdown(_streamText);
+  // Cursor ins letzte Inline/Text-Element einfügen, damit er nicht auf eine neue Zeile rutscht
   const cursor = document.createElement('span');
   cursor.className = 'cursor';
-  _streamDiv.appendChild(cursor);
+  const lastBlock = _streamDiv.lastElementChild;
+  if (lastBlock) {
+    lastBlock.appendChild(cursor);
+  } else {
+    _streamDiv.appendChild(cursor);
+  }
   scrollDown();
 }