@topconsultnpm/sdkui-react-beta 6.6.1 → 6.6.3

package/lib/components/sidebar/TMHeader.js

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { SDK_Globals, AuthenticationModes } from '@topconsultnpm/sdk-ts-beta';
 import { FontSize, TMColors } from '../../utils/theme';
 import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
+import Logo from '../../assets/Toppy-generico.png';
 export var TMSearchContext;
 (function (TMSearchContext) {
     TMSearchContext["JOBS"] = "jobs";
@@ -15,112 +16,25 @@ export var TMSearchContext;
     TMSearchContext["PLATFORM"] = "OrchestrationPlatform";
     TMSearchContext["QE"] = "QueryEditor";
 })(TMSearchContext || (TMSearchContext = {}));
-const StyledHeaderContainer = styled.div `
-    width: 100%;
-    height: 50px;
-    /* background: #E85C36 0% 0% no-repeat padding-box; */
-    background: ${props => props.$appName === 'ORCHESTRATOR' ? 'linear-gradient(90deg, #f0f4fa, #135596)' : props.$appName === 'SURFER' ? 'linear-gradient(90deg, #f0f4fa, #0e7418)' : 'linear-gradient(90deg, #f0f4fa, #b51678)'};
-    opacity: 1;
-    display: flex; 
-    flex-direction: row; 
-    width: 100%;
-    justify-content: space-between; 
-    align-items: center; 
-`;
-const StyledMenu = styled.div `
-    position: absolute;
-    top: 50px;
-    right: 0px;
-    width: fit-content;
-    height: fit-content;
-    padding: 10px 20px;
-    border: 1px solid #2459A420;
-    background: #E2E9EF 0% 0% no-repeat padding-box;
-    z-index: 20000022;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 10px;
-    border: 1px solid #c9c9c9;
-    border-top: none;
-`;
-const StyledMenuItem = styled.p `
-    font-size: ${props => props.$fontSize}; 
-    display: flex; 
-    flex-direction: row; 
-    justify-content: flex-start; 
-    align-items: center; 
-    gap: 2px;
-    cursor: pointer;
-    color: gray;
-    &:hover{
-        color: ${TMColors.primary};
-        transition: color 100ms ease;
-    }
-`;
-const StyledHeaderIcon = styled.div `
-    width: 50px;
-    height: 50px;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${props => props.$isSelected ? '#135596' : '#ffffff'};
-    transition: color ease 100ms;
-    background-color: ${props => props.$isSelected && '#ffffff'};
-    cursor: pointer;
-    &:hover {
-        color: #ffffff;
-        background-color: #0d3862;
-        transition: color ease 100ms;
-    }
-`;
-const StyledSettingsMenuContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    font-size: ${FontSize.defaultFontSize};
-`;
-const StyledSettingsMenuItem = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-`;
-const StyledSettingsMenuItemTitle = styled.div `
-    margin-right: 5px;
-`;
-const StyledSettingsMenuItemCircle = styled.span `
-    margin-right: 5px;
-    font-size: 1.1rem;
-`;
-const StyledSettingsMenuItemVersion = styled.div `
-    font-weight: bold;
-`;
-const StyledSearchBarContainer = styled.div `
-    position: relative;
-    height:30px;
-    width: 100%;
-    max-width: ${props => props.$isMobile ? 'unset' : '650px'};
-    margin-left: ${props => props.$isMobile ? '10px' : '50px'};
-`;
-const StyledSearchBar = styled.input `
-    background: #FFFFFF 0% 0% no-repeat padding-box;
-    border: 1px solid #dbdbdb;
-    border-radius: 5px;
-    padding: 5px 30px;
-    width:100%;
-    transition: 100ms linear;
-    &:focus{
-        outline: none;
-        border-bottom: 2px solid ${TMColors.primary};
-    }
-`;
-export const TMSearchBar = ({ searchValue, onSearchValueChanged }) => {
+const StyledHeaderContainer = styled.div ` width: 100%; height: 50px; /* background: #E85C36 0% 0% no-repeat padding-box; */ background: ${props => props.$appName === 'ORCHESTRATOR' ? 'linear-gradient(90deg, #f0f4fa, #135596)' : props.$appName === 'SURFER' ? 'linear-gradient(90deg, #f0f4fa, #0e7418)' : 'linear-gradient(90deg, #f0f4fa, #b51678)'}; opacity: 1; display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; `;
+const StyledMenu = styled.div ` position: absolute; top: 50px; right: 0px; width: fit-content; height: fit-content; padding: 10px 20px; border: 1px solid #2459A420; background: #E2E9EF 0% 0% no-repeat padding-box; z-index: 20000022; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; border: 1px solid #c9c9c9; border-top: none; `;
+const StyledMenuItem = styled.p ` font-size: ${props => props.$fontSize}; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 2px; cursor: pointer; color: gray; &:hover{ color: ${TMColors.primary}; transition: color 100ms ease; } `;
+const StyledHeaderIcon = styled.div ` width: 50px; height: 50px; margin-left: 10px; display: flex; align-items: center; justify-content: center; color: ${props => props.$isSelected ? '#135596' : '#ffffff'}; transition: color ease 100ms; background-color: ${props => props.$isSelected && '#ffffff'}; cursor: pointer; &:hover { color: #ffffff; background-color: #0d3862; transition: color ease 100ms; } `;
+const StyledSettingsMenuContainer = styled.div ` display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-size: ${FontSize.defaultFontSize}; `;
+const StyledSettingsMenuItem = styled.div ` display: flex; flex-direction: row; justify-content: center; align-items: center; `;
+const StyledSettingsMenuItemTitle = styled.div ` margin-right: 5px; `;
+const StyledSettingsMenuItemCircle = styled.span ` margin-right: 5px; font-size: 1.1rem; `;
+const StyledSettingsMenuItemVersion = styled.div ` font-weight: bold; `;
+const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
+const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
+const StyledChatBotWrapper = styled.div ` `;
+const StyledChatBotcloseButton = styled.div ` cursor: pointer; font-size: 16px; color: white; width: 299px; height: 20px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 5px; background-color: orange; `;
+const StyledChaBotBtnWrapper = styled.div ` position: relative; cursor: pointer; display: flex; flex-direction: row; padding: 0 10px; width: 150px; height: 30px; border-radius: 10px; justify-content: flex-end; background-color: orange;align-items: center; gap: 5px; `;
+const StyledChatBotToppyContainer = styled.div ` background-color: orange; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50px; position: absolute; left: -10px; `;
+const StyledToppyImage = styled.div ` display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50px; overflow: hidden; background-color: white; `;
+export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
     const size = useWindowWidth();
-    return (_jsxs(StyledSearchBarContainer, { "$isMobile": size <= 640, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
+    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : size <= 640 ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : size <= 640 ? '10px' : '50px' }, "$isMobile": size <= 640, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
 };
 const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
     const [menuStatus, setMenuStatus] = useState(false);
@@ -130,6 +44,7 @@ const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValu
     const [searchProcessMonitorValue, setSearchProcessMonitorValue] = useState('');
     const [searchPlatformValue, setSearchPlatformValue] = useState('');
     const [searchQEValue, setSearchQEValue] = useState('');
+    const [isChatbot, setIsChatbot] = useState(false);
     const menuRef = useRef(null);
     const userIcon = useRef(null);
     let width = useWindowWidth();
@@ -223,6 +138,7 @@ const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValu
     const AboutApp = () => {
         return (_jsxs(StyledSettingsMenuContainer, { children: [_jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.info }, children: "\u25CF" }), " ", SDK_Globals.appModule] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.info }, children: versionAndBuildtypeInfo(moduleTypes.APP) })] }), _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.error }, children: "\u25CF" }), " SDKUI-REACT"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.error }, children: versionAndBuildtypeInfo(moduleTypes.SDKUI) })] }), _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.success }, children: "\u25CF" }), " SDK-TS"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.success }, children: versionAndBuildtypeInfo(moduleTypes.SDK) })] }), _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.info }, children: "\u25CF" }), " WEBSDK"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.info }, children: versionAndBuildtypeInfo(moduleTypes.WEBSDK) })] })] }));
     };
-    return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsx("div", { style: { width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: six, height: 30, alt: "" }) }), !isMobile && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '1px', fontSize: '14px' }, children: [_jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: "TopMedia" }), _jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: SDK_Globals.appModule })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(AboutApp, {}) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
+    return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsx("div", { style: { width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: six, height: 30, alt: "" }) }), !isMobile && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '1px', fontSize: '14px' }, children: [_jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: "TopMedia" }), _jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: SDK_Globals.appModule })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), _jsxs(StyledChatBotWrapper, { children: [isChatbot &&
+                        _jsxs("div", { style: { position: 'fixed', top: '50px', right: isMobile ? '5px' : '100px', zIndex: 1000000000 }, children: [_jsx(StyledChatBotcloseButton, { onClick: () => setIsChatbot(false), children: _jsx(IconCloseOutline, { color: 'white' }) }), _jsx("iframe", { allow: "microphone;", width: "300", height: "400", src: "https://console.dialogflow.com/api-client/demo/embedded/ee1ed045-bbf6-4740-8f2c-314cbc857dd8" })] }), _jsxs(StyledChaBotBtnWrapper, { style: { width: isMobile ? '0' : '150px', backgroundColor: isMobile ? 'transparent' : 'orange' }, onClick: () => setIsChatbot(true), children: [_jsxs(StyledChatBotToppyContainer, { style: { backgroundColor: isMobile ? 'transparent' : 'orange' }, children: [" ", _jsx(StyledToppyImage, { children: _jsx("img", { style: { cursor: 'pointer', transform: 'translateY(3px)' }, src: Logo, width: 20, alt: '', onClick: () => setIsChatbot(true) }) }), " "] }), !isMobile && _jsx("p", { style: { color: 'white', fontWeight: 'bold' }, children: "Chiedimi qualcosa" })] })] }), _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(AboutApp, {}) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
 };
 export default TMHeader;

package/package.json

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