feat: 完善对话上传文档功能

Author: wangdan-fit2cloud

ui/src/api/type/application.ts

@@ -41,6 +41,7 @@ interface chatType {
   vote_status: string
   status?: number,
   execution_details: any[]
+  upload_meta?: any[]
 }
 
 export class ChatRecordManage {

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

@@ -50,21 +50,48 @@
                     <div class="card-never border-r-4">
                       <h5 class="p-8-12">参数输入</h5>
                       <div class="p-8-12 border-t-dashed lighter">
-                        <div>用户问题: {{ item.question || '-' }}</div>
-                        <div v-for="(f, i) in item.global_fields" :key="i">
-                          {{ f.label }}: {{ f.value }}
+                        <div class="mb-8">
+                          <span class="color-secondary">用户问题:</span>
+                          {{ item.question || '-' }}
+                        </div>
+                        <div v-for="(f, i) in item.global_fields" :key="i" class="mb-8">
+                          <span class="color-secondary">{{ f.label }}:</span> {{ f.value }}
                         </div>
                         <div v-if="item.document_list?.length > 0">
-                          上传的文档:
-                          <div v-for="(f, i) in item.document_list" :key="i">
-                            {{ f.name }}
-                          </div>
+                          <p class="mb-8 color-secondary">上传的文档:</p>
+
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.document_list" :key="i">
+                              {{ f.name }}
+                              <el-card
+                                shadow="never"
+                                style="--el-card-padding: 8px"
+                                class="file cursor"
+                              >
+                                <div class="flex align-center">
+                                  <img :src="getImgUrl(f && f?.name)" alt="" width="24" />
+                                  <div class="ml-4 ellipsis" :title="f && f?.name">
+                                    {{ f && f?.name }}
+                                  </div>
+                                </div>
+                              </el-card>
+                            </template>
+                          </el-space>
                         </div>
                         <div v-if="item.image_list?.length > 0">
-                          上传的图片:
-                          <div v-for="(f, i) in item.image_list" :key="i">
-                            {{ f.name }}
-                          </div>
+                          <p class="mb-8 color-secondary">上传的图片:</p>
+
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.image_list" :key="i">
+                              <el-image
+                                :src="f.url"
+                                alt=""
+                                fit="cover"
+                                style="width: 40px; height: 40px; display: block"
+                                class="border-r-4"
+                              />
+                            </template>
+                          </el-space>
                         </div>
                       </div>
                     </div>
@@ -308,6 +335,7 @@ import ParagraphCard from './component/ParagraphCard.vue'
 import { arraySort } from '@/utils/utils'
 import { iconComponent } from '@/workflow/icons/utils'
 import { WorkflowType } from '@/enums/workflow'
+import { getImgUrl } from '@/utils/utils'
 
 const dialogVisible = ref(false)
 const detail = ref<any[]>([])

ui/src/components/ai-chat/component/chat-input-operate/index.vue

@@ -9,7 +9,7 @@
           v-if="uploadDocumentList.length || uploadImageList.length"
         >
           <el-space wrap>
-            <!-- <template v-for="(item, index) in uploadDocumentList" :key="index">
+            <template v-for="(item, index) in uploadDocumentList" :key="index">
               <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
                 <div
                   class="flex align-center"
@@ -29,7 +29,7 @@
                   </div>
                 </div>
               </el-card>
-            </template> -->
+            </template>
             <template v-for="(item, index) in uploadImageList" :key="index">
               <div
                 class="file cursor border border-r-4"

ui/src/components/ai-chat/component/question-content/index.vue

@@ -32,7 +32,7 @@
         <div class="mb-8" v-if="image_list.length">
           <el-space wrap>
             <template v-for="(item, index) in image_list" :key="index">
-              <div class="file cursor border border-r-4" v-if="item.url">
+              <div class="file cursor border-r-4" v-if="item.url">
                 <el-image
                   :src="item.url"
                   :zoom-rate="1.2"
@@ -62,11 +62,19 @@ const props = defineProps<{
   chatRecord: chatType
 }>()
 const document_list = computed(() => {
-  return []
+  if (props.chatRecord?.upload_meta) {
+    return props.chatRecord.upload_meta?.document_list || []
+  } else if (props.chatRecord.execution_details?.length > 0) {
+    return props.chatRecord.execution_details[0]?.document_list || []
+  } else {
+    return []
+  }
 })
 const image_list = computed(() => {
-  if (props.chatRecord.execution_details?.length > 0) {
-    return props.chatRecord.execution_details[0].image_list
+  if (props.chatRecord?.upload_meta) {
+    return props.chatRecord.upload_meta?.image_list || []
+  } else if (props.chatRecord.execution_details?.length > 0) {
+    return props.chatRecord.execution_details[0]?.image_list || []
   } else {
     return []
   }