@superinterface/react 1.0.0

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@superinterface/react",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/*.js",
+    "./types": "./dist/types/index.js",
+    "./lib": "./dist/lib/index.js"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "scripts": {
+    "resolve-tspaths": "resolve-tspaths",
+    "install-peers": "install-peers"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.3",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/themes": "^2.0.3",
+    "lodash": "^4.17.21",
+    "openai": "^4.24.1",
+    "p-map": "^7.0.1",
+    "radash": "^11.0.0",
+    "react-hook-form": "^7.49.2",
+    "react-intersection-observer": "^9.5.3",
+    "react-markdown": "^9.0.1",
+    "react-textarea-autosize": "^8.5.3",
+    "react-use": "^17.4.2",
+    "zod": "^3.22.4"
+  },
+  "peerDependencies": {
+    "react": "^18"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.46",
+    "install-peers-cli": "^2.2.0",
+    "resolve-tspaths": "^0.8.17"
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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