@copilotkit/react-ui 0.2.0 → 0.4.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,77 @@
+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;
+}
+
+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",
+            }}
+          >
+            <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",
+              }}
+              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-gray-50 flex flex-col border-l-2"
+      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 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

@@ -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/tsup.config.ts

@@ -1,13 +1,12 @@
 import { defineConfig, Options } from "tsup";
 
 export default defineConfig((options: Options) => ({
-  treeshake: true,
-  splitting: true,
-  entry: ["src/**/*.tsx"],
+  entry: ["src/**/*.{ts,tsx}"],
   format: ["esm"],
   dts: true,
-  minify: true,
+  minify: false,
   clean: true,
   external: ["react"],
+  sourcemap: true,
   ...options,
 }));

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/dist/index.js

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

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>
-  );
-};