Skip to content

feat: chat upload input style #3898

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
Aug 20, 2025
Merged

feat: chat upload input style #3898

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
35 changes: 18 additions & 17 deletions ui/src/components/dynamics-form/items/upload/UploadInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<el-upload
style="width: 80%"
style="width: 100%"
v-loading="loading"
action="#"
v-bind="$attrs"
Expand All @@ -10,26 +10,26 @@
multiple
>
<el-button type="primary">{{ $t('chat.uploadFile.label') }}</el-button>
<template #file="{ file, index }"
><el-card style="--el-card-padding: 0" shadow="never">
<template #file="{ file }">
<el-card style="--el-card-padding: 0" shadow="never">
<div
class="flex-between"
:class="[inputDisabled ? 'is-disabled' : '']"
style="
padding: 0 8px 0 8px;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
"
style="padding: 0 8px 0 8px"
>
<el-tooltip class="box-item" effect="dark" :content="file.name" placement="top-start">
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 40%">
<div class="flex align-center" style="width: 70%">
<img :src="getImgUrl(file && file?.name)" alt="" width="24" class="mr-4" />
<span class="ellipsis-1" :title="file.name">
{{ file.name }}
</div></el-tooltip
>
</span>
</div>
<div class="flex align-center">
<div>{{ formatSize(file.size) }}</div>

<div>{{ formatSize(file.size) }}</div>
<el-icon @click="deleteFile(file)" style="cursor: pointer"><DeleteFilled /></el-icon>
<el-button link class="ml-8" @click="deleteFile(file)">
<AppIcon iconName="app-delete"></AppIcon>
</el-button>
</div>
</div>
</el-card>
</template>
Expand All @@ -39,6 +39,7 @@
import { computed, inject, ref, useAttrs } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormField } from '@/components/dynamics-form/type'
import { getImgUrl } from '@/utils/common'
import { t } from '@/locales'
import { useFormDisabled } from 'element-plus'
const inputDisabled = useFormDisabled()
Expand Down Expand Up @@ -71,7 +72,7 @@ const deleteFile = (file: any) => {

const model_value = computed({
get: () => {
if (!model_value) {
if (!model_value.value) {
emit('update:modelValue', [])
}
return props.modelValue
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Code Review and Optimization Suggestion

Potential Issues & Improvements:

  1. Template Syntax Errors:

    • The <template> tag at line 8 uses v-bind="$attrs" which can be replaced with just $attrs.
    • There is likely an extra closing brace (}) in the comment on line 59.

  2. Code Formatting:

    • Line 50 should have curly braces around 'width: 70%' to ensure consistent formatting.
    • Comment out or remove unnecessary lines like those starting with -, e.g., comments within the card template and elsewhere.

  3. Logical Flow:

    • Use concise variable names, like removing redundant .value, such as ${model_value.value} !== undefined.

  4. Import Statements:

    • Ensure all necessary imports are listed at the top of the file for better readability and maintainability. For example, importing formatSize.

Optimizations:

Given my capabilities up until September 1, 2021, I cannot directly suggest specific improvements related to performance optimizations that might require additional context or features. However, here’s a cleaner version of your code after making some corrections suggested above:

<template>
  <el-upload
    style="width: 100%"
    v-loading="loading"
    action="#"
    v-bind="$attrs"
  >
    <el-button type="primary">{{ $t('chat.uploadFile.label') }}</el-button>
    <template #file="{ file, index }">
      <el-card style="--el-card-padding: 0" shadow="never">
        <div
          class="flex-between"
          :class="[inputDisabled ? 'is-disabled' : '']"
          style="padding: 0 8px 0 8px; display: flex; justify-content: space-between; align-items: center;"
        >
          <el-tooltip class="box-item" effect="dark" :content="file.name" placement="top-start">
            <div class="ellipsis-1">
              {{ file.name }}
            </div>
          </el-tooltip>
          
          <div>
            {{ formatSize(file.size) }}
            <el-icon @click="deleteFile(file)" style="cursor: pointer"><DeleteFilled /></el-icon>
          </div>
        </div>
      </el-card>
    </template>
    
    <!-- More code remains unchanged -->
  </el-upload>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { useAttrs } from 'vue';

const attrs = useAttrs();
const loading = ref(false);
const inputDisabled = useFormDisabled();

watchEffect(() => {
  // Logic based on attrs value
});

// Define methods and other components similarly
</script>

<style scoped>
.flex-between {
  /* Your styles */
}

/* ... Additional CSS classes remain unchanged... */
</style>

This revised code removes unnecessary characters, follows best practices for Vue.js composition API usage, and keeps it clean and straightforward while preserving the original functionality and UI elements.

Expand Down
4 changes: 2 additions & 2 deletions ui/src/views/tool/component/ToolListContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@
{{ $t('common.edit') }}
</el-dropdown-item>
<el-dropdown-item
v-if="!item.template_id && permissionPrecise.copy(item.id)"
v-if="!item.template_id && permissionPrecise.copy(item.id) && item.tool_type!== 'MCP'"
@click.stop="copyTool(item)"
>
<AppIcon iconName="app-copy" class="color-secondary"></AppIcon>
Expand Down Expand Up @@ -275,7 +275,7 @@
{{ $t('views.shared.authorized_workspace') }}</el-dropdown-item
>
<el-dropdown-item
v-if="!item.template_id && permissionPrecise.export(item.id)"
v-if="!item.template_id && permissionPrecise.export(item.id) && item.tool_type!== 'MCP'"
@click.stop="exportTool(item)"
>
<AppIcon iconName="app-export" class="color-secondary"></AppIcon>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

There is no specific issue with the provided code snippet. It appears to be updating conditional logic based on certain permissions and types of items in a Vue.js application using Element Plus for UI components and AppIcon from an external component library.

However, here are some minor recommendations:

  1. Variable Naming Convention: Ensure consistent variable names across your project to improve readability and maintainability.

  2. Type Checking: In the v-if conditions, you can add explicit type checking if item.tool_type could potentially have a different value (not just 'MCP'). This will make the intention clearer and reduce potential errors later.

Here's how you can update the lines where permissionPrecise.copy or permissionPrecise.export might return boolean values and ensure they handle all supported tool types correctly:

<template>
  <!-- ... existing elements ... -->
  
  <div v-for="(item) in toolsList" :key="item.id">
    <el-dropdown-menu slot="dropdown">
      <el-tooltip effect="dark" content="$t('common.edit')" placement="right-start">
        <el-dropdown-item>{{ $t('common.edit') }}</el-dropdown-item>
      </el-tooltip>

      <!-- Check condition including additional checks -->
      <el-dropdown-item 
      v-if="!item.template_id && typeof permissionPrecise.copy === 'function' &&
                Boolean(permissionPrecise.copy(item.id)) && !['MCP'].includes(item.tool_type)" 
      @click.stop="copyTool(item)"
      >
          <AppIcon iconName="app-copy" class="color-secondary"></AppIcon>
      </el-dropdown-item>

      <!-- Similar adjustments for export -->
      <el-dropdown-item 
      v-if="!item.template_id && typeof permissionPrecise.export === 'function' &&
               Boolean(permissionPrecise.export(item.id)) && !['MCP'].includes(item.tool_type)" 
      @click.stop="exportTool(item)"
      >
          <AppIcon iconName="app-export" class="color-secondary"></AppIcon>
      </el-dropdown-item>
    </el-dropdown-menu>
  </div>
  
  <!-- ... remaining elements ... -->
</template>

With these changes, you ensure that the visibility of buttons like "Edit" or "Copy/Export" depends not only on permissions but also on the unique tool_type.

Expand Down
Loading