@topconsultnpm/sdkui-react 6.20.0-dev1.10 → 6.20.0-dev1.101

package/lib/components/editors/TMTextArea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
@@ -35,14 +35,10 @@ const TMTextArea = (props) => {
     const [isFocused, setIsFocused] = useState(false);
     // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
-    // Stores the items for the context menu
-    const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     // Stores the calculated number of rows for the textarea
     const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
     //Show chooserForm formulaItems
     const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
-    // Manages the state for the custom context menu
-    const { clicked, setClicked, points, setPoints } = useContextMenu();
     const deviceType = useDeviceType();
     // Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
     useEffect(() => {
@@ -69,16 +65,15 @@ const TMTextArea = (props) => {
             setCalculatedRows(newRowCount);
         }
     }, [currentValue, autoCalculateRows]);
-    // Populate the formula menu items whenever the `formulaItems` prop changes
-    useEffect(() => {
-        if (formulaItems && formulaItems.length > 0) {
-            let menuItems = [];
-            for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
-            }
-            setFormulaMenuItems(menuItems);
-        }
-    }, [formulaItems]);
+    // Build context menu items for formulas
+    const getFormulaMenuItems = () => {
+        if (!formulaItems || formulaItems.length === 0)
+            return [];
+        return formulaItems.map(formula => ({
+            name: formula,
+            onClick: () => insertText(formula)
+        }));
+    };
     function getFormulaDataSorce() {
         let fiarray = [];
         if (!formulaItems)
@@ -153,20 +148,8 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        return _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, onContextMenu: (e) => {
-                        if (formulaItems.length <= 0)
-                            return;
-                        // prevent default right click behavior
-                        e.preventDefault();
-                        // set our click state to true when a user right clicks
-                        setClicked(true);
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = e.clientX - bounds.left;
-                        const y = e.clientY - bounds.top;
-                        // set the x and y coordinates of our users right click
-                        setPoints({ x, y });
-                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     setShowFormulaItemsChooser(true);
                                 }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
@@ -178,7 +161,12 @@ const TMTextArea = (props) => {
                                     onBlur?.(undefined);
                                 }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                             return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+                        })] }), openFormulaItemsChooser(), _jsx(TMVilViewer, { vil: validationItems })] });
+        // Wrap with context menu if formula items exist
+        if (formulaItems.length > 0) {
+            return (_jsx(TMContextMenu, { items: getFormulaMenuItems(), trigger: "right", children: textareaElement }));
+        }
+        return textareaElement;
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {

package/lib/components/editors/TMTextBox.js

@@ -9,7 +9,7 @@ import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
-import { ContextMenu } from 'devextreme-react';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import TMChooserForm from '../forms/TMChooserForm';
 import { FormulaItemHelper } from './TMTextExpression';
@@ -94,7 +94,10 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];
             for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
+                menuItems.push({
+                    name: formula,
+                    onClick: () => insertText(formula)
+                });
             }
             setFormulaMenuItems(menuItems);
         }
@@ -269,7 +272,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                                         onBlur?.(undefined);
                                     }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                                 return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(TMContextMenu, { items: formulaMenuItems, target: `#text-${id}` })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));

package/lib/components/features/archive/TMArchive.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
-import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid } from '../../../helper';
+import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid, getMoreInfoTasksForDocument } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMLayoutContainer from '../../base/TMLayout';
 import TMRecentsManager from '../../grids/TMRecentsManager';
@@ -77,7 +77,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 if (onDcmtTypeSelect)
                     onDcmtTypeSelect(tidToUse);
                 passToSearch(tidToUse, outputMids);
-            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }, currentTID)
+            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined) }, currentTID)
         :
             _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, currentInputMids, enableDragDropOverlay, isSharedArchive, allTasks]);
     const allInitialPanelVisibility = {

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;