From e884b3e2c2974a944cf28587a6e27ba19ffa0ae4 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 2 Oct 2025 13:04:36 +0000
Subject: [PATCH] Add AI text generation and variation selection for post
 creation

Introduce new state variables for generated variants and post text. Update the AI generation success handler to set generated variants and modify the post creation logic to use the `postText` state. Add a new `handleUseVariant` function and a UI section to display and select AI-generated text variations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/sjuGm8z
---
 .replit                       |  4 ++
 client/src/pages/new-post.tsx | 69 +++++++++++++++++++++++++++++++++--
 2 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/.replit b/.replit
index ffeb98a..1eb06e0 100644
--- a/.replit
+++ b/.replit
@@ -26,6 +26,10 @@ externalPort = 3000
 localPort = 43245
 externalPort = 3001
 
+[[ports]]
+localPort = 44513
+externalPort = 3003
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/pages/new-post.tsx b/client/src/pages/new-post.tsx
index a124fbd..89066ca 100644
--- a/client/src/pages/new-post.tsx
+++ b/client/src/pages/new-post.tsx
@@ -23,6 +23,8 @@ export default function NewPost() {
   const [selectedMedia, setSelectedMedia] = useState<string | null>(null);
   const [selectedPages, setSelectedPages] = useState<string[]>([]);
   const [scheduledDate, setScheduledDate] = useState('');
+  const [generatedVariants, setGeneratedVariants] = useState<any[]>([]);
+  const [postText, setPostText] = useState('');
 
   const { data: pages = [] } = useQuery<SocialPage[]>({
     queryKey: ['/api/pages'],
@@ -36,9 +38,11 @@ export default function NewPost() {
     mutationFn: (productInfo: string) => 
       apiRequest('POST', '/api/ai/generate', { productInfo }),
     onSuccess: (data: any) => {
+      const variants = data.variants || [];
+      setGeneratedVariants(variants);
       toast({
         title: "Texte généré",
-        description: `${data.variations?.length || 0} variations créées`,
+        description: `${variants.length} variations créées`,
       });
       queryClient.invalidateQueries({ queryKey: ['/api/ai/generations'] });
     },
@@ -83,7 +87,7 @@ export default function NewPost() {
   };
 
   const handleCreatePost = () => {
-    if (!productInfo.trim()) {
+    if (!postText.trim()) {
       toast({
         title: "Contenu requis",
         description: "Veuillez saisir le contenu de la publication",
@@ -93,11 +97,19 @@ export default function NewPost() {
     }
 
     createPostMutation.mutate({
-      content: productInfo,
+      content: postText,
       scheduledFor: scheduledDate || undefined,
     });
   };
 
+  const handleUseVariant = (text: string) => {
+    setPostText(text);
+    toast({
+      title: "Texte sélectionné",
+      description: "Le texte a été ajouté à votre publication",
+    });
+  };
+
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       {sidebarOpen && (
@@ -156,6 +168,57 @@ export default function NewPost() {
                 </CardContent>
               </Card>
 
+              <Card>
+                <CardHeader>
+                  <CardTitle>Texte de la publication</CardTitle>
+                  <CardDescription>Écrivez ou générez le texte de votre publication</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Textarea
+                    value={postText}
+                    onChange={(e) => setPostText(e.target.value)}
+                    placeholder="Écrivez votre texte ici ou générez-le avec l'IA..."
+                    rows={8}
+                    data-testid="textarea-post-text"
+                  />
+                </CardContent>
+              </Card>
+
+              {generatedVariants.length > 0 && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Variations générées par l'IA</CardTitle>
+                    <CardDescription>Cliquez sur "Utiliser" pour remplir le texte ci-dessus</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    {generatedVariants.map((variant, index) => (
+                      <div 
+                        key={index}
+                        className="p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="flex-1">
+                            <div className="text-xs font-semibold text-muted-foreground mb-2">
+                              {variant.variant || `Version ${index + 1}`}
+                            </div>
+                            <p className="text-sm leading-relaxed whitespace-pre-wrap">
+                              {variant.text}
+                            </p>
+                          </div>
+                          <Button
+                            size="sm"
+                            onClick={() => handleUseVariant(variant.text)}
+                            data-testid={`button-use-variant-${index}`}
+                          >
+                            Utiliser
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </CardContent>
+                </Card>
+              )}
+
               <Card>
                 <CardHeader>
                   <CardTitle>Média</CardTitle>