@superinterface/react 1.0.0 → 1.0.2

package/src/components/messages/Messages/index.tsx

@@ -1,102 +0,0 @@
-'use client'
-import {
-  UseInfiniteQueryOptions,
-  UseMutationOptions,
-  InfiniteData,
-} from '@tanstack/react-query'
-import {
-  Flex,
-} from '@radix-ui/themes'
-import { useInfiniteScroll } from '@/hooks/misc/useInfiniteScroll'
-import { MessagesSkeleton } from '@/components/skeletons/MessagesSkeleton'
-import { useMessages } from '@/hooks/messages/useMessages'
-import { useThreadLifecycles } from '@/hooks/threads/useThreadLifecycles'
-import { useLatestMessage } from '@/hooks/messages/useLatestMessage'
-import { useIsRunActive } from '@/hooks/runs/useIsRunActive'
-import { Content } from './Content'
-import { ProgressMessage } from './ProgressMessage'
-import { MessagesPage, RunsPage, Run } from '@/types'
-
-type Args = {
-  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
-  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
-  createRunMutationOptions: UseMutationOptions<{ run: Run }>
-  handleActionMutationOptions: UseMutationOptions<{ run: Run }>
-  children?: React.ReactNode
-}
-
-export const Messages = ({
-  messagesQueryOptions,
-  runsQueryOptions,
-  createRunMutationOptions,
-  handleActionMutationOptions,
-  children,
-}: Args) => {
-  const {
-    messages,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-  } = useMessages({
-    messagesQueryOptions,
-  })
-
-  useThreadLifecycles({
-    messagesQueryOptions,
-    runsQueryOptions,
-    createRunMutationOptions,
-    handleActionMutationOptions,
-  })
-
-  const { containerRef, loaderRef } = useInfiniteScroll({
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-  })
-
-  const { isRunActive } = useIsRunActive({
-    messagesQueryOptions,
-    runsQueryOptions,
-  })
-
-  const { latestMessage } = useLatestMessage({
-    messagesQueryOptions,
-  })
-
-  return (
-    <Flex
-      ref={containerRef}
-      direction="column-reverse"
-      className="overflow-auto"
-      grow="1"
-      p="2"
-    >
-      <Flex
-        shrink="0"
-        height="1"
-      />
-
-      <ProgressMessage
-        latestMessage={latestMessage}
-        isRunActive={isRunActive}
-      />
-
-      {children}
-
-      <Content
-        messages={messages}
-      />
-
-      {hasNextPage && (
-        <MessagesSkeleton
-          ref={loaderRef}
-        />
-      )}
-
-      <Flex
-        shrink="0"
-        grow="1"
-      />
-    </Flex>
-  )
-}

package/src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx

@@ -1,28 +0,0 @@
-import {
-  PopoverRoot,
-  PopoverContent,
-  Text,
-} from '@radix-ui/themes'
-import {
-  CircleIcon,
-} from '@radix-ui/react-icons'
-import { ToolCallBase } from '@/components/toolCalls/ToolCallBase'
-import { ToolCallTitle } from '@/components/toolCalls/ToolCallBase/ToolCallTitle'
-
-export const Starting = () => (
-  <PopoverRoot>
-    <ToolCallBase>
-      <CircleIcon />
-      <ToolCallTitle>
-        Starting actions
-      </ToolCallTitle>
-    </ToolCallBase>
-    <PopoverContent
-      className="max-h-[500px]"
-    >
-      <Text>
-        Getting ready to connect to domain API
-      </Text>
-    </PopoverContent>
-  </PopoverRoot>
-)

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx

@@ -1,17 +0,0 @@
-import OpenAI from 'openai'
-import {
-  Flex,
-} from '@radix-ui/themes'
-
-type Args = {
-  codeInterpreter: OpenAI.Beta.Threads.Runs.CodeToolCall.CodeInterpreter
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const CodeInterpreter = ({
-  codeInterpreter,
-}: Args) => (
-  <Flex>
-    {codeInterpreter.input}
-  </Flex>
-)

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Availabilities/Title.tsx

@@ -1,29 +0,0 @@
-import OpenAI from 'openai'
-
-type Args = {
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const Title = ({
-  runStep,
-}: Args) => {
-  if (runStep.completed_at) {
-    return (
-      <>
-        Finished getting domains availability
-      </>
-    )
-  } else if (runStep.cancelled_at) {
-    return (
-      <>
-        Cancelled getting domains availability
-      </>
-    )
-  } else {
-    return (
-      <>
-        Getting domains availability
-      </>
-    )
-  }
-}

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Availabilities/index.tsx

@@ -1,34 +0,0 @@
-import OpenAI from 'openai'
-import {
-  PopoverRoot,
-  PopoverContent,
-} from '@radix-ui/themes'
-import { ToolCallBase } from '@/components/toolCalls/ToolCallBase'
-import { ToolCallTitle } from '@/components/toolCalls/ToolCallBase/ToolCallTitle'
-import { Icon } from '../Icon'
-import { Content } from '../Content'
-import { Title } from './Title'
-
-type Args = {
-  fn: OpenAI.Beta.Threads.Runs.FunctionToolCall.Function
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const Availabilities = ({
-  fn,
-  runStep,
-}: Args) => (
-  <PopoverRoot>
-    <ToolCallBase>
-      <Icon runStep={runStep} />
-      <ToolCallTitle>
-        <Title runStep={runStep} />
-      </ToolCallTitle>
-    </ToolCallBase>
-    <PopoverContent
-      className="max-h-[500px]"
-    >
-      <Content fn={fn} />
-    </PopoverContent>
-  </PopoverRoot>
-)

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Content/index.tsx

@@ -1,58 +0,0 @@
-import { useMemo } from 'react'
-import { Code, Box } from '@radix-ui/themes'
-import OpenAI from 'openai'
-
-type Args = {
-  fn: OpenAI.Beta.Threads.Runs.FunctionToolCall.Function
-}
-
-export const Content = ({
-  fn,
-}: Args) => {
-  const args = useMemo(() => {
-    let result = null
-
-    try {
-      result = JSON.parse(fn.arguments)
-    } catch (error) {
-      console.error(error)
-    }
-
-    return result
-  }, [fn])
-
-  const output = useMemo(() => {
-    if (!fn.output) {
-      return null
-    }
-
-    let result = null
-
-    try {
-      result = JSON.parse(fn.output)
-    } catch (error) {
-      console.error(error)
-    }
-
-    return result
-  }, [fn])
-
-  if (!args) {
-    return null
-  }
-
-  return (
-    <Code
-      variant="ghost"
-      color="gold"
-      className="whitespace-pre break-words"
-    >
-      <Box>
-        {args && JSON.stringify(args, null, 2)}
-      </Box>
-      <Box>
-        {output && JSON.stringify(output, null, 2)}
-      </Box>
-    </Code>
-  )
-}

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Icon.tsx

@@ -1,28 +0,0 @@
-import OpenAI from 'openai'
-import {
-  CircleIcon,
-  CircleBackslashIcon,
-  CheckCircledIcon,
-} from '@radix-ui/react-icons'
-
-type Args = {
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const Icon = ({
-  runStep,
-}: Args) => {
-  if (runStep.completed_at) {
-    return (
-      <CheckCircledIcon />
-    )
-  } else if (runStep.cancelled_at) {
-    return (
-      <CircleBackslashIcon />
-    )
-  } else {
-    return (
-      <CircleIcon />
-    )
-  }
-}

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Scores/Title.tsx

@@ -1,29 +0,0 @@
-import OpenAI from 'openai'
-
-type Args = {
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const Title = ({
-  runStep,
-}: Args) => {
-  if (runStep.completed_at) {
-    return (
-      <>
-        Finished getting domains scores
-      </>
-    )
-  } else if (runStep.cancelled_at) {
-    return (
-      <>
-        Cancelled getting domains scores
-      </>
-    )
-  } else {
-    return (
-      <>
-        Getting domains scores
-      </>
-    )
-  }
-}

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Scores/index.tsx

@@ -1,34 +0,0 @@
-import OpenAI from 'openai'
-import {
-  PopoverRoot,
-  PopoverContent,
-} from '@radix-ui/themes'
-import { ToolCallBase } from '@/components/toolCalls/ToolCallBase'
-import { ToolCallTitle } from '@/components/toolCalls/ToolCallBase/ToolCallTitle'
-import { Icon } from '../Icon'
-import { Content } from '../Content'
-import { Title } from './Title'
-
-type Args = {
-  fn: OpenAI.Beta.Threads.Runs.FunctionToolCall.Function
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const Scores = ({
-  fn,
-  runStep,
-}: Args) => (
-  <PopoverRoot>
-    <ToolCallBase>
-      <Icon runStep={runStep} />
-      <ToolCallTitle>
-        <Title runStep={runStep} />
-      </ToolCallTitle>
-    </ToolCallBase>
-    <PopoverContent
-      className="max-h-[500px]"
-    >
-      <Content fn={fn} />
-    </PopoverContent>
-  </PopoverRoot>
-)

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx

@@ -1,31 +0,0 @@
-import OpenAI from 'openai'
-import { Availabilities } from './Availabilities'
-import { Scores } from './Scores'
-
-type Args = {
-  fn: OpenAI.Beta.Threads.Runs.FunctionToolCall.Function
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const Fn = ({
-  fn,
-  runStep,
-}: Args) => {
-  if (fn.name === 'getAvailabilities') {
-    return (
-      <Availabilities
-        fn={fn}
-        runStep={runStep}
-      />
-    )
-  } else if (fn.name === 'getScores') {
-    return (
-      <Scores
-        fn={fn}
-        runStep={runStep}
-      />
-    )
-  }
-
-  return null
-}

package/src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx

@@ -1,44 +0,0 @@
-import OpenAI from 'openai'
-import {
-  Flex,
-} from '@radix-ui/themes'
-import { Fn } from './Fn'
-import { CodeInterpreter } from './CodeInterpreter'
-
-type ToolCall = OpenAI.Beta.Threads.Runs.CodeToolCall
-  | OpenAI.Beta.Threads.Runs.RetrievalToolCall
-  | OpenAI.Beta.Threads.Runs.FunctionToolCall
-
-type Args = {
-  toolCall: ToolCall
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const ToolCall = ({
-  toolCall,
-  runStep,
-}: Args) => {
-  if (toolCall.type === 'function') {
-    return (
-      <Fn
-        fn={toolCall.function}
-        runStep={runStep}
-      />
-    )
-  }
-
-  if (toolCall.type === 'code_interpreter') {
-    return (
-      <CodeInterpreter
-        codeInterpreter={toolCall.code_interpreter}
-        runStep={runStep}
-      />
-    )
-  }
-
-  return (
-    <Flex>
-      {toolCall.type}
-    </Flex>
-  )
-}

package/src/components/runSteps/RunStep/ToolCalls/index.tsx

@@ -1,31 +0,0 @@
-import OpenAI from 'openai'
-import {
-  Flex,
-} from '@radix-ui/themes'
-import { ToolCall } from './ToolCall'
-import { Starting } from './Starting'
-
-type Args = {
-  stepDetails: OpenAI.Beta.Threads.Runs.ToolCallsStepDetails
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const ToolCalls = ({
-  stepDetails,
-  runStep,
-}: Args) => (
-  <Flex
-    direction="column"
-  >
-    {!stepDetails.tool_calls.length && (
-      <Starting />
-    )}
-    {stepDetails.tool_calls.map((toolCall) => (
-      <ToolCall
-        key={toolCall.id}
-        toolCall={toolCall}
-        runStep={runStep}
-      />
-    ))}
-  </Flex>
-)

package/src/components/runSteps/RunStep/index.tsx

@@ -1,21 +0,0 @@
-import OpenAI from 'openai'
-import { ToolCalls } from './ToolCalls'
-
-type Args = {
-  runStep: OpenAI.Beta.Threads.Runs.RunStep
-}
-
-export const RunStep = ({
-  runStep,
-}: Args) => {
-  if (runStep.step_details.type === 'tool_calls') {
-    return (
-      <ToolCalls
-        stepDetails={runStep.step_details}
-        runStep={runStep}
-      />
-    )
-  }
-
-  return null
-}

package/src/components/runSteps/RunSteps/index.tsx

@@ -1,22 +0,0 @@
-import OpenAI from 'openai'
-import { Flex } from '@radix-ui/themes'
-import { RunStep } from '@/components/runSteps/RunStep'
-
-type Args = {
-  runSteps: OpenAI.Beta.Threads.Runs.RunStep[]
-}
-
-export const RunSteps = ({
-  runSteps,
-}: Args) => (
-  <Flex
-    direction="column-reverse"
-  >
-    {runSteps.map((runStep) => (
-      <RunStep
-        key={runStep.id}
-        runStep={runStep}
-      />
-    ))}
-  </Flex>
-)

package/src/components/skeletons/MessagesSkeleton/index.tsx

@@ -1,50 +0,0 @@
-import { forwardRef } from 'react'
-import {
-  Flex,
-  Avatar,
-  Box,
-} from '@radix-ui/themes'
-import { Skeleton } from '@/components/skeletons/Skeleton'
-import { MessagesGroupBase } from '@/components/messageGroups/MessagesGroupBase'
-import { Name } from '@/components/messageGroups/MessagesGroupBase/Name'
-
-export const MessagesSkeleton = forwardRef(function MessagesSkeleton(_props, ref) {
-  return (
-    <MessagesGroupBase
-      // @ts-ignore-next-line
-      ref={ref}
-    >
-      <Avatar
-        fallback={<Flex />}
-        size="1"
-        className="animate-pulse"
-      />
-
-      <Box
-        pb="3"
-      >
-        <Name>
-          <Skeleton
-            height="1"
-            className="w-[128px]"
-          />
-        </Name>
-
-        <Skeleton
-          height="2"
-          className="w-[256px]"
-        />
-
-        <Skeleton
-          height="2"
-          className="w-[256px] mt-2"
-        />
-
-        <Skeleton
-          height="2"
-          className="w-[256px] mt-2"
-        />
-      </Box>
-    </MessagesGroupBase>
-  )
-})

package/src/components/skeletons/RunSkeleton/index.tsx

@@ -1,34 +0,0 @@
-import {
-  Flex,
-  Button,
-} from '@radix-ui/themes'
-import {
-  CircleIcon,
-} from '@radix-ui/react-icons'
-import { Skeleton } from '@/components/skeletons/Skeleton'
-
-export const RunSkeleton = () => (
-  <Flex
-    py="1"
-    ml="-2"
-  >
-    <Button
-      disabled
-      size="1"
-      color="gold"
-      variant="outline"
-      style={{
-        boxShadow: 'none',
-      }}
-    >
-      <CircleIcon
-        className="animate-pulse"
-      />
-
-      <Skeleton
-        height="1"
-        className="w-[128px] bg-gold-5"
-      />
-    </Button>
-  </Flex>
-)

package/src/components/skeletons/Skeleton/index.tsx

@@ -1,17 +0,0 @@
-import { Flex } from '@radix-ui/themes'
-
-type Props = {
-  height: string
-  className: string
-}
-
-export const Skeleton = ({
-  className,
-  ...rest
-}: Props) => (
-  // @ts-ignore-next-line
-  <Flex
-    className={`animate-pulse rounded-3 bg-gray-5 ${className}`}
-    {...rest}
-  />
-)

package/src/components/skeletons/StartingContentSkeleton/index.tsx

@@ -1,13 +0,0 @@
-import {
-  Box,
-} from '@radix-ui/themes'
-
-export const StartingContentSkeleton = () => (
-  <Box
-    height="4"
-    width="4"
-    shrink="0"
-    mt="1"
-    className="animate-pulse bg-gray-12 rounded-3"
-  />
-)

package/src/components/skeletons/StartingSkeleton/index.tsx

@@ -1,33 +0,0 @@
-import { useContext } from 'react'
-import { Box } from '@radix-ui/themes'
-import { StartingContentSkeleton } from '@/components/skeletons/StartingContentSkeleton'
-import { MessagesGroupBase } from '@/components/messageGroups/MessagesGroupBase'
-import { Name } from '@/components/messageGroups/MessagesGroupBase/Name'
-import { AssistantAvatar } from '@/components/messageGroups/MessagesGroupBase/AssistantAvatar'
-import { AssistantNameContext } from '@/contexts/assistants/AssistantNameContext'
-
-type Args = {
-  children?: React.ReactNode
-}
-
-export const StartingSkeleton = ({
-  children,
-}: Args) => {
-  const assistantNameContext = useContext(AssistantNameContext)
-
-  return (
-    <MessagesGroupBase>
-      <AssistantAvatar />
-
-      <Box>
-        <Name>
-          {assistantNameContext}
-        </Name>
-
-        {children}
-
-        <StartingContentSkeleton />
-      </Box>
-    </MessagesGroupBase>
-  )
-}

package/src/components/spinners/Spinner/index.tsx

@@ -1,17 +0,0 @@
-export const Spinner = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="h-4 w-4 animate-spin"
-    {...props}
-  >
-    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-  </svg>
-)