TRPC w/ Query, fullstack chat streaming

index.ts

// 1. fe
import { experimental_streamedQuery as streamedQuery, useQuery } from '@tanstack/vue-query'

const { data: messagesStreamData, fetchStatus: streamFetchStatus } = useQuery({
  queryKey: ['chatting'],
  queryFn: streamedQuery({
    queryFn: () => {
      const machina = new Machina<string>()
      $trpc.chat.chat.subscribe({
        content: currentConversationData.value!.userAsk,
        conversationId: currentConversationData.value!.id,
      }, {
        onData(value) {
          machina.push(value ?? '')
        },
        onComplete() {
          machina.close()
        },
        onError() {
          machina.close()
        },
      })

      return machina.stream()
    },
  }),
  enabled: () => currentConversationData.value != null,
})

// 2. be, uses trpc
protectedProcedure
  .input(
    v.object({
      conversationId: v.string(),
      content: v.string(),
    }),
  )
  .subscription(async function* ({ input }) {
    const prompt = input.content
    const response = prepareChatResponse(prompt)
    for await (const textPart of response.textStream) {
      yield textPart
    }
  })
  
// 3. llm
import { createOpenAICompatible } from '@ai-sdk/openai-compatible'

const arkAI = createOpenAICompatible({
  name: 'ark',
  apiKey: process.env.ARK_API_KEY,
  baseURL: process.env.ARK_API_URL,
})

function prepareChatResponse(prompt: string) {
  return streamText({
    model: arkAI(process.env.ARK_MODEL),
    system: '你是一个专业的AI助手，擅长回答用户的问题。',
    prompt,
  })
}