From 8a763ad3585b2f424fed514a7c9f1c5b6b0d70f9 Mon Sep 17 00:00:00 2001 From: MauritsBrinkman Date: Thu, 12 Jun 2025 10:07:52 +0100 Subject: [PATCH] feat(react): add newThreadId option to useStream for optimistic UI Add optional newThreadId parameter to useStream hook that allows specifying a thread ID for new thread creation while keeping threadId null. This enables optimistic UI patterns where developers need to know the thread ID beforehand for routing/navigation without causing 404 errors from attempting to fetch non-existent thread history. Usage: - Set threadId: null and newThreadId: "predetermined-id" - Submit message to create thread with specified ID - Use onThreadId callback to update threadId after creation This solves the UX problem of having to await thread creation before enabling optimistic navigation to e.g. /[threadId] routes. --- libs/sdk-js/src/react/stream.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/libs/sdk-js/src/react/stream.tsx b/libs/sdk-js/src/react/stream.tsx index 8ac73ca9e..f4bd54cf5 100644 --- a/libs/sdk-js/src/react/stream.tsx +++ b/libs/sdk-js/src/react/stream.tsx @@ -516,6 +516,13 @@ export interface UseStreamOptions< */ threadId?: string | null; + /** + * The ID to use when creating a new thread. When provided, this ID will be used + * for thread creation when threadId is null. This enables optimistic UI updates + * where you know the thread ID before the thread is actually created. + */ + newThreadId?: string; + /** * Callback that is called when the thread ID is updated (ie when a new thread is created). */ @@ -1013,7 +1020,9 @@ export function useStream< let usableThreadId = threadId; if (!usableThreadId) { - const thread = await client.threads.create(); + const thread = await client.threads.create({ + threadId: options.newThreadId, + }); onThreadId(thread.thread_id); usableThreadId = thread.thread_id; }