feat(streaming): Implement pseudo-streaming

to give the illusion of a continuous stream of text

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

Author: marcelklehr

src/components/ChattyLLM/ConversationBox.vue

@@ -33,10 +33,12 @@
 				@delete="deleteMessage(message.id)" />
 			<Message v-if="streamingMessage"
 				:id="'message-streaming'"
+				:key="'message-streaming'"
 				:message="streamingMessage"
 				:streaming="true" />
 			<LoadingPlaceholder v-else-if="loading.llmGeneration"
 				:id="'message-placeholder'"
+				:key="'message-placeholder'"
 				:slow-pickup="slowPickup" />
 		</div>
 	</div>

src/components/ChattyLLM/Message.vue

@@ -57,7 +57,7 @@
 			<NcDateTime class="message__header__timestamp" :timestamp="new Date((message?.timestamp ?? 0) * 1000)" :ignore-seconds="true" />
 		</div>
 		<NcRichText class="message__content"
-			:text="message.content"
+			:text="streaming ? streamedMessageContent : message.content"
 			:use-markdown="true"
 			:reference-limit="1"
 			:references="references"
@@ -158,6 +158,7 @@ export default {
 			// with [] we inhibit the extract+resolve mechanism on NcRichText
 			// TODO This can be removed (and all the custom extract+resolve logic) when fixed in NcRichText
 			references: [],
+			streamedMessageContent: '',
 		}
 	},
 
@@ -178,6 +179,28 @@ export default {
 		},
 	},
 
+	watch: {
+		// Pseudo streaming
+		async 'message.content'(messageContent, oldMessageContent) {
+			if (!this.streaming) {
+				return
+			}
+			if (oldMessageContent) {
+				this.streamedMessageContent = oldMessageContent
+				messageContent = messageContent.replace(oldMessageContent, '')
+			}
+			let cachedStreamedMessageContent
+			for (const char of messageContent.split('')) {
+				this.streamedMessageContent += char
+				cachedStreamedMessageContent = this.streamedMessageContent
+				await new Promise(resolve => setTimeout(resolve, 5))
+				if (cachedStreamedMessageContent !== this.streamedMessageContent) {
+					break
+				}
+			}
+		},
+	},
+
 	mounted() {
 		this.fetch()
 	},