Tweak cursor, make sources appear after its done streaming

src-ui/src/app/components/chat/chat/chat.component.html

@@ -37,12 +37,11 @@
                 }
               </div>
             } @else if (message.role === 'assistant') {
-              <div class="chat-markdown text-break text-wrap" [innerHTML]="message.content | markdown"></div>
-              @if (message.isStreaming) { <span class="blinking-cursor">|</span> }
+              <div class="chat-markdown text-break text-wrap" [class.streaming]="message.isStreaming" [innerHTML]="message.content | markdown"></div>
             } @else {
               <span class="text-break">{{ message.content }}</span>
             }
-            @if (message.role === 'assistant' && message.references?.length) {
+            @if (message.role === 'assistant' && !message.isStreaming && message.references?.length) {
               <div class="chat-references list-group mt-3">
                 <div class="list-group-item text-muted small py-1" i18n>Sources</div>
                 @for (reference of message.references; track reference.id) {

src-ui/src/app/components/chat/chat/chat.component.scss

@@ -22,18 +22,23 @@
   }
 }
 
-.blinking-cursor {
-  font-weight: bold;
-  font-size: 1.2em;
-  animation: blink 1s step-end infinite;
+.chat-markdown.streaming ::ng-deep {
+  > :last-child:not(ul, ol, table)::after,
+  > :is(ul, ol):last-child > li:last-child::after {
+    content: '';
+    display: inline-block;
+    width: 2px;
+    height: 1.05em;
+    margin-left: 2px;
+    background-color: currentColor;
+    vertical-align: -0.15em;
+    animation: blink 1s step-end infinite;
+  }
 }
 
 @keyframes blink {
-  from, to {
-    opacity: 0;
-  }
   50% {
-    opacity: 1;
+    opacity: 0;
   }
 }
 

src-ui/src/app/components/chat/chat/chat.component.spec.ts

@@ -89,6 +89,7 @@ describe('ChatComponent', () => {
     expect(component.messages()[1].content).toBe('H')
     fixture.detectChanges()
     expect(messagesEl.querySelector('.spinner-border')).toBeNull()
+    expect(messagesEl.querySelector('.chat-markdown.streaming')).not.toBeNull()
     mockStream$.next('Hi there')
     // advance time to process the typewriter effect
     await jest.runAllTimersAsync()
@@ -103,6 +104,8 @@ describe('ChatComponent', () => {
     await fixture.whenStable()
     expect(component.loading()).toBe(false)
     expect(component.messages()[1].isStreaming).toBe(false)
+    fixture.detectChanges()
+    expect(messagesEl.querySelector('.chat-markdown.streaming')).toBeNull()
     expect(fixture.nativeElement.querySelector('#chatInput').disabled).toBe(
       false
     )
@@ -130,6 +133,10 @@ describe('ChatComponent', () => {
     mockStream$.next(
       `Hi there${CHAT_METADATA_DELIMITER}{"references":[{"id":42,"title":"Bread Recipe"}]}`
     )
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('.chat-references')).toBeNull()
+
+    mockStream$.complete()
     jest.advanceTimersByTime(1000)
     fixture.detectChanges()