Is it possible to manually set the message history in the Chat component? We use Retool to analyze customer SMS conversations, and the Chat component is the perfect, prebuilt UI to load messages from our data into the system.
I tried set setValue, but that didn't work (or I had the was inputting the wrong data).
Hello @Alexander_Holman!
If you inspect the query for your chat component (should be something called chatX_queryX), you should be able to manually set the message history of your chat component with JavaScript. Let me know if you have any more questions.
@francis12 as far as I can tell, that's not right. But it's possible I'm not using the right function or code. As far as i can tell, neither the chat query nor the chat component have a set history function. And when I run a JS query script that sets the chatHistory variable for the chat query to the history that I want, nothing happens (which makes sense, as I don't think you can update state of any Retool component without an explicit function, as opposed to just setting variables in JS queries).
Setting chatHistory also doesn't make sense as you can't set the other pieces of metadata (like time sent), whereas the messageHistory for the chat component does have all this metadata, which is required for rendering each message tile.
Please help!!!
Hi @Alexander_Holman. Sorry to hear that you have been having trouble. There is no JS method to set the chat history, but you can directly set in within the chatX_queryX itself (see image below). Two caveats that you alluded to: you won't be able to include pieces of metadata when you directly set history, and the history that you add won't visually show up on the chat component. However, when you send a message in the chat, the history you explicitly added will be seen by the LLM. To test this theory, set your chat history to {{ [{content: 'Hello', role: 'user'}] }}, click the trash icon on your chat component to clear any previous messages you sent, and then ask the chat component something along the lines of "What did I just say?". The chat component will say that you just said "Hello" because you manually set that in the history.
Let me know if you have any further questions.
I appreciate the response. This isn't really what I'm looking for. I want to use the chat component independent of a chat query, which means having full control of the message history.
I would love to feature request the ability to setMessageHistory for the chat component. It's a great visual for looking at conversations.
Hi @Alexander_Holman, hope you're doing well. I'm working on a product similar to yours as well, and I've been trying to manually set the chat history of the chat component. Have you found a way to do it with javascript? I tried doing it like this:
const messages = GetChatMessages.data;
// Loop through each message
for (let i = 0; i < messages.length; i++) {
console.log("Sending message: ", messages[i].message_content);
// Submit each message to the chat component
chat1.sendMessage({
value: messages[i].message_content,
sender: messages[i].sent_by
});
console.log("Message added: ", messages[i].message_content);
}
I can see from the browser console:
Sending message: hi
Message added: hi
However, the message is not being added to the .data array of the chat component. I am not sure why, although there is no error at all.
Have you figured a way to do it?
Can anyone from the Retool team help? Help would be much appreciated : )
Hi there,
We have a feature request to add a set message history method! I'll post here if the team is able to pick up this request 
For the code, snippet, you'll need to rename value and sender with the params message and username:
@Ahmed_Elsaid I did not - I tried methods similar to yours, but it doesn't get what I want which is full control over the message history, functionally using the chat component as a UI tool
Thank you @Tess - will owe you all forever if we can get this - very excited to use the chat UI!!
If you're only interested in the visual of the chat component,
2). You potentially solve this by using the sendMessage api and then clearing the query to trigger in the chat component. Unfortunately, you'd only be able to post messages as sent from user with no replies
I've tried - you can't make anything as slick as what you guys have built.
Thank you @Tess and @Alexander_Holman for the replies! I built something a little primitive with a listbox (not as slick of a design) though. But it will functionally do it for my MVP, I'll implement the custom chat box recommended by @Tess when I come back to work on this! Thank you again.
Hey @Alexander_Holman ,
Were you able to find a solution for this issue? I need to also bring users message history.
Would be really helpful if you can design a chat component which is more dynamic and where we have more control over it. Otherwise unfortunately we need to use some other tool than Retool.
I have not but please respond here and upvote it so they add this feature!
on this thread I show how you can add a default message to the message history. you should be able to use an array of objects or use a loop instead to display a whole bunch of messages.
in a nut shell you use the Disable query property to prevent the ai from actually running, then clear the history, and finally you call chat1.sendMessage({...}) which adds the message to the chat history but doesn't attempt to send anything. at the very bottom of the page (the last post) I alsoinclude an app export w the whole process. if anybody needs me to, I can go back and edit it for more than 1 message and re-upload it here, just let me know
