feat: tts语音生成

web/src/views/CommunityView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SelectGroupOption, SelectOption } from "naive-ui";
+import type { Message } from "@/interfaces";
 import { throttle } from "lodash-es";
 import AIAvatar from "@/assets/ai_avatar.png";
 import {
@@ -25,17 +26,18 @@ const scrollbarRef = ref<HTMLElement | null>(null);
 const options = ref<Array<SelectGroupOption | SelectOption>>([]);
 // NCollapse 组件的折叠状态
 const collapseActive = ref<string[]>(
-  historyMessages.value.map((_, idx) => String(idx))
+  historyMessages.value.map((msg, idx) => String(msg.id ?? idx))
 );
 
-const getName = (idx: number) => String(idx);
+const getName = (msg: Message, idx: number) => String(msg.id ?? idx);
 
+// TODO: bugfix: 未能正确展开
 watch(
   historyMessages,
   (newVal, oldVal) => {
     // 取所有name
-    const newNames = newVal.map((_, idx) => getName(idx));
-    const oldNames = oldVal ? oldVal.map((_, idx) => getName(idx)) : [];
+    const newNames = newVal.map((msg, idx) => getName(msg, idx));
+    const oldNames = oldVal ? oldVal.map((msg, idx) => getName(msg, idx)) : [];
     // 找出新增的name
     const addedNames = newNames.filter((name) => !oldNames.includes(name));
     // 保留原有已展开项
@@ -45,9 +47,10 @@ watch(
     // 新增的默认展开
     collapseActive.value = [...currentActive, ...addedNames];
   },
-  { deep: true }
+  { immediate: true, deep: true }
 );
 
+// 处理折叠项的点击事件，切换折叠状态
 const handleItemHeaderClick = (name: string) => {
   if (collapseActive.value.includes(name)) {
     collapseActive.value = collapseActive.value.filter((n) => n !== name);
@@ -177,9 +180,15 @@ onMounted(() => {
               :expanded-names="collapseActive[idx]"
             >
               <NCollapseItem
-                :title="thinking && idx === historyMessages.length - 1 ? '思考中...' : '已深度思考'"
-                :name="getName(idx)"
-                @item-header-click="() => handleItemHeaderClick(getName(idx))"
+                :title="
+                  thinking && idx === historyMessages.length - 1
+                    ? '思考中...'
+                    : '已深度思考'
+                "
+                :name="getName(msg, idx)"
+                @item-header-click="
+                  () => handleItemHeaderClick(getName(msg, idx))
+                "
               >
                 <div
                   class="text-[#7A7A7A] mb-4 border-l-2 border-[#E5E5E5] ml-2 pl-2"
@@ -190,6 +199,9 @@ onMounted(() => {
             </NCollapse>
             <!-- 内容↓ 思维链↑ -->
             <markdown :content="msg.content || ''" />
+            <div v-if="msg.role !== 'user'" class="mt-2">
+              <tts :text="msg.content || ''" :message-id="msg.id!" />
+            </div>
             <NDivider />
           </div>
         </div>