diff --git a/components/elements/response.tsx b/components/elements/response.tsx index d52e5f9..a1053ed 100644 --- a/components/elements/response.tsx +++ b/components/elements/response.tsx @@ -1,6 +1,6 @@ "use client"; -import { type ComponentProps, memo } from "react"; +import type { ComponentProps } from "react"; import { Streamdown } from "streamdown"; import { cn } from "@/lib/utils"; import { ImagePreview } from "@/components/image-preview"; @@ -19,55 +19,56 @@ type ResponseProps = ComponentProps & { isProcessingAngleEdit?: boolean; }; -export const Response = memo( - ({ className, onImageEdit, onDrawingComplete, onImageEnhance, onImageRmbg, onImageExtend, onImageAngleEdit, isProcessingEnhance, isProcessingRmbg, isProcessingExtend, isProcessingAngleEdit, ...props }: ResponseProps) => ( - *:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:max-w-full [&_pre]:overflow-x-auto", - className - )} - components={{ - img: ({ src, alt }: { src?: string; alt?: string }) => { - if (!src) { - return null; - } - return ; - }, - video: ({ src, alt }: { src?: string; alt?: string }) => { - if (!src) { - return null; - } - return ; - }, - }} - {...props} - /> - ), - (prevProps: ResponseProps, nextProps: ResponseProps) => - prevProps.children === nextProps.children && - prevProps.onImageEdit === nextProps.onImageEdit && - prevProps.onDrawingComplete === nextProps.onDrawingComplete && - prevProps.onImageEnhance === nextProps.onImageEnhance && - prevProps.onImageRmbg === nextProps.onImageRmbg && - prevProps.onImageExtend === nextProps.onImageExtend && - prevProps.onImageAngleEdit === nextProps.onImageAngleEdit && - prevProps.isProcessingEnhance === nextProps.isProcessingEnhance && - prevProps.isProcessingRmbg === nextProps.isProcessingRmbg && - prevProps.isProcessingExtend === nextProps.isProcessingExtend && - prevProps.isProcessingAngleEdit === nextProps.isProcessingAngleEdit +// 注意:移除了 memo 的自定义比较函数,确保 isProcessing* 状态变化时组件能正确重新渲染 +// 之前的 memo 比较函数可能导致 Streamdown 内部的 ImagePreview 组件没有正确更新 +export const Response = ({ + className, + onImageEdit, + onDrawingComplete, + onImageEnhance, + onImageRmbg, + onImageExtend, + onImageAngleEdit, + isProcessingEnhance, + isProcessingRmbg, + isProcessingExtend, + isProcessingAngleEdit, + ...props +}: ResponseProps) => ( + *:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:max-w-full [&_pre]:overflow-x-auto", + className + )} + components={{ + img: ({ src, alt }: { src?: string; alt?: string }) => { + if (!src) { + return null; + } + return ; + }, + video: ({ src, alt }: { src?: string; alt?: string }) => { + if (!src) { + return null; + } + return ; + }, + }} + {...props} + /> ); Response.displayName = "Response";