@topconsultnpm/sdkui-react 6.20.0-dev1.11 → 6.20.0-dev1.111

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import styled from 'styled-components';
+import { SDKUI_Localizator } from '../../../helper';
+import { IconWindowMinimize } from '../../../helper/TMIcons';
+// Offset del CloseButton che sporge oltre i bordi della bubble
+const CLOSE_BUTTON_OFFSET = 8;
+/**
+ * Wrapper che include lo spazio per il CloseButton sporgente
+ * Il ref viene passato qui per includere le dimensioni complete nel calcolo
+ */
+const BubbleWrapper = styled.div `
+    position: relative;
+    padding-top: ${({ $hasCloseButton }) => $hasCloseButton ? `${CLOSE_BUTTON_OFFSET}px` : '0'};
+    padding-right: ${({ $hasCloseButton }) => $hasCloseButton ? `${CLOSE_BUTTON_OFFSET}px` : '0'};
+`;
+/**
+ * Pulsante di chiusura/minimizzazione in alto a destra della bubble
+ * Posizionato all'interno del padding del BubbleWrapper
+ */
+const CloseButton = styled.button `
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 20px rgba(118, 75, 162, 0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    z-index: 10001;
+    color: white;
+    font-size: 14px;
+    
+    &:hover {
+        background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
+        box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6), 0 0 30px rgba(240, 147, 251, 0.4);
+        border-color: rgba(255, 255, 255, 1);
+        transform: scale(1.1);
+    }
+    
+    &:active {
+        transform: scale(0.95);
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+    }
+    
+    &:focus {
+        outline: none;
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 0 3px rgba(102, 126, 234, 0.2);
+    }
+`;
+const BubbleContainer = styled.div `
+    position: absolute;
+    bottom: 100%;
+    ${({ $align }) => $align === 'right' ? 'right: 0px;' : 'left: 0px;'}
+    z-index: 10;
+`;
+const Bubble = styled.div `
+    position: relative;
+    background: linear-gradient(180deg, rgba(0, 113, 188, 0.45) 0%,rgba(27, 20, 100, 0.65) 100%);
+    color: #333;
+    padding: 10px;
+    box-sizing: border-box;
+    border-radius: 18px;
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+    font-size: 14px;
+    line-height: 1.5;
+    width: max-content;
+    
+    // Arrow styles
+    &::after {
+        transform: ${({ $align }) => ($align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)')};
+        content: "";
+        position: absolute;
+        top: 100%;
+        ${({ $align }) => ($align === 'left' ? 'left: 20px;' : 'right: 15px;')}
+        border-width: 22px 22px 0 0;
+        border-style: solid;
+        border-color: rgba(27, 20, 100, 0.65) transparent; 
+        display: block;
+        width: 0;
+        height: 0;
+        z-index: 1;
+    }
+`;
+const Content = styled.div `position: relative; z-index: 1;`;
+const TMToppySpeechBubble = forwardRef((props, ref) => {
+    const { children, align = 'right', onClose } = props;
+    // Ref per tracciare il dragging del CloseButton
+    const isCloseButtonDraggingRef = useRef(false);
+    const closeButtonMouseDownPosRef = useRef(null);
+    const handleMouseDown = (e) => {
+        isCloseButtonDraggingRef.current = false;
+        closeButtonMouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+    };
+    const handleMouseMove = (e) => {
+        if (!closeButtonMouseDownPosRef.current)
+            return;
+        const deltaX = Math.abs(e.clientX - closeButtonMouseDownPosRef.current.x);
+        const deltaY = Math.abs(e.clientY - closeButtonMouseDownPosRef.current.y);
+        // Considera drag solo se il movimento supera 3px
+        if (deltaX > 3 || deltaY > 3) {
+            isCloseButtonDraggingRef.current = true;
+        }
+    };
+    const handleMouseUp = () => {
+        closeButtonMouseDownPosRef.current = null;
+    };
+    const handleClick = (e) => {
+        if (isCloseButtonDraggingRef.current) {
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+        }
+        e.stopPropagation();
+        onClose?.();
+    };
+    return (_jsx(BubbleContainer, { "$align": align, children: _jsxs(BubbleWrapper, { ref: ref, "$hasCloseButton": !!onClose, children: [onClose && (_jsx(CloseButton, { onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: handleClick, "aria-label": SDKUI_Localizator.Minimize, title: SDKUI_Localizator.Minimize, type: "button", children: _jsx(IconWindowMinimize, {}) })), _jsx(Bubble, { "$align": align, children: _jsx(Content, { children: children }) })] }) }));
+});
+TMToppySpeechBubble.displayName = 'TMToppySpeechBubble';
+export default TMToppySpeechBubble;

package/lib/components/features/documents/TMDcmtForm.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
 import { HomeBlogPost, LayoutModes, ObjectRef, SearchResultDescriptor, TaskDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { DcmtInfo, FormModes, MetadataValueDescriptorEx, TaskContext } from '../../../ts';
+/**
+ * Definisce il contesto da cui è stato invocato il TMDcmtForm.
+ * Permette di gestire logiche diverse in base alla provenienza.
+ */
+export declare enum InvocationContext {
+    /** Invocazione standard */
+    Default = "default",
+    /** Invocato dalla pagina Todo/Task */
+    Todo = "todo",
+    /** Invocato dalla pagina WorkflowCtrl */
+    WorkflowCtrl = "workflowCtrl"
+}
 interface ITMDcmtFormProps {
     allTasks?: Array<TaskDescriptor>;
     getAllTasks?: () => Promise<void>;
@@ -24,9 +36,9 @@ interface ITMDcmtFormProps {
     canPrev?: boolean;
     isClosable?: boolean;
     groupId?: string;
-    invokedByTodo?: boolean;
+    invocationContext?: InvocationContext;
     taskFormDialogComponent?: React.ReactNode;
-    taskMoreInfo?: TaskDescriptor;
+    moreInfoTasks?: Array<TaskDescriptor>;
     showBackButton?: boolean;
     onNext?: () => void;
     onPrev?: () => void;