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

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/react-core";
+import { Markdown } from "./Markdown";
+
+export const Messages: React.FC<MessagesProps> = ({ messages, inProgress }) => {
+  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,10 @@
+import React from "react";
+import { CopilotKitChat, CopilotKitChatProps } from "./Chat";
+
+export const CopilotKitPopup: React.FC<CopilotKitChatProps> = (props) => {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
+  };
+  return <CopilotKitChat {...props} />;
+};

package/src/components/chat/Response.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { useChatContext } from "./ChatContext";
+import { ResponseButtonProps } from "./props";
+
+export const ResponseButton: React.FC<ResponseButtonProps> = ({ onClick, inProgress }) => {
+  const context = useChatContext();
+  return (
+    <button onClick={onClick} className="copilotKitResponseButton">
+      <span>{inProgress ? context.icons.stopIcon : context.icons.regenerateIcon}</span>
+      {inProgress ? context.labels.stopGenerating : context.labels.regenerateResponse}
+    </button>
+  );
+};

package/src/components/chat/Sidebar.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { CopilotKitChat, CopilotKitChatProps } from "./Chat";
+
+interface CopilotKitSidebarProps extends CopilotKitChatProps {
+  children?: React.ReactNode;
+}
+
+export const CopilotKitSidebar: React.FC<CopilotKitSidebarProps> = (props) => {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar",
+  };
+  const [expandedClassName, setExpandedClassName] = useState(
+    props.defaultOpen ? "sidebarExpanded" : "",
+  );
+
+  const onSetOpen = (open: boolean) => {
+    props.onSetOpen?.(open);
+    setExpandedClassName(open ? "sidebarExpanded" : "");
+  };
+
+  return (
+    <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>
+      {props.children}
+      <CopilotKitChat {...props} {...{ onSetOpen }} />
+    </div>
+  );
+};

package/src/components/chat/Textarea.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+
+interface AutoResizingTextareaProps {
+  maxRows?: number;
+  placeholder?: string;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  autoFocus?: boolean;
+}
+
+const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(
+  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
+    const internalTextareaRef = useRef<HTMLTextAreaElement>(null);
+    const [maxHeight, setMaxHeight] = useState<number>(0);
+
+    useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);
+
+    useEffect(() => {
+      const calculateMaxHeight = () => {
+        const textarea = internalTextareaRef.current;
+        if (textarea) {
+          textarea.style.height = "auto";
+          const singleRowHeight = textarea.scrollHeight;
+          setMaxHeight(singleRowHeight * maxRows);
+          if (autoFocus) {
+            textarea.focus();
+          }
+        }
+      };
+
+      calculateMaxHeight();
+    }, [maxRows]);
+
+    useEffect(() => {
+      const textarea = internalTextareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+      }
+    }, [value, maxHeight]);
+
+    return (
+      <textarea
+        ref={internalTextareaRef}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        style={{
+          overflow: "hidden",
+          resize: "none",
+          maxHeight: `${maxHeight}px`,
+        }}
+        rows={1}
+      />
+    );
+  },
+);
+
+export default AutoResizingTextarea;

package/src/components/chat/Window.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect } from "react";
+import { WindowProps } from "./props";
+
+export const Window = ({
+  open,
+  setOpen,
+  children,
+  clickOutsideToClose,
+  hotkey,
+  hitEscapeToClose,
+}: WindowProps) => {
+  const windowRef = React.useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (!clickOutsideToClose) {
+        return;
+      }
+
+      const parentElement = windowRef.current?.parentElement;
+
+      if (open && parentElement && !parentElement.contains(event.target as any)) {
+        setOpen(false);
+      }
+    },
+    [clickOutsideToClose, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      const isInput =
+        target.tagName === "INPUT" ||
+        target.tagName === "SELECT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable;
+
+      const isDescendantOfWrapper = windowRef.current?.contains(target);
+
+      if (
+        open &&
+        event.key === "Escape" &&
+        (!isInput || isDescendantOfWrapper) &&
+        hitEscapeToClose
+      ) {
+        setOpen(false);
+      } else if (
+        event.key === hotkey &&
+        ((isMacOS() && event.metaKey) || (!isMacOS() && event.ctrlKey)) &&
+        (!isInput || isDescendantOfWrapper)
+      ) {
+        setOpen(!open);
+      }
+    },
+    [hitEscapeToClose, hotkey, open, setOpen],
+  );
+
+  const adjustForMobile = useCallback(() => {
+    const copilotKitWindow = windowRef.current;
+    const vv = window.visualViewport;
+    if (!copilotKitWindow || !vv) {
+      return;
+    }
+
+    if (window.innerWidth < 640 && open) {
+      copilotKitWindow.style.height = `${vv.height}px`;
+      copilotKitWindow.style.left = `${vv.offsetLeft}px`;
+      copilotKitWindow.style.top = `${vv.offsetTop}px`;
+
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+      document.body.style.height = `${window.innerHeight}px`;
+      document.body.style.overflow = "hidden";
+      document.body.style.touchAction = "none";
+
+      // Prevent scrolling on iOS
+      document.body.addEventListener("touchmove", preventScroll, {
+        passive: false,
+      });
+    } else {
+      copilotKitWindow.style.height = "";
+      copilotKitWindow.style.left = "";
+      copilotKitWindow.style.top = "";
+      document.body.style.position = "";
+      document.body.style.height = "";
+      document.body.style.width = "";
+      document.body.style.overflow = "";
+      document.body.style.top = "";
+      document.body.style.touchAction = "";
+
+      document.body.removeEventListener("touchmove", preventScroll);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", adjustForMobile);
+      adjustForMobile();
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", adjustForMobile);
+      }
+    };
+  }, [adjustForMobile, handleClickOutside, handleKeyDown]);
+
+  return (
+    <div className={`copilotKitWindow${open ? " open" : ""}`} ref={windowRef}>
+      {children}
+    </div>
+  );
+};
+
+const preventScroll = (event: TouchEvent): void => {
+  let targetElement = event.target as Element;
+
+  // Function to check if the target has the parent with a given class
+  const hasParentWithClass = (element: Element, className: string): boolean => {
+    while (element && element !== document.body) {
+      if (element.classList.contains(className)) {
+        return true;
+      }
+      element = element.parentElement!;
+    }
+    return false;
+  };
+
+  // Check if the target of the touch event is inside an element with the 'copilotKitMessages' class
+  if (!hasParentWithClass(targetElement, "copilotKitMessages")) {
+    event.preventDefault();
+  }
+};
+
+function isMacOS() {
+  return /Mac|iMac|Macintosh/i.test(navigator.userAgent);
+}

package/src/components/chat/index.tsx

@@ -0,0 +1,3 @@
+export * from "./props";
+export { CopilotKitPopup } from "./Popup";
+export { CopilotKitSidebar } from "./Sidebar";

package/src/components/chat/props.ts

@@ -0,0 +1,36 @@
+import { Message } from "@copilotkit/react-core";
+
+export interface ButtonProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export interface WindowProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  clickOutsideToClose: boolean;
+  hitEscapeToClose: boolean;
+  hotkey: string;
+  children?: React.ReactNode;
+}
+
+export interface HeaderProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export interface MessagesProps {
+  messages: Message[];
+  inProgress: boolean;
+}
+
+export interface InputProps {
+  inProgress: boolean;
+  onSend: (text: string) => void;
+  children?: React.ReactNode;
+}
+
+export interface ResponseButtonProps {
+  onClick: () => void;
+  inProgress: boolean;
+}

package/src/components/index.ts

@@ -5,3 +5,5 @@ 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";
+
+export * from "./chat";

package/src/css/animations.css

@@ -0,0 +1,29 @@
+.copilotKitActivityDot1 {
+  animation: copilotKitActivityDotsAnimation 1.05s infinite;
+}
+.copilotKitActivityDot2 {
+  animation-delay: 0.1s;
+}
+.copilotKitActivityDot3 {
+  animation-delay: 0.2s;
+}
+@keyframes copilotKitActivityDotsAnimation {
+  0%,
+  57.14% {
+    animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+    transform: translate(0);
+  }
+  28.57% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translate(0);
+  }
+}
+
+@keyframes copilotKitSpinAnimation {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/css/button.css

@@ -0,0 +1,54 @@
+.copilotKitButton {
+  width: 3.5rem;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  outline: none;
+  position: relative;
+  transform: scale(1);
+  transition: transform 200ms;
+  background-color: var(--copilot-kit-button-background-color);
+  color: var(--copilot-kit-button-icon-color);
+  cursor: pointer;
+}
+
+.copilotKitButton:hover {
+  transform: scale(1.1);
+}
+
+.copilotKitButton:active {
+  transform: scale(0.75);
+}
+
+.copilotKitButtonIcon {
+  transition: opacity 100ms, transform 300ms;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* State when the chat is open */
+.copilotKitButton.open .copilotKitButtonIconOpen {
+  transform: translate(-50%, -50%) scale(0) rotate(90deg);
+  opacity: 0;
+}
+
+.copilotKitButton.open .copilotKitButtonIconClose {
+  transform: translate(-50%, -50%) scale(1) rotate(0deg);
+  opacity: 1;
+}
+
+/* State when the chat is closed */
+.copilotKitButton:not(.open) .copilotKitButtonIconOpen {
+  transform: translate(-50%, -50%) scale(1) rotate(0deg);
+  opacity: 1;
+}
+
+.copilotKitButton:not(.open) .copilotKitButtonIconClose {
+  transform: translate(-50%, -50%) scale(0) rotate(-90deg);
+  opacity: 0;
+}

package/src/css/colors.css

@@ -0,0 +1,61 @@
+:root {
+  --copilot-kit-primary-color: rgb(59 130 246);
+  --copilot-kit-contrast-color: rgb(255 255 255);
+  --copilot-kit-secondary-color: rgb(243 244 246);
+  --copilot-kit-secondary-contrast-color: rgb(0 0 0);
+  --copilot-kit-background-color: rgb(255 255 255);
+  --copilot-kit-muted-color: rgb(106 106 106);
+  --copilot-kit-separator-color: rgba(0, 0, 0, 0.08);
+  --copilot-kit-scrollbar-color: rgba(0, 0, 0, 0.2);
+
+  --copilot-kit-button-background-color: var(--copilot-kit-primary-color);
+
+  /* The color of the icon in the open/close button */
+  --copilot-kit-button-icon-color: var(--copilot-kit-contrast-color);
+
+  /* The background color of the header of the chat window */
+  --copilot-kit-header-background-color: var(--copilot-kit-primary-color);
+
+  /* The color of the title in the header of the chat window */
+  --copilot-kit-header-title-color: var(--copilot-kit-contrast-color);
+
+  /* The color of the close button in the header of the chat window */
+  --copilot-kit-header-close-button-color: var(--copilot-kit-contrast-color);
+
+  /* The color of the separator between the header and the messages area */
+  --copilot-kit-header-separator-color: var(--copilot-kit-separator-color);
+
+  /* The background color of the input area */
+  --copilot-kit-input-background-color: var(--copilot-kit-background-color);
+
+  /* The color of the send button */
+  --copilot-kit-input-send-button-color: var(--copilot-kit-primary-color);
+
+  /* The color of the send button when disabled */
+  --copilot-kit-input-send-button-disabled-color: var(--copilot-kit-muted-color);
+
+  /* The color of the placeholder text in the input area */
+  --copilot-kit-input-placeholder-color: var(--copilot-kit-muted-color);
+
+  /* The color of the text in the input area */
+  --copilot-kit-input-color: var(--copilot-kit-secondary-contrast-color);
+
+  /* The color of the separator between the input area and the messages area */
+  --copilot-kit-input-separator-color: var(--copilot-kit-separator-color);
+
+  /* The background color of the messages area */
+  --copilot-kit-messages-background-color: var(--copilot-kit-background-color);
+
+  /* The background color of a user message */
+  --copilot-kit-message-user-background-color: var(--copilot-kit-primary-color);
+  --copilot-kit-message-user-color: var(--copilot-kit-contrast-color);
+
+  /* The background color of a assistant message */
+  --copilot-kit-message-assistant-background-color: var(--copilot-kit-secondary-color);
+  --copilot-kit-message-assistant-color: var(--copilot-kit-secondary-contrast-color);
+
+  /* The color of the response control button */
+  --copilot-kit-response-button-border-color: var(--copilot-kit-separator-color);
+  --copilot-kit-response-button-color: #333;
+  --copilot-kit-response-button-background-color: #fff;
+}

package/src/css/header.css

@@ -0,0 +1,43 @@
+.copilotKitHeader {
+  height: 56px;
+  font-weight: 500;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: var(--copilot-kit-header-background-color);
+  color: var(--copilot-kit-header-title-color);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom: 1px solid var(--copilot-kit-header-separator-color);
+}
+
+.copilotKitSidebar .copilotKitHeader {
+  border-radius: 0;
+}
+
+@media (min-width: 640px) {
+  .copilotKitHeader {
+    padding-left: 24px;
+    padding-right: 24px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}
+
+.copilotKitHeader > button {
+  border: 0;
+  padding: 0px;
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+  outline: none;
+  color: var(--copilot-kit-header-close-button-color);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.copilotKitHeader > button:focus {
+  outline: none;
+}

package/src/css/input.css

@@ -0,0 +1,79 @@
+.copilotKitInput {
+  border-top: 1px solid var(--copilot-kit-input-separator-color);
+  padding-left: 2rem;
+  padding-right: 2.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  cursor: text;
+  position: relative;
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+  background-color: var(--copilot-kit-input-background-color);
+}
+
+.copilotKitInput > button {
+  position: absolute;
+  right: 0.5rem;
+  padding: 0.25rem;
+  cursor: pointer;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  transform: scale(1);
+  color: rgba(0, 0, 0, 0.25);
+  -webkit-appearance: button;
+  appearance: button;
+  background-color: transparent;
+  background-image: none;
+  text-transform: none;
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  border: 0;
+  margin: 0;
+  text-indent: 0px;
+  text-shadow: none;
+  display: inline-block;
+  text-align: center;
+}
+
+.copilotKitInput > button:not([disabled]) {
+  color: var(--copilot-kit-input-send-button-color);
+}
+
+.copilotKitInput > button:not([disabled]):hover {
+  transform: scale(1.1);
+}
+
+.copilotKitInput > button[disabled] {
+  color: var(--copilot-kit-input-send-button-disabled-color);
+}
+
+.copilotKitInput > textarea {
+  width: 100%;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  resize: none;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: text;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-weight: inherit;
+  color: var(--copilot-kit-input-color);
+  border: 0px;
+  background-color: var(--copilot-kit-input-background-color);
+}
+
+.copilotKitInput > textarea::placeholder {
+  color: var(--copilot-kit-input-placeholder-color);
+  opacity: 1;
+}