Updated iamge prompt flow adn frotnend backend

frontend/src/pages/Writer/Content.tsx

@@ -3,7 +3,7 @@
  * Displays content from Content table with filters and pagination
  */
 
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
   fetchContent,
@@ -16,6 +16,8 @@ import { FileIcon } from '../../icons';
 import { createContentPageConfig } from '../../config/pages/content.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
+import ProgressModal from '../../components/common/ProgressModal';
+import { useProgressModal } from '../../hooks/useProgressModal';
 
 export default function Content() {
   const toast = useToast();
@@ -41,6 +43,10 @@ export default function Content() {
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
   const [showContent, setShowContent] = useState(false);
 
+  // Progress modal for AI functions
+  const progressModal = useProgressModal();
+  const hasReloadedRef = useRef(false);
+
   // Load content - wrapped in useCallback
   const loadContent = useCallback(async () => {
     setLoading(true);
@@ -152,9 +158,16 @@ export default function Content() {
         const result = await generateImagePrompts([row.id]);
         if (result.success) {
           if (result.task_id) {
-            toast.success('Image prompts generation started');
+            // Open progress modal for async task
+            progressModal.openModal(
+              result.task_id,
+              'Generate Image Prompts',
+              'ai-generate-image-prompts-01-desktop'
+            );
           } else {
+            // Synchronous completion
             toast.success(`Image prompts generated: ${result.prompts_created || 0} prompt${(result.prompts_created || 0) === 1 ? '' : 's'} created`);
+            loadContent(); // Reload to show new prompts
           }
         } else {
           toast.error(result.error || 'Failed to generate image prompts');
@@ -163,7 +176,7 @@ export default function Content() {
         toast.error(`Failed to generate prompts: ${error.message}`);
       }
     }
-  }, [toast]);
+  }, [toast, progressModal, loadContent]);
 
   return (
     <>
@@ -207,6 +220,30 @@ export default function Content() {
         onRowAction={handleRowAction}
         getItemDisplayName={(row: ContentType) => row.meta_title || row.title || `Content #${row.id}`}
       />
+
+      {/* Progress Modal for AI Functions */}
+      <ProgressModal
+        isOpen={progressModal.isOpen}
+        title={progressModal.title}
+        percentage={progressModal.progress.percentage}
+        status={progressModal.progress.status}
+        message={progressModal.progress.message}
+        details={progressModal.progress.details}
+        taskId={progressModal.taskId || undefined}
+        functionId={progressModal.functionId}
+        onClose={() => {
+          const wasCompleted = progressModal.progress.status === 'completed';
+          progressModal.closeModal();
+          // Reload data after modal closes (if completed)
+          if (wasCompleted && !hasReloadedRef.current) {
+            hasReloadedRef.current = true;
+            loadContent();
+            setTimeout(() => {
+              hasReloadedRef.current = false;
+            }, 1000);
+          }
+        }}
+      />
     </>
   );
 }