@copilotkit/react-ui 0.0.0-feat-dynamic-copilotcloud-qa-20250117190454

package/src/components/chat/Icons.tsx

@@ -0,0 +1,223 @@
+import React from "react";
+
+export const OpenIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width="24"
+    height="24"
+  >
+    <g transform="translate(24, 0) scale(-1, 1)">
+      <path
+        fillRule="evenodd"
+        d="M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+
+export const CloseIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+export const HeaderCloseIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+export const SendIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+    />
+  </svg>
+);
+
+export const SpinnerIcon = (
+  <svg
+    style={{
+      animation: "copilotKitSpinAnimation 1s linear infinite",
+      color: "rgb(107 114 128)",
+    }}
+    width="24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      style={{ opacity: 0.25 }}
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      style={{ opacity: 0.75 }}
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+);
+
+export const SmallSpinnerIcon = (
+  <svg
+    style={{
+      animation: "copilotKitSpinAnimation 1s linear infinite",
+    }}
+    width="13"
+    height="13"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      style={{ opacity: 0.25 }}
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      style={{ opacity: 0.75 }}
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+);
+
+export const ActivityIcon = (
+  <svg
+    style={{
+      display: "inline-block",
+      marginLeft: "0.25rem",
+      marginRight: "0.25rem",
+    }}
+    height="24"
+    width="24"
+    viewBox="0 0 27 27"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <circle className="copilotKitActivityDot1" cx="4" cy="12" r="3" />
+    <circle className="copilotKitActivityDot1 copilotKitActivityDot2" cx="12" cy="12" r="3" />
+    <circle className="copilotKitActivityDot1 copilotKitActivityDot3" cx="20" cy="12" r="3" />
+  </svg>
+);
+
+export function CheckIcon({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      style={{ height: "1rem", width: "1rem" }}
+      className={className}
+      {...props}
+    >
+      <path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
+    </svg>
+  );
+}
+
+export function DownloadIcon({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      style={{ height: "1rem", width: "1rem" }}
+      className={className}
+      {...props}
+    >
+      <path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
+    </svg>
+  );
+}
+
+export function CopyIcon({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      style={{ height: "1rem", width: "1rem" }}
+      className={className}
+      {...props}
+    >
+      <path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
+    </svg>
+  );
+}
+
+export const StopIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 256 256"
+    fill="currentColor"
+    style={{ height: "1rem", width: "1rem" }}
+  >
+    <path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
+  </svg>
+);
+
+export const RegenerateIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 256 256"
+    fill="currentColor"
+    style={{ height: "1rem", width: "1rem" }}
+  >
+    <path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
+  </svg>
+);
+
+export const PushToTalkIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
+    />
+  </svg>
+);

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,188 @@
+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,
+  AssistantMessage,
+  UserMessage,
+}: 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}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+            />
+          );
+        } else if (message.isActionExecutionMessage()) {
+          return (
+            <RenderActionExecutionMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              actionResult={actionResults[message.id]}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+            />
+          );
+        } else if (message.isAgentStateMessage()) {
+          return (
+            <RenderAgentStateMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+            />
+          );
+        } else if (message.isResultMessage()) {
+          return (
+            <RenderResultMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+            />
+          );
+        }
+      })}
+      <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 };
+}