@copilotkit/react-ui 0.37.0-mme-fix-textarea-css.1 → 0.37.0

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-secondary-color\"?: string;\n  \"--copilot-kit-secondary-contrast-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-scrollbar-color\"?: string;\n  \"--copilot-kit-response-button-color\"?: string;\n  \"--copilot-kit-response-button-background-color\"?: 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

@@ -1,2 +1,2 @@
-
-export { }
+export { CopilotKitCSSProperties } from './css.js';
+import 'react';

package/dist/types/index.js.map

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

package/dist/types/index.mjs

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

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.37.0-mme-fix-textarea-css.1",
+  "version": "0.37.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -35,9 +35,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "eslint-config-custom": "0.12.0-mme-fix-textarea-css.1",
-    "tailwind-config": "0.11.0-mme-fix-textarea-css.1",
-    "tsconfig": "0.16.0-mme-fix-textarea-css.1"
+    "eslint-config-custom": "0.12.0",
+    "tailwind-config": "0.11.0",
+    "tsconfig": "0.16.0"
   },
   "dependencies": {
     "nanoid": "^4.0.2",
@@ -45,8 +45,8 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/shared": "0.37.0-mme-fix-textarea-css.1",
-    "@copilotkit/react-core": "0.37.0-mme-fix-textarea-css.1"
+    "@copilotkit/shared": "0.37.0",
+    "@copilotkit/react-core": "0.37.0"
   },
   "scripts": {
     "build": "tsup --clean",

package/postcss.config.js

@@ -1,9 +1,60 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
+const path = require("path");
+const fs = require("fs");
+
+let didCreateInterface = false;
 
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  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/ChatContext.tsx

@@ -166,7 +166,7 @@ export const ChatContextProvider = ({
         regenerateIcon: DefaultIcons.RegenerateIcon,
         pushToTalkIcon: DefaultIcons.PushToTalkIcon,
       },
-      icons,
+      ...icons,
     },
     open,
     setOpen,

package/src/css/button.css

@@ -10,8 +10,8 @@
   position: relative;
   transform: scale(1);
   transition: transform 200ms;
-  background-color: var(--copilot-kit-button-background-color);
-  color: var(--copilot-kit-button-icon-color);
+  background-color: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
   cursor: pointer;
 }
 
@@ -24,7 +24,9 @@
 }
 
 .copilotKitButtonIcon {
-  transition: opacity 100ms, transform 300ms;
+  transition:
+    opacity 100ms,
+    transform 300ms;
   position: absolute;
   top: 50%;
   left: 50%;

package/src/css/colors.css

@@ -1,4 +1,4 @@
-:root {
+html {
   --copilot-kit-primary-color: rgb(59 130 246);
   --copilot-kit-contrast-color: rgb(255 255 255);
   --copilot-kit-secondary-color: rgb(243 244 246);
@@ -7,55 +7,6 @@
   --copilot-kit-muted-color: rgb(106 106 106);
   --copilot-kit-separator-color: rgba(0, 0, 0, 0.08);
   --copilot-kit-scrollbar-color: rgba(0, 0, 0, 0.2);
-
-  --copilot-kit-button-background-color: var(--copilot-kit-primary-color);
-
-  /* The color of the icon in the open/close button */
-  --copilot-kit-button-icon-color: var(--copilot-kit-contrast-color);
-
-  /* The background color of the header of the chat window */
-  --copilot-kit-header-background-color: var(--copilot-kit-primary-color);
-
-  /* The color of the title in the header of the chat window */
-  --copilot-kit-header-title-color: var(--copilot-kit-contrast-color);
-
-  /* The color of the close button in the header of the chat window */
-  --copilot-kit-header-close-button-color: var(--copilot-kit-contrast-color);
-
-  /* The color of the separator between the header and the messages area */
-  --copilot-kit-header-separator-color: var(--copilot-kit-separator-color);
-
-  /* The background color of the input area */
-  --copilot-kit-input-background-color: var(--copilot-kit-background-color);
-
-  /* The color of the send button */
-  --copilot-kit-input-send-button-color: var(--copilot-kit-primary-color);
-
-  /* The color of the send button when disabled */
-  --copilot-kit-input-send-button-disabled-color: var(--copilot-kit-muted-color);
-
-  /* The color of the placeholder text in the input area */
-  --copilot-kit-input-placeholder-color: var(--copilot-kit-muted-color);
-
-  /* The color of the text in the input area */
-  --copilot-kit-input-color: var(--copilot-kit-secondary-contrast-color);
-
-  /* The color of the separator between the input area and the messages area */
-  --copilot-kit-input-separator-color: var(--copilot-kit-separator-color);
-
-  /* The background color of the messages area */
-  --copilot-kit-messages-background-color: var(--copilot-kit-background-color);
-
-  /* The background color of a user message */
-  --copilot-kit-message-user-background-color: var(--copilot-kit-primary-color);
-  --copilot-kit-message-user-color: var(--copilot-kit-contrast-color);
-
-  /* The background color of a assistant message */
-  --copilot-kit-message-assistant-background-color: var(--copilot-kit-secondary-color);
-  --copilot-kit-message-assistant-color: var(--copilot-kit-secondary-contrast-color);
-
-  /* The color of the response control button */
-  --copilot-kit-response-button-border-color: var(--copilot-kit-separator-color);
   --copilot-kit-response-button-color: #333;
   --copilot-kit-response-button-background-color: #fff;
 }

package/src/css/header.css

@@ -5,11 +5,11 @@
   justify-content: center;
   align-items: center;
   position: relative;
-  background-color: var(--copilot-kit-header-background-color);
-  color: var(--copilot-kit-header-title-color);
+  background-color: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-bottom: 1px solid var(--copilot-kit-header-separator-color);
+  border-bottom: 1px solid var(--copilot-kit-separator-color);
 }
 
 .copilotKitSidebar .copilotKitHeader {
@@ -33,7 +33,7 @@
   right: 16px;
   transform: translateY(-50%);
   outline: none;
-  color: var(--copilot-kit-header-close-button-color);
+  color: var(--copilot-kit-contrast-color);
   background-color: transparent;
   cursor: pointer;
 }

package/src/css/input.css

@@ -1,5 +1,5 @@
 .copilotKitInput {
-  border-top: 1px solid var(--copilot-kit-input-separator-color);
+  border-top: 1px solid var(--copilot-kit-separator-color);
   padding-left: 2rem;
   padding-right: 1rem;
   padding-top: 1rem;
@@ -10,7 +10,7 @@
   position: relative;
   border-bottom-left-radius: 0.75rem;
   border-bottom-right-radius: 0.75rem;
-  background-color: var(--copilot-kit-input-background-color);
+  background-color: var(--copilot-kit-background-color);
 }
 
 .copilotKitInput > .copilotKitInputControls > button {
@@ -40,7 +40,7 @@
 }
 
 .copilotKitInput > .copilotKitInputControls > button:not([disabled]) {
-  color: var(--copilot-kit-input-send-button-color);
+  color: var(--copilot-kit-primary-color);
 }
 
 .copilotKitInput > .copilotKitInputControls > button:not([disabled]):hover {
@@ -48,7 +48,7 @@
 }
 
 .copilotKitInput > .copilotKitInputControls > button[disabled] {
-  color: var(--copilot-kit-input-send-button-disabled-color);
+  color: var(--copilot-kit-muted-color);
 }
 
 .copilotKitInputControls {
@@ -71,13 +71,13 @@
   padding: 0;
   font-family: inherit;
   font-weight: inherit;
-  color: var(--copilot-kit-input-color);
+  color: var(--copilot-kit-secondary-contrast-color);
   border: 0px;
-  background-color: var(--copilot-kit-input-background-color);
+  background-color: var(--copilot-kit-background-color);
 }
 
 .copilotKitInput > textarea::placeholder {
-  color: var(--copilot-kit-input-placeholder-color);
+  color: var(--copilot-kit-muted-color);
   opacity: 1;
 }
 

package/src/css/messages.css

@@ -4,7 +4,7 @@
   padding: 1rem 2rem;
   display: flex;
   flex-direction: column;
-  background-color: var(--copilot-kit-messages-background-color);
+  background-color: var(--copilot-kit-background-color);
 }
 
 .copilotKitMessages::-webkit-scrollbar {
@@ -14,7 +14,7 @@
 .copilotKitMessages::-webkit-scrollbar-thumb {
   background-color: var(--copilot-kit-scrollbar-color);
   border-radius: 10rem;
-  border: 2px solid var(--copilot-kit-messages-background-color);
+  border: 2px solid var(--copilot-kit-background-color);
 }
 
 .copilotKitMessages::-webkit-scrollbar-track-piece:start {
@@ -36,15 +36,15 @@
 }
 
 .copilotKitMessage.copilotKitUserMessage {
-  background: var(--copilot-kit-message-user-background-color);
-  color: var(--copilot-kit-message-user-color);
+  background: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
   margin-left: auto;
   white-space: pre-wrap;
 }
 
 .copilotKitMessage.copilotKitAssistantMessage {
-  background: var(--copilot-kit-message-assistant-background-color);
-  color: var(--copilot-kit-message-assistant-color);
+  background: var(--copilot-kit-secondary-color);
+  color: var(--copilot-kit-secondary-contrast-color);
   margin-right: auto;
 }
 

package/src/css/response.css

@@ -1,6 +1,6 @@
 .copilotKitResponseButton {
   background-color: var(--copilot-kit-response-button-background-color);
-  border: 1px solid var(--copilot-kit-response-button-border-color);
+  border: 1px solid var(--copilot-kit-separator-color);
   border-radius: 4px;
   color: var(--copilot-kit-response-button-color);
   cursor: pointer;

package/src/css/suggestions.css

@@ -14,8 +14,8 @@
   padding: 8px 12px;
   font-size: 0.7rem;
   border-radius: 0.5rem;
-  background: var(--copilot-kit-message-user-background-color);
-  color: var(--copilot-kit-message-user-color);
+  background: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
 }
 
 .copilotKitMessages footer .suggestions button {

package/src/types/css.ts

@@ -0,0 +1,15 @@
+// autogenerated (see postcss.config.js) - do not edit
+import { CSSProperties } from "react";
+
+export interface CopilotKitCSSProperties extends CSSProperties {
+  "--copilot-kit-primary-color"?: string;
+  "--copilot-kit-contrast-color"?: string;
+  "--copilot-kit-secondary-color"?: string;
+  "--copilot-kit-secondary-contrast-color"?: string;
+  "--copilot-kit-background-color"?: string;
+  "--copilot-kit-muted-color"?: string;
+  "--copilot-kit-separator-color"?: string;
+  "--copilot-kit-scrollbar-color"?: string;
+  "--copilot-kit-response-button-color"?: string;
+  "--copilot-kit-response-button-background-color"?: string;
+}

package/src/types/index.ts

@@ -1 +1 @@
-export {};
+export type { CopilotKitCSSProperties } from "./css";

package/dist/chunk-7NSRDJ5C.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-7NSRDJ5C.mjs.map