Manually setting the history in Chat Component

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.

1 Like

@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.

1 Like

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.

2 Likes

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 :ship:

2 Likes

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,

  1. You could make something very similar with our other components (container, listview, avatar, etc). The top "chat component" in this screenshot is made from other components vs the native chat component below. You could take this further with some custom css:

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
image

I've tried - you can't make anything as slick as what you guys have built.

1 Like

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.

1 Like