widget-chatbot 1.0.0 → 1.0.1

package/live_chat_helpdesk/HelpdeskSender.js

@@ -1,287 +0,0 @@
-import React, { memo, useState, useMemo, useEffect } from 'react';
-import { Button, Tooltip, Upload } from 'antd';
-import TextareaAutosize from 'react-textarea-autosize';
-import AttachmentIcon from 'assets/icons/AttachmentIcon';
-import DeleteUploadIcon from 'assets/icons/DeleteUploadIcon';
-import LoadingLiveChatIcon from 'assets/LoadingLiveChatIcon';
-import Send from 'assets/send_button';
-import isStringNull from './helpers/isStringNull';
-import { useHelpdeskChatContext } from '../../HelpdeskChatContextProvider';
-import useFetch from '../../../../../../hooks/useFetch';
-import { useConversationContext } from '../../../../../../context/ConversationContextProvider';
-import ModalResult from '../../../../../../helpers/ModalResult';
-import getBase64 from '../../../../../../helpers/getBase64';
-import getTextWidth from '../../../../../../helpers/getTextWidth';
-import { useErrorBoundaryContext } from '../../../../../../context/ErrorBoundaryContextProvider';
-import useDictionary from '../../../../../../hooks/useDictionary';
-import { usePayloadContext } from '../../../../../../PayloadContextProvider';
-
-export const WrapperFileName = ({ fileName, children }) => {
-    const widthFileName = getTextWidth(fileName);
-
-    if (widthFileName > 250) {
-        return <Tooltip title={fileName}>{children}</Tooltip>;
-    }
-
-    return children;
-};
-
-const AttachmentField = () => {
-    const { chatState, setChatState } = useHelpdeskChatContext();
-    const [urlImage, setUrlImg] = useState('');
-
-    const isImage = useMemo(() => {
-        return chatState?.fileInput?.type?.includes('image');
-    }, [chatState?.fileInput]);
-
-    const onConvertImgToBase64 = async () => {
-        const base64Img = await getBase64(chatState?.fileInput);
-
-        setUrlImg(base64Img);
-    };
-
-    useEffect(() => {
-        if (chatState?.fileInput?.uid) {
-            onConvertImgToBase64();
-        }
-    }, [chatState?.fileInput?.uid]);
-
-    useEffect(() => {
-        // Monitor socket connection status
-        if (socket) {
-            console.log("Socket connection status:", socket.connected);
-        }
-    }, [socket]);
-
-    return (
-        <div className="rw-file-name">
-            <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-                {isImage ? (
-                    <img
-                        src={urlImage}
-                        style={{ width: 52, cursor: 'pointer' }}
-                        onClick={(e) => {
-                            e?.stopPropagation();
-
-                            setChatState((prev) => ({
-                                ...prev,
-                                isShowModalPreviewFile: true,
-                                urlImagePreview: urlImage,
-                            }));
-                        }}
-                    />
-                ) : (
-                    <AttachmentIcon className="rw-attachment-icon-list" />
-                )}
-                <WrapperFileName fileName={chatState?.fileInput?.name}>
-                    <p className="rw-file-name-text">{chatState?.fileInput?.name}</p>
-                </WrapperFileName>
-            </div>
-            <Button
-                style={{ color: 'rgba(0, 0, 0, 0.45)' }}
-                icon={<DeleteUploadIcon />}
-                onClick={() => {
-                    setChatState((prev) => ({
-                        ...prev,
-                        fileInput: null,
-                    }));
-                }}
-            />
-        </div>
-    );
-};
-
-const HelpdeskSender = () => {
-    const [inputVal, setInputVal] = useState('');
-    const { socket } = usePayloadContext(); // Tambahkan ini jika belum ada
-    const { taskIDSelect, connected, isBackClick } = useConversationContext();
-    const { setChatState, chatState } = useHelpdeskChatContext();
-    const { isErrorBoundary } = useErrorBoundaryContext();
-
-    const LabelTextFieldHint = useDictionary('TypeMessage', 'Type a message');
-
-    const inputValDOM = document.querySelector('.rw-new-message')?.value;
-
-    const fetch = useFetch();
-
-    const isDisabledInput = useMemo(() => {
-        return (
-            isErrorBoundary ||
-            !connected ||
-            ((isStringNull(inputValDOM) || !chatState?.fileInput) && chatState?.loadingSend)
-        );
-    }, [inputValDOM, chatState?.fileInput, chatState?.loadingSend, connected]);
-
-    const classNameHelpdesk = useMemo(() => {
-        if (isBackClick) {
-            return 'rw-container-helpdesk-sender-from-detail';
-        }
-        return 'rw-container-helpdesk-sender';
-    }, [isBackClick]);
-
-    // HelpdeskSender.js - onSendMessage yang direvisi
-    const onSendMessage = () => {
-        if (!socket?.connected) {
-            console.warn("Socket not connected!");
-            ModalResult({
-                type: 'error',
-                error: new Error("Connection lost. Please refresh the page."),
-            });
-            return;
-        }
-
-        setChatState((prev) => ({
-            ...prev,
-            loadingSend: true,
-        }));
-
-        fetch({
-            endpoint: 'v1/sf7/general/helpdesk/chat/submit',
-            data: {
-                TASK_ID: taskIDSelect,
-                ATTACHMENT: '',
-                FAQ_ID: null,
-                MESSAGE: inputVal,
-            },
-        })
-            ?.then(() => {
-                console.log("Message sent successfully");
-                setInputVal('');
-                // Clear input field
-                const messageInput = document.querySelector('.rw-new-message');
-                if (messageInput) {
-                    messageInput.value = '';
-                }
-                // Reset loading state after successful send
-                setChatState((prev) => ({
-                    ...prev,
-                    loadingSend: false
-                }));
-            })
-            ?.catch((error) => {
-                console.error("Error sending message:", error);
-                ModalResult({
-                    type: 'error',
-                    error,
-                });
-                setChatState((prev) => ({
-                    ...prev,
-                    loadingSend: false,
-                }));
-            });
-    };
-
-    const onSendFile = (url) => {
-        fetch({
-            endpoint: 'v1/sf7/general/helpdesk/chat/submit',
-            data: {
-                ATTACHMENT: url,
-                FAQ_ID: null,
-                TASK_ID: taskIDSelect,
-            },
-        })?.catch((error) => {
-            ModalResult({
-                type: 'error',
-                error,
-            });
-            setChatState((prev) => ({
-                ...prev,
-                loadingSend: false,
-            }));
-        });
-    };
-
-    const onGetURL = () => {
-        setChatState((prev) => ({
-            ...prev,
-            loadingSend: true,
-        }));
-
-        const formData = new FormData();
-
-        formData?.append('FILE', chatState?.fileInput);
-        formData?.append('UPLOAD_CODE', 'helpdesk');
-        formData?.append('UPLOAD_TYPE', 3);
-
-        fetch({
-            endpoint: 'v1/sf7/hrm/upload/temp',
-            data: formData,
-            isFormData: true,
-        })?.then(({ data }) => {
-            const urlAttachment = data?.DATA?.LIST?.TEMP_PATH;
-            onSendFile(urlAttachment);
-        });
-    };
-
-    const onEnterSendMsg = (e) => {
-        if (!isErrorBoundary && e?.keyCode === 13 && !isStringNull(inputVal) && !e.shiftKey) {
-            e.preventDefault();
-            onSendMessage();
-        }
-    };
-
-    return (
-        <div className={`${classNameHelpdesk} rw-container-sender`}>
-            {chatState?.fileInput ? (
-                <div className="rw-filelist-container">
-                    <AttachmentField />
-                </div>
-            ) : (
-                <TextareaAutosize
-                    type="text"
-                    minRows={2}
-                    onKeyDown={onEnterSendMsg}
-                    maxRows={5}
-                    onChange={({ target: { value } }) => {
-                        setInputVal(value);
-                    }}
-                    className="rw-new-message"
-                    name="message"
-                    autoFocus
-                    autoComplete="off"
-                    placeholder={`${LabelTextFieldHint}...`}
-                />
-            )}
-
-            <div className="rw-container-btn-send">
-                <Upload
-                    className="btn_upload"
-                    beforeUpload={() => false}
-                    fileList={[]}
-                    accept=".doc, .jpg, .ods, .png, .txt, .docx, .pdf"
-                    onChange={(e) => {
-                        setChatState((prev) => ({
-                            ...prev,
-                            fileInput: e?.file,
-                        }));
-                    }}
-                >
-                    <div className="rw-new-topic">
-                        <AttachmentIcon />
-                        Attachment
-                    </div>
-                </Upload>
-
-                <button
-                    onClick={() => {
-                        if (chatState?.fileInput) {
-                            onGetURL();
-                        } else if (!isStringNull(inputVal)) {
-                            onSendMessage();
-                        }
-                    }}
-                    type="submit"
-                    className="rw-send"
-                    disabled={isDisabledInput}
-                >
-                    {chatState?.loadingSend ? (
-                        <LoadingLiveChatIcon />
-                    ) : (
-                        <Send ready={!isDisabledInput} className="rw-send-icon" alt="send" />
-                    )}
-                </button>
-            </div>
-        </div>
-    );
-};
-export default memo(HelpdeskSender);

package/live_chat_helpdesk/PayloadContextProvider.js

@@ -1,131 +0,0 @@
-import axios from 'axios';
-import React, { useState, useMemo, useContext, createContext, useEffect } from 'react';
-import { BASE_WEBSOCKET_URL } from './helpers/constant';
-import { io } from 'socket.io-client';
-
-/** @type {import('react').Context<PayloadContextData>} */
-const PayloadContext = createContext({});
-
-export const usePayloadContext = () => useContext(PayloadContext);
-
-/**
- *
- * @param {object} props
- * @param {string} props.initPayload
- * @returns
- */
-const PayloadContextProvider = ({ children, initPayload, setInitPayload }) => {
-  /** @type {PayloadContextData} */
-  const objInitPayload = useMemo(() => {
-    return JSON.parse(initPayload?.replace('/get_started', '') || '{}');
-  }, [initPayload]);
-
-  const [isRefetch, setRefetch] = useState(false);
-  const [isVerifyHelpdesk, setVerifyHelpdesk] = useState(false);
-  const [isLoadedAccessWS, setLoadedAccessWS] = useState(false);
-  const [socket, setSocket] = useState(null);
-
-  // Initialize the Socket.io client
-  useEffect(() => {
-    const newSocket = io(BASE_WEBSOCKET_URL);
-    setSocket(newSocket);
-  
-    return () => {
-      newSocket.disconnect();
-    };
-  }, []);
-
-  const onRefreshToken = async () => {
-    try {
-      const response = await axios({
-        url: objInitPayload?.uriBackend,
-        params: {
-          ofid: 'sfsystem.RefreshToken',
-          accname: objInitPayload?.companycode,
-        },
-        data: {
-          refreshtoken:
-            objInitPayload?.refresh_token ||
-            '4D8C30EE29749D0F06B4F6E2527516B397C09D4DB148D42214E2941C7A86139D3CB512D925E1B098C6090A45E6BCC545723222FA3BABDC2A',
-        },  
-        method: 'POST',
-      });
-
-      if (response?.data?.DATA) {
-        const data = response?.data?.DATA;
-
-        let payload = '/get_started';
-
-        payload += JSON.stringify({
-          access_token: data?.JWT_TOKEN,
-          refresh_token: objInitPayload?.refresh_token,
-          uagent: objInitPayload?.uagent,
-          uriBackend: objInitPayload?.uriBackend,
-          uriService: objInitPayload?.uriService,
-          companyid: objInitPayload?.companyid,
-          companycode: objInitPayload?.companycode,
-          lang: objInitPayload?.lang,
-          uriBackendEnt: objInitPayload?.uriBackendEnt,
-        });
-
-        setInitPayload(payload);
-
-        return data?.JWT_TOKEN;
-      } else {
-        throw new Error('Failed to refresh token');
-      }
-    } catch (err) {
-      throw err;
-    }
-  };
-
-  // Handle Socket.io events
-  useEffect(() => {
-    if (!socket) return;
-  
-    const { companyid, companycode, lang, uagent, access_token, uriBackendEnt, uriBackend } =
-      objInitPayload;
-  
-    const messageHandshake = {
-      coid: companyid,
-      cocode: companycode,
-      lang,
-      uagent,
-      jwt: access_token,
-      uribackendent: uriBackendEnt,
-      accname: companycode?.toUpperCase(),
-      uribackendlucee: uriBackend,
-    };
-  
-    socket.emit('access_ws', messageHandshake);
-
-    socket.on('access_ws_response', (data) => {
-      if (!isLoadedAccessWS) {
-        setLoadedAccessWS(true);
-        setVerifyHelpdesk(data?.result);
-      }
-    });
-
-    // Cleanup on component unmount
-    return () => {
-      socket.off('access_ws_response');
-    };
-  }, [socket, initPayload]);
-
-  return (
-    <PayloadContext.Provider
-      value={{
-        ...objInitPayload,
-        onRefreshToken,
-        isRefetch,
-        setRefetch,
-        socket,
-        isVerifyHelpdesk,
-      }}
-    >
-      {children}
-    </PayloadContext.Provider>
-  );
-};
-
-export default PayloadContextProvider;

package/live_chat_helpdesk/constant.js

@@ -1,28 +0,0 @@
-import CryptoJS from 'crypto-js';
-import isMobileUserAgent from './isMobileUserAgent';
-
-export const IS_MOBILE = isMobileUserAgent();
-//  && isWorkplazeMobile();
-
-// export const KEY = process?.env?.REACT_APP_KEY || '6Le0DgMTAAAANokdEEial';
-export const KEY = '6Le0DgMTAAAANokdEEial';
-
-export const APP_KEY_HEX = (keyEncrypt) =>
-    CryptoJS.enc.Hex.parse(CryptoJS.enc.Utf8.parse(keyEncrypt || KEY).toString());
-
-export const CIPHER_OPTIONS = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 };
-
-export const ENCRYPTED_ROUTE_PREFIX = '|';
-export const UNENCRYPTED_ROUTE_PREFIX = '#';
-
-// export const  = 'wss://sfchatbot.dataon.com:5005/livechat-he lpdesk/ws';
-
-// export const BASE_WEBSOCKET_URL = 'ws://localhost:8002/livechat-helpdesk/ws';
-export const BASE_WEBSOCKET_URL = "http://localhost:5100/livechat-helpdesk/ws";
-
-
-
-
-
-
-

package/live_chat_helpdesk/useWSChatbot.js

@@ -1,178 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { usePayloadContext } from '../PayloadContextProvider';
-import sortArr from '../helpers/sortArr';
-import { scrollToBottom } from '../components/Widget/components/Conversation/components/Messages';
-import uniqueArrObj from '../helpers/uniqueArrObj';
-import useDecodeJWT from './useDecodeJWT';
-import formatChat, { deFormatChat } from '../helpers/formatChat';
-import { useConversationContext } from '../context/ConversationContextProvider';
-import { useHelpdeskChatContext } from '../components/Widget/components/Conversation/HelpdeskChatContextProvider';
-import { useListTicketContext } from '../context/ListTicketContextProvider';
-import ModalResult from '../helpers/ModalResult';
-
-const useWSChatbot = () => {
-    const { socket } = usePayloadContext();
-    const { taskIDSelect } = useConversationContext();
-    const { ticketState, taskIDs, setTicketState } = useListTicketContext();
-    const { chatState, setChatState, isFetchPrevChat } = useHelpdeskChatContext();
-    const { EMP_ID } = useDecodeJWT();
-
-    // Refs untuk mengakses state terbaru
-    const chatStateRef = useRef(chatState);
-    const ticketStateRef = useRef(ticketState);
-    const isFetchPrevChatRef = useRef(isFetchPrevChat);
-
-    useEffect(() => {
-        chatStateRef.current = chatState;
-    }, [chatState]);
-
-    useEffect(() => {
-        ticketStateRef.current = ticketState;
-    }, [ticketState]);
-
-    useEffect(() => {
-        isFetchPrevChatRef.current = isFetchPrevChat;
-    }, [isFetchPrevChat]);
-
-    const handleNewNotif = (data) => {
-        console.log("New Notification Data:", data);
-        const newTicket = data?.filter((val) => val?.newChat);
-
-        setTimeout(() => {
-            setTicketState((prev) => ({
-                ...prev,
-                count: newTicket?.length,
-            }));
-        }, 250);
-    };
-
-    const handleNewChat = (data) => {
-        try {
-            console.log("Processing new chat data:", data);
-            if (!Array.isArray(data)) {
-                console.warn("Received non-array data in handleNewChat:", data);
-                return;
-            }
-            
-            const newChat = data;
-            const deFormatOldChat = deFormatChat(chatStateRef.current?.list || []);
-            console.log("Current chat list:", deFormatOldChat);
-            
-            const arrNewChat = [...deFormatOldChat, ...newChat];
-            console.log("Combined chat list:", arrNewChat);
-            
-            const sortNewChat = uniqueArrObj(sortArr(arrNewChat, 'ID'), 'ID');
-            console.log("Sorted and deduplicated chat list:", sortNewChat);
-        
-            const unreadChat = newChat?.filter(
-                (item) => item?.READ_BY === '' && item?.ACTOR?.EMP_ID !== EMP_ID
-            );
-        
-            setTicketState((prev) => ({
-                ...prev,
-                count: unreadChat?.length,
-            }));
-        
-            setChatState((prev) => {
-                console.log("Updating chat state with new list");
-                return {
-                    ...prev,
-                    loadingSend: false,
-                    ...(prev.loadingInit && {
-                        loadingInit: false,
-                    }),
-                    list: formatChat(sortNewChat),
-                    fileInput: null,
-                };
-            });
-        
-            if (!isFetchPrevChatRef.current) {
-                console.log("Scrolling to bottom");
-                scrollToBottom();
-            }
-        } catch (error) {
-            console.error("Error in handleNewChat:", error);
-        }
-    };
-
-    useEffect(() => {
-        if (!socket) return;
-
-        console.log("Setting up WebSocket listeners");
-
-        // Debug socket connection
-        socket.on('connect', () => {
-            console.log('WebSocket connected');
-        });
-
-        socket.on('disconnect', () => {
-            console.log('WebSocket disconnected');
-        });
-
-        // Listener untuk new_notif
-        socket.on('new_notif', handleNewNotif);
-
-        // Listener untuk new_chat
-        socket.on('new_chat', (data) => {
-            console.log("Received new_chat event:", data);
-            handleNewChat(data);
-        });
-
-        // Clean up listeners saat komponen unmount
-        return () => {
-            console.log("Cleaning up WebSocket listeners");
-            socket.off('new_notif', handleNewNotif);
-            socket.off('new_chat', handleNewChat);
-        };
-    }, [socket, EMP_ID]); // Hapus chatState, ticketState, dan isFetchPrevChat
-
-    const onWatchNotif = () => {
-        const params = { task_id_list: taskIDs };
-        console.log("Watching Notifications:", params);
-
-        if (!ticketState?.isInitNotif) {
-            socket?.emit('load_notif', params);
-            console.log("Notification Event Sent to Server:", params);
-
-            setTimeout(() => {
-                setTicketState((prev) => ({
-                    ...prev,
-                    isInitNotif: true,
-                }));
-            }, 350);
-        }
-    };
-
-    const onWatchLiveChat = () => {
-        const params = {
-            taskid: taskIDSelect,
-            list_chat_id: deFormatChat(chatStateRef.current?.list || [])?.map((item) => item?.ID),
-        };
-        console.log("Watching Live Chat:", params);
-
-        if (deFormatChat(chatStateRef.current?.list || [])?.length > 0) {
-            if (!chatStateRef.current?.isInitChat) {
-                setChatState((prev) => ({
-                    ...prev,
-                    isInitChat: true,
-                }));
-            }
-            socket?.emit('live_chat', params);
-            console.log("Live Chat Event Sent to Server:", params);
-        }
-    };
-
-    const onStopNotif = () => {
-        socket?.emit('stop_notif');
-        console.log("Stopping Notifications");
-    };
-
-    const onStopLiveChat = () => {
-        socket?.emit('stop_live_chat');
-        console.log("Stopping Live Chat");
-    };
-
-    return { onStopNotif, onStopLiveChat, onWatchNotif, onWatchLiveChat };
-};
-
-export default useWSChatbot;

package/publish_process/README.md

@@ -1,64 +0,0 @@
-# Publish Process
-
-## Publish
-
-### Development and Testing
-
--   Update version
-
-```sh
-npm version 1.x.x-alpha.x
-```
-
--   Publish
-
-```sh
-npm publish --otp=<otpCode> --tag alpha.x
-```
-
-### Production
-
--   Update version
-
-```sh
-npm version 1.x.x
-```
-
--   Publish
-
-```sh
-npm publish --otp=<otpCode>
-```
-
-## Unpublish
-
-If published package less than 72 hours and you want to revert/unpublish the chatbot package, try this command.
-
-```sh
-npm unpublish custom-chatbot-widget@1.x.x
-```
-
-## Some Important Notes
-
-### Versi Stabil vs. Prerelease
-
-Stable versions (a.b.c) cannot be republished after being unpublished because NPM retains the metadata of stable versions permanently.
-
-For prerelease versions (a.b.c-alpha.x), the metadata is not stored permanently after unpublishing, so you can republish the same version.
-
-You must first unpublish the version a.b.c-alpha.x.
-As long as the version no longer exists in the registry, you can republish it with the same version number.
-
-### Check published version
-
-To check all versions that may not be displayed in the NPM registry
-
-```sh
-npm info custom-chatbot-widget --json
-```
-
-To check all versions that are already displayed in the NPM registry
-
-```sh
-npm view custom-chatbot-widget versions
-```