@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

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

@@ -1,58 +1,38 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/iframe-has-title */
 /* 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 { 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 antIcon = _jsx(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
+const Loading = ({ isLoading, height, width }) => isLoading && (_jsx(WrapperLoading, { className: "loader-container", height: height, width: width, children: _jsx(Spin, { indicator: antIcon }) }));
 const Help = props => {
-    const { configs, triggerType, boundsDraggable, isShowResizeHover, children } = props;
+    const { configs, triggerType, buttonProps, 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 +64,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 +78,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([]);
@@ -105,49 +86,36 @@ const Help = props => {
     //   setOpen(true);
     //   setCaptureType(captureKey);
     // };
-    const items = useMemo(() => {
-        var _a;
-        return [
-            {
-                label: (React.createElement("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer" },
-                    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,
-                            } })))),
-                key: MENU_KEYS.FEATURE_ANNOUNCEMENT,
-            },
-            {
-                label: React.createElement(Label, null, "Leave feedback"),
-                key: MENU_KEYS.FEEDBACK,
-            },
-            {
-                label: React.createElement(Label, null, "Get Help"),
-                key: MENU_KEYS.HELP,
-            },
-            {
-                label: React.createElement(Label, null, "Get ideas with ChatGPT"),
-                key: MENU_KEYS.CHAT,
-            },
-            {
-                type: 'divider',
-            },
-            {
-                label: (React.createElement("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer" },
-                    React.createElement(Label, { className: "verify-support" }, "Verify support request"))),
-                key: MENU_KEYS.SUPPORT,
-            },
-        ];
-    }, [domainTicket, portalId, userId]);
+    const items = useMemo(() => [
+        {
+            label: (_jsx("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' }, children: _jsxs(Label, { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 33,
+                        width: '100%',
+                    }, children: ["New features & announcements", _jsx(OpenUrlIcon, { size: 20, color: THEME.token?.colorIcon })] }) })),
+            key: MENU_KEYS.FEATURE_ANNOUNCEMENT,
+        },
+        {
+            label: _jsx(Label, { children: "Leave feedback" }),
+            key: MENU_KEYS.FEEDBACK,
+        },
+        {
+            label: _jsx(Label, { children: "Get help" }),
+            key: MENU_KEYS.HELP,
+        },
+        {
+            label: _jsx(Label, { children: "Get ideas with Antsomi Intelligence" }),
+            key: MENU_KEYS.CHAT,
+        },
+        {
+            type: 'divider',
+        },
+        {
+            label: (_jsx("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' }, children: _jsx(Label, { className: "verify-support", children: "Verify support request" }) })),
+            key: MENU_KEYS.SUPPORT,
+        },
+    ], [domainTicket, portalId, userId]);
     const modifiedDomain = useMemo(() => {
         const regex = /^(https?:)/;
         if (regex.test(domain)) {
@@ -155,9 +123,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) {
@@ -176,22 +163,25 @@ const Help = props => {
             }
             case MENU_KEYS.CHAT: {
                 setType(REPORT_TYPES.CHAT);
-                setTitle('Get ideas with ChatGPT');
+                setTitle('Antsomi Intelligence');
                 setIsShowPopup(true);
                 break;
             }
             default: {
-                setIsOpenDropdown(false);
+                // setIsOpenDropdown(false);
                 break;
             }
         }
     };
-    const handleUploadFile = (params) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleUploadFile = async (params) => {
         try {
             setIsMainLoading(true);
-            const res = yield TicketService.tickets.callApi.upload(params, domainTicket, token, config, userId, 'ticket');
+            const res = await TicketService.tickets.callApi.upload(params, domainTicket, token, config, userId, 'ticket');
             if (res.code === 200) {
-                setValueInput(prevVal => (Object.assign(Object.assign({}, prevVal), { files: [...valueInput.files, res.data] })));
+                setValueInput(prevVal => ({
+                    ...prevVal,
+                    files: [...valueInput.files, res.data],
+                }));
             }
         }
         catch (error) {
@@ -201,12 +191,12 @@ const Help = props => {
         finally {
             setIsMainLoading(false);
         }
-    });
+    };
     useEffect(() => {
-        const handleFetchAllApps = () => __awaiter(void 0, void 0, void 0, function* () {
+        const handleFetchAllApps = async () => {
             try {
                 setIsMainLoading(true);
-                const res = yield TicketService.tickets.callApi.getCustomFields({}, domainTicket, token, config, userId, 'get-custom-fields');
+                const res = await TicketService.tickets.callApi.getCustomFields({}, domainTicket, token, config, userId, 'get-custom-fields');
                 if (res && res.code === 200) {
                     const { data } = res;
                     if (data && Array.isArray(data.fields)) {
@@ -230,15 +220,15 @@ const Help = props => {
             finally {
                 setIsMainLoading(false);
             }
-        });
-        if (isEmpty(allAppOptions)) {
+        };
+        if (!fetchingRef.current && isEmpty(allAppOptions)) {
+            fetchingRef.current = true;
             handleFetchAllApps();
         }
     }, [allAppOptions, config, domainTicket, token, userId]);
     const handleOnchangeFile = e => {
-        var _a, _b;
         const limitSize = 50 * 1024 * 1024;
-        const sizeFile = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.files[0]) === null || _b === void 0 ? void 0 : _b.size;
+        const sizeFile = e.target?.files[0]?.size;
         if (sizeFile >= limitSize) {
             setErrFile({
                 isError: true,
@@ -260,15 +250,20 @@ const Help = props => {
     };
     const handleRemoveFile = token => {
         let newListFile = valueInput.files;
-        newListFile = newListFile.filter(list => (list === null || list === void 0 ? void 0 : list.token) !== token);
-        setValueInput(prevVal => (Object.assign(Object.assign({}, prevVal), { files: newListFile })));
+        newListFile = newListFile.filter(list => list?.token !== token);
+        setValueInput(prevVal => ({ ...prevVal, files: newListFile }));
     };
     const handleResetData = () => {
         setUrlImageDrawer('');
         setUrlVideoPreview('');
         setIsValidAll(true);
-        setIsOpenDropdown(false);
-        setValueInput(prev => (Object.assign(Object.assign({}, prev), { message: '', title: '', files: [] })));
+        // setIsOpenDropdown(false);
+        setValueInput(prev => ({
+            ...prev,
+            message: '',
+            title: '',
+            files: [],
+        }));
         setIsShowPopup(false);
         setErrFile({
             isError: false,
@@ -306,26 +301,7 @@ 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* () {
+    const handleCreateRecorder = async () => {
         try {
             let controller;
             if ('CaptureController' in window &&
@@ -342,8 +318,8 @@ const Help = props => {
                 controller,
                 selfBrowserSurface: 'include',
             };
-            const desktopStream = yield navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-            const voiceStream = yield navigator.mediaDevices.getUserMedia({
+            const desktopStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+            const voiceStream = await navigator.mediaDevices.getUserMedia({
                 video: false,
                 audio: !isMute,
             });
@@ -382,15 +358,15 @@ const Help = props => {
             };
             setIsForceStopRecorder(false);
             setIsOpenImageDrawer(true);
-            handleCancel();
+            // handleCancel();
             setIsShowPopup(false);
         }
         catch (error) {
             console.log('error :>', error);
             setIsShowPopup(true);
         }
-    });
-    const handleCaptureScreen = () => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const handleCaptureScreen = async () => {
         try {
             let controller;
             if ('CaptureController' in window &&
@@ -429,9 +405,9 @@ const Help = props => {
             if (supportedConstraints.frameRate) {
                 displayMediaOptions.video.frameRate = { max: 30 };
             }
-            const stream = yield navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+            const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
             const video = document.createElement('video');
-            video === null || video === void 0 ? void 0 : video.addEventListener('loadedmetadata', () => {
+            video?.addEventListener('loadedmetadata', () => {
                 const canvas = document.createElement('canvas');
                 const ctx = canvas.getContext('2d');
                 // passing video width & height as canvas width & height
@@ -439,12 +415,12 @@ const Help = props => {
                 canvas.height = video.videoHeight;
                 video.play(); // playing the video so the drawn image won't be black or blank
                 // drawing an image of the captured video stream
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
                 stream.getVideoTracks()[0].stop(); // terminating first video track of the stream
                 // 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
@@ -455,7 +431,7 @@ const Help = props => {
             console.info('Failed to capture screenshot!', error);
             setIsShowPopup(true);
         }
-    });
+    };
     const callback = (type, dataIn) => {
         switch (type) {
             case 'ON_CLOSE_POPUP': {
@@ -534,7 +510,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;
             }
@@ -543,7 +519,16 @@ const Help = props => {
                     if (REPORT_TYPES[helpType]) {
                         setIsShowPopup(true);
                         callback(REPORT_TYPES[helpType]);
-                        setValueInput(prev => (Object.assign(Object.assign({}, prev), helpInfo)));
+                        setValueInput(prev => ({
+                            ...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)
@@ -560,11 +545,11 @@ const Help = props => {
             window.removeEventListener('message', handleEvent);
         };
     }, []);
-    const handleCreateTicket = (params) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleCreateTicket = async (params) => {
         try {
             setIsMainLoading(true);
             let attachments = [];
-            const { imageDrew = {}, dataRecorded = [], type = '' } = params, restParams = __rest(params, ["imageDrew", "dataRecorded", "type"]);
+            const { imageDrew = {}, dataRecorded = [], type = '', ...restParams } = params;
             if (params.attachments && !isEmpty(params.attachments)) {
                 attachments = [...params.attachments];
             }
@@ -576,7 +561,7 @@ const Help = props => {
                     const uploadFileParams = {
                         data: uploadFormData,
                     };
-                    const res = yield TicketService.tickets.callApi.upload(uploadFileParams, domainTicket, token, config, userId, 'ticket');
+                    const res = await TicketService.tickets.callApi.upload(uploadFileParams, domainTicket, token, config, userId, 'ticket');
                     if (res && res.code === 200 && res.data) {
                         attachments.push(res.data.token);
                     }
@@ -589,14 +574,19 @@ const Help = props => {
                 if (videoFile) {
                     const uploadFormData = new FormData();
                     uploadFormData.append('file', videoFile);
-                    const res = yield TicketService.tickets.callApi.upload({ data: uploadFormData }, domainTicket, token, config, userId, 'ticket');
+                    const res = await TicketService.tickets.callApi.upload({ data: uploadFormData }, domainTicket, token, config, userId, 'ticket');
                     if (res && res.code === 200 && res.data) {
                         attachments.push(res.data.token);
                     }
                 }
             }
-            const dataToAPI = Object.assign(Object.assign({}, restParams), { attachments, networkId: Number(portalId), ticketType: type === REPORT_TYPES.ISSUE ? 'bug' : 'request' });
-            const res = yield TicketService.tickets.callApi.createTicket(dataToAPI, domainTicket, token, config, userId);
+            const dataToAPI = {
+                ...restParams,
+                attachments,
+                networkId: Number(portalId),
+                ticketType: type === REPORT_TYPES.ISSUE ? 'bug' : 'request',
+            };
+            const res = await TicketService.tickets.callApi.createTicket(dataToAPI, domainTicket, token, config, userId);
             if (res.code === 200) {
                 postCustomEvent(TICKET_CUSTOM_MESSAGE_KEY, {
                     type: MESSAGE_TYPE.TICKET_CREATE_STATUS,
@@ -618,17 +608,21 @@ const Help = props => {
         finally {
             setIsMainLoading(false);
         }
-    });
+    };
     const handleSubmit = () => {
         if (!valueInput.title || !valueInput.message) {
             setIsValidAll(false);
             return;
         }
         if (!errFile.isError) {
-            const params = formatParams(Object.assign(Object.assign({}, valueInput), { feature: appTargeting }));
-            handleCreateTicket(Object.assign(Object.assign({}, params), { type,
+            const params = formatParams({ ...valueInput, feature: appTargeting });
+            handleCreateTicket({
+                ...params,
+                type,
                 imageDrew,
-                dataRecorded, submitterId: Number(userId) }));
+                dataRecorded,
+                submitterId: Number(userId),
+            });
         }
     };
     // console.log('insideee.dev - data :>', valueInput, appTargeting, errFile);
@@ -719,19 +713,16 @@ const Help = props => {
         setAutoExpandParent(true);
     };
     const renderIcon = (name, style) => ({
-        'icon-ants-capture': React.createElement(CaptureIcon, { style: style }),
-        'icon-ants-camera': React.createElement(CameraIcon, { style: style }),
-    }[name]);
+        'icon-ants-capture': _jsx(ScreenshotMonitorIcon, { style: style }),
+        'icon-ants-camera': _jsx(CameraIcon, { style: style }),
+    })[name];
     const treeData = useMemo(() => {
         const loop = (data) => data.map(item => {
             const strTitle = item.title;
             const index = strTitle.toString().toLowerCase().indexOf(searchValue.toLowerCase());
             const beforeStr = strTitle.substring(0, index);
             const afterStr = strTitle.slice(index + searchValue.length);
-            const title = index > -1 ? (React.createElement(Span, { styles: item.children },
-                beforeStr,
-                React.createElement(TitleSearch, null, searchValue),
-                afterStr)) : (React.createElement(Span, { styles: item.children }, strTitle));
+            const title = index > -1 ? (_jsxs(Span, { styles: item.children, children: [beforeStr, _jsx(TitleSearch, { children: searchValue }), afterStr] })) : (_jsx(Span, { styles: item.children, children: strTitle }));
             if (item.children) {
                 return { title, key: item.key, children: loop(item.children) };
             }
@@ -743,275 +734,179 @@ const Help = props => {
         });
         return loop(dataListHelp);
     }, [searchValue, dataListHelp]);
-    const renderAttachActions = () => ATTACH_CAPTURE_TYPES.map(item => {
-        var _a, _b, _c;
-        return (React.createElement(ControlGroup, { key: item.key, size: 10, direction: "vertical", style: { width: 'auto' } },
-            ((item.key === ATTACH_KEYS.CAPTURE && imageDrew.dataURL) ||
+    const renderAttachActions = () => ATTACH_CAPTURE_TYPES.map(item => (_jsxs(ControlGroup, { size: 10, direction: "vertical", style: { width: 'auto' }, children: [_jsx(ButtonFeedback, { height: 30, borderRadiusCustom: 3, icon: renderIcon(item.icon, {
+                    fill: THEME.token?.colorPrimary,
+                    maxWidth: '24px',
+                }), onClick: () => handleShareCapture(item.key)(), children: 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 => {
-                        var _a, _b;
-                        return (React.createElement(ButtonFeedback, { key: `${item.key}-${action.key}`, height: 28, 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: {
-                                    color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
-                                    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.RECORD)) && (_jsxs(PreviewBox, { children: [_jsx(Overlay, { className: "overlay-preview", children: _jsx(FlexCenter, { style: { height: '100%', gap: 10 }, children: item.actions?.map(action => (_jsx(ButtonFeedback, { height: 30, style: {
+                                    borderRadius: `${THEME.token?.borderRadius}px`,
+                                    width: 34,
+                                }, borderRadiusCustom: 3, icon: _jsx(Icon, { type: action.icon, style: {
+                                        color: THEME.token?.colorPrimary,
+                                        fontSize: '24px',
+                                    } }), onClick: () => handleChangeAttachFile(item.key, action.key) }, `${item.key}-${action.key}`))) }) }), item.key === ATTACH_KEYS.CAPTURE ? (_jsx(Image, { src: imageDrew.dataURL, alt: "send feedback", isFull: true })) : (_jsx(Video, { src: urlVideoPreview, muted: true, autoPlay: false, controls: false }))] }))] }, item.key)));
     const renderContentPopup = (type) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
         switch (type) {
             case REPORT_TYPES.FEEDBACK: {
-                return (React.createElement(SendFeedback, null,
-                    React.createElement(FlexCenter, null,
-                        React.createElement(WrapperImage, null,
-                            React.createElement(HiddenBlock, null),
-                            React.createElement(Image, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/aa5d68c3-40a2-425f-beb4-cb1abd89e8cb.png", alt: "send feedback", style: { maxWidth: 'unset' } }))),
-                    React.createElement(FlexCenter, { style: { margin: '50px 3px 0' } },
-                        React.createElement(FlexCenter, { onClick: e => {
-                                e.stopPropagation();
-                                callback(REPORT_TYPES.ISSUE);
-                            } },
-                            React.createElement(ButtonFeedback, { icon: 
-                                // <Icon
-                                //   type="icon-ants-bug"
-                                //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
-                                // />
-                                React.createElement(BugIcon, { style: { fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon, maxWidth: '24px' } }), style: { marginRight: 15 } },
-                                React.createElement(Text, null, "Report an Issue"))),
-                        React.createElement(FlexCenter, { onClick: e => {
-                                e.stopPropagation();
-                                callback(REPORT_TYPES.IDEA);
-                            } },
-                            React.createElement(ButtonFeedback, { icon: 
-                                // <Icon
-                                //   type="icon-ants-idea"
-                                //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
-                                // />
-                                React.createElement(RequestIcon, { style: { fill: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon, maxWidth: '24px' } }) },
-                                React.createElement(Text, null, "Request an Idea"))))));
+                return (_jsxs(SendFeedback, { children: [_jsx(FlexCenter, { children: _jsxs(WrapperImage, { children: [_jsx(HiddenBlock, {}), _jsx(Image, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/aa5d68c3-40a2-425f-beb4-cb1abd89e8cb.png", alt: "send feedback", style: { maxWidth: 'unset' } })] }) }), _jsxs(FlexCenter, { style: { margin: '50px 3px 0' }, children: [_jsx(FlexCenter, { onClick: e => {
+                                        e.stopPropagation();
+                                        callback(REPORT_TYPES.ISSUE);
+                                    }, children: _jsx(ButtonFeedback, { icon: 
+                                        // <Icon
+                                        //   type="icon-ants-bug"
+                                        //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
+                                        // />
+                                        _jsx(BugIcon, { style: { fill: THEME.token?.colorIcon, maxWidth: '24px' } }), style: { marginRight: 15 }, children: _jsx(Text, { children: "Report an Issue" }) }) }), _jsx(FlexCenter, { onClick: e => {
+                                        e.stopPropagation();
+                                        callback(REPORT_TYPES.IDEA);
+                                    }, children: _jsx(ButtonFeedback, { icon: 
+                                        // <Icon
+                                        //   type="icon-ants-idea"
+                                        //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
+                                        // />
+                                        _jsx(RequestIcon, { style: { fill: THEME.token?.colorIcon, maxWidth: '24px' } }), children: _jsx(Text, { children: "Request an Idea" }) }) })] })] }));
             }
             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(Select, { defaultValue: appTargeting, value: appTargeting, style: { width: '100%' }, onChange: (_, option) => setAppTargeting(option), options: allAppOptions })),
-                    React.createElement(ControlGroup, { size: 0, 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(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(ControlLabel, null,
-                            "Message ",
-                            React.createElement("span", { style: { color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.red8 } }, "*")),
-                        React.createElement(EditorWrapper, null,
-                            React.createElement(Editor, { apiKey: apiKey, value: valueInput.message, init: {
-                                    height: 200,
-                                    width: '100%',
-                                    max_height: 800,
-                                    max_width: 800,
-                                    menubar: false,
-                                    plugins: [
-                                        'advlist autolink lists link tinydrive image emoticons charmap print preview anchor',
-                                        'searchreplace visualblocks code fullscreen',
-                                        'insertdatetime media paste code help wordcount ', //
-                                    ],
-                                    toolbar: 'formatselect | bold italic underline strikethrough code | image emoticons | \
+                return (_jsxs(ControlGroup, { size: 20, direction: "vertical", children: [_jsxs(ControlGroup, { size: 5, direction: "vertical", children: [_jsxs(ControlLabel, { children: ["When you noticed this issue, what were you trying to do?", ' ', _jsx("span", { style: { color: THEME.token?.red8 }, children: "*" })] }), _jsx(Select, { defaultValue: appTargeting, value: appTargeting, style: { width: '100%' }, onChange: (_, option) => setAppTargeting(option), options: allAppOptions })] }), _jsxs(ControlGroup, { size: 5, direction: "vertical", children: [_jsxs(ControlLabel, { children: ["Title ", _jsx("span", { style: { color: THEME.token?.red8 }, children: "*" })] }), _jsx(Input, { placeholder: "Enter ticket title", value: valueInput.title, onChange: event => {
+                                        const { value } = event?.target;
+                                        event.stopPropagation();
+                                        setValueInput(prev => ({ ...prev, title: value }));
+                                    } }), _jsx(ErrorMessage, { isShow: !isValidAll && !valueInput?.title, children: "*This field can't be empty" })] }), _jsxs(ControlGroup, { size: 5, direction: "vertical", children: [_jsxs(ControlLabel, { children: ["Message ", _jsx("span", { style: { color: THEME.token?.red8 }, children: "*" })] }), _jsxs(EditorWrapper, { children: [_jsx(Editor, { apiKey: apiKey || TINYMCE_API_KEY, value: valueInput.message, init: {
+                                                height: 200,
+                                                width: '100%',
+                                                max_height: 800,
+                                                max_width: 800,
+                                                menubar: false,
+                                                plugins: [
+                                                    'advlist autolink lists link tinydrive image emoticons charmap print preview anchor',
+                                                    'searchreplace visualblocks code fullscreen',
+                                                    'insertdatetime media paste code help wordcount ', //
+                                                ],
+                                                toolbar: 'formatselect | bold italic underline strikethrough code | image emoticons | \
                                   forecolor backcolor preview link |\
                                   alignleft aligncenter alignright alignjustify outdent indent |\
                                   numlist bullist checklist undo redo',
-                                    tinydrive_token_provider: `//${modifiedDomain}/hub/thirdparty-services/v2.0/tinymce?portalId=${portalId}&token=${token}`,
-                                    skin: 'snow',
-                                    toolbar_mode: 'sliding',
-                                    content_css: false,
-                                    branding: false,
-                                    resize: false,
-                                    statusbar: false,
-                                    setup(editor) {
-                                        editor.on('init', e => {
-                                            var _a;
-                                            editor.getBody().style.fontSize = `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px`;
-                                        });
-                                    },
-                                    placeholder: 'Enter your comment...',
-                                    entity_encoding: 'raw',
-                                    paste_data_images: true,
-                                }, 
-                                // disabled={!!props.disabled}
-                                // 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 => {
-                                    var _a, _b, _c;
-                                    return (React.createElement(WrapperLinkItemFiles, { key: file === null || file === void 0 ? void 0 : file.token },
-                                        React.createElement("span", { style: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: '10px',
-                                            } },
-                                            React.createElement(Icon, { type: "icon-ants-hyperlink", style: {
-                                                    color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-                                                    fontSize: '24px',
-                                                } }, "link"),
-                                            React.createElement(Text, { style: {
-                                                    color: '#000',
-                                                    fontSize: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px`,
-                                                } }, file === null || file === void 0 ? void 0 : file.file_name)),
-                                        React.createElement(Icon, { type: "icon-ants-remove-slim", style: {
-                                                color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon,
-                                                fontSize: '12px',
-                                                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(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,
-                                                    fontSize: '24px',
-                                                    position: 'absolute',
-                                                    top: 0,
-                                                    right: 0,
-                                                    cursor: 'pointer',
-                                                } }, "link")),
-                                        React.createElement("input", { type: "file", style: {
-                                                position: 'absolute',
-                                                top: 0,
-                                                right: 0,
-                                                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(ControlLabel, null, "Attached Screenshot/ Video Recorded"),
-                        React.createElement(FlexCenter, { style: {
-                                justifyContent: 'flex-start',
-                                alignItems: 'flex-start',
-                                gap: 10,
-                            } }, renderAttachActions()))));
+                                                tinydrive_token_provider: `//${modifiedDomain}/hub/thirdparty-services/v2.0/tinymce?portalId=${portalId}&token=${token}`,
+                                                skin: 'snow',
+                                                toolbar_mode: 'sliding',
+                                                content_css: false,
+                                                branding: false,
+                                                resize: false,
+                                                statusbar: false,
+                                                setup(editor) {
+                                                    editor.on('init', e => {
+                                                        editor.getBody().style.fontSize = `${THEME.token?.fontSize}px`;
+                                                    });
+                                                },
+                                                placeholder: 'Enter your comment...',
+                                                entity_encoding: 'raw',
+                                                paste_data_images: true,
+                                            }, 
+                                            // disabled={!!props.disabled}
+                                            // outputFormat='text'
+                                            onEditorChange: content => setValueInput(prevVal => ({
+                                                ...prevVal,
+                                                message: content,
+                                            })) }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkFiles, { children: valueInput.files?.map(file => (_jsxs(WrapperLinkItemFiles, { children: [_jsxs("span", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: '10px',
+                                                                }, children: [_jsx(Icon, { type: "icon-ants-hyperlink", style: {
+                                                                            color: THEME.token?.colorPrimary,
+                                                                            fontSize: '24px',
+                                                                        }, children: "link" }), _jsx(Text, { style: {
+                                                                            color: '#000',
+                                                                            fontSize: `${THEME.token?.fontSize}px`,
+                                                                        }, children: file?.file_name })] }), _jsx(Icon, { type: "icon-ants-remove-slim", style: {
+                                                                    color: THEME.token?.colorIcon,
+                                                                    fontSize: '12px',
+                                                                    cursor: 'pointer',
+                                                                }, onClick: () => handleRemoveFile(file?.token), children: "clear" })] }, file?.token))) })), _jsx(WrapperIconEditor, { borderTop: Boolean(valueInput.files?.length), children: _jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: "fileImage", children: _jsx(Icon, { type: "icon-ants-hyperlink", style: {
+                                                                        color: THEME.token?.colorPrimary,
+                                                                        fontSize: '24px',
+                                                                        position: 'absolute',
+                                                                        top: 0,
+                                                                        right: 0,
+                                                                        cursor: 'pointer',
+                                                                    }, children: "link" }) }), _jsx("input", { type: "file", style: {
+                                                                    position: 'absolute',
+                                                                    top: 0,
+                                                                    right: 0,
+                                                                    display: 'none',
+                                                                }, name: "fileImage", id: "fileImage", onChange: handleOnchangeFile })] }) })] })] }), errFile.isError ? (_jsx(ErrorMessage, { isShow: errFile.isError, children: errFile.message })) : (_jsx(ErrorMessage, { isShow: !isValidAll && !valueInput?.message, children: "*This field can't be empty" }))] }), _jsxs(ControlGroup, { size: 10, direction: "vertical", children: [_jsx(ControlLabel, { children: "Attached Screenshot/ Video Recorded" }), _jsx(FlexCenter, { style: {
+                                        justifyContent: 'flex-start',
+                                        alignItems: 'flex-start',
+                                        gap: 10,
+                                    }, children: renderAttachActions() })] })] }));
             }
             case REPORT_TYPES.HELP: {
-                return (React.createElement(Wrapper, null,
-                    React.createElement(WrapperSearch, { placeholder: "Search...", onChange: onChange }),
-                    React.createElement("div", { style: { padding: '13px 15px' } },
-                        React.createElement(LabelTitle, null, "Popular Help Resources"),
-                        isLoadingListHelp && (React.createElement(WrapperLoading, { style: { background: 'none' }, height: "80%", width: "100%" },
-                            React.createElement(Spin, { indicator: antIcon }))),
-                        treeData.length > 0 &&
-                            treeData.map(item => (React.createElement(WrapperContentHelp, null,
-                                React.createElement(TreeContent, { onSelect: onSelect, onExpand: onExpand, treeData: [item], expandedKeys: expandedKeys, autoExpandParent: autoExpandParent })))))));
+                return (_jsxs(Wrapper, { children: [_jsx(WrapperSearch, { placeholder: "Search...", onChange: onChange }), _jsxs("div", { style: { padding: '13px 15px' }, children: [_jsx(LabelTitle, { children: "Popular Help Resources" }), isLoadingListHelp && (_jsx(WrapperLoading, { style: { background: 'none' }, height: "80%", width: "100%", children: _jsx(Spin, { indicator: antIcon }) })), treeData.length > 0 &&
+                                    treeData.map(item => (_jsx(WrapperContentHelp, { children: _jsx(TreeContent, { onSelect: onSelect, onExpand: onExpand, treeData: [item], expandedKeys: expandedKeys, autoExpandParent: autoExpandParent }) })))] })] }));
             }
             case REPORT_TYPES.CHAT: {
-                return (React.createElement(ChatBox, { domain: domainTicket, userId: userId, token: token, avatar: avatar, style: {
+                return (_jsx(ChatBox, { domain: domainTicket, userId: userId, token: token, avatar: avatar, style: {
                         height: 'calc(100% - 50px)',
                     }, withoutBox: true }));
             }
             case REPORT_TYPES.HELP_V1: {
-                return (React.createElement(Wrapper, null,
-                    React.createElement(IframeHelp, { src: pathHelp })));
+                return (_jsx(Wrapper, { children: _jsx(IframeHelp, { src: pathHelp }) }));
             }
             default: {
                 return null;
             }
         }
     };
-    const renderPopupLayout = (type) => {
-        var _a;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Loading, { isLoading: isMainLoading, width: "100%", height: "100%" }),
-            React.createElement(WrapperHeader, { className: "cursor" },
-                React.createElement(Header, null, title)),
-            React.createElement(WrapperBody, { className: "popup-content", style: {
+    const renderPopupLayout = (type) => (_jsxs(_Fragment, { children: [_jsx(Loading, { isLoading: isMainLoading, width: "100%", height: "100%" }), _jsx(WrapperHeader, { className: "cursor", children: _jsx(Header, { children: title }) }), _jsx(WrapperBody, { className: "popup-content", style: {
                     padding: type === REPORT_TYPES.CHAT ||
                         type === REPORT_TYPES.HELP ||
                         type === REPORT_TYPES.HELP_V1
                         ? '0'
                         : '13px 15px',
-                } }, renderContentPopup(type)),
-            ![
+                }, children: renderContentPopup(type) }), ![
                 REPORT_TYPES.FEEDBACK,
                 REPORT_TYPES.HELP,
                 REPORT_TYPES.CHAT,
                 REPORT_TYPES.HELP_V1,
-            ].includes(type) && (React.createElement(WrapperFooter, null,
-                React.createElement(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => handleSubmit() }, "Send"),
-                React.createElement(Button, { onClick: () => callback('ON_CLOSE_POPUP') }, "Cancel"))),
-            type === REPORT_TYPES.HELP_V1 && (React.createElement(WrapperFooterSpace, null,
-                React.createElement(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => callback('ON_BACK_POPUP') }, "BACK"),
-                React.createElement(Link, { target: "_blank", href: pathHelp, rel: "noreferrer", style: {
+            ].includes(type) && (_jsxs(WrapperFooter, { children: [_jsx(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => handleSubmit(), children: "Send" }), _jsx(Button, { onClick: () => callback('ON_CLOSE_POPUP'), children: "Cancel" })] })), type === REPORT_TYPES.HELP_V1 && (_jsxs(WrapperFooterSpace, { children: [_jsx(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => callback('ON_BACK_POPUP'), children: "BACK" }), _jsxs(Link, { target: "_blank", href: pathHelp, rel: "noreferrer", style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 7,
+                        }, children: ["Open in new tab", _jsx(OpenUrlIcon, { style: {
+                                    fill: THEME.token?.colorPrimary,
+                                    maxWidth: 18,
+                                    maxHeight: 18,
+                                } })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { menu: {
+                    style: { minWidth: 250, padding: 0 },
+                    items: items,
+                    onClick: info => handleClick(info),
+                }, 
+                // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
+                trigger: triggerType, placement: "bottomRight", children: children || (_jsx(IconButtonStyled, { ...buttonProps, children: _jsx(Icon, { type: "icon-ants-help" }) })) }), isShowPopup &&
+                createPortal(_jsx(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                         display: 'flex',
-                        alignItems: 'center',
-                        gap: 7,
-                    } },
-                    "Open in new tab",
-                    React.createElement(OpenUrlIcon, { style: {
-                            fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-                            maxWidth: 18,
-                            maxHeight: 18,
-                        } }))))));
-    };
-    return (React.createElement(React.Fragment, null,
-        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() }))),
-        isShowPopup &&
-            createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    textAlign: 'left',
-                } }, renderPopupLayout(type)), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP),
-        isOpenImageDrawer &&
-            createPortal(React.createElement(CaptureScreen, { recorderConfigs: {
-                    recorder: recorderRef.current,
-                    streamTracks: streamTracks.current,
-                    isMute,
-                }, defaultPositions: {
-                    [ATTACH_KEYS.CAPTURE]: defaultPositionDrawActions,
-                    [ATTACH_KEYS.RECORD]: defaultPositionRecordActions,
-                }, captureType: captureType, src: urlImageDrawer, callback: callback }), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY)));
+                        flexDirection: 'column',
+                        textAlign: 'left',
+                    }, children: renderPopupLayout(type) }), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP), isOpenImageDrawer &&
+                createPortal(_jsx(CaptureScreen, { recorderConfigs: {
+                        recorder: recorderRef.current,
+                        streamTracks: streamTracks.current,
+                        isMute,
+                    }, defaultPositions: {
+                        [ATTACH_KEYS.CAPTURE]: defaultPositionDrawActions,
+                        [ATTACH_KEYS.RECORD]: defaultPositionRecordActions,
+                    }, captureType: captureType, src: urlImageDrawer, callback: callback }), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY)] }));
 };
 Help.defaultProps = {
     triggerType: ['click'],
     boundsDraggable: 'body',
     isShowResizeHover: true,
     configs: {
-        apiKey: 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35',
+        apiKey: TINYMCE_API_KEY,
         domain: '//sandbox-app.cdp.asia',
         domainTicket: 'https://sandbox-issue.antsomi.com',
         portalId: '33167',