@copilotkit/react-ui 0.3.0 → 0.5.0

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

@@ -1,16 +1,16 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
 
-import { cn } from '../../../lib/utils'
-import { IconArrowDown, IconCheck, IconChevronUpDown } from './icons'
+import { cn } from "../../../lib/utils";
+import { IconArrowDown, IconCheck, IconChevronUpDown } from "./icons";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -29,19 +29,19 @@ const SelectTrigger = React.forwardRef<
       <IconChevronUpDown className="opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
+>(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
-        position === 'popper' && 'translate-y-1',
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
+        position === "popper" && "translate-y-1",
         className
       )}
       position={position}
@@ -49,17 +49,17 @@ const SelectContent = React.forwardRef<
     >
       <SelectPrimitive.Viewport
         className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
       </SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -67,11 +67,11 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -80,7 +80,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -92,8 +92,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -101,11 +101,11 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -115,5 +115,5 @@ export {
   SelectContent,
   SelectLabel,
   SelectItem,
-  SelectSeparator
-}
+  SelectSeparator,
+};

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

@@ -1,16 +1,16 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from '../../../lib/utils'
+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 },
+    { className, orientation = "horizontal", decorative = true, ...props },
     ref
   ) => (
     <SeparatorPrimitive.Root
@@ -18,14 +18,14 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       )}
       {...props}
     />
   )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

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

@@ -1,16 +1,16 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
 
-import { cn } from '../../../lib/utils'
-import { IconClose } from './icons'
+import { cn } from "../../../lib/utils";
+import { IconClose } from "./icons";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = ({
   className,
@@ -18,13 +18,13 @@ const SheetPortal = ({
   ...props
 }: SheetPrimitive.DialogPortalProps) => (
   <SheetPrimitive.Portal
-    className={cn('fixed inset-0 z-50 flex', className)}
+    className={cn("fixed inset-0 z-50 flex", className)}
     {...props}
   >
     {children}
   </SheetPrimitive.Portal>
-)
-SheetPortal.displayName = SheetPrimitive.Portal.displayName
+);
+SheetPortal.displayName = SheetPrimitive.Portal.displayName;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -32,14 +32,14 @@ const SheetOverlay = React.forwardRef<
 >(({ 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',
+      "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
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
@@ -49,7 +49,7 @@ const SheetContent = React.forwardRef<
     <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',
+        "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}
@@ -61,16 +61,16 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+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'
+  <div className={cn("flex flex-col space-y-2", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
   className,
@@ -78,13 +78,13 @@ const SheetFooter = ({
 }: 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}
   />
-)
-SheetFooter.displayName = 'SheetFooter'
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -92,11 +92,11 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
+    className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -104,11 +104,11 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -118,5 +118,5 @@ export {
   SheetHeader,
   SheetFooter,
   SheetTitle,
-  SheetDescription
-}
+  SheetDescription,
+};

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

@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from '../../../lib/utils'
+import { cn } from "../../../lib/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ 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',
+      "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}
@@ -19,11 +19,11 @@ const Switch = React.forwardRef<
   >
     <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'
+        "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
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };

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

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { cn } from '../../../lib/utils'
+import { cn } from "../../../lib/utils";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     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',
+          "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'
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };

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

@@ -1,15 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from '../../../lib/utils'
+import { cn } from "../../../lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -19,12 +19,12 @@ const TooltipContent = React.forwardRef<
     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',
+      "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
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/index.ts

@@ -1,7 +1,7 @@
-export { CopilotChat } from './chat-components/copilot-chat'
-export { Tooltip, TooltipProvider } from './chat-components/ui/tooltip'
+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'
+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

@@ -1,20 +1,21 @@
-import React, { ReactNode, useCallback } from 'react'
-import { useState } from 'react'
-import { CopilotSidebar } from './copilot-sidebar'
-import { CopilotSidebarContext } from './sidebar-context'
+import React, { ReactNode, useCallback } from "react";
+import { useState } from "react";
+import { CopilotSidebar } from "./copilot-sidebar";
+import { CopilotSidebarContext } from "./sidebar-context";
+import { TooltipProvider } from "../chat-components/ui/tooltip";
 
 export interface CopilotSidebarUIProviderProps {
-  children: ReactNode
+  children: ReactNode;
 }
 
 export function CopilotSidebarUIProvider({
-  children
+  children,
 }: CopilotSidebarUIProviderProps) {
-  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   const toggleSidebar = useCallback(() => {
-    setSidebarOpen(prev => !prev)
-  }, [])
+    setSidebarOpen((prev) => !prev);
+  }, []);
 
   return (
     <CopilotSidebarContext.Provider
@@ -23,44 +24,46 @@ export function CopilotSidebarUIProvider({
       <>
         <div
           style={{
-            height: '100vh',
-            width: '100vw',
-            position: 'relative'
+            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
+              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'
+              overflowY: "auto",
+              height: "100%",
+              width: "450px",
+              position: "absolute",
+              right: sidebarOpen ? "0" : "-450px",
+              transition: "right 0.5s ease-in-out",
             }}
           >
-            <CopilotSidebar setSidebarOpen={setSidebarOpen} />
+            <TooltipProvider>
+              <CopilotSidebar setSidebarOpen={setSidebarOpen} />
+            </TooltipProvider>
           </div>
           {!sidebarOpen && (
             <button
               onClick={toggleSidebar}
               style={{
-                position: 'absolute',
-                top: '5%',
-                right: '20px',
-                transform: 'translateY(-50%)',
-                transition: 'opacity 0.5s ease-in-out'
+                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"
             >
@@ -70,5 +73,5 @@ export function CopilotSidebarUIProvider({
         </div>
       </>
     </CopilotSidebarContext.Provider>
-  )
+  );
 }

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

@@ -1,27 +1,27 @@
-import React from 'react'
-import { CopilotChat } from '../chat-components/copilot-chat'
+import React from "react";
+import { CopilotChat } from "../chat-components/copilot-chat";
 
 export interface SidebarProps {
-  setSidebarOpen: (open: boolean) => void
+  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%' }}
+      className="shadow-lg bg-gray-50 flex flex-col border-l-2"
+      style={{ width: "100%", height: "100%" }}
     >
       <TopBar {...props} />
       <CopilotChat />
     </div>
-  )
+  );
 }
 
-import { XMarkIcon } from '@heroicons/react/24/outline'
+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">
+    <div className="py-6 flex bg-gray-50 items-center justify-between px-4">
       <h1 className="text-base font-semibold leading-6 text-gray-900">
         Copilot Chat
       </h1>
@@ -36,5 +36,5 @@ function TopBar(props: SidebarProps): JSX.Element {
         </button>
       </div>
     </div>
-  )
+  );
 }

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

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

package/src/context/index.ts

@@ -1 +1 @@
-export {}
+export {};

package/src/hooks/index.ts

@@ -1 +1 @@
-export {}
+export {};

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

@@ -1,23 +1,23 @@
-import * as React from 'react'
+import * as React from "react";
 
 export function useAtBottom(offset = 0) {
-  const [isAtBottom, setIsAtBottom] = React.useState(false)
+  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()
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
 
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [offset])
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [offset]);
 
-  return isAtBottom
+  return isAtBottom;
 }