@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,482 +0,0 @@
-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
- */
-const ToppyButton = 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',
-    },
-})) `
-  /* Visibilità controllata dalla prop */
-  display: ${(props) => (props.$isVisible ? 'flex' : 'none')};
-  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: ${props.$isMobile ? (props.$isCollapsed ? '-20px' : '-50px') : '-20px'};
-        ${props.$align === 'left' ? 'left: 10px;' : 'right: 10px;'};
-      `
-    : ''}
-
-  /* Z-index alto per assicurare che sia sempre in primo piano */
-  z-index: 2147483647;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  outline: none;
-
-  /* Dimensioni dinamiche in base allo stato collassato e al tipo di dispositivo
-     Usa min() per adattarsi su schermi piccoli */
-  width: ${(props) => {
-    return props.$isCollapsed ? 'min(60px, 100%)' : '120px';
-}};
-  height: ${(props) => {
-    return props.$isCollapsed ? 'min(70px, 100%)' : '140px';
-}};
-  max-width: 100%;
-  max-height: 100%;
-
-  user-select: none;
-
-  img {
-    /* Dimensioni dell'immagine in base allo stato collassato e al tipo di dispositivo */
-    width: ${(props) => props.$isCollapsed ? (props.$isMobile ? '40px' : '60px') : (props.$isMobile ? '80px' : '120px')};
-    height: ${(props) => props.$isCollapsed ? (props.$isMobile ? '40px' : '60px') : (props.$isMobile ? '100px' : '140px')};
-    pointer-events: ${(props) => (props.$isMobile ? 'auto' : 'none')};
-    border-radius: 50%; /* Rende l'immagine circolare */
-    /* Rotazione leggera in base all'allineamento */
-    transform: ${(props) => props.$isCollapsed
-    ? 'rotate(0deg)'
-    : props.$align === 'left' ? 'rotate(20deg)' : 'rotate(-20deg)'};
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-
-    /* Animazione di pulsazione quando è collassato per attirare l'attenzione */
-    ${(props) => props.$isCollapsed && `animation: toppyPulse 1.5s infinite;`}
-  }
-
-  /* Keyframes per l'animazione di pulsazione */
-  @keyframes toppyPulse {
-    0% {
-      /* Dimensione normale all'inizio */
-      transform: scale(1) rotate(0deg);
-      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
-    }
-    50% {
-      /* Ingrandimento e glow al 50% dell'animazione */
-      transform: scale(1.1) rotate(0deg);
-      box-shadow: 0 0 15px 5px rgba(0, 113, 188, 0.6);
-    }
-    100% {
-      /* Ritorno alla dimensione normale */
-      transform: scale(1) rotate(0deg);
-      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
-    }
-  }
-`;
-/**
- * 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;
-`;
-/**
- * Componente ToppyDraggableHelpCenter
- *
- * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
- * 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, usePortal = false, }) => {
-    // Configurazione del layout e dei limiti di posizionamento di Toppy
-    const LAYOUT_CONFIG = {
-        bottomOffsetDesktop: 20, // Quanto Toppy può uscire dal bordo inferiore su desktop
-        bottomOffsetMobileCollapsed: 20, // Quanto Toppy può uscire dal bordo inferiore su mobile quando è collassato
-        bottomOffsetMobileExpanded: 50, // Quanto Toppy può uscire dal bordo inferiore su mobile quando è espanso
-        buttonOffset: 8, // Spazio extra per i bottoni posizionati a -8px (ExpandButton, CloseButton)
-        closeButtonOffset: 8, // Offset dei bottoni che sporgono dalla bubble (CloseButton sulla bubble)
-        bubbleBuffer: 5, // Buffer di sicurezza per evitare sovrapposizioni con la bubble
-        minTopOffset: 8 // Limite minimo dall'alto per evitare che i bottoni superiori escano
-    };
-    // Ref per il contenitore principale
-    const buttonRef = useRef(null);
-    // Stato per controllare se il componente è collassato o espanso
-    const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
-    // Stato per tracciare se il componente è in fase di trascinamento
-    const [isDragging, setIsDragging] = useState(false);
-    // Posizione corrente del componente (null = posizione di default)
-    const [position, setPosition] = useState(null);
-    // Offset del mouse rispetto all'angolo superiore sinistro del componente durante il drag
-    const dragOffset = useRef({ x: 0, y: 0 });
-    // 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
-     * o lo stato di collassamento. Necessario per calcolare correttamente i limiti
-     * di trascinamento.
-     */
-    useEffect(() => {
-        if (bubbleRef.current) {
-            const rect = bubbleRef.current.getBoundingClientRect();
-            setBubbleSize({ width: rect.width, height: rect.height });
-        }
-    }, [content, isCollapsed]);
-    /**
-     * Effect per verificare e aggiustare la posizione quando cambia lo stato di collassamento
-     */
-    useEffect(() => {
-        if (!buttonRef.current || !position)
-            return;
-        const rect = buttonRef.current.getBoundingClientRect();
-        // Spazio extra occupato dalla bubble quando non è collassato
-        const extraHeight = !isCollapsed ? bubbleSize.height + LAYOUT_CONFIG.closeButtonOffset : 0;
-        const extraWidth = !isCollapsed ? bubbleSize.width + LAYOUT_CONFIG.closeButtonOffset : 0;
-        let minX = 0;
-        let maxX;
-        let maxY;
-        const minY = LAYOUT_CONFIG.minTopOffset;
-        if (usePortal) {
-            // Calcola i limiti usando le dimensioni del viewport
-            maxX = window.innerWidth - rect.width - LAYOUT_CONFIG.buttonOffset;
-            maxY = window.innerHeight - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
-        }
-        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 - LAYOUT_CONFIG.buttonOffset;
-            maxY = parentRect.height - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
-        }
-        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 < Math.max(minY, extraHeight + LAYOUT_CONFIG.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(Math.max(minY, extraHeight + LAYOUT_CONFIG.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;
-        const handleResize = () => {
-            if (!buttonRef.current || !position)
-                return;
-            const rect = buttonRef.current.getBoundingClientRect();
-            // Spazio extra occupato dalla bubble quando non è collassato
-            const extraHeight = !isCollapsed ? bubbleSize.height + LAYOUT_CONFIG.closeButtonOffset : 0;
-            const extraWidth = !isCollapsed ? bubbleSize.width + LAYOUT_CONFIG.closeButtonOffset : 0;
-            let minX = 0;
-            let maxX;
-            let maxY;
-            const minY = LAYOUT_CONFIG.minTopOffset;
-            if (usePortal) {
-                maxX = window.innerWidth - rect.width - LAYOUT_CONFIG.buttonOffset;
-                maxY = window.innerHeight - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
-            }
-            else {
-                const parent = buttonRef.current.offsetParent;
-                if (!parent)
-                    return;
-                const parentRect = parent.getBoundingClientRect();
-                maxX = parentRect.width - rect.width - LAYOUT_CONFIG.buttonOffset;
-                maxY = parentRect.height - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
-            }
-            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);
-                }
-            }
-            const isOutOfBounds = position.x < minX ||
-                position.x > maxX ||
-                position.y < Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer) ||
-                position.y > maxY;
-            if (isOutOfBounds) {
-                setPosition(null);
-            }
-        };
-        // 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();
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [position, isCollapsed, bubbleSize, align, usePortal]);
-    /**
-     * Effect per impostare automaticamente lo stato collassato su dispositivi mobile
-     * se non è stato specificato un valore iniziale.
-     */
-    useEffect(() => {
-        if (initialIsCollapsed === undefined && deviceType === DeviceType.MOBILE) {
-            setIsCollapsed(true);
-        }
-    }, [deviceType, initialIsCollapsed]);
-    /**
-     * Gestisce il toggle dello stato collassato/espanso
-     * Chiamato dal doppio click sul componente
-     */
-    const toggleCollapse = (e) => {
-        e?.stopPropagation();
-        setIsCollapsed(!isCollapsed);
-        onToppyImageClick?.();
-    };
-    /**
-     * Gestisce l'inizio del trascinamento
-     * Salva la posizione relativa del mouse rispetto al componente (offset)
-     * per mantenere il punto di presa durante il trascinamento
-     */
-    const handleMouseDown = (e) => {
-        if (!buttonRef.current)
-            return;
-        const rect = buttonRef.current.getBoundingClientRect();
-        // Calcola l'offset tra il punto di click e l'angolo superiore sinistro del componente
-        dragOffset.current = {
-            x: e.clientX - rect.left,
-            y: e.clientY - rect.top,
-        };
-        setIsDragging(true);
-        e.preventDefault();
-    };
-    /**
-     * Gestisce l'inizio del trascinamento per eventi touch
-     */
-    const handleTouchStart = (e) => {
-        if (!buttonRef.current)
-            return;
-        const touch = e.touches[0];
-        const rect = buttonRef.current.getBoundingClientRect();
-        // Calcola l'offset tra il punto di touch e l'angolo superiore sinistro del componente
-        dragOffset.current = {
-            x: touch.clientX - rect.left,
-            y: touch.clientY - rect.top,
-        };
-        setIsDragging(true);
-        e.preventDefault();
-    };
-    /**
-     * Gestisce il movimento durante il trascinamento
-     * 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;
-        // 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;
-        const rect = buttonRef.current.getBoundingClientRect();
-        // Spazio extra occupato dalla bubble quando non è collassato
-        const extraHeight = !isCollapsed ? bubbleSize.height + LAYOUT_CONFIG.closeButtonOffset : 0;
-        const extraWidth = !isCollapsed ? bubbleSize.width + LAYOUT_CONFIG.closeButtonOffset : 0;
-        let minX = 0;
-        let maxX;
-        let maxY;
-        let newX;
-        let newY;
-        const minY = LAYOUT_CONFIG.minTopOffset;
-        if (usePortal) {
-            // Calcola i limiti usando il viewport
-            maxX = window.innerWidth - rect.width - LAYOUT_CONFIG.buttonOffset;
-            maxY = window.innerHeight - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
-            if (!isCollapsed) {
-                if (align === 'right') {
-                    minX = Math.max(0, extraWidth - rect.width);
-                }
-                else {
-                    maxX = Math.min(maxX, window.innerWidth - extraWidth);
-                }
-            }
-            newX = Math.max(minX, Math.min(clientX - dragOffset.current.x, maxX));
-            newY = Math.max(Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer), Math.min(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 - LAYOUT_CONFIG.buttonOffset;
-            maxY = parentRect.height - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
-            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(clientX - parentRect.left - dragOffset.current.x, maxX));
-            newY = Math.max(Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer), Math.min(clientY - parentRect.top - dragOffset.current.y, maxY));
-        }
-        setPosition({ x: newX, y: newY });
-    };
-    /**
-     * Gestisce il rilascio del mouse alla fine del trascinamento
-     * Se il movimento è stato minimo (< 5px), viene interpretato come un click
-     * e viene chiamato il callback onToppyImageClick
-     */
-    const handleMouseUp = (e) => {
-        if (isDragging) {
-            setIsDragging(false);
-            // Estrae le coordinate dal tipo di evento appropriato
-            const clientX = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;
-            const clientY = 'changedTouches' in e ? e.changedTouches[0].clientY : e.clientY;
-            const rect = buttonRef.current?.getBoundingClientRect();
-            if (rect) {
-                // Calcola la distanza totale del movimento usando il teorema di Pitagora
-                const moveDistance = Math.hypot(clientX - (rect.left + dragOffset.current.x), clientY - (rect.top + dragOffset.current.y));
-                // Se il movimento è stato minimo, trattalo come un click
-                if (moveDistance < 5 && onToppyImageClick) {
-                    onToppyImageClick();
-                }
-            }
-        }
-    };
-    /**
-     * Effect per gestire gli event listener durante il trascinamento
-     * Gli eventi sono registrati sul document per catturare il movimento
-     * anche quando il mouse o il touch esce dal componente
-     */
-    useEffect(() => {
-        if (isDragging) {
-            // Eventi mouse per desktop
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-            // Eventi touch per mobile
-            document.addEventListener('touchmove', handleMouseMove);
-            document.addEventListener('touchend', handleMouseUp);
-            return () => {
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleMouseUp);
-                document.removeEventListener('touchmove', handleMouseMove);
-                document.removeEventListener('touchend', handleMouseUp);
-            };
-        }
-        return undefined;
-    }, [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, onTouchStart: isMobile ? handleTouchStart : 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 })] })] }));
-    // 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

@@ -1,9 +0,0 @@
-import React from 'react';
-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,117 +0,0 @@
-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 { IconWindowMinimize } from '../../../helper/TMIcons';
-// Styled component
-const Bubble = styled.div `
-  position: absolute;
-  bottom: 145px;
-  ${({ $align }) => ($align === 'left' ? 'left: 0px;' : 'right: 0px;')}
-  width: max-content;
-  padding: 10px;
-  background: linear-gradient(180deg, rgba(0, 113, 188, 0.45) 0%,rgba(27, 20, 100, 0.65) 100%);
-  border-radius: 18px;
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
-  font-size: 14px;
-  line-height: 1.4;
-  color: #333;
-  z-index: 10000;
-
-  &::after {
-    transform: ${({ $align }) => ($align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)')};
-    content: "";
-    position: absolute;
-    top: 100%;
-    ${({ $align }) => ($align === 'left' ? 'left: 20px;' : 'right: 15px;')}
-    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: 15px;')}
-    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 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, 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(IconWindowMinimize, {}) })), children] }));
-});
-export default ToppySpeechBubble;

package/lib/components/features/blog/TMBlogCommentForm.d.ts

@@ -1,19 +0,0 @@
-import { BlogPost, UserDescriptor } from "@topconsultnpm/sdk-ts";
-import { FileItem } from '../../base/TMFileManagerUtils';
-import { TMBlogContextDescriptor } from '../../grids/TMBlogsPostUtils';
-interface TMBlogCommentFormProps {
-    context: TMBlogContextDescriptor;
-    participants: Array<UserDescriptor>;
-    onClose: () => void;
-    showAttachmentsSection?: boolean;
-    removeAndEditAttachment?: boolean;
-    selectedAttachments?: Array<FileItem>;
-    selectedAttachmentDid?: Array<number>;
-    allFileItems?: FileItem;
-    allArchivedDocumentsFileItems?: Array<FileItem>;
-    onFilterCreated?: (predicate: (post: BlogPost) => boolean) => void;
-    refreshCallback?: () => Promise<void>;
-    isCommentRequired?: boolean;
-}
-declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
-export default TMBlogCommentForm;