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

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

@@ -5,6 +5,8 @@ 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
@@ -107,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
@@ -141,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
@@ -386,7 +430,29 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     }, [isDragging]);
     // Renderizza l'overlay solo durante il drag
     const renderDragOverlay = isDragging && _jsx(DragOverlay, {});
-    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 })), _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;
 };

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+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;
@@ -63,25 +64,8 @@ const CloseButton = styled.button `
   justify-content: center;
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   z-index: 10001;
-  
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    width: 11px;
-    height: 2px;
-    background: white;
-    border-radius: 2px;
-    transition: all 0.3s ease;
-  }
-  
-  &::before {
-    transform: rotate(45deg);
-  }
-  
-  &::after {
-    transform: rotate(-45deg);
-  }
+  color: white;
+  font-size: 14px;
   
   &:hover {
     background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
@@ -90,7 +74,7 @@ const CloseButton = styled.button `
   }
   
   &:active {
-    transform: rotate(90deg) scale(0.95);
+    transform: scale(0.95);
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
   }
   
@@ -101,6 +85,33 @@ const CloseButton = styled.button `
 `;
 // Componente con forwardRef
 const ToppySpeechBubble = forwardRef(({ align = 'right', children, className, onClose }, ref) => {
-    return (_jsxs(Bubble, { ref: ref, "$align": align, className: className, children: [onClose && (_jsx(CloseButton, { onClick: onClose, "aria-label": SDKUI_Localizator.Close, title: SDKUI_Localizator.Close, type: "button" })), children] }));
+    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/package.json

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