allow for external overrides of default styles, but default styles mirror textarea

Author: ataibarkai

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

@@ -25,6 +25,7 @@ import {
   BaseAutosuggestionsConfig,
   defaultBaseAutosuggestionsConfig,
 } from "../../../types/autosuggestions-config";
+import { defaultStylesConsideringClassname } from "./default-styles-considering-classname";
 import { renderElement } from "./render-element";
 import { makeRenderPlaceholderFunction } from "./render-placeholder";
 
@@ -132,9 +133,10 @@ export function BaseCopilotTextarea(
     ...propsToForward
   } = props;
 
+  const { className } = propsToForward;
   const moddedStyle = {
-    overflow: "auto",
-    ...style, // to merge in styles passed via props if any
+    ...defaultStylesConsideringClassname(className),
+    ...style,
   };
 
   return (

packages/react-textarea/src/components/copilot-textarea/base-copilot-textarea/default-styles-considering-classname.tsx

@@ -0,0 +1,45 @@
+// A slightly hacky way to get the default styles of a CopilotTextarea considering its className --
+// to allow for outside (tailwindCSS) overrides of the default styles.
+export function defaultStylesConsideringClassname(
+  className: string | undefined
+) {
+  let defaultStyles: React.CSSProperties = {};
+  const classNameChunks = (className ?? "").split(" ") ?? [];
+
+  // white background color
+  if (!classNameChunks.some((chunk) => chunk.startsWith("bg-"))) {
+    defaultStyles = {
+      ...defaultStyles,
+      backgroundColor: "white",
+    };
+  }
+
+  // overflow-y: auto
+  // if there is a overflow- which is NOT overflow-x, then we don't add overflow-y: auto
+  if (
+    !classNameChunks.some(
+      (chunk) =>
+        chunk.startsWith("overflow-") && !chunk.startsWith("overflow-x")
+    )
+  ) {
+    defaultStyles = {
+      ...defaultStyles,
+      overflowY: "auto",
+    };
+  }
+
+  // resize-y
+  // if there is a resize- which is NOT resize-x, then we don't add resize-y
+  if (
+    !classNameChunks.some(
+      (chunk) => chunk.startsWith("resize-") && !chunk.startsWith("resize-x")
+    )
+  ) {
+    defaultStyles = {
+      ...defaultStyles,
+      resize: "vertical",
+    };
+  }
+
+  return defaultStyles;
+}