@copilotkit/react-ui 0.2.0 → 0.3.0

package/src/components/chat-components/chat-panel.tsx

@@ -0,0 +1,77 @@
+import { type UseChatHelpers } from 'ai/react'
+
+import { Button } from './ui/button'
+import { PromptForm } from './prompt-form'
+import { IconRefresh, IconStop } from './ui/icons'
+
+export interface ChatPanelProps
+  extends Pick<
+    UseChatHelpers,
+    | 'append'
+    | 'isLoading'
+    | 'reload'
+    | 'messages'
+    | 'stop'
+    | 'input'
+    | 'setInput'
+  > {
+  id?: string
+}
+
+export function ChatPanel({
+  id,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages
+}: ChatPanelProps) {
+  return (
+    <div
+      className="inset-x-0 bottom-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50% mt-4 mb-8"
+      style={{ width: '100%', overflow: 'hidden', boxSizing: 'border-box' }}
+    >
+      <div className="mx-auto sm:max-w-2xl sm:px-4">
+        <div className="flex h-10 items-center justify-center mb-4">
+          {isLoading ? (
+            <Button
+              variant="outline"
+              onClick={() => stop()}
+              className="bg-background"
+            >
+              <IconStop className="mr-2" />
+              Stop generating
+            </Button>
+          ) : (
+            messages?.length > 0 && (
+              <Button
+                variant="outline"
+                onClick={() => reload()}
+                className="bg-background"
+              >
+                <IconRefresh className="mr-2" />
+                Regenerate response
+              </Button>
+            )
+          )}
+        </div>
+        <div className="space-y-4 border-2 bg-background px-4 py-2 shadow-lg sm:rounded-xl md:py-4">
+          <PromptForm
+            onSubmit={async value => {
+              await append({
+                id,
+                content: value,
+                role: 'user'
+              })
+            }}
+            input={input}
+            setInput={setInput}
+            isLoading={isLoading}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat-components/chat-scroll-anchor.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import { useAtBottom } from '../../hooks/use-at-bottom'
+
+interface ChatScrollAnchorProps {
+  trackVisibility?: boolean
+}
+
+export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {
+  const isAtBottom = useAtBottom()
+  const { ref, entry, inView } = useInView({
+    trackVisibility,
+    delay: 100,
+    rootMargin: '0px 0px -150px 0px'
+  })
+
+  React.useEffect(() => {
+    if (isAtBottom && trackVisibility && !inView) {
+      entry?.target.scrollIntoView({
+        block: 'start'
+      })
+    }
+  }, [inView, entry, isAtBottom, trackVisibility])
+
+  return <div ref={ref} className="h-px w-full" />
+}

package/src/components/chat-components/clear-history.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { toast } from 'react-hot-toast'
+
+import { ServerActionResult } from "../../types/types"
+import { Button } from './ui/button'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from './ui/alert-dialog'
+import { IconSpinner } from './ui/icons'
+
+interface ClearHistoryProps {
+  clearChats: () => ServerActionResult<void>
+}
+
+export function ClearHistory({ clearChats }: ClearHistoryProps) {
+  const [open, setOpen] = React.useState(false)
+  const [isPending, startTransition] = React.useTransition()
+  const router = useRouter()
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" disabled={isPending}>
+          {isPending && <IconSpinner className="mr-2" />}
+          Clear history
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete your chat history and remove your data
+            from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            disabled={isPending}
+            onClick={(event: any) => {
+              event.preventDefault()
+              startTransition(async () => {
+                const result = await clearChats()
+
+                if (result && 'error' in result) {
+                  toast.error(result.error)
+                  return
+                }
+
+                setOpen(false)
+                router.push('/')
+              })
+            }}
+          >
+            {isPending && <IconSpinner className="mr-2 animate-spin" />}
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/src/components/chat-components/copilot-chat.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React from 'react'
+
+import { ChatList } from './chat-list'
+import { ChatPanel } from './chat-panel'
+import { DefaultEmptyScreen, EmptyScreenProps } from './default-empty-screen'
+import { ChatScrollAnchor } from './chat-scroll-anchor'
+import { UseCopilotChatOptions } from "@copilotkit/react-core"
+import { useCopilotChat } from "@copilotkit/react-core"
+
+interface ChatComponentInjectionsProps {
+  EmptyScreen?: React.FC<EmptyScreenProps>
+}
+
+interface CopilotChatProps
+  extends UseCopilotChatOptions,
+    ChatComponentInjectionsProps {}
+
+    export function CopilotChat({
+      id,
+      initialMessages,
+      makeSystemMessage,
+      EmptyScreen = DefaultEmptyScreen
+    }: CopilotChatProps) {
+      const { visibleMessages, append, reload, stop, isLoading, input, setInput } =
+        useCopilotChat({ id, initialMessages, makeSystemMessage })
+    
+      return (
+        <div
+          className="w-full h-full flex flex-col overflow-hidden box-border items-start"
+        >
+          <div
+            className="pt-5 px-5 overflow-y-auto overflow-x-hidden w-full flex-grow"
+          >
+            {visibleMessages.length ? (
+              <div className="pl-0 pr-6">
+                <ChatList messages={visibleMessages} />
+                <ChatScrollAnchor trackVisibility={isLoading} />
+              </div>
+            ) : (
+              <EmptyScreen setInput={setInput} />
+            )}
+          </div>
+    
+          <div className="flex-shrink-0 w-full">
+            <ChatPanel
+              id={id}
+              isLoading={isLoading}
+              stop={stop}
+              append={append}
+              reload={reload}
+              messages={visibleMessages}
+              input={input}
+              setInput={setInput}
+            />
+          </div>
+        </div>
+      )
+    }
+    

package/src/components/chat-components/default-empty-screen.tsx

@@ -0,0 +1,62 @@
+'use client'
+import React from 'react'
+import { UseChatHelpers } from 'ai/react'
+
+import { Button } from './ui/button'
+import { ExternalLink } from './external-link'
+import { IconArrowRight } from './ui/icons'
+
+const exampleMessages = [
+  {
+    heading: 'Explain technical concepts',
+    message: `What is a "serverless function"?`
+  },
+  {
+    heading: 'Summarize an article',
+    message: 'Summarize the following article for a 2nd grader: \n'
+  },
+  {
+    heading: 'Draft an email',
+    message: `Draft an email to my boss about the following: \n`
+  }
+]
+
+export interface EmptyScreenProps {
+  setInput: React.Dispatch<React.SetStateAction<string>>
+}
+
+export const DefaultEmptyScreen: React.FC<EmptyScreenProps> = props => {
+  return (
+    <div className="mx-auto max-w-2xl px-4">
+      <div className="rounded-lg border bg-background p-8">
+        <h1 className="mb-2 text-lg font-semibold">Welcome to Copilot! 👋</h1>
+        <p className="mb-2 leading-normal text-muted-foreground">
+          This is a Copilot built with{' '}
+          <ExternalLink href="https://recursively.ai">
+            recursively.ai's
+          </ExternalLink>{' '}
+          <ExternalLink href="https://github.com/RecursivelyAI/CopilotKit">
+            CopilotKit
+          </ExternalLink>{' '}
+          .
+        </p>
+        <p className="leading-normal text-muted-foreground">
+          You can start a conversation here or try the following examples:
+        </p>
+        <div className="mt-4 flex flex-col items-start space-y-2">
+          {exampleMessages.map((message, index) => (
+            <Button
+              key={index}
+              variant="link"
+              className="h-auto p-0 text-base"
+              onClick={() => props.setInput(message.message)}
+            >
+              <IconArrowRight className="mr-2 text-muted-foreground" />
+              {message.heading}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat-components/external-link.tsx

@@ -0,0 +1,29 @@
+export function ExternalLink({
+  href,
+  children
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      className="inline-flex flex-1 justify-center gap-1 leading-4 hover:underline"
+    >
+      <span>{children}</span>
+      <svg
+        aria-hidden="true"
+        height="7"
+        viewBox="0 0 6 6"
+        width="7"
+        className="opacity-70"
+      >
+        <path
+          d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </a>
+  )
+}

package/src/components/chat-components/markdown.tsx

@@ -0,0 +1,9 @@
+import { FC, memo } from 'react'
+import ReactMarkdown, { Options } from 'react-markdown'
+
+export const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className
+)

package/src/components/chat-components/prompt-form.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import TextareaAutosize from 'react-textarea-autosize'
+import { UseChatHelpers } from 'ai/react'
+
+import { useEnterSubmit } from '../../hooks/use-enter-submit'
+import { cn } from '../../lib/utils'
+import { Button, buttonVariants } from './ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip'
+import { IconArrowElbow, IconPlus } from './ui/icons'
+import Link from 'next/link'
+
+export interface PromptProps
+  extends Pick<UseChatHelpers, 'input' | 'setInput'> {
+  onSubmit: (value: string) => Promise<void>
+  isLoading: boolean
+}
+
+export function PromptForm({
+  onSubmit,
+  input,
+  setInput,
+  isLoading
+}: PromptProps) {
+  const { formRef, onKeyDown } = useEnterSubmit()
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  return (
+    <form
+      onSubmit={async e => {
+        e.preventDefault()
+        if (!input?.trim()) {
+          return
+        }
+        setInput('')
+        await onSubmit(input)
+      }}
+      ref={formRef}
+    >
+      <div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-8 sm:rounded-md border sm:px-12">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Link
+              href="/"
+              className={cn(
+                buttonVariants({ size: 'sm', variant: 'outline' }),
+                'absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 sm:left-4'
+              )}
+            >
+              <IconPlus />
+              <span className="sr-only">New Chat</span>
+            </Link>
+          </TooltipTrigger>
+          <TooltipContent>New Chat</TooltipContent>
+        </Tooltip>
+        <TextareaAutosize
+          ref={inputRef}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          rows={1}
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          placeholder="Send a message."
+          spellCheck={false}
+          className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+        />
+        <div className="absolute right-0 top-4 sm:right-4">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="submit"
+                size="icon"
+                disabled={isLoading || input === ''}
+                className=" bg-slate-300"
+              >
+                <IconArrowElbow />
+                <span className="sr-only">Send message</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Send message</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    </form>
+  )
+}

package/src/components/chat-components/theme-toggle.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import { useTheme } from 'next-themes'
+
+import { Button } from './ui/button'
+import { IconMoon, IconSun } from './ui/icons'
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme()
+  const [_, startTransition] = React.useTransition()
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => {
+        startTransition(() => {
+          setTheme(theme === 'light' ? 'dark' : 'light')
+        })
+      }}
+    >
+      {!theme ? null : theme === 'dark' ? (
+        <IconMoon className="transition-all" />
+      ) : (
+        <IconSun className="transition-all" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/src/components/chat-components/toaster.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Toaster } from 'react-hot-toast'

package/src/components/chat-components/ui/alert-dialog.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '../../../lib/utils'
+import { buttonVariants } from './button'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = ({
+  className,
+  children,
+  ...props
+}: AlertDialogPrimitive.AlertDialogPortalProps) => (
+  <AlertDialogPrimitive.Portal className={cn(className)} {...props}>
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+      {children}
+    </div>
+  </AlertDialogPrimitive.Portal>
+)
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, children, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel
+}

package/src/components/chat-components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../../../lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }