@lastbrain/ai-ui-react 1.0.68 → 1.0.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/components/AiChipLabel.d.ts +8 -3
  2. package/dist/components/AiChipLabel.d.ts.map +1 -1
  3. package/dist/components/AiChipLabel.js +21 -70
  4. package/dist/components/AiContextButton.d.ts +5 -1
  5. package/dist/components/AiContextButton.d.ts.map +1 -1
  6. package/dist/components/AiContextButton.js +67 -291
  7. package/dist/components/AiImageButton.d.ts +5 -1
  8. package/dist/components/AiImageButton.d.ts.map +1 -1
  9. package/dist/components/AiImageButton.js +6 -142
  10. package/dist/components/AiInput.d.ts +5 -3
  11. package/dist/components/AiInput.d.ts.map +1 -1
  12. package/dist/components/AiInput.js +13 -25
  13. package/dist/components/AiPromptPanel.d.ts.map +1 -1
  14. package/dist/components/AiPromptPanel.js +58 -212
  15. package/dist/components/AiSelect.d.ts +5 -3
  16. package/dist/components/AiSelect.d.ts.map +1 -1
  17. package/dist/components/AiSelect.js +21 -30
  18. package/dist/components/AiStatusButton.d.ts +4 -1
  19. package/dist/components/AiStatusButton.d.ts.map +1 -1
  20. package/dist/components/AiStatusButton.js +198 -668
  21. package/dist/components/AiTextarea.d.ts +4 -2
  22. package/dist/components/AiTextarea.d.ts.map +1 -1
  23. package/dist/components/AiTextarea.js +14 -26
  24. package/dist/components/LBApiKeySelector.d.ts.map +1 -1
  25. package/dist/components/LBApiKeySelector.js +5 -166
  26. package/dist/components/LBConnectButton.d.ts +4 -7
  27. package/dist/components/LBConnectButton.d.ts.map +1 -1
  28. package/dist/components/LBConnectButton.js +17 -86
  29. package/dist/components/LBSigninModal.d.ts +1 -1
  30. package/dist/components/LBSigninModal.d.ts.map +1 -1
  31. package/dist/components/LBSigninModal.js +42 -320
  32. package/dist/examples/AiUiPremiumShowcase.d.ts +2 -0
  33. package/dist/examples/AiUiPremiumShowcase.d.ts.map +1 -0
  34. package/dist/examples/AiUiPremiumShowcase.js +15 -0
  35. package/dist/index.d.ts +2 -0
  36. package/dist/index.d.ts.map +1 -1
  37. package/dist/index.js +2 -0
  38. package/dist/styles/inline.d.ts +1 -0
  39. package/dist/styles/inline.d.ts.map +1 -1
  40. package/dist/styles/inline.js +25 -129
  41. package/dist/styles.css +1268 -369
  42. package/dist/types.d.ts +3 -0
  43. package/dist/types.d.ts.map +1 -1
  44. package/package.json +2 -2
  45. package/src/components/AiChipLabel.tsx +64 -101
  46. package/src/components/AiContextButton.tsx +138 -430
  47. package/src/components/AiImageButton.tsx +29 -190
  48. package/src/components/AiInput.tsx +49 -74
  49. package/src/components/AiPromptPanel.tsx +71 -254
  50. package/src/components/AiSelect.tsx +61 -69
  51. package/src/components/AiStatusButton.tsx +477 -1313
  52. package/src/components/AiTextarea.tsx +49 -64
  53. package/src/components/LBApiKeySelector.tsx +86 -274
  54. package/src/components/LBConnectButton.tsx +46 -334
  55. package/src/components/LBSigninModal.tsx +140 -481
  56. package/src/examples/AiUiPremiumShowcase.tsx +91 -0
  57. package/src/index.ts +3 -0
  58. package/src/styles/inline.ts +27 -148
  59. package/src/styles.css +1268 -369
  60. package/src/types.ts +3 -0
@@ -6,12 +6,11 @@ import { useAiCallImage } from "../hooks/useAiCallImage";
6
6
  import { AiPromptPanel } from "./AiPromptPanel";
7
7
  import { useUsageToast } from "./UsageToast";
8
8
  import { useErrorToast, ErrorToast } from "./ErrorToast";
9
- import { aiStyles } from "../styles/inline";
10
9
  import { useAiContext } from "../context/AiProvider";
11
10
  import { handleAIError } from "../utils/errorHandler";
12
11
  import { useLB } from "../context/LBAuthProvider";
13
12
  import { LBSigninModal } from "./LBSigninModal";
14
- export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", context: _context, model: _model, prompt: _prompt, onImage, onToast, disabled, className, children, showImageCard = true, onImageSave, storeOutputs, artifactTitle, ...buttonProps }) {
13
+ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", context: _context, model: _model, prompt: _prompt, onImage, onToast, disabled, className, children, showImageCard = true, onImageSave, storeOutputs, artifactTitle, size = "md", radius = "full", variant = "default", ...buttonProps }) {
15
14
  const [isOpen, setIsOpen] = useState(false);
16
15
  const [showAuthModal, setShowAuthModal] = useState(false);
17
16
  const [generatedImage, setGeneratedImage] = useState(null);
@@ -66,42 +65,6 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
66
65
  const handleCloseImage = () => {
67
66
  setGeneratedImage(null);
68
67
  };
69
- // Styles selon le thème
70
- const getThemeStyles = () => {
71
- // Détection automatique du thème comme dans les autres composants
72
- const isDark = typeof document !== "undefined" &&
73
- (document.documentElement.classList.contains("dark") ||
74
- (!document.documentElement.classList.contains("light") &&
75
- window.matchMedia("(prefers-color-scheme: dark)").matches));
76
- return {
77
- card: {
78
- backgroundColor: isDark ? "#1f2937" : "white",
79
- border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
80
- color: isDark ? "#f3f4f6" : "#374151",
81
- },
82
- header: {
83
- color: isDark ? "#f9fafb" : "#1f2937",
84
- },
85
- closeButton: {
86
- color: isDark ? "#9ca3af" : "#6b7280",
87
- hoverColor: isDark ? "#d1d5db" : "#374151",
88
- },
89
- imageContainer: {
90
- backgroundColor: isDark ? "#111827" : "#f9fafb",
91
- },
92
- actionButton: {
93
- backgroundColor: isDark ? "#374151" : "white",
94
- border: `1px solid ${isDark ? "#4b5563" : "#e5e7eb"}`,
95
- color: isDark ? "#d1d5db" : "#6b7280",
96
- hoverBackground: isDark ? "#4b5563" : "#f3f4f6",
97
- hoverColor: isDark ? "#f3f4f6" : "#1f2937",
98
- },
99
- metadata: {
100
- borderTop: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
101
- color: isDark ? "#9ca3af" : "#6b7280",
102
- },
103
- };
104
- };
105
68
  const handleSubmit = async (selectedModel, selectedPrompt) => {
106
69
  try {
107
70
  const result = await generateImage({
@@ -152,109 +115,10 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
152
115
  setIsOpen(false);
153
116
  }
154
117
  };
155
- return (_jsxs("div", { className: "flex items-start gap-4", children: [_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ...buttonProps, onClick: handleOpenPanel, disabled: disabled || loading || !isAuthReady, className: className, style: {
156
- ...aiStyles.button,
157
- display: "flex",
158
- alignItems: "center",
159
- gap: "8px",
160
- cursor: disabled || loading || !isAuthReady ? "not-allowed" : "pointer",
161
- opacity: disabled || loading || !isAuthReady ? 0.6 : 1,
162
- backgroundColor: loading
163
- ? "#8b5cf6"
164
- : !isAuthReady
165
- ? "#94a3b8"
166
- : "#6366f1",
167
- color: "white",
168
- border: "none",
169
- borderRadius: "12px",
170
- padding: "12px 20px",
171
- fontSize: "14px",
172
- fontWeight: "600",
173
- minWidth: "140px",
174
- height: "44px",
175
- transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
176
- boxShadow: loading
177
- ? "0 4px 12px rgba(139, 92, 246, 0.3)"
178
- : "0 2px 8px rgba(99, 102, 241, 0.2)",
179
- transform: "scale(1)",
180
- ...(loading && {
181
- background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
182
- animation: "pulse 2s ease-in-out infinite",
183
- }),
184
- ...buttonProps.style,
185
- }, onMouseEnter: (e) => {
186
- if (!disabled && !loading && isAuthReady) {
187
- e.currentTarget.style.transform = "scale(1.02)";
188
- e.currentTarget.style.boxShadow =
189
- "0 6px 16px rgba(99, 102, 241, 0.3)";
190
- }
191
- }, onMouseLeave: (e) => {
192
- if (!disabled && !loading && isAuthReady) {
193
- e.currentTarget.style.transform = "scale(1)";
194
- e.currentTarget.style.boxShadow = loading
195
- ? "0 4px 12px rgba(139, 92, 246, 0.3)"
196
- : "0 2px 8px rgba(99, 102, 241, 0.2)";
197
- }
198
- }, onMouseDown: (e) => {
199
- if (!disabled && !loading && isAuthReady) {
200
- e.currentTarget.style.transform = "scale(0.98)";
201
- }
202
- }, onMouseUp: (e) => {
203
- if (!disabled && !loading && isAuthReady) {
204
- e.currentTarget.style.transform = "scale(1.02)";
205
- }
206
- }, "data-ai-image-button": true, title: !isAuthReady ? "Authentication required" : "Générer une image", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 18, className: "animate-spin", style: {
207
- color: "white",
208
- filter: "drop-shadow(0 0 2px rgba(255,255,255,0.3))",
209
- } }), _jsx("span", { style: { letterSpacing: "0.025em" }, children: "G\u00E9n\u00E9ration..." })] })) : !isAuthReady ? (_jsxs(_Fragment, { children: [_jsx(Lock, { size: 18, style: {
210
- color: "white",
211
- filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
212
- } }), children || _jsx("span", { children: "Connexion requise" })] })) : (_jsxs(_Fragment, { children: [_jsx(ImageIcon, { size: 18, style: {
213
- color: "white",
214
- filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
215
- } }), _jsx("span", { style: { letterSpacing: "0.025em" }, children: children || "Générer une image" })] })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, enableModelManagement: true, modelCategory: "image", baseUrl: baseUrl, apiKey: apiKeyId, models: [] }))] }), showImageCard && generatedImage && (_jsxs("div", { className: "relative", style: {
216
- maxWidth: "320px",
217
- borderRadius: "12px",
218
- padding: "16px",
219
- boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
220
- ...getThemeStyles().card,
221
- }, children: [_jsxs("div", { className: "flex items-start justify-between mb-3", children: [_jsx("h3", { className: "font-medium text-sm leading-tight", style: {
222
- maxWidth: "calc(100% - 32px)",
223
- ...getThemeStyles().header,
224
- }, title: generatedImage.prompt, children: generatedImage.prompt.length > 60
118
+ const sizeClass = `ai-size-${size}`;
119
+ const radiusClass = `ai-radius-${radius}`;
120
+ const variantClass = variant === "light" ? "ai-btn--light" : "";
121
+ return (_jsxs("div", { className: "flex items-start gap-4", children: [_jsxs("div", { className: "relative inline-block ai-glow", children: [_jsx("button", { ...buttonProps, onClick: handleOpenPanel, disabled: disabled || loading || !isAuthReady, className: `ai-btn ai-image-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`, style: buttonProps.style, "data-ai-image-button": true, title: !isAuthReady ? "Authentication required" : "Générer une image", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 18, className: "ai-spinner" }), _jsx("span", { className: "ai-text-microtracking", children: "G\u00E9n\u00E9ration..." })] })) : !isAuthReady ? (_jsxs(_Fragment, { children: [_jsx(Lock, { size: 18 }), children || _jsx("span", { children: "Connexion requise" })] })) : (_jsxs(_Fragment, { children: [_jsx(ImageIcon, { size: 18 }), _jsx("span", { className: "ai-text-microtracking", children: children || "Générer une image" })] })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, enableModelManagement: true, modelCategory: "image", baseUrl: baseUrl, apiKey: apiKeyId, models: [] }))] }), showImageCard && generatedImage && (_jsxs("div", { className: "ai-surface ai-image-card relative", children: [_jsxs("div", { className: "flex items-start justify-between mb-3", children: [_jsx("h3", { className: "font-medium text-sm leading-tight max-w-[calc(100%-32px)]", title: generatedImage.prompt, children: generatedImage.prompt.length > 60
225
122
  ? `${generatedImage.prompt.substring(0, 60)}...`
226
- : generatedImage.prompt }), _jsx("button", { onClick: handleCloseImage, className: "transition-colors flex-shrink-0", style: {
227
- padding: "2px",
228
- borderRadius: "4px",
229
- backgroundColor: "transparent",
230
- border: "none",
231
- cursor: "pointer",
232
- color: getThemeStyles().closeButton.color,
233
- }, onMouseEnter: (e) => {
234
- e.currentTarget.style.color =
235
- getThemeStyles().closeButton.hoverColor;
236
- }, onMouseLeave: (e) => {
237
- e.currentTarget.style.color =
238
- getThemeStyles().closeButton.color;
239
- }, children: _jsx(X, { size: 16 }) })] }), _jsx("div", { className: "mb-4 rounded-lg overflow-hidden", style: getThemeStyles().imageContainer, children: _jsx("img", { src: generatedImage.url, alt: generatedImage.prompt, className: "w-full h-auto", style: {
240
- maxHeight: "200px",
241
- objectFit: "contain",
242
- display: "block",
243
- } }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs("button", { onClick: handleDownload, className: "flex items-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-lg transition-all shadow-sm", style: {
244
- backgroundColor: "#10b981",
245
- color: "white",
246
- border: "none",
247
- cursor: "pointer",
248
- }, onMouseEnter: (e) => {
249
- e.currentTarget.style.backgroundColor = "#059669";
250
- e.currentTarget.style.transform = "translateY(-1px)";
251
- e.currentTarget.style.boxShadow =
252
- "0 4px 12px rgba(16, 185, 129, 0.3)";
253
- }, onMouseLeave: (e) => {
254
- e.currentTarget.style.backgroundColor = "#10b981";
255
- e.currentTarget.style.transform = "translateY(0)";
256
- e.currentTarget.style.boxShadow = "";
257
- }, title: "T\u00E9l\u00E9charger l'image", children: [_jsx(Download, { size: 16 }), "T\u00E9l\u00E9charger l'image"] }), onImageSave && (_jsxs("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", children: [_jsx(ExternalLink, { size: 14 }), "Sauvegarder"] }))] }), _jsx("div", { className: "mt-3 pt-3 text-xs", style: {
258
- ...getThemeStyles().metadata,
259
- }, children: _jsx("div", { className: "flex justify-center", children: _jsxs("span", { children: ["ID: ", generatedImage.requestId.slice(-8)] }) }) })] })), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) }), _jsx(ErrorToast, { error: errorData, onComplete: clearError }, errorKey)] }));
123
+ : generatedImage.prompt }), _jsx("button", { onClick: handleCloseImage, className: "ai-icon-btn flex-shrink-0", children: _jsx(X, { size: 16 }) })] }), _jsx("div", { className: "ai-image-frame", children: _jsx("img", { src: generatedImage.url, alt: generatedImage.prompt, className: "ai-image-preview" }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs("button", { onClick: handleDownload, className: "ai-btn ai-btn--primary", title: "T\u00E9l\u00E9charger l'image", children: [_jsx(Download, { size: 16 }), "T\u00E9l\u00E9charger l'image"] }), onImageSave && (_jsxs("button", { onClick: handleSave, className: "ai-btn", title: "Sauvegarder en base", children: [_jsx(ExternalLink, { size: 14 }), "Sauvegarder"] }))] }), _jsx("div", { className: "ai-image-meta", children: _jsx("div", { className: "flex justify-center", children: _jsxs("span", { children: ["ID: ", generatedImage.requestId.slice(-8)] }) }) })] })), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) }), _jsx(ErrorToast, { error: errorData, onComplete: clearError }, errorKey)] }));
260
124
  }
@@ -1,8 +1,10 @@
1
1
  import { type InputHTMLAttributes } from "react";
2
- import type { BaseAiProps } from "../types";
3
- export interface AiInputProps extends Omit<BaseAiProps, "type">, Omit<InputHTMLAttributes<HTMLInputElement>, "onValue"> {
2
+ import type { AiRadius, AiSize, BaseAiProps } from "../types";
3
+ export interface AiInputProps extends Omit<BaseAiProps, "type">, Omit<InputHTMLAttributes<HTMLInputElement>, "onValue" | "size"> {
4
4
  uiMode?: "modal" | "drawer";
5
5
  enableModelManagement?: boolean;
6
+ size?: AiSize;
7
+ radius?: AiRadius;
6
8
  }
7
- export declare function AiInput({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode, context, model, prompt, editMode, enableModelManagement, storeOutputs, artifactTitle, onValue, onToast, disabled, className, ...inputProps }: AiInputProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function AiInput({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode, size, radius, context, model, prompt, editMode, enableModelManagement, storeOutputs, artifactTitle, onValue, onToast, disabled, className, ...inputProps }: AiInputProps): import("react/jsx-runtime").JSX.Element;
8
10
  //# sourceMappingURL=AiInput.d.ts.map
@@ -1 +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;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAW5C,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;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,qBAA4B,EAC5B,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,YAAY,2CAwOd"}
1
+ {"version":3,"file":"AiInput.d.ts","sourceRoot":"","sources":["../../src/components/AiInput.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAU9D,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,IAAW,EACX,MAAe,EACf,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,qBAA4B,EAC5B,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,YAAY,2CA4Md"}
@@ -1,22 +1,19 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useState, useRef } from "react";
4
- import { Sparkles } from "lucide-react";
4
+ import { Loader2, Lock, Sparkles } from "lucide-react";
5
5
  import { useAiCallText } from "../hooks/useAiCallText";
6
6
  import { useAiModels } from "../hooks/useAiModels";
7
7
  import { AiPromptPanel } from "./AiPromptPanel";
8
8
  import { UsageToast, useUsageToast } from "./UsageToast";
9
- import { aiStyles } from "../styles/inline";
10
9
  import { handleAIError } from "../utils/errorHandler";
11
10
  import { useLB } from "../context/LBAuthProvider";
12
11
  import { LBSigninModal } from "./LBSigninModal";
13
12
  import { useAiContext } from "../context/AiProvider";
14
- export function AiInput({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", context, model, prompt, editMode = false, enableModelManagement = true, storeOutputs, artifactTitle, onValue, onToast, disabled, className, ...inputProps }) {
13
+ export function AiInput({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", size = "md", radius = "full", context, model, prompt, editMode = false, enableModelManagement = true, storeOutputs, artifactTitle, onValue, onToast, disabled, className, ...inputProps }) {
15
14
  const [isOpen, setIsOpen] = useState(false);
16
15
  const [showAuthModal, setShowAuthModal] = useState(false);
17
16
  const [inputValue, setInputValue] = useState(inputProps.value?.toString() || inputProps.defaultValue?.toString() || "");
18
- const [isFocused, setIsFocused] = useState(false);
19
- const [isButtonHovered, setIsButtonHovered] = useState(false);
20
17
  const inputRef = useRef(null);
21
18
  const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
22
19
  // Rendre l'authentification optionnelle
@@ -127,24 +124,15 @@ export function AiInput({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode =
127
124
  setInputValue(newValue);
128
125
  inputProps.onChange?.(e);
129
126
  };
130
- return (_jsxs("div", { style: aiStyles.inputWrapper, className: className, children: [_jsx("input", { ref: inputRef, ...inputProps, style: {
131
- ...aiStyles.input,
132
- ...(isFocused && aiStyles.inputFocus),
133
- }, value: inputValue, onChange: handleInputChange, onFocus: (e) => {
134
- setIsFocused(true);
135
- inputProps.onFocus?.(e);
136
- }, onBlur: (e) => {
137
- setIsFocused(false);
138
- inputProps.onBlur?.(e);
139
- }, disabled: disabled || loading }), _jsx("button", { style: {
140
- ...aiStyles.inputAiButton,
141
- ...(isButtonHovered && aiStyles.inputAiButtonHover),
142
- ...(disabled || loading
143
- ? { opacity: 0.5, cursor: "not-allowed" }
144
- : {}),
145
- }, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading || !isAuthReady, type: "button", title: !isAuthReady
146
- ? "Authentication required"
147
- : hasConfiguration
148
- ? "Generate with AI"
149
- : "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" }) })) : shouldShowSparkles ? (_jsx(Sparkles, { size: 16 })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: [], modelCategory: "text", sourceText: inputValue || undefined, apiKey: apiKeyId, baseUrl: baseUrl, enableModelManagement: enableModelManagement, showOnlyUserModels: true })), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) }), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
127
+ const sizeClass = `ai-size-${size}`;
128
+ const radiusClass = `ai-radius-${radius}`;
129
+ return (_jsxs("div", { className: `ai-control-group ai-glow ${className || ""}`, children: [_jsxs("div", { className: `ai-shell ${sizeClass} ${radiusClass}`, children: [_jsx("input", { ref: inputRef, ...inputProps, className: `ai-control ai-control-input ${sizeClass} ${radiusClass}`, value: inputValue, onChange: handleInputChange, onFocus: (e) => {
130
+ inputProps.onFocus?.(e);
131
+ }, onBlur: (e) => {
132
+ inputProps.onBlur?.(e);
133
+ }, "aria-invalid": Boolean(inputProps["aria-invalid"]), disabled: disabled || loading }), _jsx("button", { className: `ai-control-action ai-spark ${sizeClass} ${radiusClass}`, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, disabled: disabled || loading, type: "button", title: !isAuthReady
134
+ ? "Authentication required"
135
+ : hasConfiguration
136
+ ? "Generate with AI"
137
+ : "Setup AI", children: loading ? (_jsx(Loader2, { size: 16, className: "ai-spinner" })) : shouldShowSparkles ? (_jsx(Sparkles, { size: 16 })) : (_jsx(Lock, { size: 16 })) })] }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: [], modelCategory: "text", sourceText: inputValue || undefined, apiKey: apiKeyId, baseUrl: baseUrl, enableModelManagement: enableModelManagement, showOnlyUserModels: true })), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) }), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
150
138
  }
@@ -1 +1 @@
1
- {"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASvC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,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,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAE1D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA0BtD"}
1
+ {"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASvC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,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,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAE1D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA0BtD"}