feat(frontend.chat): thread preview and single active thread

frontend/src/components/Message.vue

@@ -97,9 +97,18 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
     </template>
 
     <template v-if="message.type == 'thread-header'">
-      <div class="content">
-        Thread {{message.threadId}} ({{message.messageCount}} messages)
-        <a href="#" @click.prevent="$emit('toggleThread', message.threadId, !message.expanded)">{{message.expanded ? "Hide" : "Show"}}</a>
+      <div class="thread-header"
+        :class="{ 'thread-active': message.active }"
+        @click="!message.active && message.threadId != null && $emit('open-thread', message.threadId)"
+      >
+        <div class="thread-title">
+          {{ message.threadId == null ? 'New Thread' : `Thread ${message.threadId}` }}
+          <span v-if="message.messageCount" class="thread-count">({{ message.messageCount }} messages)</span>
+        </div>
+        <div v-if="message.preview" class="thread-preview">
+          <span class="thread-preview-sender">{{ message.preview.sender }}:</span>
+          {{ message.preview.content }}
+        </div>
       </div>
     </template>
 
@@ -182,4 +191,59 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
 .resource .content {
   font-family: monospace;
 }
+
+.thread-header {
+  align-self: center;
+  width: fit-content;
+  max-width: 40em;
+  padding: 5px 16px;
+  border-radius: 12px;
+  border: 1px dashed var(--color-border);
+  background-color: var(--color-background-soft);
+  font-size: 80%;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.thread-header:hover {
+  border-style: solid;
+}
+
+.thread-header .thread-title {
+  font-weight: bold;
+  opacity: 70%;
+}
+
+.thread-header .thread-count {
+  font-weight: normal;
+  opacity: 80%;
+}
+
+.thread-header .thread-preview {
+  font-style: italic;
+  opacity: 60%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.thread-header .thread-preview-sender {
+  font-style: normal;
+  font-weight: bold;
+}
+
+.thread-header.thread-active {
+  border-style: solid;
+  cursor: default;
+}
+
+.thread-header.thread-active .thread-title {
+  opacity: 100%;
+}
+
+.thread-header:hover {
+  border-style: solid;
+}
 </style>