Support: Having an issue loading message history using useRemoteThreadListRuntime

[Mikeks81]

Having an issue loading message history using useRemoteThreadListRuntime

I'm having an issue where I get an error when trying to switch the conversation to something from the threadlist.

I'm getting the following error:

Error: Cannot read properties of undefined (reading 'id')

Call Stack
3

Hide 3 ignore-listed frame(s)
MessageRepository.addOrUpdateMessage
node_modules/@assistant-ui/react/src/runtimes/utils/MessageRepository.tsx (243:52)
MessageRepository.import
node_modules/@assistant-ui/react/src/runtimes/utils/MessageRepository.tsx (481:12)
<unknown>
node_modules/@assistant-ui/react/src/runtimes/local/LocalThreadRuntimeCore.tsx (107:25)

If anyone could kindly take a look and see what it is that I'm missing here. All the data shapes look correct to me and the db is returning the expected data. Am I missing something here? I tried to follow the documentation. I know it's a work in progress so I'm hoping that maybe I'm missing something that wasn't included there. THANK YOU in advance for taking the time!

This is the RuntimeProvider code I'm using useRemotethreadListRuntime in

export function MyRuntimeProvider({ children }) {
  const runtime = useRemoteThreadListRuntime({
    runtimeHook: () => {
      return useLocalThreadRuntime(MyModelAdapter, {});
    },
    adapter: {
      ...myDatabaseAdapter,

      // The Provider component adds thread-specific adapters
      unstable_Provider: ({ children }) => {
        // This runs in the context of each thread
        const threadListItem = useThreadListItem();
        const remoteId = threadListItem.remoteId;

        // Create thread-specific history adapter
        const history = useMemo<ThreadHistoryAdapter>(
          () => ({
            // This runs when the user selects a thread. the db look up happens for all the message history.
            async load() {
              console.log({ called: "load", threadListItem, remoteId });
              if (!remoteId) return { messages: [] };

              const messages = await db.messages.findByThreadId(remoteId);
              console.log({ messages });
              return {
                messages: messages.map((m) => ({
                  role: m.role,
                  content: m.content,
                  id: m.id,
                  createdAt: new Date(m.createdAt),
                })),
              };
            },

            // save new messages to storage.
            async append(message) {
              if (!remoteId) {
                console.warn("Cannot save message - thread not initialized");
                return;
              }

              console.log("APPEND: ", { message });

              await db.messages.create({
                threadId: remoteId,
                role: message.role,
                content: message.content,
                id: message.id,
                createdAt: message.createdAt,
              });
            },
          }),
          [remoteId]
        );

        const adapters = useMemo(() => ({ history }), [history]);

        return (
          <RuntimeAdapterProvider adapters={adapters}>
            {children}
          </RuntimeAdapterProvider>
        );
      },
    },
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}

These are resulting console log results.

[lucagiacomelli]

In my case the load function of the ThreadHistoryAdapter is never called.

[CoolSpot]

In my case the load function of the ThreadHistoryAdapter is never called.

@lucagiacomelli, Do you have the method "withFormat" defined in your ThreadHistoryAdapter ? See #2450

[collindutter]

In my case the load function of the ThreadHistoryAdapter is never called.

@lucagiacomelli did you ever sort this out? Even adding withFormat, I can't seem to get my load called.