@superinterface/react 1.0.0

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

@@ -0,0 +1,102 @@
+'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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,17 @@
+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>
+)