@superinterface/react 1.0.0

package/src/components/textareas/TextareaBase/index.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react'
+import TextareaAutosize from 'react-textarea-autosize'
+
+const UPSCALE_RATIO = 16 / 14
+
+type Props = React.ComponentProps<typeof TextareaAutosize>
+
+export const TextareaBase = forwardRef(function TextareaBase(props: Props, ref) {
+  return (
+    <TextareaAutosize
+      // @ts-ignore-next-line
+      ref={ref}
+      className="textarea-base"
+      style={{
+        resize: 'none',
+        fontSize: `${14 * UPSCALE_RATIO}px`,
+        lineHeight: `${24 * UPSCALE_RATIO}px`,
+        transform: `scale(${1 / UPSCALE_RATIO})`,
+        margin: `0 ${(-100 * UPSCALE_RATIO + 100) / 2}%`,
+        width: `${100 * UPSCALE_RATIO}%`,
+        maxWidth: `${100 * UPSCALE_RATIO}%`,
+        flexGrow: 1,
+        display: 'flex',
+      }}
+      {...props}
+    />
+  )
+})

package/src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx

@@ -0,0 +1,17 @@
+import {
+  Text,
+} from '@radix-ui/themes'
+
+type Args = {
+  children: React.ReactNode
+}
+
+export const ToolCallTitle = ({
+  children,
+}: Args) => (
+  <Text
+    weight="regular"
+  >
+    {children}
+  </Text>
+)

package/src/components/toolCalls/ToolCallBase/index.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react'
+import {
+  Flex,
+  Button,
+  PopoverTrigger
+} from '@radix-ui/themes'
+
+type Args = {
+  children: React.ReactNode
+}
+
+export const ToolCallBase = forwardRef(function ToolCallBase({
+  children,
+}: Args, ref) {
+  return (
+    <Flex
+      py="1"
+      ml="-2"
+    >
+      <PopoverTrigger>
+        <Button
+          size="1"
+          color="gold"
+          variant="outline"
+          style={{
+            boxShadow: 'none',
+          }}
+        >
+          {children}
+        </Button>
+      </PopoverTrigger>
+    </Flex>
+  )
+})

package/src/contexts/assistants/AssistantNameContext/index.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const AssistantNameContext = createContext('Assistant')

package/src/contexts/avatars/AssistantAvatarContext/index.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react'
+import {
+  Avatar,
+} from '@radix-ui/themes'
+import {
+  LightningBoltIcon,
+} from '@radix-ui/react-icons'
+
+export const AssistantAvatarContext = createContext(
+  <Avatar
+    fallback={<LightningBoltIcon />}
+    size="1"
+  />
+)

package/src/contexts/markdown/MarkdownContext/index.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+import { components } from './lib/components'
+
+export const MarkdownContext = createContext({
+  remarkPlugins: [] as any[],
+  components,
+})

package/src/contexts/markdown/MarkdownContext/lib/components/Link.tsx

@@ -0,0 +1,13 @@
+import {
+  Link as RadixLink,
+} from '@radix-ui/themes'
+
+type Args = JSX.IntrinsicElements['a']
+
+export const Link = ({ children, href }: Args) => (
+  <RadixLink
+    href={href}
+  >
+    {children}
+  </RadixLink>
+)

package/src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx

@@ -0,0 +1,13 @@
+import {
+  Box,
+} from '@radix-ui/themes'
+
+export const ListItem = ({ children }: JSX.IntrinsicElements['li']) => (
+  <Box
+    pb="1"
+  >
+    <li>
+      {children}
+    </li>
+  </Box>
+)

package/src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx

@@ -0,0 +1,16 @@
+import {
+  Box,
+} from '@radix-ui/themes'
+
+export const OrderedList = ({ children }: JSX.IntrinsicElements['ul']) => (
+  <Box
+    pb="3"
+    asChild
+  >
+    <ol
+      className="list-inside"
+    >
+      {children}
+    </ol>
+  </Box>
+)

package/src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx

@@ -0,0 +1,17 @@
+import {
+  Box,
+  Text,
+} from '@radix-ui/themes'
+
+export const Paragraph = ({ children }: JSX.IntrinsicElements['p']) => (
+  <Box
+    pb="3"
+  >
+    <Text
+      size="3"
+      className="whitespace-pre-line break-words"
+    >
+      {children}
+    </Text>
+  </Box>
+)

package/src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx

@@ -0,0 +1,9 @@
+import {
+  Strong as RadixStrong,
+} from '@radix-ui/themes'
+
+export const Strong = ({ children }: JSX.IntrinsicElements['strong']) => (
+  <RadixStrong>
+    {children}
+  </RadixStrong>
+)

package/src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx

@@ -0,0 +1,16 @@
+import {
+  Box,
+} from '@radix-ui/themes'
+
+export const UnorderedList = ({ children }: JSX.IntrinsicElements['ul']) => (
+  <Box
+    pb="3"
+    asChild
+  >
+    <ul
+      className="list-inside"
+    >
+      {children}
+    </ul>
+  </Box>
+)

package/src/contexts/markdown/MarkdownContext/lib/components/index.tsx

@@ -0,0 +1,16 @@
+import { Components } from 'react-markdown'
+import { Paragraph } from './Paragraph'
+import { Link } from './Link'
+import { UnorderedList } from './UnorderedList'
+import { OrderedList } from './OrderedList'
+import { ListItem } from './ListItem'
+import { Strong } from './Strong'
+
+export const components: Components = {
+  p: Paragraph,
+  a: Link,
+  strong: Strong,
+  ul: UnorderedList,
+  ol: OrderedList,
+  li: ListItem,
+}

package/src/hooks/actions/useHandleAction/index.tsx

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

package/src/hooks/actions/useHandleAction/lib/mutationOptions/index.ts

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

package/src/hooks/actions/useHandleAction/lib/mutationOptions/mutationFn/index.ts

@@ -0,0 +1,39 @@
+import { Run, Functions } from '@/types'
+import pMap from 'p-map'
+import { client } from '@/lib/ai'
+import { toolOutput } from './toolOutput'
+
+type Args = {
+  latestRun: Run
+  functions?: Functions
+}
+
+export type Response = {
+  run: Run
+}
+
+export const mutationFn = async ({
+  latestRun,
+  functions = {},
+}: Args): Promise<Response> => {
+  if (!latestRun.required_action) {
+    throw new Error('No required_action for run ${latestRun.id} with status ${latestRun.status}')
+  }
+
+  console.log('handleActions', { latestRun })
+
+  const toolCalls = latestRun.required_action.submit_tool_outputs.tool_calls
+
+  const run = await client.beta.threads.runs.submitToolOutputs(
+    latestRun.thread_id,
+    latestRun.id,
+    {
+      tool_outputs: await pMap(toolCalls, (toolCall) => toolOutput({ toolCall, latestRun, functions })),
+    },
+  )
+
+  return {
+    // @ts-ignore-next-line
+    run,
+  }
+}

package/src/hooks/actions/useHandleAction/lib/mutationOptions/mutationFn/toolOutput/index.ts

@@ -0,0 +1,29 @@
+import OpenAI from 'openai'
+import { Functions } from '@/types'
+
+type Args = {
+  toolCall: OpenAI.Beta.Threads.Runs.RequiredActionFunctionToolCall
+  latestRun: OpenAI.Beta.Threads.Runs.Run
+  functions: Functions
+}
+
+export const toolOutput = async ({
+  toolCall,
+  latestRun,
+  functions,
+}: Args) => {
+  const fn = functions[toolCall.function.name]
+
+  if (!fn) {
+    console.log({ toolCall })
+    throw new Error(`No function for ${toolCall.function.name}`)
+  }
+
+  return {
+    tool_call_id: toolCall.id,
+    output: await fn({
+      toolCall,
+      latestRun,
+    }),
+  }
+}

package/src/hooks/actions/useHandleAction/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('useHandleAction onSettled: response is undefined')
+  }
+
+  queryClient.invalidateQueries({
+    queryKey: messagesQueryKey(),
+  })
+  queryClient.invalidateQueries({
+    queryKey: runsQueryKey(),
+  })
+}

package/src/hooks/actions/useManageActions/index.tsx

@@ -0,0 +1,43 @@
+import {
+  UseInfiniteQueryOptions,
+  InfiniteData,
+  UseMutationOptions,
+} from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useLatestRun } from '@/hooks/runs/useLatestRun'
+import { useHandleAction } from '@/hooks/actions/useHandleAction'
+import { RunsPage, Run } from '@/types'
+
+type Args = {
+  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
+  handleActionMutationOptions: UseMutationOptions<{ run: Run }>
+}
+
+export const useManageActions = ({
+  runsQueryOptions,
+  handleActionMutationOptions,
+}: Args) => {
+  const latestRunProps = useLatestRun({
+    runsQueryOptions,
+  })
+
+  const handleActionProps = useHandleAction({
+    handleActionMutationOptions,
+  })
+
+  useEffect(() => {
+    if (handleActionProps.isPending) return
+    if (latestRunProps.isFetching) return
+    if (!latestRunProps.latestRun) return
+    if (latestRunProps.latestRun.status !== 'requires_action') return
+
+    console.log('requires action', {
+      latestRunProps,
+    })
+
+    // @ts-ignore-next-line
+    handleActionProps.handleAction({ latestRun: latestRunProps.latestRun })
+  }, [handleActionProps, latestRunProps])
+
+  return null
+}

package/src/hooks/messageGroups/useMessageGroups/index.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+import { messageGroups as getMessageGroups } from './lib/messageGroups'
+import { Message } from '@/types'
+
+type Args = {
+  messages: Message[]
+}
+
+export const useMessageGroups = ({
+  messages,
+}: Args) => (
+  useMemo(
+    () => ({
+      messageGroups: getMessageGroups({ messages }),
+    }),
+    [messages]
+  )
+)

package/src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts

@@ -0,0 +1,37 @@
+import _ from 'lodash'
+import { last } from 'radash'
+import { Message, MessageGroup } from '@/types'
+import { order } from '@/lib/messages/order'
+import { newGroup } from './newGroup'
+
+type Args = {
+  messages: Message[]
+}
+
+export const messageGroups = ({
+  messages,
+}: Args) =>
+  _.reduce(
+    order({ messages }),
+    (groups: MessageGroup[], message: Message) => {
+      const group = last(groups)
+
+      if (!group) return newGroup({ groups, message })
+
+      if (group.role !== message.role) {
+        return newGroup({
+          groups,
+          message,
+        })
+      }
+
+      return [
+        ..._.dropRight(groups),
+        {
+          ...group,
+          messages: [...group.messages, message],
+        },
+      ]
+    },
+    []
+  )

package/src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/index.ts

@@ -0,0 +1,14 @@
+import { Message, MessageGroup } from '@/types'
+import { newGroupItem } from './newGroupItem'
+
+type Args = {
+  groups: MessageGroup[]
+  message: Message
+}
+
+export const newGroup = ({ groups, message }: Args) => [
+  ...groups,
+  newGroupItem({
+    message,
+  }),
+]

package/src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/newGroupItem.ts

@@ -0,0 +1,12 @@
+import { Message } from '@/types'
+
+type Args = {
+  message: Message
+}
+
+export const newGroupItem = ({ message }: Args) => ({
+  id: message.id,
+  role: message.role,
+  createdAt: message.created_at,
+  messages: [message],
+})

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

@@ -0,0 +1,30 @@
+import {
+  useMutation,
+  useQueryClient,
+  UseMutationOptions,
+} from '@tanstack/react-query'
+import { mutationOptions } from './lib/mutationOptions'
+import { Message } from '@/types'
+
+type Args = {
+  createMessageMutationOptions: UseMutationOptions<{ message: Message }>
+}
+
+export const useCreateMessage = ({
+  createMessageMutationOptions,
+}: Args) => {
+  const queryClient = useQueryClient()
+
+  // @ts-ignore-next-line
+  const mutationProps = useMutation({
+    ...mutationOptions({
+      queryClient,
+    }),
+    ...createMessageMutationOptions,
+  })
+
+  return {
+    ...mutationProps,
+    createMessage: mutationProps.mutateAsync,
+  }
+}

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

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

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

@@ -0,0 +1,25 @@
+import { client } from '@/lib/ai'
+import { Message } from '@/types'
+import { extendMessage } from '@/lib/messages/extendMessage'
+
+export type Args = {
+  content: string
+  threadId: string
+}
+
+export type Response = {
+  message: Message
+}
+
+export const mutationFn = async ({ content, threadId }: Args): Promise<Response> => {
+  const message = await client.beta.threads.messages.create(threadId, {
+    content: content,
+    role: 'user',
+  })
+
+  return {
+    message: await extendMessage({
+      message,
+    }),
+  }
+}

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

@@ -0,0 +1,27 @@
+import { queryKey as messagesQueryKey } from '@/hooks/messages/useMessages/lib/queryOptions/queryKey'
+import { Args as NewMessageArgs } from './mutationFn'
+
+type Args = {
+  queryClient: any
+}
+
+type Context = {
+  prevMessages: any
+} | undefined
+
+export const onError = ({
+  queryClient,
+}: Args) => async (
+  _error: any,
+  newMessage: NewMessageArgs,
+  context: Context
+) => {
+  if (!context) {
+    return
+  }
+
+  queryClient.setQueryData(
+    messagesQueryKey(),
+    context.prevMessages,
+  )
+}

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

@@ -0,0 +1,62 @@
+import OpenAI from 'openai'
+import { optimisticId } from '@/lib/optimistic/optimisticId'
+import { Args as NewMessageArgs } from '../mutationFn'
+
+type Args = {
+  newMessage: NewMessageArgs
+}
+
+export const data = ({
+  newMessage,
+}: Args) => (prevData: any) => {
+  const message = {
+    id: optimisticId(),
+    role: 'user' as OpenAI.Beta.Threads.Messages.ThreadMessage['role'],
+    created_at: +new Date(),
+    object: 'thread.message' as OpenAI.Beta.Threads.Messages.ThreadMessage['object'],
+    content: [
+      {
+        type: 'text',
+        text: {
+          annotations: [],
+          value: newMessage.content,
+        },
+      } as OpenAI.Beta.Threads.Messages.MessageContentText,
+    ],
+    run_id: null,
+    assistant_id: null,
+    thread_id: null,
+    file_ids: [],
+    metadata: {},
+    runSteps: [],
+  }
+
+  if (!prevData) {
+    return {
+      pageParams: [],
+      pages: [
+        {
+          data: [message],
+          hasNextPage: false,
+          lastId: message.id,
+        },
+      ],
+    }
+  }
+
+  const [latestPage, ...pagesRest] = prevData.pages
+
+  return {
+    ...prevData,
+    pages: [
+      {
+        ...latestPage,
+        data: [
+          message,
+          ...latestPage.data,
+        ],
+      },
+      ...pagesRest,
+    ],
+  }
+}