@lastbrain/ai-ui-react 1.0.68 → 1.0.70
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.
- package/dist/components/AiChipLabel.d.ts +8 -3
- package/dist/components/AiChipLabel.d.ts.map +1 -1
- package/dist/components/AiChipLabel.js +23 -70
- package/dist/components/AiContextButton.d.ts +10 -2
- package/dist/components/AiContextButton.d.ts.map +1 -1
- package/dist/components/AiContextButton.js +73 -291
- package/dist/components/AiImageButton.d.ts +5 -1
- package/dist/components/AiImageButton.d.ts.map +1 -1
- package/dist/components/AiImageButton.js +6 -142
- package/dist/components/AiInput.d.ts +5 -3
- package/dist/components/AiInput.d.ts.map +1 -1
- package/dist/components/AiInput.js +13 -25
- package/dist/components/AiPromptPanel.d.ts.map +1 -1
- package/dist/components/AiPromptPanel.js +64 -212
- package/dist/components/AiSelect.d.ts +5 -3
- package/dist/components/AiSelect.d.ts.map +1 -1
- package/dist/components/AiSelect.js +21 -30
- package/dist/components/AiStatusButton.d.ts +4 -1
- package/dist/components/AiStatusButton.d.ts.map +1 -1
- package/dist/components/AiStatusButton.js +211 -676
- package/dist/components/AiTextarea.d.ts +4 -2
- package/dist/components/AiTextarea.d.ts.map +1 -1
- package/dist/components/AiTextarea.js +14 -26
- package/dist/components/LBApiKeySelector.d.ts.map +1 -1
- package/dist/components/LBApiKeySelector.js +5 -166
- package/dist/components/LBConnectButton.d.ts +4 -7
- package/dist/components/LBConnectButton.d.ts.map +1 -1
- package/dist/components/LBConnectButton.js +17 -86
- package/dist/components/LBSigninModal.d.ts +1 -1
- package/dist/components/LBSigninModal.d.ts.map +1 -1
- package/dist/components/LBSigninModal.js +42 -320
- package/dist/context/LBAuthProvider.d.ts +35 -3
- package/dist/context/LBAuthProvider.d.ts.map +1 -1
- package/dist/context/LBAuthProvider.js +2 -0
- package/dist/examples/AiUiPremiumShowcase.d.ts +2 -0
- package/dist/examples/AiUiPremiumShowcase.d.ts.map +1 -0
- package/dist/examples/AiUiPremiumShowcase.js +15 -0
- package/dist/hooks/useAiModels.d.ts.map +1 -1
- package/dist/hooks/useModelManagement.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/styles/inline.d.ts +1 -0
- package/dist/styles/inline.d.ts.map +1 -1
- package/dist/styles/inline.js +25 -129
- package/dist/styles.css +1268 -369
- package/dist/types.d.ts +3 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/errorHandler.d.ts +2 -2
- package/dist/utils/errorHandler.d.ts.map +1 -1
- package/dist/utils/errorHandler.js +8 -1
- package/dist/utils/modelManagement.d.ts +13 -10
- package/dist/utils/modelManagement.d.ts.map +1 -1
- package/dist/utils/modelManagement.js +19 -2
- package/package.json +2 -2
- package/src/components/AiChipLabel.tsx +68 -101
- package/src/components/AiContextButton.tsx +142 -413
- package/src/components/AiImageButton.tsx +29 -190
- package/src/components/AiInput.tsx +49 -74
- package/src/components/AiPromptPanel.tsx +81 -260
- package/src/components/AiSelect.tsx +61 -69
- package/src/components/AiStatusButton.tsx +496 -1327
- package/src/components/AiTextarea.tsx +50 -63
- package/src/components/LBApiKeySelector.tsx +93 -271
- package/src/components/LBConnectButton.tsx +39 -336
- package/src/components/LBSigninModal.tsx +141 -472
- package/src/context/LBAuthProvider.tsx +45 -6
- package/src/examples/AiUiPremiumShowcase.tsx +94 -0
- package/src/hooks/useAiModels.ts +2 -1
- package/src/hooks/useModelManagement.ts +2 -1
- package/src/index.ts +3 -0
- package/src/styles/inline.ts +27 -148
- package/src/styles.css +1268 -369
- package/src/types.ts +3 -0
- package/src/utils/errorHandler.ts +16 -3
- package/src/utils/modelManagement.ts +53 -15
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect, useRef, useLayoutEffect, } from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
4
5
|
import { BookOpen, Search, Sparkles, Star, Tag, Settings } from "lucide-react";
|
|
5
6
|
import { aiStyles } from "../styles/inline";
|
|
6
7
|
import { handleAIError } from "../utils/errorHandler";
|
|
@@ -33,8 +34,6 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
33
34
|
const [prompt, setPrompt] = useState("");
|
|
34
35
|
const [promptId, setPromptId] = useState(undefined);
|
|
35
36
|
const [isCloseHovered, setIsCloseHovered] = useState(false);
|
|
36
|
-
const [isCancelHovered, setIsCancelHovered] = useState(false);
|
|
37
|
-
const [isSubmitHovered, setIsSubmitHovered] = useState(false);
|
|
38
37
|
const [promptFocused, setPromptFocused] = useState(false);
|
|
39
38
|
const [modelFocused, setModelFocused] = useState(false);
|
|
40
39
|
const [showPromptLibrary, setShowPromptLibrary] = useState(false);
|
|
@@ -42,6 +41,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
42
41
|
const [selectedTag, setSelectedTag] = useState("all");
|
|
43
42
|
const [isGenerating, setIsGenerating] = useState(false);
|
|
44
43
|
const [isClosing, setIsClosing] = useState(false);
|
|
44
|
+
const [portalRoot, setPortalRoot] = useState(null);
|
|
45
45
|
const promptRef = useRef(null);
|
|
46
46
|
const closeTimeoutRef = useRef(null);
|
|
47
47
|
// États pour la gestion des modèles
|
|
@@ -171,6 +171,9 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
171
171
|
}
|
|
172
172
|
};
|
|
173
173
|
}, []);
|
|
174
|
+
useEffect(() => {
|
|
175
|
+
setPortalRoot(document.body);
|
|
176
|
+
}, []);
|
|
174
177
|
useEffect(() => {
|
|
175
178
|
if (!isOpen) {
|
|
176
179
|
return;
|
|
@@ -257,10 +260,13 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
257
260
|
setShowAllModels,
|
|
258
261
|
onModelToggle: handleModelToggle,
|
|
259
262
|
};
|
|
263
|
+
if (!portalRoot) {
|
|
264
|
+
return null;
|
|
265
|
+
}
|
|
260
266
|
if (children) {
|
|
261
|
-
return (_jsx("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: children(renderProps) }));
|
|
267
|
+
return createPortal(_jsx("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: children(renderProps) }), portalRoot);
|
|
262
268
|
}
|
|
263
|
-
return (_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: {
|
|
269
|
+
return createPortal(_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: {
|
|
264
270
|
...aiStyles.modalOverlay,
|
|
265
271
|
opacity: isClosing ? 0 : 1,
|
|
266
272
|
transition: "opacity 200ms ease",
|
|
@@ -290,17 +296,17 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
290
296
|
width: "64px",
|
|
291
297
|
height: "64px",
|
|
292
298
|
borderRadius: "999px",
|
|
293
|
-
border: "2px solid
|
|
294
|
-
borderTopColor: "
|
|
299
|
+
border: "2px solid color-mix(in srgb, var(--ai-primary) 20%, transparent)",
|
|
300
|
+
borderTopColor: "var(--ai-primary)",
|
|
295
301
|
animation: "ai-spin 1.1s linear infinite",
|
|
296
302
|
display: "flex",
|
|
297
303
|
alignItems: "center",
|
|
298
304
|
justifyContent: "center",
|
|
299
|
-
boxShadow: "0 12px 24px
|
|
300
|
-
}, children: _jsx(Sparkles, { size: 20, color: "
|
|
305
|
+
boxShadow: "0 12px 24px var(--ai-glow)",
|
|
306
|
+
}, children: _jsx(Sparkles, { size: 20, color: "var(--ai-primary)" }) }), _jsx("div", { style: {
|
|
301
307
|
fontSize: "13px",
|
|
302
308
|
fontWeight: 600,
|
|
303
|
-
color: "
|
|
309
|
+
color: "var(--ai-text-secondary)",
|
|
304
310
|
letterSpacing: "0.02em",
|
|
305
311
|
}, children: "G\u00E9n\u00E9ration en cours\u2026" })] })), _jsxs("div", { style: {
|
|
306
312
|
...aiStyles.modalHeader,
|
|
@@ -336,28 +342,12 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
336
342
|
justifyContent: "space-between",
|
|
337
343
|
alignItems: "center",
|
|
338
344
|
marginBottom: "8px",
|
|
339
|
-
}, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), effectiveAvailableModels.length > 0 && (_jsxs("button", { onClick: () => setIsModelManagementOpen(true),
|
|
340
|
-
padding: "4px 12px",
|
|
341
|
-
fontSize: "12px",
|
|
342
|
-
color: "#8b5cf6",
|
|
343
|
-
background: "#8b5cf610",
|
|
344
|
-
border: "1px solid #8b5cf630",
|
|
345
|
-
borderRadius: "6px",
|
|
346
|
-
cursor: "pointer",
|
|
347
|
-
transition: "all 0.2s",
|
|
348
|
-
display: "flex",
|
|
349
|
-
alignItems: "center",
|
|
350
|
-
gap: "6px",
|
|
351
|
-
}, onMouseEnter: (e) => {
|
|
352
|
-
e.currentTarget.style.background = "#8b5cf620";
|
|
353
|
-
}, onMouseLeave: (e) => {
|
|
354
|
-
e.currentTarget.style.background = "#8b5cf610";
|
|
355
|
-
}, title: "G\u00E9rer les mod\u00E8les", children: [_jsx(Settings, { size: 14 }), "G\u00E9rer les mod\u00E8les", effectiveAvailableModels.filter((m) => m.category === modelCategory &&
|
|
345
|
+
}, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), effectiveAvailableModels.length > 0 && (_jsxs("button", { onClick: () => setIsModelManagementOpen(true), className: "ai-inline-btn", title: "G\u00E9rer les mod\u00E8les", children: [_jsx(Settings, { size: 14 }), "G\u00E9rer les mod\u00E8les", effectiveAvailableModels.filter((m) => m.category === modelCategory &&
|
|
356
346
|
!effectiveUserModels.includes(m.id)).length > 0 && (_jsxs("span", { style: {
|
|
357
347
|
marginLeft: "2px",
|
|
358
348
|
padding: "2px 6px",
|
|
359
349
|
fontSize: "10px",
|
|
360
|
-
background: "
|
|
350
|
+
background: "var(--ai-primary)",
|
|
361
351
|
color: "white",
|
|
362
352
|
borderRadius: "10px",
|
|
363
353
|
fontWeight: "600",
|
|
@@ -374,7 +364,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
374
364
|
}, children: [model.name, showAllModels && isActive && " ✓", showAllModels && !isActive && " (Désactivé)"] }, model.id));
|
|
375
365
|
})] }), showAllModels && onModelToggle && (_jsx("div", { style: {
|
|
376
366
|
fontSize: "11px",
|
|
377
|
-
color: "
|
|
367
|
+
color: "var(--ai-text-secondary)",
|
|
378
368
|
marginTop: "4px",
|
|
379
369
|
}, children: "\uD83D\uDCA1 Cliquez sur \"\u2699\uFE0F\" pour activer/d\u00E9sactiver les mod\u00E8les" }))] })) : (
|
|
380
370
|
// Version classique
|
|
@@ -387,27 +377,11 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
387
377
|
alignItems: "center",
|
|
388
378
|
marginBottom: "8px",
|
|
389
379
|
}, children: [_jsxs("label", { htmlFor: "prompt-input", style: aiStyles.modalLabel, children: ["Prompt", _jsx("span", { style: {
|
|
390
|
-
color: "
|
|
380
|
+
color: "var(--ai-text-secondary)",
|
|
391
381
|
marginLeft: "4px",
|
|
392
382
|
fontSize: "12px",
|
|
393
383
|
fontWeight: 400,
|
|
394
|
-
}, children: "(Cmd/Ctrl + Enter to submit)" })] }), filteredPrompts.length > 0 && (_jsxs("button", { onClick: () => setShowPromptLibrary(true),
|
|
395
|
-
padding: "4px 12px",
|
|
396
|
-
fontSize: "12px",
|
|
397
|
-
color: "#8b5cf6",
|
|
398
|
-
background: "#8b5cf610",
|
|
399
|
-
border: "1px solid #8b5cf630",
|
|
400
|
-
borderRadius: "6px",
|
|
401
|
-
cursor: "pointer",
|
|
402
|
-
transition: "all 0.2s",
|
|
403
|
-
display: "flex",
|
|
404
|
-
alignItems: "center",
|
|
405
|
-
gap: "6px",
|
|
406
|
-
}, onMouseEnter: (e) => {
|
|
407
|
-
e.currentTarget.style.background = "#8b5cf620";
|
|
408
|
-
}, onMouseLeave: (e) => {
|
|
409
|
-
e.currentTarget.style.background = "#8b5cf610";
|
|
410
|
-
}, children: [_jsx(BookOpen, { size: 14 }), "Browse Prompts (", filteredPrompts.length, ")"] }))] }), _jsx("textarea", { id: "prompt-input", ref: promptRef, value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
|
|
384
|
+
}, children: "(Cmd/Ctrl + Enter to submit)" })] }), filteredPrompts.length > 0 && (_jsxs("button", { onClick: () => setShowPromptLibrary(true), className: "ai-inline-btn", children: [_jsx(BookOpen, { size: 14 }), "Browse Prompts (", filteredPrompts.length, ")"] }))] }), _jsx("textarea", { id: "prompt-input", ref: promptRef, value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
|
|
411
385
|
? "Enter your AI prompt... e.g., 'Correct spelling and grammar', 'Make it more professional', 'Translate to English'"
|
|
412
386
|
: "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'", rows: 6, style: {
|
|
413
387
|
...aiStyles.textarea,
|
|
@@ -416,7 +390,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
416
390
|
} })] })] })) : (_jsxs("div", { children: [_jsx("button", { onClick: () => setShowPromptLibrary(false), style: {
|
|
417
391
|
padding: "8px 0",
|
|
418
392
|
fontSize: "14px",
|
|
419
|
-
color: "
|
|
393
|
+
color: "var(--ai-primary)",
|
|
420
394
|
background: "transparent",
|
|
421
395
|
border: "none",
|
|
422
396
|
cursor: "pointer",
|
|
@@ -450,23 +424,23 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
450
424
|
}, children: [_jsx(Tag, { size: 14 }), "Tags"] }), _jsx("button", { onClick: () => setSelectedTag("all"), style: {
|
|
451
425
|
...aiStyles.chip,
|
|
452
426
|
borderColor: selectedTag === "all"
|
|
453
|
-
? "
|
|
427
|
+
? "var(--ai-primary)"
|
|
454
428
|
: aiStyles.chip.border,
|
|
455
429
|
background: selectedTag === "all"
|
|
456
|
-
? "
|
|
430
|
+
? "color-mix(in srgb, var(--ai-primary) 20%, transparent)"
|
|
457
431
|
: aiStyles.chip.background,
|
|
458
432
|
}, children: "All" }), availableTags.map((tag) => (_jsx("button", { onClick: () => setSelectedTag(tag), style: {
|
|
459
433
|
...aiStyles.chip,
|
|
460
434
|
borderColor: selectedTag === tag
|
|
461
|
-
? "
|
|
435
|
+
? "var(--ai-primary)"
|
|
462
436
|
: aiStyles.chip.border,
|
|
463
437
|
background: selectedTag === tag
|
|
464
|
-
? "
|
|
438
|
+
? "color-mix(in srgb, var(--ai-primary) 20%, transparent)"
|
|
465
439
|
: aiStyles.chip.background,
|
|
466
440
|
}, children: tag }, tag)))] }))] }), promptsLoading ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: "Loading prompts..." })) : visiblePrompts.length === 0 ? (_jsx("div", { style: {
|
|
467
441
|
textAlign: "center",
|
|
468
442
|
padding: "40px 0",
|
|
469
|
-
color: "
|
|
443
|
+
color: "var(--ai-text-secondary)",
|
|
470
444
|
}, children: "No prompts available for this model type" })) : (_jsxs("div", { style: {
|
|
471
445
|
display: "flex",
|
|
472
446
|
flexDirection: "column",
|
|
@@ -475,7 +449,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
475
449
|
overflow: "auto",
|
|
476
450
|
}, children: [favoritePrompts.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
|
|
477
451
|
fontSize: "12px",
|
|
478
|
-
color: "
|
|
452
|
+
color: "var(--ai-text-secondary)",
|
|
479
453
|
fontWeight: 600,
|
|
480
454
|
textTransform: "uppercase",
|
|
481
455
|
marginBottom: "8px",
|
|
@@ -485,26 +459,29 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
485
459
|
gap: "12px",
|
|
486
460
|
}, children: favoritePrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
|
|
487
461
|
padding: "16px",
|
|
488
|
-
border: `1px solid
|
|
462
|
+
border: `1px solid var(--ai-border)`,
|
|
489
463
|
borderRadius: "8px",
|
|
490
464
|
cursor: "pointer",
|
|
491
465
|
transition: "all 0.2s",
|
|
492
466
|
}, onMouseEnter: (e) => {
|
|
493
|
-
e.currentTarget.style.background =
|
|
494
|
-
|
|
467
|
+
e.currentTarget.style.background =
|
|
468
|
+
"color-mix(in srgb, var(--ai-primary) 10%, transparent)";
|
|
469
|
+
e.currentTarget.style.borderColor =
|
|
470
|
+
"var(--ai-primary)";
|
|
495
471
|
}, onMouseLeave: (e) => {
|
|
496
472
|
e.currentTarget.style.background = "transparent";
|
|
497
|
-
e.currentTarget.style.borderColor =
|
|
473
|
+
e.currentTarget.style.borderColor =
|
|
474
|
+
"var(--ai-border)";
|
|
498
475
|
}, children: [_jsxs("div", { style: {
|
|
499
476
|
display: "flex",
|
|
500
477
|
alignItems: "center",
|
|
501
478
|
gap: "8px",
|
|
502
479
|
fontWeight: 600,
|
|
503
480
|
marginBottom: "4px",
|
|
504
|
-
color: "
|
|
505
|
-
}, children: [_jsx(Star, { size: 14, color: "
|
|
481
|
+
color: "var(--ai-text)",
|
|
482
|
+
}, children: [_jsx(Star, { size: 14, color: "var(--ai-primary)" }), promptData.title] }), _jsx("div", { style: {
|
|
506
483
|
fontSize: "13px",
|
|
507
|
-
color: "
|
|
484
|
+
color: "var(--ai-text-secondary)",
|
|
508
485
|
overflow: "hidden",
|
|
509
486
|
textOverflow: "ellipsis",
|
|
510
487
|
display: "-webkit-box",
|
|
@@ -513,10 +490,10 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
513
490
|
}, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
|
|
514
491
|
marginTop: "8px",
|
|
515
492
|
fontSize: "11px",
|
|
516
|
-
color: "
|
|
493
|
+
color: "var(--ai-primary)",
|
|
517
494
|
}, children: String(promptData.category) })) : null] }, promptData.id))) })] })), nonFavoritePrompts.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
|
|
518
495
|
fontSize: "12px",
|
|
519
|
-
color: "
|
|
496
|
+
color: "var(--ai-text-secondary)",
|
|
520
497
|
fontWeight: 600,
|
|
521
498
|
textTransform: "uppercase",
|
|
522
499
|
marginTop: favoritePrompts.length > 0 ? "12px" : undefined,
|
|
@@ -527,23 +504,26 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
527
504
|
gap: "12px",
|
|
528
505
|
}, children: nonFavoritePrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
|
|
529
506
|
padding: "16px",
|
|
530
|
-
border: `1px solid
|
|
507
|
+
border: `1px solid var(--ai-border)`,
|
|
531
508
|
borderRadius: "8px",
|
|
532
509
|
cursor: "pointer",
|
|
533
510
|
transition: "all 0.2s",
|
|
534
511
|
}, onMouseEnter: (e) => {
|
|
535
|
-
e.currentTarget.style.background =
|
|
536
|
-
|
|
512
|
+
e.currentTarget.style.background =
|
|
513
|
+
"color-mix(in srgb, var(--ai-primary) 10%, transparent)";
|
|
514
|
+
e.currentTarget.style.borderColor =
|
|
515
|
+
"var(--ai-primary)";
|
|
537
516
|
}, onMouseLeave: (e) => {
|
|
538
517
|
e.currentTarget.style.background = "transparent";
|
|
539
|
-
e.currentTarget.style.borderColor =
|
|
518
|
+
e.currentTarget.style.borderColor =
|
|
519
|
+
"var(--ai-border)";
|
|
540
520
|
}, children: [_jsx("div", { style: {
|
|
541
521
|
fontWeight: 600,
|
|
542
522
|
marginBottom: "4px",
|
|
543
|
-
color: "
|
|
523
|
+
color: "var(--ai-text)",
|
|
544
524
|
}, children: promptData.title }), _jsx("div", { style: {
|
|
545
525
|
fontSize: "13px",
|
|
546
|
-
color: "
|
|
526
|
+
color: "var(--ai-text-secondary)",
|
|
547
527
|
overflow: "hidden",
|
|
548
528
|
textOverflow: "ellipsis",
|
|
549
529
|
display: "-webkit-box",
|
|
@@ -552,31 +532,19 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
552
532
|
}, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
|
|
553
533
|
marginTop: "8px",
|
|
554
534
|
fontSize: "11px",
|
|
555
|
-
color: "
|
|
535
|
+
color: "var(--ai-primary)",
|
|
556
536
|
}, children: String(promptData.category) })) : null] }, promptData.id))) })] }))] }))] })) }), _jsxs("div", { style: {
|
|
557
537
|
...aiStyles.modalFooter,
|
|
558
538
|
position: "sticky",
|
|
559
539
|
bottom: 0,
|
|
560
540
|
zIndex: 5,
|
|
561
541
|
backdropFilter: "blur(8px)",
|
|
562
|
-
}, children: [_jsx("button", { onClick: handleClose,
|
|
563
|
-
...aiStyles.button,
|
|
564
|
-
...aiStyles.buttonSecondary,
|
|
565
|
-
...(isCancelHovered && aiStyles.buttonSecondaryHover),
|
|
566
|
-
}, children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), onMouseEnter: () => setIsSubmitHovered(true), onMouseLeave: () => setIsSubmitHovered(false), style: {
|
|
567
|
-
...aiStyles.button,
|
|
568
|
-
...(isSubmitHovered &&
|
|
569
|
-
!(!selectedModel || !prompt.trim()) &&
|
|
570
|
-
aiStyles.buttonHover),
|
|
571
|
-
...(!selectedModel || !prompt.trim()
|
|
572
|
-
? aiStyles.buttonDisabled
|
|
573
|
-
: {}),
|
|
574
|
-
}, children: sourceText ? "Transform with AI" : "Generate with AI" })] })] }), enableModelManagement && isModelManagementOpen && (_jsxs("div", { style: {
|
|
542
|
+
}, children: [_jsx("button", { onClick: handleClose, className: "ai-btn ai-btn--ghost", children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), className: "ai-btn ai-btn--primary", children: sourceText ? "Transform with AI" : "Generate with AI" })] })] }), enableModelManagement && isModelManagementOpen && (_jsxs("div", { style: {
|
|
575
543
|
...aiStyles.modal,
|
|
576
|
-
zIndex:
|
|
544
|
+
zIndex: 2147483646, // Au-dessus du modal principal
|
|
577
545
|
}, children: [_jsx("div", { style: {
|
|
578
546
|
...aiStyles.modalOverlay,
|
|
579
|
-
backgroundColor: "
|
|
547
|
+
backgroundColor: "var(--ai-overlay)",
|
|
580
548
|
}, onClick: () => {
|
|
581
549
|
setIsModelManagementOpen(false);
|
|
582
550
|
setModelSearchQuery("");
|
|
@@ -587,7 +555,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
587
555
|
overflow: "hidden",
|
|
588
556
|
display: "flex",
|
|
589
557
|
flexDirection: "column",
|
|
590
|
-
boxShadow: "
|
|
558
|
+
boxShadow: "var(--ai-shadow-lg)",
|
|
591
559
|
}, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "Gestion des mod\u00E8les IA" }), _jsx("button", { style: aiStyles.modalCloseButton, onClick: () => {
|
|
592
560
|
setIsModelManagementOpen(false);
|
|
593
561
|
setModelSearchQuery("");
|
|
@@ -597,11 +565,11 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
597
565
|
overflow: "auto",
|
|
598
566
|
}, children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("p", { style: {
|
|
599
567
|
fontSize: "14px",
|
|
600
|
-
color: "var(--ai-
|
|
568
|
+
color: "var(--ai-muted)",
|
|
601
569
|
margin: "0 0 8px 0",
|
|
602
570
|
}, children: "Activez ou d\u00E9sactivez les mod\u00E8les selon vos besoins" }), _jsxs("p", { style: {
|
|
603
571
|
fontSize: "12px",
|
|
604
|
-
color: "var(--ai-text-tertiary
|
|
572
|
+
color: "var(--ai-text-tertiary)",
|
|
605
573
|
margin: "0 0 16px 0",
|
|
606
574
|
}, children: [effectiveAvailableModels.filter((m) => m.category === modelCategory).length, " ", "mod\u00E8les disponibles \u2022", " ", effectiveUserModels.filter((id) => effectiveAvailableModels.some((m) => m.id === id && m.category === modelCategory)).length, " ", "activ\u00E9s"] }), _jsxs("div", { style: {
|
|
607
575
|
...aiStyles.inputWrapper,
|
|
@@ -611,16 +579,12 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
611
579
|
left: "12px",
|
|
612
580
|
top: "50%",
|
|
613
581
|
transform: "translateY(-50%)",
|
|
614
|
-
color: "var(--ai-text-tertiary
|
|
582
|
+
color: "var(--ai-text-tertiary)",
|
|
615
583
|
} }), _jsx("input", { value: modelSearchQuery, onChange: (e) => setModelSearchQuery(e.target.value), placeholder: "Rechercher un mod\u00E8le...", style: {
|
|
616
584
|
...aiStyles.input,
|
|
617
585
|
padding: "10px 12px 10px 36px",
|
|
618
|
-
background: "var(--ai-bg
|
|
619
|
-
} })] })] }), _jsxs("div", {
|
|
620
|
-
display: "flex",
|
|
621
|
-
flexDirection: "column",
|
|
622
|
-
gap: "8px",
|
|
623
|
-
}, children: [effectiveAvailableModels
|
|
586
|
+
background: "var(--ai-bg)",
|
|
587
|
+
} })] })] }), _jsxs("div", { className: "ai-model-mgmt-list", children: [effectiveAvailableModels
|
|
624
588
|
.filter((model) => {
|
|
625
589
|
if (model.category !== modelCategory)
|
|
626
590
|
return false;
|
|
@@ -634,81 +598,8 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
634
598
|
.map((modelData) => {
|
|
635
599
|
const isActive = effectiveUserModels.includes(modelData.id);
|
|
636
600
|
const isLoading = loadingModels.includes(modelData.id);
|
|
637
|
-
return (_jsxs("div", {
|
|
638
|
-
|
|
639
|
-
alignItems: "center",
|
|
640
|
-
justifyContent: "space-between",
|
|
641
|
-
padding: "16px 18px",
|
|
642
|
-
// border: "2px solid",
|
|
643
|
-
// borderColor: isActive
|
|
644
|
-
// ? "#10b981"
|
|
645
|
-
// : "var(--ai-border-primary, #374151)",
|
|
646
|
-
borderRadius: "10px",
|
|
647
|
-
backgroundColor: isActive
|
|
648
|
-
? "rgba(16, 185, 129, 0.03)"
|
|
649
|
-
: "var(--ai-bg-secondary, rgba(31, 41, 55, 0.2))",
|
|
650
|
-
transition: "all 0.2s",
|
|
651
|
-
cursor: "pointer",
|
|
652
|
-
backdropFilter: "blur(8px)",
|
|
653
|
-
}, onClick: () => !isLoading &&
|
|
654
|
-
handleModelToggle(modelData.id, !isActive), onMouseEnter: (e) => {
|
|
655
|
-
// e.currentTarget.style.borderColor = isActive
|
|
656
|
-
// ? "#059669"
|
|
657
|
-
// : "#4b5563";
|
|
658
|
-
e.currentTarget.style.transform = "translateY(-2px)";
|
|
659
|
-
e.currentTarget.style.boxShadow = isActive
|
|
660
|
-
? "0 8px 16px rgba(16, 185, 129, 0.2)"
|
|
661
|
-
: "0 8px 16px rgba(0, 0, 0, 0.15)";
|
|
662
|
-
}, onMouseLeave: (e) => {
|
|
663
|
-
// e.currentTarget.style.borderColor = isActive
|
|
664
|
-
// ? "#10b981"
|
|
665
|
-
// : "var(--ai-border-primary, #374151)";
|
|
666
|
-
e.currentTarget.style.transform = "translateY(0)";
|
|
667
|
-
e.currentTarget.style.boxShadow = "none";
|
|
668
|
-
}, children: [_jsxs("div", { style: {
|
|
669
|
-
display: "flex",
|
|
670
|
-
alignItems: "center",
|
|
671
|
-
gap: "14px",
|
|
672
|
-
flex: 1,
|
|
673
|
-
}, children: [_jsx("div", { style: {
|
|
674
|
-
width: "8px",
|
|
675
|
-
height: "8px",
|
|
676
|
-
borderRadius: "50%",
|
|
677
|
-
backgroundColor: isActive ? "#10b981" : "#6b7280",
|
|
678
|
-
boxShadow: isActive
|
|
679
|
-
? "0 0 8px rgba(16, 185, 129, 0.6)"
|
|
680
|
-
: "none",
|
|
681
|
-
transition: "all 0.3s",
|
|
682
|
-
} }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: {
|
|
683
|
-
display: "flex",
|
|
684
|
-
alignItems: "center",
|
|
685
|
-
gap: "10px",
|
|
686
|
-
marginBottom: "6px",
|
|
687
|
-
}, children: [_jsx("span", { style: {
|
|
688
|
-
fontWeight: "600",
|
|
689
|
-
fontSize: "15px",
|
|
690
|
-
color: "var(--ai-text-secondary, #6b7280)",
|
|
691
|
-
letterSpacing: "-0.01em",
|
|
692
|
-
}, children: modelData.name }), modelData.isPro && (_jsx("span", { style: {
|
|
693
|
-
padding: "3px 10px",
|
|
694
|
-
fontSize: "10px",
|
|
695
|
-
backgroundColor: "#8b5cf6",
|
|
696
|
-
color: "white",
|
|
697
|
-
borderRadius: "12px",
|
|
698
|
-
fontWeight: "700",
|
|
699
|
-
textTransform: "uppercase",
|
|
700
|
-
letterSpacing: "0.05em",
|
|
701
|
-
boxShadow: "0 2px 8px rgba(139, 92, 246, 0.3)",
|
|
702
|
-
}, children: "PRO" }))] }), _jsxs("div", { style: {
|
|
703
|
-
display: "flex",
|
|
704
|
-
alignItems: "center",
|
|
705
|
-
gap: "16px",
|
|
706
|
-
fontSize: "13px",
|
|
707
|
-
color: isActive
|
|
708
|
-
? "#6ee7b7"
|
|
709
|
-
: "var(--ai-text-secondary, #d1d5db)",
|
|
710
|
-
fontWeight: "500",
|
|
711
|
-
}, children: [_jsxs("span", { style: {
|
|
601
|
+
return (_jsxs("div", { className: `ai-model-item ${isActive ? "ai-model-item--active" : ""}`, onClick: () => !isLoading &&
|
|
602
|
+
handleModelToggle(modelData.id, !isActive), children: [_jsxs("div", { className: "ai-model-item-main", children: [_jsx("div", { className: `ai-model-item-dot ${isActive ? "ai-model-item-dot--active" : ""}` }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { className: "ai-model-item-title", children: [_jsx("span", { children: modelData.name }), modelData.isPro && (_jsx("span", { className: "ai-pill ai-pill--pro", children: "PRO" }))] }), _jsxs("div", { className: "ai-model-item-meta", children: [_jsxs("span", { style: {
|
|
712
603
|
display: "flex",
|
|
713
604
|
alignItems: "center",
|
|
714
605
|
gap: "6px",
|
|
@@ -718,14 +609,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
718
609
|
height: "4px",
|
|
719
610
|
borderRadius: "50%",
|
|
720
611
|
backgroundColor: "currentColor",
|
|
721
|
-
} }), modelData.provider] }), modelData.costPer1M && (_jsxs("span", { style: {
|
|
722
|
-
padding: "2px 8px",
|
|
723
|
-
background: isActive
|
|
724
|
-
? "rgba(16, 185, 129, 0.15)"
|
|
725
|
-
: "rgba(107, 114, 128, 0.2)",
|
|
726
|
-
borderRadius: "6px",
|
|
727
|
-
fontSize: "12px",
|
|
728
|
-
}, children: ["$", modelData.costPer1M, "/1M"] }))] })] })] }), _jsxs("label", { style: {
|
|
612
|
+
} }), modelData.provider] }), modelData.costPer1M && (_jsxs("span", { className: "ai-pill ai-pill--cost", children: ["$", modelData.costPer1M, "/1M"] }))] })] })] }), _jsxs("label", { style: {
|
|
729
613
|
position: "relative",
|
|
730
614
|
display: "inline-block",
|
|
731
615
|
width: "54px",
|
|
@@ -738,36 +622,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
738
622
|
width: 0,
|
|
739
623
|
height: 0,
|
|
740
624
|
position: "absolute",
|
|
741
|
-
} }), _jsx("span", {
|
|
742
|
-
position: "absolute",
|
|
743
|
-
cursor: isLoading ? "not-allowed" : "pointer",
|
|
744
|
-
top: 0,
|
|
745
|
-
left: 0,
|
|
746
|
-
right: 0,
|
|
747
|
-
bottom: 0,
|
|
748
|
-
backgroundColor: isActive ? "#10b981" : "#4b5563",
|
|
749
|
-
transition: "0.3s",
|
|
750
|
-
borderRadius: "28px",
|
|
751
|
-
boxShadow: isActive
|
|
752
|
-
? "0 0 12px rgba(16, 185, 129, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.2)"
|
|
753
|
-
: "inset 0 1px 3px rgba(0, 0, 0, 0.3)",
|
|
754
|
-
border: isActive
|
|
755
|
-
? "2px solid #059669"
|
|
756
|
-
: "2px solid #374151",
|
|
757
|
-
}, children: _jsx("span", { style: {
|
|
758
|
-
position: "absolute",
|
|
759
|
-
content: "",
|
|
760
|
-
height: "22px",
|
|
761
|
-
width: "22px",
|
|
762
|
-
left: isActive ? "28px" : "2px",
|
|
763
|
-
bottom: "2px",
|
|
764
|
-
backgroundColor: "white",
|
|
765
|
-
transition: "0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
766
|
-
borderRadius: "50%",
|
|
767
|
-
boxShadow: isActive
|
|
768
|
-
? "0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.1)"
|
|
769
|
-
: "0 3px 8px rgba(0, 0, 0, 0.3)",
|
|
770
|
-
} }) })] })] }, modelData.id));
|
|
625
|
+
} }), _jsx("span", { className: `ai-toggle ${isActive ? "ai-toggle--active" : ""}` })] })] }, modelData.id));
|
|
771
626
|
}), effectiveAvailableModels.filter((model) => {
|
|
772
627
|
if (model.category !== modelCategory)
|
|
773
628
|
return false;
|
|
@@ -780,15 +635,12 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
|
|
|
780
635
|
}).length === 0 && (_jsx("div", { style: {
|
|
781
636
|
textAlign: "center",
|
|
782
637
|
padding: "32px 16px",
|
|
783
|
-
color: "var(--ai-text-tertiary
|
|
638
|
+
color: "var(--ai-text-tertiary)",
|
|
784
639
|
fontSize: "14px",
|
|
785
640
|
}, children: modelSearchQuery.trim()
|
|
786
641
|
? "Aucun modèle ne correspond à votre recherche"
|
|
787
642
|
: "Aucun modèle disponible" }))] })] }), _jsx("div", { style: aiStyles.modalFooter, children: _jsx("button", { onClick: () => {
|
|
788
643
|
setIsModelManagementOpen(false);
|
|
789
644
|
setModelSearchQuery("");
|
|
790
|
-
},
|
|
791
|
-
...aiStyles.button,
|
|
792
|
-
...aiStyles.buttonSecondary,
|
|
793
|
-
}, children: "Fermer" }) })] })] }))] }));
|
|
645
|
+
}, className: "ai-btn ai-btn--ghost", children: "Fermer" }) })] })] }))] }), portalRoot);
|
|
794
646
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React, { type SelectHTMLAttributes } from "react";
|
|
2
|
-
import type { BaseAiProps } from "../types";
|
|
3
|
-
export interface AiSelectProps extends Omit<BaseAiProps, "type">, Omit<SelectHTMLAttributes<HTMLSelectElement>, "onValue"> {
|
|
2
|
+
import type { AiRadius, AiSize, BaseAiProps } from "../types";
|
|
3
|
+
export interface AiSelectProps extends Omit<BaseAiProps, "type">, Omit<SelectHTMLAttributes<HTMLSelectElement>, "onValue" | "size"> {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
uiMode?: "modal" | "drawer";
|
|
6
|
+
size?: AiSize;
|
|
7
|
+
radius?: AiRadius;
|
|
6
8
|
}
|
|
7
|
-
export declare function AiSelect({ baseUrl, apiKeyId, uiMode, context, model, prompt, storeOutputs, artifactTitle, onValue, onToast, disabled, className, children, ...selectProps }: AiSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function AiSelect({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode, size, radius, context, model, prompt, storeOutputs, artifactTitle, onValue, onToast, disabled, className, children, ...selectProps }: AiSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
8
10
|
//# sourceMappingURL=AiSelect.d.ts.map
|
|
@@ -1 +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;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
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;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAU9D,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,IAAW,EACX,MAAe,EACf,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CA4If"}
|