feat(translator): improve text content formatting in prompts and add skip target selector

fix(translator): some pages become unresponsive when using the translation

Author: tonyhu-012

entrypoints/content/components/Chat/Messages/Action.vue

@@ -14,14 +14,12 @@
         :key="idx"
         class="mt-1 text-sm rounded-lg relative inline-block max-w-full bg-white p-2 text-text-primary cursor-pointer hover:bg-gray-100 transition-all"
         :class="disabled ? 'opacity-50 pointer-events-none' : ''"
+        @click="
+          (ev) =>
+            Chat.createActionEventDispatcher(action.type)(action.data, ev.target)
+        "
       >
-        <div
-          class="flex items-center gap-2"
-          @click="
-            (ev) =>
-              Chat.createActionEventDispatcher(action.type)(action.data, ev.target)
-          "
-        >
+        <div class="flex items-center gap-2">
           <div
             v-if="action.icon"
             class="shrink-0 grow-0"

entrypoints/content/components/Chat/Messages/Assistant.vue

@@ -15,7 +15,6 @@
         <div
           v-if="message.reasoning && message.reasoningTime"
           class="text-gray-400 text-sm flex items-center justify-between"
-          :title="message.reasoning"
         >
           <div
             v-if="message.content || message.done"

entrypoints/content/components/Chat/index.vue

@@ -12,7 +12,7 @@
         bottom: { color: '#E9E9EC', size: 36 }
       }"
     >
-      <div class="flex flex-col gap-2 px-4 py-4 pt-11">
+      <div class="flex flex-col gap-2 px-4 py-4 pt-2">
         <div
           v-for="(item, index) in chat.historyManager.history.value"
           :key="index"

entrypoints/content/composables/useTranslator.ts

@@ -1,5 +1,5 @@
 import { createSharedComposable, useEventListener } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import { getTranslatorEnv, handleTranslatorEnvUpdated, init, setTranslatorEnv, toggleTranslation, translation } from '@/entrypoints/content/utils/translator'
 import { LanguageCode } from '@/utils/language/detect'
@@ -45,6 +45,10 @@ async function _useTranslator() {
     })
   }
 
+  onMounted(() => {
+    setTranslationMenuTargetLanguage(enabled.value, targetLocale.value)
+  })
+
   useEventListener(document, 'visibilitychange', async () => {
     if (document.visibilityState === 'visible') {
       setTranslationMenuTargetLanguage(enabled.value, targetLocale.value)

entrypoints/content/utils/translator/utils/domain-selectors.ts

@@ -39,6 +39,7 @@ const translationIgnoreSelectorMap = transformSelectorMap({
     '.graph-before-activity-overview',
     '.contribution-activity-listing',
     '.pinned-item-list-item-content > div:first-child',
+    '[data-skip-target-assigned]',
   ],
 })
 

entrypoints/content/utils/translator/utils/helper.ts

@@ -26,7 +26,7 @@ export function shouldTranslateText(textContent: string | null) {
   }
 
   // ignore urls
-  if (/^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(text) && text.indexOf(' ') === -1) {
+  if (/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/.test(text) && text.indexOf(' ') === -1) {
     return false
   }
 

utils/prompts/index.ts

@@ -15,9 +15,10 @@ export const chatWithPageContent = definePrompt(async (question: string, pages:
     ? `<search_results>
 ${onlineInfo
   .map((page, idx) => {
+    const text = page.textContent?.replace(/(\s|\t)+/g, ' ').replace(/\n+/g, '\n').trim() ?? ''
     return `<search_result id="${idx + 1}">
 Title: ${page.title ?? ''} | URL: ${page.url ?? ''}
-${page.textContent ?? ''}
+${text}
 </search_result>
 `
   })
@@ -28,9 +29,10 @@ ${page.textContent ?? ''}
   const tabContext = `<tabs_context>
 ${pages
   .map((page, _idx) => {
+    const text = page.textContent?.replace(/(\s|\t)+/g, ' ').replace(/\n+/g, '\n').trim() ?? ''
     return `<tab>
 Title: ${page.title ?? ''} | URL: ${page.url ?? ''}
-${page.textContent ?? ''}
+${text}
 </tab>
 `
   })
@@ -48,10 +50,11 @@ Question: ${question}`
 export const summarizeWithPageContent = definePrompt(async (page: Page, question: string) => {
   const userConfig = await getUserConfig()
   const system = userConfig.llm.summarizeSystemPrompt.get()
+  const pageText = page.textContent?.replace(/(\s|\t)+/g, ' ').replace(/\n+/g, '\n').trim() ?? ''
 
   const user = `<tab_context>
 Title: ${page.title ?? ''} | URL: ${page.url ?? ''}
-${page.textContent ?? ''}
+${pageText}
 </tab_context>
 
 Question: ${question}`
@@ -85,7 +88,7 @@ Note: Each tab content shows only the first 1000 characters. Consider whether th
 
 ${pages
   .map((page) => {
-    const text = page.textContent?.replace(/\s+/g, ' ').trim() ?? ''
+    const text = page.textContent?.replace(/(\s|\t)+/g, ' ').replace(/\n+/g, '\n').trim() ?? ''
     const length = text?.length ?? 0
     const truncatedText = length > 1000 ? text.slice(0, 1000) + '...[content truncated]' : text
     return `<tab>
@@ -124,7 +127,7 @@ Return only the keywords in a JSON array without any explanations.`
       ? `<tabs_context>
 ${pages
   .map((page) => {
-    const text = page.textContent?.replace(/\s+/g, ' ').trim() ?? ''
+    const text = page.textContent?.replace(/(\s|\t)+/g, ' ').replace(/\n+/g, '\n').trim() ?? ''
     const length = text?.length ?? 0
     const truncatedText = length > 1000 ? text.slice(0, 1000) + '...[content truncated]' : text
     return `<tab>