diff --git a/frontend/src/components/tools/shared/ReviewToolStep.tsx b/frontend/src/components/tools/shared/ReviewToolStep.tsx index 4b82f914e..475715704 100644 --- a/frontend/src/components/tools/shared/ReviewToolStep.tsx +++ b/frontend/src/components/tools/shared/ReviewToolStep.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import { Button, Stack, Text } from '@mantine/core'; import { useTranslation } from 'react-i18next'; import DownloadIcon from '@mui/icons-material/Download'; @@ -14,24 +14,32 @@ export interface ReviewToolStepProps { onFileClick?: (file: File) => void; } -export function createReviewToolStep( - createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement, - props: ReviewToolStepProps -): React.ReactElement { +function ReviewStepContent({ operation, onFileClick }: { operation: ToolOperationHook; onFileClick?: (file: File) => void }) { const { t } = useTranslation(); - const { operation } = props; + const stepRef = useRef(null); const previewFiles = operation.files?.map((file, index) => ({ file, thumbnail: operation.thumbnails[index] })) || []; - return createStep(t("review", "Review"), { - isVisible: props.isVisible, - _excludeFromCount: true, - _noPadding: true - }, ( - + // Auto-scroll to bottom when content appears + useEffect(() => { + if (stepRef.current && (previewFiles.length > 0 || operation.downloadUrl || operation.errorMessage)) { + const scrollableContainer = stepRef.current.closest('[style*="overflow: auto"]') as HTMLElement; + if (scrollableContainer) { + setTimeout(() => { + scrollableContainer.scrollTo({ + top: scrollableContainer.scrollHeight, + behavior: 'smooth' + }); + }, 100); // Small delay to ensure content is rendered + } + } + }, [previewFiles.length, operation.downloadUrl, operation.errorMessage]); + + return ( + ( {previewFiles.length > 0 && ( )} @@ -61,5 +69,23 @@ export function createReviewToolStep( + ); +} + +export function createReviewToolStep( + createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement, + props: ReviewToolStepProps +): React.ReactElement { + const { t } = useTranslation(); + + return createStep(t("review", "Review"), { + isVisible: props.isVisible, + _excludeFromCount: true, + _noPadding: true + }, ( + )); }