@antscorp/antsomi-ui 1.3.2 → 1.3.3-beta.2

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

@@ -0,0 +1,1005 @@
+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 };