Persistence
Persisting Conversation History
Once you have the basic setup ready, users would expect their conversations to
be saved upon refresh. This guide explains how to configure the
A Thread is a single conversation session, maintaining its own history and context. The
The Thread List displays multiple conversation threads, typically in a sidebar. The
By configuring these hooks with your service functions, you integrate your application’s data operations (like saving to or loading from the database) to enable persistent chat experiences.
For a detailed walkthrough of implementing service functions with a Firebase backend, see:
useThreadManager and useThreadListManager hooks with your app’s persistence logic.
The
useThreadManager and useThreadListManager hooks are exported from both the @crayonai/react-core and @thesysai/genui-sdk packages. It is recommended to
use the @thesysai/genui-sdk package since it provides more features and eliminates the need to write a significant amount of boilerplate code.useThreadManager
A Thread is a single conversation session, maintaining its own history and context. The ThreadManager, obtained via the useThreadManager hook, controls its state and actions.
Key configurations:
The
ThreadListManager object. For more information on how to get this object, see useThreadListManager.Load all messages for a specific thread.
Save message updates (e.g., after a form submission).
A backend endpoint (e.g.,
"/api/chat"). Thesys GenUI SDK does a POST request to this endpoint with the following three arguments in the request body. If you need to pass additional arguments, use the processMessage function.
Provide either processMessage or apiUrl.A custom function for more control over sending messages and receiving AI responses. Provide either
processMessage or apiUrl.The useThreadManager hook uses the Response object from this function to handle streaming updates to the UI.
Application backend must use the
responseId to set the final assistant’s response message ID, as it’s used for future updates to that message. useThreadListManager
The Thread List displays multiple conversation threads, typically in a sidebar. The ThreadListManager, from the useThreadListManager hook, manages this list.
Key configurations:
Fetch all thread list.
Create a new thread when the user sends the first message.
Delete a specific thread.
Update a thread’s metadata, like its title.
UI Callback function: called when a user selects a thread from the list.
UI Callback function: called to prepare for a new conversation.