Skip to content

perf: Cancel automatic closure of debugging dialog #2248

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
Feb 12, 2025
Merged

perf: Cancel automatic closure of debugging dialog #2248

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
2 changes: 1 addition & 1 deletion ui/src/locales/lang/zh-CN/ai-chat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default {
only20history: '仅显示最近 20 条对话',
question_count: '条提问',
exportRecords: '导出聊天记录',
chatId: '对话id',
chatId: '对话 ID',
userInput: '用户输入',
quote: '引用',
download: '点击下载文件',
Copy link
Contributor

Choose a reason for hiding this comment

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

The code appears to be well-formatted and clear with no major discrepancies or inconsistencies. There is one suggestion for improving readability:

In line 6, "对话ID" could potentially be clearer in context if it were changed to "会话 ID". This ensures that the phrase accurately reflects its meaning as a reference to an identifier for a conversation.

Overall, the code looks good, but this minor suggestion can help clarify the text better.

Expand Down
2 changes: 1 addition & 1 deletion ui/src/locales/lang/zh-Hant/ai-chat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default {
only20history: '僅顯示最近 20 條對話',
question_count: '條提問',
exportRecords: '導出聊天記錄',
chatId: '對話ID',
chatId: '對話 ID',
userInput: '用戶輸入',
quote: '引用',
download: '點擊下載文件',
Copy link
Contributor

Choose a reason for hiding this comment

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

The code looks mostly correct. However, there's a small grammatical issue in the translation of "chatID":

Original:

chatId: '對話ID',

Suggested correction (more natural English):

chatId: '對話 号碼',

OR

comment out if not needed
// chatId: '對話 ID',
// chatId: 'conversation ID', // also good option

This change makes the text more standard and clear, especially for non-native speakers. If you don't require users to see 对話ID as is, feel free to comment it out or replace with an appropriate term like '对话号码'.

Expand Down
47 changes: 30 additions & 17 deletions ui/src/views/application-workflow/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@
</el-button>
</div>
<div v-else>
<el-button icon="Plus" @click="showPopover = !showPopover"> {{ $t('views.applicationWorkflow.setting.addComponent') }} </el-button>
<el-button icon="Plus" @click="showPopover = !showPopover">
{{ $t('views.applicationWorkflow.setting.addComponent') }}
</el-button>
<el-button @click="clickShowDebug" :disabled="showDebug">
<AppIcon iconName="app-play-outlined" class="mr-4"></AppIcon>
{{ $t('views.applicationWorkflow.setting.debug') }}</el-button
Expand All @@ -36,7 +38,9 @@
<AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
{{ $t('common.save') }}
</el-button>
<el-button type="primary" @click="publicHandle"> {{ $t('views.applicationWorkflow.setting.public') }} </el-button>
<el-button type="primary" @click="publicHandle">
{{ $t('views.applicationWorkflow.setting.public') }}
</el-button>

<el-dropdown trigger="click">
<el-button text @click.stop class="ml-8 mt-4">
Expand Down Expand Up @@ -77,12 +81,7 @@
</div>
<!-- 调试 -->
<el-collapse-transition>
<div
v-click-outside="clickoutsideDebug"
class="workflow-debug-container"
:class="enlarge ? 'enlarge' : ''"
v-if="showDebug"
>
<div class="workflow-debug-container" :class="enlarge ? 'enlarge' : ''" v-if="showDebug">
<div class="workflow-debug-header" :class="!isDefaultTheme ? 'custom-header' : ''">
<div class="flex-between">
<div class="flex align-center">
Expand Down Expand Up @@ -268,10 +267,18 @@ async function publicHandle() {
const node = res.node
const err_message = res.errMessage
if (typeof err_message == 'string') {
MsgError(res.node.properties?.stepName + ` ${t('views.applicationWorkflow.node').toLowerCase()} ` + err_message.toLowerCase())
MsgError(
res.node.properties?.stepName +
` ${t('views.applicationWorkflow.node').toLowerCase()} ` +
err_message.toLowerCase()
)
} else {
const keys = Object.keys(err_message)
MsgError(node.properties?.stepName + ` ${t('views.applicationWorkflow.node').toLowerCase()} ` + err_message[keys[0]]?.[0]?.message.toLowerCase())
MsgError(
node.properties?.stepName +
` ${t('views.applicationWorkflow.node').toLowerCase()} ` +
err_message[keys[0]]?.[0]?.message.toLowerCase()
)
}
})
}
Expand Down Expand Up @@ -300,18 +307,24 @@ const clickShowDebug = () => {
const node = res.node
const err_message = res.errMessage
if (typeof err_message == 'string') {
MsgError(res.node.properties?.stepName + ` ${t('views.applicationWorkflow.node')}，` + err_message)
MsgError(
res.node.properties?.stepName + ` ${t('views.applicationWorkflow.node')}，` + err_message
)
} else {
const keys = Object.keys(err_message)
MsgError(node.properties?.stepName + ` ${t('views.applicationWorkflow.node')}，` + err_message[keys[0]]?.[0]?.message)
MsgError(
node.properties?.stepName +
` ${t('views.applicationWorkflow.node')}，` +
err_message[keys[0]]?.[0]?.message
)
}
})
}
function clickoutsideDebug(e: any) {
if (workflowMainRef.value && e && e.target && workflowMainRef.value.contains(e?.target)) {
showDebug.value = false
}
}
// function clickoutsideDebug(e: any) {
// if (workflowMainRef.value && e && e.target && workflowMainRef.value.contains(e?.target)) {
// showDebug.value = false
// }
// }

function getGraphData() {
return workflowRef.value?.getGraphData()
Copy link
Contributor

Choose a reason for hiding this comment

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

Code Review

The provided code appears to be part of an application that manages workflow settings, includes buttons and collapsible elements for adding components, debugging nodes, and setting visibility or publication status. Here's a review highlighting any irregularities, potential issues, or optimization suggestions:

Irregularities/Potential Issues

  1. Redundant Click Outside Handler: The clickoutsideDebug method is declared but never used. It's likely intended to handle clicks outside the debug container to close it, but the function body has been commented out.

  2. String Manipulation Logic: The logic within error message handling can be simplified and made more readable. For example:

    // Simplified and improved version:
function showErrorMessage(errorResponse) {
  const stepName = errorResponse.node.properties?.stepName;
  if (errorResponse instanceof Error) { // Assume responseType is actually an object with properties
    MsgError(`${stepName} "${errorResponse.message}"`);
  } else if (errorResponse.errMessage) {
    MsgError(`${stepName} "${typeof errorResponse.errMessage === 'string' ? errorResponse.errMessage : [...Object.values(errorResponse.errMessage)][0].message}"`);
  }
}

  3. Unused Function: Commented-out functions (clickoutsideDebug) are not necessary in this context.

  4. Class Naming Consistency: While consistent classes like .workflow-debug-container, .custom-header, etc., were applied consistently across instances, consider using class variables for dynamic styling to improve maintainability.

  5. Dynamic Class Application: Ensure dynamic styling classes remain up-to-date based on conditions such as isDefaultTheme.

Optimization Suggestions

  • Code Smell Removal: Remove redundant lines of code where comments explain obvious operations like MsgError, which should be directly implemented in methods without explicit commentary.

  • Avoid Multiple Calls to t() Function: If $t() translates text multiple times inside template literals, use helper functions to cache results or refactor them into reusable strings.

These adjustments should lead to cleaner, more efficient code, improving readability and potentially performance.

Expand Down