Initial commit: igny8 project

frontend/src/hooks/useProgressModal.ts

@@ -0,0 +1,525 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { fetchAPI } from '../services/api';
+
+export interface ProgressState {
+  percentage: number;
+  message: string;
+  status: 'pending' | 'processing' | 'completed' | 'error';
+  details?: {
+    current: number;
+    total: number;
+    completed: number;
+    currentItem?: string;
+    phase?: string;
+  };
+}
+
+export interface UseProgressModalReturn {
+  progress: ProgressState;
+  isOpen: boolean;
+  title: string;
+  taskId: string | null;
+  openModal: (taskId: string, title: string) => void;
+  updateTaskId: (taskId: string) => void;
+  closeModal: () => void;
+  setError: (errorMessage: string) => void;
+  reset: () => void;
+}
+
+export function useProgressModal(): UseProgressModalReturn {
+  const [isOpen, setIsOpen] = useState(false);
+  const [taskId, setTaskId] = useState<string | null>(null);
+  const [title, setTitle] = useState('');
+  const [progress, setProgress] = useState<ProgressState>({
+    percentage: 0,
+    message: 'Initializing...',
+    status: 'pending',
+  });
+  
+  // Track displayed percentage and current step for step-based progress
+  const displayedPercentageRef = useRef(0);
+  const currentStepRef = useRef<string | null>(null);
+  const stepTransitionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  // Step mapping with user-friendly messages and percentages
+  const getStepInfo = (stepName: string, message: string = '', allSteps: any[] = []): { percentage: number; friendlyMessage: string } => {
+    const stepUpper = stepName?.toUpperCase() || '';
+    
+    // Extract values from message and step messages
+    const extractNumber = (pattern: RegExp, text: string): string => {
+      const match = text.match(pattern);
+      return match && match[1] ? match[1] : '';
+    };
+    
+    // Check message first, then all step messages
+    let keywordCount = extractNumber(/(\d+)\s+keyword/i, message);
+    let clusterCount = extractNumber(/(\d+)\s+cluster/i, message);
+    
+    // Also check for "Loaded X items" or "Created X clusters" patterns
+    if (!keywordCount) {
+      const loadedMatch = extractNumber(/loaded\s+(\d+)\s+items?/i, message);
+      if (loadedMatch) keywordCount = loadedMatch;
+    }
+    if (!clusterCount) {
+      const createdMatch = extractNumber(/created\s+(\d+)\s+clusters?/i, message);
+      if (createdMatch) clusterCount = createdMatch;
+    }
+    
+    // Check all steps if not found in message
+    if (!keywordCount || !clusterCount) {
+      for (const step of allSteps) {
+        const stepMsg = step.message || '';
+        if (!keywordCount) {
+          keywordCount = extractNumber(/(\d+)\s+keyword/i, stepMsg) || extractNumber(/loaded\s+(\d+)\s+items?/i, stepMsg);
+        }
+        if (!clusterCount) {
+          clusterCount = extractNumber(/(\d+)\s+cluster/i, stepMsg) || extractNumber(/created\s+(\d+)\s+clusters?/i, stepMsg);
+        }
+        if (keywordCount && clusterCount) break;
+      }
+    }
+    
+    const finalKeywordCount = keywordCount;
+    const finalClusterCount = clusterCount;
+    
+    // Map steps to percentages and user-friendly messages
+    if (stepUpper.includes('INIT') || stepUpper.includes('INITIALIZ')) {
+      return { percentage: 0, friendlyMessage: 'Getting started...' };
+    }
+    if (stepUpper.includes('PREP') || stepUpper.includes('PREPAR')) {
+      const msg = finalKeywordCount ? `Preparing ${finalKeywordCount} keyword${finalKeywordCount !== '1' ? 's' : ''}...` : 'Preparing your keywords...';
+      return { percentage: 16, friendlyMessage: msg };
+    }
+    if (stepUpper.includes('AI_CALL') || stepUpper.includes('CALLING')) {
+      return { percentage: 50, friendlyMessage: 'Finding related keywords...' };
+    }
+    if (stepUpper.includes('PARSE') || stepUpper.includes('PARSING')) {
+      return { percentage: 70, friendlyMessage: 'Organizing results...' };
+    }
+    if (stepUpper.includes('SAVE') || stepUpper.includes('SAVING') || stepUpper.includes('CREAT')) {
+      const msg = finalClusterCount ? `Saving ${finalClusterCount} cluster${finalClusterCount !== '1' ? 's' : ''}...` : 'Saving clusters...';
+      return { percentage: 85, friendlyMessage: msg };
+    }
+    if (stepUpper.includes('DONE') || stepUpper.includes('COMPLETE')) {
+      // Use extracted counts for completion message
+      const finalMsg = finalKeywordCount && finalClusterCount 
+        ? `Done! Created ${finalClusterCount} cluster${finalClusterCount !== '1' ? 's' : ''} from ${finalKeywordCount} keyword${finalKeywordCount !== '1' ? 's' : ''}`
+        : finalKeywordCount
+        ? `Done! Processed ${finalKeywordCount} keyword${finalKeywordCount !== '1' ? 's' : ''}`
+        : finalClusterCount
+        ? `Done! Created ${finalClusterCount} cluster${finalClusterCount !== '1' ? 's' : ''}`
+        : 'Done! Clustering complete';
+      return { percentage: 100, friendlyMessage: finalMsg };
+    }
+    
+    // Default fallback
+    return { percentage: displayedPercentageRef.current, friendlyMessage: message || 'Processing...' };
+  };
+
+  // Poll task status
+  useEffect(() => {
+    if (!taskId || !isOpen) return;
+    
+    // Don't poll for temporary task IDs (they start with "temp-")
+    if (taskId.startsWith('temp-')) return;
+
+    let intervalId: NodeJS.Timeout | null = null;
+    let pollCount = 0;
+    let isStopped = false; // Flag to prevent multiple stops
+    const maxPolls = 300; // 10 minutes max (2 seconds * 300)
+
+    const pollTaskStatus = async () => {
+      // Don't poll if already stopped
+      if (isStopped) return;
+      
+      try {
+        pollCount++;
+        
+        // Check if we've exceeded max polls
+        if (pollCount > maxPolls) {
+          setProgress({
+            percentage: 0,
+            message: 'Task is taking longer than expected. Please check manually.',
+            status: 'error',
+          });
+          isStopped = true;
+          if (intervalId) {
+            clearInterval(intervalId);
+            intervalId = null;
+          }
+          return;
+        }
+
+        const response = await fetchAPI(
+          `/v1/system/settings/task_progress/${taskId}/`
+        );
+
+        if (response.state === 'PROGRESS') {
+          const meta = response.meta || {};
+          
+          // Determine current step from request_steps/response_steps first (most accurate)
+          let currentStep: string | null = null;
+          const allSteps = [...(meta.request_steps || []), ...(meta.response_steps || [])];
+          
+          // Get the latest step name from steps array
+          if (allSteps.length > 0) {
+            // Sort by stepNumber to get the latest
+            const sortedSteps = [...allSteps].sort((a: any, b: any) => (b.stepNumber || 0) - (a.stepNumber || 0));
+            const latestStep = sortedSteps[0];
+            if (latestStep && latestStep.stepName) {
+              const stepNameUpper = latestStep.stepName.toUpperCase();
+              // Map step names to standard step names
+              if (stepNameUpper.includes('INIT')) {
+                currentStep = 'INIT';
+              } else if (stepNameUpper.includes('PREP')) {
+                currentStep = 'PREP';
+              } else if (stepNameUpper.includes('AI_CALL') || stepNameUpper.includes('CALL')) {
+                currentStep = 'AI_CALL';
+              } else if (stepNameUpper.includes('PARSE')) {
+                currentStep = 'PARSE';
+              } else if (stepNameUpper.includes('SAVE') || stepNameUpper.includes('CREAT')) {
+                currentStep = 'SAVE';
+              } else if (stepNameUpper.includes('DONE') || stepNameUpper.includes('COMPLETE')) {
+                currentStep = 'DONE';
+              } else {
+                currentStep = stepNameUpper;
+              }
+            }
+          }
+          
+          // Fallback to phase or message if no step found
+          if (!currentStep) {
+            const currentPhase = (meta.phase || '').toLowerCase();
+            const currentMessage = (meta.message || '').toLowerCase();
+            
+            if (currentPhase.includes('initializ') || currentMessage.includes('initializ') || currentMessage.includes('getting started')) {
+              currentStep = 'INIT';
+            } else if (currentPhase.includes('prepar') || currentPhase.includes('prep') || currentMessage.includes('prepar') || currentMessage.includes('loading')) {
+              currentStep = 'PREP';
+            } else if (currentPhase.includes('analyzing') || currentPhase.includes('ai_call') || currentMessage.includes('analyzing') || currentMessage.includes('finding related')) {
+              currentStep = 'AI_CALL';
+            } else if (currentPhase.includes('pars') || currentMessage.includes('pars') || currentMessage.includes('organizing')) {
+              currentStep = 'PARSE';
+            } else if (currentPhase.includes('sav') || currentPhase.includes('creat') || currentMessage.includes('sav') || currentMessage.includes('creat') || currentMessage.includes('cluster')) {
+              currentStep = 'SAVE';
+            } else if (currentPhase.includes('done') || currentPhase.includes('complet') || currentMessage.includes('done') || currentMessage.includes('complet')) {
+              currentStep = 'DONE';
+            }
+          }
+          
+          // Get step info with user-friendly message (use original message and all steps for value extraction)
+          const originalMessage = meta.message || '';
+          const stepInfo = getStepInfo(currentStep || '', originalMessage, allSteps);
+          const targetPercentage = stepInfo.percentage;
+          const friendlyMessage = stepInfo.friendlyMessage;
+          
+          // Check if we're transitioning to a new step
+          const isNewStep = currentStepRef.current !== currentStep;
+          
+          // Clear any existing transition timeout
+          if (stepTransitionTimeoutRef.current) {
+            clearTimeout(stepTransitionTimeoutRef.current);
+            stepTransitionTimeoutRef.current = null;
+          }
+          
+          // If it's a new step, add 500ms delay before updating
+          if (isNewStep && currentStepRef.current !== null) {
+            stepTransitionTimeoutRef.current = setTimeout(() => {
+              currentStepRef.current = currentStep;
+              displayedPercentageRef.current = targetPercentage;
+              setProgress({
+                percentage: targetPercentage,
+                message: friendlyMessage,
+                status: 'processing',
+                details: {
+                  current: meta.current || 0,
+                  total: meta.total || 0,
+                  completed: meta.completed || 0,
+                  currentItem: meta.current_item,
+                  phase: meta.phase,
+                },
+              });
+            }, 500);
+          } else {
+            // Same step or first step - update immediately
+            currentStepRef.current = currentStep;
+            displayedPercentageRef.current = targetPercentage;
+            setProgress({
+              percentage: targetPercentage,
+              message: friendlyMessage,
+              status: 'processing',
+              details: {
+                current: meta.current || 0,
+                total: meta.total || 0,
+                completed: meta.completed || 0,
+                currentItem: meta.current_item,
+                phase: meta.phase,
+              },
+            });
+          }
+          
+          // Update step logs if available
+          if (meta.request_steps || meta.response_steps) {
+            const { useAIRequestLogsStore } = await import('../store/aiRequestLogsStore').catch(() => ({ useAIRequestLogsStore: null }));
+            const logs = useAIRequestLogsStore?.getState().logs || [];
+            const log = logs.find(l => l.response?.data?.task_id === taskId);
+            if (log) {
+              const addRequestStep = useAIRequestLogsStore?.getState().addRequestStep;
+              const addResponseStep = useAIRequestLogsStore?.getState().addResponseStep;
+              
+              if (meta.request_steps && Array.isArray(meta.request_steps)) {
+                meta.request_steps.forEach((step: any) => {
+                  // Only add if not already present
+                  if (!log.requestSteps.find(s => s.stepNumber === step.stepNumber)) {
+                    addRequestStep?.(log.id, step);
+                  }
+                });
+              }
+              
+              if (meta.response_steps && Array.isArray(meta.response_steps)) {
+                meta.response_steps.forEach((step: any) => {
+                  // Only add if not already present
+                  if (!log.responseSteps.find(s => s.stepNumber === step.stepNumber)) {
+                    addResponseStep?.(log.id, step);
+                  }
+                });
+              }
+            }
+          }
+        } else if (response.state === 'SUCCESS') {
+          const meta = response.meta || {};
+          
+          // Clear any existing transition timeout
+          if (stepTransitionTimeoutRef.current) {
+            clearTimeout(stepTransitionTimeoutRef.current);
+            stepTransitionTimeoutRef.current = null;
+          }
+          
+          // Get completion message with extracted values
+          const completionMessage = meta.message || '';
+          const allSteps = [...(meta.request_steps || []), ...(meta.response_steps || [])];
+          const stepInfo = getStepInfo('DONE', completionMessage, allSteps);
+          
+          // Update to 100% with user-friendly completion message
+          currentStepRef.current = 'DONE';
+          displayedPercentageRef.current = 100;
+          setProgress({
+            percentage: 100,
+            message: stepInfo.friendlyMessage,
+            status: 'completed',
+            details: meta.details,
+          });
+          
+          // Update final step logs
+          if (meta.request_steps || meta.response_steps) {
+            const { useAIRequestLogsStore } = await import('../store/aiRequestLogsStore').catch(() => ({ useAIRequestLogsStore: null }));
+            const logs = useAIRequestLogsStore?.getState().logs || [];
+            // Find log by task_id in response data or by matching the most recent log
+            const log = logs.find(l => l.response?.data?.task_id === taskId) || logs[0];
+            if (log) {
+              const addRequestStep = useAIRequestLogsStore?.getState().addRequestStep;
+              const addResponseStep = useAIRequestLogsStore?.getState().addResponseStep;
+              
+              if (meta.request_steps && Array.isArray(meta.request_steps)) {
+                meta.request_steps.forEach((step: any) => {
+                  if (!log.requestSteps.find(s => s.stepNumber === step.stepNumber)) {
+                    addRequestStep?.(log.id, step);
+                  }
+                });
+              }
+              
+              if (meta.response_steps && Array.isArray(meta.response_steps)) {
+                meta.response_steps.forEach((step: any) => {
+                  if (!log.responseSteps.find(s => s.stepNumber === step.stepNumber)) {
+                    addResponseStep?.(log.id, step);
+                  }
+                });
+              }
+            }
+          }
+          
+          // Stop polling on SUCCESS
+          isStopped = true;
+          if (intervalId) {
+            clearInterval(intervalId);
+            intervalId = null;
+          }
+        } else if (response.state === 'FAILURE') {
+          const meta = response.meta || {};
+          const errorMsg = meta.error || 'Task failed';
+          setProgress({
+            percentage: 0,
+            message: `Error: ${errorMsg}`,
+            status: 'error',
+          });
+          
+          // Update step logs from failure response
+          if (meta.request_steps || meta.response_steps) {
+            const { useAIRequestLogsStore } = await import('../store/aiRequestLogsStore').catch(() => ({ useAIRequestLogsStore: null }));
+            const logs = useAIRequestLogsStore?.getState().logs || [];
+            const log = logs.find(l => l.response?.data?.task_id === taskId);
+            if (log) {
+              const addRequestStep = useAIRequestLogsStore?.getState().addRequestStep;
+              const addResponseStep = useAIRequestLogsStore?.getState().addResponseStep;
+              
+              if (meta.request_steps && Array.isArray(meta.request_steps)) {
+                meta.request_steps.forEach((step: any) => {
+                  if (!log.requestSteps.find(s => s.stepNumber === step.stepNumber)) {
+                    addRequestStep?.(log.id, step);
+                  }
+                });
+              }
+              
+              if (meta.response_steps && Array.isArray(meta.response_steps)) {
+                meta.response_steps.forEach((step: any) => {
+                  if (!log.responseSteps.find(s => s.stepNumber === step.stepNumber)) {
+                    addResponseStep?.(log.id, step);
+                  }
+                });
+              }
+            }
+          }
+          
+          // Stop polling on FAILURE
+          isStopped = true;
+          if (intervalId) {
+            clearInterval(intervalId);
+            intervalId = null;
+          }
+        } else {
+          // PENDING or other states
+          setProgress({
+            percentage: 0,
+            message: 'Task is starting...',
+            status: 'pending',
+          });
+        }
+      } catch (error: any) {
+        console.error('Error polling task status:', error);
+        // Continue polling on error (might be temporary)
+        // Only show error after multiple consecutive failures
+        if (pollCount > 5) {
+          // Extract clean error message
+          let errorMsg = error.message || 'Unknown error';
+          if (errorMsg.includes('HTTP_ERROR')) {
+            // Try to extract the actual error from the response
+            errorMsg = errorMsg.replace(/^API Error \(\d+\): HTTP_ERROR - /, '').trim() || 'Server error';
+          }
+          setProgress({
+            percentage: 0,
+            message: `Error checking task status: ${errorMsg}`,
+            status: 'error',
+          });
+          // Stop polling after showing error
+          isStopped = true;
+          if (intervalId) {
+            clearInterval(intervalId);
+            intervalId = null;
+          }
+        }
+      }
+    };
+
+    // Start polling immediately, then every 2 seconds
+    pollTaskStatus();
+    intervalId = setInterval(() => {
+      if (!isStopped) {
+        pollTaskStatus();
+      }
+    }, 2000);
+
+    return () => {
+      isStopped = true;
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+      // Clear step transition timeout on cleanup
+      if (stepTransitionTimeoutRef.current) {
+        clearTimeout(stepTransitionTimeoutRef.current);
+        stepTransitionTimeoutRef.current = null;
+      }
+    };
+  }, [taskId, isOpen]);
+
+  const openModal = useCallback((newTaskId: string, newTitle: string) => {
+    // Clear any existing transition timeout
+    if (stepTransitionTimeoutRef.current) {
+      clearTimeout(stepTransitionTimeoutRef.current);
+      stepTransitionTimeoutRef.current = null;
+    }
+    displayedPercentageRef.current = 0;
+    currentStepRef.current = null;
+    setTaskId(newTaskId);
+    setTitle(newTitle);
+    setIsOpen(true);
+    setProgress({
+      percentage: 0,
+      message: 'Getting started...',
+      status: 'pending',
+    });
+  }, []);
+
+  const updateTaskId = useCallback((newTaskId: string) => {
+    setTaskId(newTaskId);
+    // Reset progress when updating to real task ID
+    setProgress({
+      percentage: 0,
+      message: 'Initializing...',
+      status: 'pending',
+    });
+  }, []);
+
+  const closeModal = useCallback(() => {
+    // Clear any existing transition timeout
+    if (stepTransitionTimeoutRef.current) {
+      clearTimeout(stepTransitionTimeoutRef.current);
+      stepTransitionTimeoutRef.current = null;
+    }
+    displayedPercentageRef.current = 0;
+    currentStepRef.current = null;
+    setIsOpen(false);
+    // Clear taskId to stop polling when modal closes
+    setTaskId(null);
+    setTitle('');
+  }, []);
+
+  const setError = useCallback((errorMessage: string) => {
+    setProgress({
+      percentage: 0,
+      message: errorMessage,
+      status: 'error',
+    });
+  }, []);
+
+  const reset = useCallback(() => {
+    // Clear any existing transition timeout
+    if (stepTransitionTimeoutRef.current) {
+      clearTimeout(stepTransitionTimeoutRef.current);
+      stepTransitionTimeoutRef.current = null;
+    }
+    displayedPercentageRef.current = 0;
+    currentStepRef.current = null;
+    setProgress({
+      percentage: 0,
+      message: 'Getting started...',
+      status: 'pending',
+    });
+    setTaskId(null);
+    setTitle('');
+    setIsOpen(false);
+  }, []);
+
+  return {
+    progress,
+    isOpen,
+    openModal,
+    updateTaskId,
+    closeModal,
+    setError,
+    reset,
+    title, // Expose title for use in component
+    taskId, // Expose taskId for use in ProgressModal
+  };
+}
+