feat: add support for handling and displaying additional file types in the chat interface

Author: liuruibin

ui/src/api/type/application.ts

@@ -72,6 +72,7 @@ interface chatType {
     document_list: Array<any>
     image_list: Array<any>
     audio_list: Array<any>
+    other_list: Array<any>
   }
 }
 

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

@@ -125,6 +125,28 @@
                             </template>
                           </el-space>
                         </div>
+                        <div v-if="item.other_list?.length > 0">
+                          <p class="mb-8 color-secondary">
+                            {{ $t('common.fileUpload.document') }}:
+                          </p>
+
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.other_list" :key="i">
+                              <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>
                     </div>
                   </template>

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

@@ -60,6 +60,26 @@
             </template>
           </el-space>
         </div>
+        <div class="mb-8" v-if="other_list.length">
+          <el-space wrap class="w-full media-file-width">
+            <template v-for="(item, index) in other_list" :key="index">
+              <el-card shadow="never" style="--el-card-padding: 8px" class="download-file cursor">
+                <div class="download-button flex align-center" @click="downloadFile(item)">
+                  <el-icon class="mr-4">
+                    <Download />
+                  </el-icon>
+                  {{ $t('chat.download') }}
+                </div>
+                <div class="show flex align-center">
+                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
+                    {{ item && item?.name }}
+                  </div>
+                </div>
+              </el-card>
+            </template>
+          </el-space>
+        </div>
         <span> {{ chatRecord.problem_text }}</span>
       </div>
     </div>
@@ -121,6 +141,15 @@ const audio_list = computed(() => {
   )
   return startNode?.audio_list || []
 })
+const other_list = computed(() => {
+  if (props.chatRecord?.upload_meta) {
+    return props.chatRecord.upload_meta?.other_list || []
+  }
+  const startNode = props.chatRecord.execution_details?.find(
+    (detail) => detail.type === 'start-node'
+  )
+  return startNode?.other_list || []
+})
 
 function downloadFile(item: any) {
   downloadByURL(item.url, item.name)

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

@@ -424,7 +424,9 @@ function chatMessage(chat?: any, problem?: string, re_chat?: boolean, other_para
             ? other_params_data.document_list
             : [],
         audio_list:
-          other_params_data && other_params_data.audio_list ? other_params_data.audio_list : []
+          other_params_data && other_params_data.audio_list ? other_params_data.audio_list : [],
+        other_list:
+          other_params_data && other_params_data.other_list ? other_params_data.other_list : []
       }
     })
     chatList.value.push(chat)