@lastbrain/ai-ui-react 1.0.25 → 1.0.27

package/src/examples/AiContextButtonExample.tsx

@@ -0,0 +1,338 @@
+import { AiContextButton } from "@lastbrain/ai-ui-react";
+import { useState } from "react";
+
+// Données d'exemple pour le tableau
+const sampleTableData = [
+  {
+    id: 1,
+    user: "Alice Martin",
+    product: "Laptop Pro X1",
+    sales: 15420,
+    commission: 1542,
+    region: "Nord",
+    month: "Janvier 2026",
+  },
+  {
+    id: 2,
+    user: "Bob Durant",
+    product: "Smartphone Z10",
+    sales: 8750,
+    commission: 875,
+    region: "Sud",
+    month: "Janvier 2026",
+  },
+  {
+    id: 3,
+    user: "Claire Dubois",
+    product: "Tablet Air 5",
+    sales: 12300,
+    commission: 1230,
+    region: "Est",
+    month: "Janvier 2026",
+  },
+  {
+    id: 4,
+    user: "David Moreau",
+    product: "Laptop Pro X1",
+    sales: 18900,
+    commission: 1890,
+    region: "Ouest",
+    month: "Janvier 2026",
+  },
+  {
+    id: 5,
+    user: "Emma Leroy",
+    product: "Smartphone Z10",
+    sales: 6420,
+    commission: 642,
+    region: "Centre",
+    month: "Janvier 2026",
+  },
+];
+
+// Données de produits pour un autre exemple
+const productAnalytics = {
+  period: "Q1 2026",
+  totalRevenue: 2450000,
+  products: [
+    { name: "Laptop Pro X1", revenue: 980000, units: 320, avgPrice: 3062.5 },
+    { name: "Smartphone Z10", revenue: 750000, units: 500, avgPrice: 1500 },
+    { name: "Tablet Air 5", revenue: 720000, units: 400, avgPrice: 1800 },
+  ],
+  regions: {
+    Nord: { revenue: 650000, growth: "+12%" },
+    Sud: { revenue: 580000, growth: "+8%" },
+    Est: { revenue: 520000, growth: "+15%" },
+    Ouest: { revenue: 700000, growth: "+20%" },
+  },
+};
+
+export function AiContextButtonExample() {
+  const [analysisResults, setAnalysisResults] = useState<string[]>([]);
+
+  const handleSalesAnalysis = (
+    result: string,
+    metadata?: { requestId: string; tokens: number }
+  ) => {
+    console.log("Analyse des ventes:", { result, metadata });
+    setAnalysisResults((prev) => [
+      ...prev,
+      `Ventes: ${result.substring(0, 100)}...`,
+    ]);
+  };
+
+  const handleProductAnalysis = (
+    result: string,
+    metadata?: { requestId: string; tokens: number }
+  ) => {
+    console.log("Analyse produits:", { result, metadata });
+    setAnalysisResults((prev) => [
+      ...prev,
+      `Produits: ${result.substring(0, 100)}...`,
+    ]);
+  };
+
+  const handleToast = (data: {
+    type: "success" | "error";
+    message: string;
+  }) => {
+    console.log(`${data.type}: ${data.message}`);
+  };
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">AI Context Button - Exemples</h1>
+
+      {/* Exemple 1: Analyse de tableau de ventes */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold mb-4">
+          1. Analyse de données de ventes
+        </h2>
+
+        {/* Tableau des ventes */}
+        <div className="mb-4 overflow-hidden rounded-lg border border-gray-200">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Vendeur
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Produit
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Ventes (€)
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Commission (€)
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Région
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {sampleTableData.map((row) => (
+                <tr key={row.id} className="hover:bg-gray-50">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    {row.user}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {row.product}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                    {row.sales.toLocaleString()} €
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                    {row.commission.toLocaleString()} €
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {row.region}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="flex gap-3 flex-wrap">
+          <AiContextButton
+            contextData={sampleTableData}
+            contextDescription="Données de ventes par vendeur pour Janvier 2026"
+            onResult={handleSalesAnalysis}
+            onToast={handleToast}
+            resultModalTitle="Analyse des Ventes - Janvier 2026"
+          >
+            Analyser les ventes
+          </AiContextButton>
+
+          <AiContextButton
+            contextData={sampleTableData}
+            contextDescription="Performance des vendeurs"
+            onResult={handleSalesAnalysis}
+            onToast={handleToast}
+            resultModalTitle="Top Performers"
+          >
+            Top 3 vendeurs
+          </AiContextButton>
+        </div>
+      </div>
+
+      {/* Exemple 2: Analyse de données produits */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold mb-4">
+          2. Analyse de performance produits
+        </h2>
+
+        {/* Affichage des analytics produits */}
+        <div className="mb-4 p-6 bg-gray-50 rounded-lg">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-sm font-medium text-gray-500">
+                Chiffre d'affaires total
+              </h3>
+              <p className="text-2xl font-bold text-gray-900">
+                {productAnalytics.totalRevenue.toLocaleString()} €
+              </p>
+            </div>
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-sm font-medium text-gray-500">Période</h3>
+              <p className="text-2xl font-bold text-gray-900">
+                {productAnalytics.period}
+              </p>
+            </div>
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-sm font-medium text-gray-500">Produits</h3>
+              <p className="text-2xl font-bold text-gray-900">
+                {productAnalytics.products.length}
+              </p>
+            </div>
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-sm font-medium text-gray-500">Régions</h3>
+              <p className="text-2xl font-bold text-gray-900">
+                {Object.keys(productAnalytics.regions).length}
+              </p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Produits */}
+            <div>
+              <h4 className="font-semibold mb-3">Performance par produit</h4>
+              <div className="space-y-2">
+                {productAnalytics.products.map((product, index) => (
+                  <div
+                    key={index}
+                    className="flex justify-between items-center p-3 bg-white rounded"
+                  >
+                    <span className="font-medium">{product.name}</span>
+                    <div className="text-right">
+                      <div className="text-sm text-gray-600">
+                        {product.units} unités
+                      </div>
+                      <div className="font-semibold">
+                        {product.revenue.toLocaleString()} €
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Régions */}
+            <div>
+              <h4 className="font-semibold mb-3">Performance par région</h4>
+              <div className="space-y-2">
+                {Object.entries(productAnalytics.regions).map(
+                  ([region, data]) => (
+                    <div
+                      key={region}
+                      className="flex justify-between items-center p-3 bg-white rounded"
+                    >
+                      <span className="font-medium">{region}</span>
+                      <div className="text-right">
+                        <div className="text-sm text-green-600">
+                          {data.growth}
+                        </div>
+                        <div className="font-semibold">
+                          {data.revenue.toLocaleString()} €
+                        </div>
+                      </div>
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-3 flex-wrap">
+          <AiContextButton
+            contextData={productAnalytics}
+            contextDescription="Analytics de performance produits Q1 2026"
+            onResult={handleProductAnalysis}
+            onToast={handleToast}
+            resultModalTitle="Analyse de Performance - Q1 2026"
+          >
+            Analyser les performances
+          </AiContextButton>
+
+          <AiContextButton
+            contextData={productAnalytics}
+            contextDescription="Données produits et régions"
+            onResult={handleProductAnalysis}
+            onToast={handleToast}
+            resultModalTitle="Recommandations Stratégiques"
+          >
+            Recommandations
+          </AiContextButton>
+        </div>
+      </div>
+
+      {/* Exemple 3: Contexte textuel */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold mb-4">
+          3. Analyse de texte libre
+        </h2>
+
+        <div className="mb-4 p-4 bg-gray-50 rounded-lg">
+          <p className="text-sm text-gray-700 mb-2">
+            <strong>Feedback client :</strong>
+          </p>
+          <p className="italic">
+            "Le produit est excellent en terme de qualité mais le prix me semble
+            un peu élevé. La livraison a été rapide et le service client très
+            réactif quand j'ai eu un problème avec ma commande. Je recommande ce
+            produit mais j'espère que les prix baisseront à l'avenir."
+          </p>
+        </div>
+
+        <AiContextButton
+          contextData="Le produit est excellent en terme de qualité mais le prix me semble un peu élevé. La livraison a été rapide et le service client très réactif quand j'ai eu un problème avec ma commande. Je recommande ce produit mais j'espère que les prix baisseront à l'avenir."
+          contextDescription="Feedback client sur un produit"
+          onResult={(result) => console.log("Analyse sentiment:", result)}
+          onToast={handleToast}
+          resultModalTitle="Analyse de Sentiment Client"
+        >
+          Analyser le sentiment
+        </AiContextButton>
+      </div>
+
+      {/* Historique des analyses */}
+      {analysisResults.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-xl font-semibold mb-4">
+            Historique des analyses
+          </h2>
+          <div className="space-y-2">
+            {analysisResults.map((result, index) => (
+              <div key={index} className="p-3 bg-blue-50 rounded-lg text-sm">
+                {result}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/examples/AiImageButtonExample.tsx

@@ -0,0 +1,72 @@
+import { AiImageButton } from "@lastbrain/ai-ui-react";
+import { useState } from "react";
+
+export function ExampleUsage() {
+  const [savedImages, setSavedImages] = useState<string[]>([]);
+
+  const handleImageGenerated = (
+    url: string,
+    metadata?: { requestId: string; tokens: number }
+  ) => {
+    console.log("Image générée:", { url, metadata });
+    // L'image est automatiquement affichée dans la card
+  };
+
+  const handleImageSave = async (url: string) => {
+    // Simulation d'une sauvegarde en base
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    // Ici vous pouvez faire l'appel API pour sauvegarder en base
+    // const response = await fetch('/api/images', {
+    //   method: 'POST',
+    //   body: JSON.stringify({ url }),
+    //   headers: { 'Content-Type': 'application/json' }
+    // });
+
+    setSavedImages((prev) => [...prev, url]);
+  };
+
+  const handleToast = (data: {
+    type: "success" | "error";
+    message: string;
+  }) => {
+    // Vous pouvez utiliser votre système de toast préféré ici
+    console.log(`${data.type}: ${data.message}`);
+  };
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">Générateur d'Images AI</h1>
+
+      <AiImageButton
+        onImage={handleImageGenerated}
+        onImageSave={handleImageSave}
+        onToast={handleToast}
+        showImageCard={true}
+        className="mb-4"
+      >
+        Créer une image
+      </AiImageButton>
+
+      {/* Liste des images sauvegardées */}
+      {savedImages.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-lg font-semibold mb-2">
+            Images sauvegardées ({savedImages.length})
+          </h2>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {savedImages.map((url, index) => (
+              <div key={index} className="border rounded-lg p-2">
+                <img
+                  src={url}
+                  alt={`Saved image ${index + 1}`}
+                  className="w-full h-32 object-cover rounded"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/hooks/useAiCallImage.ts

@@ -4,6 +4,129 @@ import { useState, useCallback } from "react";
 import type { AiImageRequest, AiImageResponse } from "@lastbrain/ai-ui-core";
 import { useAiClient } from "./useAiClient";
 
+/**
+ * Génère une image Canvas pour l'environnement de développement
+ */
+async function generateDevImage(
+  prompt: string,
+  width: number,
+  height: number
+): Promise<string> {
+  // Créer un canvas
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Could not create canvas context");
+  }
+
+  canvas.width = width;
+  canvas.height = height;
+
+  // Générer des couleurs basées sur le prompt
+  const promptHash = prompt
+    .split("")
+    .reduce((hash, char) => (hash * 31 + char.charCodeAt(0)) % 255, 0);
+
+  // Couleurs de base dégradées
+  const colors = [
+    `hsl(${(promptHash * 7) % 360}, 70%, 60%)`,
+    `hsl(${(promptHash * 11) % 360}, 60%, 70%)`,
+    `hsl(${(promptHash * 13) % 360}, 50%, 80%)`,
+  ];
+
+  // Créer un dégradé radial
+  const gradient = ctx.createRadialGradient(
+    width / 2,
+    height / 2,
+    0,
+    width / 2,
+    height / 2,
+    Math.max(width, height) / 2
+  );
+
+  gradient.addColorStop(0, colors[0]);
+  gradient.addColorStop(0.5, colors[1]);
+  gradient.addColorStop(1, colors[2]);
+
+  // Remplir le fond
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+
+  // Ajouter des formes géométriques basées sur le prompt
+  const shapes = prompt.split(" ").slice(0, 5);
+
+  shapes.forEach((word, index) => {
+    const wordHash = word
+      .split("")
+      .reduce((hash, char) => (hash * 31 + char.charCodeAt(0)) % 1000, 0);
+
+    ctx.save();
+    ctx.globalAlpha = 0.3 + index * 0.1;
+    ctx.fillStyle = `hsl(${(wordHash * 17) % 360}, 80%, 50%)`;
+
+    // Formes différentes selon l'index
+    const x = (wordHash % (width - 100)) + 50;
+    const y = ((wordHash * 3) % (height - 100)) + 50;
+    const size = 30 + (wordHash % 50);
+
+    switch (index % 4) {
+      case 0: // Cercle
+        ctx.beginPath();
+        ctx.arc(x, y, size, 0, Math.PI * 2);
+        ctx.fill();
+        break;
+      case 1: // Carré
+        ctx.fillRect(x - size / 2, y - size / 2, size, size);
+        break;
+      case 2: // Triangle
+        ctx.beginPath();
+        ctx.moveTo(x, y - size / 2);
+        ctx.lineTo(x - size / 2, y + size / 2);
+        ctx.lineTo(x + size / 2, y + size / 2);
+        ctx.closePath();
+        ctx.fill();
+        break;
+      case 3: // Losange
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate((wordHash / 100) % (Math.PI * 2));
+        ctx.fillRect(-size / 2, -size / 2, size, size);
+        ctx.restore();
+        break;
+    }
+    ctx.restore();
+  });
+
+  // Ajouter le texte du prompt en overlay
+  ctx.save();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+  ctx.font = `bold ${Math.min(width, height) / 30}px system-ui, -apple-system, sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+
+  // Fond semi-transparent pour le texte
+  const textMetrics = ctx.measureText(prompt);
+  const textWidth = textMetrics.width;
+  const textHeight = parseInt(ctx.font);
+
+  ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+  ctx.fillRect(
+    width / 2 - textWidth / 2 - 20,
+    height / 2 - textHeight / 2 - 10,
+    textWidth + 40,
+    textHeight + 20
+  );
+
+  // Texte du prompt
+  ctx.fillStyle = "white";
+  ctx.fillText(prompt, width / 2, height / 2);
+  ctx.restore();
+
+  // Convertir en data URL
+  return canvas.toDataURL("image/png", 0.8);
+}
+
 export interface UseAiCallImageOptions {
   baseUrl?: string;
   apiKeyId?: string;
@@ -27,6 +150,31 @@ export function useAiCallImage(
       setLoading(true);
       setError(null);
       try {
+        // Vérifier si on est en mode dev (API key contient "dev")
+        if (options?.apiKeyId?.includes("dev")) {
+          // Simulation complète pour l'environnement dev
+          await new Promise((resolve) => setTimeout(resolve, 2000)); // Délai réaliste pour simuler l'API
+
+          // Parse size format "1024x1024" or default to "1024x1024"
+          const sizeMatch = request.size?.match(/(\d+)x(\d+)/);
+          const width = sizeMatch ? parseInt(sizeMatch[1]) : 1024;
+          const height = sizeMatch ? parseInt(sizeMatch[2]) : 1024;
+
+          // Créer une image générée avec Canvas
+          const imageUrl = await generateDevImage(
+            request.prompt,
+            width,
+            height
+          );
+
+          return {
+            requestId: `dev-img-${Date.now()}`,
+            url: imageUrl,
+            debitTokens: 30, // Coût simulé
+          };
+        }
+
+        // Mode production : appel API normal
         const result = await client.generateImage(request);
         return result;
       } catch (err) {
@@ -38,7 +186,7 @@ export function useAiCallImage(
         setLoading(false);
       }
     },
-    [client]
+    [client, options?.apiKeyId]
   );
 
   return {

package/src/hooks/useAiCallText.ts

@@ -27,6 +27,35 @@ export function useAiCallText(
       setLoading(true);
       setError(null);
       try {
+        // Vérifier si on est en mode dev (API key contient "dev")
+        if (options?.apiKeyId?.includes("dev")) {
+          // Simulation pour l'environnement dev
+          await new Promise((resolve) => setTimeout(resolve, 1000)); // Délai pour simuler l'API
+
+          let simulatedResult = "";
+
+          // Si le prompt contient des mots-clés pour les chips
+          if (
+            request.prompt.toLowerCase().includes("tags") ||
+            request.prompt.toLowerCase().includes("chip") ||
+            request.prompt.toLowerCase().includes("virgule")
+          ) {
+            simulatedResult =
+              "react, typescript, javascript, frontend, backend, api, development, web, mobile, database";
+          } else {
+            // Lorem ipsum pour les autres cas
+            simulatedResult =
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.";
+          }
+
+          return {
+            requestId: `dev-${Date.now()}`,
+            text: simulatedResult,
+            debitTokens: 150,
+          };
+        }
+
+        // Mode production : appel API normal
         const result = await client.generateText(request);
         return result;
       } catch (err) {
@@ -38,7 +67,7 @@ export function useAiCallText(
         setLoading(false);
       }
     },
-    [client]
+    [client, options?.apiKeyId]
   );
 
   return {

package/src/index.ts

@@ -21,6 +21,7 @@ export * from "./components/AiTextarea";
 export * from "./components/AiSelect";
 export * from "./components/AiChipLabel";
 export * from "./components/AiImageButton";
+export * from "./components/AiContextButton";
 export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
 
@@ -31,3 +32,6 @@ export * from "./utils/cache";
 // Examples
 export * from "./examples/AiImageGenerator";
 export * from "./examples/AiPromptPanelAdvanced";
+export * from "./examples/AiChipInputExample";
+export * from "./examples/AiImageButtonExample";
+export * from "./examples/AiContextButtonExample";

package/src/styles/inline.ts

@@ -278,7 +278,9 @@ export const aiStyles = {
     lineHeight: "1.5",
     color: themeVars.text,
     background: themeVars.bg,
-    border: `1px solid ${themeVars.border}`,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: themeVars.border,
     borderRadius: "8px",
     outline: "none",
     transition: "all 0.2s",