| | import { useState, useCallback } from 'react';
|
| | import { generateGif, downloadGif, GifGenerationOptions } from '@/services/gifGenerator';
|
| | import { AgentStep } from '@/types/agent';
|
| |
|
| | interface UseGifGeneratorOptions {
|
| | steps: AgentStep[];
|
| | traceId?: string;
|
| | }
|
| |
|
| | interface UseGifGeneratorReturn {
|
| | isGenerating: boolean;
|
| | error: string | null;
|
| | generateAndDownloadGif: () => Promise<void>;
|
| | }
|
| |
|
| | |
| | |
| |
|
| | export const useGifGenerator = ({
|
| | steps,
|
| | traceId,
|
| | }: UseGifGeneratorOptions): UseGifGeneratorReturn => {
|
| | const [isGenerating, setIsGenerating] = useState(false);
|
| | const [error, setError] = useState<string | null>(null);
|
| |
|
| | const generateAndDownloadGif = useCallback(async () => {
|
| | if (!steps || steps.length === 0) {
|
| | setError('No steps available to generate GIF');
|
| | return;
|
| | }
|
| |
|
| | setIsGenerating(true);
|
| | setError(null);
|
| |
|
| | try {
|
| |
|
| | const images = steps
|
| | .map((step) => step.image)
|
| | .filter((image): image is string => !!image);
|
| |
|
| | if (images.length === 0) {
|
| | setError('No images available in steps');
|
| | setIsGenerating(false);
|
| | return;
|
| | }
|
| |
|
| |
|
| | const options: GifGenerationOptions = {
|
| | images,
|
| | interval: 1.5,
|
| | quality: 10,
|
| | };
|
| |
|
| | const result = await generateGif(options);
|
| |
|
| | if (!result.success || !result.image) {
|
| | setError(result.error || 'Error generating GIF');
|
| | setIsGenerating(false);
|
| | return;
|
| | }
|
| |
|
| |
|
| | const filename = traceId
|
| | ? `trace-${traceId}-replay.gif`
|
| | : `trace-replay-${Date.now()}.gif`;
|
| |
|
| | downloadGif(result.image, filename);
|
| | setIsGenerating(false);
|
| | } catch (err) {
|
| | setError(
|
| | err instanceof Error
|
| | ? err.message
|
| | : 'Unexpected error generating GIF'
|
| | );
|
| | setIsGenerating(false);
|
| | }
|
| | }, [steps, traceId]);
|
| |
|
| | return {
|
| | isGenerating,
|
| | error,
|
| | generateAndDownloadGif,
|
| | };
|
| | };
|
| |
|