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

package/src/components/chat/Icons.tsx

@@ -0,0 +1,237 @@
+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="M12 19V5m0 0l-7 7m7-7l7 7" />
+  </svg>
+);
+
+export const MicrophoneIcon = (
+  <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="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
+    />
+  </svg>
+);
+
+export const StopIcon = (
+  <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="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+    />
+  </svg>
+);
+
+export const RegenerateIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
+  </svg>
+);
+
+export const CopyIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
+    />
+  </svg>
+);
+
+export const SmallSpinnerIcon = (
+  <span className="copilotKitSpinner" style={{ width: "13px", height: "13px" }}></span>
+);
+
+export const SpinnerIcon = (
+  <span className="copilotKitSpinner" style={{ width: "24px", height: "24px" }}></span>
+);
+
+export const ActivityIcon = (
+  <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+    <span className="copilotKitActivityDot" style={{ animationDelay: "0s" }}></span>
+    <span className="copilotKitActivityDot" style={{ animationDelay: "0.2s" }}></span>
+    <span className="copilotKitActivityDot" style={{ animationDelay: "0.4s" }}></span>
+  </div>
+);
+
+export const ThumbsUpIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
+    />
+  </svg>
+);
+
+export const ThumbsDownIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"
+    />
+  </svg>
+);
+
+export const DownloadIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+    />
+  </svg>
+);
+
+export const UploadIcon = (
+  <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="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+);
+
+export const CheckIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+);

package/src/components/chat/ImageUploadQueue.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+interface ImageUploadQueueProps {
+  images: Array<{ contentType: string; bytes: string }>;
+  onRemoveImage: (index: number) => void;
+  className?: string;
+}
+
+export const ImageUploadQueue: React.FC<ImageUploadQueueProps> = ({
+  images,
+  onRemoveImage,
+  className = "",
+}) => {
+  if (images.length === 0) return null;
+
+  return (
+    <div
+      className={`copilotKitImageUploadQueue ${className}`}
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px",
+        margin: "8px",
+        padding: "8px",
+      }}
+    >
+      {images.map((image, index) => (
+        <div
+          key={index}
+          className="copilotKitImageUploadQueueItem"
+          style={{
+            position: "relative",
+            display: "inline-block",
+            width: "60px",
+            height: "60px",
+            borderRadius: "4px",
+            overflow: "hidden",
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`data:${image.contentType};base64,${image.bytes}`}
+            alt={`Selected image ${index + 1}`}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+          />
+          <button
+            onClick={() => onRemoveImage(index)}
+            className="copilotKitImageUploadQueueRemoveButton"
+            style={{
+              position: "absolute",
+              top: "2px",
+              right: "2px",
+              background: "rgba(0,0,0,0.6)",
+              color: "white",
+              border: "none",
+              borderRadius: "50%",
+              width: "18px",
+              height: "18px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              fontSize: "10px",
+              padding: 0,
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/chat/Input.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo, 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, useCopilotChatInternal } from "@copilotkit/react-core";
+import { PoweredByTag } from "./PoweredByTag";
+
+const MAX_NEWLINES = 6;
+
+export const Input = ({
+  inProgress,
+  onSend,
+  chatReady = false,
+  onStop,
+  onUpload,
+  hideStopButton = false,
+}: InputProps) => {
+  const context = useChatContext();
+  const copilotContext = useCopilotContext();
+
+  const showPoweredBy = !copilotContext.copilotApiConfig?.publicApiKey;
+
+  const pushToTalkConfigured =
+    copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&
+    copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isComposing, setIsComposing] = useState(false);
+
+  const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement;
+
+    // If the user clicked a button or inside a button, don't focus the textarea
+    if (target.closest("button")) return;
+
+    // If the user clicked the textarea, do nothing (it's already focused)
+    if (target.tagName === "TEXTAREA") return;
+
+    // Otherwise, focus the textarea
+    textareaRef.current?.focus();
+  };
+
+  const [text, setText] = useState("");
+  const send = () => {
+    if (inProgress) return;
+    onSend(text);
+    setText("");
+
+    textareaRef.current?.focus();
+  };
+
+  // tylerslaton:
+  //
+  // This scrolls CopilotKit into view always. Reading the commit history, it was likely
+  // added to fix a bug but it is causing issues now.
+  //
+  // For the future, if we want this behavior again, we will need to find a way to do it without
+  // forcing CopilotKit to always be in view. This code causes this because focusing an element
+  // in most browsers will scroll that element into view.
+  //
+  // useEffect(() => {
+  //   if (isVisible) {
+  //     textareaRef.current?.focus();
+  //   }
+  // }, [isVisible]);
+
+  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
+    sendFunction: onSend,
+    inProgress,
+  });
+
+  const isInProgress = inProgress || pushToTalkState === "transcribing";
+  const { buttonIcon, buttonAlt } = useMemo(() => {
+    if (!chatReady) return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
+    return isInProgress && !hideStopButton && chatReady
+      ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" }
+      : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
+  }, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);
+  const showPushToTalk =
+    pushToTalkConfigured &&
+    (pushToTalkState === "idle" || pushToTalkState === "recording") &&
+    !inProgress;
+
+  const { interrupt } = useCopilotChatInternal();
+
+  const canSend = useMemo(() => {
+    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
+  }, [interrupt, isInProgress, text, pushToTalkState]);
+
+  const canStop = useMemo(() => {
+    return isInProgress && !hideStopButton;
+  }, [isInProgress, hideStopButton]);
+
+  const sendDisabled = !canSend && !canStop;
+
+  return (
+    <div className={`copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`}>
+      <div className="copilotKitInput" onClick={handleDivClick}>
+        <AutoResizingTextarea
+          ref={textareaRef}
+          placeholder={context.labels.placeholder}
+          autoFocus={false}
+          maxRows={MAX_NEWLINES}
+          value={text}
+          onChange={(event) => setText(event.target.value)}
+          onCompositionStart={() => setIsComposing(true)}
+          onCompositionEnd={() => setIsComposing(false)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey && !isComposing) {
+              event.preventDefault();
+              if (canSend) {
+                send();
+              }
+            }
+          }}
+        />
+        <div className="copilotKitInputControls">
+          {onUpload && (
+            <button onClick={onUpload} className="copilotKitInputControlButton">
+              {context.icons.uploadIcon}
+            </button>
+          )}
+
+          <div style={{ flexGrow: 1 }} />
+
+          {showPushToTalk && (
+            <button
+              onClick={() =>
+                setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing")
+              }
+              className={
+                pushToTalkState === "recording"
+                  ? "copilotKitInputControlButton copilotKitPushToTalkRecording"
+                  : "copilotKitInputControlButton"
+              }
+            >
+              {context.icons.pushToTalkIcon}
+            </button>
+          )}
+          <button
+            disabled={sendDisabled}
+            onClick={isInProgress && !hideStopButton ? onStop : send}
+            data-copilotkit-in-progress={inProgress}
+            data-test-id={inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready"}
+            className="copilotKitInputControlButton"
+            aria-label={buttonAlt}
+          >
+            {buttonIcon}
+          </button>
+        </div>
+      </div>
+      <PoweredByTag showPoweredBy={showPoweredBy} />
+    </div>
+  );
+};

package/src/components/chat/Markdown.tsx

@@ -0,0 +1,144 @@
+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";
+import rehypeRaw from "rehype-raw";
+
+const defaultComponents: Components = {
+  a({ children, ...props }) {
+    return (
+      <a className="copilotKitMarkdownElement" {...props} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    );
+  },
+  // @ts-expect-error -- inline
+  code({ children, className, inline, ...props }) {
+    if (Array.isArray(children) && 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 || "");
+
+    // Detect inline code: if it has a language class or contains newlines, it's likely a code block
+    // Otherwise, treat it as inline code
+    const hasLanguage = match && match[1];
+    const content = String(children);
+    const hasNewlines = content.includes("\n");
+    const isInline = !hasLanguage && !hasNewlines;
+
+    if (isInline) {
+      return (
+        <code
+          className={`copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`}
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+
+    return (
+      <CodeBlock
+        key={Math.random()}
+        language={(match && match[1]) || ""}
+        value={String(children).replace(/\n$/, "")}
+        {...props}
+      />
+    );
+  },
+  h1: ({ children, ...props }) => (
+    <h1 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h1>
+  ),
+  h2: ({ children, ...props }) => (
+    <h2 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...props }) => (
+    <h3 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, ...props }) => (
+    <h4 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h4>
+  ),
+  h5: ({ children, ...props }) => (
+    <h5 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h5>
+  ),
+  h6: ({ children, ...props }) => (
+    <h6 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h6>
+  ),
+  p: ({ children, ...props }) => (
+    <p className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </p>
+  ),
+  pre: ({ children, ...props }) => (
+    <pre className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </pre>
+  ),
+  blockquote: ({ children, ...props }) => (
+    <blockquote className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </blockquote>
+  ),
+  ul: ({ children, ...props }) => (
+    <ul className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </ul>
+  ),
+  li: ({ children, ...props }) => (
+    <li className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </li>
+  ),
+};
+
+const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children && prevProps.components === nextProps.components,
+);
+
+type MarkdownProps = {
+  content: string;
+  components?: Components;
+};
+
+export const Markdown = ({ content, components }: MarkdownProps) => {
+  return (
+    <div className="copilotKitMarkdown">
+      <MemoizedReactMarkdown
+        components={{ ...defaultComponents, ...components }}
+        remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
+        rehypePlugins={[rehypeRaw]}
+      >
+        {content}
+      </MemoizedReactMarkdown>
+    </div>
+  );
+};