@lastbrain/ai-ui-react 1.0.68 → 1.0.70

package/dist/types.d.ts

@@ -4,6 +4,9 @@ export type ToastType = {
     code?: string;
 };
 export type UiMode = "modal" | "drawer";
+export type AiSize = "sm" | "md" | "lg";
+export type AiRadius = "none" | "sm" | "md" | "lg" | "full";
+export type AiVariant = "default" | "light";
 export interface BaseAiProps {
     baseUrl?: string;
     apiKeyId?: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExC,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACxC,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxC,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/utils/errorHandler.d.ts

@@ -6,7 +6,7 @@ export interface ParsedError {
 /**
  * Parse et uniformise la gestion des erreurs des composants AI
  */
-export declare function parseAIError(error: any): ParsedError;
+export declare function parseAIError(error: unknown): ParsedError;
 /**
  * Interface pour la callback de gestion d'erreur uniforme
  */
@@ -23,7 +23,7 @@ export interface ErrorToastCallback {
  * @param onToast Callback externe optionnelle fournie par le parent
  * @param showInternalToast Callback interne optionnelle pour afficher un toast dans le composant
  */
-export declare function handleAIError(error: any, onToast?: ErrorToastCallback, showInternalToast?: (error: {
+export declare function handleAIError(error: unknown, onToast?: ErrorToastCallback, showInternalToast?: (error: {
     message: string;
     code?: string;
 }) => void): void;

package/dist/utils/errorHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errorHandler.d.ts","sourceRoot":"","sources":["../../src/utils/errorHandler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,WAAW,CA8CpD;AAyFD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAClE;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE,kBAAkB,EAC5B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,GACtE,IAAI,CAuBN"}
+{"version":3,"file":"errorHandler.d.ts","sourceRoot":"","sources":["../../src/utils/errorHandler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;CACzB;AAeD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,WAAW,CA8CxD;AAyFD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAClE;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,OAAO,EACd,OAAO,CAAC,EAAE,kBAAkB,EAC5B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,GACtE,IAAI,CAuBN"}

package/dist/utils/errorHandler.js

@@ -1,11 +1,18 @@
 "use client";
 import { ErrorCode } from "@lastbrain/ai-ui-core";
+function isNormalizedErrorLike(value) {
+    if (!value || typeof value !== "object") {
+        return false;
+    }
+    const v = value;
+    return typeof v.code === "string" && typeof v.message === "string";
+}
 /**
  * Parse et uniformise la gestion des erreurs des composants AI
  */
 export function parseAIError(error) {
     // Si l'erreur est déjà un objet normalisé
-    if (error?.code && error?.message) {
+    if (isNormalizedErrorLike(error)) {
         return {
             message: getUserFriendlyMessage(error.code, error.message),
             code: error.code,

package/dist/utils/modelManagement.d.ts

@@ -5,25 +5,28 @@ export interface ModelToggleOptions {
     apiKey?: string;
     baseUrl?: string;
 }
-/**
- * Active ou désactive un modèle pour l'utilisateur courant
- */
-export declare function toggleUserModel(modelId: string, isActive: boolean, options?: ModelToggleOptions): Promise<void>;
-/**
- * Récupère tous les modèles disponibles avec API key ou via proxy
- */
-export declare function getAvailableModels(options?: ModelToggleOptions): Promise<Array<{
+type ModelCategory = "text" | "image" | "audio" | "video";
+interface ModelInfo {
     id: string;
     name: string;
     description?: string;
     provider: string;
-    category: "text" | "image" | "audio" | "video";
+    category: ModelCategory;
     isActive?: boolean;
     isPro?: boolean;
     costPer1M?: number;
-}>>;
+}
+/**
+ * Active ou désactive un modèle pour l'utilisateur courant
+ */
+export declare function toggleUserModel(modelId: string, isActive: boolean, options?: ModelToggleOptions): Promise<void>;
+/**
+ * Récupère tous les modèles disponibles avec API key ou via proxy
+ */
+export declare function getAvailableModels(options?: ModelToggleOptions): Promise<ModelInfo[]>;
 /**
  * Récupère les modèles activés par l'utilisateur avec API key
  */
 export declare function getUserModels(options?: ModelToggleOptions): Promise<string[]>;
+export {};
 //# sourceMappingURL=modelManagement.d.ts.map

package/dist/utils/modelManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modelManagement.d.ts","sourceRoot":"","sources":["../../src/utils/modelManagement.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAUD;;GAEG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,EACjB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAqCf;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CACR,KAAK,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CACH,CAsDA;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,EAAE,CAAC,CAkDnB"}
+{"version":3,"file":"modelManagement.d.ts","sourceRoot":"","sources":["../../src/utils/modelManagement.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAcD,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD;;GAEG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,EACjB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAqCf;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,SAAS,EAAE,CAAC,CA0DtB;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,EAAE,CAAC,CAkDnB"}

package/dist/utils/modelManagement.js

@@ -1,6 +1,21 @@
 /**
  * Utilitaires pour la gestion des modèles IA
  */
+function isModelCategory(value) {
+    return (value === "text" ||
+        value === "image" ||
+        value === "audio" ||
+        value === "video");
+}
+function isModelInfo(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const v = value;
+    return (typeof v.id === "string" &&
+        typeof v.name === "string" &&
+        typeof v.provider === "string" &&
+        isModelCategory(v.category));
+}
 function isAuthTokenCandidate(value) {
     if (!value)
         return false;
@@ -76,10 +91,12 @@ export async function getAvailableModels(options = {}) {
     }
     const data = await response.json();
     if (Array.isArray(data?.models)) {
-        return data.models;
+        return data.models.filter(isModelInfo);
     }
     if (Array.isArray(data?.providers)) {
-        return data.providers.flatMap((provider) => Array.isArray(provider.models) ? provider.models : []);
+        return (data.providers?.flatMap((provider) => Array.isArray(provider.models)
+            ? provider.models.filter(isModelInfo)
+            : []) || []);
     }
     return [];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.68",
+  "version": "1.0.70",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.257.0",
-    "@lastbrain/ai-ui-core": "1.0.52"
+    "@lastbrain/ai-ui-core": "1.0.53"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiChipLabel.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState, useRef, KeyboardEvent } from "react";
 import { X, Sparkles, Lock } from "lucide-react";
-import { aiStyles } from "../styles/inline";
 import { AiPromptPanel } from "./AiPromptPanel";
 import { LBSigninModal } from "./LBSigninModal";
 import { useAiCallText } from "../hooks/useAiCallText";
@@ -10,10 +9,13 @@ import { useAiModels } from "../hooks/useAiModels";
 import { useAiContext } from "../context/AiProvider";
 import { useLB } from "../context/LBAuthProvider";
 import { handleAIError } from "../utils/errorHandler";
+import type { AiRadius, AiSize } from "../types";
 
 export interface AiChipLabelProps {
   children: React.ReactNode;
-  variant?: "default" | "success" | "warning" | "danger";
+  variant?: "default" | "selected" | "warning" | "success" | "danger";
+  size?: AiSize;
+  radius?: AiRadius;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -21,36 +23,23 @@ export interface AiChipLabelProps {
 export function AiChipLabel({
   children,
   variant = "default",
+  size = "md",
+  radius = "full",
   className,
   style: customStyle,
 }: AiChipLabelProps) {
-  const variantStyles: Record<string, React.CSSProperties> = {
-    default: {},
-    success: {
-      background: "#10b98110",
-      color: "#10b981",
-      borderColor: "#10b98130",
-    },
-    warning: {
-      background: "#f59e0b10",
-      color: "#f59e0b",
-      borderColor: "#f59e0b30",
-    },
-    danger: {
-      background: "#ef444410",
-      color: "#ef4444",
-      borderColor: "#ef444430",
-    },
+  const variantClassMap: Record<string, string> = {
+    default: "",
+    selected: "ai-chip--selected",
+    warning: "ai-chip--success",
+    success: "ai-chip--success",
+    danger: "ai-chip--danger",
   };
 
   return (
     <span
-      style={{
-        ...aiStyles.chip,
-        ...variantStyles[variant],
-        ...customStyle,
-      }}
-      className={className}
+      style={customStyle}
+      className={`ai-chip ai-size-${size} ai-radius-${radius} ${variantClassMap[variant]} ${className || ""}`}
     >
       {children}
     </span>
@@ -70,6 +59,8 @@ export interface AiChipInputProps {
   // Props optionnelles pour override du contexte (si nécessaire)
   baseUrl?: string;
   apiKeyId?: string;
+  size?: AiSize;
+  radius?: AiRadius;
 }
 
 export function AiChipInput({
@@ -84,6 +75,8 @@ export function AiChipInput({
   artifactTitle,
   baseUrl: propBaseUrl,
   apiKeyId: propApiKeyId,
+  size = "md",
+  radius = "full",
 }: AiChipInputProps) {
   const [inputValue, setInputValue] = useState("");
   const [showPromptPanel, setShowPromptPanel] = useState(false);
@@ -199,92 +192,66 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
     onChange?.(updatedChips);
   };
 
-  console.log("AiChipInput render - value:", value, "length:", value.length);
+  const sizeClass = `ai-size-${size}`;
+  const radiusClass = `ai-radius-${radius}`;
 
   return (
     <div className={className}>
       {/* Input avec bouton génération */}
-      <div style={{ position: "relative", marginBottom: "8px" }}>
-        <input
-          ref={inputRef}
-          type="text"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          style={{
-            ...aiStyles.input,
-            paddingRight: "40px", // Space for button
-          }}
-        />
-        <button
-          onClick={() => {
-            if (isAuthenticated) {
-              handleGenerateChips();
-            } else {
-              setShowSigninModal(true);
+      <div className="ai-control-group ai-glow mb-2">
+        <div className={`ai-shell ${sizeClass} ${radiusClass}`}>
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            className={`ai-control ai-control-input ai-control-input--with-action ${sizeClass} ${radiusClass}`}
+          />
+          <button
+            onClick={() => {
+              if (isAuthenticated) {
+                handleGenerateChips();
+              } else {
+                setShowSigninModal(true);
+              }
+            }}
+            className={`ai-control-action ai-spark ${sizeClass} ${radiusClass}`}
+            aria-label={
+              isAuthenticated
+                ? "Générer des tags avec l'IA"
+                : "Connexion requise"
             }
-          }}
-          style={{
-            position: "absolute",
-            right: "8px",
-            top: "50%",
-            transform: "translateY(-50%)",
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            padding: "4px",
-            borderRadius: "4px",
-            display: "flex",
-            alignItems: "center",
-            color: isAuthenticated ? "#6366f1" : "#ef4444",
-          }}
-          title={
-            isAuthenticated
-              ? "Générer des tags avec l'IA"
-              : "Se connecter pour utiliser l'IA"
-          }
-        >
-          {isAuthenticated ? <Sparkles size={16} /> : <Lock size={16} />}
-        </button>
+            title={
+              isAuthenticated
+                ? "Générer des tags avec l'IA"
+                : "Se connecter pour utiliser l'IA"
+            }
+          >
+            {isAuthenticated ? <Sparkles size={16} /> : <Lock size={16} />}
+          </button>
+        </div>
       </div>
 
       {/* Chips affichées */}
       {value.length > 0 && (
-        <div style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}>
-          {value.map((chip, index) => {
-            console.log("Rendering chip:", chip, "at index:", index);
-            return (
-              <div
-                key={index}
-                style={{
-                  ...aiStyles.chip,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "6px",
-                  paddingRight: "6px",
-                }}
+        <div className="ai-chip-input">
+          {value.map((chip, index) => (
+            <div
+              key={index}
+              className={`ai-chip ai-chip--with-close ${sizeClass} ${radiusClass}`}
+            >
+              <span>{chip}</span>
+              <button
+                onClick={() => removeChip(index)}
+                className="ai-chip-remover"
+                title="Supprimer"
               >
-                <span>{chip}</span>
-                <button
-                  onClick={() => removeChip(index)}
-                  style={{
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    padding: "0",
-                    display: "flex",
-                    alignItems: "center",
-                    color: "currentColor",
-                    opacity: 0.7,
-                  }}
-                  title="Supprimer"
-                >
-                  <X size={14} />
-                </button>
-              </div>
-            );
-          })}
+                <X size={14} />
+              </button>
+            </div>
+          ))}
         </div>
       )}