Auto scroll results step

This commit is contained in:
Connor Yoh 2025-08-15 17:21:52 +01:00
parent 0bd050396c
commit a921ec5909

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect, useRef } from 'react';
import { Button, Stack, Text } from '@mantine/core'; import { Button, Stack, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import DownloadIcon from '@mui/icons-material/Download'; import DownloadIcon from '@mui/icons-material/Download';
@ -14,24 +14,32 @@ export interface ReviewToolStepProps<TParams = unknown> {
onFileClick?: (file: File) => void; onFileClick?: (file: File) => void;
} }
export function createReviewToolStep<TParams = unknown>( function ReviewStepContent<TParams = unknown>({ operation, onFileClick }: { operation: ToolOperationHook<TParams>; onFileClick?: (file: File) => void }) {
createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
props: ReviewToolStepProps<TParams>
): React.ReactElement {
const { t } = useTranslation(); const { t } = useTranslation();
const { operation } = props; const stepRef = useRef<HTMLDivElement>(null);
const previewFiles = operation.files?.map((file, index) => ({ const previewFiles = operation.files?.map((file, index) => ({
file, file,
thumbnail: operation.thumbnails[index] thumbnail: operation.thumbnails[index]
})) || []; })) || [];
return createStep(t("review", "Review"), { // Auto-scroll to bottom when content appears
isVisible: props.isVisible, useEffect(() => {
_excludeFromCount: true, if (stepRef.current && (previewFiles.length > 0 || operation.downloadUrl || operation.errorMessage)) {
_noPadding: true const scrollableContainer = stepRef.current.closest('[style*="overflow: auto"]') as HTMLElement;
}, ( if (scrollableContainer) {
<Stack gap="sm" > setTimeout(() => {
scrollableContainer.scrollTo({
top: scrollableContainer.scrollHeight,
behavior: 'smooth'
});
}, 100); // Small delay to ensure content is rendered
}
}
}, [previewFiles.length, operation.downloadUrl, operation.errorMessage]);
return (
<Stack gap="sm" ref={stepRef}>
<ErrorNotification <ErrorNotification
error={operation.errorMessage} error={operation.errorMessage}
onClose={operation.clearError} onClose={operation.clearError}
@ -40,7 +48,7 @@ export function createReviewToolStep<TParams = unknown>(
{previewFiles.length > 0 && ( {previewFiles.length > 0 && (
<ResultsPreview <ResultsPreview
files={previewFiles} files={previewFiles}
onFileClick={props.onFileClick} onFileClick={onFileClick}
isGeneratingThumbnails={operation.isGeneratingThumbnails} isGeneratingThumbnails={operation.isGeneratingThumbnails}
/> />
)} )}
@ -61,5 +69,23 @@ export function createReviewToolStep<TParams = unknown>(
<SuggestedToolsSection /> <SuggestedToolsSection />
</Stack> </Stack>
);
}
export function createReviewToolStep<TParams = unknown>(
createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
props: ReviewToolStepProps<TParams>
): React.ReactElement {
const { t } = useTranslation();
return createStep(t("review", "Review"), {
isVisible: props.isVisible,
_excludeFromCount: true,
_noPadding: true
}, (
<ReviewStepContent
operation={props.operation}
onFileClick={props.onFileClick}
/>
)); ));
} }