@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
package/dist/components/AiPromptPanel.js CHANGED
@@ -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 #8b5cf620",
294
- borderTopColor: "#8b5cf6",
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 rgba(139, 92, 246, 0.15)",
300
- }, children: _jsx(Sparkles, { size: 20, color: "#8b5cf6" }) }), _jsx("div", { style: {
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: "#6b7280",
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), style: {
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: "#8b5cf6",
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: "#6b7280",
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: "#6b7280",
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), style: {
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: "#8b5cf6",
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
- ? "#8b5cf6"
427
+ ? "var(--ai-primary)"
454
428
  : aiStyles.chip.border,
455
429
  background: selectedTag === "all"
456
- ? "#8b5cf620"
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
- ? "#8b5cf6"
435
+ ? "var(--ai-primary)"
462
436
  : aiStyles.chip.border,
463
437
  background: selectedTag === tag
464
- ? "#8b5cf620"
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: "#6b7280",
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: "#6b7280",
452
+ color: "var(--ai-text-secondary)",
479
453
  fontWeight: 600,
480
454
  textTransform: "uppercase",
481
455
  marginBottom: "8px",
@@ -485,26 +459,26 @@ 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 #e5e7eb`,
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 = "#8b5cf610";
494
- e.currentTarget.style.borderColor = "#8b5cf6";
467
+ e.currentTarget.style.background = "color-mix(in srgb, var(--ai-primary) 10%, transparent)";
468
+ e.currentTarget.style.borderColor = "var(--ai-primary)";
495
469
  }, onMouseLeave: (e) => {
496
470
  e.currentTarget.style.background = "transparent";
497
- e.currentTarget.style.borderColor = "#e5e7eb";
471
+ e.currentTarget.style.borderColor = "var(--ai-border)";
498
472
  }, children: [_jsxs("div", { style: {
499
473
  display: "flex",
500
474
  alignItems: "center",
501
475
  gap: "8px",
502
476
  fontWeight: 600,
503
477
  marginBottom: "4px",
504
- color: "#9780a5",
505
- }, children: [_jsx(Star, { size: 14, color: "#8b5cf6" }), promptData.title] }), _jsx("div", { style: {
478
+ color: "var(--ai-text)",
479
+ }, children: [_jsx(Star, { size: 14, color: "var(--ai-primary)" }), promptData.title] }), _jsx("div", { style: {
506
480
  fontSize: "13px",
507
- color: "#6b7280",
481
+ color: "var(--ai-text-secondary)",
508
482
  overflow: "hidden",
509
483
  textOverflow: "ellipsis",
510
484
  display: "-webkit-box",
@@ -513,10 +487,10 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
513
487
  }, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
514
488
  marginTop: "8px",
515
489
  fontSize: "11px",
516
- color: "#8b5cf6",
490
+ color: "var(--ai-primary)",
517
491
  }, children: String(promptData.category) })) : null] }, promptData.id))) })] })), nonFavoritePrompts.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
518
492
  fontSize: "12px",
519
- color: "#6b7280",
493
+ color: "var(--ai-text-secondary)",
520
494
  fontWeight: 600,
521
495
  textTransform: "uppercase",
522
496
  marginTop: favoritePrompts.length > 0 ? "12px" : undefined,
@@ -527,23 +501,23 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
527
501
  gap: "12px",
528
502
  }, children: nonFavoritePrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
529
503
  padding: "16px",
530
- border: `1px solid #e5e7eb`,
504
+ border: `1px solid var(--ai-border)`,
531
505
  borderRadius: "8px",
532
506
  cursor: "pointer",
533
507
  transition: "all 0.2s",
534
508
  }, onMouseEnter: (e) => {
535
- e.currentTarget.style.background = "#8b5cf610";
536
- e.currentTarget.style.borderColor = "#8b5cf6";
509
+ e.currentTarget.style.background = "color-mix(in srgb, var(--ai-primary) 10%, transparent)";
510
+ e.currentTarget.style.borderColor = "var(--ai-primary)";
537
511
  }, onMouseLeave: (e) => {
538
512
  e.currentTarget.style.background = "transparent";
539
- e.currentTarget.style.borderColor = "#e5e7eb";
513
+ e.currentTarget.style.borderColor = "var(--ai-border)";
540
514
  }, children: [_jsx("div", { style: {
541
515
  fontWeight: 600,
542
516
  marginBottom: "4px",
543
- color: "#9780a5",
517
+ color: "var(--ai-text)",
544
518
  }, children: promptData.title }), _jsx("div", { style: {
545
519
  fontSize: "13px",
546
- color: "#6b7280",
520
+ color: "var(--ai-text-secondary)",
547
521
  overflow: "hidden",
548
522
  textOverflow: "ellipsis",
549
523
  display: "-webkit-box",
@@ -552,31 +526,19 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
552
526
  }, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
553
527
  marginTop: "8px",
554
528
  fontSize: "11px",
555
- color: "#8b5cf6",
529
+ color: "var(--ai-primary)",
556
530
  }, children: String(promptData.category) })) : null] }, promptData.id))) })] }))] }))] })) }), _jsxs("div", { style: {
557
531
  ...aiStyles.modalFooter,
558
532
  position: "sticky",
559
533
  bottom: 0,
560
534
  zIndex: 5,
561
535
  backdropFilter: "blur(8px)",
562
- }, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
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: {
536
+ }, 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
537
  ...aiStyles.modal,
576
- zIndex: 1001, // Au-dessus du modal principal
538
+ zIndex: 2147483646, // Au-dessus du modal principal
577
539
  }, children: [_jsx("div", { style: {
578
540
  ...aiStyles.modalOverlay,
579
- backgroundColor: "rgba(0, 0, 0, 0.75)",
541
+ backgroundColor: "var(--ai-overlay)",
580
542
  }, onClick: () => {
581
543
  setIsModelManagementOpen(false);
582
544
  setModelSearchQuery("");
@@ -587,7 +549,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
587
549
  overflow: "hidden",
588
550
  display: "flex",
589
551
  flexDirection: "column",
590
- boxShadow: "0 20px 40px rgba(0, 0, 0, 0.5)",
552
+ boxShadow: "var(--ai-shadow-lg)",
591
553
  }, 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
554
  setIsModelManagementOpen(false);
593
555
  setModelSearchQuery("");
@@ -597,11 +559,11 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
597
559
  overflow: "auto",
598
560
  }, children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("p", { style: {
599
561
  fontSize: "14px",
600
- color: "var(--ai-text-secondary, #6b7280)",
562
+ color: "var(--ai-muted)",
601
563
  margin: "0 0 8px 0",
602
564
  }, children: "Activez ou d\u00E9sactivez les mod\u00E8les selon vos besoins" }), _jsxs("p", { style: {
603
565
  fontSize: "12px",
604
- color: "var(--ai-text-tertiary, #9ca3af)",
566
+ color: "var(--ai-text-tertiary)",
605
567
  margin: "0 0 16px 0",
606
568
  }, 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
569
  ...aiStyles.inputWrapper,
@@ -611,16 +573,12 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
611
573
  left: "12px",
612
574
  top: "50%",
613
575
  transform: "translateY(-50%)",
614
- color: "var(--ai-text-tertiary, #9ca3af)",
576
+ color: "var(--ai-text-tertiary)",
615
577
  } }), _jsx("input", { value: modelSearchQuery, onChange: (e) => setModelSearchQuery(e.target.value), placeholder: "Rechercher un mod\u00E8le...", style: {
616
578
  ...aiStyles.input,
617
579
  padding: "10px 12px 10px 36px",
618
- background: "var(--ai-bg-secondary, #f9fafb)",
619
- } })] })] }), _jsxs("div", { style: {
620
- display: "flex",
621
- flexDirection: "column",
622
- gap: "8px",
623
- }, children: [effectiveAvailableModels
580
+ background: "var(--ai-bg)",
581
+ } })] })] }), _jsxs("div", { className: "ai-model-mgmt-list", children: [effectiveAvailableModels
624
582
  .filter((model) => {
625
583
  if (model.category !== modelCategory)
626
584
  return false;
@@ -634,81 +592,8 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
634
592
  .map((modelData) => {
635
593
  const isActive = effectiveUserModels.includes(modelData.id);
636
594
  const isLoading = loadingModels.includes(modelData.id);
637
- return (_jsxs("div", { style: {
638
- display: "flex",
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: {
595
+ return (_jsxs("div", { className: `ai-model-item ${isActive ? "ai-model-item--active" : ""}`, onClick: () => !isLoading &&
596
+ 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
597
  display: "flex",
713
598
  alignItems: "center",
714
599
  gap: "6px",
@@ -718,14 +603,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
718
603
  height: "4px",
719
604
  borderRadius: "50%",
720
605
  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: {
606
+ } }), modelData.provider] }), modelData.costPer1M && (_jsxs("span", { className: "ai-pill ai-pill--cost", children: ["$", modelData.costPer1M, "/1M"] }))] })] })] }), _jsxs("label", { style: {
729
607
  position: "relative",
730
608
  display: "inline-block",
731
609
  width: "54px",
@@ -738,36 +616,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
738
616
  width: 0,
739
617
  height: 0,
740
618
  position: "absolute",
741
- } }), _jsx("span", { style: {
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));
619
+ } }), _jsx("span", { className: `ai-toggle ${isActive ? "ai-toggle--active" : ""}` })] })] }, modelData.id));
771
620
  }), effectiveAvailableModels.filter((model) => {
772
621
  if (model.category !== modelCategory)
773
622
  return false;
@@ -780,15 +629,12 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
780
629
  }).length === 0 && (_jsx("div", { style: {
781
630
  textAlign: "center",
782
631
  padding: "32px 16px",
783
- color: "var(--ai-text-tertiary, #9ca3af)",
632
+ color: "var(--ai-text-tertiary)",
784
633
  fontSize: "14px",
785
634
  }, children: modelSearchQuery.trim()
786
635
  ? "Aucun modèle ne correspond à votre recherche"
787
636
  : "Aucun modèle disponible" }))] })] }), _jsx("div", { style: aiStyles.modalFooter, children: _jsx("button", { onClick: () => {
788
637
  setIsModelManagementOpen(false);
789
638
  setModelSearchQuery("");
790
- }, style: {
791
- ...aiStyles.button,
792
- ...aiStyles.buttonSecondary,
793
- }, children: "Fermer" }) })] })] }))] }));
639
+ }, className: "ai-btn ai-btn--ghost", children: "Fermer" }) })] })] }))] }), portalRoot);
794
640
  }
package/dist/components/AiSelect.d.ts CHANGED
@@ -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
package/dist/components/AiSelect.d.ts.map CHANGED
@@ -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;AAU5C,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,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CAwJf"}
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"}