How to Save History of AI Conversation with Plotly Dash and LangGraph

This tutorial enhances a previous Dash app by adding user input, a submit button, and memory to an AI agent. The app saves conversation history using a Dash store component, serializing and deserializing the conversation to maintain state across sessions (even after closing the browser tab, unless cookies are deleted). The AI agent uses Langchain to process user input and provide responses, incorporating previous conversation turns into subsequent interactions. This segment details the core logic of the AI agent's interaction with the user. It explains how user input triggers a callback function, which then activates the Langchain executor to generate a response. The process of serializing and deserializing the conversation history using `dumps` and `load` from Langchain is explained, ensuring data compatibility with the Dash store component for persistent storage. The segment clearly illustrates the flow of information from user input to AI response and its storage within the application. the data of the conversation. The conversation is a DCC store. So I'm actually returning it here. The data is going to be equal to history. All right. So that this is how I'm saving the full conversation on the client's browser on the users's uh, on the client side on the user's browser, right? but this is a DCC store is a dash store component. It cannot take a regular response message. This is not um, applicable. It has to be in in a JSON format or a string or whatever. So we have to serialize it in order to return it to the to assign it to the data on the browser. So now that we serialized it, we have it And now is the second time I'm going to activate the call back by saying what is my name? All right, if I not none, right? If there is something in the conversation data that pulled from here, then do something. and we know there is something in the conversation data, because previously we asked, we told it my name is is Tom. And we actually return the con serialized conversation to the data property of the store component, the dash store component. So we know there's something in there, right? You can even print it out. You can do print convo data and you'll see something in there. But now because it's serialized, we have to deserialize it. We're going to use, uh, lo lo convo data and just call it convo data again. And then we're going to add this to the conversation history by