Add advanced generation options with Explicit and Smart modes

- Implemented `AdvancedGenerationOptions` component for toggling Explicit and Smart modes with confirmation dialogs.
- Integrated generation options into `GhostWriter`, `DraftCompanion`, and `ShortStoryGenerator`.
- Introduced `ToggleWithConfirmation` component for user interaction with alerts.
- Updated `InputField` to support centered alignment for better layout flexibility.
- Localized Explicit and Smart mode strings in English and French.
- Enhanced content preview logic to filter placeholder text before display.
- Added `autoUpdater` initialization checks and refactored updater setup for improved reliability.
This commit is contained in:
natreex
2026-01-17 23:26:22 -05:00
parent 0020b3abbd
commit c62a7eb0f7
11 changed files with 335 additions and 34 deletions

View File

@@ -26,6 +26,9 @@ export default function QSTextGeneratedPreview(
const [mounted, setMounted] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const t = useTranslations();
const filteredValue: string = value.replace(/^starting\.{0,3}\s*/i, '').trim();
const hasRealContent: boolean = filteredValue.length > 0;
useEffect((): () => void => {
setMounted(true);
@@ -83,21 +86,46 @@ export default function QSTextGeneratedPreview(
<div className="flex-1 p-5 overflow-auto custom-scrollbar">
<div
className="w-full bg-darkest-background text-text-primary p-5 rounded-xl border border-secondary/50 shadow-inner">
{isGenerating && !value ? (
<div className="space-y-4 animate-pulse">
<div className="h-4 bg-secondary/30 rounded w-full"></div>
<div className="h-4 bg-secondary/30 rounded w-11/12"></div>
<div className="h-4 bg-secondary/30 rounded w-full"></div>
<div className="h-4 bg-secondary/30 rounded w-10/12"></div>
<div className="h-4 bg-secondary/30 rounded w-full"></div>
<div className="h-4 bg-secondary/30 rounded w-9/12"></div>
<div className="h-4 bg-secondary/30 rounded w-full"></div>
<div className="h-4 bg-secondary/30 rounded w-11/12"></div>
{isGenerating && !hasRealContent ? (
<div className="space-y-3 animate-pulse">
<div className="flex flex-wrap gap-2">
<span className="h-5 bg-primary/20 rounded px-4"></span>
<span className="h-5 bg-primary/15 rounded px-6"></span>
<span className="h-5 bg-primary/20 rounded px-3"></span>
<span className="h-5 bg-primary/10 rounded px-8"></span>
<span className="h-5 bg-primary/20 rounded px-5"></span>
<span className="h-5 bg-primary/15 rounded px-4"></span>
<span className="h-5 bg-primary/20 rounded px-7"></span>
</div>
<div className="flex flex-wrap gap-2">
<span className="h-5 bg-primary/15 rounded px-5"></span>
<span className="h-5 bg-primary/20 rounded px-3"></span>
<span className="h-5 bg-primary/10 rounded px-6"></span>
<span className="h-5 bg-primary/20 rounded px-4"></span>
<span className="h-5 bg-primary/15 rounded px-8"></span>
<span className="h-5 bg-primary/20 rounded px-3"></span>
</div>
<div className="flex flex-wrap gap-2">
<span className="h-5 bg-primary/20 rounded px-6"></span>
<span className="h-5 bg-primary/10 rounded px-4"></span>
<span className="h-5 bg-primary/20 rounded px-5"></span>
<span className="h-5 bg-primary/15 rounded px-7"></span>
<span className="h-5 bg-primary/20 rounded px-3"></span>
<span className="h-5 bg-primary/10 rounded px-5"></span>
<span className="h-5 bg-primary/20 rounded px-4"></span>
</div>
<div className="flex flex-wrap gap-2">
<span className="h-5 bg-primary/15 rounded px-4"></span>
<span className="h-5 bg-primary/20 rounded px-6"></span>
<span className="h-5 bg-primary/10 rounded px-3"></span>
<span className="h-5 bg-primary/20 rounded px-5"></span>
<span className="h-5 bg-primary/15 rounded px-7"></span>
</div>
</div>
) : (
<div className="space-y-4">
<div className="text-justify leading-relaxed whitespace-pre-wrap fade-in-text">
{value}
{filteredValue}
</div>
</div>
)}