@copilotkit/react-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '../../../lib/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

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

@@ -0,0 +1,122 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+
+import { cn } from '../../../lib/utils'
+import { IconClose } from './icons'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = ({
+  className,
+  children,
+  ...props
+}: SheetPrimitive.DialogPortalProps) => (
+  <SheetPrimitive.Portal
+    className={cn('fixed inset-0 z-50 flex', className)}
+    {...props}
+  >
+    {children}
+  </SheetPrimitive.Portal>
+)
+SheetPortal.displayName = SheetPrimitive.Portal.displayName
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, children, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed z-50 h-full border-r bg-background p-6 opacity-100 shadow-lg data-[state=closed]:animate-slide-to-left data-[state=open]:animate-slide-from-left',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <IconClose />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2', className)} {...props} />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription
+}

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

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { cn } from '../../../lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

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

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

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

@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '../../../lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export { CopilotChat } from './chat-components/copilot-chat'
+export { Tooltip, TooltipProvider } from './chat-components/ui/tooltip'
+
+export { CopilotSidebarUIProvider } from './sidebar/copilot-sidebar-ui-provider'
+export { CopilotSidebar } from './sidebar/copilot-sidebar'
+export { CopilotSidebarContext } from './sidebar/sidebar-context'
+export type { CopilotSidebarContextType } from './sidebar/sidebar-context'

package/src/components/sidebar/copilot-sidebar-ui-provider.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode, useCallback } from 'react'
+import { useState } from 'react'
+import { CopilotSidebar } from './copilot-sidebar'
+import { CopilotSidebarContext } from './sidebar-context'
+
+export interface CopilotSidebarUIProviderProps {
+  children: ReactNode
+}
+
+export function CopilotSidebarUIProvider({
+  children
+}: CopilotSidebarUIProviderProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+
+  const toggleSidebar = useCallback(() => {
+    setSidebarOpen(prev => !prev)
+  }, [])
+
+  return (
+    <CopilotSidebarContext.Provider
+      value={{ isSidebarOpen: sidebarOpen, toggleSidebar }}
+    >
+      <>
+        <div
+          style={{
+            height: '100vh',
+            width: '100vw',
+            position: 'relative'
+          }}
+        >
+          <div
+            style={{
+              overflowY: 'auto',
+              overflowX: 'hidden',
+              height: '100%',
+              width: sidebarOpen ? 'calc(100% - 450px)' : '100%',
+              position: 'absolute',
+              transition: 'width 0.5s ease-in-out' // New
+            }}
+          >
+            <main>{children}</main>
+          </div>
+          <div
+            style={{
+              overflowY: 'auto',
+              height: '100%',
+              width: '450px',
+              position: 'absolute',
+              right: sidebarOpen ? '0' : '-450px',
+              transition: 'right 0.5s ease-in-out'
+            }}
+          >
+            <CopilotSidebar setSidebarOpen={setSidebarOpen} />
+          </div>
+          {!sidebarOpen && (
+            <button
+              onClick={toggleSidebar}
+              style={{
+                position: 'absolute',
+                top: '5%',
+                right: '20px',
+                transform: 'translateY(-50%)',
+                transition: 'opacity 0.5s ease-in-out'
+              }}
+              className="bg-slate-100 ring-2 ring-slate-600 font-semibold text-black p-2 rounded-lg shadow-lg"
+            >
+              Open Copilot
+            </button>
+          )}
+        </div>
+      </>
+    </CopilotSidebarContext.Provider>
+  )
+}

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import { CopilotChat } from '../chat-components/copilot-chat'
+
+export interface SidebarProps {
+  setSidebarOpen: (open: boolean) => void
+}
+
+export function CopilotSidebar(props: SidebarProps): JSX.Element {
+  return (
+    <div
+      className="shadow-lg bg-white flex flex-col"
+      style={{ width: '100%', height: '100%' }}
+    >
+      <TopBar {...props} />
+      <CopilotChat />
+    </div>
+  )
+}
+
+import { XMarkIcon } from '@heroicons/react/24/outline'
+
+function TopBar(props: SidebarProps): JSX.Element {
+  return (
+    <div className="py-6 bg-white flex items-center justify-between px-4">
+      <h1 className="text-base font-semibold leading-6 text-gray-900">
+        Copilot Chat
+      </h1>
+      <div className="ml-3 flex h-7 items-center">
+        <button
+          type="button"
+          className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          onClick={() => props.setSidebarOpen(false)}
+        >
+          <span className="sr-only">Close panel</span>
+          <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/sidebar/sidebar-context.tsx

@@ -0,0 +1,11 @@
+import { createContext, ReactNode } from 'react'
+
+export interface CopilotSidebarContextType {
+  isSidebarOpen: boolean
+  toggleSidebar: () => void
+}
+
+export const CopilotSidebarContext = createContext<CopilotSidebarContextType>({
+  isSidebarOpen: false,
+  toggleSidebar: () => {}
+})

package/src/context/index.ts

@@ -0,0 +1 @@
+export {}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export {}

package/src/hooks/use-at-bottom.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+export function useAtBottom(offset = 0) {
+  const [isAtBottom, setIsAtBottom] = React.useState(false)
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setIsAtBottom(
+        window.innerHeight + window.scrollY >=
+          document.body.offsetHeight - offset
+      )
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [offset])
+
+  return isAtBottom
+}

package/src/hooks/use-copy-to-clipboard.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import * as React from 'react'
+
+export interface useCopyToClipboardProps {
+  timeout?: number
+}
+
+export function useCopyToClipboard({
+  timeout = 2000
+}: useCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = React.useState<Boolean>(false)
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
+      return
+    }
+
+    if (!value) {
+      return
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+    })
+  }
+
+  return { isCopied, copyToClipboard }
+}

package/src/hooks/use-enter-submit.tsx

@@ -0,0 +1,23 @@
+import { useRef, type RefObject } from 'react'
+
+export function useEnterSubmit(): {
+  formRef: RefObject<HTMLFormElement>
+  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
+} {
+  const formRef = useRef<HTMLFormElement>(null)
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>
+  ): void => {
+    if (
+      event.key === 'Enter' &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
+      formRef.current?.requestSubmit()
+      event.preventDefault()
+    }
+  }
+
+  return { formRef, onKeyDown: handleKeyDown }
+}

package/src/index.tsx

@@ -1,6 +1,7 @@
 // styles
 import "./styles.css";
 
-// components
-export * from "./Button";
-export * from "./Card";
+export * from './components'
+export * from './context'
+export * from './hooks'
+export * from './types'

package/src/lib/utils.ts

@@ -0,0 +1,43 @@
+import { clsx, type ClassValue } from 'clsx'
+import { customAlphabet } from 'nanoid'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export const nanoid = customAlphabet(
+  '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+  7
+) // 7-character random string
+
+export async function fetcher<JSON = any>(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<JSON> {
+  const res = await fetch(input, init)
+
+  if (!res.ok) {
+    const json = await res.json()
+    if (json.error) {
+      const error = new Error(json.error) as Error & {
+        status: number
+      }
+      error.status = res.status
+      throw error
+    } else {
+      throw new Error('An unexpected error occurred')
+    }
+  }
+
+  return res.json()
+}
+
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input)
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export {}

package/src/types/types.ts

@@ -0,0 +1,18 @@
+import { type Message } from 'ai'
+
+export interface Chat extends Record<string, any> {
+  id: string
+  title: string
+  createdAt: Date
+  userId: string
+  path: string
+  messages: Message[]
+  sharePath?: string
+}
+
+export type ServerActionResult<Result> = Promise<
+  | Result
+  | {
+      error: string
+    }
+>

package/tailwind.config.js

@@ -2,6 +2,6 @@ const sharedConfig = require("tailwind-config/tailwind.config.js");
 
 module.exports = {
   // prefix ui lib classes to avoid conflicting with the app
-  prefix: "ui-",
+  // prefix: "ui-",
   presets: [sharedConfig],
 };

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "tsconfig/react-library.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules"],
 }

package/dist/Button.d.ts

@@ -1,3 +0,0 @@
-declare const Button: () => JSX.Element;
-
-export { Button };

package/dist/Button.js

@@ -1,10 +0,0 @@
-'use strict';
-
-var chunkFGO3LSHH_js = require('./chunk-FGO3LSHH.js');
-
-
-
-Object.defineProperty(exports, 'Button', {
-	enumerable: true,
-	get: function () { return chunkFGO3LSHH_js.a; }
-});

package/dist/Card.d.ts

@@ -1,7 +0,0 @@
-declare const Card: ({ title, cta, href, }: {
-    title: string;
-    cta: string;
-    href: string;
-}) => JSX.Element;
-
-export { Card };

package/dist/Card.js

@@ -1,10 +0,0 @@
-'use strict';
-
-var chunk6OZR7L23_js = require('./chunk-6OZR7L23.js');
-
-
-
-Object.defineProperty(exports, 'Card', {
-	enumerable: true,
-	get: function () { return chunk6OZR7L23_js.a; }
-});

package/dist/chunk-6OZR7L23.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-
-var n=({title:e,cta:t,href:u})=>jsxRuntime.jsx("a",{target:"_blank",rel:"noopener noreferrer",href:u,className:"ui-group ui-mt-4 ui-rounded-lg ui-border ui-border-transparent ui-overflow-hidden ui-bg-origin-border ui-bg-gradient-to-r ui-from-brandred ui-to-brandblue ui-text-[#6b7280]",children:jsxRuntime.jsxs("div",{className:"ui-p-4 ui-bg-zinc-900 ui-h-full",children:[jsxRuntime.jsx("p",{className:"ui-inline-block ui-text-xl ui-text-white",children:e}),jsxRuntime.jsxs("div",{className:"ui-text-xs ui-mt-4 group-hover:ui-underline",children:[t," \u2192"]})]})});
-
-exports.a = n;

package/dist/chunk-FGO3LSHH.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-
-var u=()=>jsxRuntime.jsx("div",{className:"rounded-md ",children:jsxRuntime.jsx("a",{href:"https://turbo.build/repo/docs",children:jsxRuntime.jsxs("div",{className:"ui-flex ui-w-full ui-items-center ui-justify-center ui-rounded-md ui-border ui-border-transparent ui-px-8 ui-py-3 ui-text-base ui-font-medium ui-no-underline ui-bg-white ui-text-black hover:ui-bg-gray-300 md:ui-py-3 md:ui-px-10 md:ui-text-lg md:ui-leading-6",children:["Read the docs",jsxRuntime.jsx("span",{className:"ui-ml-2 ui-bg-gradient-to-r ui-from-brandred ui-to-brandblue ui-bg-clip-text ui-text-transparent",children:"\u2192"})]})})});
-
-exports.a = u;

package/src/Button.tsx

@@ -1,16 +0,0 @@
-import * as React from "react";
-
-export const Button = () => {
-  return (
-    <div className="rounded-md ">
-      <a href="https://turbo.build/repo/docs">
-        <div className="ui-flex ui-w-full ui-items-center ui-justify-center ui-rounded-md ui-border ui-border-transparent ui-px-8 ui-py-3 ui-text-base ui-font-medium ui-no-underline ui-bg-white ui-text-black hover:ui-bg-gray-300 md:ui-py-3 md:ui-px-10 md:ui-text-lg md:ui-leading-6">
-          Read the docs
-          <span className="ui-ml-2 ui-bg-gradient-to-r ui-from-brandred ui-to-brandblue ui-bg-clip-text ui-text-transparent">
-            →
-          </span>
-        </div>
-      </a>
-    </div>
-  );
-};

package/src/Card.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-
-export const Card = ({
-  title,
-  cta,
-  href,
-}: {
-  title: string;
-  cta: string;
-  href: string;
-}) => {
-  return (
-    <a
-      target="_blank"
-      rel="noopener noreferrer"
-      href={href}
-      className="ui-group ui-mt-4 ui-rounded-lg ui-border ui-border-transparent ui-overflow-hidden ui-bg-origin-border ui-bg-gradient-to-r ui-from-brandred ui-to-brandblue ui-text-[#6b7280]"
-    >
-      <div className="ui-p-4 ui-bg-zinc-900 ui-h-full">
-        <p className="ui-inline-block ui-text-xl ui-text-white">{title}</p>
-        <div className="ui-text-xs ui-mt-4 group-hover:ui-underline">
-          {cta} →
-        </div>
-      </div>
-    </a>
-  );
-};