Issue with Keeping Chat History Across Steps in Custom Component

[braher]

Issue Description:

I am using react-simple-chatbot to create a chatbot that interacts with OpenAI to generate responses. I have implemented a custom component, SearchIA, to send the chat history and generate a response based on it. However, I am facing a problem where the chat history is empty in each new step, making it difficult to send a cumulative history for the chat.

Code Example:

// Code for Content component
const Content = () => {
  const [chatHistorySummary, setChatHistorySummary] = useState("");

  const steps = [
    {
      id: '1',
      message: 'How can I help?',
      trigger: 'question'
    },
    {
      id: 'question',
      user: true,
      trigger: 'search'
    },
    {
      id: 'search',
      component: <SearchIA chatHistory={chatHistorySummary} setChatHistorySummary= {setChatHistorySummary}/>,
      asMessage: true,
      trigger: 'question'
    }
  ];

  return (
    <ThemeProvider theme={theme}>
      <ChatBot
        headerTitle="Assistant"
        placeholder="Make a question..."
        steps={steps}
      />
    </ThemeProvider>
  );
};

export default Content;

// Code for SearchIA component
const SearchIA = ({ steps, chatHistory,  setChatHistorySummary}) => {
  const { question, search } = steps;
  
  const [state, setState] = useState({
    question,
    search,
    response: ''
  });

  useEffect(() => {
    const fetchData = async () => {
      const searchApiService = new SearchApiService();
      const message = state.question.value;
      let resp = '';
      let completion = '';
      if (message !== '') {
        resp = await searchApiService.sendMessage(message, chatHistory);
        completion = resp.completion;
        setChatHistorySummary(resp.chat_history_summary)
      }

      setState(prevState => ({
        ...prevState,
        response: completion
      }));
    };

    fetchData();
  }, [state.question]);

  return (
    <div>
      <p>{state.response}</p>
    </div>
  );
};

export default SearchIA;```

#### Expected Behavior:
I expect the `SearchIA` component to receive the updated state of `chatHistorySummary` on each new step so that it can be sent to `SearchApiService`.

#### Current Behavior:
`SearchIA` is not receiving the new state. The `chatHistorySummary` state remains empty.

#### Steps to Reproduce:
1. Start a new conversation with the bot.
2. The bot asks, "How can I help?"
3. Enter a message.
4. The bot displays a response.
5. Enter a new message.  You will notice that `chatHistorySummary` does not update.

#### Possible Solution:
I'm not sure what is causing this issue. Is there a way to share a variable (in this case, `chatHistorySummary`) from the `SearchIA` component to a new step in the chat?

[somashekarbrdtscblr]

Chatbot keeps its own step context changes its data when iterating

you can simple make your
const [chatHistorySummary, setChatHistorySummary] = useState("");
ARRAY and push each response and question
const [chatHistorySummary, setChatHistorySummary] = useState([]);

setChatHistorySummary(prev => [...prev,resp.chat_history_summary])