@copilotkit/react-ui 0.15.0-alpha.0 → 0.15.0-alpha.2

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

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

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

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

@@ -1,30 +0,0 @@
-"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/sidebar/copilot-sidebar-ui-provider.tsx

@@ -1,77 +0,0 @@
-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;
-  makeSystemMessage?: (contextString: string) => string;
-}
-
-export function CopilotSidebarUIProvider({ children, ...props }: 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",
-            }}
-          >
-            <TooltipProvider>
-              <CopilotSidebar
-                setSidebarOpen={setSidebarOpen}
-                makeSystemMessage={props.makeSystemMessage}
-              />
-            </TooltipProvider>
-          </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

@@ -1,39 +0,0 @@
-import React from "react";
-import { CopilotChat } from "../chat-components/copilot-chat";
-
-export interface SidebarProps {
-  setSidebarOpen: (open: boolean) => void;
-  makeSystemMessage?: (contextString: string) => string;
-}
-
-export function CopilotSidebar(props: SidebarProps): JSX.Element {
-  return (
-    <div
-      className="shadow-lg bg-gray-50 flex flex-col border-l-2"
-      style={{ width: "100%", height: "100%" }}
-    >
-      <TopBar {...props} />
-      <CopilotChat makeSystemMessage={props.makeSystemMessage} />
-    </div>
-  );
-}
-
-import { XMarkIcon } from "@heroicons/react/24/outline";
-
-function TopBar(props: SidebarProps): JSX.Element {
-  return (
-    <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>
-      <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

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

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

@@ -1,20 +0,0 @@
-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-enter-submit.tsx

@@ -1,17 +0,0 @@
-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 };
-}