@topconsultnpm/sdkui-react 6.19.0-dev2.42 → 6.19.0-dev2.44

package/lib/components/base/TMCustomButton.d.ts

@@ -7,5 +7,5 @@ type TMCustomButtonProps = {
     selectedItems?: Array<any>;
     onClose?: () => void;
 };
-declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react/jsx-runtime").JSX.Element;
 export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { TMLayoutWaitingContainer } from '../..';
-import { processButtonAttributes, processSelectedItems } from '../../helper/dcmtsHelper';
+import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -19,15 +18,14 @@ const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
     const iframeRef = useRef(null);
-    const attributes = useMemo(() => processButtonAttributes(args, formData), [args, formData]);
-    const selectedItemsProcessed = useMemo(() => processSelectedItems(args, formData, selectedItems), [args, formData, selectedItems]);
+    const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
     const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const selectedItemsCount = selectedItems?.length || 1;
+    const selectedItemsCount = selectedItems?.length || 0;
     // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(true);
-    const [waitPanelText, setWaitPanelText] = useState("Esecuzione azione 1/" + selectedItemsCount.toString());
+    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
     const [waitPanelValue, setWaitPanelValue] = useState(0);
     const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
     const [abortController, setAbortController] = useState(undefined);
@@ -48,23 +46,21 @@ const TMCustomButton = (props) => {
         setError(true);
     };
     const executeSequentially = async (controller) => {
-        if (!selectedItemsProcessed)
+        if (!selectedItems)
             return;
-        const processedItems = selectedItemsProcessed.length === 0 ? [...selectedItemsProcessed, attributes] : selectedItemsProcessed;
-        for (const [index, item] of processedItems.entries()) {
+        for (const [index, item] of selectedItems.entries()) {
             if (controller.signal.aborted)
                 break;
-            setWaitPanelText("Esecuzione azione " + (index + 1).toString() + "/" + selectedItemsCount.toString());
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
             setWaitPanelValue(index);
             // Attendi che l'iframe sia pronto e invia il messaggio
             await new Promise((resolve) => {
                 const checkIframe = setInterval(() => {
                     if (iframeRef.current?.contentWindow) {
                         clearInterval(checkIframe);
-                        iframeRef.current.contentWindow.postMessage({
-                            "options": item,
-                            "session": SDK_Globals.tmSession
-                        }, targetOrigin);
+                        //devo convertire item in formData
+                        const processedItem = getSelectedItem(args, formData, item);
+                        postMessageIframe(processedItem);
                         // Attendi prima di passare al prossimo
                         setTimeout(() => {
                             setWaitPanelValue(index + 1);
@@ -77,12 +73,17 @@ const TMCustomButton = (props) => {
         setShowWaitPanel(false);
         onClose?.();
     };
+    const postMessageIframe = (data) => {
+        console.log("TMCustomButton - postMessageIframe - data:", data);
+        if (iframeRef.current?.contentWindow) {
+            iframeRef.current.contentWindow.postMessage({ "options": data }, targetOrigin);
+        }
+    };
     useEffect(() => {
         if (loading || error)
             return;
         //if(error) clearTimeout(timeoutIframe);
-        console.log("TMCustomButton - useEffect - loading:", loading, " error:", error, " RunOnce:", RunOnce);
-        if (!RunOnce) {
+        if (!RunOnce && selectedItemsCount > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
             controller.signal.addEventListener('abort', () => {
@@ -93,13 +94,15 @@ const TMCustomButton = (props) => {
             setWaitPanelMaxValue(selectedItemsCount);
             executeSequentially(controller);
         }
-        else if (iframeRef.current?.contentWindow) {
+        else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
-            const mergedAttributes = { ...attributes, selectedItems: selectedItemsProcessed };
-            iframeRef.current.contentWindow.postMessage({
-                "options": mergedAttributes,
-                "session": SDK_Globals.tmSession
-            }, targetOrigin);
+            postMessageIframe(attributes);
+            if (!RunOnce) {
+                //chiudo l'iframe dopo 2 secondi
+                setTimeout(() => {
+                    onClose?.();
+                }, 2000);
+            }
             //clearTimeout(timeoutIframe);
         }
     }, [loading, error, RunOnce]);
@@ -110,7 +113,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, onClose: onClose, children: iframeContent })) : !RunOnce && showWaitPanel ? (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: true, waitPanelTitle: "Operazione in corso", showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }))
-        : null;
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -96,6 +96,6 @@ const TMFileManagerDataGridView = (props) => {
             { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
         ];
     }, [searchText]);
-    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty });
+    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty }, items.length);
 };
 export default TMFileManagerDataGridView;

package/lib/components/base/TMModal.d.ts

@@ -8,9 +8,11 @@ interface ITMModal {
     fontSize?: string;
     isModal?: boolean;
     resizable?: boolean;
+    expandable?: boolean;
     onClose?: () => void;
     hidePopup?: boolean;
     askClosingConfirm?: boolean;
+    showCloseButton?: boolean;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -4,6 +4,7 @@ import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
 import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
+import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
 const StyledModal = styled.div `
     width: ${props => props.$width};
     height: ${props => props.$height};
@@ -38,11 +39,12 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
+    const [isFullScreen, setIsFullScreen] = useState(false);
     useEffect(() => {
         setShowPopup(isModal);
     }, [isModal]);
@@ -65,6 +67,15 @@ const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClos
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: true, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: showCloseButton, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: expandable ? [
+                {
+                    widget: 'dxButton',
+                    location: 'after',
+                    options: {
+                        icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
+                        onClick: () => setIsFullScreen(!isFullScreen)
+                    }
+                }
+            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

package/lib/components/features/assistant/ToppyDraggableHelpCenter.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DeviceType } from '../../base/TMDeviceProvider';
+/**
+ * Proprietà del componente ToppyDraggableHelpCenter
+ */
+interface ToppyDraggableHelpCenterProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    content?: React.ReactNode;
+    /** Tipo di dispositivo per adattare il comportamento */
+    deviceType?: DeviceType;
+    /** Allineamento iniziale del componente (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Stato iniziale collassato/espanso */
+    initialIsCollapsed?: boolean;
+    /** Callback chiamato quando si clicca sull'immagine di Toppy */
+    onToppyImageClick?: () => void;
+    /** Visibilità del componente */
+    isVisible?: boolean;
+}
+/**
+ * Componente ToppyDraggableHelpCenter
+ *
+ * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
+ * in una speech bubble. Il componente può essere trascinato all'interno del suo
+ * contenitore e può essere collassato/espanso con un doppio click.
+ */
+declare const ToppyDraggableHelpCenter: React.FC<ToppyDraggableHelpCenterProps>;
+export default ToppyDraggableHelpCenter;

package/lib/components/features/assistant/ToppyDraggableHelpCenter.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Toppy from '../../../assets/Toppy-generico.png';
+import { DeviceType } from '../../base/TMDeviceProvider';
+import ToppySpeechBubble from './ToppySpeechBubble';
+/**
+ * Styled component per il pulsante di Toppy
+ * Gestisce il posizionamento, le dimensioni e le animazioni
+ */
+const ToppyButton = styled.button.attrs((props) => ({
+    style: {
+        // Applica left/top come stili inline per evitare la generazione di troppe classi CSS
+        ...(props.$x !== undefined && props.$y !== undefined
+            ? {
+                left: `${props.$x}px`,
+                top: `${props.$y}px`,
+                bottom: 'auto',
+                right: 'auto',
+            }
+            : {}),
+        // Cursore applicato come stile inline
+        cursor: props.$isDragging ? 'grabbing' : 'grab',
+    },
+})) `
+  /* Visibilità controllata dalla prop */
+  display: ${(props) => (props.$isVisible ? 'flex' : 'none')};
+  position: absolute;
+
+  /* Posizionamento di default quando non è draggato (x e y non sono definiti) */
+  ${(props) => props.$x === undefined || props.$y === undefined
+    ? `
+        bottom: -20px;
+        ${props.$align === 'left' ? 'left: 10px;' : 'right: 10px;'};
+      `
+    : ''}
+
+  /* Z-index alto per assicurare che sia sempre in primo piano */
+  z-index: 2147483647;
+  background-color: transparent;
+  border: none;
+
+  /* Dimensioni dinamiche in base allo stato collassato
+     Usa min() per adattarsi su schermi piccoli */
+  width: ${(props) => (props.$isCollapsed ? 'min(60px, 100%)' : '120px')};
+  height: ${(props) => (props.$isCollapsed ? 'min(70px, 100%)' : '140px')};
+  max-width: 100%;
+  max-height: 100%;
+
+  user-select: none;
+
+  img {
+    /* Dimensioni dell'immagine in base allo stato collassato */
+    width: ${(props) => (props.$isCollapsed ? '60px' : '120px')};
+    height: ${(props) => (props.$isCollapsed ? '60px' : '140px')};
+    pointer-events: none;
+    border-radius: 50%; /* Rende l'immagine circolare */
+    /* Rotazione leggera in base all'allineamento */
+    transform: ${(props) => props.$align === 'left' ? 'rotate(20deg)' : 'rotate(-20deg)'};
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    /* Animazione di pulsazione quando è collassato per attirare l'attenzione */
+    ${(props) => props.$isCollapsed &&
+    `
+      animation: toppyPulse 1.5s infinite;
+    `}
+  }
+
+  /* Keyframes per l'animazione di pulsazione */
+  @keyframes toppyPulse {
+    0% {
+      /* Dimensione normale all'inizio */
+      transform: scale(1) rotate(${(props) => props.$align === 'left' ? '20deg' : '-20deg'});
+      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
+    }
+    50% {
+      /* Ingrandimento e glow al 50% dell'animazione */
+      transform: scale(1.1) rotate(${(props) => props.$align === 'left' ? '20deg' : '-20deg'});
+      box-shadow: 0 0 15px 5px rgba(0, 113, 188, 0.6);
+    }
+    100% {
+      /* Ritorno alla dimensione normale */
+      transform: scale(1) rotate(${(props) => props.$align === 'left' ? '20deg' : '-20deg'});
+      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
+    }
+  }
+`;
+/**
+ * Componente ToppyDraggableHelpCenter
+ *
+ * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
+ * in una speech bubble. Il componente può essere trascinato all'interno del suo
+ * contenitore e può essere collassato/espanso con un doppio click.
+ */
+const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onToppyImageClick, initialIsCollapsed, isVisible = true, }) => {
+    // Ref per il pulsante principale
+    const buttonRef = useRef(null);
+    // Stato per controllare se il componente è collassato o espanso
+    const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
+    // Stato per tracciare se il componente è in fase di trascinamento
+    const [isDragging, setIsDragging] = useState(false);
+    // Posizione corrente del componente (null = posizione di default)
+    const [position, setPosition] = useState(null);
+    // Offset del mouse rispetto all'angolo superiore sinistro del componente durante il drag
+    const dragOffset = useRef({ x: 0, y: 0 });
+    // Ref e stato per tracciare le dimensioni della speech bubble
+    const bubbleRef = useRef(null);
+    const [bubbleSize, setBubbleSize] = useState({ width: 0, height: 0 });
+    /**
+     * Effect per aggiornare le dimensioni della bubble quando cambia il contenuto
+     * o lo stato di collassamento. Necessario per calcolare correttamente i limiti
+     * di trascinamento.
+     */
+    useEffect(() => {
+        if (bubbleRef.current) {
+            const rect = bubbleRef.current.getBoundingClientRect();
+            setBubbleSize({ width: rect.width, height: rect.height });
+        }
+    }, [content, isCollapsed]);
+    /**
+     * Effect per resettare la posizione quando il parent o la finestra vengono ridimensionati.
+     * Questo previene che il componente finisca fuori dai bordi dopo un resize.
+     */
+    useEffect(() => {
+        if (!buttonRef.current)
+            return;
+        const parent = buttonRef.current.offsetParent;
+        if (!parent)
+            return;
+        // Funzione per verificare e aggiustare la posizione dopo un resize
+        const handleResize = () => {
+            if (!buttonRef.current || !position)
+                return;
+            const parentRect = parent.getBoundingClientRect();
+            const rect = buttonRef.current.getBoundingClientRect();
+            // Spazio extra occupato dalla bubble quando non è collassato
+            const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+            const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+            // Calcola i nuovi limiti
+            let minX = 0;
+            let maxX = parentRect.width - rect.width;
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, parentRect.width - extraWidth);
+                }
+            }
+            const maxY = parentRect.height - rect.height;
+            // Verifica se la posizione corrente è fuori dai limiti
+            const isOutOfBounds = position.x < minX ||
+                position.x > maxX ||
+                position.y < extraHeight ||
+                position.y > maxY;
+            // Se è fuori dai limiti, resetta alla posizione default
+            if (isOutOfBounds) {
+                setPosition(null);
+            }
+        };
+        // Observer per monitorare i cambiamenti di dimensione del parent
+        const resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(parent);
+        // Listener per il resize della finestra
+        window.addEventListener('resize', handleResize);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [position, isCollapsed, bubbleSize, align]);
+    /**
+     * Effect per impostare automaticamente lo stato collassato su dispositivi mobile
+     * se non è stato specificato un valore iniziale.
+     */
+    useEffect(() => {
+        if (initialIsCollapsed === undefined && deviceType === DeviceType.MOBILE) {
+            setIsCollapsed(true);
+        }
+    }, [deviceType, initialIsCollapsed]);
+    /**
+     * Gestisce il toggle dello stato collassato/espanso
+     * Chiamato dal doppio click sul componente
+     */
+    const toggleCollapse = (e) => {
+        e.stopPropagation();
+        setIsCollapsed(!isCollapsed);
+        onToppyImageClick?.();
+    };
+    /**
+     * Gestisce l'inizio del trascinamento
+     * Salva la posizione relativa del mouse rispetto al componente (offset)
+     * per mantenere il punto di presa durante il trascinamento
+     */
+    const handleMouseDown = (e) => {
+        if (!buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const parentRect = buttonRef.current.offsetParent?.getBoundingClientRect();
+        if (!parentRect)
+            return;
+        // Calcola l'offset tra il punto di click e l'angolo superiore sinistro del componente
+        dragOffset.current = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        };
+        setIsDragging(true);
+        e.preventDefault();
+    };
+    /**
+     * Gestisce il movimento durante il trascinamento
+     * Calcola la nuova posizione rispettando i limiti del parent container
+     * e tenendo conto delle dimensioni della speech bubble quando espansa
+     */
+    const handleMouseMove = (e) => {
+        if (!isDragging || !buttonRef.current)
+            return;
+        const parentRect = buttonRef.current.offsetParent?.getBoundingClientRect();
+        if (!parentRect)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        // Spazio extra occupato dalla bubble quando non è collassato
+        const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+        const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+        // Calcola i limiti orizzontali considerando la bubble
+        let minX = 0;
+        let maxX = parentRect.width - rect.width;
+        if (!isCollapsed) {
+            if (align === 'right') {
+                // La bubble si estende verso sinistra: aumenta il limite minimo
+                // per evitare che la bubble esca dal bordo sinistro
+                minX = Math.max(0, extraWidth - rect.width);
+            }
+            else {
+                // La bubble si estende verso destra: riduce il limite massimo
+                // per evitare che la bubble esca dal bordo destro
+                maxX = Math.min(maxX, parentRect.width - extraWidth);
+            }
+        }
+        // Calcola la nuova posizione X rispettando i limiti
+        const newX = Math.max(minX, Math.min(e.clientX - parentRect.left - dragOffset.current.x, maxX));
+        // Calcola la nuova posizione Y rispettando i limiti
+        // Il limite superiore tiene conto dell'altezza della bubble
+        const newY = Math.max(extraHeight, Math.min(e.clientY - parentRect.top - dragOffset.current.y, parentRect.height - rect.height));
+        setPosition({ x: newX, y: newY });
+    };
+    /**
+     * Gestisce il rilascio del mouse alla fine del trascinamento
+     * Se il movimento è stato minimo (< 5px), viene interpretato come un click
+     * e viene chiamato il callback onToppyImageClick
+     */
+    const handleMouseUp = (e) => {
+        if (isDragging) {
+            setIsDragging(false);
+            const rect = buttonRef.current?.getBoundingClientRect();
+            if (rect) {
+                // Calcola la distanza totale del movimento usando il teorema di Pitagora
+                const moveDistance = Math.hypot(e.clientX - (rect.left + dragOffset.current.x), e.clientY - (rect.top + dragOffset.current.y));
+                // Se il movimento è stato minimo, trattalo come un click
+                if (moveDistance < 5 && onToppyImageClick) {
+                    onToppyImageClick();
+                }
+            }
+        }
+    };
+    /**
+     * Effect per gestire gli event listener durante il trascinamento
+     * Gli eventi sono registrati sul document per catturare il movimento
+     * anche quando il mouse esce dal componente
+     */
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return undefined;
+    }, [isDragging]);
+    return (_jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, onMouseDown: handleMouseDown, onContextMenu: (e) => e.preventDefault(), onDoubleClick: toggleCollapse, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, children: content })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false })] }));
+};
+export default ToppyDraggableHelpCenter;

package/lib/components/features/assistant/ToppyHelpCenter.js

@@ -162,7 +162,7 @@ const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right
         onToppyImageClick?.();
     };
     const isMobile = deviceType === DeviceType.MOBILE;
-    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
+    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, onContextMenu: (e) => e.preventDefault(), children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
     if (usePortal) {
         if (!portalContainer)
             return null;

package/lib/components/features/assistant/ToppySpeechBubble.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ToppySpeechBubbleProps {
+    align?: 'left' | 'right';
+    children: React.ReactNode;
+    className?: string;
+}
+declare const ToppySpeechBubble: React.ForwardRefExoticComponent<ToppySpeechBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export default ToppySpeechBubble;

package/lib/components/features/assistant/ToppySpeechBubble.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+// Styled component
+const Bubble = styled.div `
+  position: absolute;
+  bottom: 145px;
+  ${({ $align }) => ($align === 'left' ? 'left: 0px;' : 'right: 0px;')}
+  width: max-content;
+  padding: 10px;
+  background: linear-gradient(180deg, rgba(0, 113, 188, 0.45) 0%,rgba(27, 20, 100, 0.65) 100%);
+  border-radius: 18px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+  font-size: 14px;
+  line-height: 1.4;
+  color: #333;
+  z-index: 10000;
+
+  &::after {
+    transform: ${({ $align }) => ($align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)')};
+    content: "";
+    position: absolute;
+    top: 100%;
+    ${({ $align }) => ($align === 'left' ? 'left: 20px;' : 'right: 15px;')}
+    border-width: 32px 32px 0 0;
+    border-style: solid;
+    border-color: #FFFFFF transparent; 
+    display: block;
+    width: 0;
+    height: 0;
+    z-index: 1;
+  }
+  
+  &::before {
+    transform: ${({ $align }) => ($align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)')};
+    content: "";
+    position: absolute;
+    top: 100%;
+    ${({ $align }) => ($align === 'left' ? 'left: 20px;' : 'right: 15px;')}
+    border-width: 32px 32px 0 0;
+    border-style: solid;
+    border-color: rgba(27, 20, 100, 0.65) transparent; 
+    display: block;
+    width: 0;
+    height: 0;
+    z-index: 2;
+  }
+`;
+// Componente con forwardRef
+const ToppySpeechBubble = forwardRef(({ align = 'right', children, className }, ref) => {
+    return (_jsx(Bubble, { ref: ref, "$align": align, className: className, children: children }));
+});
+export default ToppySpeechBubble;

package/lib/components/features/blog/TMBlogCommentForm.d.ts

@@ -6,12 +6,14 @@ interface TMBlogCommentFormProps {
     participants: Array<UserDescriptor>;
     onClose: () => void;
     showAttachmentsSection?: boolean;
+    removeAndEditAttachment?: boolean;
     selectedAttachments?: Array<FileItem>;
     selectedAttachmentDid?: Array<number>;
     allFileItems?: FileItem;
     allArchivedDocumentsFileItems?: Array<FileItem>;
     onFilterCreated?: (predicate: (post: BlogPost) => boolean) => void;
     refreshCallback?: () => Promise<void>;
+    isCommentRequired?: boolean;
 }
 declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
 export default TMBlogCommentForm;

package/lib/components/features/blog/TMBlogCommentForm.js

@@ -29,7 +29,7 @@ const getNonDirectoryFiles = (items, exclude) => {
 };
 const TMBlogCommentForm = (props) => {
     const maxLength = 1000;
-    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, context, showAttachmentsSection = true, onFilterCreated, refreshCallback } = props;
+    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, context, showAttachmentsSection = true, removeAndEditAttachment = true, onFilterCreated, refreshCallback, isCommentRequired = false } = props;
     // Initialize state with combined array
     const [dataSource, setDataSource] = useState(() => [...getNonDirectoryFiles(allFileItems?.items || [], []), ...allArchivedDocumentsFileItems]);
     const [isEditorEnabled, setIsEditorEnabled] = useState(true);
@@ -216,8 +216,20 @@ const TMBlogCommentForm = (props) => {
         // Update the state with selected draft items
         setCurrentDraftAttachments(selectedDraftItems);
     };
-    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: showAttachmentsSection ? "calc(100% - 60px)" : "100%" }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
-                                        width: 'calc(100% - 60px)',
+    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, showCloseButton: isCommentRequired ? false : true, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: showAttachmentsSection ? `calc(100% - 60px)` : '100%' }, children: [isCommentRequired && _jsx("div", { style: {
+                                        padding: '10px',
+                                        width: '100%',
+                                        height: '30px',
+                                        backgroundColor: '#e8f5e9',
+                                        border: '1px solid #81c784',
+                                        borderRadius: '4px',
+                                        fontSize: '13px',
+                                        marginBottom: '10px',
+                                        color: '#2e7d32',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                    }, children: SDKUI_Localizator.InsertCommentToCompleteOperation }), _jsx("div", { style: { width: "100%", height: isCommentRequired ? `calc(100% - 40px)` : '100%' }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) })] }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
+                                        width: `calc(100% - ${removeAndEditAttachment ? 60 : 0}px)`,
                                         overflowX: 'auto',
                                         whiteSpace: 'nowrap',
                                         height: '50px',
@@ -231,7 +243,7 @@ const TMBlogCommentForm = (props) => {
                                         const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", draft.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", draft.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", draft.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(draft.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.lastUpdateTime)] })] }));
                                         return _jsxs("div", { style: {
                                                 display: 'inline-flex',
-                                                alignItems: 'center', // <-- this centers content vertically
+                                                alignItems: 'center',
                                                 padding: '4px 8px',
                                                 margin: '4px',
                                                 border: '1px solid #ddd',
@@ -258,7 +270,7 @@ const TMBlogCommentForm = (props) => {
                                                         fontWeight: 'bold',
                                                         marginRight: '8px',
                                                         boxShadow: '1px 1px 2px #00000020',
-                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) })), _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
+                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) })), removeAndEditAttachment && _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
                                                             display: 'inline-flex',
                                                             width: '20px',
                                                             height: '20px',
@@ -270,7 +282,7 @@ const TMBlogCommentForm = (props) => {
                                                             cursor: 'pointer',
                                                             boxShadow: '1px 1px 2px #00000020',
                                                         }, children: _jsx("span", { style: { fontSize: '15px' }, children: "\u00D7" }) }) })] }, draft.did);
-                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + currentDraftAttachments.length, children: _jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx("i", { className: "dx-icon-attach", style: {
+                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), removeAndEditAttachment && _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + currentDraftAttachments.length, children: _jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx("i", { className: "dx-icon-attach", style: {
                                                     width: '50px',
                                                     height: '50px',
                                                     marginLeft: '10px',

package/lib/components/features/documents/TMDcmtForm.js

@@ -34,7 +34,6 @@ import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManag
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 import { TMPanelManagerWithPersistenceProvider } from '../../layout/panelManager/TMPanelManagerWithPersistenceProvider';
 import { useWorkflowApprove } from '../../../hooks/useWorkflowApprove';
-import ToppyHelpCenter from '../assistant/ToppyHelpCenter';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import WFDiagram from '../workflow/diagram/WFDiagram';
 import TMTooltip from '../../base/TMTooltip';
@@ -42,6 +41,7 @@ import TMDcmtTasks from './TMDcmtTasks';
 import TMToppyMessage from '../../../helper/TMToppyMessage';
 import { getTaskAssignedToMe } from '../tasks/TMTasksUtils';
 import TMCustomButton from '../../base/TMCustomButton';
+import ToppyDraggableHelpCenter from '../assistant/ToppyDraggableHelpCenter';
 let abortControllerLocal = new AbortController();
 //#endregion
 const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, showBackButton = true, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, onTaskCreateRequest, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowButtonsRefs = false, onReferenceClick, }) => {
@@ -1353,7 +1353,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                                                 isEditable: true,
                                                 value: FormulaHelper.addFormulaTag(newFormula.expression)
                                             }));
-                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
+                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyDraggableHelpCenter, { deviceType: deviceType, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
                                         _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
                                         :
                                             _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {

package/lib/components/features/search/TMSearchResult.js

@@ -31,7 +31,6 @@ import TMDcmtBlog from '../documents/TMDcmtBlog';
 import TMDcmtIcon from '../documents/TMDcmtIcon';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
-import ToppyHelpCenter from '../assistant/ToppyHelpCenter';
 import TMAccordion from '../../base/TMAccordion';
 import TMDataGridExportForm from '../../base/TMDataGridExportForm';
 import TMSearchResultFloatingActionButton from './TMSearchResultFloatingActionButton';
@@ -43,6 +42,7 @@ import TMSearch from './TMSearch';
 import TMArchive from '../archive/TMArchive';
 import { TMResultManager } from '../../forms/TMResultDialog';
 import TMCustomButton from '../../base/TMCustomButton';
+import ToppyDraggableHelpCenter from '../assistant/ToppyDraggableHelpCenter';
 //#region Helper Methods
 export const getSearchResultCountersSingleCategory = (searchResults) => {
     // let totDcmtTypes = searchResults.length;
@@ -585,7 +585,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                     setIsModifiedBatchUpdate(false);
                                     await refreshSelectionDataRowsAsync();
                                 }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), (showToppyForApprove && !showApprovePopup && !showRejectPopup && !showReAssignPopup && !showMoreInfoPopup && !openS4TViewer && !showTodoDcmtForm) &&
-                                _jsx(ToppyHelpCenter, { deviceType: deviceType, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
+                                _jsx(ToppyDraggableHelpCenter, { deviceType: deviceType, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
                                                 setShowApprovePopup(true);
                                             }, onSignApprove: () => {
                                                 handleSignApprove();

package/lib/components/forms/TMSaveForm.js

@@ -11,7 +11,7 @@ import { TMColors } from '../../utils/theme';
 import TMValidationItemsList from '../grids/TMValidationItemsList';
 import TMModal from '../base/TMModal';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true }) => {
+const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true, showCloseButton = true }) => {
     const [showList, setShowList] = useState(true);
     const [showErrorGrid, setShowErrorGrid] = useState(false);
     const deviceType = useDeviceType();
@@ -110,7 +110,7 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
                                         _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: getColor('error') }, children: 'Si è verificato un errore' })
                                     : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) }), (isModal && onClose) && _jsx("div", { id: "TMSaveFormShowConfirmForClose-" + id })] }));
     };
-    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
+    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, showCloseButton: showCloseButton, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
             : renderSaveForm() }));
 };
 export default TMSaveForm;

package/lib/components/index.d.ts

@@ -59,7 +59,8 @@ export { default as TMBlogAttachments } from './grids/TMBlogAttachments';
 export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm';
 export * from './query/TMQueryEditor';
 export * from './query/TMQuerySummary';
-export * from './features/assistant/ToppyHelpCenter';
+export { default as ToppyHelpCenter } from './features/assistant/ToppyHelpCenter';
+export { default as ToppyDraggableHelpCenter } from './features/assistant/ToppyDraggableHelpCenter';
 export * from './features/documents/TMDcmtForm';
 export * from './features/documents/TMDcmtIcon';
 export * from './features/documents/TMDcmtPreview';

package/lib/components/index.js

@@ -66,7 +66,8 @@ export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm'
 export * from './query/TMQueryEditor';
 export * from './query/TMQuerySummary';
 //assistant
-export * from './features/assistant/ToppyHelpCenter';
+export { default as ToppyHelpCenter } from './features/assistant/ToppyHelpCenter';
+export { default as ToppyDraggableHelpCenter } from './features/assistant/ToppyDraggableHelpCenter';
 //documents
 export * from './features/documents/TMDcmtForm';
 export * from './features/documents/TMDcmtIcon';

package/lib/helper/SDKUI_Localizator.d.ts

@@ -67,6 +67,8 @@ export declare class SDKUI_Localizator {
     static get AutoAdjust(): "Automatische Anpassung" | "Auto Adjust" | "Ajuste automático" | "Ajustement automatique" | "Regolazione automatica";
     static get Author(): string;
     static get CustomButtons(): string;
+    static get CustomButtonAction(): string;
+    static get CustomButtonActions(): string;
     static get Back(): "Zurück" | "Back" | "Atrás" | "Dos" | "Voltar" | "Indietro";
     static get BatchUpdate(): "Mehrfachbearbeitung" | "Multiple modification" | "Modificación múltiple" | "Modifie multiple" | "Editar múltipla" | "Modifica multipla";
     static get BlogCase(): "Anschlagbrett" | "Blog board" | "Tablón" | "Tableau d'affichage" | "Bakeca" | "Bacheca";
@@ -306,6 +308,7 @@ export declare class SDKUI_Localizator {
     static get IndexingInformation(): string;
     static get IndexOrReindex(): string;
     static get InProgress(): "Laufende" | "In Progress" | "En curso" | "En cours" | "Em andamento" | "In corso";
+    static get InsertCommentToCompleteOperation(): string;
     static get InsertYourEmail(): "Geben Sie Ihre E-Mail ein" | "Insert your Email" | "Inserta tu Email" | "Insérez votre e-mail" | "Insira seu e-mail" | "Inserisci la tua email";
     static get InsertOTP(): "Geben Sie den OTP-Code ein" | "Insert OTP code" | "Insertar código OTP" | "Insérer le code OTP" | "Insira o código OTP" | "Inserisci il codice OTP";
     static get Interrupt(): "Unterbrechen" | "Interrupt" | "interrumpir" | "Interrompre" | "Interromper" | "Interrompere";

package/lib/helper/SDKUI_Localizator.js

@@ -625,6 +625,26 @@ export class SDKUI_Localizator {
             default: return "Bottoni personalizzati";
         }
     }
+    static get CustomButtonAction() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Vorgang läuft";
+            case CultureIDs.En_US: return "Operation in progress";
+            case CultureIDs.Es_ES: return "Operación en curso";
+            case CultureIDs.Fr_FR: return "Opération en cours";
+            case CultureIDs.Pt_PT: return "Operação em curso";
+            default: return "Operazione in corso";
+        }
+    }
+    static get CustomButtonActions() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Aktion {{0}} von {{1}} wird ausgeführt";
+            case CultureIDs.En_US: return "Executing action {{0}} of {{1}}";
+            case CultureIDs.Es_ES: return "Ejecutando acción {{0}} de {{1}}";
+            case CultureIDs.Fr_FR: return "Exécution de l'action {{0}} sur {{1}}";
+            case CultureIDs.Pt_PT: return "Executando ação {{0}} de {{1}}";
+            default: return "Esecuzione azione {{0}} di {{1}}";
+        }
+    }
     static get Back() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Zurück";
@@ -2989,6 +3009,16 @@ export class SDKUI_Localizator {
             default: return "In corso";
         }
     }
+    static get InsertCommentToCompleteOperation() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Geben Sie einen Kommentar ein, um den Vorgang abzuschließen.";
+            case CultureIDs.En_US: return "Enter a comment to complete the operation.";
+            case CultureIDs.Es_ES: return "Introduzca un comentario para completar la operación.";
+            case CultureIDs.Fr_FR: return "Saisissez un commentaire pour terminer l’opération.";
+            case CultureIDs.Pt_PT: return "Introduza um comentário para concluir a operação.";
+            default: return "Inserisci un commento per completare l’operazione.";
+        }
+    }
     static get InsertYourEmail() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Geben Sie Ihre E-Mail ein";

package/lib/helper/dcmtsHelper.d.ts

@@ -4,5 +4,5 @@ export declare const hasDetailRelations: (mTID: number | undefined) => Promise<b
 /** Check if dcmtType (mTID) has configured Master or Many-to-Many relations */
 export declare const hasMasterRelations: (mTID: number | undefined) => Promise<boolean>;
 export declare const isXMLFileExt: (fileExt: string | undefined) => boolean;
-export declare const processButtonAttributes: (args: string | undefined, formData: MetadataValueDescriptorEx[] | undefined) => (string | null)[] | undefined;
-export declare const processSelectedItems: (args: string | undefined, formData: MetadataValueDescriptorEx[] | undefined, selectedItems: Array<any> | undefined) => any[][];
+export declare const getButtonAttributes: (args: string | undefined, formData: MetadataValueDescriptorEx[] | undefined, selectedItems: Array<any> | undefined) => Record<string, any> | undefined;
+export declare const getSelectedItem: (args: string | undefined, formData: MetadataValueDescriptorEx[] | undefined, item: any) => Record<string, any> | undefined;

package/lib/helper/dcmtsHelper.js

@@ -1,4 +1,4 @@
-import { RelationCacheService, RelationTypes } from "@topconsultnpm/sdk-ts";
+import { RelationCacheService, RelationTypes, SDK_Globals } from "@topconsultnpm/sdk-ts";
 /** Check if dcmtType (mTID) has configured Detail or Many-to-Many relations */
 export const hasDetailRelations = async (mTID) => {
     let allRelations = await RelationCacheService.GetAllAsync();
@@ -24,27 +24,59 @@ export const isXMLFileExt = (fileExt) => {
     }
 };
 /*utility functions for TMCustomButton*/
-export const processButtonAttributes = (args, formData) => args && formData ? formDataMap(formData, args) : undefined;
-export const processSelectedItems = (args, formData, selectedItems) => {
-    if (!args || !selectedItems)
-        return [];
-    const MidList = formData ? formDataMap(formData, args, true) : [];
-    return selectedItems.map(item => 
-    //salvo il did come primo elemento dell'array
-    [item["DID"], ...MidList.map(key => key && item[key])]);
+export const getButtonAttributes = (args, formData, selectedItems) => args && formData ? formDataMap(formData, args, selectedItems) : undefined;
+const getSelectedItems = (selectedItems) => selectedItems && selectedItems.map(item => item["DID"]) || [];
+export const getSelectedItem = (args, formData, item) => {
+    //converto item in formData
+    const formDataConverted = [];
+    for (const key in item) {
+        const md = formData?.find(md => `${item["TID"]}_${md.mid}` === key);
+        if (md) { // aggiungo solo i metadati
+            const name = md.md?.name || "";
+            formDataConverted.push({ md: { name: name }, value: item[key] });
+        }
+    }
+    return args && formDataConverted ?
+        formDataMap(formDataConverted, args, []) : undefined;
 };
-const formDataMap = (data, args, returnMid = false) => {
-    const tokens = args.match(/\{@?[^}]+\}/g) || [];
-    return tokens.map(token => {
-        if (token.startsWith('{@')) {
-            // Campo dinamico: {@campo} -> cerca in formData
-            const fieldName = token.slice(2, -1);
-            const md = data.find(md => md.md?.name === fieldName);
-            return returnMid ? (md ? `${md.tid}_${md.mid}` : null) : (md?.value ?? null);
+const formDataMap = (data, args, selectedItems) => {
+    const session = SDK_Globals.tmSession;
+    const sessionDescr = session?.SessionDescr;
+    const result = {};
+    // Helper per estrarre il valore di un campo
+    const getParamValue = (fieldName) => {
+        const md = data.find(md => md.md?.name === fieldName);
+        switch (fieldName) {
+            case 'SelectedDIDs': return getSelectedItems(selectedItems);
+            case 'AuthenticationMode': return sessionDescr?.authenticationMode ?? null;
+            case 'ArchiveID': return sessionDescr?.archiveID ?? null;
+            case 'CultureID': return sessionDescr?.cultureID ?? null;
+            case 'Domain': return sessionDescr?.domain ?? null;
+            case 'UserID': return sessionDescr?.userID ?? null;
+            case 'UserName': return sessionDescr?.userName ?? null;
+            case 'Session': return session ?? null;
+            default: return md?.value;
+        }
+    };
+    // Regex per catturare: chiave=[...] o chiave={...} o {@campo}
+    const keyValueRegex = /(\w+)=\[([^\]]+)\]|(\w+)=\{@?([^}]+)\}|\{@([^}]+)\}/g;
+    for (const match of args.matchAll(keyValueRegex)) {
+        if (match[1]) {
+            // Formato: chiave=[{@campo} testo {@campo} ...]
+            const key = match[1];
+            const content = match[2].replace(/\{@([^}]+)\}/g, (_, fieldName) => data.find(md => md.md?.name === fieldName)?.value ?? '');
+            result[key] = content;
         }
-        else {
-            // Campo statico: {valore} -> ritorna il valore o null
-            return returnMid ? null : token.slice(1, -1);
+        else if (match[3]) {
+            // Formato: chiave={@campo} o chiave={valore}
+            const key = match[3];
+            const value = match[4];
+            result[key] = value.startsWith('@') ? getParamValue(value.substring(1)) : value;
         }
-    });
+        else if (match[5]) {
+            // Formato: {@campo}
+            result[match[5]] = getParamValue(match[5]);
+        }
+    }
+    return result;
 };

package/lib/ts/types.d.ts

@@ -173,6 +173,7 @@ export interface ITMSaveFormBaseProps {
     customTooltipSaveButton?: string;
     showBackButton?: boolean;
     showUndoButton?: boolean;
+    showCloseButton?: boolean;
     showWarningsCount?: boolean;
     showErrorCount?: boolean;
     hasNavigation?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev2.42",
+    "version": "6.19.0-dev2.44",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",