@copilotkit/react-textarea 1.1.3-feat-runtime-remote-actions.2 → 1.2.1

package/dist/components/base-copilot-textarea/use-add-branding-css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/base-copilot-textarea/use-add-branding-css.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport function useAddBrandingCss(\n  suggestionStyleAugmented: React.CSSProperties,\n  disableBranding: boolean | undefined,\n) {\n  const cssSelector = \".copilot-textarea.with-branding\";\n  useEffect(() => {\n    if (disableBranding) {\n      return;\n    }\n\n    // ---\n    // 1: Add the CSS to the DOM\n    const styleEl = document.createElement(\"style\");\n    styleEl.id = \"dynamic-styles\";\n\n    // Build the CSS string dynamically\n    let dynamicStyles = Object.entries(suggestionStyleAugmented)\n      .map(([key, value]) => {\n        const kebabCaseKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\").toLowerCase();\n        return `${kebabCaseKey}: ${value};`;\n      })\n      .join(\" \");\n\n    // Append overrides for italics and font-size\n    dynamicStyles += `font-style: normal; font-size: x-small;`;\n    dynamicStyles += `content: \"CopilotKit\";`;\n    dynamicStyles += `bottom: 6px;`;\n    dynamicStyles += `right: 6px;`;\n    dynamicStyles += `pointer-events: none;`;\n    dynamicStyles += `font-weight: 200;`;\n    dynamicStyles += `padding: 0;`;\n    dynamicStyles += `margin: 0;`;\n    dynamicStyles += `border: 0;`;\n    dynamicStyles += `line-height: 1;`;\n    dynamicStyles += `position: absolute;`;\n\n    // Append it to the ::after class\n    styleEl.innerHTML = `\n      ${cssSelector}::after {\n        ${dynamicStyles}\n      }\n    `;\n\n    document.head.appendChild(styleEl);\n\n    // ---\n    // 2: Add the scroll listener (to keep the branding in the bottom right as the textarea scrolls)\n    const textarea = document.querySelector(cssSelector);\n    const handleScroll = () => {\n      const styleEl = document.getElementById(\"dynamic-styles\");\n      if (styleEl && textarea) {\n        const offsetFromBottom = -textarea.scrollTop + 6;\n        const offsetFromRight = -textarea.scrollLeft + 6;\n        styleEl.innerHTML = `\n          ${cssSelector}::after {\n            ${dynamicStyles}\n            bottom: ${offsetFromBottom}px;\n            right: ${offsetFromRight}px;\n          }\n        `;\n      }\n    };\n\n    textarea?.addEventListener(\"scroll\", handleScroll);\n\n    // Cleanup\n    return () => {\n      document.getElementById(\"dynamic-styles\")?.remove();\n      textarea?.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, [disableBranding, suggestionStyleAugmented]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAEnB,SAAS,kBACd,0BACA,iBACA;AACA,QAAM,cAAc;AACpB,8BAAU,MAAM;AACd,QAAI,iBAAiB;AACnB;AAAA,IACF;AAIA,UAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,KAAK;AAGb,QAAI,gBAAgB,OAAO,QAAQ,wBAAwB,EACxD,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AACrB,YAAM,eAAe,IAAI,QAAQ,gCAAgC,OAAO,EAAE,YAAY;AACtF,aAAO,GAAG,iBAAiB;AAAA,IAC7B,CAAC,EACA,KAAK,GAAG;AAGX,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AAGjB,YAAQ,YAAY;AAAA,QAChB;AAAA,UACE;AAAA;AAAA;AAIN,aAAS,KAAK,YAAY,OAAO;AAIjC,UAAM,WAAW,SAAS,cAAc,WAAW;AACnD,UAAM,eAAe,MAAM;AACzB,YAAMA,WAAU,SAAS,eAAe,gBAAgB;AACxD,UAAIA,YAAW,UAAU;AACvB,cAAM,mBAAmB,CAAC,SAAS,YAAY;AAC/C,cAAM,kBAAkB,CAAC,SAAS,aAAa;AAC/C,QAAAA,SAAQ,YAAY;AAAA,YAChB;AAAA,cACE;AAAA,sBACQ;AAAA,qBACD;AAAA;AAAA;AAAA,MAGf;AAAA,IACF;AAEA,yCAAU,iBAAiB,UAAU;AAGrC,WAAO,MAAM;AApEjB;AAqEM,qBAAS,eAAe,gBAAgB,MAAxC,mBAA2C;AAC3C,2CAAU,oBAAoB,UAAU;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,iBAAiB,wBAAwB,CAAC;AAChD;","names":["styleEl"]}
+{"version":3,"sources":["../../../src/components/base-copilot-textarea/use-add-branding-css.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport function useAddBrandingCss(\n  suggestionStyleAugmented: React.CSSProperties,\n  disableBranding: boolean | undefined,\n) {\n  const cssSelector = \".copilot-textarea.with-branding\";\n  useEffect(() => {\n    if (disableBranding) {\n      return;\n    }\n\n    // ---\n    // 1: Add the CSS to the DOM\n    const styleEl = document.createElement(\"style\");\n    styleEl.id = \"dynamic-styles\";\n\n    // Build the CSS string dynamically\n    let dynamicStyles = Object.entries(suggestionStyleAugmented)\n      .map(([key, value]) => {\n        const kebabCaseKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\").toLowerCase();\n        return `${kebabCaseKey}: ${value};`;\n      })\n      .join(\" \");\n\n    // Append overrides for italics and font-size\n    dynamicStyles += `font-style: normal; font-size: x-small;`;\n    dynamicStyles += `content: \"CopilotKit\";`;\n    dynamicStyles += `bottom: 6px;`;\n    dynamicStyles += `right: 6px;`;\n    dynamicStyles += `pointer-events: none;`;\n    dynamicStyles += `font-weight: 200;`;\n    dynamicStyles += `padding: 0;`;\n    dynamicStyles += `margin: 0;`;\n    dynamicStyles += `border: 0;`;\n    dynamicStyles += `line-height: 1;`;\n    dynamicStyles += `position: absolute;`;\n\n    // Append it to the ::after class\n    styleEl.innerHTML = `\n      ${cssSelector}::after {\n        ${dynamicStyles}\n      }\n    `;\n\n    document.head.appendChild(styleEl);\n\n    // ---\n    // 2: Add the scroll listener (to keep the branding in the bottom right as the textarea scrolls)\n    const textarea = document.querySelector(cssSelector);\n    const handleScroll = () => {\n      const styleEl = document.getElementById(\"dynamic-styles\");\n      if (styleEl && textarea) {\n        const offsetFromBottom = -textarea.scrollTop + 6;\n        const offsetFromRight = -textarea.scrollLeft + 6;\n        styleEl.innerHTML = `\n          ${cssSelector}::after {\n            ${dynamicStyles}\n            bottom: ${offsetFromBottom}px;\n            right: ${offsetFromRight}px;\n          }\n        `;\n      }\n    };\n\n    textarea?.addEventListener(\"scroll\", handleScroll);\n\n    // Cleanup\n    return () => {\n      document.getElementById(\"dynamic-styles\")?.remove();\n      textarea?.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, [disableBranding, suggestionStyleAugmented]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAEnB,SAAS,kBACd,0BACA,iBACA;AACA,QAAM,cAAc;AACpB,8BAAU,MAAM;AACd,QAAI,iBAAiB;AACnB;AAAA,IACF;AAIA,UAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,KAAK;AAGb,QAAI,gBAAgB,OAAO,QAAQ,wBAAwB,EACxD,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AACrB,YAAM,eAAe,IAAI,QAAQ,gCAAgC,OAAO,EAAE,YAAY;AACtF,aAAO,GAAG,YAAY,KAAK,KAAK;AAAA,IAClC,CAAC,EACA,KAAK,GAAG;AAGX,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AAGjB,YAAQ,YAAY;AAAA,QAChB,WAAW;AAAA,UACT,aAAa;AAAA;AAAA;AAInB,aAAS,KAAK,YAAY,OAAO;AAIjC,UAAM,WAAW,SAAS,cAAc,WAAW;AACnD,UAAM,eAAe,MAAM;AACzB,YAAMA,WAAU,SAAS,eAAe,gBAAgB;AACxD,UAAIA,YAAW,UAAU;AACvB,cAAM,mBAAmB,CAAC,SAAS,YAAY;AAC/C,cAAM,kBAAkB,CAAC,SAAS,aAAa;AAC/C,QAAAA,SAAQ,YAAY;AAAA,YAChB,WAAW;AAAA,cACT,aAAa;AAAA,sBACL,gBAAgB;AAAA,qBACjB,eAAe;AAAA;AAAA;AAAA,MAG9B;AAAA,IACF;AAEA,yCAAU,iBAAiB,UAAU;AAGrC,WAAO,MAAM;AApEjB;AAqEM,qBAAS,eAAe,gBAAgB,MAAxC,mBAA2C;AAC3C,2CAAU,oBAAoB,UAAU;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,iBAAiB,wBAAwB,CAAC;AAChD;","names":["styleEl"]}

package/dist/components/base-copilot-textarea/use-add-branding-css.mjs

@@ -1,7 +1,57 @@
-import {
-  useAddBrandingCss
-} from "../../chunk-7LSRNPNI.mjs";
-import "../../chunk-MRXNTQOX.mjs";
+// src/components/base-copilot-textarea/use-add-branding-css.tsx
+import { useEffect } from "react";
+function useAddBrandingCss(suggestionStyleAugmented, disableBranding) {
+  const cssSelector = ".copilot-textarea.with-branding";
+  useEffect(() => {
+    if (disableBranding) {
+      return;
+    }
+    const styleEl = document.createElement("style");
+    styleEl.id = "dynamic-styles";
+    let dynamicStyles = Object.entries(suggestionStyleAugmented).map(([key, value]) => {
+      const kebabCaseKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+      return `${kebabCaseKey}: ${value};`;
+    }).join(" ");
+    dynamicStyles += `font-style: normal; font-size: x-small;`;
+    dynamicStyles += `content: "CopilotKit";`;
+    dynamicStyles += `bottom: 6px;`;
+    dynamicStyles += `right: 6px;`;
+    dynamicStyles += `pointer-events: none;`;
+    dynamicStyles += `font-weight: 200;`;
+    dynamicStyles += `padding: 0;`;
+    dynamicStyles += `margin: 0;`;
+    dynamicStyles += `border: 0;`;
+    dynamicStyles += `line-height: 1;`;
+    dynamicStyles += `position: absolute;`;
+    styleEl.innerHTML = `
+      ${cssSelector}::after {
+        ${dynamicStyles}
+      }
+    `;
+    document.head.appendChild(styleEl);
+    const textarea = document.querySelector(cssSelector);
+    const handleScroll = () => {
+      const styleEl2 = document.getElementById("dynamic-styles");
+      if (styleEl2 && textarea) {
+        const offsetFromBottom = -textarea.scrollTop + 6;
+        const offsetFromRight = -textarea.scrollLeft + 6;
+        styleEl2.innerHTML = `
+          ${cssSelector}::after {
+            ${dynamicStyles}
+            bottom: ${offsetFromBottom}px;
+            right: ${offsetFromRight}px;
+          }
+        `;
+      }
+    };
+    textarea == null ? void 0 : textarea.addEventListener("scroll", handleScroll);
+    return () => {
+      var _a;
+      (_a = document.getElementById("dynamic-styles")) == null ? void 0 : _a.remove();
+      textarea == null ? void 0 : textarea.removeEventListener("scroll", handleScroll);
+    };
+  }, [disableBranding, suggestionStyleAugmented]);
+}
 export {
   useAddBrandingCss
 };

package/dist/components/base-copilot-textarea/use-add-branding-css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../../../src/components/base-copilot-textarea/use-add-branding-css.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport function useAddBrandingCss(\n  suggestionStyleAugmented: React.CSSProperties,\n  disableBranding: boolean | undefined,\n) {\n  const cssSelector = \".copilot-textarea.with-branding\";\n  useEffect(() => {\n    if (disableBranding) {\n      return;\n    }\n\n    // ---\n    // 1: Add the CSS to the DOM\n    const styleEl = document.createElement(\"style\");\n    styleEl.id = \"dynamic-styles\";\n\n    // Build the CSS string dynamically\n    let dynamicStyles = Object.entries(suggestionStyleAugmented)\n      .map(([key, value]) => {\n        const kebabCaseKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\").toLowerCase();\n        return `${kebabCaseKey}: ${value};`;\n      })\n      .join(\" \");\n\n    // Append overrides for italics and font-size\n    dynamicStyles += `font-style: normal; font-size: x-small;`;\n    dynamicStyles += `content: \"CopilotKit\";`;\n    dynamicStyles += `bottom: 6px;`;\n    dynamicStyles += `right: 6px;`;\n    dynamicStyles += `pointer-events: none;`;\n    dynamicStyles += `font-weight: 200;`;\n    dynamicStyles += `padding: 0;`;\n    dynamicStyles += `margin: 0;`;\n    dynamicStyles += `border: 0;`;\n    dynamicStyles += `line-height: 1;`;\n    dynamicStyles += `position: absolute;`;\n\n    // Append it to the ::after class\n    styleEl.innerHTML = `\n      ${cssSelector}::after {\n        ${dynamicStyles}\n      }\n    `;\n\n    document.head.appendChild(styleEl);\n\n    // ---\n    // 2: Add the scroll listener (to keep the branding in the bottom right as the textarea scrolls)\n    const textarea = document.querySelector(cssSelector);\n    const handleScroll = () => {\n      const styleEl = document.getElementById(\"dynamic-styles\");\n      if (styleEl && textarea) {\n        const offsetFromBottom = -textarea.scrollTop + 6;\n        const offsetFromRight = -textarea.scrollLeft + 6;\n        styleEl.innerHTML = `\n          ${cssSelector}::after {\n            ${dynamicStyles}\n            bottom: ${offsetFromBottom}px;\n            right: ${offsetFromRight}px;\n          }\n        `;\n      }\n    };\n\n    textarea?.addEventListener(\"scroll\", handleScroll);\n\n    // Cleanup\n    return () => {\n      document.getElementById(\"dynamic-styles\")?.remove();\n      textarea?.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, [disableBranding, suggestionStyleAugmented]);\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAEnB,SAAS,kBACd,0BACA,iBACA;AACA,QAAM,cAAc;AACpB,YAAU,MAAM;AACd,QAAI,iBAAiB;AACnB;AAAA,IACF;AAIA,UAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,KAAK;AAGb,QAAI,gBAAgB,OAAO,QAAQ,wBAAwB,EACxD,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AACrB,YAAM,eAAe,IAAI,QAAQ,gCAAgC,OAAO,EAAE,YAAY;AACtF,aAAO,GAAG,YAAY,KAAK,KAAK;AAAA,IAClC,CAAC,EACA,KAAK,GAAG;AAGX,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AAGjB,YAAQ,YAAY;AAAA,QAChB,WAAW;AAAA,UACT,aAAa;AAAA;AAAA;AAInB,aAAS,KAAK,YAAY,OAAO;AAIjC,UAAM,WAAW,SAAS,cAAc,WAAW;AACnD,UAAM,eAAe,MAAM;AACzB,YAAMA,WAAU,SAAS,eAAe,gBAAgB;AACxD,UAAIA,YAAW,UAAU;AACvB,cAAM,mBAAmB,CAAC,SAAS,YAAY;AAC/C,cAAM,kBAAkB,CAAC,SAAS,aAAa;AAC/C,QAAAA,SAAQ,YAAY;AAAA,YAChB,WAAW;AAAA,cACT,aAAa;AAAA,sBACL,gBAAgB;AAAA,qBACjB,eAAe;AAAA;AAAA;AAAA,MAG9B;AAAA,IACF;AAEA,yCAAU,iBAAiB,UAAU;AAGrC,WAAO,MAAM;AApEjB;AAqEM,qBAAS,eAAe,gBAAgB,MAAxC,mBAA2C;AAC3C,2CAAU,oBAAoB,UAAU;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,iBAAiB,wBAAwB,CAAC;AAChD;","names":["styleEl"]}

package/dist/components/copilot-textarea/copilot-textarea.d.mts

@@ -0,0 +1,165 @@
+import React__default from 'react';
+import { BaseCopilotTextareaProps } from '../../types/base/index.mjs';
+import { HTMLCopilotTextAreaElement } from '../../types/html-copilot-textarea-element.mjs';
+import { AutosuggestionsConfigUserSpecified } from '../../types/autosuggestions-config/autosuggestions-config-user-specified.mjs';
+import '../../types/base/base-autosuggestions-config.mjs';
+import '../../types/base/autosuggestions-bare-function.mjs';
+import '@copilotkit/react-core';
+import '../../types/autosuggestions-config/autosuggestions-config.mjs';
+import '../../types/autosuggestions-config/suggestions-api-config.mjs';
+import '@copilotkit/runtime-client-gql';
+import '../../types/autosuggestions-config/subtypes/make-system-prompt.mjs';
+import '../../types/autosuggestions-config/insertions-api-config.mjs';
+import '../../types/autosuggestions-config/editing-api-config.mjs';
+
+/**
+ * <br/>
+ * <img src="/images/CopilotTextarea.gif" width="500" />
+ *
+ * `<CopilotTextarea>` is a React component that acts as a drop-in replacement for the standard `<textarea>`,
+ *  offering enhanced autocomplete features powered by AI. It is context-aware, integrating seamlessly with the
+ * [`useCopilotReadable`](/reference/hooks/useCopilotReadable) hook to provide intelligent suggestions based on the application context.
+ *
+ * In addition, it provides a hovering editor window (available by default via `Cmd + K` on Mac and `Ctrl + K` on Windows) that allows the user to
+ * suggest changes to the text, for example providing a summary or rephrasing the text.
+ *
+ * ## Example
+ *
+ * ```tsx
+ * import { CopilotTextarea } from '@copilot/react-textarea';
+ * <CopilotTextarea
+ *   autosuggestionsConfig={{
+ *     textareaPurpose:
+ *      "the body of an email message",
+ *     chatApiConfigs: {},
+ *   }}
+ * />
+ * ```
+ *
+ * ## Usage
+ *
+ * ### Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ### Usage
+ *
+ * Use the CopilotTextarea component in your React application similarly to a standard `<textarea />`,
+ * with additional configurations for AI-powered features.
+ *
+ * For example:
+ *
+ * ```tsx
+ * import { useState } from "react";
+ * import { CopilotTextarea } from "@copilotkit/react-textarea";
+ * export function ExampleComponent() {
+ *   const [text, setText] = useState("");
+ *
+ *   return (
+ *     <CopilotTextarea
+ *       className="custom-textarea-class"
+ *       value={text}
+ *       onValueChange={(value: string) => setText(value)}
+ *       placeholder="Enter your text here..."
+ *       autosuggestionsConfig={{
+ *         textareaPurpose: "Provide context or purpose of the textarea.",
+ *         chatApiConfigs: {
+ *           suggestionsApiConfig: {
+ *             maxTokens: 20,
+ *             stop: [".", "?", "!"],
+ *           },
+ *         },
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ### 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"
+ * ...
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/concepts/customize-look-and-feel) guide.
+ * */
+
+interface CopilotTextareaProps extends Omit<BaseCopilotTextareaProps, "baseAutosuggestionsConfig"> {
+    /**
+     * Configuration settings for the autosuggestions feature.
+     * For full reference, [check the interface on GitHub](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/base/base-copilot-textarea-props.tsx#L8).
+     *
+     * <PropertyReference name="textareaPurpose" type="string" required={true} >
+     *   The purpose of the text area in plain text.
+     *
+     *   Example: *"The body of the email response"*
+     * </PropertyReference>
+     *
+     * <PropertyReference name="chatApiConfigs" type="ChatApiConfigs" >
+     *   The chat API configurations.
+     *
+     *   <strong>NOTE:</strong> You must provide specify at least one of `suggestionsApiConfig` or `insertionApiConfig`.
+     *
+     *   <PropertyReference name="suggestionsApiConfig" type="SuggestionsApiConfig">
+     *       For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/suggestions-api-config.tsx#L4).
+     *   </PropertyReference>
+     *   <PropertyReference name="insertionApiConfig" type="InsertionApiConfig">
+     *       For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/insertions-api-config.tsx#L4).
+     *   </PropertyReference>
+     * </PropertyReference>
+     *
+     * <PropertyReference name="disabled" type="boolean" >
+     *   Whether the textarea is disabled.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="disableBranding" type="boolean" >
+     *   Whether to disable the CopilotKit branding.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="placeholderStyle" type="React.CSSProperties" >
+     *   Specifies the CSS styles to apply to the placeholder text.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="suggestionsStyle" type="React.CSSProperties" >
+     *   Specifies the CSS styles to apply to the suggestions list.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="hoverMenuClassname" type="string" >
+     *   A class name to apply to the editor popover window.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="value" type="string" >
+     *   The initial value of the textarea. Can be controlled via `onValueChange`.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="onValueChange" type="(value: string) => void" >
+     *   Callback invoked when the value of the textarea changes.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="onChange" type="(event: React.ChangeEvent<HTMLTextAreaElement>) => void" >
+     *   Callback invoked when a `change` event is triggered on the textarea element.
+     * </PropertyReference>
+     *
+     * <PropertyReference name="shortcut" type="string" >
+     *   The shortcut to use to open the editor popover window. Default is `"Cmd-k"`.
+     * </PropertyReference>
+     */
+    autosuggestionsConfig: AutosuggestionsConfigUserSpecified;
+}
+/**
+ * A copilot textarea that uses the standard autosuggestions function.
+ */
+declare const CopilotTextarea: React__default.ForwardRefExoticComponent<CopilotTextareaProps & React__default.RefAttributes<HTMLCopilotTextAreaElement>>;
+
+export { CopilotTextarea, type CopilotTextareaProps };

package/dist/components/copilot-textarea/copilot-textarea.d.ts

@@ -27,8 +27,6 @@ import '../../types/autosuggestions-config/editing-api-config.js';
  *
  * ```tsx
  * import { CopilotTextarea } from '@copilot/react-textarea';
- * import "@copilotkit/react-textarea/styles.css";
- *
  * <CopilotTextarea
  *   autosuggestionsConfig={{
  *     textareaPurpose:
@@ -58,8 +56,6 @@ import '../../types/autosuggestions-config/editing-api-config.js';
  * ```tsx
  * import { useState } from "react";
  * import { CopilotTextarea } from "@copilotkit/react-textarea";
- * import "@copilotkit/react-textarea/styles.css";
- *
  * export function ExampleComponent() {
  *   const [text, setText] = useState("");
  *
@@ -86,10 +82,8 @@ import '../../types/autosuggestions-config/editing-api-config.js';
  * ### 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" {2}
+ * ```tsx fileName="YourRootComponent.tsx"
  * ...
- * import "@copilotkit/react-ui/styles.css";
- *
  * export function YourRootComponent() {
  *   return (
  *     <CopilotKit>
@@ -168,4 +162,4 @@ interface CopilotTextareaProps extends Omit<BaseCopilotTextareaProps, "baseAutos
  */
 declare const CopilotTextarea: React__default.ForwardRefExoticComponent<CopilotTextareaProps & React__default.RefAttributes<HTMLCopilotTextAreaElement>>;
 
-export { CopilotTextarea, CopilotTextareaProps };
+export { CopilotTextarea, type CopilotTextareaProps };