feat: 自定义列表

Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue

@@ -2,7 +2,6 @@
 <script setup lang="ts">
 import type { AnyObject } from 'typescript-api-pro';
 import type { BubbleProps } from 'vue-element-plus-x/types/Bubble';
-import type { BubbleListInstance } from 'vue-element-plus-x/types/BubbleList';
 import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
 import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
 import { ArrowLeftBold, ArrowRightBold, Document, Loading } from '@element-plus/icons-vue';
@@ -14,6 +13,7 @@ import { useRoute } from 'vue-router';
 import { send } from '@/api';
 import ModelSelect from '@/components/ModelSelect/index.vue';
 import YMarkdown from '@/vue-element-plus-y/components/XMarkdown/index.vue';
+import ChatMessageList from '@/components/ChatMessageList/index.vue';
 import { useGuideTourStore } from '@/stores';
 import { useChatStore } from '@/stores/modules/chat';
 import { useFilesStore } from '@/stores/modules/files';
@@ -50,7 +50,7 @@ const avatar = computed(() => {
 const inputValue = ref('');
 const senderRef = ref<InstanceType<typeof Sender> | null>(null);
 const bubbleItems = ref<MessageItem[]>([]);
-const bubbleListRef = ref<BubbleListInstance | null>(null);
+const bubbleListRef = ref<InstanceType<typeof ChatMessageList> | null>(null);
 const isSending = ref(false);
 
 const { stream, loading: isLoading, cancel } = useHookFetch({
@@ -446,7 +446,7 @@ function handleImagePreview(url: string) {
 <template>
   <div class="chat-with-id-container">
     <div class="chat-warp">
-      <BubbleList ref="bubbleListRef" :list="bubbleItems" max-height="calc(100vh - 240px)">
+      <ChatMessageList ref="bubbleListRef" :list="bubbleItems" max-height="calc(100vh - 240px)">
         <template #header="{ item }">
           <Thinking
             v-if="item.reasoning_content" v-model="item.thinlCollapse" :content="item.reasoning_content"
@@ -503,7 +503,7 @@ function handleImagePreview(url: string) {
             </div>
           </div>
         </template>
-      </BubbleList>
+      </ChatMessageList>
 
       <Sender
         ref="senderRef" v-model="inputValue" class="chat-defaul-sender" data-tour="chat-sender" :auto-size="{
@@ -577,10 +577,10 @@ function handleImagePreview(url: string) {
     }
   }
   :deep() {
-    .el-bubble-list {
+    .chat-message-list {
       padding-top: 24px;
     }
-    .el-bubble {
+    .chat-message-item {
       padding: 0 12px;
       padding-bottom: 24px;
     }