Issue with Keeping Chat History Across Steps in Custom Component
Opened this issue · 1 comments
braher commented
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 commented
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])