@copilotkit/react-ui 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

package/src/components/chat/Textarea.tsx

@@ -0,0 +1,77 @@
+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;
+  onCompositionStart?: () => void;
+  onCompositionEnd?: () => void;
+  autoFocus?: boolean;
+}
+
+const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(
+  (
+    {
+      maxRows = 1,
+      placeholder,
+      value,
+      onChange,
+      onKeyDown,
+      onCompositionStart,
+      onCompositionEnd,
+      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}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
+        placeholder={placeholder}
+        style={{
+          overflow: "auto",
+          resize: "none",
+          maxHeight: `${maxHeight}px`,
+        }}
+        rows={1}
+      />
+    );
+  },
+);
+
+export default AutoResizingTextarea;

package/src/components/chat/Window.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useEffect } from "react";
+import { WindowProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import { useCopilotContext } from "@copilotkit/react-core";
+import { isMacOS } from "@copilotkit/shared";
+
+export const Window = ({
+  children,
+  clickOutsideToClose,
+  shortcut,
+  hitEscapeToClose,
+}: WindowProps) => {
+  const windowRef = React.useRef<HTMLDivElement>(null);
+  const context = useCopilotContext();
+
+  const { open, setOpen } = useChatContext();
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (!clickOutsideToClose) {
+        return;
+      }
+
+      const parentElement = windowRef.current?.parentElement;
+
+      let className = "";
+      if (event.target instanceof HTMLElement) {
+        className = event.target.className;
+      }
+
+      if (
+        open &&
+        parentElement &&
+        !parentElement.contains(event.target as any) &&
+        // prevent closing the window when clicking on the debug menu
+        !className.includes("copilotKitDebugMenu")
+      ) {
+        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 === shortcut &&
+        ((isMacOS() && event.metaKey) || (!isMacOS() && event.ctrlKey)) &&
+        (!isInput || isDescendantOfWrapper)
+      ) {
+        setOpen(!open);
+      }
+    },
+    [hitEscapeToClose, shortcut, 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();
+  }
+};

package/src/components/chat/index.tsx

@@ -0,0 +1,11 @@
+export * from "./props";
+export { CopilotPopup } from "./Popup";
+export { CopilotSidebar } from "./Sidebar";
+export { CopilotChat } from "./Chat";
+export { Markdown } from "./Markdown";
+export { AssistantMessage } from "./messages/AssistantMessage";
+export { UserMessage } from "./messages/UserMessage";
+export { ImageRenderer } from "./messages/ImageRenderer";
+export { useChatContext } from "./ChatContext";
+export { Suggestions as RenderSuggestionsList } from "./Suggestions";
+export { Suggestion as RenderSuggestion } from "./Suggestion";

package/src/components/chat/messages/AssistantMessage.tsx

@@ -0,0 +1,118 @@
+import { AssistantMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { Markdown } from "../Markdown";
+import { useState } from "react";
+import React from "react";
+
+export const AssistantMessage = (props: AssistantMessageProps) => {
+  const { icons, labels } = useChatContext();
+  const {
+    message,
+    isLoading,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    isCurrentMessage,
+    feedback,
+    markdownTagRenderers,
+  } = props;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    const content = message?.content || "";
+    if (content && onCopy) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      onCopy(content);
+      setTimeout(() => setCopied(false), 2000);
+    } else if (content) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleRegenerate = () => {
+    if (onRegenerate) onRegenerate();
+  };
+
+  const handleThumbsUp = () => {
+    if (onThumbsUp && message) {
+      onThumbsUp(message);
+    }
+  };
+
+  const handleThumbsDown = () => {
+    if (onThumbsDown && message) {
+      onThumbsDown(message);
+    }
+  };
+
+  const LoadingIcon = () => <span>{icons.activityIcon}</span>;
+  const content = message?.content || "";
+  const subComponent = message?.generativeUI?.();
+
+  return (
+    <>
+      {content && (
+        <div className="copilotKitMessage copilotKitAssistantMessage">
+          {content && <Markdown content={content} components={markdownTagRenderers} />}
+
+          {content && !isLoading && (
+            <div
+              className={`copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`}
+            >
+              <button
+                className="copilotKitMessageControlButton"
+                onClick={handleRegenerate}
+                aria-label={labels.regenerateResponse}
+                title={labels.regenerateResponse}
+              >
+                {icons.regenerateIcon}
+              </button>
+              <button
+                className="copilotKitMessageControlButton"
+                onClick={handleCopy}
+                aria-label={labels.copyToClipboard}
+                title={labels.copyToClipboard}
+              >
+                {copied ? (
+                  <span style={{ fontSize: "10px", fontWeight: "bold" }}>✓</span>
+                ) : (
+                  icons.copyIcon
+                )}
+              </button>
+              {onThumbsUp && (
+                <button
+                  className={`copilotKitMessageControlButton ${
+                    feedback === "thumbsUp" ? "active" : ""
+                  }`}
+                  onClick={handleThumbsUp}
+                  aria-label={labels.thumbsUp}
+                  title={labels.thumbsUp}
+                >
+                  {icons.thumbsUpIcon}
+                </button>
+              )}
+              {onThumbsDown && (
+                <button
+                  className={`copilotKitMessageControlButton ${
+                    feedback === "thumbsDown" ? "active" : ""
+                  }`}
+                  onClick={handleThumbsDown}
+                  aria-label={labels.thumbsDown}
+                  title={labels.thumbsDown}
+                >
+                  {icons.thumbsDownIcon}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>
+      {isLoading && <LoadingIcon />}
+    </>
+  );
+};

package/src/components/chat/messages/ErrorMessage.tsx

@@ -0,0 +1,59 @@
+import { ErrorMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { Markdown } from "../Markdown";
+import { useState } from "react";
+
+export const ErrorMessage = (props: ErrorMessageProps) => {
+  const { icons, labels } = useChatContext();
+  const { error, onRegenerate, onCopy, isCurrentMessage } = props;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    const content = error.message;
+    if (content && onCopy) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      onCopy(content);
+      setTimeout(() => setCopied(false), 2000);
+    } else if (content) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleRegenerate = () => {
+    if (onRegenerate) onRegenerate();
+  };
+
+  console.log(error);
+
+  return (
+    <div className="copilotKitMessage copilotKitAssistantMessage">
+      <Markdown content={error.message} />
+
+      <div className={`copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`}>
+        <button
+          className="copilotKitMessageControlButton"
+          onClick={handleRegenerate}
+          aria-label={labels.regenerateResponse}
+          title={labels.regenerateResponse}
+        >
+          {icons.regenerateIcon}
+        </button>
+        <button
+          className="copilotKitMessageControlButton"
+          onClick={handleCopy}
+          aria-label={labels.copyToClipboard}
+          title={labels.copyToClipboard}
+        >
+          {copied ? (
+            <span style={{ fontSize: "10px", fontWeight: "bold" }}>✓</span>
+          ) : (
+            icons.copyIcon
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/chat/messages/ImageRenderer.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { ImageRendererProps } from "../props";
+
+/**
+ * Default image rendering component that can be customized by users.
+ * Uses CSS classes for styling so users can override styles.
+ */
+export const ImageRenderer: React.FC<ImageRendererProps> = ({ image, content, className = "" }) => {
+  const [imageError, setImageError] = useState(false);
+  const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
+  const altText = content || "User uploaded image";
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  if (imageError) {
+    return (
+      <div className={`copilotKitImageRendering copilotKitImageRenderingError ${className}`}>
+        <div className="copilotKitImageRenderingErrorMessage">Failed to load image</div>
+        {content && <div className="copilotKitImageRenderingContent">{content}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`copilotKitImageRendering ${className}`}>
+      <img
+        src={imageSrc}
+        alt={altText}
+        className="copilotKitImageRenderingImage"
+        onError={handleImageError}
+      />
+      {content && <div className="copilotKitImageRenderingContent">{content}</div>}
+    </div>
+  );
+};

package/src/components/chat/messages/LegacyRenderMessage.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import { RenderMessageProps } from "../props";
+import { RenderMessage as DefaultRenderMessage } from "./RenderMessage";
+import { aguiToGQL } from "@copilotkit/runtime-client-gql";
+
+/**
+ * Legacy message render props interface for backwards compatibility
+ */
+export interface LegacyRenderProps {
+  RenderTextMessage?: React.ComponentType<RenderMessageProps>;
+  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;
+  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;
+  RenderResultMessage?: React.ComponentType<RenderMessageProps>;
+  RenderImageMessage?: React.ComponentType<RenderMessageProps>;
+}
+
+/**
+ * Props for the LegacyRenderMessage component
+ */
+export interface LegacyRenderMessageProps extends RenderMessageProps {
+  legacyProps: LegacyRenderProps;
+}
+
+/**
+ * Legacy message adapter component that maps old render props to new message types.
+ * This component provides backwards compatibility for the deprecated render props.
+ */
+export const LegacyRenderMessage: React.FC<LegacyRenderMessageProps> = ({
+  message,
+  messages,
+  inProgress,
+  index,
+  isCurrentMessage,
+  actionResult,
+  AssistantMessage,
+  UserMessage,
+  ImageRenderer,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  markdownTagRenderers,
+  legacyProps,
+}) => {
+  const {
+    RenderTextMessage,
+    RenderActionExecutionMessage,
+    RenderAgentStateMessage,
+    RenderResultMessage,
+    RenderImageMessage,
+  } = legacyProps;
+
+  const deprecatedMessage = aguiToGQL(message)[0] ?? undefined;
+
+  // Route to appropriate legacy renderer based on message type
+  if (deprecatedMessage.isTextMessage() && RenderTextMessage) {
+    return (
+      <RenderTextMessage
+        message={message}
+        messages={messages}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+        onRegenerate={onRegenerate}
+        onCopy={onCopy}
+        onThumbsUp={onThumbsUp}
+        onThumbsDown={onThumbsDown}
+        markdownTagRenderers={markdownTagRenderers}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isActionExecutionMessage() && RenderActionExecutionMessage) {
+    return (
+      <RenderActionExecutionMessage
+        messages={messages}
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        actionResult={actionResult}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isAgentStateMessage() && RenderAgentStateMessage) {
+    return (
+      <RenderAgentStateMessage
+        messages={messages}
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isResultMessage() && RenderResultMessage) {
+    return (
+      <RenderResultMessage
+        messages={messages}
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isImageMessage() && RenderImageMessage) {
+    return (
+      <RenderImageMessage
+        messages={messages}
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  // Fallback to default RenderMessage for any unhandled cases
+  return (
+    <DefaultRenderMessage
+      messages={messages}
+      message={message}
+      inProgress={inProgress}
+      index={index}
+      isCurrentMessage={isCurrentMessage}
+      AssistantMessage={AssistantMessage}
+      UserMessage={UserMessage}
+      ImageRenderer={ImageRenderer}
+      onRegenerate={onRegenerate}
+      onCopy={onCopy}
+      onThumbsUp={onThumbsUp}
+      onThumbsDown={onThumbsDown}
+      markdownTagRenderers={markdownTagRenderers}
+    />
+  );
+};

package/src/components/chat/messages/RenderMessage.tsx

@@ -0,0 +1,61 @@
+import { RenderMessageProps } from "../props";
+import { UserMessage as DefaultUserMessage } from "./UserMessage";
+import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+import { ImageRenderer as DefaultImageRenderer } from "./ImageRenderer";
+
+export function RenderMessage({
+  UserMessage = DefaultUserMessage,
+  AssistantMessage = DefaultAssistantMessage,
+  ImageRenderer = DefaultImageRenderer,
+  ...props
+}: RenderMessageProps) {
+  const {
+    message,
+    messages,
+    inProgress,
+    index,
+    isCurrentMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    messageFeedback,
+    markdownTagRenderers,
+  } = props;
+
+  switch (message.role) {
+    case "user":
+      return (
+        <UserMessage
+          key={index}
+          rawData={message}
+          data-message-role="user"
+          message={message}
+          ImageRenderer={ImageRenderer}
+        />
+      );
+    case "assistant":
+      return (
+        <AssistantMessage
+          key={index}
+          data-message-role="assistant"
+          subComponent={message.generativeUI?.()}
+          rawData={message}
+          message={message}
+          messages={messages}
+          isLoading={inProgress && isCurrentMessage && !message.content}
+          isGenerating={inProgress && isCurrentMessage && !!message.content}
+          isCurrentMessage={isCurrentMessage}
+          onRegenerate={() => onRegenerate?.(message.id)}
+          onCopy={onCopy}
+          onThumbsUp={onThumbsUp}
+          onThumbsDown={onThumbsDown}
+          feedback={messageFeedback?.[message.id] || null}
+          markdownTagRenderers={markdownTagRenderers}
+          ImageRenderer={ImageRenderer}
+        />
+      );
+    default:
+      return null;
+  }
+}