Skip to content

fix: Opening remarks with built-in quick Q&A and tag conflicts result in HTML rendering failure #2183

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

fix: Opening remarks with built-in quick Q&A and tag conflicts result in HTML rendering failure #2183

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
21 changes: 20 additions & 1 deletion ui/src/components/ai-chat/component/prologue-content/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,26 @@ const toQuickQuestion = (match: string, offset: number, input: string) => {
}
const prologue = computed(() => {
const temp = props.available ? props.application?.prologue : t('chat.tip.prologueMessage')
return temp?.replace(/-\s.+/g, toQuickQuestion)
if (temp) {
const tag_list = [
/<html_rander>[\d\D]*?<\/html_rander>/g,
/<echarts_rander>[\d\D]*?<\/echarts_rander>/g,
/<quick_question>[\d\D]*?<\/quick_question>/g,
/<form_rander>[\d\D]*?<\/form_rander>/g
]
let _temp = temp
for (const index in tag_list) {
_temp = _temp.replaceAll(tag_list[index], '')
}
const quick_question_list = _temp.match(/-\s.+/g)
let result = temp
for (const index in quick_question_list) {
const quick_question = quick_question_list[index]
result = temp.replace(quick_question, toQuickQuestion)
}
return result
}
return ''
})
</script>
<style lang="scss" scoped></style>
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 provided code appears to be a complex function that attempts to process a prologue property and replace certain patterned content with another type of question. Some issues include:

  1. Performance Overhead: The approach used is inefficient because it uses regular expressions multiple times across the entire text without optimizing for specific patterns.

  2. Simpler Regular Expression: Instead of using an array of regexes, you could combine them into one large regex to simplify processing time and reduce complexity.

  3. Missing Error Handling: No checks are made to ensure that props.available or props.application?.prologue exists before attempting to access their properties.

  4. Return Type: It would be beneficial to specify TypeScript types for variables like result, _temp, and quick_question_list.

Here's an optimized version:

const toQuickQuestion = (match: string, offset: number, input: string): HTMLElement | null => {
  // Your implementation here
};

const prologue = computed(() => {
  if (!props.available || !props.application) {
    return '';
  }

  let temp = props.application.prologue;
  try {
    temp = temp.replace(/<html_rander.*?<\/html_rander>|<echarts_rander.*?<\/echarts_rander>|<form_rander.*?<\/form_rander>/gi, '');

    const tagsRegex = new RegExp(/<quick_question>(.*?)<\/quick_question>/gi);
    
    // Use Array.from() to convert HTMLCollection to an array
    const quickQuestionsHTMLCollection = temp.match(tagsRegex)?.item(0);
    const quickQuestionsNodeList = document.createDocumentFragment().appendChild(quickQuestionsHTMLCollection);

    let result = temp;

    quickQuestionsNodeList.querySelectorAll('.quick-question').forEach((element) => {
      const innerText = element.textContent;
      const matchElement = new Element(innerText); // Assuming 'Element' is defined elsewhere in your application
      result = result.replace(element.outerHTML, matchElement.innerHTML);
    });

    return result;
  } catch (error) {
    console.error('An error occurred while processing the prologue:', error);
    return '';
  }
});

Explanation of Changes:

  • Combined all <tag> patterns into a single regex (/<(html|echarts|rander).*?<\/\1>/gi).
  • Removed redundant replacements within loops.
  • Used .item(0) to get the first <quick_question> tag instead of accessing an indexer on an HTMLCollection, which is more reliable.
  • Wrapped the replacement logic in a try-catch block for better error handling.
  • Used document.createElement() instead of assuming Element is defined; this should work depending on your context but might need adjustment based on exact usage requirements.

This refactored version maintains readability and improves performance by avoiding unnecessary repeated operations. However, the actual behavior may vary if other parts of your application rely on different DOM elements or structures.