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

package/src/components/chat/Response.tsx

@@ -0,0 +1,12 @@
+import { useChatContext } from "./ChatContext";
+import { ResponseButtonProps } from "./props";
+
+export const ResponseButton = ({ onClick, inProgress }: ResponseButtonProps) => {
+  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 { CopilotChat, CopilotChatProps } from "./Chat";
+
+interface CopilotSidebarProps extends CopilotChatProps {
+  children?: React.ReactNode;
+}
+
+export const CopilotSidebar = (props: CopilotSidebarProps) => {
+  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}
+      <CopilotChat {...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 { CopilotPopup } from "./Popup";
+export { CopilotSidebar } from "./Sidebar";

package/src/components/chat/props.ts

@@ -0,0 +1,36 @@
+import { Message } from "@copilotkit/shared";
+
+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

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

package/src/css/animations.css

@@ -0,0 +1,35 @@
+.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);
+  }
+}
+
+@keyframes copilotKitPulseAnimation {
+  50% {
+    opacity: 0.5;
+  }
+}

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

package/src/css/markdown.css

@@ -0,0 +1,123 @@
+.copilotKitMarkdown h1,
+.copilotKitMarkdown h2,
+.copilotKitMarkdown h3,
+.copilotKitMarkdown h4,
+.copilotKitMarkdown h5,
+.copilotKitMarkdown h6 {
+  font-weight: bold;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+.copilotKitMarkdown h1 {
+  font-size: 1.5em;
+}
+
+.copilotKitMarkdown h2 {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+.copilotKitMarkdown h3 {
+  font-size: 1.1em;
+}
+
+.copilotKitMarkdown h4 {
+  font-size: 1em;
+}
+
+.copilotKitMarkdown h5 {
+  font-size: 0.9em;
+}
+
+.copilotKitMarkdown h6 {
+  font-size: 0.8em;
+}
+
+.copilotKitMarkdown p {
+  margin-bottom: 1.25em;
+}
+
+.copilotKitMarkdown pre {
+  margin-bottom: 1.25em;
+}
+
+.copilotKitMarkdown blockquote {
+  border-color: rgb(142, 142, 160);
+  border-left-width: 2px;
+  border-left-style: solid;
+  line-height: 1.2;
+  padding-left: 10px;
+}
+
+.copilotKitMarkdown blockquote p {
+  padding: 0.7em 0;
+}
+
+.copilotKitMarkdown ul {
+  list-style-type: disc;
+  padding-left: 20px;
+  overflow: visible;
+}
+
+.copilotKitMarkdown li {
+  list-style-type: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  padding-left: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.copilotKitCodeBlock {
+  position: relative;
+  width: 100%;
+  background-color: rgb(9 9 11);
+  border-radius: 0.375rem;
+}
+
+.copilotKitCodeBlockToolbar {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgb(39 39 42);
+  padding-left: 1rem;
+  padding-top: 0.09rem;
+  padding-bottom: 0.09rem;
+  color: rgb(228, 228, 228);
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+  font-family: sans-serif;
+}
+
+.copilotKitCodeBlockToolbarLanguage {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-transform: lowercase;
+}
+
+.copilotKitCodeBlockToolbarButtons {
+  display: flex;
+  align-items: center;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+.copilotKitCodeBlockToolbarButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 3px;
+  margin: 2px;
+}
+
+.copilotKitCodeBlockToolbarButton:hover {
+  background-color: rgb(55, 55, 58);
+}