Skip to content

fix: refine chat document and image layout，and some translation issues #2177

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 2 commits into from
Feb 9, 2025
Merged

fix: refine chat document and image layout，and some translation issues #2177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03f1b6d
fix: Rrefine english words
wangdan-fit2cloud Feb 9, 2025
e5ef999
fix: refine chat document and image layout，and some translation issues
wangdan-fit2cloud Feb 9, 2025
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
22 changes: 11 additions & 11 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 @@ -19,10 +19,10 @@
v-for="(item, index) in uploadDocumentList"
:key="index"
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
:sm="props.type === 'debug-ai-chat' ? 24 : 12"
:md="props.type === 'debug-ai-chat' ? 24 : 12"
:lg="props.type === 'debug-ai-chat' ? 24 : 12"
:xl="props.type === 'debug-ai-chat' ? 24 : 12"
class="mb-8"
>
<el-card
Expand Down Expand Up @@ -54,10 +54,10 @@

<el-col
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
:sm="props.type === 'debug-ai-chat' ? 24 : 12"
:md="props.type === 'debug-ai-chat' ? 24 : 12"
:lg="props.type === 'debug-ai-chat' ? 24 : 12"
:xl="props.type === 'debug-ai-chat' ? 24 : 12"
class="mb-8"
v-for="(item, index) in uploadAudioList"
:key="index"
Expand Down Expand Up @@ -85,10 +85,10 @@
</el-card>
</el-col>
</el-row>
<div class="flex">
<el-space wrap>
<template v-for="(item, index) in uploadImageList" :key="index">
<div
class="file cursor border border-r-4 mr-8"
class="file cursor border border-r-4"
v-if="item.url"
@mouseenter.stop="mouseenter(item)"
@mouseleave.stop="mouseleave()"
Expand All @@ -111,7 +111,7 @@
/>
</div>
</template>
</div>
</el-space>
</div>
</el-scrollbar>
<div class="flex">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The code snippet provided is written in Vue.js using the Element UI framework for styling and components. While the general structure is appropriate, there are several concerns that could affect its readability, maintainability, or functionality:

  1. Duplicate Key Usage: The v-for directive uses unique keys (:key='index') across similar iterations without proper consideration. This can lead to unexpected behavior, such as duplicate elements appearing when filtering arrays.

    <el-dialog v-model="visible" width="60%">
  <!-- ... existing content ... -->

  <div slot="footer">
    <span class="dialog-footer">
      <button type="primary" @click="$emit('save')">Save</button>
      <el-button @click="$emit('close')">Cancel</el-button>
    </span>
  </div>

2. **Conditional Class Application**: When setting the column layout classes (`xs`, `sm`, `md`, etc.) based on the value of `props.type`, it's advisable to encapsulate this logic within a conditional rendering mechanism like computed properties rather than hardcoding checks inside each template element.

3. **Accessibility Improvements**: Ensure that all interactive elements have accessible labels (like placeholders for input fields). For example, ensure `<input />` elements use the `placeholder` attribute appropriately.

```html
<!-- Add placeholder text for better accessibility -->
<input type="text" placeholder="Enter something..." />

<!-- Ensure buttons also receive aria-labels -->
<button role="button" aria-label="Submit">Submit Data</button>

  1. Optimization Suggestions:

    • Consider refactoring complex styles into CSS variables or utility functions to make them reusable and more modular.
    • Implement dynamic loading of images where applicable, especially if they are large files from storage systems. This reduces load times and improves user experience.

  2. Error Handling: Ensure error handling paths are well-defined, particularly when dealing with potentially undefined data structures during iteration.

If you need further assistance tailored to specific areas of concern please let me know!

Expand Down
35 changes: 13 additions & 22 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 @@ -21,10 +21,10 @@
v-for="(item, index) in document_list"
:key="index"
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
:sm="props.type === 'debug-ai-chat' ? 24 : 12"
:md="props.type === 'debug-ai-chat' ? 24 : 12"
:lg="props.type === 'debug-ai-chat' ? 24 : 12"
:xl="props.type === 'debug-ai-chat' ? 24 : 12"
class="mb-8 w-full"
>
<el-card shadow="never" style="--el-card-padding: 8px" class="download-file cursor">
Expand All @@ -45,17 +45,8 @@
</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"
>
<el-space wrap>
<template v-for="(item, index) in image_list" :key="index">
<div class="file cursor border-r-4" v-if="item.url">
<el-image
:src="item.url"
Expand All @@ -70,19 +61,19 @@
class="border-r-4"
/>
</div>
</el-col>
</el-row>
</template>
</el-space>
</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"
:sm="props.type === 'debug-ai-chat' ? 24 : 12"
:md="props.type === 'debug-ai-chat' ? 24 : 12"
:lg="props.type === 'debug-ai-chat' ? 24 : 12"
:xl="props.type === 'debug-ai-chat' ? 24 : 12"
class="mb-8"
>
<div class="file cursor border-r-4" v-if="item.url">
Expand All @@ -109,6 +100,7 @@ import { onMounted, computed } from 'vue'
const props = defineProps<{
application: any
chatRecord: chatType
type: 'log' | 'ai-chat' | 'debug-ai-chat'
}>()
const document_list = computed(() => {
if (props.chatRecord?.upload_meta) {
Expand Down Expand Up @@ -163,7 +155,6 @@ onMounted(() => {})
}
}


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

Choose a reason for hiding this comment

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

The provided Vue component is mostly clean but contains some improvements and optimizations that can be made:

  1. Simplified Media Types: You have defined the :sm, :md, :lg, and :xl properties multiple times in the same row for each list (document_list, image_list, audio_list). This can be simplified.

  2. Conditional Rendering Based on type: The code uses hardcoded values to determine whether certain columns should span all spaces (:span="24"). Consider extracting this logic into a utility function or using a conditional rendering approach within the template.

  3. Code Formatting Neatness: While not technically an issue, it's generally good practice to keep code formatting consistent and visually appealing. Ensure the spacing between lines and curly braces matches expectations.

Here’s an improved version of the script part with these considerations:

const props = defineProps({
  application: any,
  chatRecord: chatType,
+  type: 'log' | 'ai-chat' | 'debug-ai-chat',
})

function getColumnValue(type) {
  return props.type === 'debug-ai-chat' ? 24 : 12;
}

const document_list = computed(() => {
  if (props.chatRecord?.upload_meta) {
    // Logic to populate document_list
  }
});

onMounted(() => {});

And here is how you might use the new utility function in the template section:

<el-row :gutter="10">
  <el-col
    v-for="(item, index) in document_list"
    :key="index"
    :span="getColumnValue('log')" <!-- Use getColumnType based on type -->
    class="mb-8"
  >
    ...
  </el-col>
</el-row>

<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-r-4" v-if="item.url">
        ...
      </div>
    </template>
  </el-space>
</div>

These modifications simplify the code by reducing redundancy and improving maintainability.

Expand Down
6 changes: 5 additions & 1 deletion ui/src/components/ai-chat/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@

<template v-for="(item, index) in chatList" :key="index">
<!-- 问题 -->
<QuestionContent :application="applicationDetails" :chat-record="item"></QuestionContent>
<QuestionContent
:type="type"
:application="applicationDetails"
:chat-record="item"
></QuestionContent>
<!-- 回答 -->
<AnswerContent
:application="applicationDetails"
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/login-layout/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const changeLang = (lang: string) => {
}

const currentLanguage = computed(() => {
return langList.value?.filter((v: any) => v.value === user.getLanguage())[0].label
return langList.value?.filter((v: any) => v.value === user.getLanguage())?.[0]?.label
})

const fileURL = computed(() => {
Expand Down
10 changes: 5 additions & 5 deletions ui/src/locales/lang/en-US/ai-chat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export default {
noHistory: 'No Chat History',
createChat: 'New Conversation',
createChat: 'New Chat',
history: 'Chat History',
only20history: 'Showing only the last 20 conversations',
only20history: 'Showing only the last 20 chats',
question_count: 'Questions',
exportRecords: 'Export Chat History',
chatId: 'Chat ID',
Expand Down Expand Up @@ -68,7 +68,7 @@ export default {
searchContent: 'Search Query',
searchResult: 'Search Results',
conditionResult: 'Condition Evaluation',
currentChat: 'Current Conversation',
currentChat: 'Current Chat',
answer: 'AI Response',
replyContent: 'Reply Content',
textContent: 'Text Content',
Expand All @@ -83,8 +83,8 @@ export default {
KnowledgeSource: {
title: 'Knowledge Source',
referenceParagraph: 'Cited Segment',
consume: 'Token Consumption',
consumeTime: 'Processing Time'
consume: 'Tokens',
consumeTime: 'Runtime'
},
paragraphSource: {
title: 'Knowledge Quote',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The code has a couple of small issues that need to be addressed:

  1. Inconsistent Pluralization:

    • history is translated correctly but chats should also be pluralized for consistency.

  2. Spelling Correction:

    • "Conversation" and "Chats" in some strings differ slightly (e.g., "New Conversation", "Show only the last 20 conversations"). Consistency would improve readability.

Here's the corrected version with these changes:

export default {
  noHistory: 'No Chat History',
  createChat: 'New Chat',
  history: 'Chat Histories', // Corrected from "Histories"
  only20history: 'Showing only the last 20 chats',
  
  question_count: 'Questions',

  exportRecords: 'Export Chat Record',
  chatId: 'Chat ID',

    searchContent: 'Search query',
    searchResult: 'Search Results',
    conditionResult: 'Condition Evaluation',
    currentChat: 'Current Chat',  
    answer: 'AI Response',
    replyContent: 'Reply Content',
    textContent: 'Text Content',

    KnowledgeSource: {
      title: 'Knowledge Source',
      referenceParagraph: 'Cited Segment',
      consume: 'Tokens', // Changed from "consume"
      consumeTime: 'Execution time' // Added word "time" to make it more readable
    },

    paragraphSource: {
      tile: 'Knowledge Quote',

These corrections ensure better consistency throughout the translations and improve clarity in message contexts.

Expand Down
10 changes: 5 additions & 5 deletions ui/src/locales/lang/en-US/views/application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,17 +93,17 @@ export default {
},

voiceInput: {
label: 'Voice input',
label: 'Voice Input',
placeholder: 'Please select a speech recognition model',
requiredMessage: 'Please select a speech input model',
autoSend: 'Automatic sending'
autoSend: 'Automatic Sending'
},
voicePlay: {
label: 'Voice playback',
label: 'Voice Playback',
placeholder: 'Please select a speech synthesis model',
requiredMessage: 'Please select a speech playback model',
autoPlay: 'Automatic playback',
browser: 'Browser playback (free)',
autoPlay: 'Automatic Playback',
browser: 'Browser Playback (free)',
tts: 'TTS Model',
listeningTest: 'Preview'
},
Expand Down