@lastbrain/ai-ui-react 1.0.36 → 1.0.38

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 (33) hide show
  1. package/dist/components/AiContextButton.d.ts.map +1 -1
  2. package/dist/components/AiContextButton.js +1 -9
  3. package/dist/components/AiImageButton.d.ts.map +1 -1
  4. package/dist/components/AiImageButton.js +1 -16
  5. package/dist/components/AiInput.d.ts.map +1 -1
  6. package/dist/components/AiInput.js +2 -2
  7. package/dist/components/AiPromptPanel.d.ts +1 -0
  8. package/dist/components/AiPromptPanel.d.ts.map +1 -1
  9. package/dist/components/AiPromptPanel.js +278 -169
  10. package/dist/components/AiTextarea.d.ts.map +1 -1
  11. package/dist/components/AiTextarea.js +1 -1
  12. package/dist/components/ErrorToast.js +14 -14
  13. package/dist/context/AiProvider.d.ts.map +1 -1
  14. package/dist/context/AiProvider.js +87 -26
  15. package/dist/hooks/useAiClient.d.ts +1 -0
  16. package/dist/hooks/useAiClient.d.ts.map +1 -1
  17. package/dist/hooks/useAiModels.d.ts.map +1 -1
  18. package/dist/hooks/useAiModels.js +1 -2
  19. package/dist/hooks/useModelManagement.d.ts.map +1 -1
  20. package/dist/hooks/useModelManagement.js +24 -3
  21. package/dist/hooks/usePrompts.d.ts.map +1 -1
  22. package/dist/hooks/usePrompts.js +19 -3
  23. package/package.json +2 -2
  24. package/src/components/AiContextButton.tsx +2 -9
  25. package/src/components/AiImageButton.tsx +5 -17
  26. package/src/components/AiInput.tsx +3 -2
  27. package/src/components/AiPromptPanel.tsx +332 -192
  28. package/src/components/AiTextarea.tsx +2 -1
  29. package/src/components/ErrorToast.tsx +16 -16
  30. package/src/context/AiProvider.tsx +116 -31
  31. package/src/hooks/useAiModels.ts +1 -2
  32. package/src/hooks/useModelManagement.ts +33 -3
  33. package/src/hooks/usePrompts.ts +21 -3
package/dist/components/AiPromptPanel.js CHANGED
@@ -16,7 +16,7 @@ export function AiPromptPanel(props) {
16
16
  // Sinon, utiliser le contexte existant
17
17
  return _jsx(AiPromptPanelInternal, { ...props });
18
18
  }
19
- function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "modal", models = [], sourceText, children, enableModelManagement = false, availableModels = [], userModels = [], onModelToggle, apiKey, baseUrl, }) {
19
+ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "modal", models = [], sourceText, children, enableModelManagement = true, modelCategory = "text", availableModels = [], userModels = [], onModelToggle, apiKey, baseUrl, }) {
20
20
  const [selectedModel, setSelectedModel] = useState("");
21
21
  const [prompt, setPrompt] = useState("");
22
22
  const [promptId, setPromptId] = useState(undefined);
@@ -36,12 +36,13 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
36
36
  const [showAllModels, setShowAllModels] = useState(false);
37
37
  const [isModelManagementOpen, setIsModelManagementOpen] = useState(false);
38
38
  const [loadingModels, setLoadingModels] = useState([]);
39
+ const [modelSearchQuery, setModelSearchQuery] = useState("");
39
40
  const { prompts, loading: promptsLoading, fetchPrompts, incrementStat, } = usePrompts();
40
41
  // Hook de gestion des modèles (automatique si enableModelManagement et pas de models/availableModels externes)
41
42
  const autoModelManagement = useModelManagement({
42
43
  apiKey,
43
44
  baseUrl,
44
- category: "text", // Par défaut pour AiPromptPanel
45
+ category: modelCategory, // Utiliser la catégorie spécifiée
45
46
  autoFetch: enableModelManagement &&
46
47
  models.length === 0 &&
47
48
  availableModels.length === 0,
@@ -88,24 +89,33 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
88
89
  provider: "Unknown",
89
90
  }));
90
91
  }
91
- const textModels = effectiveAvailableModels.filter((m) => m.category === "text");
92
+ const categoryModels = effectiveAvailableModels.filter((m) => m.category === modelCategory);
92
93
  if (showAllModels) {
93
- return textModels;
94
+ return categoryModels;
94
95
  }
95
96
  else {
96
- return textModels.filter((m) => effectiveUserModels.includes(m.id));
97
+ return categoryModels.filter((m) => effectiveUserModels.includes(m.id));
97
98
  }
98
99
  };
99
100
  // Fetch prompts when modal opens
100
101
  useEffect(() => {
101
- if (isOpen && models.length > 0) {
102
- const activeModelId = selectedModel || models[0]?.id;
103
- const modelType = models.find((m) => m.id === activeModelId)?.type;
102
+ if (isOpen && (models.length > 0 || enableModelManagement)) {
103
+ // Déterminer le type de modèle à partir de modelCategory si enableModelManagement
104
+ const modelType = enableModelManagement
105
+ ? modelCategory
106
+ : models.find((m) => m.id === selectedModel)?.type || models[0]?.type;
104
107
  fetchPrompts({
105
108
  type: modelType === "image" ? "image" : "text",
106
109
  });
107
110
  }
108
- }, [isOpen, selectedModel, models, fetchPrompts]);
111
+ }, [
112
+ isOpen,
113
+ selectedModel,
114
+ models,
115
+ fetchPrompts,
116
+ enableModelManagement,
117
+ modelCategory,
118
+ ]);
109
119
  const handleSubmit = async () => {
110
120
  const activeModelId = selectedModel || models[0]?.id;
111
121
  if (!activeModelId || !prompt.trim())
@@ -231,6 +241,10 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
231
241
  opacity: isClosing ? 0 : 1,
232
242
  transform: isClosing ? "translateY(12px)" : "translateY(0)",
233
243
  transition: "opacity 200ms ease, transform 200ms ease",
244
+ display: "flex",
245
+ flexDirection: "column",
246
+ maxHeight: "85vh",
247
+ overflow: "hidden",
234
248
  }, children: [isGenerating && (_jsxs("div", { style: {
235
249
  position: "absolute",
236
250
  inset: 0,
@@ -260,10 +274,22 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
260
274
  fontWeight: 600,
261
275
  color: "#6b7280",
262
276
  letterSpacing: "0.02em",
263
- }, children: "G\u00E9n\u00E9ration en cours\u2026" })] })), _jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
277
+ }, children: "G\u00E9n\u00E9ration en cours\u2026" })] })), _jsxs("div", { style: {
278
+ ...aiStyles.modalHeader,
279
+ position: "sticky",
280
+ top: 0,
281
+ zIndex: 5,
282
+ background: "var(--ai-bg-primary, #1f2937)",
283
+ borderBottom: "1px solid var(--ai-border-primary, #374151)",
284
+ backdropFilter: "blur(8px)",
285
+ }, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
264
286
  ...aiStyles.modalCloseButton,
265
287
  ...(isCloseHovered && aiStyles.modalCloseButtonHover),
266
- }, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": "Close", children: "\u00D7" })] }), _jsx("div", { style: aiStyles.modalBody, children: !showPromptLibrary ? (_jsxs(_Fragment, { children: [sourceText && (_jsxs("div", { style: {
288
+ }, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": "Close", children: "\u00D7" })] }), _jsx("div", { style: {
289
+ ...aiStyles.modalBody,
290
+ flex: 1,
291
+ overflow: "auto",
292
+ }, children: !showPromptLibrary ? (_jsxs(_Fragment, { children: [sourceText && (_jsxs("div", { style: {
267
293
  ...aiStyles.modalInputGroup,
268
294
  marginBottom: "16px",
269
295
  }, children: [_jsx("label", { style: aiStyles.modalLabel, children: "Source Text" }), _jsx("div", { style: {
@@ -284,50 +310,33 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
284
310
  justifyContent: "space-between",
285
311
  alignItems: "center",
286
312
  marginBottom: "8px",
287
- }, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("div", { style: {
313
+ }, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), effectiveAvailableModels.length > 0 && (_jsxs("button", { onClick: () => setIsModelManagementOpen(true), style: {
314
+ padding: "4px 12px",
315
+ fontSize: "12px",
316
+ color: "#8b5cf6",
317
+ background: "#8b5cf610",
318
+ border: "1px solid #8b5cf630",
319
+ borderRadius: "6px",
320
+ cursor: "pointer",
321
+ transition: "all 0.2s",
288
322
  display: "flex",
289
323
  alignItems: "center",
290
- gap: "8px",
291
- }, children: [effectiveAvailableModels.length > 0 && (_jsxs("button", { onClick: () => setShowAllModels(!showAllModels), style: {
292
- padding: "4px 8px",
293
- fontSize: "12px",
294
- color: "#8b5cf6",
295
- background: "#8b5cf610",
296
- border: "1px solid #8b5cf630",
297
- borderRadius: "6px",
298
- cursor: "pointer",
299
- transition: "all 0.2s",
300
- }, onMouseEnter: (e) => {
301
- e.currentTarget.style.background = "#8b5cf620";
302
- }, onMouseLeave: (e) => {
303
- e.currentTarget.style.background = "#8b5cf610";
304
- }, children: [showAllModels ? "Mes modèles" : "Tous les modèles", !showAllModels &&
305
- effectiveAvailableModels.filter((m) => m.category === "text" &&
306
- !effectiveUserModels.includes(m.id)).length > 0 && (_jsxs("span", { style: {
307
- marginLeft: "4px",
308
- padding: "2px 6px",
309
- fontSize: "10px",
310
- background: "#8b5cf6",
311
- color: "white",
312
- borderRadius: "10px",
313
- }, children: ["+", effectiveAvailableModels.filter((m) => m.category === "text" &&
314
- !effectiveUserModels.includes(m.id)).length] }))] })), _jsxs("button", { onClick: () => setIsModelManagementOpen(true), style: {
315
- padding: "4px 8px",
316
- fontSize: "12px",
317
- color: "#8b5cf6",
318
- background: "#8b5cf610",
319
- border: "1px solid #8b5cf630",
320
- borderRadius: "6px",
321
- cursor: "pointer",
322
- transition: "all 0.2s",
323
- display: "flex",
324
- alignItems: "center",
325
- gap: "4px",
326
- }, onMouseEnter: (e) => {
327
- e.currentTarget.style.background = "#8b5cf620";
328
- }, onMouseLeave: (e) => {
329
- e.currentTarget.style.background = "#8b5cf610";
330
- }, title: "G\u00E9rer les mod\u00E8les", children: [_jsx(Settings, { size: 12 }), "G\u00E9rer"] })] })] }), _jsxs("select", { id: "model-select", value: activeModelId, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
324
+ gap: "6px",
325
+ }, onMouseEnter: (e) => {
326
+ e.currentTarget.style.background = "#8b5cf620";
327
+ }, onMouseLeave: (e) => {
328
+ e.currentTarget.style.background = "#8b5cf610";
329
+ }, title: "G\u00E9rer les mod\u00E8les", children: [_jsx(Settings, { size: 14 }), "G\u00E9rer les mod\u00E8les", effectiveAvailableModels.filter((m) => m.category === modelCategory &&
330
+ !effectiveUserModels.includes(m.id)).length > 0 && (_jsxs("span", { style: {
331
+ marginLeft: "2px",
332
+ padding: "2px 6px",
333
+ fontSize: "10px",
334
+ background: "#8b5cf6",
335
+ color: "white",
336
+ borderRadius: "10px",
337
+ fontWeight: "600",
338
+ }, children: ["+", effectiveAvailableModels.filter((m) => m.category === modelCategory &&
339
+ !effectiveUserModels.includes(m.id)).length] }))] }))] }), _jsxs("select", { id: "model-select", value: activeModelId, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
331
340
  ...aiStyles.select,
332
341
  ...(modelFocused && aiStyles.selectFocus),
333
342
  }, children: [getFilteredModels().length === 0 && (_jsx("option", { value: "", children: "Loading models..." })), getFilteredModels().map((model) => {
@@ -516,7 +525,15 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
516
525
  marginTop: "8px",
517
526
  fontSize: "11px",
518
527
  color: "#8b5cf6",
519
- }, children: String(promptData.category) })) : null] }, promptData.id))) })] }))] }))] })) }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
528
+ }, children: String(promptData.category) })) : null] }, promptData.id))) })] }))] }))] })) }), _jsxs("div", { style: {
529
+ ...aiStyles.modalFooter,
530
+ position: "sticky",
531
+ bottom: 0,
532
+ zIndex: 5,
533
+ background: "var(--ai-bg-primary, #1f2937)",
534
+ borderTop: "1px solid var(--ai-border-primary, #374151)",
535
+ backdropFilter: "blur(8px)",
536
+ }, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
520
537
  ...aiStyles.button,
521
538
  ...aiStyles.buttonSecondary,
522
539
  ...(isCancelHovered && aiStyles.buttonSecondaryHover),
@@ -533,129 +550,221 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
533
550
  zIndex: 1001, // Au-dessus du modal principal
534
551
  }, children: [_jsx("div", { style: {
535
552
  ...aiStyles.modalOverlay,
536
- backgroundColor: "rgba(0, 0, 0, 0.7)",
537
- }, onClick: () => setIsModelManagementOpen(false) }), _jsxs("div", { style: {
553
+ backgroundColor: "rgba(0, 0, 0, 0.75)",
554
+ }, onClick: () => {
555
+ setIsModelManagementOpen(false);
556
+ setModelSearchQuery("");
557
+ } }), _jsxs("div", { style: {
538
558
  ...aiStyles.modalContent,
539
- maxWidth: "600px",
540
- maxHeight: "80vh",
541
- overflow: "auto",
542
- }, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "Gestion des mod\u00E8les IA" }), _jsx("button", { style: aiStyles.modalCloseButton, onClick: () => setIsModelManagementOpen(false), "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { style: aiStyles.modalBody, children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("p", { style: {
559
+ maxWidth: "700px",
560
+ maxHeight: "85vh",
561
+ overflow: "hidden",
562
+ display: "flex",
563
+ flexDirection: "column",
564
+ background: "var(--ai-bg-primary, #1f2937)",
565
+ boxShadow: "0 20px 40px rgba(0, 0, 0, 0.5)",
566
+ }, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "Gestion des mod\u00E8les IA" }), _jsx("button", { style: aiStyles.modalCloseButton, onClick: () => {
567
+ setIsModelManagementOpen(false);
568
+ setModelSearchQuery("");
569
+ }, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { style: {
570
+ ...aiStyles.modalBody,
571
+ flex: 1,
572
+ overflow: "auto",
573
+ }, children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("p", { style: {
543
574
  fontSize: "14px",
544
- color: "#6b7280",
545
- margin: "0 0 16px 0",
575
+ color: "var(--ai-text-secondary, #6b7280)",
576
+ margin: "0 0 8px 0",
546
577
  }, children: "Activez ou d\u00E9sactivez les mod\u00E8les selon vos besoins" }), _jsxs("p", { style: {
547
578
  fontSize: "12px",
548
- color: "#9ca3af",
549
- margin: "0",
550
- }, children: [effectiveAvailableModels.filter((m) => m.category === "text").length, " ", "mod\u00E8les disponibles \u2022", " ", effectiveUserModels.filter((id) => effectiveAvailableModels.some((m) => m.id === id && m.category === "text")).length, " ", "activ\u00E9s"] })] }), _jsx("div", { style: {
579
+ color: "var(--ai-text-tertiary, #9ca3af)",
580
+ margin: "0 0 16px 0",
581
+ }, 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: {
582
+ ...aiStyles.inputWrapper,
583
+ marginBottom: "16px",
584
+ }, children: [_jsx(Search, { size: 16, style: {
585
+ position: "absolute",
586
+ left: "12px",
587
+ top: "50%",
588
+ transform: "translateY(-50%)",
589
+ color: "var(--ai-text-tertiary, #9ca3af)",
590
+ } }), _jsx("input", { value: modelSearchQuery, onChange: (e) => setModelSearchQuery(e.target.value), placeholder: "Rechercher un mod\u00E8le...", style: {
591
+ ...aiStyles.input,
592
+ padding: "10px 12px 10px 36px",
593
+ background: "var(--ai-bg-secondary, #f9fafb)",
594
+ } })] })] }), _jsxs("div", { style: {
551
595
  display: "flex",
552
596
  flexDirection: "column",
553
- gap: "12px",
554
- }, children: effectiveAvailableModels
555
- .filter((model) => model.category === "text")
556
- .map((modelData) => {
557
- const isActive = effectiveUserModels.includes(modelData.id);
558
- const isLoading = loadingModels.includes(modelData.id);
559
- return (_jsxs("div", { style: {
560
- display: "flex",
561
- alignItems: "center",
562
- justifyContent: "space-between",
563
- padding: "16px",
564
- border: "1px solid #e5e7eb",
565
- borderRadius: "8px",
566
- backgroundColor: isActive ? "#f0fdf4" : "#ffffff",
567
- transition: "all 0.2s",
568
- }, children: [_jsxs("div", { style: {
569
- display: "flex",
570
- alignItems: "center",
571
- gap: "12px",
572
- }, children: [_jsx("div", { style: {
573
- width: "12px",
574
- height: "12px",
575
- borderRadius: "50%",
576
- backgroundColor: isActive ? "#10b981" : "#d1d5db",
577
- } }), _jsxs("div", { children: [_jsxs("div", { style: {
578
- display: "flex",
579
- alignItems: "center",
580
- gap: "8px",
581
- marginBottom: "4px",
582
- }, children: [_jsx("span", { style: {
583
- fontWeight: "500",
584
- color: "#111827",
585
- }, children: modelData.name }), modelData.isPro && (_jsx("span", { style: {
586
- padding: "2px 8px",
587
- fontSize: "11px",
588
- backgroundColor: "#8b5cf6",
589
- color: "white",
590
- borderRadius: "12px",
591
- fontWeight: "500",
592
- }, children: "PRO" }))] }), modelData.description && (_jsx("p", { style: {
593
- fontSize: "13px",
594
- color: "#6b7280",
595
- margin: "0 0 4px 0",
596
- }, children: modelData.description })), _jsxs("div", { style: {
597
- display: "flex",
598
- alignItems: "center",
599
- gap: "16px",
600
- fontSize: "12px",
601
- color: "#9ca3af",
602
- }, children: [_jsxs("span", { children: ["Fournisseur: ", modelData.provider] }), modelData.costPer1M && (_jsxs("span", { children: ["Co\u00FBt: $", modelData.costPer1M, "/1M tokens"] }))] })] })] }), _jsx("button", { onClick: () => handleModelToggle(modelData.id, !isActive), disabled: isLoading, style: {
603
- padding: "8px 16px",
604
- fontSize: "13px",
605
- fontWeight: "500",
606
- borderRadius: "6px",
607
- border: "1px solid",
608
- cursor: isLoading ? "not-allowed" : "pointer",
609
- transition: "all 0.2s",
610
- minWidth: "80px",
611
- ...(isActive
612
- ? {
613
- backgroundColor: "#fef2f2",
614
- borderColor: "#fecaca",
615
- color: "#dc2626",
616
- }
617
- : {
618
- backgroundColor: "#f0fdf4",
619
- borderColor: "#bbf7d0",
620
- color: "#16a34a",
621
- }),
622
- opacity: isLoading ? 0.6 : 1,
623
- }, onMouseEnter: (e) => {
624
- if (!isLoading) {
625
- if (isActive) {
626
- e.currentTarget.style.backgroundColor =
627
- "#fee2e2";
628
- }
629
- else {
630
- e.currentTarget.style.backgroundColor =
631
- "#dcfce7";
632
- }
633
- }
634
- }, onMouseLeave: (e) => {
635
- if (!isLoading) {
636
- if (isActive) {
637
- e.currentTarget.style.backgroundColor =
638
- "#fef2f2";
639
- }
640
- else {
641
- e.currentTarget.style.backgroundColor =
642
- "#f0fdf4";
643
- }
644
- }
645
- }, children: isLoading ? (_jsx("div", { style: {
597
+ gap: "8px",
598
+ }, children: [effectiveAvailableModels
599
+ .filter((model) => {
600
+ if (model.category !== modelCategory)
601
+ return false;
602
+ if (!modelSearchQuery.trim())
603
+ return true;
604
+ const query = modelSearchQuery.toLowerCase();
605
+ return (model.name.toLowerCase().includes(query) ||
606
+ model.provider.toLowerCase().includes(query) ||
607
+ model.description?.toLowerCase().includes(query));
608
+ })
609
+ .map((modelData) => {
610
+ const isActive = effectiveUserModels.includes(modelData.id);
611
+ const isLoading = loadingModels.includes(modelData.id);
612
+ return (_jsxs("div", { style: {
613
+ display: "flex",
614
+ alignItems: "center",
615
+ justifyContent: "space-between",
616
+ padding: "16px 18px",
617
+ border: "2px solid",
618
+ borderColor: isActive
619
+ ? "#10b981"
620
+ : "var(--ai-border-primary, #374151)",
621
+ borderRadius: "10px",
622
+ backgroundColor: isActive
623
+ ? "rgba(16, 185, 129, 0.08)"
624
+ : "var(--ai-bg-secondary, rgba(31, 41, 55, 0.5))",
625
+ transition: "all 0.2s",
626
+ cursor: "pointer",
627
+ backdropFilter: "blur(8px)",
628
+ }, onClick: () => !isLoading &&
629
+ handleModelToggle(modelData.id, !isActive), onMouseEnter: (e) => {
630
+ e.currentTarget.style.borderColor = isActive
631
+ ? "#059669"
632
+ : "#4b5563";
633
+ e.currentTarget.style.transform = "translateY(-2px)";
634
+ e.currentTarget.style.boxShadow = isActive
635
+ ? "0 8px 16px rgba(16, 185, 129, 0.2)"
636
+ : "0 8px 16px rgba(0, 0, 0, 0.15)";
637
+ }, onMouseLeave: (e) => {
638
+ e.currentTarget.style.borderColor = isActive
639
+ ? "#10b981"
640
+ : "var(--ai-border-primary, #374151)";
641
+ e.currentTarget.style.transform = "translateY(0)";
642
+ e.currentTarget.style.boxShadow = "none";
643
+ }, children: [_jsxs("div", { style: {
646
644
  display: "flex",
647
645
  alignItems: "center",
648
- justifyContent: "center",
649
- gap: "4px",
650
- }, children: _jsx("div", { style: {
651
- width: "12px",
652
- height: "12px",
653
- border: "2px solid currentColor",
654
- borderTop: "2px solid transparent",
655
- borderRadius: "50%",
656
- animation: "ai-spin 1s linear infinite",
657
- } }) })) : isActive ? ("Désactiver") : ("Activer") })] }, modelData.id));
658
- }) })] }), _jsx("div", { style: aiStyles.modalFooter, children: _jsx("button", { onClick: () => setIsModelManagementOpen(false), style: {
646
+ gap: "14px",
647
+ flex: 1,
648
+ }, children: [_jsx("div", { style: {
649
+ width: "8px",
650
+ height: "8px",
651
+ borderRadius: "50%",
652
+ backgroundColor: isActive ? "#10b981" : "#6b7280",
653
+ boxShadow: isActive
654
+ ? "0 0 8px rgba(16, 185, 129, 0.6)"
655
+ : "none",
656
+ transition: "all 0.3s",
657
+ } }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: {
658
+ display: "flex",
659
+ alignItems: "center",
660
+ gap: "10px",
661
+ marginBottom: "6px",
662
+ }, children: [_jsx("span", { style: {
663
+ fontWeight: "600",
664
+ fontSize: "15px",
665
+ color: isActive
666
+ ? "#10b981"
667
+ : "var(--ai-text-primary, #f3f4f6)",
668
+ letterSpacing: "-0.01em",
669
+ }, children: modelData.name }), modelData.isPro && (_jsx("span", { style: {
670
+ padding: "3px 10px",
671
+ fontSize: "10px",
672
+ backgroundColor: "#8b5cf6",
673
+ color: "white",
674
+ borderRadius: "12px",
675
+ fontWeight: "700",
676
+ textTransform: "uppercase",
677
+ letterSpacing: "0.05em",
678
+ boxShadow: "0 2px 8px rgba(139, 92, 246, 0.3)",
679
+ }, children: "PRO" }))] }), _jsxs("div", { style: {
680
+ display: "flex",
681
+ alignItems: "center",
682
+ gap: "16px",
683
+ fontSize: "13px",
684
+ color: isActive
685
+ ? "#6ee7b7"
686
+ : "var(--ai-text-secondary, #d1d5db)",
687
+ fontWeight: "500",
688
+ }, children: [_jsxs("span", { style: {
689
+ display: "flex",
690
+ alignItems: "center",
691
+ gap: "6px",
692
+ }, children: [_jsx("span", { style: {
693
+ display: "inline-block",
694
+ width: "4px",
695
+ height: "4px",
696
+ borderRadius: "50%",
697
+ backgroundColor: "currentColor",
698
+ } }), modelData.provider] }), modelData.costPer1M && (_jsxs("span", { style: {
699
+ padding: "2px 8px",
700
+ background: isActive
701
+ ? "rgba(16, 185, 129, 0.15)"
702
+ : "rgba(107, 114, 128, 0.2)",
703
+ borderRadius: "6px",
704
+ fontSize: "12px",
705
+ }, children: ["$", modelData.costPer1M, "/1M"] }))] })] })] }), _jsxs("label", { style: {
706
+ position: "relative",
707
+ display: "inline-block",
708
+ width: "54px",
709
+ height: "28px",
710
+ cursor: isLoading ? "not-allowed" : "pointer",
711
+ opacity: isLoading ? 0.5 : 1,
712
+ flexShrink: 0,
713
+ }, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", checked: isActive, disabled: isLoading, onChange: () => handleModelToggle(modelData.id, !isActive), style: {
714
+ opacity: 0,
715
+ width: 0,
716
+ height: 0,
717
+ position: "absolute",
718
+ } }), _jsx("span", { style: {
719
+ position: "absolute",
720
+ cursor: isLoading ? "not-allowed" : "pointer",
721
+ top: 0,
722
+ left: 0,
723
+ right: 0,
724
+ bottom: 0,
725
+ backgroundColor: isActive ? "#10b981" : "#4b5563",
726
+ transition: "0.3s",
727
+ borderRadius: "28px",
728
+ boxShadow: isActive
729
+ ? "0 0 12px rgba(16, 185, 129, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.2)"
730
+ : "inset 0 1px 3px rgba(0, 0, 0, 0.3)",
731
+ border: isActive
732
+ ? "2px solid #059669"
733
+ : "2px solid #374151",
734
+ }, children: _jsx("span", { style: {
735
+ position: "absolute",
736
+ content: "",
737
+ height: "22px",
738
+ width: "22px",
739
+ left: isActive ? "28px" : "2px",
740
+ bottom: "2px",
741
+ backgroundColor: "white",
742
+ transition: "0.3s cubic-bezier(0.4, 0, 0.2, 1)",
743
+ borderRadius: "50%",
744
+ boxShadow: isActive
745
+ ? "0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.1)"
746
+ : "0 3px 8px rgba(0, 0, 0, 0.3)",
747
+ } }) })] })] }, modelData.id));
748
+ }), effectiveAvailableModels.filter((model) => {
749
+ if (model.category !== modelCategory)
750
+ return false;
751
+ if (!modelSearchQuery.trim())
752
+ return true;
753
+ const query = modelSearchQuery.toLowerCase();
754
+ return (model.name.toLowerCase().includes(query) ||
755
+ model.provider.toLowerCase().includes(query) ||
756
+ model.description?.toLowerCase().includes(query));
757
+ }).length === 0 && (_jsx("div", { style: {
758
+ textAlign: "center",
759
+ padding: "32px 16px",
760
+ color: "var(--ai-text-tertiary, #9ca3af)",
761
+ fontSize: "14px",
762
+ }, children: modelSearchQuery.trim()
763
+ ? "Aucun modèle ne correspond à votre recherche"
764
+ : "Aucun modèle disponible" }))] })] }), _jsx("div", { style: aiStyles.modalFooter, children: _jsx("button", { onClick: () => {
765
+ setIsModelManagementOpen(false);
766
+ setModelSearchQuery("");
767
+ }, style: {
659
768
  ...aiStyles.button,
660
769
  ...aiStyles.buttonSecondary,
661
770
  }, children: "Fermer" }) })] })] }))] }));
package/dist/components/AiTextarea.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CAkMjB"}
1
+ {"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CAmMjB"}
package/dist/components/AiTextarea.js CHANGED
@@ -123,5 +123,5 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
123
123
  ...(disabled || loading
124
124
  ? { opacity: 0.5, cursor: "not-allowed" }
125
125
  : {}),
126
- }, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) })) : (_jsx(Sparkles, { size: 16 })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [], sourceText: textareaValue || undefined, baseUrl: baseUrl, apiKey: apiKeyId, enableModelManagement: enableModelManagement })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
126
+ }, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) })) : (_jsx(Sparkles, { size: 16 })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: [], modelCategory: "text", sourceText: textareaValue || undefined, baseUrl: baseUrl, apiKey: apiKeyId, enableModelManagement: enableModelManagement })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
127
127
  }