@lastbrain/ai-ui-react 1.0.68 → 1.0.69

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "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,62 @@ 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"}
+            title={
+              isAuthenticated
+                ? "Générer des tags avec l'IA"
+                : "Se connecter pour utiliser l'IA"
             }
-          }}
-          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>
+          >
+            {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>
       )}