useLanggraphRuntime not triggering create() or load() functions

[joofsh]

What is the correct way to "trigger" a thread being loaded with assistant-ui + useLanggraphRuntime?

I'm trying to create a very simple page that is just a single thread (no thread-list). I want to create or load my thread using my custom externalId.

            const runtime = useLangGraphRuntime({
		stream: async (messages, { initialize }) => {
			const { externalId } = await initialize();
			console.log('Streaming to thread:', externalId);
			return sendMessage({ threadId: externalId, messages });
		},
		create: async () => {
			console.log('CREATE called');
		},
		load: async (externalId) => {
			console.log('LOAD called for:', externalId);
		}
           })

	useEffect(() => {
		runtime.threads.switchToThread(myExternalId);
	}, [myExternalId])

         return (
			<AssistantRuntimeProvider runtime={runtime}>
				<PendingMessageSubmitter />
				<div className="chat-container max-w-4xl mx-auto p-6" style={{ height: 'calc(100vh - 200px)' }}>
					<div className="chat-interface h-full">
						{/* Chat Messages */}
						<div className="chat-messages h-full">
							<ThreadList />
							<Thread />
						</div>
					</div>
				</div>
			</AssistantRuntimeProvider>
          )

In this example, create nor load get called, despite me manually calling switchToThread. This prevents previous messages from loading properly. Notably, I'm not using ThreadList, which might be required? The const { externalId } = await initialize(); always returns null for the externalId, preventing messages from being sent too. I must be missing something fundamental?

[bernatsampera]

Had the same problem. Currently implementing it myself with react. It's not that much logic.

  const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  React.useEffect(() => {
    const initializeChat = async () => {
      try {
        setIsLoading(true);
        setError(null);

        console.log("Initializing a new chat thread...");
        const {thread_id} = await createThread();
        setCurrentThreadId(thread_id);
        console.log("Successfully initialized thread with ID:", thread_id);
      } catch (err) {
        console.error("Failed to initialize chat thread:", err);
        setError("Could not start the chat. Please refresh the page.");
      } finally {
        setIsLoading(false);
      }
    };

    initializeChat();
  }, []);
  const runtime = useLangGraphRuntime({
    stream: async (messages) => {
      if (!currentThreadId) {
        throw new Error("Cannot send message: Thread is not initialized.");
      }

      console.log(`Streaming message to thread: ${currentThreadId}`);

      const stream = await sendMessage({
        threadId: currentThreadId,
        messages
      });

      return stream;
    }
    // TODO: Use `create` or `load` when fixed
  });

[collindutter]

Maybe same issue as https://github.com/assistant-ui/assistant-ui/issues/2587#issuecomment-3494387975?