@topconsultnpm/sdkui-react 6.20.0-dev1.82 → 6.20.0-dev1.83

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface TMToppyDraggableHelpCenterProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    content?: React.ReactNode;
+    /** Se true, renderizza Toppy nel document.body tramite Portal invece che nel parent */
+    usePortal?: boolean;
+    /** Allineamento iniziale del componente (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Visibilità del componente */
+    isVisible?: boolean;
+    /** Callback chiamato quando si clicca sull'immagine di Toppy */
+    onToppyImageClick?: () => void;
+}
+declare const TMToppyDraggableHelpCenter: (props: TMToppyDraggableHelpCenterProps) => import("react/jsx-runtime").JSX.Element;
+export default TMToppyDraggableHelpCenter;

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

@@ -0,0 +1,460 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import TMToppySpeechBubble from './TMToppySpeechBubble';
+import ToppyHelpCenterImage from '../../../assets/Toppy-help-center.png';
+import { SDKUI_Localizator } from '../../../helper';
+import { IconWindowMaximize } from '../../../helper/TMIcons';
+// Keyframes per l'animazione pulse sull'immagine quando Toppy è collassato
+const pulseAnimation = `
+    @keyframes toppyImagePulse {
+        0% {
+            transform: translateY(-2px) scale(1);
+            filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
+        }
+        25% {
+            transform: translateY(-2px) scale(1.08);
+            filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
+        }
+        50% {
+            transform: translateY(-2px) scale(1);
+            filter: drop-shadow(0 0 12px rgba(118, 75, 162, 0.5));
+        }
+        75% {
+            transform: translateY(-2px) scale(1.05);
+            filter: drop-shadow(0 0 6px rgba(240, 147, 251, 0.4));
+        }
+        100% {
+            transform: translateY(-2px) scale(1);
+            filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
+        }
+    }
+`;
+const TMToppyButton = styled.div.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',
+    },
+})) `
+    ${pulseAnimation}
+    display: ${(props) => (props.$isVisible ? 'flex' : 'none')}; 
+    align-items: center;
+    justify-content: center;
+    position: ${(props) => props.$usePortal ? 'fixed' : 'absolute'};
+    /* Posizionamento di default quando non è draggato (x e y non sono definiti) */
+    ${(props) => props.$x === undefined || props.$y === undefined ?
+    `bottom: 0px; 
+            ${props.$align === 'left' ? 'left: 10px;' : 'right: 0px;'};` : ''}
+    width: ${(props) => props.$isCollapsed ? '56px' : '110px'};
+    height: ${(props) => props.$isCollapsed ? '56px' : '110px'};
+    max-width: 100%;
+    max-height: 100%;
+    z-index: 2147483647;
+    background-color: ${(props) => props.$isCollapsed ? '#ffffff' : 'transparent'};
+    border: ${(props) => props.$isCollapsed ? '3px solid #3b82f6' : 'none'};
+    border-radius: ${(props) => props.$isCollapsed ? '50%' : '0'};
+    padding: 0;
+    outline: none;
+    user-select: none;
+    transition: background-color 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, width 0.3s ease, height 0.3s ease;
+    
+    img {
+        width: ${(props) => props.$isCollapsed ? '40px' : '110px'};
+        height: ${(props) => props.$isCollapsed ? '40px' : '110px'};
+        pointer-events: ${(props) => (props.$isMobile ? 'auto' : 'none')};
+        transform: ${(props) => props.$isCollapsed ? 'rotate(0deg)' : props.$align === 'left' ? 'rotate(20deg)' : 'rotate(-20deg)'};
+        transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease, filter 0.3s ease;
+        object-fit: contain;
+        ${(props) => props.$isCollapsed && `animation: toppyImagePulse 2.5s ease-in-out infinite;`}
+    }
+`;
+/**
+ * Pulsante di espansione quando Toppy è minimizzato
+ */
+const ExpandButton = styled.button `
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 20px rgba(118, 75, 162, 0.2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  z-index: 10001;
+  color: white;
+  font-size: 14px;
+  
+  &:hover {
+    background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
+    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6), 0 0 30px rgba(240, 147, 251, 0.4);
+    border-color: rgba(255, 255, 255, 1);
+    transform: scale(1.1);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 0 3px rgba(102, 126, 234, 0.2);
+  }
+`;
+/**
+ * Overlay trasparente per bloccare le interazioni durante il drag
+ * Previene problemi di performance con iframe e altri elementi interattivi
+ */
+const DragOverlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2147483646;
+  cursor: grabbing;
+`;
+const TMToppyDraggableHelpCenter = (props) => {
+    const { content, usePortal, align = 'right', isVisible = true, onToppyImageClick } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    const isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    // Ref per il contenitore principale
+    const toppyButtonRef = useRef(null);
+    // Ref per la speech bubble per calcolare le sue dimensioni
+    const bubbleRef = useRef(null);
+    // Dimensioni della bubble (aggiornate dinamicamente)
+    const bubbleDimensions = useRef({ width: 0, height: 0 });
+    // Posizione corrente del componente (null = posizione di default)
+    const [position, setPosition] = useState(null);
+    // Stato per tracciare se il componente è in fase di trascinamento
+    const [isDragging, setIsDragging] = useState(false);
+    // Stato per controllare se il componente è collassato o espanso
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    // Refs per gestire il drag
+    const dragStartPos = useRef(null);
+    const dragOffset = useRef(null);
+    const hasMoved = useRef(false);
+    // Ref per tracciare il dragging dell'ExpandButton
+    const isExpandButtonDraggingRef = useRef(false);
+    const expandButtonMouseDownPosRef = useRef(null);
+    // Soglia minima di movimento in pixel per attivare il drag
+    const DRAG_THRESHOLD = 5;
+    // Calcola le dimensioni della bubble quando il contenuto cambia
+    useEffect(() => {
+        if (bubbleRef.current) {
+            const rect = bubbleRef.current.getBoundingClientRect();
+            bubbleDimensions.current = { width: rect.width, height: rect.height };
+        }
+    }, [content, isCollapsed]);
+    // Handler per l'inizio del drag (mouse)
+    const handleMouseDown = (e) => {
+        if (isMobile)
+            return;
+        e.preventDefault();
+        const rect = toppyButtonRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        // Salva la posizione iniziale del mouse e l'offset rispetto al componente
+        dragStartPos.current = { x: e.clientX, y: e.clientY };
+        dragOffset.current = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        };
+        hasMoved.current = false;
+        // Aggiungi listener globali per il movimento e il rilascio
+        document.addEventListener('mousemove', handleDragMove);
+        document.addEventListener('mouseup', handleDragEnd);
+    };
+    // Handler per l'inizio del drag (touch)
+    const handleTouchStart = (e) => {
+        if (!isMobile)
+            return;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        const rect = toppyButtonRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        // Salva la posizione iniziale del touch e l'offset rispetto al componente
+        dragStartPos.current = { x: touch.clientX, y: touch.clientY };
+        dragOffset.current = {
+            x: touch.clientX - rect.left,
+            y: touch.clientY - rect.top,
+        };
+        hasMoved.current = false;
+        // Aggiungi listener globali per il movimento e il rilascio
+        document.addEventListener('touchmove', handleDragMove, { passive: false });
+        document.addEventListener('touchend', handleDragEnd);
+    };
+    // Handler unificato per il movimento durante il drag (mouse e touch)
+    const handleDragMove = (e) => {
+        if (!dragStartPos.current || !dragOffset.current || !toppyButtonRef.current)
+            return;
+        // Estrae le coordinate dal tipo di evento appropriato
+        const clientX = 'touches' in e ? e.touches[0]?.clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0]?.clientY : e.clientY;
+        if (clientX === undefined || clientY === undefined)
+            return;
+        // Calcola la distanza dal punto iniziale
+        const deltaX = clientX - dragStartPos.current.x;
+        const deltaY = clientY - dragStartPos.current.y;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        // Attiva il drag solo se il movimento supera la soglia
+        if (!hasMoved.current && distance < DRAG_THRESHOLD)
+            return;
+        if (!hasMoved.current) {
+            hasMoved.current = true;
+            setIsDragging(true);
+        }
+        // Previeni lo scroll durante il drag (solo per touch)
+        if ('touches' in e) {
+            e.preventDefault();
+        }
+        // Calcola la nuova posizione
+        let newX = clientX - dragOffset.current.x;
+        let newY = clientY - dragOffset.current.y;
+        // Se non usa portal, converti le coordinate da viewport a relative al parent
+        if (!usePortal) {
+            const parentElement = toppyButtonRef.current.offsetParent;
+            if (parentElement) {
+                const parentRect = parentElement.getBoundingClientRect();
+                newX -= parentRect.left;
+                newY -= parentRect.top;
+            }
+        }
+        // Ottieni le dimensioni del componente
+        const componentRect = toppyButtonRef.current.getBoundingClientRect();
+        const componentWidth = componentRect.width;
+        const componentHeight = componentRect.height;
+        // Limiti del parent considerando anche la bubble
+        let maxX = 0;
+        let maxY = 0;
+        let minX = 0;
+        let minY = 0;
+        // Considera le dimensioni della bubble per i limiti solo se non è collassato
+        const bubbleWidth = isCollapsed ? 0 : (bubbleDimensions.current.width || 0);
+        const bubbleHeight = isCollapsed ? 0 : (bubbleDimensions.current.height || 0);
+        // Offset dell'ExpandButton quando Toppy è collassato (top: -8px, right: -8px)
+        const expandButtonOffset = isCollapsed ? 8 : 0;
+        if (usePortal) {
+            // Se usa portal, i limiti sono quelli della viewport
+            // Limite superiore: deve lasciare spazio per la bubble sopra o per l'ExpandButton se collassato
+            minY = isCollapsed ? expandButtonOffset : bubbleHeight;
+            // Limite inferiore: il componente non può uscire dalla viewport
+            maxY = window.innerHeight - componentHeight;
+            // Limiti orizzontali dipendono dall'allineamento della bubble
+            if (align === 'right') {
+                // Bubble a sinistra del componente: serve spazio a sinistra
+                minX = Math.max(0, bubbleWidth - componentWidth);
+                // Quando collassato, l'ExpandButton sporge a destra di 8px
+                maxX = window.innerWidth - componentWidth - expandButtonOffset;
+            }
+            else {
+                // Bubble a destra del componente: serve spazio a destra
+                minX = 0;
+                maxX = window.innerWidth - Math.max(componentWidth, bubbleWidth) - expandButtonOffset;
+            }
+        }
+        else {
+            // Se non usa portal, le coordinate devono essere relative al parent
+            const parentElement = toppyButtonRef.current.offsetParent;
+            if (parentElement) {
+                // Usa le dimensioni del parent come riferimento
+                const parentWidth = parentElement.clientWidth;
+                const parentHeight = parentElement.clientHeight;
+                // Limite superiore: deve lasciare spazio per la bubble sopra o per l'ExpandButton se collassato
+                minY = isCollapsed ? expandButtonOffset : bubbleHeight;
+                // Limite inferiore: il componente non può uscire dal parent
+                maxY = parentHeight - componentHeight;
+                // Limiti orizzontali dipendono dall'allineamento della bubble
+                if (align === 'right') {
+                    // Bubble a sinistra del componente: serve spazio a sinistra
+                    minX = Math.max(0, bubbleWidth - componentWidth);
+                    // Quando collassato, l'ExpandButton sporge a destra di 8px
+                    maxX = parentWidth - componentWidth - expandButtonOffset;
+                }
+                else {
+                    // Bubble a destra del componente: serve spazio a destra
+                    minX = 0;
+                    maxX = parentWidth - Math.max(componentWidth, bubbleWidth) - expandButtonOffset;
+                }
+            }
+        }
+        // Applica i limiti
+        newX = Math.max(minX, Math.min(newX, maxX));
+        newY = Math.max(minY, Math.min(newY, maxY));
+        setPosition({ x: newX, y: newY });
+    };
+    // Handler unificato per il rilascio del drag (mouse e touch)
+    const handleDragEnd = () => {
+        dragStartPos.current = null;
+        dragOffset.current = null;
+        setIsDragging(false);
+        // Rimuovi tutti i listener globali
+        document.removeEventListener('mousemove', handleDragMove);
+        document.removeEventListener('mouseup', handleDragEnd);
+        document.removeEventListener('touchmove', handleDragMove);
+        document.removeEventListener('touchend', handleDragEnd);
+    };
+    // Handler per il doppio click (collassa/espande Toppy su desktop)
+    const toggleCollapse = () => {
+        setIsCollapsed(prev => {
+            const newIsCollapsed = !prev;
+            // Se stiamo espandendo (da collassato a espanso), dobbiamo verificare i limiti
+            if (!newIsCollapsed && position && toppyButtonRef.current && content) {
+                // Usa setTimeout per permettere al DOM di aggiornarsi con le nuove dimensioni
+                setTimeout(() => {
+                    if (!toppyButtonRef.current)
+                        return;
+                    // Dimensioni espanse del componente (110px come da styled-component)
+                    const expandedSize = 110;
+                    // Ottieni le dimensioni della bubble (usa valori di default se non disponibili)
+                    const bubbleWidth = bubbleDimensions.current.width || 250;
+                    const bubbleHeight = bubbleDimensions.current.height || 100;
+                    let newX = position.x;
+                    let newY = position.y;
+                    let needsUpdate = false;
+                    if (usePortal) {
+                        // Limiti della viewport considerando la bubble
+                        const minY = bubbleHeight;
+                        const maxY = window.innerHeight - expandedSize;
+                        let minX;
+                        let maxX;
+                        if (align === 'right') {
+                            minX = Math.max(0, bubbleWidth - expandedSize);
+                            maxX = window.innerWidth - expandedSize;
+                        }
+                        else {
+                            minX = 0;
+                            maxX = window.innerWidth - Math.max(expandedSize, bubbleWidth);
+                        }
+                        // Verifica e correggi la posizione
+                        if (newX < minX) {
+                            newX = minX;
+                            needsUpdate = true;
+                        }
+                        if (newX > maxX) {
+                            newX = maxX;
+                            needsUpdate = true;
+                        }
+                        if (newY < minY) {
+                            newY = minY;
+                            needsUpdate = true;
+                        }
+                        if (newY > maxY) {
+                            newY = maxY;
+                            needsUpdate = true;
+                        }
+                    }
+                    else {
+                        // Limiti del parent
+                        const offsetParent = toppyButtonRef.current.offsetParent;
+                        if (offsetParent) {
+                            const minY = bubbleHeight;
+                            const maxY = offsetParent.clientHeight - expandedSize;
+                            let minX;
+                            let maxX;
+                            if (align === 'right') {
+                                minX = Math.max(0, bubbleWidth - expandedSize);
+                                maxX = offsetParent.clientWidth - expandedSize;
+                            }
+                            else {
+                                minX = 0;
+                                maxX = offsetParent.clientWidth - Math.max(expandedSize, bubbleWidth);
+                            }
+                            // Verifica e correggi la posizione
+                            if (newX < minX) {
+                                newX = minX;
+                                needsUpdate = true;
+                            }
+                            if (newX > maxX) {
+                                newX = maxX;
+                                needsUpdate = true;
+                            }
+                            if (newY < minY) {
+                                newY = minY;
+                                needsUpdate = true;
+                            }
+                            if (newY > maxY) {
+                                newY = maxY;
+                                needsUpdate = true;
+                            }
+                        }
+                    }
+                    // Aggiorna la posizione solo se necessario
+                    if (needsUpdate) {
+                        setPosition({ x: newX, y: newY });
+                    }
+                }, 50); // Piccolo delay per permettere l'aggiornamento delle dimensioni
+            }
+            onToppyImageClick?.();
+            return newIsCollapsed;
+        });
+    };
+    // Cleanup degli event listener al dismount
+    useEffect(() => {
+        return () => {
+            document.removeEventListener('mousemove', handleDragMove);
+            document.removeEventListener('mouseup', handleDragEnd);
+            document.removeEventListener('touchmove', handleDragMove);
+            document.removeEventListener('touchend', handleDragEnd);
+        };
+    }, []);
+    // Reset della posizione quando cambia la dimensione della finestra/parent
+    // Questo evita che Toppy rimanga nascosto oltre i limiti dopo un resize
+    useEffect(() => {
+        const handleResize = () => {
+            // Resetta alla posizione iniziale (bottom-right o bottom-left in base ad align)
+            setPosition(null);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    const toppyContent = (_jsxs(_Fragment, { children: [isDragging && _jsx(DragOverlay, {}), _jsxs(TMToppyButton, { ref: toppyButtonRef, "$align": align, "$isDragging": isDragging, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$usePortal": usePortal, onContextMenu: (e) => e.preventDefault(), onMouseDown: !isMobile ? handleMouseDown : undefined, onTouchStart: isMobile ? handleTouchStart : undefined, onDoubleClick: !isMobile ? toggleCollapse : undefined, "$x": position?.x, "$y": position?.y, children: [(content && !isCollapsed) && _jsx(TMToppySpeechBubble, { ref: bubbleRef, align: align, onClose: toggleCollapse, children: content }), (content && isCollapsed) && (_jsx(ExpandButton, { onMouseDown: (e) => {
+                            isExpandButtonDraggingRef.current = false;
+                            expandButtonMouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+                        }, onMouseMove: (e) => {
+                            if (!expandButtonMouseDownPosRef.current)
+                                return;
+                            const deltaX = Math.abs(e.clientX - expandButtonMouseDownPosRef.current.x);
+                            const deltaY = Math.abs(e.clientY - expandButtonMouseDownPosRef.current.y);
+                            // Considera drag solo se il movimento supera 3px
+                            if (deltaX > 3 || deltaY > 3) {
+                                isExpandButtonDraggingRef.current = true;
+                            }
+                        }, onMouseUp: () => {
+                            expandButtonMouseDownPosRef.current = null;
+                        }, onClick: (e) => {
+                            if (isExpandButtonDraggingRef.current) {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                return;
+                            }
+                            e.stopPropagation();
+                            toggleCollapse();
+                        }, onContextMenu: (e) => e.preventDefault(), "aria-label": SDKUI_Localizator.Maximize, title: SDKUI_Localizator.Maximize, type: "button", children: _jsx(IconWindowMaximize, {}) })), _jsx("img", { src: ToppyHelpCenterImage, alt: "Toppy Help", draggable: false })] })] }));
+    // Renderizza nel document.body usando un Portal se usePortal è true, altrimenti renderizza normalmente
+    return usePortal ? ReactDOM.createPortal(toppyContent, document.body) : toppyContent;
+};
+export default TMToppyDraggableHelpCenter;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TMToppySpeechBubbleProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    children: React.ReactNode;
+    /** Allineamento della speech bubble (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Callback per chiudere/minimizzare la bubble */
+    onClose?: () => void;
+}
+declare const TMToppySpeechBubble: React.ForwardRefExoticComponent<TMToppySpeechBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export default TMToppySpeechBubble;

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import styled from 'styled-components';
+import { SDKUI_Localizator } from '../../../helper';
+import { IconWindowMinimize } from '../../../helper/TMIcons';
+// Offset del CloseButton che sporge oltre i bordi della bubble
+const CLOSE_BUTTON_OFFSET = 8;
+/**
+ * Wrapper che include lo spazio per il CloseButton sporgente
+ * Il ref viene passato qui per includere le dimensioni complete nel calcolo
+ */
+const BubbleWrapper = styled.div `
+    position: relative;
+    padding-top: ${({ $hasCloseButton }) => $hasCloseButton ? `${CLOSE_BUTTON_OFFSET}px` : '0'};
+    padding-right: ${({ $hasCloseButton }) => $hasCloseButton ? `${CLOSE_BUTTON_OFFSET}px` : '0'};
+`;
+/**
+ * Pulsante di chiusura/minimizzazione in alto a destra della bubble
+ * Posizionato all'interno del padding del BubbleWrapper
+ */
+const CloseButton = styled.button `
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 20px rgba(118, 75, 162, 0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    z-index: 10001;
+    color: white;
+    font-size: 14px;
+    
+    &:hover {
+        background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
+        box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6), 0 0 30px rgba(240, 147, 251, 0.4);
+        border-color: rgba(255, 255, 255, 1);
+        transform: scale(1.1);
+    }
+    
+    &:active {
+        transform: scale(0.95);
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+    }
+    
+    &:focus {
+        outline: none;
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 0 3px rgba(102, 126, 234, 0.2);
+    }
+`;
+const BubbleContainer = styled.div `
+    position: absolute;
+    bottom: 100%;
+    ${({ $align }) => $align === 'right' ? 'right: 0px;' : 'left: 0px;'}
+    z-index: 10;
+`;
+const Bubble = styled.div `
+    position: relative;
+    background: linear-gradient(180deg, rgba(0, 113, 188, 0.45) 0%,rgba(27, 20, 100, 0.65) 100%);
+    color: #333;
+    padding: 10px;
+    box-sizing: border-box;
+    border-radius: 18px;
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+    font-size: 14px;
+    line-height: 1.5;
+    width: max-content;
+    
+    // Arrow styles
+    &::after {
+        transform: ${({ $align }) => ($align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)')};
+        content: "";
+        position: absolute;
+        top: 100%;
+        ${({ $align }) => ($align === 'left' ? 'left: 20px;' : 'right: 15px;')}
+        border-width: 22px 22px 0 0;
+        border-style: solid;
+        border-color: rgba(27, 20, 100, 0.65) transparent; 
+        display: block;
+        width: 0;
+        height: 0;
+        z-index: 1;
+    }
+`;
+const Content = styled.div `position: relative; z-index: 1;`;
+const TMToppySpeechBubble = forwardRef((props, ref) => {
+    const { children, align = 'right', onClose } = props;
+    // Ref per tracciare il dragging del CloseButton
+    const isCloseButtonDraggingRef = useRef(false);
+    const closeButtonMouseDownPosRef = useRef(null);
+    const handleMouseDown = (e) => {
+        isCloseButtonDraggingRef.current = false;
+        closeButtonMouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+    };
+    const handleMouseMove = (e) => {
+        if (!closeButtonMouseDownPosRef.current)
+            return;
+        const deltaX = Math.abs(e.clientX - closeButtonMouseDownPosRef.current.x);
+        const deltaY = Math.abs(e.clientY - closeButtonMouseDownPosRef.current.y);
+        // Considera drag solo se il movimento supera 3px
+        if (deltaX > 3 || deltaY > 3) {
+            isCloseButtonDraggingRef.current = true;
+        }
+    };
+    const handleMouseUp = () => {
+        closeButtonMouseDownPosRef.current = null;
+    };
+    const handleClick = (e) => {
+        if (isCloseButtonDraggingRef.current) {
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+        }
+        e.stopPropagation();
+        onClose?.();
+    };
+    return (_jsx(BubbleContainer, { "$align": align, children: _jsxs(BubbleWrapper, { ref: ref, "$hasCloseButton": !!onClose, children: [onClose && (_jsx(CloseButton, { onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: handleClick, "aria-label": SDKUI_Localizator.Minimize, title: SDKUI_Localizator.Minimize, type: "button", children: _jsx(IconWindowMinimize, {}) })), _jsx(Bubble, { "$align": align, children: _jsx(Content, { children: children }) })] }) }));
+});
+TMToppySpeechBubble.displayName = 'TMToppySpeechBubble';
+export default TMToppySpeechBubble;

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

@@ -40,12 +40,12 @@ import TMDcmtTasks from './TMDcmtTasks';
 import TMToppyMessage from '../../../helper/TMToppyMessage';
 import { getTaskAssignedToMe } from '../tasks/TMTasksUtils';
 import TMCustomButton from '../../base/TMCustomButton';
-import ToppyDraggableHelpCenter from '../assistant/ToppyDraggableHelpCenter';
 import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations';
 import TMViewHistoryDcmt from '../search/TMViewHistoryDcmt';
 import TMDcmtCheckoutInfoForm from '../search/TMDcmtCheckoutInfoForm';
 import styled from 'styled-components';
 import { ContextMenu } from '../../NewComponents/ContextMenu';
+import TMToppyDraggableHelpCenter from '../assistant/TMToppyDraggableHelpCenter';
 //#region Interfaces, Types and Enums
 /**
  * Definisce il contesto da cui è stato invocato il TMDcmtForm.
@@ -638,6 +638,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
     const showToppyForApprove = useMemo(() => layoutMode === LayoutModes.Update && !fetchError && workItems.length > 0 && !isOpenDetails && !isOpenMaster, [layoutMode, fetchError, workItems.length, isOpenDetails, isOpenMaster]);
     const showToppyForCompleteMoreInfo = useMemo(() => layoutMode === LayoutModes.Update && !!isTaskMoreInfo(taskMoreInfo?.name) && taskMoreInfo?.state !== Task_States.Completed, [layoutMode, taskMoreInfo?.name, taskMoreInfo?.state]);
     const showToppyForReferences = useMemo(() => allowButtonsRefs && layoutMode === LayoutModes.Update && !!(dcmtReferences && dcmtReferences.length > 0) && !isOpenDetails && !isOpenMaster, [allowButtonsRefs, layoutMode, dcmtReferences, isOpenDetails, isOpenMaster]);
+    const isToppyVisible = useMemo(() => Boolean((showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && !openS4TViewer), [showToppyForApprove, showToppyForCompleteMoreInfo, showToppyForReferences, openS4TViewer]);
     const isMobile = useMemo(() => deviceType === DeviceType.MOBILE, [deviceType]);
     const isApprView = useMemo(() => {
         if (!fromDTD)
@@ -1552,7 +1553,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 })] }) }), _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, isVisible: (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && !openS4TViewer, 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 })] }) }), _jsx(TMToppyDraggableHelpCenter, { isVisible: isToppyVisible, 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: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), 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: () => {