@lastbrain/ai-ui-react 1.0.24 → 1.0.26

package/dist/hooks/useAiCallText.js

@@ -9,6 +9,30 @@ export function useAiCallText(options) {
         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;
         }
@@ -20,7 +44,7 @@ export function useAiCallText(options) {
         finally {
             setLoading(false);
         }
-    }, [client]);
+    }, [client, options?.apiKeyId]);
     return {
         generateText,
         loading,

package/dist/index.d.ts

@@ -14,10 +14,14 @@ 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";
 export * from "./utils/modelManagement";
 export * from "./utils/cache";
 export * from "./examples/AiImageGenerator";
 export * from "./examples/AiPromptPanelAdvanced";
+export * from "./examples/AiChipInputExample";
+export * from "./examples/AiImageButtonExample";
+export * from "./examples/AiContextButtonExample";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AAGrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAG3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAG5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AAGrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAG3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAG5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}

package/dist/index.js

@@ -18,6 +18,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";
 // Utils
@@ -26,3 +27,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/dist/styles/inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YAyBnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AA+BF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YA2BnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AA+BF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}

package/dist/styles/inline.js

@@ -242,7 +242,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "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.16"
+    "@lastbrain/ai-ui-core": "1.0.18"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiChipLabel.tsx

@@ -1,7 +1,12 @@
 "use client";
 
-import React from "react";
+import React, { useState, useRef, KeyboardEvent } from "react";
+import { X, Sparkles } from "lucide-react";
 import { aiStyles } from "../styles/inline";
+import { AiPromptPanel } from "./AiPromptPanel";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { useAiContext } from "../context/AiProvider";
 
 export interface AiChipLabelProps {
   children: React.ReactNode;
@@ -48,3 +53,215 @@ export function AiChipLabel({
     </span>
   );
 }
+
+export interface AiChipInputProps {
+  value?: string[];
+  onChange?: (chips: string[]) => void;
+  placeholder?: string;
+  context?: string;
+  maxChips?: number;
+  allowDuplicates?: boolean;
+  className?: string;
+  // Props optionnelles pour override du contexte (si nécessaire)
+  baseUrl?: string;
+  apiKeyId?: string;
+}
+
+export function AiChipInput({
+  value = [],
+  onChange,
+  placeholder = "Tapez et appuyez sur Entrée pour ajouter des tags...",
+  context,
+  maxChips,
+  allowDuplicates = false,
+  className,
+  baseUrl: propBaseUrl,
+  apiKeyId: propApiKeyId,
+}: AiChipInputProps) {
+  const [inputValue, setInputValue] = useState("");
+  const [showPromptPanel, setShowPromptPanel] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Récupérer le contexte AiProvider avec fallback sur les props
+  const aiContext = useAiContext();
+  const baseUrl = propBaseUrl ?? aiContext.baseUrl;
+  const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
+
+  // Hooks pour l'IA avec les valeurs du contexte
+  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { generateText } = useAiCallText({ baseUrl, apiKeyId });
+
+  const addChip = (text: string) => {
+    if (!text.trim()) return;
+
+    const newChips = text
+      .split(/[,;]/)
+      .map((chip: string) => chip.trim())
+      .filter(Boolean);
+    const updatedChips = [...value];
+
+    newChips.forEach((chip: string) => {
+      if (maxChips && updatedChips.length >= maxChips) return;
+      if (!allowDuplicates && updatedChips.includes(chip)) return;
+      updatedChips.push(chip);
+    });
+
+    onChange?.(updatedChips);
+    setInputValue("");
+  };
+
+  const removeChip = (index: number) => {
+    const updatedChips = value.filter((_, i) => i !== index);
+    onChange?.(updatedChips);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addChip(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+      removeChip(value.length - 1);
+    }
+  };
+
+  const handleGenerateChips = () => {
+    setShowPromptPanel(true);
+  };
+
+  const handlePromptSubmit = async (model: string, prompt: string) => {
+    try {
+      // Construire le prompt avec l'instruction spécifique
+      const instruction = `${prompt}${context ? `\n\nContexte: ${context}` : ""}
+
+IMPORTANT: Réponds UNIQUEMENT avec une liste de tags séparés par des virgules, sans explication ni formatage.
+Exemple de réponse attendue: javascript, react, frontend, api, development`;
+
+      const response = await generateText({
+        model,
+        prompt: instruction,
+      });
+
+      const chips = parseChipsFromResponse(response.text);
+
+      // Fermer le modal immédiatement
+      setShowPromptPanel(false);
+
+      // Ajouter directement toutes les chips générées
+      addGeneratedChips(chips);
+    } catch (error) {
+      console.error("Erreur lors de la génération des chips:", error);
+      setShowPromptPanel(false);
+    }
+  };
+
+  const parseChipsFromResponse = (response: string): string[] => {
+    return response
+      .split(/[,;]/)
+      .map((chip) => chip.trim())
+      .filter(Boolean)
+      .slice(0, 10); // Limiter à 10 tags
+  };
+
+  const addGeneratedChips = (chips: string[]) => {
+    const updatedChips = [...value];
+
+    chips.forEach((chip) => {
+      if (maxChips && updatedChips.length >= maxChips) return;
+      if (!allowDuplicates && updatedChips.includes(chip)) return;
+      updatedChips.push(chip);
+    });
+
+    onChange?.(updatedChips);
+  };
+
+  console.log("AiChipInput render - value:", value, "length:", value.length);
+
+  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={handleGenerateChips}
+          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: "#6366f1",
+          }}
+          title="Générer des tags avec l'IA"
+        >
+          <Sparkles size={16} />
+        </button>
+      </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",
+                }}
+              >
+                <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>
+            );
+          })}
+        </div>
+      )}
+
+      {/* AiPromptPanel pour la génération */}
+      <AiPromptPanel
+        isOpen={showPromptPanel}
+        onClose={() => setShowPromptPanel(false)}
+        onSubmit={handlePromptSubmit}
+        models={models || undefined}
+        baseUrl={baseUrl}
+        sourceText={context ? `Contexte: ${context}` : undefined}
+      />
+    </div>
+  );
+}