feat: 添加流式支持；教材知识库 Demo

components/ChatMessage.vue

@@ -15,6 +15,10 @@ defineProps({
     default: "tabler:robot-face",
   },
 });
+
+defineEmits<{
+  (e: "select-suggestion", suggestion: string): void;
+}>();
 </script>
 
 <template>
@@ -35,7 +39,7 @@ defineProps({
       <span class="text-sm font-medium">{{ name }}</span>
     </div>
     <div
-      class="rounded-lg bg-white/50 p-2 text-sm dark:bg-neutral-800/50 break-all text-justify"
+      class="rounded-lg bg-white/50 p-3 text-sm dark:bg-neutral-800/50 break-all text-justify"
     >
       <div v-if="message.message" class="prose prose-sm">
         <!-- {{ message.message }} -->
@@ -47,6 +51,24 @@ defineProps({
       </span>
     </div>
   </div>
+  <div v-else-if="message.role === 'suggestion'">
+    <div class="">
+      <ul class="flex flex-col gap-2">
+        <li
+          v-for="suggestion in message.suggestions"
+          class="rounded-lg bg-white/50 p-2 text-xs dark:bg-neutral-800/50 break-all w-fit inline-flex items-center gap-0.5"
+          :key="suggestion"
+          @click="$emit('select-suggestion', suggestion)"
+        >
+          <Icon
+            name="tabler:question-mark"
+            class="text-primary-500 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 text-base"
+          />
+          <span>{{ suggestion }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>