@copilotkit/react-ui 0.3.0 → 0.4.0

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

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

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

@@ -1,11 +1,11 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { useRouter } from 'next/navigation'
-import { toast } from 'react-hot-toast'
+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 { ServerActionResult } from "../../types/types";
+import { Button } from "./ui/button";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -15,18 +15,18 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger
-} from './ui/alert-dialog'
-import { IconSpinner } from './ui/icons'
+  AlertDialogTrigger,
+} from "./ui/alert-dialog";
+import { IconSpinner } from "./ui/icons";
 
 interface ClearHistoryProps {
-  clearChats: () => ServerActionResult<void>
+  clearChats: () => ServerActionResult<void>;
 }
 
 export function ClearHistory({ clearChats }: ClearHistoryProps) {
-  const [open, setOpen] = React.useState(false)
-  const [isPending, startTransition] = React.useTransition()
-  const router = useRouter()
+  const [open, setOpen] = React.useState(false);
+  const [isPending, startTransition] = React.useTransition();
+  const router = useRouter();
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
@@ -49,18 +49,18 @@ export function ClearHistory({ clearChats }: ClearHistoryProps) {
           <AlertDialogAction
             disabled={isPending}
             onClick={(event: any) => {
-              event.preventDefault()
+              event.preventDefault();
               startTransition(async () => {
-                const result = await clearChats()
+                const result = await clearChats();
 
-                if (result && 'error' in result) {
-                  toast.error(result.error)
-                  return
+                if (result && "error" in result) {
+                  toast.error(result.error);
+                  return;
                 }
 
-                setOpen(false)
-                router.push('/')
-              })
+                setOpen(false);
+                router.push("/");
+              });
             }}
           >
             {isPending && <IconSpinner className="mr-2 animate-spin" />}
@@ -69,5 +69,5 @@ export function ClearHistory({ clearChats }: ClearHistoryProps) {
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-  )
+  );
 }

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

@@ -1,61 +1,56 @@
-'use client'
+"use client";
 
-import React from 'react'
+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"
+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>
+  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}
-            />
+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>
-        </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

@@ -1,43 +1,45 @@
-'use client'
-import React from 'react'
-import { UseChatHelpers } from 'ai/react'
+"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'
+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: "Explain technical concepts",
+    message: `What is a "serverless function"?`,
   },
   {
-    heading: 'Summarize an article',
-    message: 'Summarize the following article for a 2nd grader: \n'
+    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`
-  }
-]
+    heading: "Draft an email",
+    message: `Draft an email to my boss about the following: \n`,
+  },
+];
 
 export interface EmptyScreenProps {
-  setInput: React.Dispatch<React.SetStateAction<string>>
+  setInput: React.Dispatch<React.SetStateAction<string>>;
 }
 
-export const DefaultEmptyScreen: React.FC<EmptyScreenProps> = props => {
+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>
+        <h1 className="mb-2 text-lg font-semibold">
+          Welcome to CopilotKit! 👋
+        </h1>
         <p className="mb-2 leading-normal text-muted-foreground">
-          This is a Copilot built with{' '}
+          This is a Copilot built with{" "}
           <ExternalLink href="https://recursively.ai">
             recursively.ai's
-          </ExternalLink>{' '}
+          </ExternalLink>{" "}
           <ExternalLink href="https://github.com/RecursivelyAI/CopilotKit">
             CopilotKit
-          </ExternalLink>{' '}
+          </ExternalLink>{" "}
           .
         </p>
         <p className="leading-normal text-muted-foreground">
@@ -58,5 +60,5 @@ export const DefaultEmptyScreen: React.FC<EmptyScreenProps> = props => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,9 +1,9 @@
 export function ExternalLink({
   href,
-  children
+  children,
 }: {
-  href: string
-  children: React.ReactNode
+  href: string;
+  children: React.ReactNode;
 }) {
   return (
     <a
@@ -25,5 +25,5 @@ export function ExternalLink({
         ></path>
       </svg>
     </a>
-  )
+  );
 }

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

@@ -1,9 +1,9 @@
-import { FC, memo } from 'react'
-import ReactMarkdown, { Options } from 'react-markdown'
+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

@@ -1,44 +1,44 @@
-import * as React from 'react'
-import TextareaAutosize from 'react-textarea-autosize'
-import { UseChatHelpers } from 'ai/react'
+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'
+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
+  extends Pick<UseChatHelpers, "input" | "setInput"> {
+  onSubmit: (value: string) => Promise<void>;
+  isLoading: boolean;
 }
 
 export function PromptForm({
   onSubmit,
   input,
   setInput,
-  isLoading
+  isLoading,
 }: PromptProps) {
-  const { formRef, onKeyDown } = useEnterSubmit()
-  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+  const { formRef, onKeyDown } = useEnterSubmit();
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
 
   React.useEffect(() => {
     if (inputRef.current) {
-      inputRef.current.focus()
+      inputRef.current.focus();
     }
-  }, [])
+  }, []);
 
   return (
     <form
-      onSubmit={async e => {
-        e.preventDefault()
+      onSubmit={async (e) => {
+        e.preventDefault();
         if (!input?.trim()) {
-          return
+          return;
         }
-        setInput('')
-        await onSubmit(input)
+        setInput("");
+        await onSubmit(input);
       }}
       ref={formRef}
     >
@@ -48,8 +48,8 @@ export function PromptForm({
             <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'
+                buttonVariants({ size: "sm", variant: "outline" }),
+                "absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 sm:left-4"
               )}
             >
               <IconPlus />
@@ -64,7 +64,7 @@ export function PromptForm({
           onKeyDown={onKeyDown}
           rows={1}
           value={input}
-          onChange={e => setInput(e.target.value)}
+          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"
@@ -75,7 +75,7 @@ export function PromptForm({
               <Button
                 type="submit"
                 size="icon"
-                disabled={isLoading || input === ''}
+                disabled={isLoading || input === ""}
                 className=" bg-slate-300"
               >
                 <IconArrowElbow />
@@ -87,5 +87,5 @@ export function PromptForm({
         </div>
       </div>
     </form>
-  )
+  );
 }

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

@@ -1,14 +1,14 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { useTheme } from 'next-themes'
+import * as React from "react";
+import { useTheme } from "next-themes";
 
-import { Button } from './ui/button'
-import { IconMoon, IconSun } from './ui/icons'
+import { Button } from "./ui/button";
+import { IconMoon, IconSun } from "./ui/icons";
 
 export function ThemeToggle() {
-  const { setTheme, theme } = useTheme()
-  const [_, startTransition] = React.useTransition()
+  const { setTheme, theme } = useTheme();
+  const [_, startTransition] = React.useTransition();
 
   return (
     <Button
@@ -16,16 +16,16 @@ export function ThemeToggle() {
       size="icon"
       onClick={() => {
         startTransition(() => {
-          setTheme(theme === 'light' ? 'dark' : 'light')
-        })
+          setTheme(theme === "light" ? "dark" : "light");
+        });
       }}
     >
-      {!theme ? null : theme === 'dark' ? (
+      {!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

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

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

@@ -1,14 +1,14 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from '../../../lib/utils'
-import { buttonVariants } from './button'
+import { cn } from "../../../lib/utils";
+import { buttonVariants } from "./button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = ({
   className,
@@ -20,8 +20,8 @@ const AlertDialogPortal = ({
       {children}
     </div>
   </AlertDialogPrimitive.Portal>
-)
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
+);
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -29,14 +29,14 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ 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',
+      "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
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -47,14 +47,14 @@ const AlertDialogContent = React.forwardRef<
     <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',
+        "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
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
@@ -62,13 +62,13 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
+      "flex flex-col space-y-2 text-center sm:text-left",
       className
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = 'AlertDialogHeader'
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -76,13 +76,13 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       className
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = 'AlertDialogFooter'
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -90,11 +90,11 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold', className)}
+    className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -102,12 +102,12 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -118,8 +118,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -128,14 +128,14 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
       className
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -146,5 +146,5 @@ export {
   AlertDialogTitle,
   AlertDialogDescription,
   AlertDialogAction,
-  AlertDialogCancel
-}
+  AlertDialogCancel,
+};