Updated iamge prompt flow adn frotnend backend

frontend/src/components/common/ContentImageCell.tsx

@@ -0,0 +1,150 @@
+/**
+ * ContentImageCell Component
+ * Displays image prompt, placeholder, or actual image based on status
+ */
+import React, { useState } from 'react';
+import Badge from '../ui/badge/Badge';
+
+export interface ContentImageData {
+  id?: number;
+  image_type?: string;
+  image_url?: string | null;
+  image_path?: string | null;
+  prompt?: string | null;
+  status: string;
+  position?: number;
+  created_at?: string;
+  updated_at?: string;
+}
+
+interface ContentImageCellProps {
+  image: ContentImageData | null;
+  maxPromptLength?: number;
+}
+
+export default function ContentImageCell({ image, maxPromptLength = 100 }: ContentImageCellProps) {
+  const [showFullPrompt, setShowFullPrompt] = useState(false);
+
+  if (!image) {
+    return (
+      <div className="text-gray-400 dark:text-gray-500 text-sm">-</div>
+    );
+  }
+
+  const prompt = image.prompt || '';
+  const shouldTruncate = prompt.length > maxPromptLength;
+  const displayPrompt = showFullPrompt || !shouldTruncate ? prompt : `${prompt.substring(0, maxPromptLength)}...`;
+
+  return (
+    <div className="space-y-2">
+      {/* Prompt Text */}
+      {prompt && (
+        <div className="text-sm">
+          <p className="text-gray-700 dark:text-gray-300">
+            {displayPrompt}
+            {shouldTruncate && (
+              <button
+                onClick={() => setShowFullPrompt(!showFullPrompt)}
+                className="ml-1 text-brand-500 hover:text-brand-600 text-xs"
+              >
+                {showFullPrompt ? 'Show less' : 'Show more'}
+              </button>
+            )}
+          </p>
+        </div>
+      )}
+
+      {/* Image Display */}
+      <div className="relative">
+        {image.status === 'pending' && (
+          <div className="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
+            <div className="text-center">
+              <svg
+                className="w-8 h-8 mx-auto text-gray-400 dark:text-gray-500 mb-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              <p className="text-xs text-gray-500 dark:text-gray-400">Pending</p>
+            </div>
+          </div>
+        )}
+
+        {image.status === 'generated' && image.image_url && (
+          <a
+            href={image.image_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block group"
+          >
+            <img
+              src={image.image_url}
+              alt={prompt || 'Generated image'}
+              className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600 group-hover:opacity-80 transition-opacity"
+              onError={(e) => {
+                // Fallback to placeholder if image fails to load
+                const target = e.target as HTMLImageElement;
+                target.style.display = 'none';
+                target.parentElement!.innerHTML = `
+                  <div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
+                    <p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p>
+                  </div>
+                `;
+              }}
+            />
+          </a>
+        )}
+
+        {image.status === 'generated' && !image.image_url && (
+          <div className="w-full h-24 bg-yellow-100 dark:bg-yellow-900/20 rounded border border-yellow-300 dark:border-yellow-700 flex items-center justify-center">
+            <p className="text-xs text-yellow-700 dark:text-yellow-400">No URL available</p>
+          </div>
+        )}
+
+        {image.status === 'failed' && (
+          <div className="w-full h-24 bg-red-100 dark:bg-red-900/20 rounded border border-red-300 dark:border-red-700 flex items-center justify-center">
+            <div className="text-center">
+              <svg
+                className="w-6 h-6 mx-auto text-red-500 mb-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <p className="text-xs text-red-700 dark:text-red-400">Failed</p>
+            </div>
+          </div>
+        )}
+
+        {/* Status Badge */}
+        <div className="absolute top-1 right-1">
+          <Badge
+            color={
+              image.status === 'generated' ? 'success' :
+              image.status === 'failed' ? 'error' :
+              'warning'
+            }
+            size="xs"
+            variant="light"
+          >
+            {image.status}
+          </Badge>
+        </div>
+      </div>
+    </div>
+  );
+}
+