App.js

import React, { useState } from "react";
import Chatbot from "react-chatbot-kit";
import config from "./config";
import actionProvider from "./actionProvider.js";
import messageParser from "./messageParser.js";

function App() {
  const [showBot, toggleBot] = useState(false);
  
  const saveMessages = (messages) => {
    localStorage.setItem("chat_messages", JSON.stringify(messages));
  };

  const loadMessages = () => {
    const messages = JSON.parse(localStorage.getItem("chat_messages"));
    return messages;
  };

  return (
    <div className="App">
        {showBot && (
          <Chatbot
            config={config}
            actionProvider={actionProvider}
            messageHistory={loadMessages()}
            messageParser={messageParser}
            saveMessages={saveMessages}
          />
        )}
        <button onClick={() => toggleBot((prev) => !prev)}>Bot</button>
    </div>
  );
}

export default App;

The messages only get to save to the localstorage when the chatbot unmounts. Is isn't it possible that whenever the user types the message to the chatbot, it got saved to the localstorage while the chatbot is still mounted.

you could save messages in action provider using an array of objects to save ques and ans like this -

import db from "../firebase";
var chat = [];

async function sendData() {
await db
.collection("bot")
.add({ chatBot: chat })
.then(() => {
console.log("success");
chat = [];
})
.catch((error) => {
console.log(error);
});
}

class ActionProvider {
constructor(createChatBotMessage, setStateFunc, createClientMessage) {
this.createChatBotMessage = createChatBotMessage;
this.setState = setStateFunc;
this.createClientMessage = createClientMessage;
}

handleOptionOne = () => {
const message = this.createChatBotMessage("Whats Your Business?", {
widget: "optionOne",
});

this.addMessageToState(message);

};

handleJavascriptQuiz = (ans) => {
chat[chat.length - 1] = { ...chat[chat.length - 1], ans: ans };

const message = this.createChatBotMessage(
  "Fantastic.So what type of collaborations are you looking for?",
  {
    widget: "optionTwo",
  }
);

this.addMessageToState(message);

};

handleOptionTwo = (ans) => {
chat[chat.length - 1] = { ...chat[chat.length - 1], ans: ans };
const message = this.createChatBotMessage("Whats your budget?", {
widget: "optionThree",
});

this.addMessageToState(message);

};
handleOptionThree = (ans) => {
chat[chat.length - 1] = { ...chat[chat.length - 1], ans: ans };
const message = this.createChatBotMessage(
"Are You looking for Online Collaboration?",
{
widget: "optionFour",
}
);

this.addMessageToState(message);

};
handleOptionFour = (ans) => {
chat[chat.length - 1] = { ...chat[chat.length - 1], ans: ans };
const message = this.createChatBotMessage(
"Thanks for the details,Please drop your contact number",
{
widget: "",
}
);

this.addMessageToState(message);

};
details = (ans) => {
if (ans) {
chat[chat.length - 1] = { ...chat[chat.length - 1], ans: ans };
} else chat.pop();

const message = this.createChatBotMessage(
  "Write additional details,which will help to grab attention of <influencer>(Start with writing 'The Details are:'):"
);
this.addMessageToState(message);

};

greet = (ans) => {
if (ans) {
chat[chat.length - 1] = { ...chat[chat.length - 1], ans: ans };
} else chat.pop();

const message = this.createChatBotMessage(
  "Fabulous,will talk to you soon.Livi"
);
this.addMessageToState(message);

sendData();

};
phonenumber = (inputtxt) => {
var phoneno = /^\d{10}$/;

if (inputtxt)
  chat[chat.length - 1] = { ...chat[chat.length - 1], ans: inputtxt };
else chat.pop();
if (inputtxt.value.match(phoneno)) {
  return true;
} else {
  alert("Not a valid Phone Number");
  return false;
}

};

addMessageToState = (message) => {
chat.push({ ques: message.message });

this.setState((prevState) => ({
  ...prevState,
  messages: [...prevState.messages, message],
}));

};
}

export default ActionProvider;