feat: i18n support

components/ResearchReport.vue

@@ -9,12 +9,13 @@
     visitedUrls: string[]
   }
 
+  const { t } = useI18n()
   const error = ref('')
   const loading = ref(false)
   const loadingExportPdf = ref(false)
   const reportContent = ref('')
   const reportHtml = computed(() =>
-    marked(reportContent.value, { gfm: true, silent: true }),
+    marked(reportContent.value, { silent: true, gfm: true, breaks: true }),
   )
   const isExportButtonDisabled = computed(
     () => !reportContent.value || loading.value || loadingExportPdf.value,
@@ -28,10 +29,12 @@
       for await (const chunk of writeFinalReport(params).textStream) {
         reportContent.value += chunk
       }
-      reportContent.value += `\n\n## Sources\n\n${params.visitedUrls.map((url) => `- ${url}`).join('\n')}`
+      reportContent.value += `\n\n## ${t(
+        'researchReport.sources',
+      )}\n\n${params.visitedUrls.map((url) => `- ${url}`).join('\n')}`
     } catch (e: any) {
       console.error(`Generate report failed`, e)
-      error.value = e.message
+      error.value = t('researchReport.error', [e.message])
     } finally {
       loading.value = false
     }
@@ -98,7 +101,7 @@
   <UCard>
     <template #header>
       <div class="flex items-center justify-between">
-        <h2 class="font-bold">4. Research Report</h2>
+        <h2 class="font-bold">{{ $t('researchReport.title') }}</h2>
         <UButton
           color="info"
           variant="ghost"
@@ -107,7 +110,7 @@
           :loading="loadingExportPdf"
           @click="exportToPdf"
         >
-          Export PDF
+          {{ $t('researchReport.exportPdf') }}
         </UButton>
       </div>
     </template>
@@ -120,9 +123,13 @@
     />
     <template v-else>
       <div v-if="error" class="text-red-500">{{ error }}</div>
-      <div v-else
-        >{{ loading ? 'Generating report...' : 'Waiting for report..' }}.</div
-      >
+      <div v-else>
+        {{
+          loading
+            ? $t('researchReport.generating')
+            : $t('researchReport.waiting')
+        }}
+      </div>
     </template>
   </UCard>
 </template>