@copilotkit/react-textarea 1.51.4 → 1.51.5-next.1

package/dist/index.mjs

@@ -1,64 +1,1882 @@
 "use client";
-import "./chunk-DE5K76I2.mjs";
-import "./chunk-WADHCMPK.mjs";
-import "./chunk-MMVDU6DF.mjs";
-import {
-  CopilotTextarea
-} from "./chunk-E7C63KQP.mjs";
-import "./chunk-UIBUYQPG.mjs";
-import "./chunk-M7GTVHFB.mjs";
-import "./chunk-RUV6NBIF.mjs";
-import {
-  defaultAutosuggestionsConfig
-} from "./chunk-MQXYWOE2.mjs";
-import "./chunk-MCNXIA4Q.mjs";
-import "./chunk-QFXR6DOA.mjs";
-import "./chunk-VH7INUR5.mjs";
-import {
-  BaseCopilotTextarea
-} from "./chunk-SWX3MRZ4.mjs";
-import "./chunk-2C7O2EVM.mjs";
-import "./chunk-EGBZSVLK.mjs";
-import "./chunk-ZBP4SABT.mjs";
-import "./chunk-VBPZTMXB.mjs";
-import "./chunk-7GZWOXE4.mjs";
-import "./chunk-PDFIUPCS.mjs";
-import "./chunk-TGN3YVSO.mjs";
-import "./chunk-5UNJXFUO.mjs";
-import "./chunk-VVRGAA43.mjs";
-import "./chunk-AZ7RF6ED.mjs";
-import "./chunk-L7VVZH4Q.mjs";
-import "./chunk-ZWI5KPQ5.mjs";
-import "./chunk-3WLGLZTY.mjs";
-import "./chunk-IBZTDP72.mjs";
-import "./chunk-7V4ORVQX.mjs";
-import "./chunk-2X3CZVEP.mjs";
-import "./chunk-UB4Y22EF.mjs";
-import "./chunk-MQBPYOOZ.mjs";
-import "./chunk-AHNPJMBR.mjs";
-import "./chunk-ARLBRSB7.mjs";
-import "./chunk-CFCMZVQ2.mjs";
-import "./chunk-LYNGBKJR.mjs";
-import "./chunk-WXKPRNNO.mjs";
-import "./chunk-VYLLLBUP.mjs";
-import "./chunk-WJHSY5T6.mjs";
-import {
-  defaultBaseAutosuggestionsConfig
-} from "./chunk-O4WCM57A.mjs";
-import "./chunk-NFMCLTJU.mjs";
-import "./chunk-FTG7P3NP.mjs";
-import "./chunk-YINY56BI.mjs";
-import "./chunk-IU3WTXLQ.mjs";
-import "./chunk-H4VKQGVU.mjs";
-import "./chunk-DZMQBOPG.mjs";
-import "./chunk-CMKGYQFX.mjs";
-import "./chunk-A6YGJFQI.mjs";
-import "./chunk-KNQIEOFP.mjs";
-import "./chunk-MRXNTQOX.mjs";
-export {
-  BaseCopilotTextarea,
-  CopilotTextarea,
-  defaultAutosuggestionsConfig,
-  defaultBaseAutosuggestionsConfig
+
+import * as React$1 from "react";
+import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Editor, Element, Node, Operation, Path, Point, Range, Text, Transforms, createEditor } from "slate";
+import { Editable, ReactEditor, Slate, useSlate, useSlateSelection, useSlateSelector, withReact } from "slate-react";
+import { twMerge } from "tailwind-merge";
+import { clsx } from "clsx";
+import { HistoryEditor } from "slate-history";
+import { defaultCopilotContextCategories, useCopilotContext } from "@copilotkit/react-core";
+import { COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, isMacOS } from "@copilotkit/shared";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { css, cx } from "@emotion/css";
+import ReactDOM from "react-dom";
+import { Command } from "cmdk";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import Chip from "@mui/material/Chip/Chip.js";
+import Avatar from "@mui/material/Avatar/Avatar.js";
+import { CopilotRequestType, Role, TextMessage, convertGqlOutputToMessages, convertMessagesToGqlInput, filterAgentStateMessages } from "@copilotkit/runtime-client-gql";
+import merge from "lodash.merge";
+
+//#region src/lib/debouncer.ts
+var Debouncer = class {
+	constructor(wait) {
+		this.wait = wait;
+		this.debounce = async (func, ...args) => {
+			this.cancel();
+			this.timeoutId = setTimeout(async () => {
+				try {
+					this.activeAbortController = new AbortController();
+					await func(...args, this.activeAbortController.signal);
+					this.activeAbortController = void 0;
+				} catch (error) {}
+			}, this.wait);
+		};
+		this.cancel = () => {
+			if (this.activeAbortController) {
+				this.activeAbortController.abort();
+				this.activeAbortController = void 0;
+			}
+			if (this.timeoutId !== void 0) {
+				clearTimeout(this.timeoutId);
+				this.timeoutId = void 0;
+			}
+		};
+	}
 };
+
+//#endregion
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+const arraysAreEqual = (arr1, arr2) => arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
+function nullableCompatibleEqualityCheck(naiveEqualityCheck, a, b) {
+	if (a === null || a === void 0 || b === null || b === void 0) return a === b;
+	return naiveEqualityCheck(a, b);
+}
+
+//#endregion
+//#region src/types/base/editor-autocomplete-state.ts
+function areEqual_autocompleteState(prev, next) {
+	return prev.cursorPoint.offset === next.cursorPoint.offset && arraysAreEqual(prev.cursorPoint.path, next.cursorPoint.path) && prev.textBeforeCursor === next.textBeforeCursor && prev.textAfterCursor === next.textAfterCursor;
+}
+
+//#endregion
+//#region src/hooks/base-copilot-textarea-implementation/use-autosuggestions.ts
+function useAutosuggestions(debounceTime, shouldAcceptAutosuggestionOnKeyPress, shouldAcceptAutosuggestionOnTouch, autosuggestionFunction, insertAutocompleteSuggestion, disableWhenEmpty, disabled) {
+	const [previousAutocompleteState, setPreviousAutocompleteState] = useState(null);
+	const [currentAutocompleteSuggestion, setCurrentAutocompleteSuggestion] = useState(null);
+	const awaitForAndAppendSuggestion = useCallback(async (editorAutocompleteState, abortSignal) => {
+		if (disabled) return;
+		if (disableWhenEmpty && editorAutocompleteState.textBeforeCursor === "" && editorAutocompleteState.textAfterCursor === "") return;
+		const suggestion = await autosuggestionFunction(editorAutocompleteState, abortSignal);
+		if (!suggestion || abortSignal.aborted) throw new DOMException("Aborted", "AbortError");
+		setCurrentAutocompleteSuggestion({
+			text: suggestion,
+			point: editorAutocompleteState.cursorPoint
+		});
+	}, [
+		autosuggestionFunction,
+		setCurrentAutocompleteSuggestion,
+		disableWhenEmpty,
+		disabled
+	]);
+	const debouncedFunction = useMemo(() => new Debouncer(debounceTime), [debounceTime]);
+	useEffect(() => {
+		return () => {
+			debouncedFunction.cancel();
+			setCurrentAutocompleteSuggestion(null);
+		};
+	}, [debouncedFunction, disabled]);
+	const onChange = useCallback((newEditorState) => {
+		const editorStateHasChanged = !nullableCompatibleEqualityCheck(areEqual_autocompleteState, previousAutocompleteState, newEditorState);
+		setPreviousAutocompleteState(newEditorState);
+		if (!editorStateHasChanged) return;
+		setCurrentAutocompleteSuggestion(null);
+		if (newEditorState) debouncedFunction.debounce(awaitForAndAppendSuggestion, newEditorState);
+		else debouncedFunction.cancel();
+	}, [
+		previousAutocompleteState,
+		setPreviousAutocompleteState,
+		debouncedFunction,
+		awaitForAndAppendSuggestion,
+		setCurrentAutocompleteSuggestion
+	]);
+	const keyDownOrTouchHandler = useCallback((event) => {
+		if (currentAutocompleteSuggestion) {
+			if (event.type === "touchstart" ? shouldAcceptAutosuggestionOnTouch(event) : shouldAcceptAutosuggestionOnKeyPress(event)) {
+				event.preventDefault();
+				insertAutocompleteSuggestion(currentAutocompleteSuggestion);
+				setCurrentAutocompleteSuggestion(null);
+			}
+		}
+	}, [
+		currentAutocompleteSuggestion,
+		setCurrentAutocompleteSuggestion,
+		insertAutocompleteSuggestion,
+		shouldAcceptAutosuggestionOnKeyPress
+	]);
+	return {
+		currentAutocompleteSuggestion,
+		onChangeHandler: onChange,
+		onKeyDownHandler: keyDownOrTouchHandler,
+		onTouchStartHandler: keyDownOrTouchHandler
+	};
+}
+
+//#endregion
+//#region src/lib/slatejs-edits/with-partial-history.ts
+const withPartialHistory = (editor, shouldSave) => {
+	const e = editor;
+	const { apply } = e;
+	e.history = {
+		undos: [],
+		redos: []
+	};
+	e.redo = () => {
+		const { history } = e;
+		const { redos } = history;
+		if (redos.length > 0) {
+			const batch = redos[redos.length - 1];
+			if (batch.selectionBefore) Transforms.setSelection(e, batch.selectionBefore);
+			HistoryEditor.withoutSaving(e, () => {
+				Editor.withoutNormalizing(e, () => {
+					for (const op of batch.operations) e.apply(op);
+				});
+			});
+			history.redos.pop();
+			e.writeHistory("undos", batch);
+		}
+	};
+	e.undo = () => {
+		const { history } = e;
+		const { undos } = history;
+		if (undos.length > 0) {
+			const batch = undos[undos.length - 1];
+			HistoryEditor.withoutSaving(e, () => {
+				Editor.withoutNormalizing(e, () => {
+					const inverseOps = batch.operations.map(Operation.inverse).reverse();
+					for (const op of inverseOps) e.apply(op);
+					if (batch.selectionBefore) Transforms.setSelection(e, batch.selectionBefore);
+				});
+			});
+			e.writeHistory("redos", batch);
+			history.undos.pop();
+		}
+	};
+	e.apply = (op) => {
+		const { operations, history } = e;
+		const { undos } = history;
+		const lastBatch = undos[undos.length - 1];
+		const lastOp = lastBatch && lastBatch.operations[lastBatch.operations.length - 1];
+		let save = HistoryEditor.isSaving(e);
+		let merge = HistoryEditor.isMerging(e);
+		if (save == null) save = shouldSave(op, lastOp);
+		if (save) {
+			if (merge == null) if (lastBatch == null) merge = false;
+			else if (operations.length !== 0) merge = true;
+			else merge = shouldMerge(op, lastOp);
+			if (lastBatch && merge) lastBatch.operations.push(op);
+			else {
+				const batch = {
+					operations: [op],
+					selectionBefore: e.selection
+				};
+				e.writeHistory("undos", batch);
+			}
+			while (undos.length > 100) undos.shift();
+			history.redos = [];
+		}
+		apply(op);
+	};
+	e.writeHistory = (stack, batch) => {
+		e.history[stack].push(batch);
+	};
+	return e;
+};
+/**
+* Check whether to merge an operation into the previous operation.
+*/
+const shouldMerge = (op, prev) => {
+	if (prev && op.type === "insert_text" && prev.type === "insert_text" && op.offset === prev.offset + prev.text.length && Path.equals(op.path, prev.path)) return true;
+	if (prev && op.type === "remove_text" && prev.type === "remove_text" && op.offset + op.text.length === prev.offset && Path.equals(op.path, prev.path)) return true;
+	return false;
+};
+const defaultShouldSave = (op, prev) => {
+	if (op.type === "set_selection") return false;
+	return true;
+};
+
+//#endregion
+//#region src/hooks/base-copilot-textarea-implementation/use-copilot-textarea-editor.tsx
+const shouldSave = (op, prev) => {
+	const excludedNodeType = "suggestion";
+	if (op.type === "insert_node" && Element.isElement(op.node) && op.node.type === excludedNodeType) return false;
+	if (op.type === "remove_node" && Element.isElement(op.node) && op.node.type === excludedNodeType) return false;
+	if (op.type === "set_node" && "type" in op.newProperties && op.newProperties.type === excludedNodeType) return false;
+	if (op.type == "set_node" && "type" in op.properties && op.properties.type === excludedNodeType) return false;
+	if (op.type === "merge_node" && "type" in op.properties && op.properties.type === excludedNodeType) return false;
+	if (op.type === "split_node" && "type" in op.properties && op.properties.type === excludedNodeType) return false;
+	return defaultShouldSave(op, prev);
+};
+function useCopilotTextareaEditor() {
+	return useMemo(() => {
+		const editor = withPartialHistory(withReact(createEditor()), shouldSave);
+		const { isVoid } = editor;
+		editor.isVoid = (element) => {
+			switch (element.type) {
+				case "suggestion": return true;
+				default: return isVoid(element);
+			}
+		};
+		const { markableVoid } = editor;
+		editor.markableVoid = (element) => {
+			switch (element.type) {
+				case "suggestion": return true;
+				default: return markableVoid(element);
+			}
+		};
+		const { isInline } = editor;
+		editor.isInline = (element) => {
+			switch (element.type) {
+				case "suggestion": return element.inline;
+				default: return isInline(element);
+			}
+		};
+		return editor;
+	}, []);
+}
+
+//#endregion
+//#region src/lib/get-text-around-cursor.ts
+function getTextAroundCollapsedCursor(editor) {
+	const { selection } = editor;
+	if (!selection || !Range.isCollapsed(selection)) return null;
+	const cursorPoint = selection.anchor;
+	const beforeRange = {
+		anchor: Editor.start(editor, []),
+		focus: cursorPoint
+	};
+	const afterRange = {
+		anchor: cursorPoint,
+		focus: Editor.end(editor, [])
+	};
+	return {
+		cursorPoint,
+		textBeforeCursor: extractTextWithNewlines(editor, beforeRange),
+		textAfterCursor: extractTextWithNewlines(editor, afterRange)
+	};
+}
+function getTextAroundSelection(editor) {
+	const { selection } = editor;
+	if (!selection) return null;
+	const wellOrderedSelection = wellOrderedRange(selection);
+	const beforeRange = {
+		anchor: Editor.start(editor, []),
+		focus: wellOrderedSelection.anchor
+	};
+	const afterRange = {
+		anchor: wellOrderedSelection.focus,
+		focus: Editor.end(editor, [])
+	};
+	const before = extractTextWithNewlines(editor, beforeRange);
+	const after = extractTextWithNewlines(editor, afterRange);
+	return {
+		selection: wellOrderedSelection,
+		textBeforeCursor: before,
+		selectedText: extractTextWithNewlines(editor, wellOrderedSelection),
+		textAfterCursor: after
+	};
+}
+function getFullEditorTextWithNewlines(editor) {
+	return extractTextWithNewlines(editor, {
+		anchor: Editor.start(editor, []),
+		focus: Editor.end(editor, [])
+	});
+}
+function extractTextWithNewlines(editor, range) {
+	const voids = false;
+	const [start, end] = Range.edges(range);
+	let text = "";
+	let lastBlock = null;
+	for (const [node, path] of Editor.nodes(editor, {
+		at: range,
+		match: Text.isText,
+		voids
+	})) {
+		let t = node.text;
+		const [block] = Editor.above(editor, {
+			at: path,
+			match: (n) => Element.isElement(n) && n.type === "paragraph"
+		}) || [null];
+		if (lastBlock !== block && block) {
+			if (lastBlock) text += "\n";
+			lastBlock = block;
+		}
+		if (Path.equals(path, end.path)) t = t.slice(0, end.offset);
+		if (Path.equals(path, start.path)) t = t.slice(start.offset);
+		text += t;
+	}
+	return text;
+}
+function wellOrderedRange(range) {
+	const { anchor, focus } = range;
+	if (Point.isBefore(anchor, focus)) return range;
+	return {
+		anchor: focus,
+		focus: anchor
+	};
+}
+
+//#endregion
+//#region src/lib/slatejs-edits/replace-text.ts
+function replaceEditorText(editor, newText) {
+	Transforms.delete(editor, { at: {
+		anchor: Editor.start(editor, []),
+		focus: Editor.end(editor, [])
+	} });
+	if (newText && newText !== "") Transforms.insertNodes(editor, [{
+		type: "paragraph",
+		children: [{ text: newText }]
+	}], { at: [0] });
+}
+
+//#endregion
+//#region src/hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref.ts
+function usePopulateCopilotTextareaRef(editor, ref) {
+	React.useImperativeHandle(ref, () => {
+		class Combined {
+			constructor(customMethods, editorHtmlElement) {
+				this.customMethods = customMethods;
+				this.editorHtmlElement = editorHtmlElement;
+			}
+			get(target, propKey) {
+				if (this.isKeyOfCustomMethods(propKey)) {
+					const value = this.customMethods[propKey];
+					if (typeof value === "function") return value.bind(this.customMethods);
+					return value;
+				} else if (this.isKeyOfHTMLElement(propKey)) {
+					const value = this.editorHtmlElement[propKey];
+					if (typeof value === "function") return value.bind(this.editorHtmlElement);
+					return value;
+				}
+			}
+			set(target, propKey, value) {
+				if (this.isKeyOfCustomMethods(propKey)) this.customMethods[propKey] = value;
+				else if (this.isKeyOfHTMLElement(propKey)) this.editorHtmlElement[propKey] = value;
+				else target[propKey] = value;
+				return true;
+			}
+			isKeyOfCustomMethods(key) {
+				return key in this.customMethods;
+			}
+			isKeyOfHTMLElement(key) {
+				return key in this.editorHtmlElement;
+			}
+		}
+		const handler = {
+			get(target, propKey) {
+				return target.get(target, propKey);
+			},
+			set(target, propKey, value) {
+				return target.set(target, propKey, value);
+			}
+		};
+		class CustomMethods {
+			constructor(editor) {
+				this.editor = editor;
+			}
+			focus() {
+				ReactEditor.focus(this.editor);
+			}
+			blur() {
+				ReactEditor.blur(this.editor);
+			}
+			get value() {
+				return getFullEditorTextWithNewlines(this.editor);
+			}
+			set value(value) {
+				replaceEditorText(this.editor, value);
+			}
+		}
+		const editorHtmlElement = ReactEditor.toDOMNode(editor, editor);
+		const combined = new Combined(new CustomMethods(editor), editorHtmlElement);
+		return new Proxy(combined, handler);
+	}, [editor]);
+}
+
+//#endregion
+//#region src/lib/slatejs-edits/add-autocompletions.ts
+function addAutocompletionsToEditor(editor, newSuggestion, point) {
+	const editorPosition = editor.selection;
+	Transforms.insertNodes(editor, [{
+		type: "suggestion",
+		inline: true,
+		content: newSuggestion,
+		children: [{ text: "" }]
+	}], { at: point });
+	if (editorPosition) editor.selection = editorPosition;
+}
+
+//#endregion
+//#region src/lib/slatejs-edits/clear-autocompletions.ts
+function clearAutocompletionsFromEditor(editor) {
+	const paths = [];
+	for (const [node, path] of Node.nodes(editor)) if (Element.isElement(node) && node.type === "suggestion") paths.push(path);
+	for (const path of paths) try {
+		Transforms.removeNodes(editor, { at: path });
+	} catch (e) {
+		console.log("CopilotTextarea.clearAutocompletionsFromEditor: error removing node", e);
+	}
+}
+
+//#endregion
+//#region src/types/base/base-autosuggestions-config.tsx
+const defaultShouldToggleHoveringEditorOnKeyPress = (event, shortcut) => {
+	const isMetaKey = isMacOS() ? event.metaKey : event.ctrlKey;
+	return event.key === shortcut && isMetaKey;
+};
+const defaultShouldAcceptAutosuggestionOnKeyPress = (event) => {
+	if (event.key === "Tab") return true;
+	return false;
+};
+const defaultShouldAcceptAutosuggestionOnTouch = () => false;
+/**
+* Default configuration for the BaseAutosuggestions.
+*
+* @property {number} debounceTime - The amount of time to wait before triggering the autosuggestions API call.
+* @property {string[]} contextCategories - The categories to use for context when making the autosuggestions API call.
+* @property {boolean} disableWhenEmpty - Whether to disable the autosuggestions when the textarea is empty.
+* @property {boolean} disabled - Whether to disable the autosuggestions feature entirely.
+* @property {boolean} temporarilyDisableWhenMovingCursorWithoutChangingText - Whether to temporarily disable the autosuggestions when the cursor is moved without changing the text.
+* @property {boolean} temporarilyDisableNotTrustedEvents - Temporarily disable the autosuggestions after change event from non-trusted sources (like text insertion from autocomplete plugins)
+* @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldToggleHoveringEditorOnKeyPress - A function that determines whether to toggle the hovering editor based on a key press event.
+* @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnKeyPress - A function that determines whether to accept the autosuggestion based on a key press event.
+* @property {() => boolean} defaultShouldAcceptAutosuggestionOnTouch - A function that determines whether to accept the autosuggestion based on a mobile touch event.
+*/
+const defaultBaseAutosuggestionsConfig = {
+	debounceTime: 250,
+	contextCategories: defaultCopilotContextCategories,
+	disableWhenEmpty: true,
+	disabled: false,
+	temporarilyDisableWhenMovingCursorWithoutChangingText: true,
+	temporarilyDisableNotTrustedEvents: true,
+	shouldToggleHoveringEditorOnKeyPress: defaultShouldToggleHoveringEditorOnKeyPress,
+	shouldAcceptAutosuggestionOnKeyPress: defaultShouldAcceptAutosuggestionOnKeyPress,
+	shouldAcceptAutosuggestionOnTouch: defaultShouldAcceptAutosuggestionOnTouch
+};
+
+//#endregion
+//#region src/components/hovering-toolbar/hovering-editor-provider.tsx
+const HoveringEditorContext = createContext({
+	isDisplayed: false,
+	setIsDisplayed: () => {}
+});
+/**
+* A context provider for the hovering editor over the `CopilotTextarea`
+* (used to edit and insert text into the `CopilotTextarea`).
+*/
+const HoveringEditorProvider = ({ children }) => {
+	const [isDisplayed, setIsDisplayed] = useState(false);
+	return /* @__PURE__ */ jsx(HoveringEditorContext.Provider, {
+		value: {
+			isDisplayed,
+			setIsDisplayed
+		},
+		children
+	});
+};
+const useHoveringEditorContext = () => useContext(HoveringEditorContext);
+
+//#endregion
+//#region src/components/hovering-toolbar/hovering-toolbar-components.tsx
+const Button$1 = React.forwardRef(({ className, active, reversed, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	...props,
+	ref,
+	className: cx(className, css`
+        cursor: pointer;
+        color: ${reversed ? active ? "white" : "#aaa" : active ? "black" : "#ccc"};
+      `)
+}));
+const Icon = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	...props,
+	ref,
+	className: cx("material-icons", className, css`
+        font-size: 18px;
+        vertical-align: text-bottom;
+      `)
+}));
+const Menu = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-testid": "menu",
+		ref,
+		className: cx(className, css`
+          & > * {
+            display: inline-block;
+          }
+
+          & > * + * {
+            margin-left: 15px;
+          }
+        `)
+	});
+});
+const Portal = ({ children }) => {
+	return typeof document === "object" ? ReactDOM.createPortal(children, document.body) : null;
+};
+const Toolbar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Menu, {
+	...props,
+	ref,
+	className: cx(className, css`
+        position: relative;
+        padding: 1px 18px 17px;
+        margin: 0 -20px;
+        border-bottom: 2px solid #eee;
+        margin-bottom: 20px;
+      `)
+}));
+
+//#endregion
+//#region src/hooks/misc/use-autosize-textarea.tsx
+const useAutosizeTextArea = (textAreaRef, value) => {
+	useEffect(() => {
+		if (textAreaRef.current !== null) {
+			textAreaRef.current.style.height = "0px";
+			const scrollHeight = textAreaRef.current.scrollHeight;
+			textAreaRef.current.style.height = scrollHeight + "px";
+		}
+	}, [textAreaRef, value]);
+};
+
+//#endregion
+//#region src/components/ui/command.tsx
+const Command$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command, {
+	ref,
+	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+	...props
+}));
+Command$1.displayName = Command.displayName;
+const CommandInput = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: "flex items-center border-b px-3",
+	"cmdk-input-wrapper": "",
+	children: /* @__PURE__ */ jsx(Command.Input, {
+		ref,
+		className: cn("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props
+	})
+}));
+CommandInput.displayName = Command.Input.displayName;
+const CommandList = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.List, {
+	ref,
+	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden pb-2", className),
+	...props
+}));
+CommandList.displayName = Command.List.displayName;
+const CommandEmpty = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command.Empty, {
+	ref,
+	className: "py-6 text-center text-sm",
+	...props
+}));
+CommandEmpty.displayName = Command.Empty.displayName;
+const CommandGroup = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.Group, {
+	ref,
+	className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
+	...props
+}));
+CommandGroup.displayName = Command.Group.displayName;
+const CommandSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.Separator, {
+	ref,
+	className: cn("-mx-1 h-px bg-border", className),
+	...props
+}));
+CommandSeparator.displayName = Command.Separator.displayName;
+const CommandItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.Item, {
+	ref,
+	className: cn("relative flex cursor-default select-none items-center rounded-sm text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	...props
+}));
+CommandItem.displayName = Command.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+//#endregion
+//#region src/components/source-search-box/source-search-box.tsx
+function SourceSearchBox(props) {
+	const [selectedValue, setSelectedValue] = useState("");
+	return /* @__PURE__ */ jsxs(Command$1, {
+		className: "rounded-lg border shadow-md",
+		value: selectedValue,
+		onValueChange: (value) => {
+			setSelectedValue(value);
+		},
+		filter: (value, search) => {
+			if (props.searchTerm === "") return 1;
+			if (value.startsWith(props.searchTerm)) return 1;
+			return 0;
+		},
+		children: [/* @__PURE__ */ jsx(CommandInput, {
+			value: props.searchTerm,
+			className: "rounded-t-lg hidden",
+			placeholder: "Search for a command..."
+		}), /* @__PURE__ */ jsxs(CommandList, { children: [
+			/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+			/* @__PURE__ */ jsx(CommandGroup, {
+				heading: "Available resources",
+				children: props.suggestedFiles.map((filePointer) => {
+					return /* @__PURE__ */ jsx(CommandItem, {
+						value: filePointer.name,
+						onSelect: (value) => {
+							props.onSelectedFile(filePointer);
+						},
+						children: /* @__PURE__ */ jsxs("div", {
+							className: " px-3  flex flex-row gap-1 items-center",
+							children: [/* @__PURE__ */ jsx(Logo, {
+								width: "20px",
+								height: "20px",
+								children: /* @__PURE__ */ jsx("img", {
+									src: filePointer.iconImageUri,
+									alt: filePointer.sourceApplication,
+									className: "w-full h-full"
+								})
+							}), filePointer.name]
+						})
+					}, `word-${filePointer.sourceApplication}.${filePointer.name}`);
+				})
+			}),
+			/* @__PURE__ */ jsx(CommandSeparator, {})
+		] })]
+	});
+}
+function Logo({ children, width, height }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center",
+		style: {
+			width,
+			height
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/components/ui/button.tsx
+const buttonVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const Button = React$1.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+//#region src/components/ui/label.tsx
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+	ref,
+	className: cn(labelVariants(), className),
+	...props
+}));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+//#endregion
+//#region src/lib/stream-promise-flatten.ts
+/**
+* Flatten a promise of a stream, into a stream.
+*
+* Useful because a stream already includes the notion of async value delivery,
+* so it often makes sense to simply await the values rather than the generator of the values.
+*
+* @param {Promise<ReadableStream<A>>} promise - The promise to flatten.
+* @returns {ReadableStream<A>} - The flattened stream.
+*/
+function streamPromiseFlatten(promise) {
+	return new ReadableStream({ async start(controller) {
+		try {
+			const reader = (await promise).getReader();
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) {
+					controller.close();
+					return;
+				}
+				controller.enqueue(value);
+			}
+		} catch (error) {
+			controller.error(error);
+		}
+	} });
+}
+
+//#endregion
+//#region src/components/hovering-toolbar/text-insertion-prompt-box/included-files-preview.tsx
+const IncludedFilesPreview = ({ includedFiles, setIncludedFiles }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 mt-2",
+		children: [/* @__PURE__ */ jsx(Label, {
+			className: "",
+			children: "Included context:"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-2",
+			children: includedFiles.map((filePointer, index) => {
+				return /* @__PURE__ */ jsx(FileChipPreview, {
+					filePointer,
+					onDelete: () => {
+						setIncludedFiles((prev) => prev.filter((fp) => fp !== filePointer));
+					}
+				}, `file-${filePointer.sourceApplication}.${filePointer.name}`);
+			})
+		})]
+	});
+};
+const FileChipPreview = ({ filePointer, onDelete }) => {
+	return /* @__PURE__ */ jsx(Chip, {
+		label: filePointer.name,
+		onDelete,
+		avatar: /* @__PURE__ */ jsx(Avatar, {
+			src: filePointer.iconImageUri,
+			alt: filePointer.sourceApplication,
+			sx: { backgroundColor: "transparent" }
+		})
+	});
+};
+
+//#endregion
+//#region src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
+const HoveringInsertionPromptBoxCore = ({ performInsertion, state, insertionOrEditingFunction, contextCategories }) => {
+	const { getDocumentsContext } = useCopilotContext();
+	const [editSuggestion, setEditSuggestion] = useState("");
+	const [suggestionIsLoading, setSuggestionIsLoading] = useState(false);
+	const [adjustmentPrompt, setAdjustmentPrompt] = useState("");
+	const [generatingSuggestion, setGeneratingSuggestion] = useState(null);
+	const adjustmentTextAreaRef = useRef(null);
+	const suggestionTextAreaRef = useRef(null);
+	const [filePointers, setFilePointers] = useState([]);
+	const [suggestedFiles, setSuggestedFiles] = useState([]);
+	useEffect(() => {
+		setSuggestedFiles(getDocumentsContext(contextCategories));
+	}, [contextCategories, getDocumentsContext]);
+	useAutosizeTextArea(suggestionTextAreaRef, editSuggestion || "");
+	useAutosizeTextArea(adjustmentTextAreaRef, adjustmentPrompt || "");
+	useEffect(() => {
+		adjustmentTextAreaRef.current?.focus();
+	}, []);
+	useEffect(() => {
+		if (!generatingSuggestion) return;
+		if (generatingSuggestion.locked) return;
+		setEditSuggestion("");
+		const reader = generatingSuggestion.getReader();
+		const read = async () => {
+			setSuggestionIsLoading(true);
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				setEditSuggestion((prev) => {
+					const newSuggestion = prev + value;
+					if (suggestionTextAreaRef.current) suggestionTextAreaRef.current.scrollTop = suggestionTextAreaRef.current.scrollHeight;
+					return newSuggestion;
+				});
+			}
+			setSuggestionIsLoading(false);
+		};
+		read();
+		return () => {
+			const releaseLockIfNotClosed = async () => {
+				try {
+					await reader.closed;
+				} catch {
+					reader.releaseLock();
+				}
+			};
+			releaseLockIfNotClosed();
+		};
+	}, [generatingSuggestion]);
+	const beginGeneratingAdjustment = useCallback(async () => {
+		if (!adjustmentPrompt.trim()) return;
+		let modificationState = state.editorState;
+		if (editSuggestion !== "") modificationState.selectedText = editSuggestion;
+		setGeneratingSuggestion(streamPromiseFlatten(insertionOrEditingFunction(modificationState, adjustmentPrompt, filePointers, new AbortController().signal)));
+	}, [
+		adjustmentPrompt,
+		editSuggestion,
+		state.editorState,
+		insertionOrEditingFunction,
+		filePointers
+	]);
+	const isLoading = suggestionIsLoading;
+	const textToEdit = editSuggestion || state.editorState.selectedText;
+	const adjustmentLabel = textToEdit === "" ? "Describe the text you want to insert" : "Describe adjustments to the suggested text";
+	const placeholder = textToEdit === "" ? "e.g. 'summarize the client's top 3 pain-points from @CallTranscript'" : "e.g. 'make it more formal', 'be more specific', ...";
+	const { setIsDisplayed } = useHoveringEditorContext();
+	const AdjustmentPromptComponent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label, {
+		className: "",
+		children: adjustmentLabel
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full flex items-center",
+		children: [/* @__PURE__ */ jsx("textarea", {
+			"data-testid": "adjustment-prompt",
+			disabled: suggestionIsLoading,
+			ref: adjustmentTextAreaRef,
+			value: adjustmentPrompt,
+			onChange: (e) => setAdjustmentPrompt(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" && e.shiftKey) {
+					e.preventDefault();
+					setAdjustmentPrompt(adjustmentPrompt + "\n");
+				} else if (e.key === "Enter") {
+					e.preventDefault();
+					beginGeneratingAdjustment();
+				}
+			},
+			placeholder,
+			style: { minHeight: "3rem" },
+			className: "w-full bg-slate-100 h-auto h-min-14 text-sm p-2 rounded-md resize-none overflow-visible focus:outline-none focus:ring-0 focus:border-non pr-[3rem]",
+			rows: 1
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: beginGeneratingAdjustment,
+			className: "absolute right-2 bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center",
+			"data-testid": "generate-button",
+			children: /* @__PURE__ */ jsx("i", {
+				className: "material-icons",
+				children: "arrow_forward"
+			})
+		})]
+	})] });
+	const SuggestionComponent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex justify-between items-end w-full",
+		children: [/* @__PURE__ */ jsx(Label, {
+			className: "mt-4",
+			children: "Suggested:"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "ml-auto",
+			children: isLoading && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center items-center",
+				children: /* @__PURE__ */ jsx("div", {
+					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",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]",
+						children: "Loading..."
+					})
+				})
+			})
+		})]
+	}), /* @__PURE__ */ jsx("textarea", {
+		"data-testid": "suggestion-result",
+		ref: suggestionTextAreaRef,
+		value: editSuggestion,
+		disabled: suggestionIsLoading,
+		onChange: (e) => setEditSuggestion(e.target.value),
+		className: "w-full text-base p-2 border border-gray-300 rounded-md resize-none bg-green-50",
+		style: {
+			overflow: "auto",
+			maxHeight: "10em"
+		}
+	})] });
+	const SubmitComponent = /* @__PURE__ */ jsx("div", {
+		className: "flex w-full gap-4 justify-start",
+		children: /* @__PURE__ */ jsxs(Button, {
+			"data-testid": "insert-button",
+			className: " bg-green-700 text-white",
+			onClick: () => {
+				performInsertion(editSuggestion);
+			},
+			children: ["Insert ", /* @__PURE__ */ jsx("i", {
+				className: "material-icons",
+				children: "check"
+			})]
+		})
+	});
+	const sourceSearchCandidate = adjustmentPrompt.split(" ").pop();
+	const sourceSearchWord = sourceSearchCandidate?.startsWith("@") ? sourceSearchCandidate.slice(1) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full flex flex-col items-start relative gap-2",
+		children: [
+			AdjustmentPromptComponent,
+			filePointers.length > 0 && /* @__PURE__ */ jsx(IncludedFilesPreview, {
+				includedFiles: filePointers,
+				setIncludedFiles: setFilePointers
+			}),
+			sourceSearchWord !== void 0 && /* @__PURE__ */ jsx(SourceSearchBox, {
+				searchTerm: sourceSearchWord,
+				suggestedFiles,
+				onSelectedFile: (filePointer) => {
+					setAdjustmentPrompt(adjustmentPrompt.replace(new RegExp(`@${sourceSearchWord}$`), ""));
+					setFilePointers((prev) => [...prev, filePointer]);
+					adjustmentTextAreaRef.current?.focus();
+				}
+			}),
+			generatingSuggestion ? SuggestionComponent : null,
+			generatingSuggestion ? SubmitComponent : null
+		]
+	});
+};
+
+//#endregion
+//#region src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx
+const HoveringInsertionPromptBox = (props) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col justify-center items-center space-y-4 rounded-md border shadow-lg p-4 border-gray- bg-white",
+		style: { width: "35rem" },
+		children: /* @__PURE__ */ jsx(HoveringInsertionPromptBoxCore, {
+			state: { editorState: props.editorState },
+			insertionOrEditingFunction: props.apiConfig.insertionOrEditingFunction,
+			performInsertion: props.performInsertion,
+			contextCategories: props.contextCategories
+		})
+	});
+};
+
+//#endregion
+//#region src/components/hovering-toolbar/hovering-toolbar.tsx
+const HoveringToolbar = (props) => {
+	const ref = useRef(null);
+	const editor = useSlate();
+	const selection = useSlateSelection();
+	const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();
+	const [isClient, setIsClient] = useState(false);
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+	const isShown = isClient && isDisplayed && selection;
+	useLayoutEffect(() => {
+		const el = ref.current;
+		const { selection } = editor;
+		if (!el || !isShown) return;
+		if (!selection) {
+			el.removeAttribute("style");
+			return;
+		}
+		const domSelection = window.getSelection();
+		if (!domSelection || domSelection.rangeCount === 0) return;
+		const rect = domSelection.getRangeAt(0).getBoundingClientRect();
+		if (rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0) return;
+		const verticalOffsetFromCorner = 0;
+		const horizontalOffsetFromCorner = 0;
+		let top = rect.bottom + window.scrollY + verticalOffsetFromCorner;
+		if (rect.bottom + el.offsetHeight > window.innerHeight - verticalOffsetFromCorner) top = rect.top + window.scrollY - el.offsetHeight - verticalOffsetFromCorner;
+		let left = rect.left + window.scrollX - el.offsetWidth / 2 + rect.width / 2 + horizontalOffsetFromCorner;
+		if (left < horizontalOffsetFromCorner) left = horizontalOffsetFromCorner;
+		else if (left + el.offsetWidth > window.innerWidth - horizontalOffsetFromCorner) left = window.innerWidth - el.offsetWidth - horizontalOffsetFromCorner;
+		el.style.opacity = "1";
+		el.style.position = "absolute";
+		el.style.top = `${top}px`;
+		el.style.left = `${left}px`;
+	}, [isShown]);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (ref.current && !ref.current.contains(event.target)) setIsDisplayed(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [ref, setIsDisplayed]);
+	if (!isShown) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu, {
+		ref,
+		className: "copilot-kit-textarea-css-scope " + (props.hoverMenuClassname || "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700"),
+		"data-testid": "hovering-toolbar",
+		children: /* @__PURE__ */ jsx(HoveringInsertionPromptBox, {
+			editorState: editorState(editor, selection),
+			apiConfig: props.apiConfig,
+			performInsertion: (insertedText) => {
+				Transforms.delete(editor, { at: selection });
+				Transforms.insertText(editor, insertedText, { at: selection });
+				setIsDisplayed(false);
+			},
+			contextCategories: props.contextCategories
+		})
+	}) });
+};
+function editorState(editor, selection) {
+	const textAroundCursor = getTextAroundSelection(editor);
+	if (textAroundCursor) return textAroundCursor;
+	return {
+		textBeforeCursor: getFullEditorTextWithNewlines(editor),
+		textAfterCursor: "",
+		selectedText: ""
+	};
+}
+
+//#endregion
+//#region src/components/base-copilot-textarea/render-element.tsx
+function makeRenderElementFunction(suggestionsStyle) {
+	return (props) => {
+		switch (props.element.type) {
+			case "paragraph": return /* @__PURE__ */ jsx(DefaultElement, { ...props });
+			case "suggestion": return /* @__PURE__ */ jsx(SuggestionElement, {
+				...props,
+				suggestionsStyle
+			});
+		}
+	};
+}
+const DefaultElement = (props) => {
+	return /* @__PURE__ */ jsx("div", {
+		...props.attributes,
+		children: props.children
+	});
+};
+const SuggestionElement = (props) => {
+	return /* @__PURE__ */ jsxs("span", {
+		...props.attributes,
+		style: { ...props.suggestionsStyle },
+		"data-testid": "suggestion",
+		contentEditable: false,
+		children: [props.children, props.element.type === "suggestion" && props.element.content]
+	});
+};
+
+//#endregion
+//#region src/components/base-copilot-textarea/render-placeholder.tsx
+function makeRenderPlaceholderFunction(placeholderStyle) {
+	return (props) => {
+		const { style, ...restAttributes } = props.attributes;
+		return /* @__PURE__ */ jsx("div", {
+			...restAttributes,
+			style: {
+				...style,
+				...placeholderStyle
+			},
+			children: props.children
+		});
+	};
+}
+
+//#endregion
+//#region src/components/base-copilot-textarea/use-add-branding-css.tsx
+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]) => {
+			return `${key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase()}: ${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 styleEl = document.getElementById("dynamic-styles");
+			if (styleEl && textarea) {
+				const offsetFromBottom = -textarea.scrollTop + 6;
+				const offsetFromRight = -textarea.scrollLeft + 6;
+				styleEl.innerHTML = `
+          ${cssSelector}::after {
+            ${dynamicStyles}
+            bottom: ${offsetFromBottom}px;
+            right: ${offsetFromRight}px;
+          }
+        `;
+			}
+		};
+		textarea?.addEventListener("scroll", handleScroll);
+		return () => {
+			document.getElementById("dynamic-styles")?.remove();
+			textarea?.removeEventListener("scroll", handleScroll);
+		};
+	}, [disableBranding, suggestionStyleAugmented]);
+}
+
+//#endregion
+//#region src/lib/editor-to-text.ts
+function nodeChildrenToTextComponents(editor, nodes) {
+	const indeciesOfInlineElements = new Set(nodes.map((node, index) => {
+		if (Element.isElement(node) && editor.isInline(node)) return index;
+		return -1;
+	}).filter((index) => index !== -1));
+	return nodes.filter((node, index) => {
+		if (indeciesOfInlineElements.has(index)) return false;
+		if (indeciesOfInlineElements.has(index - 1) || indeciesOfInlineElements.has(index + 1)) return node.text !== "";
+		return true;
+	}).map((node) => {
+		if (Element.isElement(node)) switch (node.type) {
+			case "paragraph": return nodeChildrenToTextComponents(editor, node.children);
+			case "suggestion": return [];
+		}
+		else return [node];
+	}).reduce((acc, val) => acc.concat(val), []);
+}
+const editorToText = (editor) => {
+	return nodeChildrenToTextComponents(editor, editor.children).map((textComponent) => textComponent.text).join("\n");
+};
+
+//#endregion
+//#region src/components/base-copilot-textarea/track-cursor-moved-since-last-text-change.tsx
+function TrackerTextEditedSinceLastCursorMovement(props) {
+	const cursorState = useSlateSelector((state) => ({
+		selection: state.selection,
+		text: editorToText(state)
+	}));
+	const previousState = usePrevious(cursorState);
+	useEffect(() => {
+		if (!previousState) return;
+		if (cursorChangedWithoutTextChanged(previousState, cursorState)) props.setCursorMovedSinceLastTextChange(true);
+	}, [props.setCursorMovedSinceLastTextChange, cursorState]);
+	return /* @__PURE__ */ jsx(Fragment, {});
+}
+const cursorChangedWithoutTextChanged = (prev, next) => {
+	const isSelectionChanged = !isSelectionEqual(prev.selection, next.selection);
+	const isTextSame = prev.text === next.text;
+	return isSelectionChanged && isTextSame;
+};
+const isSelectionEqual = (a, b) => {
+	if (!a && !b) return true;
+	if (!a || !b) return false;
+	return Range.equals(a, b);
+};
+/**
+* Easily keep track of the *previous* value of a variable.
+*
+* Example:
+* ```
+* const [count, setCount] = useState(0);
+* const prevCount = usePrevious(count);
+*
+* useEffect(() => {
+*  if (count > prevCount) {
+*   console.log('Now I know that count is bigger than before');
+* }
+* }, [count, prevCount]);
+* ```
+*/
+function usePrevious(value) {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+}
+
+//#endregion
+//#region src/components/base-copilot-textarea/base-copilot-textarea.tsx
+/**
+* Not intended for direct use. Use CopilotTextarea instead.
+*
+* The `BaseCopilotTextarea` includes the basic UX component,
+* without the business logic / AI logic that makes the content useful and coherent.
+*
+* It is useful if you want to build your own backend, with fully custom business logic
+* for figuring out which contnet to fill in.
+*/
+const BaseCopilotTextarea = React.forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(HoveringEditorProvider, { children: /* @__PURE__ */ jsx(BaseCopilotTextareaWithHoveringContext, {
+		...props,
+		ref
+	}) });
+});
+/**
+* Not intended for direct use. Use `CopilotTextarea` instead.
+*
+* This is the private core of the `BaseCopilotTextarea` component.
+* For practical purposes the implementation is cleaner assuming containment in a `HoveringEditorProviderContext`.
+*
+* Therefore we separate the core logic into this component,
+* and wrap it in a `HoveringEditorProviderContext` in `BaseCopilotTextarea`.
+*/
+const BaseCopilotTextareaWithHoveringContext = React.forwardRef((props, ref) => {
+	const autosuggestionsConfig = {
+		...defaultBaseAutosuggestionsConfig,
+		...props.baseAutosuggestionsConfig
+	};
+	const valueOnInitialRender = useMemo(() => props.value ?? "", []);
+	const [lastKnownFullEditorText, setLastKnownFullEditorText] = useState(valueOnInitialRender);
+	const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] = useState(false);
+	const [isUserInputActive, setIsUserInputActive] = useState(false);
+	const initialValue = useMemo(() => {
+		return [{
+			type: "paragraph",
+			children: [{ text: valueOnInitialRender }]
+		}];
+	}, [valueOnInitialRender]);
+	const editor = useCopilotTextareaEditor();
+	const { isDisplayed: hoveringEditorIsDisplayed, setIsDisplayed: setHoveringEditorIsDisplayed } = useHoveringEditorContext();
+	const insertText = useCallback((autosuggestion) => {
+		Editor.insertText(editor, autosuggestion.text, { at: autosuggestion.point });
+	}, [editor]);
+	const shouldDisableAutosuggestions = autosuggestionsConfig.disabled || hoveringEditorIsDisplayed || cursorMovedSinceLastTextChange && autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText || !isUserInputActive && autosuggestionsConfig.temporarilyDisableNotTrustedEvents;
+	const { currentAutocompleteSuggestion, onChangeHandler: onChangeHandlerForAutocomplete, onKeyDownHandler: onKeyDownHandlerForAutocomplete, onTouchStartHandler: onTouchStartHandlerForAutocomplete } = useAutosuggestions(autosuggestionsConfig.debounceTime, autosuggestionsConfig.shouldAcceptAutosuggestionOnKeyPress, autosuggestionsConfig.shouldAcceptAutosuggestionOnTouch, autosuggestionsConfig.apiConfig.autosuggestionsFunction, insertText, autosuggestionsConfig.disableWhenEmpty, shouldDisableAutosuggestions);
+	const onKeyDownHandlerForHoveringEditor = useCallback((event) => {
+		if (autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress(event, props.shortcut ?? "k")) {
+			event.preventDefault();
+			setHoveringEditorIsDisplayed(!hoveringEditorIsDisplayed);
+		}
+	}, [
+		hoveringEditorIsDisplayed,
+		setHoveringEditorIsDisplayed,
+		autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress
+	]);
+	useEffect(() => {
+		clearAutocompletionsFromEditor(editor);
+		if (currentAutocompleteSuggestion) addAutocompletionsToEditor(editor, currentAutocompleteSuggestion.text, currentAutocompleteSuggestion.point);
+	}, [currentAutocompleteSuggestion]);
+	const suggestionStyleAugmented = useMemo(() => {
+		return {
+			fontStyle: "italic",
+			color: "gray",
+			...props.suggestionsStyle
+		};
+	}, [props.suggestionsStyle]);
+	const renderElementMemoized = useMemo(() => {
+		return makeRenderElementFunction(suggestionStyleAugmented);
+	}, [suggestionStyleAugmented]);
+	const renderPlaceholderMemoized = useMemo(() => {
+		return makeRenderPlaceholderFunction({
+			top: void 0,
+			...props.placeholderStyle
+		});
+	}, [props.placeholderStyle]);
+	useEffect(() => {
+		if (props.value === lastKnownFullEditorText) return;
+		setLastKnownFullEditorText(props.value ?? "");
+		replaceEditorText(editor, props.value ?? "");
+	}, [props.value]);
+	const { placeholderStyle, value, hoverMenuClassname, onValueChange, baseAutosuggestionsConfig: autosuggestionsConfigFromProps, className, onChange, onKeyDown, disableBranding, ...propsToForward } = props;
+	useAddBrandingCss(suggestionStyleAugmented, disableBranding);
+	usePopulateCopilotTextareaRef(editor, ref);
+	const moddedClassName = `copilot-textarea ${disableBranding ? "no-branding" : "with-branding"} ${twMerge("bg-white overflow-y-auto resize-y", className ?? "")}`;
+	return /* @__PURE__ */ jsxs(Slate, {
+		editor,
+		initialValue,
+		onChange: (value) => {
+			const newEditorState = getTextAroundCollapsedCursor(editor);
+			const fullEditorText = newEditorState ? newEditorState.textBeforeCursor + newEditorState.textAfterCursor : getFullEditorTextWithNewlines(editor);
+			setLastKnownFullEditorText((prev) => {
+				if (prev !== fullEditorText) setCursorMovedSinceLastTextChange(false);
+				return fullEditorText;
+			});
+			onChangeHandlerForAutocomplete(newEditorState);
+			props.onValueChange?.(fullEditorText);
+			props.onChange?.(makeSemiFakeReactTextAreaEvent(fullEditorText));
+		},
+		children: [
+			/* @__PURE__ */ jsx(TrackerTextEditedSinceLastCursorMovement, { setCursorMovedSinceLastTextChange }),
+			/* @__PURE__ */ jsx(HoveringToolbar, {
+				apiConfig: autosuggestionsConfig.apiConfig,
+				contextCategories: autosuggestionsConfig.contextCategories,
+				hoverMenuClassname
+			}),
+			/* @__PURE__ */ jsx(Editable, {
+				renderElement: renderElementMemoized,
+				renderPlaceholder: renderPlaceholderMemoized,
+				onKeyDown: (event) => {
+					setIsUserInputActive(true);
+					onKeyDownHandlerForHoveringEditor(event);
+					onKeyDownHandlerForAutocomplete(event);
+					props.onKeyDown?.(event);
+				},
+				onTouchStart: (event) => {
+					onTouchStartHandlerForAutocomplete(event);
+				},
+				"data-testid": "copilot-textarea-editable",
+				className: moddedClassName,
+				onBlur: (ev) => {
+					props.onBlur?.(ev);
+					clearAutocompletionsFromEditor(editor);
+					setIsUserInputActive(false);
+				},
+				...propsToForward
+			})
+		]
+	});
+});
+function makeSemiFakeReactTextAreaEvent(currentText) {
+	return {
+		target: {
+			value: currentText,
+			type: "copilot-textarea"
+		},
+		currentTarget: {
+			value: currentText,
+			type: "copilot-textarea"
+		}
+	};
+}
+
+//#endregion
+//#region src/lib/retry.tsx
+function retry(fn, retriesLeft = 2, interval = 200, backoff = 1.5) {
+	return new Promise((resolve, reject) => {
+		fn().then(resolve).catch((error) => {
+			if (retriesLeft === 1) {
+				reject(error);
+				return;
+			}
+			setTimeout(() => {
+				retry(fn, retriesLeft - 1, interval * backoff, backoff).then(resolve).catch(reject);
+			}, interval);
+		});
+	});
+}
+
+//#endregion
+//#region src/hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function.tsx
+/**
+* Returns a memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
+* The function takes in the text before and after the cursor, and an abort signal.
+* It sends a POST request to the API endpoint with the messages array containing the system message, few shot messages, and user messages.
+* The function returns the suggestion from the API response.
+*
+* @param textareaPurpose - The purpose of the textarea. This is included in the system message.
+* @param apiEndpoint - The API endpoint to send the autosuggestion request to.
+* @param makeSystemMessage - A function that takes in a context string and returns a system message to include in the autosuggestion request.
+* @param fewShotMessages - An array of few shot messages to include in the autosuggestion request.
+* @param contextCategories - The categories of context strings we want to include. By default, we include the (default) "global" context category.
+* @returns A memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
+*/
+function useMakeStandardAutosuggestionFunction(textareaPurpose, contextCategories, apiConfig) {
+	const { getContextString, copilotApiConfig } = useCopilotContext();
+	const { chatApiEndpoint: url, publicApiKey, credentials, properties } = copilotApiConfig;
+	({
+		...copilotApiConfig.headers,
+		...publicApiKey ? { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {}
+	});
+	const { maxTokens, stop, temperature = 0 } = apiConfig;
+	return useCallback(async (editorState, abortSignal) => {
+		return await retry(async () => {
+			[
+				new TextMessage({
+					role: Role.System,
+					content: apiConfig.makeSystemPrompt(textareaPurpose, getContextString([], contextCategories))
+				}),
+				...apiConfig.fewShotMessages,
+				editorState.textAfterCursor != "" ? new TextMessage({
+					role: Role.User,
+					content: editorState.textAfterCursor
+				}) : null,
+				new TextMessage({
+					role: Role.User,
+					content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`
+				}),
+				new TextMessage({
+					role: Role.User,
+					content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`
+				})
+			].filter(Boolean);
+			const response = {};
+			let result = "";
+			for (const message of convertGqlOutputToMessages(response.data?.generateCopilotResponse?.messages ?? [])) {
+				if (abortSignal.aborted) break;
+				if (message.isTextMessage()) result += message.content;
+			}
+			return result;
+		});
+	}, [
+		apiConfig,
+		getContextString,
+		contextCategories,
+		textareaPurpose
+	]);
+}
+
+//#endregion
+//#region src/types/autosuggestions-config/suggestions-api-config.tsx
+const defaultSuggestionsMakeSystemPrompt = (textareaPurpose, contextString) => {
+	return `You are a versatile writing assistant.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+Your job is to guess what the user will write next AS BEST YOU CAN.
+Only guess a SHORT distance ahead. Usually 1 sentence, or at most 1 paragraph.
+
+Adjust yourself to the user's style and implied intent.
+
+The user will provide both the text before and after the cursor. You should use this to infer what the user is likely to write next.
+<TextAfterCursor>
+<TextBeforeCursor>
+<YourSuggestion>
+
+If we need to add a whitespace character to the suggested text, make sure to explicitly add it in.
+Refrain from adding <YourSuggestion> tags when responding
+
+The following external context is also provided. Use it to help you make better suggestions!!!
+\`\`\`
+${contextString}
+\`\`\`
+`;
+};
+const defaultSuggestionsFewShotMessages = [
+	new TextMessage({
+		role: Role.User,
+		content: "<TextAfterCursor>While I was there I also picked up some apples, oranges, and bananas.</TextAfterCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "This morning I woke up and went straight to the grocery store."
+	}),
+	new TextMessage({
+		role: Role.Assistant,
+		content: " When I arrived I went straight to the produce section and picked out a big watermelon. "
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextAfterCursor>and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.</TextAfterCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextBeforeCursor>The Optionholder, in the Optionholder's capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an \"Equityholder\" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an \"Equityholder\" thereunder;</TextBeforeCursor>"
+	}),
+	new TextMessage({
+		role: Role.Assistant,
+		content: " (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder's \"Pro Rata Share\"; "
+	})
+];
+const defaultSuggestionsApiConfig = {
+	makeSystemPrompt: defaultSuggestionsMakeSystemPrompt,
+	fewShotMessages: defaultSuggestionsFewShotMessages
+};
+
+//#endregion
+//#region src/types/autosuggestions-config/insertions-api-config.tsx
+const defaultInsertionsMakeSystemPrompt = (textareaPurpose, contextString) => {
+	return `You are a versatile writing assistant helping the user insert new text into their existing work.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+The following external context is also provided. Use it to inform your suggestions when relevant!!!
+\`\`\`
+${contextString}
+\`\`\`
+
+The user will provide you with a prompt for an INSERTION into the text they are writing. 
+Your job is to come up with an INSERTION into the text that the user would like to use, AS BEST YOU CAN.
+Only insert a SHORT segment. Usually 1 sentence, or at most 1 paragraph.
+
+Adjust yourself to the user's style and implied intent.
+
+
+The user will provide the text before and after the cursor, as well as the INSERTION prompt. You should use this to infer the best relevant insertion.
+The conversation will be structured as follows:
+<TextAfterCursor>
+<TextBeforeCursor>
+<InsertionPrompt>
+
+<YourInsertionSuggestion>
+`;
+};
+const defaultInsertionsFewShotMessages = [
+	new TextMessage({
+		role: Role.User,
+		content: "<TextAfterCursor>While I was there I also picked up some apples, oranges, and bananas.</TextAfterCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextBeforeCursor>This morning I woke up and went straight to the grocery store.</TextBeforeCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<InsertionPrompt>I bought a big watermelon</InsertionPrompt>"
+	}),
+	new TextMessage({
+		role: Role.Assistant,
+		content: "When I arrived I went straight to the produce section and picked out a big watermelon."
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextAfterCursor>and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.</TextAfterCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextBeforeCursor>The Optionholder, in the Optionholder's capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an \"Equityholder\" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an \"Equityholder\" thereunder;</TextBeforeCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<InsertionPrompt>add section about the optionholder's pro rata share</InsertionPrompt>"
+	}),
+	new TextMessage({
+		role: Role.Assistant,
+		content: " (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder's \"Pro Rata Share\"; "
+	})
+];
+const defaultInsertionsApiConfig = {
+	makeSystemPrompt: defaultInsertionsMakeSystemPrompt,
+	fewShotMessages: defaultInsertionsFewShotMessages,
+	forwardedParams: void 0
+};
+
+//#endregion
+//#region src/types/autosuggestions-config/editing-api-config.tsx
+const defaultEditingMakeSystemPrompt = (textareaPurpose, contextString) => {
+	return `You are a versatile writing assistant helping the user edit a portion of their text.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+The following external context is also provided. Use it when relevant.
+\`\`\`
+${contextString}
+\`\`\`
+
+The user has provided you with a PROMPT for EDITING a PORTION of the text. 
+Your job is to come up with a new EDITED version OF THE SEGMENT IN QUESTION - AS BEST YOU CAN.
+Only rewrite the portion of the text that the user has marked as "TextToEdit"!!!
+
+Adjust yourself to the user's style and implied intent.
+
+The conversation will be structured as follows:
+<TextBeforeCursor>
+<TextToEdit>
+<TextAfterCursor>
+<EditingPrompt>
+
+<YourEditSuggestion>
+`;
+};
+const defaultEditingFewShotMessages = [
+	new TextMessage({
+		role: Role.User,
+		content: "<TextBeforeCursor>This morning I woke up and went straight to the grocery store. </TextBeforeCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextToEdit>While I was there I picked up some apples, oranges, and bananas. </TextToEdit>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextAfterCursor>The grocery store was having a sale on fruit, so I decided to stock up.</TextAfterCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<EditingPrompt>I also bought a big watermelon</EditingPrompt>"
+	}),
+	new TextMessage({
+		role: Role.Assistant,
+		content: "While I was there I picked up some apples, oranges, and bananas, and a big watermelon."
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextBeforeCursor>Yesterday, I spent the afternoon working on my new project.</TextBeforeCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextToEdit>It's quite challenging and requires a lot of focus.</TextToEdit>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<TextAfterCursor>I'm really excited about the potential outcomes of this project.</TextAfterCursor>"
+	}),
+	new TextMessage({
+		role: Role.User,
+		content: "<EditingPrompt>emphasize the complexity and my enthusiasm for the project</EditingPrompt>"
+	}),
+	new TextMessage({
+		role: Role.Assistant,
+		content: "It's a highly complex task that demands intense concentration, but I'm incredibly enthusiastic about the promising prospects of this project."
+	})
+];
+const defaultEditingApiConfig = {
+	makeSystemPrompt: defaultEditingMakeSystemPrompt,
+	fewShotMessages: defaultEditingFewShotMessages,
+	forwardedParams: void 0
+};
+
+//#endregion
+//#region src/types/autosuggestions-config/autosuggestions-config.tsx
+const defaultAutosuggestionsConfig = {
+	...defaultBaseAutosuggestionsConfig,
+	contextCategories: defaultCopilotContextCategories,
+	chatApiConfigs: {
+		suggestionsApiConfig: defaultSuggestionsApiConfig,
+		insertionApiConfig: defaultInsertionsApiConfig,
+		editingApiConfig: defaultEditingApiConfig
+	}
+};
+
+//#endregion
+//#region src/hooks/make-autosuggestions-function/use-make-standard-insertion-function.tsx
+/**
+* Returns a memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
+* The function takes in the text before and after the cursor, and an abort signal.
+* It sends a POST request to the API endpoint with the messages array containing the system message, few shot messages, and user messages.
+* The function returns the suggestion from the API response.
+*
+* @param textareaPurpose - The purpose of the textarea. This is included in the system message.
+* @param apiEndpoint - The API endpoint to send the autosuggestion request to.
+* @param makeSystemMessage - A function that takes in a context string and returns a system message to include in the autosuggestion request.
+* @param fewShotMessages - An array of few shot messages to include in the autosuggestion request.
+* @param contextCategories - The categories of context strings we want to include. By default, we include the (default) "global" context category.
+* @returns A memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
+*/
+function useMakeStandardInsertionOrEditingFunction(textareaPurpose, contextCategories, insertionApiConfig, editingApiConfig) {
+	const runtimeClient = { generateCopilotResponse: (...args) => {} };
+	const { getContextString, copilotApiConfig } = useCopilotContext();
+	({ ...copilotApiConfig.publicApiKey ? { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {} });
+	async function runtimeClientResponseToStringStream(responsePromise) {
+		const messagesStream = runtimeClient.asStream(responsePromise);
+		return new ReadableStream({ async start(controller) {
+			const reader = messagesStream.getReader();
+			let sentContent = "";
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				const messages = convertGqlOutputToMessages(value.generateCopilotResponse.messages);
+				let newContent = "";
+				for (const message of messages) if (message.isTextMessage()) newContent += message.content;
+				if (newContent) {
+					const contentToSend = newContent.slice(sentContent.length);
+					controller.enqueue(contentToSend);
+					sentContent += contentToSend;
+				}
+			}
+			controller.close();
+		} });
+	}
+	const insertionFunction = useCallback(async (editorState, insertionPrompt, documents, abortSignal) => {
+		return await retry(async () => {
+			const messages = [
+				new TextMessage({
+					role: Role.System,
+					content: insertionApiConfig.makeSystemPrompt(textareaPurpose, getContextString(documents, contextCategories))
+				}),
+				...insertionApiConfig.fewShotMessages,
+				new TextMessage({
+					role: Role.User,
+					content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`
+				}),
+				new TextMessage({
+					role: Role.User,
+					content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`
+				}),
+				new TextMessage({
+					role: Role.User,
+					content: `<InsertionPrompt>${insertionPrompt}</InsertionPrompt>`
+				})
+			];
+			return runtimeClientResponseToStringStream(runtimeClient.generateCopilotResponse({
+				data: {
+					frontend: {
+						actions: [],
+						url: window.location.href
+					},
+					messages: convertMessagesToGqlInput(filterAgentStateMessages(messages)),
+					metadata: { requestType: CopilotRequestType.TextareaCompletion }
+				},
+				properties: copilotApiConfig.properties,
+				signal: abortSignal
+			}));
+		});
+	}, [
+		insertionApiConfig,
+		getContextString,
+		contextCategories,
+		textareaPurpose
+	]);
+	const editingFunction = useCallback(async (editorState, editingPrompt, documents, abortSignal) => {
+		return await retry(async () => {
+			const messages = [
+				new TextMessage({
+					role: Role.System,
+					content: editingApiConfig.makeSystemPrompt(textareaPurpose, getContextString(documents, contextCategories))
+				}),
+				...editingApiConfig.fewShotMessages,
+				new TextMessage({
+					role: Role.User,
+					content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`
+				}),
+				new TextMessage({
+					role: Role.User,
+					content: `<TextToEdit>${editorState.selectedText}</TextToEdit>`
+				}),
+				new TextMessage({
+					role: Role.User,
+					content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`
+				}),
+				new TextMessage({
+					role: Role.User,
+					content: `<EditingPrompt>${editingPrompt}</EditingPrompt>`
+				})
+			];
+			return runtimeClientResponseToStringStream(runtimeClient.generateCopilotResponse({
+				data: {
+					frontend: {
+						actions: [],
+						url: window.location.href
+					},
+					messages: convertMessagesToGqlInput(filterAgentStateMessages(messages)),
+					metadata: { requestType: CopilotRequestType.TextareaCompletion }
+				},
+				properties: copilotApiConfig.properties,
+				signal: abortSignal
+			}));
+		});
+	}, [
+		editingApiConfig,
+		getContextString,
+		contextCategories,
+		textareaPurpose
+	]);
+	return useCallback(async (editorState, insertionPrompt, documents, abortSignal) => {
+		if (editorState.selectedText === "") return await insertionFunction(editorState, insertionPrompt, documents, abortSignal);
+		else return await editingFunction(editorState, insertionPrompt, documents, abortSignal);
+	}, [insertionFunction, editingFunction]);
+}
+
+//#endregion
+//#region src/components/copilot-textarea/copilot-textarea.tsx
+/**
+* <br/>
+* <img src="https://cdn.copilotkit.ai/docs/copilotkit/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/v1/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 '@copilotkit/react-textarea';
+* import "@copilotkit/react-textarea/styles.css";
+*
+* <CopilotTextarea
+*   autosuggestionsConfig={{
+*     textareaPurpose:
+*      "the body of an email message",
+*     chatApiConfigs: {},
+*   }}
+* />
+* ```
+*
+* ## Usage
+*
+* ### Install Dependencies
+*
+* This component is part of the [@copilotkit/react-textarea](https://npmjs.com/package/@copilotkit/react-textarea) package.
+*
+* ```shell npm2yarn \"@copilotkit/react-textarea"\
+* npm install @copilotkit/react-core @copilotkit/react-textarea
+* ```
+*
+* ### 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";
+* import "@copilotkit/react-textarea/styles.css";
+*
+* 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 title="YourRootComponent.tsx"
+* ...
+* import "@copilotkit/react-textarea/styles.css"; // [!code highlight]
+*
+* export function YourRootComponent() {
+*   return (
+*     <CopilotKit>
+*       ...
+*     </CopilotKit>
+*   );
+* }
+* ```
+* For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+* */
+/**
+* A copilot textarea that uses the standard autosuggestions function.
+*/
+const CopilotTextarea = React.forwardRef((props, ref) => {
+	const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props;
+	const autosuggestionsConfig = merge(defaultAutosuggestionsConfig, autosuggestionsConfigUserSpecified);
+	const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(autosuggestionsConfig.textareaPurpose, autosuggestionsConfig.contextCategories, autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig);
+	const insertionOrEditingFunction = useMakeStandardInsertionOrEditingFunction(autosuggestionsConfig.textareaPurpose, autosuggestionsConfig.contextCategories, autosuggestionsConfig.chatApiConfigs.insertionApiConfig, autosuggestionsConfig.chatApiConfigs.editingApiConfig);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BaseCopilotTextarea, {
+		ref,
+		...forwardedProps,
+		baseAutosuggestionsConfig: {
+			...autosuggestionsConfig,
+			apiConfig: {
+				insertionOrEditingFunction,
+				autosuggestionsFunction
+			}
+		}
+	}) });
+});
+
+//#endregion
+export { BaseCopilotTextarea, CopilotTextarea, defaultAutosuggestionsConfig, defaultBaseAutosuggestionsConfig };
 //# sourceMappingURL=index.mjs.map