@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

package/es/components/organism/Help/Help.js

@@ -22,37 +22,37 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable no-multi-str */
 // Libraries
-import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 // Assets
 import '@antscorp/icons/main.css';
 // Services
 import TicketService from '@antscorp/antsomi-ui/es/services/Ticket';
 // Component
-import { ButtonFeedback, ControlGroup, ControlLabel, DropDown, EditorWrapper, ErrorMessage, FlexCenter, Header, HiddenBlock, IframeHelp, Image, Label, LabelTitle, Link, Overlay, PreviewBox, SendFeedback, Span, Text, TitleSearch, TreeContent, Video, Wrapper, WrapperBody, WrapperContentHelp, WrapperFooter, WrapperFooterSpace, WrapperHeader, WrapperIconEditor, WrapperImage, WrapperInputFile, WrapperLinkFiles, WrapperLinkItemFiles, WrapperLoading, WrapperSearch, } from './styled';
-import { Button, Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
 import Icon from '@antscorp/icons';
 import { Editor } from '@tinymce/tinymce-react';
-import { LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { Button, Spin } from 'antd';
+import { ButtonFeedback, ControlGroup, ControlLabel, EditorWrapper, ErrorMessage, FlexCenter, Header, HiddenBlock, IconButtonStyled, IframeHelp, Image, Label, LabelTitle, Link, Overlay, PreviewBox, SendFeedback, Span, Text, TitleSearch, TreeContent, Video, Wrapper, WrapperBody, WrapperContentHelp, WrapperFooter, WrapperFooterSpace, WrapperHeader, WrapperIconEditor, WrapperImage, WrapperInputFile, WrapperLinkFiles, WrapperLinkItemFiles, WrapperLoading, WrapperSearch, } from './styled';
 // Atoms
 import { Input } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
-import { PopupDraggable, Select, CaptureScreen, ChatBox, } from '@antscorp/antsomi-ui/es/components/molecules';
+import { CaptureScreen, ChatBox, PopupDraggable, Select, Dropdown, } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
+import { THEME, TINYMCE_API_KEY } from '@antscorp/antsomi-ui/es/constants';
 import { ATTACH_CAPTURE_TYPES, ATTACH_KEYS, DEFAULT_POSITIONS, MENU_KEYS, MESSAGE_TYPE, PORTALS_ANTSOMI_PACKAGE_UI_KEY, PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP, REPORT_TYPES, TICKET_CUSTOM_MESSAGE_KEY, } from './constants';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Utils
+import { BugIcon, CameraIcon, OpenUrlIcon, RequestIcon, ScreenshotMonitorIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 import { base64ToFile, convertBlobToFile, generateUniqueId, mergeAudioStreams, } from '@antscorp/antsomi-ui/es/components/molecules/CaptureScreen/utils';
 import { expendDefault, formatParams, postCustomEvent } from './utils';
-import { CameraIcon, CaptureIcon, OpenUrlIcon, BugIcon, RequestIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 const antIcon = React.createElement(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
 const Loading = ({ isLoading, height, width }) => isLoading && (React.createElement(WrapperLoading, { className: "loader-container", height: height, width: width },
     React.createElement(Spin, { indicator: antIcon })));
 const Help = props => {
     const { configs, triggerType, boundsDraggable, isShowResizeHover, children } = props;
     const { apiKey, domainPlatform, appCode, domain, portalId, token, userId, config, domainTicket, avatar, } = configs;
-    const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+    // const [isOpenDropdown, setIsOpenDropdown] = useState<boolean>(false);
     const [defaultPositionDrawActions, setDefaultPositionDrawActions] = useState(DEFAULT_POSITIONS.capture);
     const [defaultPositionRecordActions, setDefaultPositionRecordActions] = useState(DEFAULT_POSITIONS.record);
     const [isMainLoading, setIsMainLoading] = useState(false);
@@ -84,7 +84,7 @@ const Help = props => {
     });
     const [isOpenImageDrawer, setIsOpenImageDrawer] = useState(false);
     const [captureType, setCaptureType] = useState(ATTACH_KEYS.CAPTURE);
-    const [open, setOpen] = useState(false);
+    // const [open, setOpen] = useState<boolean>(false);
     const [dataRecorded, setDataRecorded] = useState([]);
     const [dataListHelp, setDataListHelp] = useState([]);
     const [isMute, setIsMute] = useState(false);
@@ -98,6 +98,7 @@ const Help = props => {
     const [allAppOptions, setAllAppOptions] = useState([]);
     const [isForceStopRecorder, setIsForceStopRecorder] = useState(false);
     const [isLoadingListHelp, setIsLoadingHelp] = useState(true);
+    const fetchingRef = useRef(false);
     const recorderRef = useRef();
     const streamTracks = useRef();
     const allAppOptionsRef = useRef([]);
@@ -109,21 +110,15 @@ const Help = props => {
         var _a;
         return [
             {
-                label: (React.createElement("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer" },
+                label: (React.createElement("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' } },
                     React.createElement(Label, { style: {
-                            position: 'relative',
                             display: 'flex',
                             alignItems: 'center',
                             gap: 33,
                             width: '100%',
-                            marginTop: 8,
                         } },
                         "New features & announcements",
-                        React.createElement(OpenUrlIcon, { style: {
-                                fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
-                                maxWidth: 24,
-                                maxHeight: 24,
-                            } })))),
+                        React.createElement(OpenUrlIcon, { size: 20, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon })))),
                 key: MENU_KEYS.FEATURE_ANNOUNCEMENT,
             },
             {
@@ -131,18 +126,18 @@ const Help = props => {
                 key: MENU_KEYS.FEEDBACK,
             },
             {
-                label: React.createElement(Label, null, "Get Help"),
+                label: React.createElement(Label, null, "Get help"),
                 key: MENU_KEYS.HELP,
             },
             {
-                label: React.createElement(Label, null, "Get ideas with ChatGPT"),
+                label: React.createElement(Label, null, "Get ideas with Antsomi Intelligence"),
                 key: MENU_KEYS.CHAT,
             },
             {
                 type: 'divider',
             },
             {
-                label: (React.createElement("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer" },
+                label: (React.createElement("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' } },
                     React.createElement(Label, { className: "verify-support" }, "Verify support request"))),
                 key: MENU_KEYS.SUPPORT,
             },
@@ -155,9 +150,28 @@ const Help = props => {
         }
         return domain;
     }, [domain]);
-    const handleCancel = () => {
-        setOpen(false);
+    const fetchDataListHelp = () => {
+        setIsLoadingHelp(true);
+        TicketService.help.callApi
+            .getList({ appCode, role: '1' }, domainPlatform, token, config, userId)
+            .then(res => {
+            if (res && res.data.code === 200 && res.data) {
+                const { data } = res.data;
+                setDataListHelp(data);
+                setIsLoadingHelp(false);
+                setExpandedKeys(expendDefault(data));
+            }
+            else {
+                setIsLoadingHelp(true);
+            }
+        })
+            .catch(err => {
+            // console.log('err ===>', err)
+        });
     };
+    // const handleCancel = () => {
+    //   setOpen(false);
+    // };
     const handleClick = (data) => {
         const { key = '' } = data;
         switch (key) {
@@ -181,7 +195,7 @@ const Help = props => {
                 break;
             }
             default: {
-                setIsOpenDropdown(false);
+                // setIsOpenDropdown(false);
                 break;
             }
         }
@@ -231,7 +245,8 @@ const Help = props => {
                 setIsMainLoading(false);
             }
         });
-        if (isEmpty(allAppOptions)) {
+        if (!fetchingRef.current && isEmpty(allAppOptions)) {
+            fetchingRef.current = true;
             handleFetchAllApps();
         }
     }, [allAppOptions, config, domainTicket, token, userId]);
@@ -267,7 +282,7 @@ const Help = props => {
         setUrlImageDrawer('');
         setUrlVideoPreview('');
         setIsValidAll(true);
-        setIsOpenDropdown(false);
+        // setIsOpenDropdown(false);
         setValueInput(prev => (Object.assign(Object.assign({}, prev), { message: '', title: '', files: [] })));
         setIsShowPopup(false);
         setErrFile({
@@ -306,25 +321,6 @@ const Help = props => {
             }
         }
     }, []);
-    const fetchDataListHelp = () => {
-        setIsLoadingHelp(true);
-        TicketService.help.callApi
-            .getList({ appCode, role: '1' }, domainPlatform, token, config, userId)
-            .then(res => {
-            if (res && res.data.code === 200 && res.data) {
-                const { data } = res.data;
-                setDataListHelp(data);
-                setIsLoadingHelp(false);
-                setExpandedKeys(expendDefault(data));
-            }
-            else {
-                setIsLoadingHelp(true);
-            }
-        })
-            .catch(err => {
-            // console.log('err ===>', err)
-        });
-    };
     const handleCreateRecorder = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
             let controller;
@@ -382,7 +378,7 @@ const Help = props => {
             };
             setIsForceStopRecorder(false);
             setIsOpenImageDrawer(true);
-            handleCancel();
+            // handleCancel();
             setIsShowPopup(false);
         }
         catch (error) {
@@ -444,7 +440,7 @@ const Help = props => {
                 // passing canvas data url as screenshot preview src
                 setUrlImageDrawer(canvas.toDataURL());
                 setIsOpenImageDrawer(true);
-                handleCancel();
+                // handleCancel();
                 setIsShowPopup(false);
             });
             video.srcObject = stream; // passing capture stream data as video source object
@@ -534,7 +530,7 @@ const Help = props => {
     };
     useEffect(() => {
         const handleEvent = e => {
-            const { type, helpType, helpInfo } = e.data;
+            const { type, helpType, helpInfo, dataImage } = e.data;
             if (!type || !helpType || !helpInfo) {
                 return;
             }
@@ -544,6 +540,12 @@ const Help = props => {
                         setIsShowPopup(true);
                         callback(REPORT_TYPES[helpType]);
                         setValueInput(prev => (Object.assign(Object.assign({}, prev), helpInfo)));
+                        if (dataImage) {
+                            setImageDrew({
+                                imageName: dataImage.imageName,
+                                dataURL: dataImage.dataUrl,
+                            });
+                        }
                         if (helpInfo.feature && Array.isArray(allAppOptions)) {
                             const targetApp = allAppOptionsRef.current.find(item => item.value === helpInfo.feature);
                             if (targetApp)
@@ -719,9 +721,9 @@ const Help = props => {
         setAutoExpandParent(true);
     };
     const renderIcon = (name, style) => ({
-        'icon-ants-capture': React.createElement(CaptureIcon, { style: style }),
+        'icon-ants-capture': React.createElement(ScreenshotMonitorIcon, { style: style }),
         'icon-ants-camera': React.createElement(CameraIcon, { style: style }),
-    }[name]);
+    })[name];
     const treeData = useMemo(() => {
         const loop = (data) => data.map(item => {
             const strTitle = item.title;
@@ -744,17 +746,21 @@ const Help = props => {
         return loop(dataListHelp);
     }, [searchValue, dataListHelp]);
     const renderAttachActions = () => ATTACH_CAPTURE_TYPES.map(item => {
-        var _a, _b, _c;
+        var _a, _b;
         return (React.createElement(ControlGroup, { key: item.key, size: 10, direction: "vertical", style: { width: 'auto' } },
+            React.createElement(ButtonFeedback, { height: 30, borderRadiusCustom: 3, icon: renderIcon(item.icon, {
+                    fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
+                    maxWidth: '24px',
+                }), onClick: () => handleShareCapture(item.key)() }, item.label),
             ((item.key === ATTACH_KEYS.CAPTURE && imageDrew.dataURL) ||
                 (!isForceStopRecorder &&
                     !isEmpty(dataRecorded) &&
                     urlVideoPreview &&
                     item.key === ATTACH_KEYS.RECORD)) && (React.createElement(PreviewBox, null,
                 React.createElement(Overlay, { className: "overlay-preview" },
-                    React.createElement(FlexCenter, { style: { height: '100%', gap: 10 } }, (_a = item.actions) === null || _a === void 0 ? void 0 : _a.map(action => {
+                    React.createElement(FlexCenter, { style: { height: '100%', gap: 10 } }, (_b = item.actions) === null || _b === void 0 ? void 0 : _b.map(action => {
                         var _a, _b;
-                        return (React.createElement(ButtonFeedback, { key: `${item.key}-${action.key}`, height: 28, style: {
+                        return (React.createElement(ButtonFeedback, { key: `${item.key}-${action.key}`, height: 30, style: {
                                 borderRadius: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px`,
                                 width: 34,
                             }, borderRadiusCustom: 3, icon: React.createElement(Icon, { type: action.icon, style: {
@@ -762,24 +768,10 @@ const Help = props => {
                                     fontSize: '24px',
                                 } }), onClick: () => handleChangeAttachFile(item.key, action.key) }));
                     }))),
-                item.key === ATTACH_KEYS.CAPTURE ? (React.createElement(Image, { src: imageDrew.dataURL, alt: "send feedback", isFull: true })) : (React.createElement(Video, { src: urlVideoPreview, muted: true, autoPlay: false, controls: false })))),
-            React.createElement(ButtonFeedback, { height: 28, borderRadiusCustom: 3, style: {
-                    borderRadius: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius}px`,
-                    marginBottom: 58,
-                }, icon: 
-                // <Icon
-                //   type={item.icon}
-                //   style={{ color: `${THEME.token?.colorPrimary}`, fontSize: '24px' }}
-                // />
-                renderIcon(item.icon, {
-                    fill: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-                    maxWidth: '24px',
-                }), 
-                // onClick={() => showModal(item.key)}
-                onClick: () => handleShareCapture(item.key)() }, item.label)));
+                item.key === ATTACH_KEYS.CAPTURE ? (React.createElement(Image, { src: imageDrew.dataURL, alt: "send feedback", isFull: true })) : (React.createElement(Video, { src: urlVideoPreview, muted: true, autoPlay: false, controls: false }))))));
     });
     const renderContentPopup = (type) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         switch (type) {
             case REPORT_TYPES.FEEDBACK: {
                 return (React.createElement(SendFeedback, null,
@@ -814,25 +806,28 @@ const Help = props => {
             case REPORT_TYPES.IDEA:
             case REPORT_TYPES.ISSUE: {
                 return (React.createElement(ControlGroup, { size: 20, direction: "vertical" },
-                    React.createElement(ControlGroup, { size: 0, direction: "vertical" },
-                        React.createElement(ControlLabel, null, "When you noticed this issue, what were you trying to do?"),
+                    React.createElement(ControlGroup, { size: 5, direction: "vertical" },
+                        React.createElement(ControlLabel, null,
+                            "When you noticed this issue, what were you trying to do?",
+                            ' ',
+                            React.createElement("span", { style: { color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.red8 } }, "*")),
                         React.createElement(Select, { defaultValue: appTargeting, value: appTargeting, style: { width: '100%' }, onChange: (_, option) => setAppTargeting(option), options: allAppOptions })),
-                    React.createElement(ControlGroup, { size: 0, direction: "vertical" },
+                    React.createElement(ControlGroup, { size: 5, direction: "vertical" },
                         React.createElement(ControlLabel, null,
                             "Title ",
-                            React.createElement("span", { style: { color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.red8 } }, "*")),
+                            React.createElement("span", { style: { color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.red8 } }, "*")),
                         React.createElement(Input, { placeholder: "Enter ticket title", value: valueInput.title, onChange: event => {
                                 const { value } = event === null || event === void 0 ? void 0 : event.target;
                                 event.stopPropagation();
                                 setValueInput(prev => (Object.assign(Object.assign({}, prev), { title: value })));
                             } }),
                         React.createElement(ErrorMessage, { isShow: !isValidAll && !(valueInput === null || valueInput === void 0 ? void 0 : valueInput.title) }, "*This field can't be empty")),
-                    React.createElement(ControlGroup, { size: 0, direction: "vertical" },
+                    React.createElement(ControlGroup, { size: 5, direction: "vertical" },
                         React.createElement(ControlLabel, null,
                             "Message ",
-                            React.createElement("span", { style: { color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.red8 } }, "*")),
+                            React.createElement("span", { style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.red8 } }, "*")),
                         React.createElement(EditorWrapper, null,
-                            React.createElement(Editor, { apiKey: apiKey, value: valueInput.message, init: {
+                            React.createElement(Editor, { apiKey: apiKey || TINYMCE_API_KEY, value: valueInput.message, init: {
                                     height: 200,
                                     width: '100%',
                                     max_height: 800,
@@ -868,7 +863,7 @@ const Help = props => {
                                 // outputFormat='text'
                                 onEditorChange: content => setValueInput(prevVal => (Object.assign(Object.assign({}, prevVal), { message: content }))) }),
                             React.createElement("div", null,
-                                ((_e = valueInput.files) === null || _e === void 0 ? void 0 : _e.length) > 0 && (React.createElement(WrapperLinkFiles, null, (_f = valueInput.files) === null || _f === void 0 ? void 0 : _f.map(file => {
+                                ((_f = valueInput.files) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(WrapperLinkFiles, null, (_g = valueInput.files) === null || _g === void 0 ? void 0 : _g.map(file => {
                                     var _a, _b, _c;
                                     return (React.createElement(WrapperLinkItemFiles, { key: file === null || file === void 0 ? void 0 : file.token },
                                         React.createElement("span", { style: {
@@ -890,11 +885,11 @@ const Help = props => {
                                                 cursor: 'pointer',
                                             }, onClick: () => handleRemoveFile(file === null || file === void 0 ? void 0 : file.token) }, "clear")));
                                 }))),
-                                React.createElement(WrapperIconEditor, { borderTop: Boolean((_g = valueInput.files) === null || _g === void 0 ? void 0 : _g.length) },
+                                React.createElement(WrapperIconEditor, { borderTop: Boolean((_h = valueInput.files) === null || _h === void 0 ? void 0 : _h.length) },
                                     React.createElement(WrapperInputFile, null,
                                         React.createElement("label", { htmlFor: "fileImage" },
                                             React.createElement(Icon, { type: "icon-ants-hyperlink", style: {
-                                                    color: (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.colorPrimary,
+                                                    color: (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorPrimary,
                                                     fontSize: '24px',
                                                     position: 'absolute',
                                                     top: 0,
@@ -908,7 +903,7 @@ const Help = props => {
                                                 display: 'none',
                                             }, name: "fileImage", id: "fileImage", onChange: handleOnchangeFile }))))),
                         errFile.isError ? (React.createElement(ErrorMessage, { isShow: errFile.isError }, errFile.message)) : (React.createElement(ErrorMessage, { isShow: !isValidAll && !(valueInput === null || valueInput === void 0 ? void 0 : valueInput.message) }, "*This field can't be empty"))),
-                    React.createElement(ControlGroup, { size: 0, direction: "vertical" },
+                    React.createElement(ControlGroup, { size: 10, direction: "vertical" },
                         React.createElement(ControlLabel, null, "Attached Screenshot/ Video Recorded"),
                         React.createElement(FlexCenter, { style: {
                                 justifyContent: 'flex-start',
@@ -977,19 +972,14 @@ const Help = props => {
                         } }))))));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropDown, { menu: {
+        React.createElement(Dropdown, { menu: {
                 style: { minWidth: 250, padding: 0 },
                 items: items,
                 onClick: info => handleClick(info),
-            }, onOpenChange: isOpen => setIsOpenDropdown(isOpen), trigger: triggerType, placement: "bottom", className: "dropdown-helps" }, children || (React.createElement(Button, { style: {
-                width: 36,
-                height: 36,
-                borderRadius: '5px',
-            }, icon: React.createElement(QuestionCircleOutlined, { style: {
-                    color: '#666666',
-                    fontSize: '24px',
-                    transform: 'unset',
-                } }), className: `${isOpenDropdown ? 'antsomi-btn-default-active' : ''}`, onClick: e => e.preventDefault() }))),
+            }, 
+            // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
+            trigger: triggerType, placement: "bottomRight" }, children || (React.createElement(IconButtonStyled, null,
+            React.createElement(Icon, { type: "icon-ants-help" })))),
         isShowPopup &&
             createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                     display: 'flex',
@@ -1011,7 +1001,7 @@ Help.defaultProps = {
     boundsDraggable: 'body',
     isShowResizeHover: true,
     configs: {
-        apiKey: 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35',
+        apiKey: TINYMCE_API_KEY,
         domain: '//sandbox-app.cdp.asia',
         domainTicket: 'https://sandbox-issue.antsomi.com',
         portalId: '33167',

package/es/components/organism/Help/styled.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-export declare const DropDown: import("styled-components").StyledComponent<import("react").FC<import("antd").DropDownProps> & {
-    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd").DropDownProps>;
-} & {
-    Button: import("react").FC<import("antd/es/dropdown").DropdownButtonProps>;
-}, any, {}, never>;
 export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {
@@ -58,14 +53,17 @@ export declare const TitleSearch: import("styled-components").StyledComponent<"s
 export declare const WrapperSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>, any, {}, never>;
 export declare const TreeContent: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
     DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
         children?: import("react").ReactNode;
-    } & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    } & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
 }, any, {}, never>;
 export declare const Span: import("styled-components").StyledComponent<"span", any, {
     styles: any;
 }, never>;
+export declare const IconButtonStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

package/es/components/organism/Help/styled.js

@@ -1,31 +1,23 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
 // Libraries
-import { Dropdown, Button, Space, Typography, Tree, Input } from 'antd';
+import { Space, Typography, Tree, Input } from 'antd';
 import styled, { css } from 'styled-components';
-// Constantsim
+import { Button } from '../../atoms';
+// Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
 const { Text: AntText } = Typography;
 const { Search } = Input;
-export const DropDown = styled(Dropdown) `
-  .verify-support span {
-    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
-    font-weight: medium;
-  }
-`;
 export const ButtonFeedback = styled(Button) `
   width: 200px;
   height: ${props => (props.height ? props.height : 36)}px !important;
-  border-radius: ${props => (props.borderRadiusCustom ? props.borderRadiusCustom : 5)}px !important;
-  border: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1} !important;
   z-index: 10;
 `;
 export const PreviewBox = styled.div `
   position: relative;
   width: 200px;
   height: 125px;
-  background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw0};
+  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
   cursor: pointer;
   overflow: hidden;
 
@@ -46,16 +38,12 @@ export const Overlay = styled.div `
 `;
 export const Text = styled.span `
   font-weight: normal !important;
-  color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorText} !important;
-  font-size: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.fontSize}px !important;
+  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText} !important;
+  font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSize}px !important;
 `;
 export const Label = styled.span `
   &.verify-support {
-    display: inline-block;
-    padding: 5px 0;
-    color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
-    font-size: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.fontSize}px;
-    font-weight: 500;
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
   }
 `;
 export const SendFeedback = styled.div `
@@ -65,8 +53,8 @@ export const ControlGroup = styled(Space) `
   width: 100%;
 `;
 export const ControlLabel = styled(AntText) `
-  font-size: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.fontSize}px !important;
-  color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw8} !important;
+  font-size: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontSize}px !important;
+  color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw8} !important;
 `;
 export const FlexCenter = styled.div `
   display: flex;
@@ -84,7 +72,7 @@ export const HiddenBlock = styled.div `
   right: 0;
   width: 17px;
   height: 50px;
-  background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw0};
+  background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0};
 `;
 export const WrapperImage = styled.div `
   position: relative;
@@ -108,7 +96,7 @@ export const Video = styled.video `
 export const WrapperHeader = styled.strong `
   display: block;
   height: 50px;
-  border-bottom: 1px solid ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw3};
+  border-bottom: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw3};
   line-height: 50px;
   padding-left: 15px;
   box-sizing: border-box;
@@ -119,7 +107,7 @@ export const WrapperHeader = styled.strong `
 `;
 export const Header = styled(AntText) `
   font-size: 16px !important;
-  color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.colorText} !important;
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText} !important;
   font-weight: normal !important;
 `;
 export const WrapperBody = styled.div `
@@ -135,8 +123,8 @@ export const WrapperFooter = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw3};
-  background-color: ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw0};
+  border-top: 1px solid ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3};
+  background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -147,8 +135,8 @@ export const WrapperFooterSpace = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw3};
-  background-color: ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw0};
+  border-top: 1px solid ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw3};
+  background-color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -158,28 +146,28 @@ export const WrapperFooterSpace = styled.div `
 `;
 export const EditorWrapper = styled.div `
   .tox-tinymce {
-    border: 1px solid ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw3_5};
+    border: 1px solid ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw3_5};
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
   }
 `;
 export const WrapperLinkFiles = styled.div `
-  border-right: 1px solid ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw3_5};
-  border-left: 1px solid ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw3_5};
+  border-right: 1px solid ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw3_5};
+  border-left: 1px solid ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw3_5};
   display: flex;
   flex-direction: column;
   padding: 8px;
   gap: 4px;
 `;
 export const WrapperLinkItemFiles = styled.div `
-  color: ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.bw10};
+  color: ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw10};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 export const WrapperIconEditor = styled.div `
   height: 44px;
-  border: 1px solid ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw3_5};
+  border: 1px solid ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw3_5};
   border-top: ${props => { var _a; return (props.borderTop ? `1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3_5}` : 'none'); }};
   display: flex;
   align-items: center;
@@ -208,15 +196,15 @@ export const WrapperBodyModal = styled.div `
 `;
 export const ErrorMessage = styled.div `
   display: ${props => (props.isShow ? 'block' : 'none')};
-  color: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.red8};
+  color: ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.red8};
   font-size: 11px;
   line-height: 24px;
-  font-family: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.fontFamily};
+  font-family: ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.fontFamily};
 `;
 export const Wrapper = styled.div ``;
 export const LabelTitle = styled(AntText) `
   font-size: 13px !important;
-  color: ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.colorText} !important;
+  color: ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorText} !important;
   font-weight: bold;
 `;
 export const WrapperContentHelp = styled.div `
@@ -230,7 +218,7 @@ export const Link = styled.a `
   font-size: 12px;
   text-decoration: none;
   color: #005fb8;
-  font-family: ${(_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.fontFamily};
+  font-family: ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.fontFamily};
   font-weight: bold;
 `;
 export const IframeHelp = styled.iframe `
@@ -262,3 +250,18 @@ export const TreeContent = styled(Tree) `
 export const Span = styled.span `
   font-weight: ${props => (props.styles && props.styles.length > 0 ? 'bold' : 'normal')};
 `;
+export const IconButtonStyled = styled(Button) `
+  background-color: transparent !important;
+  color: #666666 !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+  height: 36px !important;
+  width: 36px !important;
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    color: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.blue7} !important;
+    background-color: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.blue1_1} !important;
+    border: 1px solid ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.blue7} !important;
+  }
+`;

package/es/components/organism/Help/types.d.ts

@@ -5,7 +5,7 @@ type ConfigProps = {
     domain: string;
     domainTicket: string;
     token: string;
-    apiKey: string;
+    apiKey?: string;
     portalId: string;
     config: any;
     userId: string;
@@ -33,7 +33,7 @@ export interface IHelpProps {
     configs: ConfigProps;
     boundsDraggable?: string;
     isShowResizeHover?: boolean;
-    triggerType: TriggerTypeDropdown;
+    triggerType?: TriggerTypeDropdown;
     onClick?: Function;
     children?: ReactNode;
 }

package/es/components/organism/LeftMenu/LeftMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LeftMenuProps } from '../../..';
+export declare const LeftMenuComponent: React.FC<LeftMenuProps>;