feat: Multi channel recall execution details optimize style

Author: wangdan-fit2cloud

ui/src/components/ai-chat/ExecutionDetailDialog.vue

@@ -147,7 +147,11 @@
                             )"
                             :key="paragraphIndex"
                           >
-                            <ParagraphCard :data="paragraph" :index="paragraphIndex" />
+                            <ParagraphCard
+                              :data="paragraph"
+                              :content="paragraph.content"
+                              :index="paragraphIndex"
+                            />
                           </template>
                         </template>
                         <template v-else> -</template>
@@ -423,17 +427,11 @@
                             v-for="(paragraph, paragraphIndex) in item.document_list"
                             :key="paragraphIndex"
                           >
-                            <CardBox shadow="never" title="" class="cursor mb-8" :showIcon="false">
-                              <template #description>
-                                <el-scrollbar max-height="150">
-                                  <MdPreview
-                                    ref="editorRef"
-                                    editorId="preview-only"
-                                    :modelValue="paragraph.page_content"
-                                  />
-                                </el-scrollbar>
-                              </template>
-                            </CardBox>
+                            <ParagraphCard
+                              :data="paragraph.metadata"
+                              :content="paragraph.page_content"
+                              :index="paragraphIndex"
+                            />
                           </template>
                         </template>
                         <template v-else> -</template>
@@ -449,27 +447,11 @@
                             v-for="(paragraph, paragraphIndex) in item.result_list"
                             :key="paragraphIndex"
                           >
-                            <CardBox
-                              shadow="never"
-                              :title="`${$t('chat.executionDetails.paragraph')}${paragraphIndex + 1}`"
-                              class="paragraph-source-card cursor mb-8 paragraph-source-card-height"
-                              :showIcon="false"
-                            >
-                              <div class="active-button primary">
-                                {{ paragraph.metadata.relevance_score?.toFixed(3) }}
-                              </div>
-                              <template #description>
-                                <div class="mt-8">
-                                  <el-scrollbar height="150">
-                                    <MdPreview
-                                      ref="editorRef"
-                                      editorId="preview-only"
-                                      :modelValue="paragraph.page_content"
-                                    />
-                                  </el-scrollbar>
-                                </div>
-                              </template>
-                            </CardBox>
+                            <ParagraphCard
+                              :data="paragraph.metadata"
+                              :content="paragraph.page_content"
+                              :index="paragraphIndex"
+                            />
                           </template>
                         </template>
                         <template v-else> -</template>

ui/src/components/ai-chat/ParagraphSourceDialog.vue

@@ -22,7 +22,7 @@
             <el-form-item :label="$t('chat.KnowledgeSource.referenceParagraph')">
               <div v-if="detail.paragraph_list.length > 0" class="w-full">
                 <template v-for="(item, index) in detail.paragraph_list" :key="index">
-                  <ParagraphCard :data="item" :index="index" />
+                  <ParagraphCard :data="item" :content="item.content" :index="index" />
                 </template>
               </div>
               <span v-else> - </span>
@@ -79,7 +79,6 @@ defineExpose({ open })
 @media only screen and (max-width: 768px) {
   .paragraph-source {
     width: 90% !important;
- 
   }
 }
 </style>

ui/src/components/ai-chat/component/ParagraphCard.vue

@@ -12,7 +12,7 @@
     <div class="active-button primary">{{ data.similarity?.toFixed(3) }}</div>
     <template #description>
       <el-scrollbar height="150">
-        <MdPreview ref="editorRef" editorId="preview-only" :modelValue="data.content" />
+        <MdPreview ref="editorRef" editorId="preview-only" :modelValue="content" noImgZoomIn/>
       </el-scrollbar>
     </template>
     <template #footer>
@@ -62,6 +62,10 @@ const props = defineProps({
     type: Object,
     default: () => {}
   },
+  content: {
+    type: String,
+    default: ''
+  },
   index: {
     type: Number,
     default: 0

ui/src/components/card-box/index.vue

@@ -2,13 +2,13 @@
   <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
     <div class="card-header">
       <slot name="header">
-        <div class="title flex" :class="$slots.subTitle ? '' : 'align-center'">
+        <div class="title flex align-center" :class="$slots.subTitle?'mt-4':''">
           <slot name="icon">
             <AppAvatar v-if="showIcon" class="mr-12 avatar-blue" shape="square" :size="32">
               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
             </AppAvatar>
           </slot>
-          <div style="width: 90%;margin-top: -5px;">
+          <div style="width: 90%;">
             <auto-tooltip :content="title" style="width: 65%; height: 22px">
               {{ title }}
             </auto-tooltip>

ui/src/styles/app.scss

@@ -495,7 +495,7 @@ h5 {
 }
 
 .avatar-light {
-  background: var(--el-color-primary-light-4);
+  background: var(--el-color-primary-light-3);
 }
 
 .avatar-purple {