fix(chat): truncate log message size

frontend/src/components/Message.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { marked } from "marked";
 import * as backend from '../backend';
 marked.use({
@@ -24,6 +24,10 @@ const props = defineProps({
   cancellable: {
     type: Boolean,
     required: false,
+  },
+  logExpanded: {
+    type: Boolean,
+    required: false,
   }
 });
 
@@ -49,6 +53,23 @@ function resourceLabel(msg) {
 const format = ref(null);
 const content = ref("");
 
+// Log messages longer than LOG_MAX_LINES lines get expand/collapse controls
+const LOG_MAX_LINES = 6;
+const LOG_MAX_LENGTH = 64; // Single line size considered "too tall" to display
+
+const logLines = computed(() => String(content.value ?? '').split('\n'));
+const logLong = computed(() => props.message.type == 'log' && (
+  logLines.value.length > LOG_MAX_LINES || logLines.value.some(line => line.length > LOG_MAX_LENGTH)
+));
+const logContent = computed(() =>
+  logLong.value && !props.logExpanded
+    ? logLines.value.slice(0, LOG_MAX_LINES).join('\n').slice(0, LOG_MAX_LENGTH*LOG_MAX_LINES)
+    : content.value
+);
+
+// Given to the context menu; the expand/collapse entry is offered only when non-null
+const logMeta = computed(() => logLong.value ? {expanded: !!props.logExpanded} : null);
+
 let currentStreamId = null;
 
 watch(() => [props.message.format, props.message.content], ([newFormat, newContent]) => {
@@ -73,7 +94,7 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
 </script>
 
 <template>
-  <div :class="chatEntryClass(message)" @contextmenu.prevent="$emit('open-menu', message)">
+  <div :class="chatEntryClass(message)" @contextmenu.prevent="$emit('open-menu', message, logMeta)">
     <template v-if="message.type == 'message' || message.type == null">
       <div v-if="message.sender != 'user'" class="sender">{{message.sender}}</div>
 
@@ -93,7 +114,8 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
 
     <template v-if="message.type == 'log'">
       <div class="log-sender">{{message.sender}}<span v-if="message.subkind"> [{{message.subkind}}]</span></div>
-      <div class="content">{{content}}</div>
+      <div class="content">{{logContent}}</div>
+      <a v-if="logLong" class="log-toggle" @click.prevent="$emit('toggle-log')">{{logExpanded ? '(collapse)' : '(expand)'}}</a>
     </template>
 
     <template v-if="message.type == 'thread-header'">
@@ -169,6 +191,12 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
   font-weight: bold;
   font-size: 80%;
 }
+.message.log .log-toggle {
+  font-family: monospace;
+  font-size: 80%;
+  cursor: pointer;
+  user-select: none;
+}
 
 .resource {
   align-self: center;
@@ -246,4 +274,4 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
 .thread-header:hover {
   border-style: solid;
 }
-</style>
+</style>