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

package/src/components/chat/CodeBlock.tsx

@@ -0,0 +1,408 @@
+import { FC, memo } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard";
+import { CheckIcon, CopyIcon, DownloadIcon } from "./Icons";
+
+interface CodeActionButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+interface Props {
+  language: string;
+  value: string;
+}
+
+interface languageMap {
+  [key: string]: string | undefined;
+}
+
+export const programmingLanguages: languageMap = {
+  javascript: ".js",
+  python: ".py",
+  java: ".java",
+  c: ".c",
+  cpp: ".cpp",
+  "c++": ".cpp",
+  "c#": ".cs",
+  ruby: ".rb",
+  php: ".php",
+  swift: ".swift",
+  "objective-c": ".m",
+  kotlin: ".kt",
+  typescript: ".ts",
+  go: ".go",
+  perl: ".pl",
+  rust: ".rs",
+  scala: ".scala",
+  haskell: ".hs",
+  lua: ".lua",
+  shell: ".sh",
+  sql: ".sql",
+  html: ".html",
+  css: ".css",
+  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+};
+
+export const generateRandomString = (length: number, lowercase = false) => {
+  const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789"; // excluding similar looking characters like Z, 2, I, 1, O, 0
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return lowercase ? result.toLowerCase() : result;
+};
+
+const CodeBlock: FC<Props> = memo(({ language, value }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
+
+  const downloadAsFile = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const fileExtension = programmingLanguages[language] || ".file";
+    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
+    const fileName = window.prompt("Enter file name" || "", suggestedFileName);
+
+    if (!fileName) {
+      // User pressed cancel on prompt.
+      return;
+    }
+
+    const blob = new Blob([value], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const onCopy = () => {
+    if (isCopied) return;
+    copyToClipboard(value);
+  };
+
+  return (
+    <div className="copilotKitCodeBlock">
+      <div className="copilotKitCodeBlockToolbar">
+        <span className="copilotKitCodeBlockToolbarLanguage">{language}</span>
+        <div className="copilotKitCodeBlockToolbarButtons">
+          <button className="copilotKitCodeBlockToolbarButton" onClick={downloadAsFile}>
+            <DownloadIcon />
+            <span className="sr-only">Download</span>
+          </button>
+          <button className="copilotKitCodeBlockToolbarButton" onClick={onCopy}>
+            {isCopied ? <CheckIcon /> : <CopyIcon />}
+            <span className="sr-only">Copy code</span>
+          </button>
+        </div>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={highlightStyle}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          borderBottomLeftRadius: "0.375rem",
+          borderBottomRightRadius: "0.375rem",
+        }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
+});
+CodeBlock.displayName = "CodeBlock";
+
+export { CodeBlock };
+
+// import { vscDarkPlus as highlightStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
+// As a workaround, we inline the vscDarkPlus from react-syntax-highlighter.
+// Importing it as recommended in the documentation leads to build errors in the non app router
+// (Next.js classic) setup.
+const highlightStyle: any = {
+  'pre[class*="language-"]': {
+    color: "#d4d4d4",
+    fontSize: "13px",
+    textShadow: "none",
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+    direction: "ltr",
+    textAlign: "left",
+    whiteSpace: "pre",
+    wordSpacing: "normal",
+    wordBreak: "normal",
+    lineHeight: "1.5",
+    MozTabSize: "4",
+    OTabSize: "4",
+    tabSize: "4",
+    WebkitHyphens: "none",
+    MozHyphens: "none",
+    msHyphens: "none",
+    hyphens: "none",
+    padding: "1em",
+    margin: ".5em 0",
+    overflow: "auto",
+    background: "#1e1e1e",
+  },
+  'code[class*="language-"]': {
+    color: "#d4d4d4",
+    fontSize: "13px",
+    textShadow: "none",
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+    direction: "ltr",
+    textAlign: "left",
+    whiteSpace: "pre",
+    wordSpacing: "normal",
+    wordBreak: "normal",
+    lineHeight: "1.5",
+    MozTabSize: "4",
+    OTabSize: "4",
+    tabSize: "4",
+    WebkitHyphens: "none",
+    MozHyphens: "none",
+    msHyphens: "none",
+    hyphens: "none",
+  },
+  'pre[class*="language-"]::selection': {
+    textShadow: "none",
+    background: "#264F78",
+  },
+  'code[class*="language-"]::selection': {
+    textShadow: "none",
+    background: "#264F78",
+  },
+  'pre[class*="language-"] *::selection': {
+    textShadow: "none",
+    background: "#264F78",
+  },
+  'code[class*="language-"] *::selection': {
+    textShadow: "none",
+    background: "#264F78",
+  },
+  ':not(pre) > code[class*="language-"]': {
+    padding: ".1em .3em",
+    borderRadius: ".3em",
+    color: "#db4c69",
+    background: "#1e1e1e",
+  },
+  ".namespace": {
+    Opacity: ".7",
+  },
+  "doctype.doctype-tag": {
+    color: "#569CD6",
+  },
+  "doctype.name": {
+    color: "#9cdcfe",
+  },
+  comment: {
+    color: "#6a9955",
+  },
+  prolog: {
+    color: "#6a9955",
+  },
+  punctuation: {
+    color: "#d4d4d4",
+  },
+  ".language-html .language-css .token.punctuation": {
+    color: "#d4d4d4",
+  },
+  ".language-html .language-javascript .token.punctuation": {
+    color: "#d4d4d4",
+  },
+  property: {
+    color: "#9cdcfe",
+  },
+  tag: {
+    color: "#569cd6",
+  },
+  boolean: {
+    color: "#569cd6",
+  },
+  number: {
+    color: "#b5cea8",
+  },
+  constant: {
+    color: "#9cdcfe",
+  },
+  symbol: {
+    color: "#b5cea8",
+  },
+  inserted: {
+    color: "#b5cea8",
+  },
+  unit: {
+    color: "#b5cea8",
+  },
+  selector: {
+    color: "#d7ba7d",
+  },
+  "attr-name": {
+    color: "#9cdcfe",
+  },
+  string: {
+    color: "#ce9178",
+  },
+  char: {
+    color: "#ce9178",
+  },
+  builtin: {
+    color: "#ce9178",
+  },
+  deleted: {
+    color: "#ce9178",
+  },
+  ".language-css .token.string.url": {
+    textDecoration: "underline",
+  },
+  operator: {
+    color: "#d4d4d4",
+  },
+  entity: {
+    color: "#569cd6",
+  },
+  "operator.arrow": {
+    color: "#569CD6",
+  },
+  atrule: {
+    color: "#ce9178",
+  },
+  "atrule.rule": {
+    color: "#c586c0",
+  },
+  "atrule.url": {
+    color: "#9cdcfe",
+  },
+  "atrule.url.function": {
+    color: "#dcdcaa",
+  },
+  "atrule.url.punctuation": {
+    color: "#d4d4d4",
+  },
+  keyword: {
+    color: "#569CD6",
+  },
+  "keyword.module": {
+    color: "#c586c0",
+  },
+  "keyword.control-flow": {
+    color: "#c586c0",
+  },
+  function: {
+    color: "#dcdcaa",
+  },
+  "function.maybe-class-name": {
+    color: "#dcdcaa",
+  },
+  regex: {
+    color: "#d16969",
+  },
+  important: {
+    color: "#569cd6",
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  "class-name": {
+    color: "#4ec9b0",
+  },
+  "maybe-class-name": {
+    color: "#4ec9b0",
+  },
+  console: {
+    color: "#9cdcfe",
+  },
+  parameter: {
+    color: "#9cdcfe",
+  },
+  interpolation: {
+    color: "#9cdcfe",
+  },
+  "punctuation.interpolation-punctuation": {
+    color: "#569cd6",
+  },
+  variable: {
+    color: "#9cdcfe",
+  },
+  "imports.maybe-class-name": {
+    color: "#9cdcfe",
+  },
+  "exports.maybe-class-name": {
+    color: "#9cdcfe",
+  },
+  escape: {
+    color: "#d7ba7d",
+  },
+  "tag.punctuation": {
+    color: "#808080",
+  },
+  cdata: {
+    color: "#808080",
+  },
+  "attr-value": {
+    color: "#ce9178",
+  },
+  "attr-value.punctuation": {
+    color: "#ce9178",
+  },
+  "attr-value.punctuation.attr-equals": {
+    color: "#d4d4d4",
+  },
+  namespace: {
+    color: "#4ec9b0",
+  },
+  'pre[class*="language-javascript"]': {
+    color: "#9cdcfe",
+  },
+  'code[class*="language-javascript"]': {
+    color: "#9cdcfe",
+  },
+  'pre[class*="language-jsx"]': {
+    color: "#9cdcfe",
+  },
+  'code[class*="language-jsx"]': {
+    color: "#9cdcfe",
+  },
+  'pre[class*="language-typescript"]': {
+    color: "#9cdcfe",
+  },
+  'code[class*="language-typescript"]': {
+    color: "#9cdcfe",
+  },
+  'pre[class*="language-tsx"]': {
+    color: "#9cdcfe",
+  },
+  'code[class*="language-tsx"]': {
+    color: "#9cdcfe",
+  },
+  'pre[class*="language-css"]': {
+    color: "#ce9178",
+  },
+  'code[class*="language-css"]': {
+    color: "#ce9178",
+  },
+  'pre[class*="language-html"]': {
+    color: "#d4d4d4",
+  },
+  'code[class*="language-html"]': {
+    color: "#d4d4d4",
+  },
+  ".language-regex .token.anchor": {
+    color: "#dcdcaa",
+  },
+  ".language-html .token.punctuation": {
+    color: "#808080",
+  },
+  'pre[class*="language-"] > code[class*="language-"]': {
+    position: "relative",
+    zIndex: "1",
+  },
+  ".line-highlight.line-highlight": {
+    background: "#f7ebc6",
+    boxShadow: "inset 5px 0 0 #f7d87c",
+    zIndex: "0",
+  },
+};

package/src/components/chat/Header.tsx

@@ -0,0 +1,15 @@
+import { HeaderProps } from "./props";
+import { useChatContext } from "./ChatContext";
+
+export const Header = ({}: HeaderProps) => {
+  const { setOpen, icons, labels } = useChatContext();
+
+  return (
+    <div className="copilotKitHeader">
+      <div>{labels.title}</div>
+      <button onClick={() => setOpen(false)} aria-label="Close">
+        {icons.headerCloseIcon}
+      </button>
+    </div>
+  );
+};

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>
+);