@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.2

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

@@ -1,1005 +0,0 @@
-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;
-};
-/* 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 { 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 Icon from '@antscorp/icons';
-import { Editor } from '@tinymce/tinymce-react';
-import { LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-// Atoms
-import { Input } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { PopupDraggable, Select, CaptureScreen, ChatBox, } from '@antscorp/antsomi-ui/es/components/molecules';
-// 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 { 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 [defaultPositionDrawActions, setDefaultPositionDrawActions] = useState(DEFAULT_POSITIONS.capture);
-    const [defaultPositionRecordActions, setDefaultPositionRecordActions] = useState(DEFAULT_POSITIONS.record);
-    const [isMainLoading, setIsMainLoading] = useState(false);
-    const [isShowPopup, setIsShowPopup] = useState(false);
-    const [title, setTitle] = useState('');
-    const [type, setType] = useState(REPORT_TYPES.HELP);
-    const [isValidAll, setIsValidAll] = useState(true);
-    const [valueInput, setValueInput] = useState({
-        title: '',
-        ticketType: '',
-        priority: 'normal',
-        category: '',
-        ownerId: Number(userId),
-        followers: [],
-        message: '',
-        files: [],
-        referenceUrl: '',
-    });
-    const [errFile, setErrFile] = useState({
-        isError: false,
-        message: '',
-    });
-    const [pathHelp, setHelp] = useState('');
-    const [urlImageDrawer, setUrlImageDrawer] = useState('');
-    const [urlVideoPreview, setUrlVideoPreview] = useState('');
-    const [imageDrew, setImageDrew] = useState({
-        imageName: '',
-        dataURL: '',
-    });
-    const [isOpenImageDrawer, setIsOpenImageDrawer] = useState(false);
-    const [captureType, setCaptureType] = useState(ATTACH_KEYS.CAPTURE);
-    const [open, setOpen] = useState(false);
-    const [dataRecorded, setDataRecorded] = useState([]);
-    const [dataListHelp, setDataListHelp] = useState([]);
-    const [isMute, setIsMute] = useState(false);
-    const [appTargeting, setAppTargeting] = useState({
-        label: '',
-        value: '',
-    });
-    const [autoExpandParent, setAutoExpandParent] = useState(true);
-    const [expandedKeys, setExpandedKeys] = useState([]);
-    const [searchValue, setSearchValue] = useState('');
-    const [allAppOptions, setAllAppOptions] = useState([]);
-    const [isForceStopRecorder, setIsForceStopRecorder] = useState(false);
-    const [isLoadingListHelp, setIsLoadingHelp] = useState(true);
-    const recorderRef = useRef();
-    const streamTracks = useRef();
-    // const showModal = (captureKey: CaptureTypeProps) => {
-    //   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 modifiedDomain = useMemo(() => {
-        const regex = /^(https?:)/;
-        if (regex.test(domain)) {
-            return domain.replace(regex, '');
-        }
-        return domain;
-    }, [domain]);
-    const handleCancel = () => {
-        setOpen(false);
-    };
-    const handleClick = (data) => {
-        const { key = '' } = data;
-        switch (key) {
-            case MENU_KEYS.FEEDBACK: {
-                setType(REPORT_TYPES.FEEDBACK);
-                setTitle('Send feedback to Antsomi');
-                setIsShowPopup(true);
-                break;
-            }
-            case MENU_KEYS.HELP: {
-                fetchDataListHelp();
-                setType(REPORT_TYPES.HELP);
-                setTitle('Get Help');
-                setIsShowPopup(true);
-                break;
-            }
-            case MENU_KEYS.CHAT: {
-                setType(REPORT_TYPES.CHAT);
-                setTitle('Get ideas with ChatGPT');
-                setIsShowPopup(true);
-                break;
-            }
-            default: {
-                setIsOpenDropdown(false);
-                break;
-            }
-        }
-    };
-    const handleUploadFile = (params) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            setIsMainLoading(true);
-            const res = yield 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] })));
-            }
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.log('error :>', error);
-        }
-        finally {
-            setIsMainLoading(false);
-        }
-    });
-    useEffect(() => {
-        const handleFetchAllApps = () => __awaiter(void 0, void 0, void 0, function* () {
-            try {
-                setIsMainLoading(true);
-                const res = yield 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)) {
-                        const features = data.fields.find(item => item.value === 'feature');
-                        const { field_options = [] } = features || {};
-                        const temp = field_options.map(app => ({
-                            label: app.name,
-                            value: app.value,
-                            raw: app,
-                        }));
-                        setAppTargeting(temp[0]);
-                        setAllAppOptions(temp);
-                    }
-                }
-            }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.log('error :>', error);
-            }
-            finally {
-                setIsMainLoading(false);
-            }
-        });
-        if (isEmpty(allAppOptions)) {
-            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;
-        if (sizeFile >= limitSize) {
-            setErrFile({
-                isError: true,
-                message: '*Maximum upload file size: 50MB',
-            });
-        }
-        else {
-            const formData = new FormData();
-            formData.append('file', e.target.files[0]);
-            const params = {
-                data: formData,
-            };
-            setErrFile({
-                isError: false,
-                message: '',
-            });
-            handleUploadFile(params);
-        }
-    };
-    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 })));
-    };
-    const handleResetData = () => {
-        setUrlImageDrawer('');
-        setUrlVideoPreview('');
-        setIsValidAll(true);
-        setIsOpenDropdown(false);
-        setValueInput(prev => (Object.assign(Object.assign({}, prev), { message: '', title: '', files: [] })));
-        setIsShowPopup(false);
-        setErrFile({
-            isError: false,
-            message: '',
-        });
-        setImageDrew({
-            imageName: '',
-            dataURL: '',
-        });
-        setDataRecorded([]);
-        setSearchValue('');
-        setAutoExpandParent(false);
-        setExpandedKeys([]);
-    };
-    useEffect(() => () => handleResetData(), []);
-    useEffect(() => {
-        if (dataRecorded) {
-            const dataRecordedBlob = new Blob(dataRecorded, { type: 'video/mp4' });
-            const url = URL.createObjectURL(dataRecordedBlob);
-            setUrlVideoPreview(url);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dataRecorded]);
-    useEffect(() => {
-        if (isForceStopRecorder && !isEmpty(dataRecorded)) {
-            setDataRecorded([]);
-            setIsForceStopRecorder(false);
-        }
-    }, [dataRecorded, isForceStopRecorder]);
-    useEffect(() => () => {
-        if (streamTracks.current) {
-            const { desktopStream, voiceStream } = streamTracks.current;
-            if (desktopStream && voiceStream) {
-                desktopStream.getTracks().forEach(track => track.stop());
-                voiceStream.getTracks().forEach(track => track.stop());
-            }
-        }
-    }, []);
-    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;
-            if ('CaptureController' in window &&
-                'setFocusBehavior' in window.CaptureController.prototype) {
-                controller = new window.CaptureController();
-                controller.setFocusBehavior('no-focus-change');
-            }
-            const displayMediaOptions = {
-                // preferCurrentTab: true,
-                video: {
-                    cursor: 'always',
-                },
-                audio: true,
-                controller,
-                selfBrowserSurface: 'include',
-            };
-            const desktopStream = yield navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-            const voiceStream = yield navigator.mediaDevices.getUserMedia({
-                video: false,
-                audio: !isMute,
-            });
-            const tracks = [
-                ...desktopStream.getVideoTracks(),
-                ...mergeAudioStreams(desktopStream, voiceStream),
-            ];
-            const stream = new MediaStream(tracks);
-            const recorder = new MediaRecorder(stream);
-            const data = [];
-            // ondataavailable -> fired periodically each time timeslice millisecond of media have been recorded
-            // or when the entire media is recorded if no timeslice is specified
-            recorder.ondataavailable = event => data.push(event.data);
-            const stopped = new Promise((resolve, reject) => {
-                recorder.onstop = resolve;
-                recorder.onerror = (event) => reject(event.name);
-            });
-            Promise.all([stopped, recorder]).then(() => {
-                setDataRecorded(data);
-            });
-            const videoTrack = desktopStream.getVideoTracks()[0];
-            // eslint-disable-next-line func-names
-            videoTrack.onended = function () {
-                if (recorder) {
-                    recorder.stop();
-                }
-                desktopStream.getTracks().forEach(track => track.stop());
-                voiceStream.getTracks().forEach(track => track.stop());
-                setIsShowPopup(true);
-                setIsOpenImageDrawer(false);
-            };
-            recorderRef.current = recorder;
-            streamTracks.current = {
-                desktopStream,
-                voiceStream,
-            };
-            setIsForceStopRecorder(false);
-            setIsOpenImageDrawer(true);
-            handleCancel();
-            setIsShowPopup(false);
-        }
-        catch (error) {
-            console.log('error :>', error);
-            setIsShowPopup(true);
-        }
-    });
-    const handleCaptureScreen = () => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            let controller;
-            if ('CaptureController' in window &&
-                'setFocusBehavior' in window.CaptureController.prototype) {
-                controller = new window.CaptureController();
-                controller.setFocusBehavior('no-focus-change');
-            }
-            const displayMediaOptions = {
-                // preferCurrentTab: true,
-                video: {
-                    displaySurface: 'browser',
-                    cursor: 'always',
-                },
-                audio: false,
-                surfaceSwitching: 'include',
-                controller,
-                selfBrowserSurface: 'include',
-            };
-            // navigator.mediaDevices.enumerateDevices().then(value => {
-            //   console.log('insideee.dev - list :>', value);
-            // });
-            // asking permission to use a media input to record current tab
-            const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
-            // if (supportedConstraints.displaySurface) {
-            //   displayMediaOptions.video.displaySurface = 'monitor';
-            // }
-            if (supportedConstraints.width) {
-                displayMediaOptions.video.width = { ideal: 1920, max: 1920 };
-            }
-            if (supportedConstraints.height) {
-                displayMediaOptions.video.heigh = { ideal: 1080 };
-            }
-            if (supportedConstraints.aspectRatio) {
-                displayMediaOptions.video.aspectRatio = 1.777777778;
-            }
-            if (supportedConstraints.frameRate) {
-                displayMediaOptions.video.frameRate = { max: 30 };
-            }
-            const stream = yield navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-            const video = document.createElement('video');
-            video === null || video === void 0 ? void 0 : video.addEventListener('loadedmetadata', () => {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                // passing video width & height as canvas width & height
-                canvas.width = video.videoWidth;
-                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);
-                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();
-                setIsShowPopup(false);
-            });
-            video.srcObject = stream; // passing capture stream data as video source object
-        }
-        catch (error) {
-            // if image couldn't capture by any reason, then alert the msg
-            // eslint-disable-next-line no-console
-            console.info('Failed to capture screenshot!', error);
-            setIsShowPopup(true);
-        }
-    });
-    const callback = (type, dataIn) => {
-        switch (type) {
-            case 'ON_CLOSE_POPUP': {
-                handleResetData();
-                break;
-            }
-            case 'ON_BACK_POPUP': {
-                setType(REPORT_TYPES.HELP);
-                break;
-            }
-            case REPORT_TYPES.ISSUE: {
-                setTitle('Report an issue to Antsomi');
-                setType(type);
-                break;
-            }
-            case REPORT_TYPES.IDEA: {
-                setTitle('Request an idea to Antsomi');
-                setType(type);
-                break;
-            }
-            case 'CLOSE_DRAWER': {
-                setIsOpenImageDrawer(false);
-                setIsShowPopup(true);
-                if (captureType === ATTACH_KEYS.CAPTURE) {
-                    setUrlImageDrawer('');
-                }
-                else if (captureType === ATTACH_KEYS.RECORD) {
-                    setIsForceStopRecorder(true);
-                    const recorder = recorderRef.current;
-                    const { desktopStream, voiceStream } = streamTracks.current;
-                    if (recorder && recorder.state === 'recording') {
-                        recorder.stop();
-                    }
-                    if (desktopStream && voiceStream) {
-                        desktopStream.getTracks().forEach(track => track.stop());
-                        voiceStream.getTracks().forEach(track => track.stop());
-                    }
-                }
-                break;
-            }
-            case 'ON_DRAWER_DONE': {
-                setIsOpenImageDrawer(false);
-                setImageDrew(dataIn);
-                setIsShowPopup(true);
-                break;
-            }
-            case 'STOP_RECORDER': {
-                setIsOpenImageDrawer(false);
-                setIsShowPopup(true);
-                streamTracks.current = undefined;
-                break;
-            }
-            case 'ON_CHANGE_MUTE': {
-                setIsMute(prevMute => !prevMute);
-                break;
-            }
-            case 'SET_POSITION_DRAG': {
-                const { name = '', x = 0, y = 0 } = dataIn;
-                if (name === ATTACH_KEYS.CAPTURE) {
-                    setDefaultPositionDrawActions({ x, y });
-                }
-                if (name === ATTACH_KEYS.RECORD) {
-                    setDefaultPositionRecordActions({ x, y });
-                }
-                break;
-            }
-            case 'RESET_POSITION_DRAG': {
-                setDefaultPositionDrawActions(DEFAULT_POSITIONS.capture);
-                setDefaultPositionRecordActions(DEFAULT_POSITIONS.record);
-                break;
-            }
-            default: {
-                break;
-            }
-        }
-    };
-    const handleCreateTicket = (params) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            setIsMainLoading(true);
-            let attachments = [];
-            const { imageDrew = {}, dataRecorded = [], type = '' } = params, restParams = __rest(params, ["imageDrew", "dataRecorded", "type"]);
-            if (params.attachments && !isEmpty(params.attachments)) {
-                attachments = [...params.attachments];
-            }
-            if (imageDrew.dataURL) {
-                const imageFile = base64ToFile(imageDrew.dataURL, `${imageDrew.imageName}-${generateUniqueId()}.png`);
-                if (imageFile) {
-                    const uploadFormData = new FormData();
-                    uploadFormData.append('file', imageFile);
-                    const uploadFileParams = {
-                        data: uploadFormData,
-                    };
-                    const res = yield TicketService.tickets.callApi.upload(uploadFileParams, domainTicket, token, config, userId, 'ticket');
-                    if (res && res.code === 200 && res.data) {
-                        attachments.push(res.data.token);
-                    }
-                }
-            }
-            if (!isEmpty(dataRecorded)) {
-                const blob = dataRecorded[0];
-                const blobName = `video-${generateUniqueId()}.mp4`;
-                const videoFile = convertBlobToFile(blob, blobName);
-                if (videoFile) {
-                    const uploadFormData = new FormData();
-                    uploadFormData.append('file', videoFile);
-                    const res = yield 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);
-            if (res.code === 200) {
-                postCustomEvent(TICKET_CUSTOM_MESSAGE_KEY, {
-                    type: MESSAGE_TYPE.TICKET_CREATE_STATUS,
-                    value: true,
-                });
-            }
-            else {
-                postCustomEvent(TICKET_CUSTOM_MESSAGE_KEY, {
-                    type: MESSAGE_TYPE.TICKET_CREATE_STATUS,
-                    value: false,
-                });
-            }
-            handleResetData();
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.log('error :>', error);
-        }
-        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,
-                imageDrew,
-                dataRecorded, submitterId: Number(userId) }));
-        }
-    };
-    // console.log('insideee.dev - data :>', valueInput, appTargeting, errFile);
-    const handleShareCapture = (type) => {
-        setCaptureType(type);
-        setIsShowPopup(false);
-        return () => {
-            if (type === ATTACH_KEYS.CAPTURE) {
-                handleCaptureScreen();
-            }
-            else {
-                handleCreateRecorder();
-            }
-        };
-    };
-    const handleChangeAttachFile = (key, type) => {
-        if (type === 'edit') {
-            // showModal(key);
-            handleShareCapture(key)();
-        }
-        else if (type === 'delete') {
-            if (key === ATTACH_KEYS.CAPTURE) {
-                setImageDrew({
-                    imageName: '',
-                    dataURL: '',
-                });
-            }
-            else if (key === ATTACH_KEYS.RECORD) {
-                setDataRecorded([]);
-            }
-        }
-    };
-    const onSelect = (selectedKeys, info) => {
-        const { node } = info;
-        const { path } = node;
-        if (path) {
-            setHelp(path);
-            setType(REPORT_TYPES.HELP_V1);
-        }
-        // console.log('selected', selectedKeys, info);
-    };
-    const onExpand = (newExpandedKeys) => {
-        setExpandedKeys(newExpandedKeys);
-        setAutoExpandParent(false);
-    };
-    const getParentKey = (key, tree) => {
-        let parentKey;
-        for (let i = 0; i < tree.length; i++) {
-            const node = tree[i];
-            if (node.children) {
-                if (node.children.some(item => item.key === key)) {
-                    parentKey = node.key;
-                }
-                else if (getParentKey(key, node.children)) {
-                    parentKey = getParentKey(key, node.children);
-                }
-            }
-        }
-        return parentKey;
-    };
-    // const onExpand: DirectoryTreeProps['onCheck'] = (checkedKeys, info) => {
-    //   console.log('onCheck', checkedKeys, info);
-    // };
-    const dataList = [];
-    const generateList = (data) => {
-        for (let i = 0; i < data.length; i++) {
-            const node = data[i];
-            const { key, title } = node;
-            dataList.push({ key, title });
-            if (node.children) {
-                generateList(node.children);
-            }
-        }
-    };
-    generateList(dataListHelp);
-    const onChange = (e) => {
-        const { value } = e.target;
-        const newExpandedKeys = dataList
-            .map(item => {
-            if (item.title.toString().toLowerCase().indexOf(value.toLowerCase()) > -1) {
-                return getParentKey(item.key, dataListHelp);
-            }
-            return null;
-        })
-            .filter((item, i, self) => item && self.indexOf(item) === i);
-        setExpandedKeys(newExpandedKeys);
-        setSearchValue(value);
-        setAutoExpandParent(true);
-    };
-    const renderIcon = (name, style) => ({
-        'icon-ants-capture': React.createElement(CaptureIcon, { style: style }),
-        'icon-ants-camera': React.createElement(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));
-            if (item.children) {
-                return { title, key: item.key, children: loop(item.children) };
-            }
-            return {
-                title,
-                key: item.key,
-                path: item.path,
-            };
-        });
-        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) ||
-                (!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)));
-    });
-    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"))))));
-            }
-            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 | \
-                                  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()))));
-            }
-            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 })))))));
-            }
-            case REPORT_TYPES.CHAT: {
-                return (React.createElement(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 })));
-            }
-            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: {
-                    padding: type === REPORT_TYPES.CHAT ||
-                        type === REPORT_TYPES.HELP ||
-                        type === REPORT_TYPES.HELP_V1
-                        ? '0'
-                        : '13px 15px',
-                } }, 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: {
-                        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)));
-};
-Help.defaultProps = {
-    triggerType: ['click'],
-    boundsDraggable: 'body',
-    isShowResizeHover: true,
-    configs: {
-        apiKey: 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35',
-        domain: '//sandbox-app.cdp.asia',
-        domainTicket: 'https://sandbox-issue.antsomi.com',
-        portalId: '33167',
-        userId: '1600080515',
-        token: '5474r2x214z254a4u2a4y4m503w5p2r5a4s2g4x2l5e4',
-        domainPlatform: 'https://platform.ants.tech',
-        appCode: 'APP_API_HUB',
-        avatar: 'https://c0-platform.ants.tech/avatar/2021/09/20/bldjzfbz33.png',
-        config: {
-            p_timezone: 'Asia/Hong_Kong',
-            api_pid: 33167,
-            p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
-            user_language: 'en',
-            embeddedData: {},
-            INSIGHT_U_OGS: 'uogs',
-        },
-    },
-    children: '',
-};
-export { Help };