@topconsultnpm/sdkui-react 6.19.0-dev2.52 → 6.19.0-dev2.54

package/lib/components/base/TMModal.js

@@ -110,6 +110,6 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
                         onClick: () => setIsFullScreen(!isFullScreen)
                     }
                 }
-            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

package/lib/components/base/TMPopUp.js

@@ -33,7 +33,8 @@ const StyledExeptionToolbar = styled.div `
     background-color: white;
 `;
 const StyledMessageToolbar = styled.div `
-    position: relative;
+    position: sticky;
+    bottom: 0;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
@@ -95,6 +96,7 @@ const ResponsiveMessageContainer = styled.div `
     height: 100%;
     width: 100%;
     background-color: #ffffff;
+    overflow: hidden;
 `;
 const ResponsiveMessageContent = styled.div `
     flex: 1;
@@ -105,6 +107,7 @@ const ResponsiveMessageContent = styled.div `
     gap: clamp(8px, 2vw, 20px);
     padding: clamp(8px, 3vw, 25px) clamp(5px, 2vw, 30px);
     min-height: clamp(80px, 15vh, 120px);
+    overflow: auto;
     
     @media (min-width: 300px) {
         flex-direction: ${props => props.$isMobile ? 'column' : 'row'};

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

@@ -16,6 +16,8 @@ interface ToppyDraggableHelpCenterProps {
     onToppyImageClick?: () => void;
     /** Visibilità del componente */
     isVisible?: boolean;
+    /** Se true, renderizza Toppy nel document.body tramite Portal invece che nel parent */
+    usePortal?: boolean;
 }
 /**
  * Componente ToppyDraggableHelpCenter

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

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import Toppy from '../../../assets/Toppy-generico.png';
 import { DeviceType } from '../../base/TMDeviceProvider';
 import ToppySpeechBubble from './ToppySpeechBubble';
+import { SDKUI_Localizator } from '../../../helper';
+import { IconWindowMaximize } from '../../../helper/TMIcons';
 /**
  * Styled component per il contenitore di Toppy
  * Gestisce il posizionamento, le dimensioni e le animazioni
@@ -25,7 +28,7 @@ const ToppyButton = styled.div.attrs((props) => ({
 })) `
   /* Visibilità controllata dalla prop */
   display: ${(props) => (props.$isVisible ? 'flex' : 'none')};
-  position: absolute;
+  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
@@ -106,6 +109,45 @@ const ToppyButton = styled.div.attrs((props) => ({
     }
   }
 `;
+/**
+ * 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
@@ -126,7 +168,7 @@ const DragOverlay = styled.div `
  * in una speech bubble. Il componente può essere trascinato all'interno del suo
  * contenitore e può essere collassato/espanso con un doppio click.
  */
-const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onToppyImageClick, initialIsCollapsed, isVisible = true, }) => {
+const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onToppyImageClick, initialIsCollapsed, isVisible = true, usePortal = false, }) => {
     // Ref per il contenitore principale
     const buttonRef = useRef(null);
     // Stato per controllare se il componente è collassato o espanso
@@ -140,6 +182,9 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     // Ref e stato per tracciare le dimensioni della speech bubble
     const bubbleRef = useRef(null);
     const [bubbleSize, setBubbleSize] = useState({ width: 0, height: 0 });
+    // Ref per tracciare il dragging dell'ExpandButton
+    const isExpandButtonDraggingRef = useRef(false);
+    const expandButtonMouseDownPosRef = useRef(null);
     const isMobile = deviceType === DeviceType.MOBILE;
     /**
      * Effect per aggiornare le dimensioni della bubble quando cambia il contenuto
@@ -153,57 +198,112 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
         }
     }, [content, isCollapsed]);
     /**
-     * Effect per resettare la posizione quando il parent o la finestra vengono ridimensionati.
-     * Questo previene che il componente finisca fuori dai bordi dopo un resize.
+     * Effect per verificare e aggiustare la posizione quando cambia lo stato di collassamento
      */
     useEffect(() => {
-        if (!buttonRef.current)
+        if (!buttonRef.current || !position)
             return;
-        const parent = buttonRef.current.offsetParent;
-        if (!parent)
+        const rect = buttonRef.current.getBoundingClientRect();
+        // Spazio extra occupato dalla bubble quando non è collassato
+        const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+        const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+        let minX = 0;
+        let maxX;
+        let maxY;
+        const bubbleBuffer = 5;
+        if (usePortal) {
+            // Calcola i limiti usando le dimensioni del viewport
+            maxX = window.innerWidth - rect.width;
+            maxY = window.innerHeight - rect.height + 20;
+        }
+        else {
+            // Calcola i limiti usando le dimensioni del parent
+            const parent = buttonRef.current.offsetParent;
+            if (!parent)
+                return;
+            const parentRect = parent.getBoundingClientRect();
+            maxX = parentRect.width - rect.width;
+            maxY = parentRect.height - rect.height + 20;
+        }
+        if (!isCollapsed) {
+            if (align === 'right') {
+                minX = Math.max(0, extraWidth - rect.width);
+            }
+            else {
+                maxX = Math.min(maxX, (usePortal ? window.innerWidth : buttonRef.current.offsetParent?.getBoundingClientRect().width || 0) - extraWidth);
+            }
+        }
+        // Verifica se la posizione corrente è fuori dai limiti
+        const isOutOfBounds = position.x < minX ||
+            position.x > maxX ||
+            position.y < extraHeight + bubbleBuffer ||
+            position.y > maxY;
+        // Se è fuori dai limiti, aggiusta la posizione
+        if (isOutOfBounds) {
+            const adjustedX = Math.max(minX, Math.min(position.x, maxX));
+            const adjustedY = Math.max(extraHeight + bubbleBuffer, Math.min(position.y, maxY));
+            setPosition({ x: adjustedX, y: adjustedY });
+        }
+    }, [isCollapsed, bubbleSize, usePortal, align]);
+    /**
+     * Effect per resettare la posizione quando il parent o la finestra vengono ridimensionati
+     */
+    useEffect(() => {
+        if (!buttonRef.current || !position)
             return;
-        // Funzione per verificare e aggiustare la posizione dopo un resize
         const handleResize = () => {
             if (!buttonRef.current || !position)
                 return;
-            const parentRect = parent.getBoundingClientRect();
             const rect = buttonRef.current.getBoundingClientRect();
-            // Spazio extra occupato dalla bubble quando non è collassato
             const extraHeight = !isCollapsed ? bubbleSize.height : 0;
             const extraWidth = !isCollapsed ? bubbleSize.width : 0;
-            // Calcola i nuovi limiti
             let minX = 0;
-            let maxX = parentRect.width - rect.width;
+            let maxX;
+            let maxY;
+            const bubbleBuffer = 5;
+            if (usePortal) {
+                maxX = window.innerWidth - rect.width;
+                maxY = window.innerHeight - rect.height + 20;
+            }
+            else {
+                const parent = buttonRef.current.offsetParent;
+                if (!parent)
+                    return;
+                const parentRect = parent.getBoundingClientRect();
+                maxX = parentRect.width - rect.width;
+                maxY = parentRect.height - rect.height + 20;
+            }
             if (!isCollapsed) {
                 if (align === 'right') {
                     minX = Math.max(0, extraWidth - rect.width);
                 }
                 else {
-                    maxX = Math.min(maxX, parentRect.width - extraWidth);
+                    maxX = Math.min(maxX, (usePortal ? window.innerWidth : buttonRef.current.offsetParent?.getBoundingClientRect().width || 0) - extraWidth);
                 }
             }
-            const bubbleBuffer = 5; // Buffer per evitare che la bubble esca leggermente dai bordi
-            const maxY = parentRect.height - rect.height + 20; // +20px per permettere bottom: -20px
-            // Verifica se la posizione corrente è fuori dai limiti
             const isOutOfBounds = position.x < minX ||
                 position.x > maxX ||
                 position.y < extraHeight + bubbleBuffer ||
                 position.y > maxY;
-            // Se è fuori dai limiti, resetta alla posizione default
             if (isOutOfBounds) {
                 setPosition(null);
             }
         };
-        // Observer per monitorare i cambiamenti di dimensione del parent
-        const resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(parent);
-        // Listener per il resize della finestra
+        // Observer per il parent se non usa Portal
+        let resizeObserver;
+        if (!usePortal) {
+            const parent = buttonRef.current.offsetParent;
+            if (parent) {
+                resizeObserver = new ResizeObserver(handleResize);
+                resizeObserver.observe(parent);
+            }
+        }
         window.addEventListener('resize', handleResize);
         return () => {
-            resizeObserver.disconnect();
+            resizeObserver?.disconnect();
             window.removeEventListener('resize', handleResize);
         };
-    }, [position, isCollapsed, bubbleSize, align]);
+    }, [position, isCollapsed, bubbleSize, align, usePortal]);
     /**
      * Effect per impostare automaticamente lo stato collassato su dispositivi mobile
      * se non è stato specificato un valore iniziale.
@@ -218,7 +318,7 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
      * Chiamato dal doppio click sul componente
      */
     const toggleCollapse = (e) => {
-        e.stopPropagation();
+        e?.stopPropagation();
         setIsCollapsed(!isCollapsed);
         onToppyImageClick?.();
     };
@@ -231,9 +331,6 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
         if (!buttonRef.current)
             return;
         const rect = buttonRef.current.getBoundingClientRect();
-        const parentRect = buttonRef.current.offsetParent?.getBoundingClientRect();
-        if (!parentRect)
-            return;
         // Calcola l'offset tra il punto di click e l'angolo superiore sinistro del componente
         dragOffset.current = {
             x: e.clientX - rect.left,
@@ -244,42 +341,56 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     };
     /**
      * Gestisce il movimento durante il trascinamento
-     * Calcola la nuova posizione rispettando i limiti del parent container
+     * Calcola la nuova posizione rispettando i limiti del parent o viewport
      * e tenendo conto delle dimensioni della speech bubble quando espansa
      */
     const handleMouseMove = (e) => {
         if (!isDragging || !buttonRef.current)
             return;
-        const parentRect = buttonRef.current.offsetParent?.getBoundingClientRect();
-        if (!parentRect)
-            return;
         const rect = buttonRef.current.getBoundingClientRect();
         // Spazio extra occupato dalla bubble quando non è collassato
         const extraHeight = !isCollapsed ? bubbleSize.height : 0;
         const extraWidth = !isCollapsed ? bubbleSize.width : 0;
-        // Calcola i limiti orizzontali considerando la bubble
         let minX = 0;
-        let maxX = parentRect.width - rect.width;
-        if (!isCollapsed) {
-            if (align === 'right') {
-                // La bubble si estende verso sinistra: aumenta il limite minimo
-                // per evitare che la bubble esca dal bordo sinistro
-                minX = Math.max(0, extraWidth - rect.width);
+        let maxX;
+        let maxY;
+        let newX;
+        let newY;
+        const bubbleBuffer = 5;
+        if (usePortal) {
+            // Calcola i limiti usando il viewport
+            maxX = window.innerWidth - rect.width;
+            maxY = window.innerHeight - rect.height + 20;
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, window.innerWidth - extraWidth);
+                }
             }
-            else {
-                // La bubble si estende verso destra: riduce il limite massimo
-                // per evitare che la bubble esca dal bordo destro
-                maxX = Math.min(maxX, parentRect.width - extraWidth);
+            newX = Math.max(minX, Math.min(e.clientX - dragOffset.current.x, maxX));
+            newY = Math.max(extraHeight + bubbleBuffer, Math.min(e.clientY - dragOffset.current.y, maxY));
+        }
+        else {
+            // Calcola i limiti usando il parent
+            const parent = buttonRef.current.offsetParent;
+            if (!parent)
+                return;
+            const parentRect = parent.getBoundingClientRect();
+            maxX = parentRect.width - rect.width;
+            maxY = parentRect.height - rect.height + 20;
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, parentRect.width - extraWidth);
+                }
             }
+            newX = Math.max(minX, Math.min(e.clientX - parentRect.left - dragOffset.current.x, maxX));
+            newY = Math.max(extraHeight + bubbleBuffer, Math.min(e.clientY - parentRect.top - dragOffset.current.y, maxY));
         }
-        // Calcola la nuova posizione X rispettando i limiti
-        const newX = Math.max(minX, Math.min(e.clientX - parentRect.left - dragOffset.current.x, maxX));
-        // Calcola la nuova posizione Y rispettando i limiti
-        // Il limite superiore tiene conto dell'altezza della bubble + buffer di sicurezza
-        // Il limite inferiore include 20px extra per permettere bottom: -20px
-        const bubbleBuffer = 5; // Buffer per evitare che la bubble esca leggermente dai bordi
-        const maxY = parentRect.height - rect.height + 20;
-        const newY = Math.max(extraHeight + bubbleBuffer, Math.min(e.clientY - parentRect.top - dragOffset.current.y, maxY));
         setPosition({ x: newX, y: newY });
     };
     /**
@@ -319,6 +430,30 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     }, [isDragging]);
     // Renderizza l'overlay solo durante il drag
     const renderDragOverlay = isDragging && _jsx(DragOverlay, {});
-    return (_jsxs(_Fragment, { children: [renderDragOverlay, _jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, onMouseDown: !isMobile ? handleMouseDown : undefined, onContextMenu: (e) => e.preventDefault(), onDoubleClick: !isMobile ? toggleCollapse : undefined, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, children: content })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false, onClick: isMobile ? toggleCollapse : undefined })] })] }));
+    const toppyContent = (_jsxs(_Fragment, { children: [renderDragOverlay, _jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$usePortal": usePortal, onMouseDown: !isMobile ? handleMouseDown : undefined, onContextMenu: (e) => e.preventDefault(), onDoubleClick: !isMobile ? toggleCollapse : undefined, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { 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(e);
+                        }, onContextMenu: (e) => e.preventDefault(), "aria-label": SDKUI_Localizator.Maximize, title: SDKUI_Localizator.Maximize, type: "button", children: _jsx(IconWindowMaximize, {}) })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false, onClick: isMobile ? toggleCollapse : undefined })] })] }));
+    // Renderizza nel document.body usando un Portal se usePortal è true, altrimenti renderizza normalmente
+    return usePortal ? ReactDOM.createPortal(toppyContent, document.body) : toppyContent;
 };
 export default ToppyDraggableHelpCenter;

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

@@ -3,6 +3,7 @@ interface ToppySpeechBubbleProps {
     align?: 'left' | 'right';
     children: React.ReactNode;
     className?: string;
+    onClose?: () => void;
 }
 declare const ToppySpeechBubble: React.ForwardRefExoticComponent<ToppySpeechBubbleProps & React.RefAttributes<HTMLDivElement>>;
 export default ToppySpeechBubble;

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

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
+import { SDKUI_Localizator } from '../../../helper';
+import { IconCloseOutline } from '../../../helper/TMIcons';
 // Styled component
 const Bubble = styled.div `
   position: absolute;
@@ -46,8 +48,70 @@ const Bubble = styled.div `
     z-index: 2;
   }
 `;
+const CloseButton = 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);
+  }
+  
+  &: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);
+  }
+`;
 // Componente con forwardRef
-const ToppySpeechBubble = forwardRef(({ align = 'right', children, className }, ref) => {
-    return (_jsx(Bubble, { ref: ref, "$align": align, className: className, children: children }));
+const ToppySpeechBubble = forwardRef(({ align = 'right', children, className, onClose }, ref) => {
+    const isDraggingRef = React.useRef(false);
+    const mouseDownPosRef = React.useRef(null);
+    const handleMouseDown = (e) => {
+        isDraggingRef.current = false;
+        mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+    };
+    const handleMouseMove = (e) => {
+        if (!mouseDownPosRef.current)
+            return;
+        const deltaX = Math.abs(e.clientX - mouseDownPosRef.current.x);
+        const deltaY = Math.abs(e.clientY - mouseDownPosRef.current.y);
+        // Considera drag solo se il movimento supera 3px
+        if (deltaX > 3 || deltaY > 3) {
+            isDraggingRef.current = true;
+        }
+    };
+    const handleClick = (e) => {
+        if (isDraggingRef.current) {
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+        }
+        onClose?.();
+    };
+    const handleMouseUp = () => {
+        mouseDownPosRef.current = null;
+    };
+    return (_jsxs(Bubble, { ref: ref, "$align": align, className: className, 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(IconCloseOutline, {}) })), children] }));
 });
 export default ToppySpeechBubble;

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

@@ -1353,7 +1353,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                                                 isEditable: true,
                                                 value: FormulaHelper.addFormulaTag(newFormula.expression)
                                             }));
-                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, 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(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, isVisible: showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
                                         _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
                                         :
                                             _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
@@ -1368,7 +1368,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                                                         backgroundColor: 'rgba(255,255,255,0.2)',
                                                         margin: '6px 0'
                                                     } })), _jsxs(StyledReferenceButton, { onClick: () => handleNavigateToReference(ref), children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }, `ref-${index}-${ref.objID}`)] }, `ref-frag-${index}-${ref.objID}`));
-                                    })] }) }))] }), (showCommentForm && TID && DID) &&
+                                    })] }) })] }), (showCommentForm && TID && DID) &&
                     _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: TID, did: DID } }, onClose: () => setShowCommentForm(false), refreshCallback: handleCompleteMoreInfo, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [] }), isOpenDetails &&
                     _jsx(StyledModalContainer, { children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenMaster &&
                     _jsxs(StyledModalContainer, { children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {

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

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
-import Toppy from '../../../assets/Toppy-generico.png';
 import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight, IconMenuCAArchive, getListMaxItems } from '../../../helper';
 import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
 import { FormModes } from '../../../ts';
@@ -13,7 +12,6 @@ import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMDropDownMenu from '../../base/TMDropDownMenu';
-import TMLayoutContainer from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMPanel from '../../base/TMPanel';
@@ -22,6 +20,7 @@ import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+import TMToppyMessage from '../../../helper/TMToppyMessage';
 const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
@@ -329,7 +328,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.select?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOutputConfig, onChoose: handleChooseOutput }), showOrderByConfig &&
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.orderBy?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOrderByConfig, onChoose: handleChooseOrderBy })] })
                         :
-                            _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { title: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch, children: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch }) }), _jsx(StyledToppyImage, { src: Toppy, alt: 'Toppy' })] }), showSqdForm &&
+                            _jsx(TMToppyMessage, { message: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch, titleTooltip: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch }), showSqdForm &&
                         _jsx(StyledModalContainer, { style: { backgroundColor: `${TMColors.backgroundColorHeader}12` }, children: _jsx(TMSavedQueryForm, { height: '50%', width: '50%', id: formModeSqdForm === FormModes.Create ? -1 : SQD?.id, title: 'Ricerca rapida', formMode: formModeSqdForm, showBackButton: true, qd: qd, isAdvancedSearch: showAdvancedSearch, isModal: false, onClose: () => { setShowSqdForm(false); }, onSaved: onSqdSaved }) })] }), showDistinctValuesPanel &&
                 _jsx(TMDistinctValues, { isModal: true, tid: focusedTidMid?.tid, mid: focusedTidMid?.mid, separator: ',', onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
                         if (!e)

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

@@ -584,18 +584,17 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                     setIsOpenBatchUpdate(false);
                                     setIsModifiedBatchUpdate(false);
                                     await refreshSelectionDataRowsAsync();
-                                }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), (showToppyForApprove && !showApprovePopup && !showRejectPopup && !showReAssignPopup && !showMoreInfoPopup && !openS4TViewer && !showTodoDcmtForm) &&
-                                _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
-                                                setShowApprovePopup(true);
-                                            }, onSignApprove: () => {
-                                                handleSignApprove();
-                                            }, onReject: () => {
-                                                setShowRejectPopup(true);
-                                            }, onReAssign: () => {
-                                                setShowReAssignPopup(true);
-                                            }, onMoreInfo: () => {
-                                                setShowMoreInfoPopup(true);
-                                            }, approveDisable: selectedDocs.length === 0, signApproveDisable: disableSignApproveDisable, rejectDisable: selectedDocs.length === 0, reassignDisable: selectedDocs.length === 0, infoDisable: selectedDocs.length !== 1, dtd: fromDTD }) }) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {}), customButton && _jsx(TMCustomButton, { button: customButton, formData: currentMetadataValues, selectedItems: selectedItems, onClose: () => setCustomButton(undefined) }), showRelatedDcmtsChooser &&
+                                }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, usePortal: true, isVisible: showToppyForApprove && !showApprovePopup && !showRejectPopup && !showReAssignPopup && !showMoreInfoPopup && !openS4TViewer && !showTodoDcmtForm, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
+                                            setShowApprovePopup(true);
+                                        }, onSignApprove: () => {
+                                            handleSignApprove();
+                                        }, onReject: () => {
+                                            setShowRejectPopup(true);
+                                        }, onReAssign: () => {
+                                            setShowReAssignPopup(true);
+                                        }, onMoreInfo: () => {
+                                            setShowMoreInfoPopup(true);
+                                        }, approveDisable: selectedDocs.length === 0, signApproveDisable: disableSignApproveDisable, rejectDisable: selectedDocs.length === 0, reassignDisable: selectedDocs.length === 0, infoDisable: selectedDocs.length !== 1, dtd: fromDTD }) }) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {}), customButton && _jsx(TMCustomButton, { button: customButton, formData: currentMetadataValues, selectedItems: selectedItems, onClose: () => setCustomButton(undefined) }), showRelatedDcmtsChooser &&
                         _jsx(TMChooserForm, { dataSource: relatedDcmtsChooserDataSource, onChoose: async (selectedRelation) => {
                                 try {
                                     setShowRelatedDcmtsChooser(false);

package/lib/components/index.d.ts

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

package/lib/components/index.js

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

package/lib/helper/TMToppyMessage.js

@@ -34,9 +34,10 @@ const StyledToppyImage = styled.img `
     max-width: 120px;
     height: auto;
     display: block;
+    user-select: none;
 `;
 const TMToppyMessage = (props) => {
     const { message, titleTooltip } = props;
-    return (_jsxs(TMLayoutContainer, { gap: 30, alignItems: "center", justifyContent: "center", onContextMenu: (e) => e.preventDefault(), children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { title: titleTooltip || undefined, children: message }) }), _jsx(StyledToppyImage, { src: Toppy, alt: "Toppy" })] }));
+    return (_jsxs(TMLayoutContainer, { gap: 30, alignItems: "center", justifyContent: "center", onContextMenu: (e) => e.preventDefault(), children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { title: titleTooltip || undefined, children: message }) }), _jsx(StyledToppyImage, { src: Toppy, alt: "Toppy", draggable: false, onMouseDown: (e) => e.stopPropagation() })] }));
 };
 export default TMToppyMessage;

package/package.json

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

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { DeviceType } from '../../base/TMDeviceProvider';
-interface ToppyHelpCenterProps {
-    content?: React.ReactNode;
-    deviceType?: DeviceType;
-    usePortal?: boolean;
-    align?: 'right' | 'left';
-    initialIsCollapsed?: boolean;
-    onToppyImageClick?: () => void;
-}
-declare const ToppyHelpCenter: React.FC<ToppyHelpCenterProps>;
-export default ToppyHelpCenter;

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

@@ -1,173 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import styled, { keyframes, css } from 'styled-components';
-import Toppy from '../../../assets/Toppy-generico.png';
-import { DeviceType } from '../../base/TMDeviceProvider';
-const toppyEntrance = keyframes `
-  0% { right: -200px; opacity: 0; }
-  60% { opacity: 1; }
-  100% { right: 10px; opacity: 1; }
-`;
-const pulseAnimation = keyframes `
-  0% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-  100% { transform: scale(1); }
-`;
-const bounceAnimation = keyframes `
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(-5px);
-  }
-`;
-const wiggle = keyframes `
-  0% { transform: rotate(-5deg) scale(1.1); }
-  10% { transform: rotate(5deg) scale(0.95); }
-  20% { transform: rotate(-5deg) scale(1.1); }
-  30% { transform: rotate(5deg) scale(1.05); }
-  40% { transform: rotate(-5deg) scale(1); }
-  50% { transform: rotate(5deg) scale(0.96); }
-  60% { transform: rotate(-5deg) scale(1.15); }
-  70% { transform: rotate(5deg) scale(0.99); }
-  80% { transform: rotate(-5deg) scale(1.05); }
-  90% { transform: rotate(5deg) scale(1); }
-  100% { transform: rotate(-5deg) scale(1.08); }
-`;
-const ToppyContainer = styled.div `
-  position: ${({ $fixed }) => ($fixed ? 'fixed' : 'absolute')};
-  bottom: ${({ $isCollapsed, $isMobile }) => $isMobile ? '5px' : $isCollapsed ? '5px' : '-20px'};
-  ${({ $align, $isCollapsed }) => $align === 'left'
-    ? `left: ${$isCollapsed ? '5px' : '10px'}; right: auto;`
-    : `right: ${$isCollapsed ? '5px' : '10px'}; left: auto;`}
-  display: flex;
-  flex-direction: column-reverse; /* Il contenuto è sopra l'immagine */
-  align-items: ${({ $align }) => $align === 'left' ? 'flex-start' : 'flex-end'};
-  animation: ${({ $fixed }) => $fixed && css `${toppyEntrance} 0.5s cubic-bezier(0.23, 1, 0.32, 1)`};
-  z-index: ${({ $fixed }) => ($fixed ? 2147483647 : 10)};
-`;
-const ToppyImage = styled.img `
-  width: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '60px' : $isMobile ? '90px' : '120px'};
-  height: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '70px' : $isMobile ? '105px' : '140px'};
-  cursor: pointer;
-  object-fit: cover;
-  object-position: top center;
-  clip-path: inset(0 0 22% 0 round 10px);
-  transform: ${({ $isCollapsed, $align }) => $isCollapsed
-    ? 'none'
-    : $align === 'left'
-        ? 'rotate(20deg)'
-        : 'rotate(-20deg)'};
-
-  ${({ $isCollapsed }) => $isCollapsed &&
-    css `
-      /* animation: ${bounceAnimation} 2s infinite; */
-      /* animation: ${pulseAnimation} 2s infinite; */
-      animation: ${wiggle} 4s infinite;
-    `}
-`;
-const ToppyContent = styled.div `
-  margin-bottom: ${({ $isMobile, $align }) => $align === 'left'
-    ? '30px' // Spazio tra ToppyContent e ToppyImage
-    : $isMobile
-        ? '30px'
-        : '20px'};
-
-
-  display: ${props => (props.$isCollapsed ? 'none' : 'block')};
-  width: max-content;
-  max-width: 250px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 113, 188, 0.45) 0%,
-    rgba(27, 20, 100, 0.65) 100%
-  );
-  color: white;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid #FFFFFF;
-  opacity: ${props => (props.$isCollapsed ? 0 : 1)};
-  transform: ${props => (props.$isCollapsed ? 'translateY(20px)' : 'translateY(0)')};
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  pointer-events: ${props => (props.$isCollapsed ? 'none' : 'auto')};
-  position: relative; 
-
- ${({ $align, $isMobile }) => $align === 'left' &&
-    css `
-      position: absolute;
-      left: 50px;
-      right: auto;
-      bottom: 100%;
-      transform: translateY(-${$isMobile ? '10px' : '20px'}); 
-    `}
-
-  &::after {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: #FFFFFF transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 1;
-  }
-  
-  &::before {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: rgba(27, 20, 100, 0.65) transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 2;
-  }
-`;
-const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right', initialIsCollapsed, onToppyImageClick }) => {
-    const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
-    const [portalContainer, setPortalContainer] = useState(null);
-    useEffect(() => {
-        if (initialIsCollapsed === undefined && deviceType === DeviceType.MOBILE) {
-            setIsCollapsed(true);
-        }
-    }, [deviceType, initialIsCollapsed]);
-    useEffect(() => {
-        if (!usePortal)
-            return;
-        const portalRoot = document.createElement('div');
-        portalRoot.setAttribute('id', 'toppy-portal-root');
-        document.body.appendChild(portalRoot);
-        setPortalContainer(portalRoot);
-        return () => {
-            document.body.removeChild(portalRoot);
-        };
-    }, [usePortal]);
-    const toggleCollapse = (e) => {
-        e.stopPropagation();
-        setIsCollapsed(!isCollapsed);
-        onToppyImageClick?.();
-    };
-    const isMobile = deviceType === DeviceType.MOBILE;
-    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, onContextMenu: (e) => e.preventDefault(), children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
-    if (usePortal) {
-        if (!portalContainer)
-            return null;
-        return ReactDOM.createPortal(toppyComponent, portalContainer);
-    }
-    return toppyComponent;
-};
-export default ToppyHelpCenter;