Show Agent Chat History in React App with same thread id

[Sarthak-ONS]

I have an agent with some tools attached to it, I am using mongoDB saver as a checkpointer to maintain state in agent.

Though graph state is maintained in backend, I want to show all the chat messages in my Frontend(built in reactjs) to my users.

Here is an example of document saved in MongoDB collection

Here is a brief code of my agent

const StateAnnotation = Annotation.Root({
  jdData: Annotation(),
  messages: Annotation({
    reducer: (x, y) => x.concat(y),
  }),
});

const callModel = async (state) => {
  const result = await model.invoke([systemMessage, ...state.messages]);
  return { messages: [result] };
};

const workflow = new StateGraph(StateAnnotation)
  .addNode("agent", callModel)
  .addNode("tools", toolsNode)
  .addEdge("__start__", "agent")
  .addConditionalEdges("agent", toolsCondition)
  .addEdge("tools", "__end__");

const client = new MongoClient(MONGODB_URI);

const checkpointer = new MongoDBSaver({
  client,
  dbName: DB_NAME,
  checkpointCollectionName: "checkPointerCollectionTesting",
  checkpointWritesCollectionName: "checkPointerCollectionWriteTesting",
});

(async () => {
  await client.connect();
  client.db(DB_NAME);
})();

const agent = workflow.compile({
  checkpointer,
});

const chatbotAgent = async (text) => {
  try {
    const messageReply = await agent.invoke(
      {
        messages: [
          new HumanMessage({
            content: text,
          }),
        ],
      },
      {
        configurable: {
          jdId: "678648d49cb39037f3bf2425",
          resumeJdMembershipId: "67853815c08651d533aaaa70",
          thread_id: "thread_id=thread_id",
        },
      },
    );

    console.log("messages ///////////////////");
    console.dir(messageReply, { depth: null });
    console.log("messages endddddddddddddddddddddd///////////////////");

    return messageReply.messages.at(-1).content;
  } catch (error) {
    console.error("Chatbot Error:", error);
    return "I apologize, but I encountered an error. Please try again or contact support.";
  }
};

[iamgauravpant]

hi @Sarthak-ONS , any luck ?
I'm stuck in a similar situtation right now. Were you able to display agent chat history in your React app ?

[Sarthak-ONS]

hi @Sarthak-ONS , any luck ?

I'm stuck in a similar situtation right now. Were you able to display agent chat history in your React app ?

I have to insert incoming and outgoing messages in database, not found any way to display messages directly!