@lastbrain/ai-ui-react 1.0.8 → 1.0.9

package/README.md

@@ -21,13 +21,27 @@ pnpm add @lastbrain/ai-ui-react @lastbrain/ai-ui-core
 
 ## Styles
 
-The package includes optional CSS styles. Import them in your app:
+**Version 1.0.8+**: Components now use inline styles by default. No CSS import required!
+
+The package includes built-in styling that works out of the box. Components will render correctly without any additional CSS imports.
+
+If you want to customize the styling, you can:
+
+1. **Override inline styles**: Pass custom `className` or `style` props
+2. **Use the optional CSS file**: Import `@lastbrain/ai-ui-react/styles.css` for additional customization
+3. **Provide your own styles**: Style components using the provided CSS classes
 
 ```tsx
+// ✅ Works out of the box (no CSS import needed)
+import { AiStatusButton } from "@lastbrain/ai-ui-react";
+
+// ✅ Optional: Import CSS for customization
 import "@lastbrain/ai-ui-react/styles.css";
 ```
 
-Or if you prefer to use your own styles, you can skip this import and style the components using the provided CSS classes:
+### CSS Classes (for custom styling)
+
+If you want to override styles using CSS, target these classes:
 
 - `.ai-input` - Input field
 - `.ai-textarea` - Textarea

package/dist/components/AiChipLabel.d.ts

@@ -1,8 +1,9 @@
-import { type HTMLAttributes } from "react";
-import type { BaseAiProps } from "../types";
-export interface AiChipLabelProps extends Omit<BaseAiProps, "type">, HTMLAttributes<HTMLDivElement> {
-    label?: string;
-    uiMode?: "modal" | "drawer";
+import React from "react";
+export interface AiChipLabelProps {
+    children: React.ReactNode;
+    variant?: "default" | "success" | "warning" | "danger";
+    className?: string;
+    style?: React.CSSProperties;
 }
-export declare function AiChipLabel({ baseUrl, apiKeyId, uiMode, context, model, prompt, onValue, onToast, disabled, className, label, ...divProps }: AiChipLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function AiChipLabel({ children, variant, className, style: customStyle, }: AiChipLabelProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AiChipLabel.d.ts.map

package/dist/components/AiChipLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiChipLabel.d.ts","sourceRoot":"","sources":["../../src/components/AiChipLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,QAAQ,EACZ,EAAE,gBAAgB,2CA4DlB"}
+{"version":3,"file":"AiChipLabel.d.ts","sourceRoot":"","sources":["../../src/components/AiChipLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAmB,EACnB,SAAS,EACT,KAAK,EAAE,WAAW,GACnB,EAAE,gBAAgB,2CAgClB"}

package/dist/components/AiChipLabel.js

@@ -1,39 +1,28 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useAiCallText } from "../hooks/useAiCallText";
-import { useAiModels } from "../hooks/useAiModels";
-import { AiPromptPanel } from "./AiPromptPanel";
-export function AiChipLabel({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, onValue, onToast, disabled, className, label, ...divProps }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [chipLabel, setChipLabel] = useState(label || "");
-    const { models } = useAiModels({ baseUrl, apiKeyId });
-    const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
-    const handleOpenPanel = () => {
-        setIsOpen(true);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { aiStyles } from "../styles/inline";
+export function AiChipLabel({ children, variant = "default", className, style: customStyle, }) {
+    const variantStyles = {
+        default: {},
+        success: {
+            background: "#10b98110",
+            color: "#10b981",
+            borderColor: "#10b98130",
+        },
+        warning: {
+            background: "#f59e0b10",
+            color: "#f59e0b",
+            borderColor: "#f59e0b30",
+        },
+        danger: {
+            background: "#ef444410",
+            color: "#ef4444",
+            borderColor: "#ef444430",
+        },
     };
-    const handleClosePanel = () => {
-        setIsOpen(false);
-    };
-    const handleSubmit = async (selectedModel, selectedPrompt) => {
-        try {
-            const result = await generateText({
-                model: selectedModel,
-                prompt: selectedPrompt,
-                context: context || chipLabel || undefined,
-            });
-            if (result.text) {
-                setChipLabel(result.text);
-                onValue?.(result.text);
-                onToast?.({ type: "success", message: "Label generated successfully" });
-            }
-        }
-        catch (error) {
-            onToast?.({ type: "error", message: "Failed to generate label" });
-        }
-        finally {
-            setIsOpen(false);
-        }
-    };
-    return (_jsxs("div", { "data-ai-chip-wrapper": true, className: className, ...divProps, children: [_jsx("div", { "data-ai-chip-label": true, children: chipLabel || "Generate label" }), _jsx("button", { onClick: handleOpenPanel, disabled: disabled || loading, "data-ai-chip-button": true, type: "button", children: loading ? "..." : "✨" }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
+    return (_jsx("span", { style: {
+            ...aiStyles.chip,
+            ...variantStyles[variant],
+            ...customStyle,
+        }, className: className, children: children }));
 }

package/dist/components/AiInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiInput.d.ts","sourceRoot":"","sources":["../../src/components/AiInput.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACxD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,YAAY,2CAyHd"}
+{"version":3,"file":"AiInput.d.ts","sourceRoot":"","sources":["../../src/components/AiInput.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACxD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,YAAY,2CAiKd"}

package/dist/components/AiInput.js

@@ -4,9 +4,12 @@ import { useState, useRef } from "react";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { aiStyles } from "../styles/inline";
 export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, onValue, onToast, disabled, className, ...inputProps }) {
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState(inputProps.value?.toString() || inputProps.defaultValue?.toString() || "");
+    const [isFocused, setIsFocused] = useState(false);
+    const [isButtonHovered, setIsButtonHovered] = useState(false);
     const inputRef = useRef(null);
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
@@ -22,15 +25,13 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
             const result = await generateText({
                 model: selectedModel,
                 prompt: selectedPrompt,
-                context: context || inputValue || undefined,
+                context: inputValue || context || undefined,
                 actionType: "autocomplete",
             });
             if (result.text) {
-                if (editMode) {
-                    setInputValue(result.text);
-                    if (inputRef.current) {
-                        inputRef.current.value = result.text;
-                    }
+                setInputValue(result.text);
+                if (inputRef.current) {
+                    inputRef.current.value = result.text;
                 }
                 onValue?.(result.text);
                 onToast?.({ type: "success", message: "AI generation successful" });
@@ -50,15 +51,13 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
             const result = await generateText({
                 model,
                 prompt,
-                context: context || inputValue || undefined,
+                context: inputValue || context || undefined,
                 actionType: "autocomplete",
             });
             if (result.text) {
-                if (editMode) {
-                    setInputValue(result.text);
-                    if (inputRef.current) {
-                        inputRef.current.value = result.text;
-                    }
+                setInputValue(result.text);
+                if (inputRef.current) {
+                    inputRef.current.value = result.text;
                 }
                 onValue?.(result.text);
                 onToast?.({ type: "success", message: "AI generation successful" });
@@ -73,5 +72,20 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
         setInputValue(newValue);
         inputProps.onChange?.(e);
     };
-    return (_jsxs("div", { "data-ai-input-wrapper": true, className: className, children: [_jsx("input", { ref: inputRef, ...inputProps, value: inputValue, onChange: handleInputChange, disabled: disabled || loading, "data-ai-input": true }), hasConfiguration ? (_jsx("button", { onClick: handleQuickGenerate, disabled: disabled || loading, "data-ai-generate-button": true, type: "button", children: loading ? "Generating..." : "AI" })) : (_jsx("button", { onClick: handleOpenPanel, disabled: disabled || loading, "data-ai-setup-button": true, type: "button", children: "Setup AI" })), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
+    return (_jsxs("div", { style: aiStyles.inputWrapper, className: className, children: [_jsx("input", { ref: inputRef, ...inputProps, style: {
+                    ...aiStyles.input,
+                    ...(isFocused && aiStyles.inputFocus),
+                }, value: inputValue, onChange: handleInputChange, onFocus: (e) => {
+                    setIsFocused(true);
+                    inputProps.onFocus?.(e);
+                }, onBlur: (e) => {
+                    setIsFocused(false);
+                    inputProps.onBlur?.(e);
+                }, disabled: disabled || loading }), _jsx("button", { style: {
+                    ...aiStyles.inputAiButton,
+                    ...(isButtonHovered && aiStyles.inputAiButtonHover),
+                    ...(disabled || loading
+                        ? { opacity: 0.5, cursor: "not-allowed" }
+                        : {}),
+                }, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) })) : hasConfiguration ? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 5v14M5 12h14" }) })) : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" }) })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
 }

package/dist/components/AiPromptPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC3D;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,MAAW,EACX,QAAQ,GACT,EAAE,kBAAkB,kDAuFpB"}
+{"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC3D;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,MAAW,EACX,QAAQ,GACT,EAAE,kBAAkB,kDA4JpB"}

package/dist/components/AiPromptPanel.js

@@ -1,12 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { aiStyles } from "../styles/inline";
 export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", models = [], children, }) {
     const [selectedModel, setSelectedModel] = useState(models[0]?.id || "");
     const [prompt, setPrompt] = useState("");
+    const [isCloseHovered, setIsCloseHovered] = useState(false);
+    const [isCancelHovered, setIsCancelHovered] = useState(false);
+    const [isSubmitHovered, setIsSubmitHovered] = useState(false);
+    const [promptFocused, setPromptFocused] = useState(false);
+    const [modelFocused, setModelFocused] = useState(false);
+    useEffect(() => {
+        if (models.length > 0 && !selectedModel) {
+            setSelectedModel(models[0].id);
+        }
+    }, [models, selectedModel]);
     if (!isOpen)
         return null;
     const handleSubmit = () => {
+        if (!selectedModel || !prompt.trim())
+            return;
         onSubmit(selectedModel, prompt);
         setPrompt("");
     };
@@ -14,6 +27,14 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
         onClose();
         setPrompt("");
     };
+    const handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+            handleClose();
+        }
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            handleSubmit();
+        }
+    };
     const renderProps = {
         models,
         selectedModel,
@@ -24,7 +45,25 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
         handleClose,
     };
     if (children) {
-        return (_jsx("div", { "data-ai-prompt-panel": true, "data-type": uiMode, children: children(renderProps) }));
+        return (_jsx("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: children(renderProps) }));
     }
-    return (_jsxs("div", { "data-ai-prompt-panel": true, "data-type": uiMode, children: [_jsx("div", { "data-ai-prompt-panel-overlay": true, onClick: handleClose }), _jsxs("div", { "data-ai-prompt-panel-content": true, children: [_jsxs("div", { "data-ai-prompt-panel-header": true, children: [_jsx("h2", { children: "AI Prompt" }), _jsx("button", { onClick: handleClose, "data-ai-close-button": true, children: "\u00D7" })] }), _jsxs("div", { "data-ai-prompt-panel-body": true, children: [_jsxs("div", { "data-ai-model-select-wrapper": true, children: [_jsx("label", { htmlFor: "model-select", children: "Model" }), _jsx("select", { id: "model-select", value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), "data-ai-model-select": true, children: models.map((model) => (_jsx("option", { value: model.id, children: model.name }, model.id))) })] }), _jsxs("div", { "data-ai-prompt-wrapper": true, children: [_jsx("label", { htmlFor: "prompt-input", children: "Prompt" }), _jsx("textarea", { id: "prompt-input", value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "Enter your prompt...", rows: 5, "data-ai-prompt-input": true })] })] }), _jsxs("div", { "data-ai-prompt-panel-footer": true, children: [_jsx("button", { onClick: handleClose, "data-ai-cancel-button": true, children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt, "data-ai-submit-button": true, children: "Generate" })] })] })] }));
+    return (_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: aiStyles.modalOverlay, onClick: handleClose }), _jsxs("div", { style: aiStyles.modalContent, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "AI Prompt Configuration" }), _jsx("button", { style: {
+                                    ...aiStyles.modalCloseButton,
+                                    ...(isCloseHovered && aiStyles.modalCloseButtonHover),
+                                }, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { style: aiStyles.modalBody, children: [_jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("select", { id: "model-select", value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
+                                            ...aiStyles.select,
+                                            ...(modelFocused && aiStyles.selectFocus),
+                                        }, children: [models.length === 0 && (_jsx("option", { value: "", children: "No models available" })), models.map((model) => (_jsx("option", { value: model.id, children: model.name }, model.id)))] })] }), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsxs("label", { htmlFor: "prompt-input", style: aiStyles.modalLabel, children: ["Prompt", _jsx("span", { style: { color: aiStyles.textareaFocus.borderColor, marginLeft: "4px" }, children: "(Cmd/Ctrl + Enter to submit)" })] }), _jsx("textarea", { id: "prompt-input", value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: "Enter your AI prompt... e.g., 'Correct spelling and grammar'", rows: 6, style: {
+                                            ...aiStyles.textarea,
+                                            padding: "12px 16px",
+                                            ...(promptFocused && aiStyles.textareaFocus),
+                                        } })] })] }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
+                                    ...aiStyles.button,
+                                    ...aiStyles.buttonSecondary,
+                                    ...(isCancelHovered && aiStyles.buttonSecondaryHover),
+                                }, children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), onMouseEnter: () => setIsSubmitHovered(true), onMouseLeave: () => setIsSubmitHovered(false), style: {
+                                    ...aiStyles.button,
+                                    ...(isSubmitHovered && !(!selectedModel || !prompt.trim()) && aiStyles.buttonHover),
+                                    ...(!selectedModel || !prompt.trim() ? aiStyles.buttonDisabled : {}),
+                                }, children: "Generate with AI" })] })] })] }));
 }

package/dist/components/AiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CA6Df"}
+{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CAqEf"}

package/dist/components/AiSelect.js

@@ -4,8 +4,10 @@ import { useState } from "react";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { aiStyles } from "../styles/inline";
 export function AiSelect({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, onValue, onToast, disabled, className, children, ...selectProps }) {
     const [isOpen, setIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
     const handleOpenPanel = () => {
@@ -34,5 +36,14 @@ export function AiSelect({ baseUrl, apiKeyId, uiMode = "modal", context, model,
             setIsOpen(false);
         }
     };
-    return (_jsxs("div", { "data-ai-select-wrapper": true, className: className, children: [_jsx("select", { ...selectProps, disabled: disabled || loading, "data-ai-select": true, children: children }), _jsx("button", { onClick: handleOpenPanel, disabled: disabled || loading, "data-ai-assist-button": true, type: "button", children: "AI Assist" }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
+    return (_jsxs("div", { style: { width: "100%" }, className: className, children: [_jsx("select", { ...selectProps, style: {
+                    ...aiStyles.select,
+                    ...(isFocused && aiStyles.selectFocus),
+                }, onFocus: (e) => {
+                    setIsFocused(true);
+                    selectProps.onFocus?.(e);
+                }, onBlur: (e) => {
+                    setIsFocused(false);
+                    selectProps.onBlur?.(e);
+                }, disabled: disabled || loading, children: children }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
 }

package/dist/components/AiStatusButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAsQrB"}
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAgSrB"}

package/dist/components/AiStatusButton.js

@@ -1,42 +1,52 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { aiStyles } from "../styles/inline";
+import { useState, useRef, useEffect } from "react";
+import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 export function AiStatusButton({ status, loading = false, className = "", }) {
     const [showTooltip, setShowTooltip] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
+    const [tooltipPosition, setTooltipPosition] = useState({});
+    const buttonRef = useRef(null);
+    const tooltipRef = useRef(null);
+    useEffect(() => {
+        if (showTooltip && buttonRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const position = calculateTooltipPosition(buttonRect);
+            setTooltipPosition(position);
+        }
+    }, [showTooltip]);
+    const handleMouseEnter = () => {
+        setShowTooltip(true);
+        setIsHovered(true);
+    };
+    const handleMouseLeave = () => {
+        // Keep tooltip visible if hovering over it
+        setTimeout(() => {
+            if (!tooltipRef.current?.matches(":hover") &&
+                !buttonRef.current?.matches(":hover")) {
+                setShowTooltip(false);
+                setIsHovered(false);
+            }
+        }, 100);
+    };
     if (loading) {
-        return (_jsx("button", { style: {
+        return (_jsx("button", { ref: buttonRef, style: {
                 ...aiStyles.statusButton,
                 ...aiStyles.statusButtonDisabled,
-            }, className: className, disabled: true, children: _jsx("svg", { style: {
-                    animation: "ai-spin 1s linear infinite",
-                }, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) }) }));
+            }, className: className, disabled: true, children: _jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) }) }));
     }
     if (!status) {
-        return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { style: {
+        return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
                         ...aiStyles.statusButton,
                         color: "#ef4444",
                         ...(isHovered && aiStyles.statusButtonHover),
-                    }, className: className, onMouseEnter: () => {
-                        setShowTooltip(true);
-                        setIsHovered(true);
-                    }, onMouseLeave: () => {
-                        setShowTooltip(false);
-                        setIsHovered(false);
-                    }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && _jsx("div", { style: aiStyles.tooltip, children: "No status available" })] }));
+                    }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsx("div", { ref: tooltipRef, style: { ...aiStyles.tooltip, ...tooltipPosition }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: "No status available" }))] }));
     }
-    return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { style: {
+    return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
                     ...aiStyles.statusButton,
                     color: "#10b981",
                     ...(isHovered && aiStyles.statusButtonHover),
-                }, className: className, onMouseEnter: () => {
-                    setShowTooltip(true);
-                    setIsHovered(true);
-                }, onMouseLeave: () => {
-                    setShowTooltip(false);
-                    setIsHovered(false);
-                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsxs("div", { style: aiStyles.tooltip, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsxs("div", { style: {
+                }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsxs("div", { ref: tooltipRef, style: { ...aiStyles.tooltip, ...tooltipPosition }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsxs("div", { style: {
                             ...aiStyles.tooltipSection,
                             ...aiStyles.tooltipSectionFirst,
                         }, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.name })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.env })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.api_key.rate_limit_rpm, " req/min"] })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Balance" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsx("span", { style: {
@@ -54,22 +64,16 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                             ...aiStyles.tooltipValue,
                                             ...aiStyles.tooltipValueBold,
                                         }, children: [(status.storage.db_mb + status.storage.files_mb).toFixed(2), " MB"] })] })] }), _jsxs("div", { style: aiStyles.tooltipActions, children: [_jsx("a", { href: "https://ai.lastbrain.io/fr/auth/dashboard", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
-                                    e.currentTarget.style.background = "#dbeafe";
-                                    e.currentTarget.style.borderColor = "#3b82f6";
+                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
                                 }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.background = "#eff6ff";
-                                    e.currentTarget.style.borderColor = "#dbeafe";
+                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
                                 }, children: "Dashboard" }), _jsx("a", { href: "https://ai.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
-                                    e.currentTarget.style.background = "#dbeafe";
-                                    e.currentTarget.style.borderColor = "#3b82f6";
+                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
                                 }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.background = "#eff6ff";
-                                    e.currentTarget.style.borderColor = "#dbeafe";
+                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
                                 }, children: "History" }), _jsx("a", { href: "https://ai.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
-                                    e.currentTarget.style.background = "#dbeafe";
-                                    e.currentTarget.style.borderColor = "#3b82f6";
+                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
                                 }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.background = "#eff6ff";
-                                    e.currentTarget.style.borderColor = "#dbeafe";
+                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
                                 }, children: "Settings" })] })] }))] }));
 }

package/dist/components/AiTextarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CA2HjB"}
+{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CAmKjB"}

package/dist/components/AiTextarea.js

@@ -4,11 +4,14 @@ import { useState, useRef } from "react";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { aiStyles } from "../styles/inline";
 export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, onValue, onToast, disabled, className, ...textareaProps }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [textValue, setTextValue] = useState(textareaProps.value?.toString() ||
+    const [textareaValue, setTextareaValue] = useState(textareaProps.value?.toString() ||
         textareaProps.defaultValue?.toString() ||
         "");
+    const [isFocused, setIsFocused] = useState(false);
+    const [isButtonHovered, setIsButtonHovered] = useState(false);
     const textareaRef = useRef(null);
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
@@ -24,15 +27,13 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
             const result = await generateText({
                 model: selectedModel,
                 prompt: selectedPrompt,
-                context: context || textValue || undefined,
+                context: textareaValue || context || undefined,
                 actionType: "autocomplete",
             });
             if (result.text) {
-                if (editMode) {
-                    setTextValue(result.text);
-                    if (textareaRef.current) {
-                        textareaRef.current.value = result.text;
-                    }
+                setTextareaValue(result.text);
+                if (textareaRef.current) {
+                    textareaRef.current.value = result.text;
                 }
                 onValue?.(result.text);
                 onToast?.({ type: "success", message: "AI generation successful" });
@@ -52,15 +53,13 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
             const result = await generateText({
                 model,
                 prompt,
-                context: context || textValue || undefined,
+                context: textareaValue || context || undefined,
                 actionType: "autocomplete",
             });
             if (result.text) {
-                if (editMode) {
-                    setTextValue(result.text);
-                    if (textareaRef.current) {
-                        textareaRef.current.value = result.text;
-                    }
+                setTextareaValue(result.text);
+                if (textareaRef.current) {
+                    textareaRef.current.value = result.text;
                 }
                 onValue?.(result.text);
                 onToast?.({ type: "success", message: "AI generation successful" });
@@ -72,8 +71,23 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
     };
     const handleTextareaChange = (e) => {
         const newValue = e.target.value;
-        setTextValue(newValue);
+        setTextareaValue(newValue);
         textareaProps.onChange?.(e);
     };
-    return (_jsxs("div", { "data-ai-textarea-wrapper": true, className: className, children: [_jsx("textarea", { ref: textareaRef, ...textareaProps, value: textValue, onChange: handleTextareaChange, disabled: disabled || loading, "data-ai-textarea": true }), hasConfiguration ? (_jsx("button", { onClick: handleQuickGenerate, disabled: disabled || loading, "data-ai-generate-button": true, type: "button", children: loading ? "Generating..." : "AI" })) : (_jsx("button", { onClick: handleOpenPanel, disabled: disabled || loading, "data-ai-setup-button": true, type: "button", children: "Setup AI" })), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
+    return (_jsxs("div", { style: aiStyles.textareaWrapper, className: className, children: [_jsx("textarea", { ref: textareaRef, ...textareaProps, style: {
+                    ...aiStyles.textarea,
+                    ...(isFocused && aiStyles.textareaFocus),
+                }, value: textareaValue, onChange: handleTextareaChange, onFocus: (e) => {
+                    setIsFocused(true);
+                    textareaProps.onFocus?.(e);
+                }, onBlur: (e) => {
+                    setIsFocused(false);
+                    textareaProps.onBlur?.(e);
+                }, disabled: disabled || loading }), _jsx("button", { style: {
+                    ...aiStyles.textareaAiButton,
+                    ...(isButtonHovered && aiStyles.textareaAiButtonHover),
+                    ...(disabled || loading
+                        ? { opacity: 0.5, cursor: "not-allowed" }
+                        : {}),
+                }, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) })) : hasConfiguration ? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 5v14M5 12h14" }) })) : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" }) })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
 }