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

package/dist/index.mjs

@@ -0,0 +1,84 @@
+"use client";
+import "./chunk-EFZPSZWO.mjs";
+import "./chunk-MMVDU6DF.mjs";
+import "./chunk-SC6JRFAJ.mjs";
+import "./chunk-WB3YULQ4.mjs";
+import {
+  CopilotPopup
+} from "./chunk-ELUJRANC.mjs";
+import {
+  CopilotSidebar
+} from "./chunk-LQEFRHRT.mjs";
+import "./chunk-7PR2KJDO.mjs";
+import "./chunk-C3GSYRC3.mjs";
+import "./chunk-GDSZGYCE.mjs";
+import "./chunk-V7W6IM2V.mjs";
+import {
+  CopilotDevConsole
+} from "./chunk-FFJHOZX6.mjs";
+import "./chunk-Q5V6S67N.mjs";
+import {
+  shouldShowDevConsole
+} from "./chunk-JY2CSDKN.mjs";
+import "./chunk-KXE2JCUH.mjs";
+import "./chunk-NRA3CFEE.mjs";
+import "./chunk-BH6PCAAL.mjs";
+import "./chunk-UFN2VWSR.mjs";
+import {
+  CopilotChat
+} from "./chunk-QPQRLXN3.mjs";
+import {
+  Suggestions
+} from "./chunk-QB3GUN2N.mjs";
+import {
+  Suggestion
+} from "./chunk-NGJ32FAP.mjs";
+import "./chunk-PLHTVHUW.mjs";
+import "./chunk-3W6J75HS.mjs";
+import "./chunk-ELGRNEAO.mjs";
+import "./chunk-QIOJXTIQ.mjs";
+import "./chunk-HIW7RXCD.mjs";
+import "./chunk-7OURDQZJ.mjs";
+import "./chunk-NCIAFFQ2.mjs";
+import {
+  AssistantMessage
+} from "./chunk-IHFR6PYG.mjs";
+import {
+  ImageRenderer
+} from "./chunk-DBKRAOH7.mjs";
+import {
+  UserMessage
+} from "./chunk-RYUCX3ZK.mjs";
+import {
+  Markdown
+} from "./chunk-JZ3RFQQ6.mjs";
+import "./chunk-IK2BPURM.mjs";
+import {
+  useChatContext
+} from "./chunk-IEMQ2SQW.mjs";
+import "./chunk-XWG3L6QC.mjs";
+import "./chunk-IU3WTXLQ.mjs";
+import "./chunk-T26KLXLH.mjs";
+import {
+  useCopilotChatSuggestions
+} from "./chunk-Y4FKRAKJ.mjs";
+import "./chunk-54JAUBUJ.mjs";
+import "./chunk-JGMFJZMG.mjs";
+import "./chunk-O72ZB5V3.mjs";
+import "./chunk-MRXNTQOX.mjs";
+export {
+  AssistantMessage,
+  CopilotChat,
+  CopilotDevConsole,
+  CopilotPopup,
+  CopilotSidebar,
+  ImageRenderer,
+  Markdown,
+  Suggestion as RenderSuggestion,
+  Suggestions as RenderSuggestionsList,
+  UserMessage,
+  shouldShowDevConsole,
+  useChatContext,
+  useCopilotChatSuggestions
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/lib/utils.d.ts

@@ -0,0 +1,4 @@
+declare function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON>;
+declare function formatDate(input: string | number | Date): string;
+
+export { fetcher, formatDate };

package/dist/lib/utils.js

@@ -0,0 +1,76 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/lib/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  fetcher: () => fetcher,
+  formatDate: () => formatDate
+});
+module.exports = __toCommonJS(utils_exports);
+function fetcher(input, init) {
+  return __async(this, null, function* () {
+    const res = yield fetch(input, init);
+    if (!res.ok) {
+      const json = yield res.json();
+      if (json.error) {
+        const error = new Error(json.error);
+        error.status = res.status;
+        throw error;
+      } else {
+        throw new Error("An unexpected error occurred");
+      }
+    }
+    return res.json();
+  });
+}
+function formatDate(input) {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  fetcher,
+  formatDate
+});
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAsB,QAAoB,OAAoB,MAAmC;AAAA;AAC/F,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH;","names":[]}

package/dist/lib/utils.mjs

@@ -0,0 +1,34 @@
+import {
+  __async
+} from "../chunk-MRXNTQOX.mjs";
+
+// src/lib/utils.ts
+function fetcher(input, init) {
+  return __async(this, null, function* () {
+    const res = yield fetch(input, init);
+    if (!res.ok) {
+      const json = yield res.json();
+      if (json.error) {
+        const error = new Error(json.error);
+        error.status = res.status;
+        throw error;
+      } else {
+        throw new Error("An unexpected error occurred");
+      }
+    }
+    return res.json();
+  });
+}
+function formatDate(input) {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+export {
+  fetcher,
+  formatDate
+};
+//# sourceMappingURL=utils.mjs.map

package/dist/lib/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n"],"mappings":";;;;;AAAA,SAAsB,QAAoB,OAAoB,MAAmC;AAAA;AAC/F,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH;","names":[]}

package/dist/types/css.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+
+interface CopilotKitCSSProperties extends CSSProperties {
+    "--copilot-kit-primary-color"?: string;
+    "--copilot-kit-contrast-color"?: string;
+    "--copilot-kit-background-color"?: string;
+    "--copilot-kit-input-background-color"?: string;
+    "--copilot-kit-secondary-color"?: string;
+    "--copilot-kit-secondary-contrast-color"?: string;
+    "--copilot-kit-separator-color"?: string;
+    "--copilot-kit-muted-color"?: string;
+    "--copilot-kit-error-background"?: string;
+    "--copilot-kit-error-border"?: string;
+    "--copilot-kit-error-text"?: string;
+    "--copilot-kit-shadow-sm"?: string;
+    "--copilot-kit-shadow-md"?: string;
+    "--copilot-kit-shadow-lg"?: string;
+    "--copilot-kit-dev-console-bg"?: string;
+    "--copilot-kit-dev-console-text"?: string;
+}
+
+export { CopilotKitCSSProperties };

package/dist/types/css.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types/css.ts
+var css_exports = {};
+module.exports = __toCommonJS(css_exports);
+//# sourceMappingURL=css.js.map

package/dist/types/css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/css.ts"],"sourcesContent":["// autogenerated (see postcss.config.js) - do not edit\nimport { CSSProperties } from \"react\";\n\nexport interface CopilotKitCSSProperties extends CSSProperties {\n  \"--copilot-kit-primary-color\"?: string;\n  \"--copilot-kit-contrast-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-input-background-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-secondary-contrast-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-error-background\"?: string;\n  \"--copilot-kit-error-border\"?: string;\n  \"--copilot-kit-error-text\"?: string;\n  \"--copilot-kit-shadow-sm\"?: string;\n  \"--copilot-kit-shadow-md\"?: string;\n  \"--copilot-kit-shadow-lg\"?: string;\n  \"--copilot-kit-dev-console-bg\"?: string;\n  \"--copilot-kit-dev-console-text\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/types/css.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=css.mjs.map

package/dist/types/css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { CopilotKitCSSProperties } from './css.js';
+export { CopilotChatSuggestion } from './suggestions.js';
+import 'react';

package/dist/types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types/index.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export type { CopilotKitCSSProperties } from \"./css\";\nexport type { CopilotChatSuggestion } from \"./suggestions\";\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/types/index.mjs

@@ -0,0 +1,2 @@
+import "../chunk-EFZPSZWO.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/types/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/suggestions.d.ts

@@ -0,0 +1,9 @@
+interface CopilotChatSuggestion {
+    title: string;
+    message: string;
+    partial?: boolean;
+    isLoading?: boolean;
+    className?: string;
+}
+
+export { CopilotChatSuggestion };

package/dist/types/suggestions.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types/suggestions.ts
+var suggestions_exports = {};
+module.exports = __toCommonJS(suggestions_exports);
+//# sourceMappingURL=suggestions.js.map

package/dist/types/suggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/suggestions.ts"],"sourcesContent":["export interface CopilotChatSuggestion {\n  title: string;\n  message: string;\n  partial?: boolean;\n  isLoading?: boolean;\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/types/suggestions.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=suggestions.mjs.map

package/dist/types/suggestions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/v2/index.css

@@ -0,0 +1,4 @@
+@import "@copilotkit/react-core/v2/styles.css";
+
+/* src/v2/styles.css */
+/*# sourceMappingURL=index.css.map */

package/dist/v2/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/v2/index.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/v2/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist/v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/v2/index.mjs

@@ -0,0 +1,2 @@
+import "../chunk-MRXNTQOX.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/v2/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@copilotkit/react-ui",
+  "private": false,
+  "homepage": "https://github.com/CopilotKit/CopilotKit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CopilotKit/CopilotKit.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.0-0.0.0-max-changeset-10101010101010-20260109191632",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/index.css",
+    "./v2/styles.css": "./dist/v2/index.css"
+  },
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18 || ^19 || ^19.0.0-rc",
+    "@copilotkit/react-core": "0.0.0-0.0.0-max-changeset-10101010101010-20260109191632",
+    "@copilotkit/runtime-client-gql": "0.0.0-0.0.0-max-changeset-10101010101010-20260109191632",
+    "@copilotkit/shared": "0.0.0-0.0.0-max-changeset-10101010101010-20260109191632"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.4",
+    "@types/react": "^19.1.0",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "eslint": "^8.56.0",
+    "jest": "^29.6.4",
+    "postcss": "^8.4.20",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.3.0",
+    "ts-jest": "^29.1.1",
+    "tsup": "^6.7.0",
+    "typescript": "^5.2.3",
+    "@copilotkit/react-core": "0.0.0-0.0.0-max-changeset-10101010101010-20260109191632",
+    "@copilotkit/runtime-client-gql": "0.0.0-0.0.0-max-changeset-10101010101010-20260109191632",
+    "eslint-config-custom": "1.4.6",
+    "@copilotkit/shared": "0.0.0-0.0.0-max-changeset-10101010101010-20260109191632",
+    "tailwind-config": "1.4.6",
+    "tsconfig": "1.4.6"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "keywords": [
+    "copilotkit",
+    "copilot",
+    "react",
+    "nextjs",
+    "nodejs",
+    "ai",
+    "assistant",
+    "javascript",
+    "automation",
+    "textarea"
+  ],
+  "scripts": {
+    "build": "tsup --clean",
+    "dev": "tsup --watch --no-splitting",
+    "test": "jest",
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .next",
+    "link:global": "pnpm link --global",
+    "unlink:global": "pnpm unlink --global"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,60 @@
+const path = require("path");
+const fs = require("fs");
+
+let didCreateInterface = false;
+
+module.exports = {
+  plugins: [
+    {
+      postcssPlugin: "postcss-collect-all-variables",
+      Once(root) {
+        if (didCreateInterface) return;
+
+        const filename = path.basename(root.source.input.file);
+        if (filename === "colors.css") {
+          const variables = {};
+
+          root.walkDecls((decl) => {
+            if (decl.prop.startsWith("--")) {
+              variables[decl.prop] = decl.value;
+            }
+          });
+
+          // Create TypeScript interface
+          const interfaceContent = generateInterface(variables);
+
+          // Ensure the directory exists
+          const dir = path.resolve(__dirname, "src/types");
+          if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+          }
+
+          // Write the interface to the file
+          const filePath = path.resolve(dir, "css.ts");
+          fs.writeFileSync(filePath, interfaceContent);
+
+          didCreateInterface = true;
+        }
+      },
+    },
+    // require("tailwindcss"),
+    // require("autoprefixer"),
+  ],
+};
+
+function generateInterface(variables) {
+  const interfaceLines = [
+    "// autogenerated (see postcss.config.js) - do not edit",
+    'import { CSSProperties } from "react";',
+    "",
+    "export interface CopilotKitCSSProperties extends CSSProperties {",
+  ];
+
+  for (const [prop, value] of Object.entries(variables)) {
+    interfaceLines.push(`  "${prop}"?: string;`);
+  }
+
+  interfaceLines.push("}");
+
+  return interfaceLines.join("\n") + "\n";
+}

package/src/components/chat/Button.tsx

@@ -0,0 +1,18 @@
+import { ButtonProps } from "./props";
+import { useChatContext } from "./ChatContext";
+
+export const Button = ({}: ButtonProps) => {
+  const { open, setOpen, icons } = useChatContext();
+
+  return (
+    <div onClick={() => setOpen(!open)}>
+      <button
+        className={`copilotKitButton ${open ? "open" : ""}`}
+        aria-label={open ? "Close Chat" : "Open Chat"}
+      >
+        <div className="copilotKitButtonIcon copilotKitButtonIconOpen">{icons.openIcon}</div>
+        <div className="copilotKitButtonIcon copilotKitButtonIconClose">{icons.closeIcon}</div>
+      </button>
+    </div>
+  );
+};