tycho-components 0.47.0 → 0.47.1

package/dist/configs/localization/HeaderTexts.d.ts

@@ -7,7 +7,6 @@ export declare const HeaderTexts: {
         'label.choose': string;
         'tooltip.keyboard': string;
         'tooltip.tutorials': string;
-        'tooltip.assistant': string;
         'replace.all.tooltip': string;
         'replace.find.placeholder': string;
         'replace.placeholder': string;
@@ -30,7 +29,6 @@ export declare const HeaderTexts: {
         'label.choose': string;
         'tooltip.keyboard': string;
         'tooltip.tutorials': string;
-        'tooltip.assistant': string;
         'replace.all.tooltip': string;
         'replace.find.placeholder': string;
         'replace.placeholder': string;
@@ -53,7 +51,6 @@ export declare const HeaderTexts: {
         'label.choose': string;
         'tooltip.keyboard': string;
         'tooltip.tutorials': string;
-        'tooltip.assistant': string;
         'replace.all.tooltip': string;
         'replace.find.placeholder': string;
         'replace.placeholder': string;

package/dist/configs/localization/HeaderTexts.js

@@ -7,7 +7,6 @@ export const HeaderTexts = {
         'label.choose': 'Choose a corpus',
         'tooltip.keyboard': 'Open Virtual Keyboard',
         'tooltip.tutorials': 'Views Tutorials',
-        'tooltip.assistant': 'Ask the CorpusHub assistant',
         'replace.all.tooltip': 'Replace All',
         'replace.find.placeholder': 'Find',
         'replace.placeholder': 'Replace',
@@ -30,7 +29,6 @@ export const HeaderTexts = {
         'label.choose': 'Escolha um corpus',
         'tooltip.keyboard': 'Abrir Teclado Virtual',
         'tooltip.tutorials': 'Ver tutoriais',
-        'tooltip.assistant': 'Perguntar ao assistente CorpusHub',
         'replace.all.tooltip': 'Substituir Todos',
         'replace.find.placeholder': 'Procurar',
         'replace.placeholder': 'Substituir',
@@ -53,7 +51,6 @@ export const HeaderTexts = {
         'label.choose': 'Scegli un corpus',
         'tooltip.keyboard': 'Apri tastiera virtuale',
         'tooltip.tutorials': 'Visualizza i tutorial',
-        'tooltip.assistant': "Chiedi all'assistente CorpusHub",
         'replace.all.tooltip': 'Sostituisci tutto',
         'replace.find.placeholder': 'Trova',
         'replace.placeholder': 'Sostituisci',

package/dist/shell/Header/HeaderUser/HeaderUser.d.ts

@@ -3,8 +3,7 @@ import { HelpAction } from '../HelpButton/HelpButton';
 type Props = {
     navigateLogout?: () => void;
     navigateNotLogged: () => void;
-    /** @deprecated ignored — the help entry opens the CorpusHub assistant */
     helpActions?: HelpAction[];
 };
-export default function HeaderUser({ navigateLogout, navigateNotLogged, }: Props): import("react").JSX.Element;
+export default function HeaderUser({ navigateLogout, navigateNotLogged, helpActions, }: Props): import("react").JSX.Element;
 export {};

package/dist/shell/Header/HeaderUser/HeaderUser.js

@@ -6,11 +6,12 @@ import { useLoggedUtils } from '../../../configs/useLoggedUtils';
 import UsabilityUtils from '../../../functions/UsabilityUtils';
 import LanguageSelector from '../../LanguageSelector';
 import './style.scss';
-import { isHelpAssistantEnabled, openHelpAssistant, } from '../HelpButton/helpAssistant';
-export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
+import HelpModal from '../HelpButton/HelpModal';
+export default function HeaderUser({ navigateLogout, navigateNotLogged, helpActions, }) {
     const { t } = useTranslation('header');
     const { isLogged, getLogged } = useLoggedUtils();
     const [open, setOpen] = useState(false);
+    const [openHelp, setOpenHelp] = useState(false);
     useEffect(() => {
         if (!open)
             return;
@@ -20,11 +21,8 @@ export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
         setOpen(false);
         window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');
     };
-    return (_jsxs("div", { className: "profile-container", "data-tour": "header-user", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsx(LanguageSelector, { renderMode: "profile-menu", itemLabel: t('profile.label.language') }), isHelpAssistantEnabled() && (_jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
-                            setOpen(false);
-                            openHelpAssistant();
-                        }, children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] })), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
+    return (_jsxs("div", { className: "profile-container", "data-tour": "header-user", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsx(LanguageSelector, { renderMode: "profile-menu", itemLabel: t('profile.label.language') }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => setOpenHelp(true), children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
                             setOpen(false);
                             navigateLogout && navigateLogout();
-                        }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
+                        }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] })), openHelp && (_jsx(HelpModal, { onClose: () => setOpenHelp(false), helpActions: helpActions }))] }));
 }

package/dist/shell/Header/HelpButton/HelpButton.d.ts

@@ -1,15 +1,10 @@
 import { ButtonDSModes, ButtonDSSizes, TooltipPlacements } from 'tycho-storybook';
-/**
- * @deprecated The legacy help modal (tutorial actions) was replaced by the CorpusHub assistant.
- * Kept only so existing callers still compile; the actions are ignored.
- */
 export type HelpAction = {
     title: string;
     desc: string;
     action: () => void;
 };
 type Props = {
-    /** @deprecated ignored — see HelpAction */
     helpActions?: HelpAction[];
     mobile?: boolean;
     mode?: ButtonDSModes;
@@ -18,6 +13,5 @@ type Props = {
     tooltipPlacement?: TooltipPlacements;
     title?: string;
 };
-/** Opens the CorpusHub help assistant. Renders nothing when the assistant isn't loaded. */
-export default function HelpButton({ mobile, mode, size, iconSize, tooltipPlacement, title, }: Props): import("react").JSX.Element | null;
+export default function HelpButton({ helpActions, mobile, mode, size, iconSize, tooltipPlacement, title, }: Props): import("react").JSX.Element;
 export {};

package/dist/shell/Header/HelpButton/HelpButton.js

@@ -1,11 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton, } from 'tycho-storybook';
-import { isHelpAssistantEnabled, openHelpAssistant } from './helpAssistant';
-/** Opens the CorpusHub help assistant. Renders nothing when the assistant isn't loaded. */
-export default function HelpButton({ mobile, mode, size = 'large', iconSize, tooltipPlacement, title, }) {
+import HelpModal from './HelpModal';
+export default function HelpButton({ helpActions, mobile, mode, size = 'large', iconSize, tooltipPlacement, title, }) {
     const { t } = useTranslation('header');
-    if (!isHelpAssistantEnabled())
-        return null;
-    return (_jsx(IconButton, { name: "live_help", size: size, iconSize: iconSize, title: title || t('tooltip.assistant'), onClick: openHelpAssistant, mode: mode || (mobile ? 'outlined' : 'filled'), tooltipPlacement: tooltipPlacement, "data-tour": "help-button" }));
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { name: "live_help", size: size, iconSize: iconSize, title: title || t('tooltip.tutorials'), onClick: () => setOpen(true), mode: mode || (mobile ? 'outlined' : 'filled'), tooltipPlacement: tooltipPlacement, "data-tour": "help-button" }), open && (_jsx(HelpModal, { onClose: () => setOpen(false), helpActions: helpActions }))] }));
 }

package/dist/shell/Header/HelpButton/HelpModal.d.ts

@@ -0,0 +1,8 @@
+import { HelpAction } from './HelpButton';
+import './style.scss';
+type Props = {
+    onClose: () => void;
+    helpActions?: HelpAction[];
+};
+export default function HelpModal({ onClose, helpActions }: Props): import("react").JSX.Element;
+export {};

package/dist/shell/Header/HelpButton/HelpModal.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'tycho-storybook';
+import AppModal from '../../../common/AppModal/AppModal';
+import CookieStorage from '../../../configs/CookieStorage';
+import ProfileService from '../../../configs/services/ProfileService';
+import { useLoggedUtils } from '../../../configs/useLoggedUtils';
+import { useTourUtils } from '../../../configs/useTourUtils';
+import SecurityUtils from '../../../functions/SecurityUtils';
+import './style.scss';
+export default function HelpModal({ onClose, helpActions = [] }) {
+    const { t } = useTranslation('help');
+    const { turnOn, turnOff, status } = useTourUtils();
+    const { getLogged, setLogged } = useLoggedUtils();
+    const [autoOpenEnabled, setAutoOpenEnabled] = useState(() => getLogged()?.liveTour ?? false);
+    const [updatingLiveTour, setUpdatingLiveTour] = useState(false);
+    const isTourActive = status();
+    const currentLiveTour = getLogged()?.liveTour ?? false;
+    const preferenceChanged = autoOpenEnabled !== currentLiveTour;
+    const isDisablingAutoOpen = preferenceChanged && !autoOpenEnabled;
+    const handleTutorials = () => {
+        const origin = (import.meta.env.VITE_APP_ORIGIN ?? '').replace(/\/+$/, '');
+        window.open(`${origin}/home/tutorials`, '_blank');
+    };
+    const handleTourToggle = () => {
+        const startTour = () => {
+            if (isTourActive) {
+                turnOff();
+            }
+            else {
+                turnOn();
+            }
+            onClose();
+        };
+        if (!preferenceChanged) {
+            startTour();
+            return;
+        }
+        setUpdatingLiveTour(true);
+        ProfileService.updateLiveTour(autoOpenEnabled)
+            .then((response) => {
+            CookieStorage.setJwtToken(response.data);
+            setLogged(SecurityUtils.parseJwt(response.data));
+        })
+            .catch((error) => {
+            console.error(error);
+        })
+            .finally(() => {
+            setUpdatingLiveTour(false);
+            if (isDisablingAutoOpen) {
+                onClose();
+                return;
+            }
+            startTour();
+        });
+    };
+    const handleCustomAction = (item) => {
+        item.action();
+        onClose();
+    };
+    const handleAutoOpenChange = (event) => {
+        setAutoOpenEnabled(event.target.checked);
+    };
+    const actionItems = [
+        // {
+        //   title: t('title.tutorials'),
+        //   desc: t('description.tutorials'),
+        //   action: handleTutorials,
+        // },
+        ...helpActions,
+    ];
+    return (_jsxs(AppModal, { title: t('modal.title'), close: onClose, hideFooter: true, className: "help-modal", children: [_jsxs("div", { className: "item item-tour", children: [_jsx("div", { className: "title", children: t('title.tour') }), _jsx("div", { className: "desc", children: t('description.tour') }), _jsxs("label", { className: "help-checkbox-label", children: [_jsx("input", { type: "checkbox", checked: autoOpenEnabled, onChange: handleAutoOpenChange, disabled: updatingLiveTour, className: "help-checkbox" }), _jsx("span", { children: t('checkbox.autoOpen') })] }), _jsx(Button, { text: isDisablingAutoOpen
+                            ? t('button.updateLiveTourPreference')
+                            : t('button.tour'), size: "small", icon: isDisablingAutoOpen ? 'save' : 'keyboard_arrow_right', onClick: handleTourToggle, disabled: updatingLiveTour, "data-tour": "guided-tour-start" })] }), actionItems.map((item, idx) => (_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: item.title }), _jsx("div", { className: "desc", children: item.desc }), _jsx(Button, { text: t('button.open'), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: () => handleCustomAction(item) })] }, idx)))] }));
+}

package/dist/shell/Header/HelpButton/style.scss

@@ -0,0 +1,80 @@
+.help-modal {
+  max-width: 60vw !important;
+  width: 60vw !important;
+
+  .body {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--spacing-200);
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      padding: 24px 24px 16px;
+      border: 1px solid var(--border-subtle-2);
+      border-radius: var(--radius-100);
+
+      > .title {
+        @include subtitle-small-2;
+        color: var(--text-primary);
+        margin-bottom: 4px;
+      }
+
+      > .desc {
+        @include body-medium-1;
+        color: var(--text-secondary);
+      }
+
+      > .ds-button {
+        margin-top: auto;
+      }
+    }
+
+    .item-tour {
+      background-color: #ebeff8;
+
+      .help-checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-100);
+        cursor: pointer;
+        margin: 8px 0;
+
+        .help-checkbox {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1366px) {
+  .help-modal {
+    max-width: 80vw !important;
+    width: 80vw !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .help-modal {
+    max-width: 90vw !important;
+    width: 90vw !important;
+
+    .body {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .help-modal {
+    top: 50% !important;
+
+    .body {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      max-height: 86vh;
+      overflow-y: auto;
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.47.0",
+  "version": "0.47.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {