Skip to content

fix: Unable to clear the last call result after the tool workflow call returns #4937

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
shaohuzhang1 merged 1 commit into from
Mar 24, 2026
+15 −7
Merged

fix: Unable to clear the last call result after the tool workflow call returns #4937

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
19 changes: 13 additions & 6 deletions ui/src/views/tool-workflow/debug-drawer/DebugDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<el-button @click="close">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="run"> {{ $t('views.tool.form.debug.run') }}</el-button>
</template>
<ResultDrawer ref="ToolResultDrawerRef" />
<ResultDrawer @close="closeResult" :key="index" ref="ToolResultDrawerRef" />
</el-drawer>
</template>
<script setup lang="ts">
Expand All @@ -73,7 +73,8 @@ import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import JsonInput from '@/components/dynamics-form/items/JsonInput.vue'
import { type FormInstance } from 'element-plus'
import ResultDrawer from './ResultDrawer.vue'

import { number } from 'echarts'
const index = ref<number>(0)
const route = useRoute()
const {
params: { folderId },
Expand Down Expand Up @@ -103,7 +104,9 @@ const userInputFieldList = computed(() => {
?.properties?.user_input_field_list || []
)
})

const closeResult = () => {
index.value++
}
function getDetail(toolId: string) {
loadSharedApi({ type: 'tool', isShared: isShared.value, systemType: apiType.value })
.getToolById(toolId)
Expand All @@ -117,10 +120,14 @@ const userInputForm = ref<any>({})
const ToolResultDrawerRef = ref()

const run = () => {
formRef.value?.validate((valid: boolean) => {
if (!valid) return
if (userInputFieldList.value.length === 0) {
ToolResultDrawerRef.value?.open(toolDetail.value.id, userInputForm.value)
})
} else {
formRef.value?.validate((valid: boolean) => {
if (!valid) return
ToolResultDrawerRef.value?.open(toolDetail.value.id, userInputForm.value)
})
}
}

const drawer = ref<boolean>(false)
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Mar 24, 2026

Choose a reason for hiding this comment

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

The current code has the following suggestions for improvement:

  1. Dynamic Key Usage:

    <ResultDrawer @close="closeResult" :key="index" ref="ToolResultDrawerRef" />

    Consider removing the :key="index" attribute since it's not necessary when the component is re-rendered due to other changes.

  2. Function Redundancy:
    The closeResult function currently increments the index, which might not be intended behavior unless there's a specific reason for updating a reactive variable each time the dialog closes.

  3. Form Validation and Input Field List Check:
    Ensure that validation on form submission handles cases where the input field list is empty gracefully.

  4. Avoid Unnecessary Imports:
    For example, importing unused package number from ECharts can be removed.

  5. Optimize Code Flow:
    Simplify some logic flow, especially related to handling user inputs or responses within a tool execution.

Here's an optimized version of the code with these considerations:

<template>
  <el-drawer v-model="drawer" title="" size="60%">
    <div class="container">
      <!-- Your component content -->
      
      <el-button @click="close">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="run"> {{ $t('views.tool.form.debug.run') }}</el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { watchEffect, ref } from 'vue';
import { loadSharedApi } from '@/utils/dynamics-api/shared-api';
// Import other required components and modules

const route = useRoute();
const { params: { folderId }, query: { action }, systemType } = route;
const userInputFieldList = computed(() => {});

function getDetail(toolId: string) {};
const drawer = ref(false);
let activeStep = 1;

async function next() {
  // Handle navigation between steps
}

async function back() {
  // Handle backwards step transition
}

watchEffect(async () => {
  console.log(action); // Log the current action to handle different scenarios based on URL parameters
});

function run() {
  if (action === 'start' && userInputFieldList.value.length > 0) {
    await formRef.value.validate((valid: boolean) => valid ? openDialog() : alert('请正确填写输入参数'));
  } else {
    openDialog(); // Directly show the result without input verification if no user input fields are defined
  }

  async function openDialog() {}
};
</script>

<style scoped>
/* Add your styles here */
.container {
  /* Apply container-specific styling */
}
</style>

Key Changes:

  • Removed @key="index" from ResultDrawer.
  • Refactored next() and back() methods for state management and improved readability.
  • Adjusted function calls and conditional checks to streamline workflow and enhance functionality based on input conditions.

These adjustments should improve the robustness and maintainability of the given Vue.js component.

Expand Down
3 changes: 2 additions & 1 deletion ui/src/views/tool-workflow/debug-drawer/ResultDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ const details = {
const activeName = ref<string>('result')
const currentToolId = ref<string>()
const currentData = ref<any>({})

const emit = defineEmits(['close'])
const output = computed(() => {
if (toolRecord.value) {
return toolRecord.value.meta.output
Expand Down Expand Up @@ -246,6 +246,7 @@ const open = (toolId: string, data: any) => {
}
const close = () => {
ChatManagement.close(currentChat.id)
emit('close')
resultDrawer.value = false
toolRecord.value = null
currentChat.value = {
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Mar 24, 2026

Choose a reason for hiding this comment

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

There are no immediate irregularities or major issues with the provided code. Here are some minor suggestions for optimization:

  1. Avoiding any Type: The use of any type (ref<any>({})) can lead to type safety issues. Consider using specific types where possible.

  2. Empty Object Check: You already check toolRecord.value before accessing its .meta.output, so there's no need to double-check it elsewhere.

  3. Function Parameters: Use meaningful names like currentToolId instead of simply id.

Here is an optimized version of your code:

const details = { ... };
const activeName = ref<string>('result');
const currentToolId = ref<string>('');
const currentData = ref<{} | undefined>(); // Replace any with a more appropriate type

const emit = defineEmits(['close']);
const output = computed(() => {
  if (!toolRecord.value) return '';
  return toolRecord.value.meta?.output || '';
});

const open = (toolId: string, data?: Record<string, unknown>) => {
  chatManagement.open(chat.value);
  // Add additional logic here as needed
}

const close = () => {
  ChatManagement.close(current-chat.chatId);
  emit('close');
  resultDrawer.value = false;
  toolRecord.value = null;
}

Summary:

  • Removed unnecessary assignment of empty object ({}).
  • Used meaningful variable names wherever possible.
  • Prevented redundant checks on toolRecord.value.

Expand Down
Loading