@topconsultnpm/sdkui-react 6.20.0-dev1.11 → 6.20.0-dev1.111

package/lib/components/editors/TMTextExpression.js

@@ -1,96 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
+import { useMemo, useState } from 'react';
 import { IconClear, IconColumns, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
 import TMTextBox from './TMTextBox';
 import TMTextArea from './TMTextArea';
+import { useMetadataExpression } from '../../hooks/useMetadataExpression';
 const TMTextExpression = (props) => {
-    const [metadatas_Info_Source, setMetadatas_Info_Source] = useState([]);
+    const { metadatas_Info_Source, Expression_IDs2Names, Expression_Names2IDs } = useMetadataExpression({
+        qd: props.qd,
+        tid: props.tid
+    });
     const [showMetadataChooser, setShowMetadataChooser] = useState(false);
     const [showFormulaChooser, setShowFormulaChooser] = useState(false);
-    useEffect(() => { MetadataInfos_Source_Get_Async(); }, [props.qd]);
-    useEffect(() => { MetadataInfos_Source_GetByTID_Async(); }, [props.tid]);
-    async function MetadataInfos_Source_Get_Async() {
-        if (!props.qd?.select)
-            return;
-        let mhs_source = [];
-        try {
-            let dtd_source;
-            let md_source;
-            let tid_source = -1;
-            let si;
-            let sis = props.qd?.select?.slice();
-            sis = sis.slice().sort((a, b) => a.tid - b.tid);
-            for (si of sis) {
-                if (si.tid == undefined || si.mid == undefined)
-                    continue;
-                if (tid_source != si.tid) {
-                    dtd_source = await DcmtTypeListCacheService.GetAsync(si.tid, true);
-                    if (dtd_source == undefined)
-                        continue;
-                    tid_source = si.tid;
-                }
-                if (dtd_source?.metadata == undefined)
-                    continue;
-                md_source = dtd_source.metadata.find(o => o.id == si.mid);
-                if (md_source?.name == undefined)
-                    continue;
-                if (tid_source == undefined)
-                    continue;
-                mhs_source.push(new MetatadaHelper(si.mid, md_source.name));
-            }
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_Get_Async' });
-        }
-        setMetadatas_Info_Source(mhs_source);
-    }
-    async function MetadataInfos_Source_GetByTID_Async() {
-        if (!props.tid)
-            return;
-        let mhs_source = [];
-        try {
-            let dtd_source = await DcmtTypeListCacheService.GetAsync(props.tid, true);
-            if (dtd_source == undefined)
-                return;
-            if (dtd_source?.metadata == undefined)
-                return;
-            for (let md_source of dtd_source?.metadata) {
-                if (md_source?.name == undefined)
-                    continue;
-                if (md_source?.id == undefined)
-                    continue;
-                mhs_source.push(new MetatadaHelper(md_source.id, md_source.name));
-            }
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_GetByTID_Async' });
-        }
-        setMetadatas_Info_Source(mhs_source);
-    }
-    function Expression_IDs2Names(expression) {
-        if (expression == undefined)
-            return expression;
-        let temp = expression.slice();
-        let mh;
-        for (mh of metadatas_Info_Source) {
-            temp = temp.replaceAll(`{@${mh.Mid}}`, `{@${mh.MetadataName}}`);
-        }
-        temp = temp.replaceAll("{@1}", "{@DID}");
-        return temp;
-    }
-    function Expression_Names2IDs(expression) {
-        if (expression == undefined)
-            return expression;
-        let temp = expression.slice();
-        let mh;
-        for (mh of metadatas_Info_Source)
-            temp = temp.replaceAll(`{@${mh.MetadataName}}`, `{@${mh.Mid}}`);
-        temp = temp.replaceAll("{@DID}", "{@1}");
-        return temp;
-    }
     const renderButtons = () => {
         let buttons = [];
         if (props.qd || props.tid)
@@ -167,12 +88,6 @@ const TMTextExpression = (props) => {
                 :
                     _jsx(TMTextArea, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " "] }));
 };
-class MetatadaHelper {
-    constructor(mid, metadataName) {
-        this.Mid = mid;
-        this.MetadataName = metadataName;
-    }
-}
 export class FormulaItemHelper {
     constructor() {
         this.id = 0;

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;