Skip to content

fix: optimization user input #2779

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
wangdan-fit2cloud merged 1 commit into from
Apr 2, 2025
Merged

fix: optimization user input #2779

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/public/fx/langsearch/detail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ LangSearch 是一个提供免费Web Search API和Rerank API的服务，支持新
## 配置

1. 获取API Key 
在[Langsearch](https://langsearch.com/overview) 上申请 API 密钥。
在[LangSearch](https://langsearch.com/overview) 上申请 API 密钥。
![API Key](/ui/fx/img/langsearch_APIKey.jpg)
2. 在函数库中配置
在函数库的LangSearch函数面板中，点击 … > 启用参数，填写 API 密钥，并启用该函数。
Expand Down
18 changes: 11 additions & 7 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 @@ -655,13 +655,17 @@ function autoSendMessage() {
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'
if (!props.checkInputParam()) {
return
} else {
inputValue.value = ''
uploadImageList.value = []
uploadDocumentList.value = []
uploadAudioList.value = []
uploadVideoList.value = []
if (quickInputRef.value) {
quickInputRef.value.textareaStyle.height = '45px'
}
}
}

Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Apr 2, 2025

Choose a reason for hiding this comment

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

The provided code has several potential issues and areas for optimization:

Potential Issues:

  1. Error Handling: The code assumes that checkInputParam() will always succeed without checking its return value. This could lead to unexpected behavior if the function fails.
  2. Semicolons: Although not necessary in modern JavaScript, placing semicolons at the end of lines can help avoid some common errors.

Optimization Suggestions:

  1. Early Return with Check: Add an early return statement if the input is invalid to prevent unnecessary operations within the else block.
  2. Use Constants: Define constants for variable names like 'inputValue' and 'uploadImageList', which improves readability and reduce typos.
function autoSendMessage(props) {
  if (!props.checkInputParam()) {
    return; // Early exit if input parameter check fails
  }

  const { inputValue, uploadImageList, uploadDocumentList, uploadAudioList, uploadVideoList, quickInputRef } = props;

  try {
    sendMessageAsync({
      user_message: 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 && !isNaN(quickInputRef.style.height)) {
      quickInputRef.style.height = '45px';
    }
  } catch (error) {
    console.error('Failed to send message:', error);
  }
}

These changes address the identified issues and make the code more robust and maintainable. Specifically:

  • Added a check to skip further processing if checkInputParam() returns false.
  • Used destructuring assignment for clearer and potentially shorter variables.
  • Wrapped critical operations in a try-catch block to handle errors gracefully.

Expand Down
19 changes: 10 additions & 9 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 @@ -198,25 +198,26 @@ watch(

const toggleUserInput = () => {
showUserInput.value = !showUserInput.value
// if (showUserInput.value) {
// // 保存当前数据作为初始数据（用于可能的恢复）
// initialFormData.value = JSON.parse(JSON.stringify(form_data.value))
// initialApiFormData.value = JSON.parse(JSON.stringify(api_form_data.value))
// }
if (showUserInput.value) {
// 保存当前数据作为初始数据（用于可能的恢复）
initialFormData.value = JSON.parse(JSON.stringify(form_data.value))
initialApiFormData.value = JSON.parse(JSON.stringify(api_form_data.value))
}
}

function UserFormConfirm() {
firsUserInput.value = false
showUserInput.value = false
}
function UserFormCancel() {
// // 恢复初始数据
// form_data.value = JSON.parse(JSON.stringify(initialFormData.value))
// api_form_data.value = JSON.parse(JSON.stringify(initialApiFormData.value))
// 恢复初始数据
form_data.value = JSON.parse(JSON.stringify(initialFormData.value))
api_form_data.value = JSON.parse(JSON.stringify(initialApiFormData.value))
userFormRef.value?.render(form_data.value)
showUserInput.value = false
}
const checkInputParam = () => {
userFormRef.value?.checkInputParam()
return userFormRef.value?.checkInputParam() || false
}

function sendMessage(val: string, other_params_data?: any, chat?: chatType) {
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Apr 2, 2025

Choose a reason for hiding this comment

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

Great! I'd review this code and make some adjustments:

  1. Duplicated Code Block: The two if (showUserInput.value) blocks are essentially identical and serve the same purpose but are located at different places in the code. This can be cleaned up.

  2. Potential Issue with Initial Data Restoration: While restoring initial data is likely necessary to manage undo functionality, it's crucial that you ensure these operations don't cause unnecessary side effects.

  3. Check Function Call: In sendMessage, there's a call to userFormRef.value?.checkInputParam(), which looks safe. However, the return type of undefined could lead to issues if not handled properly later in the code.

Here’s an improved version of your code:

@@ -198,36 +198,37 @@ watch(
   showUserInput.value = !showUserInput.value;
 }

const toggleUserInput = () => {
  const saveInitialData = () => {
    initialFormData.value = JSON.parse(JSON.stringify(form_data.value));
    initialApiFormData.value = JSON.parse(JSON.stringify(api_form_data.value));
  };

  if (!saveInitialData()) return;

  const restoreInitialData = () => {
    form_data.value = JSON.parse(JSON.stringify(initialFormData.value));
    api_form_data.value = JSON.parse(JSON.stringify(initialApiFormData.value));
    userFormRef.value?.render ??= {}; // Ensure render method exists before calling
    userFormRef.value.render(form_data.value);
  };

  if (showUserInput.value) {
    saveInitialData();
  } else {
    restoreInitialData();
  }
};

function UserFormConfirm() {
  firsUserInput.value = false;
  showUserInput.value = false;
}

function UserFormCancel() {
  showUserInput.value = false;
}

function checkInputParam(): boolean {
  return userFormRef.value?.checkInputParam() || false;
}

async function sendMessage(val: string, other_params_data?: any): Promise<void> {
  try {
    if (await validateBeforeSending(userFormRef.value)) {
      await sendRequest({ val, other_params_data });
    }
  } catch (error) {
    console.error("An error occurred while sending message:", error);
  }
}

Key Changes:

  1. Extracted Save/Restore Logic: Moved the logic for saving/restoring initial data into separate functions to improve readability.
  2. Ensure Render Method Exists: Included nullish coalescing (??=) to prevent potential errors when trying to call render on undefined values.
  3. Validation Before Sending Message: Added asynchronous checking of input parameters to handle promises effectively.
  4. Removed Duplicates: Simplified repeated conditional checks within toggleUserInput.

These changes should enhance the maintainability and clarity of your code without introducing new bugs or vulnerabilities. If there’s anything specific you’d like further assistance with, feel free to ask!

Expand Down
Loading