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

package/src/components/chat/Input.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef, useState } from "react";
+import { InputProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import AutoResizingTextarea from "./Textarea";
+import { usePushToTalk } from "../../hooks/use-push-to-talk";
+import { useCopilotContext } from "@copilotkit/react-core";
+
+export const Input = ({ inProgress, onSend, isVisible = false }: InputProps) => {
+  const context = useChatContext();
+  const copilotContext = useCopilotContext();
+
+  const pushToTalkConfigured =
+    copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&
+    copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;
+
+  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();
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      textareaRef.current?.focus();
+    }
+  }, [isVisible]);
+
+  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
+    sendFunction: onSend,
+    inProgress,
+  });
+
+  const sendIcon =
+    inProgress || pushToTalkState === "transcribing"
+      ? context.icons.activityIcon
+      : context.icons.sendIcon;
+  const showPushToTalk =
+    pushToTalkConfigured &&
+    (pushToTalkState === "idle" || pushToTalkState === "recording") &&
+    !inProgress;
+
+  const canSend = () => {
+    return !inProgress && text.trim().length > 0 && pushToTalkState === "idle";
+  };
+
+  const sendDisabled = !canSend();
+
+  return (
+    <div className="copilotKitInput" onClick={handleDivClick}>
+      <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();
+            if (canSend()) {
+              send();
+            }
+          }
+        }}
+      />
+      <div className="copilotKitInputControls">
+        {showPushToTalk && (
+          <button
+            onClick={() =>
+              setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing")
+            }
+            className={pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : ""}
+          >
+            {context.icons.pushToTalkIcon}
+          </button>
+        )}
+        <button
+          disabled={sendDisabled}
+          onClick={send}
+          data-copilotkit-in-progress={!!inProgress}
+          data-testid={inProgress ? "copilot-chat-request-in-progress" : undefined}
+        >
+          {sendIcon}
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/chat/Markdown.tsx

@@ -0,0 +1,80 @@
+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>;
+  },
+  a({ children, ...props }) {
+    return (
+      <a
+        style={{ color: "blue", textDecoration: "underline" }}
+        {...props}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {children}
+      </a>
+    );
+  },
+  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,178 @@
+import { useEffect, useMemo, useRef } from "react";
+import { MessagesProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import { Message, ResultMessage, TextMessage, Role } from "@copilotkit/runtime-client-gql";
+
+export const Messages = ({
+  messages,
+  inProgress,
+  children,
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+}: MessagesProps) => {
+  const context = useChatContext();
+  const initialMessages = useMemo(
+    () => makeInitialMessages(context.labels.initial),
+    [context.labels.initial],
+  );
+  messages = [...initialMessages, ...messages];
+
+  const actionResults: Record<string, string> = {};
+
+  for (let i = 0; i < messages.length; i++) {
+    if (messages[i].isActionExecutionMessage()) {
+      const id = messages[i].id;
+      const resultMessage: ResultMessage | undefined = messages.find(
+        (message) => message.isResultMessage() && message.actionExecutionId === id,
+      ) as ResultMessage | undefined;
+
+      if (resultMessage) {
+        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || "");
+      }
+    }
+  }
+
+  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
+
+  return (
+    <div className="copilotKitMessages" ref={messagesContainerRef}>
+      {messages.map((message, index) => {
+        const isCurrentMessage = index === messages.length - 1;
+
+        if (message.isTextMessage()) {
+          return (
+            <RenderTextMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+            />
+          );
+        } else if (message.isActionExecutionMessage()) {
+          return (
+            <RenderActionExecutionMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              actionResult={actionResults[message.id]}
+            />
+          );
+        } else if (message.isAgentStateMessage()) {
+          return (
+            <RenderAgentStateMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+            />
+          );
+        } else if (message.isResultMessage()) {
+          return (
+            <RenderResultMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+            />
+          );
+        }
+      })}
+      <footer ref={messagesEndRef}>{children}</footer>
+    </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) =>
+      new TextMessage({
+        role: Role.Assistant,
+        content: message,
+      }),
+  );
+}
+export function useScrollToBottom(messages: any[]) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement | null>(null);
+  const isProgrammaticScrollRef = useRef(false);
+  const isUserScrollUpRef = useRef(false);
+
+  const scrollToBottom = () => {
+    if (messagesEndRef.current) {
+      isProgrammaticScrollRef.current = true;
+      messagesEndRef.current.scrollIntoView({
+        behavior: "auto",
+      });
+    }
+  };
+
+  const handleScroll = () => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
+    }
+  };
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const mutationObserver = new MutationObserver(() => {
+      if (!isUserScrollUpRef.current) {
+        scrollToBottom();
+      }
+    });
+
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    isUserScrollUpRef.current = false;
+    scrollToBottom();
+  }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);
+
+  return { messagesEndRef, messagesContainerRef };
+}

package/src/components/chat/Modal.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { ChatContextProvider } from "./ChatContext";
+import { ButtonProps, HeaderProps, WindowProps } from "./props";
+import { Window as DefaultWindow } from "./Window";
+import { Button as DefaultButton } from "./Button";
+import { Header as DefaultHeader } from "./Header";
+import { Messages as DefaultMessages } from "./Messages";
+import { Input as DefaultInput } from "./Input";
+import { ResponseButton as DefaultResponseButton } from "./Response";
+import { CopilotChat, CopilotChatProps } from "./Chat";
+
+export interface CopilotModalProps extends CopilotChatProps {
+  /**
+   * Whether the chat window should be open by default.
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * If the chat window should close when the user clicks outside of it.
+   * @default true
+   */
+  clickOutsideToClose?: boolean;
+
+  /**
+   * If the chat window should close when the user hits the Escape key.
+   * @default true
+   */
+  hitEscapeToClose?: boolean;
+
+  /**
+   * The shortcut key to open the chat window.
+   * Uses Command-[shortcut] on a Mac and Ctrl-[shortcut] on Windows.
+   * @default '/'
+   */
+  shortcut?: string;
+
+  /**
+   * A callback that gets called when the chat window opens or closes.
+   */
+  onSetOpen?: (open: boolean) => void;
+
+  /**
+   * A custom Window component to use instead of the default.
+   */
+  Window?: React.ComponentType<WindowProps>;
+
+  /**
+   * A custom Button component to use instead of the default.
+   */
+  Button?: React.ComponentType<ButtonProps>;
+
+  /**
+   * A custom Header component to use instead of the default.
+   */
+  Header?: React.ComponentType<HeaderProps>;
+}
+
+export const CopilotModal = ({
+  instructions,
+  defaultOpen = false,
+  clickOutsideToClose = true,
+  hitEscapeToClose = true,
+  onSetOpen,
+  onSubmitMessage,
+  onStopGeneration,
+  onReloadMessages,
+  shortcut = "/",
+  icons,
+  labels,
+  makeSystemMessage,
+  showResponseButton = true,
+  onInProgress,
+  Window = DefaultWindow,
+  Button = DefaultButton,
+  Header = DefaultHeader,
+  Messages = DefaultMessages,
+  Input = DefaultInput,
+  ResponseButton = DefaultResponseButton,
+  className,
+  children,
+}: CopilotModalProps) => {
+  const [openState, setOpenState] = React.useState(defaultOpen);
+
+  const setOpen = (open: boolean) => {
+    onSetOpen?.(open);
+    setOpenState(open);
+  };
+
+  return (
+    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpen}>
+      {children}
+      <div className={className}>
+        <Button></Button>
+        <Window
+          clickOutsideToClose={clickOutsideToClose}
+          shortcut={shortcut}
+          hitEscapeToClose={hitEscapeToClose}
+        >
+          <Header />
+          <CopilotChat
+            instructions={instructions}
+            onSubmitMessage={onSubmitMessage}
+            onStopGeneration={onStopGeneration}
+            onReloadMessages={onReloadMessages}
+            makeSystemMessage={makeSystemMessage}
+            showResponseButton={showResponseButton}
+            onInProgress={onInProgress}
+            Messages={Messages}
+            Input={Input}
+            ResponseButton={ResponseButton}
+          />
+        </Window>
+      </div>
+    </ChatContextProvider>
+  );
+};

package/src/components/chat/Popup.tsx

@@ -0,0 +1,57 @@
+/**
+ * <br/>
+ * <img src="/images/CopilotPopup.gif" width="500" />
+ *
+ * A chatbot popup component for the CopilotKit framework. The component allows for a high degree
+ * of customization through various props and custom CSS.
+ *
+ * See [CopilotSidebar](/reference/components/chat/CopilotSidebar) for a sidebar version of this component.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ * ## Usage
+ *
+ * ```tsx
+ * import { CopilotPopup } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * <CopilotPopup
+ *   labels={{
+ *     title: "Your Assistant",
+ *     initial: "Hi! 👋 How can I assist you today?",
+ *   }}
+ * />
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+ */
+
+import { CopilotModal, CopilotModalProps } from "./Modal";
+
+export function CopilotPopup(props: CopilotModalProps) {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
+  };
+  return <CopilotModal {...props}>{props.children}</CopilotModal>;
+}

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,74 @@
+/**
+ * <br/>
+ * <img src="/images/CopilotSidebar.gif" width="500" />
+ *
+ * A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.
+ *
+ * See [CopilotPopup](/reference/components/chat/CopilotPopup) for a popup version of this component.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { CopilotSidebar } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * <CopilotSidebar
+ *   labels={{
+ *     title: "Your Assistant",
+ *     initial: "Hi! 👋 How can I assist you today?",
+ *   }}
+ * >
+ *   <YourApp/>
+ * </CopilotSidebar>
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+ */
+import React, { useState } from "react";
+import { CopilotModal, CopilotModalProps } from "./Modal";
+
+export function CopilotSidebar(props: CopilotModalProps) {
+  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}`}>
+      <CopilotModal {...props} {...{ onSetOpen }}>
+        {props.children}
+      </CopilotModal>
+    </div>
+  );
+}