fix: summary hydration error

src/components/widgets/ai/Summary.tsx

@@ -4,12 +4,11 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import type { NoteModel, PageModel, PostModel } from '@mx-space/api-client'
 import type { ArticleDataType } from '~/types/api'
-import type { FC, ReactNode } from 'react'
+import type { FC } from 'react'
 
 import { LogosOpenaiIcon } from '~/components/icons/platform/OpenAIIcon'
 import { AutoResizeHeight } from '~/components/widgets/shared/AutoResizeHeight'
 import { API_URL } from '~/constants/env'
-import { useIsClientTransition } from '~/hooks/common/use-is-client'
 import { clsxm } from '~/lib/helper'
 import { isNoteModel, isPageModel, isPostModel } from '~/lib/url-builder'
 
@@ -64,15 +63,23 @@ export const AISummary: FC<AiSummaryProps> = (props) => {
  retryDelay: 5000,
  },
  )
- const isClient = useIsClientTransition()
- if (!isClient) return null
+ // const isClient = useIsClientTransition()
+ // if (!isClient) return <SummaryContainer isLoading />
 
- const Inner: ReactNode = (
+ return <SummaryContainer isLoading={isLoading} summary={response?.summary} />
+}
+
+const SummaryContainer: Component<{
+ isLoading: boolean
+ summary?: string
+}> = (props) => {
+ const { className, isLoading, summary } = props
+ return (
  <div
  data-hide-print
  className={clsxm(
  `space-y-2 rounded-xl border border-slate-200 p-4 dark:border-neutral-800`,
- props.className,
+ className,
  )}
  >
  <div className="flex items-center">
@@ -81,24 +88,18 @@ export const AISummary: FC<AiSummaryProps> = (props) => {
  </div>
 
  <AutoResizeHeight duration={0.3}>
- <p className="text-base-content/85 !m-0 text-sm leading-loose">
+ <div className="text-base-content/85 !m-0 text-sm leading-loose">
  {isLoading ? (
  <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>
  ) : (
- response?.summary
+ summary
  )}
- </p>
+ </div>
  </AutoResizeHeight>
  </div>
  )
-
- return (
- <AutoResizeHeight duration={0.2} className="mt-4">
- {Inner}
- </AutoResizeHeight>
- )
 }

src/components/widgets/xlog/XLogSummary.tsx

@@ -47,7 +47,7 @@ export const XLogSummary: FC<XLogSummaryProps> = (props) => {
  </div>
 
  <AutoResizeHeight duration={0.3}>
- <p className="text-base-content/85 !m-0 text-sm leading-loose">
+ <div className="text-base-content/85 !m-0 text-sm leading-loose">
  {isLoading ? (
  <div className="space-y-2">
  <span className="block h-5 w-full animate-pulse rounded-xl bg-zinc-200 dark:bg-neutral-800" />
@@ -57,7 +57,7 @@ export const XLogSummary: FC<XLogSummaryProps> = (props) => {
  ) : (
  data?.data
  )}
- </p>
+ </div>
  {isLoading && (
  <p className="border-slate-200 text-right text-sm dark:border-slate-800 ">
  (此服务由{' '}