@copilotkit/react-ui 0.0.0-test-custom-tag-prerelease-1-20250108200215

package/src/components/chat/Suggestion.tsx

@@ -0,0 +1,125 @@
+import {
+  CopilotContextParams,
+  extract,
+  CopilotChatSuggestionConfiguration,
+  CopilotMessagesContextParams,
+} from "@copilotkit/react-core";
+import { SuggestionsProps } from "./props";
+import { SmallSpinnerIcon } from "./Icons";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+import { actionParametersToJsonSchema } from "@copilotkit/shared";
+import { CopilotRequestType } from "@copilotkit/runtime-client-gql";
+
+export function Suggestion({ title, message, onClick, partial, className }: SuggestionsProps) {
+  return (
+    <button
+      disabled={partial}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick(message);
+      }}
+      className={className || "suggestion"}
+    >
+      {partial && SmallSpinnerIcon}
+      <span>{title}</span>
+    </button>
+  );
+}
+
+export const reloadSuggestions = async (
+  context: CopilotContextParams & CopilotMessagesContextParams,
+  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration },
+  setCurrentSuggestions: (suggestions: { title: string; message: string }[]) => void,
+  abortControllerRef: React.MutableRefObject<AbortController | null>,
+) => {
+  const abortController = abortControllerRef.current;
+
+  const tools = JSON.stringify(
+    Object.values(context.actions).map((action) => ({
+      name: action.name,
+      description: action.description,
+      jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters)),
+    })),
+  );
+
+  const allSuggestions: CopilotChatSuggestion[] = [];
+
+  for (const config of Object.values(chatSuggestionConfiguration)) {
+    try {
+      const numOfSuggestionsInstructions =
+        config.minSuggestions === 0
+          ? `Produce up to ${config.maxSuggestions} suggestions. ` +
+            `If there are no highly relevant suggestions you can think of, provide an empty array.`
+          : `Produce between ${config.minSuggestions} and ${config.maxSuggestions} suggestions.`;
+
+      const result = await extract({
+        context,
+        instructions:
+          "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. ",
+        data:
+          config.instructions +
+          "\n\n" +
+          numOfSuggestionsInstructions +
+          "\n\n" +
+          "Available tools: " +
+          tools +
+          "\n\n",
+        requestType: CopilotRequestType.Task,
+        parameters: [
+          {
+            name: "suggestions",
+            type: "object[]",
+            attributes: [
+              {
+                name: "title",
+                description:
+                  "The title of the suggestion. This is shown as a button and should be short.",
+                type: "string",
+              },
+              {
+                name: "message",
+                description:
+                  "The message to send when the suggestion is clicked. This should be a clear, complete sentence and will be sent as an instruction to the AI.",
+                type: "string",
+              },
+            ],
+          },
+        ],
+        include: {
+          messages: true,
+          readable: true,
+        },
+        abortSignal: abortController?.signal,
+        stream: ({ status, args }) => {
+          const suggestions = args.suggestions || [];
+          const newSuggestions: CopilotChatSuggestion[] = [];
+          for (let i = 0; i < suggestions.length; i++) {
+            // if GPT provides too many suggestions, limit the number of suggestions
+            if (config.maxSuggestions !== undefined && i >= config.maxSuggestions) {
+              break;
+            }
+            const { title, message } = suggestions[i];
+
+            // If this is the last suggestion and the status is not complete, mark it as partial
+            const partial = i == suggestions.length - 1 && status !== "complete";
+
+            newSuggestions.push({
+              title,
+              message,
+              partial,
+              className: config.className,
+            });
+          }
+          setCurrentSuggestions([...allSuggestions, ...newSuggestions]);
+        },
+      });
+      allSuggestions.push(...result.suggestions);
+    } catch (error) {
+      console.error("Error loading suggestions", error);
+    }
+  }
+
+  if (abortControllerRef.current === abortController) {
+    abortControllerRef.current = null;
+  }
+};

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: "auto",
+          resize: "none",
+          maxHeight: `${maxHeight}px`,
+        }}
+        rows={1}
+      />
+    );
+  },
+);
+
+export default AutoResizingTextarea;

package/src/components/chat/Window.tsx

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect } from "react";
+import { WindowProps } from "./props";
+import { useChatContext } from "./ChatContext";
+
+export const Window = ({
+  children,
+  clickOutsideToClose,
+  shortcut,
+  hitEscapeToClose,
+}: WindowProps) => {
+  const windowRef = React.useRef<HTMLDivElement>(null);
+
+  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();
+  }
+};
+
+function isMacOS() {
+  return /Mac|iMac|Macintosh/i.test(navigator.userAgent);
+}

package/src/components/chat/index.tsx

@@ -0,0 +1,5 @@
+export * from "./props";
+export { CopilotPopup } from "./Popup";
+export { CopilotSidebar } from "./Sidebar";
+export { CopilotChat } from "./Chat";
+export { useChatContext } from "./ChatContext";

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

@@ -0,0 +1,101 @@
+import { MessageStatusCode } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { RenderFunctionStatus, useCopilotContext } from "@copilotkit/react-core";
+
+export function RenderActionExecutionMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage, actionResult } = props;
+  const { chatComponentsCache } = useCopilotContext();
+  const { icons } = useChatContext();
+
+  if (message.isActionExecutionMessage()) {
+    if (
+      chatComponentsCache.current !== null &&
+      (chatComponentsCache.current.actions[message.name] ||
+        chatComponentsCache.current.actions["*"])
+    ) {
+      const render =
+        chatComponentsCache.current.actions[message.name] ||
+        chatComponentsCache.current.actions["*"];
+      // render a static string
+      if (typeof render === "string") {
+        // when render is static, we show it only when in progress
+        if (isCurrentMessage && inProgress) {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
+            </div>
+          );
+        }
+        // Done - silent by default to avoid a series of "done" messages
+        else {
+          return null;
+        }
+      }
+      // render is a function
+      else {
+        const args = message.arguments;
+
+        let status: RenderFunctionStatus = "inProgress";
+
+        if (actionResult !== undefined) {
+          status = "complete";
+        } else if (message.status.code !== MessageStatusCode.Pending) {
+          status = "executing";
+        }
+
+        try {
+          const toRender = render({
+            status: status as any,
+            args,
+            result: actionResult,
+            name: message.name,
+          });
+          // No result and complete: stay silent
+          if (!toRender && status === "complete") {
+            return null;
+          }
+          if (typeof toRender === "string") {
+            return (
+              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}
+              </div>
+            );
+          } else {
+            return (
+              <div
+                key={index}
+                data-message-type="action-render"
+                className="copilotKitCustomAssistantMessage"
+              >
+                {toRender}
+              </div>
+            );
+          }
+        } catch (e) {
+          console.error(`Error executing render function for action ${message.name}: ${e}`);
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {isCurrentMessage && inProgress && icons.spinnerIcon}
+              <b>❌ Error executing render: {message.name}</b>
+              <br />
+              {e instanceof Error ? e.message : String(e)}
+            </div>
+          );
+        }
+      }
+    }
+    // No render function found- show the default message
+    else if (!inProgress || !isCurrentMessage) {
+      // Done - silent by default to avoid a series of "done" messages
+      return null;
+    } else {
+      // In progress
+      return (
+        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+          {icons.spinnerIcon}
+        </div>
+      );
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+import { AgentStateMessage } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { CoagentInChatRenderFunction, useCopilotContext } from "@copilotkit/react-core";
+
+export function RenderAgentStateMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { chatComponentsCache } = useCopilotContext();
+  const { icons } = useChatContext();
+
+  if (message.isAgentStateMessage()) {
+    let render: string | CoagentInChatRenderFunction | undefined;
+
+    if (chatComponentsCache.current !== null) {
+      render =
+        chatComponentsCache.current.coAgentStateRenders[
+          `${message.agentName}-${message.nodeName}`
+        ] || chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-global`];
+    }
+
+    if (render) {
+      // render a static string
+      if (typeof render === "string") {
+        // when render is static, we show it only when in progress
+        if (isCurrentMessage && inProgress) {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
+            </div>
+          );
+        }
+        // Done - silent by default to avoid a series of "done" messages
+        else {
+          return null;
+        }
+      }
+      // render is a function
+      else {
+        const state = message.state;
+
+        let status = message.active ? "inProgress" : "complete";
+
+        const toRender = render({
+          status: status as any,
+          state,
+          nodeName: message.nodeName,
+        });
+
+        // No result and complete: stay silent
+        if (!toRender && status === "complete") {
+          return null;
+        }
+
+        if (!toRender && isCurrentMessage && inProgress) {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {icons.spinnerIcon}
+            </div>
+          );
+        } else if (!toRender) {
+          return null;
+        }
+
+        if (typeof toRender === "string") {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}
+            </div>
+          );
+        } else {
+          return (
+            <div key={index} className="copilotKitCustomAssistantMessage">
+              {toRender}
+            </div>
+          );
+        }
+      }
+    }
+    // No render function found- show the default message
+    else if (!inProgress || !isCurrentMessage) {
+      // Done - silent by default to avoid a series of "done" messages
+      return null;
+    } else {
+      // In progress
+      return (
+        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+          {icons.spinnerIcon}
+        </div>
+      );
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { ResultMessage } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+
+export function RenderResultMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { icons } = useChatContext();
+  if (message.isResultMessage() && inProgress && isCurrentMessage) {
+    return (
+      <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+        {icons.spinnerIcon}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,36 @@
+import { TextMessage } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { Markdown } from "../Markdown";
+import { useChatContext } from "../ChatContext";
+
+export function RenderTextMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { icons } = useChatContext();
+  if (message.isTextMessage()) {
+    if (message.role === "user") {
+      return (
+        <div
+          key={index}
+          data-message-role="user"
+          className="copilotKitMessage copilotKitUserMessage"
+        >
+          {message.content}
+        </div>
+      );
+    } else if (message.role == "assistant") {
+      return (
+        <div
+          key={index}
+          data-message-role="assistant"
+          className={`copilotKitMessage copilotKitAssistantMessage`}
+        >
+          {isCurrentMessage && inProgress && !message.content ? (
+            icons.spinnerIcon
+          ) : (
+            <Markdown content={message.content} />
+          )}
+        </div>
+      );
+    }
+  }
+}

package/src/components/chat/props.ts

@@ -0,0 +1,49 @@
+import { Message } from "@copilotkit/runtime-client-gql";
+
+export interface ButtonProps {}
+
+export interface WindowProps {
+  clickOutsideToClose: boolean;
+  hitEscapeToClose: boolean;
+  shortcut: string;
+  children?: React.ReactNode;
+}
+
+export interface HeaderProps {}
+
+export interface SuggestionsProps {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+  onClick: (message: string) => void;
+}
+
+export interface MessagesProps {
+  messages: Message[];
+  inProgress: boolean;
+  children?: React.ReactNode;
+  RenderTextMessage: React.ComponentType<RenderMessageProps>;
+  RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;
+  RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;
+  RenderResultMessage: React.ComponentType<RenderMessageProps>;
+}
+
+export interface RenderMessageProps {
+  message: Message;
+  inProgress: boolean;
+  index: number;
+  isCurrentMessage: boolean;
+  actionResult?: string;
+}
+
+export interface InputProps {
+  inProgress: boolean;
+  onSend: (text: string) => Promise<Message>;
+  isVisible?: boolean;
+}
+
+export interface ResponseButtonProps {
+  onClick: () => void;
+  inProgress: boolean;
+}