chat interface

src/app/_providers/MessagesProvider.tsx

@@ -0,0 +1,69 @@
+'use client'
+import type { inferRouterOutputs } from '@trpc/server';
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { trpc } from '~/app/_trpc/Client'
+import { type ChatRouter } from '~/server/routers/chat'
+const MessageContext = createContext<{
+  session?: inferRouterOutputs<ChatRouter>['getSession']
+  messages?: inferRouterOutputs<ChatRouter>['getMessages']
+  refetchMessages: () => void
+  clearChat: (callback?: () => void) => void
+  error: string|null
+  isLoading: boolean
+  clearingChat: boolean
+  clearedChat: boolean
+}>({
+  session: undefined,
+  messages: undefined,
+  refetchMessages: () => undefined,
+  clearChat: () => undefined,
+  error: null,
+  isLoading: true,
+  clearingChat: false,
+  clearedChat: false
+})
+export const useMessages = () => useContext(MessageContext)
+export const MessagesProvider = ({children}:{children:ReactNode}) => {
+  const [error,setError] = useState<string|null>(null)
+  const [isLoading,setIsLoading] = useState<boolean>(true)
+  const { data: session,error:sessionError,isLoading:sessionLoading} = trpc.chat.getSession.useQuery()
+  const { data: messages, refetch, error:messageError, isLoading:messagesLoading } = trpc.chat.getMessages.useQuery(session?.id ? session.id : "")
+  const { mutate ,isPending:clearingChat,isSuccess:clearedChat } = trpc.chat.clearChat.useMutation()
+  const utils = trpc.useUtils()
+  const refetchMessages = () => {
+      utils.chat.getMessages.invalidate()
+      refetch()
+  }
+  const clearChat = (callback?: () => void) => {
+    mutate(undefined,{onSuccess: () => {
+      if (callback) {
+        callback()
+      }
+      utils.chat.getMessages.invalidate()
+    }})
+  }
+  useEffect(() => {
+    messageError && setError(messageError.message)
+    sessionError && setError(sessionError.message)
+  },[messageError,sessionError])
+  useEffect(() => {
+    !sessionLoading && !messagesLoading && setIsLoading(false)
+    sessionLoading || messagesLoading && setIsLoading(true)
+  },[sessionLoading,messagesLoading])
+  return (
+    <MessageContext.Provider value={
+      {
+        session,
+        messages,
+        refetchMessages,
+        clearChat,
+        error,
+        isLoading,
+        clearingChat,
+        clearedChat
+      }
+    }>
+      {children}
+    </MessageContext.Provider>
+  )
+}