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

@@ -26,6 +26,10 @@ externalPort = 3000
 localPort = 43245
 externalPort = 3001
 
+[[ports]]
+localPort = 44513
+externalPort = 3003
+
 [env]
 PORT = "5000"
 

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>