@topconsultnpm/sdkui-react 6.22.0-dev4.3 → 6.22.0-dev4.5

package/lib/components/base/TMDataGrid.js

@@ -331,7 +331,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         if (!internalRef.current)
             return;
         // Update state with the current number of visible rows in the DataGrid
-        setVisibleItemsCount(internalRef.current.instance()?.getVisibleRows()?.length ?? 0);
+        const grid = internalRef.current.instance();
+        setVisibleItemsCount(grid ? getVisibleItemsCount(grid) : 0);
         // Focusing SearchPanel on content ready - solo se non è già stato fatto
         if (showSearchPanel && searchPanelFocusTrigger && searchPanelFocusTrigger > 0 && !searchPanelFocusedRef.current) {
             // Use a small delay to ensure the DOM is fully rendered before trying to focus
@@ -667,3 +668,14 @@ const getRecordCount = (dataSource) => {
     }
     return 0; // Default case when neither condition is met
 };
+/* Righe della pagina corrente: una per gruppo più le sue righe dati, che non contano se il gruppo è chiuso.
+   Stesso criterio di DevExtreme: un gruppo ha la proprietà items, valorizzata a null quando è chiuso. */
+const countPageRows = (items) => items.reduce((count, item) => count + (item.items === undefined ? 1 : 1 + countPageRows(item.items ?? [])), 0);
+/* Con il rendering virtuale getVisibleRows restituisce solo le righe disegnate a video, non tutte quelle della pagina:
+   in quel caso le righe si contano dagli elementi caricati per la pagina corrente. */
+const getVisibleItemsCount = (grid) => {
+    if (grid.option('scrolling.rowRenderingMode') === 'virtual') {
+        return countPageRows(grid.getDataSource()?.items() ?? []);
+    }
+    return grid.getVisibleRows()?.length ?? 0;
+};

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

@@ -18,7 +18,6 @@ export interface ITMHelpOnLineChatProps {
     onAddMessage: (message: HolChatMessage) => void;
     onSetThinking: (isThinking: boolean) => void;
     onSetConversationId: (id: string) => void;
-    suggestedQuestions?: string[];
 }
 export interface ITMToppyHeaderButtonProps {
     showChatButton: boolean;

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

@@ -2,14 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { locale as dxLocale } from 'devextreme/localization';
-import { AppModules, CultureIDs, HolAskDescriptor, SDK_Globals, TopMediaServer } from '@topconsultnpm/sdk-ts';
+import { CultureIDs, HolAskDescriptor, SDK_Globals, TopMediaServer } from '@topconsultnpm/sdk-ts';
 import TMTooltip from '../../base/TMTooltip';
 import { TMColors } from '../../../utils/theme';
 import { SDKUI_Localizator } from '../../../helper';
 import ToppyImage from '../../../assets/Toppy-help-center.png';
-import LoginSuggestedQuestions from './dataset/Login-Suggested-Questions.json';
-import SurferSuggestedQuestions from './dataset/Surfer-Suggested-Questions.json';
-import DesignerSuggestedQuestions from './dataset/Designer-Suggested-Questions.json';
 const generateGUID = () => {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replaceAll(/[xy]/g, (c) => {
         const r = Math.trunc(Math.random() * 16);
@@ -20,7 +17,6 @@ const generateGUID = () => {
 const PANEL_DEFAULT_WIDTH = 600;
 const PANEL_MIN_WIDTH = 340;
 const PANEL_MAX_WIDTH = 900;
-const SUGGESTIONS_COUNT = 4;
 const FEEDBACK_MAX_LENGTH = 200;
 const NO_ANSWER_TEXT = 'Nessuna risposta ricevuta.';
 const ERROR_TEXT = 'Si è verificato un errore, riprova più tardi.';
@@ -53,23 +49,6 @@ const copyToClipboard = async (text) => {
         return false;
     }
 };
-const getDefaultSuggestedQuestions = (isLogged) => {
-    if (!isLogged)
-        return LoginSuggestedQuestions;
-    switch (SDK_Globals.appModule) {
-        case AppModules.SURFER: return SurferSuggestedQuestions;
-        case AppModules.DESIGNER: return DesignerSuggestedQuestions;
-        default: return [];
-    }
-};
-const pickRandom = (items, count) => {
-    const pool = [...items];
-    for (let i = pool.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [pool[i], pool[j]] = [pool[j], pool[i]];
-    }
-    return pool.slice(0, count);
-};
 const getSafeSession = () => {
     try {
         return SDK_Globals.tmSession;
@@ -100,15 +79,14 @@ const getPreLoginSession = (endpointUrl) => {
     }
     return preLoginSession;
 };
-const TMHelpOnLineChat = ({ isOpen, showChatButton, isLogged, messages, conversationId, isThinking, endpointUrl, onClose, onToggle, onNewConversation, onAddMessage, onSetThinking, onSetConversationId, suggestedQuestions }) => {
+const TMHelpOnLineChat = ({ isOpen, showChatButton, isLogged, messages, conversationId, isThinking, endpointUrl, onClose, onToggle, onNewConversation, onAddMessage, onSetThinking, onSetConversationId }) => {
     const [width, setWidth] = useState(PANEL_DEFAULT_WIDTH);
     const showFab = !isLogged && showChatButton && !isOpen;
-    const questions = suggestedQuestions ?? getDefaultSuggestedQuestions(isLogged);
     const [submittedRatings, setSubmittedRatings] = useState({});
     const onFeedbackSubmitted = useCallback((messageId, rating) => {
         setSubmittedRatings(prev => ({ ...prev, [messageId]: rating }));
     }, []);
-    return (_jsxs(_Fragment, { children: [isOpen && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: onClose }), _jsx(ChatPanel, { width: width, onWidthChange: setWidth, messages: messages, conversationId: conversationId, isThinking: isThinking, endpointUrl: endpointUrl, onClose: onClose, onNewConversation: onNewConversation, onAddMessage: onAddMessage, onSetThinking: onSetThinking, onSetConversationId: onSetConversationId, suggestedQuestions: questions, isLogged: isLogged, submittedRatings: submittedRatings, onFeedbackSubmitted: onFeedbackSubmitted })] })), showFab && (_jsx(Fab, { onClick: onToggle, title: "Chiedi a Toppy", "aria-label": "Chiedi a Toppy", children: _jsx(FabAvatar, { src: ToppyImage, alt: "Toppy" }) }))] }));
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: onClose }), _jsx(ChatPanel, { width: width, onWidthChange: setWidth, messages: messages, conversationId: conversationId, isThinking: isThinking, endpointUrl: endpointUrl, onClose: onClose, onNewConversation: onNewConversation, onAddMessage: onAddMessage, onSetThinking: onSetThinking, onSetConversationId: onSetConversationId, isLogged: isLogged, submittedRatings: submittedRatings, onFeedbackSubmitted: onFeedbackSubmitted })] })), showFab && (_jsx(Fab, { onClick: onToggle, title: "Chiedi a Toppy", "aria-label": "Chiedi a Toppy", children: _jsx(FabAvatar, { src: ToppyImage, alt: "Toppy" }) }))] }));
 };
 export default TMHelpOnLineChat;
 //#region Header button
@@ -117,11 +95,8 @@ export const TMToppyHeaderButton = ({ showChatButton, onToggle }) => {
         return null;
     return (_jsx(TMTooltip, { content: "Chiedi a Toppy", children: _jsxs(ToppyHeaderButton, { onClick: onToggle, title: "Chiedi a Toppy", children: [_jsx(ToppyHeaderAvatar, { src: ToppyImage, alt: "Toppy" }), _jsx(ToppyHeaderText, { children: "Chiedi a Toppy" })] }) }));
 };
-const ChatPanel = ({ width, onWidthChange, messages, conversationId, isThinking, endpointUrl, onClose, onNewConversation, onAddMessage, onSetThinking, onSetConversationId, suggestedQuestions, isLogged, submittedRatings, onFeedbackSubmitted }) => {
+const ChatPanel = ({ width, onWidthChange, messages, conversationId, isThinking, endpointUrl, onClose, onNewConversation, onAddMessage, onSetThinking, onSetConversationId, isLogged, submittedRatings, onFeedbackSubmitted }) => {
     const [chatInput, setChatInput] = useState('');
-    const [suggestions, setSuggestions] = useState(() => pickRandom(suggestedQuestions, SUGGESTIONS_COUNT));
-    const [hoveredSuggestion, setHoveredSuggestion] = useState(undefined);
-    const prevMessagesCountRef = useRef(messages.length);
     const inputRef = useRef(null);
     const messagesEndRef = useRef(null);
     const onCloseRef = useRef(onClose);
@@ -133,12 +108,6 @@ const ChatPanel = ({ width, onWidthChange, messages, conversationId, isThinking,
     useEffect(() => {
         inputRef.current?.focus();
     }, []);
-    useEffect(() => {
-        if (messages.length === 0 && prevMessagesCountRef.current > 0) {
-            setSuggestions(pickRandom(suggestedQuestions, SUGGESTIONS_COUNT));
-        }
-        prevMessagesCountRef.current = messages.length;
-    }, [messages.length, suggestedQuestions]);
     useEffect(() => {
         const onKeyDown = (e) => {
             if (e.key === 'Escape')
@@ -167,8 +136,8 @@ const ChatPanel = ({ width, onWidthChange, messages, conversationId, isThinking,
         globalThis.addEventListener('mousemove', onMove);
         globalThis.addEventListener('mouseup', onUp);
     }, [width, onWidthChange]);
-    const ask = useCallback(async (text) => {
-        const question = text.trim();
+    const askHandler = useCallback(async () => {
+        const question = chatInput.trim();
         if (question.length < 2 || isThinking) {
             return;
         }
@@ -210,12 +179,7 @@ const ChatPanel = ({ width, onWidthChange, messages, conversationId, isThinking,
         finally {
             onSetThinking(false);
         }
-    }, [conversationId, isThinking, endpointUrl, onAddMessage, onSetThinking, onSetConversationId]);
-    const askHandler = useCallback(() => ask(chatInput), [ask, chatInput]);
-    const onSuggestionClick = (question) => {
-        setHoveredSuggestion(undefined);
-        ask(question);
-    };
+    }, [chatInput, conversationId, isThinking, endpointUrl, onAddMessage, onSetThinking, onSetConversationId]);
     const onFeedbackSubmit = (index, rating, tags, feedback) => {
         const answer = messages[index];
         const question = messages.slice(0, index).reverse().find(m => m.isUser)?.text ?? '';
@@ -234,8 +198,7 @@ const ChatPanel = ({ width, onWidthChange, messages, conversationId, isThinking,
         });
         onFeedbackSubmitted(answer.id, rating);
     };
-    const showSuggestions = messages.length === 0 && !isThinking && suggestions.length > 0;
-    return (_jsxs(PanelContainer, { $width: width, children: [_jsx(ResizeHandle, { onMouseDown: onResizeStart }), _jsxs(ChatHeader, { children: [_jsxs(HeaderLeft, { children: [_jsx(ToppyAvatar, { src: ToppyImage, alt: "Toppy" }), _jsxs(HeaderText, { children: [_jsxs(HeaderGreeting, { children: ["Ciao ", userName] }), _jsx(HeaderQuestion, { children: "Come posso aiutarti?" })] })] }), _jsxs(HeaderRight, { children: [_jsx(TMTooltip, { content: "Nuova conversazione", children: _jsx(HeaderButton, { onClick: onNewConversation, disabled: !conversationId && messages.length === 0, title: "Nuova conversazione", children: _jsx(IconNewChat, { color: "white", fontSize: 18 }) }) }), _jsx(TMTooltip, { content: "Chiudi", children: _jsx(HeaderButton, { onClick: onClose, title: "Chiudi", children: _jsx(IconClose, { fontSize: 18 }) }) })] })] }), _jsxs(ChatBody, { children: [messages.length === 0 ? (_jsxs(WelcomeMessage, { children: [_jsx(WelcomeIcon, { children: "\uD83D\uDCA1" }), _jsxs(WelcomeText, { children: ["Ciao! Sono ", _jsx("strong", { children: "Toppy" }), ", il tuo assistente.", _jsx("br", {}), "Fai una domanda e ti aiuter\u00F2 a trovare la risposta."] })] })) : (messages.map((msg, index) => (_jsxs(MessageBubble, { $isUser: msg.isUser, children: [!msg.isUser && _jsx(BotAvatar, { src: ToppyImage, alt: "Toppy" }), msg.isUser ? (_jsxs(_Fragment, { children: [_jsx(QuestionCopy, { children: _jsx(CopyButton, { text: msg.text }) }), _jsx(MessageContent, { $isUser: true, children: msg.text })] })) : (_jsxs(BotMessageColumn, { children: [_jsx(BotMessageContent, { $isUser: false, children: _jsx(MarkdownContent, { children: renderMarkdown(msg.text) }) }), msg.text !== NO_ANSWER_TEXT && msg.text !== ERROR_TEXT && (_jsx(MessageFeedback, { answer: msg.text, submittedRating: submittedRatings[msg.id], onSubmit: (rating, tags, feedback) => onFeedbackSubmit(index, rating, tags, feedback) }))] }))] }, msg.id)))), isThinking && (_jsxs(MessageBubble, { $isUser: false, children: [_jsx(BotAvatar, { src: ToppyImage, alt: "Toppy" }), _jsx(ThinkingStatus, {}, messages.length)] })), _jsx("div", { ref: messagesEndRef })] }), _jsxs(ChatFooter, { children: [showSuggestions && (_jsxs(SuggestionsSection, { children: [_jsxs(SuggestionsTitle, { children: [_jsx(IconSparkle, { fontSize: 14 }), _jsx("span", { children: "Domande suggerite" })] }), _jsx(SuggestionsGrid, { children: suggestions.map((question, index) => (_jsxs(SuggestionCard, { type: "button", $index: index, title: question, onClick: () => onSuggestionClick(question), onMouseEnter: () => setHoveredSuggestion(question), onMouseLeave: () => setHoveredSuggestion(undefined), onFocus: () => setHoveredSuggestion(question), onBlur: () => setHoveredSuggestion(undefined), children: [_jsx(SuggestionIcon, { children: _jsx(IconQuestion, { fontSize: 16 }) }), _jsx(SuggestionText, { children: question }), _jsx(SuggestionArrow, { children: _jsx(IconArrowForward, { fontSize: 16 }) })] }, question))) })] })), _jsx(TMChatInput, { inputRef: inputRef, value: chatInput, onChange: setChatInput, onSend: askHandler, placeholder: hoveredSuggestion ?? 'Scrivi la tua domanda...', tooltip: "Invia", disabled: isThinking }), _jsx(FooterHint, { children: SDKUI_Localizator.HelpOnLineShiftEnterHint })] })] }));
+    return (_jsxs(PanelContainer, { $width: width, children: [_jsx(ResizeHandle, { onMouseDown: onResizeStart }), _jsxs(ChatHeader, { children: [_jsxs(HeaderLeft, { children: [_jsx(ToppyAvatar, { src: ToppyImage, alt: "Toppy" }), _jsxs(HeaderText, { children: [_jsxs(HeaderGreeting, { children: ["Ciao ", userName] }), _jsx(HeaderQuestion, { children: "Come posso aiutarti?" })] })] }), _jsxs(HeaderRight, { children: [_jsx(TMTooltip, { content: "Nuova conversazione", children: _jsx(HeaderButton, { onClick: onNewConversation, disabled: !conversationId && messages.length === 0, title: "Nuova conversazione", children: _jsx(IconNewChat, { color: "white", fontSize: 18 }) }) }), _jsx(TMTooltip, { content: "Chiudi", children: _jsx(HeaderButton, { onClick: onClose, title: "Chiudi", children: _jsx(IconClose, { fontSize: 18 }) }) })] })] }), _jsxs(ChatBody, { children: [messages.length === 0 ? (_jsxs(WelcomeMessage, { children: [_jsx(WelcomeIcon, { children: "\uD83D\uDCA1" }), _jsxs(WelcomeText, { children: ["Ciao! Sono ", _jsx("strong", { children: "Toppy" }), ", il tuo assistente.", _jsx("br", {}), "Fai una domanda e ti aiuter\u00F2 a trovare la risposta."] })] })) : (messages.map((msg, index) => (_jsxs(MessageBubble, { $isUser: msg.isUser, children: [!msg.isUser && _jsx(BotAvatar, { src: ToppyImage, alt: "Toppy" }), msg.isUser ? (_jsxs(_Fragment, { children: [_jsx(QuestionCopy, { children: _jsx(CopyButton, { text: msg.text }) }), _jsx(MessageContent, { $isUser: true, children: msg.text })] })) : (_jsxs(BotMessageColumn, { children: [_jsx(BotMessageContent, { $isUser: false, children: _jsx(MarkdownContent, { children: renderMarkdown(msg.text) }) }), msg.text !== NO_ANSWER_TEXT && msg.text !== ERROR_TEXT && (_jsx(MessageFeedback, { answer: msg.text, submittedRating: submittedRatings[msg.id], onSubmit: (rating, tags, feedback) => onFeedbackSubmit(index, rating, tags, feedback) }))] }))] }, msg.id)))), isThinking && (_jsxs(MessageBubble, { $isUser: false, children: [_jsx(BotAvatar, { src: ToppyImage, alt: "Toppy" }), _jsx(ThinkingStatus, {}, messages.length)] })), _jsx("div", { ref: messagesEndRef })] }), _jsxs(ChatFooter, { children: [_jsx(TMChatInput, { inputRef: inputRef, value: chatInput, onChange: setChatInput, onSend: askHandler, placeholder: "Scrivi la tua domanda...", tooltip: "Invia", disabled: isThinking }), _jsx(FooterHint, { children: SDKUI_Localizator.HelpOnLineShiftEnterHint })] })] }));
 };
 const TMChatInput = ({ value, onChange, onSend, placeholder = 'Scrivi la tua domanda...', disabled = false, inputRef, tooltip = 'Ricerca AI' }) => {
     const isDisabled = disabled || value.length < 2;
@@ -548,15 +511,6 @@ function IconSendFilled(props) {
 function IconNewChat(props) {
     return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: props.color || "currentColor", ...props, children: _jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }) }));
 }
-function IconSparkle(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor", ...props, children: _jsx("path", { d: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" }) }));
-}
-function IconQuestion(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor", ...props, children: _jsx("path", { d: "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" }) }));
-}
-function IconArrowForward(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor", ...props, children: _jsx("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }) }));
-}
 function IconThumbUp(props) {
     return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor", ...props, children: _jsx("path", { d: "M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h4v12H1z" }) }));
 }
@@ -580,10 +534,6 @@ const phraseIn = keyframes `
     from { opacity: 0; transform: translateY(4px); }
     to { opacity: 1; transform: translateY(0); }
 `;
-const suggestionIn = keyframes `
-    from { opacity: 0; transform: translateY(6px); }
-    to { opacity: 1; transform: translateY(0); }
-`;
 const feedbackIn = keyframes `
     from { opacity: 0; transform: translateY(-4px); }
     to { opacity: 1; transform: translateY(0); }
@@ -1196,109 +1146,6 @@ const ChatFooter = styled.div `
     border-top: 1px solid #e1e5e9;
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
 `;
-const SuggestionsSection = styled.div `
-    margin-bottom: 14px;
-`;
-const SuggestionsTitle = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin: 0 0 8px 2px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: #6b7280;
-
-    svg { color: ${TMColors.primary}; }
-`;
-const SuggestionsGrid = styled.div `
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-    gap: 8px;
-`;
-const SuggestionIcon = styled.span `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 8px;
-    flex-shrink: 0;
-    background: ${TMColors.primary}14;
-    color: ${TMColors.primary};
-    transition: background 0.2s ease, color 0.2s ease;
-`;
-const SuggestionText = styled.span `
-    flex: 1;
-    min-width: 0;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-`;
-const SuggestionArrow = styled.span `
-    display: flex;
-    flex-shrink: 0;
-    color: ${TMColors.primary};
-    opacity: 0;
-    transform: translateX(-4px);
-    transition: opacity 0.2s ease, transform 0.2s ease;
-`;
-const SuggestionCard = styled.button `
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-    min-height: 52px;
-    padding: 9px 12px;
-    border: 1px solid ${TMColors.primary}22;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #ffffff 0%, ${TMColors.primary}08 100%);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-    color: #242424;
-    font-family: inherit;
-    font-size: 13px;
-    line-height: 1.35;
-    text-align: left;
-    cursor: pointer;
-    opacity: 0;
-    animation: ${suggestionIn} 0.35s ease-out forwards;
-    animation-delay: ${props => props.$index * 70}ms;
-    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-
-    &:hover, &:focus-visible {
-        border-color: ${TMColors.primary}66;
-        background: ${TMColors.primary}0d;
-        box-shadow: 0 4px 14px ${TMColors.primary}1f;
-        transform: translateY(-1px);
-    }
-
-    &:hover ${SuggestionIcon}, &:focus-visible ${SuggestionIcon} {
-        background: ${TMColors.primary};
-        color: white;
-    }
-
-    &:hover ${SuggestionArrow}, &:focus-visible ${SuggestionArrow} {
-        opacity: 1;
-        transform: translateX(0);
-    }
-
-    &:focus-visible {
-        outline: 2px solid ${TMColors.primary}55;
-        outline-offset: 2px;
-    }
-
-    &:active {
-        transform: translateY(0) scale(0.99);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-        opacity: 1;
-        transition: none;
-    }
-`;
 const FooterHint = styled.p `
     margin: 6px 0 0 0;
     font-size: 11px;

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

@@ -1537,9 +1537,9 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
     return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { ref: dataGridRef, id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, customizeColumns: customizeColumns, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: disableAutoFocus ? undefined : Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearchTMDatagrid, showFilterPanel: true, sorting: gridSorting, selection: gridSelection, scrolling: gridScrolling, pageSize: pageSize, compactPager: compactPager, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: gridCounterConfig })] });
 };
 //#region TMSearchResultSelector
-const StyledItemTemplate = styled.div ` 
-    background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
-    cursor: pointer; 
+const StyledItemTemplate = styled.div ` 
+    background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+    cursor: pointer; 
 `;
 const MemoizedStyledItemTemplate = React.memo(StyledItemTemplate);
 const TMSearchResultSelector = ({ searchResults = [], disableAccordionIfSingleCategory = false, selectedTID, selectedSearchResult, autoSelectFirst = true, onSelectionChanged }) => {
@@ -1746,85 +1746,85 @@ const TMDcmtPreviewWrapper = ({ refreshPreviewTrigger, currentDcmt, isVisible, i
     return (_jsx(TMDcmtPreview, { dcmtData: currentDcmt, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, onBack: onBack, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, isResizingActive: isResizingActive, isVisible: isVisible && isPageVisible }, refreshPreviewTrigger));
 };
 // Styled Components
-const StyledPlaceholder = styled.div `
-    padding: 20px;
-    text-align: center;
-    color: #888;
+const StyledPlaceholder = styled.div `
+    padding: 20px;
+    text-align: center;
+    color: #888;
 `;
-const StyledIndexingInfoSection = styled.div `
-    padding: 15px;
-    border-top: 1px solid #e0e0e0;
-    background: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+const StyledIndexingInfoSection = styled.div `
+    padding: 15px;
+    border-top: 1px solid #e0e0e0;
+    background: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 `;
-const StyledIndexingToggle = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 10px 16px;
-    background: white;
-    border: 1px solid #d0d0d0;
-    border-radius: 6px;
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-    transition: all 0.2s ease;
-    font-size: 14px;
-    font-weight: 500;
-    color: #333;
-    opacity: ${props => props.disabled ? 0.6 : 1};
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-    &:hover:not(:disabled) {
-        background: #f8f8f8;
-        border-color: #2196F3;
-        box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
-    }
-
-    &:active:not(:disabled) {
-        transform: translateY(1px);
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
+const StyledIndexingToggle = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px 16px;
+    background: white;
+    border: 1px solid #d0d0d0;
+    border-radius: 6px;
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+    transition: all 0.2s ease;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    opacity: ${props => props.disabled ? 0.6 : 1};
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:hover:not(:disabled) {
+        background: #f8f8f8;
+        border-color: #2196F3;
+        box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
 `;
-const StyledLeftContent = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 8px;
+const StyledLeftContent = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;
 `;
-const StyledRightContent = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 8px;
+const StyledRightContent = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;
 `;
-const StyledChevron = styled.span `
-    transition: transform 0.2s ease;
-    transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
-    color: #666;
-    font-size: 12px;
+const StyledChevron = styled.span `
+    transition: transform 0.2s ease;
+    transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+    color: #666;
+    font-size: 12px;
 `;
-const StyledIndexingInfoBox = styled.div `
-    position: relative;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    padding: 12px;
-    max-height: 200px;
-    overflow: auto;
-    font-family: 'Courier New', monospace;
-    font-size: 12px;
-    color: #333;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    animation: slideDown 0.2s ease;
-
-    @keyframes slideDown {
-        from {
-            opacity: 0;
-            transform: translateY(-10px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
+const StyledIndexingInfoBox = styled.div `
+    position: relative;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 12px;
+    max-height: 200px;
+    overflow: auto;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+    color: #333;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    animation: slideDown 0.2s ease;
+
+    @keyframes slideDown {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@topconsultnpm/sdkui-react",
-    "version":  "6.22.0-dev4.3",
+    "version":  "6.22.0-dev4.5",
     "description":  "",
     "scripts":  {
                     "test":  "echo \"Error: no test specified\" \u0026\u0026 exit 1",

package/lib/components/features/assistant/dataset/Designer-Suggested-Questions.json

@@ -1,102 +0,0 @@
-[
-    "Come metto un tipo documento dentro un albero?",
-    "Perché l'area di appoggio non mostra i file?",
-    "Che differenza c'è fra uno a molti e molti a molti?",
-    "A che servono i tre pulsanti della pagina certificati?",
-    "Che differenza c'è fra firma e marca temporale?",
-    "Posso cambiare il percorso di un disco?",
-    "Come esporto la configurazione?",
-    "Che differenza c'è fra la finestra dell'errore e il contatore rosso?",
-    "Ho archiviato un documento ma la ricerca libera non lo trova, perché?",
-    "Perché un gruppo non ha l'elenco degli utenti?",
-    "Come importo una configurazione?",
-    "Perché il cestino è grigio nei server LDAP?",
-    "Cosa succede ai documenti se elimino un valore di una lista dati?",
-    "Perché il cestino è grigio nei server di marca temporale?",
-    "Cosa sono i parametri fra parentesi graffe?",
-    "Come impedisco di riusare le vecchie password?",
-    "Perché la griglia dei permessi è vuota?",
-    "Che differenza c'è fra Direct e LoadBalance?",
-    "Quali campi ha un tipo serbatoio?",
-    "Come capisco se un utente sta davvero lavorando?",
-    "Perché il cestino è grigio nei server di firma?",
-    "Come aggiungo un campo a un tipo documento?",
-    "Quanti documenti ci sono in archivio?",
-    "A che serve «Usa autenticazione sicura» su un utente?",
-    "In che formato vengono mostrate le fatture elettroniche?",
-    "Come definisco quali documenti entrano in una vista?",
-    "Dove trovo la vista approvativa di un workflow?",
-    "Perché salva è grigio negli alberi?",
-    "Perché salva è grigio nelle aree di appoggio?",
-    "Perché la correlazione funziona solo in un verso?",
-    "Perché la firma non riesce pur essendo tutto compilato?",
-    "Perché non riesco a creare il certificato?",
-    "Che differenza c'è fra disco e area di appoggio?",
-    "Come esporto un tipo documento con tutto ciò che gli serve?",
-    "Che cosa vuol dire «Proseguendo le modifiche apportate andranno perse»?",
-    "A che serve la coda della ricerca full text?",
-    "Come metto una persona in un gruppo?",
-    "Come importo un tipo documento che usa liste dati che qui non esistono?",
-    "Dove metto utente e password del dominio?",
-    "Perché salva è grigio nelle liste dati?",
-    "Posso usare un certificatore diverso dai tre proposti?",
-    "Come faccio ripartire il protocollo da 1 ogni anno?",
-    "Come faccio scadere le password?",
-    "Cosa vuol dire autorizzato e non autorizzato?",
-    "Che cos'è un «Login SAP» e a che cosa serve?",
-    "Perché salva è grigio nei tipi serbatoio?",
-    "Dove trovo l'ID di sessione da dare all'assistenza?",
-    "Quali campi ha un server di firma?",
-    "Dove finiscono i file di questo tipo documento?",
-    "Quanti documenti sono senza file?",
-    "Ho creato un utente ma non vede niente, perché?",
-    "Perché il link di un documento non funziona?",
-    "Perché la stessa vista mostra cose diverse a persone diverse?",
-    "Che differenza c'è fra partecipante e responsabile?",
-    "Che cos'è un albero e a che cosa serve?",
-    "Che cos'è un'area di appoggio e a che cosa serve?",
-    "Perché dice «nessuna proprietà da definire»?",
-    "A che cosa servono «OTP Provider» e «OTP ID» del certificato?",
-    "Come aggiungo spazio all'archivio?",
-    "Perché dopo l'importazione i gruppi non vedono nulla?",
-    "Perché a volte è «Campo Obbligatorio» con la maiuscola?",
-    "Perché questo gruppo non si lascia modificare?",
-    "Devo importare tutto il file?",
-    "Perché salva è grigio nel server LDAP?",
-    "Che cos'è una lista dati e a che cosa serve?",
-    "Perché salva è grigio nel server di marca temporale?",
-    "Perché il numeratore dà sempre lo stesso numero?",
-    "A cosa servono i tre puntini nella cella dei permessi?",
-    "Dove si configura il collegamento a SAP?",
-    "Che differenza c'è fra serbatoio, disco e area di appoggio?",
-    "Quali colonne ha l'elenco delle sessioni?",
-    "Dove si configura il servizio che manda il codice OTP?",
-    "Che differenza c'è fra chiave primaria e indice univoco?",
-    "Perché un utente non riesce più ad accedere?",
-    "Come faccio vedere un documento a chi non ha un'utenza?",
-    "Perché la linguetta «Metadati» di un tipo documento è obbligatoria?",
-    "Perché la modifica al workflow non ha effetto?",
-    "Perché non riesco a salvare un albero nuovo?",
-    "Quali campi servono per un'area di appoggio?",
-    "Come risolvo l'errore sulla seconda query di una correlazione?",
-    "Perché salva è grigio nel certificato di firma?",
-    "Cosa succede ai documenti se elimino il disco?",
-    "Dove cambio il nome del file di esportazione?",
-    "Perché il salvataggio riesce ma l'oggetto non funziona?",
-    "Che cos'è un gruppo e perché i permessi si danno ai gruppi?",
-    "Perché non vedo il pulsante delle opzioni di importazione?",
-    "Che cos'è un server LDAP?",
-    "Perché la lista nuova non compare da nessuna parte?",
-    "Che cos'è un server di marca temporale?",
-    "Che cos'è un numeratore e a che cosa serve?",
-    "Perché non trovo l'oggetto nella griglia dei permessi?",
-    "Posso recuperare un profilo eliminato?",
-    "Dove si creano i tipi serbatoio?",
-    "Come faccio uscire qualcuno dall'applicazione?",
-    "Come provo che un server di firma funzioni?",
-    "Che cosa sono le opzioni del tipo documento?",
-    "Che cos'è il numero rosso nella scheda?",
-    "In che lingua vede il documento chi riceve il link?",
-    "Perché una vista ha meno opzioni di un tipo documento?",
-    "Che differenza c'è fra errore e avviso?"
-]

package/lib/components/features/assistant/dataset/Login-Suggested-Questions.json

@@ -1,32 +0,0 @@
-[
-    "Che cos'è la schermata di accesso?",
-    "Quanti passaggi servono per entrare e come torno indietro?",
-    "Che cos'è il punto di accesso?",
-    "Come verifico che il punto di accesso risponda?",
-    "Che cos'è l'archivio documentale che mi viene chiesto?",
-    "Come si sceglie da un elenco a tendina o a finestra?",
-    "Quali sono le cinque modalità di autenticazione?",
-    "A che cosa servono i campi nome utente e password?",
-    "Che cos'è l'accesso «per conto di»?",
-    "Quali campi sono obbligatori per accedere?",
-    "Quali controlli ci sono sul cambio e sul recupero della password?",
-    "Che cos'è l'autenticazione a più fattori?",
-    "Come si compilano le sei caselle del codice?",
-    "Quali comandi ho accanto alle caselle del codice?",
-    "Come ottengo il codice per posta elettronica o da applicazione?",
-    "Quando compaiono «Cambia password» e «Password dimenticata»?",
-    "Come si cambia la password dalla schermata di accesso?",
-    "Ho dimenticato la password, come la recupero?",
-    "Quali requisiti deve avere la nuova password?",
-    "Che cosa sono gli accessi rapidi?",
-    "Come creo un accesso rapido prima di entrare?",
-    "Com'è fatto il pannello degli accessi rapidi?",
-    "Come personalizzo nome, icona e colore di un accesso rapido?",
-    "Come esporto e importo gli accessi rapidi?",
-    "Come cambio la lingua della schermata di accesso?",
-    "Quali versioni sono indicate nella schermata?",
-    "Che cosa vogliono dire i messaggi della schermata di accesso?",
-    "L'accesso non riesce: come capisco il motivo?",
-    "Come accedo a TopMedia da telefono?",
-    "La password nuova non viene accettata, perché?"
-]

package/lib/components/features/assistant/dataset/Surfer-Suggested-Questions.json

@@ -1,102 +0,0 @@
-[
-    "Che cos'è l'Archiviazione?",
-    "Che cosa succede facendo clic su un risultato?",
-    "Che cosa significa tipo documento?",
-    "Che cosa sono i metadati di output?",
-    "Che cosa cambia negli elenchi e nelle finestre su Mobile?",
-    "Che cos'è la ricerca naturale?",
-    "Come effettuo una ricerca?",
-    "Come apro la sezione Ricerca?",
-    "Dove trovo i tipi documento in archiviazione?",
-    "A cosa servono i metadati?",
-    "Che cos'è un filtro di ricerca?",
-    "Come si apre la ricerca naturale?",
-    "In quale sezione di Surfer si cercano i documenti?",
-    "Che cos'è la ricerca avanzata?",
-    "Posso vedere il contenuto del file che sto archiviando?",
-    "A cosa serve il tipo documento?",
-    "Quali operatori di ricerca esistono?",
-    "Come evito errori di battitura?",
-    "Che cos'è la scheda del documento?",
-    "Devo convertire il file prima di archiviarlo?",
-    "Che cosa sono i metadati?",
-    "Che cos'è l'ordinamento del risultato?",
-    "Come cerco documenti di un certo periodo?",
-    "Come vengono nominati i file copiati?",
-    "Come scelgo il tipo documento da archiviare?",
-    "Che cos'è la ricerca per metadati?",
-    "Come cerco i documenti di oggi?",
-    "Che cos'è l'editor delle formule?",
-    "Dove metto il file da archiviare?",
-    "Che cos'è un documento in Surfer?",
-    "Come personalizzo i pannelli della ricerca?",
-    "Come si apre il pannello «Impostazioni» e come è fatto?",
-    "Come archivio una fattura elettronica?",
-    "Cosa vuol dire prendere in carico un documento?",
-    "Come aggiungo una colonna al risultato?",
-    "Che cosa vedo dopo la ricerca?",
-    "Che cosa sono i documenti master e dettaglio?",
-    "Come ordino cliccando sulla colonna?",
-    "Che cosa sono i metadati di sistema?",
-    "Come non reimposto ogni volta i filtri?",
-    "Come riconosco il tipo di dato di un metadato?",
-    "Perché non posso modificare la ricerca?",
-    "Che cos'è una vista e perché è scritta in rosso?",
-    "Come unisco due ricerche?",
-    "Che cos'è Toppy e in quanti modi compare nella Ricerca?",
-    "Come scarico un documento?",
-    "A cosa serve il check out?",
-    "Come elimino un documento dall'archivio?",
-    "Come prendo in carico un documento?",
-    "Come esporto i risultati?",
-    "Come metto un documento tra i preferiti?",
-    "Come aggiorno i risultati?",
-    "Dove sono finiti i documenti che avevo trovato?",
-    "Come faccio a rivedere le ricerche rapide?",
-    "Come scelgo il tipo documento dall'albero?",
-    "Come cambio l'albero che si apre all'inizio?",
-    "Come pulisco l'elenco delle scorciatoie?",
-    "Come filtro l'elenco dei tipi documento?",
-    "Perché non posso eliminare una ricerca?",
-    "Come faccio partire sempre la stessa ricerca?",
-    "Come richiamo una ricerca dalla pagina iniziale?",
-    "Come annullo le modifiche ai filtri?",
-    "Come aggiungo un campo di ricerca che non c'è?",
-    "Come scelgo quali colonne vedere nel risultato?",
-    "Come stabilisco la priorità dell'ordinamento?",
-    "Come faccio partire subito una ricerca salvata?",
-    "Come aggiungo un comando alla barra flottante?",
-    "Come leggo il documento senza aprirlo?",
-    "Come trovo un documento nei risultati?",
-    "Come tolgo una colonna dalla vista?",
-    "Come sostituisco il file?",
-    "Come firmo un documento?",
-    "Come trasformo un documento in pdf?",
-    "Come cambio un valore su tanti documenti?",
-    "Come trovo il documento principale?",
-    "Come collego due documenti?",
-    "Come archivio un documento simile?",
-    "Come tengo aperta l'anteprima?",
-    "Come faccio vedere l'anteprima dei file grandi?",
-    "Come copio i file in una cartella?",
-    "Come unisco più documenti?",
-    "Perché la ricerca full text non lo trova?",
-    "Come tolgo un documento dal gruppo di lavoro?",
-    "Chi ha preso il documento in passato?",
-    "Dove vedo i documenti condivisi?",
-    "Come assegno un compito su un documento?",
-    "Come scarico gli allegati di una fattura?",
-    "Come scarico la lista dei documenti?",
-    "Come cambio i dati di un documento?",
-    "Come archivio partendo da una ricerca?",
-    "Come faccio una ricerca complessa?",
-    "Perché il risultato non è quello che mi aspetto?",
-    "Come cerco una parola dentro i documenti?",
-    "Come chiedo a Toppy di trovare un documento?",
-    "Come copio i dati della firma?",
-    "Chi ha modificato il documento e quando?",
-    "Come risalgo dalla fattura all'ordine?",
-    "Come imposto una ricerca per trovare un documento?",
-    "Dove si cercano i documenti di un certo tipo?",
-    "Come vedo la cronologia dei check out di un documento?"
-]