@topconsultnpm/sdkui-react 6.19.0-dev2.5 → 6.19.0-dev2.50

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

@@ -0,0 +1,324 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Toppy from '../../../assets/Toppy-generico.png';
+import { DeviceType } from '../../base/TMDeviceProvider';
+import ToppySpeechBubble from './ToppySpeechBubble';
+/**
+ * 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: absolute;
+
+  /* Posizionamento di default quando non è draggato (x e y non sono definiti) */
+  ${(props) => props.$x === undefined || props.$y === undefined
+    ? `
+        bottom: ${props.$isMobile ? '0px' : '-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) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? 'min(40px, 100%)' : '80px';
+    }
+    return props.$isCollapsed ? 'min(60px, 100%)' : '120px';
+}};
+  height: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? 'min(45px, 100%)' : '95px';
+    }
+    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) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? '40px' : '80px';
+    }
+    return props.$isCollapsed ? '60px' : '120px';
+}};
+    height: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? '40px' : '95px';
+    }
+    return props.$isCollapsed ? '60px' : '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);
+    }
+  }
+`;
+/**
+ * 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, }) => {
+    // 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 });
+    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 resettare la posizione quando il parent o la finestra vengono ridimensionati.
+     * Questo previene che il componente finisca fuori dai bordi dopo un resize.
+     */
+    useEffect(() => {
+        if (!buttonRef.current)
+            return;
+        const parent = buttonRef.current.offsetParent;
+        if (!parent)
+            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;
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, parentRect.width - 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
+        window.addEventListener('resize', handleResize);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [position, isCollapsed, bubbleSize, align]);
+    /**
+     * 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();
+        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,
+            y: e.clientY - rect.top,
+        };
+        setIsDragging(true);
+        e.preventDefault();
+    };
+    /**
+     * Gestisce il movimento durante il trascinamento
+     * Calcola la nuova posizione rispettando i limiti del parent container
+     * 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);
+            }
+            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);
+            }
+        }
+        // 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 });
+    };
+    /**
+     * 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);
+            const rect = buttonRef.current?.getBoundingClientRect();
+            if (rect) {
+                // Calcola la distanza totale del movimento usando il teorema di Pitagora
+                const moveDistance = Math.hypot(e.clientX - (rect.left + dragOffset.current.x), e.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 esce dal componente
+     */
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return undefined;
+    }, [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 })] })] }));
+};
+export default ToppyDraggableHelpCenter;

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

@@ -162,7 +162,7 @@ const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right
         onToppyImageClick?.();
     };
     const isMobile = deviceType === DeviceType.MOBILE;
-    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, 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 })] }));
+    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;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ToppySpeechBubbleProps {
+    align?: 'left' | 'right';
+    children: React.ReactNode;
+    className?: string;
+}
+declare const ToppySpeechBubble: React.ForwardRefExoticComponent<ToppySpeechBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export default ToppySpeechBubble;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+// 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;
+  }
+`;
+// Componente con forwardRef
+const ToppySpeechBubble = forwardRef(({ align = 'right', children, className }, ref) => {
+    return (_jsx(Bubble, { ref: ref, "$align": align, className: className, children: children }));
+});
+export default ToppySpeechBubble;

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

@@ -6,12 +6,14 @@ interface TMBlogCommentFormProps {
     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;

package/lib/components/features/blog/TMBlogCommentForm.js

@@ -29,7 +29,7 @@ const getNonDirectoryFiles = (items, exclude) => {
 };
 const TMBlogCommentForm = (props) => {
     const maxLength = 1000;
-    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, context, showAttachmentsSection = true, onFilterCreated, refreshCallback } = props;
+    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, context, showAttachmentsSection = true, removeAndEditAttachment = true, onFilterCreated, refreshCallback, isCommentRequired = false } = props;
     // Initialize state with combined array
     const [dataSource, setDataSource] = useState(() => [...getNonDirectoryFiles(allFileItems?.items || [], []), ...allArchivedDocumentsFileItems]);
     const [isEditorEnabled, setIsEditorEnabled] = useState(true);
@@ -216,8 +216,20 @@ const TMBlogCommentForm = (props) => {
         // Update the state with selected draft items
         setCurrentDraftAttachments(selectedDraftItems);
     };
-    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: showAttachmentsSection ? "calc(100% - 60px)" : "100%" }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
-                                        width: 'calc(100% - 60px)',
+    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, showCloseButton: isCommentRequired ? false : true, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: showAttachmentsSection ? `calc(100% - 60px)` : '100%' }, children: [isCommentRequired && _jsx("div", { style: {
+                                        padding: '10px',
+                                        width: '100%',
+                                        height: '30px',
+                                        backgroundColor: '#e8f5e9',
+                                        border: '1px solid #81c784',
+                                        borderRadius: '4px',
+                                        fontSize: '13px',
+                                        marginBottom: '10px',
+                                        color: '#2e7d32',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                    }, children: SDKUI_Localizator.InsertCommentToCompleteOperation }), _jsx("div", { style: { width: "100%", height: isCommentRequired ? `calc(100% - 40px)` : '100%' }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) })] }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
+                                        width: `calc(100% - ${removeAndEditAttachment ? 60 : 0}px)`,
                                         overflowX: 'auto',
                                         whiteSpace: 'nowrap',
                                         height: '50px',
@@ -231,7 +243,7 @@ const TMBlogCommentForm = (props) => {
                                         const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", draft.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", draft.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", draft.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(draft.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.lastUpdateTime)] })] }));
                                         return _jsxs("div", { style: {
                                                 display: 'inline-flex',
-                                                alignItems: 'center', // <-- this centers content vertically
+                                                alignItems: 'center',
                                                 padding: '4px 8px',
                                                 margin: '4px',
                                                 border: '1px solid #ddd',
@@ -258,7 +270,7 @@ const TMBlogCommentForm = (props) => {
                                                         fontWeight: 'bold',
                                                         marginRight: '8px',
                                                         boxShadow: '1px 1px 2px #00000020',
-                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) })), _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
+                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) })), removeAndEditAttachment && _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
                                                             display: 'inline-flex',
                                                             width: '20px',
                                                             height: '20px',
@@ -270,7 +282,7 @@ const TMBlogCommentForm = (props) => {
                                                             cursor: 'pointer',
                                                             boxShadow: '1px 1px 2px #00000020',
                                                         }, children: _jsx("span", { style: { fontSize: '15px' }, children: "\u00D7" }) }) })] }, draft.did);
-                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + currentDraftAttachments.length, children: _jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx("i", { className: "dx-icon-attach", style: {
+                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), removeAndEditAttachment && _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + currentDraftAttachments.length, children: _jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx("i", { className: "dx-icon-attach", style: {
                                                     width: '50px',
                                                     height: '50px',
                                                     marginLeft: '10px',

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

@@ -57,7 +57,7 @@ const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, se
                                     isRefreshEnabled: true,
                                     isRestoreEnabled: true,
                                     isCreateContextualTask: false
-                                }, externalBlogPost: externalBlogPost, resetExternalBlogPost: resetExternalBlogPost, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }) }) }), (showCommentForm && tid && did) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid, did } }, onClose: () => setShowCommentForm(false), refreshCallback: refreshCallback, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [], onFilterCreated: handleFilterCreated })] }));
+                                }, externalBlogPost: externalBlogPost, resetExternalBlogPost: resetExternalBlogPost, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, afterTaskSaved: refreshCallback }) }) }) }), (showCommentForm && tid && did) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid, did } }, onClose: () => setShowCommentForm(false), refreshCallback: refreshCallback, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [], onFilterCreated: handleFilterCreated })] }));
 };
 export default TMDcmtBlog;
 const StyledContainer = styled.div ` user-select: none; overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;