feat: chat stream messages

frontend/src/components/Message.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ref, watch } from 'vue';
 import { marked } from "marked";
+import * as backend from '../backend';
 marked.use({
   renderer: {
     code (code, infostring, escaped) {
@@ -36,6 +38,31 @@ function chatEntryClass(msg) {
     return ['info'];
   }
 }
+
+const format = ref(null);
+const content = ref("");
+
+let currentStreamId = null;
+
+watch(() => [props.message.format, props.message.content], ([newFormat, newContent]) => {
+  // TODO: if format.startsWith("stream:")
+  if (newFormat == "stream") {
+    format.value = null;
+    currentStreamId = parseInt(newContent);
+
+    let stream = backend.readStream(currentStreamId);
+    stream.on('data', (chunk) => {
+      if (stream.id == currentStreamId) {
+        content.value = stream.partialContent;
+      }
+    });
+  } else {
+    format.value = newFormat;
+    content.value = newContent;
+    currentStreamId = null;
+  }
+}, {immediate: true})
+
 </script>
 
 <template>
@@ -43,18 +70,18 @@ function chatEntryClass(msg) {
     <template v-if="message.type == 'message' || message.type == null">
       <div v-if="message.sender != 'user'" class="sender">{{message.sender}}</div>
 
-      <div v-if="message.format == 'markdown'" v-html="marked.parse(message.content)" class="content"></div>
-      <div v-else class="content">{{message.content}}</div>
+      <div v-if="format == 'markdown'" v-html="marked.parse(message.content)" class="content"></div>
+      <div v-else class="content">{{content}}</div>
     </template>
 
     <template v-if="message.type == 'note'">
       <div class="sender">{{message.sender}}</div>
-      <div class="content">{{message.content}}</div>
+      <div class="content">{{content}}</div>
     </template>
 
     <template v-if="message.type == 'log'">
       <div class="sender">Log ({{message.sender}})</div>
-      <div class="content">{{message.content}}</div>
+      <div class="content">{{content}}</div>
     </template>
 
     <template v-if="message.type == 'thread-header'">