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

package/src/components/chat/ChatContext.tsx

@@ -0,0 +1,176 @@
+import React, { useMemo } from "react";
+import * as DefaultIcons from "./Icons";
+
+/**
+ * Icons for CopilotChat component.
+ */
+export interface CopilotChatIcons {
+  /**
+   * The icon to use for the open chat button.
+   * @default <OpenIcon />
+   */
+  openIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the close chat button.
+   * @default <CloseIcon />
+   */
+  closeIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the close chat button in the header.
+   * @default <HeaderCloseIcon />
+   */
+  headerCloseIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the send button.
+   * @default <SendIcon />
+   */
+  sendIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the activity indicator.
+   * @default <ActivityIcon />
+   */
+  activityIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the spinner.
+   * @default <SpinnerIcon />
+   */
+  spinnerIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the stop button.
+   * @default <StopIcon />
+   */
+  stopIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the regenerate button.
+   * @default <RegenerateIcon />
+   */
+  regenerateIcon?: React.ReactNode;
+}
+
+/**
+ * Labels for CopilotChat component.
+ */
+export interface CopilotChatLabels {
+  /**
+   * The initial message(s) to display in the chat window.
+   */
+  initial?: string | string[];
+
+  /**
+   * The title to display in the header.
+   * @default "CopilotKit"
+   */
+  title?: string;
+
+  /**
+   * The placeholder to display in the input.
+   * @default "Type a message..."
+   */
+  placeholder?: string;
+
+  /**
+   * The message to display while the chat GPT is "thinking".
+   * @default "Thinking..."
+   */
+  thinking?: string;
+
+  /**
+   * The message to display when the chat is done executing a function.
+   * @default "✅ Done"
+   */
+  done?: string;
+
+  /**
+   * The message to display when an error occurs.
+   * @default "❌ An error occurred. Please try again."
+   */
+  error?: string;
+
+  /**
+   * The label to display on the stop button.
+   * @default "Stop generating"
+   */
+  stopGenerating?: string;
+
+  /**
+   * The label to display on the regenerate button.
+   * @default "Regenerate response"
+   */
+  regenerateResponse?: string;
+}
+
+interface ChatContext {
+  labels: Required<CopilotChatLabels>;
+  icons: Required<CopilotChatIcons>;
+}
+
+export const ChatContext = React.createContext<ChatContext | undefined>(undefined);
+
+export function useChatContext(): ChatContext {
+  const context = React.useContext(ChatContext);
+  if (context === undefined) {
+    throw new Error(
+      "Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?",
+    );
+  }
+  return context;
+}
+
+interface ChatContextProps {
+  // temperature?: number;
+  // instructions?: string;
+  // maxFeedback?: number;
+  labels?: CopilotChatLabels;
+  icons?: CopilotChatIcons;
+  children?: React.ReactNode;
+}
+
+export const ChatContextProvider = ({
+  // temperature,
+  // instructions,
+  // maxFeedback,
+  labels,
+  icons,
+  children,
+}: ChatContextProps) => {
+  const context = useMemo(
+    () => ({
+      labels: {
+        ...{
+          initial: "",
+          title: "CopilotKit",
+          placeholder: "Type a message...",
+          thinking: "Thinking...",
+          done: "✅ Done",
+          error: "❌ An error occurred. Please try again.",
+          stopGenerating: "Stop generating",
+          regenerateResponse: "Regenerate response",
+        },
+        ...labels,
+      },
+
+      icons: {
+        ...{
+          openIcon: DefaultIcons.OpenIcon,
+          closeIcon: DefaultIcons.CloseIcon,
+          headerCloseIcon: DefaultIcons.HeaderCloseIcon,
+          sendIcon: DefaultIcons.SendIcon,
+          activityIcon: DefaultIcons.ActivityIcon,
+          spinnerIcon: DefaultIcons.SpinnerIcon,
+          stopIcon: DefaultIcons.StopIcon,
+          regenerateIcon: DefaultIcons.RegenerateIcon,
+        },
+        icons,
+      },
+    }),
+    [labels, icons],
+  );
+  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;
+};

package/src/components/{chat-components/ui/codeblock.tsx → chat/CodeBlock.tsx}

@@ -2,10 +2,15 @@
 
 import { FC, memo } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus as highlightStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-import { useCopyToClipboard } from "../../../hooks/use-copy-to-clipboard";
-import { IconCheck, IconCopy, IconDownload } from "./icons";
-import { Button } from "./button";
+import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard";
+import { CheckIcon, CopyIcon, DownloadIcon } from "./Icons";
+
+interface CodeActionButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
 
 interface Props {
   language: string;
@@ -86,45 +91,28 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
   };
 
   return (
-    <div className="codeblock relative w-full bg-zinc-950 font-sans">
-      <div className="flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100">
-        <span className="text-xs lowercase">{language}</span>
-        <div className="flex items-center space-x-1">
-          <Button
-            variant="ghost"
-            className="hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
-            onClick={downloadAsFile}
-            size="icon"
-          >
-            <IconDownload />
+    <div className="copilotKitCodeBlock">
+      <div className="copilotKitCodeBlockToolbar">
+        <span className="copilotKitCodeBlockToolbarLanguage">{language}</span>
+        <div className="copilotKitCodeBlockToolbarButtons">
+          <button className="copilotKitCodeBlockToolbarButton" onClick={downloadAsFile}>
+            <DownloadIcon />
             <span className="sr-only">Download</span>
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
-            onClick={onCopy}
-          >
-            {isCopied ? <IconCheck /> : <IconCopy />}
+          </button>
+          <button className="copilotKitCodeBlockToolbarButton" onClick={onCopy}>
+            {isCopied ? <CheckIcon /> : <CopyIcon />}
             <span className="sr-only">Copy code</span>
-          </Button>
+          </button>
         </div>
       </div>
       <SyntaxHighlighter
         language={language}
+        style={highlightStyle}
         PreTag="div"
-        showLineNumbers
         customStyle={{
           margin: 0,
-          width: "100%",
-          background: "transparent",
-          padding: "1.5rem 1rem",
-        }}
-        codeTagProps={{
-          style: {
-            fontSize: "0.9rem",
-            fontFamily: "var(--font-mono)",
-          },
+          borderBottomLeftRadius: "0.375rem",
+          borderBottomRightRadius: "0.375rem",
         }}
       >
         {value}

package/src/components/chat/Header.tsx

@@ -0,0 +1,15 @@
+import { HeaderProps } from "./props";
+import { useChatContext } from "./ChatContext";
+
+export const Header = ({ setOpen }: HeaderProps) => {
+  const context = useChatContext();
+
+  return (
+    <div className="copilotKitHeader">
+      <div>{context.labels.title}</div>
+      <button onClick={() => setOpen(false)} aria-label="Close">
+        {context.icons.headerCloseIcon}
+      </button>
+    </div>
+  );
+};

package/src/components/chat/Icons.tsx

@@ -0,0 +1,179 @@
+import React from "react";
+
+export const OpenIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width="24"
+    height="24"
+  >
+    <g transform="translate(24, 0) scale(-1, 1)">
+      <path
+        fillRule="evenodd"
+        d="M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+
+export const CloseIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+export const HeaderCloseIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+export const SendIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+    />
+  </svg>
+);
+
+export const SpinnerIcon = (
+  <svg
+    style={{
+      animation: "copilotKitSpinAnimation 1s linear infinite",
+      color: "rgb(107 114 128)",
+    }}
+    width="24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      style={{ opacity: 0.25 }}
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      style={{ opacity: 0.75 }}
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+);
+
+export const ActivityIcon = (
+  <svg
+    style={{
+      display: "inline-block",
+      marginLeft: "0.25rem",
+      marginRight: "0.25rem",
+    }}
+    height="24"
+    width="24"
+    viewBox="0 0 27 27"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <circle className="copilotKitActivityDot1" cx="4" cy="12" r="3" />
+    <circle className="copilotKitActivityDot1 copilotKitActivityDot2" cx="12" cy="12" r="3" />
+    <circle className="copilotKitActivityDot1 copilotKitActivityDot3" cx="20" cy="12" r="3" />
+  </svg>
+);
+
+export function CheckIcon({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      style={{ height: "1rem", width: "1rem" }}
+      className={className}
+      {...props}
+    >
+      <path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
+    </svg>
+  );
+}
+
+export function DownloadIcon({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      style={{ height: "1rem", width: "1rem" }}
+      className={className}
+      {...props}
+    >
+      <path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
+    </svg>
+  );
+}
+
+export function CopyIcon({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      style={{ height: "1rem", width: "1rem" }}
+      className={className}
+      {...props}
+    >
+      <path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
+    </svg>
+  );
+}
+
+export const StopIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 256 256"
+    fill="currentColor"
+    style={{ height: "1rem", width: "1rem" }}
+  >
+    <path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
+  </svg>
+);
+
+export const RegenerateIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 256 256"
+    fill="currentColor"
+    style={{ height: "1rem", width: "1rem" }}
+  >
+    <path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
+  </svg>
+);

package/src/components/chat/Input.tsx

@@ -0,0 +1,51 @@
+import React, { useRef, useState } from "react";
+import { InputProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import AutoResizingTextarea from "./Textarea";
+
+export const Input = ({ inProgress, onSend, children }: InputProps) => {
+  const context = useChatContext();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    // Check if the clicked element is not the textarea itself
+    if (event.target !== event.currentTarget) return;
+
+    textareaRef.current?.focus();
+  };
+
+  const [text, setText] = useState("");
+  const send = () => {
+    if (inProgress) return;
+    onSend(text);
+    setText("");
+
+    textareaRef.current?.focus();
+  };
+
+  const icon = inProgress ? context.icons.activityIcon : context.icons.sendIcon;
+  const disabled = inProgress || text.length === 0;
+
+  return (
+    <div className="copilotKitInput" onClick={handleDivClick}>
+      <span>{children}</span>
+      <button className="copilotKitSendButton" disabled={disabled} onClick={send}>
+        {icon}
+      </button>
+      <AutoResizingTextarea
+        ref={textareaRef}
+        placeholder={context.labels.placeholder}
+        autoFocus={true}
+        maxRows={5}
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            send();
+          }
+        }}
+      />
+    </div>
+  );
+};

package/src/components/chat/Markdown.tsx

@@ -0,0 +1,68 @@
+import { FC, memo } from "react";
+import ReactMarkdown, { Options, Components } from "react-markdown";
+import { CodeBlock } from "./CodeBlock";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+
+const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children && prevProps.className === nextProps.className,
+);
+
+type MarkdownProps = {
+  content: string;
+};
+
+export const Markdown = ({ content }: MarkdownProps) => {
+  return (
+    <div className="copilotKitMarkdown">
+      <MemoizedReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkMath]}>
+        {content}
+      </MemoizedReactMarkdown>
+    </div>
+  );
+};
+
+const components: Components = {
+  p({ children }) {
+    return <p>{children}</p>;
+  },
+  code({ children, className, inline, ...props }) {
+    if (children.length) {
+      if (children[0] == "▍") {
+        return (
+          <span
+            style={{
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+              marginTop: "0.25rem",
+            }}
+          >
+            ▍
+          </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}
+      />
+    );
+  },
+};

package/src/components/chat/Messages.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useMemo } from "react";
+import { MessagesProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import { nanoid } from "nanoid";
+import { Message } from "@copilotkit/shared";
+import { Markdown } from "./Markdown";
+
+export const Messages = ({ messages, inProgress }: MessagesProps) => {
+  const context = useChatContext();
+  const initialMessages = useMemo(
+    () => makeInitialMessages(context.labels.initial),
+    [context.labels.initial],
+  );
+  messages = [...initialMessages, ...messages];
+
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({
+        behavior: "auto",
+      });
+    }
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  return (
+    <div className="copilotKitMessages">
+      {messages.map((message, index) => {
+        const isCurrentMessage = index === messages.length - 1;
+
+        if (message.role === "user") {
+          return (
+            <div key={index} className="copilotKitMessage copilotKitUserMessage">
+              {message.content}
+            </div>
+          );
+        } else if (message.role == "assistant") {
+          if (isCurrentMessage && inProgress && !message.content) {
+            return (
+              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                {context.icons.spinnerIcon}
+              </div>
+            );
+          } else if (
+            (!inProgress || index != messages.length - 1) &&
+            !message.content &&
+            message.function_call
+          ) {
+            return (
+              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                {context.labels.done}
+              </div>
+            );
+          }
+          // TODO: Add back partial message
+          // This shows up when the assistant is executing a function
+          //
+          // else if (message.status === "partial") {
+          //   return (
+          //     <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+          //       {context.labels.thinking} {context.icons.spinnerIcon}
+          //     </div>
+          //   );
+          // }
+          else {
+            return (
+              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                <Markdown content={message.content} />
+              </div>
+            );
+          }
+        }
+        // TODO: Add back function and error messages
+        //
+        // else if (message.role === "function" && message.status === "success") {
+        //   return (
+        //     <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+        //       {context.labels.done}
+        //     </div>
+        //   );
+        // } else if (message.status === "error") {
+        //   return (
+        //     <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+        //       {context.labels.error}
+        //     </div>
+        //   );
+        // }
+      })}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+};
+
+function makeInitialMessages(initial?: string | string[]): Message[] {
+  let initialArray: string[] = [];
+  if (initial) {
+    if (Array.isArray(initial)) {
+      initialArray.push(...initial);
+    } else {
+      initialArray.push(initial);
+    }
+  }
+
+  return initialArray.map((message) => ({
+    id: nanoid(),
+    role: "assistant",
+    content: message,
+  }));
+}

package/src/components/chat/Popup.tsx

@@ -0,0 +1,9 @@
+import { CopilotChat, CopilotChatProps } from "./Chat";
+
+export const CopilotPopup = (props: CopilotChatProps) => {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
+  };
+  return <CopilotChat {...props} />;
+};