Skip to content

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

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
Aug 20, 2025
Merged

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

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
49 changes: 42 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 @@ -454,10 +454,6 @@ const uploadFile = async (file: any, fileList: any) => {
fileList.splice(0, fileList.length)
file.url = response.data[0].url
file.file_id = response.data[0].file_id

if (!inputValue.value && uploadImageList.value.length > 0) {
inputValue.value = t('chat.uploadFile.imageMessage')
}
})
}
// 粘贴处理
Expand Down Expand Up @@ -532,7 +528,16 @@ const uploadOtherList = ref<Array<any>>([])
const showDelete = ref('')

const isDisabledChat = computed(
() => !(inputValue.value.trim() && (props.appId || props.applicationDetails?.name))
() =>
!(
(inputValue.value.trim() ||
uploadImageList.value.length > 0 ||
uploadDocumentList.value.length > 0 ||
uploadVideoList.value.length > 0 ||
uploadAudioList.value.length > 0 ||
uploadOtherList.value.length > 0) &&
(props.appId || props.applicationDetails?.name)
)
)
// 是否显示移动端语音按钮
const isMicrophone = ref(false)
Expand Down Expand Up @@ -732,11 +737,34 @@ const stopTimer = () => {
}
}

const getQuestion = () => {
if (!inputValue.value.trim()) {
const fileLenth = [
uploadImageList.value.length > 0,
uploadDocumentList.value.length > 0,
uploadAudioList.value.length > 0,
uploadOtherList.value.length > 0
]
if (fileLenth.filter((f) => f).length > 1) {
return t('chat.uploadFile.otherMessage')
} else if (fileLenth[0]) {
return t('chat.uploadFile.imageMessage')
} else if (fileLenth[1]) {
return t('chat.uploadFile.documentMessage')
} else if (fileLenth[2]) {
return t('chat.uploadFile.audioMessage')
} else if (fileLenth[3]) {
return t('chat.uploadFile.otherMessage')
}
}

return inputValue.value.trim()
}
function autoSendMessage() {
props
.validate()
.then(() => {
props.sendMessage(inputValue.value, {
props.sendMessage(getQuestion(), {
image_list: uploadImageList.value,
document_list: uploadDocumentList.value,
audio_list: uploadAudioList.value,
Expand Down Expand Up @@ -771,7 +799,14 @@ function sendChatHandle(event?: any) {
// 如果没有按下组合键，则会阻止默认事件
event?.preventDefault()
if (!isDisabledChat.value && !props.loading && !event?.isComposing) {
if (inputValue.value.trim()) {
if (
inputValue.value.trim() ||
uploadImageList.value.length > 0 ||
uploadDocumentList.value.length > 0 ||
uploadAudioList.value.length > 0 ||
uploadVideoList.value.length > 0 ||
uploadOtherList.value.length > 0
) {
autoSendMessage()
}
}
Copy link
Copy Markdown
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 20, 2025

Choose a reason for hiding this comment

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

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.

Expand Down
Loading