@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/editors/TMTextExpression.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
+import { IconClear, IconColumns, IconDataList, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
+import TMChooserForm from '../forms/TMChooserForm';
+import TMTextBox from './TMTextBox';
+import TMTextArea from './TMTextArea';
+const TMTextExpression = (props) => {
+    const [metadatas_Info_Source, setMetadatas_Info_Source] = useState([]);
+    const [showMetadataChooser, setShowMetadataChooser] = useState(false);
+    const [showFormulaChooser, setShowFormulaChooser] = useState(false);
+    useEffect(() => { MetadataInfos_Source_Get_Async(); }, [props.qd]);
+    useEffect(() => { MetadataInfos_Source_GetByTID_Async(); }, [props.tid]);
+    async function MetadataInfos_Source_Get_Async() {
+        if (!props.qd?.select)
+            return;
+        let mhs_source = [];
+        try {
+            let dtd_source;
+            let md_source;
+            let tid_source = -1;
+            let si;
+            let sis = props.qd?.select?.slice();
+            sis = sis.slice().sort((a, b) => a.tid - b.tid);
+            for (si of sis) {
+                if (si.tid == undefined || si.mid == undefined)
+                    continue;
+                if (tid_source != si.tid) {
+                    dtd_source = await DcmtTypeListCacheService.GetAsync(si.tid, true);
+                    if (dtd_source == undefined)
+                        continue;
+                    tid_source = si.tid;
+                }
+                if (dtd_source?.metadata == undefined)
+                    continue;
+                md_source = dtd_source.metadata.find(o => o.id == si.mid);
+                if (md_source?.name == undefined)
+                    continue;
+                if (tid_source == undefined)
+                    continue;
+                mhs_source.push(new MetatadaHelper(si.mid, md_source.name));
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_Get_Async' });
+        }
+        setMetadatas_Info_Source(mhs_source);
+    }
+    async function MetadataInfos_Source_GetByTID_Async() {
+        if (!props.tid)
+            return;
+        let mhs_source = [];
+        try {
+            let dtd_source = await DcmtTypeListCacheService.GetAsync(props.tid, true);
+            if (dtd_source == undefined)
+                return;
+            if (dtd_source?.metadata == undefined)
+                return;
+            for (let md_source of dtd_source?.metadata) {
+                if (md_source?.name == undefined)
+                    continue;
+                if (md_source?.id == undefined)
+                    continue;
+                mhs_source.push(new MetatadaHelper(md_source.id, md_source.name));
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_GetByTID_Async' });
+        }
+        setMetadatas_Info_Source(mhs_source);
+    }
+    function Expression_IDs2Names(expression) {
+        if (expression == undefined)
+            return expression;
+        let temp = expression.slice();
+        let mh;
+        for (mh of metadatas_Info_Source) {
+            temp = temp.replaceAll(`{@${mh.Mid}}`, `{@${mh.MetadataName}}`);
+        }
+        temp = temp.replaceAll("{@1}", "{@DID}");
+        return temp;
+    }
+    function Expression_Names2IDs(expression) {
+        if (expression == undefined)
+            return expression;
+        let temp = expression.slice();
+        let mh;
+        for (mh of metadatas_Info_Source)
+            temp = temp.replaceAll(`{@${mh.MetadataName}}`, `{@${mh.Mid}}`);
+        temp = temp.replaceAll("{@DID}", "{@1}");
+        return temp;
+    }
+    const renderButtons = () => {
+        let buttons = [];
+        if (props.qd || props.tid)
+            buttons.push({ icon: _jsx(IconColumns, {}), text: SDKUI_Localizator.MetadataReferenceInsert, onClick: () => { setShowMetadataChooser(true); } });
+        if (props.formulaItems && props.formulaItems.length > 0)
+            buttons.push({ icon: _jsx(IconDataList, {}), text: SDKUI_Localizator.Parameters, onClick: () => setShowFormulaChooser(true) });
+        buttons.push({ icon: _jsx(IconClear, {}), text: SDKUI_Localizator.Clear, onClick: () => props.onValueChanged?.('') });
+        return buttons;
+    };
+    function mdList(tids_mids) {
+        let output = props.value ?? '';
+        if (tids_mids == undefined)
+            return output;
+        let isAll = (tids_mids.length == props.qd?.select?.length);
+        if (isAll)
+            output = '';
+        for (let si of tids_mids) {
+            if (si.tid == undefined)
+                continue;
+            if (si.mid == undefined)
+                continue;
+            if (stringIsNullOrEmpty(output))
+                output = `{@${si.mid}}`;
+            else
+                output += (isAll ? '_' : '') + `{@${si.mid}}`;
+        }
+        return output;
+    }
+    function getFormulaDataSorce() {
+        let fiarray = [];
+        if (!props.formulaItems)
+            return [];
+        let i = 0;
+        for (const f of props.formulaItems) {
+            let fi = new FormulaItemHelper();
+            fi.id = i;
+            fi.paramName = f;
+            fiarray.push(fi);
+            i++;
+        }
+        return fiarray;
+    }
+    const openMetadataChooseForm = () => {
+        return (showMetadataChooser ?
+            _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, qd: props.qd, tids: props.tid ? [props.tid] : undefined, qdShowOnlySelectItems: true, allowSysMetadata: true, onClose: () => setShowMetadataChooser(false), onChoose: (tid_mid) => {
+                    let list = mdList(tid_mid);
+                    props.onValueChanged?.(list);
+                } }) : _jsx(_Fragment, {}));
+    };
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'paramName', caption: props.captionColumnChooser ?? SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+        ];
+    }, []);
+    const openFormulaChooseForm = () => {
+        return (showFormulaChooser ?
+            _jsx(TMChooserForm, { title: props.titleChooser ?? SDKUI_Localizator.Parameters, height: props.higthChooser ?? '350', width: props.widthChooser ?? '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: props.disableMultipleSelection !== true, columns: dataColumns, dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaChooser(false); }, onChoose: (IDs) => {
+                    let expr = props.value ?? '';
+                    IDs.map(i => expr += props.formulaItems[i]);
+                    props.onValueChanged?.(expr);
+                } }) : _jsx(_Fragment, {}));
+    };
+    return (_jsxs(_Fragment, { children: [props.rows === undefined ?
+                _jsx(TMTextBox, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } })
+                :
+                    _jsx(TMTextArea, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " ", openFormulaChooseForm()] }));
+};
+class MetatadaHelper {
+    constructor(mid, metadataName) {
+        this.Mid = mid;
+        this.MetadataName = metadataName;
+    }
+}
+export class FormulaItemHelper {
+    constructor() {
+        this.id = 0;
+        this.paramName = '';
+    }
+}
+export default TMTextExpression;

package/lib/components/editors/TMTreeDropDown.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+interface TMTreeDropDownProps {
+    dataSource: Array<{
+        id: number;
+        label: string;
+        value: string;
+        categoryId?: number;
+        expanded?: boolean;
+        tooltipContent?: ReactNode;
+    }>;
+    values: Array<number>;
+    setValues: React.Dispatch<React.SetStateAction<Array<number>>>;
+    displayExpr: boolean;
+    isValidKey?: (key: number) => boolean;
+    elementStyle?: React.CSSProperties;
+}
+declare const TMTreeDropDown: (props: TMTreeDropDownProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTreeDropDown;

package/lib/components/editors/TMTreeDropDown.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import DropDownBox from 'devextreme-react/drop-down-box';
+import TreeView from 'devextreme-react/tree-view';
+import { SDKUI_Localizator } from '../../helper';
+import TMTooltip from '../base/TMTooltip';
+import { SDK_Localizator } from '@topconsultnpm/sdk-ts';
+// The TMTreeDropDown functional component
+const TMTreeDropDown = (props) => {
+    // Destructure props for easy access
+    const { dataSource, values, setValues, displayExpr, isValidKey, elementStyle } = props;
+    // Reference to the TreeView component for programmatic control
+    const treeViewRef = useRef(null);
+    // Helper function to get a comma-separated string of labels for the selected IDs
+    const getLabelsByIds = (ids, outputFormat) => {
+        if (ids.length === 0)
+            return _jsx("p", { children: SDKUI_Localizator.SelectDesiredFilters });
+        const filteredLabels = dataSource.filter(item => ids.includes(item.id));
+        if (outputFormat === 'text') {
+            const labels = filteredLabels.map(item => item.label).join(', ');
+            return _jsx("p", { children: labels });
+        }
+        return (_jsx("div", { style: { textAlign: 'left' }, children: filteredLabels.map(item => (_jsx("p", { children: item.label }, item.id))) }));
+    };
+    // Synchronizes the selection in the TreeView when the dropdown value changes
+    const syncTreeViewSelection = useCallback((e) => {
+        setTimeout(() => {
+            const treeView = (e.component.selectItem && e.component) || (treeViewRef.current && treeViewRef.current.instance());
+            if (treeView) {
+                // If the value is null, unselect all items in the tree view
+                if (e.value === null) {
+                    treeView.unselectAll();
+                }
+                else {
+                    // Otherwise, select the items corresponding to the selected values
+                    const treeValues = e.value || values;
+                    treeValues && treeValues.forEach((value) => { treeView.selectItem(value); });
+                }
+            }
+            // Update the selected values in the state if the event contains a value
+            if (e.value !== undefined) {
+                setValues(e.value);
+            }
+        });
+    }, [values]); // Dependency on 'values' state to update selection
+    // Event handler for when item selection changes in the TreeView
+    const treeViewItemSelectionChanged = useCallback((e) => {
+        // Get the selected node keys (IDs) from the TreeView
+        const selectedKeys = e.component.getSelectedNodeKeys();
+        let filteredKeys = selectedKeys;
+        if (isValidKey)
+            filteredKeys = selectedKeys.filter(isValidKey); // If a validation function is provided, filter the selected keys
+        setValues(filteredKeys);
+    }, []);
+    const displayValueFormatter = useCallback((value) => {
+        if (displayExpr)
+            return value.toString();
+        return SDK_Localizator.Filters + " (" + value.length + " " + SDKUI_Localizator.Applied + ")";
+    }, []);
+    const renderTreeViewItem = (item) => {
+        // Customize how tree view items are rendered with a tooltip
+        return (item.tooltipContent ? _jsx(TMTooltip, { content: item.tooltipContent, children: item.label }) : item.label);
+    };
+    return _jsx(TMTooltip, { content: getLabelsByIds(values, 'formatted'), children: _jsx(DropDownBox, { style: { minWidth: "230px", ...(elementStyle || {}), ...(elementStyle?.minWidth ? {} : { width: "230px" }) }, valueExpr: "id", displayExpr: "label", displayValueFormatter: displayValueFormatter, value: values, dataSource: dataSource, placeholder: SDKUI_Localizator.SelectDesiredFilters, onContentReady: syncTreeViewSelection, focusStateEnabled: true, contentRender: () => _jsx(TreeView, { ref: treeViewRef, keyExpr: "id", dataSource: dataSource, selectByClick: true, selectNodesRecursive: true, selectionMode: "multiple", displayExpr: "label", parentIdExpr: "categoryId", dataStructure: "plain", showCheckBoxesMode: "normal", onContentReady: syncTreeViewSelection, onItemSelectionChanged: (e) => treeViewItemSelectionChanged(e), itemRender: renderTreeViewItem }) }) });
+};
+export default TMTreeDropDown;

package/lib/components/features/archive/TMArchive.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface ITMArchiveProps {
+    inputFile?: File | null;
+    inputMids?: Array<{
+        mid: number;
+        value: string;
+    }>;
+    inputTID?: number;
+    onDcmtTypeSelect?: (tid: number | undefined) => void;
+    connectorFileSave?: () => Promise<File>;
+    onSavedAsyncCallback?: (tid: number | undefined, did: number | undefined) => Promise<void>;
+    enableDragDropOverlay?: boolean;
+    passToSearch?: (tid: number | undefined, outputMids: Array<{
+        mid: number;
+        value: string;
+    }>) => void;
+}
+declare const TMArchive: React.FunctionComponent<ITMArchiveProps>;
+export default TMArchive;

package/lib/components/features/archive/TMArchive.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import Logo from '../../../assets/Toppy-generico.png';
+import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid } from '../../../helper';
+import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
+import TMLayoutContainer from '../../base/TMLayout';
+import TMRecentsManager from '../../grids/TMRecentsManager';
+import TMDcmtForm from '../documents/TMDcmtForm';
+import { StyledToppyTextContainer, StyledToppyText, StyledToppyImage } from '../search/TMSearchQueryPanel';
+import TMTreeSelector from '../search/TMTreeSelector';
+import TMPanel from '../../base/TMPanel';
+import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
+const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false, passToSearch }) => {
+    const [currentTID, setCurrentTID] = useState(inputTID ?? 0);
+    const [mruTIDs, setMruTIDs] = useState([]);
+    const [currentMruTID, setCurrentMruTID] = useState(0);
+    const [fromDTD, setFromDTD] = useState();
+    const deviceType = useDeviceType();
+    useEffect(() => { setMruTIDs(SDKUI_Globals.userSettings.archivingSettings.mruTIDs); }, []);
+    useEffect(() => {
+        if (!inputTID)
+            return;
+        setCurrentTID(inputTID);
+        setCurrentMruTID(mruTIDs.includes(inputTID) ? inputTID : 0);
+    }, [inputTID]);
+    useEffect(() => {
+        if (!currentTID || currentTID <= 0) {
+            return;
+        }
+        if (onDcmtTypeSelect)
+            onDcmtTypeSelect(currentTID);
+        DcmtTypeListCacheService.GetAsync(currentTID).then(async (dtd) => {
+            setFromDTD(dtd);
+        });
+    }, [currentTID, onDcmtTypeSelect]);
+    const isMobile = deviceType === DeviceType.MOBILE;
+    const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, onSelectedTIDChanged: (tid) => {
+            setCurrentTID(tid);
+            if (tid && mruTIDs.includes(tid))
+                setCurrentMruTID(tid);
+            else
+                setCurrentMruTID(0);
+        } }), [isMobile, currentTID]);
+    const tmRecentsManagerElement = useMemo(() => _jsx(TMRecentsManagerWrapper, { mruTIDs: mruTIDs, currentTID: currentTID, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            setCurrentMruTID(tid);
+            setCurrentTID(tid);
+        }, onDeletedTID: (tid) => {
+            let newMruTIDS = removeMruTid(SDKUI_Globals.userSettings.archivingSettings.mruTIDs, tid);
+            SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS;
+            setMruTIDs(newMruTIDS);
+        } }), [mruTIDs, currentMruTID, deviceType]);
+    const tmFormElement = useMemo(() => currentTID ?
+        _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, groupId: 'tmForm', layoutMode: LayoutModes.Ark, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs), showDcmtFormSidebar: false, inputFile: inputFile, connectorFileSave: connectorFileSave, onSavedAsyncCallback: onSavedAsyncCallback, inputMids: inputMids, enableDragDropOverlay: enableDragDropOverlay, passToSearch: passToSearch ? (outputMids) => {
+                if (onDcmtTypeSelect)
+                    onDcmtTypeSelect(currentTID);
+                passToSearch(currentTID, outputMids);
+            } : undefined })
+        :
+            _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, inputMids]);
+    const allInitialPanelVisibility = {
+        'tmTreeSelector': true,
+        'tmRecentsManager': true,
+        'tmForm': true,
+        'tmDcmtForm': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': true,
+    };
+    const initialPanelDimensions = {
+        'tmTreeSelector': { width: '20%', height: '100%' },
+        'tmRecentsManager': { width: '20%', height: '100%' },
+        'tmForm': { width: '60%', height: '100%' },
+        'tmDcmtForm': { width: '25%', height: '100%' },
+        'tmBlog': { width: '25%', height: '100%' },
+        'tmSysMetadata': { width: '25%', height: '100%' },
+        'tmDcmtPreview': { width: '25%', height: '100%' },
+    };
+    const initialPanels = useMemo(() => [
+        {
+            id: 'tmTreeSelector',
+            name: SDK_Localizator.Trees,
+            contentOptions: { component: tmTreeSelectorElement },
+            toolbarOptions: { icon: _jsx(IconTree, { fontSize: 24 }), visible: true, orderNumber: 1, isActive: allInitialPanelVisibility['tmTreeSelector'] }
+        },
+        {
+            id: 'tmRecentsManager',
+            name: SDKUI_Localizator.Shortcuts,
+            contentOptions: { component: tmRecentsManagerElement, panelContainer: { title: SDKUI_Localizator.Shortcuts, totalItems: mruTIDs.length } },
+            toolbarOptions: { icon: _jsx(IconRecentlyViewed, { fontSize: 24 }), visible: true, orderNumber: 2, isActive: allInitialPanelVisibility['tmRecentsManager'] }
+        },
+        {
+            id: 'tmForm',
+            name: fromDTD?.nameLoc ?? SDK_Localizator.Metadatas,
+            contentOptions: { component: tmFormElement },
+            toolbarOptions: { icon: _jsx(IconPreview, { fontSize: 24 }), visible: false, orderNumber: 3, isActive: allInitialPanelVisibility['tmForm'] },
+            children: [
+                {
+                    id: 'tmDcmtForm',
+                    name: SDK_Localizator.Metadatas,
+                    toolbarOptions: { icon: _jsx(IconPreview, { fontSize: 24 }), visible: false, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtForm'] }
+                },
+                {
+                    id: 'tmBlog',
+                    name: SDKUI_Localizator.BlogCase,
+                    toolbarOptions: { icon: _jsx(IconBoard, { fontSize: 24 }), visible: false, orderNumber: 5, isActive: allInitialPanelVisibility['tmBlog'] }
+                },
+                {
+                    id: 'tmSysMetadata',
+                    name: SDKUI_Localizator.MetadataSystem,
+                    toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: false, orderNumber: 6, isActive: allInitialPanelVisibility['tmSysMetadata'] }
+                },
+                {
+                    id: 'tmDcmtPreview',
+                    name: SDKUI_Localizator.PreviewDocument,
+                    toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), visible: false, orderNumber: 7, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
+                }
+            ]
+        },
+    ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs]);
+    return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
+};
+export default TMArchive;
+const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
+    const { setPanelVisibilityById, toggleMaximize, setToolbarButtonVisibility, countVisibleLeafPanels } = useTMPanelManagerContext();
+    return (_jsx(TMTreeSelector, { layoutMode: LayoutModes.Ark, onClosePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => setPanelVisibilityById('tmTreeSelector', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmTreeSelector") : undefined, onSelectedTIDChanged: (tid) => {
+            onSelectedTIDChanged?.(tid);
+            if (isMobile)
+                setPanelVisibilityById('tmDcmtForm', true);
+            else {
+                setPanelVisibilityById('tmDcmtForm', true);
+                setPanelVisibilityById('tmDcmtPreview', true);
+            }
+            setToolbarButtonVisibility('tmDcmtPreview', true);
+            setToolbarButtonVisibility('tmDcmtForm', true);
+        } }));
+};
+const TMRecentsManagerWrapper = ({ mruTIDs, currentTID, currentMruTID, deviceType, onSelectedTID, onDeletedTID }) => {
+    const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    useEffect(() => {
+        if (currentTID) {
+            setPanelVisibilityById('tmDcmtForm', true);
+            setToolbarButtonVisibility('tmDcmtPreview', true);
+            setToolbarButtonVisibility('tmDcmtForm', true);
+        }
+    }, [currentTID]);
+    return (_jsx(TMRecentsManager, { accessFilter: 'canArchive', mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            onSelectedTID?.(tid);
+            if (deviceType === DeviceType.MOBILE) {
+                setPanelVisibilityById('tmDcmtForm', true);
+            }
+            else {
+                setPanelVisibilityById('tmDcmtForm', true);
+                setPanelVisibilityById('tmDcmtPreview', true);
+            }
+            setToolbarButtonVisibility('tmDcmtPreview', true);
+            setToolbarButtonVisibility('tmDcmtForm', true);
+        }, onDeletedTID: (tid) => {
+            onDeletedTID?.(tid);
+        } }));
+};

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,173 @@
+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, 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;

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

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