feat: revert css injection (CopilotKit#585)

* Revert "feat: inject minified css in bundle (CopilotKit#560)"

This reverts commit c2963a0.

* fix import

* regenerate package lock

Author: arielweinberger

CopilotKit/examples/next-openai/src/app/layout.tsx

@@ -1,4 +1,6 @@
 import "../styles/globals.css";
+import "@copilotkit/react-ui/styles.css";
+import "@copilotkit/react-textarea/styles.css";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (

CopilotKit/packages/react-textarea/package.json

@@ -40,26 +40,20 @@
   "devDependencies": {
     "@types/jest": "^29.5.4",
     "@types/lodash.merge": "^4.6.7",
-    "@types/postcss-import": "^14.0.3",
-    "@types/postcss-prefix-selector": "^1.16.3",
     "@types/react": "^18.2.5",
     "@types/react-dom": "^18.2.4",
     "@types/react-syntax-highlighter": "^15.5.7",
-    "autoprefixer": "^10.4.13",
-    "cssnano": "^7.0.6",
     "eslint": "^8.56.0",
     "eslint-config-custom": "workspace:*",
     "jest": "^29.6.4",
-    "postcss": "^8.4.40",
-    "postcss-import": "^16.1.0",
-    "postcss-nested": "^6.2.0",
+    "postcss": "^8.4.20",
     "postcss-prefix-selector": "^1.16.1",
     "react": "^18.2.0",
     "tailwind-config": "workspace:*",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "^3.3.0",
     "ts-jest": "^29.1.1",
     "tsconfig": "workspace:*",
-    "tsup-async-inject-style": "0.0.2",
+    "tsup": "^6.7.0",
     "typescript": "^5.2.3"
   },
   "dependencies": {
@@ -69,6 +63,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.11",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-separator": "^1.0.3",
@@ -80,7 +75,6 @@
     "lucide-react": "^0.274.0",
     "material-icons": "^1.13.10",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.3.0",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.1",

CopilotKit/packages/react-textarea/src/components/base-copilot-textarea/base-copilot-textarea.css

@@ -0,0 +1,9 @@
+.copilot-textarea.with-branding::after {
+    content: ''; /* Initially empty because we overrdie this CSS dynamically and we want to avoid flashing */
+    position: absolute;
+}
+    
+  
+.copilot-textarea.no-branding::after {
+    content: '';
+}

CopilotKit/packages/react-textarea/src/components/base-copilot-textarea/base-copilot-textarea.tsx

@@ -15,6 +15,7 @@ import { replaceEditorText } from "../../lib/slatejs-edits/replace-text";
 import { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from "../../types/base";
 import { AutosuggestionState } from "../../types/base/autosuggestion-state";
 import { BaseCopilotTextareaProps } from "../../types/base/base-copilot-textarea-props";
+import "./base-copilot-textarea.css";
 import { HoveringToolbar } from "../hovering-toolbar/hovering-toolbar";
 import { makeRenderElementFunction } from "./render-element";
 import { makeRenderPlaceholderFunction } from "./render-placeholder";

CopilotKit/packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx

@@ -13,6 +13,8 @@
  *
  * ```tsx
  * import { CopilotTextarea } from '@copilotkit/react-textarea';
+ * import "@copilotkit/react-textarea/styles.css";
+ *
  * <CopilotTextarea
  *   autosuggestionsConfig={{
  *     textareaPurpose:
@@ -42,6 +44,8 @@
  * ```tsx
  * import { useState } from "react";
  * import { CopilotTextarea } from "@copilotkit/react-textarea";
+ * import "@copilotkit/react-textarea/styles.css";
+ *
  * export function ExampleComponent() {
  *   const [text, setText] = useState("");
  *
@@ -68,8 +72,10 @@
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
- * ```tsx fileName="YourRootComponent.tsx"
+ * ```tsx fileName="YourRootComponent.tsx" {2}
  * ...
+ * import "@copilotkit/react-textarea/styles.css";
+ *
  * export function YourRootComponent() {
  *   return (
  *     <CopilotKit>

CopilotKit/packages/react-textarea/src/components/hovering-toolbar/hovering-toolbar-components.tsx

@@ -36,6 +36,23 @@ export const Button = React.forwardRef(
   ),
 );
 
+export const Icon = React.forwardRef(
+  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLSpanElement | null>) => (
+    <span
+      {...props}
+      ref={ref as Ref<HTMLSpanElement>}
+      className={cx(
+        "material-icons",
+        className,
+        css`
+          font-size: 18px;
+          vertical-align: text-bottom;
+        `,
+      )}
+    />
+  ),
+);
+
 export const Menu = React.forwardRef(
   ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLDivElement | null>) => {
     return (

CopilotKit/packages/react-textarea/src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx

@@ -10,8 +10,8 @@ import { Label } from "../../ui/label";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { streamPromiseFlatten } from "../../../lib/stream-promise-flatten";
+import { IncludedFilesPreview } from "./included-files-preview";
 import { useHoveringEditorContext } from "../hovering-editor-provider";
-import { MdArrowForward, MdCheck } from "react-icons/md";
 
 export type SuggestionState = {
   editorState: EditingEditorState;
@@ -190,7 +190,7 @@ export const HoveringInsertionPromptBoxCore = ({
           onClick={beginGeneratingAdjustment}
           className="absolute right-2 bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center"
         >
-          <MdArrowForward className="text-2xl" />
+          <i className="material-icons">arrow_forward</i>
         </button>
       </div>
     </>
@@ -207,7 +207,7 @@ export const HoveringInsertionPromptBoxCore = ({
                 className="inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
                 role="status"
               >
-                <span className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">
+                <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
                   Loading...
                 </span>
               </div>
@@ -234,7 +234,7 @@ export const HoveringInsertionPromptBoxCore = ({
           performInsertion(editSuggestion);
         }}
       >
-        Insert <MdCheck className="text-2xl" />
+        Insert <i className="material-icons">check</i>
       </Button>
     </div>
   );
@@ -249,6 +249,9 @@ export const HoveringInsertionPromptBoxCore = ({
   return (
     <div className="w-full flex flex-col items-start relative gap-2">
       {AdjustmentPromptComponent}
+      {filePointers.length > 0 && (
+        <IncludedFilesPreview includedFiles={filePointers} setIncludedFiles={setFilePointers} />
+      )}
       {sourceSearchWord !== undefined && (
         <SourceSearchBox
           searchTerm={sourceSearchWord}

CopilotKit/packages/react-textarea/src/components/hovering-toolbar/text-insertion-prompt-box/included-files-preview.tsx

@@ -0,0 +1,55 @@
+import { DocumentPointer } from "@copilotkit/react-core";
+import { Label } from "../../ui/label";
+import React from "react";
+import Chip from "@mui/material/Chip/Chip.js";
+import Avatar from "@mui/material/Avatar/Avatar.js";
+
+export interface IncludedFilesPreviewProps {
+  includedFiles: DocumentPointer[];
+  setIncludedFiles: React.Dispatch<React.SetStateAction<DocumentPointer[]>>;
+}
+
+export const IncludedFilesPreview = ({
+  includedFiles,
+  setIncludedFiles,
+}: IncludedFilesPreviewProps) => {
+  return (
+    <div className="flex flex-col gap-2 mt-2">
+      <Label className="">Included context:</Label>
+      <div className="flex flex-wrap gap-2">
+        {includedFiles.map((filePointer, index) => {
+          return (
+            <FileChipPreview
+              key={`file-${filePointer.sourceApplication}.${filePointer.name}`}
+              filePointer={filePointer}
+              onDelete={() => {
+                setIncludedFiles((prev) => prev.filter((fp) => fp !== filePointer));
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export interface FileChipPreviewProps {
+  filePointer: DocumentPointer;
+  onDelete: () => void;
+}
+
+export const FileChipPreview = ({ filePointer, onDelete }: FileChipPreviewProps) => {
+  return (
+    <Chip
+      label={filePointer.name}
+      onDelete={onDelete}
+      avatar={
+        <Avatar
+          src={filePointer.iconImageUri}
+          alt={filePointer.sourceApplication}
+          sx={{ backgroundColor: "transparent" }}
+        ></Avatar>
+      }
+    />
+  );
+};

CopilotKit/packages/react-textarea/src/styles.css

@@ -1,10 +1,3 @@
-@tailwind utilities;
-
-.copilot-textarea.with-branding::after {
-  content: ''; /* Initially empty because we overrdie this CSS dynamically and we want to avoid flashing */
-  position: absolute;
-}
+@import url("material-icons/iconfont/material-icons.css");
 
-.copilot-textarea.no-branding::after {
-  content: '';
-}
+@tailwind utilities;

CopilotKit/packages/react-textarea/tsup.config.ts

@@ -1,64 +1,16 @@
-import path from "path";
-import fs from "fs";
-import { defineConfig, Options } from "tsup-async-inject-style";
-import postcss from "postcss";
-import autoprefixer from "autoprefixer";
-import tailwindcss from "tailwindcss";
-import cssnano from "cssnano";
-import postcssPrefixSelector from "postcss-prefix-selector";
-import postcssImport from "postcss-import";
-import postcssNested from "postcss-nested";
+import { defineConfig, Options } from "tsup";
 
-export default defineConfig((options: Options) => {
-  return {
-    entry: ["src/**/*.ts", "src/**/*.tsx"],
-    format: ["esm", "cjs"],
-    dts: true,
-    minify: false,
-    external: ["react"],
-    splitting: false,
-    clean: true,
-    sourcemap: true,
-    exclude: [
-      "**/*.test.ts", // Exclude TypeScript test files
-      "**/*.test.tsx", // Exclude TypeScript React test files
-      "**/__tests__/*", // Exclude any files inside a __tests__ directory
-    ],
-    onSuccess: async () => {
-      // Create index.css file for backwards compatibility
-      fs.writeFileSync(
-        path.resolve(process.cwd(), "dist/index.css"),
-        `/* This is here for backwards compatibility */`,
-      );
-    },
-    injectStyle: async (_, filePath) => {
-      const cwd = process.cwd();
-      const outputPath = path.resolve(cwd, "dist/index.css");
-      const rawCSS = fs.readFileSync(filePath, "utf8");
-
-      const resultCSS = await postcss([
-        postcssImport(),
-        postcssNested(),
-        postcssPrefixSelector({
-          prefix: ".copilot-kit-textarea-css-scope",
-        }),
-        tailwindcss,
-        autoprefixer,
-        cssnano({ preset: "default" }),
-      ]).process(rawCSS, { from: filePath, to: outputPath });
-
-      if (resultCSS.css === undefined) {
-        throw new Error("No CSS output");
-      }
-
-      return `
-        if (globalThis.hasOwnProperty("document")) {
-          const style = document?.createElement("style");
-          style.innerHTML = '${resultCSS}';
-          document?.head.appendChild(style);
-        }
-      `;
-    },
-    ...options,
-  };
-});
+export default defineConfig((options: Options) => ({
+  entry: ["src/**/*.{ts,tsx}"],
+  format: ["esm", "cjs"],
+  dts: true,
+  minify: false,
+  external: ["react"],
+  sourcemap: true,
+  exclude: [
+    "**/*.test.ts", // Exclude TypeScript test files
+    "**/*.test.tsx", // Exclude TypeScript React test files
+    "**/__tests__/*", // Exclude any files inside a __tests__ directory
+  ],
+  ...options,
+}));