Clear chat history on page load

💬 App Building
1

Hello :wave:

I think I found a bug with related to clearing chat history for the llm chat component. Would love to hear if anyone has a solid approach to solving it!

  1. My goal:

Build a chat bot for our support team to ask questions about a customer's account, when viewing that account in a Retool app

  1. Issue:

I have a query that calls chatbot.clearHistory() on page load. It does trigger however the state of the component still contains the previous conversation message history and data fields. If I switch to a new tab in my tabbed container that houses the chatbot and then switch back, the state is finally updated and I've got a clean state.

I've also tried not doing it on page load and hiding the chatbot on the initial load and using a button to:

  1. clear the history
  2. display the chat component

The same issue still occurs even if I wait until the page has fully loaded and all queries have been resolved. For some reason, the initial rendering of the chat component insists on retaining the message history

  1. Steps I've taken to troubleshoot:

Approach 1:

  • Create LLM chat component within a tabbed container
  • Create query that clears the history of the component. Example: chatComponent.clearHistory()
  • Add console logs to ensure it's running
  • Set the query to run on page load
  • Send a message to the LLM via the chat component and wait for the response
  • Open up the Debug console and refresh the page
  • When the page loads you will see the console logs for the query but the chat content is still visible. Switching tabs in the container and switching back will remove the history. You can verify this by checking the state of the component before and after switching tabs in the tabbed container

Approach 2:

  • Set up the components and queries exactly like Approach 1
  • Set the hidden value for the chat component to true
  • Add a button with the following event handlers when clicked
    • Trigger the query that should clear the chat history
    • Set chat component hidden value to false
  • Send a message to the LLM via the chat component and wait for the response
  • Open up the Debug console and refresh the page
  • When the page loads you will see the console logs for the query on page load
  • click the button
  • You will see console logs for the query again and the chat component will be displayed, still showing the chat history
  • Switching tabs in the container and switching back will remove the history. You can verify this by checking the state of the component before and after switching tabs in the tabbed container
  1. Additional info: (Cloud or Self-hosted, Screenshots)
3

Hi @cosmick,

I took a look into the issue, and while I can't confirm it's a bug with 100% certainty, it may be related to how Retool handles component initialisation within tabbed containers. Here are a few observations that might help:

  • In a tabbed container, only the active (visible) tab's components are initialised and rendered.
  • If your chatbot (llmChat3) is placed inside a non-default or hidden tab, it likely hasn't been loaded into the DOM at the time your JavaScript query runs.
  • As a result, calling llmChat3.clearHistory() on page load may silently fail or do nothing because llmChat3 doesn't yet exist in the Retool runtime.

You might want to try either moving the chatbot outside of the tabbed container for testing, or updating your JavaScript query to ensure it only runs when the tab is active. For example:

// Example: Run when the chatbot tab is selected
if (tabbedcontainer1.currentView === "Chat Tab") {
  await llmChat3.clearHistory();
  console.log("Chat history cleared after tab is visible.");
}

Here are some screenshots showing the behaviour before and after refresh for reference:

Before Refresh:

image
image1806×828 75.6 KB

After Refresh:

image
image1783×762 68.5 KB

Refer to the attached video for a clearer understanding of the behaviour. After the code update, it is working. As shown in the video, ensure that the query is set to run periodically every 2000 milliseconds and also triggered on page load.

4 Likes
4

Thanks so much for your reply, @WidleStudioLLP!

I tried moving it out of the tabbed container and did confirm that this cleared the history correctly.

However, I kinda need to keep it in the container for the specific app I've built. The chat component is in the default tab, but I have the hidden value set to true on page load. I'm guessing this might be a factor. The JS code you shared, doesn't fully resolve the issue. I'm guessing this is because the component is hidden on page load even when the correct tab is loaded.

I'm going to chat with our team about finding a new home for the chat component, as moving it out of the container seems to solve it. In the meantime, I've update things on my end to clear the history the moment we display the chat bot. There is a small window where you might see the previous chat history but it gets cleared quickly and is a big improvement on the previous implementation.

More than likely we'll change the implementation so the component renders and clears properly on page load.

Thanks again for taking the time to look into this issue :blush:

1 Like