data-primals-engine 1.4.0 → 1.4.2

package/client/src/AssistantChat.jsx

@@ -1,16 +1,26 @@
 // client/src/components/AssistantChat.jsx
 
 import React, { useState, useMemo, useEffect, useRef } from 'react';
-import { FaRobot, FaPaperPlane, FaTimes, FaExpand, FaCompress } from 'react-icons/fa';
+import { FaRobot, FaPaperPlane, FaTimes, FaExpand, FaCompress, FaPlus } from 'react-icons/fa';
 import './AssistantChat.scss';
 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";
+import DashboardChart from "./DashboardChart.jsx";
+import {useUI} from "./contexts/UIContext.jsx";
+import Button from "./Button.jsx";
+import {getUserHash, getUserId} from "../../src/data.js";
+import {useNavigation} from "react-router";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {useNavigate} from "react-router-dom";
+import {DataTable} from "./DataTable.jsx";
 
 const AssistantChat = ({ config }) => {
-    const { selectedModel } = useModelContext();
+    const { selectedModel, models } = useModelContext();
+    const { me } = useAuthContext();
+    const nav = useNavigate();
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
@@ -19,6 +29,7 @@ const AssistantChat = ({ config }) => {
     ]);
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
+    const { setChartToAdd } = useUI();
 
     // NOUVEL ÉTAT : Stocke une action en attente de confirmation de l'utilisateur
     const [pendingConfirmation, setPendingConfirmation] = useState(null);
@@ -74,7 +85,8 @@ const AssistantChat = ({ config }) => {
                 const botMessage = {
                     from: 'bot',
                     text: null,
-                    actionDetails: null // Pour stocker les détails de l'action à afficher
+                    actionDetails: null,
+                    chartConfig: null// Pour stocker les détails de l'action à afficher
                 };
 
                 // Gérer le texte à afficher
@@ -104,7 +116,15 @@ const AssistantChat = ({ config }) => {
                 }
 
                 // On ajoute le message à la liste uniquement s'il a du contenu textuel
-                if (botMessage.text) {
+                if (result.chartConfig) {
+                    botMessage.chartConfig = result.chartConfig;
+                }
+                // Si des données tabulaires sont retournées
+                if (result.dataResult) {
+                    botMessage.dataResult = result.dataResult;
+                }
+                // On ajoute le message à la liste uniquement s'il a du contenu textuel ou un graphique
+                if (botMessage.text || botMessage.chartConfig || botMessage.dataResult) {
                     setMessages(prev => [...prev, botMessage]);
                 }
 
@@ -225,7 +245,30 @@ const AssistantChat = ({ config }) => {
             <div className="chat-messages">
                 {messages.map((msg, index) => (
                     <div key={index} className={`message ${msg.from}`}>
-                        <Markdown>{msg.text}</Markdown>
+                        {msg.text && <Markdown>{msg.text}</Markdown>}
+                        {msg.chartConfig && (
+                            <div className="chart-container">
+                                <DashboardChart config={msg.chartConfig} />
+                                <div className="chart-actions" style={{ marginTop: '8px', textAlign: 'right' }}>
+                                    <Button onClick={() => {
+                                        nav('/user/'+getUserHash(me)+'/dashboards');
+                                        setChartToAdd(msg.chartConfig);
+                                    }} title={t('assistant.addToDashboard', 'Ajouter au tableau de bord')}>
+                                        <FaPlus />
+                                        <span style={{ marginLeft: '8px' }}>
+                                            {t('assistant.addToDashboard', 'Ajouter au tableau de bord')}
+                                        </span>
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* NOUVEAU : Affichage des données tabulaires */}
+                        {msg.dataResult && (
+                            <div className="data-table-container">
+                                <DataTable model={models.find(f => f.name === msg.dataResult.model)} advanced={false} data={msg.dataResult.data} />
+                            </div>
+                        )}
                         {msg.actionDetails && (
                             <div className="action-details">
                                 {msg.actionDetails.model && (

package/client/src/AssistantChat.scss

@@ -125,7 +125,6 @@ $input-height: 50px;
   gap: 12px;
 
   .message {
-    max-width: 80%;
     p {
       padding: 4px 8px;
       border-radius: 18px;

package/client/src/ChartConfigModal.jsx

@@ -55,6 +55,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
     const [chartType, setChartType] = useState('bar');
     const [chartAggregationType, setChartAggregationType] = useState('count');
     const [chartTitle, setChartTitle] = useState('');
+    const [timeUnit, setTimeUnit] = useState('day');
 
     const currentModel = models.find(f => f.name === selectedModel && f._user === me.username);
 
@@ -74,6 +75,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 setColorField(initialConfig.chartBackgroundColor || null);
                 setGroupByLabelField(initialConfig.groupByLabelField || '');
                 setChartAggregationType(initialConfig.aggregationType || 'count');
+                setTimeUnit(initialConfig.timeUnit || 'day');
                 // Note: modelFields et relatedModelFields seront chargés par les autres useEffects
                 // déclenchés par le changement de selectedModel et groupByField.
             } else {
@@ -87,6 +89,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 setGroupByField('');
                 setGroupByLabelField('');
                 setChartAggregationType('count');
+                setTimeUnit('day');
                 setModelFields([]);
                 setRelatedModelFields([]);
             }
@@ -155,6 +158,9 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
     const isRelationGroupBy = isGroupingChart && modelFields.find(f => f.name === groupByField)?.type === 'relation';
     const isYAxisRequiredForValidation = chartAggregationType && !['count'].includes(chartAggregationType);
 
+    const xAxisFieldDefinition = modelFields.find(f => f.name === xAxisField);
+    const isTemporal = !isGroupingChart && xAxisFieldDefinition && ['date', 'datetime'].includes(xAxisFieldDefinition.type);
+
     // handleSave (inchangé - envoie l'état actuel)
     const handleSave = () => {
         const isValid = selectedModel && chartType && chartTitle &&
@@ -178,6 +184,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 aggregationType: chartAggregationType,
                 chartBackgroundColor: colorField,
                 filter,
+                timeUnit: isTemporal ? timeUnit : undefined,
             });
         } else {
             let errorMsg = t('chartConfigModal.fillFields', "Veuillez remplir tous les champs requis.");
@@ -321,15 +328,33 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                                 )}
                             </>
                         ) : (
-                            <SelectField
-                                label={t('chartConfigModal.xAxis', 'Axe X')}
-                                value={xAxisField}
-                                onChange={(item) => setXAxisField(item.value)}
-                                items={[{label: t('selectPlaceholder', 'Choisir...'), value: ''}, ...xAxisOptions]}
-                                required={!isGroupingChart}
-                                disabled={xAxisOptions.length === 0}
-                                hint={xAxisOptions.length === 0 ? t('chartConfigModal.noXAxisFields', 'Aucun champ utilisable pour l\'axe X') : ''}
-                            />
+                            <>
+                                <SelectField
+                                    label={t('chartConfigModal.xAxis', 'Axe X')}
+                                    value={xAxisField}
+                                    onChange={(item) => setXAxisField(item.value)}
+                                    items={[{label: t('selectPlaceholder', 'Choisir...'), value: ''}, ...xAxisOptions]}
+                                    required={!isGroupingChart}
+                                    disabled={xAxisOptions.length === 0}
+                                    hint={xAxisOptions.length === 0 ? t('chartConfigModal.noXAxisFields', 'Aucun champ utilisable pour l\'axe X') : ''}
+                                />
+                                {isTemporal && (
+                                    <SelectField
+                                        label={t('charts.timeUnit', 'Échelle de temps')}
+                                        value={timeUnit}
+                                        onChange={(item) => setTimeUnit(item.value)}
+                                        items={[
+                                            { value: 'minute', label: t('time.minute', 'Minute') },
+                                            { value: 'hour', label: t('time.hour', 'Heure') },
+                                            { value: 'day', label: t('time.day', 'Jour') },
+                                            { value: 'week', label: t('time.week', 'Semaine') },
+                                            { value: 'month', label: t('time.month', 'Mois') },
+                                            { value: 'year', label: t('time.year', 'Année') },
+                                        ]}
+                                        hint={t('charts.timeUnitHelp', "Définit l'unité de regroupement pour l'axe des dates.")}
+                                    />
+                                )}
+                            </>
                         )}
 
                         {/* Axe Y (inchangé) */}