@lastbrain/ai-ui-react 1.0.24 → 1.0.26

package/src/components/AiImageButton.tsx

@@ -1,37 +1,72 @@
 "use client";
 
 import { useState, type ButtonHTMLAttributes } from "react";
+import {
+  ImageIcon,
+  Loader2,
+  Download,
+  Copy,
+  ExternalLink,
+  X,
+} from "lucide-react";
 import type { BaseAiProps } from "../types";
 import { useAiCallImage } from "../hooks/useAiCallImage";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
-import { UsageToast, useUsageToast } from "./UsageToast";
+import { useUsageToast } from "./UsageToast";
+import { aiStyles } from "../styles/inline";
+import { useAiContext } from "../context/AiProvider";
 
 export interface AiImageButtonProps
   extends
     Omit<BaseAiProps, "onValue" | "type">,
-    ButtonHTMLAttributes<HTMLButtonElement> {
-  onImage?: (imageUrl: string) => void;
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, "baseUrl" | "apiKeyId"> {
+  onImage?: (
+    imageUrl: string,
+    metadata?: { requestId: string; tokens: number }
+  ) => void;
   uiMode?: "modal" | "drawer";
+  showImageCard?: boolean;
+  onImageSave?: (url: string) => Promise<void>;
+  storeOutputs?: boolean; // For external API calls - whether to store outputs
+  artifactTitle?: string; // Title for stored artifacts
+  // Props optionnelles pour override du contexte
+  baseUrl?: string;
+  apiKeyId?: string;
 }
 
 export function AiImageButton({
-  baseUrl,
-  apiKeyId,
+  baseUrl: propBaseUrl,
+  apiKeyId: propApiKeyId,
   uiMode = "modal",
-  context,
-  model,
-  prompt,
+  context: _context,
+  model: _model,
+  prompt: _prompt,
   onImage,
   onToast,
   disabled,
   className,
   children,
+  showImageCard = true,
+  onImageSave,
+  storeOutputs,
+  artifactTitle,
   ...buttonProps
 }: AiImageButtonProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [generatedImage, setGeneratedImage] = useState<{
+    url: string;
+    prompt: string;
+    requestId: string;
+    tokens: number;
+  } | null>(null);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
+  // Récupérer le contexte AiProvider avec fallback sur les props
+  const aiContext = useAiContext();
+  const baseUrl = propBaseUrl ?? aiContext.baseUrl;
+  const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
+
   const { models } = useAiModels({ baseUrl, apiKeyId });
   const { generateImage, loading } = useAiCallImage({ baseUrl, apiKeyId });
 
@@ -43,6 +78,81 @@ export function AiImageButton({
     setIsOpen(false);
   };
 
+  // Actions sur l'image
+  const handleDownload = () => {
+    if (!generatedImage) return;
+    const link = document.createElement("a");
+    link.href = generatedImage.url;
+    link.download = `ai-image-${generatedImage.requestId}.png`;
+    link.click();
+  };
+
+  const handleCopyUrl = async () => {
+    if (!generatedImage) return;
+    try {
+      await navigator.clipboard.writeText(generatedImage.url);
+      onToast?.({
+        type: "success",
+        message: "URL copiée dans le presse-papier",
+      });
+    } catch (_error) {
+      onToast?.({ type: "error", message: "Erreur lors de la copie" });
+    }
+  };
+
+  const handleSave = async () => {
+    if (!generatedImage || !onImageSave) return;
+    try {
+      await onImageSave(generatedImage.url);
+      onToast?.({ type: "success", message: "Image sauvegardée" });
+    } catch (_error) {
+      onToast?.({ type: "error", message: "Erreur lors de la sauvegarde" });
+    }
+  };
+
+  const handleCloseImage = () => {
+    setGeneratedImage(null);
+  };
+
+  // Styles selon le thème
+  const getThemeStyles = () => {
+    // Détection automatique du thème comme dans les autres composants
+    const isDark =
+      typeof document !== "undefined" &&
+      (document.documentElement.classList.contains("dark") ||
+        (!document.documentElement.classList.contains("light") &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches));
+
+    return {
+      card: {
+        backgroundColor: isDark ? "#1f2937" : "white",
+        border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+        color: isDark ? "#f3f4f6" : "#374151",
+      },
+      header: {
+        color: isDark ? "#f9fafb" : "#1f2937",
+      },
+      closeButton: {
+        color: isDark ? "#9ca3af" : "#6b7280",
+        hoverColor: isDark ? "#d1d5db" : "#374151",
+      },
+      imageContainer: {
+        backgroundColor: isDark ? "#111827" : "#f9fafb",
+      },
+      actionButton: {
+        backgroundColor: isDark ? "#374151" : "white",
+        border: `1px solid ${isDark ? "#4b5563" : "#e5e7eb"}`,
+        color: isDark ? "#d1d5db" : "#6b7280",
+        hoverBackground: isDark ? "#4b5563" : "#f3f4f6",
+        hoverColor: isDark ? "#f3f4f6" : "#1f2937",
+      },
+      metadata: {
+        borderTop: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
+        color: isDark ? "#9ca3af" : "#6b7280",
+      },
+    };
+  };
+
   const handleSubmit = async (
     selectedModel: string,
     selectedPrompt: string
@@ -51,47 +161,285 @@ export function AiImageButton({
       const result = await generateImage({
         model: selectedModel,
         prompt: selectedPrompt,
+        size: "1024x1024", // Taille par défaut
       });
 
       if (result.url) {
-        onImage?.(result.url);
-        onToast?.({ type: "success", message: "Image generated successfully" });
-        showUsageToast(result);
+        // Stocker l'image générée
+        const imageData = {
+          url: result.url,
+          prompt: selectedPrompt,
+          requestId: result.requestId,
+          tokens: result.debitTokens,
+        };
+        setGeneratedImage(imageData);
+
+        onImage?.(result.url, {
+          requestId: result.requestId,
+          tokens: result.debitTokens,
+        });
+        onToast?.({ type: "success", message: "Image générée avec succès" });
+
+        // Afficher le toast de coût même en mode dev
+        showUsageToast({
+          requestId: result.requestId,
+          debitTokens: result.debitTokens,
+          usage: {
+            total_tokens: result.debitTokens,
+            prompt_tokens: Math.floor(result.debitTokens * 0.8),
+            completion_tokens: Math.floor(result.debitTokens * 0.2),
+          },
+          cost: apiKeyId?.includes("dev") ? 0 : result.debitTokens * 0.002, // Coût simulé
+        });
       }
     } catch (error) {
-      onToast?.({ type: "error", message: "Failed to generate image" });
+      onToast?.({
+        type: "error",
+        message: "Erreur lors de la génération de l'image",
+        code: error instanceof Error ? error.message : undefined,
+      });
     } finally {
       setIsOpen(false);
     }
   };
 
   return (
-    <div style={{ position: "relative", display: "inline-block" }}>
-      <button
-        {...buttonProps}
-        onClick={handleOpenPanel}
-        disabled={disabled || loading}
-        className={className}
-        data-ai-image-button
-      >
-        {loading ? "Generating..." : children || "Generate Image"}
-      </button>
-      {isOpen && (
-        <AiPromptPanel
-          isOpen={isOpen}
-          onClose={handleClosePanel}
-          onSubmit={handleSubmit}
-          uiMode={uiMode}
-          models={models?.filter((m) => m.type === "image") || []}
-        />
-      )}
-      {Boolean(toastData) && (
-        <UsageToast
-          key={toastKey}
-          result={toastData}
-          position="bottom-right"
-          onComplete={clearToast}
-        />
+    <div className="flex items-start gap-4">
+      <div style={{ position: "relative", display: "inline-block" }}>
+        <button
+          {...buttonProps}
+          onClick={handleOpenPanel}
+          disabled={disabled || loading}
+          className={className}
+          style={{
+            ...aiStyles.button,
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: disabled || loading ? "not-allowed" : "pointer",
+            opacity: disabled || loading ? 0.6 : 1,
+            backgroundColor: loading ? "#8b5cf6" : "#6366f1",
+            color: "white",
+            border: "none",
+            borderRadius: "12px",
+            padding: "12px 20px",
+            fontSize: "14px",
+            fontWeight: "600",
+            minWidth: "140px",
+            height: "44px",
+            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+            boxShadow: loading
+              ? "0 4px 12px rgba(139, 92, 246, 0.3)"
+              : "0 2px 8px rgba(99, 102, 241, 0.2)",
+            transform: "scale(1)",
+            ...(loading && {
+              background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
+              animation: "pulse 2s ease-in-out infinite",
+            }),
+            ...buttonProps.style,
+          }}
+          onMouseEnter={(e) => {
+            if (!disabled && !loading) {
+              e.currentTarget.style.transform = "scale(1.02)";
+              e.currentTarget.style.boxShadow =
+                "0 6px 16px rgba(99, 102, 241, 0.3)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!disabled && !loading) {
+              e.currentTarget.style.transform = "scale(1)";
+              e.currentTarget.style.boxShadow = loading
+                ? "0 4px 12px rgba(139, 92, 246, 0.3)"
+                : "0 2px 8px rgba(99, 102, 241, 0.2)";
+            }
+          }}
+          onMouseDown={(e) => {
+            if (!disabled && !loading) {
+              e.currentTarget.style.transform = "scale(0.98)";
+            }
+          }}
+          onMouseUp={(e) => {
+            if (!disabled && !loading) {
+              e.currentTarget.style.transform = "scale(1.02)";
+            }
+          }}
+          data-ai-image-button
+        >
+          {loading ? (
+            <>
+              <Loader2
+                size={18}
+                className="animate-spin"
+                style={{
+                  color: "white",
+                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.3))",
+                }}
+              />
+              <span style={{ letterSpacing: "0.025em" }}>Génération...</span>
+            </>
+          ) : (
+            <>
+              <ImageIcon
+                size={18}
+                style={{
+                  color: "white",
+                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
+                }}
+              />
+              <span style={{ letterSpacing: "0.025em" }}>
+                {children || "Générer une image"}
+              </span>
+            </>
+          )}
+        </button>
+        {isOpen && (
+          <AiPromptPanel
+            isOpen={isOpen}
+            onClose={handleClosePanel}
+            onSubmit={handleSubmit}
+            uiMode={uiMode}
+            models={models?.filter((m) => m.type === "image") || []}
+          />
+        )}
+      </div>
+
+      {/* Card d'affichage de l'image générée */}
+      {showImageCard && generatedImage && (
+        <div
+          className="relative"
+          style={{
+            maxWidth: "320px",
+            borderRadius: "12px",
+            padding: "16px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+            ...getThemeStyles().card,
+          }}
+        >
+          {/* Header avec prompt et bouton fermer */}
+          <div className="flex items-start justify-between mb-3">
+            <h3
+              className="font-medium text-sm leading-tight"
+              style={{
+                maxWidth: "calc(100% - 32px)",
+                ...getThemeStyles().header,
+              }}
+              title={generatedImage.prompt}
+            >
+              {generatedImage.prompt.length > 60
+                ? `${generatedImage.prompt.substring(0, 60)}...`
+                : generatedImage.prompt}
+            </h3>
+            <button
+              onClick={handleCloseImage}
+              className="transition-colors flex-shrink-0"
+              style={{
+                padding: "2px",
+                borderRadius: "4px",
+                backgroundColor: "transparent",
+                border: "none",
+                cursor: "pointer",
+                color: getThemeStyles().closeButton.color,
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color =
+                  getThemeStyles().closeButton.hoverColor;
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color =
+                  getThemeStyles().closeButton.color;
+              }}
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          {/* Image */}
+          <div
+            className="mb-4 rounded-lg overflow-hidden"
+            style={getThemeStyles().imageContainer}
+          >
+            <img
+              src={generatedImage.url}
+              alt={generatedImage.prompt}
+              className="w-full h-auto"
+              style={{
+                maxHeight: "200px",
+                objectFit: "contain",
+                display: "block",
+              }}
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <button
+              onClick={handleDownload}
+              className="flex items-center gap-1 px-3 py-2 text-xs font-medium rounded-lg transition-colors"
+              style={getThemeStyles().actionButton}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor =
+                  getThemeStyles().actionButton.hoverBackground;
+                e.currentTarget.style.color =
+                  getThemeStyles().actionButton.hoverColor;
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor =
+                  getThemeStyles().actionButton.backgroundColor;
+                e.currentTarget.style.color =
+                  getThemeStyles().actionButton.color;
+              }}
+              title="Télécharger l'image"
+            >
+              <Download size={14} />
+              Télécharger
+            </button>
+
+            <button
+              onClick={handleCopyUrl}
+              className="flex items-center gap-1 px-3 py-2 text-xs font-medium rounded-lg transition-colors"
+              style={getThemeStyles().actionButton}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor =
+                  getThemeStyles().actionButton.hoverBackground;
+                e.currentTarget.style.color =
+                  getThemeStyles().actionButton.hoverColor;
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor =
+                  getThemeStyles().actionButton.backgroundColor;
+                e.currentTarget.style.color =
+                  getThemeStyles().actionButton.color;
+              }}
+              title="Copier l'URL"
+            >
+              <Copy size={14} />
+              Copier URL
+            </button>
+
+            {onImageSave && (
+              <button
+                onClick={handleSave}
+                className="flex items-center gap-1 px-3 py-2 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+                title="Sauvegarder en base"
+              >
+                <ExternalLink size={14} />
+                Sauvegarder
+              </button>
+            )}
+          </div>
+
+          {/* Metadata */}
+          <div
+            className="mt-3 pt-3 text-xs"
+            style={{
+              ...getThemeStyles().metadata,
+            }}
+          >
+            <div className="flex justify-center">
+              <span>ID: {generatedImage.requestId.slice(-8)}</span>
+            </div>
+          </div>
+        </div>
       )}
     </div>
   );

package/src/components/AiStatusButton.tsx

@@ -348,16 +348,20 @@ export function AiStatusButton({
             >
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>API Key:</span>
-                <span style={aiStyles.tooltipValue}>{status.api_key.name}</span>
+                <span style={aiStyles.tooltipValue}>
+                  {status.api_key?.name || "N/A"}
+                </span>
               </div>
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>Env:</span>
-                <span style={aiStyles.tooltipValue}>{status.api_key.env}</span>
+                <span style={aiStyles.tooltipValue}>
+                  {status.api_key?.env || "N/A"}
+                </span>
               </div>
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>Rate Limit:</span>
                 <span style={aiStyles.tooltipValue}>
-                  {status.api_key.rate_limit_rpm} req/min
+                  {status.api_key?.rate_limit_rpm || 0} req/min
                 </span>
               </div>
             </div>

package/src/components/UsageToast.tsx

@@ -20,9 +20,11 @@ export function UsageToast({
 
   useEffect(() => {
     if (result) {
-      // Show toast immediately
-      setIsVisible(true);
-      setIsClosing(false);
+      // Show toast immediately - using startTransition to avoid cascading renders warning
+      queueMicrotask(() => {
+        setIsVisible(true);
+        setIsClosing(false);
+      });
     }
 
     return () => {

package/src/examples/AiChipInputExample.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { AiChipInput } from "../components/AiChipLabel";
+import { AiProvider } from "../context/AiProvider";
+
+export function AiChipInputExample() {
+  const [tags, setTags] = useState<string[]>(["react", "typescript"]);
+
+  return (
+    <AiProvider baseUrl="/api/ai" apiKeyId="dev-key-example">
+      <div style={{ padding: "20px", maxWidth: "600px" }}>
+        <h2 style={{ marginBottom: "16px" }}>Exemple AiChipInput</h2>
+
+        <div style={{ marginBottom: "24px" }}>
+          <label
+            style={{ display: "block", marginBottom: "8px", fontWeight: "500" }}
+          >
+            Tags du projet
+          </label>
+          <AiChipInput
+            value={tags}
+            onChange={setTags}
+            placeholder="Ajoutez des tags séparés par des virgules ou générez avec l'IA..."
+            context="web development"
+            maxChips={10}
+            allowDuplicates={false}
+          />
+        </div>
+
+        <div
+          style={{
+            marginTop: "20px",
+            padding: "16px",
+            backgroundColor: "#f8f9fa",
+            borderRadius: "6px",
+          }}
+        >
+          <h3 style={{ margin: "0 0 8px 0", fontSize: "14px" }}>
+            Valeur actuelle :
+          </h3>
+          <pre style={{ margin: 0, fontSize: "12px" }}>
+            {JSON.stringify(tags, null, 2)}
+          </pre>
+        </div>
+
+        <div style={{ marginTop: "16px", fontSize: "14px", color: "#6b7280" }}>
+          <p>
+            <strong>Mode développement :</strong>
+          </p>
+          <ul style={{ paddingLeft: "20px" }}>
+            <li>API Key contient "dev" → Simulation activée</li>
+            <li>Pas d'appel API réel</li>
+            <li>
+              Génération de tags simulés : "react, typescript, javascript..."
+            </li>
+          </ul>
+
+          <p>
+            <strong>Instructions :</strong>
+          </p>
+          <ul style={{ paddingLeft: "20px" }}>
+            <li>Tapez du texte et appuyez sur Entrée pour créer un chip</li>
+            <li>
+              Séparez plusieurs tags avec des virgules (,) ou des
+              points-virgules (;)
+            </li>
+            <li>
+              Cliquez sur l'icône ✨ pour générer des tags automatiquement
+            </li>
+            <li>Utilisez le ❌ sur chaque chip pour le supprimer</li>
+            <li>
+              Appuyez sur Backspace dans un champ vide pour supprimer le dernier
+              chip
+            </li>
+          </ul>
+        </div>
+      </div>
+    </AiProvider>
+  );
+}