const idAtom = atom<string | null>(null);

  const resolveInitialMessages = async (id: string | null) => {
    if (!id) {
      return [];
    }

    return typeof initialMessages === 'function'
      ? await initialMessages(id)
      : initialMessages;
  };

  const primitiveMessagesAtom = atom<Message[] | Promise<Message[]> | null>(
    typeof initialMessages === 'function' ? null : initialMessages
  );

  const initialMessagesAtom = atomWithSuspenseQuery((get) => ({
    queryKey: ['messages', get(idAtom)],
    queryFn: async ({ queryKey: [, id] }) => {
      return await resolveInitialMessages(id as string | null);
    },
  }));

  const messagesAtom = atom<
    Message[] | Promise<Message[]>,
    [messages: Message[] | Promise<Message[]>],
    void
  >(
    (get) => {
      const messages = get(primitiveMessagesAtom);

      if (messages === null) {
        const resolvedMessages = get(initialMessagesAtom);

        if ('then' in resolvedMessages) {
          return [];
        }

        return resolvedMessages.data;
      }

      return messages;
    },
    (_get, set, messages) => {
      set(primitiveMessagesAtom, messages);
    }
  );