diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..0fae1b8 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/README.md b/README.md index f6265b0..a38e980 100644 --- a/README.md +++ b/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. diff --git a/build/src/components/Chat/Chat.d.ts b/build/src/components/Chat/Chat.d.ts index af703df..f8c4e9c 100644 --- a/build/src/components/Chat/Chat.d.ts +++ b/build/src/components/Chat/Chat.d.ts @@ -15,11 +15,11 @@ interface IChatProps { placeholderText: string; validator: (input: string) => Boolean; state: any; - setMessageContainerRef: React.Dispatch>; disableScrollToBottom: boolean; messageHistory: IMessage[] | string; parse?: (message: string) => void; actions?: object; + messageContainerRef: React.MutableRefObject; } -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; diff --git a/build/src/hooks/useChatbot.d.ts b/build/src/hooks/useChatbot.d.ts index 17ff000..f7db4ce 100644 --- a/build/src/hooks/useChatbot.d.ts +++ b/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; - setMessageContainerRef: React.Dispatch; + messageContainerRef: React.MutableRefObject; ActionProvider: any; MessageParser: any; }; diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 17bdf5d..a96bebe 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -35,11 +35,11 @@ interface IChatProps { placeholderText: string; validator: (input: string) => Boolean; state: any; - setMessageContainerRef: React.Dispatch>; disableScrollToBottom: boolean; messageHistory: IMessage[] | string; parse?: (message: string) => void; actions?: object; + messageContainerRef: React.MutableRefObject; } 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 = ({
); } else { @@ -118,10 +118,10 @@ const Chatbot = ({ customStyles={{ ...customStyles }} headerText={headerText} placeholderText={placeholderText} - setMessageContainerRef={setMessageContainerRef} validator={validator} messageHistory={messageHistory} disableScrollToBottom={disableScrollToBottom} + messageContainerRef={messageContainerRef} /> diff --git a/src/hooks/useChatbot.ts b/src/hooks/useChatbot.ts index a4c1adb..3e21089 100644 --- a/src/hooks/useChatbot.ts +++ b/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({}); const initialState = getInitialState(config); @@ -72,6 +70,7 @@ const useChatbot = ({ }); const messagesRef = React.useRef(state.messages); const stateRef = React.useRef(); + const messageContainerRef: React.MutableRefObject = 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, };