Skip to content

perf: upload file count(#2029) #2061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Jan 21, 2025
Merged

perf: upload file count(#2029) #2061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 44 additions & 14 deletions ui/src/components/ai-chat/component/chat-input-operate/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,22 @@
uploadVideoList.length
"
>
<el-space wrap>
<template v-for="(item, index) in uploadDocumentList" :key="index">
<el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
<el-row :gutter="10">
<el-col
v-for="(item, index) in uploadDocumentList"
:key="index"
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb-8"
>
<el-card
shadow="never"
style="--el-card-padding: 8px; max-width: 100%"
class="file cursor"
>
<div
class="flex align-center"
@mouseenter.stop="mouseenter(item)"
Expand All @@ -32,13 +45,22 @@
</el-icon>
</div>
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis" style="max-width: 160px" :title="item && item?.name">
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
</el-card>
</template>
<template v-for="(item, index) in uploadImageList" :key="index">
</el-col>
<el-col
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb-8"
v-for="(item, index) in uploadImageList"
:key="index"
>
<div
class="file cursor border border-r-4"
v-if="item.url"
Expand All @@ -62,8 +84,17 @@
class="border-r-4"
/>
</div>
</template>
<template v-for="(item, index) in uploadAudioList" :key="index">
</el-col>
<el-col
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb-8"
v-for="(item, index) in uploadAudioList"
:key="index"
>
<el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
<div
class="flex align-center"
Expand All @@ -80,13 +111,13 @@
</el-icon>
</div>
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis" style="max-width: 160px" :title="item && item?.name">
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
</el-card>
</template>
</el-space>
</el-col>
</el-row>
</div>
</el-scrollbar>
<div class="flex">
Expand Down Expand Up @@ -119,8 +150,7 @@
<el-tooltip effect="dark" placement="top" popper-class="upload-tooltip-width">
<template #content>
<div class="break-all pre-wrap">
{{ $t('chat.uploadFile.label') }}：{{
$t('chat.uploadFile.most')
{{ $t('chat.uploadFile.label') }}：{{ $t('chat.uploadFile.most')
}}{{ props.applicationDetails.file_upload_setting.maxFiles
}}{{ $t('chat.uploadFile.limit') }}
{{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />{{
Expand Down Expand Up @@ -191,7 +221,7 @@ import { t } from '@/locales'
const router = useRouter()
const route = useRoute()
const {
query: { mode, question },
query: { mode, question }
} = route as any
const quickInputRef = ref()
const props = withDefaults(
Copy link
Contributor

@shaohuzhang1 shaohuzhang1 Jan 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The HTML template you've provided contains some elements that need adjustment for better readability and responsiveness. Here are my suggestions:

  1. Use Consistent Column Layout:

    • The use of el-row and el-col is consistent but lacks proper column widths for screens larger than desktop.

  2. Optimize Image Loading:

    • Ensure images are loaded efficiently by setting a default width or using CSS to limit image size before loading them.

  3. Code Formatting:

    • There's minor indentation issues in some parts. Make sure code blocks are consistently indented if necessary.

  4. Responsive Design Considerations:

    • Use Bootstrap grid system classes (col-*) instead of custom styles like :xs, :sm, etc., for more flexibility.

This adjusted version should improve both the look and performance of the component:

@@ -2,6 +2,6 @@
           <span>Upload Files ({uploadVideoList.length} &gt;/ ${props.applicationDetails.file_upload_setting.maxFiles})</span>
         ">
        <el-card shadow="never" style="--el-card-padding: 8px;" class="file cursor">...</el-card>, 
-      </span>
-    </el-scrollbar>
+    </el-scrollbar></div>

<div class="flex">

Remember to review specific styling needs based on your design requirements, especially if you aim for responsiveness across different device sizes.

Expand Down
57 changes: 40 additions & 17 deletions ui/src/components/ai-chat/component/question-content/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,17 @@
<div class="content">
<div class="text break-all pre-wrap">
<div class="mb-8" v-if="document_list.length">
<el-space wrap>
<template v-for="(item, index) in document_list" :key="index">
<el-row :gutter="10">
<el-col
v-for="(item, index) in document_list"
:key="index"
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb-8 w-full"
>
<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">
Expand All @@ -27,17 +36,26 @@
</div>
<div class="show flex align-center">
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis" style="max-width: 150px" :title="item && item?.name">
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
</el-card>
</template>
</el-space>
</el-col>
</el-row>
</div>
<div class="mb-8" v-if="image_list.length">
<el-space wrap>
<template v-for="(item, index) in image_list" :key="index">
<el-row :gutter="10">
<el-col
v-for="(item, index) in image_list"
:key="index"
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb-8"
>
<div class="file cursor border-r-4" v-if="item.url">
<el-image
:src="item.url"
Expand All @@ -52,12 +70,21 @@
class="border-r-4"
/>
</div>
</template>
</el-space>
</el-col>
</el-row>
</div>
<div class="mb-8" v-if="audio_list.length">
<el-space wrap>
<template v-for="(item, index) in audio_list" :key="index">
<el-row :gutter="10">
<el-col
v-for="(item, index) in audio_list"
:key="index"
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb-8"
>
<div class="file cursor border-r-4" v-if="item.url">
<audio
:src="item.url"
Expand All @@ -66,8 +93,8 @@
class="border-r-4"
/>
</div>
</template>
</el-space>
</el-col>
</el-row>
</div>
{{ chatRecord.problem_text }}
</div>
Expand Down Expand Up @@ -119,7 +146,6 @@ onMounted(() => {})
</script>
<style lang="scss" scoped>
.download-file {
width: 200px;
height: 43px;

&:hover {
Expand All @@ -137,9 +163,6 @@ onMounted(() => {})
}
}

.show {
display: block;
}

.download-button {
display: none;
Copy link
Contributor

@shaohuzhang1 shaohuzhang1 Jan 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are several issues and optimizations in the provided code snippet:

Issues:

  1. Redundant CSS Properties: The width property of .download-file is redundant since Bootstrap's card component already sets default sizes.
  2. Inline Styles in <card>: Inline styles like --el-card-padding, cursor, etc., should be managed through SCSS variables to maintain consistency.
  3. Class Names: Consistent naming convention for classes like download-button can make it easier to manage and extend.

Optimization Suggestions:

  1. Use Bootstrap Components Efficiently: Instead of using custom inline styles, try to leverage Bootstrap cards' built-in features if possible.
  2. Consistent Class Naming: Name components similarly across different blocks of HTML for ease of maintaining.
  3. Reduce Redundancy: Remove unnecessary elements or repeat them where they are not needed.

Improved Code:

<script setup lang="ts">
// Your existing scripts here
</script>

<template>
  <div class="content">
    <div class="text break-all pre-wrap">
      <div class="mb-8" v-if="document_list.length">
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in document_list"
            :key="index"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            class="mb-8 w-full"
          >
            <el-card shadow="never" class="download-file cursor">
              <div class="flex align-center download-button" @click="downloadFile(item)">
                <!-- Custom icon goes here -->
                <i class="fa fa-download"></i> Download File <!-- Add appropriate fontawesome icon -->
              </div>
              <div class="flex align-center show ml-4 el-ellipsis-1" title="File Name">
                {{ item && item.name }}
              </ div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="mb-8" v-if="image_list.length">
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in image_list"
            :key="index"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            class="mb-8"
          >
            <template v-if="item.url">
              <div class="file cursor border-r-4">
                <el-image :src="item.url" lazy fit="cover" width="150px"></el-image>
              </div>
            </template>
          </el-col>
        </el-row>
      </div>
      <div class="mb-8" v-if="audio_list.length">
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in audio_list"
            :key="index"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            class="mb-8"
          >
            <template v-if="item.url">
              <div class="file cursor border-r-4">
                <audio controls :src="item.url" preload></audio>
              </div>
            </template>
          </el-col>
        </el-row>
      </div>
      {{ chatRecord.problem_text }}
    </div>
    <!-- Other components remain unchanged -->
  </div>
</template>

<style lang="scss" scoped>
.download-file {
  padding: 8px; /* Set consistent padding */
}

.download-button,
.show {
  cursor: pointer;
}
</style>

This version removes duplicate properties, improves use of Bootstrap components, maintains a more structured layout with rows and columns, and uses consistent class names across similar structures for better maintainability.

Expand Down
Loading