fix: summary lang

Signed-off-by: Innei <i@innei.in>

src/app/notes/[id]/pageImpl.tsx

@@ -4,7 +4,6 @@
 import type { NoteModel } from '@mx-space/api-client'
 
 import { ClientOnly } from '~/components/common/ClientOnly'
-import { SummarySwitcher } from '~/components/widgets/ai/SummarySwitcher'
 import {
   NoteActionAside,
   NoteFooterNavigationBarForMobile,
@@ -14,6 +13,7 @@ import { NoteRootBanner } from '~/components/widgets/note/NoteBanner'
 import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside'
 import { BanCopyWrapper } from '~/components/widgets/shared/BanCopyWrapper'
 import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
+import { SummarySwitcher } from '~/components/widgets/shared/SummarySwitcher'
 import { SubscribeBell } from '~/components/widgets/subscribe'
 import { XLogInfoForNote } from '~/components/widgets/xlog'
 import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'

src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx

@@ -1,7 +1,6 @@
 import type { PostModel } from '@mx-space/api-client'
 
 import { ClientOnly } from '~/components/common/ClientOnly'
-import { SummarySwitcher } from '~/components/widgets/ai/SummarySwitcher'
 import {
   PostActionAside,
   PostCopyright,
@@ -11,6 +10,7 @@ import {
 import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside'
 import { GoToAdminEditingButton } from '~/components/widgets/shared/GoToAdminEditingButton'
 import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
+import { SummarySwitcher } from '~/components/widgets/shared/SummarySwitcher'
 import { SubscribeBell } from '~/components/widgets/subscribe'
 import { XLogInfoForPost } from '~/components/widgets/xlog'
 import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'

src/components/widgets/ai/Summary.tsx

@@ -50,10 +50,12 @@ export const AISummary: FC<AiSummaryProps> = (props) => {
     summary: string
     source: string
   }>(
-    [`ai-summary`, data.id, API_URL, data.modified],
+    ['ai-summary', data.id, API_URL, data.modified],
     async () => {
       const data = await fetch(
-        `/api/ai/summary?data=${encodeURIComponent(JSON.stringify(payload))}`,
+        `/api/ai/summary?data=${encodeURIComponent(
+          JSON.stringify(payload),
+        )}&lang=${navigator.language}`,
       ).then((res) => res.json())
       if (!data) throw new Error('请求错误')
       return data

src/components/widgets/peek/NotePreview.tsx

@@ -21,9 +21,9 @@ import {
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
 import { queries } from '~/queries/definition'
 
-import { SummarySwitcher } from '../ai/SummarySwitcher'
 import { NoteHideIfSecret, NoteMetaBar, NoteRootBanner } from '../note'
 import { BanCopyWrapper } from '../shared/BanCopyWrapper'
+import { SummarySwitcher } from '../shared/SummarySwitcher'
 
 interface NotePreviewProps {
   noteId: number

src/components/widgets/peek/PostPreview.tsx

@@ -19,8 +19,8 @@ import {
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
 import { queries } from '~/queries/definition'
 
-import { SummarySwitcher } from '../ai/SummarySwitcher'
 import { PostOutdate } from '../post'
+import { SummarySwitcher } from '../shared/SummarySwitcher'
 
 interface PostPreviewProps {
   category: string

src/components/widgets/ai/SummarySwitcher.tsx → src/components/widgets/shared/SummarySwitcher.tsx

@@ -1,13 +1,13 @@
 import { memo } from 'react'
 import type { FC } from 'react'
-import type { AiSummaryProps } from './Summary'
+import type { AiSummaryProps } from '../ai/Summary'
 
 import { appStaticConfig } from '~/app.static.config'
 import { ErrorBoundary } from '~/components/common/ErrorBoundary'
 
+import { AISummary } from '../ai/Summary'
 import { getCidForBaseModel } from '../xlog/utils'
-import { XLogSummary } from '../xlog/XLogSummaryRSC'
-import { AISummary } from './Summary'
+import { XLogSummaryAsync } from '../xlog/XLogSummaryAsync'
 
 export const SummarySwitcher: FC<AiSummaryProps> = memo((props) => {
   const { enabled, providers } = appStaticConfig.ai.summary
@@ -22,7 +22,7 @@ export const SummarySwitcher: FC<AiSummaryProps> = memo((props) => {
     if (comp) break
     switch (provider) {
       case 'xlog':
-        if (cid) comp = <XLogSummary cid={cid} />
+        if (cid) comp = <XLogSummaryAsync cid={cid} />
         break
       case 'openai':
         if (!process.env.OPENAI_API_KEY) return

src/components/widgets/xlog/XLogSummaryAsync.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { Suspense } from 'react'
+
+import { clsxm } from '~/lib/helper'
+
+import { AutoResizeHeight } from '../shared/AutoResizeHeight'
+
+const fetchData = async (cid: string) => {
+  if (!cid) {
+    return null
+  }
+
+  return fetch(`/api/xlog/summary?cid=${cid}&lang=${navigator.language}`, {
+    next: {
+      revalidate: 60 * 10,
+    },
+  })
+    .then((res) => res.json())
+    .catch(() => null)
+}
+
+export const XLogSummaryAsync = async (
+  props: ComponentType<{
+    cid: string
+  }>,
+) => {
+  const { cid } = props
+  if (!cid) return null
+
+  return (
+    <div
+      data-hide-print
+      className={clsxm(
+        `space-y-2 rounded-xl border border-slate-200 p-4 dark:border-neutral-800`,
+        props.className,
+      )}
+    >
+      <div className="flex items-center">
+        <i className="icon-[mingcute--sparkles-line] mr-2 text-lg" />
+        AI 生成的摘要
+      </div>
+
+      <AutoResizeHeight>
+        <Suspense fallback={LoadingSkeleton}>
+          <RealDataRender cid={cid} />
+        </Suspense>
+      </AutoResizeHeight>
+      <p className="border-slate-200 text-right text-sm dark:border-slate-800 ">
+        (此服务由{' '}
+        <a href="https://xlog.app" target="_blank" rel="noreferrer">
+          xLog
+        </a>{' '}
+        驱动)
+      </p>
+    </div>
+  )
+}
+
+const RealDataRender = async ({ cid }: { cid: string }) => {
+  const data = await fetchData(cid)
+  if (!data) return null
+
+  return (
+    <p className="text-base-content/85 !m-0 text-sm leading-loose">
+      {data?.data}
+    </p>
+  )
+}
+
+const LoadingSkeleton = (
+  <div className="space-y-2">
+    <span className="block h-5 w-full animate-pulse rounded-xl bg-zinc-200 dark:bg-neutral-800" />
+    <span className="block h-5 w-full animate-pulse rounded-xl bg-zinc-200 dark:bg-neutral-800" />
+    <span className="block h-5 w-full animate-pulse rounded-xl bg-zinc-200 dark:bg-neutral-800" />
+  </div>
+)

src/components/widgets/xlog/XLogSummaryRSC.tsx

@@ -5,7 +5,7 @@ const headers = {
   'User-Agent': `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Shiro`,
 }
 
-const fetchData = async (cid: string, lang = 'zh') => {
+const fetchData = async (cid: string) => {
   if (!cid) {
     return null
   }
@@ -15,13 +15,16 @@ const fetchData = async (cid: string, lang = 'zh') => {
     abortController.abort()
   }, 3000)
 
-  return fetch(`https://xlog.app/api/summary?cid=${cid}&lang=${lang}`, {
-    headers: new Headers(headers),
-    signal: abortController.signal,
-    next: {
-      revalidate: 60 * 10,
+  return fetch(
+    `https://xlog.app/api/summary?cid=${cid}&lang=${navigator.language}`,
+    {
+      headers: new Headers(headers),
+      signal: abortController.signal,
+      next: {
+        revalidate: 60 * 10,
+      },
     },
-  })
+  )
     .then((res) => res.json())
     .catch(() => null)
 }