fix: 移除 Response 组件的 memo,修复按钮状态不更新问题

- 移除 memo 的自定义比较函数
- 确保 isProcessing* 状态变化时组件能正确重新渲染
- 之前的 memo 可能导致 Streamdown 内部的 ImagePreview 没有正确更新
This commit is contained in:
Your Name 2026-01-18 11:34:04 +08:00
parent c674e7e861
commit 237be9007d

View File

@ -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<typeof Streamdown> & {
isProcessingAngleEdit?: boolean;
};
export const Response = memo(
({ className, onImageEdit, onDrawingComplete, onImageEnhance, onImageRmbg, onImageExtend, onImageAngleEdit, isProcessingEnhance, isProcessingRmbg, isProcessingExtend, isProcessingAngleEdit, ...props }: ResponseProps) => (
<Streamdown
className={cn(
"size-full [&>*: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 <ImagePreview
src={src}
alt={alt}
onImageEdit={onImageEdit}
onDrawingComplete={onDrawingComplete}
onImageEnhance={onImageEnhance}
onImageRmbg={onImageRmbg}
onImageExtend={onImageExtend}
onImageAngleEdit={onImageAngleEdit}
isProcessingEnhance={isProcessingEnhance}
isProcessingRmbg={isProcessingRmbg}
isProcessingExtend={isProcessingExtend}
isProcessingAngleEdit={isProcessingAngleEdit}
/>;
},
video: ({ src, alt }: { src?: string; alt?: string }) => {
if (!src) {
return null;
}
return <VideoPreview src={src} alt={alt} />;
},
}}
{...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) => (
<Streamdown
className={cn(
"size-full [&>*: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 <ImagePreview
src={src}
alt={alt}
onImageEdit={onImageEdit}
onDrawingComplete={onDrawingComplete}
onImageEnhance={onImageEnhance}
onImageRmbg={onImageRmbg}
onImageExtend={onImageExtend}
onImageAngleEdit={onImageAngleEdit}
isProcessingEnhance={isProcessingEnhance}
isProcessingRmbg={isProcessingRmbg}
isProcessingExtend={isProcessingExtend}
isProcessingAngleEdit={isProcessingAngleEdit}
/>;
},
video: ({ src, alt }: { src?: string; alt?: string }) => {
if (!src) {
return null;
}
return <VideoPreview src={src} alt={alt} />;
},
}}
{...props}
/>
);
Response.displayName = "Response";