widget-chatbot 1.0.0

package/live_chat_helpdesk/HelpdeskSender.js

@@ -0,0 +1,287 @@
+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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,28 @@
+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

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