@superinterface/react 1.0.0

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

@@ -0,0 +1,39 @@
+import {
+  useQueryClient,
+  UseInfiniteQueryOptions,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { useIsRunActive } from '@/hooks/runs/useIsRunActive'
+import { useInterval } from 'react-use'
+import { refetch } from './lib/refetch'
+import { MessagesPage, RunsPage } from '@/types'
+
+type Args = {
+  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
+  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
+}
+
+export const usePolling = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+}: Args) => {
+  const queryClient = useQueryClient()
+
+  const isRunActiveProps = useIsRunActive({
+    messagesQueryOptions,
+    runsQueryOptions,
+  })
+
+  useInterval(() => {
+    refetch({
+      queryClient,
+      latestRun: isRunActiveProps.latestRun,
+    })
+
+    console.log('poll refetched')
+  },
+    isRunActiveProps.isRunActive ? 3000 : null
+  )
+
+  return null
+}

package/src/hooks/runs/usePolling/lib/refetch.ts

@@ -0,0 +1,20 @@
+import { Run } from '@/types'
+import { queryKey as messagesQueryKey } from '@/hooks/messages/useMessages/lib/queryOptions/queryKey'
+import { queryKey as runsQueryKey } from '@/hooks/runs/useRuns/lib/queryOptions/queryKey'
+
+type Args = {
+  queryClient: any
+  latestRun: Run
+}
+
+export const refetch = async ({
+  queryClient,
+  latestRun,
+}: Args) => {
+  await queryClient.invalidateQueries({
+    queryKey: messagesQueryKey(),
+  })
+  await queryClient.invalidateQueries({
+    queryKey: runsQueryKey(),
+  })
+}

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

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import {
+  useInfiniteQuery,
+  UseInfiniteQueryOptions,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { queryOptions as defaultQueryOptions } from './lib/queryOptions'
+import { getRuns } from './lib/getRuns'
+import { RunsPage } from '@/types'
+
+type Args = {
+  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
+}
+
+export const useRuns = ({
+  runsQueryOptions,
+}: Args) => {
+  const props = useInfiniteQuery({
+    ...defaultQueryOptions,
+    ...runsQueryOptions,
+  })
+
+  return useMemo(() => ({
+    ...props,
+    runs: getRuns({ data: props.data }),
+  }), [props])
+}

package/src/hooks/runs/useRuns/lib/getRuns.ts

@@ -0,0 +1,16 @@
+import { InfiniteData } from '@tanstack/react-query'
+import { RunsPage, Run } from '@/types'
+
+type Args = {
+  data: InfiniteData<RunsPage> | undefined
+}
+
+export const getRuns = ({
+  data,
+}: Args) => {
+  if (!data) return []
+
+  return data.pages.reduce<Run[]>((acc, page) => (
+    acc.concat(page.data)
+  ), [])
+}

package/src/hooks/runs/useRuns/lib/queryOptions/index.ts

@@ -0,0 +1,21 @@
+import _ from 'lodash'
+import { RunsPage } from '@/types'
+import { queryKey } from './queryKey'
+
+export const queryOptions = {
+  queryKey: queryKey(),
+  // queryFn: ({
+  //   pageParam,
+  // }: { pageParam?: string }) => (
+  //   queryFn({
+  //     assistantConversationId,
+  //   })
+  // ),
+  initialPageParam: undefined,
+  getNextPageParam: (lastPage: RunsPage) => {
+    if (!lastPage.hasNextPage) return null
+
+    return lastPage.lastId
+  },
+  limit: 10,
+}

package/src/hooks/runs/useRuns/lib/queryOptions/queryFn.ts

@@ -0,0 +1,22 @@
+import { RunsPage } from '@/types'
+import { client } from '@/lib/ai'
+
+type Args = {
+  threadId: string
+}
+
+export const queryFn = async ({
+  threadId,
+}: Args): Promise<RunsPage> => {
+  const response = await client.beta.threads.runs.list(threadId, {
+    limit: 1,
+  })
+
+  return {
+    // @ts-ignore-next-line
+    data: response.data,
+    hasNextPage: response.hasNextPage(),
+    // @ts-ignore-next-line
+    lastId: response.body.last_id,
+  }
+}

package/src/hooks/runs/useRuns/lib/queryOptions/queryKey.ts

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

package/src/hooks/threads/useThreadLifecycles/index.tsx

@@ -0,0 +1,41 @@
+import {
+  UseInfiniteQueryOptions,
+  UseMutationOptions,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { useManageRuns } from '@/hooks/runs/useManageRuns'
+import { usePolling } from '@/hooks/runs/usePolling'
+import { useManageActions } from '@/hooks/actions/useManageActions'
+import { MessagesPage, RunsPage, Run } from '@/types'
+
+type Args = {
+  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
+  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
+  createRunMutationOptions: UseMutationOptions<{ run: Run }>
+  handleActionMutationOptions: UseMutationOptions<{ run: Run }>
+}
+
+export const useThreadLifecycles = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+  createRunMutationOptions,
+  handleActionMutationOptions,
+}: Args) => {
+  useManageRuns({
+    messagesQueryOptions,
+    runsQueryOptions,
+    createRunMutationOptions,
+  })
+
+  useManageActions({
+    runsQueryOptions,
+    handleActionMutationOptions,
+  })
+
+  usePolling({
+    messagesQueryOptions,
+    runsQueryOptions,
+  })
+
+  return null
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { Messages } from '@/components/messages/Messages'
+export { Form } from '@/components/messages/Form'
+export {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query'
+export { useThreadLifecycles } from '@/hooks/threads/useThreadLifecycles'
+export { useMessages } from '@/hooks/messages/useMessages'
+export { useLatestMessage } from '@/hooks/messages/useLatestMessage'
+export { useCreateMessage } from '@/hooks/messages/useCreateMessage'
+export { useIsRunActive } from '@/hooks/runs/useIsRunActive'

package/src/lib/ai/index.ts

@@ -0,0 +1,15 @@
+import OpenAI, { ClientOptions } from 'openai'
+
+export const clientOptions: ClientOptions = {
+  apiKey: process.env.OPENAI_API_KEY!,
+  // @ts-ignore-next-line
+  fetch: (url: RequestInfo, init?: RequestInit): Promise<Response> => (
+    fetch(url, {
+      ...(init || {}),
+      // @ts-ignore-next-line
+      cache: 'no-store',
+    })
+  )
+}
+
+export const client = new OpenAI(clientOptions)

package/src/lib/index.ts

@@ -0,0 +1 @@
+export { optimisticId } from '@/lib/optimistic/optimisticId'

package/src/lib/messages/extendMessage.ts

@@ -0,0 +1,25 @@
+import OpenAI from 'openai'
+import { getRunSteps } from '@/lib/runSteps/getRunSteps'
+
+type Args = {
+  message: OpenAI.Beta.Threads.Messages.ThreadMessage
+}
+
+export const extendMessage = async ({
+  message,
+}: Args) => {
+  if (!message.run_id) {
+    return {
+      ...message,
+      runSteps: [],
+    }
+  }
+
+  return {
+    ...message,
+    runSteps: await getRunSteps({
+      threadId: message.thread_id,
+      runId: message.run_id,
+    }),
+  }
+}

package/src/lib/messages/order.ts

@@ -0,0 +1,9 @@
+import { sort } from 'radash'
+import { Message } from '@/types'
+
+type Args = {
+  messages: Message[]
+}
+
+export const order = ({ messages }: Args) =>
+  sort(messages, m => m.created_at, true)

package/src/lib/optimistic/isOptimistic.ts

@@ -0,0 +1,11 @@
+import _ from 'lodash'
+
+type Args = {
+  id: string
+}
+
+export const isOptimistic = ({
+  id,
+}: Args) => (
+  _.startsWith(id, '-')
+)

package/src/lib/optimistic/optimisticId.ts

@@ -0,0 +1,5 @@
+import { uid } from 'radash'
+
+export const optimisticId = () => (
+  `-${uid(24)}`
+)

package/src/lib/runSteps/getRunSteps/index.ts

@@ -0,0 +1,18 @@
+import { client } from '@/lib/ai'
+
+type Args = {
+  threadId: string
+  runId: string
+}
+
+export const getRunSteps = async ({
+  threadId,
+  runId,
+}: Args) => {
+  const runStepsResponse = await client.beta.threads.runs.steps.list(
+    threadId,
+    runId,
+  )
+
+  return runStepsResponse.data
+}

package/src/lib/runs/isRunEditingMessage/index.ts

@@ -0,0 +1,21 @@
+import OpenAI from 'openai'
+import _ from 'lodash'
+
+type Args = {
+  message: OpenAI.Beta.Threads.ThreadMessage
+}
+
+export const isRunEditingMessage = ({
+  message,
+}: Args) => {
+  if (!message) return false
+  if (message.role === 'user') return false
+  if (!message.run_id) return false
+
+  const hasContent = _.some(message.content, (content) => (
+    content.type !== 'text' ||
+      (content.type === 'text' && content.text?.value !== '')
+  ))
+
+  return !hasContent
+}

package/src/mutationFns.ts

@@ -0,0 +1,3 @@
+export { mutationFn as createMessageMutationFn } from '@/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn'
+export { mutationFn as handleActionMutationFn } from '@/hooks/actions/useHandleAction/lib/mutationOptions/mutationFn'
+export { mutationFn as createRunMutationFn } from '@/hooks/runs/useCreateRun/lib/mutationOptions/mutationFn'

package/src/queryFns.ts

@@ -0,0 +1,2 @@
+export { queryFn as messagesQueryFn } from '@/hooks/messages/useMessages/lib/queryOptions/queryFn'
+export { queryFn as runsQueryFn } from '@/hooks/runs/useRuns/lib/queryOptions/queryFn'

package/src/queryKeys.ts

@@ -0,0 +1,2 @@
+export { queryKey as messagesQueryKey } from '@/hooks/messages/useMessages/lib/queryOptions/queryKey'
+export { queryKey as runsQueryKey } from '@/hooks/runs/useRuns/lib/queryOptions/queryKey'

package/src/types/index.ts

@@ -0,0 +1,38 @@
+import OpenAI from 'openai'
+
+export type Message = OpenAI.Beta.Threads.Messages.ThreadMessage & {
+  runSteps: OpenAI.Beta.Threads.Runs.RunStep[]
+}
+
+export type MessagesPage = {
+  data: Message[],
+  hasNextPage: boolean,
+  lastId: string
+}
+
+export type RunStepsPage = {
+  data: OpenAI.Beta.Threads.Runs.RunStep[],
+  hasNextPage: boolean,
+  lastId: string
+}
+
+export type MessageGroup = {
+  id: string
+  role: "user" | "assistant"
+  messages: Message[]
+  createdAt: number
+}
+
+export type Run = OpenAI.Beta.Threads.Runs.Run
+
+export type RunsPage = {
+  data: Run[],
+  hasNextPage: boolean,
+  lastId: string
+}
+
+type Fn = (args: any) => Promise<string>
+
+export type Functions = {
+  [key: string]: Fn
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}