widget-chatbot 1.0.0

package/index.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import RasaWebchatPro from './src/pro-src/rules-wrapper';
+// import 'bootstrap/dist/css/bootstrap.min.css';
+import './src/pro-src/index.css';
+// import 'antd/dist/antd.css';
+
+class RasaWebchatProWithRules extends React.Component {
+  constructor(props) {
+    super(props);
+    const { connectOn } = props;
+    let { withRules } = props;
+    if (connectOn === 'open' && withRules === true) {
+      throw new Error(
+        "You can't use rules and connect on open, you have to use connect on mount"
+      );
+    }
+    this.webchatRef = null;
+    if (withRules === undefined) {
+      withRules = true;
+    }
+    this.state = {
+      propsRetrieved: !withRules,
+      rulesApplied: !withRules
+    };
+    this.setRef = this.setRef.bind(this);
+    this.handleSessionConfirm = this.handleSessionConfirm.bind(this);
+  }
+
+  setRef(element) {
+    const { innerRef } = this.props;
+    if (!innerRef) {
+      this.webchatRef = element;
+    } else if (innerRef && innerRef.constructor && innerRef.call && innerRef.apply) {
+      // if this is true, innerRef is a function and thus it's a callback ref
+      this.webchatRef = element;
+      innerRef(element);
+    } else {
+      innerRef.current = element;
+    }
+  }
+
+  handleSessionConfirm(sessionObject) {
+    const { innerRef } = this.props;
+    this.setState({
+      // The OR makes it work even without the augmented webchat channel
+      propsRetrieved: { ...sessionObject.props }
+    });
+    if (
+      ((innerRef && innerRef.current) || this.webchatRef.updateRules) &&
+              sessionObject.props &&
+              sessionObject.props.rules
+    ) {
+      setTimeout(() => {
+        if (innerRef && innerRef.current) {
+          innerRef.current.updateRules(sessionObject.props.rules);
+        } else {
+          this.webchatRef.updateRules(sessionObject.props.rules);
+        }
+      }, 100);
+      this.setState({ rulesApplied: true });
+    }
+  }
+
+  render() {
+    const { onSocketEvent } = this.props;
+    let { withRules } = this.props;
+    if (withRules === undefined) {
+      withRules = true;
+    }
+    const { propsRetrieved } = this.state;
+    let propsToApply = {};
+    if (propsRetrieved) propsToApply = propsRetrieved;
+    delete propsToApply.rules;
+    return (
+        <div
+            style={{ display: propsRetrieved ? undefined : 'none' }}
+            className={this.props.embedded || (propsToApply && propsToApply.embedded) ? 'rw-pro-widget-embedded' : ''}
+        >
+        <RasaWebchatPro
+          ref={this.setRef}
+          {...{
+            ...propsToApply,
+            ...this.props
+          }}
+          onSocketEvent={
+            withRules
+              ? {
+                session_confirm: this.handleSessionConfirm,
+                ...onSocketEvent
+              }
+              : { ...onSocketEvent }
+          }
+        />
+      </div>
+    );
+  }
+}
+
+export const rasaWebchatProTypes = {
+  initPayload: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  protocol: PropTypes.string,
+  socketUrl: PropTypes.string.isRequired,
+  socketPath: PropTypes.string,
+  protocolOptions: PropTypes.shape({}),
+  customData: PropTypes.shape({}),
+  handleNewUserMessage: PropTypes.func,
+  profileAvatar: PropTypes.string,
+  inputTextFieldHint: PropTypes.string,
+  connectingText: PropTypes.string,
+  showCloseButton: PropTypes.bool,
+  showFullScreenButton: PropTypes.bool,
+  hideWhenNotConnected: PropTypes.bool,
+  connectOn: PropTypes.oneOf(['mount', 'open']),
+  autoClearCache: PropTypes.bool,
+  onSocketEvent: PropTypes.objectOf(PropTypes.func),
+  fullScreenMode: PropTypes.bool,
+  badge: PropTypes.number,
+  embedded: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  params: PropTypes.object,
+  openLauncherImage: PropTypes.string,
+  closeImage: PropTypes.string,
+  docViewer: PropTypes.bool,
+  customComponent: PropTypes.func,
+  displayUnreadCount: PropTypes.bool,
+  showMessageDate: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  customMessageDelay: PropTypes.func,
+  tooltipPayload: PropTypes.string,
+  tooltipDelay: PropTypes.number,
+  withRules: PropTypes.bool,
+  rules: PropTypes.arrayOf(
+    PropTypes.shape({
+      payload: PropTypes.string.isRequired,
+      text: PropTypes.string,
+      trigger: PropTypes.shape({
+        url: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+        timeOnPage: PropTypes.number,
+        numberOfVisits: PropTypes.number,
+        numberOfPageVisits: PropTypes.number,
+        device: PropTypes.string,
+        when: PropTypes.oneOf(['always', 'init']),
+        queryString: PropTypes.arrayOf(
+          PropTypes.shape({
+            param: PropTypes.string,
+            value: PropTypes.string,
+            sendAsEntity: PropTypes.bool
+          })
+        ),
+        eventListeners: PropTypes.arrayOf(
+          PropTypes.shape({
+            selector: PropTypes.string.isRequired,
+            event: PropTypes.string.isRequired
+          })
+        )
+      })
+    })
+  ),
+  triggerEventListenerUpdateRate: PropTypes.number
+};
+
+RasaWebchatProWithRules.propTypes = {
+  ...rasaWebchatProTypes,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.object })])
+};
+
+export const rasaWebchatProDefaultTypes = {
+  title: 'Welcome',
+  customData: {},
+  inputTextFieldHint: 'Type a message...',
+  connectingText: 'Waiting for server...',
+  fullScreenMode: false,
+  hideWhenNotConnected: true,
+  autoClearCache: false,
+  connectOn: 'mount',
+  onSocketEvent: {},
+  protocol: 'socketio',
+  socketUrl: 'http://localhost',
+  protocolOptions: {},
+  badge: 0,
+  embedded: false,
+  params: {
+    storage: 'local'
+  },
+  docViewer: false,
+  showCloseButton: true,
+  showFullScreenButton: false,
+  displayUnreadCount: false,
+  showMessageDate: false,
+  customMessageDelay: (message) => {
+    let delay = message.length * 30;
+    if (delay > 3 * 1000) delay = 3 * 1000;
+    if (delay < 800) delay = 800;
+    return delay;
+  },
+  tooltipPayload: null,
+  tooltipDelay: 500,
+  withRules: true,
+  rules: null,
+  triggerEventListenerUpdateRate: 500
+};
+
+export default React.forwardRef((props, ref) => (
+  <RasaWebchatProWithRules innerRef={ref} {...props} />
+));
+
+export const selfMount = (props, element = null) => {
+  const load = () => {
+    if (element === null) {
+      const node = document.createElement('div');
+      node.setAttribute('id', 'rasaWebchatPro');
+      document.body.appendChild(node);
+    }
+    const mountElement = element || document.getElementById('rasaWebchatPro')
+    const webchatPro = React.createElement(RasaWebchatProWithRules, props);
+    ReactDOM.render(webchatPro, mountElement);
+  };
+  if (document.readyState === 'complete') {
+    load();
+  } else {
+    window.addEventListener('load', () => {
+      load();
+    });
+  }
+};

package/live_chat_helpdesk/HelpdeskChatContextProvider.js

@@ -0,0 +1,323 @@
+import React, { useRef, createContext, useContext, useState, useEffect } from 'react';
+import useWSChatbot from '../../../../hooks/useWSChatbot';
+import sortArr from '../../../../helpers/sortArr';
+import useDecodeJWT from '../../../../hooks/useDecodeJWT';
+import { scrollToBottom } from './components/Messages';
+import ModalResult from '../../../../helpers/ModalResult';
+import useFetch from '../../../../hooks/useFetch';
+import formatChat, { deFormatChat } from '../../../../helpers/formatChat';
+import { useMemo } from 'react';
+import { useConversationContext } from '../../../../context/ConversationContextProvider';
+import { useListTicketContext } from '../../../../context/ListTicketContextProvider';
+import useDictionary from '../../../../hooks/useDictionary';
+
+/** @type {import('react').Context<import('../../../../context/types').DetailTicketContext>} */
+const HelpdeskChatContext = createContext({});
+
+export const useHelpdeskChatContext = () => useContext(HelpdeskChatContext);
+
+const HelpdeskChatContextProvider = ({ children }) => {
+    const {
+        taskIDSelect,
+        setTaskIDSelect,
+        stopState,
+        setStopState,
+        isScrollFetch,
+        keyActive,
+        isBackClick,
+        setModalState,
+    } = useConversationContext();
+
+    const { onWatchNotif, onStopLiveChat, onStopNotif, onWatchLiveChat } = useWSChatbot();
+
+    const { setTicketState, taskIDs, ticketState } = useListTicketContext();
+
+    const LabelSuccessCloseTicket = useDictionary(
+        'SuccessfullyCloseTicket',
+        'Successfully Close Ticket'
+    );
+    const LabelSomethingWrong = useDictionary('SomethingWrong', 'Something Wrong');
+
+    const { EMP_ID } = useDecodeJWT();
+
+    const fetch = useFetch();
+
+    const [chatState, setChatState] = useState({
+        loadingSend: false,
+        loadingInit: false,
+        loadingGet: false,
+        list: [],
+        fileInput: null,
+        isShowModalPreviewFile: false,
+        urlImagePreview: '',
+        taskIDClose: 0,
+        total: 0,
+        pageFetch: 1,
+        isInitChat: false,
+        showScrollBottom: false,
+    });
+
+    const isFetchPrevChat = useMemo(() => {
+        if (!chatState?.loadingGet) {
+            return isScrollFetch && deFormatChat(chatState?.list)?.length < chatState?.total;
+        }
+        return false;
+    }, [chatState?.total, chatState?.list, isScrollFetch, chatState?.loadingGet]);
+
+    const onCloseTicket = () => {
+        console.log("Attempting to close ticket with ID:", taskIDSelect || chatState?.taskIDClose);
+        setTicketState((prev) => ({
+            ...prev,
+            loadingClose: true,
+        }));
+
+        fetch({
+            endpoint: 'v1/sf7/general/helpdesk/admin/ticket/update',
+            data: {
+                STATUS: 'Closed',
+                TASK_ID: chatState?.taskIDClose || taskIDSelect,
+            },
+        })
+            ?.then(() => {
+                console.log("Ticket closed successfully.");
+                ModalResult({
+                    subtitle: LabelSuccessCloseTicket,
+                    type: 'success',
+                });
+
+                if (taskIDSelect !== 0) {
+                    setTaskIDSelect(0);
+                }
+
+                setChatState((prev) => ({
+                    ...prev,
+                    ...(chatState?.taskIDClose !== 0 && {
+                        list: [],
+                        taskIDClose: 0,
+                    }),
+                }));
+
+                onStopLiveChat();
+
+                setModalState((prev) => ({
+                    ...prev,
+                    closeTicket: false,
+                }));
+
+                setTicketState((prev) => ({
+                    ...prev,
+                    isRefetch: true,
+                }));
+            })
+            ?.catch((err) => {
+                ModalResult({
+                    subtitle: LabelSomethingWrong,
+                    type: 'error',
+                    error: err,
+                });
+            })
+            .finally(() => {
+                setTicketState((prev) => ({
+                    ...prev,
+                    loadingClose: true,
+                }));
+                console.log("Close ticket loading state reset.");
+            });
+    };
+
+    useEffect(() => {
+        if (taskIDSelect !== 0) {
+            const controller = new AbortController();
+
+            onGetDetailChat(controller.signal);
+
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [taskIDSelect, chatState?.pageFetch]);
+
+    const onGetDetailChat = () => {
+        console.log("Fetching chat details for task ID:", taskIDSelect);
+        setChatState((prev) => ({
+            ...prev,
+            loadingGet: true,
+        }));
+
+        fetch({
+            endpoint: 'v1/sf7/general/helpdesk/chat/list',
+            data: {
+                LIMIT: 10,
+                PAGE: chatState?.pageFetch,
+                TASK_ID: taskIDSelect,
+            },
+        })
+            ?.then(({ data }) => {
+                if (data?.DATA && isMountedRef.current) {
+                    console.log("Chat data fetched:", data?.DATA);
+                    const chatDatas = data?.DATA?.LIST;
+                    const sortedChat = sortArr(chatDatas, 'ID');
+                    const unRead = sortedChat?.filter(
+                        (item) => item?.READ_BY === '' && item?.ACTOR?.EMP_ID !== EMP_ID
+                    );
+
+                    const appendedChat = [...deFormatChat(chatState?.list), ...sortedChat];
+
+                    const chats =
+                        chatState?.pageFetch > 1
+                            ? formatChat(appendedChat)
+                            : formatChat(sortedChat);
+
+                    setChatState((prev) => ({
+                        ...prev,
+                        list: chats,
+                        total: data?.DATA?.TOTAL_RECORD,
+                    }));
+
+                    setTicketState((prev) => ({
+                        ...prev,
+                        count: unRead?.length,
+                    }));
+                }
+            })
+            ?.catch((err) => {
+                if (err.name === 'AbortError') {
+                    console.log("Fetch aborted");
+                } else if (isMountedRef.current) {
+                }
+            })
+            ?.finally(() => {
+                if (isMountedRef.current) {
+                    setChatState((prev) => ({
+                        ...prev,
+                        loadingInit: false,
+                        loadingGet: false,
+                    }));
+                    console.log("Chat loading state reset.");
+
+                    if (chatState?.pageFetch === 1) {
+                        scrollToBottom();
+                    }
+                }
+            });
+    };
+
+
+    const resetState = () => {
+        console.log("Resetting chat state.");
+        setChatState((prev) => ({
+            ...prev,
+            loadingSend: false,
+            loadingInit: false,
+            loadingGet: false,
+            list: [],
+            fileInput: null,
+            isShowModalPreviewFile: false,
+            urlImagePreview: '',
+            taskIDClose: 0,
+            total: 0,
+            pageFetch: 1,
+            isInitChat: false,
+            showScrollBottom: false,
+        }));
+    };
+
+    useEffect(() => {
+        if (taskIDSelect !== 0) {
+            onGetDetailChat();
+        }
+    }, [taskIDSelect, chatState?.pageFetch]);
+
+    useEffect(() => {
+        if (taskIDs?.length > 0 && taskIDSelect === 0 && !ticketState?.stopNotifWS) {
+            onWatchNotif();
+        }
+    }, [
+        JSON.stringify(taskIDs),
+        taskIDSelect,
+        ticketState?.count,
+        ticketState?.stopNotifWS,
+        ticketState?.isInitNotif,
+    ]);
+
+    useEffect(() => {
+        if (stopState?.liveChat) {
+            if (isBackClick) {
+                setTaskIDSelect(0);
+
+                resetState();
+            }
+
+            setChatState((prev) => ({
+                ...prev,
+                isInitChat: false,
+            }));
+
+            onStopLiveChat();
+
+            setStopState((prev) => ({
+                ...prev,
+                liveChat: false,
+            }));
+        }
+    }, [stopState?.liveChat]);
+
+    useEffect(() => {
+        if (ticketState?.stopNotifWS) {
+            onStopNotif();
+
+            setTimeout(() => {
+                setTicketState((prev) => ({
+                    ...prev,
+                    stopNotifWS: false,
+                }));
+            }, 350);
+        }
+    }, [ticketState?.stopNotifWS, JSON.stringify(taskIDs), keyActive]);
+
+    useEffect(() => {
+        if (isFetchPrevChat && taskIDSelect !== 0) {
+            setStopState((prev) => ({
+                ...prev,
+                liveChat: true,
+            }));
+
+            setChatState((prev) => {
+                return {
+                    ...prev,
+                    pageFetch: chatState?.pageFetch + 1,
+                };
+            });
+        }
+    }, [isFetchPrevChat]);
+
+    useEffect(() => {
+        if (taskIDSelect !== 0 && !chatState?.isInitChat) {
+            onWatchLiveChat();
+        }
+    }, [taskIDSelect, chatState?.isInitChat]);
+
+    const isMountedRef = useRef(false);
+
+    useEffect(() => {
+        isMountedRef.current = true;
+
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+
+    return (
+        <HelpdeskChatContext.Provider
+            value={{
+                isFetchPrevChat,
+                onCloseTicket,
+                chatState,
+                setChatState,
+            }}
+        >
+            {children}
+        </HelpdeskChatContext.Provider>
+    );
+};
+export default HelpdeskChatContextProvider;