Skip to content

feat: Adjust file upload and add other file function styles #2944

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
merged 1 commit into from
Apr 22, 2025
Merged

feat: Adjust file upload and add other file function styles #2944

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
9 changes: 3 additions & 6 deletions ui/src/components/markdown/MdRenderer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
<div
v-if="item.type === 'question'"
@click="sendMessage ? sendMessage(item.content, 'new') : (content: string) => {}"
class="problem-button ellipsis-2 mt-4 mb-4"
class="problem-button mt-4 mb-4 flex"
:class="sendMessage ? 'cursor' : 'disabled'"
>
<el-icon>
<el-icon class="mr-8" style="margin-top: 2px;">
<EditPen />
</el-icon>
{{ item.content }}
Expand Down Expand Up @@ -234,12 +234,9 @@ const split_form_rander_ = (source: string, type: string) => {
border: none;
border-radius: 8px;
background: var(--app-layout-bg-color);
height: 46px;
padding: 0 12px;
line-height: 46px;
padding: 12px;
box-sizing: border-box;
color: var(--el-text-color-regular);
-webkit-line-clamp: 1;
word-break: break-all;

&:hover {
Copy link
Contributor

Choose a reason for hiding this comment

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

There appear to be several issues and inconsistencies in the provided code:

  1. Class ellipsis-2: This class is not defined anywhere in the code snippet. It likely refers to an external CSS utility that should have been imported or defined in the component.

  2. Type Annotation for Anonymous Function: In the click event handler, the anonymous function does not use its parameter correctly (content). The parameter name should match the expected input variable (item.content).

  3. HTML Element Changes:

    • The <div> element has had changes made within curly braces without properly formatting them as JSX attributes.
    • The line-height property on .problem-button seems redundant since it matches the default styling of .flex.

  4. Border Styling: There is no need to specify box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.06); since the default button styles typically handle shadows efficiently in frameworks like Element Plus.

  5. CSS Clipping: While -webkit-line-clamp: 1; might not hurt performance compared to overflow: hidden; text-overflow: ellipsis;, both achieve similar results here but with different implications regarding vertical overflow. You can remove either one if you prefer consistency.

Here's a revised version of the code based on these suggestions:

@@ -6,7 +6,7 @@
       v-if="item.type === 'question'"
       @click="
         sendMessage
           ? () => sendMessage(item.content, 'new')
           : () => {}
       "
       class="problem-button mt-4 mb-4 flex"
       :class="sendMessage && !item.disabled ? 'cursor-pointer' : 'disabled'"
     >

If item.disabled is supposed to control whether the button is clickable, ensure it's declared elsewhere and updated appropriately in sendMessage. Also, verify that all necessary imports are available, such as import statement for EditPen from Element Plus or any other relevant modules used.

Expand Down
4 changes: 2 additions & 2 deletions ui/src/locales/lang/en-US/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export default {
image: 'Image',
audio: 'Audio',
video: 'Video',
other: 'Other file',
addExtensions: 'Add file extensions',
other: 'Other',
addExtensions: 'Add suffix'
},
status: {
label: 'Status',
Expand Down
3 changes: 2 additions & 1 deletion ui/src/locales/lang/en-US/views/application-workflow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ export default {
label: 'File types allowed for upload',
documentText: 'Requires "Document Content Extraction" node to parse document content',
imageText: 'Requires "Image Understanding" node to parse image content',
audioText: 'Requires "Speech-to-Text" node to parse audio content'
audioText: 'Requires "Speech-to-Text" node to parse audio content',
otherText: 'Need to parse this type of file by yourself'
}
}
},
Expand Down
2 changes: 1 addition & 1 deletion ui/src/locales/lang/zh-CN/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {
audio: '音频',
video: '视频',
other: '其他文件',
addExtensions: '添加文件扩展名',
addExtensions: '添加后缀名',
},
status: {
label: '状态',
Expand Down
6 changes: 4 additions & 2 deletions ui/src/locales/lang/zh-CN/views/application-workflow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,10 @@ export default {
label: '上传的文件类型',
documentText: '需要使用“文档内容提取”节点解析文档内容',
imageText: '需要使用“视觉模型”节点解析图片内容',
audioText: '需要使用“语音转文本”节点解析音频内容'
}
audioText: '需要使用“语音转文本”节点解析音频内容',
otherText: '需要自行解析该类型文件'
},

}
},
aiChatNode: {
Copy link
Contributor

Choose a reason for hiding this comment

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

Your code is generally well-written, but there are a few points that can be improved:

  1. Duplicated Code: The audioText property has been copied twice at the end of the object literal. You should remove one duplicate.

  2. Code Indentation: Ensure consistent indentation throughout the JavaScript file to improve readability.

  3. Comments: Adding comments or descriptions for each key could help clarify the purpose of each node type more easily.

Here's the corrected version with some minor improvements:

export default {
  nodes: [
    // Other node configurations...
    
    {
      name: 'FileExtractor', // Replace 'FileExtractor' with the actual node name
      label: '上传的文件类型',
      documentText: '需要使用“文档内容提取”节点解析文档内容',
      imageText: '需要使用“视觉模型”节点解析图片内容',
      audioText: '需要使用“语音转文本”节点解析音频内容',
      otherText: '需要自行解析该类型文件'
    }
  ],
  
  aiChatNode: {
    options: {}
  }
};

If you have any specific concerns or need further assistance, feel free to ask!

Expand Down
2 changes: 1 addition & 1 deletion ui/src/locales/lang/zh-Hant/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {
audio: '音頻',
video: '視頻',
other: '其他文件',
addExtensions: '添加文件擴展名'
addExtensions: '添加後綴名',
},
status: {
label: '狀態',
Expand Down
3 changes: 2 additions & 1 deletion ui/src/locales/lang/zh-Hant/views/application-workflow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,8 @@ export default {
label: '上傳的文件類型',
documentText: '需要使用「文檔內容提取」節點解析文檔內容',
imageText: '需要使用「圖片理解」節點解析圖片內容',
audioText: '需要使用「語音轉文本」節點解析音頻內容'
audioText: '需要使用「語音轉文本」節點解析音頻內容',
otherText: '需要自行解析該類型文件'
}
}
},
Expand Down
71 changes: 45 additions & 26 deletions ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
:destroy-on-close="true"
:before-close="close"
append-to-body
width="600"
width="800"
>
<el-form
label-position="top"
Expand Down Expand Up @@ -54,14 +54,16 @@
<img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />
<div>
<p class="line-height-22 mt-4">
{{ $t('common.fileUpload.document') }}（TXT、MD、DOCX、HTML、CSV、XLSX、XLS、PDF）
{{ $t('common.fileUpload.document') }}
<el-text class="color-secondary"
>{{
$t(
'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.documentText'
)
}}
</el-text>
</p>
<el-text class="color-secondary">{{
$t(
'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.documentText'
)
}}
</el-text>
<p>TXT、MD、DOCX、HTML、CSV、XLSX、XLS、PDF</p>
</div>
</div>
<el-checkbox
Expand All @@ -82,14 +84,16 @@
<img class="mr-12" src="@/assets/icon_file-image.svg" alt="" />
<div>
<p class="line-height-22 mt-4">
{{ $t('common.fileUpload.image') }}（JPG、JPEG、PNG、GIF）
{{ $t('common.fileUpload.image') }}
<el-text class="color-secondary"
>{{
$t(
'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.imageText'
)
}}
</el-text>
</p>
<el-text class="color-secondary">{{
$t(
'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.imageText'
)
}}
</el-text>
<p>JPG、JPEG、PNG、GIF</p>
</div>
</div>
<el-checkbox v-model="form_data.image" @change="form_data.image = !form_data.image" />
Expand All @@ -108,14 +112,16 @@
<img class="mr-12" src="@/assets/icon_file-audio.svg" alt="" />
<div>
<p class="line-height-22 mt-4">
{{ $t('common.fileUpload.audio') }}（MP3、WAV、OGG、ACC、M4A）
{{ $t('common.fileUpload.audio') }}
<el-text class="color-secondary"
>{{
$t(
'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.audioText'
)
}}
</el-text>
</p>
<el-text class="color-secondary">{{
$t(
'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.audioText'
)
}}
</el-text>
<p>MP3、WAV、OGG、ACC、M4A</p>
</div>
</div>
<el-checkbox v-model="form_data.audio" @change="form_data.audio = !form_data.audio" />
Expand All @@ -134,30 +140,43 @@
<div>
<p class="line-height-22 mt-4">
{{ $t('common.fileUpload.other') }}
<el-text class="color-secondary"
>{{
$t(
'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.otherText'
)
}}
</el-text>
</p>
<div class="flex">
<el-space wrap :size="2" class="mt-4">
<el-tag
v-for="tag in form_data.otherExtensions"
:key="tag"
closable
:disable-transitions="false"
@close="handleClose(tag)"
type="info"
class="mr-4"
effect="plain"
style="
--el-tag-border-radius: 4px;
--el-tag-border-color: var(--el-border-color);
"
>
{{ tag }}
</el-tag>
<el-input
v-if="inputVisible"
ref="InputRef"
v-model="inputValue"
class="w-20"
size="small"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button v-else class="button-new-tag" size="small" @click.stop="showInput">
+ {{ $t('common.fileUpload.addExtensions') }}
</el-button>
</div>
</el-space>
</div>
</div>
<el-checkbox v-model="form_data.other" @change="form_data.other = !form_data.other" />
Expand Down Expand Up @@ -214,7 +233,7 @@ function close() {
}

const handleClose = (tag: string) => {
form_data.value.otherExtensions = form_data.value.otherExtensions.filter(item => item !== tag)
form_data.value.otherExtensions = form_data.value.otherExtensions.filter((item) => item !== tag)
}

const showInput = () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

The provided code appears to be part of an interface for file upload settings within a larger application workflow or system. However, there were a few minor issues and areas for improvement:

  1. Whitespace and Comments: There is excessive whitespace and comments added around lines that are not necessary. These should be removed.

  2. Consistent Styling: The spacing between components and elements could be consistent with better readability.

  3. Functionality Review:

    • The handleInputConfirm method can handle edge cases more robustly.
    • The showInput method logic should ensure correct button display based on whether input exists.

  4. Code Organization:

    • It would be beneficial to organize similar functionality closer together in a single block for consistency.

Here's the revised version with these improvements:

<template>
  <el-dialog
    title="File Upload Settings"
    :visible.sync="dialogVisible"
    destroy-on-close="true"
    before-close="close"
    append-to-body
    width="800"
  >
    <!-- Other existing template content -->
    </div>

    <!-- Consolodate other checkbox groups here -->

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="submitFormData()">Save</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    dialogVisible: Boolean,
  },
  
  setup(props, context) {
    const form_data = ref({
      document: true,
      image: false,
      audio: false,
      otherExtensions: [],
      other: false,
    });

    // Existing methods...

    const handleClose = (tag: string) => {
      if (!Array.isArray(form_data.value.otherExtensions)) return; // Prevent errors if value undefined
      form_data.value.otherExtensions = form_data.value.otherExtensions.filter(item => item !== tag);
    };

    const addExtension = () => {
      const inputValue = ref('');
      const blurEventHandler = ({ newTarget }) => {
        if (newTarget && /[^a-zA-Z]+/.exec(newTarget.value)) return; // Ensure only letters are allowed

        form_data.value.otherExtensions.push(inputValue.value);

        // Close the input field after adding extension
        inputValue.value = '';
      };
      const mouseUpHandler = () => newTarget.blur(); // Handle click outside input

      const el_input_ref = ref();
      setTimeout(() => el_input_ref.value?.focus());

      const inputBlurListener = blurEventHandler.bind(this);
      const inputMouseUpListener = mouseUpHandler.bind(this);
      
      this.$nextTick(() => {
        el_input_ref.value.addEventListener('blur', inputBlurListener);
        el_input_ref.value.addEventListener('mouseup', inputMouseUpListener);
      });

      return {
        inputValue,
        inputBlurListener,
        inputMouseUpListener,
      };
    }

    // submitFormData method remains unchanged

    return {
      ...context.attrs,
      form_data,
      showDialog,
      closeDialog,
      handleSubmit,
      handleClick,
      handleChange,
      showInput,
      getExtensionOptions,
      removeTag,
    };
  }
};
</script>

Key Changes:

  1. Removed Unnecessary Whitespace: Cleaned up extraneous spaces and comments.
  2. Improved Style Consistency: Ensured elements are spaced appropriately, making it easier to read.
  3. Added Extension Management Logic: Enhanced behavior for handling additional extensions through a user-friendly interface.
  4. Organized Code Blocks: Combined related operations into a single function block, improving maintainability.

These changes make the code cleaner, more readable, and functional while addressing any potential issues mentioned earlier.

Expand Down