@topconsultnpm/sdkui-react-beta 6.14.75 → 6.14.77

package/lib/components/editors/TMMetadataValues.js

@@ -84,7 +84,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             return;
         if (!currentDTD)
             return;
-        console.log('TMMetadataValues: metadataValues', metadataValues);
         //if no dynamic data list has changed we do not call APIs
         if (deepCompare(metadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList), prevMetadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList)))
             return;

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

@@ -80,7 +80,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             setFetchError(null); // reset errore prima del fetch
             if (!TID)
                 return;
-            if (!DID)
+            if (!DID && layoutMode === LayoutModes.Update)
                 return;
             TMSpinner.show({ description: 'Loading Metadata...' });
             let getMetadataResult;

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
-import Logo from '../../../assets/Toppy-generico.png';
+import Toppy from '../../../assets/Toppy-generico.png';
 import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight } from '../../../helper';
 import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
 import { FormModes } from '../../../ts';
@@ -13,7 +13,7 @@ import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMDropDownMenu from '../../base/TMDropDownMenu';
-import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
+import TMLayoutContainer from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMPanel from '../../base/TMPanel';
@@ -248,7 +248,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.select?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOutputConfig, onChoose: handleChooseOutput }), showOrderByConfig &&
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.orderBy?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOrderByConfig, onChoose: handleChooseOrderBy })] })
                         :
-                            _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", SDKUI_Localizator.DcmtTypeSelectOrQuickSearch, " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }), showSqdForm &&
+                            _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch }) }), _jsx("img", { src: Toppy, width: 120, alt: '' })] }), showSqdForm &&
                         _jsx(StyledModalContainer, { style: { backgroundColor: `${TMColors.backgroundColorHeader}12` }, children: _jsx(TMSavedQueryForm, { height: '50%', width: '50%', id: formModeSqdForm === FormModes.Create ? -1 : SQD?.id, title: 'Ricerca rapida', formMode: formModeSqdForm, showBackButton: true, qd: qd, isAdvancedSearch: showAdvancedSearch, isModal: false, onClose: () => { setShowSqdForm(false); }, onSaved: onSqdSaved }) })] }), showDistinctValuesPanel &&
                 _jsx(TMDistinctValues, { isModal: true, tid: focusedTidMid?.tid, mid: focusedTidMid?.mid, separator: ',', onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
                         if (!e)
@@ -328,13 +328,20 @@ export const refreshLastSearch = async (qd) => {
     return searchResults;
 };
 export const StyledToppyTextContainer = styled.div ` 
-    padding: 30px 50px; 
-    max-width: 345px; 
+    padding: 30px 5vw;
+    width: 100%;
+    max-width: 345px;
     border: 1px solid #2559A5; 
     border-radius: 30px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
+    box-sizing: border-box;
+
+    @media (max-width: 400px) {
+        padding: 20px 10px;
+        max-width: 98vw;
+    }
 `;
 export const StyledToppyText = styled.p ` 
     text-align: center; 

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

@@ -1,27 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
-import { LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts-beta';
+import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts-beta';
 import { TreeList, Column, Scrolling, Selection } from 'devextreme-react/tree-list';
 import { DropDownBox } from 'devextreme-react';
-import { IconStarRemove, IconStar, SDKUI_Localizator, SDKUI_Globals, IconFolder } from '../../../helper';
-import { StyledDivHorizontal } from '../../base/Styled';
+import { IconStarRemove, IconStar, SDKUI_Localizator, SDKUI_Globals, IconFolder, IconInfo, IconCloseOutline } from '../../../helper';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
 import TMButton from '../../base/TMButton';
 import TMDataGrid from '../../base/TMDataGrid';
-import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import TMPanel from '../../base/TMPanel';
-import TMTidViewer from '../../viewers/TMTidViewer';
+import TMTidViewer, { renderDTDTooltipContent, TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
 import { TMColors } from '../../../utils/theme';
 import styled from 'styled-components';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
     const [selectedTreeId, setSelectedTreeId] = useState(0);
+    const [infoDTD, setInfoDTD] = useState();
     // State to store selected row keys
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     // State hook to store the currently focused row key, initially set to undefined
     const [focusedRowKey, setFocusedRowKey] = useState(undefined);
     const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
     const [defaultTreeId, setDefaultTreeId] = useState(-1);
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    const panelRef = useOutsideClick(() => setInfoDTD(undefined));
     useEffect(() => {
         if (treeItems.length > 0 && treeItems[0].id) {
             setSelectedRowKeys([treeItems[0].id]);
@@ -59,10 +64,56 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
         setTreeItems(newTreeItems);
     }, [selectedTreeId]);
     const renderCell = (data) => {
-        let treeItem = data.data;
-        if (treeItem.type == TreeItemTypes.DcmtType)
-            return (_jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }));
-        return (_jsxs(StyledDivHorizontal, { style: { gap: 5 }, children: [_jsx(IconFolder, { fontSize: 24, color: TMColors.iconLight }), _jsx("p", { style: { color: TMColors.primaryColor }, children: treeItem.nameLoc })] }));
+        const treeItem = data.data;
+        const [showInfo, setShowInfo] = useState(false);
+        // Documento (DcmtType)
+        if (treeItem.type === TreeItemTypes.DcmtType) {
+            return (_jsxs(StyledDivHorizontal, { style: {
+                    alignItems: 'center',
+                    minWidth: 0,
+                    width: '100%',
+                    gap: 6,
+                    position: 'relative'
+                }, onMouseEnter: async () => {
+                    if (!isMobile) {
+                        setShowInfo(true);
+                        let dtd = await DcmtTypeListCacheService.GetAsync(treeItem.tid);
+                        setInfoDTD(dtd);
+                    }
+                }, onMouseLeave: () => {
+                    if (!isMobile) {
+                        setShowInfo(false);
+                        setInfoDTD(undefined);
+                    }
+                }, children: [!isMobile && (_jsx("span", { style: {
+                            opacity: showInfo ? 1 : 0,
+                            transition: 'opacity 0.2s',
+                            pointerEvents: showInfo ? 'auto' : 'none',
+                            cursor: 'pointer',
+                            marginRight: 4,
+                            display: 'flex',
+                            alignItems: 'center',
+                            position: 'relative',
+                            left: 0,
+                            zIndex: 2
+                        }, children: _jsx(TMDcmtTypeTooltip, { dtd: infoDTD, children: _jsx(IconInfo, { color: TMColors.info }) }) })), _jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }) })] }));
+        }
+        // Folder (altri tipi)
+        return (_jsxs(StyledDivHorizontal, { style: { gap: 5, alignItems: 'center', minWidth: 0 }, children: [_jsx("span", { style: {
+                        flex: '0 0 auto',
+                        width: 24,
+                        height: 24,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }, children: _jsx(IconFolder, { fontSize: 24, color: TMColors.iconLight }) }), _jsx("span", { style: {
+                        color: TMColors.primaryColor,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        flex: 1,
+                    }, children: treeItem.nameLoc })] }));
     };
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
@@ -102,23 +153,89 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                 }
             } }), children: trees.length > 0
             ?
-                _jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%', padding: '10px 5px' }, children: _jsxs(TMLayoutContainer, { gap: 10, children: [_jsx(TMLayoutItem, { height: '30px', children: _jsx(DropDownBox, { dropDownOptions: {
-                                        resizeEnabled: true,
-                                        minWidth: "100%",
-                                        height: trees.length <= 10 ? 300 : 500,
-                                        maxWidth: "100%"
-                                    }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
-                                            { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
-                                            { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
-                                        ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsx(StyledTreeListWrapper, { style: { width: "100%", height: "100%" }, children: _jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onSelectionChanged: (e) => {
-                                            if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
-                                                onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
-                                            }
-                                        }, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }) }) })] }) })
+                _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        width: '100%',
+                        boxSizing: 'border-box',
+                        minHeight: 0,
+                    }, children: [_jsx("div", { style: { padding: '10px' }, children: _jsx(DropDownBox, { dropDownOptions: {
+                                    resizeEnabled: true,
+                                    minWidth: "100%",
+                                    height: trees.length <= 10 ? 300 : 500,
+                                    maxWidth: "100%"
+                                }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, style: { height: 30, padding: '5px' }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
+                                        { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
+                                        { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
+                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onSelectionChanged: (e) => {
+                                        if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
+                                            onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
+                                        }
+                                    }, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
             : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
+const StyledTidItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    /* padding: 10px; */
+    position: relative;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    .info-icon {
+        position: absolute;
+        left: -7px;
+        top: calc(50% - 5px);
+        transform: translateY(-50%);
+        opacity: 0;
+        transition: opacity 0.2s;
+        pointer-events: none;
+        // On mobile, never show
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+`;
 const StyledTreeListWrapper = styled.div `
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .dx-treelist,
+    .dx-treelist-rowsview,
+    .dx-scrollable,
+    .dx-scrollable-wrapper,
+    .dx-scrollable-container,
+    .dx-scrollable-content {
+        height: 100% !important;
+        min-height: 0 !important;
+        max-height: 100% !important;
+        box-sizing: border-box;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-vertical {
+        /* Mostra solo quando serve */
+        opacity: 1 !important;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
+        display: none !important;
+    }
+
 	.dx-treelist-container>.dx-treelist-headers,
 	.dx-treelist-container>.dx-treelist-rowsview {
 		background-color: transparent;
@@ -132,7 +249,7 @@ const StyledTreeListWrapper = styled.div `
 	}
 
 	.dx-row > td {
-		padding: 10px 15px;
+		padding: 10px;
 		font-size: 1rem;
         white-space: nowrap;
 		overflow: hidden;

package/lib/components/grids/TMBlogs.d.ts

@@ -88,6 +88,8 @@ interface TMBlogsProps {
     showFloatingCommentButton?: boolean;
     /** Context descriptor for the blog component */
     context?: TMBlogContextDescriptor;
+    /** Layout */
+    layoutMode?: 'stacked' | 'chat';
 }
 declare const TMBlogs: (props: TMBlogsProps) => import("react/jsx-runtime").JSX.Element;
 export default TMBlogs;

package/lib/components/grids/TMBlogs.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DcmtTypeListCacheService, LayoutModes, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
 import { ContextMenu, ScrollView } from 'devextreme-react';
 import { SDKUI_Localizator, IconAttachment, getExceptionMessage, Globalization, IconBoard } from '../../helper';
@@ -31,7 +31,7 @@ const TMBlogs = (props) => {
         isRestoreEnabled: false,
         isRefreshEnabled: false,
         isCreateContextualTask: false,
-    }, refreshCallback, newPosts = [], showCommentFormCallback, showTaskFormCallback, showContextMenu = true, handleAttachmentFocus, showFloatingCommentButton = false, context, } = props;
+    }, refreshCallback, newPosts = [], showCommentFormCallback, showTaskFormCallback, showContextMenu = true, handleAttachmentFocus, showFloatingCommentButton = false, context, layoutMode = 'stacked' } = props;
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
     const deviceType = useDeviceType();
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
@@ -64,8 +64,11 @@ const TMBlogs = (props) => {
     const [isHeaderHidden, setIsHeaderHidden] = useState(isHeaderFullyHidden(currentHeader));
     // showId is a state variable that determines whether an ID-related component or feature should be displayed
     const [localShowId, setLocalShowId] = useState(false);
-    // State variable to track the number of new posts
-    const [newPostCount, setNewPostCount] = useState(0);
+    // State variable to track the new posts
+    const [newPostIds, setNewPostIds] = useState(new Set());
+    const firstNewPostIndex = useMemo(() => {
+        return blogPosts.findIndex(post => post.id !== undefined && newPostIds.has(post.id));
+    }, [blogPosts, newPostIds]);
     // Ref to the container
     const containerRef = useRef(null);
     // State variable to control the visibility of the wait panel.
@@ -291,13 +294,23 @@ const TMBlogs = (props) => {
         return menuItemsElements;
     }, [isHeaderHidden, localShowId, setLocalShowId, focusedBlog, focusedAttachment, showDcmtForm]);
     useEffect(() => {
-        if (context === undefined)
-            setNewPostCount(0);
+        // Check if context exists, the engine is 'WorkingGroupEngine',
         if (context && context.engine === 'WorkingGroupEngine' && context.object && context.object.id) {
-            const postCount = newPosts?.find(d => d.id === context.object?.id)?.count ?? 0;
-            setNewPostCount(postCount);
+            // Find the number of new posts for the active working group
+            const newPostsCount = newPosts?.find(d => d.id === context.object?.id)?.count ?? 0;
+            // If there are no blog posts or the count of new posts is 0 or less, reset the set of new post IDs to an empty set and exit early
+            if (blogPosts.length === 0 || newPostsCount <= 0) {
+                setNewPostIds(new Set());
+                return;
+            }
+            // Calculate the starting index for slicing the blogPosts array to get only
+            const startIndex = Math.max(blogPosts.length - newPostsCount, 0);
+            // Extract the IDs of the posts from that slice and filter out undefined IDs
+            const ids = blogPosts.slice(startIndex).map(post => post.id).filter((id) => id !== undefined);
+            // Update the state with the new set of post IDs considered 'new'
+            setNewPostIds(new Set(ids));
         }
-    }, [context, newPosts]);
+    }, [blogPosts, newPosts, context]);
     useEffect(() => {
         if (showId !== undefined)
             setLocalShowId(showId);
@@ -434,101 +447,124 @@ const TMBlogs = (props) => {
                     return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
                 }) });
         };
-        return _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx("div", { ref: scrollRef, style: { backgroundColor: "rgba(191, 191, 191, 0.15)", height: "100%", padding: "5px", overflowY: "auto", width: "100%" }, children: blogPosts.length === 0 ?
+        const renderBlogPostContent = (blogPost, index, isOwnComment) => {
+            const isSelected = focusedBlog?.id === blogPost.id;
+            const isNew = Boolean((blogPost.newPosts ?? 0) || (blogPost.id !== undefined && blogPost.id !== null && newPostIds.has(blogPost.id)));
+            const backgroundColors = {
+                default: layoutMode === 'stacked' ? colors.LIGHT_GRAY : isOwnComment ? '#D9EFE0' : '#F3E6E6',
+                selectedItems: isSelected ? color ?? colors.PRIMARY_BLUE : colors.PRIMARY_BLUE,
+            };
+            let bgColor = isSelected ? backgroundColors.selectedItems : backgroundColors.default;
+            let textColor = blogPost.isSys ? colors.RED : isSelected ? colors.WHITE : colors.BLACK;
+            let iconColor = textColor;
+            const classID = blogPost.classID;
+            if (classID) {
+                if (classID === 'DS')
+                    iconColor = isSelected ? colors.WHITE : colors.PRIMARY_ORANGE;
+                if (classID === 'WG')
+                    iconColor = isSelected ? colors.WHITE : colors.PRIMARY_GREEN;
+            }
+            const canNavigate = () => {
+                return Boolean(handleNavigateToWGs && id && classID === 'WG');
+            };
+            const headerClickCallback = () => {
+                const id = blogPost.id;
+                if (handleNavigateToWGs && id && classID === 'WG')
+                    handleNavigateToWGs(id);
+            };
+            const onClickCallback = () => {
+                handleFocusedBlog(blogPost);
+            };
+            const handleKeyDown = (event) => {
+                event.preventDefault();
+                if (!focusedBlog)
+                    return;
+                const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
+                if (currentIndex === -1)
+                    return;
+                switch (event.key) {
+                    case 'ArrowDown':
+                        const nextItem = blogPosts[currentIndex + 1];
+                        if (nextItem)
+                            handleFocusedBlog(nextItem);
+                        break;
+                    case 'Enter':
+                        const item = blogPosts[currentIndex];
+                        const classItemID = item.classID;
+                        if (handleNavigateToWGs && item.id && classItemID === 'WG')
+                            handleNavigateToWGs(item.id);
+                        break;
+                    default:
+                        break;
+                }
+            };
+            const handleKeyUp = (event) => {
+                event.preventDefault();
+                if (event.key === 'ArrowUp' && focusedBlog) {
+                    const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
+                    if (blogPosts[currentIndex - 1]) {
+                        handleFocusedBlog(blogPosts[currentIndex - 1]);
+                    }
+                    ;
+                }
+            };
+            const onContextMenu = (e) => {
+                e.preventDefault();
+                setAnchorEl(e.currentTarget);
+                handleFocusedBlog(blogPost);
+                handleFocusedAttachment(undefined);
+            };
+            return (_jsxs(BlogPostContainer, { id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$isNew": Boolean(blogPost.newPosts ?? 0) || isNew, "$canNavigate": canNavigate(), "$paddingRight": layoutMode === 'chat' ? "30px" : "10px", onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [OwnerInitialsBadge(blogPost), _jsx("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: "wrap", overflow: "hidden" }, children: [_jsxs("div", { children: [_jsxs("div", { style: { fontWeight: "bold", fontSize: '1rem', display: "flex", alignItems: "center" }, children: [showIconHeader && blogPost.header && blogPost.classID
+                                                            ? IconAndHeaderElement(blogPost, iconColor, isSelected, () => {
+                                                                if (handleNavigateToWGs && blogPost.id && blogPost.classID === 'WG') {
+                                                                    handleNavigateToWGs(blogPost.id);
+                                                                }
+                                                            }, searchText)
+                                                            : _jsx("span", { style: { marginLeft: showIconHeader ? "5px" : "0", color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED }, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) }), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
+                                                                marginLeft: "5px",
+                                                                minWidth: "20px",
+                                                                height: "20px",
+                                                                padding: "0 6px",
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                justifyContent: "center",
+                                                                backgroundColor: isSelected ? '#fff' : color,
+                                                                color: isSelected ? color : "#fff",
+                                                                boxShadow: "1px 1px 2px #00000020",
+                                                                borderRadius: "30px",
+                                                                fontWeight: "bold",
+                                                                fontSize: "12px",
+                                                                whiteSpace: "nowrap",
+                                                            }, children: blogPost.newPosts }))] }), _jsxs("div", { style: { fontSize: 'calc(1rem - 1px)', color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED }, children: [(showIconHeader) && blogPost.header && blogPost.classID &&
+                                                            _jsxs(_Fragment, { children: [_jsx("span", { style: { marginLeft: showIconHeader ? "5px" : "0" }, children: blogPost.ownerName }), _jsx("span", { style: { margin: "0 5px" }, children: "\u2501" })] }), blogPost.creationTime &&
+                                                            highlightText(`${SDKUI_Localizator.WrittenOn} ${Globalization.getDateTimeDisplayValue(blogPost.creationTime)} ${new Date(blogPost.creationTime).toDateString() === new Date().toDateString() ? `(${SDKUI_Localizator.Today})` : ''}`, searchText, isSelected), localShowId && _jsxs(_Fragment, { children: [_jsx("span", { style: { margin: "0 5px" }, children: "\u2501" }), _jsxs("span", { children: ["(ID: ", blogPost.id, ")"] })] })] })] }), blogPost.attachments && showExtendedAttachments === false &&
+                                            _jsx("div", { style: { marginTop: "10px", fontSize: "13px", display: "flex", justifyContent: "flex-end" }, children: _jsx(TMTooltip, { content: `${SDKUI_Localizator.Attachments}: ${blogPost.attachments.length}`, children: _jsx(IconAttachment, { fontSize: 20, color: isSelected ? '#fff' : color }) }) })] }) })] }), _jsx("div", { style: { marginTop: "10px", fontSize: '1rem' }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 &&
+                        attachmentDetails(blogPost.attachments, isSelected)] }, id + "-" + blogPost.id));
+        };
+        return _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx("div", { ref: scrollRef, style: { backgroundColor: layoutMode === "stacked" ? "rgba(191, 191, 191, 0.15)" : '#fff', height: "100%", padding: "5px", overflowY: "auto", width: "100%" }, children: blogPosts.length === 0 ?
                     _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), searchText.length > 0 ?
                                 _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoMessagesFound }) :
                                 _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoMessages })] })
                     : blogPosts.map((blogPost, index) => {
-                        const isSelected = focusedBlog?.id === blogPost.id;
-                        const isNew = index >= blogPosts.length - newPostCount;
-                        const backgroundColors = {
-                            default: colors.LIGHT_GRAY,
-                            selectedItems: isSelected ? color ?? colors.PRIMARY_BLUE : colors.PRIMARY_BLUE,
-                        };
-                        let bgColor = isSelected ? backgroundColors.selectedItems : backgroundColors.default;
-                        let textColor = blogPost.isSys ? colors.RED : isSelected ? colors.WHITE : colors.BLACK;
-                        let iconColor = textColor;
-                        const classID = blogPost.classID;
-                        if (classID) {
-                            if (classID === 'DS')
-                                iconColor = isSelected ? colors.WHITE : colors.PRIMARY_ORANGE;
-                            if (classID === 'WG')
-                                iconColor = isSelected ? colors.WHITE : colors.PRIMARY_GREEN;
-                        }
-                        const canNavigate = () => {
-                            return Boolean(handleNavigateToWGs && id && classID === 'WG');
-                        };
-                        const headerClickCallback = () => {
-                            const id = blogPost.id;
-                            if (handleNavigateToWGs && id && classID === 'WG')
-                                handleNavigateToWGs(id);
-                        };
-                        const onClickCallback = () => {
-                            handleFocusedBlog(blogPost);
-                        };
-                        const handleKeyDown = (event) => {
-                            event.preventDefault();
-                            if (!focusedBlog)
-                                return;
-                            const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
-                            if (currentIndex === -1)
-                                return;
-                            switch (event.key) {
-                                case 'ArrowDown':
-                                    const nextItem = blogPosts[currentIndex + 1];
-                                    if (nextItem)
-                                        handleFocusedBlog(nextItem);
-                                    break;
-                                case 'Enter':
-                                    const item = blogPosts[currentIndex];
-                                    const classItemID = item.classID;
-                                    if (handleNavigateToWGs && item.id && classItemID === 'WG')
-                                        handleNavigateToWGs(item.id);
-                                    break;
-                                default:
-                                    break;
-                            }
-                        };
-                        const handleKeyUp = (event) => {
-                            event.preventDefault();
-                            if (event.key === 'ArrowUp' && focusedBlog) {
-                                const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
-                                if (blogPosts[currentIndex - 1]) {
-                                    handleFocusedBlog(blogPosts[currentIndex - 1]);
-                                }
-                                ;
-                            }
-                        };
-                        const onContextMenu = (e) => {
-                            e.preventDefault();
-                            setAnchorEl(e.currentTarget);
-                            handleFocusedBlog(blogPost);
-                            handleFocusedAttachment(undefined);
-                        };
-                        return (_jsxs(BlogPostContainer, { id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$isNew": Boolean(blogPost.newPosts ?? 0) || isNew, "$canNavigate": canNavigate(), onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [OwnerInitialsBadge(blogPost), _jsx("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: "wrap", overflow: "hidden" }, children: [_jsxs("div", { children: [_jsxs("div", { style: { fontWeight: "bold", fontSize: '1rem', display: "flex", alignItems: "center" }, children: [(showIconHeader && (blogPost.header && blogPost.classID))
-                                                                        ? (IconAndHeaderElement(blogPost, iconColor, isSelected, headerClickCallback, searchText))
-                                                                        : _jsx("span", { style: {
-                                                                                marginLeft: showIconHeader ? "5px" : "0",
-                                                                                color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED
-                                                                            }, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) }), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
-                                                                            marginLeft: "5px",
-                                                                            minWidth: "20px",
-                                                                            height: "20px",
-                                                                            padding: "0 6px",
-                                                                            display: "flex",
-                                                                            alignItems: "center",
-                                                                            justifyContent: "center",
-                                                                            backgroundColor: isSelected ? '#fff' : color,
-                                                                            color: isSelected ? color : "#fff",
-                                                                            boxShadow: "1px 1px 2px #00000020",
-                                                                            borderRadius: "30px",
-                                                                            fontWeight: "bold",
-                                                                            fontSize: "12px",
-                                                                            whiteSpace: "nowrap",
-                                                                        }, children: blogPost.newPosts }))] }), _jsxs("div", { style: { fontSize: 'calc(1rem - 1px)', color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED }, children: [(showIconHeader && (blogPost.header && blogPost.classID)) && _jsxs("span", { style: { marginLeft: showIconHeader ? "5px" : "0" }, children: [blogPost.ownerName, _jsx("span", { style: { margin: "0 5px" }, children: "\u2501" })] }), blogPost.creationTime
-                                                                        ? highlightText(SDKUI_Localizator.WrittenOn + " " + `${Globalization.getDateTimeDisplayValue(blogPost.creationTime)} ${new Date(blogPost.creationTime).toDateString() === new Date().toDateString() ? "(" + SDKUI_Localizator.Today + ")" : ''}`, searchText, isSelected)
-                                                                        : '', localShowId && _jsxs("span", { children: [_jsx("span", { style: { margin: "0 5px" }, children: "\u2501" }), _jsxs("span", { children: ["(ID: ", blogPost.id, ")"] })] })] })] }), (blogPost.attachments && showExtendedAttachments === false) &&
-                                                        _jsx("div", { style: { marginTop: "10px", fontSize: "13px", display: "flex", justifyContent: "flex-end" }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + blogPost.attachments.length, children: _jsx(IconAttachment, { fontSize: 20, color: isSelected ? '#fff' : color }) }) })] }) })] }), _jsx("div", { style: { marginTop: "10px", fontSize: '1rem' }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), (showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0) && attachmentDetails(blogPost.attachments, isSelected)] }, id + "-" + blogPost.id));
+                        const isOwnComment = blogPost.ownerID === SDK_Globals.tmSession?.SessionDescr?.userID;
+                        return (_jsxs(React.Fragment, { children: [index === firstNewPostIndex && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', color: TMColors.primary, fontWeight: '600', fontSize: '0.9rem', userSelect: 'none', }, children: [_jsx("hr", { style: { flex: 1, border: 'none', borderTop: `1px solid ${TMColors.primary}`, marginRight: '10px' } }), _jsx("span", { children: SDKUI_Localizator.LastRead }), _jsx("hr", { style: { flex: 1, border: 'none', borderTop: `1px solid ${TMColors.primary}`, marginLeft: '10px' } })] })), layoutMode === 'stacked' ? renderBlogPostContent(blogPost, index, isOwnComment) :
+                                    _jsx("div", { id: 'blogPostChat-' + id + "-" + blogPost.id.toString(), style: {
+                                            display: "flex",
+                                            flexDirection: "row",
+                                            alignItems: "flex-start",
+                                            padding: "5px",
+                                            borderRadius: "12px",
+                                            cursor: "default",
+                                            justifyContent: isOwnComment ? "flex-end" : "flex-start",
+                                        }, children: _jsx("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: isOwnComment ? "flex-end" : "flex-start",
+                                                textAlign: "left",
+                                                maxWidth: '80%',
+                                                borderRadius: '8px',
+                                                backgroundColor: isOwnComment ? '#E8EBFA' : '#f5f5f5',
+                                            }, children: renderBlogPostContent(blogPost, index, isOwnComment) }) }, 'blogPostChat-' + id + "-" + blogPost.id)] }, "blog-post-wrapper-" + id + "-" + blogPost.id));
                     }) }) });
     };
     const DataGridView = () => {

package/lib/components/grids/TMRecentsManager.js

@@ -18,26 +18,26 @@ const StyledRecentTidItem = styled.div `
     min-width: 0;
     padding: 10px;
     position: relative;
-    /* border-bottom: 1px solid #00A99D; // separator line */
+    gap: 0;
 
     &:hover {
         cursor: pointer;
     }
 
     .info-icon {
-        position: absolute;
-        left: -7px;
-        top: calc(50% - 5px);
-        transform: translateY(-50%);
         opacity: 0;
-        transition: opacity 0.2s;
         pointer-events: none;
-        // On mobile, never show
+        transition: opacity 0.2s;
         ${({ $isMobile }) => $isMobile && `
             display: none !important;
         `}
     }
 
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
     &::after {
         content: '';
         display: block;
@@ -47,13 +47,8 @@ const StyledRecentTidItem = styled.div `
         margin-top: 8px;
     }
 
-    &:hover .info-icon {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
     &:last-child {
-        border-bottom: none; // remove border for last item
+        border-bottom: none;
         margin-bottom: 0;
     }
 `;
@@ -82,7 +77,28 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
                                 }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsx("span", { className: "info-icon", children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [
+                        const isCurrent = currentMruTID == dtd.id;
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                                                marginRight: 4,
+                                                display: 'flex',
+                                                alignItems: 'center'
+                                            }, children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) })), _jsx("div", { style: {
+                                                flex: 1,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                minWidth: 0
+                                            }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), isCurrent && (_jsx("span", { style: {
+                                                width: 24,
+                                                height: 24,
+                                                borderRadius: 24,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                fontSize: '1rem',
+                                                fontWeight: 'bold',
+                                                marginLeft: 8
+                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }))] }), _jsx(ContextMenu, { dataSource: [
                                         {
                                             text: SDKUI_Localizator.Remove,
                                             icon: iconDelete(),
@@ -95,20 +111,7 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                                 onClick: () => { setInfoDTD(dtd); }
                                             }
                                         ] : [])
-                                    ], target: `#tid-${dtd.id}` }), currentMruTID == dtd.id &&
-                                    _jsx("div", { style: {
-                                            width: '24px',
-                                            height: '24px',
-                                            borderRadius: '24px',
-                                            position: 'absolute',
-                                            top: '5px',
-                                            right: '0px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            fontSize: '1rem',
-                                            fontWeight: 'bold'
-                                        }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, dtd.id));
+                                    ], target: `#tid-${dtd.id}` })] }, dtd.id));
                     })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] }));
 };
 export default TMRecentsManager;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.14.75",
+    "version": "6.14.77",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",