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

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

@@ -1,64 +0,0 @@
-import { type UseChatHelpers } from "@copilotkit/react-core";
-
-import { Button } from "./ui/button";
-import { PromptForm } from "./prompt-form";
-import { IconRefresh, IconStop } from "./ui/icons";
-import { nanoid } from "nanoid";
-
-export interface ChatPanelProps
-  extends Pick<
-    UseChatHelpers,
-    "append" | "isLoading" | "reload" | "messages" | "stop" | "input" | "setInput"
-  > {
-  id?: string;
-}
-
-export function ChatPanel({
-  id,
-  isLoading,
-  stop,
-  append,
-  reload,
-  input,
-  setInput,
-  messages,
-}: ChatPanelProps) {
-  return (
-    <div
-      className="inset-x-0 bottom-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50% mt-4 mb-8"
-      style={{ width: "100%", overflow: "hidden", boxSizing: "border-box" }}
-    >
-      <div className="mx-auto sm:max-w-2xl sm:px-4">
-        <div className="flex h-10 items-center justify-center mb-4">
-          {isLoading ? (
-            <Button variant="outline" onClick={() => stop()} className="bg-background">
-              <IconStop className="mr-2" />
-              Stop generating
-            </Button>
-          ) : (
-            messages?.length > 0 && (
-              <Button variant="outline" onClick={() => reload()} className="bg-background">
-                <IconRefresh className="mr-2" />
-                Regenerate response
-              </Button>
-            )
-          )}
-        </div>
-        <div className="space-y-4 border-2 bg-background px-4 py-2 shadow-lg sm:rounded-xl md:py-4">
-          <PromptForm
-            onSubmit={async (value) => {
-              await append({
-                id: id || nanoid(),
-                content: value,
-                role: "user",
-              });
-            }}
-            input={input}
-            setInput={setInput}
-            isLoading={isLoading}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

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

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

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

@@ -1,72 +0,0 @@
-"use client";
-
-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 {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./ui/alert-dialog";
-import { IconSpinner } from "./ui/icons";
-
-interface ClearHistoryProps {
-  clearChats: () => ServerActionResult<void>;
-}
-
-export function ClearHistory({ clearChats }: ClearHistoryProps) {
-  const [open, setOpen] = React.useState(false);
-  const [isPending, startTransition] = React.useTransition();
-  const router = useRouter();
-
-  return (
-    <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>
-        <Button variant="ghost" disabled={isPending}>
-          {isPending && <IconSpinner className="mr-2" />}
-          Clear history
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This will permanently delete your chat history and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            disabled={isPending}
-            onClick={(event: any) => {
-              event.preventDefault();
-              startTransition(async () => {
-                const result = await clearChats();
-
-                if (result && "error" in result) {
-                  toast.error(result.error);
-                  return;
-                }
-
-                setOpen(false);
-                router.push("/");
-              });
-            }}
-          >
-            {isPending && <IconSpinner className="mr-2 animate-spin" />}
-            Delete
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}

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

@@ -1,57 +0,0 @@
-"use client";
-
-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";
-
-interface ChatComponentInjectionsProps {
-  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}
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/chat-components/default-empty-screen.tsx

@@ -1,57 +0,0 @@
-"use client";
-import React from "react";
-
-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: "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`,
-  },
-];
-
-export interface EmptyScreenProps {
-  setInput: React.Dispatch<React.SetStateAction<string>>;
-}
-
-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 CopilotKit! 👋</h1>
-        <p className="mb-2 leading-normal text-muted-foreground">
-          This is a Copilot built with{" "}
-          <ExternalLink href="https://recursively.ai">recursively.ai's</ExternalLink>{" "}
-          <ExternalLink href="https://github.com/RecursivelyAI/CopilotKit">CopilotKit</ExternalLink>{" "}
-          .
-        </p>
-        <p className="leading-normal text-muted-foreground">
-          You can start a conversation here or try the following examples:
-        </p>
-        <div className="mt-4 flex flex-col items-start space-y-2">
-          {exampleMessages.map((message, index) => (
-            <Button
-              key={index}
-              variant="link"
-              className="h-auto p-0 text-base"
-              onClick={() => props.setInput(message.message)}
-            >
-              <IconArrowRight className="mr-2 text-muted-foreground" />
-              {message.heading}
-            </Button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,17 +0,0 @@
-export function ExternalLink({ href, children }: { href: string; children: React.ReactNode }) {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      className="inline-flex flex-1 justify-center gap-1 leading-4 hover:underline"
-    >
-      <span>{children}</span>
-      <svg aria-hidden="true" height="7" viewBox="0 0 6 6" width="7" className="opacity-70">
-        <path
-          d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
-          fill="currentColor"
-        ></path>
-      </svg>
-    </a>
-  );
-}

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

@@ -1,8 +0,0 @@
-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,85 +0,0 @@
-import * as React from "react";
-import TextareaAutosize from "react-textarea-autosize";
-import { UseChatHelpers } from "@copilotkit/react-core";
-
-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;
-}
-
-export function PromptForm({ onSubmit, input, setInput, isLoading }: PromptProps) {
-  const { formRef, onKeyDown } = useEnterSubmit();
-  const inputRef = React.useRef<HTMLTextAreaElement>(null);
-
-  React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-
-  return (
-    <form
-      onSubmit={async (e) => {
-        e.preventDefault();
-        if (!input?.trim()) {
-          return;
-        }
-        setInput("");
-        await onSubmit(input);
-      }}
-      ref={formRef}
-    >
-      <div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-8 sm:rounded-md border sm:px-12">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            {/* <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"
-              )}
-            >
-              <IconPlus />
-              <span className="sr-only">New Chat</span>
-            </Link> */}
-          </TooltipTrigger>
-          <TooltipContent>New Chat</TooltipContent>
-        </Tooltip>
-        <TextareaAutosize
-          ref={inputRef}
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-          rows={1}
-          value={input}
-          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"
-        />
-        <div className="absolute right-0 top-4 sm:right-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="submit"
-                size="icon"
-                disabled={isLoading || input === ""}
-                className=" bg-slate-300"
-              >
-                <IconArrowElbow />
-                <span className="sr-only">Send message</span>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Send message</TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
-    </form>
-  );
-}

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

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

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

@@ -1,126 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "../../../lib/utils";
-import { buttonVariants } from "./button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = ({
-  className,
-  children,
-  ...props
-}: AlertDialogPrimitive.AlertDialogPortalProps) => (
-  <AlertDialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
-      {children}
-    </div>
-  </AlertDialogPrimitive.Portal>
-);
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ 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",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <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",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

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

@@ -1,33 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../../lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

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

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "shadow-none hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 shadow-none hover:underline",
-      },
-      size: {
-        default: "h-8 px-4 py-2",
-        sm: "h-8 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-8 w-8 p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };