117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import { Wand2 } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useWizardContext } from "@/hooks/useWizardContext";
|
|
import { toast } from "sonner";
|
|
import { translate } from "@/i18n";
|
|
|
|
interface MagicWizardButtonProps {
|
|
imageUrl: string;
|
|
imageTitle: string;
|
|
className?: string;
|
|
size?: "sm" | "default" | "lg" | "icon";
|
|
variant?: "default" | "ghost" | "outline";
|
|
onClick?: (e: React.MouseEvent) => void;
|
|
editingPostId?: string | null; // Explicitly pass the post ID if known, or null to prevent auto-detection
|
|
pictureId?: string; // Explicitly pass the picture ID if known
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const MagicWizardButton: React.FC<MagicWizardButtonProps> = ({
|
|
imageUrl,
|
|
imageTitle,
|
|
className = "",
|
|
size = "sm",
|
|
variant = "ghost",
|
|
onClick,
|
|
editingPostId: explicitPostId,
|
|
pictureId: explicitPictureId,
|
|
children
|
|
}) => {
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const { setWizardImage } = useWizardContext();
|
|
|
|
const handleClick = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (onClick) {
|
|
onClick(e);
|
|
return;
|
|
}
|
|
|
|
if (!user) {
|
|
toast.error(translate('Please sign in to use the AI wizard'));
|
|
return;
|
|
}
|
|
|
|
// Get the real picture ID from the URL path if available
|
|
const urlPath = window.location.pathname;
|
|
|
|
// Check if we are in a post context
|
|
// If explicitPostId is provided (even as null), use it.
|
|
// If it is undefined, try to infer from URL.
|
|
let editingPostId: string | null = null;
|
|
|
|
if (explicitPostId !== undefined) {
|
|
editingPostId = explicitPostId;
|
|
} else {
|
|
const postMatch = urlPath.match(/\/post\/([a-f0-9-]{36})/);
|
|
if (postMatch) {
|
|
editingPostId = postMatch[1];
|
|
}
|
|
}
|
|
|
|
let realPictureId = explicitPictureId || null;
|
|
|
|
// Only try to guess from URL if explicitPictureId is not provided
|
|
if (!realPictureId) {
|
|
const pictureIdMatch = urlPath.match(/\/post\/([a-f0-9-]{36})/);
|
|
realPictureId = pictureIdMatch ? pictureIdMatch[1] : null;
|
|
}
|
|
|
|
const imageData = {
|
|
id: realPictureId || `external-${Date.now()}`,
|
|
src: imageUrl,
|
|
title: imageTitle,
|
|
selected: true,
|
|
realDatabaseId: realPictureId // Store the real database ID separately
|
|
};
|
|
// Store in Zustand (replaces sessionStorage) with return path
|
|
setWizardImage(imageData, window.location.pathname);
|
|
// Navigate to wizard
|
|
// Note: navigationData is now maintained by Zustand - no manual storage needed!
|
|
navigate('/wizard', {
|
|
state: {
|
|
mode: 'default', // Keep default mode but passing editingPostId allows "Add to Post"
|
|
editingPostId: editingPostId
|
|
}
|
|
});
|
|
};
|
|
|
|
// Don't render if user is not logged in
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
size={size}
|
|
variant={variant}
|
|
onClick={handleClick}
|
|
className={`${className?.includes('p-0')
|
|
? 'text-foreground hover:text-primary transition-colors'
|
|
: 'text-foreground hover:text-primary transition-colors'
|
|
} ${className}`}
|
|
title={translate("Edit with AI Wizard")}
|
|
>
|
|
<Wand2 className={`${size === 'sm' ? 'h-6 w-6' : 'h-5 w-5'} ${className?.includes('p-0') ? '' : 'mr-1'} drop-shadow-sm`} />
|
|
{children}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default MagicWizardButton; |