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

package/dist/index.cjs

@@ -0,0 +1,1918 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let slate = require("slate");
+let slate_react = require("slate-react");
+let tailwind_merge = require("tailwind-merge");
+let clsx = require("clsx");
+let slate_history = require("slate-history");
+let _copilotkit_react_core = require("@copilotkit/react-core");
+let _copilotkit_shared = require("@copilotkit/shared");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_css = require("@emotion/css");
+let react_dom = require("react-dom");
+react_dom = __toESM(react_dom);
+let cmdk = require("cmdk");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let class_variance_authority = require("class-variance-authority");
+let _radix_ui_react_label = require("@radix-ui/react-label");
+_radix_ui_react_label = __toESM(_radix_ui_react_label);
+let _mui_material_Chip_Chip_js = require("@mui/material/Chip/Chip.js");
+_mui_material_Chip_Chip_js = __toESM(_mui_material_Chip_Chip_js);
+let _mui_material_Avatar_Avatar_js = require("@mui/material/Avatar/Avatar.js");
+_mui_material_Avatar_Avatar_js = __toESM(_mui_material_Avatar_Avatar_js);
+let _copilotkit_runtime_client_gql = require("@copilotkit/runtime-client-gql");
+let lodash_merge = require("lodash.merge");
+lodash_merge = __toESM(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 (0, tailwind_merge.twMerge)((0, clsx.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] = (0, react.useState)(null);
+	const [currentAutocompleteSuggestion, setCurrentAutocompleteSuggestion] = (0, react.useState)(null);
+	const awaitForAndAppendSuggestion = (0, react.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 = (0, react.useMemo)(() => new Debouncer(debounceTime), [debounceTime]);
+	(0, react.useEffect)(() => {
+		return () => {
+			debouncedFunction.cancel();
+			setCurrentAutocompleteSuggestion(null);
+		};
+	}, [debouncedFunction, disabled]);
+	const onChange = (0, react.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 = (0, react.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) slate.Transforms.setSelection(e, batch.selectionBefore);
+			slate_history.HistoryEditor.withoutSaving(e, () => {
+				slate.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];
+			slate_history.HistoryEditor.withoutSaving(e, () => {
+				slate.Editor.withoutNormalizing(e, () => {
+					const inverseOps = batch.operations.map(slate.Operation.inverse).reverse();
+					for (const op of inverseOps) e.apply(op);
+					if (batch.selectionBefore) slate.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 = slate_history.HistoryEditor.isSaving(e);
+		let merge = slate_history.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 && slate.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 && slate.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" && slate.Element.isElement(op.node) && op.node.type === excludedNodeType) return false;
+	if (op.type === "remove_node" && slate.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 (0, react.useMemo)(() => {
+		const editor = withPartialHistory((0, slate_react.withReact)((0, slate.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 || !slate.Range.isCollapsed(selection)) return null;
+	const cursorPoint = selection.anchor;
+	const beforeRange = {
+		anchor: slate.Editor.start(editor, []),
+		focus: cursorPoint
+	};
+	const afterRange = {
+		anchor: cursorPoint,
+		focus: slate.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: slate.Editor.start(editor, []),
+		focus: wellOrderedSelection.anchor
+	};
+	const afterRange = {
+		anchor: wellOrderedSelection.focus,
+		focus: slate.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: slate.Editor.start(editor, []),
+		focus: slate.Editor.end(editor, [])
+	});
+}
+function extractTextWithNewlines(editor, range) {
+	const voids = false;
+	const [start, end] = slate.Range.edges(range);
+	let text = "";
+	let lastBlock = null;
+	for (const [node, path] of slate.Editor.nodes(editor, {
+		at: range,
+		match: slate.Text.isText,
+		voids
+	})) {
+		let t = node.text;
+		const [block] = slate.Editor.above(editor, {
+			at: path,
+			match: (n) => slate.Element.isElement(n) && n.type === "paragraph"
+		}) || [null];
+		if (lastBlock !== block && block) {
+			if (lastBlock) text += "\n";
+			lastBlock = block;
+		}
+		if (slate.Path.equals(path, end.path)) t = t.slice(0, end.offset);
+		if (slate.Path.equals(path, start.path)) t = t.slice(start.offset);
+		text += t;
+	}
+	return text;
+}
+function wellOrderedRange(range) {
+	const { anchor, focus } = range;
+	if (slate.Point.isBefore(anchor, focus)) return range;
+	return {
+		anchor: focus,
+		focus: anchor
+	};
+}
+
+//#endregion
+//#region src/lib/slatejs-edits/replace-text.ts
+function replaceEditorText(editor, newText) {
+	slate.Transforms.delete(editor, { at: {
+		anchor: slate.Editor.start(editor, []),
+		focus: slate.Editor.end(editor, [])
+	} });
+	if (newText && newText !== "") slate.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.default.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() {
+				slate_react.ReactEditor.focus(this.editor);
+			}
+			blur() {
+				slate_react.ReactEditor.blur(this.editor);
+			}
+			get value() {
+				return getFullEditorTextWithNewlines(this.editor);
+			}
+			set value(value) {
+				replaceEditorText(this.editor, value);
+			}
+		}
+		const editorHtmlElement = slate_react.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;
+	slate.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 slate.Node.nodes(editor)) if (slate.Element.isElement(node) && node.type === "suggestion") paths.push(path);
+	for (const path of paths) try {
+		slate.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 = (0, _copilotkit_shared.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: _copilotkit_react_core.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 = (0, react.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] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoveringEditorContext.Provider, {
+		value: {
+			isDisplayed,
+			setIsDisplayed
+		},
+		children
+	});
+};
+const useHoveringEditorContext = () => (0, react.useContext)(HoveringEditorContext);
+
+//#endregion
+//#region src/components/hovering-toolbar/hovering-toolbar-components.tsx
+const Button$1 = react.default.forwardRef(({ className, active, reversed, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	...props,
+	ref,
+	className: (0, _emotion_css.cx)(className, _emotion_css.css`
+        cursor: pointer;
+        color: ${reversed ? active ? "white" : "#aaa" : active ? "black" : "#ccc"};
+      `)
+}));
+const Icon = react.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	...props,
+	ref,
+	className: (0, _emotion_css.cx)("material-icons", className, _emotion_css.css`
+        font-size: 18px;
+        vertical-align: text-bottom;
+      `)
+}));
+const Menu = react.default.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		"data-testid": "menu",
+		ref,
+		className: (0, _emotion_css.cx)(className, _emotion_css.css`
+          & > * {
+            display: inline-block;
+          }
+
+          & > * + * {
+            margin-left: 15px;
+          }
+        `)
+	});
+});
+const Portal = ({ children }) => {
+	return typeof document === "object" ? react_dom.default.createPortal(children, document.body) : null;
+};
+const Toolbar = react.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Menu, {
+	...props,
+	ref,
+	className: (0, _emotion_css.cx)(className, _emotion_css.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) => {
+	(0, react.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 = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command, {
+	ref,
+	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+	...props
+}));
+Command.displayName = cmdk.Command.displayName;
+const CommandInput = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "flex items-center border-b px-3",
+	"cmdk-input-wrapper": "",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.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 = cmdk.Command.Input.displayName;
+const CommandList = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.List, {
+	ref,
+	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden pb-2", className),
+	...props
+}));
+CommandList.displayName = cmdk.Command.List.displayName;
+const CommandEmpty = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Empty, {
+	ref,
+	className: "py-6 text-center text-sm",
+	...props
+}));
+CommandEmpty.displayName = cmdk.Command.Empty.displayName;
+const CommandGroup = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.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 = cmdk.Command.Group.displayName;
+const CommandSeparator = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Separator, {
+	ref,
+	className: cn("-mx-1 h-px bg-border", className),
+	...props
+}));
+CommandSeparator.displayName = cmdk.Command.Separator.displayName;
+const CommandItem = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.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 = cmdk.Command.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)("");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Command, {
+		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__ */ (0, react_jsx_runtime.jsx)(CommandInput, {
+			value: props.searchTerm,
+			className: "rounded-t-lg hidden",
+			placeholder: "Search for a command..."
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandList, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandEmpty, { children: "No results found." }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandGroup, {
+				heading: "Available resources",
+				children: props.suggestedFiles.map((filePointer) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
+						value: filePointer.name,
+						onSelect: (value) => {
+							props.onSelectedFile(filePointer);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: " px-3  flex flex-row gap-1 items-center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Logo, {
+								width: "20px",
+								height: "20px",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									src: filePointer.iconImageUri,
+									alt: filePointer.sourceApplication,
+									className: "w-full h-full"
+								})
+							}), filePointer.name]
+						})
+					}, `word-${filePointer.sourceApplication}.${filePointer.name}`);
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandSeparator, {})
+		] })]
+	});
+}
+function Logo({ children, width, height }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex items-center justify-center",
+		style: {
+			width,
+			height
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/components/ui/button.tsx
+const buttonVariants = (0, class_variance_authority.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.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+//#region src/components/ui/label.tsx
+const labelVariants = (0, class_variance_authority.cva)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_label.Root, {
+	ref,
+	className: cn(labelVariants(), className),
+	...props
+}));
+Label.displayName = _radix_ui_react_label.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2 mt-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+			className: "",
+			children: "Included context:"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap gap-2",
+			children: includedFiles.map((filePointer, index) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileChipPreview, {
+					filePointer,
+					onDelete: () => {
+						setIncludedFiles((prev) => prev.filter((fp) => fp !== filePointer));
+					}
+				}, `file-${filePointer.sourceApplication}.${filePointer.name}`);
+			})
+		})]
+	});
+};
+const FileChipPreview = ({ filePointer, onDelete }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Chip_Chip_js.default, {
+		label: filePointer.name,
+		onDelete,
+		avatar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Avatar_Avatar_js.default, {
+			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 } = (0, _copilotkit_react_core.useCopilotContext)();
+	const [editSuggestion, setEditSuggestion] = (0, react.useState)("");
+	const [suggestionIsLoading, setSuggestionIsLoading] = (0, react.useState)(false);
+	const [adjustmentPrompt, setAdjustmentPrompt] = (0, react.useState)("");
+	const [generatingSuggestion, setGeneratingSuggestion] = (0, react.useState)(null);
+	const adjustmentTextAreaRef = (0, react.useRef)(null);
+	const suggestionTextAreaRef = (0, react.useRef)(null);
+	const [filePointers, setFilePointers] = (0, react.useState)([]);
+	const [suggestedFiles, setSuggestedFiles] = (0, react.useState)([]);
+	(0, react.useEffect)(() => {
+		setSuggestedFiles(getDocumentsContext(contextCategories));
+	}, [contextCategories, getDocumentsContext]);
+	useAutosizeTextArea(suggestionTextAreaRef, editSuggestion || "");
+	useAutosizeTextArea(adjustmentTextAreaRef, adjustmentPrompt || "");
+	(0, react.useEffect)(() => {
+		adjustmentTextAreaRef.current?.focus();
+	}, []);
+	(0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+		className: "",
+		children: adjustmentLabel
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative w-full flex items-center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("i", {
+				className: "material-icons",
+				children: "arrow_forward"
+			})
+		})]
+	})] });
+	const SuggestionComponent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex justify-between items-end w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+			className: "mt-4",
+			children: "Suggested:"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "ml-auto",
+			children: isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-center items-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex w-full gap-4 justify-start",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+			"data-testid": "insert-button",
+			className: " bg-green-700 text-white",
+			onClick: () => {
+				performInsertion(editSuggestion);
+			},
+			children: ["Insert ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+				className: "material-icons",
+				children: "check"
+			})]
+		})
+	});
+	const sourceSearchCandidate = adjustmentPrompt.split(" ").pop();
+	const sourceSearchWord = sourceSearchCandidate?.startsWith("@") ? sourceSearchCandidate.slice(1) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full flex flex-col items-start relative gap-2",
+		children: [
+			AdjustmentPromptComponent,
+			filePointers.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IncludedFilesPreview, {
+				includedFiles: filePointers,
+				setIncludedFiles: setFilePointers
+			}),
+			sourceSearchWord !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, react.useRef)(null);
+	const editor = (0, slate_react.useSlate)();
+	const selection = (0, slate_react.useSlateSelection)();
+	const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();
+	const [isClient, setIsClient] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setIsClient(true);
+	}, []);
+	const isShown = isClient && isDisplayed && selection;
+	(0, react.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]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(HoveringInsertionPromptBox, {
+			editorState: editorState(editor, selection),
+			apiConfig: props.apiConfig,
+			performInsertion: (insertedText) => {
+				slate.Transforms.delete(editor, { at: selection });
+				slate.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__ */ (0, react_jsx_runtime.jsx)(DefaultElement, { ...props });
+			case "suggestion": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionElement, {
+				...props,
+				suggestionsStyle
+			});
+		}
+	};
+}
+const DefaultElement = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props.attributes,
+		children: props.children
+	});
+};
+const SuggestionElement = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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";
+	(0, react.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 (slate.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 (slate.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 = (0, slate_react.useSlateSelector)((state) => ({
+		selection: state.selection,
+		text: editorToText(state)
+	}));
+	const previousState = usePrevious(cursorState);
+	(0, react.useEffect)(() => {
+		if (!previousState) return;
+		if (cursorChangedWithoutTextChanged(previousState, cursorState)) props.setCursorMovedSinceLastTextChange(true);
+	}, [props.setCursorMovedSinceLastTextChange, cursorState]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.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 slate.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 = (0, react.useRef)(void 0);
+	(0, react.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.default.forwardRef((props, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoveringEditorProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.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.default.forwardRef((props, ref) => {
+	const autosuggestionsConfig = {
+		...defaultBaseAutosuggestionsConfig,
+		...props.baseAutosuggestionsConfig
+	};
+	const valueOnInitialRender = (0, react.useMemo)(() => props.value ?? "", []);
+	const [lastKnownFullEditorText, setLastKnownFullEditorText] = (0, react.useState)(valueOnInitialRender);
+	const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] = (0, react.useState)(false);
+	const [isUserInputActive, setIsUserInputActive] = (0, react.useState)(false);
+	const initialValue = (0, react.useMemo)(() => {
+		return [{
+			type: "paragraph",
+			children: [{ text: valueOnInitialRender }]
+		}];
+	}, [valueOnInitialRender]);
+	const editor = useCopilotTextareaEditor();
+	const { isDisplayed: hoveringEditorIsDisplayed, setIsDisplayed: setHoveringEditorIsDisplayed } = useHoveringEditorContext();
+	const insertText = (0, react.useCallback)((autosuggestion) => {
+		slate.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 = (0, react.useCallback)((event) => {
+		if (autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress(event, props.shortcut ?? "k")) {
+			event.preventDefault();
+			setHoveringEditorIsDisplayed(!hoveringEditorIsDisplayed);
+		}
+	}, [
+		hoveringEditorIsDisplayed,
+		setHoveringEditorIsDisplayed,
+		autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress
+	]);
+	(0, react.useEffect)(() => {
+		clearAutocompletionsFromEditor(editor);
+		if (currentAutocompleteSuggestion) addAutocompletionsToEditor(editor, currentAutocompleteSuggestion.text, currentAutocompleteSuggestion.point);
+	}, [currentAutocompleteSuggestion]);
+	const suggestionStyleAugmented = (0, react.useMemo)(() => {
+		return {
+			fontStyle: "italic",
+			color: "gray",
+			...props.suggestionsStyle
+		};
+	}, [props.suggestionsStyle]);
+	const renderElementMemoized = (0, react.useMemo)(() => {
+		return makeRenderElementFunction(suggestionStyleAugmented);
+	}, [suggestionStyleAugmented]);
+	const renderPlaceholderMemoized = (0, react.useMemo)(() => {
+		return makeRenderPlaceholderFunction({
+			top: void 0,
+			...props.placeholderStyle
+		});
+	}, [props.placeholderStyle]);
+	(0, react.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"} ${(0, tailwind_merge.twMerge)("bg-white overflow-y-auto resize-y", className ?? "")}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(slate_react.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__ */ (0, react_jsx_runtime.jsx)(TrackerTextEditedSinceLastCursorMovement, { setCursorMovedSinceLastTextChange }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoveringToolbar, {
+				apiConfig: autosuggestionsConfig.apiConfig,
+				contextCategories: autosuggestionsConfig.contextCategories,
+				hoverMenuClassname
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(slate_react.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 } = (0, _copilotkit_react_core.useCopilotContext)();
+	const { chatApiEndpoint: url, publicApiKey, credentials, properties } = copilotApiConfig;
+	({
+		...copilotApiConfig.headers,
+		...publicApiKey ? { [_copilotkit_shared.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {}
+	});
+	const { maxTokens, stop, temperature = 0 } = apiConfig;
+	return (0, react.useCallback)(async (editorState, abortSignal) => {
+		return await retry(async () => {
+			[
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.System,
+					content: apiConfig.makeSystemPrompt(textareaPurpose, getContextString([], contextCategories))
+				}),
+				...apiConfig.fewShotMessages,
+				editorState.textAfterCursor != "" ? new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: editorState.textAfterCursor
+				}) : null,
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`
+				}),
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`
+				})
+			].filter(Boolean);
+			const response = {};
+			let result = "";
+			for (const message of (0, _copilotkit_runtime_client_gql.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 _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextAfterCursor>While I was there I also picked up some apples, oranges, and bananas.</TextAfterCursor>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "This morning I woke up and went straight to the grocery store."
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.Assistant,
+		content: " When I arrived I went straight to the produce section and picked out a big watermelon. "
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.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 _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.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 _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.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 _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextAfterCursor>While I was there I also picked up some apples, oranges, and bananas.</TextAfterCursor>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextBeforeCursor>This morning I woke up and went straight to the grocery store.</TextBeforeCursor>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<InsertionPrompt>I bought a big watermelon</InsertionPrompt>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.Assistant,
+		content: "When I arrived I went straight to the produce section and picked out a big watermelon."
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.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 _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.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 _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<InsertionPrompt>add section about the optionholder's pro rata share</InsertionPrompt>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.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 _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextBeforeCursor>This morning I woke up and went straight to the grocery store. </TextBeforeCursor>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextToEdit>While I was there I picked up some apples, oranges, and bananas. </TextToEdit>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextAfterCursor>The grocery store was having a sale on fruit, so I decided to stock up.</TextAfterCursor>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<EditingPrompt>I also bought a big watermelon</EditingPrompt>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.Assistant,
+		content: "While I was there I picked up some apples, oranges, and bananas, and a big watermelon."
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextBeforeCursor>Yesterday, I spent the afternoon working on my new project.</TextBeforeCursor>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextToEdit>It's quite challenging and requires a lot of focus.</TextToEdit>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<TextAfterCursor>I'm really excited about the potential outcomes of this project.</TextAfterCursor>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.Role.User,
+		content: "<EditingPrompt>emphasize the complexity and my enthusiasm for the project</EditingPrompt>"
+	}),
+	new _copilotkit_runtime_client_gql.TextMessage({
+		role: _copilotkit_runtime_client_gql.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: _copilotkit_react_core.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 } = (0, _copilotkit_react_core.useCopilotContext)();
+	({ ...copilotApiConfig.publicApiKey ? { [_copilotkit_shared.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 = (0, _copilotkit_runtime_client_gql.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 = (0, react.useCallback)(async (editorState, insertionPrompt, documents, abortSignal) => {
+		return await retry(async () => {
+			const messages = [
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.System,
+					content: insertionApiConfig.makeSystemPrompt(textareaPurpose, getContextString(documents, contextCategories))
+				}),
+				...insertionApiConfig.fewShotMessages,
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`
+				}),
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`
+				}),
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<InsertionPrompt>${insertionPrompt}</InsertionPrompt>`
+				})
+			];
+			return runtimeClientResponseToStringStream(runtimeClient.generateCopilotResponse({
+				data: {
+					frontend: {
+						actions: [],
+						url: window.location.href
+					},
+					messages: (0, _copilotkit_runtime_client_gql.convertMessagesToGqlInput)((0, _copilotkit_runtime_client_gql.filterAgentStateMessages)(messages)),
+					metadata: { requestType: _copilotkit_runtime_client_gql.CopilotRequestType.TextareaCompletion }
+				},
+				properties: copilotApiConfig.properties,
+				signal: abortSignal
+			}));
+		});
+	}, [
+		insertionApiConfig,
+		getContextString,
+		contextCategories,
+		textareaPurpose
+	]);
+	const editingFunction = (0, react.useCallback)(async (editorState, editingPrompt, documents, abortSignal) => {
+		return await retry(async () => {
+			const messages = [
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.System,
+					content: editingApiConfig.makeSystemPrompt(textareaPurpose, getContextString(documents, contextCategories))
+				}),
+				...editingApiConfig.fewShotMessages,
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`
+				}),
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<TextToEdit>${editorState.selectedText}</TextToEdit>`
+				}),
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`
+				}),
+				new _copilotkit_runtime_client_gql.TextMessage({
+					role: _copilotkit_runtime_client_gql.Role.User,
+					content: `<EditingPrompt>${editingPrompt}</EditingPrompt>`
+				})
+			];
+			return runtimeClientResponseToStringStream(runtimeClient.generateCopilotResponse({
+				data: {
+					frontend: {
+						actions: [],
+						url: window.location.href
+					},
+					messages: (0, _copilotkit_runtime_client_gql.convertMessagesToGqlInput)((0, _copilotkit_runtime_client_gql.filterAgentStateMessages)(messages)),
+					metadata: { requestType: _copilotkit_runtime_client_gql.CopilotRequestType.TextareaCompletion }
+				},
+				properties: copilotApiConfig.properties,
+				signal: abortSignal
+			}));
+		});
+	}, [
+		editingApiConfig,
+		getContextString,
+		contextCategories,
+		textareaPurpose
+	]);
+	return (0, react.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.default.forwardRef((props, ref) => {
+	const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props;
+	const autosuggestionsConfig = (0, lodash_merge.default)(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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseCopilotTextarea, {
+		ref,
+		...forwardedProps,
+		baseAutosuggestionsConfig: {
+			...autosuggestionsConfig,
+			apiConfig: {
+				insertionOrEditingFunction,
+				autosuggestionsFunction
+			}
+		}
+	}) });
+});
+
+//#endregion
+exports.BaseCopilotTextarea = BaseCopilotTextarea;
+exports.CopilotTextarea = CopilotTextarea;
+exports.defaultAutosuggestionsConfig = defaultAutosuggestionsConfig;
+exports.defaultBaseAutosuggestionsConfig = defaultBaseAutosuggestionsConfig;
+//# sourceMappingURL=index.cjs.map