1961 lines
70 KiB
TypeScript
1961 lines
70 KiB
TypeScript
import React, { useEffect } from "react";
|
||
import { fetchPostById } from '@/modules/posts/client-posts';
|
||
import { Button } from "@/components/ui/button";
|
||
import { useWizardContext } from "@/hooks/useWizardContext";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle
|
||
} from "@/components/ui/alert-dialog";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
Wand2,
|
||
Save,
|
||
ArrowLeft,
|
||
Plus,
|
||
Trash2
|
||
} from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import { useAuth } from "@/hooks/useAuth";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { createImage, editImage } from "@/lib/image-router";
|
||
import PublishDialog from "@/components/PublishDialog";
|
||
|
||
import { runTools } from "@/lib/openai";
|
||
import { T, translate } from "@/i18n";
|
||
import { DEFAULT_QUICK_ACTIONS, QuickAction as QuickActionType } from "@/constants";
|
||
import { PromptPreset } from "@/components/PresetManager";
|
||
import VoiceRecordingPopup from "@/components/VoiceRecordingPopup";
|
||
import { Workflow } from "@/components/WorkflowManager";
|
||
import { useLog } from "@/contexts/LogContext";
|
||
import LogViewer from "@/components/LogViewer";
|
||
import ImageLightbox from "@/components/ImageLightbox";
|
||
import { uploadInternalVideo } from '@/utils/uploadUtils';
|
||
import { ImageEditor } from "@/components/ImageEditor";
|
||
import EditImageModal from "@/components/EditImageModal";
|
||
import PostPicker from "@/components/PostPicker";
|
||
|
||
// Import types and handlers
|
||
import { ImageFile, ImageWizardProps } from "./ImageWizard/types";
|
||
import { getUserApiKeys as getUserSecrets } from "@/modules/user/client-user";
|
||
type QuickAction = QuickActionType; // Re-export for compatibility
|
||
import {
|
||
handleFileUpload,
|
||
toggleImageSelection as toggleImageSelectionUtil,
|
||
removeImageRequest,
|
||
confirmDeleteImage as confirmDeleteImageUtil,
|
||
setAsSelected as setAsSelectedUtil,
|
||
handleDownloadImage,
|
||
} from "./ImageWizard/handlers/imageHandlers";
|
||
import {
|
||
handleOptimizePrompt as handleOptimizePromptUtil,
|
||
buildFullPrompt,
|
||
abortGeneration,
|
||
} from "./ImageWizard/handlers/generationHandlers";
|
||
import {
|
||
publishImage as publishImageUtil,
|
||
quickPublishAsNew as quickPublishAsNewUtil,
|
||
publishToGallery as publishToGalleryUtil,
|
||
} from "./ImageWizard/handlers/publishHandlers";
|
||
import {
|
||
loadFamilyVersions as loadFamilyVersionsUtil,
|
||
loadAvailableImages as loadAvailableImagesUtil,
|
||
} from "./ImageWizard/handlers/dataHandlers";
|
||
// Settings handlers are now used via useUserSettings hook
|
||
import {
|
||
handleMicrophone as handleMicrophoneUtil,
|
||
handleVoiceToImage as handleVoiceToImageUtil,
|
||
} from "./ImageWizard/handlers/voiceHandlers";
|
||
import {
|
||
handleAgentGeneration as handleAgentGenerationUtil,
|
||
} from "./ImageWizard/handlers/agentHandlers";
|
||
import {
|
||
generateImageSplit as generateImageSplitUtil,
|
||
} from "./ImageWizard/handlers/promptHandlers";
|
||
import {
|
||
handleDragEnter,
|
||
handleDragOver,
|
||
handleDragLeave,
|
||
handleDrop,
|
||
} from "./ImageWizard/handlers/dropHandlers";
|
||
import {
|
||
WizardSidebar,
|
||
Prompt,
|
||
ImageGalleryPanel,
|
||
PostComposer,
|
||
} from "./ImageWizard/components";
|
||
import { createLogger } from "./ImageWizard/utils/logger";
|
||
import { useImageWizardState } from "./ImageWizard/hooks/useImageWizardState";
|
||
import * as wizardDb from "./ImageWizard/db";
|
||
import {
|
||
loadPromptTemplates,
|
||
savePromptTemplates,
|
||
loadPromptPresets,
|
||
loadWorkflows,
|
||
loadQuickActions,
|
||
saveQuickActions,
|
||
loadPromptHistory,
|
||
addToPromptHistory,
|
||
navigatePromptHistory,
|
||
savePromptPreset,
|
||
updatePromptPreset,
|
||
deletePromptPreset,
|
||
saveWorkflow,
|
||
updateWorkflow,
|
||
deleteWorkflow,
|
||
} from "./ImageWizard/handlers/settingsHandlers";
|
||
import { WizardProvider } from "./ImageWizard/context/WizardContext";
|
||
|
||
const ImageWizard: React.FC<ImageWizardProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
initialImages = [],
|
||
onPublish,
|
||
originalImageId,
|
||
mode = 'default',
|
||
initialPostTitle = "",
|
||
initialPostDescription = "",
|
||
editingPostId = undefined
|
||
}) => {
|
||
const { user } = useAuth();
|
||
const navigate = useNavigate();
|
||
const { addLog, isLoggerVisible, setLoggerVisible } = useLog();
|
||
|
||
// Create logger instance for this component
|
||
const logger = createLogger(addLog, 'ImageWizard');
|
||
|
||
|
||
|
||
|
||
// Don't render if not open
|
||
|
||
|
||
// Centralized state management - flat destructuring
|
||
const {
|
||
// Image state
|
||
images, setImages, availableImages, setAvailableImages, generatedImage, setGeneratedImage,
|
||
// Generation state
|
||
isGenerating, setIsGenerating, isAgentMode, setIsAgentMode, isSplitMode, setIsSplitMode,
|
||
isOptimizingPrompt, setIsOptimizingPrompt, abortControllerRef,
|
||
// UI state
|
||
dragIn, setDragIn, loadingImages, setLoadingImages, isPublishing, setIsPublishing,
|
||
dropZoneRef, dragLeaveTimeoutRef,
|
||
// Form state
|
||
prompt, setPrompt, postTitle, setPostTitle, postDescription, setPostDescription,
|
||
selectedModel, setSelectedModel,
|
||
// New state for Gemini 3 Pro
|
||
aspectRatio, setAspectRatio,
|
||
resolution, setResolution,
|
||
searchGrounding, setSearchGrounding,
|
||
// Dialog state
|
||
showDeleteConfirmDialog, setShowDeleteConfirmDialog, imageToDelete, setImageToDelete,
|
||
showSaveTemplateDialog, setShowSaveTemplateDialog, newTemplateName, setNewTemplateName,
|
||
showTemplateManager, setShowTemplateManager, showEditActionsDialog, setShowEditActionsDialog,
|
||
showLightboxPublishDialog, setShowLightboxPublishDialog, showVoicePopup, setShowVoicePopup,
|
||
// Lightbox state
|
||
lightboxOpen, setLightboxOpen, currentImageIndex, setCurrentImageIndex,
|
||
lightboxPrompt, setLightboxPrompt, selectedOriginalImageId, setSelectedOriginalImageId,
|
||
// Settings state
|
||
promptTemplates, setPromptTemplates, loadingTemplates, setLoadingTemplates,
|
||
promptPresets, setPromptPresets, selectedPreset, setSelectedPreset,
|
||
loadingPresets, setLoadingPresets, workflows, setWorkflows,
|
||
loadingWorkflows, setLoadingWorkflows, quickActions, setQuickActions,
|
||
editingActions, setEditingActions, loadingActions, setLoadingActions,
|
||
promptHistory, setPromptHistory, historyIndex, setHistoryIndex,
|
||
// Voice state
|
||
isRecording, setIsRecording, isTranscribing, setIsTranscribing,
|
||
mediaRecorderRef, audioChunksRef, voicePopupRef,
|
||
// Add editingPostId to destructuring
|
||
editingPostId: currentEditingPostId,
|
||
} = useImageWizardState(initialImages, initialPostTitle, initialPostDescription, editingPostId);
|
||
|
||
const [settings, setSettings] = React.useState<any>({ visibility: 'public' }); // Post settings
|
||
const [lastError, setLastError] = React.useState<string | null>(null);
|
||
|
||
// Auto-retry state for 503 "high demand" errors
|
||
const retryTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
const retryCountdownRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
|
||
const retryCountRef = React.useRef(0);
|
||
const isRetryCallRef = React.useRef(false);
|
||
const [retryInfo, setRetryInfo] = React.useState<{ attempt: number; secondsLeft: number } | null>(null);
|
||
|
||
const cancelRetry = React.useCallback(() => {
|
||
if (retryTimerRef.current) { clearTimeout(retryTimerRef.current); retryTimerRef.current = null; }
|
||
if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
|
||
retryCountRef.current = 0;
|
||
isRetryCallRef.current = false;
|
||
setRetryInfo(null);
|
||
}, []);
|
||
|
||
const scheduleRetry = React.useCallback((retryFn: () => void, errorMsg: string) => {
|
||
const MAX_RETRIES = 5;
|
||
const RETRY_SECS = 120;
|
||
if (retryCountRef.current >= MAX_RETRIES) {
|
||
retryCountRef.current = 0;
|
||
setLastError(`${errorMsg} — gave up after ${MAX_RETRIES} attempts`);
|
||
return;
|
||
}
|
||
retryCountRef.current++;
|
||
const attempt = retryCountRef.current;
|
||
let seconds = RETRY_SECS;
|
||
setRetryInfo({ attempt, secondsLeft: seconds });
|
||
retryCountdownRef.current = setInterval(() => {
|
||
seconds--;
|
||
if (seconds > 0) { setRetryInfo({ attempt, secondsLeft: seconds }); }
|
||
else if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
|
||
}, 1000);
|
||
retryTimerRef.current = setTimeout(() => {
|
||
if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
|
||
retryTimerRef.current = null;
|
||
setRetryInfo(null);
|
||
setLastError(null);
|
||
isRetryCallRef.current = true;
|
||
retryFn();
|
||
}, RETRY_SECS * 1000);
|
||
}, []);
|
||
|
||
// Cleanup retry on unmount
|
||
React.useEffect(() => () => cancelRetry(), [cancelRetry]);
|
||
|
||
// Editor and Settings state
|
||
const [editingImage, setEditingImage] = React.useState<{ url: string; id: string } | null>(null);
|
||
const [configuringImageId, setConfiguringImageId] = React.useState<{ id: string; title: string; description: string; visible: boolean } | null>(null);
|
||
const [showPostPicker, setShowPostPicker] = React.useState(false);
|
||
// const [isPublishing, setIsPublishing] = React.useState(false); // Using hook state or other defined state
|
||
useEffect(() => {
|
||
if (user?.id) {
|
||
loadPromptTemplates(user.id, setPromptTemplates, setLoadingTemplates);
|
||
loadPromptPresets(user.id, setPromptPresets, setLoadingPresets);
|
||
loadWorkflows(user.id, setWorkflows, setLoadingWorkflows);
|
||
loadQuickActions(user.id, setQuickActions, setLoadingActions, DEFAULT_QUICK_ACTIONS);
|
||
loadPromptHistory(user.id, setPromptHistory);
|
||
}
|
||
}, [user?.id]);
|
||
|
||
// Auto-upload effect for videos that come from share target (or other sources) without upload status
|
||
React.useEffect(() => {
|
||
// Find videos that have a file but no upload status (meaning they were just added via prop/state)
|
||
const pendingVideos = images.filter(img =>
|
||
img.type === 'video' &&
|
||
img.file &&
|
||
!img.uploadStatus
|
||
);
|
||
|
||
if (pendingVideos.length > 0) {
|
||
console.log('Found pending videos for upload:', pendingVideos.length);
|
||
|
||
pendingVideos.forEach(async (video) => {
|
||
if (!video.file || !user?.id) return;
|
||
|
||
// Mark as uploading immediately
|
||
setImages(prev => prev.map(img =>
|
||
img.id === video.id ? { ...img, uploadStatus: 'uploading', uploadProgress: 0 } : img
|
||
));
|
||
|
||
try {
|
||
// Perform upload
|
||
await uploadInternalVideo(video.file, user.id, (progress) => {
|
||
setImages(prev => prev.map(img =>
|
||
img.id === video.id ? { ...img, uploadProgress: progress } : img
|
||
));
|
||
}).then(data => {
|
||
setImages(prev => prev.map(img =>
|
||
img.id === video.id ? {
|
||
...img,
|
||
id: data.dbId || video.id, // Update ID to DB ID
|
||
realDatabaseId: data.dbId,
|
||
uploadStatus: 'ready',
|
||
src: data.thumbnailUrl || video.src || '',
|
||
} : img
|
||
));
|
||
toast.success(translate('Video uploaded successfully'));
|
||
});
|
||
} catch (err) {
|
||
console.error("Auto-upload video failed", err);
|
||
setImages(prev => prev.map(img =>
|
||
img.id === video.id ? { ...img, uploadStatus: 'error' } : img
|
||
));
|
||
toast.error(translate('Failed to upload video'));
|
||
}
|
||
});
|
||
}
|
||
}, [images, user?.id, setImages]);
|
||
|
||
// Drop zone handlers are used directly from imported functions
|
||
|
||
// Load initial image from Zustand store (replaces sessionStorage)
|
||
const { wizardInitialImage } = useWizardContext();
|
||
|
||
useEffect(() => {
|
||
if (wizardInitialImage) {
|
||
setImages(prev => {
|
||
// Load family versions for this image first, then add the initial image
|
||
if (wizardInitialImage.realDatabaseId) {
|
||
// Check the current selection status from database for this image
|
||
wizardDb.getImageSelectionStatus(wizardInitialImage.realDatabaseId)
|
||
.then((isSelected) => {
|
||
const updatedImageData = { ...wizardInitialImage, selected: isSelected };
|
||
setImages(currentImages => {
|
||
// Check if image already exists to avoid duplicates
|
||
const exists = currentImages.find(img => img.id === updatedImageData.id);
|
||
if (exists) return currentImages;
|
||
return [...currentImages, updatedImageData];
|
||
});
|
||
});
|
||
loadFamilyVersions([wizardInitialImage]);
|
||
} else {
|
||
// For non-database images, just add as is
|
||
const exists = prev.find(img => img.id === wizardInitialImage.id);
|
||
if (!exists) {
|
||
return [...prev, wizardInitialImage];
|
||
}
|
||
}
|
||
return prev;
|
||
});
|
||
|
||
// Clear wizard image after loading (optional - keep it if you want to persist)
|
||
// clearWizardImage();
|
||
}
|
||
}, [wizardInitialImage]);
|
||
|
||
// Load complete family versions when initial images are provided
|
||
useEffect(() => {
|
||
if (initialImages.length > 0) {
|
||
loadFamilyVersions(initialImages);
|
||
}
|
||
}, [initialImages]);
|
||
|
||
// Load available images from user and others
|
||
useEffect(() => {
|
||
loadAvailableImages();
|
||
}, []);
|
||
|
||
// Settings are now loaded in useUserSettings hook
|
||
|
||
// Use extracted handlers with local state
|
||
const loadFamilyVersions = (parentImages: ImageFile[]) =>
|
||
loadFamilyVersionsUtil(parentImages, setImages, logger);
|
||
|
||
const loadAvailableImages = () =>
|
||
loadAvailableImagesUtil(setAvailableImages, setLoadingImages);
|
||
|
||
// Template operations
|
||
const applyTemplate = (template: string) => {
|
||
if (lightboxOpen) {
|
||
setLightboxPrompt(template);
|
||
} else {
|
||
setPrompt(template);
|
||
}
|
||
};
|
||
|
||
const deleteTemplate = async (index: number) => {
|
||
if (!user?.id) {
|
||
toast.error(translate('User not authenticated'));
|
||
return;
|
||
}
|
||
const newTemplates = promptTemplates.filter((_, i) => i !== index);
|
||
await savePromptTemplates(user.id, newTemplates);
|
||
setPromptTemplates(newTemplates);
|
||
};
|
||
|
||
const executeWorkflow = async (workflow: Workflow) => {
|
||
if (!user) {
|
||
toast.error(translate('User not authenticated'));
|
||
return;
|
||
}
|
||
toast.info(`🔄 Executing workflow: ${workflow.name}`);
|
||
logger.info(`Starting workflow: ${workflow.name} (${workflow.actions.length} actions)`);
|
||
try {
|
||
for (let i = 0; i < workflow.actions.length; i++) {
|
||
const action = workflow.actions[i];
|
||
toast.info(`⚙️ Step ${i + 1}/${workflow.actions.length}: ${action.label}`);
|
||
logger.info(`Workflow step ${i + 1}: ${action.label} (${action.type})`);
|
||
|
||
switch (action.type) {
|
||
case 'optimize_prompt':
|
||
await handleOptimizePrompt();
|
||
break;
|
||
|
||
case 'generate_image':
|
||
await generateImage();
|
||
break;
|
||
|
||
case 'generate_metadata':
|
||
// Generate title and description using AI
|
||
if (prompt.trim()) {
|
||
const apiKey = await wizardDb.getUserOpenAIKey(user.id);
|
||
|
||
const result = await runTools({
|
||
prompt: `Generate a title and description for this image prompt: "${prompt}"`,
|
||
preset: 'metadata-only',
|
||
apiKey,
|
||
});
|
||
|
||
const metadataToolCall = result.toolCalls?.find(
|
||
tc => 'function' in tc && tc.function?.name === 'generate_image_metadata'
|
||
);
|
||
|
||
if (metadataToolCall && 'function' in metadataToolCall) {
|
||
const metadata = JSON.parse(metadataToolCall.function.arguments || '{}');
|
||
if (metadata.title) setPostTitle(metadata.title);
|
||
if (metadata.description) setPostDescription(metadata.description);
|
||
}
|
||
}
|
||
break;
|
||
|
||
case 'quick_publish':
|
||
await quickPublishAsNew();
|
||
break;
|
||
|
||
/* Removed publish_to_gallery from workflow actions as it's not supported in type */
|
||
|
||
case 'download_image':
|
||
if (images.length > 0) {
|
||
const lastImage = images[images.length - 1];
|
||
await handleDownloadImage(lastImage);
|
||
}
|
||
break;
|
||
|
||
case 'enhance_image':
|
||
if (images.filter(img => img.selected).length > 0) {
|
||
setPrompt('Enhance and improve this image with better quality and details');
|
||
await generateImage();
|
||
}
|
||
break;
|
||
|
||
case 'apply_style':
|
||
if (images.filter(img => img.selected).length > 0) {
|
||
setPrompt('Apply artistic style transformation to this image');
|
||
await generateImage();
|
||
}
|
||
break;
|
||
}
|
||
|
||
// Small delay between actions
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
}
|
||
toast.success(`✅ Workflow "${workflow.name}" completed successfully!`);
|
||
logger.success(`Workflow "${workflow.name}" completed successfully`);
|
||
} catch (error: any) {
|
||
console.error('Error executing workflow:', error);
|
||
logger.error(`Workflow "${workflow.name}" failed: ${error.message}`);
|
||
toast.error(`Workflow failed: ${error.message}`);
|
||
}
|
||
};
|
||
|
||
|
||
const handleSaveCurrentPromptAsTemplate = () => {
|
||
const currentPrompt = lightboxOpen ? lightboxPrompt : prompt;
|
||
if (!currentPrompt.trim()) {
|
||
toast.error(translate('Please enter a prompt first'));
|
||
return;
|
||
}
|
||
setShowSaveTemplateDialog(true);
|
||
};
|
||
|
||
const confirmSaveTemplate = async () => {
|
||
if (!newTemplateName.trim()) {
|
||
toast.error(translate('Please enter a template name'));
|
||
return;
|
||
}
|
||
|
||
if (!user?.id) {
|
||
toast.error(translate('User not authenticated'));
|
||
return;
|
||
}
|
||
|
||
const currentPrompt = lightboxOpen ? lightboxPrompt : prompt;
|
||
const newTemplates = [...promptTemplates, { name: newTemplateName.trim(), template: currentPrompt }];
|
||
await savePromptTemplates(user.id, newTemplates);
|
||
setPromptTemplates(newTemplates);
|
||
setNewTemplateName("");
|
||
setShowSaveTemplateDialog(false);
|
||
};
|
||
|
||
const toggleImageSelection = (imageId: string, isMultiSelect = false, fromGallery = false) =>
|
||
toggleImageSelectionUtil(imageId, isMultiSelect, fromGallery, availableImages, images, setImages);
|
||
|
||
const removeImage = (imageId: string) =>
|
||
removeImageRequest(imageId, setImageToDelete, setShowDeleteConfirmDialog);
|
||
|
||
const confirmDeleteImage = () =>
|
||
confirmDeleteImageUtil(imageToDelete, setImages, setImageToDelete, setShowDeleteConfirmDialog, initialImages, loadFamilyVersions);
|
||
|
||
const deleteSelectedImages = () => {
|
||
const selectedImages = images.filter(img => img.selected);
|
||
if (selectedImages.length === 0) {
|
||
toast.error(translate('No images selected'));
|
||
return;
|
||
}
|
||
|
||
// Show confirmation for bulk delete
|
||
const count = selectedImages.length;
|
||
setShowDeleteConfirmDialog(true);
|
||
setImageToDelete(`bulk:${count}`); // Special marker for bulk delete
|
||
};
|
||
|
||
const confirmBulkDelete = () => {
|
||
const selectedImages = images.filter(img => img.selected);
|
||
const selectedIds = selectedImages.map(img => img.id);
|
||
|
||
// Remove all selected images
|
||
setImages(prev => prev.filter(img => !selectedIds.includes(img.id)));
|
||
|
||
toast.success(translate(`${selectedImages.length} image(s) deleted`));
|
||
logger.info(`Deleted ${selectedImages.length} selected images`);
|
||
|
||
setShowDeleteConfirmDialog(false);
|
||
setImageToDelete(null);
|
||
};
|
||
|
||
const setAsSelected = (imageId: string) =>
|
||
setAsSelectedUtil(imageId, images, setImages, initialImages, loadFamilyVersions);
|
||
|
||
const handleMicrophone = () =>
|
||
handleMicrophoneUtil(
|
||
isRecording,
|
||
mediaRecorderRef,
|
||
setIsRecording,
|
||
setIsTranscribing,
|
||
audioChunksRef,
|
||
lightboxOpen,
|
||
setLightboxPrompt,
|
||
setPrompt
|
||
);
|
||
|
||
const handleOptimizePrompt = () =>
|
||
handleOptimizePromptUtil(
|
||
lightboxOpen ? lightboxPrompt : prompt,
|
||
lightboxOpen,
|
||
setLightboxPrompt,
|
||
setPrompt,
|
||
setIsOptimizingPrompt
|
||
);
|
||
|
||
const handleVoiceTranscription = (transcribedText: string) => {
|
||
setPrompt(transcribedText);
|
||
toast.success(translate('Voice transcribed successfully!'));
|
||
};
|
||
|
||
const handlePresetSelect = (preset: PromptPreset) => {
|
||
setSelectedPreset(preset);
|
||
toast.success(`Preset "${preset.name}" activated as context`);
|
||
};
|
||
|
||
const handlePresetClear = () => {
|
||
setSelectedPreset(null);
|
||
toast.info(translate('Preset context cleared'));
|
||
};
|
||
|
||
const handleVoiceToImage = (transcribedText: string) =>
|
||
handleVoiceToImageUtil(
|
||
transcribedText,
|
||
user?.id,
|
||
selectedPreset,
|
||
selectedModel,
|
||
setPrompt,
|
||
setImages,
|
||
setPostTitle,
|
||
setPostDescription,
|
||
voicePopupRef,
|
||
logger
|
||
);
|
||
|
||
const handleAgentGeneration = () =>
|
||
handleAgentGenerationUtil(
|
||
prompt,
|
||
user?.id,
|
||
buildFullPrompt(selectedPreset, prompt),
|
||
selectedModel,
|
||
setIsAgentMode,
|
||
setIsGenerating,
|
||
setImages,
|
||
setPostTitle,
|
||
setPostDescription,
|
||
logger
|
||
);
|
||
|
||
|
||
const handlePublishToGallery = async () => {
|
||
await publishToGalleryUtil({
|
||
user: user,
|
||
generatedImage: typeof generatedImage === 'string' ? generatedImage : (generatedImage as any)?.src || null,
|
||
images: images,
|
||
lightboxOpen: lightboxOpen,
|
||
currentImageIndex: currentImageIndex,
|
||
postTitle: '',
|
||
postDescription: '',
|
||
prompt: prompt,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
onPublish: (url) => {
|
||
// No navigation needed for gallery publish, maybe just stay or go specific place?
|
||
// For now stay in wizard or close? Implementation plan said "Verify success message" so staying might be fine, but closing is better UX usually.
|
||
// Let's close.
|
||
onClose();
|
||
navigate('/'); // Or to gallery view if possible
|
||
}
|
||
}, setIsPublishing);
|
||
};
|
||
|
||
const handleAppendToPost = () => {
|
||
setShowPostPicker(true);
|
||
};
|
||
|
||
const handlePostSelected = async (postId: string) => {
|
||
setShowPostPicker(false);
|
||
|
||
// Switch to edit mode for this post
|
||
// This logic mimics CreationWizardPopup's handlePostSelected
|
||
try {
|
||
const toastId = toast.loading(translate('Loading post...'));
|
||
|
||
// Fetch full post via API (returns FeedPost with pictures)
|
||
const post = await fetchPostById(postId);
|
||
|
||
if (!post) throw new Error('Post not found');
|
||
|
||
// Transform existing pictures
|
||
const existingImages = (post.pictures || [])
|
||
.sort((a: any, b: any) => ((a.position || 0) - (b.position || 0)))
|
||
.map((p: any) => ({
|
||
id: p.id,
|
||
path: p.id,
|
||
src: p.image_url,
|
||
title: p.title,
|
||
description: p.description || '',
|
||
selected: false,
|
||
realDatabaseId: p.id,
|
||
type: p.type || 'image',
|
||
isGenerated: false
|
||
}));
|
||
|
||
// Merge current wizard images as new
|
||
const newImages = images.map(img => ({
|
||
...img,
|
||
selected: true
|
||
}));
|
||
|
||
const combinedImages = [...existingImages, ...newImages];
|
||
|
||
setImages(combinedImages);
|
||
setPostTitle(post.title);
|
||
setPostDescription(post.description || '');
|
||
|
||
navigate('/wizard', {
|
||
state: {
|
||
mode: 'post',
|
||
editingPostId: postId,
|
||
initialImages: combinedImages,
|
||
postTitle: post.title,
|
||
postDescription: post.description
|
||
},
|
||
replace: true
|
||
});
|
||
|
||
toast.dismiss(toastId);
|
||
toast.success(translate('Switched to post editing mode'));
|
||
|
||
} catch (err) {
|
||
console.error("Error loading post for append:", err);
|
||
toast.error(translate('Failed to load post'));
|
||
}
|
||
};
|
||
|
||
|
||
|
||
const executeQuickAction = (action: QuickAction) => {
|
||
const selectedImages = images.filter(img => img.selected);
|
||
if (selectedImages.length === 0) {
|
||
toast.error(translate('Please select at least one image for this action'));
|
||
return;
|
||
}
|
||
setPrompt(action.prompt);
|
||
};
|
||
|
||
const openEditActionsDialog = () => {
|
||
setEditingActions([...quickActions]);
|
||
setShowEditActionsDialog(true);
|
||
};
|
||
|
||
const addQuickAction = () => {
|
||
const newAction: QuickAction = {
|
||
id: `action_${Date.now()}`,
|
||
name: 'New Action',
|
||
prompt: '',
|
||
icon: '⭐'
|
||
};
|
||
setEditingActions([...editingActions, newAction]);
|
||
};
|
||
|
||
const updateQuickAction = (id: string, field: keyof QuickAction, value: string) => {
|
||
setEditingActions(editingActions.map(action =>
|
||
action.id === id ? { ...action, [field]: value } : action
|
||
));
|
||
};
|
||
|
||
const deleteQuickAction = (id: string) => {
|
||
setEditingActions(editingActions.filter(action => action.id !== id));
|
||
};
|
||
|
||
const saveEditedActions = async () => {
|
||
// Validate
|
||
const invalid = editingActions.find(a => !a.name.trim() || !a.prompt.trim());
|
||
if (invalid) {
|
||
toast.error(translate('All actions must have a name and prompt'));
|
||
return;
|
||
}
|
||
|
||
if (!user?.id) {
|
||
toast.error(translate('User not authenticated'));
|
||
return;
|
||
}
|
||
|
||
await saveQuickActions(user.id, editingActions);
|
||
setQuickActions(editingActions);
|
||
setShowEditActionsDialog(false);
|
||
};
|
||
|
||
const handleLightboxPromptSubmit = async (promptText: string) => {
|
||
if (!lightboxOpen || currentImageIndex >= images.length) return;
|
||
|
||
// Set the prompt and get the current lightbox image for editing
|
||
setPrompt(promptText);
|
||
|
||
const targetImage = images[currentImageIndex];
|
||
if (targetImage) {
|
||
|
||
// Store current lightbox state
|
||
const wasLightboxOpen = lightboxOpen;
|
||
|
||
// Directly pass the target image to avoid state timing issues
|
||
await generateImageWithSpecificImage(promptText, targetImage);
|
||
setLightboxPrompt(""); // Clear the lightbox prompt
|
||
|
||
// Keep lightbox open if it was open during generation
|
||
if (wasLightboxOpen && !lightboxOpen) {
|
||
setLightboxOpen(true);
|
||
}
|
||
}
|
||
};
|
||
|
||
const openLightbox = (index: number) => {
|
||
setCurrentImageIndex(index);
|
||
setLightboxOpen(true);
|
||
|
||
// Set the parent ID for version creation when opening lightbox
|
||
const currentImage = images[index];
|
||
let parentId = null;
|
||
|
||
if (currentImage) {
|
||
// If this image has a parentForNewVersions (from version map), use that
|
||
if (currentImage.parentForNewVersions) {
|
||
parentId = currentImage.parentForNewVersions;
|
||
}
|
||
// If this is the initial image from a database post, use its real ID
|
||
else if (currentImage.realDatabaseId) {
|
||
parentId = currentImage.realDatabaseId;
|
||
}
|
||
// If this is a saved image (has UUID), use it as parent
|
||
else if (currentImage.id && currentImage.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)) {
|
||
parentId = currentImage.id;
|
||
}
|
||
// Otherwise, find the first non-generated image in the array
|
||
else {
|
||
const originalImage = images.find(img => !img.isGenerated && img.id && img.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
|
||
parentId = originalImage?.id || null;
|
||
}
|
||
}
|
||
|
||
setSelectedOriginalImageId(parentId);
|
||
|
||
// Pre-populate lightbox prompt with main prompt for quick publish context
|
||
// Only if lightbox prompt is empty to avoid overwriting user's edits
|
||
if (!lightboxPrompt.trim() && prompt.trim()) {
|
||
setLightboxPrompt(prompt);
|
||
}
|
||
};
|
||
|
||
// Auto-update lightbox when images change
|
||
useEffect(() => {
|
||
if (lightboxOpen && currentImageIndex >= images.length && images.length > 0) {
|
||
// If current index is out of bounds, go to the last image (newest)
|
||
const newIndex = images.length - 1;
|
||
setCurrentImageIndex(newIndex);
|
||
}
|
||
}, [images.length, lightboxOpen, currentImageIndex]);
|
||
|
||
const generateImageWithSpecificImage = async (promptText: string, targetImage: ImageFile) => {
|
||
if (!isRetryCallRef.current) { cancelRetry(); }
|
||
isRetryCallRef.current = false;
|
||
setIsGenerating(true);
|
||
setLastError(null);
|
||
try {
|
||
|
||
let result: { imageData: ArrayBuffer; text?: string } | null = null;
|
||
|
||
// Resolve correct API key for the selected provider
|
||
let apiKey: string | undefined = undefined;
|
||
if (user?.id) {
|
||
const secrets = await getUserSecrets(user.id);
|
||
if (secrets) {
|
||
const provider = selectedModel.split('/')[0]?.toLowerCase();
|
||
switch (provider) {
|
||
case 'aimlapi': apiKey = secrets.aimlapi_api_key; break;
|
||
case 'replicate': apiKey = secrets.replicate_api_key; break;
|
||
case 'bria': apiKey = secrets.bria_api_key; break;
|
||
default: apiKey = secrets.google_api_key; break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Edit the specific target image
|
||
if (targetImage.file) {
|
||
result = await editImage(
|
||
promptText,
|
||
[targetImage.file],
|
||
selectedModel,
|
||
apiKey,
|
||
aspectRatio,
|
||
resolution,
|
||
searchGrounding
|
||
);
|
||
} else {
|
||
// Convert any image source (data URL or HTTP URL) to File for editing
|
||
try {
|
||
const response = await fetch(targetImage.src);
|
||
const blob = await response.blob();
|
||
const file = new File([blob], targetImage.title || 'image.png', {
|
||
type: blob.type || 'image/png'
|
||
});
|
||
result = await editImage(
|
||
promptText,
|
||
[file],
|
||
selectedModel,
|
||
apiKey,
|
||
aspectRatio,
|
||
resolution,
|
||
searchGrounding
|
||
);
|
||
} catch (error) {
|
||
console.error('Error converting image:', error);
|
||
toast.error(translate('Failed to convert image for editing'));
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (result) {
|
||
// Convert ArrayBuffer to base64 data URL
|
||
const uint8Array = new Uint8Array(result.imageData);
|
||
const blob = new Blob([uint8Array], { type: 'image/png' });
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = () => {
|
||
const dataUrl = reader.result as string;
|
||
|
||
// Add generated image to the images list and auto-select it
|
||
const newImage: ImageFile = {
|
||
id: `generated-${Date.now()}`,
|
||
src: dataUrl,
|
||
title: promptText.substring(0, 50) + (promptText.length > 50 ? '...' : ''),
|
||
selected: true,
|
||
isGenerated: true,
|
||
aiText: result.text, // Store AI description
|
||
parentForNewVersions: targetImage.parentForNewVersions || targetImage.realDatabaseId || (targetImage.id && /^[0-9a-f]{8}-/.test(targetImage.id) ? targetImage.id : undefined)
|
||
};
|
||
const newIndex = images.length; // Calculate the new index BEFORE updating state
|
||
|
||
// Deselect all other images and add the new one as selected
|
||
setImages(prev => {
|
||
const updated = [...prev.map(img => ({ ...img, selected: false })), newImage];
|
||
|
||
// If lightbox is open, update to show the new image immediately after state update
|
||
if (lightboxOpen) {
|
||
// Use setTimeout to ensure React has processed the state update
|
||
setTimeout(() => {
|
||
setCurrentImageIndex(newIndex);
|
||
}, 50); // Reduced timeout
|
||
}
|
||
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
reader.readAsDataURL(blob);
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Error generating image:', error);
|
||
const errMsg = error?.message || String(error);
|
||
// Extract meaningful message from GoogleGenerativeAI errors
|
||
// Pattern: "[GoogleGenerativeAI Error]: Error fetching from <url>: [503 ] Actual message"
|
||
const httpMatch = errMsg.match(/\[\d{3}\s*\]\s*(.+)/s);
|
||
const userMessage = httpMatch ? httpMatch[1].trim() : errMsg.replace(/\[GoogleGenerativeAI Error\][:\s]*/i, '').trim();
|
||
setLastError(userMessage || 'Failed to generate image');
|
||
// Auto-retry for "high demand" / rate-limit errors
|
||
if (userMessage.toLowerCase().includes('later')) {
|
||
scheduleRetry(() => generateImageWithSpecificImage(promptText, targetImage), userMessage);
|
||
} else {
|
||
toast.error(userMessage || translate('Failed to generate image'));
|
||
}
|
||
} finally {
|
||
setIsGenerating(false);
|
||
}
|
||
};
|
||
|
||
const generateImageSplit = async () => {
|
||
await generateImageSplitUtil(
|
||
prompt,
|
||
images,
|
||
selectedModel,
|
||
abortControllerRef,
|
||
setIsGenerating,
|
||
setImages,
|
||
async (promptText: string) => {
|
||
if (user?.id) {
|
||
await addToPromptHistory(user.id, promptText, setPromptHistory, setHistoryIndex);
|
||
}
|
||
},
|
||
logger
|
||
);
|
||
};
|
||
|
||
const generateImage = async () => {
|
||
const fullPrompt = buildFullPrompt(selectedPreset, prompt);
|
||
|
||
if (!fullPrompt.trim()) {
|
||
toast.error(translate('Please enter a prompt'));
|
||
return;
|
||
}
|
||
|
||
// Add to history before generating
|
||
if (prompt.trim() && user?.id) {
|
||
await addToPromptHistory(user.id, prompt.trim(), setPromptHistory, setHistoryIndex);
|
||
}
|
||
|
||
// Create new abort controller
|
||
abortControllerRef.current = new AbortController();
|
||
|
||
// Clear retry state only for manual triggers (not auto-retries)
|
||
if (!isRetryCallRef.current) { cancelRetry(); }
|
||
isRetryCallRef.current = false;
|
||
setLastError(null);
|
||
setIsGenerating(true);
|
||
logger.info(`Starting image generation with prompt: "${fullPrompt.substring(0, 50)}..."`);
|
||
// Create placeholder image with loading state
|
||
const placeholderId = `placeholder-${Date.now()}`;
|
||
const placeholderImage: ImageFile = {
|
||
id: placeholderId,
|
||
src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', // Transparent pixel — spinner overlay provides visual
|
||
title: 'Generating...',
|
||
selected: false,
|
||
isGenerated: false,
|
||
};
|
||
// Remember which images were selected before we deselect for the placeholder
|
||
const previouslySelectedIds = images.filter(img => img.selected).map(img => img.id);
|
||
setImages(prev => [...prev.map(img => ({ ...img, selected: false })), placeholderImage]);
|
||
|
||
try {
|
||
// Check if aborted
|
||
if (abortControllerRef.current.signal.aborted) {
|
||
// Remove placeholder on abort
|
||
setImages(prev => prev.filter(img => img.id !== placeholderId));
|
||
return;
|
||
}
|
||
|
||
// Get API Key – resolve the correct key based on the selected model's provider
|
||
let apiKey: string | undefined = undefined;
|
||
if (user?.id) {
|
||
const secrets = await getUserSecrets(user.id);
|
||
if (secrets) {
|
||
const provider = selectedModel.split('/')[0]?.toLowerCase();
|
||
switch (provider) {
|
||
case 'aimlapi': apiKey = secrets.aimlapi_api_key; break;
|
||
case 'replicate': apiKey = secrets.replicate_api_key; break;
|
||
case 'bria': apiKey = secrets.bria_api_key; break;
|
||
default: apiKey = secrets.google_api_key; break;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
const selectedImages = images.filter(img => img.selected);
|
||
|
||
let result: { imageData: ArrayBuffer; text?: string } | null = null;
|
||
|
||
if (selectedImages.length > 0) {
|
||
// Edit existing images - ensure we have File objects for ALL selected images
|
||
const files = selectedImages
|
||
.map(img => img.file)
|
||
.filter((file): file is File => file !== undefined);
|
||
|
||
// Check if ALL selected images have File objects
|
||
if (files.length === selectedImages.length) {
|
||
// All images have files, use them directly
|
||
result = await editImage(
|
||
fullPrompt,
|
||
files,
|
||
selectedModel,
|
||
apiKey,
|
||
aspectRatio,
|
||
resolution,
|
||
searchGrounding
|
||
);
|
||
} else {
|
||
// Some images don't have File objects, convert all from src to ensure consistency
|
||
const convertedFiles: File[] = [];
|
||
for (const img of selectedImages) {
|
||
try {
|
||
const response = await fetch(img.src);
|
||
const blob = await response.blob();
|
||
const file = new File([blob], img.title || 'image.png', {
|
||
type: blob.type || 'image/png'
|
||
});
|
||
convertedFiles.push(file);
|
||
} catch (error) {
|
||
console.error('Error converting image:', img.title, error);
|
||
}
|
||
}
|
||
|
||
if (convertedFiles.length > 0) {
|
||
result = await editImage(
|
||
fullPrompt,
|
||
convertedFiles,
|
||
selectedModel,
|
||
apiKey,
|
||
aspectRatio,
|
||
resolution,
|
||
searchGrounding
|
||
);
|
||
} else {
|
||
toast.error(translate('Failed to convert selected images for editing'));
|
||
return;
|
||
}
|
||
}
|
||
} else {
|
||
// Generate new image
|
||
result = await createImage(
|
||
fullPrompt,
|
||
selectedModel,
|
||
apiKey,
|
||
aspectRatio,
|
||
resolution,
|
||
searchGrounding
|
||
);
|
||
}
|
||
|
||
if (result) {
|
||
logger.success('Image generated successfully');
|
||
// Convert ArrayBuffer to base64 data URL
|
||
const uint8Array = new Uint8Array(result.imageData);
|
||
const blob = new Blob([uint8Array], { type: 'image/png' });
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = () => {
|
||
const dataUrl = reader.result as string;
|
||
setGeneratedImage(dataUrl);
|
||
|
||
// Determine parent ID inheritance from selected image (if any)
|
||
let inheritedParentId: string | undefined;
|
||
if (selectedImages.length === 1) {
|
||
// If selected image is a Real DB image, it becomes the parent.
|
||
// If it's a generated image that has a parent pointer, we inherit that (sibling/child logic).
|
||
// However, strictly speaking, if we edit 'A', 'B' is a child of 'A'.
|
||
// But if 'A' is unsaved, we can't link to it. We fall back to 'A's parent if available.
|
||
inheritedParentId = selectedImages[0].realDatabaseId || selectedImages[0].parentForNewVersions;
|
||
}
|
||
|
||
// Add generated image to the images list and auto-select it
|
||
const newImage: ImageFile = {
|
||
id: `generated-${Date.now()}`,
|
||
src: dataUrl,
|
||
title: (selectedPreset ? `[${selectedPreset.name}] ` : '') + prompt.substring(0, 40) + (prompt.length > 40 ? '...' : ''),
|
||
selected: true,
|
||
isGenerated: true,
|
||
aiText: result.text, // Store AI description
|
||
parentForNewVersions: inheritedParentId // Propagate parent ID
|
||
};
|
||
logger.debug(`Added new image: ${newImage.title}`);
|
||
const newIndex = images.length; // Calculate the new index BEFORE updating state
|
||
|
||
// Replace placeholder with actual image
|
||
setImages(prev => {
|
||
const withoutPlaceholder = prev.filter(img => img.id !== placeholderId);
|
||
const updated = [...withoutPlaceholder.map(img => ({ ...img, selected: false })), newImage];
|
||
|
||
// If lightbox is open, update to show the new image immediately after state update
|
||
if (lightboxOpen) {
|
||
// Use setTimeout to ensure React has processed the state update
|
||
setTimeout(() => {
|
||
setCurrentImageIndex(newIndex);
|
||
}, 50); // Reduced timeout
|
||
}
|
||
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
reader.readAsDataURL(blob);
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Error generating image:', error);
|
||
const errMsg = error?.message || String(error);
|
||
logger.error(`Failed to generate image: ${errMsg}`);
|
||
// Extract meaningful message from GoogleGenerativeAI errors
|
||
// Pattern: "[GoogleGenerativeAI Error]: Error fetching from <url>: [503 ] Actual message"
|
||
const httpMatch = errMsg.match(/\[\d{3}\s*\]\s*(.+)/s);
|
||
const userMessage = httpMatch ? httpMatch[1].trim() : errMsg.replace(/\[GoogleGenerativeAI Error\][:\s]*/i, '').trim();
|
||
setLastError(userMessage || 'Failed to generate image');
|
||
// Auto-retry for "high demand" / rate-limit errors
|
||
if (userMessage.toLowerCase().includes('later')) {
|
||
scheduleRetry(() => generateImage(), userMessage);
|
||
} else {
|
||
toast.error(userMessage || translate('Failed to generate image'));
|
||
}
|
||
// Remove placeholder on error and restore previous selection
|
||
setImages(prev => prev
|
||
.filter(img => img.id !== placeholderId)
|
||
.map(img => ({ ...img, selected: previouslySelectedIds.includes(img.id) }))
|
||
);
|
||
} finally {
|
||
setIsGenerating(false);
|
||
}
|
||
};
|
||
|
||
const publishImage = () =>
|
||
publishImageUtil(
|
||
{
|
||
user,
|
||
generatedImage,
|
||
images,
|
||
lightboxOpen,
|
||
currentImageIndex,
|
||
postTitle,
|
||
prompt,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
onPublish,
|
||
},
|
||
setIsPublishing
|
||
);
|
||
|
||
// Quick publish function that uses prompt as description
|
||
const quickPublishAsNew = () =>
|
||
quickPublishAsNewUtil(
|
||
{
|
||
user,
|
||
generatedImage,
|
||
images,
|
||
lightboxOpen,
|
||
currentImageIndex,
|
||
postTitle,
|
||
prompt,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
onPublish,
|
||
},
|
||
setIsPublishing
|
||
);
|
||
|
||
const handleAddToPost = async (imageSrc: string, title: string, description?: string) => {
|
||
if (!currentEditingPostId) {
|
||
toast.error("No active post to add to");
|
||
return;
|
||
}
|
||
|
||
if (!user) {
|
||
toast.error(translate('User not authenticated'));
|
||
return;
|
||
}
|
||
|
||
setIsPublishing(true);
|
||
try {
|
||
// Fetch the image
|
||
const response = await fetch(imageSrc);
|
||
const blob = await response.blob();
|
||
|
||
await wizardDb.publishImageToPost({
|
||
userId: user.id,
|
||
blob,
|
||
title: title || prompt, // Fallback to prompt if no title
|
||
description: description,
|
||
postId: currentEditingPostId,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
collectionIds: []
|
||
});
|
||
// Navigate back success
|
||
navigate(`/post/${currentEditingPostId}`);
|
||
} catch (error: any) {
|
||
console.error('Error adding to post:', error);
|
||
|
||
// Reset loading state
|
||
if (currentImageIndex !== -1) {
|
||
setImages(prev => {
|
||
const newImgs = [...prev];
|
||
// Only reset if it still exists at that index (simple check)
|
||
if (newImgs[currentImageIndex]) {
|
||
newImgs[currentImageIndex] = { ...newImgs[currentImageIndex], isAddingToPost: false };
|
||
}
|
||
return newImgs;
|
||
});
|
||
}
|
||
|
||
if (error.code === '23503') {
|
||
toast.error(translate('Could not add to this post. The post might have been deleted or the link is invalid.'));
|
||
} else {
|
||
toast.error(translate('Failed to add image to post'));
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleLightboxPublish = async (option: 'overwrite' | 'new' | 'version' | 'add-to-post', imageUrl: string, title: string, description?: string, parentId?: string, collectionIds?: string[]) => {
|
||
if (!user) {
|
||
toast.error(translate('User not authenticated'));
|
||
return;
|
||
}
|
||
|
||
if (currentImageIndex >= images.length) {
|
||
toast.error(translate('No image selected'));
|
||
return;
|
||
}
|
||
|
||
const currentImage = images[currentImageIndex];
|
||
if (!currentImage) {
|
||
toast.error(translate('No image available to publish'));
|
||
return;
|
||
}
|
||
|
||
// Handle Add to Post
|
||
if (option === 'add-to-post' && currentEditingPostId) {
|
||
await handleAddToPost(currentImage.src, title, description);
|
||
setShowLightboxPublishDialog(false);
|
||
return;
|
||
}
|
||
|
||
setIsPublishing(true);
|
||
try {
|
||
// Convert image to blob for upload
|
||
const response = await fetch(currentImage.src);
|
||
const blob = await response.blob();
|
||
|
||
if (option === 'overwrite') {
|
||
toast.info(translate('Overwrite not supported in wizard, creating new image instead'));
|
||
option = 'new';
|
||
}
|
||
|
||
if (option === 'new') {
|
||
await wizardDb.publishImageAsNew({
|
||
userId: user.id,
|
||
blob,
|
||
title,
|
||
description,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
collectionIds,
|
||
});
|
||
} else if (option === 'version' && parentId) {
|
||
await wizardDb.publishImageAsVersion({
|
||
userId: user.id,
|
||
blob,
|
||
title,
|
||
description,
|
||
parentId,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
collectionIds,
|
||
});
|
||
} else if (option === 'version' && !parentId) {
|
||
toast.info(translate('No parent image found, creating as new post instead'));
|
||
// Recursive call with 'new'
|
||
// FIX: call self but ensure we don't loop if logic is wrong.
|
||
// Here it changes option to 'new', so it should be fine.
|
||
// We need to re-call handleLightboxPublish logic essentially.
|
||
// For simplicity, just run the new logic here:
|
||
await wizardDb.publishImageAsNew({
|
||
userId: user.id,
|
||
blob,
|
||
title,
|
||
description,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
collectionIds,
|
||
});
|
||
}
|
||
|
||
setShowLightboxPublishDialog(false);
|
||
// Only navigate/close if NOT "Add to Post" (which handled navigation)
|
||
// For standard publish, we usually close wizard or call onPublish prop
|
||
onPublish?.(currentImage.src, lightboxPrompt);
|
||
} catch (error) {
|
||
console.error('Error publishing image:', error);
|
||
toast.error(translate('Failed to publish image'));
|
||
} finally {
|
||
setIsPublishing(false);
|
||
}
|
||
};
|
||
|
||
const handleEditImage = (index: number) => {
|
||
const img = images[index];
|
||
if (img) {
|
||
setEditingImage({ url: img.src, id: img.realDatabaseId || img.id });
|
||
}
|
||
};
|
||
|
||
const handleConfigureImage = (index: number) => {
|
||
const img = images[index];
|
||
if (img && img.realDatabaseId) {
|
||
setConfiguringImageId({
|
||
id: img.realDatabaseId,
|
||
title: img.title,
|
||
description: img.aiText || null,
|
||
visible: true // Default
|
||
});
|
||
} else {
|
||
toast.error(translate("Please save the image first to configure settings"));
|
||
}
|
||
};
|
||
|
||
// Prepare context value
|
||
const contextValue = {
|
||
// User
|
||
userId: user?.id,
|
||
|
||
// Images
|
||
images,
|
||
setImages,
|
||
availableImages,
|
||
generatedImage,
|
||
|
||
// Generation state
|
||
isGenerating,
|
||
isAgentMode,
|
||
isSplitMode,
|
||
setIsSplitMode,
|
||
isOptimizingPrompt,
|
||
|
||
// Form state
|
||
prompt,
|
||
setPrompt,
|
||
postTitle,
|
||
setPostTitle,
|
||
selectedModel,
|
||
setSelectedModel,
|
||
aspectRatio,
|
||
setAspectRatio,
|
||
resolution,
|
||
setResolution,
|
||
searchGrounding,
|
||
setSearchGrounding,
|
||
|
||
// Settings
|
||
selectedPreset,
|
||
promptPresets,
|
||
loadingPresets,
|
||
workflows,
|
||
loadingWorkflows,
|
||
promptTemplates,
|
||
quickActions,
|
||
|
||
// Prompt history
|
||
promptHistory,
|
||
historyIndex,
|
||
setHistoryIndex,
|
||
|
||
// Voice
|
||
isRecording,
|
||
isTranscribing,
|
||
|
||
// UI state
|
||
isPublishing,
|
||
dragIn,
|
||
setDragIn,
|
||
loadingImages,
|
||
dragLeaveTimeoutRef,
|
||
|
||
// Actions - Image operations
|
||
toggleImageSelection,
|
||
openLightbox,
|
||
setAsSelected,
|
||
removeImage,
|
||
deleteSelectedImages,
|
||
|
||
// Actions - Generation
|
||
generateImage,
|
||
generateImageSplit,
|
||
handleAgentGeneration,
|
||
handleOptimizePrompt,
|
||
handleMicrophone,
|
||
|
||
// Actions - Settings
|
||
handlePresetSelect,
|
||
handlePresetClear,
|
||
savePreset: async (preset: Omit<PromptPreset, 'id' | 'createdAt'>) => {
|
||
if (user?.id) await savePromptPreset(user.id, preset, setPromptPresets);
|
||
},
|
||
updatePreset: async (id: string, preset: Omit<PromptPreset, 'id' | 'createdAt'>) => {
|
||
if (user?.id) await updatePromptPreset(user.id, id, preset, setPromptPresets);
|
||
},
|
||
deletePreset: async (id: string) => {
|
||
if (user?.id) await deletePromptPreset(user.id, id, setPromptPresets);
|
||
},
|
||
|
||
saveWorkflow: async (workflow: Omit<Workflow, 'id' | 'createdAt'>) => {
|
||
if (user?.id) await saveWorkflow(user.id, workflow, setWorkflows);
|
||
},
|
||
updateWorkflow: async (id: string, workflow: Omit<Workflow, 'id' | 'createdAt'>) => {
|
||
if (user?.id) await updateWorkflow(user.id, id, workflow, setWorkflows);
|
||
},
|
||
deleteWorkflow: async (id: string) => {
|
||
if (user?.id) await deleteWorkflow(user.id, id, setWorkflows);
|
||
},
|
||
executeWorkflow,
|
||
|
||
applyTemplate,
|
||
deleteTemplate,
|
||
handleSaveCurrentPromptAsTemplate,
|
||
|
||
executeQuickAction,
|
||
openEditActionsDialog,
|
||
|
||
navigateHistory: (direction: 'up' | 'down') =>
|
||
navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setPrompt),
|
||
|
||
// Actions - Publishing
|
||
quickPublishAsNew,
|
||
publishImage,
|
||
|
||
// Actions - Misc
|
||
setShowVoicePopup,
|
||
|
||
// Logger
|
||
logger,
|
||
|
||
// Add To Post State
|
||
currentEditingPostId,
|
||
handleAddToPost: (imageSrc: string) => handleAddToPost(imageSrc, postTitle || prompt, postDescription)
|
||
};
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<WizardProvider value={contextValue}>
|
||
{/* Editor Overlay */}
|
||
{editingImage && (
|
||
<div className="fixed inset-0 z-[60] bg-background">
|
||
<ImageEditor
|
||
imageUrl={editingImage.url}
|
||
pictureId={editingImage.id}
|
||
onClose={() => setEditingImage(null)}
|
||
onSave={(newUrl) => {
|
||
setImages(prev => prev.map(img =>
|
||
(img.id === editingImage.id || img.realDatabaseId === editingImage.id)
|
||
? { ...img, src: newUrl, isGenerated: false }
|
||
: img
|
||
));
|
||
setEditingImage(null);
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Settings Modal */}
|
||
{configuringImageId && (
|
||
<EditImageModal
|
||
open={!!configuringImageId}
|
||
onOpenChange={(open) => !open && setConfiguringImageId(null)}
|
||
pictureId={configuringImageId.id}
|
||
currentTitle={configuringImageId.title}
|
||
currentDescription={configuringImageId.description}
|
||
currentVisible={configuringImageId.visible}
|
||
imageUrl={images.find(i => i.realDatabaseId === configuringImageId.id)?.src}
|
||
onUpdateSuccess={() => {
|
||
setConfiguringImageId(null);
|
||
toast.success(translate("Image settings updated"));
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
<div className="space-y-4 p-2 md:space-y-6">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2 md:gap-3">
|
||
<Button variant="ghost" size="sm" onClick={onClose} className="h-10 w-10 md:h-9 md:w-9 p-0 touch-manipulation">
|
||
<ArrowLeft className="h-5 w-5 md:h-4 md:w-4" />
|
||
</Button>
|
||
<div className="flex items-center gap-2">
|
||
<Wand2 className="h-5 w-5 md:h-6 md:w-6 text-primary" />
|
||
<h1 className="text-xl md:text-2xl font-bold">
|
||
{mode === 'post' ? <T>Post Wizard</T> : <T>AI Image Wizard</T>}
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Unified Lightbox Component */}
|
||
<ImageLightbox
|
||
isOpen={lightboxOpen && images.length > 0}
|
||
onClose={() => setLightboxOpen(false)}
|
||
imageUrl={images[currentImageIndex]?.src || ''}
|
||
imageTitle={images[currentImageIndex]?.title || 'Generated Image'}
|
||
originalImageId={selectedOriginalImageId || undefined}
|
||
onPromptSubmit={(promptText) => handleLightboxPromptSubmit(promptText)}
|
||
onPublish={handleLightboxPublish}
|
||
isGenerating={isGenerating}
|
||
isPublishing={isPublishing}
|
||
showPrompt={true}
|
||
showPublish={images[currentImageIndex]?.isGenerated}
|
||
generatedImageUrl={undefined}
|
||
currentIndex={currentImageIndex}
|
||
totalCount={images.length}
|
||
onNavigate={(direction) => {
|
||
const newIndex = direction === 'next' ? currentImageIndex + 1 : currentImageIndex - 1;
|
||
if (newIndex >= 0 && newIndex < images.length) {
|
||
setCurrentImageIndex(newIndex);
|
||
}
|
||
}}
|
||
// Wizard features
|
||
showWizardFeatures={true}
|
||
promptTemplates={promptTemplates}
|
||
onApplyTemplate={(template) => setLightboxPrompt(template)}
|
||
onSaveTemplate={handleSaveCurrentPromptAsTemplate}
|
||
onDeleteTemplate={deleteTemplate}
|
||
onOptimizePrompt={handleOptimizePrompt}
|
||
isOptimizing={isOptimizingPrompt}
|
||
onMicrophoneToggle={handleMicrophone}
|
||
isRecording={isRecording}
|
||
isTranscribing={isTranscribing}
|
||
showQuickPublish={images[currentImageIndex]?.isGenerated && lightboxPrompt.trim().length > 0}
|
||
onQuickPublish={quickPublishAsNew}
|
||
prompt={lightboxPrompt}
|
||
onPromptChange={setLightboxPrompt}
|
||
// Prompt history
|
||
promptHistory={promptHistory}
|
||
historyIndex={historyIndex}
|
||
onNavigateHistory={(direction) => navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setLightboxPrompt)}
|
||
onManualPromptEdit={() => setHistoryIndex(-1)}
|
||
/>
|
||
</div>
|
||
|
||
{/* Logger Panel - Collapsible */}
|
||
{isLoggerVisible && (
|
||
<div className="mb-4 md:mb-6">
|
||
<div className="h-48 md:h-64">
|
||
<LogViewer onClose={() => setLoggerVisible(false)} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className={mode === 'post' ? "h-[calc(100vh-140px)]" : "grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6"}>
|
||
{mode === 'post' ? (
|
||
<PostComposer
|
||
images={images}
|
||
setImages={setImages}
|
||
onRemoveImage={removeImage}
|
||
onFileUpload={(event) => handleFileUpload(event, setImages, user)}
|
||
dropZoneRef={dropZoneRef}
|
||
isDragging={dragIn}
|
||
onDragEnter={(e) => handleDragEnter(e, dragLeaveTimeoutRef, setDragIn)}
|
||
onDragOver={(e) => handleDragOver(e, dragIn, setDragIn)}
|
||
onDragLeave={(e) => handleDragLeave(e, dragLeaveTimeoutRef, setDragIn)}
|
||
onDrop={(e) => handleDrop(e, dragLeaveTimeoutRef, setDragIn, setImages, user)}
|
||
postTitle={postTitle}
|
||
setPostTitle={setPostTitle}
|
||
postDescription={postDescription}
|
||
setPostDescription={setPostDescription}
|
||
isEditing={!!currentEditingPostId}
|
||
postId={currentEditingPostId}
|
||
settings={settings}
|
||
setSettings={setSettings}
|
||
onPublish={() => {
|
||
// Auto-inject link into settings if present
|
||
const externalPage = images.find(img => img.type === 'page-external');
|
||
const publishSettings = { ...settings };
|
||
|
||
if (externalPage && externalPage.path && !publishSettings.link) {
|
||
publishSettings.link = externalPage.path;
|
||
}
|
||
|
||
publishImageUtil({
|
||
user: user,
|
||
generatedImage: typeof generatedImage === 'string' ? generatedImage : (generatedImage as any)?.src || null,
|
||
images: images,
|
||
lightboxOpen: lightboxOpen,
|
||
currentImageIndex: currentImageIndex,
|
||
postTitle: postTitle,
|
||
postDescription: postDescription,
|
||
settings: publishSettings, // Pass enriched settings
|
||
prompt: prompt,
|
||
isOrgContext: false,
|
||
orgSlug: null,
|
||
publishAll: mode === 'post',
|
||
editingPostId: currentEditingPostId,
|
||
onPublish: (url, postId) => {
|
||
onClose();
|
||
// If we have a postId (passed as 2nd arg for posts), navigate to it
|
||
if (postId && (mode === 'post' || currentEditingPostId)) {
|
||
navigate(`/post/${postId}`);
|
||
} else {
|
||
navigate('/');
|
||
}
|
||
}
|
||
}, setIsPublishing);
|
||
}}
|
||
onPublishToGallery={handlePublishToGallery}
|
||
onAppendToPost={handleAppendToPost}
|
||
isPublishing={isPublishing}
|
||
/>
|
||
) : (
|
||
<>
|
||
{/* Left Panel - Controls */}
|
||
<WizardSidebar
|
||
selectedModel={selectedModel}
|
||
onModelChange={setSelectedModel}
|
||
aspectRatio={aspectRatio}
|
||
onAspectRatioChange={setAspectRatio}
|
||
resolution={resolution}
|
||
onResolutionChange={setResolution}
|
||
searchGrounding={searchGrounding}
|
||
onSearchGroundingChange={setSearchGrounding}
|
||
selectedPreset={selectedPreset}
|
||
presets={promptPresets}
|
||
loadingPresets={loadingPresets}
|
||
onPresetSelect={handlePresetSelect}
|
||
onPresetClear={handlePresetClear}
|
||
onSavePreset={(preset) => user?.id && savePromptPreset(user.id, preset, setPromptPresets)}
|
||
onUpdatePreset={(id, preset) => user?.id && updatePromptPreset(user.id, id, preset, setPromptPresets)}
|
||
onDeletePreset={(id) => user?.id && deletePromptPreset(user.id, id, setPromptPresets)}
|
||
workflows={workflows}
|
||
loadingWorkflows={loadingWorkflows}
|
||
onSaveWorkflow={(workflow) => user?.id && saveWorkflow(user.id, workflow, setWorkflows)}
|
||
onUpdateWorkflow={(id, workflow) => user?.id && updateWorkflow(user.id, id, workflow, setWorkflows)}
|
||
onDeleteWorkflow={(id) => user?.id && deleteWorkflow(user.id, id, setWorkflows)}
|
||
onExecuteWorkflow={executeWorkflow}
|
||
isGenerating={isGenerating}
|
||
isAgentMode={isAgentMode}
|
||
isSplitMode={isSplitMode}
|
||
prompt={prompt}
|
||
onGenerate={generateImage}
|
||
onGenerateSplit={generateImageSplit}
|
||
onAgentGenerate={handleAgentGeneration}
|
||
onVoiceGenerate={() => setShowVoicePopup(true)}
|
||
onAbort={() => { cancelRetry(); abortGeneration(abortControllerRef, setIsGenerating, setIsAgentMode, setImages, logger); }}
|
||
images={images}
|
||
generatedImage={generatedImage}
|
||
postTitle={postTitle}
|
||
onPostTitleChange={setPostTitle}
|
||
isPublishing={isPublishing}
|
||
onQuickPublish={quickPublishAsNew}
|
||
onPublish={() => setShowLightboxPublishDialog(true)}
|
||
onPublishToGallery={handlePublishToGallery}
|
||
onAppendToPost={handleAppendToPost}
|
||
onAddToPost={() => {
|
||
const currentImage = images[images.length - 1]; // Default to most recent for sidebar action
|
||
if (currentImage) handleAddToPost(currentImage.src, postTitle || prompt, postDescription)
|
||
}}
|
||
editingPostId={currentEditingPostId}
|
||
lastError={lastError}
|
||
retryInfo={retryInfo}
|
||
onDismissError={() => { cancelRetry(); setLastError(null); }}
|
||
>
|
||
<Prompt
|
||
prompt={prompt}
|
||
onPromptChange={setPrompt}
|
||
isSplitMode={isSplitMode}
|
||
onSplitModeChange={setIsSplitMode}
|
||
selectedPreset={selectedPreset}
|
||
templates={promptTemplates}
|
||
onApplyTemplate={applyTemplate}
|
||
onSaveTemplate={handleSaveCurrentPromptAsTemplate}
|
||
onDeleteTemplate={deleteTemplate}
|
||
onOptimizePrompt={handleOptimizePrompt}
|
||
isOptimizing={isOptimizingPrompt}
|
||
onMicrophoneToggle={handleMicrophone}
|
||
isRecording={isRecording}
|
||
isTranscribing={isTranscribing}
|
||
promptHistory={promptHistory}
|
||
historyIndex={historyIndex}
|
||
onNavigateHistory={(direction) => navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setPrompt)}
|
||
onManualEdit={() => setHistoryIndex(-1)}
|
||
isGenerating={isGenerating}
|
||
onGenerate={generateImage}
|
||
onImagePaste={(image) => setImages(prev => [...prev, image])}
|
||
/>
|
||
</WizardSidebar>
|
||
|
||
{/* Right Panel - Images */}
|
||
<ImageGalleryPanel
|
||
images={images}
|
||
onImageClick={toggleImageSelection}
|
||
onImageDoubleClick={openLightbox}
|
||
onFileUpload={(event) => handleFileUpload(event, setImages, user)}
|
||
onDeleteSelected={deleteSelectedImages}
|
||
onDownload={handleDownloadImage}
|
||
onSetAsSelected={setAsSelected}
|
||
onSaveAsVersion={(img, idx) => {
|
||
setCurrentImageIndex(idx);
|
||
const currentImage = images[idx];
|
||
let parentId = null;
|
||
|
||
if (currentImage.parentForNewVersions) {
|
||
parentId = currentImage.parentForNewVersions;
|
||
} else if (currentImage.realDatabaseId) {
|
||
parentId = currentImage.realDatabaseId;
|
||
} else {
|
||
const originalImage = images.find(img => !img.isGenerated && img.id && img.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
|
||
parentId = originalImage?.id || null;
|
||
}
|
||
|
||
setSelectedOriginalImageId(parentId);
|
||
setShowLightboxPublishDialog(true);
|
||
}}
|
||
onEdit={handleEditImage}
|
||
onRemove={removeImage}
|
||
availableImages={availableImages}
|
||
loadingImages={loadingImages}
|
||
onGalleryImageSelect={(imageId, isMultiSelect) => toggleImageSelection(imageId, isMultiSelect, true)}
|
||
quickActions={quickActions}
|
||
onExecuteAction={executeQuickAction}
|
||
onEditActions={openEditActionsDialog}
|
||
onSettings={handleConfigureImage}
|
||
isGenerating={isGenerating}
|
||
dragIn={dragIn}
|
||
onDragEnter={(e) => handleDragEnter(e, dragLeaveTimeoutRef, setDragIn)}
|
||
onDragOver={(e) => handleDragOver(e, dragIn, setDragIn)}
|
||
onDragLeave={(e) => handleDragLeave(e, dragLeaveTimeoutRef, setDragIn)}
|
||
onDrop={(e) => handleDrop(e, dragLeaveTimeoutRef, setDragIn, setImages, user)}
|
||
dropZoneRef={dropZoneRef}
|
||
onAddToPost={(image) => handleAddToPost(image.src, postTitle || prompt, postDescription)}
|
||
editingPostId={currentEditingPostId}
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<Dialog open={showPostPicker} onOpenChange={setShowPostPicker}>
|
||
<DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col">
|
||
<DialogHeader>
|
||
<DialogTitle><T>Select a Post to Append To</T></DialogTitle>
|
||
<DialogDescription>
|
||
<T>Choose one of your existing posts to add these images to.</T>
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="flex-1 overflow-hidden min-h-0">
|
||
<PostPicker onSelect={handlePostSelected} />
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Lightbox Publish Dialog */}
|
||
{/* Delete Confirmation Dialog */}
|
||
<AlertDialog open={showDeleteConfirmDialog} onOpenChange={setShowDeleteConfirmDialog}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>
|
||
{imageToDelete?.startsWith('bulk:') ? (
|
||
<T>Delete Multiple Images</T>
|
||
) : (
|
||
<T>Delete Image Version</T>
|
||
)}
|
||
</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
{imageToDelete?.startsWith('bulk:') ? (
|
||
<>
|
||
<T>Are you sure you want to delete {imageToDelete.split(':')[1]} selected image(s)? This action cannot be undone.</T>
|
||
</>
|
||
) : (
|
||
<T>Are you sure you want to delete this image version? This action cannot be undone and will permanently remove the image from your account.</T>
|
||
)}
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel onClick={() => setShowDeleteConfirmDialog(false)}>
|
||
<T>Cancel</T>
|
||
</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={imageToDelete?.startsWith('bulk:') ? confirmBulkDelete : confirmDeleteImage}
|
||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||
>
|
||
<T>Delete</T>
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
<PublishDialog
|
||
isOpen={showLightboxPublishDialog}
|
||
onClose={() => setShowLightboxPublishDialog(false)}
|
||
onPublish={(option, title, description, parentId, collectionIds) => {
|
||
const currentImage = images[currentImageIndex];
|
||
if (currentImage) {
|
||
// Now accepts 'add-to-post' as option
|
||
handleLightboxPublish(option as any, currentImage.src, title || '', description, parentId, collectionIds);
|
||
}
|
||
}}
|
||
originalTitle={images[currentImageIndex]?.title || 'Generated Image'}
|
||
originalImageId={selectedOriginalImageId || (originalImageId && originalImageId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i) ? originalImageId : undefined)}
|
||
isPublishing={isPublishing}
|
||
editingPostId={currentEditingPostId} // Pass prop
|
||
/>
|
||
|
||
{/* Save Template Dialog */}
|
||
<Dialog open={showSaveTemplateDialog} onOpenChange={setShowSaveTemplateDialog}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle><T>Save Prompt Template</T></DialogTitle>
|
||
<DialogDescription>
|
||
<T>Give your prompt template a name to save it for later use.</T>
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium"><T>Template Name</T></label>
|
||
<Input
|
||
value={newTemplateName}
|
||
onChange={(e) => setNewTemplateName(e.target.value)}
|
||
placeholder={translate("e.g. Cyberpunk Portrait")}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
confirmSaveTemplate();
|
||
}
|
||
}}
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-muted-foreground"><T>Prompt Preview</T></label>
|
||
<div className="text-sm p-3 bg-muted rounded-md max-h-32 overflow-y-auto">
|
||
{lightboxOpen ? lightboxPrompt : prompt}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setShowSaveTemplateDialog(false)}>
|
||
<T>Cancel</T>
|
||
</Button>
|
||
<Button onClick={confirmSaveTemplate} disabled={!newTemplateName.trim()}>
|
||
<Save className="h-4 w-4 mr-2" />
|
||
<T>Save Template</T>
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Voice Recording Popup */}
|
||
<VoiceRecordingPopup
|
||
ref={voicePopupRef}
|
||
isOpen={showVoicePopup}
|
||
onClose={() => setShowVoicePopup(false)}
|
||
onTranscriptionComplete={handleVoiceTranscription}
|
||
onGenerateImage={handleVoiceToImage}
|
||
showToolCalls={true}
|
||
/>
|
||
|
||
{/* Edit Quick Actions Dialog */}
|
||
<Dialog open={showEditActionsDialog} onOpenChange={setShowEditActionsDialog}>
|
||
<DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle><T>Edit Quick Actions</T></DialogTitle>
|
||
<DialogDescription>
|
||
<T>Customize the quick actions that appear above your images. Add, edit, or remove actions.</T>
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-3 py-4">
|
||
{editingActions.map((action, index) => (
|
||
<div key={action.id} className="flex gap-2 items-start p-3 bg-muted/50 rounded-lg border">
|
||
<Input
|
||
placeholder="Icon (emoji)"
|
||
value={action.icon}
|
||
onChange={(e) => updateQuickAction(action.id, 'icon', e.target.value)}
|
||
className="w-16 text-center"
|
||
maxLength={2}
|
||
/>
|
||
<Input
|
||
placeholder="Name"
|
||
value={action.name}
|
||
onChange={(e) => updateQuickAction(action.id, 'name', e.target.value)}
|
||
className="flex-1"
|
||
maxLength={30}
|
||
/>
|
||
<Input
|
||
placeholder="Prompt"
|
||
value={action.prompt}
|
||
onChange={(e) => updateQuickAction(action.id, 'prompt', e.target.value)}
|
||
className="flex-[2]"
|
||
maxLength={200}
|
||
/>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => deleteQuickAction(action.id)}
|
||
className="h-9 w-9 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
|
||
title="Delete action"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
))}
|
||
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={addQuickAction}
|
||
className="w-full"
|
||
>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
<T>Add Quick Action</T>
|
||
</Button>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={() => {
|
||
setShowEditActionsDialog(false);
|
||
setEditingActions([]);
|
||
}}
|
||
>
|
||
<T>Cancel</T>
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
setEditingActions(DEFAULT_QUICK_ACTIONS);
|
||
}}
|
||
variant="secondary"
|
||
>
|
||
<T>Reset to Defaults</T>
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={saveEditedActions}
|
||
>
|
||
<Save className="w-4 h-4 mr-2" />
|
||
<T>Save Actions</T>
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
</div>
|
||
</WizardProvider >
|
||
);
|
||
};
|
||
|
||
export default ImageWizard; |