Skip to content

Issue with Keeping Chat History Across Steps in Custom Component #379

Description

@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?

Activity

  1. changed the title [-]Title: Issue with Keeping Chat History Across Steps in Custom Component[/-] [+]Issue with Keeping Chat History Across Steps in Custom Component[/+] on Sep 6, 2023
  2. somashekarbrdtscblr commented on Apr 4, 2024

    @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])

  3. LucasBassetti commented on Sep 26, 2026

    @LucasBassetti
    Owner

    steps used to be read only once, when the chatbot mounted. With #392 updates to the steps prop are used by the steps that were not rendered yet. For state that changes inside a custom component, read it from a ref/context/store, or from the steps prop injected in the component.

    Closing as part of the maintenance pass in #392. Feel free to comment if it doesn't work for you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions