data-primals-engine 1.2.6-rc3 → 1.3.0

package/client/package.json

@@ -13,17 +13,17 @@
   },
   "peerDependencies": {
     "@tiptap/react": "^2.11.5",
-    "react-router-dom": "^7.1.5",
-    "react-query": "^3.39.3",
-    "react-icons": "^5.0.1",
-    "react-tooltip": "^5.28.1",
-    "react-helmet": "^6.1.0",
-    "react-cookie": "^8.0.0",
-    "react-syntax-highlighter": "^15.6.1",
-    "react-international-phone": "^4.5.0",
     "react-chartjs-2": "^5.3.0",
     "react-code-blocks": "^0.1.6",
-    "react-ga": "^3.3.1"
+    "react-cookie": "^8.0.0",
+    "react-ga": "^3.3.1",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^5.0.1",
+    "react-international-phone": "^4.5.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^7.1.5",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-tooltip": "^5.28.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
@@ -43,15 +43,16 @@
     "@uiw/react-codemirror": "^4.23.10",
     "chart.js": "^4.4.9",
     "chartjs-adapter-date-fns": "^3.0.0",
-    "react-dom": "^18.3.1",
-    "react-router": "^7.2.0",
-    "yet-another-react-lightbox": "^3.22.0",
-    "react": ">=18.0.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "express-rate-limit": "^7.5.1",
     "lowlight": "^3.3.0",
-    "uniqid": "^5.4.0"
+    "react": ">=18.0.0",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.2.0",
+    "react-switch": "^7.1.0",
+    "uniqid": "^5.4.0",
+    "yet-another-react-lightbox": "^3.22.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -67,4 +68,4 @@
     "sass-embedded": "^1.83.4",
     "vite": "^6.1.1"
   }
-}
+}

package/client/src/App.jsx

@@ -61,6 +61,7 @@ import i18next from "i18next";
 import {websiteTranslations} from "./translations.js";
 
 import { Tooltip } from 'react-tooltip';
+import {providers} from "../../src/modules/assistant/constants.js";
 
 let queryClient = new QueryClient();
 
@@ -113,40 +114,32 @@ function Layout ({header, routes, body, footer}) {
                 },
                 body: JSON.stringify({
                     model: 'env', // On cible le modèle 'env'
-                    filter: {
-                        // On cherche les enregistrements dont le nom est SOIT l'un, SOIT l'autre
-                        "$or": [
-                            { "name": "OPENAI_API_KEY" },
-                            { "name": "GOOGLE_API_KEY" }
-                        ]
-                    },
-                    limit: 2 // Pas besoin de plus de 2 résultats
+                    filter: { "name": { "$in": Object.values(providers).map(p => p.key) } },
+                    limit: Object.values(providers).length
                 })
             }).then(res => res.json());
         },
         {
             enabled: !!me && models.find(f => f.name === 'env' && me?.username === f.username), // Toujours activé uniquement si l'utilisateur est connecté
-            staleTime: 60000, // On peut réduire le staleTime, car l'utilisateur peut ajouter/supprimer une clé à tout moment
+            staleTime: 60000,
             onSuccess: (response) => {
-
-                // La réponse de l'API de recherche est un objet { success: true, data: [...] }
                 if (!response.data) {
                     setAssistantConfig(null);
                     return;
                 }
-
                 const availableKeys = response.data;
+                const newConfig = Object.keys(providers).reduce((config, providerKey) => {
+                    const envVarName = providers[providerKey].key;
+                    const foundKey = availableKeys.find(key => key.name === envVarName);
+                    if (foundKey) {
+                        config[providerKey] = foundKey.value;
+                    }
+                    return config;
+                }, {});
 
-                const newConfig = {
-                    openai: availableKeys.find(key => key.name === 'OPENAI_API_KEY')?.value || (useAI ? process.env.OPENAI_API_KEY : undefined),
-                    google: availableKeys.find(key => key.name === 'GOOGLE_API_KEY')?.value || (useAI ? process.env.GOOGLE_API_KEY : undefined),
-                };
-
-                // On met à jour l'état si au moins une clé est disponible
-                if (newConfig.openai || newConfig.google) {
+                if (Object.values(newConfig).filter(Boolean).length > 0) {
                     setAssistantConfig(newConfig);
                 } else {
-                    // Important : on s'assure de remettre à null si aucune clé n'est trouvée
                     setAssistantConfig(null);
                 }
             },

package/client/src/App.scss

@@ -421,6 +421,7 @@ input[type=number]::-webkit-outer-spin-button {
 form .field {
   width: 100%;
   .help {
+    width: 100%;
     color: #575757;
     padding: 4px;
   }

package/client/src/AssistantChat.jsx

@@ -7,6 +7,7 @@ import { useModelContext } from "./contexts/ModelContext.jsx";
 import { Trans, useTranslation } from "react-i18next";
 import Markdown from 'react-markdown';
 import {useQueryClient} from "react-query";
+import {providers} from "../../src/modules/assistant/constants.js";
 
 const AssistantChat = ({ config }) => {
     const { selectedModel } = useModelContext();
@@ -170,10 +171,10 @@ const AssistantChat = ({ config }) => {
 
     // Logique pour le sélecteur de fournisseur (OpenAI/Google)
     const availableProviders = useMemo(() => {
-        const providers = [];
-        if (config?.openai) providers.push({ value: 'openai', label: 'OpenAI' });
-        if (config?.google) providers.push({ value: 'google', label: 'Google' });
-        return providers;
+        const prs = Object.keys(providers).map(p => {
+            return config?.[p] ? ({value: p, label: p}) : null;
+        })
+        return prs.filter(Boolean);
     }, [config]);
 
     const [selectedProvider, setSelectedProvider] = useState(null);

package/client/src/DataEditor.jsx

@@ -239,9 +239,9 @@ export const DataEditor = forwardRef(function MyDataEditor({
                                    onChange={(e) => handleChange({name: field.name, value: e})}/>
             case 'boolean':
                 return <CheckboxField
-                    help={value && t('field_' + model.name + '_' + field.name + '_hint', field.hint || '')}
+                    help={t('field_' + model.name + '_' + field.name + '_hint', field.hint || '')}
                     key={field.name} {...inputProps} checked={value}
-                    onChange={(e) => handleChange({name: field.name, value: e.target.checked})}/>
+                    onChange={(e) => handleChange({name: field.name, value: e})}/>
             case 'string':
             case 'string_t':
                 {

package/client/src/DataTable.jsx

@@ -165,6 +165,51 @@ const Header = ({
     ;
 }
 
+
+const RichText = ({ value, initialLang }) => {
+    const availableLangs = useMemo(() => (value ? Object.keys(value).filter(k => value[k]) : []), [value]);
+
+    const [selectedLang, setSelectedLang] = useState(() => {
+        if (availableLangs.includes(initialLang)) {
+            return initialLang;
+        }
+        return availableLangs[0] || null;
+    });
+
+    useEffect(() => {
+        setSelectedLang(initialLang);
+    }, [initialLang]);
+
+    if (!value || availableLangs.length === 0) {
+        return null;
+    }
+
+    if (availableLangs.length === 1) {
+        return <div className="rte-value" dangerouslySetInnerHTML={{ __html: value[availableLangs[0]] || '' }} />;
+    }
+
+    return (
+        <div className="richtext-t-cell">
+            <div className="lang-switcher">
+                {availableLangs.map(langCode => (
+                    <button
+                        key={langCode}
+                        className={`lang-btn ${selectedLang === langCode ? 'active' : ''}`}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setSelectedLang(langCode);
+                        }}
+                        title={langCode.toUpperCase()}
+                    >
+                        {langCode.toUpperCase()}
+                    </button>
+                ))}
+            </div>
+            <div className="rte-value" dangerouslySetInnerHTML={{ __html: value[selectedLang] || '' }} />
+        </div>
+    );
+};
+
 export function DataTable({
                               model,
                               checkedItems,
@@ -458,7 +503,7 @@ export function DataTable({
                                         <CheckboxField className={"input-ref"}
                                                        checked={checkedItems.some(i => i._id === item._id)}
                                                        onChange={(e) => {
-                                                           if (e.target.checked) {
+                                                           if (e) {
                                                                setCheckedItems(items => {
                                                                    return [...items, item];
                                                                });
@@ -630,8 +675,7 @@ export function DataTable({
                                         }
                                         if (field.type === 'richtext_t') {
                                             return <td key={field.name}  className={isLightColor(field.color)?"lighted":""}>
-                                                {hiddenable(<div className="rte-value"
-                                                     dangerouslySetInnerHTML={{__html: item[field.name]?.[lang] || ''}}></div>)}
+                                                {hiddenable(<RichText value={item[field.name]} initialLang={lang} />)}
                                             </td>;
                                         }
                                         if (field.type === 'color') {

package/client/src/ExportDialog.jsx

@@ -99,7 +99,7 @@ function ExportDialog({ isOpen, onClose, onExport, currentModel, availableModels
                     name="exportSelection"
                     label={t('exportDialog.exportSelection.label', "Exporter la sélection")}
                     checked={exportSelection}
-                    onChange={(e) => setExportSelection(e.target.checked)}
+                    onChange={(e) => setExportSelection(e)}
                     disabled={!hasSelection}
                     hint={hasSelection
                         ? t('exportDialog.exportSelection.hint', "Exportera uniquement les lignes actuellement sélectionnées dans le tableau.")
@@ -119,7 +119,7 @@ function ExportDialog({ isOpen, onClose, onExport, currentModel, availableModels
                     multiple={true}
                 />
 
-                <CheckboxField label={t('exportDialog.withModels.label', "Inclure les modèles ?")} checked={withModels} onChange={(e) => setWithModels(e.target.checked)} />
+                <CheckboxField label={t('exportDialog.withModels.label', "Inclure les modèles ?")} checked={withModels} onChange={(e) => setWithModels(e)} />
 
                 {/* OU: Utiliser un composant MultiSelectField (à créer/importer) pour plusieurs modèles */}
                 {/*

package/client/src/Field.jsx

@@ -34,7 +34,7 @@ import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { PhoneInput } from 'react-international-phone';
 import 'react-international-phone/style.css';
 import {useAuthContext} from "./contexts/AuthContext.jsx";
-
+import Switch from "react-switch";
 export const Form = ({
   name,
   onValidate,
@@ -492,20 +492,6 @@ const CheckboxField = forwardRef(
     return (
         <>
             <div className={cn({field: true, "field-checkbox": true,"field-bg": true})}>
-                <div className="inline"><input
-                    aria-required={required}
-                    aria-readonly={readOnly}
-                    readOnly={readOnly}
-                    type="checkbox"
-                    checked={value}
-                    placeholder={placeholder}
-                    id={id}
-                    name={name}
-                    onChange={handleChange}
-                    minLength={minlength}
-                    maxLength={maxlength}
-                    {...rest}
-                />
                 {label && (
                     <label
                         contentEditable={editable}
@@ -522,7 +508,9 @@ const CheckboxField = forwardRef(
                         )}
                     </label>
                 )}
-                </div>
+                <Switch
+                    onChange={handleChange}
+                    checked={value} />
                 {help && <div className="flex help">{help}</div>}
             </div>
             {errors.length > 0 && (
@@ -1443,8 +1431,8 @@ export const ModelField = ({field, disableable=false, showModel=true, value, fie
         <CheckboxField
             checked={checked}
             onChange={e => {
-                setChecked(e.target.checked);
-                if (!e.target.checked) {
+                setChecked(e);
+                if (!e) {
                     onChange({name: field?.name, value: null});
                 }
             }}

package/client/src/KanbanCard.jsx

@@ -12,9 +12,9 @@ const KanbanCard = ({ card, model, subItemsField }) => {
     const subItems = subItemsField && card[subItemsField] ? card[subItemsField] : [];
     const tr = useTranslation();
     // Logique du Drag & Drop natif pour la carte
-
     const lang = (tr.i18n.resolvedLanguage || tr.i18n.language).split(/[-_]/)?.[0];
 
+    console.log(subItems)
     const getfield = (model, data) => {
         const v = getDataAsString(model, data, tr, models);
         if(!v){
@@ -66,6 +66,8 @@ const KanbanCard = ({ card, model, subItemsField }) => {
                 <div className="kanban-card-subitems">
                     {subItems.map((subItem, index) => {
                         const it = subItem;
+                        if( typeof(subItem) === 'string')
+                            return subItem;
                         const v = getDataAsString(model, subItem, tr, models);
                         if (!v) {
                             const r = `
@@ -81,7 +83,7 @@ const KanbanCard = ({ card, model, subItemsField }) => {
                                 className="image" src={`/resources/${it.guid}`}
                                 alt={`${it.name} (${it.guid})`}/></a>
                         }
-                        return '';
+                        return v;
                     })}
                 </div>
             )}

package/client/src/KanbanConfigModal.jsx

@@ -19,7 +19,7 @@ const KanbanConfigModal = ({ isOpen, onClose, onSave, model, initialSettings })
     const groupableFields = useMemo(() => {
         // ... (pas de changement ici)
         return modelFields
-            .filter(field => ['select', 'string', 'string_t'].includes(field.type))
+            .filter(field => ['enum', 'model', 'string', 'string_t'].includes(field.type))
             .map(field => ({
                 label: t(`field_${model.name}_${field.name}`, field.name),
                 value: field.name,
@@ -29,7 +29,7 @@ const KanbanConfigModal = ({ isOpen, onClose, onSave, model, initialSettings })
     const subItemFields = useMemo(() => {
         // ... (pas de changement ici)
         return modelFields
-            .filter(field => field.type === 'relation' && field.multiple)
+            .filter(field => (field.type === 'relation' && field.multiple) || field.type === 'array')
             .map(field => ({
                 label: t(`field_${field.name}`, { defaultValue: field.name }),
                 value: field.name,
@@ -64,11 +64,9 @@ const KanbanConfigModal = ({ isOpen, onClose, onSave, model, initialSettings })
         onSave({ groupByField, subItemsField: subItemsField || '' });
     };
 
-    // --- MODIFICATION 3 : Supprimer le useEffect fautif ---
-    // useEffect(() => {
-    //     setGroupByField(groupableFields[0]?.value || '');
-    // }, []); // <--- CE BLOC EST SUPPRIMÉ
-
+    useEffect(() => {
+        setSubItemsField(subItemFields[0]?.value);
+    })
     if (!isOpen) return null;
 
     return (

package/client/src/ModelCreatorField.jsx

@@ -284,7 +284,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.multiline}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].multiline = e.target.checked;
+                                            newFields[index].multiline = e;
                                             setFields(newFields);
                                         }}
                                         help={field.multiline && t('modelcreator.multiline.hint')}
@@ -373,7 +373,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     checked={field.multiple}
                                     onChange={(e) => {
                                         const newFields = [...fields];
-                                        newFields[index].multiple = e.target.checked;
+                                        newFields[index].multiple = e;
                                         setFields(newFields);
                                     }}
                                 /></div>
@@ -422,7 +422,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.required}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].required = e.target.checked;
+                                            newFields[index].required = e;
                                             setFields(newFields);
                                         }}
                                         help={field.required && t('modelcreator.required.hint')}
@@ -440,7 +440,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.unique}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].unique = e.target.checked;
+                                            newFields[index].unique = e;
                                             setFields(newFields);
                                         }}
                                         help={field.unique && t('modelcreator.unique.hint')}
@@ -522,7 +522,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                             disabled={modelLocked || (isLocalUser(me) && field.locked)}
                                             onChange={(e) => {
                                                 const newFields = [...fields];
-                                                newFields[index].default = e.target.checked;
+                                                newFields[index].default = e;
                                                 setFields(newFields);
                                             }}
                                         />
@@ -612,7 +612,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.condition !== undefined}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            if (e.target.checked) {
+                                            if (e) {
                                                 newFields[index].condition = null;
                                             } else {
                                                 delete newFields[index].condition;
@@ -701,7 +701,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.asMain}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].asMain = e.target.checked;
+                                            newFields[index].asMain = e;
                                             setFields(newFields);
                                         }}
                                         help={field.asMain && t('modelcreator.asMain.hint')}
@@ -752,7 +752,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.hiddenable}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].hiddenable = e.target.checked;
+                                            newFields[index].hiddenable = e;
                                             setFields(newFields);
                                         }}
                                         help={field.unique && t('modelcreator.hiddenable.hint')}
@@ -768,7 +768,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     checked={field.anonymized}
                                     onChange={(e) => {
                                         const newFields = [...fields];
-                                        newFields[index].anonymized = e.target.checked;
+                                        newFields[index].anonymized = e;
                                         setFields(newFields);
                                     }}
                                 />

package/client/src/PackGallery.jsx

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import {useMutation, useQuery, useQueryClient} from 'react-query';
 import { Trans, useTranslation } from 'react-i18next';
-import { FaBoxOpen, FaChevronLeft, FaDownload, FaStar, FaTag, FaUser } from 'react-icons/fa';
+import {FaBoxOpen, FaChevronLeft, FaDownload, FaPlus, FaStar, FaTag, FaUser} from 'react-icons/fa';
 import Button from './Button.jsx';
 import { useNotificationContext } from './NotificationProvider.jsx';
 import { useModelContext } from './contexts/ModelContext.jsx';
 
 import './PackGallery.scss';
 import {elementsPerPage} from "../../src/constants.js";
+import Markdown from "react-markdown";
+import {Dialog, DialogProvider} from "./Dialog.jsx";
+import {TextField} from "./Field.jsx";
 
 // --- API Fetching Functions ---
 const fetchPacks = async (sortBy, lang) => {
@@ -117,7 +120,8 @@ const PackDetail = ({ packId, onBack }) => {
             </div>
             <div className="pack-content">
                 <h2><Trans i18nKey="packs.description">Description</Trans></h2>
-                <div className="description-content" dangerouslySetInnerHTML={{__html: pack.description || ''}}/>
+
+                <div className="description-content"><Markdown>{pack.description}</Markdown></div>
 
                 <h2><Trans i18nKey="packs.modelsIncluded">Modèles inclus</Trans></h2>
                 <p>{renderModelsList(pack.models)}</p>
@@ -127,6 +131,8 @@ const PackDetail = ({ packId, onBack }) => {
                     <pre>{JSON.stringify(pack.data, null, 2)}</pre>
                 </div>
             </div>
+
+
         </div>
     );
 };
@@ -151,11 +157,15 @@ const installPackMutationFn = async ({packId, lang}) => {
 const PackGallery = () => {
     const { t, i18n } = useTranslation();
     const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+    const { addNotification } = useNotificationContext();
 
+    const [showManualInstallDialog, setShowManualInstallDialog] = useState(false);
+    const [manualPackJson, setManualPackJson] = useState('');
     const [view, setView] = useState('list'); // 'list' ou 'detail'
     const [selectedPackId, setSelectedPackId] = useState(null);
     const [sortBy, setSortBy] = useState({ field: '_updatedAt', order: -1 });
 
+    const queryClient = useQueryClient()
     const { data: packs, isLoading, isError } = useQuery(['packs', sortBy], () => fetchPacks(sortBy, lang));
 
     const handleSelectPack = (packId) => {
@@ -163,6 +173,40 @@ const PackGallery = () => {
         setView('detail');
     };
 
+    const handleManualInstall = async () => {
+        try {
+            const packData = JSON.parse(manualPackJson.trim());
+            addNotification({ status: 'info', title: t('packs.install.started', `Installation du pack personnalisé...`) });
+
+            const response = await fetch('/api/packs/install', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ packData, lang }),
+            });
+
+            if (!response.ok) {
+                throw new Error(await response.text());
+            }
+
+            addNotification({
+                status: 'completed',
+                title: t('datatable.pack.install.success', 'Pack installé avec succès !')
+            });
+            setShowManualInstallDialog(false);
+            setManualPackJson('');
+            queryClient.invalidateQueries(['packs', sortBy]); // Rafraîchir la liste
+
+        } catch (error) {
+            addNotification({
+                status: 'error',
+                title: t('datatable.pack.install.error', `Échec de l'installation`),
+                message: error.message
+            });
+        }
+    };
+
     const handleBackToList = () => {
         setSelectedPackId(null);
         setView('list');
@@ -182,16 +226,52 @@ const PackGallery = () => {
             <>
                 <div className="gallery-header">
                     <h1><Trans i18nKey="packs.galleryTitle">Galerie de Packs</Trans></h1>
-                    <div className="sort-options">
-                        <span><Trans i18nKey="packs.sortBy">Trier par :</Trans></span>
-                        <Button onClick={() => setSortBy({ field: '_updatedAt', order: -1 })} className={sortBy.field === '_updatedAt' ? 'active' : ''}>
-                            <Trans i18nKey="packs.sort.lastUpdated">Derniers ajouts</Trans>
-                        </Button>
-                        <Button onClick={() => setSortBy({ field: 'stars', order: -1 })} className={sortBy.field === 'stars' ? 'active' : ''}>
-                            <Trans i18nKey="packs.sort.mostStarred">Plus populaires</Trans>
+                    <div className="header-actions">
+                        <div className="sort-options">
+                            <span><Trans i18nKey="packs.sortBy">Trier par :</Trans></span>
+                            <Button onClick={() => setSortBy({ field: '_updatedAt', order: -1 })} className={sortBy.field === '_updatedAt' ? 'active' : ''}>
+                                <Trans i18nKey="packs.sort.lastUpdated">Derniers ajouts</Trans>
+                            </Button>
+                            <Button onClick={() => setSortBy({ field: 'stars', order: -1 })} className={sortBy.field === 'stars' ? 'active' : ''}>
+                                <Trans i18nKey="packs.sort.mostStarred">Plus populaires</Trans>
+                            </Button>
+                        </div>
+                        <Button
+                            onClick={() => setShowManualInstallDialog(true)}
+                            className="add-pack-button"
+                        >
+                            <FaPlus /> <Trans i18nKey="packs.manualInstall">Importer</Trans>
                         </Button>
                     </div>
                 </div>
+                {showManualInstallDialog && (
+                    <DialogProvider>
+                        <Dialog
+                            isModal={true}
+                            onClose={() => setShowManualInstallDialog(false)}
+                            title={t('packs.manualInstall.title', 'Installation manuelle de pack')}
+                        >
+                            <div className="manual-install-dialog">
+                                <p>
+                                    <Trans i18nKey="packs.manualInstall.instructions">
+                                        Collez ici le JSON de configuration du pack que vous souhaitez installer.
+                                    </Trans>
+                                </p>
+                                <TextField
+                                    multiline={true}
+                                    value={manualPackJson}
+                                    onChange={(e) => setManualPackJson(e.target.value)}
+                                    placeholder={t('packs.manualInstall.placeholder', '{"name": "Mon Pack", "description": "...", "models": [...], "data": [...]}')}
+                                    rows={15}
+                                />
+                                <div className="flex actions right">
+                                    <Button onClick={() => setShowManualInstallDialog(false)}><Trans i18nKey={"btns.cancel"}>Annuler</Trans></Button>
+                                    <Button disabled={!manualPackJson.trim()} className="btn-primary" onClick={() => handleManualInstall()}><Trans i18nKey={"packs.install"}>Installer</Trans></Button>
+                                </div>
+                            </div>
+                        </Dialog>
+                    </DialogProvider>
+                )}
                 <div className="pack-list">
                     {packs.map(pack => (
                         <PackCard key={pack._id} pack={pack} onSelect={handleSelectPack} />