@copilotkit/react-ui 0.15.0-alpha.1 → 0.15.0-alpha.3

package/dist/components/sidebar/copilot-sidebar-ui-provider.mjs

@@ -1,25 +0,0 @@
-export { CopilotSidebarUIProvider } from '../../chunk-XGUBRIUV.mjs';
-import '../../chunk-C34L4AWW.mjs';
-import '../../chunk-MC6KTH4X.mjs';
-import '../../chunk-RPTRCFSO.mjs';
-import '../../chunk-SEH5PQVW.mjs';
-import '../../chunk-5KEDV5VC.mjs';
-import '../../chunk-SHOTWRKC.mjs';
-import '../../chunk-GCOPYGHH.mjs';
-import '../../chunk-CNQX2VY3.mjs';
-import '../../chunk-6LAZQHEB.mjs';
-import '../../chunk-TEYIQHMK.mjs';
-import '../../chunk-OOBQC5H6.mjs';
-import '../../chunk-CF3BK4OX.mjs';
-import '../../chunk-INCNMGJ7.mjs';
-import '../../chunk-VGX2W5ZB.mjs';
-import '../../chunk-M3CZWJI3.mjs';
-import '../../chunk-2KAF7NKC.mjs';
-import '../../chunk-IJLMKBSZ.mjs';
-import '../../chunk-Q6YO7LDK.mjs';
-import '../../chunk-ZYC5YVDO.mjs';
-import '../../chunk-POVINPXX.mjs';
-import '../../chunk-OHWEJUCS.mjs';
-import '../../chunk-MRXNTQOX.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=copilot-sidebar-ui-provider.mjs.map

package/dist/components/sidebar/copilot-sidebar-ui-provider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/components/sidebar/copilot-sidebar.d.ts

@@ -1,6 +0,0 @@
-interface SidebarProps {
-    setSidebarOpen: (open: boolean) => void;
-}
-declare function CopilotSidebar(props: SidebarProps): JSX.Element;
-
-export { CopilotSidebar, SidebarProps };

package/dist/components/sidebar/copilot-sidebar.mjs

@@ -1,23 +0,0 @@
-export { CopilotSidebar } from '../../chunk-C34L4AWW.mjs';
-import '../../chunk-RPTRCFSO.mjs';
-import '../../chunk-SEH5PQVW.mjs';
-import '../../chunk-5KEDV5VC.mjs';
-import '../../chunk-SHOTWRKC.mjs';
-import '../../chunk-GCOPYGHH.mjs';
-import '../../chunk-CNQX2VY3.mjs';
-import '../../chunk-6LAZQHEB.mjs';
-import '../../chunk-TEYIQHMK.mjs';
-import '../../chunk-OOBQC5H6.mjs';
-import '../../chunk-CF3BK4OX.mjs';
-import '../../chunk-INCNMGJ7.mjs';
-import '../../chunk-VGX2W5ZB.mjs';
-import '../../chunk-M3CZWJI3.mjs';
-import '../../chunk-2KAF7NKC.mjs';
-import '../../chunk-IJLMKBSZ.mjs';
-import '../../chunk-Q6YO7LDK.mjs';
-import '../../chunk-ZYC5YVDO.mjs';
-import '../../chunk-POVINPXX.mjs';
-import '../../chunk-OHWEJUCS.mjs';
-import '../../chunk-MRXNTQOX.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=copilot-sidebar.mjs.map

package/dist/components/sidebar/copilot-sidebar.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/components/sidebar/sidebar-context.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-interface CopilotSidebarContextType {
-    isSidebarOpen: boolean;
-    toggleSidebar: () => void;
-}
-declare const CopilotSidebarContext: React.Context<CopilotSidebarContextType>;
-
-export { CopilotSidebarContext, CopilotSidebarContextType };

package/dist/components/sidebar/sidebar-context.mjs

@@ -1,4 +0,0 @@
-export { CopilotSidebarContext } from '../../chunk-MC6KTH4X.mjs';
-import '../../chunk-MRXNTQOX.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=sidebar-context.mjs.map

package/dist/components/sidebar/sidebar-context.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/hooks/use-at-bottom.d.ts

@@ -1,3 +0,0 @@
-declare function useAtBottom(offset?: number): boolean;
-
-export { useAtBottom };

package/dist/hooks/use-at-bottom.mjs

@@ -1,4 +0,0 @@
-export { useAtBottom } from '../chunk-ZYC5YVDO.mjs';
-import '../chunk-MRXNTQOX.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=use-at-bottom.mjs.map

package/dist/hooks/use-at-bottom.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/hooks/use-enter-submit.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from 'react';
-
-declare function useEnterSubmit(): {
-    formRef: RefObject<HTMLFormElement>;
-    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-};
-
-export { useEnterSubmit };

package/dist/hooks/use-enter-submit.mjs

@@ -1,4 +0,0 @@
-export { useEnterSubmit } from '../chunk-OHWEJUCS.mjs';
-import '../chunk-MRXNTQOX.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=use-enter-submit.mjs.map

package/dist/hooks/use-enter-submit.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

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

@@ -1,28 +0,0 @@
-import { type Message } from "@copilotkit/react-core";
-
-import { Separator } from "./ui/separator";
-import { ChatMessage } from "./chat-message";
-
-export interface ChatList {
-  messages: Message[];
-}
-
-export function ChatList({ messages }: ChatList) {
-  // we don't want to display system messages
-  const displayedMessages = messages.filter((message) => message.role !== "system");
-
-  if (!displayedMessages.length) {
-    return null;
-  }
-
-  return (
-    <div className="relative mx-auto max-w-2xl px-0">
-      {displayedMessages.map((message, index) => (
-        <div key={index}>
-          <ChatMessage message={message} />
-          {index < displayedMessages.length - 1 && <Separator className="my-4 md:my-4" />}
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/chat-components/chat-message-actions.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { type Message } from "@copilotkit/react-core";
-
-import { Button } from "./ui/button";
-import { IconCheck, IconCopy } from "./ui/icons";
-import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard";
-import { cn } from "../../lib/utils";
-
-interface ChatMessageActionsProps extends React.ComponentProps<"div"> {
-  message: Message;
-}
-
-export function ChatMessageActions({ message, className, ...props }: ChatMessageActionsProps) {
-  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
-
-  const onCopy = () => {
-    if (isCopied) return;
-    copyToClipboard(message.content);
-  };
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0",
-        className,
-      )}
-      {...props}
-    >
-      <Button variant="ghost" size="icon" onClick={onCopy}>
-        {isCopied ? <IconCheck /> : <IconCopy />}
-        <span className="sr-only">Copy message</span>
-      </Button>
-    </div>
-  );
-}

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

@@ -1,70 +0,0 @@
-import { Message } from "@copilotkit/react-core";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-
-import { cn } from "../../lib/utils";
-import { CodeBlock } from "./ui/codeblock";
-import { MemoizedReactMarkdown } from "./markdown";
-import { IconOpenAI, IconUser } from "./ui/icons";
-import { ChatMessageActions } from "./chat-message-actions";
-
-export interface ChatMessageProps {
-  message: Message;
-}
-
-export function ChatMessage({ message, ...props }: ChatMessageProps) {
-  return (
-    <div className={cn("group relative mb-4 flex items-start")} {...props}>
-      <div
-        className={cn(
-          "flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow",
-          message.role === "user" ? "bg-background" : "bg-primary text-primary-foreground",
-        )}
-      >
-        {message.role === "user" ? <IconUser /> : <IconOpenAI />}
-      </div>
-      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
-        <MemoizedReactMarkdown
-          className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 text-sm"
-          remarkPlugins={[remarkGfm, remarkMath]}
-          components={{
-            p({ children }) {
-              return <p className="mb-2 last:mb-0">{children}</p>;
-            },
-            code({ children, className, inline, ...props }) {
-              if (children.length) {
-                if (children[0] == "▍") {
-                  return <span className="mt-1 animate-pulse cursor-default">▍</span>;
-                }
-
-                children[0] = (children[0] as string).replace("`▍`", "▍");
-              }
-
-              const match = /language-(\w+)/.exec(className || "");
-
-              if (inline) {
-                return (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                );
-              }
-
-              return (
-                <CodeBlock
-                  key={Math.random()}
-                  language={(match && match[1]) || ""}
-                  value={String(children).replace(/\n$/, "")}
-                  {...props}
-                />
-              );
-            },
-          }}
-        >
-          {message.content}
-        </MemoizedReactMarkdown>
-        <ChatMessageActions message={message} />
-      </div>
-    </div>
-  );
-}

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