Brainlaq•4w ago

transfer class instances

The AI SDK uses the Chat class as the abstraction that one is supposed to share: https://ai-sdk.dev/cookbook/next/use-shared-chat-context the useChat hook needs the same reference in order to not rerender: https://github.com/vercel/ai/blob/e15b5458f1aaced8ea854823044ea3d125dcaac8/packages/react/src/use-chat.ts#L67 My current soultion is to wrap trpc with a "normal" useQuery

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

Is there another (better?) way? i thought about adding conditional logic in the transformer that checks for

`instanceof Chat

`instanceof Chat

on the backend I am unsure how to do this client side and if this a good approach in generel.

Share useChat State Across Components

Learn how to share a chat instance across multiple components with useChat and easily reset the chat.

GitHub

ai/packages/react/src/use-chat.ts at e15b5458f1aaced8ea854823044ea3...

The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents - vercel/ai

3 Replies

Nick•4w ago

Would this be solved with superjson?

import { Decimal } from 'decimal.js';

SuperJSON.registerCustom<Decimal, string>(
  {
    isApplicable: (v): v is Decimal => Decimal.isDecimal(v),
    serialize: v => v.toJSON(),
    deserialize: v => new Decimal(v),
  },
  'decimal.js'
);

import { Decimal } from 'decimal.js';

SuperJSON.registerCustom<Decimal, string>(
  {
    isApplicable: (v): v is Decimal => Decimal.isDecimal(v),
    serialize: v => v.toJSON(),
    deserialize: v => new Decimal(v),
  },
  'decimal.js'
);

https://github.com/flightcontrolhq/superjson

BrainlaqOP•3w ago

Thanks a lot for the response. Yes this seems to work but I realized that the tilte is not accurate. WIth this I have to create a react Chat instance on the server just and manually get the values out of it in the custom serialization. What I actually want is to return JSON from the backend but have a stable chat instance in the frontend. This might be out of the scope of trpc as I want to receive something different in the frontend then what the backend actually send.

Nick•3w ago

Yes and it might be slightly off the beaten track with AI SDK as they have helpers to move data from client to server and vice versa but all their examples are over plain http, so it will take some figuring out. I would look at how they recommend doing it and adapt from there

transfer class instances

Did you find this page helpful?