Merge pull request #166 from FredrikOseberg/fix/saving-dialogue

Fix/saving dialogue

.github/workflows/build.yml

@@ -0,0 +1,22 @@
+name: Build
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v2
+
+    - name: Use Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+
+    - name: Install dependencies
+      run: yarn
+
+    - name: Build
+      run: yarn build

README.md

@@ -1,5 +1,3 @@
-[![pipeline status](https://gitlab.com/FredrikOseberg/react-chatbot-kit/badges/master/pipeline.svg)](https://gitlab.com/FredrikOseberg/react-chatbot-kit/-/commits/master)
-
 # Introduction
 
 react-chatbot-kit provides an easy way to get started building chatbots.

build/src/components/Chat/Chat.d.ts

@@ -15,11 +15,11 @@ interface IChatProps {
     placeholderText: string;
     validator: (input: string) => Boolean;
     state: any;
-    setMessageContainerRef: React.Dispatch<SetStateAction<any>>;
     disableScrollToBottom: boolean;
     messageHistory: IMessage[] | string;
     parse?: (message: string) => void;
     actions?: object;
+    messageContainerRef: React.MutableRefObject<HTMLDivElement>;
 }
-declare const Chat: ({ state, setState, widgetRegistry, messageParser, parse, customComponents, actionProvider, botName, customStyles, headerText, customMessages, placeholderText, validator, setMessageContainerRef, disableScrollToBottom, messageHistory, actions, }: IChatProps) => JSX.Element;
+declare const Chat: ({ state, setState, widgetRegistry, messageParser, parse, customComponents, actionProvider, botName, customStyles, headerText, customMessages, placeholderText, validator, disableScrollToBottom, messageHistory, actions, messageContainerRef, }: IChatProps) => JSX.Element;
 export default Chat;

build/src/hooks/useChatbot.d.ts

@@ -18,7 +18,7 @@ declare const useChatbot: ({ config, actionProvider, messageParser, messageHisto
     messagePars?: undefined;
     state?: undefined;
     setState?: undefined;
-    setMessageContainerRef?: undefined;
+    messageContainerRef?: undefined;
     ActionProvider?: undefined;
     MessageParser?: undefined;
 } | {
@@ -29,7 +29,7 @@ declare const useChatbot: ({ config, actionProvider, messageParser, messageHisto
     messagePars?: undefined;
     state?: undefined;
     setState?: undefined;
-    setMessageContainerRef?: undefined;
+    messageContainerRef?: undefined;
     ActionProvider?: undefined;
     MessageParser?: undefined;
 } | {
@@ -40,7 +40,7 @@ declare const useChatbot: ({ config, actionProvider, messageParser, messageHisto
     invalidPropsError: string;
     state: any;
     setState: React.Dispatch<any>;
-    setMessageContainerRef: React.Dispatch<any>;
+    messageContainerRef: React.MutableRefObject<HTMLDivElement>;
     ActionProvider: any;
     MessageParser: any;
 };

src/components/Chat/Chat.tsx

@@ -35,11 +35,11 @@ interface IChatProps {
   placeholderText: string;
   validator: (input: string) => Boolean;
   state: any;
-  setMessageContainerRef: React.Dispatch<SetStateAction<any>>;
   disableScrollToBottom: boolean;
   messageHistory: IMessage[] | string;
   parse?: (message: string) => void;
   actions?: object;
+  messageContainerRef: React.MutableRefObject<HTMLDivElement>;
 }
 
 const Chat = ({
@@ -56,21 +56,20 @@ const Chat = ({
   customMessages,
   placeholderText,
   validator,
-  setMessageContainerRef,
   disableScrollToBottom,
   messageHistory,
   actions,
+  messageContainerRef,
 }: IChatProps) => {
   const { messages } = state;
-  const chatContainerRef = useRef(null);
 
   const [input, setInputValue] = useState('');
 
   const scrollIntoView = () => {
     setTimeout(() => {
-      if (chatContainerRef.current) {
-        chatContainerRef.current.scrollTop =
-          chatContainerRef?.current?.scrollHeight;
+      if (messageContainerRef.current) {
+        messageContainerRef.current.scrollTop =
+          messageContainerRef?.current?.scrollHeight;
       }
     }, 50);
   };
@@ -80,10 +79,6 @@ const Chat = ({
     scrollIntoView();
   });
 
-  useEffect(() => {
-    setMessageContainerRef(chatContainerRef);
-  }, [chatContainerRef.current]);
-
   const showAvatar = (messages: any[], index: number) => {
     if (index === 0) return true;
 
@@ -286,7 +281,7 @@ const Chat = ({
 
         <div
           className="react-chatbot-kit-chat-message-container"
-          ref={chatContainerRef}
+          ref={messageContainerRef}
         >
           <ConditionallyRender
             condition={

src/components/Chatbot/Chatbot.tsx

@@ -50,11 +50,11 @@ const Chatbot = ({
     ActionProvider,
     MessageParser,
     widgetRegistry,
+    messageContainerRef,
     actionProv,
     messagePars,
     state,
     setState,
-    setMessageContainerRef,
   } = useChatbot({
     config,
     actionProvider,
@@ -92,10 +92,10 @@ const Chatbot = ({
         customStyles={{ ...customStyles }}
         headerText={headerText}
         placeholderText={placeholderText}
-        setMessageContainerRef={setMessageContainerRef}
         validator={validator}
         messageHistory={messageHistory}
         disableScrollToBottom={disableScrollToBottom}
+        messageContainerRef={messageContainerRef}
       />
     );
   } else {
@@ -118,10 +118,10 @@ const Chatbot = ({
             customStyles={{ ...customStyles }}
             headerText={headerText}
             placeholderText={placeholderText}
-            setMessageContainerRef={setMessageContainerRef}
             validator={validator}
             messageHistory={messageHistory}
             disableScrollToBottom={disableScrollToBottom}
+            messageContainerRef={messageContainerRef}
           />
         </MessageParser>
       </ActionProvider>

src/hooks/useChatbot.ts

@@ -5,7 +5,6 @@ import {
   createCustomMessage,
 } from '../components/Chat/chatUtils';
 import {
-  getCustomStyles,
   getInitialState,
   getWidgets,
   isConstructor,
@@ -54,7 +53,6 @@ const useChatbot = ({
 
     return { invalidPropsError };
   }
-  const [messageContainerRef, setMessageContainerRef] = useState<any>({});
 
   const initialState = getInitialState(config);
 
@@ -72,6 +70,7 @@ const useChatbot = ({
   });
   const messagesRef = React.useRef(state.messages);
   const stateRef = React.useRef();
+  const messageContainerRef: React.MutableRefObject<HTMLDivElement> = React.useRef();
 
   useEffect(() => {
     messagesRef.current = state.messages;
@@ -87,15 +86,16 @@ const useChatbot = ({
   }, []);
 
   useEffect(() => {
+    const refValue: HTMLDivElement = messageContainerRef.current;
+
     return () => {
       if (saveMessages && typeof saveMessages === 'function') {
-        const HTML = messageContainerRef?.current?.innerHTML.toString();
+        const HTML = refValue.innerHTML.toString();
 
-        if (!messageContainerRef.current) return;
         saveMessages(messagesRef.current, HTML);
       }
     };
-  }, [messageContainerRef.current]);
+  }, []);
 
   useEffect(() => {
     stateRef.current = state;
@@ -145,7 +145,7 @@ const useChatbot = ({
     invalidPropsError,
     state,
     setState,
-    setMessageContainerRef,
+    messageContainerRef,
     ActionProvider,
     MessageParser,
   };