fix: 移除 Response 组件的 memo,修复按钮状态不更新问题
- 移除 memo 的自定义比较函数 - 确保 isProcessing* 状态变化时组件能正确重新渲染 - 之前的 memo 可能导致 Streamdown 内部的 ImagePreview 没有正确更新
This commit is contained in:
parent
c674e7e861
commit
237be9007d
@ -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";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user