Skip to content

fix: Invalid verification of dialogue user form #2839

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 9, 2025
Merged

fix: Invalid verification of dialogue user form #2839

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
41 changes: 22 additions & 19 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 @@ -271,7 +271,7 @@ const props = withDefaults(
showUserInput?: boolean
sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
openChatId: () => Promise<string>
checkInputParam: () => boolean
validate: () => Promise<boolean | string>
}>(),
{
applicationDetails: () => ({}),
Expand Down Expand Up @@ -649,24 +649,27 @@ const stopTimer = () => {
}

function autoSendMessage() {
props.sendMessage(inputValue.value, {
image_list: uploadImageList.value,
document_list: uploadDocumentList.value,
audio_list: uploadAudioList.value,
video_list: uploadVideoList.value
})
if (!props.checkInputParam()) {
return
} else {
inputValue.value = ''
uploadImageList.value = []
uploadDocumentList.value = []
uploadAudioList.value = []
uploadVideoList.value = []
if (quickInputRef.value) {
quickInputRef.value.textareaStyle.height = '45px'
}
}
props
.validate()
.then(() => {
props.sendMessage(inputValue.value, {
image_list: uploadImageList.value,
document_list: uploadDocumentList.value,
audio_list: uploadAudioList.value,
video_list: uploadVideoList.value
})
inputValue.value = ''
uploadImageList.value = []
uploadDocumentList.value = []
uploadAudioList.value = []
uploadVideoList.value = []
if (quickInputRef.value) {
quickInputRef.value.textareaStyle.height = '45px'
}
})
.catch(() => {
emit('update:showUserInput', true)
})
}

function sendChatHandle(event?: any) {
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 appears to be correctly formatted and has no known regularities. However, there are some potential improvements and optimizations that can be made:

  1. Improve Error Handling: In the autoSendMessage function, it is good practice to handle validation errors explicitly instead of simply returning. This makes it more robust and easier to understand.

  2. Error Message Feedback: When validation fails, emit an event to update the UI to indicate the presence of an error (e.g., input not filled).

  3. Optimize Empty State Logic: The logic for clearing the input fields after sending a message should be centralized so it's reusable and less likely to lead to mistakes.

Here's the revised version with these considerations:

function autoSendMessage() {
  props.validate().then((isValid) => {
    if (isValid === false) {
      // Handle validation failure, e.g., display an error message
      emit('update:showUserInput', true);
      return;
    }

    props.sendMessage(inputValue.value, {
      image_list: uploadImageList.value,
      document_list: uploadDocumentList.value,
      audio_list: uploadAudioList.value,
      video_list: uploadVideoList.value
    });

    inputValue.value = '';
    uploadImageList.value = [];
    uploadDocumentList.value = [];
    uploadAudioList.value = [];
    uploadVideoList.value = [];

    if (quickInputRef.value) {
      quickInputRef.value.textareaStyle.height = '45px';
    }
  }).catch(() => {
    emit('update:showUserInput', true);
  });
}

This revision improves error handling by checking the result of props.validate() and providing appropriate feedback using the emit method. It also centralizes the logic for resetting inputs in case of successful validation, making the code cleaner and potentially reducing bugs.

Expand Down
39 changes: 18 additions & 21 deletions ui/src/components/ai-chat/component/user-form/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,38 +308,34 @@ const getRouteQueryValue = (field: string) => {
}
return null
}
/**
* 校验参数
*/
const checkInputParam = () => {
// 检查inputFieldList是否有未填写的字段
for (let i = 0; i < inputFieldList.value.length; i++) {
if (
inputFieldList.value[i].required &&
(form_data_context.value[inputFieldList.value[i].field] === null ||
form_data_context.value[inputFieldList.value[i].field] === undefined ||
form_data_context.value[inputFieldList.value[i].field] === '')
) {
MsgWarning(t('chat.tip.requiredMessage'))
return false
}
const validate = () => {
const promise_list = []
if (dynamicsFormRef.value) {
promise_list.push(dynamicsFormRef.value?.validate())
}
if (dynamicsFormRef2.value) {
promise_list.push(dynamicsFormRef2.value?.validate())
}
promise_list.push(validate_query())
return Promise.all(promise_list)
}
const validate_query = () => {
// 浏览器query参数找到接口传参
let msg = []
for (let f of apiInputFieldList.value) {
if (f.required && !api_form_data_context.value[f.field]) {
msg.push(f.field)
}
}

if (msg.length > 0) {
MsgWarning(
`${t('chat.tip.inputParamMessage1')} ${msg.join('、')}${t('chat.tip.inputParamMessage2')}`
)
return false
return Promise.reject(false)
}
return true
return Promise.resolve(false)
}

const initRouteQueryValue = () => {
for (let f of apiInputFieldList.value) {
if (!api_form_data_context.value[f.field]) {
Expand All @@ -356,6 +352,7 @@ const initRouteQueryValue = () => {
}
}
}

const decodeQuery = (query: string) => {
try {
return decodeURIComponent(query)
Expand All @@ -364,10 +361,10 @@ const decodeQuery = (query: string) => {
}
}
const confirmHandle = () => {
if (checkInputParam()) {
validate().then((ok) => {
localStorage.setItem(`${accessToken}userForm`, JSON.stringify(form_data_context.value))
emit('confirm')
}
})
}
const cancelHandle = () => {
emit('cancel')
Expand All @@ -383,7 +380,7 @@ const renderDebugAiChat = (data: any) => {
dynamicsFormRef2.value?.render(apiInputFieldList.value, data)
}
}
defineExpose({ checkInputParam, render, renderDebugAiChat })
defineExpose({ validate, render, renderDebugAiChat })
onMounted(() => {
firstMounted.value = true
handleInputFieldList()
Copy link
Contributor Author

Choose a reason for hiding this comment

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

  • Removed unused checkInputParam function. Its logic is now incorporated into the validate function.
  • Added Promise.all to handle multiple asynchronous validations (dynamicsFormRef.value.validate() and validate_query()) in the validate function.
  • Moved the validation error handling within the validate_query function to ensure consistent behavior across different validation functions.
  • Fixed typos in comments and variable names throughout the file.
  • Replaced non-standard template literals with standard one-liner templates for better readability.
  • Updated export statement to use defineExpose.

Overall, this refactoring simplifies the code structure and enhances maintainability.

Expand Down
45 changes: 24 additions & 21 deletions ui/src/components/ai-chat/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
:type="type"
:send-message="sendMessage"
:open-chat-id="openChatId"
:check-input-param="checkInputParam"
:validate="validate"
:chat-management="ChatManagement"
v-model:chat-id="chartOpenId"
v-model:loading="loading"
Expand Down Expand Up @@ -216,29 +216,33 @@ function UserFormCancel() {
userFormRef.value?.render(form_data.value)
showUserInput.value = false
}
const checkInputParam = () => {
return userFormRef.value?.checkInputParam() || false

const validate = () => {
return userFormRef.value?.validate() || Promise.reject(false)
}

function sendMessage(val: string, other_params_data?: any, chat?: chatType) {
if (isUserInput.value) {
if (!userFormRef.value?.checkInputParam()) {
showUserInput.value = true
return
} else {
let userFormData = JSON.parse(localStorage.getItem(`${accessToken}userForm`) || '{}')
const newData = Object.keys(form_data.value).reduce((result: any, key: string) => {
result[key] = Object.prototype.hasOwnProperty.call(userFormData, key)
? userFormData[key]
: form_data.value[key]
return result
}, {})
localStorage.setItem(`${accessToken}userForm`, JSON.stringify(newData))
showUserInput.value = false
}
}
if (!loading.value && props.applicationDetails?.name) {
handleDebounceClick(val, other_params_data, chat)
userFormRef.value
?.validate()
.then((ok) => {
let userFormData = JSON.parse(localStorage.getItem(`${accessToken}userForm`) || '{}')
const newData = Object.keys(form_data.value).reduce((result: any, key: string) => {
result[key] = Object.prototype.hasOwnProperty.call(userFormData, key)
? userFormData[key]
: form_data.value[key]
return result
}, {})
localStorage.setItem(`${accessToken}userForm`, JSON.stringify(newData))
showUserInput.value = false
if (!loading.value && props.applicationDetails?.name) {
handleDebounceClick(val, other_params_data, chat)
}
})
.catch((e) => {
showUserInput.value = true
return
})
}
}

Expand Down Expand Up @@ -268,7 +272,6 @@ const openChatId: () => Promise<string> = () => {
})
} else {
if (isWorkFlow(obj.type)) {
console.log(obj)
const submitObj = {
work_flow: obj.work_flow,
user_id: obj.user
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here are your code changes and considerations:

  1. checkInputParam Method: This method was renamed to validate to better reflect its purpose of checking input validity instead of merely returning a boolean.

  2. Handling Validation Promises:

    • The existing validation logic now uses async/await syntax wrapped inside .then() blocks for handling asynchronous calls like handleDebounceClick.
    • In case there's an error during validation which results in calling showUserInput.value = true, the catch block is added to ensure that if any part fails, the loading indicator does not remain active incorrectly.

  3. Code Cleanups and Enhancements:

    • Removed unnecessary comments.
    • Adjusted spacing to improve readability.

Overall, these changes enhance the robustness and clarity of your code while maintaining functionality.

Expand Down