@superinterface/react 1.0.0

package/src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/index.ts

@@ -0,0 +1,25 @@
+import { queryKey as messagesQueryKey } from '@/hooks/messages/useMessages/lib/queryOptions/queryKey'
+import { Args as NewMessageArgs } from '../mutationFn'
+import { data } from './data'
+
+type Args = {
+  queryClient: any
+}
+
+export const onMutate = ({
+  queryClient,
+}: Args) => async (newMessage: NewMessageArgs) => {
+  await queryClient.cancelQueries(messagesQueryKey())
+
+  const prevMessages = queryClient.getQueryData(messagesQueryKey())
+
+  queryClient.setQueryData(
+    messagesQueryKey(),
+    data({ newMessage })
+  )
+
+  return {
+    prevMessages,
+    newMessage,
+  }
+}

package/src/hooks/messages/useCreateMessage/lib/mutationOptions/onSettled.ts

@@ -0,0 +1,16 @@
+import { queryKey as messagesQueryKey } from '@/hooks/messages/useMessages/lib/queryOptions/queryKey'
+import { Response } from './mutationFn'
+
+type Args = {
+  queryClient: any
+}
+
+export const onSettled = ({
+  queryClient,
+}: Args) => async (response: Response | undefined) => {
+  if (!response) return
+
+  await queryClient.invalidateQueries({
+    queryKey: messagesQueryKey(),
+  })
+}

package/src/hooks/messages/useCreateMessage/lib/mutationOptions/onSuccess.ts

@@ -0,0 +1,48 @@
+import { queryKey as messagesQueryKey } from '@/hooks/messages/useMessages/lib/queryOptions/queryKey'
+import { Response } from './mutationFn'
+
+type Args = {
+  queryClient: any
+  passedOnSuccess?: () => void
+}
+
+export const onSuccess = ({
+  queryClient,
+  passedOnSuccess,
+}: Args) => (response: Response) => {
+  passedOnSuccess?.()
+
+  queryClient.setQueryData(
+    messagesQueryKey(),
+    (prevData: any) => {
+      if (!prevData) {
+        return {
+          pageParams: [],
+          pages: [
+            {
+              data: [response.message],
+              hasNextPage: false,
+              lastId: response.message.id,
+            },
+          ],
+        }
+      }
+
+      const [latestPage, ...pagesRest] = prevData.pages
+
+      return {
+        ...prevData,
+        pages: [
+          {
+            ...latestPage,
+            data: [
+              response.message,
+              ...latestPage.data,
+            ],
+          },
+          ...pagesRest,
+        ],
+      }
+    }
+  )
+}

package/src/hooks/messages/useLatestMessage/index.ts

@@ -0,0 +1,20 @@
+import {
+  UseInfiniteQueryOptions,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useMessages } from '@/hooks/messages/useMessages'
+import { MessagesPage } from '@/types'
+
+type Args = {
+  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
+}
+
+export const useLatestMessage = (args: Args) => {
+  const props = useMessages(args)
+
+  return useMemo(() => ({
+    ...props,
+    latestMessage: props.messages[0] || null,
+  }), [props])
+}

package/src/hooks/messages/useMessages/index.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react'
+import {
+  useInfiniteQuery,
+  InfiniteData,
+  UseInfiniteQueryOptions,
+} from '@tanstack/react-query'
+import { Message, MessagesPage } from '@/types'
+import { queryOptions as defaultQueryOptions } from './lib/queryOptions'
+
+type Args = {
+  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
+}
+
+const messages = ({
+  props,
+}: {
+  props: {
+    data: InfiniteData<MessagesPage> | undefined
+  },
+}) => {
+  if (!props.data) return []
+
+  return props.data.pages.reduce<Message[]>((acc, page) => (
+    acc.concat(page.data)
+  ), [])
+}
+
+
+export const useMessages = ({
+  messagesQueryOptions,
+}: Args) => {
+  const props = useInfiniteQuery({
+    ...defaultQueryOptions,
+    ...messagesQueryOptions,
+  })
+
+  return useMemo(() => ({
+    ...props,
+    messages: messages({ props }),
+  }), [props])
+}

package/src/hooks/messages/useMessages/lib/queryOptions/index.ts

@@ -0,0 +1,20 @@
+import { MessagesPage } from '@/types'
+// import { queryFn } from './queryFn'
+import { queryKey } from './queryKey'
+
+export const queryOptions = {
+  queryKey: queryKey(),
+  // queryFn: ({
+  //   pageParam,
+  // }: { pageParam?: string }) => (
+  //   queryFn({
+  //     ...(pageParam ? { cursor: pageParam } : {}),
+  //   })
+  // ),
+  initialPageParam: undefined,
+  getNextPageParam: (lastPage: MessagesPage) => {
+    if (!lastPage.hasNextPage) return null
+
+    return lastPage.lastId
+  },
+}

package/src/hooks/messages/useMessages/lib/queryOptions/queryFn/data/index.ts

@@ -0,0 +1,32 @@
+import OpenAI from 'openai'
+import pMap from 'p-map'
+import { extendMessage } from '@/lib/messages/extendMessage'
+import { runMessages } from './runMessages'
+
+export const data = async ({
+  messagesResponse,
+  cursor,
+  threadId,
+}: {
+  messagesResponse: OpenAI.CursorPage<OpenAI.Beta.Threads.Messages.ThreadMessage>
+  cursor?: string
+  threadId: string
+}) => {
+  const messages = await pMap(messagesResponse.data, (message) => (
+    extendMessage({
+      message,
+    })
+  ))
+
+  if (cursor) {
+    return messages
+  }
+
+  return [
+    ...await runMessages({
+      messages,
+      threadId,
+    }),
+    ...messages,
+  ]
+}

package/src/hooks/messages/useMessages/lib/queryOptions/queryFn/data/runMessages/getLatestRun.ts

@@ -0,0 +1,15 @@
+import { client } from '@/lib/ai'
+
+type Args = {
+  threadId: string
+}
+
+export const getLatestRun = async ({
+  threadId,
+}: Args) => {
+  const runsResponse = await client.beta.threads.runs.list(threadId, {
+    limit: 1,
+  })
+
+  return runsResponse.data[0]
+}

package/src/hooks/messages/useMessages/lib/queryOptions/queryFn/data/runMessages/index.ts

@@ -0,0 +1,44 @@
+import OpenAI from 'openai'
+import { Message } from '@/types'
+import { getLatestRun } from './getLatestRun'
+import { extendMessage } from '@/lib/messages/extendMessage'
+import { optimisticId } from '@/lib/optimistic/optimisticId'
+
+type Args = {
+  messages: Message[]
+  threadId: string
+}
+
+export const runMessages = async ({
+  messages,
+  threadId,
+}: Args) => {
+  const latestRun = await getLatestRun({ threadId })
+
+  if (!latestRun) {
+    return []
+  }
+
+  const messageFromLatestRun = messages.find(m => m.run_id === latestRun.id)
+
+  if (messageFromLatestRun) {
+    return []
+  }
+
+  return [
+    await extendMessage({
+      message: {
+        id: optimisticId(),
+        role: 'assistant' as OpenAI.Beta.Threads.Messages.ThreadMessage['role'],
+        created_at: +new Date(),
+        object: 'thread.message' as OpenAI.Beta.Threads.Messages.ThreadMessage['object'],
+        content: [],
+        run_id: latestRun.id,
+        assistant_id: latestRun.assistant_id,
+        thread_id: latestRun.thread_id,
+        file_ids: [],
+        metadata: {},
+      },
+    }),
+  ]
+}

package/src/hooks/messages/useMessages/lib/queryOptions/queryFn/hasNextPage.ts

@@ -0,0 +1,12 @@
+import OpenAI from 'openai'
+import { messagesLimit } from './messagesLimit'
+
+export const hasNextPage = ({
+  messagesResponse,
+}: {
+  messagesResponse: OpenAI.CursorPage<OpenAI.Beta.Threads.Messages.ThreadMessage>
+}) => {
+  if (messagesResponse.data.length < messagesLimit) return false
+
+  return messagesResponse.hasNextPage()
+}

package/src/hooks/messages/useMessages/lib/queryOptions/queryFn/index.ts

@@ -0,0 +1,32 @@
+import _ from 'lodash'
+import { client } from '@/lib/ai'
+import { MessagesPage } from '@/types'
+import { data } from './data'
+import { messagesLimit } from './messagesLimit'
+import { hasNextPage } from './hasNextPage'
+
+type Args = {
+  threadId: string
+  cursor?: string
+}
+
+export const queryFn = async ({
+  threadId,
+  cursor,
+}: Args): Promise<MessagesPage> => {
+  const messagesResponse = await client.beta.threads.messages.list(threadId, {
+    ...(cursor ? { after: cursor } : {}),
+    limit: messagesLimit,
+  })
+
+  return {
+    data: await data({
+      messagesResponse,
+      cursor,
+      threadId,
+    }),
+    hasNextPage: hasNextPage({ messagesResponse }),
+    // @ts-ignore-next-line
+    lastId: messagesResponse.body.last_id,
+  }
+}

package/src/hooks/messages/useMessages/lib/queryOptions/queryFn/messagesLimit.ts

@@ -0,0 +1 @@
+export const messagesLimit = 10

package/src/hooks/messages/useMessages/lib/queryOptions/queryKey.ts

@@ -0,0 +1,3 @@
+export const queryKey = () => (
+  ['messages']
+)

package/src/hooks/misc/useInfiniteScroll/index.tsx

@@ -0,0 +1,42 @@
+import { useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+import { useThrottledEffect } from '@/hooks/misc/useThrottledEffect'
+
+type Args = {
+  isFetchingNextPage: boolean
+  hasNextPage: boolean
+  fetchNextPage: () => void
+}
+
+export const useInfiniteScroll = ({
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+}: Args) => {
+  const containerRef = useRef(null)
+
+  const { ref: loaderRef, inView } = useInView({
+    root: containerRef.current,
+    rootMargin: '0px',
+    threshold: 0.1,
+  })
+
+  useThrottledEffect(
+    () => {
+      if (isFetchingNextPage) return
+      if (!inView) return
+      if (!hasNextPage) return
+
+      console.log('Fetching next page')
+      fetchNextPage()
+    },
+    500,
+    [inView, isFetchingNextPage, hasNextPage, fetchNextPage]
+  )
+
+  return {
+    containerRef,
+    loaderRef,
+    inView,
+  }
+}

package/src/hooks/misc/useThrottledEffect/index.tsx

@@ -0,0 +1,19 @@
+import _ from 'lodash'
+import { useRef, useEffect, useCallback } from 'react'
+
+export const useThrottledEffect = (cb: Function, delay: number, additionalDeps: any[]) => {
+  const cbRef = useRef(cb)
+
+  const throttledCb = useCallback(
+    _.throttle((...args: any[]) => cbRef.current(...args), delay, {
+      leading: true,
+      trailing: true,
+    }),
+    [delay]
+  )
+  useEffect(() => {
+    cbRef.current = cb
+  })
+  // set additionalDeps to execute effect, when other values change (not only on delay change)
+  useEffect(throttledCb, [throttledCb, ...additionalDeps])
+}

package/src/hooks/runs/useCreateRun/index.ts

@@ -0,0 +1,30 @@
+import {
+  useMutation,
+  useQueryClient,
+  UseMutationOptions,
+} from '@tanstack/react-query'
+import { mutationOptions } from './lib/mutationOptions'
+import { Run } from '@/types'
+
+type Args = {
+  createRunMutationOptions: UseMutationOptions<{ run: Run }>
+}
+
+export const useCreateRun = ({
+  createRunMutationOptions,
+}: Args) => {
+  const queryClient = useQueryClient()
+
+  // @ts-ignore-next-line
+  const mutationProps = useMutation({
+    ...mutationOptions({
+      queryClient,
+    }),
+    ...createRunMutationOptions,
+  })
+
+  return {
+    ...mutationProps,
+    createRun: mutationProps.mutate,
+  }
+}

package/src/hooks/runs/useCreateRun/lib/mutationOptions/index.ts

@@ -0,0 +1,16 @@
+import { QueryClient } from '@tanstack/react-query'
+// import { mutationFn } from './mutationFn'
+import { onSuccess } from './onSuccess'
+import { onSettled } from './onSettled'
+
+type Args = {
+  queryClient: QueryClient
+}
+
+export const mutationOptions = ({
+  queryClient,
+}: Args) => ({
+  // mutationFn,
+  onSuccess: onSuccess({ queryClient }),
+  onSettled: onSettled({ queryClient }),
+})

package/src/hooks/runs/useCreateRun/lib/mutationOptions/mutationFn.ts

@@ -0,0 +1,30 @@
+import { Run } from '@/types'
+import { client } from '@/lib/ai'
+
+type Args = {
+  threadId: string
+  assistantId: string
+}
+
+export type Response = {
+  run: Run
+}
+
+export const mutationFn = async ({
+  threadId,
+  assistantId,
+}: Args): Promise<Response> => {
+  const run = await client.beta.threads.runs.create(threadId, {
+    assistant_id: assistantId,
+    // model: 'gpt-3.5-turbo-1106',
+  })
+
+  return {
+    // @ts-ignore-next-line
+    run,
+  }
+  //     ...run,
+  //     assistantConversationId,
+  //   },
+  // }
+}

package/src/hooks/runs/useCreateRun/lib/mutationOptions/onSettled.ts

@@ -0,0 +1,22 @@
+import { queryKey as messagesQueryKey } from '@/hooks/messages/useMessages/lib/queryOptions/queryKey'
+import { queryKey as runsQueryKey } from '@/hooks/runs/useRuns/lib/queryOptions/queryKey'
+import { Response } from './mutationFn'
+
+type Args = {
+  queryClient: any
+}
+
+export const onSettled = ({
+  queryClient,
+}: Args) => (response: Response | undefined) => {
+  if (!response) {
+    throw new Error('useCreateRun onSettled: response is undefined')
+  }
+
+  queryClient.invalidateQueries({
+    queryKey: messagesQueryKey(),
+  })
+  queryClient.invalidateQueries({
+    queryKey: runsQueryKey(),
+  })
+}

package/src/hooks/runs/useCreateRun/lib/mutationOptions/onSuccess.ts

@@ -0,0 +1,44 @@
+import { queryKey as runsQueryKey } from '@/hooks/runs/useRuns/lib/queryOptions/queryKey'
+import { Response } from './mutationFn'
+
+type Args = {
+  queryClient: any
+}
+
+export const onSuccess = ({
+  queryClient,
+}: Args) => (response: Response) => (
+  queryClient.setQueryData(
+    runsQueryKey(),
+    (prevData: any) => {
+      if (!prevData) {
+        return {
+          pageParams: [],
+          pages: [
+            {
+              data: [response.run],
+              hasNextPage: false,
+              lastId: response.run.id,
+            },
+          ],
+        }
+      }
+
+      const [latestPage, ...pagesRest] = prevData.pages
+
+      return {
+        ...prevData,
+        pages: [
+          {
+            ...latestPage,
+            data: [
+              response.run,
+              ...latestPage.data,
+            ],
+          },
+          ...pagesRest,
+        ],
+      }
+    }
+  )
+)

package/src/hooks/runs/useIsRunActive/index.tsx

@@ -0,0 +1,65 @@
+import {
+  UseInfiniteQueryOptions,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useIsMutating } from '@tanstack/react-query'
+import { useLatestRun } from '@/hooks/runs/useLatestRun'
+import { useLatestMessage } from '@/hooks/messages/useLatestMessage'
+import { isRunEditingMessage } from '@/lib/runs/isRunEditingMessage'
+import { MessagesPage, RunsPage } from '@/types'
+
+type Args = {
+  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
+  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
+}
+
+const statuses = [
+  'queued',
+  // 'completed',
+  'in_progress',
+  'cancelling',
+  'requires_action',
+]
+
+const isRunActive = ({
+  latestRunProps,
+  latestMessageProps,
+  isMutating,
+}: {
+  latestRunProps: ReturnType<typeof useLatestRun>,
+  latestMessageProps: ReturnType<typeof useLatestMessage>,
+  isMutating: number,
+}) => {
+  // @ts-ignore-next-line
+  if (latestMessageProps.latestMessage?.metadata?.isBlocking) return false
+  if (isMutating > 0) return true
+  if (!latestRunProps.latestRun) return false
+  if (statuses.includes(latestRunProps.latestRun.status)) return true
+
+  return isRunEditingMessage({ message: latestMessageProps.latestMessage })
+}
+
+export const useIsRunActive = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+}: Args) => {
+  const latestRunProps = useLatestRun({
+    runsQueryOptions,
+  })
+
+  const latestMessageProps = useLatestMessage({
+    messagesQueryOptions,
+  })
+
+  const isMutating = useIsMutating()
+
+  return useMemo(() => ({
+    ...latestRunProps,
+    isRunActive: isRunActive({
+      latestRunProps,
+      latestMessageProps,
+      isMutating,
+    }),
+  }), [latestRunProps, latestMessageProps, isMutating])
+}

package/src/hooks/runs/useLatestRun/index.ts

@@ -0,0 +1,20 @@
+import {
+  UseInfiniteQueryOptions,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useRuns } from '@/hooks/runs/useRuns'
+import { RunsPage } from '@/types'
+
+type Args = {
+  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
+}
+
+export const useLatestRun = (args: Args) => {
+  const props = useRuns(args)
+
+  return useMemo(() => ({
+    ...props,
+    latestRun: props.runs[0],
+  }), [props])
+}

package/src/hooks/runs/useManageRuns/index.tsx

@@ -0,0 +1,55 @@
+import {
+  UseInfiniteQueryOptions,
+  UseMutationOptions,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useLatestMessage } from '@/hooks/messages/useLatestMessage'
+import { useLatestRun } from '@/hooks/runs/useLatestRun'
+import { useCreateRun } from '@/hooks/runs/useCreateRun'
+import { isOptimistic } from '@/lib/optimistic/isOptimistic'
+import { MessagesPage, RunsPage, Run } from '@/types'
+
+type Args = {
+  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
+  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
+  createRunMutationOptions: UseMutationOptions<{ run: Run }>
+}
+
+export const useManageRuns = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+  createRunMutationOptions,
+}: Args) => {
+  const latestRunProps = useLatestRun({
+    runsQueryOptions,
+  })
+
+  const latestMessageProps = useLatestMessage({
+    messagesQueryOptions,
+  })
+
+  const createRunProps = useCreateRun({
+    createRunMutationOptions,
+  })
+
+  useEffect(() => {
+    if (createRunProps.isPending) return
+    if (latestRunProps.isFetching) return
+    if (latestMessageProps.isFetching) return
+
+    if (!latestMessageProps.latestMessage) return
+    if (latestMessageProps.latestMessage.role !== 'user') return
+    if (isOptimistic({ id: latestMessageProps.latestMessage.id })) return
+
+    if (!latestRunProps.latestRun || (latestMessageProps.latestMessage.created_at > latestRunProps.latestRun.created_at)) {
+      createRunProps.createRun()
+    }
+  }, [
+    createRunProps,
+    latestRunProps,
+    latestMessageProps,
+  ])
+
+  return null
+}