@superinterface/react 1.0.0 → 1.0.1

package/dist/types/index.d.ts

@@ -0,0 +1,31 @@
+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;
+};
+export {};

package/dist/types/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superinterface/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "./dist/index.js",
   "exports": {
     ".": "./dist/index.js",
@@ -8,6 +8,9 @@
     "./types": "./dist/types/index.js",
     "./lib": "./dist/lib/index.js"
   },
+  "files": [
+    "dist"
+  ],
   "keywords": [],
   "license": "ISC",
   "scripts": {

package/src/components/examples/Examples/Example/index.tsx

@@ -1,65 +0,0 @@
-import {
-  UseMutationOptions,
-  UseInfiniteQueryOptions,
-  InfiniteData,
-} from '@tanstack/react-query'
-import {
-  ArrowUpIcon,
-} from '@radix-ui/react-icons'
-import {
-  Text,
-  Button,
-} from '@radix-ui/themes'
-import { useCreateMessage } from '@/hooks/messages/useCreateMessage'
-import { useIsRunActive } from '@/hooks/runs/useIsRunActive'
-import { Message, MessagesPage, RunsPage } from '@/types'
-
-type Args = {
-  example: string
-  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
-  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
-  createMessageMutationOptions: UseMutationOptions<{ message: Message }>
-}
-
-export const Example = ({
-  example,
-  messagesQueryOptions,
-  runsQueryOptions,
-  createMessageMutationOptions,
-}: Args) => {
-  const {
-    createMessage,
-  } = useCreateMessage({
-    createMessageMutationOptions,
-  })
-
-  const { isRunActive } = useIsRunActive({
-    messagesQueryOptions,
-    runsQueryOptions,
-  })
-
-  return (
-    <Button
-      variant="soft"
-      style={{
-        justifyContent: 'space-between',
-      }}
-      onClick={() => {
-        // @ts-ignore-next-line
-        createMessage({
-          content: example,
-        })
-      }}
-      disabled={isRunActive}
-    >
-      <Text
-        size="1"
-        weight="regular"
-      >
-        {example}
-      </Text>
-
-      <ArrowUpIcon />
-    </Button>
-  )
-}

package/src/components/examples/Examples/index.tsx

@@ -1,85 +0,0 @@
-import {
-  UseMutationOptions,
-  UseInfiniteQueryOptions,
-  InfiniteData,
-} from '@tanstack/react-query'
-import {
-  Grid,
-} from '@radix-ui/themes'
-import { Message, MessagesPage, RunsPage } from '@/types'
-import { Example } from './Example'
-
-type Args = {
-  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
-  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
-  createMessageMutationOptions: UseMutationOptions<{ message: Message }>
-  latestMessage: Message | null
-  isLoading: boolean
-}
-
-const initialExamples = [
-  'Find a brandable domain for an AI cooking app.',
-  'Create a domain name for a todo app.',
-  'Suggest a domain for a financial tech startup.',
-  'Luxurious .com domain for a space company.',
-]
-
-const regularExamples = [
-  'Continue',
-]
-
-export const Examples = ({
-  createMessageMutationOptions,
-  messagesQueryOptions,
-  runsQueryOptions,
-  latestMessage,
-  isLoading,
-}: Args) => {
-  if (!latestMessage) {
-    return (
-      <Grid
-        columns={{
-          initial: "1",
-          md: "2",
-        }}
-        gap="2"
-        py="2"
-      >
-        {initialExamples.map((example) => (
-          <Example
-            key={example}
-            example={example}
-            createMessageMutationOptions={createMessageMutationOptions}
-            messagesQueryOptions={messagesQueryOptions}
-            runsQueryOptions={runsQueryOptions}
-          />
-        ))}
-      </Grid>
-    )
-  }
-
-  if (latestMessage.role === 'assistant' && !isLoading) {
-    return (
-      <Grid
-        columns={{
-          initial: "3",
-          md: "4",
-        }}
-        gap="2"
-        py="2"
-      >
-        {regularExamples.map((example) => (
-          <Example
-            key={example}
-            example={example}
-            createMessageMutationOptions={createMessageMutationOptions}
-            messagesQueryOptions={messagesQueryOptions}
-            runsQueryOptions={runsQueryOptions}
-          />
-        ))}
-      </Grid>
-    )
-  }
-
-  return null
-}

package/src/components/messageGroups/MessagesGroupBase/AssistantAvatar.tsx

@@ -1,18 +0,0 @@
-import { useContext } from 'react'
-import {
-  Flex,
-} from '@radix-ui/themes'
-import { AssistantAvatarContext } from '@/contexts/avatars/AssistantAvatarContext'
-
-export const AssistantAvatar = () => {
-  const AssistantAvatarContextValue = useContext(AssistantAvatarContext)
-
-  return (
-    <Flex
-      shrink="0"
-      className="rounded-3 overflow-hidden h-[24px] w-[24px]"
-    >
-      {AssistantAvatarContextValue}
-    </Flex>
-  )
-}

package/src/components/messageGroups/MessagesGroupBase/Name.tsx

@@ -1,24 +0,0 @@
-import {
-  Flex,
-  Text,
-} from '@radix-ui/themes'
-
-type Args = {
-  children: React.ReactNode
-}
-
-export const Name = ({
-  children,
-}: Args) => (
-  <Flex
-    height="5"
-    align="center"
-  >
-    <Text
-      size="2"
-      weight="bold"
-    >
-      {children}
-    </Text>
-  </Flex>
-)

package/src/components/messageGroups/MessagesGroupBase/index.tsx

@@ -1,29 +0,0 @@
-import { forwardRef } from 'react'
-import {
-  Flex,
-  Container,
-} from '@radix-ui/themes'
-
-type Args = {
-  children: React.ReactNode
-}
-
-export const MessagesGroupBase = forwardRef(function MessagesGroupBase({
-  children,
-}: Args, ref) {
-  return (
-    <Container
-      // @ts-ignore-next-line
-      ref={ref}
-      size="2"
-      grow="0"
-    >
-      <Flex
-        shrink="0"
-        gap="3"
-      >
-        {children}
-      </Flex>
-    </Container>
-  )
-})

package/src/components/messages/Form/Submit/index.tsx

@@ -1,29 +0,0 @@
-import {
-  ArrowUpIcon,
-} from '@radix-ui/react-icons'
-import {
-  Button,
-} from '@radix-ui/themes'
-import {
-  Spinner,
-} from '@/components/spinners/Spinner'
-
-type Args = {
-  isLoading: boolean
-  isDisabled: boolean
-}
-
-export const Submit = ({
-  isLoading,
-  isDisabled
-}: Args) => (
-  <Button
-    type="submit"
-    color="gray"
-    highContrast
-    radius="large"
-    disabled={isLoading || isDisabled}
-  >
-    {isLoading ? <Spinner /> : <ArrowUpIcon />}
-  </Button>
-)

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

@@ -1,150 +0,0 @@
-import {
-  UseInfiniteQueryOptions,
-  UseMutationOptions,
-  InfiniteData,
-} from '@tanstack/react-query'
-import {
-  Container,
-  Flex,
-  Text,
-} from '@radix-ui/themes'
-import { useMemo, useContext } from 'react'
-import { Submit } from './Submit'
-import { useIsRunActive } from '@/hooks/runs/useIsRunActive'
-import { useForm, SubmitHandler } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { TextareaBase } from '@/components/textareas/TextareaBase'
-import { useLatestMessage } from '@/hooks/messages/useLatestMessage'
-import { useCreateMessage } from '@/hooks/messages/useCreateMessage'
-import { AssistantNameContext } from '@/contexts/assistants/AssistantNameContext'
-import { MessagesPage, RunsPage, Message } from '@/types'
-
-export const schema = z.object({
-  content: z.string().min(1).max(300),
-})
-
-type Args = {
-  messagesQueryOptions: UseInfiniteQueryOptions<InfiniteData<MessagesPage>>
-  runsQueryOptions: UseInfiniteQueryOptions<InfiniteData<RunsPage>>
-  createMessageMutationOptions: UseMutationOptions<{ message: Message }>
-}
-
-type Inputs = {
-  content: string
-}
-
-export const Form = ({
-  messagesQueryOptions,
-  runsQueryOptions,
-  createMessageMutationOptions,
-}: Args) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    reset,
-  } = useForm<Inputs>({
-    resolver: zodResolver(schema),
-  })
-
-  const { isRunActive } = useIsRunActive({
-    messagesQueryOptions,
-    runsQueryOptions,
-  })
-
-  const isLoading = useMemo(() => (
-    isRunActive || isSubmitting
-  ), [
-    isRunActive,
-    isSubmitting,
-  ])
-
-  const {
-    createMessage,
-  } = useCreateMessage({
-    createMessageMutationOptions,
-  })
-
-  const onSubmit: SubmitHandler<Inputs> = async (data) => {
-    reset()
-    // @ts-ignore-next-line
-    await createMessage({
-      content: data.content,
-    })
-  }
-
-  const { latestMessage } = useLatestMessage({
-    messagesQueryOptions,
-  })
-
-  const isDisabled = useMemo(() => (
-    // @ts-ignore-next-line
-    latestMessage?.metadata?.isBlocking
-  ), [latestMessage])
-
-  const assistantNameContext = useContext(AssistantNameContext)
-
-  return (
-    <Container
-      size="2"
-      px="2"
-      grow="0"
-    >
-      <Flex
-        direction="column"
-        shrink="0"
-      >
-        <Flex
-          direction="column"
-          shrink="0"
-          className="bg-gray-1"
-          pb="4"
-        >
-          <form
-            onSubmit={handleSubmit(onSubmit)}
-          >
-            <Flex
-              className={`rounded-3 border-gray-5 border border-solid ${errors.content ? 'border-red-9 bg-red-2' : ''}`}
-              p="2"
-              pl="4"
-            >
-              <Text
-                size="2"
-                className="grow"
-              >
-                <Flex
-                  grow="1"
-                  direction="column"
-                >
-                  <TextareaBase
-                    minRows={1}
-                    placeholder={`Message ${assistantNameContext}...`}
-                    disabled={isLoading || isDisabled}
-                    onKeyDown={(e: any) => {
-                      if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault()
-                        handleSubmit(onSubmit)()
-                      }
-                    }}
-                    {...register('content')}
-                  />
-                </Flex>
-              </Text>
-
-              <Flex
-                shrink="0"
-                align="end"
-              >
-                <Submit
-                  isLoading={isLoading}
-                  isDisabled={isDisabled}
-                />
-              </Flex>
-            </Flex>
-          </form>
-        </Flex>
-      </Flex>
-    </Container>
-  )
-}

package/src/components/messages/Message/TextContent/index.tsx

@@ -1,22 +0,0 @@
-import { useContext } from 'react'
-import OpenAI from 'openai'
-import Markdown from 'react-markdown'
-import { MarkdownContext } from '@/contexts/markdown/MarkdownContext'
-
-type Args = {
-  content: OpenAI.Beta.Threads.Messages.MessageContentText
-}
-
-export const TextContent = ({
-  content,
-}: Args) => {
-  const markdownContext = useContext(MarkdownContext)
-
-  return (
-    <Markdown
-      {...markdownContext}
-    >
-      {content.text.value}
-    </Markdown>
-  )
-}

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

@@ -1,71 +0,0 @@
-import _ from 'lodash'
-import { useMemo } from 'react'
-import {
-  Box,
-} from '@radix-ui/themes'
-import { Message as MessageType } from '@/types'
-import { RunSteps } from '@/components/runSteps/RunSteps'
-import { TextContent } from './TextContent'
-
-type Args = {
-  message: MessageType
-}
-
-export const Message = ({
-  message,
-}: Args) => {
-  const [olderRunSteps, laterRunSteps] = useMemo(() => {
-    if (!message.runSteps.length) return [[], []]
-
-    const messageCreationRunStepIndex = message.runSteps.findIndex((runStep) => {
-      if (runStep.step_details.type !== 'message_creation') return
-
-      return runStep.step_details.message_creation.message_id === message.id
-    })
-
-    let nextRunStepIndex = message.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex((runStep) => (
-      runStep.step_details.type === 'message_creation'
-    ))
-    if (nextRunStepIndex === -1) {
-      nextRunStepIndex = 0
-    }
-    const laterRunSteps = message.runSteps.slice(nextRunStepIndex, messageCreationRunStepIndex)
-
-    const prevRunStepIndex = message.runSteps.slice(messageCreationRunStepIndex + 1).findIndex((runStep) => (
-      runStep.step_details.type === 'message_creation'
-    ))
-
-    let olderRunSteps
-
-    if (prevRunStepIndex === -1) {
-      olderRunSteps = message.runSteps.slice(messageCreationRunStepIndex + 1)
-    } else {
-      olderRunSteps = message.runSteps.slice(messageCreationRunStepIndex + 1, messageCreationRunStepIndex + prevRunStepIndex)
-    }
-
-    return [olderRunSteps, laterRunSteps]
-
-  }, [message])
-
-  return (
-    <Box>
-      <RunSteps
-        runSteps={olderRunSteps}
-      />
-
-      {message.content.map((content, index) => (
-        <Box
-          key={index}
-        >
-          {content.type === 'text' && (
-            <TextContent content={content} />
-          )}
-        </Box>
-      ))}
-
-      <RunSteps
-        runSteps={laterRunSteps}
-      />
-    </Box>
-  )
-}

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

@@ -1,22 +0,0 @@
-import { Flex } from '@radix-ui/themes'
-import { MessageGroup } from '@/types'
-import { Message } from '@/components/messages/Message'
-
-type Args = {
-  messageGroup: MessageGroup
-}
-
-export const Content = ({
-  messageGroup,
-}: Args) => (
-  <Flex
-    direction="column-reverse"
-  >
-    {messageGroup.messages.map((message) => (
-      <Message
-        key={message.id}
-        message={message}
-      />
-    ))}
-  </Flex>
-)

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

@@ -1,47 +0,0 @@
-import { useContext } from 'react'
-import {
-  Box,
-  Avatar,
-} from '@radix-ui/themes'
-import {
-  PersonIcon,
-} from '@radix-ui/react-icons'
-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'
-import { MessageGroup as MessageGroupType } from '@/types'
-import { Content } from './Content'
-
-type Args = {
-  messageGroup: MessageGroupType
-}
-
-export const MessageGroup = ({
-  messageGroup,
-}: Args) => {
-  const assistantNameContext = useContext(AssistantNameContext)
-
-  return (
-    <MessagesGroupBase>
-      {messageGroup.role === 'user' ? (
-        <Avatar
-          fallback={<PersonIcon />}
-          size="1"
-        />
-      ) : (
-        <AssistantAvatar />
-      )}
-
-      <Box>
-        <Name>
-          {messageGroup.role === 'user' ? 'You' : assistantNameContext}
-        </Name>
-
-        <Content
-          messageGroup={messageGroup}
-        />
-      </Box>
-    </MessagesGroupBase>
-  )
-}

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

@@ -1,26 +0,0 @@
-import { useMessageGroups } from '@/hooks/messageGroups/useMessageGroups'
-import { Message } from '@/types'
-import { MessageGroup } from './MessageGroup'
-
-type Args = {
-  messages: Message[]
-}
-
-export const Content = ({
-  messages,
-}: Args) => {
-  const { messageGroups } = useMessageGroups({
-    messages,
-  })
-
-  return (
-    <>
-      {messageGroups.map((messageGroup) => (
-        <MessageGroup
-          key={messageGroup.id}
-          messageGroup={messageGroup}
-        />
-      ))}
-    </>
-  )
-}

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

@@ -1,31 +0,0 @@
-import { Box } from '@radix-ui/themes'
-import { MessagesGroupBase } from '@/components/messageGroups/MessagesGroupBase'
-import { StartingContentSkeleton } from '@/components/skeletons/StartingContentSkeleton'
-import { StartingSkeleton } from '@/components/skeletons/StartingSkeleton'
-import { Message } from '@/types'
-
-type Args = {
-  latestMessage: Message | null
-  isRunActive: boolean
-}
-
-export const ProgressMessage = ({
-  latestMessage,
-  isRunActive,
-}: Args) => {
-  if (!latestMessage) return null
-  if (!isRunActive) return null
-
-  if (latestMessage.role === 'user') {
-    return (
-      <StartingSkeleton />
-    )
-  }
-
-  return (
-    <MessagesGroupBase>
-      <Box pl="5" />
-      <StartingContentSkeleton />
-    </MessagesGroupBase>
-  )
-}