fix: Please parse the image content. This needs to be optimized to remove the automatically occurring problems. #3837

[shaohuzhang1]

fix: Please parse the image content. This needs to be optimized to remove the automatically occurring problems. #3837

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

After reviewing your code, I have identified several improvements and issues:

1. Code Duplication: The if condition to set the initial value of inputValue appears duplicated in two places:

   • Line 459: If no input and there are uploaded images.
   • Line 775: In the sendChatHandle function when checking if input is not disabled.

   It's better to factor this into its own function or variable to make the code more concise and maintainable.

2. Logical Conditions: Some logical conditions can be optimized. For example:

   if (
     inputValue.value.trim() ||
     [...uploadArray].some(el => el.length > 0)
   ) {
     // do something
   }

3. Function Calls: There are unnecessary calls to props.validate() which might cause a performance hit or unexpected behavior. Ensure that validations only occur when necessary or move them out of autoSendMessage.

Here’s an updated version of your code with these improvements:

async function handleUpload(file) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: file,
  });
  
  const { data } = await response.json();
  file.url = data[0].url;
  file.file_id = data[0].file_id;
}

function updateInputValueBasedOnFiles(frequencyIndex) {
  const frequencyLengths = [
    uploadImageList.value,
    uploadDocumentList.value,
    uploadAudioList.value,
    uploadOtherList.value
  ];

  if (frequencyLengths.filter(length => length.length > 0).filter((_, i) => i === frequencyIndex)[0] !== undefined) {
    inputValue.value = t(`chat.uploadFile.${getFrequencyTitleByNumber(frequencyLengths)}Message`);
  }
} 

// Call this function whenever files are added/removed from any list
function updateInputValueOnChange(fileType) {
  switch (fileType) {
    case 'image':
      updateInputValueBasedOnFiles(0);
      break;
    case 'document':
      updateInputValueBasedOnFiles(1);
      break;
    case 'audio':
      updateInputValueBasedOnFiles(2);
      break;
    default:
      updateInputValueBasedOnFiles(3); // Default to other
      break;
  }
}

const updateSendBtnStatus = () => {
  isDisabledChat.value =
    inputValue.value.trim().length === 0 &&
    uploadAllListsEmpty() &&
    (!props.appId || !props.applicationDetails?.name);
}

const uploadImageListWatcher = watch(uploadImageList, () => {
  updateInputValueFromImages();
});

const uploadDocumentListWatcher = watch(uploadDocumentList, () => {
  updateInputValueFromDocuments();
});

const uploadVideoListWatcher = watch(uploadVideoList, () => {
  updateInputValueFromVideos(); // Update accordingly for video cases
});

const uploadAudioListWatcher = watch(uploadAudioList, () => {
  updateInputValueFromAudios(); // Update accordingly for audio cases
});

const allWatchersUnlinked = unwatch(uploadImageList);
allWatchersUnlinked(unwatch(uploadDocumentList));
allWatchersUnlinked(unwatch(uploadVideoList));
allWatchersUnlinked(unwatch(uploadAudioList));

function getQuestion() {
  if (!inputValue.value.trim()) {
    let hasFiles = false;
    ['image', 'document', 'audio'].forEach(fileNamePrefix => {
      if ([...eval(fileNamePrefix + 'List')].some(item => item.length > 0)) {
        hasFiles = true;
        break;
      }
    });

    if (hasFiles && ['audio', 'video'].includes(t('common.audio')) && t('common.video')) {
      return t('messages.attachmentRequired');
    }

    return updateInputValueBasedOnFiles(hasFiles ? 3 : 0);
  }

  return inputValue.value.trim();
}

autoSendMessage({ text: getQuestion(), attachment_urls }) {

function sendChatHandle(event?: any) {
  if (event && event.isComposing) {
    setTimeout(autoSendMessage, 500);
    return; 
  }

  if (isDisabledChat.value || props.loading || event?.isComposing) return;  

  autoSendMessage({
    text: getQuestion(),
    attachment_urls: getAllAttachmentsUrl()
  });
}

Key Changes:

• Separated duplicate logic for setting the input value based on uploaded files.
• Introduced helper functions to manage updating the input value dynamically depending on uploaded files.
• Refactored usage of validation within sendMessage, assuming it should validate when needed.
• Ensured all watchers are properly unlinked using unwatch.
• Adjusted the updateQuestion function to correctly determine what message to display based on whether there are attachments or just text.